.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;
}

.accent {
  background-color: #f0f0f0 !important;
}

.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;
}
.keyboard-padding {
  padding-bottom: 208px; /* footerin korkeus */
}

.keyboard-footer {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
  background: white;
  /*border-top: 1px solid #ddd;*/
  padding-left: 0px;
  padding-right: 28px;
  /*
   * Estää mobiililaitteen safe-area-alueen
   * peittämästä näppäimistöä.
   */
  padding-bottom: env(safe-area-inset-bottom);
}

.keyboard {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
}

.keyboard-content {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.keyboard-key {
  box-sizing: border-box;
  height: 52px;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  /*
   * Estää selaimen oman touch-käyttäytymisen
   * häiritsemästä näppäimen painamista.
   */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08);
}

.keyboard-key:hover {
  background: #f0f0f0;
}

.keyboard-key:active {
  background: #ddd;
  transform: translateY(1px);
  box-shadow: none;
}

/*
 * Toinen rivi hieman sisennetty
 */
.keyboard-row-1 {
  padding: 0 3%;
}

/*
 * Kolmas rivi hieman enemmän sisennetty
 */
.keyboard-row-2 {
  padding: 0 7%;
}

/*
 * Backspace + Space
 */
.keyboard-special-row {
  display: flex;
}

.keyboard-backspace {
  flex: 1.5;
}

.keyboard-space {
  flex: 4;
}

/*
 * Backspace
 */
.backspace-icon {
  font-size: 22px;
}

.backspace-text {
  margin-left: 6px;
}

/*
 * Tabletit ja pienemmät näytöt
 */
@media (max-width: 500px) {

  .keyboard {
    padding: 5px;
  }

  .keyboard-content {
    gap: 4px;
  }

  .keyboard-row {
    gap: 4px;
  }

  .keyboard-key {
    height: 46px;
    padding: 0 2px;
    border-radius: 5px;
    font-size: 16px;
  }

  .keyboard-row-1 {
    padding: 0 2%;
  }

  .keyboard-row-2 {
    padding: 0 5%;
  }

  .backspace-text {
    display: none;
  }

  .backspace-icon {
    font-size: 21px;
  }
}

/*
 * Pienet puhelimet
 */
@media (max-width: 350px) {

  .keyboard {
    padding: 3px;
  }

  .keyboard-content {
    gap: 2px;
  }

  .keyboard-row {
    gap: 2px;
  }

  .keyboard-key {
    height: 42px;
    font-size: 15px;
    border-radius: 4px;
  }

  .keyboard-row-1,
  .keyboard-row-2 {
    padding: 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;*/
}
main {
  padding-bottom: 60px; /* footerin korkeus */
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;

  /*background: #1976d2;*/
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
}