/*Main Layout*/
html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#app,
.main,
.main > .top-row,
.main > .content:has(.dashboard-container),
.main > .content:has(.elevate-grid),
.main > .content:has(.page-container),
.main > .content:has(.assessment-container) {
    display: flex;
}

#app, .main {
    flex-direction: column;
}

.main {
    height: 100vh;
    min-height: 0;
}

    .main > .top-row {
        align-items: center;
        height: var(--navbar-height);
        min-height: var(--navbar-height);
        border-bottom: 1px solid #F1F1F1 !important;
        z-index: 1100;
        background: #fff;
    }

    .main > .content {
        flex-grow: 1;
        min-height: 0;
        padding: .5px;
        background: #fff!important;
    }

        .main > .content > .elevate-grid,
        .main > .content > .page-container {
            flex-grow: 1;
            overflow-y: auto !important;
            margin-top: 0 !important;
            padding: 1.5rem !important;
        }

        .main > .content:has(.assessment-container) {
            flex-direction:column;
            height:100%!important;
        }

/* Sidebar */
.main-side-navigation.e-sidebar {
    background: #fff !important;
    border-right: 1px solid #F1F1F1 !important;
    overflow: hidden !important;
}

    .main-side-navigation.e-sidebar ul {
        overflow: hidden !important;
    }

    .main-side-navigation.e-sidebar .logo-container {
        height: var(--navbar-height);
        display: flex;
        align-items: center;
        justify-content: start;
    }

    .main-side-navigation.e-sidebar.e-close .logo-container {
        justify-content: center;
    }

    .main-side-navigation.e-sidebar.e-open .logo-container img.banner-logo {
        margin-left: 12px;
    }

    .main-side-navigation.e-sidebar .main-nav-container {
        height: calc(100vh - var(--navbar-height)) !important;
        min-height: 0;
    }

    /* Scrollbar */
    .main-side-navigation.e-sidebar .top-menu {
        overflow-x: hidden !important;
    }

        .main-side-navigation.e-sidebar .top-menu.overflow-y-auto::-webkit-scrollbar {
            width: 5px;
        }

        .main-side-navigation.e-sidebar .top-menu.overflow-y-auto::-webkit-scrollbar-thumb {
            background-color: #ddd !important;
        }

            .main-side-navigation.e-sidebar .top-menu.overflow-y-auto::-webkit-scrollbar-thumb:hover {
                background-color: #555;
            }

        .main-side-navigation.e-sidebar .top-menu.overflow-y-auto::-webkit-scrollbar-track {
            background: transparent !important;
        }

    .main-side-navigation.e-sidebar .bottom-menu {
        display: none;
    }

    /* Treeview base */
    .main-side-navigation.e-sidebar .e-treeview {
        padding: 8px;
        overflow: hidden !important;
    }

    .main-side-navigation.e-sidebar .e-text-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Active item */
    .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item.e-active > .e-text-content {
        background: #F1F3F9 !important;
        border-radius: var(--bs-corner-radius) !important;
    }

        .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item.e-active > .e-text-content .e-list-text,
        .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item.e-active > .e-text-content .e-list-icon:before {
            color: #405A97 !important;
            font-weight: 600 !important;
        }

    /* Sidebar open/close */
    .main-side-navigation.e-sidebar .e-list-text {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px !important;
        color: #232323 !important;
        text-shadow: 2px 2px 6px rgba(0,0,0,0.05);
    }

    .main-side-navigation.e-sidebar.e-open .e-list-text {
        display: inline-flex;
        justify-content: space-between;
        flex-grow: 1 !important;
        padding-left: 0 !important;
        font-size: 15px;
        line-height: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left !important;
    }

    .main-side-navigation.e-sidebar.e-close .e-list-text {
        margin: 0px;
        padding: 0px;
    }

        .main-side-navigation.e-sidebar.e-close .e-list-text .menu-text {
            display: none !important;
        }

    .main-side-navigation.e-sidebar.e-close ul > li .e-text-content .e-list-icon {
        margin: 0 auto !important;
    }

    .main-side-navigation.e-sidebar .count-indicator {
        right: 8px;
    }

    .main-side-navigation.e-sidebar .count-indicator.fa-solid.fa-circle {
        display: inline;
        font-size: 8px;
        top: 7px;
    }

    .main-side-navigation.e-sidebar .count-indicator.badge.badge-danger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 23px;
        height: 16px;
        border-radius: 16px;
        background: #F3485C !important;
        color: #fff !important;
        font-weight: 600;
        font-size: 10px !important;
        font-style: normal !important;
        font-family: Montserrat, sans-serif !important;
    }

    .main-side-navigation.e-sidebar .e-list-item.e-level-1 > 
        .e-text-content > .e-list-text > 
        .count-indicator.badge.badge-danger {
        right: 23px;
    }

    .main-side-navigation.e-sidebar.e-close .count-indicator.badge.badge-danger {
        display: none;
    }

    .main-side-navigation.e-sidebar.e-open .count-indicator.fa-solid.fa-circle {
        display: none;
    }

    .main-side-navigation.e-sidebar.e-open ul li ul li .e-text-content > * {
        margin-left: 6px;
    }

    /* Hide toggle arrows depending on state */
    .main-side-navigation.e-sidebar.e-close li.e-list-item:has(.fa-left-to-line),
    .main-side-navigation.e-sidebar.e-open li.e-list-item:has(.fa-right-to-line) {
        display: none !important;
    }

    /* List + icons */
    .main-side-navigation.e-sidebar .e-listview .e-list-icon,
    .main-side-navigation.e-sidebar .e-list-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
    }

        .main-side-navigation.e-sidebar .e-list-icon:before {
            font-size: 15px !important;
            color: #aaa !important;
            text-shadow: 2px 2px 6px rgba(0,0,0,0.05);
        }

    /* Tree structure */
    .main-side-navigation.e-sidebar .e-list-parent.e-ul,
    .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item,
    .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item .e-text-content,
    .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item .e-fullrow,
    .main-side-navigation.e-sidebar .e-list-parent .e-list-icon {
        margin: 0;
        padding: 0;
    }

    .main-side-navigation.e-sidebar .e-treeview > .e-ul {
        padding: 3px !important;
    }

    .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item {
        display: block;
        position: relative;
    }

        .main-side-navigation.e-sidebar .e-list-parent .e-list-icon,
        .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item .e-text-content,
        .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item .e-fullrow {
            height: 50px !important;
            min-height: auto !important;
        }

        .main-side-navigation.e-sidebar .e-list-parent.e-ul li.e-list-item .e-fullrow {
            background: transparent;
            border: 0;
        }

    .main-side-navigation.e-sidebar .e-icon-expandable,
    .main-side-navigation.e-sidebar .e-icon-collapsible {
        display: none;
    }

    .main-side-navigation.e-sidebar.e-close .e-ul > li.e-list-item:has(.e-list-parent) {
        border-top: 1px solid #ccc !important;
        padding-top: 4px;
        margin-top:4px;
    }

    .main-side-navigation.e-sidebar.e-close .e-ul li.e-list-item:has(.e-list-parent.e-ul.e-display-none) {
        border-top: none !important;
        padding-top: 0px;
        margin-top: 0px;
    }

    .main-side-navigation.e-sidebar.e-close .e-ul li.e-list-item:has(.e-list-parent.e-ul) > .e-ul > li:last-child {
        border-bottom: 1px solid #ccc !important;
        padding-bottom: 4px;
        margin-bottom: 4px;
    }

    .main-side-navigation.e-sidebar.e-close .e-ul li.e-list-item:has(.e-list-parent.e-ul.e-display-none) > .e-ul > li:last-child {
        border-bottom: none !important;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    /* Expand/collapse arrows */
    .main-side-navigation.e-sidebar .e-ul li.e-list-item:has(.e-list-parent.e-ul) > .e-text-content:after {
        font-family: "Font Awesome 6 Pro", sans-serif !important;
        content: "\f107";
        position: absolute;
        right: 10px;
        color: #aaa;
        transform: rotate(180deg);
        transition: transform 300ms ease;
    }

    .main-side-navigation.e-sidebar.e-close .e-ul li.e-list-item:has(.e-list-parent.e-ul) > .e-text-content:after {
        display:none;
    }

    .main-side-navigation.e-sidebar .e-ul li.e-list-item:has(.e-list-parent.e-ul.e-display-none) > .e-text-content:after {
        transform: rotate(0deg);
    }

    /* Treeview item states */
    .main-side-navigation.e-sidebar .e-treeview .e-list-parent.e-ul li.e-list-item .e-text-content {
        background: rgba(255,255,255,0.1);
        border-radius: var(--bs-corner-radius);
        justify-content: left !important;
        transition: all .4s ease;
    }

    .main-side-navigation.e-sidebar .e-treeview .e-list-parent.e-ul .e-ul li.e-list-item .e-text-content {
        background: rgba(255,255,255,0.08);
    }

    .main-side-navigation.e-sidebar .e-treeview .e-list-parent.e-ul li.e-list-item.e-hover > .e-text-content {
        background: rgba(255,255,255,0.4);
    }

    .main-side-navigation.e-sidebar .e-treeview .e-list-parent.e-ul li.e-list-item.e-active > .e-text-content,
    .main-side-navigation.e-sidebar .e-treeview .e-list-parent.e-ul li.e-list-item.e-active:has(.selected) > .e-text-content {
        background: rgba(255,255,255,0.3);
    }

/* Top Menu */
.main > .top-row .e-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    /* User circle (menu trigger) */
    .main > .top-row .e-menu-item.user-circle-initials,
    .main > .top-row .e-menu-item.user-circle-initials.e-active {
        border: 2px solid #444 !important;
        border-radius: 50% !important;
        width: 45px !important;
        height: 45px !important;
        padding: 0px !important;
        margin: 0px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 600;
        font-size: 18px;
        line-height: 30px;
        letter-spacing: 0%;
    }

        .main > .top-row .e-menu-item.user-circle-initials .e-icons.e-caret {
            display: none;
        }