:root{
  --colorShadow : rgba(43, 71, 121, 0.3);
  --shadowLight : 2px 2px 15px var(--colorShadow);
}

/* OPACITY */
.opacity-0{ opacity:0.0; filter:alpha(opacity=0);}
.opacity-1{ opacity:0.1; filter:alpha(opacity=10);}
.opacity-2{ opacity:0.2; filter:alpha(opacity=20);}
.opacity-3{ opacity:0.3; filter:alpha(opacity=30);}
.opacity-4{ opacity:0.4; filter:alpha(opacity=40);}
.opacity-5{ opacity:0.5; filter:alpha(opacity=50);}
.opacity-6{ opacity:0.6; filter:alpha(opacity=60);}
.opacity-7{ opacity:0.7; filter:alpha(opacity=70);}
.opacity-8{ opacity:0.8; filter:alpha(opacity=80);}
.opacity-9{ opacity:0.9; filter:alpha(opacity=90);}
.opacity-10{ opacity:1; filter:alpha(opacity=100);}


/* big, small */
.small{font-size: 0.8em;}
.small1{font-size: 0.8em;}
.small2{font-size: 0.6em;}
.small3{font-size: 0.4em;}
.small4{font-size: 0.2em;}
.small5{font-size: 0.1em;}
.small6{font-size: 0.05em;}

.small_important{font-size: 0.8em !important;}


.big{font-size: 1.2em;}
.big1{font-size: 1.2em;}
.big2{font-size: 1.4em;}
.big3{font-size: 1.8em;}
.big4{font-size: 2em;}
.big5{font-size: 3em;}
.big6{font-size: 5em;}

.bold{font-weight: bold;}

.margin-top-0  { margin-top: 0px; }
.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }
.margin-top-50 { margin-top: 5.0em; }

.margin-top-m05 { margin-top: -0.5em; }
.margin-top-m10 { margin-top: -1.0em; }
.margin-top-m15 { margin-top: -1.5em; }
.margin-top-m20 { margin-top: -2.0em; }
.margin-top-m25 { margin-top: -2.5em; }
.margin-top-m30 { margin-top: -3.0em; }
.margin-top-m50 { margin-top: -5.0em; }

.margin-bottom-05 { margin-bottom: 0.5em; }
.margin-bottom-10 { margin-bottom: 1.0em; }
.margin-bottom-15 { margin-bottom: 1.5em; }
.margin-bottom-20 { margin-bottom: 2.0em; }
.margin-bottom-25 { margin-bottom: 2.5em; }
.margin-bottom-30 { margin-bottom: 3.0em; }

.flex{
  display: flex;
  justify-content: center;
  align-items: center;
}

/*#########################################
# >>	CHORDS BUILDER
#########################################*/

#chordform select {
  width: 70px;
  margin: -7px 0;
}

#btnModeContainer{
  margin-top:20px;
  margin-bottom:20px;
}

#resultsdiv{
  margin-bottom: 50px;
  overflow-x: hidden;
  text-align: left;
  /*border:solid 1px #DDD;*/
  margin-left:-20px;
  padding-left:20px;
  padding-right:20px;
}

#resultsdiv table{
  /*margin:auto;*/
  /*display:none;*/

}


body.print #resultsdiv{
	/*padding-left:100px;*/
  margin-left:0px;
}

#resultsdiv .note_bloc{
	page-break-inside : avoid;
}

#resultsdiv h3{
  width:500px;
  /*margin:auto;*/
  /*display: none;*/
  margin-top:20px;
}
#resultsdiv hr{
  display: none;
}

#resultsdiv .tab_table{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	page-break-inside : avoid;
}

#resultsdiv .tab_table .tab_unit{
  padding:6px;
  width: 70px;
}

body.print #resultsdiv .tab_table .tab_unit{
  width: 100px;
}

#resultsdiv .tab_table img{
  height: 60px;
  margin-left: -1px;
  margin-right: -1px;
}
body.print #resultsdiv .tab_table img{
  height: 90px;
 }

#resultsdiv .tab_table span{
  vertical-align: top;
  padding-top: 11px;
  display: inline-block;
}

#trav img{
  /*margin:10px;*/
  margin-right: -1px;
  margin-left: -1px;
}

.tableProgTitle{
  font-size: 2em;
  margin-top:20px;
}
.print .tableProgTitle{
  font-size: 3em;
  margin-top: 20px;
  background: #DDD;
}
.tableProgTitle th, .tableProgTitle td{
  text-align: center;
}


/*#########################################
# >>  PRINT
#########################################*/

.pageBreak{
	break-after: always;
	page-break-after: always;
}

#h1_for_print{
	font-size: 4.8em;
	text-align: center;
	page-break-after: always;
	margin-top:500px;
}


/*#########################################
# >>  FINGERBOARD
#########################################*/
#fingerBoard{
  height: 800px;
  width:200px;
  background: #EEE;
  position: relative;
  margin:auto;
  margin-top: 50px;
}
.fb_string{
  position: absolute;
  top:0px;
  height: 100%;
  width: 1px;
  background: #666;
 
}

