#piano {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid black;
}
#piano .piano-key {
  position: relative;
  border: 1px solid black;
  height: 100%;
  margin: 0;
}
#piano .piano-key .piano-key.black {
  position: absolute;
  z-index: 2;
  height: 65%;
  width: 60%;
  left: 70%;
  background-color: black;
}
#piano .piano-key .piano-key.black.bottom {
  left: -30%;
}
#piano .piano-key .piano-key.black.selected {
  background-color: #8F8;
}
#piano .piano-key.selected {
  background-color: #88F;
}

#piano .piano-key.flash-yellow,
#piano .piano-key .piano-key.black.flash {
  background-color: #FF4 !important;
}

#piano .piano-key.flash-red,
#piano .piano-key .piano-key.black.flash-red {
  background-color: #F04 !important;
}

#piano .piano-key.flash-green,
#piano .piano-key .piano-key.black.flash-green {
  background-color: #0f4 !important;
}

#piano .piano-key.flash-blue,
#piano .piano-key .piano-key.black.flash-blue {
  background-color: #0CF !important;
}

#piano .piano-key[data-active=false] {
  background-color: #bbb;
  border-top: none;
  border-bottom: 2px solid black;
}

#piano .piano-key.black[data-active=false] {
  border-bottom: 1px solid black;
  background-color: #bbb;
}

#piano .piano-key[data-active=true] {
  border-top: 1px black;
  border-bottom: none;
}

/*# sourceMappingURL=piano.css.map */