style.css

.main {
  display: flex;
  width: 100%;
  padding: 0 30px;
  margin: 5px auto;
}

.col {
  height: 100%;
}

.col:last-child {
  flex-grow: 1;
}

i.fas {
  font-size: 22px;
}

.toggle_fa {
  cursor: pointer;
}

.toggle_fa>input {
  opacity: 0;
  position: absolute;
  right: 0;
  user-select: none;
}

.toggle_fa>input:not(:checked)+label>i+i::before {
  display: none;
}

.toggle_fa>input:checked+label>i:first-of-type {
  display: none;
}

.led-green {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #abff00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px,
    #89ff00 0 2px 12px;
}

body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-grow: 1;
  min-height: 600px;
  height: auto !important;
  height: 600px;
}

.fixed-top-right {
  position: fixed;
  top: 10px;
  right: 10px;
}

.tabs>input+label+div {
  display: none;
}

.tabs>input:checked+label {
  color: gold;
}

.tabs>input:checked+label+div {
  display: block;
}

.knob-set {
  background-color: #323233;
  color: white;
  margin-top: 2em;
  padding: 20px;
  display: flex;
  max-width: fit-content;
}

.ctrls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr;
}

.onoff_indicate::after {
  content: "(" + attr(name) + ")";
}

.channelCard {
  position: relative;
  border: 1px;
  padding: 3px;
  border: black solid 1px;
}

.channelCard:nth-child(2n) {
  background-color: #222;
}

.channelCard:hover {
  background-color: #333333;
}

#stdout {
  position: absolute;
  right: 0;
}

.amp-indicate {
  height: 20px;
  position: absolute;
  bottom: 10px;
  background-image: linear-gradient(to right, green, yellow, red);
  width: calc(var(--db) * 700px);
}

.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

#ch_ctrl_bar {
  position: absolute;
  top: 20vh;
  right: 10em;
}

.keyboard {
  height: 12em;
  width: 38em;
  left: 14em;
  position: relative;
  border: 1px solid #160801;
  border-radius: 1em;
  background: black;
}

.keywhite {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: left;
  height: 12em;
  width: 3em;
  z-index: 1;
  border-left: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-radius: 0 0 5px 5px;
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 0 0 5px #ccc inset,
    0 0 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #eee 0, #fff 100%);
  margin: 0 0 0 -1em;
}

.keywhite.active {
  border-top: 1px solid #777;
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1) inset, -5px 5px 20px rgba(0, 0, 0, 0.2) inset,
    0 0 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #fff 0, #e9e9e9 100%);
}

.keywhite.pressed {
  border-top: 1px solid #777;
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1) inset, -5px 5px 20px rgba(0, 0, 0, 0.2) inset,
    0 0 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #fff 0, #e9e9e9 100%);
}

.keyblack {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: left;
  height: 8em;
  width: 1.5em;
  margin: 0 0 0 -1em;
  z-index: 2;
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset, 0 -5px 2px 3px rgba(0, 0, 0, 0.6) inset,
    0 2px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(45deg, #222 0, #555 100%);
}

.keyblack:active {
  box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset, 0 -2px 2px 3px rgba(0, 0, 0, 0.6) inset,
    0 1px 2px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to right, #444 0, #222 100%);
}

.keyblack:pressed {
  box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset, 0 -2px 2px 3px rgba(0, 0, 0, 0.6) inset,
    0 1px 2px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to right, #444 0, #222 100%);
}

.A,
.C,
.D,
.F,
.G {
  margin: 0 0 0 -1em;
}