video {
	max-width: 100%;
}

.video-box {
	padding:10px 10px 0 10px; 
	border: 1px solid var(--default-border-color); 
	background-color: rgba(219,68,83, 0.3); 
	border-radius: 5px;
	margin-bottom: 60px;
}

.videowrapper {
    position: relative;
	width: 100%;
	padding-bottom: calc(56.25% + 30px);
	overflow: hidden;
	border-radius: 8px;
}

.vidplayer {
	position: absolute;
	border: 1px solid rgba(120,120,120,0.1);
	width: 100%;
}

.playbutton {
	position: absolute;
	left: 32px;
	bottom: 32px;
	z-index: 10;
	background-image: url(/static/images/icons/256/play.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 128px;
	height: 128px;
	cursor: pointer;
}

.vidcontrols {
	visibility: hidden;
	opacity: 0.5;
	width: calc(100% + 2px);
	border-radius: 1px;
	position: absolute;
	bottom: -24px;
	left: -1px;
	margin-left: 0px;
	background-color: rgba(120,120,120,0.1);
	display: flex;
	border: 1px solid rgba(120,120,120,0.1);
	border-top:none;
}


.vidplayer:hover .vidcontrols, player:focus .vidcontrols {
}

.play:before {
  font-size: 22px;
}

.vidcontrols button, .timer {
  height: 28px;
  line-height: 19px;
  border-right: 1px solid rgba(0,80,120,0.01);
}

.vidcontrols button {
  position: relative;
  border: 0;
  flex: 1;
  outline: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.timer {
  line-height: 28px;
  font-size: 10px;
  font-family: monospace;
  flex: 5;
  position: relative;
  background: transparent;
  background-color: rgba(240,240,240,1);
  background-image: url("/static/images/bg/hr.png");
  background-position: 0 3px;
  background-repeat: repeat-x;
  cursor: pointer;
}

.timer .progress {
  position: absolute;
  left: 0;
  top: 0px;
  width: 0;
  bottom: 0;
  z-index: 2;
  height: 100%;
  background-color: transparent;
  overflow: hidden;
}

.timer .progress .knob {
	width: 12px;
	height: 12px;
	top: 1px;
	right: 0px;
	position: absolute;
	border: 1px solid rgba(100,110,128,1);
	background-color: rgba(240,240,240,1);
	border-radius: 6px;
}

.timer span {
  position: absolute;
  z-index: 3;
  left: 0px;
  top: 6px;
}

.vidcontrols button:hover {
	background-color: rgba(200,200,200,1);
}

.active {
}

.skiprwd {
	background-image: url('/static/images/player/replay-10.png');
}

.skipfwd {
	background-image: url('/static/images/player/forward-10.png');
}

.rwd {
	background-image: url('/static/images/player/fast-rewind.png');
}

.fwd {
	background-image: url('/static/images/player/fast-forward.png');
}

.stop {
	background-image: url('/static/images/player/stop.png');
}

.play {
	background-image: url('/static/images/player/play.png');
}