.ctrl-chord {
  opacity: 0.3;
  color: #333333;
  text-align: center;
  font-size: 36px;
  border-radius: 50%;
  border: 10px solid;
  width: 100px;
  height: 100px;
  padding-top: 10px;
  position: absolute;
}

.ctrl-chord-active {
  font-size: 32px;
  opacity: 1;
/*  font-family: "Times New Roman" !important;*/
}

.ctrl-chord-tonic-distance-0 {
  /*c*/
  top: 40px;
  left: 200px;
}

.ctrl-chord-tonic-distance-0-m {
  /*c*/
  top: 290px;
  left: 112px;
}

.ctrl-chord-tonic-distance-1 {
  /*c#*/
  top: 390px;
  left: 112px;
}

.ctrl-chord-tonic-distance-1-m {
  /*c#*/
  top: 290px;
  left: 288px;
}

.ctrl-chord-tonic-distance-2 {
  /*d*/
  top: 140px;
  left: 375px;
}

.ctrl-chord-tonic-distance-2-m {
  /*d*/
  top: 190px;
  left: 112px;
}

.ctrl-chord-tonic-distance-3 {
  /*eb*/
  top: 240px;
  left: 26px;
}

.ctrl-chord-tonic-distance-3-m {
  /*eb*/
  top: 290px;
  left: 112px;
}

.ctrl-chord-tonic-distance-4 {
  /*e*/
  top: 340px;
  left: 375px;
}

.ctrl-chord-tonic-distance-4-m {
  /*e*/
  top: 190px;
  left: 288px;
}

.ctrl-chord-tonic-distance-5 {
  /*f*/
  top: 90px;
  left: 112px;
}

.ctrl-chord-tonic-distance-5-m {
  /*f*/
  top: 290px;
  left: 112px;
}

.ctrl-chord-tonic-distance-6 {
  /*f#*/
  top: 440px;
  left: 200px;
}

.ctrl-chord-tonic-distance-6-m {
  /*f#*/
  top: 190px;
  left: 288px;
}

.ctrl-chord-tonic-distance-7 {
  /*g*/
  top: 90px;
  left: 288px;
}

.ctrl-chord-tonic-distance-7-m {
  /*g*/
  top: 190px;
  left: 112px;
}

.ctrl-chord-tonic-distance-8 {
  /*ab*/
  top: 340px;
  left: 26px;
}

.ctrl-chord-tonic-distance-8-m {
  /*ab*/
  top: 290px;
  left: 288px;
}

.ctrl-chord-tonic-distance-9 {
  /*a*/
  top: 240px;
  left: 375px;
}

.ctrl-chord-tonic-distance-9-m {
  /*a*/
  top: 140px;
  left: 200px;
}

.ctrl-chord-tonic-distance-10 {
  /*bb*/
  top: 140px;
  left: 26px;
}

.ctrl-chord-tonic-distance-10-m {
  /*bb*/
  top: 290px;
  left: 112px;
}

.ctrl-chord-tonic-distance-11 {
  /*b*/
  top: 390px;
  left: 288px;
}

.ctrl-chord-tonic-distance-11-m {
  /*b*/
  top: 190px;
  left: 288px;
}



.ctrl-2-chord-tonic-distance-0 {
  /*C*/
  top: 140px;
  left: 0px;
}

.ctrl-2-chord-tonic-distance-7 {
  /*G*/
  top: 53px;
  left: 50px;
}

.ctrl-2-chord-tonic-distance-2 {
  /*D*/
  top: -34px;
  left: 100px;
}

.ctrl-2-chord-tonic-distance-9 {
  /*A*/
  top: -34px;
  left: 200px;
}

.ctrl-2-chord-tonic-distance-4 {
  /*E*/
  top: -34px;
  left: 300px;
}

.ctrl-2-chord-tonic-distance-11 {
  /*B*/
  top: 53px;
  left: 350px;
}

.ctrl-2-chord-tonic-distance-6 {
  /*F#*/
  top: 140px;
  left: 400px;
}

.ctrl-2-chord-tonic-distance-10 {
  /*A#*/
  top: 313px;
  left: 100px;
}

.ctrl-2-chord-tonic-distance-3 {
  /*D#*/
  top: 313px;
  left: 200px;
}

.ctrl-2-chord-tonic-distance-8 {
  /*G#*/
  top: 313px;
  left: 300px;
}

.ctrl-2-chord-tonic-distance-1 {
  /*C#*/
  top: 226px;
  left: 350px;
}

.ctrl-2-chord-tonic-distance-5 {
  /*F*/
  top: 226px;
  left: 50px;
}


