table {
    background-color: white;
    width: 100%;
    border-collapse: collapse;
    border-radius: .1em;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px #cddcea;
}


th, td {
    padding: 1rem;
    padding-left: 30px;
}  

caption {
    padding-top: 20px;
}

th {
    background-color: #004f98;
    color: #ffffff;
    text-align: left;
}

th:nth-of-type(1) {
    border-top-left-radius: .6em;
}

th:last-of-type {
    border-top-right-radius: .6em;
}

tbody tr {
    border-bottom: 1px solid #dddddd;
}

tbody tr:nth-of-type(2n) {
    background-color: #f3f3f3;
}

tbody tr:last-of-type {
    border-bottom: 3px solid #004f98;
}

caption, th {
    text-align: left;
}

.table-wrapper {
    width: min(100px, 100% -.3rem);
    margin-inline: auto;
}

#calendar-frame {
    text-align: center;
}

@media (max-width: 936px) {

    #calendar-frame {
        overflow-x: scroll;
        
    }
}

@media (min-width: 936px) {

    #calendar-frame {
        overflow-x: hidden;
    }
}

.table-container {
    max-width: 100%;
    overflow-x: scroll;
    padding-top: 10px;
    padding-left: 100px;
    padding-right: 100px;
}


@media (max-width: 650px) {

    th {
        display: none;
    }

    td {
        display: block;
        padding: .5rem 1rem;
    }

    td:first-child {
        padding-top: 2rem;
    }

    td:last-child {
        padding-bottom: 2rem;
    }

    td::before {
        content: attr(data-cell) ": ";
        font-weight: 700;
        text-transform: capitalize;
    }

}