    /*========== HEADER ==========*/
    
    .dheader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
        padding: 0 1rem;
        z-index: 100;
    }
    
    .header__container {
        display: flex;
        align-items: center;
        height: 3.5rem;
        justify-content: space-between;
    }
    
    .header__img {
        background: url("static/theme/img/al.jpg");
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-left: 5px;
    }
    
    .header__logo {
        color: #19181B;
        font-weight: 500;
        display: none;
    }
    
    .header__search {
        display: flex;
        padding: .40rem .75rem;
        background-color: #F4F0FA;
        border-radius: .25rem;
    }
    
    .header__input {
        width: 100%;
        border: none;
        outline: none;
        background-color: #F4F0FA;
    }
    
    .header__input::placeholder {
        font-family: 'Poppins', sans-serif;
        color: #58555E;
    }
    
    .header__icon,
    .header__toggle {
        font-size: 1.2rem;
    }
    
    .header__toggle {
        color: #19181B;
        cursor: pointer;
    }
    /*========== NAV ==========*/
    
    .dnav {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        padding: 5px 5px;
        box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
        z-index: 100;
        transition: .4s;
        background-color: #1d1e2d; /*ui mend*/
    }
    
    .nav__container {
        height: 100%;
        display: flex;
        flex-direction: column;
        /*justify-content: space-between;*/
        padding-bottom: 3rem;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
    }
    
    .nav__container::-webkit-scrollbar {
        display: none;
    }
    
    .nav__ext-container {
        height: 76vh;
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-y: auto;
        overflow-x: hidden;
        margin-left: 5px;
        margin-right: 5px;
        scrollbar-width: none;
    }
    
    .nav__logo {
        font-weight: 600;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        overflow: hidden;
    }
    
    .nav__list,
    .nav__items {
        display: grid;
    }
    
    .nav__list {
        row-gap: 1rem;
        list-style-type: none;
        display: inherit;
        height: 500px;
    }
    
    .nav__items {
        row-gap: 1.5rem;
        list-style-type: none;
        height: 300px;
    }
    
    .nav__subtitle {
        font-size: .938rem;
        text-transform: uppercase;
        letter-spacing: .1rem;
        color: #A5A1AA;
    }
    
    .nav__link {
        height: 50px;
        display: flex;
        align-items: center;
        color: #e8e8e8;
        overflow-y: hidden;
        overflow-x: hidden;
        list-style: none;
        /*padding-left: 5px;*/
        padding-right: 5px;
    }
    
    .nav__link:active {
        /*color: rgb(56, 34, 88);*/
        color: #fff;
    }
    
    .nav__icon {
        font-size: 1.2rem;
        margin-right: .5rem;
    }
    
    .nav__name {
        font-size: 12pt;
        font-weight: 500;
        white-space: nowrap;
        position: absolute;
        bottom: 20px;
        margin-left: 60px;
        margin-bottom: 10px;
        overflow: hidden;
    }
    
    .nav__logout {
        margin-bottom: 20px;
        overflow: hidden;
    }
    /* Dropdown */
    
    .nav__dropdown {
        /*transition: .4s ease-in-out;*/
        height: 40px;
        /*transition-delay: 4s;
        -webkit-transition-delay: 4s;   
        -moz-transition-delay: 4s;
        -ms-transition-delay: 4s;   
        -o-transition-delay: 4s;
        transition: 0s height;
    	transition-delay:1s; */
    }

	.nav__dropdown>li{
		transition: all .4s;
		transition-delay: .5s;
	}

	.nav__dropdown>li:active{
		height: fit-content; /*xxx: the delay only works if the height is fixed*/
		/*transition-delay: .5s;*/    
	}
    
    .nav__dropdown-collapse {
        background-color: #191a28;
        border-radius: 5px;
        padding: 15px;
        margin-right: 10px;
        width: 90%;
        overflow: hidden;
    }

    .nav__dropdown>.dropdown>.dropdown-menu {
        background-color:#191a28;
        border-radius:1px;
        border:#fff;
        width:97%;
        position:relative;
        box-shadow:none;
        margin-bottom:5px;
        padding-top:5px;
        padding-bottom:5px;
    }

    .nav__dropdown>.dropdown>.dropdown-menu>li>a:hover{
        background-color:rgba(109, 111, 138, 0.46);
        color:#fff;
        border-radius:0;    
    }

    .nav__dropdown-collapse>li>a {
        color:#e8e8e8;
    }
    
    .nav__dropdown-content {
        display: grid;
        row-gap: .5rem;
        padding: .75rem 2.5rem .75rem 1.8rem;
    }
    
    .nav__dropdown-item {
        font-size: .75rem;
        font-weight: 500;
        color: #58555e;
    }
    
    .nav__dropdown-item:hover {
        color: #6923D0;
    }
    
    .nav__dropdown-icon {
        margin-left: auto;
        transition: .4s;
    }
    /* Rotate icon arrow */
    
    .nav__dropdown:hover .nav__dropdown-icon {
        transform: rotate(180deg);
    }
    /*===== Show menu =====*/
    
    .show-menu {
        left: 0;
    }
    /*===== Active link =====*/
    
    .active {
        /*color: #6923D0;*/
        color: #fff;
    }
    /*===== Active link =====*/
    
    .topnav {
        overflow: hidden;
        background-color: #fff;
        position: relative;
    }
    
    .topnav #myLinks {
        display: none;
    }
    
    .topnav a {
        color: rgb(56, 34, 88);
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }
    
    .topnav a.icon {
        background: #fff;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .topnav a:hover {
        background-color: #ddd;
        color: rgb(56, 34, 88);
    }
    /* ========== MEDIA QUERIES ==========*/
    /* For small devices reduce search*/
    
    @media screen and (min-width: 768px) {
        .dheader {
            padding: 0 3rem 0 6rem;
        }
        .header__container {
            height: 3.5rem + .5rem;
        }
        .header__search {
            width: 300px;
            padding: .55rem .75rem;
        }
        .header__toggle {
            display: none;
        }
        .header__logo {
            display: block;
        }
        .header__img {
            width: 40px;
            height: 40px;
            order: 1;
        }
        .dnav {
            left: 0;
            padding: 5px;
            width: 59px;
            /* Reduced navbar 59 sini */
        }
        .nav__items {
            row-gap: 1.7rem;
            margin-left: 15px;
            list-style-type: none;
            height: 300px;
        }
        .nav__icon {
            font-size: 1.3rem;
        }
        /* Element opacity */
        .nav__logo-name,
        .nav__name,
        .nav__subtitle,
        .nav__dropdown-icon {
            opacity: 0;
            transition: .3s;
        }
        /* Navbar expanded */
        .dnav:hover,
        .dnav:focus,
        .dnav:active {
            width: 23%;
        }
        .dnav:hover~.container,
        .dnav:focus~.container,
        .dnav:active~.container {
            margin-left: 23%;
            margin-right: 0;
            min-width: 77%;
        }
        /* Visible elements */
        .dnav:hover .nav__logo-name {
            opacity: 1;
        }
        .dnav:hover .nav__subtitle {
            opacity: 1;
        }
        .dnav:hover .nav__name {
            opacity: 1;
        }
        .dnav:hover .nav__dropdown-icon {
            opacity: 1;
        }


        /*.nav__dropdown:hover {
            height: fit-content;
            transition: height .4s ease-in-out 2s;
			transition-delay: 5s;
        	-webkit-transition-delay: 5s;
        	-moz-transition-delay: 5s;
        	-ms-transition-delay: 5s;
        	-o-transition-delay: 5s;
        }*/

        .nav__dropdown>li>ul>li:hover{
            /*background-color:#454545;*/
            padding-left: 5px;
            padding-right:5px;
            border-radius: 2px;
        }

        .nav__dropdown>li>ul>li>a:hover{
            text-decoration: none;
        }

        .nav__dropdown:active,
        .nav__dropdown-collapse:active {
            color: blue;
        }
        .user__img {
            background: url("static/theme/img/al.jpg");
            background-size: 15px 15px;
            position: absolute;
            align-items: center;
        }
        .menu__icon {
            background: url("static/theme/img/al.jpg");
            background-size: 15px 15px;
            position: absolute;
            align-items: center;
        }
        .submenu__title {
            font-size: 14pt;
            font-weight: 500;
            /* color: rgb(56, 34, 88);*/
            color: #fff;
            text-align: left;
        }
    }