.ctrl-2-chord-tonic-distance-2-m {
  /*Dm*/
  top: 226px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-9-m {
  /*Am*/
  top: 140px;
  left: 100px;
}

.ctrl-2-chord-tonic-distance-4-m {
  /*Em*/
  top: 53px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-11-m {
  /*Bm*/
  top: -34px;
  left: 0px;
}

.ctrl-2-chord-tonic-distance-6-m {
  /*F#m*/
  top: -120px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-1-m {
  /*C#m*/
  top: -120px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-8-m {
  /*G#m*/
  top: 53px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-3-m {
  /*D#m*/
  top: 140px;
  left: 300px;
}

.ctrl-2-chord-tonic-distance-10-m {
  /*A#m*/
  top: 226px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-5-m {
  /*Fm*/
  top: 400px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-5-m {
  /*Fm*/
  top: 400px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-0-m {
  /*Cm*/
  top: 400px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-7-m {
  /*A#m*/
  top: 313px;
  left: 0px;
}


.ctrl-2-chord-tonic-distance-3-m-mod {
  /*C min*/
  top: 140px;
  left: 100px;
}

.ctrl-2-chord-tonic-distance-10-m-mod {
  /*G min*/
  top: 53px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-8-m-mod {
  /*F min*/
  top: 226px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-5-m-mod {
  /*F dor*/
  top: -34px;
  left: 0px;
}

.ctrl-2-chord-tonic-distance-1-m-mod {
  /*Db phr*/
  top: 313px;
  left: 0px;
}








.ctrl-2-chordm7-tonic-distance-9 {
  /*Am*/
  transform: scale(2);
  border-width: 5px;
  top: 140px;
  left: 250px;
}
#cof-view {
  margin-top: -50px;
}

#ctrl-cof-3 {
  margin-top: 100px;
  position: relative;
  width: 600px;
  height: 600px;

  transform: scale(0.8);

}

.ctrl-cof {
  opacity: 0.3;
  color: #888;
  text-align: center;
  font-size: 26px;
  font-family: Arial;
  border-radius: 50%;
  border: 10px solid;
  width: 100px;
  height: 100px;
  padding-top: 10px;
  position: absolute;
  cursor: pointer;
}

.ctrl-cof-active {
  font-size: 26px;
  opacity: 1;
/*  font-family: "Times New Roman" !important;*/
}

.ctrl-cof-tonic-distance-0 {
  /*c*/
  top: 40px;
  left: 200px;
}

.ctrl-cof-tonic-distance-0-m {
  /*c*/
  top: 240px;
  left: -74px;
}

.ctrl-cof-tonic-distance-0-m-aeo {
  top: 240px;
  left: 475px;
}

.ctrl-cof-tonic-distance-0-dim {
  /*c*/
  top: 290px;
  left: 112px;
}

.ctrl-cof-tonic-distance-1 {
  /*c#*/
  top: 390px;
  left: 112px;
}

.ctrl-cof-tonic-distance-1-m {
  /*c#*/
  top: 440px;
  left: 375px;
}

.ctrl-cof-tonic-distance-1-m-aeo {
  top: 40px;
  left: 26px;
}

.ctrl-cof-tonic-distance-1-m-phr {
  /*c#*/
  top: 40px;
  left: 26px;
}

.ctrl-cof-tonic-distance-1-dim {
  /*c#*/
  top: 190px;
  left: 288px;
}

.ctrl-cof-tonic-distance-2 {
  /*d*/
  top: 140px;
  left: 375px;
}

.ctrl-cof-tonic-distance-2-m {
  /*d*/
  top: -10px;
  left: 112px;
}

.ctrl-cof-tonic-distance-2-m-aeo {
  top: 491px;
  left: 288px;
}

.ctrl-cof-tonic-distance-2-m-mix {
  /*d*/
  top: -10px;
  left: 112px;
}

.ctrl-cof-tonic-distance-2-m-lyd {
  /*dm*/
  top: -10px;
  left: 112px;
}

.ctrl-cof-tonic-distance-2-dim {
  /*d*/
  top: 240px;
  left: 126px;
}

.ctrl-cof-tonic-distance-3 {
  /*eb*/
  top: 240px;
  left: 26px;
}

.ctrl-cof-tonic-distance-3-m {
  /*eb*/
  top: 540px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-m-aeo {
  /*c*/
  top: -60px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-m-lyd {
  /*eb*/
  top: 540px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-m-dor {
  /*eb*/
  top: 140px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-m-phr {
  /*eb*/
  top: 140px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-dim {
  /*eb*/
  top: 290px;
  left: 288px;
}

.ctrl-cof-tonic-distance-4 {
  /*e*/
  top: 340px;
  left: 375px;
}

.ctrl-cof-tonic-distance-4-m {
  /*e*/
  top: -10px;
  left: 288px;
}

.ctrl-cof-tonic-distance-4-m-aeo {
  /*bb*/
  top: 491px;
  left: 113px;
}

.ctrl-cof-tonic-distance-4-m-mix {
  /*em*/
  top: -10px;
  left: 288px;
}

.ctrl-cof-tonic-distance-4-m-lyd {
  /*e*/
  top: -10px;
  left: 288px;
}

.ctrl-cof-tonic-distance-4-dim {
  /*edim*/
  top: 190px;
  left: 112px;
}

.ctrl-cof-tonic-distance-5 {
  /*f*/
  top: 90px;
  left: 112px;
}

.ctrl-cof-tonic-distance-5-m {
  /*f*/
  top: 440px;
  left: 26px;
}

.ctrl-cof-tonic-distance-5-m-aeo {
  top: 40px;
  left: 375px;
}

.ctrl-cof-tonic-distance-5-m-dor {
  /*f*/
  top: 40px;
  left: 375px;
}

.ctrl-cof-tonic-distance-5-dim {
  /*f*/
  top: 340px;
  left: 200px;
}

.ctrl-cof-tonic-distance-6 {
  /*f#*/
  top: 440px;
  left: 200px;
}

.ctrl-cof-tonic-distance-6-m {
  /*f#*/
  top: 240px;
  left: 475px;
}

.ctrl-cof-tonic-distance-6-m-aeo {
  top: 240px;
  left: -74px;
}


.ctrl-cof-tonic-distance-6-dim {
  /*f#*/
  top: 190px;
  left: 288px;
}

.ctrl-cof-tonic-distance-7 {
  /*g*/
  top: 90px;
  left: 288px;
}

.ctrl-cof-tonic-distance-7-m {
  /*g*/
  top: 40px;
  left: 26px;
}

.ctrl-cof-tonic-distance-7-m-aeo {
  top: 440px;
  left: 375px;
}

.ctrl-cof-tonic-distance-7-m-mix {
  /*g*/
  top: 40px;
  left: 26px;
}

.ctrl-cof-tonic-distance-7-dim {
  /*g*/
  top: 290px;
  left: 112px;
}

.ctrl-cof-tonic-distance-8 {
  /*ab*/
  top: 340px;
  left: 26px;
}

.ctrl-cof-tonic-distance-8-m {
  /*ab*/
  top: 491px;
  left: 288px;
}

.ctrl-cof-tonic-distance-8-m-aeo {
  top: -10px;
  left: 112px;
}

.ctrl-cof-tonic-distance-8-m-phr {
  /*ab*/
  top: 190px;
  left: 112px;
}

.ctrl-cof-tonic-distance-8-dim {
  /*ab*/
  top: 240px;
  left: 275px;
}

.ctrl-cof-tonic-distance-9 {
  /*a*/
  top: 240px;
  left: 375px;
}

.ctrl-cof-tonic-distance-9-m {
  /*a*/
  top: -60px;
  left: 200px;
}

.ctrl-cof-tonic-distance-9-m-aeo {
  top: 540px;
  left: 200px;
}

.ctrl-cof-tonic-distance-9-m-lyd {
  /*a*/
  top: -60px;
  left: 200px;
}

.ctrl-cof-tonic-distance-9-m-mix {
  /*a*/
  top: -60px;
  left: 200px;
}

.ctrl-cof-tonic-distance-9-dim {
  /*a*/
  top: 190px;
  left: 112px;
}

.ctrl-cof-tonic-distance-10 {
  /*bb*/
  top: 140px;
  left: 26px;
}

.ctrl-cof-tonic-distance-10-m {
  /*bb*/
  top: 491px;
  left: 113px;
}

.ctrl-cof-tonic-distance-10-m-aeo {
  top: -10px;
  left: 288px;
}

.ctrl-cof-tonic-distance-10-m-dor {
  /*bb*/
  top: 190px;
  left: 288px;
}

.ctrl-cof-tonic-distance-10-dim {
  /*bb*/
  top: 290px;
  left: 288px;
}

.ctrl-cof-tonic-distance-11 {
  /*b*/
  top: 390px;
  left: 288px;
}

.ctrl-cof-tonic-distance-11-m {
  /*b*/
  top: 40px;
  left: 375px;
}

.ctrl-cof-tonic-distance-11-m-aeo {
  top: 440px;
  left: 26px;
}

.ctrl-cof-tonic-distance-11-m-lyd {
  /*b*/
  top: 40px;
  left: 375px;
}

.ctrl-cof-tonic-distance-11-dim {
  /*bdim*/
  top: 140px;
  left: 200px;
}

.ctrl-note {
  opacity: 0.3;
  color: #888;
  text-align: center;
  font-size: 30px;
  font-family: 'Arial';
  border-radius: 50%;
  border: 10px solid;
  width: 100px;
  height: 100px;
  padding-top: 10px;
  position: absolute;
  cursor: pointer;
}

.ctrl-note-inventory {
  opacity: 0.3;
/*    transform: rotate(90deg);*/
}

.ctrl-note-active {
  font-size: 32px;
  opacity: 1;
/*    transform: rotate(90deg);*/
}

.ctrl-note-scale-index-0 {
  top: 140px;
  left: 100px;
}

.ctrl-note-scale-index-1 {
  top: 53px;
  left: 151px;
}

.ctrl-note-scale-index-2 {
  top: 140px;
  left: 200px;
}

.ctrl-note-scale-index-3 {
  top: 53px;
  left: 251px;
}

.ctrl-note-scale-index-4 {
  top: 140px;
  left: 300px;
}

.ctrl-note-scale-index-5 {
  top: 226px;
  left: 251px;
}

.ctrl-note-scale-index-6 {
  top: 226px;
  left: 151px;
}

.ctrl-note-tonic-distance-1-ion {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-lyd {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-mix {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-aeo {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-dor {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-har {
  /*bb*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-2-phr {
  /*d*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-3-ion {
  /*eb*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-3-lyd {
  /*eb*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-3-mix {
  /*eb*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-4-dor {
  /*e*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-4-aeo {
  /*e*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-4-har {
  /*db*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-4-phr {
  /*e*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-5-lyd {
  /*f*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-6-ion {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-mix {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-aeo {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-dor {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-phr {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-har {
  /*eb*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-7-m {
  /*g loc*/
  top: 226px;
  left: 51px;
}

.ctrl-note-tonic-distance-8-ion {
  /*ab*/
  top: 226px;
  left: 351px;
}

.ctrl-note-tonic-distance-8-mix {
  /*ab*/
  top: 226px;
  left: 351px;
}

.ctrl-note-tonic-distance-8-lyd {
  /*ab*/
  top: 226px;
  left: 351px;
}

.ctrl-note-tonic-distance-8-dor {
  /*ab*/
  top: 226px;
  left: 351px;
}

.ctrl-note-tonic-distance-9-aeo {
  /*a*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-9-phr {
  /*a*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-9-har {
  /*f#*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-10-ion {
  /*bb*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-10-lyd {
  /*bb*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-10-har {
  /*g*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-11-mix {
  /*b*/
  top: 226px;
  left: 51px;
}

.ctrl-note-tonic-distance-11-aeo {
  /*b*/
  top: 226px;
  left: 51px;
}

.ctrl-note-tonic-distance-11-dor {
  /*b*/
  top: 226px;
  left: 51px;
}

.ctrl-note-tonic-distance-11-phr {
  /*b*/
  top: 226px;
  left: 51px;
}
#prog-view {
/*  position: absolute;

  bottom: 650px;
  left: 380px;*/
  margin-top: 200px;
  margin-left: -200px;
  transform: scale(0.8);
}

#ctrl-prog {

}

#prog-empty {
  margin-top: -180px;
  padding-left: 280px;
/*  padding-right: 100px;*/
  font-size: 24px;
}

#prog-empty strong {
  color: #eee;
}

#prog-empty div.mini {
  color: #888 !important;
  font-size: 14px;
/*  margin-top: -10px;*/
}

.ctrl-prog-chord {
  position: absolute;
  width: 100px;
  height: 100px;

  opacity: 0.3;

  border: 6px solid;
  border-radius: 50%;

  padding-top: 15px;

  background-color: #111;
  color: #333333;
  text-align: center;
  font-size: 30px;
  font-family: Arial;
}

.ctrl-prog-chord-inv {
  font-size: 12px;
}

.ctrl-prog-chord-sup {
  font-size: 12px;
}

.ctrl-prog-chord-scale {
  opacity: 1;
}

.ctrl-prog-container {
  margin-left: 120px;
  float: left;
  position: relative;
}

.ctrl-prog-chord-major7 {
  top: -73px;
}

.ctrl-prog-1st-down {
  margin-left: 94px;
}

.ctrl-prog-2nd-up {
  margin-top: -20px;
  margin-left: 110px;
}

.ctrl-prog-2nd-down {
  margin-top: 20px;
  margin-left: 110px;
}

.ctrl-prog-3rd-up {
  margin-top: -20px;
  margin-left: 70px;
}

.ctrl-prog-3rd-down {
  margin-top: 20px;
  margin-left: 70px;
}

.ctrl-prog-5th-up {
  margin-top: -81px;
  margin-left: 48px;
}

.ctrl-prog-5th-down {
  margin-top: 81px;
  margin-left: 48px;
}

.ctrl-prog-tiny {
  min-height: 100px;
}

.ctrl-prog-chord-tiny {
  position: absolute;
  width: 30px;
  height: 30px;

  opacity: 1;

  border: 2px solid;
  border-radius: 50%;

  padding-top: 5px;

  background-color: #000000;
  color: #333333;
  text-align: center;
  font-size: 10px;
}

.ctrl-prog-container-tiny {
  margin-left: 33px;
  float: left;
  position: relative;
}

.ctrl-prog-chord-major7-tiny {
  top: -18px;
}

.ctrl-prog-1st-down-tiny {
  margin-left: 30px;
}

.ctrl-prog-2nd-up-tiny {
  margin-top: -6px;
  margin-left: 32px;
}

.ctrl-prog-2nd-down-tiny {
  margin-top: 6px;
  margin-left: 32px;
}

.ctrl-prog-3rd-up-tiny {
  margin-top: -6px;
  margin-left: 20px;
}

.ctrl-prog-3rd-down-tiny {
  margin-top: 6px;
  margin-left: 20px;
}

.ctrl-prog-5th-up-tiny {
  margin-top: -24px;
  margin-left: 15px;
}

.ctrl-prog-5th-down-tiny {
  margin-top: 24px;
  margin-left: 15px;
}
#scale-view {
/*  margin-top: 30px;*/
}

#ctrl-scale {
  position: relative;
  width: 500px;
  height: 500px;

  transform: scale(0.8) rotate(-90deg);
}

.note-octave-0 {
  opacity: 0.5 !important;
  transform: rotate(90deg) scale(1.6) !important;
}

.note-octave-1 {
  opacity: 0.5 !important;
  transform: rotate(90deg) scale(1.6) !important;
}

.note-octave-2 {
  opacity: 0.9 !important;
  transform: rotate(90deg) scale(1.4) !important;
}

.note-octave-3 {
  opacity: 0.7 !important;
  transform: rotate(90deg) scale(1.2) !important;
}

.note-octave-4 {
/*  width: 100px !important;
  height: 100px !important;*/
}

.note-octave-5 {
  opacity: 0.7 !important;
  transform: rotate(90deg) scale(0.8) !important;
}

.note-octave-6 {
  transform: rotate(90deg) scale(0.5) !important;
}

.mubee-name {
  position: absolute;
  top: -50px;
  left: 12px;
  font-size: 26px;
}

.mubee-level {
  position: absolute;
  top: -65px;
  left: 12px;
}

.mubee-chords {
  position: absolute;
  top: 0px;
  left: 12px;
}


/*https://www.florin-pop.com/blog/2019/03/css-pulse-effect/*/
.mubee-circle-small {
/*  position: absolute;
  top: 30px;
  left: 12px;*/

  width: 20px;
  height: 20px;
  border: 11px solid;
  border-radius: 30px;

  opacity: 0.2;
}

.mubee-small-active {
    width: 20px;
  height: 20px;
  opacity: 1;
}

.mubee-circle {
  position: absolute;
  top: 26px;
  left: 13px;

  width: 40px;
  height: 40px;
  border: 10px solid;
  border-radius: 30px;

  opacity: 0.2;
}

.mubee-pulse-caption {
/*  position: absolute;
  top: 0px;
  right: -100px;*/
}

.mubee-pulse {
  position: absolute;
  top: 18px;
  left: 0px;

  width: 60px;
  height: 60px;
  border: 10px solid;
  border-radius: 30px;

  z-index: 10000;
/*  background: #fff;*/
  border-radius: 50%;
  opacity: 0;
/*  margin: 10px;
  height: 20px;
  width: 20px;*/

/*  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);*/
  transform: scale(7.5);
  animation: ping 4s;
  animation-timing-function: ease-out;
}

.mubee-active {
  top: 16px;
  left: 2px;
  width: 60px;
  height: 60px;
  opacity: 1 !important;
}

@keyframes ping {
  0% {
    opacity: 1;
    transform: scale(1);
    border-width: 20px;
/*    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/
  }

  50% {
    transform: scale(7.5);
/*        opacity: 1;*/
        border-width: 0.1px;
/*    transform: scale(5);*/
/*    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/
  }

  80% {
    opacity: 0;
        border-width: 1px;
  /*      opacity: 1;*/
/*    transform: scale(5);*/
/*    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/
  }

  100% {
    transform: scale(7.5);
    border-width: 1px;
    opacity: 0;
/*    border-color: #fff;*/
/*    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/
  }
}


.mubee {
  z-index: 10000;
  position: relative;
  width: 50px;
  height: 50px;
}

.mubee-offset-01-1 {
  position: absolute;
  left: 14px;
  top: 35px;
}

.mubee-offset-0-11 {
  position: absolute;
  right: -3px;
  top: 35px;
}

.mubee-offset--110 {
  position: absolute;
  right: 11px;
  top: 27px;
}

.mubee-offset-1-10 {
  position: absolute;
right: 1px;
    bottom: -15px;
}

.mubee-offset--101 {
  position: relative;
  left: 28px;
  top: 26px;
}

.mubee-offset-10-1 {
  position: relative;
  left: 16px;
  bottom: -42px;
}

.mubee-border-  {
  color: #333333;
}

.mubee-border-0  {
  color: #77ff00;
}

.mubee-border-1 {
  color: #00ff00;
}

.mubee-border-2 {
  color: #00ff77;
}

.mubee-border-3 {
  color: #00ffff;
}

.mubee-border-4 {
  color: #0077ff;
}

.mubee-border-5 {
  color: #0000ff;
}

.mubee-border-6 {
  color: #7700ff;
}

.mubee-border-7 {
  color: #ff00ff;
}

.mubee-border-8 {
  color: #ff0077;
}

.mubee-border-9 {
  color: #ff0000;
}

.mubee-border-10 {
  color: #ff7700;
}

.mubee-border-11 {
  color: #ffff00;
}

.mubee-background-  {
  background-color: #333333;
}

.mubee-background-0  {
  background-color: #77ff00;
}

.mubee-background-1 {
  background-color: #00ff00;
}

.mubee-background-2 {
  background-color: #00ff77;
}

.mubee-background-3 {
  background-color: #00ffff;
}

.mubee-background-4 {
  background-color: #0077ff;
}

.mubee-background-5 {
  background-color: #0000ff;
}

.mubee-background-6 {
  background-color: #7700ff;
}

.mubee-background-7 {
  background-color: #ff00ff;
}

.mubee-background-8 {
  background-color: #ff0077;
}

.mubee-background-9 {
  background-color: #ff0000;
}

.mubee-background-10 {
  background-color: #ff7700;
}

.mubee-background-11 {
  background-color: #ffff00;
}


#sheet-view {
  position: relative;
 /* top: 300px;
  right: 300px;
  margin-top: 300px;
  margin-left: 30px;
  width: 100px;*/
  margin-top: 100px;
  margin-left: 50px;
  padding-top: 15px;

}

.ctrl-sheet-lines {
/*  padding-top: 100px;*/
  width: 300px;
}

.ctrl-sheet-line {
  border-top: 3px solid #333333;
  height: 27px;
}

.ctrl-sheet-blank-line {
  border-top: 3px solid #111;
  height: 27px;
}

.ctrl-sheet-note {
  position: absolute;
  left: 120px;

  font-family: FreeSerif;
  font-size: 130px;
/*  text-align: right;*/
}

.ctrl-sheet-note-outside {
  left: 95px;
}

.ctrl-sheet-note-prefix {
  font-size: 60px;
}

/*factor 27*/

.ctrl-sheet-note-pos-35 {
  top: 230px;
}

.ctrl-sheet-note-pos-36 {
  top: 216px;
}

.ctrl-sheet-note-pos-38 {
  top: 203px;
}

.ctrl-sheet-note-pos-40 {
  top: 189px;
}

.ctrl-sheet-note-pos-41 {
  top: 176px;
}

.ctrl-sheet-note-pos-43 {
  top: 162px;
}

.ctrl-sheet-note-pos-45 {
  top: 149px;
}

.ctrl-sheet-note-pos-47 {
  top: 135px;
}

.ctrl-sheet-note-pos-48 {
  top: 122px;
}

.ctrl-sheet-note-pos-50 {
  top: 108px;
}

.ctrl-sheet-note-pos-52 {
  top: 95px;
}

.ctrl-sheet-note-pos-53 {
  top: 81px;
}

.ctrl-sheet-note-pos-55 {
  top: 68px;
}

.ctrl-sheet-note-pos-57 {
  top: 54px;
}

.ctrl-sheet-note-pos-59 {
  top: 41px;
}

.ctrl-sheet-note-pos-60 {
  top: 27px;
}

.ctrl-sheet-note-pos-62 {
  top: 14px;
}

.ctrl-sheet-note-pos-64 {
  top: 0px;
}

.ctrl-sheet-note-pos-65 {
  top: -14px;
}

.ctrl-sheet-note-pos-67 {
  top: -27px;
}

.ctrl-sheet-note-pos-69 {
  top: -41px;
}

.ctrl-sheet-note-pos-71 {
  top: -54px;
}

.ctrl-sheet-note-pos-72 {
  top: -68px;
}

.ctrl-sheet-note-pos-74 {
  top: -81px;
}

.ctrl-sheet-note-pos-76 {
  top: -95px;
}

.ctrl-sheet-note-pos-77 {
  top: -108px;
}

.ctrl-sheet-note-pos-79 {
  top: -122px;
}

.ctrl-sheet-note-pos-81 {
  top: -135px;
}

.ctrl-sheet-note-pos-83 {
  top: -149px;
}

.ctrl-sheet-note-pos-84 {
  top: -162px;
}

.ctrl-sheet-note-pos-86 {
  top: -176px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

@font-face {
   font-family: 'FreeSerif';
   src: url(/assets/FreeSerif-4aeK-e410fa2e9a3379847a798f7e9472e29eeb5f438e1c5f41e20732ba2af875acfc.ttf)
}

body {
  font-family: Arial;
  background-color: #111 !important;
  color: #aaa !important;
  /*overflow: hidden;*/
  overflow-y: scroll;
  box-sizing: border-box !important;
}

input {
  background-color: #111 !important;
  color: #eee !important;
  border-color: #333 !important;
  font-weight: bold;
}

.input-group-text {
  background-color: #222 !important;
  color: #aaa !important;
  border-color: #333 !important;
}

.route-active {
  font-weight: bold;
  color: #33ff33 !important;
}

.ctrl-routing {
  font-family: Arial;
  font-size: 20px;
  border: 1px solid;
/*  margin-left: 100px;*/
}

.ctrl-composer {
  font-family: Arial;
  font-size: 20px;
  border: 2px solid;
  margin-left: 100px;
}

/*#a-notes {
  font-family: Arial;
  font-size: 20px;
  border: 2px solid;
}*/

tr, th {
  border-bottom: 1px solid;
}

body {
  background-color: #111;
  color: #aaaaaa;
}

#playback {
  border: 2px;
  width: 70px;
  font-size: 30px;
  font-family: Arial;
  color: #aaaaaa;
}

#chord-view {
  min-width: 500px;
/*  margin-top: 30px;*/
  margin-left: 100px;
  font-size: 50px;
  font-family: Arial;
  color: #3333ff;
}

#notes {
  width: 100%;
  position: relative;

  margin-top: 50px;
}

.slice {
  height: 60px;
}

.note {
  float: right;
  width: 8%;
  height: 60px;
  font-size: 30px;
  font-family: Arial;
  color: #aaaaaa;
  cursor: pointer;
  text-align: center;
}

.note-active {
  font-size: 40px;
  font-weight: bold;
  color: #000000;
}

.note-active-ack {
  font-size: 40px;
  font-weight: bold;
  color: #33ff33 !important;
}

.note-inactive {
  font-size: 30px;
  font-weight: bold;
  color: #ff3333 !important;
}

.note-play {
  font-size: 40px;
  font-weight: bold;
  color: #ff9900 !important;
}

.note-chord-active {
  font-size: 40px;
  font-weight: bold;
  color: #3333ff !important;
}

#keyboard {
  margin-top: 50px;
  margin-left: 150px;
  font-size: 30px;
  font-family: Arial;
}

.klav-oct {
  position: relative;
/*  border: 1px dashed;*/
  width: 329px;
  height: 294px;
  float: left;
}

#klav-oct-6 {
  width: 190px;
}

#klav-oct-0 {
 margin-left: -234px;
}

.klav-key {
  position: absolute;
  height: 294px;
  width: 51px;
  border: 2px solid #000;
  z-index: 30;
  background-color: #fff;
  top: 2px;
  cursor: pointer;
}

.klav-key-0 {
  left: 0px;
}

.klav-key-1 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 30px;
}

.klav-key-2 {
  left: 47px;
}

.klav-key-3 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 86px;
}

.klav-key-4 {
  left: 94px;
}

.klav-key-5 {
  left: 141px;
}

.klav-key-6 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 169px;
}

.klav-key-7 {
  left: 188px;
}

.klav-key-8 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 226px;
}

.klav-key-9 {
  left: 235px;
}

.klav-key-10 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 276px;
}

.klav-key-11 {
  left: 282px;
}

.klav-key-active {
  background-color: #000000;
}

.klav-key-active-0 {
  background-color: #7fff00;
  z-index: 50;
}

.klav-key-active-1 {
  background-color: #00ff00;
  z-index: 150;
}

.klav-key-active-2 {
  background-color: #00ff7f;
  z-index: 50;
}

.klav-key-active-3 {
  background-color: #00ffff;
  z-index: 150;
}

.klav-key-active-4 {
  background-color: #007fff;
  z-index: 50;
}

.klav-key-active-5 {
  background-color: #0000ff;
  z-index: 50;
}

.klav-key-active-6 {
  background-color: #7f00ff;
  z-index: 150;
}

.klav-key-active-7 {
  background-color: #ff00ff;
  z-index: 50;
}

.klav-key-active-8 {
  background-color: #ff007f;
  z-index: 150;
}

.klav-key-active-9 {
  background-color: #ff0000;
  z-index: 50;
}

.klav-key-active-10 {
  background-color: #ff7f00;
  z-index: 150;
}

.klav-key-active-11 {
  background-color: #ffff00;
  z-index: 50;
}


.klav-key-active-ack {
  background-color: #33ff33 !important;
}

.klav-key-inactive {
  background-color: #ff3333 !important;
}

.klav-key-play {
  background-color: #ff9900 !important;
}


.note_index_0 {
  color: #77ff00;
}

.note_index_1 {
  color: #00ff00;
}

.note_index_2 {
  color: #00ff77;
}

.note_index_3 {
  color: #00ffff;
}

.note_index_4 {
  color: #0077ff;
}

.note_index_5 {
  color: #0000ff;
}

.note_index_6 {
  color: #7700ff;
}

.note_index_7 {
  color: #ff00ff;
}

.note_index_8 {
  color: #ff0077;
}

.note_index_9 {
  color: #ff0000;
}

.note_index_10 {
  color: #ff7700;
}

.note_index_11 {
  color: #ffff00;
}


#key-view {
/*  float: right;*/
/*  margin-top: 30px;*/
  margin-left: 30px;
}

.ctrl-key {
  margin-bottom: 0px;
  padding-left: 30px;
  font-size: 60px;
  font-weight: 600;
  font-family: 'Arial';
}

.ctrl-key-detect {
  font-size: 30px;
}

.ctrl-chord-roman-main {
  float: left;
  padding-right: 5px;
  font-size: 50px;
  font-weight: 600;
  font-family: "Times New Roman";
}

.ctrl-chord-roman-sup {
  float: left;
  font-size: 30px;
}

.ctrl-chord-name-main {
  float: left;
  padding-right: 5px;
  font-size: 60px;
  font-weight: 600;
  font-family: 'Arial';
}

.ctrl-chord-name-inversion {
  float: left;
  padding-right: 5px;
  font-size: 60px;
  font-weight: 600;
  font-family: 'Arial';
}

.ctrl-chord-name-sup {
  float: left;
  font-size: 30px;
}


/* Tuner */
/*html {
  height: 100%;
}*/

.button {
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  padding: 10px;
  cursor: pointer;
}

#tuner {
  width: 100px;
  height: 100px;
}

#tuner-mic {
  margin-left: 3px;
  width: 70px;
  height: 70px;
  filter: invert(40%);
}

