:root {
    --font: 'Courier New', monospace;
    --txt: #FFFFFF;
    --bg: #111111;
    --bg-hover: #996600;
    --bg-header: #222222;
    --bg-header-t: #ffffff22;
    --bg-queue: #222244;
    --bg-running: #22442299;
    --bg-missing: #442222;
}

* {
    box-sizing: border-box;
}

body {
    width:100%;
    max-width:100%;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--txt);
    font-family: var(--font);
    font-size: 14px;
}

main {
    width: 1280px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
}

a {
    color: var(--txt);
    text-decoration: none;
}

h1, h2, h3, p {
    margin: 0;
    padding: 5px;
    font-weight: normal;
    font-style: normal;
}

h1 {
    width: 100%;
}

button, .btn {
    border: none;
    background: var(--bg-header-t);
    color: var(--txt);
    cursor: pointer;
    padding: 5px;
}

button:hover, .btn:hover {
    background: var(--bg-hover);
}

progress[value] {
    position: relative;
    padding:0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display:inline-block;
    width: 100%;
    height: 12px;
    /*border-radius: 2px;*/
}

progress:before {
    content: attr(data-label);
    font-size: 0.8em;
    vertical-align: 0;
    /*Position text over the progress bar */
    position:absolute;
    right:10px;
}

progress::-webkit-progress-bar, progress::-moz-progress-bar {
   /* background-color: var(--bg);*/
    box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}

progress::-webkit-progress-value {
    background-color: green;
    /*border-radius: 2px;*/
}

progress.reputation::-webkit-progress-value {
    background-color: blueviolet;
    /*border-radius: 2px;*/
}

.row, .col, .flex, .article {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.row {
    align-items: stretch;
}

.flex {
    justify-content: space-between;
    align-items: stretch;
}

.col {
    flex-direction: column;
    align-items: stretch;
}

.center {
    justify-content: center;
}

.around {
    justify-content: space-around;
}

.space {
    justify-content: space-between;
}

.start {
    align-items: flex-start;
}


.stretch {
    align-items: stretch;
}

.nw {
    flex-wrap: nowrap;
}

.pad {
    padding: 5px;
}

.gap {
    gap: 5px;
}

.cgap {
    column-gap: 5px;
}

.rgap {
    row-gap: 5px;
}

.section {
    background: var(--bg-header);
}

.section > header {
    margin-bottom: 5px;
}

.res-table {
    text-align: left;
}

.res-table th {
    /*text-align: right;
    width: 80px;*/
}

.res-table td {
    width: 96px;
}





.res-descr {
    border: 1px solid var(--bg-running);
    background: var(--bg-header);
    position:absolute;
    left: 0;
    top:100%;
    display:none;
}

.res:hover .res-descr {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    min-width:200px;
    z-index:100;
}

.res-descr img {
    width: 64px;
}

.border {
    border: 1px solid var(--bg-hover);
}

.bg {
    background: var(--bg-header);
}

.hg {
    background: var(--bg-hover);
}

.queue {
    background: var(--bg-queue);
}

.running {
    background: var(--bg-running);
}

.missing {
    background: var(--bg-missing);
}

#header {
    margin-bottom: 1em;
    background: var(--bg-header);
}


.tabs {
    margin: 1em 0;
    padding: 0;
    background: var(--bg-header);
}

.tabs > ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.tabs > ul > li {
    list-style: none;
    display: inline-block;
    padding: 10px;
    background: var(--bg-queue);
    cursor: pointer;
}

.tabs > ul > li:hover {
    background: var(--bg-running);
}

.tab {
    display: none;
    min-height: 520px;
}

.tab.active {
    display: flex;
}