@charset "UTF-8";

.results-wrap {
    overflow-x: scroll;
    position: relative;
    white-space: nowrap;
    width: 100%;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
}

    .results-table tr:nth-child(odd) td {
        background-color: #f7f7f7;
    }

    .results-table tr:hover td {
        background-color: rgba(24, 51, 69, 0.25);
    }

    .results-table th {
        text-align: left;
        border-bottom: 1px solid rgba(0, 0, 0, 0.75);
        padding: 10px;
        box-sizing: border-box;
        background: white;
    }

    .results-table td {
        padding: 8px 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        background: white;
    }

    .results-table caption {
        margin-top: 20px;
        font-weight: bold;
        font-size: 1.1em;
        text-transform: uppercase;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.75);
    }

.class-filter {
    display: flex;
    flex-grow: 1;
    gap: 7px;
    margin: 30px 0;
}

    .class-filter button {
        border: 1px solid rgba(54, 56, 61, 0.15);
        ;
        color: #494949;
        flex-grow: 1;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 8px;
        padding: 4px 8px;
        background-color: rgba(54, 56, 61, 0.05);
        text-align: center;
        text-decoration: none;
    }

    .class-filter button.activated {
        color: white;
        background-color: #183349;
    }

    .class-filter button:hover {
        color: white;
        background-color: #1b7ea6;
    }

.search-filter {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}

@media (max-width: 755px) {
    .search-filter {
        flex-direction: column;
        gap: 10px;
    }
}