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

.loader {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 5px solid rgba(13, 71, 161, 0.6);
  border-radius: 50%;
  border-left-color: #0D47A1;

  animation: loader 1.3s linear infinite;
}

@keyframes loader {
  100% { transform: rotate(360deg); }
}

#tblSoundFontsGS, #tblSoundFontsXG{
  table-layout: fixed;
  width:50%;
  border: 1px solid black;
  margin:0;
  font-family: 'Arial, Helvetica, sans-serif';
}
#tblSoundFontsGS tbody, #tblSoundFontsXG tbody{
  height: 115px;
  max-height: 115px;
  overflow-x: hidden;
  overflow-y: scroll;
  display: block;
  width: 100%;
  color: black;
}
#tblSoundFontsGS tr, #tblSoundFontsXG tr{
  display: table;
  width: 100%;
}
#tblSoundFontsGS td, #tblSoundFontsXG td {
  padding:0 3px;
  height: 22px;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
}
#tblSoundFontsGS th, #tblSoundFontsXG th {
  text-align: center;
  padding:0;
  background:#F1F1F1;
}
.lbl_version {
  position: absolute;
  color: #A0A378;
  left: 850px;
  top:10px;
  font-size: 16px;
}
.lbl_version:visited {
color: #A0A378;
}
.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;
}
#sequencer_subfooter2 {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  height:183px;
  width:770px;
  border-left: 1px solid black;
  border-top: 1px solid black;
  background: #E3E3E3;
}
.staveReport, .staveAbout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  padding: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 183px;
  width: 100%;
  font-size: 14px;
}
.staveStave {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.3;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  height: 183px;
  width: 100%;
  font-size: 14px;
}
.staveTrack, .staveExport {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  overflow-x:hidden;
  overflow-y: hidden;
  height:183px;
  width: 100%;
  font-size: 14px;
}
.staveHelp, .staveExamples {
  display:flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  overflow-x:hidden;
  overflow-y: scroll;
  height:183px;
  width: 100%;
  font-size: 14px;
}
.staveRecord {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.3;
  overflow-x:hidden;
  overflow-y: hidden;
  height:183px;
  width: 100%;
  font-size: 14px;
}
.staveTools {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.3;
  overflow-x:auto;
  overflow-y: hidden;
  height:183px;
  width: 100%;
  font-size: 14px;
}
.staveSetting {
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  line-height: 1.3;
  overflow-x:auto;
  overflow-y: hidden;
  height:180px;
  width: 100%;
  font-size: 14px;
  margin: 2px;
}
#info_name_track, #instruments, #channels,#info_track_measure_notes {
  height: 160px;
  max-height: 160px;
  font-size: 14px;
  line-height: 1.3;
  overflow-x: hidden;
  overflow-y: auto;
  border:none;
  background: #E3E3E3;
}
#track_info th, #tbl_export th, #midi_examples th {
  border:1px solid black;
  font-size:14px;
  padding:0;
  margin:0;
  background: #C3C3C3;
}
#track_info, #track_info td, #midi_examples td,
#tbl_export, #tbl_export td, #midi_examples td {
  border:1px solid black;
  font-size:14px;
  padding:0;
  margin:0;
  background: #E3E3E3;
}
#track_info, #tbl_export, #midi_examples {
  height: 100%;
  margin-top:2px;
  margin-bottom: 0;
  font-family: 'Arial, Helvetica, sans-serif';
}
#track_info select {
  font-family: 'Arial, Helvetica, sans-serif';
}
#standardMidi{
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  left: 685px;
  top: 20px;
  margin: 0;
  border: 1px solid black;
  height: 25px;
  width: 120px;
  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;
}
#progNameStr{
  position:absolute;
  display:flex;
  justify-content: left;
  align-items: center;
  border:1px solid black;
  left:690px;top:202px;
  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: 27px;
  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_soundeditorGM, #head_soundViewerGSXG {
  width: 500px;
  display: inline-block;
  font-size:14px;
  text-align: center;
}
#soundeditorGM, #soundViewerGSXG {
  font-size:12px;
  width:720px;
  background-color: #E3E3E3;
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
}
#soundeditorGM input{
  width: 35px;
  font-size:12px;
  font-family: Arial, Helvetica, sans-serif;
}
#soundeditorGM select, #soundeditorGM label{
  font-size:12px;
  font-family: Arial, Helvetica, sans-serif;
}
#soundeditorGM td, #soundViewerGSXG td {
  line-height: 1.2;
  text-align:center;
  padding:1px;
}
#soundeditorGM th, #soundViewerGSXG th {
  padding:1px;
  cursor: pointer;
}
#audiograph {
  display: none;
  width: fit-content;
  border: 1px solid #A0A378;
  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, #standardMidi 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; }
}
/* win_kbd, win_edit, audiograph, win_sequencer */
#kbd, #win_edit, #audiograph, #win_sequencer{
  margin-top: 5px;
}
#sequencer_header input{
  font-family: Arial, Helvetica, sans-serif;
}
/* 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);
  }
}