/* Page and plugin layout used by this skin. No legacy stylesheet is required. */
html,
body,
#player_container {
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #0b0b0b;
}
#player_container { color: #fff; text-align: center; }
.video-js.vjs-fluid:not(.vjs-audio-only-mode),
.video-js.vjs-16-9:not(.vjs-audio-only-mode),
.video-js.vjs-4-3:not(.vjs-audio-only-mode),
.video-js.vjs-9-16:not(.vjs-audio-only-mode),
.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
	height: 100%;
	max-height: 100%;
	padding-top: 0;
}
.player-error {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: border-box;
	width: 60%;
	margin: 0 auto;
	padding: 30px 20px;
	border-radius: 2px;
	background: #171717;
	text-align: center;
}
.player-error .message { color: #fff; font: 18px Verdana, sans-serif; }

/* Measured on YouTube's desktop player at 100% zoom: 56px controls row,
   40px primary buttons, 48px right-hand buttons, 24px icons, 12px side inset. */
.video-js {
	/* Keep metadata-driven resizing out of Blink's atomic inline layout. */
	display: block;
	--settings-background: rgb(0 0 0 / 60%);
	--yt-accent: #f03;
	--yt-surface: rgb(0 0 0 / 30%);
	--yt-hover: rgb(255 255 255 / 16%);
	--yt-button: 40px;
	--yt-action: 48px;
	--yt-icon: 24px;
	--yt-inset: 12px;
	--yt-gap: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	container-type: inline-size;
	overflow: hidden;
}

/* Keep navigation available while a started player reloads quality or audio. */
.video-js.vjs-quality-changing > .vjs-control-bar,
.video-js.vjs-quality-changing.vjs-user-inactive.vjs-playing > .vjs-control-bar {
	display: flex;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

.video-js .vjs-control-bar {
	align-items: center;
	flex-wrap: nowrap;
	bottom: 0;
	left: var(--yt-inset);
	right: var(--yt-inset);
	width: auto;
	height: calc(var(--yt-button) + 16px);
	background: transparent;
	z-index: 10;
	isolation: isolate;
}

.video-js .vjs-control-bar > .vjs-control {
	flex: 0 0 auto;
	height: var(--yt-button);
	/* The timeline's hit area must not cover buttons or the path into menus. */
	z-index: 3;
}

.video-js .vjs-control-bar > .vjs-button,
.video-js .vjs-control-bar > .vjs-menu-button,
.video-js .vjs-mute-control {
	width: var(--yt-action);
	color: #fff;
	background: var(--yt-surface);
	border: 0;
	text-shadow: none;
	transition: background-color .15s;
}

.video-js .vjs-control-bar > .vjs-button::before,
.video-js .vjs-control-bar > .vjs-menu-button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: calc(var(--yt-button) - 8px);
	border-radius: 40px;
	transform: translate(-50%, -50%);
	background: transparent;
	pointer-events: none;
	transition: background-color .15s;
}

.video-js .vjs-control-bar > .vjs-play-control::before {
	width: calc(100% - 8px);
}

.video-js .vjs-volume-panel::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: inherit;
	background: transparent;
	pointer-events: none;
	transition: background-color .15s;
}

.video-js .vjs-control-bar > .vjs-button:not(.vjs-disabled):hover::before,
.video-js .vjs-control-bar > .vjs-menu-button:not(.vjs-disabled):hover::before,
.video-js .vjs-volume-panel:hover::before {
	background: rgb(255 255 255 / 10%);
}

.video-js button:focus-visible,
.video-js [tabindex]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.video-js .vjs-control-bar > .vjs-play-control {
	width: var(--yt-button);
	border-radius: 50%;
	margin-right: var(--yt-gap);
}

.video-js .vjs-volume-panel {
	width: var(--yt-button);
	margin-right: 8px;
	border-radius: calc(var(--yt-button) / 2);
	background: var(--yt-surface);
	display: flex;
	align-items: center;
	transition: width .2s;
}

