*, *::before, *::after {
  box-sizing: border-box;
}


.video-container {
  position: relative;
  width: 100%;
  /*max-width: 1000px; */
  display: flex;
  justify-content: center;
  margin-inline: auto;
  background-color: black;
  max-height: 73vh;
}

@media only screen and (max-width: 480px) {
  .video-container {
    max-height: 40vh;
  }
}
.video-container.theater,
.video-container.full-screen {
  max-width: initial;
  width: 100%;
}

.video-container.theater {
    max-height: 74vh;
    position: absolute;
    top: 119px;
    left: 0;
    width: 100%;
    max-height: 70%;
    overflow: hidden;
}

@media (max-width: 767px) { /* Mobile devices */
  .theater-btn {
    display: none;
  }
}

@media (min-width: 768px) { /* Tablets and other devices */
  .theater-btn {
    display: block;
  }
}

.video-container.full-screen {
  max-height: 100vh;
}

video {
  width: 100%;
}

.video-controls-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  z-index: 100;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

.video-controls-container::before {
  content: "";
  position: absolute;
  bottom: -1px;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
  width: 100%;
  aspect-ratio: 8 / 1;
  z-index: -1;
  pointer-events: none;
}

.video-container:hover .video-controls-container,
.video-container:focus-within .video-controls-container,
.video-container.paused .video-controls-container {
  opacity: 1;
}

.video-controls-container .controls {
  display: flex;
  gap: 1rem;
  padding: 6px 13px 6px 13px;
  align-items: center;
}

.video-controls-container .controls button {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  height: 30px;
  width: 30px;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: .85;
  transition: opacity 150ms ease-in-out;
}

.video-controls-container .controls button:hover {
  opacity: 1;
}

.video-container.paused .pause-icon {
  display: none;
}

.video-container:not(.paused) .play-icon {
  display: none;
}

/* Play/pause animation  
.video-container #play_pause_button {
  d: path('m 11,10 l 6,0 v 16 l -6,0 m 9,-16 l 6,0 v 16 l -6,0');
  transition: 0.2s cubic-bezier(.4, 0, 1, 1);
  -webkit-transition: 0.2s cubic-bezier(.4, 0, 1, 1); /* For Safari and Chrome (Webkit) 
  -moz-transition: 0.2s cubic-bezier(.4, 0, 1, 1); 
  -o-transition: 0.2s cubic-bezier(.4, 0, 1, 1); 
  will-change: d;
}

.video-container.paused #play_pause_button {
  d: path('m 11,10 l 7,3.74 v 8.54 l -7,3.72 m 7,-12.26 l 8,4.26 v 0 l -8,4.28');
}

/* Play/pause animation  */




.video-container.theater .tall {
  display: none;
}

.video-container:not(.theater) .wide {
  display: none;
}

.video-container.full-screen .open {
  display: none;
}

.video-container:not(.full-screen) .close {
  display: none;
}

.volume-icon #full_bar_curtain {
  transition: 0.3s d ease;
  will-change: d;
}
.volume-icon :where(#slash_curtain, #slash) {
  transition: 0.3s stroke-dashoffset ease-in;
  will-change: stroke-dashoffset;
}
.video-container[data-volume-level="low"] .volume-icon #full_bar_curtain {
  d: path('m 14,7.1087984 c 2.22277,0.5955895 3.523327,2.8865139 3.5,4.8912016 c -0.0226,1.942061 -1.198828,4.181966 -3.5,4.658218 v 1.73956 c 2.950185,-0.946943 4.687778,-3.348953 4.687778,-6.397778 c 0,-3.1324249 -1.965637,-5.6003169 -4.687778,-6.3977778 z');
  transition-duration: 0.3s;
}
.video-container[data-volume-level="muted"] .volume-icon :where(#slash_curtain, #slash) {
  stroke-dashoffset: 0px;
  transition-timing-function: ease-out;
}



/* slider  volume start  */


.volume-container {
  display: flex;
  align-items: center;
}

/*@media only screen and (max-width: 1023px) {
  .volume-slider {
    display:none;
  }
} */

/* === range theme and appearance === */
input[type="range"] {
	font-size: 1.5rem;
}

input[type="range"] {
	color: #ffffff;
	--thumb-height: 0.5em;
	--track-height: 0.125em;
	--track-color: rgb(153 153 153 / 40%);
    --clip-edges: 0.125em;
}


/* === range commons === */
input[type="range"] {
	position: relative;
	background: #fff0;
	overflow: hidden;
}

input[type="range"]:active {
	cursor: pointer;
}


/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	-webkit-transition: margin .2s cubic-bezier(.4, 0, 1, 1), width .2s cubic-bezier(.4, 0, 1, 1);
	-o-transition: margin .2s cubic-bezier(.4, 0, 1, 1), width .2s cubic-bezier(.4, 0, 1, 1);
	transition: margin .2s cubic-bezier(.4, 0, 1, 1), width .2s cubic-bezier(.4, 0, 1, 1);
	height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
	position: relative;
}

