/* =========================================================
   RAZ CENTRAL SIDEBAR v2
   One component / one geometry / every page
   ========================================================= */

:root {
    --raz-sidebar-width: 202px;
    --raz-sidebar-mini: 52px;

    --raz-sidebar-bg: #0b1727;
    --raz-sidebar-border: rgba(255,255,255,.065);

    --raz-sidebar-text: #8fa1b5;
    --raz-sidebar-heading: #50677f;
    --raz-sidebar-active: #2c7be5;
}


/* =========================================================
   FRAME
   ========================================================= */

html body .raz-central-sidebar {

    width:
        var(--raz-sidebar-width) !important;

    min-width:
        var(--raz-sidebar-width) !important;

    max-width:
        var(--raz-sidebar-width) !important;


    height:
        100vh !important;

    height:
        100dvh !important;


    position:
        fixed !important;

    inset:
        0 auto 0 0 !important;


    z-index:
        900 !important;


    display:
        flex !important;

    flex-direction:
        column !important;


    margin:
        0 !important;

    padding:
        0 !important;


    overflow:
        hidden !important;


    box-sizing:
        border-box !important;


    background:
        var(--raz-sidebar-bg) !important;


    border-right:
        1px solid
        var(--raz-sidebar-border) !important;
}


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

html body
.raz-central-sidebar
.brand {

    width:
        100% !important;

    height:
        58px !important;

    min-height:
        58px !important;

    max-height:
        58px !important;


    flex:
        0 0 58px !important;


    display:
        flex !important;

    align-items:
        center !important;


    gap:
        9px !important;


    padding:
        8px 38px
        8px 12px !important;


    margin:
        0 !important;


    box-sizing:
        border-box !important;


    position:
        relative !important;


    overflow:
        hidden !important;
}


html body
.raz-central-sidebar
.brand-mark {

    width:
        34px !important;

    height:
        34px !important;

    min-width:
        34px !important;


    flex:
        0 0 34px !important;


    display:
        grid !important;

    place-items:
        center !important;


    margin:
        0 !important;


    border-radius:
        7px !important;


    background:
        #2c7be5 !important;


    color:
        #ffffff !important;


    font-size:
        16px !important;

    font-weight:
        800 !important;
}


html body
.raz-central-sidebar
.brand-copy {

    min-width:
        0 !important;
}


html body
.raz-central-sidebar
.brand-name {

    margin:
        0 !important;

    color:
        #edf2f9 !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        16px !important;
}


html body
.raz-central-sidebar
.brand-sub {

    margin:
        2px 0 0 !important;

    color:
        #718399 !important;

    font-size:
        7px !important;

    line-height:
        10px !important;
}


/* =========================================================
   COLLAPSE BUTTON
   ========================================================= */

.raz-shell-toggle {

    width:
        26px;

    height:
        26px;


    position:
        absolute;

    right:
        6px;

    top:
        16px;


    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;


    gap:
        3px;


    padding:
        0;


    border:
        0;


    border-radius:
        5px;


    background:
        transparent;


    color:
        #72859a;


    cursor:
        pointer;
}


.raz-shell-toggle:hover {

    background:
        rgba(44,123,229,.08);
}


.raz-shell-toggle span {

    width:
        13px;

    height:
        1px;


    display:
        block;


    background:
        currentColor;
}


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

html body
.raz-central-sidebar
.raz-shell-nav {

    width:
        100% !important;


    min-height:
        0 !important;


    flex:
        1 1 0 !important;


    margin:
        0 !important;


    padding:
        0 8px
        9px !important;


    box-sizing:
        border-box !important;


    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;


    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(143,161,181,.25)
        transparent;
}


html body
.raz-central-sidebar
.raz-shell-nav::-webkit-scrollbar {

    width:
        4px;
}


html body
.raz-central-sidebar
.raz-shell-nav::-webkit-scrollbar-thumb {

    background:
        rgba(143,161,181,.25);

    border-radius:
        10px;
}