.fb_fret{
  position: absolute;
  left:0px;
  height: 1px;
  width: 100%;
  background: #666;
  
}
.bigFret{
  height: 2px;
}
.fb_fret_nb{
  position: absolute;
  left:-20px;
  height: 1px;
  width: 20px;
  text-align: center;
  color: #666;
  
}

.fbItemContainer{
  position: absolute;
  top:0px;
  left: 0px;
  height: 100%;
  width:100%;
}
.fb_note{
  position: absolute;
  height: 25px;
  width: 25px;
  background: #FFF;
  border: solid 1px #999;
  border-radius: 50%;
  text-align: center;
  color: #666;
  padding-top: 2px;
}

.fb_note.hi{
  background: #666;
  color:#FFF;
}
.fb_note_big{
  font-size: 1.4em;
  height: 30px;
  width: 30px;
  margin-left: -3px;
  font-weight: bold;
  padding-top: 0px;
}

#fingerBoard #scaleTablePopup{
/*  opacity: 0.8;*/
}

/* fbBtnContainer */
/*-----------------------------------*/
#fbBtnContainer {
  margin-left: 300px;
  width: 80px;
  position: absolute;
  top: 0px;
}
#fbBtnContainer li{
  display: block;
  margin-bottom:5px;
}

/* scalesList */
/*-----------------------------------*/
#scaleTablePopup {
  margin-left:-300px;
  max-width: 240px;
}
#scaleTablePopup .tr_scale td:first-child{
  font-weight: 800;
}


/*#########################################
# >>  chords detect
#########################################*/
#scale12Picker_bloc{
  position: relative; 
  margin-bottom: 30px; 
  background: #f9f9f9; 
  border:solid 1px #DDD; 
  height: 40px;
}

#scale12Picker_bloc .note{
  position: absolute; 
  top:10px; 
  margin-left:10px;
}

#selectedNotesBloc{
  display:flex;
  justify-content: space-between;
  height: 60px;
}
#selectedNotesBloc .note{
  margin-left: 20px;
  font-size: 1.5em;
  /*font-weight: 600;*/
}

#selectedNotesBloc .btnDelLast{
  height: 22px;
}

#chordDetectResult .chord{
  margin-left: 20px;
  font-size: 1.5em;
  font-weight: 600;
  border:solid 2px #EEE;
  border-radius: 50%;
  padding:5px;
}

#tabChordsDetect #fingerBoardOuter .fb_note.btn{
  padding:0px;
}

#keyNoteDisplayer{
  position: absolute;
  right: -70px;
  font-size: 2em;
  font-weight: bold;
  top: -10px;
  border: solid 2px #DDD;
  border-radius: 50%;
  padding: 2px;
  height: 50px;
  width: 50px;
  text-align: center;
}


#tableMode tr{
  cursor: pointer;
}

/*#########################################
# >>  print_chords_progression
#########################################*/
#resultsdiv.print_chords_progression{

  /*display:flex; NO flax cause we need page-break-after
  justify-content: space-between;
  flex-wrap: wrap;*/
  text-align: center;
}
#resultsdiv.print_chords_progression .tableProgTitle{
  /*flex-grow: 2;*/
  margin-top: 100px;
}
#resultsdiv.print_chords_progression h3{
  width:auto;
  text-align: center;
}

#resultsdiv.print_chords_progression .note_bloc{
  border: solid 1px #DDD;
  margin: 15px;
  display: inline-grid;
  /*margin: 10px;*/
}

/*#resultsdiv.print_chords_progression .pageBreak:nth-child(even){

  page-break-after : avoid;
}*/



/*#########################################
# >>		MEDIA QUERIES
#########################################*/
@media (max-width: 768px) {
	/*xs*/
	.tableProgTitle{
		font-size: 1.2em;
	}

	#resultsdiv .tab_table .tab_unit{
	  width: 62px;
	}

  #btnDisplayTableScaleList {
    display: block !important;
    position: absolute;
    top: -47px;
    text-align: center;
    right: -50px;
  }

  #fingerBoard #scaleTablePopup {
    background: #FFF;
    padding-top: 10px;
    box-shadow: var(--shadowLight);
    position: absolute;
    margin-left: 0px;
    z-index: 100;
    margin-left: -20px;
    width: 50px; /*130%;*/
    left: -50px;
    top: -56px;
  }

  #fingerBoard #scaleTablePopup #tableMode td, #fingerBoard #scaleTablePopup #tableMode th{
        display:none;
  }
  #fingerBoard #scaleTablePopup #tableMode td.big{
    display:block;
  }

  #fingerBoard #scaleTablePopup #tableMode tr:active{
    background: #FFFF00 !important;
  }

}

@media only screen and (max-width: 768px) and (orientation: landscape){
	/*xs landscape*/

}

@media (min-width: 768px) and (max-width: 992px) {
	/*sm*/

}

@media (min-width: 992px) and (max-width: 1200px) {
	/*md*/
}

@media (min-width: 1200px) {
	/*lg*/

}

@media (min-width: 768px) {
	/* Bigger than iphone */

	

}