/* controls */
.controls, .controls > * {
	padding:0;
	margin:0;
}
.controls {
	overflow:hidden;
	background: dimgray;
	height:38px !important;
	position:absolute;
	bottom:0;
  width: 100% !important;
	left:0;
}
.controls[data-state=hidden] {
	display:none;
}
.controls[data-state=visible] {
	display:block;
}
.controls > * {
	float:left;
	width:32px;
	height:100%;
	margin-top: 3px !important;
	height: calc(100% - 3px);
    vertical-align: middle;
	display:block;
}
.controls > *:first-child {
	margin-left:2px;
}
.controls button {
	text-align:center;
	overflow:hidden;
	white-space:nowrap;
  	text-overflow:ellipsis;
  	border:none;
  	cursor:pointer;
  	text-indent:-99999px;
  	background:transparent;
  	background-size:32px 32px !important;
  	width: 32px !important;
  	margin-top: 3px !important;
  	background-repeat:no-repeat;
}
.controls button:hover, .controls button:focus {
	outline:0;
}
.controls button[data-state="play"] {
	background-image: url('data:image/png;base64,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');
}
.controls button[data-state="pause"] {
	background-image: url('data:image/png;base64,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');
}
.controls button[data-state="stop"] {
	background-image: url('data:image/png;base64,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');
}
.controls button[data-state="volume"] {
	background-image: url('data:image/png;base64,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');
}

/* slider */
input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  border-radius: 12px;
  height: 12px;
  margin: 5px;
  border: none;
  background: transparent;
  height: calc(100% - 3px);
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  border: inherit;
  background: white;
  border-radius: 12px;
}
input[type="range"]::-moz-range-track {
  border: inherit;
  background: white;
  border-radius: 12px;
}
input[type="range"]::-ms-track {
  border: inherit;
  background: white;
  border-radius: 12px;
  color: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: white;
  border-radius: 12px;
}
input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 12px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, silver), color-stop(100%, dimgray)); /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top , silver 0, dimgray 100%); /* older mobile safari and android > 2.2 */
  background-image: linear-gradient(to bottom, silver 0, dimgray 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 12px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, silver 0, dimgray 100%); /* W3C */
}
input[type="range"]::-ms-thumb {
  width: 20px;
  height: 12px;
  border-radius: 12px;
  border: none;
  background-image: linear-gradient(to bottom, silver 0, dimgray 100%); /* W3C */
}

/* hide native video controls in fullscreen */
video::-webkit-media-controls {
  display:none !important;
}