.ui.vertical.menu {
    background: var(--bgSoft) !important;
    width: 100% !important;
    max-width: 12vw;
    height: 100%;
    border-radius: 4px;
    z-index: 1000;
    /* overflow-x: auto; */
}

.ui.item {
    color: var(--text) !important;
    border-radius: 4px !important;
}

a.item {
    height: 40px !important;
    color: #000 !important;
    border-radius: 4px !important;
}

a.ui.item:hover,
.ui.item:hover,
.item:hover {
    background-color: white !important;
    color: #000 !important;
    border-radius: 4px !important;
}

.scrollable-menu {
    max-height: 70vh; /* Adjust the height as needed */
    min-width: 200px !important; /* Adjust the width as needed */
    overflow-y: auto;
}

.section {
    height: auto; /* Full height of the viewport */
    float: left; /* Align sections horizontally */
    box-sizing: border-box; /* Include padding and border in the width */
    /* border: 1px solid black;  */
}

#section1 {
    position: absolute;
    width: 12vw;
    max-width: 12vw !important;
    min-height: 100vh;
    background-color: lightcoral;
    overflow: auto;
}

#section2 {
    margin-left: 12vw !important;
    width: 88%;
}

@media (max-width: 1280px) {
    .ui.vertical.fixed.menu {
        width: auto !important;
        max-width: 30%;
        display: none;
    }
    #section1 {
        width: 0 !important;
    }

    #section2 {
        margin-left: 0 !important;
        min-width: 100%;
        width: auto;
    }

    #myDataTable {
        min-width: 97vw !important;
        width: 100%;
        padding: 5px !important;
        overflow-x: auto !important;
    }

    .ui.table.report {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .ui.vertical.fixed.menu.show {
        display: block;
    }

    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 7px;
        left: 2px;
        z-index: 1000; /* Adjust the z-index as needed */
        color: var(--bgSoft);
    }
}