@import url('./fonts.css');
@import url('./bottomBar.css');
@import url('./head.css');

.menu2025 {
    --speed: 0.3s;
    --speed-pop: 0.3s;
    --menu-width: 305px;
    --item-height: 70px;
    @media (max-width: 768px) {
        --menu-width: 100vw;
        .hideMobile {
            display: none !important;
        }
    }
    @media (min-width: 769px) {
        .hideDesktop {
            display: none;
        }
    }
}
.sizeSwitch {
    background-color: var(--eo-darker-grey);
    display:  flex;
    align-items: center;
    height: var(--item-height);
    justify-content: center;
    width: var(--item-height);
    cursor: pointer;
    img {
        width: 30px;
    }
    transition: var(--speed) ease-out;
    &:hover {
        background-color: var(--eo-main-color);
    }

    @media (max-width: 767px) {
        &:hover {
            background-color: var(--eo-darker-grey);
        }
    }
}

.sidebar {
    display: flex;
    flex-direction: column;
    &:focus {
        outline: none;
    }
    min-height: calc(100vh - 70px);;
    z-index: 2;
    font-family: Mukta, sans-serif;
    font-size: 18px;
    .group-border {
        border-bottom: 1px solid #fff;
        &.lastItem {
            border-bottom: none;
        }
    }
    .mUserAccount,.mLogout{
        border-top: 1px solid #fff;
        display: flex;
        height: var(--item-height);
        justify-content: center;
        align-items: center;
        transition:background-color .2s ease-in;
        svg{
            width: 32px;
            height: 32px;
            path {
                fill: #fff !important;
            }
        }
        &:hover {
            background-color: var(--eo-dark-grey);
            cursor: pointer;
            .mLogout {
                background-color: var(--eo-darker-grey);
                &:hover {
                    background-color: var(--eo-stages-red);
                }
            }
        }
        &.fullSize {
            width: var(--menu-width);
            justify-content: start;
            .item-icon{
                box-sizing: border-box;
                width: var(--item-height);
                height: var(--item-height);
                padding: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.5s ease-out;
            }
            line-height: 1;
        }
        .userLabel {
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
        }
        .mandantName {
            font-size: 12px;
            font-weight: normal;
            text-transform: uppercase;
        }
    }
    .mLogout{
        border-top: 0;
        svg {
            width: 30px;
            height: 30px;
        }

        &:hover {
            background-color: var(--eo-stages-red);
            cursor: pointer;
        }

        &.fullSize {
            justify-content: center;
            align-items: center;
            width: 185px;
            display: flex;
            flex-direction: column;
            font-size: 12px;
            font-weight: normal;
            text-transform: uppercase;

            svg {
                width: 24px;
                height: 24px;
            }
        }
    }
    white-space: nowrap;
    position: relative;
    width: var(--item-height);
    &.fullSize{
        width: var(--menu-width);
    }
    .group {
        display: flex;
    }
    overflow: visible;
    background-color: var(--eo-darker-grey);
    color: white;


    .subitems{
        max-height: 0;
        opacity: 0;
        transition: var(--speed) ease-out;
        pointer-events: none;
    }
    .open-subitems{
        opacity: 1;
        flex-shrink: 1;
        pointer-events: auto;
    }

    .wrap {
        display: flex;
    }
    .item {
        margin: unset !important;
        text-transform: uppercase;
        text-decoration: none !important;
        color: white !important;

        width: var(--item-height);
        overflow: hidden;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        background-color: var(--eo-darker-grey);
        &.active {
            background-color: var(--eo-dark-grey);
        }
        @media (hover: none) {
            &.active {
                &:hover {
                    background-color: var(--eo-dark-grey);
                }
            }
        }
        transition: var(--speed-pop) ease-out;
        .item-icon {
            box-sizing: border-box;
            width: var(--item-height);
            height: var(--item-height);
            padding: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.5s ease-out;
        }
        .svgContent {
            /*--item-height: 35px;*/
            /*height: var(--item-height);*/
        }

            &.activeSub {
                .subitem-icon {
                    path {
                        fill: var(--eo-main-color);
                    }
                    &:hover {
                        path {
                            fill: #fff !important;
                        }
                    }
                }
                &:hover {
                    path {
                        fill: #fff !important;
                    }
                }
            }

        .item-name {
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            transition: var(--speed) ease-out;
            font-weight: 300 !important;
            margin-left: 10px;
        }
        .group-name {
            font-weight: 700 !important;
        }
        .item-open {
            transition: var(--speed) ease-out;
            margin-right:20px;
            .svgContent {
                height: 20px;
            }
            height: 20px;
            width: auto !important;
            display: none;
        }
        .closed{
            transform: rotate(180deg);
        }
        &:hover {
            width: auto;
            overflow: visible;
            flex-shrink: 1;
            background-color: var(--eo-main-color);
            border-radius: 0 7px 7px 0;
            .item-name {
                width: auto;
                opacity: 1;
                max-width: var(--menu-width);
                text-align: center;
                padding-left: 30px;
                padding-right: 30px;
                margin-left: 0;
                @media (hover: none) {
                    margin-left: 10px;
                    padding:0;
                }
            }
        }
        @media (hover: none) {
            &:hover {
                background-color: var(--eo-darker-grey);
            }
        }
    }
}


.fullSize{
    .item{
        width: var(--menu-width);
        max-width: var(--menu-width);
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        &:hover {
            .item-name {
                padding:0;
                margin-left: 10px;
            }
            @media (hover: none) {
                .item-name {
                    margin-left: 0;
                }
            }
        }
    }
    .item-name{
        width: var(--menu-width) !important;
        max-width: var(--menu-width) !important;
        opacity: 1 !important;
        text-align: left !important;
        padding-right: 0;
    }
    .item-open {
        display: inline-flex !important;
    }
}
#seMainMenu {
    position: sticky;
    top: 0;
    z-index: 3;
}
@media (max-width: 768px) {
    #seMainMenu {
        position: static;
    }
    .sidebar{
        width: var(--menu-width);
        .item{
            width: var(--menu-width);
            max-width: var(--menu-width);
            flex-shrink: 0 !important;
            border-radius: 0 !important;
        }
        .item-name{
            width: var(--menu-width) !important;
            max-width: var(--menu-width) !important;
            opacity: 1 !important;
            text-align: left !important;
            padding-right: 0;
        }
        .item-open {
            display: inline-flex !important;
        }

        .bottomBarSpace {
            border-bottom: 120px solid transparent;
        }
    }
    #seBody {
        padding-bottom: 98px !important;
    }
}

.newMenu #seModuleFunctions {

    .horizontal-menu {
        &.noTabs {
            display: none;
        }
        margin-bottom: 15px !important;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25) !important;
        background-color: #fff;
        li {
            box-sizing: border-box;
            a {
                font-family: Mukta;
                font-size: 16px;
                font-style: normal;
                font-weight: normal;
                line-height: 20px;
                text-decoration: none !important;
                text-transform: none;
                b {
                    border: 0;
                }
                padding: 22px 22px 15px 22px;
            }
            border-bottom: 4px solid transparent;
            &.active {
                font-weight: 700;
                border-bottom: 4px solid var(--eo-darker-grey);
                background-color: var(--eo-light-grey);
            }
        }
    }
}

.userHead, .logoutIcon {
    display: none;
}