/* Responsive styling for small screens */
@media (max-width: 768px) {
    .table thead {
        display: none; /* Hide table headers */
    }
    .table tbody tr {
        display: block; /* Make each row a block element */
        margin-bottom: 10px; /* Add some space between rows */
    }
    .table tbody tr td {
        display: block; /* Make each cell a block element */
        width: 100%; /* Ensure each cell takes the full width */
        text-align: left; /* Align text to the left */
        padding-left: 0; /* Remove padding-left */
        position: relative; /* Required for absolute positioning of labels */
        padding: 10px 10px 10px 10px; /* Optional: Add padding for better readability */
        overflow-wrap: break-word; /* Ensure long words break and wrap within the cell */
        word-wrap: break-word; /* Ensure long words break and wrap within the cell */
        word-break: normal; /* Ensure long words break within the cell */
    }
    .table tbody tr td::before {
        content: attr(data-label); /* Use data-label attribute as the label */
        display: inline-block; /* Display label inline-block */
        width: 100%; /* Ensure label takes full width */
        font-weight: bold; /* Make label bold */
        text-align: left; /* Align label text to the left */
        margin-bottom: 5px; /* Add space between label and value */
		padding: 0 10px; /* Optional: Add padding for better readability */
    }
}