html, body {
    margin: 0px;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    background-color: #1d1e26;
    color: #f8f8f2;
}
body {
    position: relative;
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #8a8f98;
}
nav div.title {
    padding-left: 12px;
    flex-grow: 1;
}
a.nav {
    padding: 12px;
    color: #F8F8F2;
    text-decoration: none;
    border-left: 1px solid #8a8f98;
}
a.navtitle {
    text-decoration: none;
    color: #f8f8f2;
}

h1.main_title {
    font-variant-caps: small-caps;
}
h1 {
    margin: 0px;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
}
h2 {
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    text-align: center;
}

div.pad {
    height: 54px;
}

.hl { color: #f8f8f2; }

table {
    margin-top: 8px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: table;

    font-size: 14px;

    background-color: #222232;
    color: #868b93;
}
table th { color: #f8f8f2; }
table td {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
    border-top: 1px solid #414558;
}
table tr:hover td { color: #d0ffcc; }
table th {
    padding-top: 8px;
    padding-bottom: 8px;
}
table td.link {
    padding-top: 0px;
    padding-bottom: 0px;
}
a.tablelink {
    cursor: pointer;
    color: #f8f8f2;
    text-decoration: none;
}
table tr:hover a.tablelink, table tr:hover .hl {
    color: #d0ffcc;
}

div.error { text-align: center; }

input.text {
    padding: 8px;
    font-size: 16px;
    color: #f8f8f2;
    background-color: #414558;
    border-radius: 0.5rem;
    border: 0px;
    outline: 0px solid #9580ff;
    outline-offset: -4px;
}
input.text::placeholder {
    color: #8a8f98;
}
select {
    padding: 8px;
    font-size: 16px;
    color: #f8f8f2;
    background-color: #414558;
    border-radius: 0.5rem;
    border: 0px;
    outline: 0px solid #9580ff;
    outline-offset: -4px;
}
input.text:focus, select:focus {
    transition: outline 0.1s ease-in-out;
    outline: 4px solid #9580ff;
}
input.button, button {
    cursor: pointer;
    color: #2e3436;
    background-color: #d0ffcc;
    border-radius: 4px;
    border: 0px;
}
button#show_hidden {
    margin-left: 8px;
    visibility: collapse;
    display: none;
}
input.button.big {
    padding: 8px 16px;
    font-size: 16px;
}
input.n {
    width: 64px;
}
input.m {
    width: 92px;
}
button.arrow {
    margin: 0px 2px;
    padding-left: 8px;
    padding-right: 8px;
    height: 100%;
}
button:disabled {
    cursor: unset;
    color: #8a8f98;
    background-color: #414558;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

div.footer {
    margin-bottom: 4px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
}
span.footer {
    font-size: 12px;
    font-style: italic;
    color: #8a8f98;
}
span.footer a {
    color: #80ffea;
    text-decoration: none;
}
span.yellow { color: #ffff80; }

/* advanced */
div.filter_container {
    margin-left: 8px;
    margin-right: 8px;
    display: flex;
    flex-flow: column;
}
div.filter_row {
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-flow: row;
}
div.filter_row label, div.filter_row span, div.pager span {
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
}
div.pager {
    margin-left: 8px;
    margin-right: 8px;
    display: flex;
    flex-flow: row;
}
div.pspacer {
    flex-grow: 1
}

i {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    background-size: cover;
}