table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table,
th,
td {
    border: 1px solid #ddd;
}

th,
td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f4f4f4;
}

select,
input[type="text"] {
    padding: 8px;
    margin-right: 10px;
    margin-bottom: 20px;
}

/* Color coding for classes */
.little-dragons {
    background-color: #fff8dc;
    /* light yellow */
}

.mini-ninjas {
    background-color: #ffe4b2;
    /* light orange */
}

.junior-ma {
    background-color: #f08080;
    /* light red */
}

.teen-ma {
    background-color: #d3d3d3;
    /* light grey */
}

.taijutsu,
.brazilian-jiujitsu,
.adaptive,
.black-belt,
.elite-club,
.adult-open-mat {
    background-color: #e6e6fa;
    /* light purple */
}

/* Mobile styles */
@media (max-width: 768px) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
        border: 1px solid black;
    }

    thead tr {
        display: none;
    }

    td {
        text-align: left;
        border: 1px solid rgb(212, 210, 210);
    }

    td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}

table a {
    color: rgb(58, 58, 92);
    text-decoration: none;
    /* Optional: underline the link */
}

table a:hover {
    color: rgb(0, 0, 255);
    /* Optional: change color when hovering */
}