.cl-manu{--manu-bgc:var(--main-color-white);--manu-item-hover-bgc:transparent;--manu-font-color:var(--info-color);--manu-border-bottom-color:#dddee0;--manu-child-spacing:5px;--manu-item-padding:0 20px;--submanu-item-padding:5px 10px;--manu-border-radius:5px;--manu-active-border-color:var(--primary-color);--manu-active-color:#000;--manu-item-hover-color:#000;--manu-item-disabled-color:#adadad;--submanu-bgc:var(--manu-bgc);--manu-v-item-height:40px;--manu-icon-size:1em;height:40px;display:flex}.cl-manu:has(.vertical){flex-direction:column;height:100%;width:max-content}.cl-manu__content{flex:1;display:flex;align-items:stretch;height:100%;background-color:var(--manu-bgc);color:var(--manu-font-color);box-shadow:0 1px 0 0 var(--manu-border-bottom-color)}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item.active>.title-box,.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item:has(.active.cl-manu-item)>.title-box,.cl-manu__content .cl-manu-item.active>.title-box,.cl-manu__content .cl-manu-item:has(.active.cl-manu-item)>.title-box{color:var(--manu-active-color)}.cl-manu__content .cl-manu-item{box-sizing:border-box;padding:var(--manu-item-padding);position:relative;display:flex;align-items:center}.cl-manu__content .cl-manu-item.active::before,.cl-manu__content .cl-manu-item:has(.active.cl-manu-item)::before{box-shadow:inset 0 -2px 0 0 var(--manu-active-border-color)}.cl-manu__content .cl-manu-item::before{position:absolute;top:0;left:0;right:0;bottom:0;content:"";transition:background-color .3s,box-shadow .3s}.cl-manu__content .cl-manu-item .title-box{position:relative;z-index:1;display:flex;height:100%;align-items:center;transition:color .3s}.cl-manu__content .cl-manu-item .title-box>.cl-icon,.cl-manu__content .cl-manu-item .title-box>i{padding-right:5px;font-weight:700;font-size:var(--manu-icon-size)}.cl-manu__content .cl-manu-item .title-box .title{width:max-content;height:100%;display:flex;align-items:center;gap:5px}.cl-manu__content .cl-manu-item .title-box .title i.cl-down{transition:transform .3s}.cl-manu__content .cl-manu-item .cl-submanu{padding-top:var(--manu-child-spacing);position:absolute;bottom:0;left:0;min-width:100%;width:max-content;opacity:0;transform:translateY(100%) scaleY(0);transform-origin:top;transition:transform .3s,opacity .3s;background-color:var(--submanu-bgc)}.cl-manu__content .cl-manu-item .cl-submanu .cl-submanu__content{padding:5px 0;border-radius:var(--manu-border-radius);box-shadow:0 0 10px -5px var(--main-color-block);background-color:var(--manu-bgc)}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item.active::before,.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item:has(.active.cl-manu-item)::before,.cl-manu__content .cl-manu-item.disabled::before{box-shadow:none}.cl-manu__content .cl-manu-item:hover::before,.cl-manu__content.vertical .cl-manu-item:hover::before{background-color:var(--manu-item-hover-bgc)}.cl-manu__content .cl-manu-item .cl-submanu .cl-submanu{padding:0;padding-left:var(--manu-child-spacing);left:unset;bottom:unset;top:0;right:0;opacity:0;transform:translateX(100%) scale(0);transform-origin:left top}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item{padding:var(--submanu-item-padding)}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item:hover>.title-box,.cl-manu__content .cl-manu-item:hover>.title-box{color:var(--manu-item-hover-color)}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item .title i.cl-down{transform:rotate(-90deg)}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item:hover>.cl-submanu{opacity:1;transform:translateX(100%) scale(1)}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item:hover>.title-box>.title i.cl-down{transform:rotate(90deg)}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item:first-child::before{border-radius:var(--manu-border-radius) var(--manu-border-radius) 0 0}.cl-manu__content .cl-manu-item .cl-submanu .cl-manu-item:last-child::before{border-radius:0 0 var(--manu-border-radius) var(--manu-border-radius)}.cl-manu__content .cl-manu-item:hover>.cl-submanu{opacity:1;transform:translateY(100%) scaleY(1)}.cl-manu__content .cl-manu-item:hover>.title-box>.title>i.cl-down{transform:rotate(180deg)}.cl-manu__content .cl-manu-item.disabled{color:var(--manu-item-disabled-color);pointer-events:none;opacity:.5}.cl-manu__content .cl-manu-item.disabled>.title-box{color:currentColor}.cl-manu__content.vertical{--manu-active-border-color:transparent!important;flex-direction:column;width:max-content;box-shadow:1px 0 0 0 var(--manu-border-bottom-color)}.cl-manu__content.vertical .cl-manu-item{--manu-child-spacing:0;--manu-border-radius:0;height:var(--manu-v-item-height);flex-direction:column;align-items:flex-start}.cl-manu__content.vertical .cl-manu-item .title-box{height:var(--manu-v-item-height)}.cl-manu__content.vertical .cl-manu-item .title-box>i{transition:padding 0s}.cl-manu__content.vertical .cl-manu-item .title-box>.title{max-width:50vw;width:max-content;transition:max-width 1s ease-in-out;overflow:hidden}.cl-manu__content.vertical .cl-manu-item .title-box>.title>i.cl-down{transform:rotate(-90deg)}.cl-manu__content.vertical .cl-manu-item .cl-submanu{top:0;left:unset;right:0;transform:translateX(100%) scaleX(0);transform-origin:left;height:max-content}.cl-manu__content.vertical .cl-manu-item:hover>.cl-submanu{opacity:1;transform:translateX(100%) scaleX(1)}.cl-manu__content.vertical .cl-manu-item:hover>.title-box{color:var(--manu-item-hover-color)}.cl-manu__content.vertical .cl-manu-item:hover>.title-box>.title>i.cl-down{transform:rotate(90deg)}.cl-manu__content.vertical.collapse>.cl-manu-item>.title-box>i{padding:0;transition:padding .5s}.cl-manu__content.vertical.collapse>.cl-manu-item>.title-box .title{max-width:0;transition:max-width .5s cubic-bezier(0,1,0,1)}