.video-js .vjs-mute-control {
	flex: 0 0 var(--yt-button);
	width: var(--yt-button);
	height: var(--yt-button);
	border-radius: 50%;
	background: transparent;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:focus-within,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
	width: calc(var(--yt-button) + 88px);
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
	position: relative;
	left: auto;
	top: auto;
	height: var(--yt-button);
	margin: 0;
	align-items: center;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:is(:hover, :focus-within, .vjs-hover) .vjs-volume-control.vjs-volume-horizontal {
	visibility: visible;
	opacity: 1;
	width: 80px;
	height: var(--yt-button);
}

.video-js .vjs-volume-bar.vjs-slider-horizontal {
	margin: 0 8px;
	flex: 0 0 64px;
	height: 4px;
	width: 64px;
	border-radius: 4px;
	background: rgb(255 255 255 / 30%);
}

.video-js .vjs-volume-level { background: #fff; height: 4px; }
.video-js .vjs-volume-level::before {
	content: "";
	top: 50%;
	right: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	transform: translateY(-50%);
}

.video-js .vjs-current-time,
.video-js .vjs-duration {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	background: var(--yt-surface);
	min-width: 0;
}

.video-js .vjs-current-time {
	padding: 0 0 0 16px;
	border-radius: 40px 0 0 40px;
}

.video-js .vjs-current-time::after {
	content: "/";
	position: static;
	padding: 0 4px;
	color: rgb(255 255 255 / 85%);
}

.video-js .vjs-duration {
	padding: 0 16px 0 0;
	border-radius: 0 40px 40px 0;
	margin-right: auto;
}

.video-js .vjs-time-divider,
.video-js .vjs-remaining-time { display: none; }
.video-js .vjs-live-control { margin-right: auto; }
.video-js .vjs-live-control.vjs-hidden { display: none; }

/* Right-hand controls form one continuous pill. Optional controls keep working. */
.video-js .vjs-control-bar > .vjs-quality-selector { width: var(--yt-action); }
/* The configured component order is authoritative, including the settings button. */
.video-js .vjs-control-bar > .vjs-control { order: 0; }

/* The first available right-hand control supplies the left end of the pill. */
.video-js .vjs-control-bar > .vjs-youtube-group-start {
	border-radius: 40px 0 0 40px;
	margin-left: var(--yt-gap);
}
.video-js .vjs-control-bar > .vjs-youtube-group-end { border-radius: 0 40px 40px 0; }
.video-js .vjs-control-bar > .vjs-youtube-group-start.vjs-youtube-group-end { border-radius: 40px; }

.video-js .vjs-control-bar .vjs-menu-button > .vjs-button {
	width: 100%;
	height: 100%;
}

.video-js .vjs-youtube-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.video-js .vjs-youtube-icon::before { display: none; }
.video-js .vjs-youtube-svg { display: block; width: var(--yt-icon); height: var(--yt-icon); pointer-events: none; }
.video-js .vjs-youtube-svg ~ .vjs-youtube-svg { display: none; }
.video-js.vjs-playing .vjs-play-control .vjs-youtube-svg-play,
.video-js.vjs-ended .vjs-play-control .vjs-youtube-svg-play { display: none; }
.video-js.vjs-playing:not(.vjs-ended) .vjs-play-control .vjs-youtube-svg-pause,
.video-js.vjs-ended .vjs-play-control .vjs-youtube-svg-replay { display: block; }
.video-js .vjs-vol-0 .vjs-youtube-svg-volume,
.video-js .vjs-vol-1 .vjs-youtube-svg-volume,
.video-js .vjs-vol-2 .vjs-youtube-svg-volume { display: none; }
.video-js .vjs-vol-0 .vjs-youtube-svg-muted,
.video-js .vjs-vol-1 .vjs-youtube-svg-volume-low,
.video-js .vjs-vol-2 .vjs-youtube-svg-volume-low { display: block; }
.video-js.vjs-fullscreen .vjs-youtube-svg-fullscreen,
.video-js.vjs-picture-in-picture .vjs-youtube-svg-pip { display: none; }
.video-js.vjs-fullscreen .vjs-youtube-svg-fullscreen-exit,
.video-js.vjs-picture-in-picture .vjs-youtube-svg-pip-exit { display: block; }

/* Custom timeline: a large hit area around a thin red track. */
.video-js .vjs-progress-control { display: none; }
.video-js .vjs-custom-timeline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--yt-button) + 5px);
	width: auto;
	height: 28px;
	padding: 11px 0;
	order: -1;
	z-index: 2;
	touch-action: none;
	cursor: pointer;
	user-select: none;
}

