@charset "UTF-8";

body {
    font-family: Inter, "Roboto Condensed", sans-serif;
}

a {
    color: #0088cc;
    text-decoration: none;
}

.mplogo {
    display: flex;
    font-size: 0.8em;
    font-style: italic;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

    .mplogo img {
        width: 150px;
    }

.school {
    display: flex;
    align-items: center;
    gap: 10px;
}

.head-contain {
    display: flex;
}

button {
    background: whitesmoke;
    border: 1px solid gray;
    padding: 5px;
    border-radius: 8px;
    min-width: 100px;
}

select {
    padding: 5px;
}

table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    margin-top: 3px;
}

@media (max-width:670px) {
    .head-contain {
        flex-direction: column;
    }

    button {
        color: #000;
    }

    button, select {
        width: 100%;
    }

    select {
        margin-bottom: 5px;
    }

    .mplogo {
        margin-left: unset;
        justify-content: center;
    }

    .form {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
}