.nav-u-menu {
    max-width: fit-content;
    height: 48px;
}

.header-u-menu {
    transform: translate(0, 5px);
}


.u-menu-step-1 {
    background-color: var(--stz-bg-main-menu);
    color: var(--stz-color-text-menu);
    width: 280px;
    height: 400px;
    display: flex;
    flex-direction: column;
    z-index: 9999;
}

.u-menu-box {
    transform: translate(0px, 10px);
}

.yscroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--stz-bg-dropdown) #fff;
}

.yscroll::-webkit-scrollbar {
    width: 4px;
    border-radius: 0.8rem;
}

.yscroll::-webkit-scrollbar-thumb {
    background-color: var(--stz-bg-dropdown);
}


.u-menu-step-1>div,
.u-menu-step-2>div,
.u-menu-step-3>div,
.u-menu-step-4>div {
    padding: 1px 10px;
    color: #575353;
    margin: 1px;
}



.u-menu-step-2,
.u-menu-step-3,
.u-menu-step-4 {
    background-color: var(--stz-bg-main-menu);
    color: var(--stz-color-text-menu);
    width: 280px;
    height: 400px;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    transform: translate(-271px);
    transition: all 0.1s;
    z-index: 999;
}

.u-menu-item-step {
    display: flex;
    margin: 5px;
    padding: 10px;
    position: relative;
    border-radius: 0.4rem;
    cursor: pointer;
    /* background-color: #f4f4f4; */
}

.u-menu-item-arrow {
    left: 0;
    position: absolute;
    margin-left: 10px;
    display: flex;
    align-items: center;
    top: 0;
    height: 100%;
    color: rgb(183, 181, 181);
}

.u-menu-item-title {
    display: flex;
    align-items: center;
    width: 90%;
    font-size: 14px;

}



.u-menu-step-1>div:hover {

    & .u-menu-item-step-1,
    .u-menu-item-step-1 .u-menu-item-arrow {
        background-color: #f0eded;
        color: var(--stz-color-hover-text-menu);
        transition: all 0.1s;
        font-weight: 800;

    }
}

.u-menu-step-2>div>div:hover {

    & .u-menu-item-step-2,
    .u-menu-item-step-2 .u-menu-item-arrow {
        background-color: #f0eded;
        color: var(--stz-color-hover-text-menu);
        transition: all 0.1s;
        font-weight: 800;

    }
}

.u-menu-step-3>div>div:hover {

    & .u-menu-item-step-3,
    .u-menu-item-step-3 .u-menu-item-arrow {
        background-color: #f0eded;
        color: var(--stz-color-hover-text-menu);
        transition: all 0.1s;
        font-weight: 800;
    }

}

.u-menu-step-4>div>div:hover {

    & .u-menu-item-step-4,
    .u-menu-item-step-4 .u-menu-item-arrow {
        background-color: #f0eded;
        color: var(--stz-color-hover-text-menu);
        transition: all 0.1s;
        font-weight: 800;

    }
}