.video-js
{
	width: 100% !important;
	height: 100% !important;
	max-height: 360px;
}

#HTML5Wrapper
{
	width: 480px;
	height: 360px;
}

.video-js .vjs-download-button-control
{
	width: 14px !important;
	height: 100% !important;
	margin: 0 1em !important;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTQgMTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0IDEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I2ZmZmZmZjt9PC9zdHlsZT48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEyLDkgMTIsMTEgMiwxMSAyLDkgMCw5IDAsMTMgMTQsMTMgMTQsOSAiLz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEwLDMuNiA4LDUuNiA4LDAgNiwwIDYsNS42IDQsMy42IDIuNiw1IDcsOS40IDExLjQsNSAiLz48L3N2Zz4=) 0 50% no-repeat;
}

.vjs-download-button-control.loading .vjs-icon-placeholder
{
	display: flex;
	align-items: center;
	justify-content: center;
}

	.vjs-download-button-control.loading .vjs-icon-placeholder:before
	{
		content: '';
		width: 14px;
		height: 14px;
		border: 2px solid #ccc;
		border-top: 2px solid #fff;
		border-radius: 50%;
		animation: spin 0.7s linear infinite;
		margin-top: 8px;
	}

@keyframes spin
{
	0%
	{
		transform: rotate(0deg);
	}

	100%
	{
		transform: rotate(360deg);
	}
}

.vjs-hd-toggle-button
{
	font-size: 12px;
	padding: 0 10px;
	top:5px;
}

	.vjs-hd-toggle-button .vjs-icon-placeholder:before
	{
		content: 'HD';
		font-weight: bold;
		font-size: 13px;
		color: #bbb !important;
	}

	.vjs-hd-toggle-button[data-active="true"] .vjs-icon-placeholder:before,
	.video-js .vjs-hd-toggle-button[data-active="true"] .vjs-icon-placeholder:before
	{
		color: #0cf !important;
	}

	.vjs-hd-toggle-button.vjs-disabled
	{
		opacity: 0.4;
		cursor: not-allowed;
	}

.video-js .vjs-current-time,
.video-js .vjs-duration,
.vjs-live .vjs-time-control,
.vjs-live .vjs-time-divider
{
	display: block !important;
}

.transcript-container-standalone
{
	overflow-y: auto;
	border: 1px solid #ccc;
	width: 480px;
	box-sizing: border-box;
	border-width: 2px;
	line-height: 1.2;
	background: white;
	text-align: left;
	overflow-x: hidden;
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #333;
	padding: 10px;
	height: 360px;
	margin-left: 10px;
}

.transcript-container
{
	margin-top: 10px;
	max-height: 160px;
	overflow-y: auto;
	border: 1px solid #ccc;
	padding: 5px;
	border-width: 2px;
	background: white;
	overflow-x: hidden;
	font-size: 11px;
	color: #333;
}

.transcript-line
{
	display: inline;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

	.transcript-line.highlight
	{
		background-color: #ffd200;
		border-radius: 2px;
	}

.track-transcripts-label
{
	color: #999999;
	margin-top: 6px;
	font-size: 12px;
	float: left;
	font-family: Tahoma, "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
	margin-left: 1px;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 4px;
}

.track-transcripts-label-standalone
{
	color: #999999;
	margin-top: 0px;
	font-size: 12px;
	font-family: Tahoma, "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
	margin-left: 12px;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 4px;
}

#trackTranscriptsLabelPopup
{
	margin-left: 3px;
}

.match-highlight
{
	color: #fe6600;
	text-decoration: underline;
	border-radius: 0;
	background-color: transparent;
}

.video-js .vjs-progress-control
{
	position: relative;
	height: 24px;
	overflow: visible;
	top: 2px;
}

	.video-js .vjs-progress-control .vjs-progress-holder,
	.video-js .vjs-progress-control:hover .vjs-progress-holder,
	.video-js .vjs-progress-control:focus .vjs-progress-holder
	{
		height: 4px !important;
		transform: none !important;
		transition: none !important;
	}

.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-play-progress
{
	height: 100% !important;
	transition: none !important;
}

.video-js .vjs-progress-control .vjs-play-progress:before,
.video-js .vjs-progress-control:hover .vjs-play-progress:before,
.video-js .vjs-progress-control:focus .vjs-play-progress:before,
.video-js.vjs-has-started .vjs-progress-control:hover .vjs-progress-holder .vjs-play-progress:before,
.video-js.vjs-has-started .vjs-progress-control:focus .vjs-progress-holder .vjs-play-progress:before
{
	content: "";
	position: absolute;
	right: -4px !important;
	left: auto !important;
	margin: 0 !important;
	width: 8px !important;
	height: 8px !important;
	top: -2px !important;
	border: 0 !important;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,.6);
	transform: none !important;
	transition: none !important;
	box-sizing: content-box !important;
}

.video-js .vjs-slider,
.video-js .vjs-slider:hover,
.video-js .vjs-slider:focus
{
	transition: none !important;
}

	.video-js .vjs-slider .vjs-handle,
	.video-js .vjs-slider:hover .vjs-handle,
	.video-js .vjs-slider:focus .vjs-handle
	{
		transform: none !important;
		transition: none !important;
	}

