:root {
    --dark: #171717;
    --medium: #272727;
    --light: #4b4b4b;
    --accent: orange;
    --text: white;
    --border: rgb(145, 127, 105);
    --red: rgb(116, 53, 53);
    --blue: rgb(47, 97, 127);
}

body { 
    background-color: var(--medium); 
    color: var(--text);
    font-family: sans-serif;
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
    color: black;
    background-color: #fefefe;
    margin: auto;
    text-align: center;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.footer {
    position: fixed;
    display: flex;
    flex-direction: row;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--dark);
    color: var(--border);
    border-top: 1px var(--accent);
}
.footer > a {
    color: var(--border);
}

.footer > div {
    flex-grow: 1;
    /* justify-content: right; */
    text-align: right;
    /* align-items: ; */
}

#timeoutWarningInfobox {
    color: yellow;
    display: none;
}