/* Set a fixed scrollable wrapper */
.tableWrap {
    height: 300px;
    border: 2px solid black;
    overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
    position: sticky;
    top: 0;
}

/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
    border-collapse: collapse;
}

/* Because we must set sticky on th,
 we have to apply background styles here
 rather than on thead */
th {
    padding: 16px;
    padding-left: 15px;
    border-left: 1px dotted rgba(200, 209, 224, 0.6);
    border-bottom: 1px solid #e8e8e8;
    background: white;
    text-align: left;
    /* With border-collapse, we must use box-shadow or psuedo elements
  for the header borders */
    box-shadow: 0px 0px 0 2px #e8e8e8;
}

/* Basic Demo styling */
table {
    width: 100%;
    font-family: sans-serif;
}

    table td {
        padding: 16px;
        cursor: pointer;
    }

thead {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
}

tbody tr:hover {
    background: #e6f7ff;
}

.selected {
    background-color: blue;
    color: #FFF;
}

 h1 {
    font: 37pt 'newake-font-regular';
    color: var(--TITLE);
    text-align: center;
    margin-bottom: 35px !important;
}
div {
    padding: 5px 7.5px !important;
}
button {
    width: 320px;
    background: var(--MAIN);
    border: none !important;
    outline: none !important;
    color: white;
    border-radius: 15px;
    font: 600 14pt 'visbycf-light';
    padding: 7.5px !important;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
button:hover, button:focus {
    background: var(--HOVER-SECONDARY);
}
    button:disabled,
    button[disabled] {
        border: 1px solid #999999;
        background-color: #cccccc;
        color: #666666;
    }
label, th {
    font: 14pt 'newake-font-regular';
    text-align: center;
    margin-bottom: 15px !important;
}
td {
    font: 10pt 'newake-font-regular';
    text-align: center;
    margin-bottom: 15px !important;
}
:root {
    --radius: 2px;
    --baseFg: dimgray;
    --baseBg: white;
    --accentFg: #006fc2;
    --accentBg: #bae1ff;
}
select {
    font: 400 12px/1.3 'newake-font-regular';
    -webkit-appearance: none;
    appearance: none;
    color: var(--baseFg);
    border: 1px solid var(--baseFg);
    line-height: 1;
    outline: 0;
    padding: 0.65em 2.5em 0.55em 0.75em;
    border-radius: var(--radius);
    background-color: var(--baseBg);
    background-image: linear-gradient(var(--baseFg), var(--baseFg)), linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%), linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%), linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;
}

    select:hover {
        background-image: linear-gradient(var(--accentFg), var(--accentFg)), linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%), linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%), linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
    }

    select:active {
        background-image: linear-gradient(var(--accentFg), var(--accentFg)), linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%), linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%), linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
        color: var(--accentBg);
        border-color: var(--accentFg);
        background-color: var(--accentFg);
    }