/* --------------------   tastiera    ------------------------ */
.fretboard {
  width: 100%;
  /*height: 180px;*/
  margin-top: 30px;
  display: block;
  position: relative;
  background-color: #ffffe5;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-box-shadow: 5px 5px 10px 0px #00000022;
          box-shadow: 5px 5px 10px 0px #00000022;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
}

.fret {
  position: relative;
  width: 4%;
  /* height: 30px; */
  padding-top: 2.4%;
  display: inline-block;
  cursor: pointer;
  border-right: 2px solid #bbb;
  text-align: center;
  font-size: 12px;
  z-index: 0;
}

.fret:hover {
  background-color: #888 !important;
}

.fret:before {
  /* --------- corde ------------- */
  content: '';
  position: absolute;
  display: block;
  height: 2px;
  width: 100%;
  margin-top: -32%;
  background-color: #666;
  z-index: 10;
}

/* --------------------  capotasto   ------------------------ */
.string .fret:nth-of-type(1) {
  background-color: #d7e9d5;
}

.string .fret:nth-of-type(1):before {
  background-color: transparent;
}

/* -------------------- segnatasti ------------------------ */
.fretdot_cont {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

.fretdot {
  position: absolute;
  width: 1.8%;
  padding-top: 1.8%;
  margin-top: -0.9%;
  top: 50%;
  left: 0%;
  border-radius: 50%;
  background-color: #daf0db;
}

.fretdot_1 {
  left: calc(4% * 3 + 0.9%);
}

.fretdot_2 {
  left: calc(4% * 5 + 0.9%);
}

.fretdot_3 {
  left: calc(4% * 7 + 0.9%);
}

.fretdot_4 {
  left: calc(4% * 9 + 0.9%);
}

.fretdot_5 {
  left: calc(4% * 12 + 0.9%);
  top: 25%;
}

.fretdot_6 {
  left: calc(4% * 12 + 0.9%);
  top: 75%;
}

.fretdot_7 {
  left: calc(4% * 15 + 0.9%);
}

.fretdot_8 {
  left: calc(4% * 17 + 0.9%);
}

.fretdot_9 {
  left: calc(4% * 19 + 0.9%);
}

.fretdot_10 {
  left: calc(4% * 21 + 0.9%);
}

.fretdot_11 {
  left: calc(4% * 24 + 0.9%);
  top: 25%;
}

.fretdot_12 {
  left: calc(4% * 24 + 0.9%);
  top: 75%;
}

.string {
  font-size: 0;
}

.legend_marker,
.fret i {
  display: block;
  position: absolute;
  width: 50%;
  top: 10%;
  border-radius: 50%;
  background-color: indianred;
  left: 25%;
  height: 80%;
  pointer-events: none;
  display: none;
  z-index: 20;
}

.legend_in_scale,
.fret.in_scale i {
  display: block;
  background-color: #5c82a7;
}

.legend_same_note,
.legend_selected_note,
.fret.selected_note i {
  display: block;
  border-radius: 30%;
  background-color: #e38f8f;
}

.legend_same_note,
.fret.same_note i {
  display: block;
  background-color: #e38f8f;
  border-radius: 0%;
}

.legend_selected,
.fret.selected i {
  display: block;
  background-color: indianred;
  border-radius: 5%;
}

.legend_root,
.fret.root_note {
  background: #abcedc;
}

/* bottoni forma selezionati */
.scale_shape.selected,
.voicing_shape.selected {
  background-color: indianred;
}

/* tasti quando fai hover sui bottoni forma */
.fret:nth-of-type(1).in_scale_shape,
.fret.in_scale_shape,
.fret:nth-of-type(1).in_voicing_shape,
.fret.in_voicing_shape {
  background-color: yellow;
}

/* tasto fa parte di una scala selezionata */
.legend_in_scale_shape,
.fret.in_scale_selected i {
  background-color: #000;
  display: block;
}

/* tasto fa parte di un voicing selezionato */
.legend_in_chord,
.fret u {
  content: '';
  position: absolute;
  width: 22%;
  top: 32.3%;
  border-radius: 50%;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 1px 3px #414141;
          box-shadow: 0 0 1px 3px #414141;
  left: 39.2%;
  height: 35%;
  pointer-events: none;
  z-index: 30;
  display: none;
}

.fret.in_chord u {
  display: block;
}

.legend_in_chord_shape,
.fret.in_voicing_selected u {
  display: block;
  width: 22%;
  top: 32.3%;
  background-color: #090909fc;
  left: 39.2%;
  height: 35%;
  pointer-events: none;
  z-index: 30;
  border: 2px solid white;
}

.legend_slot {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}

.legend_slot[data_hide_class] {
  pointer-events: all;
  cursor: pointer;
}

.legend_slot[data_hide_class]:hover {
  color: #777;
}

.legend_marker {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  vertical-align: text-top;
  margin-right: 10px;
  cursor: pointer;
}

.legend_marker:before {
  content: '';
  width: 40px;
  position: absolute;
  height: 2px;
  background-color: #555;
  top: 10px;
  left: -10px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  display: none;
}

.legend_in_chord:before {
  top: 5px;
  left: -13px;
}

.legend_in_chord_shape,
.legend_in_chord {
  width: 12px;
  height: 12px;
  margin: 4px;
  margin-right: 15px;
}

.legend_root {
  display: inline-block;
  position: relative;
  left: -10px;
  top: 0;
  width: 35px;
  height: 25px;
  vertical-align: text-top;
  margin-right: -5px;
  vertical-align: top;
  border-radius: 0;
  text-align: center;
}

.legend_root .legend_marker {
  background-color: transparent;
  border: 1px dashed #6e6e6e;
  margin: auto;
}

.legend_slot.disabled {
  -webkit-filter: saturate(0);
  filter: saturate(0);
  color: #777;
  font-style: italic;
}

.legend_slot.disabled .descr {
  text-decoration: line-through;
  font-weight: 100;
}

.legend_slot.disabled .legend_marker:before {
  display: block;
}

.legend {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: antiquewhite;
  padding: 20px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: top;
  /*max-width: 50%;*/
}

.legend p {
  display: inline;
}

.legend.reduced {
  padding-top: 5px;
}

.legend.reduced .descr {
  display: none;
}

.legend.reduced .legend_slot {
  display: none;
}

.legend.reduced .legend_slot[data_hide_class] {
  display: inline;
}

.text-button {
  display: block !important;
  margin: 8px -10px -15px 0;
  text-align: right;
  color: #333;
  font-size: 12px;
  cursor: pointer;
}

.text-button:hover {
  color: indianred;
}

.piano {
  width: 100%;
  display: block;
  position: relative;
  font-size: 0;
  height: 120px;
  overflow: hidden;
  margin-top: 30px;
  /*display: none;*/
}

.piano_octave {
  display: inline-block;
  width: 20%;
  position: relative;
  height: 100%;
  border-top: 0.1vw solid #ccc;
}

.pianokey {
  display: inline-block;
  height: 100%;
  background: #fafafa;
  position: absolute;
  width: calc(100% / 7);
  z-index: 0;
  border: 1px solid #bbb;
  border-top: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
}

.pk_0 {
  left: calc(100% / 7 * 0);
}

.pk_1 {
  left: calc(100% / 14 * 1);
}

.pk_2 {
  left: calc(100% / 7 * 1);
}

.pk_3 {
  left: calc(100% / 14 * 3);
}

.pk_4 {
  left: calc(100% / 7 * 2);
}

.pk_5 {
  left: calc(100% / 7 * 3);
}

.pk_6 {
  left: calc(100% / 14 * 7);
}

.pk_7 {
  left: calc(100% / 7 * 4);
}

.pk_8 {
  left: calc(100% / 14 * 9);
}

.pk_9 {
  left: calc(100% / 7 * 5);
}

.pk_10 {
  left: calc(100% / 14 * 11);
}

.pk_11 {
  left: calc(100% / 7 * 6);
}

.pianokey.bk {
  background: #18212b;
  width: calc(100% / 7 - 4%);
  margin: 2%;
  z-index: 1;
  top: -40%;
}

.pianokey.bk:hover {
  background: #777;
}

.pianokey:hover {
  background: #ccc;
}

.pianokey.active {
  background: indianred !important;
}

.pianokey.right_note {
  background: #11d61e !important;
}

.pianokey u,
.pianokey i {
  display: block;
  position: absolute;
  width: 60%;
  padding-top: 60%;
  bottom: 2px;
  border-radius: 12px;
  background-color: indianred;
  left: 20%;
  pointer-events: none;
  display: none;
  z-index: 20 !important;
}

.pianokey.bk u,
.pianokey.bk i {
  left: 10%;
  width: 80%;
  padding-top: 80%;
}

.pianokey.in_scale i {
  display: block;
  background-color: #97adc3;
}

.pianokey.selected_note i {
  display: block;
  background-color: #efabab;
}

.pianokey.selected i {
  display: block;
  background-color: indianred;
  border-radius: 5px;
}

.pianokey.root_note i {
  -webkit-box-shadow: 0 0 3px 3px #0f2d6b;
          box-shadow: 0 0 3px 3px #0f2d6b;
}

.pianokey.in_chord u {
  display: block;
  position: absolute;
  width: 35%;
  padding-top: 35%;
  border: 2px solid #000;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border-radius: 12px;
  background-color: white;
  pointer-events: none;
  z-index: 30;
  margin-bottom: 7%;
  left: calc(32% - 2px);
}

.pianokey.bk.in_chord u {
  margin-bottom: 15%;
  left: 25%;
}

.filter_chords {
  cursor: pointer;
}

.filter_chords:hover {
  background-color: #eee;
}

.filter_chords.selected {
  background-color: #c2645f;
  color: white;
}

.filter_list {
  max-height: 100px;
  overflow-y: scroll;
  background-color: white;
  border: 1px solid #ccc;
  padding: 12px;
}

.scale_listing {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}

.scale_listing:after {
  content: " [ " attr(data-degrees) " ]";
  color: #999;
  display: inline-block;
  margin-left: 3px;
}

.scale_listing:hover {
  color: indianred;
}

.scale_listing:hover:after {
  color: indianred;
}

.scale_listing.scale_button {
  display: inline-block;
}

.scale_listing.scale_button:hover {
  background-color: #ccc;
}

.scale_listing.scale_button:after {
  content: 'Click to close';
  color: #6c82a1;
  font-size: 12px;
  display: none;
  position: absolute;
  margin-left: 5px;
  margin-top: -18px;
  border: 1px solid #eac413;
  background-color: #ffef9e;
  padding: 1px 4px;
  border-radius: 10px;
  border-bottom-left-radius: 0;
}

.scale_listing.scale_button.selected {
  padding: 8px;
}

.scale_listing.scale_button.selected:hover:after {
  display: inline-block;
}

.more {
  display: inline-block;
  background-color: transparent;
  width: 10%;
  padding: 1px 10px;
  margin-top: 2px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  font-size: 10px;
  color: #666;
}

.more:hover {
  background-color: #ccc;
}

.analisi_scala {
  border: 1px dashed #ccc;
  padding: 10px;
  margin: 10px 0 50px 0;
  background-color: #f4f7f2;
}

.analisi_scala:empty {
  display: none;
}

.scaleList {
  height: 20em;
  overflow: auto;
  border: 2px solid #ccc;
  padding: 10px;
  background: #eee;
  width: 33.33%;
  display: inline-block;
}

.scaleList:empty {
  display: none;
}

.scale_trovate {
  margin-top: 10px;
}

.scale_trovate:empty {
  display: none;
}

.intervals,
.harmonyList,
.modes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.intervals .interval,
.intervals .chords_on_deg,
.intervals .scale_button,
.harmonyList .interval,
.harmonyList .chords_on_deg,
.harmonyList .scale_button,
.modes .interval,
.modes .chords_on_deg,
.modes .scale_button {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.scale_button,
.chord_button {
  display: block;
  border-radius: 4px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  max-width: 300px;
  margin: auto;
}

.scale_button:hover,
.chord_button:hover {
  background-color: #ddd;
}

.scale_button.selected,
.chord_button.selected {
  background-color: #6882a3 !important;
  color: white;
}

.scale_button.selected {
  display: block;
  margin-bottom: 10px;
  max-width: 100%;
}

.chord_button {
  width: 100%;
}

.modes .scale_button:nth-of-type(2) {
  background-color: #6882a3 !important;
  color: white;
}

.table_label,
.interval {
  border: 0;
  text-align: center;
  color: #aaa !important;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.table_label {
  text-align: left;
}

.chords_on_deg {
  border-left: 1px dashed #ccc;
}

.harmonyList {
  border-top: 1px dashed #ccc;
}

.pstr_a,
.pstr_b {
  display: inline-block;
  height: 30px;
  width: calc(100% / 12);
  background-color: #c2645f;
  border: 1px solid white;
  position: relative;
  font-size: 12px;
  vertical-align: top;
  line-height: 30px;
  text-align: center;
  color: white;
}

.pstr_b {
  background-color: #ccc;
}

.chord_strip {
  font-size: 0;
  width: 600px;
  background-color: #d9e5e9;
  padding: 8px;
  border-radius: 8px;
  margin: auto;
  margin-bottom: 15px;
}

.chord_strip:before {
  content: 'Chord Over Scale Structures Visualizer';
  display: block;
  position: relative;
  font-size: 12px;
  color: #555;
  text-align: center;
}

.chord_strip:empty {
  display: none;
}

.chord_strip
.chroma_strip:nth-of-type(1) span {
  height: 15px;
  color: transparent;
}

.chord_strip
.chroma_strip:nth-of-type(1) span:after {
  font-size: 0;
}

.chord_strip
.chroma_strip:nth-of-type(1) .pstr_a {
  background-color: #eee;
}

.chord_strip
.chroma_strip:nth-of-type(1) .pstr_b {
  background-color: #999;
}

.chroma_strip:nth-of-type(2) .pstr_a {
  background-color: #6382a5;
}

/*.chord_strip span:after {
    display: inline-block;
    color: #cccccc;
    font-size: 12px;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 30px;
    text-align: center;
}
.chroma_strip:nth-of-type(2){
    span:nth-of-type(1):after { content: '1'};
    span:nth-of-type(2):after { content: 'b2'};
    span:nth-of-type(3):after { content: '2'};
    span:nth-of-type(4):after { content: 'b3'};
    span:nth-of-type(5):after { content: '3'};
    span:nth-of-type(6):after { content: '4'};
    span:nth-of-type(7):after { content: '#4/b5'};
    span:nth-of-type(8):after { content: '5'};
    span:nth-of-type(9):after { content: '#5/b6'};
    span:nth-of-type(10):after { content: '6'};
    span:nth-of-type(11):after { content: 'b7'};
    span:nth-of-type(12):after { content: '7'};
}*/
/* chords */
.accordi_rilevati,
.shapes_list {
  background-color: antiquewhite;
  margin-top: 10px;
  padding: 5px;
  display: none;
  position: relative;
}

.accordi_rilevati h3,
.shapes_list h3 {
  text-align: center;
  font-size: 12px;
  margin: 0;
  color: #6382a5;
}

.accordi_rilevati.chord_shapes_list,
.shapes_list.chord_shapes_list {
  margin-bottom: 39px;
}

.accordi_rilevati .chord_button {
  font-size: 1.5em;
}

.chord_shapes {
  margin-top: 9px;
  width: 100%;
  font-size: 0;
  max-height: 28px;
  overflow: hidden;
  z-index: 999;
  position: absolute;
  background: antiquewhite;
  top: 15px;
  left: 0;
  padding-bottom: 10px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.chord_shapes:hover {
  max-height: -webkit-max-content;
  max-height: -moz-max-content;
  max-height: max-content;
  -webkit-box-shadow: 0 20px 20px -5px #555;
          box-shadow: 0 20px 20px -5px #555;
}

.caged_shapes,
.berklee_shapes,
.tnps_shapes {
  font-size: 0;
}

.caged_slot,
.fingering_slot {
  display: inline-block;
  width: 4%;
  vertical-align: top;
}

.caged_slot {
  width: calc(100% / 5) !important;
  display: inline-block;
}

.tnps_slot, .berklee_slot {
  width: calc(100% / 7) !important;
  display: inline-block;
}

.voicing_selected,
.voicing_number,
.scale_shape,
.voicing_shape {
  display: block;
  background-color: #6382a5;
  font-size: 12px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  border-radius: 5px;
  margin: 5px;
  color: white;
}

.voicing_selected:hover,
.voicing_number:hover,
.scale_shape:hover,
.voicing_shape:hover {
  background-color: indianred;
}

.voicing_shape.selected {
  display: none;
}

.voicing_number {
  border: 1px solid #6382a5;
  background-color: white;
  color: #6382a5;
  pointer-events: none;
}

.voicing_selected {
  display: none;
  pointer-events: all;
  background-color: indianred;
  color: white;
}

.voicing_selected:hover {
  background-color: #555;
}

.report {
  margin-top: 15px;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1340px;
  }
}

@media (min-width: 1600px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1540px;
  }
}

@media (min-width: 1920px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1900px;
  }
}

