/** Layout class **/
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/

html,
body {
    min-block-size: 100%;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title,
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
    margin-block: 0;
    margin-inline: 0 1.125rem;
    padding-block: 0;
    padding-inline: 1.375rem 1rem;
    white-space: nowrap;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
    border-radius: .4rem;
    block-size: 2.75rem;
    margin-block-end: .375rem;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link .nav-item-icon,
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-item-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    margin-inline-end: .625rem;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-item-icon,
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-link .nav-item-icon {
    font-size: .9rem;
    margin-inline-end: .925rem;
    margin-inline-start: .3rem;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-link .nav-item-icon,
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-group .nav-item-icon {
    visibility: hidden;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :first-child:before {
    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :hover:first-child .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :hover:first-child .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :hover:first-child .nav-group.open > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :hover:first-child .nav-group.open > :first-child:before {
    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus-visible:first-child .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus-visible:first-child .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus-visible:first-child .nav-group.open > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus-visible:first-child .nav-group.open > :first-child:before {
    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}

@supports not selector(:focus-visible) {
    .layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus:first-child:before,
    .layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus:first-child:before {
        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
    }
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
    block-size: 1.5rem;
    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
    font-size: .75rem;
    text-transform: uppercase;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-item-badge {
    display: inline-block;
    border-radius: 1.5rem;
    font-size: .8em;
    font-weight: 500;
    line-height: 1;
    padding-block: .25em;
    padding-inline: .55em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.layout-nav-type-vertical .layout-vertical-nav {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}

.layout-nav-type-vertical .layout-vertical-nav .nav-item-title {
    letter-spacing: .15px;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
    letter-spacing: .4px;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > .router-link-exact-active {
    background-color: rgb(var(--v-theme-primary));
    color: rgb(var(--v-theme-on-primary));
    box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link a {
    color: inherit;
}

.layout-navbar {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}

html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .navbar-blur.layout-navbar .navbar-content-container,
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .navbar-blur.layout-navbar .navbar-content-container {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: rgb(var(--v-theme-surface), .9);
}

html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .layout-navbar .navbar-content-container,
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .layout-navbar .navbar-content-container {
    background-color: rgb(var(--v-theme-surface));
}

html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .layout-navbar .navbar-content-container,
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .layout-navbar .navbar-content-container {
    box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
    padding-inline: 1.2rem;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > .router-link-exact-active {
    background: linear-gradient(-72.47deg, rgb(var(--v-theme-primary)) 22.16%, rgba(var(--v-theme-primary), .7) 76.47%) !important;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: .625rem;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:after {
    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
    content: "";
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:after {
    flex: 1 1 auto;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:before {
    flex: 0 1 .75rem;
    margin-inline-start: -1.375rem;
}

.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
    margin-inline: 4px 0;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
    block-size: 2.625rem !important;
    border-end-end-radius: 3.125rem !important;
    border-end-start-radius: 0 !important;
    border-start-end-radius: 3.125rem !important;
    border-start-start-radius: 0 !important;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
    transition: margin-inline .15s ease-in-out;
    will-change: margin-inline;
}

.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-link > :first-child,
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-group > :first-child {
    margin-inline: 0 5px;
}

.layout-nav-type-vertical .layout-vertical-nav {
    background-color: rgb(var(--v-theme-background));
}

.layout-vertical-nav-collapsed.layout-nav-type-vertical .layout-vertical-nav.hovered {
    box-shadow: 0 4px 5px -2px var(--v-shadow-key-umbra-opacity), 0 2px 10px 1px var(--v-shadow-key-penumbra-opacity), 0 2px 16px 1px var(--v-shadow-key-ambient-opacity);
}

.layout-nav-type-vertical .layout-vertical-nav .nav-header {
    overflow: hidden;
    padding: 1rem .25rem 1rem 1.375rem;
    margin-inline: 0 1.125rem;
    min-block-size: 64px;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-header .app-logo {
    flex-shrink: 0;
    transition: transform .25s ease-in-out;
}

.layout-vertical-nav-collapsed.layout-nav-type-vertical .layout-vertical-nav:not(.hovered) .nav-header .app-logo {
    transform: translate(-4px);
}

.layout-nav-type-vertical .layout-vertical-nav .nav-header .app-title {
    margin-inline-start: .9rem;
}

.layout-nav-type-vertical .layout-vertical-nav .vertical-nav-items-shadow {
    position: absolute;
    z-index: 1;
    background: linear-gradient(rgb(var(--v-theme-background)) 5%, rgba(var(--v-theme-background), 75%) 45%, rgba(var(--v-theme-background), 20%) 80%, transparent);
    block-size: 55px;
    inline-size: 100%;
    inset-block-start: 62px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-in-out;
    will-change: opacity;
}

.layout-nav-type-vertical .layout-vertical-nav.scrolled .vertical-nav-items-shadow {
    opacity: 1;
}

.layout-nav-type-vertical .layout-vertical-nav .ps__rail-y {
    z-index: 1;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
    margin-block-end: .5rem;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title:not(:first-child) {
    margin-block-start: 1.5rem;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .placeholder-icon {
    margin-inline: auto;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link,
.layout-nav-type-vertical .layout-vertical-nav .nav-group {
    overflow: hidden;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link.disabled,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.disabled {
    opacity: var(--v-disabled-opacity);
    pointer-events: none;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > a {
    position: relative;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:before {
    position: absolute;
    border-radius: inherit;
    background: currentcolor;
    block-size: 100%;
    content: "";
    inline-size: 100%;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:hover:before {
    opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:focus-visible:before {
    opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}

@supports not selector(:focus-visible) {
    .layout-nav-type-vertical .layout-vertical-nav .nav-link > a:focus:before {
        opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
    }
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group-arrow {
    flex-shrink: 0;
    transform-origin: center;
    transition: transform .15s ease-in-out;
    will-change: transform;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > .nav-group-label .nav-group-arrow {
    transform: rotate(90deg);
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
    position: relative;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:before {
    position: absolute;
    border-radius: inherit;
    background: currentcolor;
    block-size: 100%;
    content: "";
    inline-size: 100%;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:hover:before {
    opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}

.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:focus-visible:before {
    opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}

@supports not selector(:focus-visible) {
    .layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:focus:before {
        opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
    }
}

.vertical-nav-section-title-enter-active,
.vertical-nav-section-title-leave-active {
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.vertical-nav-section-title-enter-from,
.vertical-nav-section-title-leave-to {
    opacity: 0;
    transform: translate(15px);
}

.transition-slide-x-enter-active,
.transition-slide-x-leave-active {
    transition: opacity .1s ease-in-out, transform .12s ease-in-out;
}

.transition-slide-x-enter-from,
.transition-slide-x-leave-to {
    opacity: 0;
    transform: translate(-15px);
}

.vertical-nav-app-title-enter-active,
.vertical-nav-app-title-leave-active {
    transition: opacity .1s ease-in-out, transform .12s ease-in-out;
}

.vertical-nav-app-title-enter-from,
.vertical-nav-app-title-leave-to {
    opacity: 0;
    transform: translate(-15px);
}

.layout-vertical-nav ol, .layout-vertical-nav ul,
.layout-horizontal-nav ol, .layout-horizontal-nav ul {
    list-style: none;
}

.scrollable-content.v-navigation-drawer .v-navigation-drawer__content {
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
    transition: padding .2s ease, background-color .18s ease;
}

.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
    border-radius: 0 0 10px 10px;
}

.layout-wrapper.layout-nav-type-vertical .layout-footer .footer-content-container {
    border-radius: 10px 10px 0 0;
}

.layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer .footer-content-container {
    background-color: rgb(var(--v-theme-surface));
    padding-block: 0;
    padding-inline: 1.2rem;
    box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
}

.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .page-content-container > .v-layout:first-child {
    overflow: hidden;
    min-block-size: 100%;
}

.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .page-content-container > .v-layout:first-child > .v-main .v-main__wrap > :first-child {
    block-size: 100%;
    overflow-y: auto;
}

.layout-wrapper.layout-nav-type-horizontal.layout-content-height-fixed > .layout-page-content {
    display: flex;
}

.layout-vertical-nav {
    position: fixed;
    z-index: 1004;
    display: flex;
    flex-direction: column;
    block-size: 100%;
    inline-size: 260px;
    inset-block-start: 0;
    inset-inline-start: 0;
    transition: transform .25s ease-in-out, inline-size .25s ease-in-out, box-shadow .25s ease-in-out;
    will-change: transform, inline-size;
}

.layout-vertical-nav .nav-header {
    display: flex;
    align-items: center;
}

.layout-vertical-nav .app-title-wrapper {
    margin-inline-end: auto;
}

.layout-vertical-nav .nav-items {
    block-size: 100%;
}

.layout-vertical-nav .nav-item-title {
    overflow: hidden;
    margin-inline-end: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) {
    inline-size: 68px
}

.layout-vertical-nav.overlay-nav:not(.visible) {
    transform: translate(-260px);
}

.layout-content-width-boxed.layout-wrapper.layout-nav-type-vertical .layout-navbar {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 1440px;
}

.layout-wrapper.layout-nav-type-vertical .layout-navbar {
    padding-inline: 1.5rem;
}

.layout-wrapper.layout-nav-type-vertical.layout-navbar-hidden .layout-navbar {
    display: none;
}

.layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky .layout-navbar {
    position: sticky;
    inset-block-start: 0;
}

.layout-wrapper.layout-nav-type-vertical {
    block-size: 100%;
}

.layout-wrapper.layout-nav-type-vertical .layout-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-block-size: calc(var(--vh, 1vh) * 100);
    transition: padding-inline-start .2s ease-in-out;
    will-change: padding-inline-start;
}

.layout-wrapper.layout-nav-type-vertical .layout-navbar {
    z-index: 11;
}

.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
    block-size: 64px;
}

.layout-wrapper.layout-nav-type-vertical .layout-overlay {
    position: fixed;
    z-index: 1003;
    background-color: #0009;
    cursor: pointer;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease-in-out;
    will-change: transform;
}

.layout-wrapper.layout-nav-type-vertical .layout-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.layout-wrapper.layout-nav-type-vertical:not(.layout-overlay-nav) .layout-content-wrapper {
    padding-inline-start: 260px;
}

.layout-wrapper.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-content-wrapper {
    padding-inline-start: 68px;
}

.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-content-wrapper {
    max-block-size: calc(var(--vh) * 100);
}

.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content {
    display: flex;
    overflow: hidden;
}

.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content .page-content-container {
    inline-size: 100%;
}

.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content .page-content-container > :first-child {
    max-block-size: 100%;
    overflow-y: auto;
}

.layout-vertical-nav .nav-link a {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.layout-page-content {
    flex-grow: 1;
    padding-block: 1.5rem;
}

.layout-page-content {
    padding-inline: 1.5rem;
}