:root {
	

	
	
	/* --int-1P: #f6e53d ;
	--int-1A: #d6e671 ;
	--int-2m: #d6e671 ; 
	--int-2M: #6ebc58 ;
	--int-3m: #1aad85 ;
	--int-3M: #22cbed ;
	--int-4P: #1587cb ;
	--int-5d: #4463ab ;
	--int-5P: #a95dbc ;
	--int-5A: #E7288C ;
	--int-6m: #e52f8c ;
	--int-6M: #ec4347 ;
	--int-7m: #f56935 ;
	--int-7M: #fdad37 ;
	--int-8d: #fdad37 ;
 */	
	
	
	/* Full Color */
	--int-1P: #ea232d ;  /* half steps  0  */
	--int-1A: #f9a431 ;  /* half steps  1  */
	--int-2m: #f9a431 ;  /* half steps  1  */
	--int-2M: #f3e93d ;  /* half steps  2  */
	--int-3m: #9bc746 ;  /* half steps  3  */
	--int-3M: #9bc746 ;  /* half steps  4  */
	--int-4P: #74bf5b ;  /* half steps  5  */
	--int-5d: #74c5a6 ;  /* half steps  6  */
	--int-5P: #47b9e8 ;  /* half steps  7  */
	--int-5A: #4571b4 ;  /* half steps  8  */
	--int-6m: #5b54a1 ;  /* half steps  8  */
	--int-6M: #86539f ;  /* half steps  9  */
	--int-7m: #cf4d9a ;  /* half steps  10 */
	--int-7M: #cf4d9a ;  /* half steps  11 */
	--int-8d: #e9227b ;  /* half steps  11 */
	
	
	
	
	
	
	
	

	--int-1P: #f3e93d ;  /* half steps  0  */
	--int-1A: #9bc746 ;  /* half steps  1  */
	--int-2m: #9bc746 ;  /* half steps  1  */
	--int-2M: #74bf5b ;  /* half steps  2  */
	--int-3m: #74c5a6 ;  /* half steps  3  */
	--int-3M: #47b9e8 ;  /* half steps  4  */
	--int-4P: #4571b4 ;  /* half steps  5  */
	--int-5d: #5b54a1 ;  /* half steps  6  */
	--int-5P: #86539f ;  /* half steps  7  */
	--int-5A: #cf4d9a ;  /* half steps  8  */
	--int-6m: #cf4d9a ;  /* half steps  8  */
	--int-6M: #e9227b ;  /* half steps  9  */
	--int-7m: #ea232d ;  /* half steps  10 */ 
	--int-7M: #f9a431 ;  /* half steps  11 */
	--int-8d: #f9a431 ;  /* half steps  11 */
	


	--int-1A: #ef7a4d ;  /* half steps  1  */
	--int-6m: #2596cf ;  /* half steps  8  */
	--int-8d: #ca5b9d ;  /* half steps  11 */
	
	--int-1P: #ec5948 ;  /* half steps  0   C   */   
	--int-2m: #ef7a4d ;  /* half steps  1       */
	--int-2M: #f49755 ;  /* half steps  2   D   */
	--int-3m: #fdc35e ;  /* half steps  3       */
	--int-3M: #fee663 ;  /* half steps  4   E   */
	--int-4P: #a6c66a ;  /* half steps  5   F   */
	--int-5d: #32b06e ;  /* half steps  6       */
	--int-5P: #30b6b9 ;  /* half steps  7   G   */
	--int-5A: #2596cf ;  /* half steps  8       */
	--int-6M: #4372b4 ;  /* half steps  9   A   */
	--int-7m: #82569e ;  /* half steps  10      */ 
	--int-7M: #ca5b9d ;  /* half steps  11  B   */
	




	







	
	/* Med Color */
	--int-m-1P: #f9f092 ;  /* half steps  0  */
	--int-m-1A: #c2dc8d ;  /* half steps  1  */
	--int-m-2m: #c2dc8d ;  /* half steps  1  */
	--int-m-2M: #aad598 ;  /* half steps  2  */
	--int-m-3m: #acd9c6 ;  /* half steps  3  */
	--int-m-3M: #98d1f1 ;  /* half steps  4  */
	--int-m-4P: #889ccc ;  /* half steps  5  */
	--int-m-5d: #9088be ;  /* half steps  6  */
	--int-m-5P: #ab8cbf ;  /* half steps  7  */
	--int-m-5A: #de93bd ;  /* half steps  8  */
	--int-m-6m: #de93bd ;  /* half steps  8  */
	--int-m-6M: #f28aa7 ;  /* half steps  9  */
	--int-m-7m: #f4856b ;  /* half steps  10 */
	--int-m-7M: #fdc57f ;  /* half steps  11 */
	--int-m-8d: #fdc57f ;  /* half steps  11 */

	/* Light Color */
	--int-l-1P: #fcf8d9 ;  /* half steps  0  */
	--int-l-1A: #e7f1d5 ;  /* half steps  1  */
	--int-l-2m: #e7f1d5 ;  /* half steps  1  */
	--int-l-2M: #e0efd9 ;  /* half steps  2  */
	--int-l-3m: #e1f0e9 ;  /* half steps  3  */
	--int-l-3M: #dcedfa ;  /* half steps  4  */
	--int-l-4P: #d2d7ec ;  /* half steps  5  */
	--int-l-5d: #d3cfe7 ;  /* half steps  6  */
	--int-l-5P: #ded2e7 ;  /* half steps  7  */
	--int-l-5A: #f1d7e8 ;  /* half steps  8  */
	--int-l-6m: #f1d7e8 ;  /* half steps  8  */
	--int-l-6M: #fad6de ;  /* half steps  9  */
	--int-l-7m: #fcd2c2 ;  /* half steps  10 */
	--int-l-7M: #feeacf ;  /* half steps  11 */
	--int-l-8d: #feeacf ;  /* half steps  11 */

	
	
	
	/* Full Color yellow Root */
	--OFF-int-1P: #ceaa5e ;  /* half steps  0  */
	--OFF-int-1A: #aaa168 ;  /* half steps  1  */
	--OFF-int-2m: #aaa168 ;  /* half steps  1  */
	--OFF-int-2M: #aaa168 ;  /* half steps  2  */
	--OFF-int-3m: #74927a ;  /* half steps  3  */
	--OFF-int-3M: #5c8b83 ;  /* half steps  4  */
	--OFF-int-4P: #799aad ;  /* half steps  5  */
	--OFF-int-5d: #8c7f93 ;  /* half steps  6  */
	--OFF-int-5P: #975f7a ;  /* half steps  7  */
	--OFF-int-5A: #b26369 ;  /* half steps  8  */
	--OFF-int-6m: #b26369 ;  /* half steps  8  */
	--OFF-int-6M: #c76759 ;  /* half steps  9  */
	--OFF-int-7m: #c87356 ;  /* half steps  10 */
	--OFF-int-7M: #d19273 ;  /* half steps  11 */
	--OFF-int-8d: #d19273 ;  /* half steps  11 */
	
	

	
	
	-moz-tab-size: 4;
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-light: #d1d3e0;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--black: #212529;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}


.controls{
	 margin:2rem 0 0 0;
	 padding:0 1rem;
	 line-height:1.5rem;
	 text-align:center 
	}
	.controls .modes .radio{
	 margin-right:1rem 
	}
	.controls .modes .radio.mode-ionian{
	 color: var(--int-1P) 
	}
	.controls .modes .radio.mode-dorian{
	 //color:#6a994e ;
	 color: var(--int-2M)
	}
	.controls .modes .radio.mode-phrygian{
	 //color:#8338ec ;
	 color: var(--int-3M);
	}
	.controls .modes .radio.mode-lydian{
	 //color:#ffbd00 ;
	 color: var(--int-4P);
	}
	.controls .modes .radio.mode-mixolydian{
	 //color:#e36414 ;
	 color: var(--int-5P);
	}
	.controls .modes .radio.mode-aeolian{
	 //color:#00bbf9 ;
	 color: var(--int-6M);
	}
	.controls .modes .radio.mode-locrian{
	 //color:#1d5df2 ;
	 color: var(--int-7M);
	}
	.boxes{
	 padding-top:2rem 
	}
	.boxes.no-padding{
	 padding-top:0 
	}
	.boxes .radio{
	 display:block;
	 margin:0;
	 line-height:2rem 
	}




body{
	font-family: var(--font-family-sans-serif);
	
}
*, ::after, ::before {
  box-sizing: border-box;
}
body .modalBlured {
	transition: all .2s;
	opacity: 1;
}

body.modal-open .modalBlured{
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
	overflow: hidden;
	position: relative;
	opacity: .3;
	transition: all 4s;
}

/* body .modalBlured:after{
	opacity: 0;
	transition: all .5s;
}
body.modal-open .modalBlured:after{
	opacity: 1;
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.5);
	transition: all 4s;
} */


#top {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 44px;
	line-height: 44px;
	background-color: #484848;
	background: linear-gradient(180deg, #404040, #505050);
	color: #f8f8f8;
	text-shadow: 0 0 3px black;
}

#main{
	/* text-align: center */
}
  .flip-card {
		background-color: transparent;
		max-width :250px;
		width: 100%;
		height: 350px;
		max-height: 75vh;
		margin: 10px auto 30px;
		perspective: 1000px; /* Remove this if you don't want the 3D effect */
		/* position:relative; */
		/* padding-bottom:56.25%; */
	  }

	  /* This container is needed to position the front and back side */
	  .flip-card-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.8s;
		transform-style: preserve-3d;
	  }

	  /* Do an horizontal flip when you move the mouse over the flip box container */
	  .flip-card:hover .flip-card-inner {
		transform: rotateY(180deg);
	  }

	  /* Position the front and back side */
	  .flip-card-front, .flip-card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 20px;
		-webkit-backface-visibility: hidden; /* Safari */
		backface-visibility: hidden;
		box-shadow: 0px 0px 5px #aaaaaa;

	  }

	  /* Style the front side (fallback if image is missing) */
	  .flip-card-front {
		/* background-color: #ededed; */
		color: black;
		text-align: center;
	  }
	  .flip-card-front h1{
		  max-width: 80%;
		  background: #fff;
		  border-radius: 0 5px 5px 0;
		  margin-top: 60px;
		  z-index: 10
	  }
	  .flip-card-front h2{
		  margin-bottom: 0;
	  }

	  /* Style the back side */
	  .flip-card-back {
		background-color: dodgerblue;
		background-color: #fff;

		color: black;
		transform: rotateY(180deg);
	  }

	  .button{
		  display: inline-block;
		  background-color: #d5e9f5;
		  color: #000;
		  padding: 0 20px;
		  text-align: center;
		  font-size: 22px;
		  line-height: 35px;
		  border-radius: 10px;

	  }
	  .button:hover{
		  background-color: #a8c7f7;
	  }
	  .chord{
		  margin: 0px auto;
		  border: 0px solid red;
		  /* padding: 20px; */
	  }



	  .flip-card-front {

		  background: linear-gradient(to bottom,  #86aecc 0%,#d4e4ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		  //background: #86aecc;

		  //background: linear-gradient(to bottom,  #86aecc 0%,#b1d5ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	  }

	  .bitbigger{
		  font-size: 1.5em;
		  margin-right: .3em;
	  }

	  #set, #ActiveChordSet{
		  text-align: center;
		  border-bottom: 0px solid #000;
	  }
	  
	  .chordWrapper{
		  transition: all .5s
	  }
	  
	  .columns-2 {
		  -ms-flex: 0 0 50%;
		  flex: 0 0 50%;
		  max-width: 50%;
	  }
	  .columns-3 {
		  -ms-flex: 0 0 33.3333333%;
		  flex: 0 0 33.3333333%;
		  max-width: 33.3333333%;
	  }
	  .columns-4 {
		  -ms-flex: 0 0 25%;
		  flex: 0 0 25%;
		  max-width: 25%;
	  }
	  .columns-5 {
		  -ms-flex: 0 0 20%;
		  flex: 0 0 20%;
		  max-width: 20%;
	  }
	  .columns-6 {
		  -ms-flex: 0 0 16.666667%;
		  flex: 0 0 16.666667%;
		  max-width: 16.666667%;
	  }
	  .columns-7 {
		  -ms-flex: 0 0 14.285714285714286%;
		  flex: 0 0 14.285714285714286%;
		  max-width: 14.285714285714286%;
	  }
	  .columns-8 {
		  -ms-flex: 0 0 12.5%;
		  flex: 0 0 12.5%;
		  max-width: 12.5%;
	  }
	  .columns-9 {
		-ms-flex: 0 0 11.111111111111111%;
		flex: 0 0 11.111111111111111%;
		max-width: 11.111111111111111%;
	  }
	.columns-10 {
		-ms-flex: 0 0 10%;
		flex: 0 0 10%;
		max-width: 10%;
	}
	.columns-11 {
		-ms-flex: 0 0 9.090909090909091%;
		flex: 0 0 9.090909090909091%;
		max-width: 9.090909090909091%;
	}
	.columns-12 {
		-ms-flex: 0 0 8.333333333333333%;
		flex: 0 0 8.333333333333333%;
		max-width: 8.333333333333333%;
	}
	  
	  
	  
	  .mini{
		  width: 100%;
		  height: auto;
		  background: #fff;
		  /* border: 1px solid #eee; */
		  border-radius: 10px;
		  display: inline-block;
		  /* box-shadow: 0px 0px 5px #aaaaaa; */
		  margin: 1vw 0 0 0 ;
		  padding-bottom: 1vw;
	  }


	  .col-8r{
		  -ms-flex: 0 0 12.5%;
			flex: 0 0 12.5%;
			max-width: 12.5%;
		  }
		  
		  
		  
		  
		  
		  
		  
		  
		  
		  .unselectable {
				 -moz-user-select: -moz-none;
				 -khtml-user-select: none;
				 -webkit-user-select: none;
			  
				 /*
				   Introduced in IE 10.
				   See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
				 */
				 -ms-user-select: none;
				 user-select: none;
			  }
		  
		  
		  
		  .fretboard .dot.clicked{
			  
		  }
		  
		  
		  #fretboard .dot{
			  opacity: .2;
			  transition: opacity .5s ;
		  }
		  
		  #fretboard .dot:hover{
			  opacity: 1;
		  }
		  
		  #fretboard .dot.dot-in-box{
			  opacity: 1;
		  }
		  
		  
		  
		  /* 
		  .fretboard .dot{
			  opacity: 1;
			  transition: all .5s ease;
			 
		  }
		  .fretboard .dot.disabled{
			  opacity: .2;
		  }
 */		  
		.fretboard .dot circle{
		  /* transition: all .5s ease; */
		  stroke-width: 1px;
		 
		}
		.fretboard .dot.disabled circle{
		  stroke-width: 0px ;
		  /* color: #000; */
		  /* fill: #6c757d; */
		}

		.fretboard .dot text{
			fill: #000 !important;
		}


		.fretboard .dot.active circle{
			fill: var(--danger);
			
		}
		
		.fretboard .dot-playing circle{
			fill: red !important;
		}