.component-menu {
    --textColor: var(--currentColor);
    --textColorHover: var(--currentColorHover);
    --itemColor: var(--textColor, var(--currentColor));
    --itemColorHover: var(--textColorHover, var(--currentColorHover, var(--itemColor)));
    --itemOpacityHover: var(--textOpacityHover);
    --itemReverseOpacity: var(--textOpacityHoverReverse);
    --gapX: 12px;
    --gapY: 5px;
    --textOpacity: 1;
    --textOpacityHover: 1;
    --textOpacityHoverReverse: 0.5;
    --underlineSize: 1px;
    --underlineOpacityHover: 0.35;
    display: flex;
    justify-content: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    min-width: 100%
}

.component-menu[data-show_more] {
    overflow-x: clip
}

.component-menu .root-item {
    color: var(--itemColor)
}

.component-menu .component-menu-list--nested {
    display: none
}

.component-menu .folder-item.active, .component-menu .menu-item.active, .component-menu .root-item.active {
    color: var(--itemColorHover);
    opacity: var(--itemOpacityHover)
}

.component-menu .menu-item.active > .folder-item-text, .component-menu .menu-item.active > .menu-item-text {
    color: var(--activeColor, var(--accentColor))
}

.component-menu .menu-item.active > .folder-item-text:before, .component-menu .menu-item.active > .menu-item-text:before, .component-menu .root-item.active > .folder-item-text.style-underline:after, .component-menu .root-item.active > .menu-item-text.style-underline:after {
    transform: scaleX(1);
    background-color: var(--activeColor, var(--accentColor))
}

.component-menu .root-item.active > .folder-item-text.style-progress:after, .component-menu .root-item.active > .menu-item-text.style-progress:after {
    width: 100%;
    background-color: var(--activeColor, var(--accentColor))
}

.component-menu .folder-item.active > .folder-item-text {
    color: var(--activeColor, var(--accentColor))
}

.component-menu .folder-item :has(>.menu-item.active) > .folder-item-text {
    color: var(--activeColor, var(--accentColor))
}

.component-menu .root-item {
    pointer-events: none
}

.component-menu .folder-item.show .root-item-text .folder-arrow {
    transform: rotate(-180deg)
}

.component-menu-list {
    margin: calc(-1 * var(--gapY)) calc(-1 * var(--gapX));
    padding: 0;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    justify-content: var(--elementJustify, inherit);
    text-align: var(--elementTextAlign, inherit);
    list-style: none
}

.component-menu-list.nowrap-list {
    flex-wrap: nowrap;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-x: clip
}

.component-menu-list .breadcrumbs-active-item {
    display: block;
    margin: var(--gapY) var(--gapX);
    color: var(--activeItemColor)
}

.component-menu-list .menu-item {
    display: block;
    position: relative;
    justify-content: inherit
}

.component-menu-list .menu-item:not(.show-more):not(:last-child):after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--divider);
    mask-image: var(--divider);
    -webkit-mask-size: var(--dividerSize);
    mask-size: var(--dividerSize);
    width: var(--dividerSize);
    height: var(--dividerSize);
    display: var(--dividerDisplay);
    background-color: var(--dividerColor, var(--itemColor));
    transition: inherit
}

.component-menu-list .show-more {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--gapY) 0;
    margin: 0 var(--gapX);
    cursor: pointer;
    pointer-events: all
}

.component-menu-list .show-more.hover, .component-menu-list .show-more.show {
    opacity: .8
}

.component-menu-list .show-more svg {
    width: 18px;
    height: calc(1em * var(--lineHeight));
    min-height: 6px;
    margin: auto
}

.component-menu-list .menu-item-text {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--gapY) 0;
    margin: 0 var(--gapX);
    color: inherit;
    font-style: var(--fontStyle);
    -webkit-text-decoration: var(--textDecoration);
    text-decoration: var(--textDecoration);
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.component-menu-list .menu-item-text span {
    position: relative
}

.component-menu-list .folder-arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    flex-shrink: 0;
    transition: transform .3s ease
}

.component-menu .root-item {
    transition: color .3s ease, opacity .3s ease
}

.component-menu .root-item.active, .component-menu .root-item.hover, .component-menu .root-item.show {
    color: var(--itemColorHover);
    opacity: var(--itemOpacityHover)
}

