.flex-horiz {
  display: flex;
  flex-direction: row;
}
.flex-vert {
  display: flex;
  flex-direction: column;
}
.flex-spacer {
  flex-grow: 1;
}
.no-select {
  user-select: none;
}
.board {
  user-select: none;
  cursor: default;
  table-layout: fixed;
  border-width: 0px;
  border-collapse: collapse;
}
.board td,
.board th {
  padding: 0px;
  margin: 0px;
  border-width: 0px;
}
.board .board-space {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.board .board-space.light {
  background-color: #caab7c;
}
.board .board-space.light.legal-move {
  background-color: #929a9e;
}
.board .board-space.light.threatened {
  background-color: #d98764;
}
.board .board-space.light.drop {
  background-color: #ddc165 !important;
}
.board .board-space.light.path {
  background-color: #b4b36b !important;
}
.board .board-space.dark {
  background-color: #96733d;
}
.board .board-space.dark.legal-move {
  background-color: #707675;
}
.board .board-space.dark.threatened {
  background-color: #b7623a;
}
.board .board-space.dark.drop {
  background-color: #bb9d3c !important;
}
.board .board-space.dark.path {
  background-color: #928f41 !important;
}
.board .square {
  width: 11.11111111vmin;
  height: 11.11111111vmin;
}
.board .board-header {
  font-size: 3.33333333vmin;
  font-family: sans-serif;
  text-align: center;
}
.board .board-header.file {
  width: 11.11111111vmin;
  height: 4.44444444vmin;
}
.board .board-header.rank {
  height: 11.11111111vmin;
  width: 4.44444444vmin;
}
.piece {
  position: relative;
  width: 11.11111111vmin;
  height: 11.11111111vmin;
  margin: auto;
  background-repeat: no-repeat;
  background-size: cover;
}
.piece:hover:not(.captured) {
  filter: url("assets/filters.svg#blue-glow");
}
.piece.threatened,
.piece.in-check {
  filter: url("assets/filters.svg#red-glow");
}
.piece.protected {
  filter: url("assets/filters.svg#yellow-glow");
}
.piece.king.white {
  background-image: url("assets/pieces.svg#white-king");
}
.piece.king.black {
  background-image: url("assets/pieces.svg#black-king");
}
.piece.queen.white {
  background-image: url("assets/pieces.svg#white-queen");
}
.piece.queen.black {
  background-image: url("assets/pieces.svg#black-queen");
}
.piece.bishop.white {
  background-image: url("assets/pieces.svg#white-bishop");
}
.piece.bishop.black {
  background-image: url("assets/pieces.svg#black-bishop");
}
.piece.knight.white {
  background-image: url("assets/pieces.svg#white-knight");
}
.piece.knight.black {
  background-image: url("assets/pieces.svg#black-knight");
}
.piece.rook.white {
  background-image: url("assets/pieces.svg#white-rook");
}
.piece.rook.black {
  background-image: url("assets/pieces.svg#black-rook");
}
.piece.pawn.white {
  background-image: url("assets/pieces.svg#white-pawn");
}
.piece.pawn.black {
  background-image: url("assets/pieces.svg#black-pawn");
}
.piece.quantum {
  width: 5.55555556vmin;
  height: 5.55555556vmin;
  margin: 0px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-end;
}
.quantum.label {
  width: 2.77777778vmin;
  height: 2.77777778vmin;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: 1.80555556vmin;
}
.quantum.label.pair-0.alpha {
  background-color: #f44336;
  color: #ffffff;
}
.quantum.label.pair-0.beta {
  background-color: #ea1c0d;
  color: #ffffff;
}
.quantum.label.pair-1.alpha {
  background-color: #1148bf;
  color: #ffffff;
}
.quantum.label.pair-1.beta {
  background-color: #0d3690;
  color: #ffffff;
}
.quantum.label.pair-2.alpha {
  background-color: #ffeb3b;
  color: #000000;
}
.quantum.label.pair-2.beta {
  background-color: #ffe608;
  color: #000000;
}
.quantum.label.pair-3.alpha {
  background-color: #4caf50;
  color: #ffffff;
}
.quantum.label.pair-3.beta {
  background-color: #3d8b40;
  color: #ffffff;
}
.quantum.label.pair-4.alpha {
  background-color: #ff7300;
  color: #ffffff;
}
.quantum.label.pair-4.beta {
  background-color: #cc5c00;
  color: #ffffff;
}
.quantum.label.pair-5.alpha {
  background-color: #9c27b0;
  color: #ffffff;
}
.quantum.label.pair-5.beta {
  background-color: #771e86;
  color: #ffffff;
}
.quantum.label.pair-6.alpha {
  background-color: #00bcd4;
  color: #ffffff;
}
.quantum.label.pair-6.beta {
  background-color: #008fa1;
  color: #ffffff;
}
.quantum.label.pair-7.alpha {
  background-color: #795548;
  color: #ffffff;
}
.quantum.label.pair-7.beta {
  background-color: #593f35;
  color: #ffffff;
}
.quantum.label.pair-8.alpha {
  background-color: #bdbdbd;
  color: #000000;
}
.quantum.label.pair-8.beta {
  background-color: #a4a4a4;
  color: #ffffff;
}
.quantum.label.pair-9.alpha {
  background-color: #e91e63;
  color: #ffffff;
}
.quantum.label.pair-9.beta {
  background-color: #c1134e;
  color: #ffffff;
}
.graveyard {
  border: 1px solid black;
  width: 27.77777778vmin;
  height: 16.66666667vmin;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.graveyard .piece {
  width: 5.55555556vmin;
  height: 5.55555556vmin;
  margin: 0;
}
@keyframes check-alert {
  0% {
    color: rgba(38, 50, 56, 0);
    background-color: rgba(176, 190, 197, 0);
    top: 1.11111111vmin;
  }
  10%,
  40% {
    color: #263238;
    background-color: #b0bec5;
    top: 0px;
  }
  100% {
    color: rgba(38, 50, 56, 0);
    background-color: rgba(176, 190, 197, 0);
    top: -3.7037037vmin;
  }
}
.alert-container {
  position: absolute;
  display: none;
}
.alert {
  position: relative;
  display: inline;
  margin: auto;
  font-family: sans-serif;
  font-size: 3.7037037vmin;
  border-radius: 1.11111111vmin;
  animation-name: check-alert;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
#turn-indicator-container {
  height: 11.11111111vmin;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-size: 2.22222222vmin;
}
#turn-indicator {
  width: 7.77777778vmin;
  height: 7.77777778vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0;
}
#turn-indicator.white {
  background-image: url("assets/pieces.svg#white-king");
  filter: url("assets/filters.svg#drop-shadow");
}
#turn-indicator.black {
  background-image: url("assets/pieces.svg#black-king");
  filter: url("assets/filters.svg#drop-shadow");
}
#right-panel {
  padding-left: 1.11111111vmin;
  padding-right: 1.11111111vmin;
}
.scrollable {
  overflow-y: scroll;
}
.invisible * {
  display: none !important;
}