@media print {
    .app-sidebar,
    .page-topbar {
        display: none !important;
    }
}

:root {
        --navigation-sidebar-width: 18.571rem;
        --navigation-topbar-height: 4.571rem;
        --navigation-item-height: 3.143rem;
        --navigation-toggle-icon-size: 1.429rem;
        --navigation-shadow: 0 .714rem .714rem color-mix(in srgb, var(--color-text), transparent 80%);
    }

    .app-shell__main {
        padding-left: 0;
        transition: padding-left .3s ease;
        backface-visibility: hidden;
    }

    .app-shell__main--viewport {
        height: calc(100% - var(--navigation-topbar-height));
    }

    .navbar {
        position: relative;
        z-index: 997;
    }

    .page-topbar > .navbar.navbar-fixed,
    .navbar .app-topbar,
    .app-topbar > .nav-wrapper {
        height: var(--navigation-topbar-height);
        line-height: var(--navigation-topbar-height);
    }

    .navbar .app-topbar {
        min-height: var(--navigation-topbar-height);
        padding: 0 .571rem 0 1.071rem;
        color: var(--color-text);
        background: var(--color-surface);
    }

    .navbar .app-topbar ul a {
        color: var(--color-text);
    }

    .app-topbar .app-menu-toggle {
        float: left;
        width: var(--navigation-topbar-height);
        height: var(--navigation-topbar-height);
        color: var(--color-text);
        text-align: center;
    }

    .app-topbar .app-menu-toggle i {
        height: var(--navigation-topbar-height);
        color: inherit;
        font-size: var(--navigation-toggle-icon-size);
        line-height: var(--navigation-topbar-height);
    }

    .app-topbar .navbar-list,
    .app-topbar .navbar-list > li,
    .app-topbar .navbar-list > li > a,
    .app-topbar .navbar-list > li > a > i.material-icons {
        height: var(--navigation-topbar-height);
        line-height: var(--navigation-topbar-height);
    }

    .app-topbar .menu-btn {
        display: inline-flex;
        align-items: center;
        height: var(--navigation-topbar-height);
        margin: 0;
        padding: 0 1.071rem;
        color: var(--color-text);
        background: transparent;
        cursor: pointer;
        font-size: 1rem;
        font-weight: var(--font-weight-regular);
        line-height: var(--navigation-topbar-height);
    }

    .app-topbar .menu-btn .material-icons {
        height: inherit;
        font-size: 1.714rem;
        line-height: inherit;
    }

    .app-sidebar {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: var(--navigation-sidebar-width);
        height: 100%;
        background: var(--color-surface);
        box-shadow: var(--navigation-shadow);
        transition: transform .3s ease;
    }

    .app-sidebar__header {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        width: 105%;
        height: var(--navigation-topbar-height);
        background: var(--color-surface);
    }

    .app-sidebar__logo-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        white-space: nowrap;
    }

    .app-sidebar__brand {
        display: flex;
        align-items: center;
        width: calc(100% - 4rem);
        height: 100%;
        padding-left: 1.571rem;
        color: var(--color-text);
    }

    .app-sidebar__brand > :is(img, .icon-img) {
        flex: 0 0 1.571rem;
        width: 1.571rem;
        height: 1.571rem;
        object-fit: contain;
    }

    .app-sidebar__brand-name {
        overflow: hidden;
        padding-left: .571rem;
        font-size: 1.714rem;
        font-weight: var(--font-weight-bold);
        line-height: 1;
        text-overflow: ellipsis;
    }

    .app-sidebar__toggle {
        position: absolute;
        top: 0;
        right: 1.143rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.571rem;
        height: 100%;
        padding: 0;
        color: var(--color-text);
        background: transparent;
        border: 0;
    }

    .app-sidebar__toggle i {
        color: inherit;
        font-size: var(--navigation-toggle-icon-size);
        line-height: 1;
    }

    .app-sidebar > .app-sidebar__menu.sidenav {
        top: var(--navigation-topbar-height);
        overflow-x: hidden;
        overflow-y: auto;
        width: inherit;
        height: calc(100% - var(--navigation-topbar-height));
        padding-bottom: var(--space-3);
        background: var(--color-surface);
        border: 0;
        box-shadow: none;
        backface-visibility: hidden;
    }

    .app-sidebar__menu :is(li, li > a, li > a.collapsible-header),
    .app-sidebar__menu .setting_row {
        line-height: var(--navigation-item-height);
    }

    .app-sidebar__menu :is(li > a, li > a.collapsible-header),
    .app-sidebar__menu .setting_row {
        display: flex;
        align-items: center;
        height: var(--navigation-item-height);
        margin: 0 1.15rem 0 0;
        padding: 0 0 0 1.5rem !important;
        color: var(--color-text);
        cursor: pointer;
        font-weight: var(--font-weight-regular);
    }

    .app-sidebar__menu li > a > .menu-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-sidebar__menu li > a > .badge {
        flex: 0 0 auto;
        float: none;
        margin: 0 var(--space-1) 0 auto;
        white-space: nowrap;
        min-width: 1rem;
        height: 1.429rem;
        background: #FF385A;
        color: #FFFFFF;
        border-radius: .643rem;
        font-size: .8rem;
        line-height: 1.429rem;
    }

    .app-sidebar__menu .setting_row > .col {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .app-sidebar__menu :is(li > a, li > a.collapsible-header) > i.material-icons,
    .app-sidebar__menu .setting_row i.material-icons {
        height: var(--navigation-item-height);
        margin: 0 var(--space-2) 0 0;
        color: var(--color-text) !important;
        font-size: 1.6rem;
        line-height: var(--navigation-item-height);
    }

    .app-sidebar__menu :is(li > a:not(.active):hover, li.open, .setting_row:hover) {
        background: var(--color-hover) !important;
        border-radius: 0 1.786rem 1.786rem 0;
    }

    .app-sidebar__menu li > a.active {
        color: var(--color-text) !important;
        background: var(--color-hover) !important;
        border-radius: 0 1.786rem 1.786rem 0;
        box-shadow: none;
        font-weight: var(--font-weight-bold);
    }

    .app-sidebar__menu li.active {
        background: var(--color-surface-muted);
    }

    .app-sidebar__menu .collapsible-header::after {
        position: absolute;
        right: .286rem;
        content: 'keyboard_arrow_right';
        color: var(--color-text-secondary);
        font-family: 'Material Symbols Rounded';
        font-size: 1.286rem;
    }

    .app-sidebar__menu .collapsible-header.active::after {
        content: 'keyboard_arrow_down';
    }

    .app-sidebar__menu .collapsible-body {
        background: transparent;
    }

    .app-sidebar__menu :is(.menu-item, .setting_row > .col, .collapsible-body li a) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-sidebar__section-title {
        margin: var(--space-2) 1.5rem var(--space-0-5);
        color: var(--color-text-secondary);
        font-size: .8rem;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
    }

    .app-sidebar__menu::-webkit-scrollbar {
        width: .571rem;
    }

    .app-sidebar-trigger {
        background: none;
        box-shadow: none;
    }

    .app-sidebar-trigger i {
        height: inherit;
        color: var(--color-text);
        line-height: inherit;
    }

    .app-sidebar-trigger.btn-icon > .material-icons {
        height: 1.5rem;
        line-height: 1;
    }

    @media only screen and (min-width: 993px) {
        .app-shell .app-shell__main {
            padding-left: var(--navigation-sidebar-width);
        }

        .app-shell.app-menu-closed .app-shell__main {
            padding-left: 0;
        }

        .app-shell.app-menu-closed .app-sidebar {
            transform: translateX(-100%);
        }

        .app-sidebar > .app-sidebar__menu.sidenav-fixed {
            transform: translateX(0) !important;
        }

        .sidenav-overlay {
            background-color: transparent;
        }
    }

    @media only screen and (max-width: 992px) {
        .navbar .app-topbar {
            padding-left: 0;
        }

        .app-sidebar {
            width: auto;
            height: 0;
            background: transparent;
            box-shadow: none;
        }

        .app-sidebar__header {
            display: none;
        }

        .app-sidebar > .app-sidebar__menu.sidenav {
            top: 0;
            width: var(--navigation-sidebar-width);
            height: 100vh;
            padding-bottom: 0;
        }

        .app-sidebar-trigger {
            position: relative;
            top: calc((var(--navigation-topbar-height) - 3rem) / 2);
            left: var(--space-1);
        }
    }

    @media only screen and (max-width: 600px) {
        .app-sidebar-trigger {
            left: .429rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .app-shell__main,
        .app-sidebar {
            transition: none;
        }
    }