.video-js .vjs-slider-vertical
{
	background-color: rgba(0,0,0,.3) !important;
	border-radius: 4px;
}

	.video-js .vjs-slider-vertical .vjs-volume-level
	{
		background-color: rgba(255,193,7,.8) !important;
	}

.in-out-markers{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;     
  right: 0;
  width: 100%;
  pointer-events: none;
}



.marker, .hover-marker
{
	position: absolute;
	width: 0;
	height: 0;
	bottom: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	transform: none !important;
	transition: none !important;
	touch-action: none;
}

.marker
{
	border-bottom: 8px solid #ffc107;
	pointer-events: auto;
	cursor: pointer;
}

	.marker.selected
	{
		border-bottom-color: #ff6a00;
	}

.hover-marker
{
	border-bottom: 8px solid rgba(255,193,7,.4);
	pointer-events: none;
}

.selection-highlight
{
	position: absolute;
	top: 0;
	bottom: 0;
	background: #ffd000;	
	pointer-events: none;	
	transition: none;
}

.marker-editor
{
	position: absolute;
	top: 14px;
	transform: translateX(-50%);
	pointer-events: auto;
	z-index: 10;
	width: 50px;
}

	.marker-editor input
	{
		width: 100%;
		padding: 2px 6px;
		font-size: 12px;
		line-height: 1.2;
	}

		.marker-editor input:focus
		{
			outline: none !important;
			box-shadow: 0 0 0 2px #555 !important;
			border-color: #555 !important;
		}

.marker .del
{
	position: absolute;
	right: -8px;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(0,0,0,.75);
}

	.marker .del::before,
	.marker .del::after
	{
		content: "";
		position: absolute;
		left: 6px;
		top: 5px;
		width: 8px;
		height: 2px;
		background: #fff;
		border-radius: 1px;
	}

	.marker .del::before
	{
		transform: rotate(45deg);
	}

	.marker .del::after
	{
		transform: rotate(-45deg);
	}

	.marker .del:hover
	{
		background: rgba(0,0,0,.95);
	}

.save-range-btn
{
	position: absolute;
	left: 0;
	transform: translateX(-50%) !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
	line-height: 1.1 !important;
	background: #15acbb !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
	cursor: pointer;
	display: none;
	z-index: 4;
	pointer-events: auto;
	filter: none !important;
	outline: none !important;
}

	.save-range-btn:hover,
	.save-range-btn:focus,
	.save-range-btn:active
	{
		transform: translateX(-50%) !important;
		padding: 6px 12px !important;
		font-size: 12px !important;
		line-height: 1.1 !important;
		background: #15acbb !important;
		color: #fff !important;
		border: none !important;
		box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
		transition: none !important;
		filter: none !important;
		outline: none !important;
	}

		.save-range-btn::after,
		.save-range-btn:hover::after,
		.save-range-btn:focus::after,
		.save-range-btn:active::after
		{
			content: "";
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -6px;
			width: 0;
			height: 0;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 6px solid #15acbb;
		}

.in-out-markers .save-range-btn
{
	display: none !important;
	opacity: 0;
}

.in-out-markers.has-in .save-range-btn
{
	display: inline-block !important;
	opacity: 1;
}

.in-out-markers .save-range-btn
{
	position: absolute;
	top: 100%;
	margin-top: 8px;
	transform: translateX(-50%);
	z-index: 10;
}

	.in-out-markers .save-range-btn::after
	{
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #15acbb;
	}

.vjs-fullscreen .in-out-markers .save-range-btn
{
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 28px;
	z-index: 9999;
}

	.vjs-fullscreen .in-out-markers .save-range-btn::after
	{
		top: auto;
		bottom: -6px;
		border-bottom: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid #15acbb;
	}

.in-out-markers .marker-editor
{
	position: absolute;
	top: 14px;
	transform: translateX(-50%);
	pointer-events: auto;
	z-index: 9999;
}

	.in-out-markers .marker-editor::after
	{
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #555;
	}

.vjs-fullscreen .in-out-markers .marker-editor
{
	top: auto;
	bottom: 28px;
}

	.vjs-fullscreen .in-out-markers .marker-editor::after
	{
		top: auto;
		bottom: -6px;
		border-bottom: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid #555;
	}

.inout-spinner
{
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,.6);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
	vertical-align: middle;
}

.inout-status-chip
{
	position: absolute;
	left: 0;
	transform: translateX(-50%);
	background: #444;
	color: #fff;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 12px;
	white-space: nowrap;
	pointer-events: none;
}

.video-js:not(.vjs-fullscreen) .in-out-markers .inout-status-chip
{
	top: auto;
	bottom: 14px;
}

.vjs-fullscreen .in-out-markers .inout-status-chip
{
	top: auto;
	bottom: 28px;
}

.save-range-btn .save-spinner
{
	margin-left: 4px;
	vertical-align: middle;
}


.marker
{
	z-index: 2;
}

	.marker .del
	{
		position: absolute;
		width: 10px;
		height: 10px;
		background: transparent;
		border: 0;
		left: 7px;
		bottom: -6px;
		transform: none;
		z-index: 3;
		cursor: pointer;
	}

		.marker .del::before,
		.marker .del::after
		{
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			width: 7px;
			height: 1px;
			background: #fff;
			border-radius: 1px;
			transform: translate(-50%, -50%) rotate(45deg);
		}

		.marker .del::after
		{
			transform: translate(-50%, -50%) rotate(-45deg);
		}