:root {
    --fuse-vertical-navigation-width: 280px
}

.fuse-vertical-navigation {
    position: sticky;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    top: 0;
    width: var(--fuse-vertical-navigation-width);
    min-width: var(--fuse-vertical-navigation-width);
    max-width: var(--fuse-vertical-navigation-width);
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    z-index: 200
}

.fuse-vertical-navigation-animations-enabled {
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.25, .8, .25, 1);
    transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width
}

.fuse-vertical-navigation-animations-enabled .fuse-vertical-navigation-wrapper {
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.25, .8, .25, 1);
    transition-property: width, max-width, min-width
}

.fuse-vertical-navigation-mode-over {
    position: fixed;
    top: 0;
    bottom: 0
}

.fuse-vertical-navigation-position-left.fuse-vertical-navigation-mode-side {
    margin-left: calc(var(--fuse-vertical-navigation-width) * -1)
}

.fuse-vertical-navigation-position-left.fuse-vertical-navigation-mode-side.fuse-vertical-navigation-opened {
    margin-left: 0
}

.fuse-vertical-navigation-position-left.fuse-vertical-navigation-mode-over {
    left: 0;
    transform: translate3d(-100%, 0, 0)
}

.fuse-vertical-navigation-position-left.fuse-vertical-navigation-mode-over.fuse-vertical-navigation-opened {
    transform: translateZ(0)
}

.fuse-vertical-navigation-position-left .fuse-vertical-navigation-wrapper {
    left: 0
}

.fuse-vertical-navigation-position-right.fuse-vertical-navigation-mode-side {
    margin-right: calc(var(--fuse-vertical-navigation-width) * -1)
}

.fuse-vertical-navigation-position-right.fuse-vertical-navigation-mode-side.fuse-vertical-navigation-opened {
    margin-right: 0
}

.fuse-vertical-navigation-position-right.fuse-vertical-navigation-mode-over {
    right: 0;
    transform: translate3d(100%, 0, 0)
}

.fuse-vertical-navigation-position-right.fuse-vertical-navigation-mode-over.fuse-vertical-navigation-opened {
    transform: translateZ(0)
}

.fuse-vertical-navigation-position-right .fuse-vertical-navigation-wrapper {
    right: 0
}

.fuse-vertical-navigation-inner {
    position: relative;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    box-shadow: none
}

.fuse-vertical-navigation-inner .fuse-vertical-navigation-wrapper {
    position: relative;
    overflow: visible;
    height: auto
}

.fuse-vertical-navigation-inner .fuse-vertical-navigation-wrapper .fuse-vertical-navigation-content {
    overflow: visible !important
}

.fuse-vertical-navigation-wrapper {
    position: absolute;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    background: inherit;
    box-shadow: inset -1px 0 0 var(--fuse-border)
}

.fuse-vertical-navigation-wrapper .fuse-vertical-navigation-content {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain
}

.fuse-vertical-navigation-wrapper .fuse-vertical-navigation-content>fuse-vertical-navigation-divider-item {
    margin: 24px 0
}

.fuse-vertical-navigation-wrapper .fuse-vertical-navigation-content>fuse-vertical-navigation-group-item {
    margin-top: 24px
}

.fuse-vertical-navigation-aside-wrapper {
    position: absolute;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    top: 0;
    bottom: 0;
    left: var(--fuse-vertical-navigation-width);
    width: var(--fuse-vertical-navigation-width);
    height: 100%;
    z-index: 5;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition-duration: .4s;
    transition-property: left, right;
    transition-timing-function: cubic-bezier(.25, .8, .25, 1);
    background: inherit
}

.fuse-vertical-navigation-aside-wrapper>fuse-vertical-navigation-aside-item {
    padding: 24px 0
}

.fuse-vertical-navigation-aside-wrapper>fuse-vertical-navigation-aside-item>.fuse-vertical-navigation-item-wrapper {
    display: none !important
}

.fuse-vertical-navigation-position-right .fuse-vertical-navigation-aside-wrapper {
    left: auto;
    right: var(--fuse-vertical-navigation-width)
}

.fuse-vertical-navigation-aside-item,
.fuse-vertical-navigation-basic-item,
.fuse-vertical-navigation-collapsable-item,
.fuse-vertical-navigation-divider-item,
.fuse-vertical-navigation-group-item,
.fuse-vertical-navigation-spacer-item {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    -webkit-user-select: none;
    user-select: none
}

.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    border-radius: 6px
}

.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item.fuse-vertical-navigation-item-disabled,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item.fuse-vertical-navigation-item-disabled,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item.fuse-vertical-navigation-item-disabled,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item.fuse-vertical-navigation-item-disabled,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item.fuse-vertical-navigation-item-disabled,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item.fuse-vertical-navigation-item-disabled {
    cursor: default;
    opacity: .4
}

.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-icon,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-icon,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-icon,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-icon,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-icon,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-icon {
    margin-right: 16px
}

.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-title-wrapper .fuse-vertical-navigation-item-subtitle,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-title-wrapper .fuse-vertical-navigation-item-subtitle,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-title-wrapper .fuse-vertical-navigation-item-subtitle,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-title-wrapper .fuse-vertical-navigation-item-subtitle,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-title-wrapper .fuse-vertical-navigation-item-subtitle,
.fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-title-wrapper .fuse-vertical-navigation-item-subtitle {
    font-size: 11px;
    line-height: 1.5
}

.fuse-vertical-navigation-content-header .fuse-vertical-navigation-item-wrapper .fuse-vertical-navigation-item .fuse-vertical-navigation-item-title-wrapper .fuse-vertical-navigation-item-title {
    --tw-text-opacity: 1;
    color: rgba(var(--fuse-primary-600-rgb), var(--tw-text-opacity));
    opacity: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}