@charset "UTF-8";
/* CSS Document */

.container {box-sizing: border-box;width:100%;border:5px solid lavender;margin:0;padding:0;}
#speaker {flex:2;padding:2px 10px;background: lavender;}
#clip{flex:2.3;padding:4px 10px;overflow:hidden;}

#speaker input, #clip input {background:lightblue;margin:6px;padding:0;}

@media(min-width:600px){
	#speaker{padding:4px}
	.container {display:flex;}
}

.myRadio {display:table-row; }
.myRadio label {display:table-cell;padding:0 4px; }
#clip .myRadio label {padding:3px 4px; }

h3 {margin-top:0;}

.progress {
	height: 91%;height: calc(100% - 8px);
    background: #ececf4;
    width: 0;
	transition: width 0.6s ease-out;
	padding: 0;
	position: absolute;
	z-index: -1;
	top: 5px;
    border-radius: 12px;
}

.progWrap {position:relative;}


.slidecontainer {
	width: 100%;
	display: flex;
}
#democontainer {
	margin-top: 4px;
	padding: 0 8px;
	white-space: nowrap;
}
#demo {
	width: 2.5em;
	display: inline-block;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
	border-radius: 20px;
  background: lavender;
	outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: #316CB0;
  cursor: pointer;
	border-radius: 30px;
}

.slider::-moz-range-thumb {
  width: 50px;
  height: 20px;
  background: #316CB0;
  cursor: pointer;
}


/* video event */
table { border: none; margin: auto; margin-top: 1ex;font-size: 60%;}
th {  text-align: right; }
caption { background-color: #ffffe0; color: black;}
thead th {  background-color: #ffffe0; color: black;}
#events td { text-align: right; width: 4ex;}
#properties td { }
hr { clear: both; margin-top: 2em;}
.true { background-color: #360; color: #ffffe0; }
.false { background-color: #603; color: #ffffe0; }
#buttons { text-align: center; }

#m_video td, #m_video th, #tracks td, #tracks tth { text-align: center; padding-left: 0.5ex; padding-right: 0.5ex;}