.holder {
    display: flex;
    flex-direction: row;
    width: 100%
}

.wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    transition: padding .2s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .wrapper {
        transition: none
    }
}

.content {
    flex: 1;
    padding-top: 1.5rem
}

.content > [class*=container] {
    height: 100%
}

body.fullscreen-active .fullscreen-icon-expand {
    display: none
}

body.fullscreen-active .fullscreen-icon-compress {
    display: block
}

body:not(.fullscreen-active) .fullscreen-icon-expand {
    display: block
}

body:not(.fullscreen-active) .fullscreen-icon-compress {
    display: none
}

.aside {
    position: fixed;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 22.5rem;
    border-right-width: 1px;
    border-right-style: solid;
    top: 0;
    left: 0;
    z-index: 1170
}

.theme-light .aside {
    background: #f5f5f5;
    border-right-color: #eee
}

.theme-dark .aside {
    background: #616161;
    border-right-color: #757575
}

.aside-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem 1.5rem
}

.aside-body {
    height: 100%;
    overflow-y: auto;
    padding: 0
}

.aside-title {
    width: 100%;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0
}

.theme-light .aside-title {
    color: #424242
}

.theme-dark .aside-title {
    color: #f5f5f5
}

.aside-addon {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap
}

@media (min-width: 1025px) {
    body.aside-desktop-maximized .aside-icon-maximize {
        display: none !important
    }

    body.aside-desktop-minimized .aside-icon-minimize {
        display: none !important
    }

    body.aside-active.aside-desktop-maximized .wrapper {
        padding-left: 22.5rem
    }

    body.aside-active.aside-desktop-maximized .sticky-header {
        left: 22.5rem
    }

    body.aside-active.aside-desktop-minimized .wrapper {
        padding-left: 4.5rem
    }

    body.aside-active.aside-desktop-minimized .sticky-header {
        left: 4.5rem
    }

    body.aside-desktop-minimized .aside {
        width: 4.5rem;
        transition: all .2s ease-in-out
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    body.aside-desktop-minimized .aside {
        transition: none
    }
}

@media (min-width: 1025px) {
    body.aside-desktop-minimized .aside-addon {
        flex: 1;
        justify-content: center
    }

    body.aside-desktop-minimized .aside-title, body.aside-desktop-minimized .menu-item-addon, body.aside-desktop-minimized .menu-item-text, body.aside-desktop-minimized .menu-section-text, body.aside-desktop-minimized .menu-submenu {
        display: none
    }

    body.aside-desktop-minimized .menu-section-icon {
        display: block
    }

    body.aside-desktop-minimized .aside-hover:hover {
        width: 22.5rem
    }

    body.aside-desktop-minimized .aside-hover:hover .aside-title, body.aside-desktop-minimized .aside-hover:hover .menu-item-addon, body.aside-desktop-minimized .aside-hover:hover .menu-item-text, body.aside-desktop-minimized .aside-hover:hover .menu-section-text, body.aside-desktop-minimized .aside-hover:hover .menu-submenu {
        display: block
    }

    body.aside-desktop-minimized .aside-hover:hover .menu-section-icon {
        display: none
    }

    body.aside-desktop-minimized .aside-hover:not(:hover) .aside-header {
        padding-right: 0;
        padding-left: 0
    }

    body.aside-desktop-minimized .aside-hover:not(:hover) .menu-section {
        padding-left: 0
    }
}

@media (max-width: 1024.98px) {
    .aside {
        transition: all .2s ease-in-out
    }
}

@media (max-width: 1024.98px) and (prefers-reduced-motion: reduce) {
    .aside {
        transition: none
    }
}

@media (max-width: 1024.98px) {
    .aside-icon-maximize {
        display: none !important
    }

    body.aside-mobile-maximized {
        overflow: hidden
    }

    body.aside-active:not(.aside-mobile-maximized) .aside, body.aside-mobile-minimized .aside {
        left: -100%
    }

    #aside-backdrop {
        position: fixed;
        display: block;
        width: 100vw;
        height: 100vh;
        background: rgba(33, 33, 33, .65);
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1160
    }
}

.menu {
    display: flex;
    flex-direction: column
}

.menu-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.menu-item-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 3rem;
    max-height: 3rem;
    background: 0 0;
    padding: 0 1rem;
    text-align: left;
    border: 0;
    outline: 0 !important;
    margin-bottom: 10px;

}

