.midi-keyboard-vc {
  display: flex;
  flex-direction: column;
}

.midi-keyboard {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  height: 228px;
  user-select: none;

  * {
    user-select: none;
  }

  .octave-controls-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ffffff2d;
    border-right: none;
    letter-spacing: -3px;
  }

  .octave-changer-label {
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-align: center;
    width: 20px;
  }

  .octave-changer {
    display: flex;
    flex-direction: column;
    margin-right: 6px;

    button:nth-child(1) {
      margin-bottom: 1px;
    }

    button:nth-child(2) {
      margin-top: 2px;
    }

    button {
      flex: 1;
      width: 40px;
      font-size: 20px;
    }
  }

  .octave-offset-display {
    display: flex;
    justify-content: center;
    font-weight: bold;
    border-top: 1px solid #ffffff2d;
    margin-top: 3px;
    padding-right: 2px;
  }
}
