.panel-container {
    display: flex;
    flex-direction: column; /* For mobile view, change to column layout */
}

.panel {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px; /* Add some spacing between panels */
}

.panel1 {
    background-color: #f0f0f0;
}

.panel2 {
    background-color: #e0e0e0;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
}

    .table th,
    .table td {
        padding: 0.75rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }

    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    .table tbody + tbody {
        border-top: 2px solid #dee2e6;
    }

.table-sm th,
.table-sm td {
    padding: 0.3rem;
}

.table-bordered {
    border: 1px solid #dee2e6;
}

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
    }

    .table-bordered thead th,
    .table-bordered thead td {
        border-bottom-width: 2px;
    }
/* only when nav has .nav-autohide (i.e., Other-only users) */
.nav-autohide {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
/* thin invisible band at top that reveals the nav on hover */
.nav-hotspot {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 12px; /* adjust hover area height */
    z-index: 1031;
}
    /* reveal when hovering the hotspot or the nav itself */
    .nav-hotspot:hover + nav.nav-autohide,
    nav.nav-autohide:hover {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
/* Optional: hide while fullscreen */
.fs-hide {
    display: none !important;
}

/* Additional mobile-friendly styles */
@media (max-width: 767px) {
    .panel-container {
        flex-direction: column; /* Revert back to column layout for smaller screens */
    }

    .panel {
        padding: 5px; /* Reduce padding for smaller screens */
    }

    .btn {
        margin-bottom: 5px; /* Add spacing between buttons for smaller screens */
    }
}