.component-menu.style--progress .root-item-text span, .component-menu.style--underline .root-item-text span {
    z-index: 2
}

.component-menu.style--progress .root-item-text span:before, .component-menu.style--underline .root-item-text span:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: var(--underlineSize);
    background: var(--underlineColorHover, var(--itemColorHover));
    z-index: -1;
    pointer-events: none
}

.component-menu.style--underline .root-item-text span:before {
    transform: translateY(calc(var(--underlineSize) * 1.5));
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease
}

.component-menu.style--underline .root-item.active .root-item-text span:before, .component-menu.style--underline .root-item.hover .root-item-text span:before, .component-menu.style--underline .root-item.show .root-item-text span:before {
    transform: translateZ(0);
    opacity: var(--underlineOpacityHover)
}

.component-menu.style--progress .root-item-text span:before {
    width: 0;
    left: auto;
    right: 0;
    opacity: var(--underlineOpacityHover);
    transition: left .3s ease, right .3s ease, width .3s ease
}

.component-menu.style--progress .root-item.active .root-item-text span:before, .component-menu.style--progress .root-item.hover .root-item-text span:before, .component-menu.style--progress .root-item.show .root-item-text span:before {
    left: 0;
    right: auto;
    width: 100%;
    transition-delay: .1s
}

.component-menu.style--reverse_opacity .root-item {
    transition: opacity .3s ease
}

.component-menu.style--reverse_opacity .root-item.active, .component-menu.style--reverse_opacity .root-item.hover, .component-menu.style--reverse_opacity .root-item.show {
    color: var(--itemColor);
    opacity: var(--itemOpacity, var(--textOpacity));
    transition-delay: 0s
}

.component-menu.style--reverse_opacity .root-item.active:after, .component-menu.style--reverse_opacity .root-item.hover:after, .component-menu.style--reverse_opacity .root-item.show:after {
    opacity: var(--itemReverseOpacity)
}

.component-menu.style--reverse_opacity.in-show .root-item:not(.hover):not(.show):not(.active), .component-menu.style--reverse_opacity:has(.hover,.show,.active) .root-item:not(.hover):not(.show):not(.active) {
    opacity: var(--itemReverseOpacity) !important;
    transition-delay: .1s
}

body.adaptive-desktop .component-menu[data-direction=row] {
    --gapY: 5px
}

body.adaptive-desktop .component-menu[data-direction=column] {
    --gapX: 0px
}

body.adaptive-desktop .component-menu[data-direction=column] .component-menu-list:not(.component-menu-list--nested) {
    margin: 0;
    display: block
}

body.adaptive-desktop .component-menu[data-direction=column] .component-menu-list:not(.component-menu-list--nested) .menu-item:after {
    display: none
}

.component-menu-dropdown {
    --animationSlideDistance: 5px;
    --gapY: 8px;
    --gap: max(10px, var(--gapY));
    position: absolute;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    animation: slideDown .55s ease 1, fadeIn .35s cubic-bezier(.21, .67, .58, 1) 1;
    z-index: 2700;
    max-width: 640px
}

.component-menu-dropdown.rise {
    z-index: 100000
}

.component-menu-dropdown .folder-arrow {
    transform: rotate(-90deg)
}

.component-menu-dropdown .component-menu-list {
    display: block;
    position: absolute;
    background: var(--lightColor);
    color: var(--darkText);
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 51%, .07), 0 20px 20px rgba(0, 0, 0, .07);
    margin: 0;
    border-radius: max(10px, calc(var(--gap) / 2));
    padding: max(5px, calc(var(--gap) / 2)) 0;
    min-width: 150px;
    width: -moz-max-content;
    width: max-content;
    max-width: inherit;
    max-height: inherit;
    flex-flow: column;
    justify-content: inherit
}

.component-menu-dropdown .menu-item {
    position: relative;
    display: flex;
    align-items: center;
    pointer-events: all;
    cursor: pointer;
    transition: all .2s
}

.component-menu-dropdown .menu-item:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(5px, calc(var(--gap) / 2));
    right: max(5px, calc(var(--gap) / 2));
    border-radius: max(8px, calc(var(--gap) / 2));
    background: rgba(6, 6, 7, .08);
    opacity: 0;
    transition: opacity .2s cubic-bezier(.21, .67, .58, 1)
}

