.customVideo{
	width: 100%;
	height: 100%;
}
.videoWrap {
	position: relative;
	display: flex;
	width: 100%;
/*	overflow: hidden;*/
	border-radius: .2rem;
	cursor: pointer;


}

.videoWrap video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
}

.videoUi {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .75em;
/*	background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));*/
	pointer-events: none;
}

.videoControls,
.videoProgressWrap {
	pointer-events: auto;
}

.videoControls {
	display: flex;
	gap: .5em;
	align-items: center;
}

.videoBtn {
	appearance: none;
	border: 0;
	background: rgba(0,0,0,0);
	color: var(--c4-50);
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 10;
/*	backdrop-filter: blur(6px);*/
/*	-webkit-backdrop-filter: blur(6px);*/
}

.videoBtn .material-symbols-outlined {
/*	font-size: 1.2rem;*/
	line-height: 1;
}

.videoProgressWrap {
	width: 100%;
}

.videoProgress {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 0;
	background: rgba(255,255,255,.35);
	outline: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	bottom: 0px;
    position: absolute;
}

/* WebKit */
.videoProgress::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 0;
	background: transparent;
	padding: 0;margin: 0;
}

.videoProgress::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1px;
	height: 1px;
	border-radius: 0;
	background: transparent;
	margin-top: -5px;
	border: 0;
/*	display: none;*/
}

/* Firefox */
.videoProgress::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: transparent;
}

.videoProgress::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: white;
	border: 0;
}

.videoWrap:hover .videoUi,
.videoWrap:focus-within .videoUi {
	opacity: 1;
}
.videoBtn.videoPlayPause{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	color: var(--c4-50);
	transition: color .2s;
	cursor: pointer;
}
.videoBtn.videoPlayPause:hover{
	color: var(--c4);
}
.videoBtn.videoFullscreenToggle{
	position: absolute;
	bottom: 0rem;
	right: 0rem;
	font-size: 1.2rem;
	transition: color .2s;
}
.videoBtn.videoMuteToggle{
	position: absolute;
	bottom: 0rem;
	left: 0rem;
	font-size: 1.2rem;
	transition: color .2s;
}
.videoBtn.videoMuteToggle:hover{
	color: var(--c5);
}
.videoBtn.videoPlayPause .material-symbols-outlined{
	font-size: 3rem;
}
.videoWrap:fullscreen,
.videoWrap:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	background: black;
	display: flex;
	align-items: center;
	justify-content: center;
}

.videoWrap:fullscreen .customVideo,
.videoWrap:-webkit-full-screen .customVideo {
	width: 100%;
	height: 100%;
	object-fit: contain; /* eller cover */
}


@media (min-width: 600px) {
	.videoBtn.videoFullscreenToggle{
		display: none;
	}
}

/*

.videoWrap,
.videoWrap * {
	transform: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	mask: none !important;
	-webkit-mask-image: none !important;
}

.videoWrap {
	overflow: visible !important;
	border-radius: 0 !important;
	opacity: 1 !important;
}

.customVideo {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	opacity: 1 !important;
	visibility: visible !important;
}*/
.videoWrap {
	position: relative;
}

.videoJobProgress {
	--p: 0;
	position: absolute;
	top: 1rem;
	right: 1.3rem;
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background:
		conic-gradient(
			var(--c1) calc(var(--p) * 1%),
			var(--c2-30) 0
		);
	z-index: 20;
	pointer-events: none;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.videoJobProgress::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: rgba(0,0,0,.72);
	backdrop-filter: blur(4px);
}

.videoJobProgressInner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.videoJobProgressValue {
	font-size: .8rem;
	font-weight: 300;
	line-height: 1;
	color: white;
	letter-spacing: .02em;
}