input[type="range"]::-webkit-slider-thumb {
	--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
	--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
	--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
	--clip-further: calc(100% + 1px);
	--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
		100vmax currentColor;

	width: var(--thumb-width, var(--thumb-height));
	background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
		50% calc(var(--track-height) + 1px);
	background-color: currentColor;
	box-shadow: var(--box-fill);
	border-radius: var(--thumb-width, var(--thumb-height));
    border-color: #ffffff;
	filter: brightness(100%);
	clip-path: polygon(
		100% -1px,
		var(--clip-edges) -1px,
		0 var(--clip-top),
		-100vmax var(--clip-top),
		-100vmax var(--clip-bottom),
		0 var(--clip-bottom),
		var(--clip-edges) 100%,
		var(--clip-further) var(--clip-further)
	);
}

input[type="range"]:hover::-webkit-slider-thumb {
	filter: brightness(var(--brightness-hover));
	cursor: pointer;
}

input[type="range"]:active::-webkit-slider-thumb {
	filter: brightness(var(--brightness-down));
	cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
		100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
	cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
	appearance: none;
	transition: all ease 100ms;
	height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
	background: #fff0;
}

input[type="range"]::-moz-range-thumb {
	background: currentColor;
	border: 0;
	width: var(--thumb-width, var(--thumb-height));
	border-radius: var(--thumb-width, var(--thumb-height));
	cursor: pointer;
}

input[type="range"]:active::-moz-range-thumb {
	cursor: pointer;
}

input[type="range"]::-moz-range-track {
	width: 100%;
	background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
	appearance: none;
	background: currentColor;
	transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
	height: calc(var(--track-height) + 1px);
	border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
	filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
	filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
	filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
	cursor: not-allowed;
}


.volume-container:hover .volume-slider,
.volume-slider:focus-within {
    width: 52px;
    margin-right: 3px;
    -webkit-transition: margin .2s cubic-bezier(0, 0, .2, 1), width .2s cubic-bezier(0, 0, .2, 1);
	-o-transition: margin .2s cubic-bezier(0, 0, .2, 1), width .2s cubic-bezier(0, 0, .2, 1);
	transition: margin .2s cubic-bezier(0, 0, .2, 1), width .2s cubic-bezier(0, 0, .2, 1)
}


.volume-slider {
  height: 4px;
  -webkit-appearance: none; 
  cursor: pointer;
  width: 0px;
 /* transform-origin: left;
  transform: scaleX(0);
  transition: width 150ms ease-in-out, transform 150ms ease-in-out; */
}


/* slider  volume end  */

.duration-container {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-grow: 1;
  font-family: system-ui;
}

.video-container.captions .captions-btn {
  border-bottom: 3px solid #2c90ff;
}

.video-controls-container .controls button.wide-btn {
  width: 50px;
}

.timeline-container {
  height: 7px;
  margin-inline: .5rem;
  cursor: pointer;
  display: flex;
  align-items: center;

}

.timeline {
  background-color: rgb(100 100 100 / 0%);
  height: 3px;
  width: 100%;
  position: relative;
  

}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(150, 150, 150, 0.7); /* Grey color with transparency */
  display: none;
}


/* .timeline::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: calc(100% - var(--downloaded-progress) * 100%);
  background-color: #dcdcdc; /* Grey color with transparency 
  z-index: -1; 
}
*/

/*  hover on timeline   */

.timeline-hover {
  background-color: rgba(100, 100, 100, .5);
  height: 3px;
  width: 100%;
  position: relative;
  transition: transform .15s cubic-bezier(0,0,.2,1),-webkit-transform .15s cubic-bezier(0,0,.2,1);
  -webkit-transition: -webkit-transform .15s cubic-bezier(0,0,.2,1);

}

.timeline-hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: calc(100% - var(--preview-position) * 100%);
  background-color: rgb(249 249 249 / 44%);
  display: none;
}

.timeline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: calc(100% - var(--progress-position) * 100%);
  background-color: #2c90ff;
}


/*  hover on timeline  end */





.timeline .thumb-indicator {
  --scale: 0;
  position: absolute;
  transform: translateX(-50%) scale(var(--scale));
  height: 200%;
  top: -50%;
  left: calc(var(--progress-position) * 100%);
  background-color: #2c90ff;
  border-radius: 50%;
  transition: transform .15s cubic-bezier(0,0,.2,1),-webkit-transform .15s cubic-bezier(0,0,.2,1);
  -webkit-transition: -webkit-transform .15s cubic-bezier(0,0,.2,1);
  aspect-ratio: 1 / 1;
}

.timeline .preview-img {
  position: absolute;
  height: 80px;
  aspect-ratio: 16 / 9;
  top: -2rem;
  transform: translate(-50%, -100%);
  left: calc(var(--preview-position) * 100%);
  border-radius: 6px;
  border: 2px solid white;
  display: none;
}






.progress {
    position: absolute;
    width: 100%;
    height: 22px;
    margin-inline: -2rem;
    left: 27px;
    bottom: 37px;
    background-color: #ff000000;
    
}



