.table-container {
    overflow-x: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin: auto;
    max-width: 1200px;
    /* Adjusted size for better readability */
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    /* Normalized text size */
}

th,
td {
    border: 1px solid #ddd;
    padding: 12px;
    /* Normalized padding */
    text-align: center;
    color: #333;
    font-weight: 700;
}

th {
    background-color: #00b2d8;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    /* Slightly larger heading text */
}

tr:nth-child(even) {
    background-color: #f4f8fd;
}

tr:hover {
    background-color: #e1effe;
}

td span.per-minute {
    display: block;
    font-size: 12px;
    /* Clearer font size */
    color: #333;
    /* Highlight color changed to green */
    font-weight: 600;
}

td span.per-hour {
    display: block;
    font-size: 13px;
    /* Highlight text with a slightly larger size */
    color: #00b2d8;
    /* Changed highlight color to orange */
    font-weight: 700;
    /* Bolder font weight */
    margin-top: 4px;
}

@media (max-width: 768px) {
    table {
        font-size: 12px;
        /* Smaller font size for smaller screens */
    }

    th,
    td {
        padding: 10px;
        /* Adjusted padding for smaller screens */
    }

    .table-container {
        max-width: 720px;
        /* Resized for smaller screens */
    }
}

@media (max-width: 576px) {
    .table-container {
        max-width: 400px;
        /* Adjusted for very small devices */
    }
}