/* Zoom slider */
.slidecontainer {
  display: flex;
  margin: 0px;
}
.slidecontainer > * {
  margin: 0 4px;
}

#piano_zoom_slider, #piano_pan_slider {
  width: 100%;
  background: #dedede;
  opacity: 0.3;
  margin: 10px 0 10px 0;
}

#piano_container2 {
  overflow-x: hidden;
}
#piano_container2 #piano_container {
  margin-left: 50%;
  transform: translateX(-50%);
}

#note_range_slider {
  margin: 8px 8px;
}

#note_selection {
  display: flex;
  align-content: stretch;
}
#note_selection input {
  flex: 0 0 2em;
}
#note_selection div {
  flex-grow: 1;
}

#staff-lines-4 {
  transition: 300ms ease-out;
}