.theme-light .menu-item-link {
    color: #757575
}

.theme-dark .menu-item-link {
    color: #e0e0e0
}

.menu-item-link:hover {
    text-decoration: none
}

.theme-light .menu-item-link:hover {
    color: #757575;
    background: rgba(224, 224, 224, .5)
}

.theme-dark .menu-item-link:hover {
    color: #e0e0e0;
    background: rgba(158, 158, 158, .5)
}

.theme-light .menu-item-link.active, .theme-light .menu-item-link:not(.menu-item-toggle):focus {
    color: #fff;
    background: #2196f3
}

.theme-dark .menu-item-link.active, .theme-dark .menu-item-link:not(.menu-item-toggle):focus {
    color: #fff;
    background: #2196f3
}

.menu-item-link.active .menu-item-caret::after, .menu-item-link:not(.menu-item-toggle):focus .menu-item-caret::after {
    transform: rotate(90deg)
}

.menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: .35rem
}

.menu-item-icon > i {
    font-size: 1.2rem
}

.menu-item-icon > svg {
    width: 1.2rem;
    height: 1.2rem
}

.menu-item-bullet {
    position: relative;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem
}

.menu-item-bullet:before {
    content: "";
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

.menu-item-text {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: inherit;
    padding: 0;
    margin: 0 .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item-addon {
    white-space: nowrap;
    margin: 0 .5rem
}

.menu-item-caret {
    margin: 0 .25rem
}

.menu-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 3rem;
    padding-left: .5rem
}

.menu-section-icon {
    display: none;
    width: 100%;
    text-align: center
}

.menu-section-icon > i {
    font-size: 1.2rem
}

.menu-section-icon > svg {
    width: 1.2rem;
    height: 1.2rem
}

.theme-light .menu-section-icon {
    color: #bdbdbd
}

.theme-dark .menu-section-icon {
    color: #bdbdbd
}

.menu-section-text {
    font-size: 1rem;
    font-weight: 500;
    padding: 0 1rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.theme-light .menu-section-text {
    color: #757575
}

.theme-dark .menu-section-text {
    color: #e0e0e0
}

.menu-submenu {
    overflow: hidden;
    transition: all .2s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .menu-submenu {
        transition: none
    }
}

.theme-light .menu-submenu {
    background: rgba(224, 224, 224, .35)
}

.theme-dark .menu-submenu {
    background: rgba(158, 158, 158, .35)
}

.menu-submenu .menu-item-link {
    padding-left: 2rem
}

.menu-submenu .menu-submenu .menu-item-link {
    padding-left: 3rem
}

.menu-submenu .menu-submenu .menu-submenu .menu-item-link {
    padding-left: 4rem
}

.header {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto !important;
    z-index: 1070
}

.header-holder {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    transition: all .2s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .header-holder {
        transition: none
    }
}

.theme-light .header-holder {
    background: #fff;
    border-bottom-color: #eee
}

.theme-dark .header-holder {
    background: #424242;
    border-bottom-color: #757575
}

.header-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.header-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space: nowrap
}

.header-wrap.header-wrap-block {
    flex: 1
}

.header-title {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0;
    margin: 0
}

.theme-light .header-title {
    color: #424242
}

.theme-dark .header-title {
    color: #f5f5f5
}

.header-brand {
    font-size: 1.6rem;
    font-weight: 600;
    padding: 0;
    margin: 0
}

.theme-light .header-brand {
    color: #212121
}

.theme-dark .header-brand {
    color: #fff
}

.header-divider {
    height: 1.5rem;
    width: 1px;
    margin: 0 1.25rem
}

.theme-light .header-divider {
    background: #eee
}

.theme-dark .header-divider {
    background: #757575
}

.sticky-wrapper.is-sticky {
    z-index: inherit
}

.sticky-wrapper.is-sticky .sticky-header {
    width: auto !important;
    right: 0;
    left: 0;
    transition: all .2s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .sticky-wrapper.is-sticky .sticky-header {
        transition: none
    }
}

@media (max-width: 1024.98px) {
    .header-holder-desktop {
        display: none
    }
}

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

.footer {
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    padding: 1rem 0;
    transition: all .2s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .footer {
        transition: none
    }
}

.theme-light .footer {
    color: #616161;
    background: #fff;
    border-top-color: #eee
}

.theme-dark .footer {
    color: #eee;
    background: #424242;
    border-top-color: #757575
}