/* Style sheet for the high level elements */

:root {
    /* Define color scheme */
    --powder_blue: #D8D8D8;
    --cadet_blue: #7A9E9F;
    --deep_space: #4F6367;
    --beige: #EEF5DB;
    --orange_red: #FE5F55;

    /* Define standard sizes */
    --input_height: 40px;
    --border_radius: 5px;
    --base_font_size: 14px;
}

/* Mobile specific root items */
@media screen and (max-width: 600px) {
    :root {
        /* Define standard sizes */
        --base_font_size: 12px;
    }
}

/* Define body */
body {
    /* Base Font */
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--base_font_size);
    color: white;
    text-decoration: none;

    /* Center all text unless specfied not to */
    text-align: center;

    /* Background */
    background-color: var(--cadet_blue);
}

/* Define common types */
/* --------------------------------------------------------------------------------------------- */
a {
    /* Do not underline hyperlinks */
    text-decoration: none;
    /* Hyperlinks should stay the same color as base text */
    color: white;
}
/* --------------------------------------------------------------------------------------------- */
button {
    /* Size */
    height: 40px;
    width: calc(100% - 20px); /* 20px coming from the margin on left and right */

    /* Spacing */
    margin: 10px;

    /* Color */
    background-color: var(--powder_blue);

    /* Flat button */
    border: none;
    border-radius: var(--border_radius);

    /* Font */
    color: black; /* Color needs to be black due to background */
    font-size: var(--base_font_size); /* Font size reset in button base */
}
    button:enabled {
        cursor: pointer;
    }

        button:hover:enabled {
            background-color: var(--orange_red);
        }

    button:disabled {
        opacity: 0.2;
    }
/* --------------------------------------------------------------------------------------------- */
table {
    /* Show single border */
    border-collapse: collapse;

    /* Keep columns the same width */
    table-layout:fixed;

    /* Don't take up the entire width of the container */
    width: 98%;

    /* Center table in container */
    margin-left: auto;
    margin-right: auto;

    /* Font */
    /* Center all text. Needed in addition to body since table overrides centering */
    text-align: center;
    /* Set font size. Needed in addition to body since table overrides font size */
    font-size: var(--base_font_size);
}

th, td {
    /* Add border only on bottom of cells */
    border-bottom: 1px solid var(--beige);

    /* Spacing */
    padding: 8px;

    /* Add scrollbar if overflowing */
    overflow: auto;

    /* Don't allow selecting cells */
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */

    width: 100%;
}

th {
    /* Distinct header color */
    background-color: var(--powder_blue);

    /* Header font */
    font-size: 14px;
    font-weight: bold;
    color: black;
}

tr:nth-child(even) {
    /* Set every other row color */
    background-color: var(--cadet_blue);
}
/* --------------------------------------------------------------------------------------------- */
progress {
    /* Spacing */
    margin-top: 0px;
    margin-bottom: 0px;
    /* Center progress bar in container */
    margin-left: auto;
    margin-right: auto;

    /* Size */
    height: 30px;
    width: 100%;

    /* Border */
    border-radius: var(--border_radius);

    z-index: 1;
}
    /* Interior color progress bar without progress */
    progress::-webkit-progress-bar {
        background-color: var(--beige);
    }

    /* Interior color progress bar with progress */
    progress::-webkit-progress-value {
        background-color: var(--orange_red) !important;
    }

/* The value on top of the progress bar */
.progress_value {
    /* Spacing */
    margin-top: -30px;
    line-height: 30px;

    /* Center progress bar text in container */
    margin-left: auto;
    margin-right: auto;

    /* Black text to show when above red */
    color: black;

    /* Z index set above that of a progress bar */
    z-index: 10;
}
/* --------------------------------------------------------------------------------------------- */
select {
    /* Size */
    width: calc(100% - 20px); /* 20px coming from the margin on left and right */
    height: var(--input_height);

    /* Spacing */
    margin: 10px;

    /* Font */
    color: black;
    text-align:center; /* Needed because select resets align */
    text-align-last:center; /* Needed to center text inside select */

    /* Border properties */
    border: none;
    border-radius: var(--border_radius);

    /* Color */
    background-color: var(--beige);
}
/* --------------------------------------------------------------------------------------------- */
input {
    /* Size */
    width: calc(100% - 20px); /* 20px coming from the margin on left and right */
    height: var(--input_height);

    /* Spacing */
    margin: 10px;

    /* Font */
    text-align:center; /* Needed because input resets align */
    color: white; /* Needed because input resets color */

    /* Border Properties */
    border: none;
    border-bottom: 2px solid white;
    border-radius: var(--border_radius);

    /* Color */
    background-color: var(--cadet_blue);
}
/* --------------------------------------------------------------------------------------------- */
label {
    vertical-align: middle;
}