@media (max-width: 992px) {
  .fingering_slot,
  .fret {
    width: 5.88%;
  }
  .piano_octave:nth-of-type(5) {
    display: none;
  }
  .piano_octave {
    width: 25%;
  }
  .fingering_slot.position_17,
  .fret:nth-of-type(18) {
    display: none;
  }
  .fingering_slot.position_18,
  .fret:nth-of-type(19) {
    display: none;
  }
  .fingering_slot.position_19,
  .fret:nth-of-type(20) {
    display: none;
  }
  .fingering_slot.position_20,
  .fret:nth-of-type(21) {
    display: none;
  }
  .fingering_slot.position_21,
  .fret:nth-of-type(22) {
    display: none;
  }
  .fingering_slot.position_22,
  .fret:nth-of-type(23) {
    display: none;
  }
  .fingering_slot.position_23,
  .fret:nth-of-type(24) {
    display: none;
  }
  .fingering_slot.position_24,
  .fret:nth-of-type(25) {
    display: none;
  }
  .fingering_slot.position_25,
  .fret:nth-of-type(26) {
    display: none;
  }
  .fingering_slot.position_26,
  .fret:nth-of-type(27) {
    display: none;
  }
  .fingering_slot.position_27,
  .fret:nth-of-type(28) {
    display: none;
  }
}

