body.modal-open {
    overflow: hidden;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    background: #fff;
    transition: left 0.6s ease;
    z-index: 30;
    overflow-y: auto;
    padding: 1rem;
}

    .mobile-sidebar.open {
        left: 0;
    }

.list-group-item {
    display: flex;
    align-content: center;
    justify-content: center;
    border: none;
    font-size: large;
}

/* Submenu Sidebar Styles */
.submenu-sidebar {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    transition: top 0.6s ease;
    z-index: 100;
    padding: 1rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

    .submenu-sidebar.open {
        top: 0;
    }
    /* Position the close button at the top */
    .submenu-sidebar button {
        top: 10px;
        right: 10px;
    }

/* Push submenu list below the close button */
.submenu-list {
    list-style: none;
    padding: 0;
}

    .submenu-list li a {
        padding: 10px;
        justify-content: center; /* You might change to flex-start if needed */
        font-size: large;
        border: none;
        white-space: normal; /* Allows wrapping */
        text-align: center;
        width: 100%; /* Force full container width */
        overflow: hidden; /* Hide any overflow */
    }

/* Full width for small devices */
@media (max-width: 576px) {
    .mobile-sidebar, .submenu-sidebar {
        width: 100%;
    }
}

/* 50% width for medium devices */
@media (min-width: 577px) and (max-width: 992px) {
    .mobile-sidebar, .submenu-sidebar {
        width: 55%;
    }
}