.table {
    padding: 1rem;
}

.table-head-row-cell {
    padding: 1rem;
}

.table-body-row-cell,
.table-body-row-cell-2,
.table-body-row-cell-3 {
    padding: 1rem;
}

.table-head-row-cell-p,
.table-body-row-cell-p {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

@media (max-width: 650px) {
    .table {
        width: 100%;
    }

    .table-head {
        display: none;
    }

    .table-body {
        gap: 1rem;
    }

    .table-body-row {
        border: 1px solid;
    }

    .table-body-row-cell,
    .table-body-row-cell-1,
    .table-body-row-cell-4,
    .table-body-row-cell-2,
    .table-body-row-cell-3 {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 15ch auto;
        padding: 0.5rem 1rem;
    }

    .table-body-row-cell:first-child {
        padding-top: 2rem;
    }

    .table-body-row-cell:last-child {
        padding-bottom: 2rem;
    }

    .table-body-row-cell::before,
    .table-body-row-cell-1::before,
    .table-body-row-cell-4::before,
    .table-body-row-cell-2::before,
    .table-body-row-cell-3::before {
        content: attr(data-cell) ": ";
        font-weight: 700;
        text-transform: capitalize;
    }
}

@media (min-width: 651px) and (max-width: 1280px) {
    .table-container {
        min-width: 100%;
        max-height: 60vh;
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
    }

    .table {
        display: flex;
        flex-direction: column;
        width: max-content;
        margin: 0;
        padding: 0;
    }

    .table-body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .table-head, .table-body-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: 10px;
        margin-right: 10px;
        box-shadow: 0px 1px 0px rgba(207, 207, 207, 0.2);
        height: 50px;
        margin: 0;
        padding: 8px;
        margin-right: 10px;
    }

    .table-head-row-cell,
    .table-body-row-cell,
    .table-head-row-cell-1,
    .table-body-row-cell-1,
    .table-head-row-cell-2,
    .table-body-row-cell-2,
    .table-head-row-cell-3,
    .table-body-row-cell-3,
    .table-head-row-cell-4,
    .table-body-row-cell-4 {
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .table-head-row-cell,
    .table-body-row-cell {
        width: 100px;
        flex: 0 0 100px;
    }

    .table-head-row-cell-1,
    .table-body-row-cell-1 {
        width: 100%;
        flex: 0 0 60px
    }

    .table-head-row-cell-4,
    .table-body-row-cell-4 {
        width: 100%;
        flex: 0 0 120px
    }
    .table-head-row-cell-2,
    .table-body-row-cell-2 {
        width: 160px;
        flex: 0 0 160px;
    }

    .table-head-row-cell-3,
    .table-body-row-cell-3 {
        width: 250px;
        flex: 0 0 250px;
    }
}

@media (min-width: 1281px) {
    .table-container {
        min-width: 100%;
        max-height: 60vh;
        overflow: hidden;
        box-sizing: border-box;
    }

    .table {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .table-body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-height: 60vh;
        overflow-y: auto;
    }

    .table-head, .table-body-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: 10px;
        margin-right: 10px;
        box-shadow: 0px 1px 0px rgba(207, 207, 207, 0.2);
        height: 50px;
        margin: 0;
        padding: 8px;
    }

    .table-head-row-cell,
    .table-body-row-cell,
    .table-head-row-cell-1,
    .table-body-row-cell-1,
    .table-head-row-cell-2,
    .table-body-row-cell-2,
    .table-head-row-cell-3,
    .table-body-row-cell-3,
    .table-head-row-cell-4,
    .table-body-row-cell-4 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .table-head-row-cell,
    .table-body-row-cell {
        width: 100%;
        flex: 0.4;
    }

    .table-head-row-cell-1,
    .table-body-row-cell-1 {
        width: 100%;
        flex: 0.25;
    }

    .table-head-row-cell-4,
    .table-body-row-cell-4 {
        width: 100%;
        flex: 0.6;
    }

    .table-head-row-cell-2,
    .table-body-row-cell-2 {
        width: 100%;
        flex: 0.8;
    }

    .table-head-row-cell-3,
    .table-body-row-cell-3 {
        width: 100%;
        flex: 1.2;
    }
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.table-container::-webkit-scrollbar,
.table-body::-webkit-scrollbar {
    width: 4px; /* Thinnest scrollbar width */
    height: 4px; /* Thinnest scrollbar height for horizontal scrolling */
}

.table-container::-webkit-scrollbar-track,
.table-body::-webkit-scrollbar-track {
    background: #f0f0f0; /* Light background for the track */
    border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb,
.table-body::-webkit-scrollbar-thumb {
    background: #888; /* Darker thumb for visibility */
    border-radius: 10px; /* Rounded thumb */
}

    .table-container::-webkit-scrollbar-thumb:hover,
    .table-body::-webkit-scrollbar-thumb:hover {
        background: #555; /* Darker thumb on hover */
    }

/* Firefox */
.table-container,
.table-body {
    scrollbar-width: thin; /* Smallest predefined scrollbar width in Firefox */
    scrollbar-color: #888 #f0f0f0; /* Thumb color and track color */
}