* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

table#records td {
    font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace !important
}

:root {
    --accent: #00f;

    --lnk-lite: var(--accent);
    --lnk-dark: #eef;
    --lnk: var(--lnk-lite);

    --bg-lite: #eef;
    --bg-dark: #223;
    --bg: var(--bg-lite);
    --txt-size: 1vw;
}

body {
    color: #000;
    background-color: #fff;
}

body.dark {
    --lnk: var(--lnk-dark);
    --bg: var(--bg-dark);

    color: #fff;
    background-color: #000;
}

@media(prefers-color-scheme: dark) {
    :root {
        --lnk: var(--lnk-dark);
        --bg: var(--bg-dark);
    }

    body {
        color: #fff;
        background-color: #000;
    }
}

div#container {
    width: fit-content;
}

div.row {
    display: flex;
    width: 100%
}

h1 {
    flex: 1;
    margin-top: 0;
    margin-bottom: 0.4em;
}

h1>span {
    color: #777;
}

table {
    width: 98vw;
    font-size: var(--txt-size);
    white-space: nowrap;
}

th,
td {
    padding-left: 5px;
    padding-right: 5px;
}

th {
    background-color: #777;
    color: #fff;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}

th:hover,
th[data-sort="true"]:hover {
    cursor: pointer;
    background-color: #f00;
}

th[data-sort="true"] {
    background-color: var(--accent);
}

th a,
th a:visited {
    color: var(--bg-lite);
}

tr.hosted {
    background-color: var(--bg);
}

.errMsg,
tr.error,
tr.error a {
    background-color: #f00;
    color: #fff;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.icon-cloud {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="rgb(0, 0, 255)"><path d="m414-280 226-226-58-58-169 169-84-84-57 57 142 142ZM260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z"/></svg>');
}

.icon-wrench {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="rgb(128, 128, 128)"><path d="M686-132 444-376q-20 8-40.5 12t-43.5 4q-100 0-170-70t-70-170q0-36 10-68.5t28-61.5l146 146 72-72-146-146q29-18 61.5-28t68.5-10q100 0 170 70t70 170q0 23-4 43.5T584-516l244 242q12 12 12 29t-12 29l-84 84q-12 12-29 12t-29-12Zm29-85 27-27-256-256q18-20 26-46.5t8-53.5q0-60-38.5-104.5T386-758l74 74q12 12 12 28t-12 28L332-500q-12 12-28 12t-28-12l-74-74q9 57 53.5 95.5T360-440q26 0 52-8t47-25l256 256ZM472-488Z"/></svg>');
}

div#banner {
    opacity: 1;
    transition-duration: 500ms;
    transition-property: padding, border-width, height, opacity;
    transition-timing-function: ease-in-out;
}

.hidden {
    padding: 0 !important;
    border-width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.ftr>span {
    font-weight: bold;
    color: #f70;
}

.errMsg {
    text-align: center;
}

a {
    text-decoration: none;
}

a,
a:visited {
    color: var(--lnk);
}

a:hover,
a#cog:hover {
    color: #f00;
}

a#cog,
a#cog:visited {
    color: var(--accent);
}

div#loading {
    padding: 10px;
    border: 3px dashed;
    border-color: #f70;
    background-color: #fde;
    border-radius: 10px;
    color: #f70;
    width: fit-content;
    font-weight: bold;
}

div#banner,
div#detail,
div#settings {
    padding: 10px;
    border: 3px dashed;
    border-color: var(--accent);
    background-color: var(--bg);
    border-radius: 10px;
    width: fit-content;
}

button {
    background-color: var(--lnk);
    border: 3px;
    border-color: #fff;
    border-radius: 5px;

    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    color: var(--bg);
}

button#gotIt {
    text-wrap: nowrap;
    margin-left: 5px;
}

button:hover {
    background-color: #f00;
}

p>label {
    display: inline-block;
    font-weight: bold;
    width: 14em;
}