#data-table .tablesaw-cell-content,
#benchOfficials .tablesaw-cell-content {
    min-height: 20px; /* Adjust as needed */
    white-space: normal; /* Allow text wrapping if needed */
}

#data-table tr,
#benchOfficials tr {
    border-bottom: 1px solid #ccc; /* Adjust color and style as needed */
}


@media (max-width: 480px) {
    #data-table .tablesaw-cell-content span,
    #benchOfficials .tablesaw-cell-content span {
        display: block;
        text-align: right;
        width:100%;
        margin-left: 20px
    }

    #data-table th,
    #benchOfficials th {
        text-align: right;
    }
}


/* Desktop view */
@media (min-width: 1367px) {

    /*.flex-table .flex-cell .badge {

        width: 100%;*/ /* This sets the badge to take 100% of its parent's (flex-cell) width */
        /*text-align: center;*/ /* Optional: if you want the text inside the badge to be centered */
        /* You can remove white-space, overflow, and text-overflow properties if you want the text to wrap */
    /*}

    .flex-table {
        display: flex;
        flex-direction: column;
        width: 95%;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-cell-header, .flex-cell {
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
    }

    .flex-cell-header {
        flex: 0 0 20%;*/ /* adjust the percentage based on your number of columns */
        /*background-color: #f2f2f2;
    }

    .flex-cell {
        flex: 0 0 20%;*/ /* this should match the header cell width */
    /*}

    .flex-table-header {
        width: 100%;
        display: flex;
    }

    .flex-table-body .flex-row {
        display: flex;
        width: 100%;
    }*/

    .flex-table {
        display: flex;
        flex-direction: column;
        width: 95%;
        margin: auto; /* Center the table on the page */
    }

    .flex-table-header, .flex-row {
        display: flex;
        flex-direction: row;
        width: 100%; /* Ensuring the row takes the full width */
    }

    .flex-cell-header, .flex-cell {
        box-sizing: border-box; /* Include padding and borders in the width and height */
        flex: 1; /* Allow cells to grow and take equal space */
        text-align: center;
        padding: 5px;
        min-width: 0; /* Prevent the cell from growing beyond the flex-basis */
    }

    /* Specific to badges */
    .flex-table .flex-cell .badge {
        width: 100%; /* Set the badge to take 100% of its parent's width */
        white-space: normal; /* Allow the text to wrap */
        overflow: hidden; /* Hide the overflowed text */
    }

}

/* Mobile view */
@media (max-width: 1366px) {
    .flex-table {
        width: 100%; /* Full width on mobile */
    }

    .flex-table-header {
        display: none; /* Hide the header on mobile */
    }

    .flex-row {
        flex-direction: column; /* Stack cells vertically on mobile */
    }

    .flex-cell {
        flex: 0 0 100%; /* Each cell takes full width on mobile */
        text-align: left; /* Align text to the left on mobile */
        padding: 5px 10px; /* Adjust padding on mobile */
        min-width: auto; /* Reset min-width for mobile */
    }
    .flex-table .flex-cell .badge {
        width: 100%; /* This sets the badge to take 100% of its parent's (flex-cell) width */
        text-align: center; /* Optional: if you want the text inside the badge to be centered */
        /* You can remove white-space, overflow, and text-overflow properties if you want the text to wrap */
    }
}

/* Mobile view */
@media (max-width: 428px) {
    /*Flex*/
    .flex-table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .flex-table-header {
        display: none; /* Hide the header on small screens */
    }

    .flex-row {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee; /* Optional border for rows */
    }

    .flex-cell {
        flex: 1;
        padding: 8px;
        min-width: 150px; /* Minimum width for cells */
    }

    .flex-table .flex-cell .badge {
        width: 100%; /* This sets the badge to take 100% of its parent's (flex-cell) width */
        text-align: center; /* Optional: if you want the text inside the badge to be centered */
        /* You can remove white-space, overflow, and text-overflow properties if you want the text to wrap */
    }
}