/*MENU*/

.menu-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 46px;
}

    .menu-logo .menu-l-svg {
        width : 30px;
    }

    .menu-logo .menu-l-text {
        color: var(--mud-palette-primary-lighten);
        font-size: 18px;
        font-style: normal;
        font-weight: bold;
        margin-top: -5px;
    }

.menu-disable {
    opacity: 0; 
    visibility: hidden;
    display: none !important;
}

.desktop-menu .left-side{
    display : flex;
    align-items : center;
}

.dm-ls-menutoggle{
    display : none;
}

.desktop-menu .right-side {
    display: flex;
    align-items: center;
    gap : 10px;
}

.desktop-menu {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: var(--mud-palette-surface);
}

    .desktop-menu .dtm-menu-bar {
        height: 64px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
        position: relative; 
    }

    .desktop-menu .dtm-menu-container {
        display: flex;
        position: relative;
    }

    .desktop-menu .dtm-menu-item {
        padding: 10px 20px;
        margin: 0 5px;
        cursor: pointer;
        font-weight: 500;
        position: relative;
        z-index: 1;
        transition: color 0.3s ease;
        min-width: 100px;
        text-align: center;
        display : flex;
        gap : 8px;
    }

        .desktop-menu .dtm-menu-item.active {
            color: var(--mud-palette-secondary-text);
            transition: color 0.3s ease;
        }

        .desktop-menu .dtm-menu-item.approve.active {
            color: var(--approve-color);
        }   

        .desktop-menu .dtm-menu-item.request.active {
            color: var(--request-color);
        }

        .desktop-menu .dtm-menu-item.reject.active {
            color: var(--reject-color);
        }

        .desktop-menu .dtm-menu-item.suspend.active {
            color: var(--suspend-color);
        }

    .desktop-menu .dtm-menu-highlight {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--mud-palette-primary);
        border-radius: 25px;
        z-index: 0;
        transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
        background: linear-gradient(to right, var(--mud-palette-primary), var(--mud-palette-secondary));
    }

    .desktop-menu .dtm-logo {
        font-weight: bold;
        font-size: 25px;
        color: var(--mud-palette-primary);
    }

.mobile-menu {
    display: flex;
    align-items: center;
}

    .mobile-menu .m-menu-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        border-radius: 15px;
        border-top: 1px solid var(--mud-palette-lines-default);
        background-color: var(--mud-palette-surface);
    }

    .mobile-menu .m-menu-container {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        justify-content: space-evenly;
        height: 60px;
    }

    .mobile-menu .m-menu-item {
        margin: 0 5px;
        cursor: pointer;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        transition: color 0.3s ease;
        align-items: center;
        padding: 5px 0px 5px 0px;
        min-width: 44px;
    }

    .mobile-menu .m-menu-i-text {
        font-weight: 500;
        transition: color 0.3s ease;
        font-size: 12px;
    }

    .mobile-menu .m-menu-i-icon {
        transition: color 0.4s ease;
    }

    .mobile-menu .m-menu-item.active :is(.m-menu-i-text, .m-menu-i-icon) {
        color: var(--mud-palette-primary-lighten);
        transition: color 0.4s ease;
    }

    .mobile-menu .m-menu-item.approve.active :is(.m-menu-i-text, .m-menu-i-icon) {
        color: var(--approve-color);
    }
    .mobile-menu .m-menu-item.request.active :is(.m-menu-i-text, .m-menu-i-icon) {
        color: var(--request-color);
    }

    .mobile-menu .m-menu-item.reject.active :is(.m-menu-i-text, .m-menu-i-icon) {
        color: var(--reject-color);
    }

    .mobile-menu .m-menu-item.suspend.active :is(.m-menu-i-text, .m-menu-i-icon) {
        color: var(--suspend-color);
    }


    .mobile-menu .m-menu-highlight {
        position: absolute;
        height: 2px;
        bottom : 8px;
        background: var(--mud-palette-primary);
        border-radius: 15px;
        z-index: 1;
        transition: all 0.4s cubic-bezier(0.7, 0, 0.25, 1);
    }


.menu-mob-top-bar {
    height: 50px;
}
    .menu-mob-top-bar .mmtb-wrap {
        display: flex;
        padding: 0px 10px;
        align-items: center;
        justify-content: space-between;
        height : 100%;
    }

    .menu-mob-top-bar .mmtb-w-1 {
        font-weight : bold;
        font-size : 20px;
        display : flex;
        align-items : center;

    }
    .menu-mob-top-bar .mmtb-w-2 {
    }


/*MENU*/