/* ===============================
   LAYOUT
================================ */

.page-layout{
    display:flex;
    align-items:flex-start;
}

/* ===============================
   MOBILE HEADER
================================ */

.mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:60px;
    padding:0 10px;
    background:#fff;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0;
    width:100%;
    z-index:3000;
}

@media (min-width:992px){
.mobile-header{display:none;}
}


/* ===============================
   SIDEBAR
================================ */

#headerSidebar{

    width:300px;
    flex:0 0 300px;

    background:#fff;
    border-left:1px solid #eee;

    overflow-y:auto;
}


/* desktop */

@media (min-width:992px){

#headerSidebar{

    position:sticky;
    top:0;

    height:100vh;

}

}


/* mobile */

@media (max-width:991px){

#headerSidebar{

    position:fixed;
    top:0;
    right:0;

    width:-webkit-fill-available;
    height:100vh;

    transform:translateX(110%);
    transition:transform .3s ease;

    z-index:2000;
    box-shadow:-2px 0 12px rgba(0,0,0,.15);

}

#headerSidebar.open{
    transform:translateX(0);
}

}


/* ===============================
   OVERLAY
================================ */

.sidebar-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.4);

    display:none;

    z-index:1500;
}

.sidebar-overlay.show{
    display:block;
}


/* ===============================
   NAV MENU
================================ */

#mainNav .dropdown-menu{

    display:none;
    margin:0;
    padding-right:15px;

}

#mainNav li.open > .dropdown-menu{
    display:block;
}

#mainNav li:hover > .dropdown-menu{
    display:none;
}


/* ===============================
   TREE STYLE
================================ */

#headerSidebar #mainNav li > ul.dropdown-menu{

    margin-right:16px;
    padding-right:9px;

    border-right:2px solid #c9cde566;

    position:static;
    float:none;

    background:transparent;
    box-shadow:none;

    opacity:0;
    max-height:0;

    overflow:hidden;

    transition:.3s ease;

}

#headerSidebar #mainNav li.open > ul.dropdown-menu{

    opacity:1;
    max-height:1000px;

    border-right-color:#3b82f6;

}


/* ===============================
   MENU LINKS
================================ */

#headerSidebar #mainNav ul.dropdown-menu > li > a{

    color:#000f2a;
    font-size:13px;

    padding:8px 20px;

    display:block;

    transition:color .2s;

}

#headerSidebar #mainNav ul.dropdown-menu > li > a:hover{
    color:#3b82f6;
}


/* ===============================
   PUSH MENU
================================ */

.push-menu{

    position:absolute;
    inset:0;
    background:#eff4fc;
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:2500;
    overflow-y:auto;
        height:fit-content;
}

.push-menu.active{
    transform:translateX(0);
}

#headerSidebar.push-active #mainNav{
    display:none;
}

.push-header{

    padding:12px 15px;
    border-bottom:1px solid #eee;

}

/* ===============================
   MOBILE ONLY
================================ */

.mobile-only{display:none;}

@media (max-width:991px){
.mobile-only{display:block;}
.scrollable {position: inherit !important;}
}


}