:root {
    --primary-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    --height-menu-item: 60px;
    --width-menu-item-icon: 60px;
    --color-menu-item-level-1: rgb(35, 35, 35);
    --color-menu-item-level-2: rgb(55, 55, 55);
    --color-menu-item-level-3: rgb(65, 65, 65);
    --font-size-main-menu: 14px;
    --color-menu-item-active: rgba(243, 182, 8, 0.98);
    --color-menu-item-hover: rgba(243, 182, 8, .65);
    --width-closed-menu: 60px;
    --width-opened-menu: 270px;
    --menu-toggle-transition-speed: 50ms;
    --color-menu-secondary-hover: #e7ab00fa;
    --padding-menu-item-level-2: 6px 10px 6px 20px;
}

/* Nav Bar */

#navbar {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    filter: drop-shadow(0 1px 3px rgba(150, 150, 150, .3));
    z-index: 10;
    width: var(--width-closed-menu);
    transition-duration: 150ms;
    transition-property: width;
}

    #navbar.active {
        width: var(--width-opened-menu);
        transition-duration: 150ms;
        transition-property: width;
    }

    #navbar::-webkit-scrollbar {
        display: none;
    }

/* Menu */

div#main-menu {
    margin: 0;
    padding: 0;
    width: var(--width-closed-menu);
    height: 100%;
    font-family: var(--primary-font-family);
    font-size: var(--font-size-main-menu);
    font-weight: 400;
    background-size: 100%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.20);
    z-index: 10;
    transition: width var(--menu-toggle-transition-speed) ease;
    overflow: auto;
    box-sizing: border-box;
    user-select: none !important;
}

    div#main-menu::-webkit-scrollbar {
        display: none;
    }

#main-menu.active {
    width: var(--width-opened-menu);
    transition: width var(--menu-toggle-transition-speed) ease;
}

#main-menu a {
    color: rgb(60, 60, 60);
    text-decoration: none;
}

div.main-menu-bg {
    background: rgba(250, 250, 250, 0.96);
    height: 100%;
    backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

    div.main-menu-bg::-webkit-scrollbar {
        display: none;
    }

/* Toggle Menu */

#toggle-menu {
    background-color: rgba(255, 255, 255, .96);
    position: fixed;
    z-index: 1000;
    width: inherit
}

    #toggle-menu > div {
        backdrop-filter: blur(20px);
    }

    #toggle-menu:hover {
        cursor: pointer;
        background-color: var(--color-menu-item-active);
    }

div.menu-shadow {
    height: 100%;
    overflow: auto;
    -webkit-box-shadow: inset 0 90px 108px -40px rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0 90px 108px -40px rgba(0,0,0,0.15);
    box-shadow: inset 0 90px 108px -40px rgba(0,0,0,0.15);
}

ul#menu-item-list {
    margin: 0;
    padding: 0;
    transition: width 600ms ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
}

nav.main-menu::-webkit-scrollbar {
    display: none;
}

.main-menu > ul.menu {
    padding: 0;
    margin: 0;
    height: 100%;
    flex-grow: 1;
}

/* Menu Item */

.menu-item {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    animation-delay: 5s;
    animation: fadeOut ease-in-out 0.6s;
    animation-name: main-menu-hide;
    animation-duration: 0.5s;
    opacity: 1;
}

    .menu-item.empty {
        height: 60px !important;
    }

        .menu-item.empty:hover {
            background: none;
            cursor: default;
        }

ul.ns-dropdown-content {
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
}

/* Menu Item Icon */

.menu-item-icon {
    margin: 0;
    padding: 0;
    height: var(--height-menu-item);
    min-height: var(--height-menu-item);
    width: var(--width-menu-item-icon);
    min-width: var(--width-menu-item-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .menu-item-icon.active {
        transition-duration: 1s;
        transition-property: all;
    }

    .menu-item-icon > img {
        width: 24px;
        height: 24px;
    }

/* Menu Item Label */

.menu-item-label {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

    .menu-item-label > label {
        font-weight: 600;
        margin: 0;
    }

        .menu-item-label > label:hover {
            cursor: pointer;
        }

/* Selected Menu Item */

div.menu-item:hover {
    cursor: pointer;
    background: var(--color-menu-item-hover);
    box-shadow: none;
    opacity: 1;
    transition-duration: 300ms;
    transition-property: all;
}

/* Level 1 */

.menu-item.level-1 {
    height: var(--height-menu-item);
}

div.menu-item.active {
    background-color: var(--color-menu-secondary-hover);
}

.menu-item[data-is-link=true] > a {
    font-weight: 400 !important;
    color: #173f71 !important;
}

.menu-item[data-is-link=false] > .menu-item-label {
    font-weight: 400;
    color: gray !important;
}

.menu-item[data-is-link=false]:hover {
    background-color: transparent;
    cursor: default;
}

/* Chevron */

.arrow-icon {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .arrow-icon > .icon {
        width: 20px;
        height: 20px;
        background-image: url("icons/chevron_right.png");
        background-size: 20px;
    }

    .arrow-icon .icon.active {
        background-image: url("icons/chevron_down.png");
    }

/* Level 2 */

.menu-item[data-level="2"] > .menu-item-label {
    font-weight: 500;
}

div.menu-item.level-2 {
    padding: 10px 10px 10px 10px;
}

ul.submenu {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

div.menu-item[data-has-items="false"] > .menu-item-label {
    font-weight: 400;
}

/* Level 3 */

div.menu-item[data-level="3"] {
    padding: 6px 10px 6px 20px;
}

    div.menu-item[data-level="3"] > a {
        font-weight: 400;
    }

/* Dropdown */

.ns-dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
}

.ns-dropdown-content {
    display: none;
    opacity: 0;
    transition-property: all;
    transition-duration: 500ms;
}

.ns-dropdown-show {
    display: block;
    transition-property: all;
    transition-duration: 500ms;
}

.ns-dropdown-content.active {
    display: flex;
    opacity: 1;
    transition-property: all;
    transition-duration: 500ms;
}

/* Admin panel */

div#admin-panel {
    width: var(--width-closed-menu);
    height: 60px;
    background: rgba(60, 60, 50, 0.95);
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.50);
    display: flex;
    align-items: center;
    flex-direction: row;
    backdrop-filter: blur(20px);
}

    div#admin-panel.active {
        width: var(--width-opened-menu);
    }

    div#admin-panel > div > a > div {
        display: flex;
        align-items: center;
        flex-direction: row;
        text-decoration: none;
        color: white;
    }

#admin-panel-label {
    display: none !important;
}

    #admin-panel-label.active {
        display: flex !important;
    }