#videoplayer_overlay video {
	outline: none;
}

#videoplayer_overlay {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #4c4c4c;
	background-color: rgba(0, 0, 0, .7);
	z-index: 3000;
	opacity: 0;
	transition: opacity 250ms ease-in;
}

#videoplayer_overlay.show {
	opacity: 1;
}

#videoplayer_outer_container {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 95%;
	max-width: 854px;
	transform: translate(-50%, -50%);
}

#videoplayer_container {
	position: relative;
	width: 95%;
	max-width: 854px;
	margin: 0 auto;
	color: #4d4d4d;
	background: #fff;
	box-shadow: 0 0 20px #222;
	z-index: 3001;
}

#videoplayer_container:before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

#videoplayer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#box-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	opacity: .35;
	cursor: pointer;
}

#box-close:hover {
	opacity: .75;
}

.vjs-sublime-skin.vjs-has-started.vjs-user-inactive.vjs-playing #box-close {
	opacity: 0;
	transition: opacity 1s cubic-bezier(.455,.03,.515,.955);
}


/* Video.js adjustments */

.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
	width: 10em
}

.video-js .vjs-controls-disabled .vjs-big-play-button {
	display: none!important
}

.video-js .vjs-control {
	width: 3em
}

.video-js .vjs-menu-button-inline:before {
	width: 1.5em
}

.vjs-menu-button-inline .vjs-menu {
	left: 3em
}

.vjs-paused.vjs-has-started.video-js .vjs-big-play-button,.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button {
	display: block
}

.video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button {
	display: none!important
}

.video-js .vjs-mouse-display:after,.video-js .vjs-play-progress:after {
	padding: 0 .4em .3em
}

.video-js.vjs-ended .vjs-loading-spinner {
	display: none;
}

.video-js.vjs-ended .vjs-big-play-button {
	display: block !important;
}

video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
	display: block
}

.video-js .vjs-big-play-button {
	top: 50%;
	left: 50%;
}

.video-js.vjs-big-play-centered .vjs-big-play-button {
	background-color: rgba(0,0,0,0.35);
	font-size: 3em;
	border-radius: 50%;
	height: 2em !important;
	line-height: 2em !important;
	margin-top: -1em !important;
	margin-left: -1em !important;
}

.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
	background-color: rgba(0,0,0,0.35)
}

.video-js .vjs-loading-spinner {
	border-color: rgba(255,255,255,0.7)
}

.video-js .vjs-control-bar2 {
	background-color: transparent
}

.video-js .vjs-control-bar {
	background-color: rgba(0,0,0,0) !important;
	color: #ffffff;
	font-size: 18px
}

.video-js .vjs-play-progress,.video-js  .vjs-volume-level {
	background-color: #2483d5
}

.video-js .vjs-big-play-button {
	height: 2em !important;
	width: 2em !important;
	line-height: 1.9em !important;
	margin-top: -1em !important;
	margin-left: -1em;
	border-width: 3px
}

.video-js .vjs-icon-play:before, .video-js .vjs-big-play-button:before {
	font-size: 50px;
}

.video-js  .vjs-progress-holder {
	font-size: 1.7em;
	border-radius: 10px;
}

.video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-slider,.vjs-volume-level {
	border-radius: 10px;
}

.video-js .vjs-load-progress {
	background: rgba(255,255,255,0.5);
}

.video-js .vjs-big-play-button {
	height: 2em !important;
	width: 2em !important;
	line-height: 1.9em !important;
	margin-top: -1em !important;
	margin-left: -1em;
	border-width:3px
}
.video-js .vjs-icon-play:before, .video-js .vjs-big-play-button:before {
	font-size: 50px;
}
.video-js  .vjs-progress-holder {
	font-size: 1.7em;
	border-radius: 10px;
}
.video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-slider,.vjs-volume-level {
	border-radius: 10px;
}
.video-js .vjs-load-progress {
	background: rgba(255,255,255,0.5);
}

.video-js button:active {
	background: transparent !important;
	color: #fff !important;
}

/* hide error icon */
.vjs-error .vjs-error-display::before {
	content: "" !important;
}

/* fix for fluid size of the player */
#imgframe #videoplayer_view {
	display: inline-block;
}

/* public sharing view styles */
#imgframe .video-js .vjs-tech {
	position: relative;
	width: auto;
	height: auto;
}

/* fullscreen public videos see https://github.com/nextcloud/files_videoplayer/issues/77 */
#imgframe .video-js.vjs-fullscreen .vjs-tech {
	width:100%;
	height:100%;
}

#imgframe .video-js:not(.vjs-fullscreen),
#imgframe .video-js:not(.vjs-fullscreen) .vjs-tech {
	max-height: calc(100vh - 280px) !important;
	min-width: 300px;
	max-width: 100% !important;
}