#tuner-mic:hover {
  filter: invert(60%);
}

#tuner-mic:active {
  filter: invert(80%);
}

#tuner-mic-mute {
  margin-left: 3px;
  width: 70px;
  height: 70px;
  filter: invert(40%);
}

#tuner-mic-mute:hover {
  filter: invert(60%);
}

#tuner-mic-mute:active {
  filter: invert(80%);
}

#tuner-settings {
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px;
}

#tuner-meter {
  position: relative;
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px;
}

#tuner-spectrum {
  position: relative;
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px;
}

#midi-range {
  color: #eee !important;
}

#tone-generator {
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px;
}

#tone-generator-frequency {
  margin: 11px 0px;
  width: 100px;
  font-size: 30px;
}

#tone-generator-play {
  cursor: pointer;
}

#auto-key-img {
  width: 70px;
  height: 70px;
  filter: invert(40%);
}

#auto-key-img:hover {
  filter: invert(60%);
}

#auto-key-img:active {
  filter: invert(80%);
}

#reset-img {
  margin-top: 1px;
  margin-left: 3px;
  width: 70px;
  height: 70px;
  filter: invert(40%);
}

#reset-img:hover {
  filter: invert(60%);
}

#reset-img:active {
  filter: invert(80%);
}


#speaker-mute {
  margin-top: 3px;
  margin-left: 5px;
  width: 66px;
  height: 66px;
  filter: invert(40%);
}