@media (max-width: 575px) {
  .fingering_slot,
  .fret {
    width: 7.692%;
  }
  .piano_octave:nth-of-type(3),
  .piano_octave:nth-of-type(4) {
    display: none;
  }
  .piano_octave {
    width: 50%;
  }
  .fingering_slot.position_13,
  .fret:nth-of-type(14) {
    display: none;
  }
  .fingering_slot.position_14,
  .fret:nth-of-type(15) {
    display: none;
  }
  .fingering_slot.position_15,
  .fret:nth-of-type(16) {
    display: none;
  }
  .fingering_slot.position_16,
  .fret:nth-of-type(17) {
    display: none;
  }
  .fingering_slot.position_17,
  .fret:nth-of-type(18) {
    display: none;
  }
  .fingering_slot.position_18,
  .fret:nth-of-type(19) {
    display: none;
  }
  .fingering_slot.position_19,
  .fret:nth-of-type(20) {
    display: none;
  }
  .fingering_slot.position_20,
  .fret:nth-of-type(21) {
    display: none;
  }
  .fingering_slot.position_21,
  .fret:nth-of-type(22) {
    display: none;
  }
  .fingering_slot.position_22,
  .fret:nth-of-type(23) {
    display: none;
  }
  .fingering_slot.position_23,
  .fret:nth-of-type(24) {
    display: none;
  }
  .fingering_slot.position_24,
  .fret:nth-of-type(25) {
    display: none;
  }
}