button.hjs-mobile-menu-trigger {
    border: 0;
    background: var(--hjs-mobile-menu-button-bg-color, #000);
    color: var(--hjs-mobile-menu-button-text-color, #fff);
    height: 50px;
    padding: 5px 12px;
    margin: 10px 0 0 auto;
    display: none;
    align-items: center;
    column-gap: 10px;
    border-radius: var(--hjs-mobile-menu-button-border-radius, 5px);;
}
.hjs-mobile-menu-trigger-icon,
.hjs-mobile-menu-trigger-icon:before,
.hjs-mobile-menu-trigger-icon:after {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--hjs-mobile-menu-button-text-color, #fff);
    position: relative;
    border-radius: 3px;
    transition: all 0.3s;
}
.hjs-mobile-menu-trigger-icon:before,
.hjs-mobile-menu-trigger-icon:after {
    content: '';
    position: absolute;
}
.hjs-mobile-menu-trigger-icon:before {
    top: -8px;
}
.hjs-mobile-menu-trigger-icon:after {
    bottom: -8px;
}
body.hjs-mobile-menu-active .hjs-mobile-menu-trigger-icon {
    background: none;
}
body.hjs-mobile-menu-active .hjs-mobile-menu-trigger-icon:before,
body.hjs-mobile-menu-active .hjs-mobile-menu-trigger-icon:after {
    opacity: 1;
    top: 0;
    bottom: 0;
}
body.hjs-mobile-menu-active .hjs-mobile-menu-trigger-icon:before {
    transform: rotate(45deg);
}
body.hjs-mobile-menu-active .hjs-mobile-menu-trigger-icon:after {
    transform: rotate(-45deg);
}


.hjs-mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--hjs-mobile-menu-container-bg-color, #000);
    height: 100%;
    z-index: 99998;
    width: 85%;
    max-width: 1000px;
    min-width: 280px;
    transform: translateX(-100%);
    transition: all 0.3s;
    overflow: auto;
}
.hjs-mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 99997;
    display: none;
    opacity: 0;
    transition: all 0.3s;
}

body.hjs-mobile-menu-active .hjs-mobile-menu-overlay {
    display: block;
    opacity: 1;
}
body.hjs-mobile-menu-active {
    overflow: hidden;
}
.hjs-mobile-menu-container ul li a {
    padding: 10px 10px 10px 5%;
    display: block;
    text-decoration: none;
    color: var(--hjs-mobile-menu-item-text-color, #fff);
    text-transform: uppercase;
    position: relative;
}

.admin-bar .hjs-mobile-menu-container {
    padding-top: 32px;
    overflow: auto;
}

.hjs-mobile-menu-container ul li .sub-menu a {
    padding-left: 10%;
}

.hjs-mobile-menu-container ul li .sub-menu .sub-menu a {
    padding-left: 15%;
}

.hjs-mobile-menu-container ul li .sub-menu .sub-menu .sub-menu a {
    padding-left: 20%;
}

.hjs-mobile-menu-container::-webkit-scrollbar {
    width: 0px;
}

.hjs-mobile-menu-container ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px transparent;
}

.hjs-mobile-menu-container ::-webkit-scrollbar-thumb {
    background: transparent;
}

.hjs-mobile-menu-container ::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

body.hjs-mobile-menu-active .hjs-mobile-menu-container {
    transform: translateX(0);
}

.hjs-mobile-menu-container ul li .sub-menu {
    display: none;
}
.hjs-mobile-menu-container ul li.active > .sub-menu {
    max-height: auto;
}
.hjs-mobile-menu-container .hjs-mobile-menu-submenu-arrow {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.hjs-mobile-menu-container .hjs-mobile-menu-submenu-arrow:after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    mask: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z"/></svg>');
    background-color: var(--hjs-mobile-menu-item-text-color, #fff);
}

.hjs-mobile-menu-container ul li a:hover,
.hjs-mobile-menu-container ul li a:focus,
.hjs-mobile-menu-container ul li.current-menu-item > a {
    background: var(--hjs-mobile-menu-item-hover-bg-color, #222);
    color: var(--hjs-mobile-menu-item-hover-text-color, #fff);
}
.hjs-mobile-menu-container ul li a:hover .hjs-mobile-menu-submenu-arrow:after,
.hjs-mobile-menu-container ul li a:focus .hjs-mobile-menu-submenu-arrow:after,
.hjs-mobile-menu-container ul li.current-menu-item > a .hjs-mobile-menu-submenu-arrow:after {
    background-color: var(--hjs-mobile-menu-item-hover-text-color, #fff);
}
.hjs-mobile-menu-container li.active > a .hjs-mobile-menu-submenu-arrow:after {
    transform: rotate(180deg);
}
@media only screen and (max-width: 1023px) {
    button.hjs-mobile-menu-trigger {
        display: flex;
    }
}
@media only screen and (max-width: 739px) {
    .hjs-mobile-menu-trigger-text {
        display: none;
    }
}
