:root {
  --board: gray;
  color-scheme: dark;
  --color-scheme: dark;
  --bg-color: #424242;
  --fg-color: whitesmoke;
  --bs-body-color: var(--fg-color);
  --bs-body-bg: var(--bg-color);
  --bs-body-color-rgb: 245, 245, 245;
  --bs-body-bg-rgb: 66, 66, 66;
  --bs-border-color: #555555;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.175);
  --form-control-bg: #555555;
  --flash-color: #cc6666;
}

.feature3 {
  background-color: var(--bg-color);
  color: var(--fg-color);
}

a { 
  color: rgba(159, 184, 228, 0.75);
}

.chat-text {
  color: lightgray;
}
.chat-text strong {
  color: rgba(159, 184, 228, 0.75);
}
.chat-text strong.mine {
  color: rgba(240, 159, 67, 0.95);
}
.chat-text strong.mention {
  color: rgba(240, 120, 120, 0.7);
}
.chat-text strong.chat-notification {
  color: rgba(140, 140, 140, 0.8);
}
.chat-text span.timestamp {
  color: rgba(140, 140, 140, 0.8);
}
.chat-text-suffix {
  color: #8E9DA5;
}
.chat-info {
  background-color: rgba(255, 255, 255, 0.035);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}
.chat-info .btn-outline-secondary {
  --bs-btn-color: rgba(240, 159, 67, 0.95);
  --bs-btn-hover-color: rgba(159, 184, 228, 0.75);
  --bs-btn-active-color: rgba(159, 184, 228, 0.75);
}

.tab-unviewed {
  --bs-nav-link-color: tomato;
  --bs-nav-link-hover-color: tomato;
}

.counter-bubble {
  fill: red;
}
.counter-number {
  fill: white;
}

.clock.my-turn {
  background-color: rgba(255, 255, 255, 0.075);
}
.clock.low-time {
  color: red;
}

.game-card {
  --game-tie-color: #654D2F;
  --game-win-color: #35644D;
  --game-lose-color: #804545;
  --border-highlight-color: #009900;
  --border-expand-color: #FFFFFF;
  --border-expand-width: 1px;
}
.game-card.game-focused {
  border-color: var(--border-highlight-color);
}
.game-card .title-bar {
  --bs-card-cap-bg: #464646;
}
.game-card .title-bar .btn span {
  filter: brightness(0.9);
}

.top-panel,.bottom-panel {
  color: lightslategray;
}

.game-status {
  color: rgba(240, 159, 67, 0.95);  
}
.game-watchers {
  color: rgba(240, 159, 67, 0.95);
}

.text-danger {
  --bs-danger-rgb: 250, 128, 114;
}
.toggle-btn-selected.btn-outline-secondary {
  --bs-btn-bg: #555555;
}
.btn-transparent {
  --bs-btn-hover-color: #4da6ff;
}
.btn-outline-secondary {
  --bs-btn-color: lightgray; /* Override bs variable rather than style directly so we can refer to it in sub-stles like :hover */
  --bs-btn-disabled-color: #8E9DA5;
}
.btn-default {
  --bs-btn-color: lightgray;
}
.btn-outline-success {
  --bs-btn-color: #61cb9a;
  --bs-btn-border-color: var(--bs-btn-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-color);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-border-color: var(--bs-btn-color);
}
.btn-outline-danger {
  --bs-btn-color: #f68699;
  --bs-btn-border-color: var(--bs-btn-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-color);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-border-color: var(--bs-btn-color);
}

.modal {
  --bs-modal-color: var(--fg-color);
  --bs-modal-bg: var(--bg-color);
}

.form-range::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.13);
}
.form-range::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.13);
}
.form-range::-ms-track {
  background-color: rgba(255, 255, 255, 0.13);
}

.form-heading {
  color: #638FA8;
}
.form-control,
.form-control:active,
.form-control:focus, #fake-input-text:focus-within {
  background-color: var(--form-control-bg);
  border-color: #888888;
  color: lightgray;
  --box-shadow-color: rgba(13, 110, 253, .25);
}
.form-control:disabled {
  background-color: #777777;
}
.form-control::selection {
  background: #052078;
}
.form-control::placeholder {
  color: #7A8D98;
}
.input-group-text {
  background-color: #777777;
  border-color: #888888;
  color: #212529;
}

.form-check-input:not(:checked) {
  background-color: #5f5f5f;
  border-color: #8a8a8a;
}
.form-switch .form-check-input:not(:checked) {
  background-color: #5f5f5f;
  filter: contrast(1.5);
}

