:root {
    --main-color: #ffa22c;
}

* {
    box-sizing: border-box;
    font-size: 9.5pt !important;
    font-family: monospace;
}

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

@font-face {
    font-family: speed;
    src: url("speed.otf") format("opentype");
}

@font-face {
    font-family: speedItalic;
    src: url("speed-italic.otf") format("opentype");
}

.ui-tooltip, .arrow:after {
    background: white;
    border: 2px solid rgb(127, 127, 127);
}

.ui-tooltip {
    color: black;
    min-width: 100px !important;
    max-width: 500px !important;
    padding: 10px 15px;
    line-height: 1.5em !important;
    border-radius: 7px;
    font: bold 14px Consolas, Sans-Serif;
    text-transform: none;
    box-shadow: 0 0 7px black;
}

.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}

.arrow.top {
    top: -16px;
    bottom: auto;
}

.arrow.left {
    left: 20%;
}

.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.arrow.top:after {
    bottom: -20px;
    top: auto;
}

.checked {
    margin: 0px !important;
    height: 22px !important;
    font-size: .6em !important;
    font-weight: bold;
}


table {
    border-collapse: collapse;
    width: 90%;
    margin: auto;
    margin-top: 4px;
}

table, th, td {
    border: 1px solid #444;
    text-transform: uppercase;
    background: #222;
}

th {
    /*font-family: speedItalic;*/
    background: #6D90BB;
    color: black;
    background: #932727;
    color: white;
    padding: 10px;
    text-align: left;
    position: sticky;
    top: -2px;
    z-index: 1;
    cursor: n-resize !important;
    border-color: black !important;
    border: 1px solid;
}

.filters {
    position: sticky;
    top: 72px;
    z-index: 1;
    margin: auto !important;
    border-color: black !important;
}

.filter {
    background: #9c4720;
    color: white;

    background: #FDB52B;
    color: black;

    font-weight: bold;
    font-size: 1.1em !important;
    text-align: center;
}

td {
    padding: 4px;
    text-align: left;
}

button {
    background: var(--main-color);
    color: black;
    text-decoration: none;
    border-radius: 22px;
    padding: 6px 8px;
    margin-top: 10px;
    box-shadow: 1px 2px 2px #434343;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: bold;
}

a#cleanfilters, a#track_image {
    border: none !important;
    vertical-align: unset;
}

button:hover {
    background: black !important;
    color: white;
    text-decoration: none;
}

button:hover img.backups {
    filter: invert(1);
}

#tricks {
    margin: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
}

input {
    padding: 4px;
}

tr.selected td {
    background-color: gold !important;
    color: black !important;
    font-weight: bold;
}

tr.selected td img.lsNote {
    filter: invert(0);
}

tr {
    cursor: pointer;
}

a:-webkit-any-link {
    color: var(--main-color) !important;
    border-bottom: dotted 2px var(--main-color);
    border-top: dotted 2px var(--main-color);
    text-decoration: none;
    margin-bottom: 4px;
    display: inline-block;
    text-transform: uppercase;
    vertical-align: -webkit-baseline-middle;
    font-family: speedItalic;
    font-size: 1em !important;
}

a.special_link {
    color: var(--main-color) !important;
    border-bottom: dotted 2px var(--main-color);
    border-top: dotted 2px var(--main-color);
    text-decoration: none;
    margin-bottom: 4px;
    display: inline-block;
    text-transform: uppercase;
    vertical-align: -webkit-baseline-middle;
    font-family: speedItalic;
    font-size: 1em !important;
}

.help {
    cursor: help !important;
    text-align: center;
}

#tips {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1d1200e3;
    z-index: 999999;
}

#tips_inner {
    width: 50%;
    text-align: left;
    background: white;
    color: black;
    margin: auto;
    padding: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    line-height: 150%;
    overflow-y: scroll;
    height: 90%;
}

u {
    margin: 4px;
    display: inline-block;
}

li {
    margin-top:20px;
}

.highlighted-row {
    background-color: #364463 !important;
    background-color: #111111 !important;
}

.averages {
    background: #373737  !important;
    color: white;
}

.averages2 {
    background: #494949 !important;
    background: #111111 !important;
    font-weight: bold;
    color: lightgoldenrodyellow;
}

.averages.highlighted-row {
    background: #373737;
    color: white;
}

.averages2.highlighted-row {
    background: #494949;
    background: #111111;
    font-weight: bold;
    color: lightgoldenrodyellow;
}

tr.filters td:first-child {
    text-align: center;
}

tbody tr:hover td,
tbody tr:hover td.averages.highlighted-row,
tbody tr:hover td.averages2.highlighted-row {
    background: lightyellow !important;
    color: black !important;
}

tbody tr:hover td img.lsNote {
    filter: invert(0);
}

#quickfind {
    width: 350px;
}

::placeholder {
    color: #e7a223 !important;
    font-weight: bold;
    font-style: italic;
}

input[type="checkbox"] {
    transform: scale(1.5);
    cursor: pointer;
}

.vert {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: .8em !important;
}

td.my_level {
    background-color: white !important;
    color: black !important;
    font-weight: bold !important;
    border-radius: 50%;margin: 2px;
    padding: 4px;
    display: inline-block;
    width: 24px;
}

.currentTH, td.currentTH {
    background-color: #949da8 !important;
    color: black !important;
}

.mfg_logo {
    width: 80px;
    margin: auto;
    display: block;
}

#myMFGid, #lastBackup  {
    float: right;
    margin-top: 10px;
    color: #2c2c2c;
    font-style: italic;
    font-size: .75em !important;
    margin-right: 20px;
}

.myGroup, .myDebut {
    font-size: .85em !important;
}

.myModel {
    font-size: .9em !important;
}


#thin_banner {
    background: #333333;
    box-shadow: 1px 1px 2px black;
}

#b_left {
    display: inline-block;
    width: 31%;
    text-align: left !important;
    vertical-align: middle;
}

#b_center {
    display: inline-block;
    width: 35%;
    text-align: center !important;
    vertical-align: top;
}

#b_right {
    display: inline-block;
    width: 31%;
    text-align: right !important;
    vertical-align: text-bottom;
    color: var(--main-color);
}

tr.filters td {
    background: #414141;
}