html {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 125%;
  touch-action: manipulation;
}
body {
  margin: 5vh 5vw;
  width: calc(100% - 10vw);
  height: calc(100% - 10vh);
}

.info {
  display: grid;
  width: 75%;
  margin: 2vh 0px 2vh 0px;
  grid-template-columns: auto auto;
}
.info * {
  text-wrap: nowrap;
  width: fit-content;
}
.button {
  display: inline-block;
  padding: 1px 5px;
  background-color: #a6caec;
  border: 2px solid #5c7893;
  border-radius: 2px;
  cursor: pointer;
  text-wrap: nowrap;
}
.button:hover {
  background-color: #829eb9;
}
#cheatsheet {
  position: absolute;
  top: 5vh;
  right: 5vw;
  width: 35vw;
  height: 40vh;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;

  z-index: -99;
}

#channelResetButton {
  border: #aaaaaa 1px solid;
  border-radius: 2px;
  cursor: pointer;
  padding: 0px 2px;
  margin: 0px;
  font-size: 75%;
}
#volume {
  padding: 0px;
  margin: 0px;
}
#readout {
  height: 60vh;
  width: 100%;
  margin: 2vh 0px 2vh 0px;
  white-space: pre;
  overflow: hidden;
}
#datasetFile {
  display: none;
}
#messageTable {
  width: 75vw;
  text-align: center;
  border-collapse: collapse;
}
#messageTable tr {
  border-bottom: lightgray 1px solid;
}
#messageTable td {
  padding: 0px 2vw;
}
.playbackMessageButton {
  cursor: pointer;
 user-select: none;
}
.indicatorLampOn {
  background-color: #e00202 !important;
}
#indicatorLamp {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;

  background-color: #333333;
}
.timingText {
  display: inline-block;
  margin: 0px 0px 0px 10px;
}
.buttonHolder {
  position: absolute;
  top: 55vh;
  left: 42vw;
  display: block;
  margin: 0px;
  width: fit-content;
  text-align: center;
  user-select: none;
}
#keyButton {
  color: white;

  display: block;
  height: 16vh;
  width: 16vh;

  border-radius: 50%;

  margin: auto;
  text-align: center;
  user-select: none;
}
.keyDefault {
  background-color: #00aeff;
}
.keyPressed {
  background-color: #006eff;
}

.letterTimeExpired {
  color: #00d404;
}
.wordTimeExpired {
  color: #d44700;
}

@media screen and (max-width:1100px) {
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
}