/* ==========================================================================
   Sidebar chrome consolidated out of theme.css and theme-override.css.

   These rules loaded at positions 8 and 9 in the cascade and sidebar.css
   loads at 36, so everything below the "original sidebar.css" marker still
   overrides everything above it. Order within this file is load-bearing:
   theme.css rules first, then theme-override.css, then the original file.
   ========================================================================== */


.sidebar .nav > .nav-item.active > a:before, .sidebar[data-background-color="white"] .nav > .nav-item.active > a:before, .sidebar .nav > .nav-item.active:hover > a:before, .sidebar[data-background-color="white"] .nav > .nav-item.active:hover > a:before, .sidebar .nav > .nav-item a[data-toggle=collapse][aria-expanded=true]:before, .sidebar[data-background-color="white"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true]:before {
    opacity: 1 !important;
    position: absolute;
    z-index: 1;
    width: 4px;
    height: 100%;
    content: '';
    left: 0;
    top: 0;
}

.sidebar, .sidebar[data-background-color="white"] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 250px;
    margin-top: 62px;

    /* Bottom scroll fade. Black is opaque and transparent is cut away — these
       are mask alphas, not colours, so they carry no theme and stay here
       rather than in tokens.css. The -none variant is the animation's end
       state and keeps the same two stops so the gradients interpolate. */
    --sidebar-fade-height: 40px;
    /* Taller than the fade: the wash needs room to ramp up from nothing, or
       its own top edge becomes a visible line. */
    --sidebar-shadow-height: 64px;
    --sidebar-fade-mask: linear-gradient(
        to bottom,
        #000 calc(100% - var(--sidebar-fade-height)),
        transparent 100%
    );
    --sidebar-fade-mask-none: linear-gradient(to bottom, #000 100%, #000 100%);

    /* Column so the search block keeps its natural height and .sidebar-wrapper
       takes exactly the space left over — the scroll area then ends at the
       viewport bottom instead of running past it. */
    display: flex;
    flex-direction: column;
    z-index: 1000;
    color: #ffffff;
    font-weight: var(--font-weight-body);
    background: var(--chrome-panel);
    -webkit-box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
    -moz-box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
    box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
    transition: all .3s;
}

.sidebar.full-height, .sidebar[data-background-color="white"].full-height {
    margin-top: 0;
}

.sidebar .user, .sidebar[data-background-color="white"] .user {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    display: block;
    margin-left: 15px;
    margin-right: 15px;
}

.sidebar .user .info a, .sidebar[data-background-color="white"] .user .info a {
    white-space: nowrap;
    display: block;
    position: relative;
}

.sidebar .user .info a:hover, .sidebar .user .info a:focus, .sidebar[data-background-color="white"] .user .info a:hover, .sidebar[data-background-color="white"] .user .info a:focus {
    text-decoration: none;
}

.sidebar .user .info a > span, .sidebar[data-background-color="white"] .user .info a > span {
    font-size: 14px;
    font-weight: 400;
    color: #777;
    display: flex;
    flex-direction: column;
}

.sidebar .user .info .caret, .sidebar[data-background-color="white"] .user .info .caret {
    position: absolute;
    top: 17px;
    right: 0px;
    border-top-color: #777;
}

.sidebar .sidebar-wrapper, .sidebar[data-background-color="white"] .sidebar-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    width: 100%;
    z-index: 4;
    padding-bottom: 15px;
    transition: all .3s;
}

/* Rows dissolve into the panel at the bottom edge, so a clipped row reads as
   "the list continues" rather than as a cut-off. Three things follow from the
   requirement that it show only while there is more to see:

   - It is a mask, not a background. A background layer paints behind the
     labels and would smear under them instead of fading them out.
   - The fade lives in the keyframes, not on the element. A list too short to
     scroll gives scroll() an inactive timeline, which applies no effect at
     all — so the unfaded base rule is what shows, which is what we want.
   - The range is the last --sidebar-fade-height of travel, so the fade is at
     full strength for the whole scroll and is spent exactly as the final row
     comes fully into view.

   The selectors name the real scroller only. jquery.scrollbar moves it into a
   .scroll-wrapper and copies the class onto both, and masking both would fade
   the same edge twice. */
@supports (animation-timeline: scroll()) {
    .sidebar .scroll-wrapper > .sidebar-wrapper,
    .sidebar > .sidebar-wrapper {
        animation: sidebar-scroll-fade linear both;
        animation-timeline: scroll(self block);
        animation-range: calc(100% - var(--sidebar-fade-height)) 100%;

        /* Named so the overlay below, which is not a descendant of the
           scroller, can hang off the same scroll position. */
        scroll-timeline: --sidebar-scroll block;
    }
}

/* The mask alone only thins the rows out against a panel that is already
   near-black, which reads as dimming rather than as depth. This is the
   shadow itself: a dark wash in front of the rows, pinned to the sidebar's
   bottom edge. Base opacity is 0, so a list too short to scroll — that is,
   an inactive timeline applying no effect — shows nothing. */
@supports (timeline-scope: --sidebar-scroll) {
    .sidebar {
        timeline-scope: --sidebar-scroll;
    }

    .sidebar::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--sidebar-shadow-height);
        z-index: 5;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(to top, var(--scroll-shadow), transparent);
        animation: sidebar-scroll-shadow linear both;
        animation-timeline: --sidebar-scroll;
        animation-range: calc(100% - var(--sidebar-fade-height)) 100%;
    }
}

@keyframes sidebar-scroll-shadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes sidebar-scroll-fade {
    from {
        -webkit-mask-image: var(--sidebar-fade-mask);
        mask-image: var(--sidebar-fade-mask);
    }
    to {
        -webkit-mask-image: var(--sidebar-fade-mask-none);
        mask-image: var(--sidebar-fade-mask-none);
    }
}

.sidebar .sidebar-wrapper .sidebar-content, .sidebar[data-background-color="white"] .sidebar-wrapper .sidebar-content {
    padding-top: 0px;
    padding-bottom: 0px;
}

