* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: #ebf0f0; 
    color: rgba(0,0,0,0.87); 
    font-family: Roboto, Helvetica, Arial, sans-serif; 
}

@media (max-width: 600px) {
    body { 
        border-top: 16px solid #ff8a89; 
    }
    
/*
    .container {
        margin-left: 20px; 
    }
*/
}

@media (max-width: 300px) {
    .container {
        overflow-x: scroll;
    }
}

.container {
    width: 100%;
    max-width: 800px;
}

.container > div {
    margin-bottom: 20px;
}

.title {
    text-align: center;
}

div.title {
    margin-bottom: 40px;
    margin-left: 0px;
}

h1 {
    font-size: xxx-large;
    font-weight: 900;
    color: #5d6060; 
    margin: 16px 0 16px;
}

h2 {
    font-size: xx-large;
    color: #ff8a89; 
    font-weight: bold;  
}

p {
    line-height: 140%;
    margin: 16px 0 16px; 
    font-size: large;
    color: #3b3b3b;
}

a {
    display: block; 
    text-align: center; 
    background: #00aeb5; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: white; 
    padding: 16px; 
    border-radius: 4px;
}

a:hover {
    background-color: #006d7c;
}

button {
    background-color: #00aeb5;
    color: whitesmoke;
    border: none;
    border-radius: 0.4em;
    padding: 0.6em;
    margin: 0.2em;
    font-size: 1.4em;
}

button:hover {
    background-color: #006d7c;
}

label {
    font-size: large;
}

table {
    background-color: whitesmoke;
    box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.1);
}

table, th, td {
    border: 4px solid #006d7c;
    border-collapse: collapse;
}

thead tr {
    color: #ff8a89;
    font-size: xx-large;
    font-weight: bold;
    text-align: center;
    border: 4px solid #004b55;
    border-bottom: 6px solid #004b55;
}

thead tr td {
    padding: 10px;
}

tbody tr {
    color: #3b3b3b;
    font-size: x-large;
}

tbody tr td {
    padding: 10px;
}

div.table {
    margin: 5px 0 5px 0;
}

select {
    width: 100%;
    font-size: large;
    padding: 2px;
}

iframe {
    width: 100%;
    min-height: 400px;
    height: 80%;
}

@media (max-width: 600px) {
    thead tr {
        font-size: x-large;
    }
    tbody tr {
        font-size: medium;
    }
    div.table {
        overflow-x: scroll;
    }
}

.card { background: white; /*max-width: 360px; margin: 100px auto 16px;*/ padding: 32px 24px; border-radius: 3px; }
.card h2 { color: #ff8a89; font-weight: bold; font-size: xx-large; margin: 0 0 8px; }
.card h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
.card p { line-height: 140%; margin: 16px 0 24px; font-size: large; color: #3b3b3b;}
.card a { display: block; text-align: center; background: #00aeb5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
.card a:hover {background: #006d7c}
.card, .card a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

@media (max-width: 300px) {
    .card {
        overflow-x: scroll;
    }
}

#load {
    color: rgba(0,0,0,0.4); 
    text-align: center; 
    font-size: x-large;
}

.hidden { 
    display: none !important
}

.default {
    all: revert;
}