:root {
  /* https://colorscheme.ru/#00427w0w0w0w0 */

  --color-square-light: #66A3D250;
  --color-square-dark: #cccccc;
  --color-square-aim: #FFC373;

  --color-action-move: #00CC00;
  --color-action-attack: #FF0000;
  --color-action-cover: #3F92D2;
  --color-action-control: #FF9200;
  --color-action-xray: #FF7373;
}


#actions-panel {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5;
}
#actions-panel > h4 {
  margin: 5 0;
}


.actions-panel-item {
  margin: 7 0;
}
.actions-panel-item > label {
  padding: 3;
}
label[for="actions-move"] {
  background-color: var(--color-action-move);
}
label[for="actions-attack"] {
  background-color: var(--color-action-attack);
}
label[for="actions-cover"] {
  background-color: var(--color-action-cover);
}
label[for="actions-control"] {
  background-color: var(--color-action-control);
}
label[for="actions-xray"] {
  background-color: var(--color-action-xray);
}


#board-wrapper, #state, #buttons {
  width: max-content;
  margin: 0 auto;
}

#board {
  position: relative;
}

#fen-input {
  font-size: 12;
}

#buttons {
  padding: 15;
}
#buttons > button {
  cursor: pointer;
}


.row {
    font-size: 0;
    display: flex;
}

.rowMark {
    width: 20;
    height: 50;
    text-align: center;
    margin: 2;
    font-size: initial;
}

.rowMarkText {
    font-size: 20;
    margin: 0;
    padding: 10 0;
    text-align: center;
    color: #555;
}

.columnMark {
    width: 50;
    height: 30;
    text-align: center;
    margin: 2;
    font-size: initial;
}

.columnMarkText {
    font-size: 20;
    margin: 0;
    padding: 5 0;
    text-align: center;
    color: #555;
}

.square {
    width: 50;
    height: 50;
    text-align: center;
    margin: 2;
    font-size: initial;
    background-color: white;
}

.light.square {
    background-color: var(--color-square-light) !important;
}

.dark.square {
    background-color: var(--color-square-dark) !important;
}

.square.aim.marked {
    background-color: var(--color-square-aim) !important;
}

.square.control.marked {
    background-color: var(--color-action-control) !important;
}

.square.move.marked {
    background-color: var(--color-action-move) !important;
}

.square.cover.marked {
    background-color: var(--color-action-cover) !important;
}

.square.attack.marked {
    background-color: var(--color-action-attack) !important;
}

.square.xray.marked {
    background-color: var(--color-action-xray) !important;
}

.piece {
    font-size: xxx-large;
    margin: 0;
    transform: translate(0, -4px);
    cursor: pointer;
}

#cover {
    position: absolute;
    width: 432;
    height: 432;
    background-color: #cccccc;
    opacity: 0.4;
    top: 0;
    left: 24;
}

#choicesBox {
    position: absolute;
    background-color: gray;
    padding: 2;
    top: 190;
    left: 130;
}


.hided {
  display: none;
}