.video-js .vjs-custom-seek-bar { position: relative; width: 100%; height: 6px; }
.video-js .vjs-custom-background { width: 100%; height: 6px; margin: 0; background: rgb(40 40 40 / 60%); border-radius: 3px; }
.video-js .vjs-custom-load-progress,
.video-js .vjs-custom-play-progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
}
.video-js .vjs-custom-load-progress { background: rgb(255 255 255 / 40%); border-radius: 3px; }
.video-js .vjs-custom-play-progress { background: linear-gradient(90deg, #f03 80%, #ff2791); border-radius: 3px; }
.video-js .vjs-custom-background,
.video-js .vjs-custom-load-progress,
.video-js .vjs-custom-play-progress { transform: scaleY(.667); transition: transform .1s; }
.video-js .vjs-custom-timeline:hover .vjs-custom-background,
.video-js .vjs-custom-timeline:hover .vjs-custom-load-progress,
.video-js .vjs-custom-timeline:hover .vjs-custom-play-progress { transform: scaleY(1); }
.video-js .vjs-custom-slider-handle,
.video-js .vjs-custom-timeline:hover .vjs-custom-slider-handle {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	background: var(--yt-accent);
	box-shadow: none;
	border-radius: 50%;
	transition: transform .15s ease;
}
.video-js .vjs-custom-timeline:hover .vjs-custom-slider-handle { transform: scale(1.25); }
.video-js .vjs-custom-timeline:hover .vjs-custom-background { height: 6px; }
.video-js .vjs-custom-time-tooltip {
	position: absolute;
	display: none;
	transform: translateX(-50%);
	z-index: 9;
	white-space: nowrap;
	top: auto;
	bottom: 20px;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: max-content;
	padding: 0;
	border-radius: 0;
	background: transparent;
	pointer-events: none;
}
.video-js .vjs-custom-time-tooltip::before { display: none; }
.video-js .vjs-custom-thumbnail {
	display: none;
	flex: none;
	box-sizing: content-box;
	border: 1px solid #fff;
	border-radius: 8px;
	background-color: #111;
}
.video-js .vjs-custom-time-label {
	flex: none;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--yt-surface);
	color: #fff;
	font: 600 14px/18px Arial, Helvetica, sans-serif;
	text-shadow: none;
}

.video-js .vjs-big-play-button,
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-pause-button {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	cursor: pointer;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border: 0;
	border-radius: 50%;
	background: var(--yt-surface);
}
.video-js.vjs-paused:not(.vjs-controls-disabled):not(.vjs-using-native-controls):not(.vjs-error):not(.vjs-quality-changing) > .vjs-big-play-button { display: block; }
.video-js.vjs-quality-changing > .vjs-big-play-button { display: none; }
.video-js .vjs-big-pause-button { display: none; }
.video-js.vjs-playing.vjs-user-active > .vjs-big-pause-button { display: block; }
.video-js .vjs-big-play-button:hover { background: var(--yt-accent); }
.video-js .vjs-big-play-button .vjs-youtube-svg,
.video-js .vjs-big-pause-button .vjs-youtube-svg { width: 44px; height: 44px; }

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
	background: var(--settings-background);
	border-radius: 12px;
	padding: 8px 0;
	box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
	font-size: 14px;
}
.video-js .vjs-menu li.vjs-menu-item:hover { background: var(--yt-hover); }
.video-js .vjs-menu li.vjs-selected { color: #fff; background: rgb(255 255 255 / 20%); }
.video-js .vjs-menu-button-popup .vjs-menu {
	bottom: 100%;
	left: 50%;
	right: auto;
	transform: translateX(calc(-50% + var(--yt-menu-shift, 0px)));
	width: 190px;
	max-width: calc(100cqw - 2 * var(--yt-inset));
	height: auto;
	margin: 0;
	/* Keep a hoverable bridge from the button to the list above the timeline. */
	padding: 0 0 14px;
}
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
	position: relative;
	bottom: auto;
	left: auto;
	right: auto;
	/* Override the legacy fixed widths of the server and audio menus. */
	width: 100% !important;
	margin: 0;
	max-height: min(240px, 50cqh);
}
.video-js .vjs-menu li { padding: 10px 16px; text-align: left; text-transform: none; }
.video-js .vjs-quality-selector .vjs-icon-placeholder::before { display: none; }
.video-js .vjs-quality-selector .vjs-menu-button { font: 600 13px Arial, Helvetica, sans-serif; }
.video-js .vjs-subtitles-active .vjs-menu-button::after { content: ""; position: absolute; left: 50%; bottom: 4px; margin: 0 0 0 -12px; width: 24px; height: 3px; border-radius: 3px; background: var(--yt-accent); }
.video-js .vjs-share-button { position: absolute; top: 10px; right: 10px; z-index: 100; cursor: pointer; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--yt-surface); transition: visibility .1s, opacity .2s; }
.video-js .vjs-share-button:hover,
.video-js .vjs-share-copy-btn { background: var(--yt-accent); }
.video-js .vjs-share-email { color: #ff4d70; }

.video-js .vjs-share-overlay {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 1000;
	overflow: auto;
	background: rgb(0 0 0 / 70%);
}
.video-js .vjs-share-overlay.active { display: flex; align-items: center; justify-content: center; }
.video-js .vjs-share-overlay-content { flex: 0 0 auto; box-sizing: border-box; width: 90%; max-height: 100%; overflow: auto; padding: 40px 20px 20px; text-align: left; font-size: 14px; }
.video-js .vjs-share-title { display: block; margin: 5px 0 10px 70px; font-size: 17px; }
.video-js .vjs-share-input-container { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.video-js .vjs-share-label { flex: 0 0 60px; text-align: right; }
.video-js .vjs-share-input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #111; }
.video-js .vjs-share-copy-btn { flex: 0 0 110px; padding: 8px 10px; border-radius: 4px; cursor: pointer; text-align: center; }
.video-js .vjs-share-copy-btn:hover { background: #d9002b; }
.video-js .vjs-share-close-btn { position: absolute; top: 10px; right: 10px; padding: 0 5px; font-size: 36px; line-height: 1; cursor: pointer; }
.video-js .vjs-share-description { margin-left: 70px; }
.video-js.vjs-share-overlay-open > .vjs-share-button,
.video-js.vjs-share-overlay-open > .vjs-control-bar,
.video-js.vjs-share-overlay-open > .vjs-big-play-button,
.video-js.vjs-share-overlay-open > .vjs-big-pause-button { display: none; }
.video-js.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-share-button { opacity: 0; }

.video-js .vjs-seeking-display { position: absolute; top: calc(50% - .8em); z-index: 0; visibility: hidden; opacity: 0; text-align: center; font-size: 5em; pointer-events: none; transition: opacity .2s, visibility .2s; }
.video-js .vjs-seeking-display-left { left: 18%; }
.video-js .vjs-seeking-display-right { right: 18%; }
.video-js .vjs-seeking-display::before { content: "\f101\f101"; display: block; margin: 0 -.5em; font-family: VideoJS; letter-spacing: -.5em; }
.video-js .vjs-seeking-display-left::before { transform: rotate(180deg); }
.video-js.vjs-seeking-left .vjs-seeking-display-left,
.video-js.vjs-seeking-right .vjs-seeking-display-right { visibility: visible; opacity: 1; }
.video-js .vjs-seeking-time { font-size: .5em; }
.video-js .vjs-volume-display { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); min-width: 4.2em; padding: 16px; border-radius: 6px; background: var(--yt-surface); text-align: center; font-size: 1.7em; pointer-events: none; }

.video-js .vjs-server-switcher-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; box-sizing: border-box; width: 340px; max-width: 90%; max-height: 90%; overflow: auto; padding: 20px; border-radius: 5px; background: #fbfbfb; color: #161616; }
.video-js .vjs-server-switcher-error-text { margin-bottom: 10px; font-size: 16px; }
.video-js .vjs-server-switcher-msg ul { max-width: 120px; margin: 0 auto; padding: 0; list-style: none; font-size: 14px; }
.video-js .vjs-server-switcher-msg li { padding: 5px 10px; margin: 3px 0; cursor: pointer; background: #eee; }
.video-js .vjs-server-switcher-msg li:hover { background: #ddd; }
.video-js .vjs-server-switcher-msg li.vjs-selected { color: #fff; background: var(--yt-accent); }

@container (max-width: 480px) {
	.video-js .vjs-seeking-display { font-size: 3em; }
	.video-js .vjs-share-overlay-content { width: 100%; padding: 48px 16px 16px; }
	.video-js .vjs-share-title,
	.video-js .vjs-share-description { margin-left: 0; }
	.video-js .vjs-share-input-container { flex-wrap: wrap; align-items: center; }
	.video-js .vjs-share-label { flex-basis: 100%; text-align: left; }
	.video-js .vjs-control-bar { --yt-button: 36px; --yt-action: 36px; --yt-icon: 24px; --yt-inset: 10px; --yt-gap: 6px; }
	.video-js .vjs-current-time, .video-js .vjs-duration { font-size: 13px; }
	.video-js .vjs-current-time { padding-left: 10px; }
	.video-js .vjs-duration { padding-right: 10px; }
	.video-js .vjs-current-time::after { padding: 0 4px; }
	.video-js .vjs-subtitles-active .vjs-menu-button::after { bottom: 4px; width: 18px; margin-left: -9px; }
	.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
	.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:focus-within,
	.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover { width: var(--yt-button); }
	.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { position: absolute; bottom: calc(var(--yt-button) + 8px); left: 0; height: var(--yt-button); background: var(--yt-surface); border-radius: 20px; }
	.video-js .vjs-control-bar:has(> .vjs-settings-menu-button:not(.vjs-hidden)) > .vjs-picture-in-picture-control { display: none; }
}

@container (max-width: 767px) {
	.video-js.vjs-touch-enabled .vjs-share-button { display: none; }
}
@container (max-width: 768px) {
	.video-js:is(.vjs-device-android, .vjs-device-iphone, .vjs-device-ipad) .vjs-volume-panel { display: none; }
}

/* The same settings remain available through the gear on narrow players. */
@container (max-width: 640px) {
	.video-js .vjs-control-bar:has(> .vjs-settings-menu-button:not(.vjs-hidden)) > :is(.vjs-server-swticher-button, .vjs-quality-selector, .vjs-subs-caps-button, .vjs-audiotrack-selector, .vjs-audio-button) { display: none; }
}

@container (max-width: 380px) {
	.video-js .vjs-control-bar { --yt-button: 32px; --yt-action: 32px; --yt-icon: 22px; --yt-gap: 4px; }
	.video-js .vjs-current-time, .video-js .vjs-duration { font-size: 12px; }
	.video-js .vjs-current-time { padding-left: 8px; }
	.video-js .vjs-duration { padding-right: 8px; }
	.video-js .vjs-control-bar > .vjs-quality-selector { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.video-js *, .video-js *::before, .video-js *::after { transition: none !important; }
}