#playback_gui
{
	position:absolute;background:#263238;border-radius:3px;
	width:480px;height:56px;right:calc( 50% - 240px );
	text-align:center;
	/*top:4px;*/
	
	opacity: 0.4;
	top:-3px;
	box-shadow: 0px 0px 4px black;
	
	transition: 1000ms all 1000ms linear;
}

#playback_gui:hover, #playback_gui:active/*, #playback_gui:[speed_bar=1]*/
{
	opacity: 1;
	/*top:4px;*/
	
	box-shadow: 0px 0px 7px black;
	
	transition: all 100ms linear;
}

#speedInfo
{
	font-size: 12pt;
	min-width: 57px;
	display: inline-block;
	max-width: 57px;
}

.timeDisp
{
	font-family:sans;
	font-size:10pt;
	/*font-weight:bold;*/
	max-width: 25px;
	display: inline-block;
	position:absolute;
	top:37px;
	color:#ccc;
}

#playback_gui select
{
	background: inherit;
	border: transparent;
	color: white;
	
	transition: background 100ms linear;
}

#playback_gui select:hover
{
	background: #333;
	border: transparent;
	color: white;
}



/* heavily based on https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */

#speedBar
{
	
	cursor: pointer;
	height: 15rem;
}

#playbackBar
{
   -webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	width:180px;
	outline: none; /* Removes default focus */
	position:relative;top:4px;
}

/* slider track */
#playbackBar::-moz-range-track
{
	background-color: #c0c0c0;
	border-radius: 0.5rem;
	height: 0.5rem;  
}

#playbackBar::-webkit-slider-runnable-track
{
	background-color: transparent;
	/*border-radius: 0.5rem;
	height: 0.5rem;*/
}

#playbackBar::-moz-range-progress 
{
	background-color: #40c4ff;
	border-radius: 0.5rem;
	height: 0.5rem; 
}

/* slider thumb */
#playbackBar::-moz-range-thumb
{
	border: none; /*Removes extra border that FF applies*/
	border-radius: 0; /*Removes default border-radius that FF applies*/
	
	background-color: #fff;
	height: 1.5rem;
	width: 1.5rem;
	border-radius:1rem;
}
#playbackBar::-webkit-slider-thumb
{
   -webkit-appearance: none; /* Override default look */
	appearance: none;
	margin-top: -9px; /* Centers thumb on track */
	
	background-color: #fff;
	height: 1.5rem;
	width: 1.5rem;
	border-radius:1rem;
}


/* i actually have to do this all seperate? this is stupid. */

#playbackBar:focus::-moz-range-thumb
{   
	border: 0px solid rgba(255,255,255,0.4);
	outline: 3px solid rgba(255,255,255,0.4);
	outline-offset: 0.125rem; 
}
#playbackBar:focus::-webkit-slider-thumb
{
	border: 0px solid rgba(255,255,255,0.4);
	outline: 3px solid rgba(255,255,255,0.4);
	outline-offset: 0.125rem; 
}

#playbackBar:hover::-moz-range-thumb
{   
	border: 0px solid rgba(255,255,255,0.4);
	outline: 3px solid rgba(255,255,255,0.8);
	outline-offset: 0.125rem; 
}
#playbackBar:hover::-webkit-slider-thumb
{
	border: 0px solid rgba(255,255,255,0.4);
	outline: 3px solid rgba(255,255,255,0.8);
	outline-offset: 0.125rem; 
}