.component-menu-dropdown .menu-item.hover:before, .component-menu-dropdown .menu-item.hover > .menu-item-text, .component-menu-dropdown .menu-item.show:before, .component-menu-dropdown .menu-item.show > .menu-item-text {
    opacity: 1
}

.component-menu-dropdown .menu-item-text {
    width: 100%;
    justify-content: space-between;
    opacity: .85;
    margin: 0;
    padding: max(6px, var(--gap)) max(9px, calc(var(--gap) * 1.5))
}

.component-menu-dropdown .component-menu-list .component-menu-list {
    top: 0;
    left: 100%;
    visibility: hidden;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    margin-top: -5px
}

.component-menu-dropdown .component-menu-list .component-menu-list.show-dropdown {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    z-index: 5;
    pointer-events: all;
    transition: opacity .3s cubic-bezier(.21, .67, .58, 1), visibility .3s cubic-bezier(.21, .67, .58, 1);
    transition-delay: 0s;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto
}

.component-menu-dropdown .component-menu-list .component-menu-list.show-dropdown.in-right {
    margin-left: -5px
}

.component-menu-dropdown .component-menu-list .component-menu-list.show-dropdown.in-left {
    margin-right: -5px;
    left: auto;
    right: 100%
}

.component-menu-dropdown .component-menu-list .component-menu-list.show-dropdown.in-top {
    bottom: 0;
    top: auto;
    margin-bottom: -5px
}

body.adaptive-mobile .component-menu-dropdown {
    max-width: calc(100vw - 20px)
}

body.adaptive-mobile .component-menu {
    overflow: visible
}

body.adaptive-mobile .component-menu-list {
    flex-grow: 1
}

body.adaptive-mobile .component-menu-list .folder-item .folder-arrow {
    transform: rotate(0deg)
}

body.adaptive-mobile .component-menu-list .folder-item.show > .folder-item-text .folder-arrow {
    transform: rotate(-180deg)
}

body.adaptive-mobile [data-direction-adaptive=row] .component-menu-list {
    flex-wrap: wrap;
    max-width: calc(100% + var(--gapX) * 2)
}

body.adaptive-mobile [data-direction-adaptive=column] .component-menu-list--root, body.adaptive-mobile [data-rollup-adaptive=true] .folder-item.show > .component-menu-list--nested {
    display: block
}

body.adaptive-mobile [data-direction-adaptive=column] .component-menu-list {
    margin: 0
}

body.adaptive-mobile [data-direction-adaptive=column] .component-menu-list .folder-arrow {
    margin-right: -10px
}

body.adaptive-mobile [data-direction-adaptive=column] .component-menu-list .menu-item:after {
    display: none
}

body.adaptive-mobile [data-direction-adaptive=column] .menu-item {
    padding: .05px
}

body.adaptive-mobile [data-direction-adaptive=column] .menu-item-text {
    margin: 0;
    width: 100%;
    justify-content: var(--elementJustify, inherit)
}

body.adaptive-mobile .component-menu .component-menu-list--nested {
    position: relative;
    width: 100%;
    max-width: none;
    background: none;
    box-shadow: none;
    padding: var(--gapX) calc(var(--gapX));
    margin: 0;
    border-radius: 7px
}

body.adaptive-mobile .component-menu .component-menu-list--nested .folder-item-text, body.adaptive-mobile .component-menu .component-menu-list--nested .menu-item-text {
    display: block;
    justify-content: inherit;
    opacity: 1
}

body.adaptive-mobile .component-menu .component-menu-list--nested .folder-item-text {
    justify-content: inherit
}

body.adaptive-mobile .component-menu .component-menu-list--nested .folder-item-text span {
    width: auto;
    padding: 0
}

body.adaptive-mobile .component-menu .component-menu-list--nested .folder-item-text .folder-arrow {
    position: relative;
    top: 0;
    right: 0;
    margin-left: 10px
}

body.adaptive-mobile [data-contrast=light] .component-menu-list--nested, body.adaptive-mobile [data-contrast] [data-contrast=light] .component-menu-list--nested {
    background: rgba(74, 74, 74, .15)
}

body.adaptive-mobile [data-contrast=dark] .component-menu-list--nested, body.adaptive-mobile [data-contrast] [data-contrast=dark] .component-menu-list--nested {
    background: hsla(0, 0%, 91%, .15)
}