.chess-assistant-piece, .chess-assistant.piece {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  container-type: size;
  font-family: monospace;
  line-height: 1.4;
  color: #312e2b;
  z-index: 3;
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  user-select: none;
}

.chess-assistant.piece > * {
  display: flex;
  justify-content: space-evenly;
  font-size: 20cqh;
}
.chess-assistant.piece.our-attacker {
  background: linear-gradient(-45deg, #71aaff, #71aaff 25%, transparent 25%, transparent 75%, #71aaff 75%, #71aaff 100%);
  z-index: -1;
  display: none;
}
.chess-assistant.piece.our-attacker.visible {
  display: block;
}
.chess-assistant.piece.their-attacker {
  background: linear-gradient(-45deg, #b575ff, #b575ff 25%, transparent 25%, transparent 75%, #b575ff 75%, #b575ff 100%);
  z-index: -1;
  display: none;
}
.chess-assistant.piece.their-attacker.visible {
  display: block;
}
.chess-assistant.piece.red-background {
  background: linear-gradient(45deg, rgb(255, 88, 88), rgb(255, 88, 88) 25%, transparent 25%, transparent 75%, rgb(255, 88, 88) 75%, rgb(255, 88, 88) 100%);
  z-index: -1;
}
.chess-assistant.piece.green-background {
  background: linear-gradient(45deg, rgb(88, 255, 88), rgb(88, 255, 88) 25%, transparent 25%, transparent 75%, rgb(88, 255, 88) 75%, rgb(88, 255, 88) 100%);
  z-index: -1;
}
.chess-assistant.piece.yellow-background {
  background: linear-gradient(45deg, rgb(255, 155, 88), rgb(255, 155, 88) 25%, transparent 25%, transparent 75%, rgb(255, 155, 88) 75%, rgb(255, 155, 88) 100%);
  z-index: -1;
}
.chess-assistant.piece.red-yellow-background {
  background: linear-gradient(45deg, rgb(255, 88, 88), rgb(255, 88, 88) 25%, transparent 25%, transparent 75%, rgb(255, 155, 88) 75%, rgb(255, 155, 88) 100%);
  z-index: -1;
}
.chess-assistant.piece.green-yellow-background {
  background: linear-gradient(45deg, rgb(88, 255, 88), rgb(88, 255, 88) 25%, transparent 25%, transparent 75%, rgb(255, 155, 88) 75%, rgb(255, 155, 88) 100%);
  z-index: -1;
}
.chess-assistant.piece .check {
  background: rgb(225, 92, 255);
  padding: 0px 4px;
  border-radius: 5px;
}

.chess-assistant-piece {
  z-index: -1;
}

.chess-assistant-transparent {
  opacity: 0.3;
}

.chess-assistant-hidden {
  visibility: hidden;
}

.highlight {
  z-index: -2;
}

#chess-assistant-control-panel {
  border: 1px solid hsla(0, 0%, 100%, 0.72);
  border-radius: 5px;
  position: relative;
  color: white;
  direction: __MSG_@@bidi_dir__;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 10px;
}
#chess-assistant-control-panel:last-child {
  margin-right: 0;
}

#chess-assistant-control-panel-title {
  font-size: 12px;
  position: absolute;
  top: -10px;
  left: 10px;
  background: var(--theme-background-color, var(--c-bg-page));
  padding: 0 4px;
}

#chess-assistant-control-panel-evaluation-container {
  flex: 0 0 auto;
}

#chess-assistant-control-panel-evaluation {
  white-space: nowrap;
}

#chess-assistant-control-panel-best-move-container {
  flex: 0 0 auto;
}

#chess-assistant-control-panel-best-move {
  white-space: nowrap;
}

#chess-assistant-control-panel-options {
  flex: 0 0 auto;
  background-color: rgba(255, 255, 255, 0.3333333333);
  color: white;
  border: 0;
  border-radius: 5px;
}

.board-layout-main #chess-assistant-control-panel {
  flex: 1 1 100%;
  margin: 0 10px;
}
.board-layout-main #chess-assistant-control-panel-options {
  padding: 6px 12px;
}

aside #chess-assistant-control-panel {
  height: 40px;
  margin-top: var(---block-gap);
}
aside #chess-assistant-control-panel-options {
  padding: 4px 6px;
}

.player-component .player-clock {
  position: relative !important;
}

.player-tagline {
  flex: 1 0 auto !important;
  width: auto !important;
}

.player-row-container {
  flex: 1 0 auto !important;
}

.promotion-window {
  z-index: 200 !important;
}

