:root {
  color-scheme: light;
  --color-scheme: light;
  --bg-color: #dee3e6;
  --fg-color: #212529;
  --bs-body-bg: var(--bg-color);
  --bs-body-color: var(--fg-color);
  --form-control-bg: #white;
  --flash-color: #ffcccc;
  /* --bs-border-color: #dee2e6; */
  /* --bs-border-color-translucent: rgba(0, 0, 0, 0.175); */
}

cg-board {
  background-image: url('../images/board/blue.svg');
}

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

.chat-text {
  color: rgba(0, 0, 0, 0.65);
}
.chat-text strong {
  color: rgba(80, 80, 120, 0.65);
}
.chat-text strong.mine {
  color: rgba(30, 60, 180, 0.8);
}
.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.125);
  border-bottom-color: rgba(0, 0, 0, 0.125);
}
.chat-info .btn-outline-secondary {
  --bs-btn-color: rgba(80, 80, 120, 0.65);
  --bs-btn-hover-color: rgba(159, 184, 228, 0.75);
  --bs-btn-active-color: rgba(159, 184, 228, 0.75);
}

.tab-unviewed {
  color: tomato !important;
}

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

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

.game-card {
  --game-tie-color: #fcddae;
  --game-win-color: #d4f9d9;
  --game-lose-color: #f9d4d4;
  --border-highlight-color: #009900;
  --border-expand-color: #000000;
}
.game-card.game-focused {
  border-color: var(--border-highlight-color);
}
.game-card .title-bar {
  --bs-card-cap-bg: #CCCCCC;
}

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

.game-status {
  color: rgba(80, 80, 120, 0.65);
}
.game-watchers {
  color: currentColor;
}

.toggle-btn-selected.btn-outline-secondary {
  --bs-btn-bg: #BBBBBB;
}
.btn-transparent {
  --bs-btn-hover-color: #4da6ff;
}

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

.form-heading {
  color: #638FA8;
}

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

#move-table .selectable:hover {
  background-color: rgba(0, 0, 0, 0.075);
}
#move-table .selectable:hover .move {
  color: #0a58ca;
}
#move-table .selectable:hover .selected {
  background-color: rgba(0, 0, 0, 0.1);
}
#move-table .selected {
  background-color: rgba(0, 0, 0, 0.1);
}
#move-table .subvariation table {
  --bracket-color: #bf8090;
  border-color: var(--bracket-color);
}
#move-table > tbody > .subvariation {
  background: rgba(0, 0, 0, 0.15);
}
#move-table tr:not(.subvariation):nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}
#move-table .subvariation tr:nth-of-type(odd) {
  background-color: initial;
}
#move-table .subvariation .selectable:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
#move-table .subvariation .selected {
  background-color: rgba(0, 0, 0, 0.15);
}
#move-table .subvariation .move {
  color: #191970;
}
#move-table .subvariation .move .piece-glyph.white::before {
  color: currentColor;
}
#move-table .subvariation .move .piece-glyph.black::before {
  color: color-mix(in srgb, currentColor 70%, white 30%); /* fancy new method for lightening/darkening colors */
}

.movelist .selected {
  background-color: rgba(0, 0, 0, 0.2);
  color: #000000;
}
.movelist .subvariation {
  color: #5e4d3b;
}
.movelist .subvariation::before {
  border-left-color: rgb(33, 37, 41);
}
.movelist .subvariation .selected {
  background-color: rgba(0, 0, 0, 0.2);
  color: #2e2418;
}
.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(10, 88, 202);
}
.movelist .piece-glyph.white::before {
  color: currentColor;
}
.movelist .piece-glyph.black::before {
  color: color-mix(in srgb, currentColor 70%, white 30%); /* fancy new method for lightening/darkening colors */
}

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

.comment {
  color: #777;
  caret-color: #212529;
}

.nav-tabs {
  --bs-nav-tabs-link-active-bg: rgba(255, 255, 255, 0.5);
}
.nav-pills {
  --bs-nav-pills-link-active-color: #6c757d;
  --bs-nav-pills-link-active-bg: #f7f7f7;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  border-color: rgba(0,0,0,.125);
}

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

.eval-line-above {
  stroke: #ffab00;
}
.eval-line-below {
  stroke: red;
}
.eval-area-above {
  fill: lightsteelblue;
}
.eval-area-below {
  fill: #614e6e;
}
.eval-axis .tick line {
  stroke: #DDD;
}
.eval-circle  {
  stroke: #af9358;
  fill: white;
}
/*.eval-hover-line {
  stroke: currentColor;
}*/

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

.notification-panel {
  --bs-toast-bg: white;
  --bs-toast-border-color: #DDDDDD;
}
#notifications-header {
  --bs-toast-bg: ghostwhite;
}
#notifications-close-icon {
  color: #060600;
}

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

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

#channels-modal table thead {
  background: color-mix(in srgb, var(--bg-color) 20%, white 80%);
  --box-shadow-color: color-mix(in srgb, var(--bg-color) 85%, black 15%);
}

.info-icon {
  color: #6c757d;
}
.info-icon:hover, info-icon:focus {
  color: #0d6efd;
}

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

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

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