#speaker-mute:hover {
  filter: invert(60%);
}

#speaker-mute:active {
  filter: invert(80%);
}

#speaker-on {
  margin-top: 3px;
  margin-left: 5px;
  width: 66px;
  height: 66px;
  filter: invert(40%);
}

#speaker-on:hover {
  filter: invert(60%);
}

#speaker-on:active {
  filter: invert(80%);
}

.blink {
  filter: invert(80%) !important;
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.2;
  }
}

#tuner-view {
/*  margin-top: 200px;*/
/*  width: 300px;
  height: 300px;*/
  position: relative;
}

#tuner-note {
  height: 40px;
  font-size: 32px;
  position: absolute;
  left: 160px;
  top: -4px;
}

#tuner-cents {
  height: 40px;
  font-size: 32px;
  position: absolute;
  left: 160px;
  bottom: -4px;
}

/*body {
  position: fixed;
  font-family: sans-serif;
  color: #2c3e50;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  user-select: none;
}*/

.notes {
  position: relative;
  text-align: center;
}

.note {
  font-size: 90px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-right: 30px;
  padding-left: 10px;
}

.note.active {
  color: #e74c3c;
}

/*.notes-list {
  overflow: auto;
  overflow: -moz-scrollbars-none;
  white-space: nowrap;
  -ms-overflow-style: none;
  -webkit-mask-image: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0),
    #fff,
    rgba(255, 255, 255, 0)
  );
}

.notes-list::-webkit-scrollbar {
  display: none;
}*/

