:root {
	--jcode-primary-color: #fff;
	--jcode-primary-color-hover: #161616;
	--jcode-primary-bg-color: #161616;
	--jcode-primary-bg-color-hover: #fff;
	--jcode-line-color: #383838;
	--jcode-line-color-download: #686868;
	--jcode-video-bg: #2c2c2c;
	--jcode-primary-loader-color: #161616;
	--jcode-video-pp: rgba(44, 44, 44, 0.4);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	display: block;
	max-width: 100%;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

.jcode-player {
	background: var(--jcode-video-bg, #2c2c2c);
	position: relative;
	font-family: sans-serif;
	user-select: none;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.jcode-player {
	width: 100%;
	height: 500px;
	display: block;
}

.jcode-player-preview {
	width: 100%;
	height: 100%;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.jcode-player-preview-play {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jcode-primary-color, #ffffff);
	cursor: pointer;
	background: var(--jcode-video-pp);
}

.jcode-player-preview-play svg {
	width: 32px;
	height: 42px;
}

.jcode-player-video {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 0;
}

.jcode-player-controls {
	padding: 0 10px 10px;
	display: flex;
	align-items: flex-end;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	transition: 0.3s;
	z-index: 9;
}

.jcode-player-pp {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--jcode-primary-bg-color, #161616);
	color: var(--jcode-primary-bg-color-hover, #ffffff);
	width: 70px;
	height: 40px;
	border-radius: 4px;
	cursor: pointer;
	transition: 0.3s;
	margin-right: 10px;
}

.jcode-player-pp:hover {
	background: var(--jcode-primary-bg-color-hover, #ffffff);
	color: var(--jcode-primary-bg-color, #161616);
}

.jcode-player-pp__play {
	display: flex;
}

.jcode-player-pp__pause {
	display: none;
}

.jcode-player-pp__ended {
	display: none;
}

.jcode-player-other {
	background: var(--jcode-primary-bg-color, #161616);
	height: 30px;
	flex: 1;
	border-radius: 4px;
	display: flex;
	align-items: center;
}

.jcode-player-time, .jcode-player-duration {
	color: var(--jcode-primary-color, #ffffff);
	font-size: 14px;
	padding: 0 10px;
	height: 30px;
	display: flex;
	align-items: center;
	cursor: default;
}

.jcode-player-timeline {
	display: flex;
	align-items: center;
	width: 100%;
	background: var(--jcode-line-color, #ffffff);
	cursor: pointer;
	position: relative;
	height: 10px;
}

.jcode-player-timeline__current {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	background: var(--jcode-primary-color, #ffffff);
	cursor: pointer;
	width: 0%;
	height: 100%;
}

.jcode-player-timeline__download {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: var(--jcode-line-color-download, #686868);
	width: 33%;
	height: 100%;
	display: none;
}

.jcode-player-sound {
	height: 30px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	cursor: pointer;
	position: relative;
}

.jcode-player-sound__nomuted {
	display: flex;
}

.jcode-player-sound-progress {
	padding: 10px 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	width: 100%;
	height: 146px;
	background: var(--jcode-primary-bg-color, #161616);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	cursor: default;
}

.jcode-player-sound-progress-bar {
	width: 4px;
	height: 100px;
	background: var(--jcode-primary-color, #ffffff);
	position: relative;
	cursor: grab;
}

.jcode-player-sound-progress-controller {
	width: 20px;
	height: 4px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	top: 0;
	background: var(--jcode-primary-color, #ffffff);
}

.jcode-player-sound-muted {
	cursor: pointer;
	display: flex;
	margin-top: 10px;
}

.jcode-player-screen {
	height: 30px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	cursor: pointer;
}

.jcode-player-screen__full {
	display: flex;
}

.jcode-player-screen__default {
	display: none;
}

.jcode-player-load {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: var(--jcode-primary-bg-color);
	opacity: 0.8;
}

.jcode-player-loader {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	position: relative;
	animation: jcode-player-loader-rotate 1.5s linear infinite
}

.jcode-player-loader::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 5px solid #FFF;
	animation: jcode-player-loader-animator 3s linear infinite;
}

@keyframes jcode-player-loader-rotate {
	100% {
		transform: rotate(360deg)
	}
}

@keyframes jcode-player-loader-animator {
	0% {
		clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
	}
	25% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
	}
	50% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
	}
	75% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
	}
	100% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
	}
}

.jcode-player-layer {
	position: absolute;
	left: 50%;
	top: 50%;
	right: 0;
	bottom: 0;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: 0.1s;
	color: var(--jcode-primary-color, #fff);
	width: 60px;
	height: 60px;
	pointer-events: none;
}

.jcode-player-layer-play,
.jcode-player-layer-pause {
	width: 60px;
	height: 60px;
	background: var(--jcode-video-pp, rgba(44, 44, 44, 0.4));
	display: none;
	align-items: center;
	justify-content: center;
}

.jcode-player-play-touch {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: calc(100% - 50px);
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
}

.jcode-player-play-touch-left,
.jcode-player-play-touch-right {
	width: 40px;
	height: 40px;
	background: var(--jcode-video-pp, rgba(44, 44, 44, 0.4));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 20px;
	border-radius: 50%;
}

.jcode-player-play-touch-play {
	display: none;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: var(--jcode-video-pp, rgba(44, 44, 44, 0.4));
	color: #fff;
}

.jcode-player-play-touch-pause {
	display: none;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: var(--jcode-video-pp, rgba(44, 44, 44, 0.4));
	color: #fff;
}

.jcode-player-play-touch-play svg,
.jcode-player-play-touch-pause svg,
.jcode-player-play-touch-left svg,
.jcode-player-play-touch-right svg {
	width: 24px;
	height: 24px;
}

.jcode-player-error {
	color: var(--jcode-primary-color, #ffffff);
	font-size: 18px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--jcode-primary-bg-color);
	padding: 20px;
	white-space: nowrap;
	border-radius: 4px;
}

.jcode-player-tooltip {
	background: var(--jcode-primary-color, #ffffff);
	padding: 4px;
	border-radius: 4px;
	height: 20px;
	font-size: 10px;
	position: absolute;
	bottom: calc(100% + 5px);
	display: none;
	transform: translateX(-50%);
}

.jcode-player-tooltip::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: #ffffff transparent transparent transparent;
}

/* fullscreen styles */
._jcode-player-fullscreen .jcode-player-video {
	max-height: 100%;
}

._jcode-player-fullscreen .jcode-player-screen__full {
	display: none;
}

._jcode-player-fullscreen .jcode-player-screen__default {
	display: flex;
}

/* played video styles */
._jcode-player-played .jcode-player-pp__play {
	display: none;
}

._jcode-player-played .jcode-player-pp__pause {
	display: flex;
}

._jcode-player-play .jcode-player-layer-play {
	animation: jcode-animate-layer-scale 0.5s forwards;
	display: flex;
}

._jcode-player-pause .jcode-player-layer-pause {
	animation: jcode-animate-layer-scale 0.5s forwards;
	display: flex;
}

@keyframes jcode-animate-layer-scale {
	0% {
		transform: scale(1);
		opacity: 0;
	}
	50% {
		transform: scale(1.5);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

/* volume video styles */

._jcode-player-volume .jcode-player-sound-progress {
	display: flex;
}

/* ended video styles */

._jcode-player-ended .jcode-player-pp__ended,
._jcode-player-ended .jcode-player-play-touch-play {
	display: flex;
}

._jcode-player-ended .jcode-player-pp__play,
._jcode-player-ended .jcode-player-pp__pause {
	display: none;
}

@media (max-width: 767px) {
	.jcode-player-pp {
		display: none;
	}

	.jcode-player-play-touch {
		height: calc(100% - 40px);
	}

	.jcode-player-layer {
		top: calc(50% - 20px);
	}
}

/* controls video styles */

._jcode-player-controls .jcode-player-controls {
	bottom: -50px;
	opacity: 0;
}

/* init video styles */

.jcode-player:not(._jcode-player-init) .jcode-player-controls {
	display: none;
}

._jcode-player-init .jcode-player-preview {
	display: none;
}

/* loader video styles */
._jcode-player-load .jcode-player-load {
	display: flex;
}

._jcode-player-load .jcode-player-preview {
	display: none;
}

._jcode-player-load .jcode-player-video {
	visibility: hidden;
}

/* touch video styles */

._jcode-player-touch .jcode-player-layer {
	top: calc(50% - 25px);
}

._jcode-player-touch .jcode-player-controls {
	opacity: 1;
	bottom: 0;
}

._jcode-player-touch .jcode-player-play-touch {
	display: flex;
}

._jcode-player-touch._jcode-player-play .jcode-player-play-touch-play {
	display: none;
}

._jcode-player-touch._jcode-player-play .jcode-player-play-touch-pause {
	display: flex;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

._jcode-player-touch._jcode-player-play .jcode-player-play-touch-pause > svg {
	width: 16px;
	height: 16px;
}

._jcode-player-touch._jcode-player-pause .jcode-player-play-touch-play {
	display: flex;
}

._jcode-player-touch._jcode-player-pause .jcode-player-play-touch-pause {
	display: none;
}

._jcode-player-touch .jcode-player-play-touch-play,
._jcode-player-touch .jcode-player-play-touch-pause {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}


._jcode-player-touch .jcode-player-play-touch-pause > svg,
._jcode-player-touch .jcode-player-play-touch-play > svg {
	width: 16px;
	height: 16px;
}

@keyframes jcode-player-play-touch-scale {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

._jcode-player-prev.jcode-player-play-touch-left {
	animation: jcode-player-play-touch-scale 0.1s;
}

._jcode-player-next.jcode-player-play-touch-right {
	animation: jcode-player-play-touch-right 0.1s;
}

._jcode-player-mobile .jcode-player-layer {
	display: none;
}

/* error video styles */

._jcode-player-error .jcode-player-preview {
	display: none;
}

/* tooltip video styles */

._jcode-player-tooltip .jcode-player-tooltip {
	display: block;
}

/* native video styles */

._jcode-player-native .jcode-player-controls,
._jcode-player-native .jcode-player-play-touch,
._jcode-player-native .jcode-player-layer {
	display: none;
}