body {
    --bg-color: #F5F5F5;
    --bg-secondary-color: #ddd;
    --color-primary: #425d8c;
    --color-lightGrey: #c3c6cb;
    --color-grey: #747681;
    --color-darkGrey: #313234;
    --color-error: #f05c57;
    --color-success: #378673;
    --bg-error: rgba(240,92,87,.4);
    --bg-success: rgba(55,134,115,.4);
    --grid-maxWidth: 120rem;
    --grid-gutter: 2rem;
    --font-size: 1.8rem;
    --font-color: #444;
    --font-family-sans: 'Lato', sans-serif;
    --font-family-mono: "Consolas", "Lucida Console", monospace;
}

body.dark {
    --bg-color: #0f1821;
    --bg-secondary-color: #333;
    --font-color: #ebe8e1;
    --color-darkGrey: #c4c7cd;
    --color-grey: #747681;
    --color-lightGrey: #313234;
}

.button.outline {
    color: var(--font-color)
}

#ocrTable tr td, #ocrTable tr td input, #ocrTable tr td select{
    background-color: var(--bg-success);
}

#ocrTable tr.win td, #ocrTable tr.win td input, #ocrTable tr.win td select{
    background-color: var(--bg-error);
}

#chartType{
    margin: 1em;
    max-width: 400px;
}

#dateRange{
    margin: 1em;
    max-width: 250px;
}

#compareSelects label{
    white-space: nowrap;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), select, textarea, textarea[type="text"] {
    color: var(--font-color);
    background-color:  var(--bg-secondary-color);
}

input[type='checkbox'] {
    -webkit-appearance:none;
    margin-left: 7px;
    width:20px;
    height:20px;
    background:var(--color-error) !important; 
    border-radius:5px;
    border:2px solid var(--color-darkGrey);
}

input[type='checkbox']:checked {
    background: var(--color-success) !important;
}

#toggleScatterButton {
    white-space: nowrap;
}

#matchTable tr {
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(100px,.5fr) minmax(70px,.4fr) 1fr 1fr 0px;
    border-bottom: 1px solid var(--color-darkGrey);
}

#matchTable td {
    align-self: end;
}

.agents img {
    max-width:32px;
}

.team {
    font-size: 4em;
    line-height: .35;
    margin-top: 20px;
    margin-bottom: 0px;
}

#rounds1{
    background-color: var(--color-success);
    color: #ebe8e1;
    min-width: 100px;
}

#rounds2{
    background-color: var(--color-error);
    color: #ebe8e1;
    min-width: 100px;
}

.expanded-row-content {
    border-top: none;
    display: grid;
    grid-column: 1/-1;
}

.hide-row {
    display: none;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

a, a:active, a:focus {
    outline: none;
}