.videoslider {
	position:relative;
	width:100%;
	aspect-ratio:16/10;
	height:auto;
	margin-block:20px;
}

.videoslider-cnt {
	background:#444;
	color:#FFF;
	border-radius:12px;
	padding:10px;
}

.video-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.1;
    font-family:var(--f-sans);
    margin-right:30px;
    display:flex; gap:8px; align-items:center;
    width:calc(100% - 30px);
}

.video-title::before { content:''; width:18px; height:18px; background:url('https://www.motoryracing.com/images/play.svg'); background-size:contain; filter:invert(1); flex:0 0 18px; }

.videoslider-cnt.floating .video-title {
	font-size: 14px;
	margin-bottom: 10px;
}

.videoslider-cnt.floating {
	position: fixed;
	top: 70px;
	right: 20px;
	width: 400px;
	aspect-ratio:16/10;
	z-index: 9999;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.videoslider-cnt.floating .video-wrapper { width:380px; aspect-ratio:16/9; }

.videoslider-cnt video {
	width: 100%;
	height: 100%;
}

.video-js { border-radius:6px; overflow:hidden;}

.videoslider-cnt.floating .video-title { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size: 15px; }
.videoslider-cnt.floating .video-title::before { flex:0 0 14px; width:14px; height:14px; }

.floating-countdown {
	position: absolute;
	top: 2px;
	right: 5px;
	background-color: rgba(0,0,0,0.6);
	color: white;
	padding:0 8px;
	border-radius:6px;
	font-size: 11px;
	display: none;
	z-index: 10;
    font-family:var(--f-sans);
}

.floating-close {
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: rgba(0,0,0,0.65);
	color: white;
	border: none;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
	display: none;
    font-weight:bold;
	z-index: 10;
}

.floating-close:hover {
	background-color: rgba(0,0,0,0.9);
}

.unmute-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: 2px solid white;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	font-size: 24px;
	cursor: pointer;
	display: none;
	z-index: 5;
	transition: background-color 0.3s ease;
	display:flex;
	align-items:center;
	justify-content:center;
}

.unmute-button:hover {
	background-color: rgba(0, 0, 0, 0.9);
}

.unmute-button svg {
	width: 30px;
	height: 30px;
	fill: white;
}

.videoslider.floating .unmute-button {
	width: 50px;
	height: 50px;
	font-size: 20px;
}

.videoslider.floating .unmute-button svg {
	width: 25px;
	height: 25px;
}

.video-js .vjs-control-bar { background:rgba(0,0,0,.7) !important; }
.video-js .vjs-slider { background:rgba(0,0,0,.95) !important; }
.video-js .vjs-load-progress div { background:rgba(120,10,0,.8) !important; }
.vjs-mouse-display .vjs-time-tooltip { background:#8c1a10 !important; }

@media (max-width: 1400px) {
    
.videoslider-cnt.floating { width:360px; }
.videoslider-cnt.floating .video-wrapper { width:340px; }
}

@media (max-width:900px) {
.videoslider-cnt.floating { border-radius:var(--radius); top:72px; right:8px; left:8px; height:116px; width:calc(100% - 16px); overflow:hidden; padding:8px; }
.videoslider-cnt.floating .video-wrapper { width:177px; }
.videoslider-cnt.floating .video-title { position:absolute; white-space:normal; left:197px; right:30px; width:calc(100% - 227px); top:0; bottom:0; overflow:hidden; text-align:center; font-size:14px; }
.videoslider-cnt.floating .video-title::before { display:none; }
.unmute-button { width:50px; height:50px; }
.videoslider-cnt.floating .unmute-button { left:95px; }
.videoslider-cnt.floating .floating-countdown { top:4px; }
.videoslider-cnt.floating .unmute-button { left:95px; }
.videoslider-cnt.floating .vjs-remaining-time { display:none; }
}