/* ON SCREEN KEYBOARD */
#on-screen-keyboard-container {
  display: flex;
  justify-content: center;
  align-items: end;
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-index-on-screen-keyboard);
  top: 0;
  pointer-events: none;
  touch-action: none;
}

#on-screen-keyboard-wrapper {
  width: 80%;
  height: 10%;
}

#on-screen-keyboard {
  display: flex;
  flex-direction: column;
  touch-action: initial;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  background-color: #bbbbbb;
  padding: 0 16px 16px 16px;
  border: 2px solid var(--color-neutral);
  position: relative;
}

.on-screen-keyboard-button--regular {
  width: 7.5%;
  height: 100%;
}

.on-screen-keyboard-button--large {
  width: 30%;
  height: 100%;
}

.on-screen-keyboard-button {
  background-color: var(--color-neutral);
  color: var(--color-text-light);
  border: 1px solid var(--color-text-light);
  font-family: inherit;
  font-size: 3vh;
}

.on-screen-keyboard-button:hover {
  background-color: var(--color-text-light);
  color: var(--color-text-dark);
}

#on-screen-keyboard__row-1 {
  width: 100%;
  height: 50%;
  margin-bottom: 4px;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}

#on-screen-keyboard__row-2 {
  width: 100%;
  height: 50%;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.on-screen-keyboard-button--small {
  width: 2.5%;
  height: 100%;
  font-size: 75%;
}