body {
  background-color: darkgray;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: black;
}

canvas {
  border: 1px solid #000000;
  image-rendering: pixelated;
}

input[type="checkbox"] {
    vertical-align: middle;
}

.container {
  padding: 10px
}

.container-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px
}

.container-voice-display {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 200px 400px;
  padding: 10px
}

.container-yobi-display {
  display: grid;
  place-items: center;
}

.container-audio {
  display: grid;
  grid-template-columns: 40px auto auto;
  margin-top: 5px;
}

.input-label {
  margin-right: 10px;
}

.level-button {
  display: inline;
}

.level-select {
  display: inline;
  width: 200px
}

.audio-control {
  display: inline;
}

.voice-select {
  width: 400px;
  height: 46ch;
  background-color: lightgray;
  font-family: 'Courier New', Courier, monospace;
}

.bank-select {
  display: block;
  width: 100%;
  height: 4ch;
}

.yobi-canvas {
  justify-content: center;
  align-items: center;
  border: 1px solid #888888;
}

.checkbox-show-background {
  display: block;
  margin-top: 10px;
}

.background-color {
  margin-top: 10px;
  visibility: hidden;
}