body{
	background:#b9d7ae;
	margin-top:0;
}

.task-playback{
	background-color: #cac38d;
	position: relative;
	padding: 5px;
	border: 4px solid black;
	display: inline-block;
}

.task-playback.selected{
	background-color: #8da5ca;
}

.task-playback.playing{
	background-color:  #8ac89c ;
	border-color: green;
}

.task-playback.playing.selected{
	background-color: #8da5ca;
	border-color: green;
}

.heading{
	font-family: anton;

	border-bottom: 2px solid black;
	margin-bottom:4px;
}

.task-title{
	font-size:1em;
	font-family: anton;
	border-bottom: 1px solid black;
}

.play_progress{
	width: 70%;
	margin: auto;
	position: relative;
}

.play_button{
	position: absolute;
}

.lt-input{
	width: 30%;
}

button.play_button{
	background: none;
	border: none;
}

button.play_button.isLooping{
	color: green;
}

.pb_container{
	margin: auto;
}

.gain_range{
	width: 80%;
}

.pan_input{
	margin:0;
	width:100%;
}

.pan_range{
	margin:auto;
	width:100%;

}

.pan_range[type="range"]{
	-webkit-appearance: none;
	appearance: none;
	accent-color:#fff0;
	background: transparent;
}

.pan_range[type="range"]::-webkit-slider-runnable-track {
  background: #3d3d3d;
  height: 0.25rem;
  border-radius:10px;
}
.pan_range[type="range"]::-moz-range-track {
  background: #3d3d3d;
  height: 0.25rem;
  border-radius:10px;
}

.pan_range[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -12px; /* Centers thumb on the track */
   background-color: #fff;
   height: 1rem;
   width: .3rem;
   border-radius: 2;

}
.pan_range[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 2; /*Removes default border-radius that FF applies*/
    background-color: #fff;
    height: 1rem;
    width: .3rem;
}


audio{
	display: none;
}

h1{
	width:20%;
	display:inline-block;
	margin-bottom:0;
	margin-top:0;
}

.info{
	display:inline-block;
	font-size: 1em;
}