.sidebar .nav, .sidebar[data-background-color="white"] .nav {
    display: block;
    float: none;
    margin-top: 20px;
}

.sidebar .nav .nav-section, .sidebar[data-background-color="white"] .nav .nav-section {
    margin: 15px 0 0 0;
}

.sidebar .nav .nav-section .text-section, .sidebar[data-background-color="white"] .nav .nav-section .text-section {
    padding: 2px 30px;
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    margin-top: 20px;
}

.sidebar .nav > .nav-item, .sidebar[data-background-color="white"] .nav > .nav-item {
    display: list-item;
}

.sidebar .nav > .nav-item.active > a, .sidebar[data-background-color="white"] .nav > .nav-item.active > a {
    color: var(--color-blue) !important;
}

.sidebar .nav > .nav-item.active > a:before, .sidebar[data-background-color="white"] .nav > .nav-item.active > a:before {
    background: var(--color-blue);
}

.sidebar .nav > .nav-item.active > a p, .sidebar[data-background-color="white"] .nav > .nav-item.active > a p {
    color: var(--color-blue) !important;
    font-weight: 600;
}

.sidebar .nav > .nav-item.active:hover > a:before, .sidebar[data-background-color="white"] .nav > .nav-item.active:hover > a:before {
    background: var(--color-blue);
}

.sidebar .nav > .nav-item.active a i, .sidebar[data-background-color="white"] .nav > .nav-item.active a i {
    color: var(--color-blue);
}

.sidebar .nav > .nav-item.submenu, .sidebar[data-background-color="white"] .nav > .nav-item.submenu {
    background: rgba(0, 0, 0, 0.03);
}

.sidebar .nav > .nav-item.submenu > li > a i, .sidebar[data-background-color="white"] .nav > .nav-item.submenu > li > a i {
    color: var(--color-blue);
}

.sidebar .nav > .nav-item > a:hover, .sidebar .nav > .nav-item a:focus, .sidebar[data-background-color="white"] .nav > .nav-item > a:hover, .sidebar[data-background-color="white"] .nav > .nav-item a:focus {
    background: rgba(0, 0, 0, 0.03);
}

.sidebar .nav > .nav-item a, .sidebar[data-background-color="white"] .nav > .nav-item a {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    padding: 2px 12px;
    width: 100%;
    font-size: 14px;
    font-weight: var(--font-weight-body);
    position: relative;
    margin-bottom: 1px;
}

.sidebar .nav > .nav-item a:hover, .sidebar .nav > .nav-item a:focus, .sidebar[data-background-color="white"] .nav > .nav-item a:hover, .sidebar[data-background-color="white"] .nav > .nav-item a:focus {
    text-decoration: none;
}

.sidebar .nav > .nav-item a:hover p, .sidebar .nav > .nav-item a:focus p, .sidebar[data-background-color="white"] .nav > .nav-item a:hover p, .sidebar[data-background-color="white"] .nav > .nav-item a:focus p {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-strong);
}

.sidebar .nav > .nav-item a:hover i, .sidebar .nav > .nav-item a:focus i, .sidebar[data-background-color="white"] .nav > .nav-item a:hover i, .sidebar[data-background-color="white"] .nav > .nav-item a:focus i {
    color: var(--color-blue) !important;
}

.sidebar .nav > .nav-item a i, .sidebar[data-background-color="white"] .nav > .nav-item a i {
    color: var(--text-tertiary);
    margin-right: 15px;
    width: 25px;
    text-align: center;
    vertical-align: middle;
    float: left;
    font-size: 18px;
    line-height: 30px;
}

.sidebar .nav > .nav-item a i[class^="flaticon-"], .sidebar[data-background-color="white"] .nav > .nav-item a i[class^="flaticon-"] {
    font-size: 20px;
}

.sidebar .nav > .nav-item a p, .sidebar[data-background-color="white"] .nav > .nav-item a p {
    font-size: 14px;
    margin-bottom: 0px;
    margin-right: 5px;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* The nav group's collapse arrow. The triangle geometry lives here because the
   sidebar is the only consumer of `.caret` — the overlay system draws its own
   arrows. */
.sidebar .nav > .nav-item a .caret, .sidebar[data-background-color="white"] .nav > .nav-item a .caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: .255em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    margin-left: auto;
    margin-right: 10px;
    transition: all .5s;
    color: var(--text-secondary);
}

.sidebar .nav > .nav-item a[data-toggle=collapse][aria-expanded=true], .sidebar[data-background-color="white"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] {
    background: transparent;
}

.sidebar .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] p, .sidebar[data-background-color="white"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] p {
    color: var(--text-primary);
}

.sidebar .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] i, .sidebar[data-background-color="white"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] i {
    color: var(--color-blue);
}

