.char-box, .char-box-lg, .char-box-blank, .char-box-lgtb{
  width: 25px;
  height: 25px;
  background-color: #fff ;
  margin: 1px;
  padding: 0 2px;
  border-radius: 3px;
  border: 1px solid #333;
  font-family: courier;
  text-align: center;
  font-size: 1em;
  cursor: pointer !important;
  user-select: none;
}
.char-numb{
  position: sticky;
  display: block;
  top: 1px;
  right: 1px;
  font-size: 0.7em;
}
.char-box-lg{
  width: 40px;
  height: 40px;
}
.char-box-lgtb{
  width: 2em;
  height: 2em;
}
.char-box-blank{
  background-color: #ddd;
}
.char-box-click {
  background:yellow !important;
}
.wcc, .wcc:link, .wcc:active, .wcc:visited{
  font-family: var(--bs-font-monospace);
  direction: ltr;
  unicode-bidi: bidi-override;
  text-decoration: none;
  color: #333;
  font-size: .875em;
}
.wcc:hover{
  text-decoration: underline;
}

.letter-1{ background-color: #aaffca }
.letter-2{ background-color: #a9fabe }
.letter-3{ background-color: #a9f6b1 }
.letter-4{ background-color: #aaf1a5 }
.letter-5{ background-color: #acec98 }
.letter-6{ background-color: #aee68b }
.letter-7{ background-color: #b1e17e }
.letter-8{ background-color: #b5db71 }
.letter-9{ background-color: #b8d564 }
.letter-10{ background-color: #bccf58 }
.letter-11{ background-color: #c1c84b }
.letter-12{ background-color: #c5c13e }
.letter-13{ background-color: #caba32 }
.letter-14{ background-color: #ceb325 }
.letter-15{ background-color: #d3ac16 }
.letter-16{ background-color: #d8a403 }
.letter-17{ background-color: #dd9b00 }
.letter-18{ background-color: #e19200 }
.letter-19{ background-color: #e68900 }
.letter-20{ background-color: #eb7f00 }
.letter-21{ background-color: #ef7400 }
.letter-22{ background-color: #f36900 }
.letter-23{ background-color: #f65c00 }
.letter-24{ background-color: #fa4d0d }
.letter-25{ background-color: #fd3b19 }
.letter-26{ background-color: #ff2222 }