.note {
  -webkit-tap-highlight-color: transparent;
}

.note span {
  position: absolute;
  right: 0.25em;
  font-size: 40%;
  font-weight: normal;
}

.note-sharp {
  top: 0.3em;
}

.note-octave {
  bottom: 0.3em;
}

.frequency {
  font-size: 24px;
  position: absolute;
  bottom: -233px;
  right: 38%;
}

.frequency span {
  font-size: 50%;
  margin-left: 0.25em;
}

.meter {
  position: relative;
/*  left: 0;
  right: 0;
  bottom: 0%;*/
  width: 350px;
  height: 190px;
  margin-top: 40px;
}

.meter-pointer {
  width: 2px;
  height: 150px;
  background: #444;
  transform: rotate(45deg);
  transform-origin: bottom;
  transition: transform 0.5s;
  position: absolute;
  right: 50%;
}

.meter-dot {
  width: 10px;
  height: 10px;
  background: #444;
  border-radius: 50%;
  position: absolute;
  bottom: 32px;
  right: 50%;
  margin-right: -4px;
}

.meter-scale {
  width: 1px;
  height: 200px;
  transform-origin: bottom;
  transition: transform 0.2s;
  box-sizing: border-box;
  border-top: 10px solid;
  position: absolute;
  right: 50%;
}

.meter-scale-strong {
  width: 2px;
  border-top-width: 20px;
}

.frequency-bars {
  margin-left: 15px;
  margin-top: 5px;
/*  height: 600px;*/
/*  position: fixed;
  bottom: 0;
  z-index: 0;*/
}
/*
@media (max-width: 768px) {
  .meter {
    width: 100%;
  }

  .notes {
    width: 100%;
  }
}*/

.swal-button {
  background: #2c3e50;
}

#swal2-title {
  font-size: 20px;
}

.a4 {
  position: absolute;
  top: 16px;
  left: 16px;
}

.a4 span {
  color: #e74c3c;
}

.auto {
  position: absolute;
  top: 16px;
  right: 16px;
}