/* BPI News 6.0.3: minimal, unbranded controls for WordPress and liveblog video. */
.article-content .bpi-editorial-media--video,
.article-content figure.wp-block-video,
.article-content .bpi-built-in-liveblog .pcliveblog-content .bpi-live-media--video,
.article-content .bpi-built-in-liveblog .pcliveblog-content .bpi-live-media--video.bpi-editorial-media {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.article-content .bpi-editorial-media--video .bpi-video-rail,
.article-content figure.wp-block-video .bpi-video-rail,
.article-content .bpi-live-media--video .bpi-video-rail {
	display: none;
}

.article-content .bpi-editorial-video-stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-bottom: 3px solid var(--bpi-yellow);
	background: #050b14;
}

.article-content .bpi-editorial-video-stage video {
	display: block;
	cursor: pointer;
}

.article-content .bpi-editorial-video-stage video::-webkit-media-controls,
.article-content .bpi-editorial-video-stage .mejs-controls,
.article-content .bpi-editorial-video-stage .mejs-overlay-play,
.article-content .bpi-editorial-video-stage .mejs-overlay-button {
	display: none !important;
}

.article-content .bpi-editorial-video-stage .mejs-overlay,
.article-content .bpi-editorial-video-stage .mejs-layers {
	pointer-events: none;
}

.article-content .bpi-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 6;
	display: grid;
	width: 58px;
	height: 58px;
	padding: 0;
	place-items: center;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(2, 18, 40, 0.74);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(5px);
	transition: background 150ms ease, transform 150ms ease, opacity 150ms ease;
}

.article-content .bpi-video-play span {
	width: 0;
	height: 0;
	margin-left: 4px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #fff;
}

.article-content .bpi-video-play:hover,
.article-content .bpi-video-play:focus-visible {
	background: rgba(2, 36, 81, 0.94);
	transform: translate(-50%, -50%) scale(1.04);
}

.article-content .bpi-editorial-video-stage.is-playing .bpi-video-play {
	opacity: 0;
	pointer-events: none;
}

.article-content .bpi-video-controls {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 7;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 13px 14px 9px;
	background: linear-gradient(180deg, transparent 0%, rgba(3, 10, 20, 0.78) 48%, rgba(3, 10, 20, 0.94) 100%);
	color: #fff;
	font-family: var(--bpi-font-sans, Arial, Helvetica, sans-serif);
	transition: opacity 150ms ease;
}

.article-content .bpi-editorial-video-stage.is-playing .bpi-video-controls {
	opacity: 0.82;
}

.article-content .bpi-editorial-video-stage:hover .bpi-video-controls,
.article-content .bpi-editorial-video-stage:focus-within .bpi-video-controls {
	opacity: 1;
}

.article-content .bpi-video-control {
	display: grid;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 5px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.article-content .bpi-video-control:hover,
.article-content .bpi-video-control:focus-visible {
	background: rgba(255, 255, 255, 0.14);
}

.article-content .bpi-video-control svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.article-content .bpi-video-progress {
	flex: 1 1 auto;
	width: auto;
	min-width: 60px;
	height: 18px;
	margin: 0;
	padding: 0;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.article-content .bpi-video-progress::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--bpi-yellow) 0 var(--bpi-video-progress, 0%), rgba(255, 255, 255, 0.34) var(--bpi-video-progress, 0%) 100%);
}

.article-content .bpi-video-progress::-webkit-slider-thumb {
	width: 11px;
	height: 11px;
	margin-top: -4px;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.article-content .bpi-video-progress::-moz-range-track {
	height: 3px;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.34);
}

.article-content .bpi-video-progress::-moz-range-progress {
	height: 3px;
	border-radius: 3px;
	background: var(--bpi-yellow);
}

.article-content .bpi-video-progress::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}

.article-content .bpi-video-time {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.67rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.025em;
	white-space: nowrap;
}

.article-content .bpi-editorial-media--video figcaption,
.article-content figure.wp-block-video figcaption,
.article-content .bpi-live-media--video figcaption {
	padding: 11px 2px 0;
	border: 0;
	background: transparent;
}

@media (max-width: 600px) {
	.article-content .bpi-video-controls {
		gap: 6px;
		min-height: 42px;
		padding: 10px 8px 7px;
	}

	.article-content .bpi-video-control {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
	}

	.article-content .bpi-video-time {
		font-size: 0.62rem;
	}

	.article-content .bpi-video-play {
		width: 52px;
		height: 52px;
	}

}

@media (max-width: 380px) {
	.article-content .bpi-video-time span[aria-hidden="true"],
	.article-content .bpi-video-total {
		display: none;
	}
}