body {
    background-color: white;
    font-family: monospace;
    margin: 0;
}
.content {
    margin: 0 8px;
}

th, td {
    border: 1px solid black;
    padding: .25em .5em;
}
.sel:hover {
    background-color: lavender;
}
table {
    border: 1px solid black;
    border-collapse: collapse;
    margin: 1em .5em;
}

.header {
    background-color: lavender;
    border-bottom: 1px solid gray;
    position: sticky;
    top: 0;
    z-index: 2;
}

.container {
    display: flex;
}
.left {
    flex-grow: 1;
    flex-basis: 0;
    margin: .5em;
}
.center {
    margin: .5em;
}
.right {
    flex-grow: 1;
    flex-basis: 0;
    text-align: right;
    margin: .5em;
}

.tcenter {
    text-align: center;
}
.tnum {
    text-align: right;
}
.active {
    color: black;
}
.inactive {
    color: gray;
}
.inaccurate {
    position: relative;
    text-decoration: underline dotted;
}
.inaccurate::before {
    content: "*"
}
.inaccurate:hover::after {
    content: "value inaccurate/ unconfirmed";
    text-wrap: nowrap;
    position: absolute;
    left: 2em;
    top: 2em;
    border: 1px gray solid;
    background-color: lightyellow;
    padding: 0.25em;
    color: black;
    text-align: initial;
    z-index: 1;
}

#clock {
    border: 1px solid black;
    padding: 1px 4px;
}

.spaced-sublists > li > ul {
    margin-bottom: 1em;
}