/**
 * Description: CSS.
 *
 * CSS version for midi-keyboard.
 *
 * @category   webrtc2-midi-kbd.css
 * @package    WP-WebRTC2
 * @author     Oleg Klenitskiy <klenitskiy.oleg@mail.ru>
 * @version    1.5.0
 * @license    GPLv2 or later
 */

/* midi devices */
.midi {
  display: flex;
  flex-direction: row;
  flex-basis:100%;
  height: auto;
  justify-content: space-around;
  flex-wrap: wrap;
}
.midi-synth-editor {
  width: 100%;
  height: auto;
  border: 1px solid black;
  background-color: #565656;
}
.midi-kbd, .midi-synth {
  width: 50%;
  height: auto;
  border: 1px solid black;
  background-color: #565656;
}
.midi-synth {
  display: flex;
  flex-direction: column;
}
.bgrnd {
  background-color: #565656;
  background-image: url("../img-ctrl/bg.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 100%;
}
#wa-canvas {
  width: 100% !important;
  height: 25px !important;
}
.kbd {
  cursor: pointer;
}
.lbl_kbd, .lbl_timbrename {
  font-size: calc(0.7vh + 0.7vw);
  background-color: #000000;
  width:100%;
  height:20px;
  color:white;
  font-weight:normal;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}
.white-key {
  stroke: #555555;
  fill: #FFFFF7;
}
.black-key {
  stroke: #979797;
  fill: #4b4b4b;
}
.white-key-text {
  font-size: 1.8em;
  pointer-events: none;
  user-select: none;
}
.show {
  fill: #A5A39D;
}