/*Ham-menu*/
.ham-menu {
    display: none;
    position: absolute;
    z-index: 2;
    right: 16px;
    width: 1.7rem;
    height: 2rem;
    margin-top: 5px;
    cursor: pointer;
}


.ham-menu-icons {
    position: absolute;
    top: 0;
    right: 1rem;
    left: 1rem;
    width: auto;
    height: 100%;
}

/* MENU ICON */

.ham-lines,
.ham-lines:before,
.ham-lines:after {
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    background: #ffffff;
    transition: 0.3s;
}

.navbar-ul {
    display: contents;
}

.ham-lines {
    height: 3px;
    margin-top: -2px;
    top: 50%;
}

    .ham-lines:before,
    .ham-lines:after {
        content: '';
        height: 100%;
        /* Try different values here: .25rem, .5rem, .2rem, 5rem, 10rem... */
        transform-origin: 5rem center;
    }

    .ham-lines:before {
        top: 8px;
    }

    .ham-lines:after {
        top: -8px;
    }

/* CLOSE ICON */

.close {
    transform: scale3d(0.8, 0.8, 0.8);
}

    .close .ham-lines {
        margin-top: 18px;
        background: background: #ffffff;
    }

        .close .ham-lines:before,
        .close .ham-lines:after {
            top: 0;
            transform-origin: 50% 50%;
        }

        .close .ham-lines:before {
            transform: rotate3d(0, 0, 1, 45deg);
        }

        .close .ham-lines:after {
            transform: rotate3d(0, 0, 1, -45deg);
        }

/*sidebar*/
.sidebar-menu-container {
    position: fixed;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100vh;
    background: #1e386c66;
    top: 0px;
}

    .sidebar-menu-container .sidebar-logo {
        padding: 13px 10px 8px 20px;
        border-bottom: 1px dashed var(--color-yellow-dark);
    }

        .sidebar-menu-container .sidebar-logo img {
            width: 140px;
        }

    .sidebar-menu-container .sidebar-menu {
        position: fixed;
        left: -50%;
        width: 70%;
        height: 100vh;
        background-color: #1e386c;
        transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s;
        padding:10px;
    }

        .sidebar-menu-container .sidebar-menu .sidebar-menu-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 50px;
            padding-left: 10px;
            font-weight: bold;
            color: #ffffff;
            transition: 0.3s ease-in-out;
            cursor: pointer;
        }

            .sidebar-menu-container .sidebar-menu .sidebar-menu-item .multi-menu {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 20px;
            }

            .sidebar-menu-container .sidebar-menu .sidebar-menu-item a {
                color: #ffffff !important;
            }

            .sidebar-menu-container .sidebar-menu .sidebar-menu-item:hover {
                background-color: var(--color-primary);
            }

    .sidebar-menu-container .sidebar-sub-menu {
        margin-top: 5px;
    }

        .sidebar-menu-container .sidebar-sub-menu li {
            height: 35px;
            display: flex;
            align-items: center;
            padding: 0px 15px;
            font-weight: 300;
            transition: 0.3s ease-in-out;
        }

            .sidebar-menu-container .sidebar-sub-menu li a {
                display: flex;
                align-items: center;
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                color: #ffffff !important;
            }

            .sidebar-menu-container .sidebar-sub-menu li:hover {
                background-color: #0b1a31;
            }

    .sidebar-menu-container .permission-list, .sidebar-menu-container .sms-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sidebar-menu-container .sidebar-sub-menu .permission-sub-list-container, .sidebar-menu-container .sidebar-sub-menu .sms-sub-list-container {
        display: flex;
        flex-direction: column !important;
    }

    .sidebar-menu-container .sidebar-lang-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        gap: 20px;
    }

    .sidebar-menu-container .sidebar-lang, .selected-lang {
        padding: 7px;
        border-radius: 100px;
        border: 1px solid var(--color-accent);
        font-weight: bold;
        color: var(--color-accent);
    }

.sidebar-sub-menu-permission, .sidebar-sub-menu-sms {
    width: 100%;
}

    .sidebar-sub-menu-permission a, .sidebar-sub-menu-sms a {
        padding: 12px 8px;
    }

        .sidebar-sub-menu-permission a:hover, sidebar-sub-menu-sms a:hover {
            text-shadow: 0px 0px 2px rgba(255,255,255,0.7);
        }

.selected {
    height: auto !important;
    padding: 20px 0;
    background-color: #0E213D !important;
    color: #fdc209 !important;
    cursor: pointer;
}

.permission-selected {
    padding-top: 10px;
}

.adjust-permission-height {
    height: auto !important;
    background-color: #0b1a31;
}


.selected:hover {
    background-color: var(--color-primary-dark) !important;
}

.selected-lang {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
}

.show-sidebar {
    left: 0 !important;
    height: 100vh;
    transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s;
}

.hidden {
    display: none !important;
}

.selected {
    height: auto !important;
    padding: 20px 0;
    background-color: #0E213D !important;
    color: #fdc209 !important;
    cursor: pointer;
}


@media screen and (max-width: 1050px) {

    .ham-menu {
        display: block;
    }

    .sidebar-menu-container {
        display: block;
    }

    .jsf-view-generic[data-name=Index] header .langs {
        display: none;
    }

    .jsf-view-generic[data-name=Index] header .menu {
        display: none !important;
    }
}

@media screen and (min-width: 1050px) {
    #mobile-sidebar-header {
        display: none;
    }
}