.sidebar .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] .caret, .sidebar[data-background-color="white"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] .caret {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.sidebar .nav > .nav-item a[data-toggle=collapse][aria-expanded=true]:before, .sidebar[data-background-color="white"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true]:before {
    background: var(--color-blue);
}

.sidebar .nav.nav-primary > .nav-item a:hover i, .sidebar .nav.nav-primary > .nav-item a:focus i, .sidebar .nav.nav-primary > .nav-item a[data-toggle=collapse][aria-expanded=true] i, .sidebar[data-background-color="white"] .nav.nav-primary > .nav-item a:hover i, .sidebar[data-background-color="white"] .nav.nav-primary > .nav-item a:focus i, .sidebar[data-background-color="white"] .nav.nav-primary > .nav-item a[data-toggle=collapse][aria-expanded=true] i {
    color: var(--color-blue) !important;
}

.sidebar .nav.nav-primary > .nav-item a[data-toggle=collapse][aria-expanded=true]:before, .sidebar[data-background-color="white"] .nav.nav-primary > .nav-item a[data-toggle=collapse][aria-expanded=true]:before {
    background: var(--color-blue) !important;
}

.sidebar .nav.nav-primary > .nav-item.active a:before, .sidebar[data-background-color="white"] .nav.nav-primary > .nav-item.active a:before {
    background: var(--color-blue) !important;
}

.sidebar .nav.nav-primary > .nav-item.active a i, .sidebar[data-background-color="white"] .nav.nav-primary > .nav-item.active a i {
    color: var(--color-blue) !important;
}

.sidebar .nav.nav-secondary > .nav-item a:hover i, .sidebar .nav.nav-secondary > .nav-item a:focus i, .sidebar .nav.nav-secondary > .nav-item a[data-toggle=collapse][aria-expanded=true] i, .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item a:hover i, .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item a:focus i, .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item a[data-toggle=collapse][aria-expanded=true] i {
    color: var(--color-purple) !important;
}

.sidebar .nav.nav-secondary > .nav-item a[data-toggle=collapse][aria-expanded=true]:before, .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item a[data-toggle=collapse][aria-expanded=true]:before {
    background: var(--color-purple) !important;
}

.sidebar .nav.nav-secondary > .nav-item.active a:before, .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.active a:before {
    background: var(--color-purple) !important;
}

.sidebar .nav.nav-secondary > .nav-item.active a i, .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.active a i {
    color: var(--color-purple) !important;
}

.sidebar .nav-collapse, .sidebar[data-background-color="white"] .nav-collapse {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 15px;
    padding-top: 10px;
}

.sidebar .nav-collapse li.active > a, .sidebar[data-background-color="white"] .nav-collapse li.active > a {
    font-weight: 600;
}

.sidebar .nav-collapse li a:before, .sidebar .nav-collapse li a:hover:before, .sidebar[data-background-color="white"] .nav-collapse li a:before, .sidebar[data-background-color="white"] .nav-collapse li a:hover:before {
    opacity: 0 !important;
}

.sidebar .nav-collapse li a, .sidebar[data-background-color="white"] .nav-collapse li a {
    margin-bottom: 3px !important;
    padding: 5px 10px !important;
}

.sidebar .nav-collapse li a .sub-item, .sidebar[data-background-color="white"] .nav-collapse li a .sub-item {
    font-size: 14px;
    position: relative;
    margin-left: 25px;
    opacity: .85;
}

.sidebar .nav-collapse li a .sub-item:before, .sidebar[data-background-color="white"] .nav-collapse li a .sub-item:before {
    content: '';
    height: 4px;
    width: 4px;
    background: rgba(131, 132, 138, 0.89);
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
}

.sidebar .nav-collapse li a:hover .sub-item, .sidebar[data-background-color="white"] .nav-collapse li a:hover .sub-item {
    opacity: 1;
}

.sidebar .nav-collapse.subnav, .sidebar[data-background-color="white"] .nav-collapse.subnav {
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.sidebar .nav-collapse.subnav li a, .sidebar[data-background-color="white"] .nav-collapse.subnav li a {
    padding-left: 40px !important;
}

/*    sidebar minimized   */
@media screen and (min-width: 991px) {
    .sidebar_minimize .main-panel {
        width: calc(100% - 75px);
        transition: all .3s;
    }

    .sidebar_minimize .logo-header {
        width: 75px;
        transition: all .3s;
        padding: 0px;
        text-align: center;
    }

    .sidebar_minimize .logo-header .logo {
        position: absolute;
        transform: translate3d(25px, 0, 0);
        opacity: 0;
    }

    .sidebar_minimize .logo-header .logo img {
        display: none;
    }

    .sidebar_minimize .sidebar {
        width: 75px;
        transition: all .3s;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper {
        width: 75px;
        transition: all .3s;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .user {
        padding-left: 0px;
        padding-right: 0px;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .user [class^="avatar-"] {
        float: none !important;
        margin: auto;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .user .info {
        display: none;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .user .info span {
        display: none;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .nav-item {
        position: relative;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .nav-item a i {
        margin-right: unset;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .nav-item a .badge, .sidebar_minimize .sidebar .sidebar-wrapper .nav-item a span, .sidebar_minimize .sidebar .sidebar-wrapper .nav-item a .caret, .sidebar_minimize .sidebar .sidebar-wrapper .nav-item a p {
        display: none;
        transition: all .3s;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .nav-item.submenu .nav-collapse, .sidebar_minimize .sidebar .sidebar-wrapper .nav-item.active .nav-collapse {
        display: none;
    }

    .sidebar_minimize .sidebar .sidebar-wrapper .nav-section .text-section {
        display: none;
    }

    .sidebar_minimize .sidebar:hover {
        width: 250px;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper {
        width: 250px;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper .user {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper .user [class^="avatar-"] {
        float: left !important;
        margin-right: 11px !important;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper .user .info {
        display: block;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper .user .info span {
        display: block;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper .nav-item a i {
        margin-right: 15px;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper .nav-item a .badge, .sidebar_minimize .sidebar:hover .sidebar-wrapper .nav-item a span, .sidebar_minimize .sidebar:hover .sidebar-wrapper .nav-item a .caret, .sidebar_minimize .sidebar:hover .sidebar-wrapper .nav-item a p {
        display: block;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper .nav-item.submenu .nav-collapse, .sidebar_minimize .sidebar:hover .sidebar-wrapper .nav-item.active .nav-collapse {
        display: block;
    }

    .sidebar_minimize .sidebar:hover .sidebar-wrapper .nav-section .text-section {
        display: block;
    }

    .sidebar_minimize.sidebar_minimize_hover .logo-header {
        width: 250px;
        padding-left: 25px;
        padding-right: 25px;
        text-align: left;
    }

    .sidebar_minimize.sidebar_minimize_hover .logo-header .logo {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
        position: relative !important;
    }

    .sidebar_minimize.sidebar_minimize_hover .logo-header .logo img {
        display: inline-block !important;
    }

    .sidebar_minimize.sidebar_minimize_hover .main-panel {
        width: calc(100% - 250px);
    }

}

.sidebar[data-background-color="dark"] {
    background: var(--chrome-base) !important;
}

.sidebar[data-background-color="dark"] .user {
    border-color: rgba(181, 181, 181, 0.1) !important;
}

.sidebar[data-background-color="dark"] .user .info a > span {
    color: #b9babf;
}

.sidebar[data-background-color="dark"] .nav > .nav-item.active > a p {
    color: #b9babf !important;
}

.sidebar[data-background-color="dark"] .nav > .nav-item a {
    color: #b9babf !important;
}

.sidebar[data-background-color="dark"] .nav > .nav-item a:hover p, .sidebar[data-background-color="dark"] .nav > .nav-item a:focus p, .sidebar[data-background-color="dark"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] p {
    color: #b9babf !important;
}

.sidebar[data-background-color="dark"] .scrollbar-inner > .scroll-element .scroll-bar {
    background-color: #f7f7f7;
}

.sidebar[data-background-color="dark"] .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar, .sidebar[data-background-color="dark"] .scrollbar-inner > .scroll-element:hover .scroll-bar {
    background-color: #dcdbdb;
}

.sidebar[data-background-color="dark2"] {
    background: #24252a9c !important;
}

.sidebar[data-background-color="dark2"] .user {
    border-color: rgba(181, 181, 181, 0.1) !important;
}

.sidebar[data-background-color="dark2"] .user .info a > span {
    color: #b9babf;
}

.sidebar[data-background-color="dark2"] .nav > .nav-item.active > a p {
    color: #b9babf !important;
}

.sidebar[data-background-color="dark2"] .nav > .nav-item a {
    color: #b9babf !important;
}

.sidebar[data-background-color="dark2"] .nav > .nav-item a:hover p, .sidebar[data-background-color="dark2"] .nav > .nav-item a:focus p, .sidebar[data-background-color="dark2"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] p {
    color: #b9babf !important;
}

.sidebar[data-background-color="dark2"] .scrollbar-inner > .scroll-element .scroll-bar {
    background-color: #f7f7f7;
}

.sidebar[data-background-color="dark2"] .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar, .sidebar[data-background-color="dark2"] .scrollbar-inner > .scroll-element:hover .scroll-bar {
    background-color: #dcdbdb;
}

@media screen and (min-width: 991px) {

    .sidebar .scroll-element {
        opacity: 0;
        transition: all .2s;
    }

    .sidebar:hover .scroll-element {
        opacity: 1;
    }

    .sidebar[data-background-color]:before {
        background: rgba(255, 255, 255, 0.2) !important;
        z-index: 1000;
    }
}

@media screen and (max-width: 991px) {

    .sidebar {
        position: fixed;
        left: 0 !important;
        right: 0;
        -webkit-transform: translate3d(-270px, 0, 0);
        -moz-transform: translate3d(-270px, 0, 0);
        -o-transform: translate3d(-270px, 0, 0);
        -ms-transform: translate3d(-270px, 0, 0);
        transform: translate3d(-270px, 0, 0) !important;
        transition: all .5s;
        margin-top: 0px;
    }

    .sidebar:before {
        background: none;
    }

    .nav_open .sidebar {
        -webkit-transform: translate3d(0px, 0, 0);
        -moz-transform: translate3d(0px, 0, 0);
        -o-transform: translate3d(0px, 0, 0);
        -ms-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0) !important;
        border-right: 1px solid #f1f1f1;
    }

    .sidebar .sidebar-wrapper {
        padding-top: 0px;
    }

    .sidebar .sidebar-wrapper .sidebar-content {
        padding-top: 0px !important;
    }

    .sidebar .sidebar-wrapper .scroll-element.scroll-y {
        top: 0px !important;
    }
}

/* END CUSTOM.css */

/* Gradient layered over a solid base color: the sidebar must be fully
   opaque because the collapsed rail slides out OVER the page content. */
.sidebar[data-background-color="dark2"] {
    background: var(--chrome-panel) !important;
}

/* ===== original sidebar.css ================================================ */
/**
 * Desktop sidebar collapse — icons-only rail with hover slide-out.
 *
 * Collapsed state (`html.sidebar_collapsed`, desktop only): the sidebar
 * narrows to an icon rail and the main panel widens to match. Hovering
 * the rail slides the full-width sidebar out OVER the content after a
 * short delay — the main panel never reflows on hover. Nav links keep
 * the same horizontal padding in both states, so icons do not move
 * during the slide-out.
 */
:root {
    --sidebar-width: 250px;
    /* Rail width is derived from the pill, not chosen: 2×6px gutter +
       2×6px row padding + the 24px icon box. Change the icon box and this
       must follow, or the rail pill stops being square. */
    --sidebar-rail-width: 48px;
    /* The rail retraction curve. Anything that must finish alongside the
       retraction (submenu folds) animates on these exact values, so no
       piece is still moving after the sidebar has visibly closed. */
    --sidebar-retract-duration: 0.2s;
    --sidebar-retract-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* One rung firmer than a page field on light, where the near-white rail
   swallows the resting border; identical to every other input on dark. */
.sidebar .form-control {
    border-color: var(--sidebar-search-border);
}

/* Sidebar stays scrollable (wheel/trackpad) but the jQuery.scrollbar
   plugin's visual bar is hidden — the theme's 7px light-gray bar adds
   noise with no real affordance here. Scoped to .sidebar. */
.sidebar .scrollbar-inner > .scroll-element {
    display: none !important;
}

/* Rail-only search glyph; shown via the collapsed-rail rules below. */
.sidebar-search-icon {
    display: none;
}

/* Edge toggle is desktop-only; mobile uses the hamburger drawer. */
.sidebar-collapse-toggle {
    display: none;
}

@media (min-width: 992px) {
    /* Transitions */
    .wrapper .sidebar,
    .wrapper .main-panel {
        transition: width var(--sidebar-retract-duration) var(--sidebar-retract-easing);
    }

    /* Submenus fold on the same curve and duration as the rail retraction.
       Bootstrap's own 0.35s ease outlives the 0.2s retract, so the closed
       rail is left resizing for ~150ms after the sidebar looks shut — and
       sub-items carry no icon, so that overhang reads as blank rows. */
    .sidebar .nav-item > .collapsing {
        transition: height var(--sidebar-retract-duration) var(--sidebar-retract-easing);
    }

    /* The logo block and the top bar beside it animate width/padding in
       lockstep with the sidebar, so the logo and the phone icon glide
       between states instead of snapping. */
    .logo-header {
        transition: width 0.25s ease, padding 0.25s ease;
    }

    .navbar-header,
    #topNavBar {
        transition: padding 0.25s ease;
    }

    html.sidebar-no-transition .wrapper .sidebar,
    html.sidebar-no-transition .wrapper .main-panel,
    html.sidebar-no-transition .logo-header,
    html.sidebar-no-transition .navbar-header,
    html.sidebar-no-transition #topNavBar,
    html.sidebar-no-transition .sidebar-collapse-toggle {
        transition: none !important;
    }

    /* Edge toggle: a slim pull-tab fused to the sidebar's outer edge
       at the search row (drawer-handle pattern). It sits entirely
       OUTSIDE the sidebar, so it never overlaps the search or nav.
       It is a SIBLING of .sidebar so hovering it never triggers the
       rail's hover slide-out, and it fades while the menu slides out. */
    /* The tab shares the sidebar's surface color and overlaps its
       border, so it reads as the sidebar's own edge bulging out into
       a pull handle — no joint, the seam just flows around it. */
    .sidebar-collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50%;
        left: calc(var(--sidebar-width) - 1px);
        transform: translateY(-50%);
        width: 11px;
        height: 52px;
        padding: 0;
        border: 1px solid var(--chrome-seam);
        border-left: none;
        border-radius: 0 6px 6px 0;
        background: var(--chrome-panel);
        color: var(--text-muted);
        cursor: pointer;
        z-index: 1001;
        transition: left 0.25s ease, opacity 0.15s ease,
        color 0.2s ease,
        height 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Invisible hit zone extending left over the sidebar's edge: the
       button is a sibling of .sidebar, so pointer events landing here
       belong to the button — approaching the handle does not hover
       the sidebar, so the rail never slides out under the cursor. */
    .sidebar-collapse-toggle::before {
        content: '';
        position: absolute;
        left: -12px;
        top: -10px;
        bottom: -10px;
        width: 16px;
    }

    /* Grip stretches taller and the chevron lights up in the accent
       green with a soft glow — color lives on the glyph, so there is
       no fill and no seam against the sidebar edge. */
    .sidebar-collapse-toggle:hover,
    .sidebar-collapse-toggle:focus {
        height: 76px;
        color: var(--color-green, #34d399);
        outline: none;
    }

    .sidebar-collapse-toggle:hover i,
    .sidebar-collapse-toggle:focus i {
        filter: drop-shadow(0 0 3px rgba(52, 211, 153, 1)) drop-shadow(0 0 8px rgba(52, 211, 153, 0.9)) drop-shadow(0 0 16px rgba(52, 211, 153, 0.7));
    }

    .sidebar-collapse-toggle i {
        font-size: 12px;
        line-height: 1;
        transition: transform 0.25s ease, filter 0.2s ease;
    }

    /* Wide viewports keep the sidebar expanded; the rail toggle is
       meaningless there, so hide it. */
    html.sidebar-auto-expanded .sidebar-collapse-toggle {
        display: none;
    }

    html.sidebar_collapsed .sidebar-collapse-toggle {
        left: calc(var(--sidebar-rail-width) - 1px);
    }

    html.sidebar_collapsed .sidebar-collapse-toggle i {
        transform: rotate(180deg);
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) ~ .sidebar-collapse-toggle {
        opacity: 0;
        pointer-events: none;
    }

    /* Hide overflow only while the toggle animates to prevent a
       scrollbar flash from the main-panel width change. */
    html.sidebar-transitioning,
    html.sidebar-transitioning body {
        overflow: hidden !important;
    }

    /* --- Collapsed rail --- */
    /* Overflow is clipped on the inner wrapper, not the sidebar
       itself, so the edge toggle can protrude past the seam. */
    html.sidebar_collapsed .wrapper .sidebar {
        width: var(--sidebar-rail-width);
    }

    html.sidebar_collapsed .sidebar .sidebar-wrapper {
        overflow-x: hidden;
    }

    html.sidebar_collapsed .wrapper .main-panel {
        width: calc(100% - var(--sidebar-rail-width));
    }

    /* Nav anchors are flex containers: at rail width their children
       would SHRINK (compressing the icon column), then decompress on
       hover — moving the icons. Forbid shrinking so content simply
       overflows and is clipped; icons stay pinned at the same x. */
    html.sidebar_collapsed .sidebar .nav a > i,
    html.sidebar_collapsed .sidebar .nav a .sub-item,
    html.sidebar_collapsed .sidebar .nav a .caret,
    html.sidebar_collapsed .sidebar .nav a .badge {
        flex-shrink: 0;
    }

    /* Labels and chrome fade out in the rail. Rows keep their height
       (opacity, not display) so nothing shifts vertically between the
       rail and the slide-out. */
    html.sidebar_collapsed .sidebar .nav > .nav-item > a .sub-item,
    html.sidebar_collapsed .sidebar .caret,
    html.sidebar_collapsed .sidebar .badge,
    html.sidebar_collapsed .sidebar .nav-section h4.text-section,
    html.sidebar_collapsed .sidebar .input-kbd-hint {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    /* Text must never re-wrap between rail and slide-out widths — a
       wrapped line changes row height and shifts every icon below it. */
    html.sidebar_collapsed .sidebar .sub-item,
    html.sidebar_collapsed .sidebar .nav-section h4.text-section {
        white-space: nowrap;
    }

    /* Search: in the rail the input fades out and a magnifier icon
       takes its place; they crossfade during the slide-out. */
    html.sidebar_collapsed .sidebar #id_navSearch {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    html.sidebar_collapsed .sidebar-search-icon {
        display: block;
        position: absolute;
        top: 50%;
        /* Measured from the search wrapper, which is already inset 8px, so
           the glyph lands on the 24px centre of the rail's icon column. */
        left: 16px;
        transform: translate(-50%, -50%);
        color: var(--text-tertiary);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.15s ease;
    }

    /* --- Hover slide-out (overlay, no content reflow) ---
       `.sidebar-peek` mirrors :hover so JS (Alt+S) can force the
       slide-out without un-collapsing the rail. */
    html.sidebar_collapsed .wrapper .sidebar:is(:hover, .sidebar-peek) {
        width: var(--sidebar-width);
        /* Lift the slide-out above open select2 dropdowns so a dropdown in
           the page content renders under the menu, not over it. select2's
           open container is forced to z-index 1000000 !important
           (theme-override.css), so the slide-out must clear that. */
        z-index: 1000001;
        transition-delay: 0.09s;
        /* The slide-out starts at the top bar's bottom edge and, being
           above it in the stack, paints over that 1px seam for its whole
           width. The inset shadow redraws the line so the top bar keeps an
           unbroken bottom edge across the panel — an inset rather than a
           border so nothing inside the panel shifts down 1px on hover. */
        box-shadow: var(--sidebar-slideout-shadow), inset 0 1px 0 var(--chrome-seam);
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .nav > .nav-item > a .sub-item,
    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .caret,
    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .badge,
    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .nav-section h4.text-section {
        opacity: 1;
        transition-delay: 0.09s;
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .input-kbd-hint {
        opacity: 0.35;
        transition-delay: 0.09s;
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) #id_navSearch {
        opacity: 1;
        transition-delay: 0.09s;
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .sidebar-search-icon {
        opacity: 0;
        transition-delay: 0.09s;
    }

    /* --- Chrome seams ---
       One horizontal seam under the whole top bar; one vertical seam
       at the sidebar edge. Logo block and sidebar use the same real
       border on the same box geometry, so the vertical line is
       continuous and meets the header seam in a clean T-junction. */
    .main-header,
    .navbar-header {
        border: none !important;
        box-shadow: none !important;
    }

    .main-header {
        border-bottom: 1px solid var(--chrome-seam) !important;
    }

    .logo-header {
        position: relative;
        border-right: 1px solid var(--chrome-seam);
    }

    .wrapper .sidebar {
        border-right: 1px solid var(--chrome-seam);
        box-shadow: none;
    }

    /* --- Logo header when collapsed: blend into the top bar --- */
    /* The logo block loses its panel background and edge seam so it
       reads as part of the top bar; the vertical seam continues along
       the rail below the header. It also shrink-fits the logo and hugs
       the left edge (16px, aligning with the rail icon column), so the
       logo and the top bar beside it pull in tight instead of floating
       in a 250px block over the 56px rail. */
    html.sidebar_collapsed .logo-header {
        background: var(--chrome-surface) !important;
        border-right-color: transparent;
        /* Shrink-wraps the logo: a logo whose aspect ratio makes it
           height-capped renders narrower than the 200px content box, and
           a fixed width would leave that leftover as a gap. The 9px left
           inset and 14px right gap are then all that separates the logo
           from the top bar's first item (the logo image carries no
           trailing whitespace of its own). */
        width: max-content;
        padding-left: 9px;
        padding-right: 14px;
    }

    /* Keep the logo exactly the size it is when expanded. There its
       width is capped by the 200px content box (250px block − 2×25px
       padding); `width: auto` would otherwise free the image to grow to
       its 60px max-height, so re-apply that 200px cap here. */
    html.sidebar_collapsed .logo-header .logo img {
        max-width: 200px;
    }

    /* The top bar flows beside the logo block; its left start is the
       block's right edge PLUS the navbar's own left padding (Bootstrap
       `.navbar` 1rem) and `#topNavBar`'s 18px. Zero those out when
       collapsed so the first top-bar item (the phone launcher) tucks in
       right after the logo instead of sitting ~34px past it. */
    html.sidebar_collapsed .navbar-header {
        padding-left: 0;
    }

    html.sidebar_collapsed #topNavBar {
        padding-left: 0;
    }
}

/**
 * Ultra-wide screens: the content is capped at 1920px, but the navbar
 * centers in the space right of the 250px logo block while the content
 * centers right of the sidebar — their axes drift ~97px apart. Anchor
 * the navbar to the sidebar edge so both center on the same axis.
 */
@media (min-width: 2240px) {
    /* content-box: the 62px children (logo block, navbar) fill the
       content area exactly and the bottom seam stays outside them. */
    body[data-compact-page="true"] .main-header {
        height: 62px;
        box-sizing: content-box;
    }

    /* Auto side margins (ml-auto/mr-auto) center the capped box
       between `left` and `right`. `bottom: 0` keeps the box inside the
       header's content area so it cannot paint over the bottom seam. */
    body[data-compact-page="true"] .navbar-header {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--sidebar-width);
        right: 0;
        min-height: 0;
    }

    html.sidebar_collapsed body[data-compact-page="true"] .navbar-header {
        left: var(--sidebar-rail-width);
    }
}

/**
 * Mobile drawer: the sidebar slides OVER the page behind a dimmed
 * scrim instead of pushing the content sideways (the theme's default
 * translates .main-panel/.main-header, which reflows everything).
 */
@media screen and (max-width: 991.98px) {
    /* Alt+S is keyboard-only — hide the hint on touch layouts */
    .input-kbd-hint {
        display: none;
    }

    .nav_open .main-panel,
    .nav_open .main-header {
        transform: none !important;
    }

    /* The theme's `transition: all .5s` (for the old push animation)
       also animates the scrollbar-compensation padding and gets stuck
       mid-flight. The header no longer moves on mobile — no transition. */
    .main-header {
        transition: none !important;
    }

    /* Topbar drawer (the ⋮ button) overlays the content instead of
       pushing the whole page down (no flashing reflow). */
    .topbar_open .main-panel,
    .nav_open.topbar_open .main-panel {
        transform: none !important;
    }

    /* The theme parks the drawer 250px above the header and animates
       `all .5s`, so a 62px bar swoops ~310px and drags its padding and
       borders along with it. Hang it directly under the logo block and
       move it by its own height instead. */
    .navbar-header {
        top: 62px;
        z-index: 1;
        transform: translateY(-100%) !important;
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }

    /* Above the drawer's start position, so it emerges from behind the
       logo block rather than sweeping across it. */
    .logo-header {
        z-index: 2;
    }

    .topbar_open .navbar-header {
        transform: translateY(0) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        /* The drawer covers .main-header's own bottom seam when it slides
           out, so it carries the line itself — otherwise the logo block
           and the drawer merge into one undivided slab. Held well under
           the seam token: this line only exists while the drawer is out,
           and an appearing/disappearing edge draws the eye at full seam
           weight. !important beats theme-override.css's blanket
           `border-top: none` at this width. */
        border-top: 1px solid var(--border-subtle) !important;
        border-bottom: 1px solid var(--chrome-seam);
    }

    /* Gutter matching the logo block above it (15px), rather than the
       40px the topbar uses on desktop. The parent .navbar contributes
       no padding of its own, so this is the whole gutter. !important
       beats the 40px theme-override.css forces on non-compact pages. */
    #topNavBar {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .topbar_open .logo-header {
        /*border-bottom: 1px solid var(--chrome-seam) !important;*/
        border-bottom: 0 !important;
    }

    .nav_open .sidebar {
        /* Above open select2 dropdowns so a dropdown in the page content
           renders under the drawer, not over it. select2's open container
           is forced to z-index 1000000 !important (theme-override.css). */
        z-index: 1000001;
        box-shadow: var(--sidebar-slideout-shadow);
        border-right: 1px solid var(--chrome-seam) !important;
    }
}


/* Row highlights are inset pills: every row sits in a 6px gutter on both
   sides with rounded corners, so a fill reads as a floating pill rather
   than a band welded to the rail edge. Hover paints one subtle gray on
   top-level links, group headers and subnav items alike; active rows are
   painted further down and are excluded here. */
.sidebar .nav-item:not(.active):hover:not(.nav-group) > a,
.sidebar .nav-group:not(.active) > a:hover {
    background: var(--surface-2);
}

/* Keyboard focus mirrors hover exactly. :focus-visible keeps it to
   tabbing; a mouse click gets .nav-pending below instead. */
.sidebar .nav-item:not(.nav-group):not(.active) > a:focus-visible,
.sidebar .nav-group:not(.active) > a:focus-visible {
    background: var(--surface-2);
}

/* A clicked row holds the deeper active fill until the next page paints —
   the only signal the click landed, since the cursor is still over the row
   and a hover-strength pill would read as no change at all. Driven by a
   class from sidebar.js rather than :focus: browsers disagree about whether
   a clicked link takes focus, and focus is dropped the moment the new
   document commits, which is exactly the window this needs to cover.
   !important and the doubled class clear the hover rule above, which
   carries more classes in its :not() chain. */
.sidebar .nav-item > a.nav-pending.nav-pending {
    background: var(--nav-active-bg) !important;
}

.sidebar .nav-item > a.nav-pending p,
.sidebar .nav-item > a.nav-pending .sub-item {
    color: var(--text-primary) !important;
    font-weight: bold !important;
}

.sidebar .nav-item:hover:not(.nav-group) .sub-item {
    color: var(--text-primary) !important;
    font-weight: bold !important;
}

/* Focus mirrors hover: the band above carries the highlight, the label
   brightens the same way, so a row held during navigation looks like a
   hovered row rather than a half-lit one. */
.sidebar .nav-item:not(.nav-group) > a:focus .sub-item {
    color: var(--text-primary) !important;
    font-weight: bold !important;
}

.sidebar .nav-group > a:hover .sub-item,
.sidebar .nav-group > a:focus .sub-item {
    color: var(--text-primary) !important;
    font-weight: bold !important;
}

/* Suppress the default edge marker on active items nested in a collapse
   group — the group header above already carries one, and two markers on
   the same left edge read as one broken stripe. Qualified on the
   [data-background-color] the markup always sets, to clear the vendor's
   own attribute-scoped `opacity: 1 !important`. */
.sidebar[data-background-color] .nav-collapse .nav-item.active > a:before,
.sidebar[data-background-color] .nav-collapse .nav-item.active:hover > a:before {
    opacity: 0 !important;
}

/* A nested row is inset from both rail edges, so any fill it takes —
   hover, focus or active — has to be rounded; a square one inside those
   gutters reads as a mis-clipped block rather than a marked row. Carried
   on the anchor so every state inherits it. Top-level rows run edge to
   edge and stay square. */
.sidebar .nav-collapse .nav-item > a {
    border-radius: 6px;
}

/* Active nested item: the same band as a top-level row, with the brighter
   bullet standing in for the suppressed edge marker. */
.sidebar .nav-collapse .nav-item.active > a {
    background-color: var(--nav-active-bg) !important;
}

.sidebar .nav-collapse .nav-item.active > a .sub-item:before {
    background: var(--nav-active-marker) !important;
    width: 6px;
    height: 6px;
}

/* --- Active top-level row ------------------------------------------------
   An inset pill filled with --nav-active-bg. At rail width the pill
   shrinks with the row and still reads as a filled block behind the icon,
   so no separate collapsed-state marker is needed.
   ------------------------------------------------------------------------ */
.sidebar .nav > .nav-item.active > a,
.sidebar .nav > .nav-item.active:hover > a,
.sidebar .nav > .nav-item.nav-group.active > a:hover {
    background-color: var(--nav-active-bg) !important;
}

/* An expanded active group already shows the active child's own band, so
   the header drops its fill and keeps only the marker plus the blue label
   — one filled row per active page. Collapsed (rail, or folded group) the
   child is hidden, so the header keeps the fill as the sole indicator. */
.sidebar .nav > .nav-group.active:has(> .collapse.show) > a {
    background-color: transparent !important;
}

.sidebar .nav > .nav-group.active:has(> .collapse.show) > a:hover,
.sidebar .nav > .nav-group.active:has(> .collapse.show) > a:focus-visible {
    background-color: var(--surface-2) !important;
}

/* The .nav-primary variant is not decoration: the vendor paints the active
   icon from `.nav.nav-primary > .nav-item.active a i`, which outranks the
   unqualified selector, so the token would never reach the glyph. */
.sidebar .nav > .nav-item.active > a .sub-item,
.sidebar .nav > .nav-item.active > a i,
.sidebar .nav.nav-primary > .nav-item.active > a i {
    color: var(--nav-active-fg) !important;
}

/* Child NavItem icons are kept in the markup so they render cleanly when
   a group collapses to a single standalone item — but inside the collapse
   the bullet marker is the visual cue, so hide the fa icon there. */
.sidebar .nav-collapse .nav-item > a > i.fa {
    display: none;
}

/* Section headers: small uppercase label, non-interactive, chunks the
   nav without hiding anything. Left padding matches the nav item's
   icon column so the label sits flush above the icons below it. A thin
   top border + a little top padding give each section a visual break. */
.sidebar .nav-section {
    list-style: none;
    pointer-events: none;
    padding: 10px 10px 7px 7px !important;
    margin: 8px 0 0 !important;
    border-top: 1px solid var(--border-subtle);
}

.sidebar .nav-section h4.text-section {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    line-height: 1;
    margin: 0 !important;
    /* Plus the 7px the .nav-section carries = the 12px at which a row's
       icon column starts (6px pill gutter + 6px pill padding), so the
       label sits flush above the icons under it. */
    padding: 0 0 0 5px !important;
}

.sidebar .nav-section:before {
    content: none !important;
}

/* First section has nothing above it, so its top break (border + margin
   + padding) is just an empty block under the search box. Drop it. */
.sidebar .nav-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Theme adds a 4px blue edge bar whenever a collapse is expanded
   (aria-expanded=true), with an `opacity: 1 !important` that outguns
   the active-pill suppression above. Edge bars are gone from this
   design entirely — the pill is the active indicator — so kill it for
   every group, active or not. */
.sidebar .nav > .nav-group > a[data-toggle=collapse][aria-expanded=true]:before {
    opacity: 0 !important;
}

.sidebar .nav > .nav-group:not(.active) > a[data-toggle=collapse][aria-expanded=true] i {
    color: inherit !important;
}

/* Clicking the group header leaves focus on the <a>, which by default
   paints a background that mimics "selected" and turns the icon blue
   (theme's `.nav-primary > .nav-item a:focus i` rule). Neutralize focus
   styling on nav anchors — the active/expanded state already tells the
   story. */
.sidebar .nav > .nav-item:not(.active) > a:focus,
.sidebar .nav-collapse .nav-item:not(.active) > a:focus {
    background-color: transparent;
    outline: none;
}

.sidebar .nav > .nav-item:not(.active) > a:hover i,
.sidebar .nav > .nav-item:not(.active) > a:focus i,
.sidebar .nav-collapse .nav-item:not(.active) > a:hover i,
.sidebar .nav-collapse .nav-item:not(.active) > a:focus i {
    color: inherit !important;
}

/* Tighten the dead space under an expanded collapse. Theme ships with
   margin-bottom: 15px + padding-bottom: 15px = 30px of empty gap.
   A thin bottom rule visually terminates the expanded list so the
   next nav item doesn't read as another child. */
.sidebar .nav-collapse {
    margin: 0 8px 6px !important;
    padding: 4px 0 8px !important;
    border-bottom: 1px solid var(--border-subtle);
}

/* Nested list polish: slightly brighter bullet, tighter rows. */
.sidebar .nav-collapse .nav-item > a {
    margin-bottom: 1px !important;
    padding: 4px 10px !important;
}

.sidebar .nav-collapse .nav-item > a .sub-item:before {
    background: var(--text-muted);
}

/* Pill geometry for top-level rows. The 8px side margin plus 8px of left
   padding reproduces the 16px icon offset the edge-to-edge row had, so
   icons keep their x position in the rail and through the slide-out. */
.sidebar .nav:not(.nav-collapse) > .nav-item > a,
.sidebar[data-background-color="white"] .nav:not(.nav-collapse) > .nav-item > a {
    width: auto;
    margin: 0 6px 2px;
    padding: 6px;
    border-radius: 8px;
}

/* The icon box is the rail's whole content: 6px gutter + 6px padding on
   both sides + 24px box = the 48px rail, so the box is centred in the
   rail and the icon is centred in the box. Every one of these numbers is
   load-bearing for that alignment. */
.sidebar .nav:not(.nav-collapse) > .nav-item > a > i,
.sidebar[data-background-color="white"] .nav:not(.nav-collapse) > .nav-item > a > i {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    font-size: 16px;
    line-height: 24px;
}

.sidebar .nav:not(.nav-collapse) > .nav-item > a > i[class^="flaticon-"] {
    font-size: 18px;
}

/* No edge stripe anywhere in this design — the pill IS the active state.
   The vendor paints the bar from several attribute-scoped selectors with
   `opacity: 1 !important`, so it is killed once, for every state. */
.sidebar[data-background-color] .nav:not(.nav-collapse) > .nav-item > a:before {
    content: none !important;
}

/* ======================================================================
   Merged in from theme.css / theme-override.css.
   ====================================================================== */

/* ----- from theme-override.css ----- */


.nav-collapse li.active a .sub-item {
    color: var(--nav-active-fg);
}

/* The rail scrolls natively, but layout.css skins every scrollbar globally as a
   16px bar with a light-gray thumb, which reads as a seam down the dark rail.
   The jQuery.scrollbar plugin's own bar is already hidden above for the same
   reason; this hides the native one that was still painting through. Wheel and
   trackpad scrolling are unaffected — only the bar's rendering is suppressed. */
.sidebar .sidebar-wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar .sidebar-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
}