/* =====================================================
   SIDE NAVIGATION
===================================================== */

:root{
    --side-nav-bg:#122b67fa;
    --side-nav-width:300px;
}

.side-navigation{
    position:fixed;
    left:0;
    top:0;
    width:var(--side-nav-width);
    height: 600px;
    /*height:100dvh;*/
    background:#122b67fa;
    /* Above all existing header/nav */
    z-index:999999;

    overflow-y:auto;
    overflow-x:hidden;

 

    transition:
        transform .35s ease,
        visibility .35s ease;

    scrollbar-width:thin;
}

/* subtle graphics */
.side-navigation::before{
    content:"";
    position:absolute;
    width:180px;
    height:920px;
    border:35px solid rgba(255,255,255,.04);
    border-radius:50%;
    right:-90px;
    top:90px;
    pointer-events:none;
}

.side-navigation::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border:20px solid rgba(255,255,255,.035);
    border-radius:50%;
    left:-60px;
    bottom:80px;
    pointer-events:none;
}


/* =====================================================
   TOP / BRAND
===================================================== */

.side-nav-header{
    min-height:80px;
    align-items:center;
    justify-content:space-between;
    padding:15px 16px 15px 20px;
    border-bottom:1px solid rgba(255,255,255,.13);
    position:relative;
    z-index:2;
}

.side-brand{
    color:#fff;
    text-decoration:none;

    display:flex;
    align-items:center;
    gap:11px;

    font-size:18px;
    font-weight:700;
}

.side-brand-icon{
    width:42px;
    height:42px;

    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#122b67;
    background:#fff;

    font-size:19px;

    box-shadow:0 6px 15px rgba(0,0,0,.15);
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.side-nav-close{
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:8px;
    background:rgba(255,255,255,.10);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s;
    margin-top: -60px;
}

.side-nav-close:hover{
    background:#fff;
    color:#122b67;
    transform:rotate(90deg);
}


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

.side-nav-menu{
    list-style:none;
    padding:15px 12px 35px;
    margin:0;

    position:relative;
    z-index:2;
}

.side-nav-menu li{
    margin-bottom:4px;
}

.side-nav-menu > li > a,
.side-dropdown-btn{
    width:100%;
    min-height:49px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 13px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:rgba(255,255,255,.90);
    text-decoration:none;
    font-size:15px;
    font-weight:900;
    text-align:left;
    transition:.25s;
}

.side-nav-menu > li > a:hover,
.side-nav-menu > li > a.active,
.side-dropdown-btn:hover,
.side-dropdown-btn.active{
    color:#fff;
    background:rgba(255,255,255,.12);

    padding-left:17px;
}

.side-nav-menu .menu-icon{
    width:29px;
    height:29px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:7px;

    background:rgba(255,255,255,.09);

    flex-shrink:0;
}

.menu-title{
    flex:1;
}

.dropdown-arrow{
    font-size:11px;
    transition:transform .30s ease;
}

.side-dropdown-btn[aria-expanded="true"] .dropdown-arrow{
    transform:rotate(180deg);
}


/* =====================================================
   DROPDOWN
===================================================== */

.side-dropdown-menu{
    margin:4px 0 8px 22px;

    padding:5px 0 5px 15px;

    border-left:1px solid rgba(255,255,255,.19);
}

.side-dropdown-menu a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:39px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    font-size:14px;
    padding:7px 10px;
    border-radius:6px;
    transition:.25s;
    font-weight: 700;
}

.side-dropdown-menu a::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    margin-right:11px;

    flex-shrink:0;
}

.side-dropdown-menu a:hover{
    color:#fff;
    background:rgba(255,255,255,.09);
    padding-left:15px;
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.mobile-side-menu-btn{
    position:fixed;

    top:15px;
    left:15px;

    width:48px;
    height:48px;

    border:0;
    border-radius:9px;

    background:#122b67fa;
    color:#fff;

    font-size:20px;

    display:none;
    align-items:center;
    justify-content:center;

    box-shadow:0 5px 18px rgba(0,0,0,.25);

    /*
      Higher than existing site header,
      but sidebar itself is higher again.
    */
    z-index:999998;
}


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

.side-nav-overlay{
    display:none;

    position:fixed;
    inset:0;

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

    z-index:999997;

    opacity:0;
    visibility:hidden;

    transition:.30s;
}

.side-nav-overlay.active{
    opacity:1;
    visibility:visible;
}


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width:992px){

    .side-navigation{
        transform:translateX(0) !important;
        visibility:visible !important;
    }

    .side-nav-close{
        display:none;
    }

    /*
       Use this class only if you want your desktop
       content pushed beside the sidebar.
    */
    .page-with-sidebar{
        margin-left:var(--side-nav-width);
    }
}


/* =====================================================
   TABLET + MOBILE
===================================================== */

@media (max-width:991.98px){

    .side-navigation{
        width:min(305px, 86vw);

        transform:translateX(-105%);
        visibility:hidden;

        /*
          Important:
          Always covers existing navbar/header
        */
        z-index:2147483646;
    }

    .side-navigation.active{
        transform:translateX(0);
        visibility:visible;
    }

    .side-nav-overlay{
        display:block;
        z-index:2147483645;
    }

    .mobile-side-menu-btn{
        display:flex;
        z-index:2147483644;
    }

    body.side-menu-open{
        overflow:hidden;
    }

    .page-with-sidebar{
        margin-left:0;
    }
}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width:575.98px){

    .side-navigation{
        width:88vw;
        max-width:290px;
    }

    .side-nav-header{
        min-height:70px;
    }

    .side-nav-menu{
        padding-left:9px;
        padding-right:9px;
    }

    .side-nav-menu > li > a,
    .side-dropdown-btn{
        min-height:47px;
        font-size:14px;
    }
}


/* =====================================================
   SCROLLBAR
===================================================== */

.side-navigation::-webkit-scrollbar{
    width:5px;
}

.side-navigation::-webkit-scrollbar-track{
    background:rgba(255,255,255,.03);
}

.side-navigation::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:10px;
}