.thumbnail-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
z-index: 2;
margin: auto;
box-shadow: inset 0 0 0 2000px #00000082;
clip-path: inset(2px);
}

.video-container.scrubbing .thumbnail-img {
  opacity:1;

}

.video-container.scrubbing .preview-img,
.timeline-container:hover .preview-img {
  display: block;
}

.video-container.scrubbing .timeline::before,
.timeline-container:hover .timeline::before {
  display: block;
}

.video-container.scrubbing .timeline-hover::before,
.timeline-container:hover .timeline-hover::before {
  display: block;
  
}
.video-container.scrubbing .thumb-indicator,
.timeline-container:hover .thumb-indicator {
  --scale: 2.3;
  
}

.video-container.scrubbing .timeline-hover,
.timeline-container:hover .timeline-hover {
    transform:scaleY(1.7)

}

/* loading */





#loading-circle {
    display: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 11px solid #2c90ff;
    border-top-color: #333333bf;
    animation: spin 1s infinite linear;
    top: 41%;
    /*left: 41%;*/
    position: absolute;
	z-index: 2;
}

@media only screen and (max-width: 480px) {
  #loading-circle {
    top: 18%;
    left: 37%;
  }
}



@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.captions-btn {
	
	display:none;
	
}

 .speed-btn .tooltip {
  position: absolute;
  bottom: 100%;
  margin-left: 22px;
  transform: translateX(-50%);
  background-color: rgb(0 0 0);
  color: #fff;
  padding: 2px 7px;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  }

.speed-btn:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

.play-pause-btn .tooltip {
  position: absolute;
  bottom: 100%;
  /*left: 5vh;*/
  transform: translateX(-50%);
  background-color: rgb(0 0 0);
  color: #fff;
  padding: 2px 7px;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-left: 32px;
}

.play-pause-btn:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

.mute-btn .tooltip {
  position: absolute;
  bottom: 100%;
  /*left: 9vh;*/
  transform: translateX(-50%);
  background-color: rgb(0 0 0);
  color: #fff;
  padding: 2px 7px;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-left: 17px;
}

.mute-btn:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

.volume-slider .tooltip {
  position: absolute;
  bottom: 100%;
  left: 13vh;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.volume-slider:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

 .theater-btn .tooltip {
  position: absolute;
  bottom: 100%;
  margin-right: -61px;
  transform: translateX(-50%);
  background-color: rgb(0 0 0);
  color: #fff;
  padding: 2px 7px;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  }

.theater-btn:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

 .full-screen-btn .tooltip {
  position: absolute;
  bottom: 100%;
  margin-right: -110px;
  transform: translateX(-50%);
  background-color: rgb(0 0 0);
  color: #fff;
  padding: 2px 7px;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  right: 2.5em;
  }

.full-screen-btn:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

@media all and (display-mode: fullscreen) {
  .full-screen-btn .tooltip {
    right: 3px;
  }
}



.time-indicator {
  position: absolute;
  top: -33px; /* Adjust the position as needed */
  left: 0;
  display: none;
}

.custom-menu {
    position: absolute;
    background: #101010de;
    border: 1px solid #000000;
    z-index: 100;
    border-radius: 3px;
    color: white;
	font-size: 13px;
	padding: 0.3rem 0;
}

.custom-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.custom-menu li.loop-active::after {
  content: '\2713'; /* Unicode character for checkmark */
  display: inline-block;
  margin-left: 5px;
}

.custom-menu li:hover {
  background-color: #57575787; /* Change this to the desired hover color */
}

/* play pause overlay fade animation. */

.pausefade, .playfade{
  background-color: #000000d1;
  display: flex;
  width: max-content;
  padding: 10px;
  border-radius: 100%;
  overflow: hidden;
  display: none;
  position:absolute;
  top:41%;
  pointer-events: none;
  z-index: 2;
}

.unhide {
  display: flex;
  animation: playpause 0.8s forwards;
}

@keyframes playpause {
  from {
    display: flex;
    opacity: 0.85;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
    display: none;
  }  
}

#play-button {
  display: none;
  position: absolute;
  top: 41%;
  cursor: pointer;
  z-index: 2;
  -webkit-transition: fill .1s cubic-bezier(.4,0,1,1),fill-opacity .1s cubic-bezier(.4,0,1,1);
  transition: fill .1s cubic-bezier(.4,0,1,1),fill-opacity .1s cubic-bezier(.4,0,1,1);
  fill: #212121;
  fill-opacity: .8;
}

#play-button:hover {
-webkit-transition: fill .1s cubic-bezier(0,0,.2,1),fill-opacity .1s cubic-bezier(0,0,.2,1);
  transition: fill .1s cubic-bezier(0,0,.2,1),fill-opacity .1s cubic-bezier(0,0,.2,1);
  fill: #0093ff;
  fill-opacity: 1;
}


#video {
  z-index: 1;
}

.video-logo {
	
  z-index: 2;
}

 .open {
    transition: transform 0.2s;
  }

  .open:hover {
    animation: scaleDownUp 0.5s forwards;
  }

  @keyframes scaleDownUp {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }