/* General Table Styling */
.responsiveTable.dataTable {
    border: 30px;
    table-layout: fixed;
    /* Ensures columns are of equal width */
    width: 100%;
    /* Ensures the table spans the container width */
    border-collapse: collapse;
    /* Remove spaces between table borders */
    font-family: Arial, sans-serif;
    /* Set a clean, readable font */
    font-size: 16px;
    /* Adjust font size */
    border-radius: 10px;
    /* Rounded corners for the table */
}

.responsiveTable.dataTable thead th {
    border-radius: 10px 10px 0 0;
    /* Rounded top corners */
    color: white;
    /* Header text color */
    text-align: center;
    /* Center-align header text */
    padding: 0px;
    position: relative;
    /* Ensure relative positioning for child elements */
    overflow: hidden;
    /* Prevent the background from spilling outside */
}

.responsiveTable th a {
    display: block;
    height: 100%;
    text-align: center;
    padding: 10px;
    color: white;
    /* Initial text color */
    text-decoration: none;
    border-radius: 5px;
    /* Rounded corners (optional) */

}

.responsiveTable th:hover {
    /* background-color: rgba(255, 255, 255, 0.2); */
    /* Subtle background on hover */
    transform: scale(1.1) translateY(-2px);
    /* Scale and move upwards */
    border-radius: 10px;
    /* Maintain roundness */
    transition: all 0.3s ease;
    /* Smooth transition for all properties */
    z-index: 50;
}


.responsiveTable.dataTable th.column-1 {
    background: none;
    border: none;
    opacity: 0;
}

.responsiveTable.dataTable th.column-2 {
    background: #da2317;
}

.responsiveTable.dataTable th.column-3 {
    background: #27526a;
}

.responsiveTable.dataTable th.column-4 {
    background: #fca45d;
}

.responsiveTable.dataTable tbody td:nth-child(1) {
    font-weight: bold;
    /* Bold text for the first column */
}

.responsiveTable.dataTable tbody td {
    padding: 10px;
    /* Spacing for cells */
    text-align: left;
    /* Left-align for readability */
    border: 1px solid #ddd;
    /* Borders for table cells */
}

.responsiveTable.dataTable tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
    /* Zebra striping: odd rows */
}

.responsiveTable.dataTable tbody tr:nth-child(even) {
    background-color: #ffffff;
    /* Zebra striping: even rows */
}

.responsiveTable.dataTable tbody tr:hover {
    background-color: #f1f1f1;
    /* Highlight rows on hover */
}



/* Responsive Styling */

/* Desktop View: Show Only Original Table */
@media screen and (min-width: 769px) {

    .responsiveTable.dataTable.box-1,
    .responsiveTable.dataTable.box-2,
    .responsiveTable.dataTable.box-3 {
        display: none !important;
        /* Ensure all mobile boxes are hidden */
    }

    .responsiveTable.dataTable:not(.box-1):not(.box-2):not(.box-3) {
        display: table !important;
        /* Ensure the main table is shown */
    }

    .responsiveTable.dataTable thead th:nth-child(2),
    .responsiveTable.dataTable thead th:nth-child(3),
    .responsiveTable.dataTable thead th:nth-child(4),
    .responsiveTable.dataTable tbody td:nth-child(2),
    .responsiveTable.dataTable tbody td:nth-child(3),
    .responsiveTable.dataTable tbody td:nth-child(4) {
        width: 27%;
        /* Equal widths for columns 2, 3, and 4 */
        text-align: center;
        /* Center-align text for these columns */
    }
}

/* Mobile View: Show Stacked Boxes */
@media screen and (max-width: 768px) {
    .responsiveTable.dataTable:not(.box-1):not(.box-2):not(.box-3) {
        display: none;
        /* Hide the original table on mobile */
    }

    .responsiveTable.dataTable {
        margin-bottom: 20px; /* Adjust the value as needed */
    }

    .responsiveTable.dataTable.box-2 th.column-2 {
        width: 60%;
        background: #27526a;
    }

    .responsiveTable.dataTable.box-3 th.column-2 {
        background: #fca45d;
    }

}