/* =========================================================
   SECTION
   ========================================================= */

html body
.raz-central-sidebar
.nav-section {

    width:
        auto !important;


    height:
        11px !important;


    margin:
        8px 8px
        3px !important;


    padding:
        0 !important;


    color:
        var(--raz-sidebar-heading) !important;


    font-size:
        6px !important;

    font-weight:
        700 !important;


    line-height:
        11px !important;


    letter-spacing:
        1.15px !important;


    white-space:
        nowrap !important;
}


html body
.raz-central-sidebar
.nav-section:first-child {

    margin-top:
        3px !important;
}


/* =========================================================
   ITEM
   ========================================================= */

html body
.raz-central-sidebar
.nav-item {

    width:
        100% !important;


    height:
        30px !important;

    min-height:
        30px !important;

    max-height:
        30px !important;


    display:
        flex !important;

    align-items:
        center !important;


    margin:
        0 !important;


    padding:
        0 10px !important;


    box-sizing:
        border-box !important;


    border:
        0 !important;


    border-radius:
        6px !important;


    background:
        transparent !important;


    color:
        var(--raz-sidebar-text) !important;


    font-size:
        8px !important;

    font-weight:
        400 !important;


    line-height:
        normal !important;


    text-decoration:
        none !important;


    white-space:
        nowrap !important;


    transition:
        background .13s ease,
        color .13s ease !important;
}


html body
.raz-central-sidebar
.nav-item:hover {

    background:
        rgba(44,123,229,.055) !important;


    color:
        #edf2f9 !important;
}


html body
.raz-central-sidebar
.nav-item.active {

    background:
        rgba(44,123,229,.12) !important;


    color:
        #ffffff !important;


    box-shadow:
        inset 2px 0 0
        #2c7be5 !important;
}


/* =========================================================
   MAIN
   ========================================================= */

html body .main {

    width:
        calc(
            100% -
            var(--raz-sidebar-width)
        ) !important;


    margin-left:
        var(--raz-sidebar-width) !important;


    max-width:
        none !important;


    min-width:
        0 !important;


    box-sizing:
        border-box !important;
}


/* =========================================================
   COLLAPSED
   ========================================================= */

html body.sidebar-collapsed
.raz-central-sidebar {

    width:
        var(--raz-sidebar-mini) !important;

    min-width:
        var(--raz-sidebar-mini) !important;

    max-width:
        var(--raz-sidebar-mini) !important;
}


html body.sidebar-collapsed
.main {

    width:
        calc(
            100% -
            var(--raz-sidebar-mini)
        ) !important;


    margin-left:
        var(--raz-sidebar-mini) !important;
}


html body.sidebar-collapsed
.raz-central-sidebar
.brand {

    justify-content:
        center !important;


    padding:
        8px !important;
}


html body.sidebar-collapsed
.raz-central-sidebar
.brand-copy {

    display:
        none !important;
}


html body.sidebar-collapsed
.raz-central-sidebar
.raz-shell-toggle {

    display:
        none;
}


html body.sidebar-collapsed
.raz-central-sidebar
.nav-section {

    height:
        5px !important;


    margin:
        3px 0 !important;


    visibility:
        hidden !important;
}


html body.sidebar-collapsed
.raz-central-sidebar
.nav-label {

    display:
        none !important;
}


html body.sidebar-collapsed
.raz-central-sidebar
.nav-item {

    padding:
        0 !important;


    justify-content:
        center !important;
}


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

@media(max-width:800px) {

    html body
    .raz-central-sidebar {

        transform:
            translateX(-100%);


        transition:
            transform .2s ease;
    }


    html body.sidebar-mobile-open
    .raz-central-sidebar {

        transform:
            translateX(0);
    }


    html body .main,
    html body.sidebar-collapsed
    .main {

        width:
            100% !important;


        margin-left:
            0 !important;
    }
}