.piano {
  position: relative;
  box-sizing: border-box;
  border-top: 1px solid #818995;
}

.key {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: left;
  box-sizing: border-box;
  cursor: pointer;
}

.piano .white {
  height: 16em;
  width: 4em;
  z-index: 1;
  border-left: 1px solid #818995;
  border-bottom: 1px solid #818995;
  box-sizing: border-box;
  background: linear-gradient(to bottom,#cbd5e1 0%,#e2e8f0 100%);
}

.piano .black {
  height: 8em;
  width: 2em;
  margin: 0 0 0 -1em;
  z-index: 2;
  border: 1px solid #818995;
  box-sizing: border-box;
  background: linear-gradient(45deg,#1e293b 0%,#475569 100%);
}

.g,.a,.b,.d,.e {
  margin: 0 0 0 -1em;
  box-sizing: border-box;
}

.piano .key:first-child {
  box-sizing: border-box;
}

.piano .key:last-child {
  box-sizing: border-box;
  border-right: 1px solid #818995;
}

.piano .white span {
  position: absolute;
  bottom: 10px;
  left: 25px;
  box-sizing: border-box;
  user-select: none;
}

.piano .black span {
  position: absolute;
  bottom: 10px;
  left: 6px;
  color: #fff;
  box-sizing: border-box;
  user-select: none;
}

.piano .white.selected {
  background: linear-gradient(to bottom,#a5f296 0%,#e2e8f0 100%) !important;
}

.piano .black.selected {
  background: linear-gradient(to bottom,#a5f296 0%,#475569 100%) !important;
}

.piano .white.in-scale {
  background: linear-gradient(to bottom,#96d4f2 0%,#e2e8f0 100%);
}

.piano .black.in-scale {
  background: linear-gradient(to bottom,#96d4f2 0%,#475569 100%);
}
/*


 */

.drac-checkbox:not(.drac-switch)::after {
  border: 5px solid var(--black);
  border-left: 0;
  border-top: 0;
  height: 18px;
  left: 7px;
  top: 0px;
  transform: rotate(var(--local-rotation,20deg));
  width: 5px;
}