.word {
    margin-right: 5px;
  }
  

.grid {
  border-collapse: collapse;
  border: 2px solid black;
  min-width: max-content;
  table-layout: fixed;
}

.cell {
  border: 1px solid gray;
  width: 36px;
  height: 36px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 20px;
  /*font-family: "Klee One";*/
  /*font-weight: bold;*/
  color : #404040;
}

.currentCell {
  background-color: white;
}

.horizontal {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wcKCxALI2QcFgAAAqNJREFUOMuNkUtoVVcYhb+997n3nnvOvUnuTUKsJsEY8BnBibQVpUVooQiSRHzMlHYktIoPUFAQFAdiadOSTupIxQ5qcSIdFIsTNcFY6iMalIimoWkaI2KSa+7j7LN/ByIqxuCCNVwf61+/AvqAyrod81ajxEtXSXZx00dRU21bAa0AjYhC0DgH5ciysHk561ZtAEADvwCNv/84ciGo8qVlRW1pIuj3Bsd786VS0RjlMZu0iHQBZ4C2s0cenP9uy52Pq+vyxTg/qu5PXmken/gv45kkSqmZAQDte5cdAL4GGmMrW4+1/7U6yOatP8fG/9q/Wx6O3ZmjxKCVmRkgkmD9nhXnUoG3B2FJVHbfH+/s2X/p9Fgu2xBMTQRDuYHR3obIVrSnvbcBsTM4MebL7k/7UqF3ElDOkbl1YXTtT9t6PgxzuWHVULK3x3vCp4UnJqETbwK0TpFIpVOeH/o7f+0807ryg464Eq8qTlY227J77JxfSvo1E9mmTOl+8QZD44Paxvb1Bh7K+GmdyCiRNB0HPxutb8l3ilAoTlUOi6TFOd9pnbXV8+rju8/6pVCaUq82cElMKjDaC62TtHUE0aMHT74C6oBH364/9bkVX55VoD5cwNZPvqE6rAHAA1Da1wk/Y9Fh2Tmi7k3da4A1QARcVEpd6mr/uUZrPTU5PRmHyVDe2CCKMcYPrah0pavjh11RJdoGNAIjqYx/svvyiWmFKilU8vUwL14ofLF7Y7qxbX4rSu0DBoB+FEcP/dGlrv5zQ4mIEhFmMiLC3KUti0zCnAWuAz3a6O3nbv2pC+XpdwZfWokIycA/4eK4VRt9M5lMXRt4OPhbc67BAo730GntmXt+Nuy9Ony3WUSC2Sq/dQJwvqq66tTI2P/LRcR/3+BLPwfDG4CIZtw2DgAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-size: 50% 100%;
}

.vertical {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wcKCw4z3yebVwAAAkZJREFUOMuV0V1o1XUcx/HX73/Ozs45/5pTE/XUARWqoYLeGULoRSQ9+NCDBkEPFxFBiLqNyAsN6jZq0ggsEvJajdUKFl2lJXY1FcNYlBbY2mLZ1O1sO/v/utjpmCI9fH98fxe/7/f9+X0fAgZwDZ2P7KpcKLVFHdX7VBeuJglIxBhEiSzj5Sf3rUAFh3A5we/YhEOfHri08cgbvyz9o3zW0OhJtdqkXMi7ye7FO/gNxwM2Yh2ewjD68B0Gdx5cf7lSXGtRe9ULW/cW8DxexRQOYiiH9m3dq46e/3o0w3bcj6UI3/T/nHRszg3Xrsw6/smZZ/AiruIrHMVZaMOSLV1rtZbz8DlG8BGewNP4sFHyucbbPTFGMUZzF/mGd+AOfIkxDOLbRku/4uHXP9hj4GSfvwQS2NK1vo4El7AM7+IYqgh465X+HYu7+h7/7PvJQRdGh9Rn6yDEGD3auUFrWlBds1ihlBez6PDufiM/jLVheffHz56GEIJafVK+VrJ/89uhPZ0fE4hZQa61LMmnsliSKRv5cQzGcfrNrYfVY9G1aRalKzy3Yad5aXuzdyEpaineRpLKMnp39F7feiAIera9J0kS4xPj0kLaDCcwM0uumIqhpOexA2amZ4hzCS8d6dZ74n2hcf4OY24LD3Vud9fqZYRww8+vDfQ4dXGwOfFbuRijysrlci2562XlEsfOfOHq1MQ/wk2BQrko39qipVSQzrvdxbHhfwWbAlBZdbcFdy5x6qfz/xm8QeCBTQ+amJ7633CM0Z/tslr5tT6cbAAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-size: 100% 50%;
}

.pictureBox {
  background-color: Cornsilk;
  color: transparent;
}

.blackBox {
  background-color: lavender;
  color: transparent;
}

.selected {
  background-color: yellow;
}

.fixed {
  font-weight: bold;
}

.special {
  background-color:#FFD8AA;
}

.hidden {
  display: none;
}

.charInputField {
  font-size: 0px;
  width: 0%;
  height: 0%;
  opacity: 0;
}
.iconGrid {
  border-collapse: collapse;
  border: 2px solid black;
  table-layout: fixed;
  display: 'flex';
  float: 'left';
}

.iconCell {
  border: 1px solid gray;
  width: 24px;
  height: 24px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 14px;
}

.pictureBox {
  background-color: Cornsilk;
  color: transparent;
}

.blackBox {
  background-color: lavender;
  color: transparent;
}

.selected {
  background-color: yellow;
}

.fixed {
  font-weight: bold;
}

.special {
  background-color:#FFD8AA;
}

.box {
  text-align: center;
  margin-left: 0px;
  /*background-color: yellow;*/
}
.sidebar {
  text-align: center;
  margin-left: 0px;
  /*background-color: green;*/
}