.nav {
  --bs-nav-link-color: lightgray;
}
.nav-tabs {
  --bs-nav-tabs-border-color: #888888;
  --bs-nav-tabs-link-hover-border-color: #888888 #888888 #666666;
  --bs-nav-tabs-link-active-border-color: #888888 #888888 #666666;
  --bs-nav-tabs-link-active-color: lightgray;
  --bs-nav-tabs-link-active-bg: #555555;
}
.nav-pills {
  --bs-nav-pills-link-active-color: lightgray;
  --bs-nav-pills-link-active-bg: #555555;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  border-color: rgba(0,0,0,.125);
}

.card {
  --bs-card-border-color: #555555;
  --bs-card-cap-color: lightgray;
  --bs-card-cap-bg: rgba(0, 0, 0, 0.06);
}

#game-toolbar {
  background-color: rgba(0, 0, 0, 0.035);
  border-bottom-color: rgba(255, 255, 255, 0.035);
}
#game-toolbar .btn {
  --bs-btn-active-color: rgba(159, 184, 228, 0.75);
}

#move-table {
  --bs-table-color: var(--fg-color);
}
#move-table .selectable:hover {
  background-color: rgba(255, 255, 255, 0.06);
}
#move-table .selectable:hover .move {
  color: #2b6fd6;
}
#move-table .selectable:hover .selected {
  color: #3379d1;
}
#move-table .selected {
  background-color: rgba(255, 255, 255, 0.15);
}
#move-table .subvariation table {
  --bracket-color: #ffb1bb;
  border-color: var(--bracket-color);
}
#move-table > tbody > .subvariation {
  --bs-table-bg: rgba(255, 255, 255, 0.05);
}
#move-table .subvariation .selectable:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#move-table .subvariation .selected {
  background-color: rgba(255, 255, 255, 0.2);
}
#move-table .subvariation .move {
  color: #DDDDDD;
}
#move-table .subvariation .move .piece-glyph.white::before {
  color: color-mix(in srgb, currentColor 90%, black 10%);
}
#move-table .subvariation .move .piece-glyph.black::before {
  color: currentColor;
}

.movetime {
  color: #999999;
}

.movelist .selected {
  background-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}
.movelist .subvariation {
  color: #BBBBBB;
}
.movelist .subvariation::before {
  border-left-color: whitesmoke;
}
.movelist .subvariation .selected {
  background-color: rgba(255, 255, 255, 0.2);
  color: #DDDDDD;
}
.movelist .move:hover,
.movelist .move.hovered,
.movelist .subvariation .move:hover,
.movelist .subvariation .move.hovered {
  color: rgb(10, 88, 202);
}
.movelist .selected:hover,
.movelist .subvariation .selected:hover {
  color: rgb(5, 44, 101);
}
.movelist .piece-glyph.white::before {
  color: color-mix(in srgb, currentColor 90%, black 10%);
}
.movelist .piece-glyph.black::before {
  color: currentColor;
}

.piece-glyph.white.king::before { content: "\265A"; }
.piece-glyph.white.queen::before { content: "\265B"; }
.piece-glyph.white.rook::before { content: "\265C"; }
.piece-glyph.white.bishop::before { content: "\265D"; }
.piece-glyph.white.knight::before { content: "\265E"; }
.piece-glyph.white.pawn::before { content: "\265F"; }
.piece-glyph.black.king::before { content: "\2654"; }
.piece-glyph.black.queen::before { content: "\2655"; }
.piece-glyph.black.rook::before { content: "\2656"; }
.piece-glyph.black.bishop::before { content: "\2657"; }
.piece-glyph.black.knight::before { content: "\2658"; }
.piece-glyph.black.pawn::before { content: "\2659"; }

.comment {
  color: #999;
  caret-color: whitesmoke;
}

#engine-panel .btn-check:checked+.btn, #engine-panel .btn-check+.btn {
  color: lightgray;
}

#engine-pvs > li:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.08);
}

.eval-line-above {
  stroke: lightsteelblue;
}
.eval-line-below {
  stroke: #614e6e;
}
.eval-area-above {
  fill: #ffab00;
}
.eval-area-below {
  fill: red;
}
.eval-axis .tick line {
  stroke: #555555;
}
.eval-circle {
  stroke: #af9358;
  fill: white;
}
.eval-hover-line {
  stroke: lightgray;
}
#download-maia-progress .progress, #eval-progress .progress {
  --bs-progress-bg: #555555;
}
#download-maia-progress, .progress-bar, #eval-progress .progress-bar {
  --bs-progress-bar-bg: #0d6efd;
}

.eval-bar-white {
  background-color: #BDBBBB;
}
.eval-bar-black {
  background-color: #3B322D;
}

.promotion-panel {
  background-color: white;
  --box-shadow-color: rgba(0, 0, 0, 0.2);
}

.toast {
  --bs-toast-bg: rgba(51, 51, 51, 0.95);
  --bs-toast-header-bg: #333333;
  --bs-toast-header-color: #B4C9D2;
}

