/* Make the table container scrollable horizontally */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
    width: 100%; /* Ensure the container takes full width */
}

table {
    width: 100%;
    min-width: 600px; /* Adjust based on table content */
    border-collapse: collapse;
}

.table td, th{
    padding: 8px;
    border: 1px solid #939598;
    word-wrap: break-word;
}

.table thead th {
    border-top: 1px solid #939598;
    border-bottom: 2px solid #939498;
}

.table-striped thead {
    background-color: #fcf2ff;
}

@media screen and (max-width: 768px) {
    .table-container {
        padding: 0 10px; /* Add padding for better appearance */
    }
}