div[data-video] {
	position: relative;
}

div[data-video] video {
	background: black;
	display: block;
	width: 100%;
}

.videoPlayer_controls {
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 3px 10px;
    position: absolute;
    bottom: 0px;
    z-index: 5;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transition: opacity .5s;
    opacity: 1;
}

.videoPlayerControl_buttons {
	flex: 0 0 auto;
}

/*///////////// Button CSS ////////////////*/
.videoPlayerControl_buttons button {
	vertical-align: middle;
	width: 16px;
	height: 16px;
	border: none;
	cursor: pointer;
	margin: 0 3px;
	outline: none;
	background-color: transparent;
	background-repeat: no-repeat;
}
.videoPlayerControl_buttons button:first-child {
	margin-left: 0;
}

.videoPlayerControl_stop {
	background-image: url(../img/videoPlayer_controls/stop_circle.svg);
}

.videoPlayerControl_play {
	background-image: url(../img/videoPlayer_controls/play_circle.svg);
}
.videoPlayerControl_pause {
	background-image: url(../img/videoPlayer_controls/pause_circle.svg) !important;
}

.mute {
	background-image: url(../img/videoPlayer_controls/volume-mute2.svg);
}
.unmute {
	background-image: url(../img/videoPlayer_controls/volume-high.svg);
}

.videoPlayerControl_replay {
	background-image: url(../img/videoPlayer_controls/replay.svg);
}

/*************************/
/*     progress bar     */
/************************/
.videoPlayerControl_progress {
    height: 15px;
    border: none;
    margin-right: 10px;
    background: #969696;
    flex: 1 1 auto;
}

.videoPlayerControl_progress::-moz-progress-bar {
	color: #FFF;
	background: #FFF; /* FireFox progress bar color */
}

.videoPlayerControl_progress[value]::-webkit-progress-bar {
	background-color: #969696;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

.videoPlayerControl_progress[value]::-webkit-progress-value {
	background-color: rgb(255,255,255); /* chrome progress bar color */
}


/*************************/
/*    volume slider      */
/*************************/
.videoPlayerControl_volume {
	width: 70px;
	vertical-align: middle;
	padding: 0px;
	margin: 6.8px 0 6.8px 5px;
	background-color: rgba(0, 0, 0, 0);
	-webkit-appearance: none;
	outline: none;
}

.videoPlayerControl_volume::-webkit-slider-runnable-track {
	width: 100%;
	height: 4.4px;
	cursor: pointer;
	box-shadow: 0.9px 0.9px 1.7px #000, 0px 0px 0.9px #999;
	background-color: #000;
	border-radius: 1px;
	border: 1.1px solid #FFF;
}

.videoPlayerControl_volume::-webkit-slider-thumb {
	box-shadow: 2.6px 2.6px 3.7px #000, 0px 0px 2.6px #999;
	border: 1px solid #FFF;
	height: 16px;
	width: 5px;
	border-radius: 3px;
	background-color: #969696;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -7.9px;
}

.videoPlayerControl_volume:focus::-webkit-slider-runnable-track {
	background: #FFF;
	background: none;
}

.videoPlayerControl_volume::-moz-range-track {
	width: 100%;
	height: 4.4px;
	cursor: pointer;
	box-shadow: 0.9px 0.9px 1.7px #000, 0px 0px 0.9px #999;
	background-color: #969696;
	border-radius: 1px;
	border: 1.1px solid #FFF;
}

.videoPlayerControl_volume::-moz-range-thumb {
	box-shadow: 2.6px 2.6px 3.7px #000, 0px 0px 2.6px #999;
	border: 1px solid #FFF;
	height: 16px;
	width: 5px;
	border-radius: 3px;
	background: #969696;
	cursor: pointer;
}

.videoPlayerControl_volume::-ms-track {
	width: 100%;
	height: 4.4px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

.videoPlayerControl_volume::-ms-fill-lower {
	background: #969696;
	border: 1.1px solid #FFF;
	border-radius: 2px;
	box-shadow: 0.9px 0.9px 1.7px #000, 0px 0px 0.9px #999;
}

.videoPlayerControl_volume::-ms-fill-upper {
	background: #205928;
	border: 1.1px solid #18D501;
	border-radius: 2px;
	box-shadow: 0.9px 0.9px 1.7px #000, 0px 0px 0.9px #999;
}

.videoPlayerControl_volume::-ms-thumb {
	box-shadow: 2.6px 2.6px 3.7px #000, 0px 0px 2.6px #999;
	border: 1px solid #83E584;
	height: 16px;
	width: 5px;
	border-radius: 3px;
	background: #969696;
	cursor: pointer;
}

.videoPlayerControl_volume:focus::-ms-fill-lower {
	background: none;
}

.videoPlayerControl_volume:focus::-ms-fill-upper {
	background: none;
}

video::-internal-media-controls-download-button {
	display: none;
}

video::-webkit-media-controls-enclosure {
	overflow: hidden;
}

video::-webkit-media-controls-panel {
	width: calc(100% + 30px); /* Adjust as needed */
}