/**
 * Description: CSS version for Synthesizer.
 *
 * @package     midi-Synth
 * @category    module css
 * @author      Oleg Klenitsky
 * @copyright   2024 Oleg Klenitsky
 * @license     GPL-2.0-or-later
 */

.slider_ch {
  -webkit-appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  padding:0 !important;
  width: 35px !important;
  height:2px !important;
  background: #444444 !important;
}
.slider_ch::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #444444;
  cursor: pointer;
}
.slider_ch::-moz-range-thumb {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #444444;
  cursor: pointer;
}
.slider_ch::-ms-thumb {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #444444;
  cursor: pointer;
}
.lbl_ch{
  font-size:12px;
  color:black;
  width:65px;
  height:18px;
  cursor:pointer;
  border:1px solid #444444;
}
.marquee {
  fill-opacity:0.2;
  stroke:#000;
  stroke-dasharray:2,4;
  vector-effect:non-scaling-stroke; /* not for FF */
}
#tbl_help, #tbl_help_tools{
  margin:0;
}
#tbl_help th, #tbl_help td{
  padding: 1px 1px 1px 3px;
  border: 1px solid #767676;
  word-break: break-all;
  height: 19px;
}
#tbl_help_tools th, #tbl_help_tools td{
  padding: 1px 1px 1px 3px;
  border: 1px solid #767676;
  word-break: break-all;
  height: 19px;
}
#menuScaleTime_left{
  display: flex;
  flex-direction: column;
  position: absolute;
  width:160px;
  background-color:#C1C1C1;
  border-left: 1px solid red;
}
#menuScaleTime_right{
  display: flex;
  flex-direction: column;
  position: absolute;
  width:160px;
  background-color:#C1C1C1;
  border-right: 1px solid red;
}
#item2MenuScaleTime, #item4MenuScaleTime, #item5MenuScaleTime, #div_item1Menu, #div_item3Menu, #div_item6Menu, #item7MenuScaleTime, #div_item8Menu {
  display: inline-block;
  height:20px;
  font-size:12px;
  background-color:#C1C1C1;
}
#item2MenuScaleTime:hover, #item4MenuScaleTime:hover, #item5MenuScaleTime:hover,#div_item1Menu:hover,#div_item3Menu:hover, #div_item6Menu:hover, #item7MenuScaleTime:hover, #div_item8Menu:hover{
  background: #808080;
}
#div_item3Menu, #item5MenuScaleTime{
  border-bottom: 1px solid black;
}
#instruments {
  height: 110px;
  max-height: 110px;
  overflow-y: auto;
  font-size: 14px;
}
#track_info, #track_info th, #track_info td {
  border:1px solid black;
  font-size:14px;
  padding:0;
  margin:0;
}
#track_info {
  height: 115px;
}
#track_info th {
  height: 20px;
}
#track_info td {
  height: 108px;
}
#progNameStr{
  position:absolute;
  display:flex;
  justify-content: left;
  align-items: center;
  border:1px solid black;
  left:690px;top:197px;
  height: 24px;
  width:280px;
  color:#A0A378;
  box-shadow: inset -1px -1px 2px rgba(200, 200, 200, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  background-color: #353530 !important;
}
.btn_synth {
  font-weight: normal;
  font-size: 12px;
  height: 27px;
  width: 70px;
  display: inline-block;
  border: 1px solid transparent;
  padding: 0 !important;
  margin: 1px 1px;
  color: #A0A378;
  text-shadow: 1px 1px 1px #000;
  border-radius: unset;
  outline: none !important;
  background-color: #353530 !important;
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.btn_synth:hover {
  background-color: #A5A39D;
  cursor: pointer;
}
.btn_synth:active {
  box-shadow: inset -2px -2px 3px rgba(200, 200, 200, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.btn_synth:disabled {
  opacity: 0.7;
}
.btn_editor {
  font-weight: normal;
  font-size: 12px;
  height: 25px;
  width: 70px;
  display: inline-block;
  border: 1px solid transparent;
  padding: 0 !important;
  margin: 1px 1px;
  color: green;
  text-shadow: 1px 1px 1px #000;
  border-radius: unset;
  outline: none !important;
  background-color: #B9B9B9 !important;
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.btn_editor:hover {
  background-color: #A5A39D;
  cursor: pointer;
}
.btn_editor:active {
  box-shadow: inset -2px -2px 3px rgba(200, 200, 200, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.btn_editor:disabled {
  opacity: 0.7;
}
.btn_sequencer {
  font-weight: normal;
  font-size: 12px;
  height: 25px;
  width: 70px;
  display: inline-block;
  border: 1px solid transparent;
  padding: 0 !important;
  margin: 1px 1px;
  color: white;
  text-shadow: 1px 1px 1px #000;
  border-radius: unset;
  outline: none !important;
  background-color: #767676 !important;
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.btn_sequencer:hover {
  background-color: #A5A39D;
  cursor: pointer;
}
.btn_sequencer:active {
  box-shadow: inset -2px -2px 3px rgba(200, 200, 200, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.btn_sequencer:disabled {
  opacity: 0.7;
}
#appearance {
  position:relative;
  background-image: url("/wp-content/plugins/midi-synth/img-ctrl/bg1.png");
  background-repeat: no-repeat;
  width:985px;
  height:275px;
  margin:0;
  padding:0px;

  border-radius: 5px;
  border: 1px solid black;
}
.midi_container {
  display: flex;
  flex-direction: column;
  width: 1000px !important;
  max-width: 1000px !important;
  padding:0;
  margin:10px auto;
}
#inform_panel{
  border: black 1px solid;
  border-radius: 3px;
  color:#A0A378;
  padding: 0;
  margin: 2px 2px 2px 0;
  height: 27px;
  width: 250px;
  font-size: 14px;

  box-shadow: inset -1px -1px 2px rgba(200, 200, 200, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  background-color: #353530 !important;
}
#sel_kbd{
  font-size:14px;
  margin:10px 0 30px 0;
  width: fit-content;
}
#oscs {
  margin-left: 5px;
  background-color: white;
}
#head_soundeditor {
  width: 500px;
  display: inline-block;
  font-size:14px;
  text-align: center;
}
#soundeditor {
  font-size:12px;
  width:720px;
  margin: 0 0 5px 5px;
  background-color: #E3E3E3;
}
#soundeditor td {
  text-align:center;
  padding:1px;
}
#soundeditor th {
  padding:1px;
  cursor: pointer;
}
#audiograph {
  display: none;
  width: fit-content;
  border: 1px solid #A0A378;
  margin-left:5px;
  background-color: #E3E3E3;
}
#btns_osc {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 18px;
  width: 187px;
  top:20px;
  left:24px;
  border: 1px solid #878965;
  background-color: black;
}
#sw0, #sw1, #sw2, #sw3, #sw4 {
  display: flex;
  height:15px;
  float:left;
}
#btns_osc p {
  margin:0;
  font-size:10px;
  font-weight: bold;
  color:#A0A378;
  cursor: pointer;
}
/* animation for oscillograph in mode - on*/
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* midi keyboard */
#kbd {
  margin: 5px;
}
/* Progressbar of convert fileMidi */
#progress_connection {
  display:inline-block;
  height:20px;
  width:100%;
}
.sk-wave {
  display:flex;
  justify-content: space-between;
  width: 70px;
  height: 20px;
}
.sk-wave .sk-rect {
  background-color: #337ab7;
  height: 20px;
  width: 5px;
  display: inline-block;
  -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
  animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
}
.sk-wave .sk-rect-1 {
  -webkit-animation-delay: -1.2s;
        animation-delay: -1.2s;
}
.sk-wave .sk-rect-2 {
  -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
}
.sk-wave .sk-rect-3 {
  -webkit-animation-delay: -1s;
        animation-delay: -1s;
}
.sk-wave .sk-rect-4 {
  -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
}
.sk-wave .sk-rect-5 {
  -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
}

@-webkit-keyframes sk-wave-stretch-delay {
  0%, 40%, 100% {
  -webkit-transform: scaleY(0.4);
          transform: scaleY(0.4);
  }
  20% {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  }
}

@keyframes sk-wave-stretch-delay {
  0%, 40%, 100% {
  -webkit-transform: scaleY(0.4);
          transform: scaleY(0.4);
  }
  20% {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  }
}