.notification-panel {
  --bs-toast-bg: #333333;
  --bs-toast-border-color: #303030;
  --bs-toast-header-border-color: rgba(0, 0, 0, 0.05);
}
#notifications-header {
  --bs-toast-bg: #383838;
}
#notifications-close-icon {
  color: #060600;
}

.close {
  background-color: rgba(0, 0, 0, 0.05);
}

#close-status {
  color: color-mix(in srgb, var(--fg-color) 50%, black 50%);
}

#left-panel-bottom {
  background: color-mix(in srgb, var(--bg-color) 95%, black 5%);
}
#left-panel-bottom.minimized .nav-tabs {
  --bs-nav-tabs-border-color: #555555;
}
#left-panel-bottom-content {
  background: var(--bg-color);
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.popover {
  --bs-popover-bg: var(--bg-color);
  --bs-popover-body-color: var(--fg-color);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--bg-color);
  --bs-dropdown-color: var(--fg-color);
  --bs-dropdown-link-color: var(--fg-color);
  --bs-dropdown-link-hover-color: white;
  --bs-dropdown-link-hover-bg: #666666;
  --bs-dropdown-link-active-color: black;
  --bs-dropdown-link-active-bg: lightgray;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #8c959d;
}

.premove-target::before {
  color: white;
}

.table-standard {
  --bs-emphasis-color: var(--bs-body-color);
}
.table-standard thead {
  --bs-table-bg: color-mix(in srgb, var(--bg-color) 85%, white 15%);
  --box-shadow-color: color-mix(in srgb, var(--bg-color) 85%, white 15%);
}

.info-icon {
  color: #ced4da; 
}
.info-icon:hover, info-icon:focus {
  color: #f8f9fa; 
}

#pills-pairing .form-check-label {
  color: lightgray;
}

.not-signed-in-notice {
  background: color-mix(in srgb, var(--bg-color) 90%, white 10%);
  border-color: #AAAAAA;
}

.banner-alert {
  background: #000;
  color: #fff;
}

#emoji-button {
  --bs-btn-color: dodgerblue;
}
.emoji-panel-arrow {
  border-top-color: #151617;
}

.invalid-feedback {
  color: #ff6b6b;
}

.tournaments-unviewed {
  --bs-nav-link-color: tomato;
}
.tournament-group-title {
  color: 	#9CB8CA;
}
#pills-tournaments > .tournament-group:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.04);
}
#pills-tournaments > .tournament-group:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.125);
}
.card.tournament-card {
  --bs-card-bg: #555555;
  --bs-card-border-color: #777777;
}
.card.tournament-card-active {
  --bs-card-bg: #704646;
}
.tournament-card-label {
  color: #BBC7D4;
}

.tournament-table-pos { color: var(--fg-color); }
.tournament-table-name { color: var(--fg-color); }
.tournament-table-rating { color: #bbb; }
.tournament-table-score { color: var(--fg-color); }
.tournament-table-seed { color: #aaa; }
.tournament-table-win { color:  #ffd700; }
.tournament-table-lose { color: #1e90ff; }
.tournament-table-draw { color: #ff8c00; }
.tournament-table-other-result { color: #BB86FC; }
.tournament-table-color { color: var(--fg-color); }

#finger-notes-table {
  border-color: #888888;
}
#finger-notes-table th {
  background-color: #666666;
  color: #d6d6d6;
}
#finger-notes-table td {
  background-color: #555555;
  color: lightgray;
}

.users-table tr.highlighted {
  background-color: color-mix(in srgb, var(--bg-color) 70%, white 30%); 
}
.users-table .btn-outline-secondary {
  --bs-btn-active-color: var(--bs-btn-hover-color);
}
.users-table .offline {
  color: color-mix(in srgb, var(--bs-table-striped-color) 65%, black 35%);
}

.macros-key-name {
  color: lightgray;
}
.macros-key-description {
  color: #AAAAAA;
}

.seek-graph-border {
  stroke: #888888;
}
.seek-graph-label {
  fill: var(--fg-color);
}
.seek-graph-grid-line {
  stroke: #666666;
}
.seek-graph-guest-separator {
  stroke: #777777;
}
.seek-graph-point {
  fill: var(--fg-color);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1px;
}
.seek-graph-point-human-unrated {
  fill: hsl(210, 70%, 60%); 
}
.seek-graph-point-computer-unrated {
  fill: hsl(35, 80%, 40%);  
}
.seek-graph-point-human-rated {
  fill: hsl(210, 90%, 80%); 
}
.seek-graph-point-computer-rated {
  fill: hsl(35, 95%, 50%);  
}

.color-label-light {
  color: white;
}
.color-label-dark {
  color: #AAAAAA;
}