/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.blur{
	color: transparent;
	text-shadow: 0 0 8px #000;
}

.clear{
	color: black;
	text-shadow: none; 
}

.semiClear{
	color: transparent;
	text-shadow: 0 0 4px #000;
}

#northWindText{
	font-size: 24pt;
	line-height: 1.1;
}
.word {
	position: relative;
  }
	
#media-buttons{
	padding-top:44px
}

  .word::after {
	content: "";
	background: darkgray;
	height: 3px;
	position: absolute;
	bottom: 0;
	transition: .16s all 0.025s;
  }
  
 .word::after {
	left: 100%;
	right: 0;
  }
  
 .word:hover ~ .word::after {
	left: 0;
	right: 100%;
  }
  
  .word:hover::after {
	left: 0;
	right: 0;
  }

  .word.changed ~ .word::after {
	left: 0;
	right: 100%;
  }
  
  .word.changed::after {
	left: 0;
	right: 0;
  }




	#note { font-size: 164px; }
			.droptarget { background-color: #348781}
			div.confident { color: black; }
			div.vague { color: lightgrey; }
			#note { display: inline-block; height:180px; text-align: left;}
			
			#detector { width: 300px; height: 300px; border: 4px solid gray; border-radius: 8px; text-align: center; padding-top: 10px;}
			#output { width: 300px; height: 42px; }
			#flat { display: none; }
			#sharp { display: none; }
			.flat #flat { display: inline; }
			.sharp #sharp { display: inline; }



.grid-layout{
	display: inline-grid;
	font-family: 'Courier New', Courier, monospace;
	font-size: 20px
}

.bars {
	vertical-align: bottom;
	align-self:end;

}

.bar {
	background-color: transparent;
	display: inline-block;
	width: 15px;
	height: 0px;
	margin-right: -12px;
}

.custom-height {
	height: 385px;
	overflow-y:auto;
}
.custom-height-small {
	height: 100px;
	overflow-y:auto;
}

.fix-height {
	height: calc(100vh - 93px);
}


.full-width{

}

#recording-keypress-label{
	padding-right:10px
}