.ajavp-wrapper {
  width:100%;
  height:100%;
  padding:0px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  font-family: Arial,sans-serif;
}

.ajavp-wrapper video {
  object-fit:contain;
  width:100%;
  height: 100%;
}

/* loader */
.ajavp-wrapper .ajavp-loader {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 5px solid transparent;
  border-right: 5px solid #ffffff;
  border-left: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  z-index: 9999;
  animation: rotation 2s infinite ease;
  -webkit-animation: rotation 2s infinite ease;
  display: none;
}

.ajavp-wrapper .ajavp-player-state {
  display: flex;
  position: absolute;
  width: 100%;
  justify-content: space-around;
}

.ajavp-wrapper .ajavp-state-btn {
  width: 80px;
  height: 80px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(36, 36, 36, 0.667);
  z-index: 9999;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  user-select: none;
  transform: scale(0);
  background-position:center center;
  background-repeat:no-repeat;
  background-size: 60% 60%;
}

.ajavp-wrapper .ajavp-main-state .ajavp-main-state-info {
	font-size:24px;
	text-align:center;
}

.ajavp-wrapper .ajavp-state-forward {
	background-size: 30% 30%;
	background-position:right 10px center;
 	text-indent:-20px;
}
.ajavp-wrapper .ajavp-state-backward {
	background-size: 30% 30%;
  	background-position:left 10px center;
 	text-indent:20px;
}
.ajavp-wrapper .ajavp-skip-step {
  font-size:28px;
}

.ajavp-wrapper .animate-state {
  animation: mainStateAnim 0.5s forwards;
  animation: mainStateAnim 0.7s forwards;
}

.ajavp-wrapper .show-state {
  transform: scale(1);
  opacity: 1;
}

.ajavp-wrapper .show-controls {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

.ajavp-wrapper .ajavp-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 76px 16px 8px 16px;
  width: 100%;
  background: linear-gradient(to top, #000000b8 -100%, transparent);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(40px);
  visibility: hidden;
  z-index: 99;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* subtitles */
.ajavp-wrapper video::cue {
  color: transparent;
  font-size:0px;
}

.ajavp-wrapper .show-subtitles {
  opacity: 1 !important;
  visibility: visible !important;
}

.ajavp-wrapper .ajavp-subtitles {
  position:absolute;
  top:auto;
  bottom:5%;
  left:50%;
  width:95%;
  margin-left:-47.5%;
  padding:0px;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align:center;
}

.ajavp-wrapper .ajavp-subtitles-up {
	bottom: 70px;
}

.ajavp-wrapper .ajavp-subtitles .ajavp-subtitles-text {
	font-weight:bold;
	font-size:20px;
	background:rgba(0,0,0,0.5);
	color:#fff;
	padding:5px;
	display:inline-block;
	border-radius:5px;
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}


.ajavp-wrapper .ajavp-tag-timeline {
  position: relative;
  width: 100%;
  background: transparent;
  cursor:default;
  position: absolute;
  bottom:62px;
  left:0px;
}

/* timeline */
.ajavp-wrapper .ajavp-timeline {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(254,254,254,0.4);
  cursor: pointer;
/*  transition: all 0.2s; */
  border-radius:24px;
  position: absolute;
  bottom:48px;
  left:0px;
}

.ajavp-wrapper .ajavp-timeline:hover {
  height: 8px;
}

.ajavp-wrapper .ajavp-timeline .ajavp-buffered {
  height: 100%;
  position: absolute;
  inset: 0;
  background-color: rgba(255,106,0,0.27);
  z-index: 9;
  width: 0;
}

.ajavp-wrapper .ajavp-hover-time {
  height: 100%;
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  z-index: 99;
  display: flex;
  align-items: center;
  width: 0;
}

.ajavp-wrapper .ajavp-hover-time .ajavp-hover-duration {
  position:absolute;
  right:calc((-25px / 2));
  top:-25px;
  background: rgba(60, 60, 60, 0.65);
  padding: 3px;
  border-radius: 5px;
  font-size: 13px;
  visibility: hidden;
  font-weight: bold;
  opacity: 0;
  transform: scale(0);
  text-align:center;
}

/* sprites */
.ajavp-wrapper .show-sprite {
  opacity: 1 !important;
  visibility: visible !important;
}

.ajavp-wrapper .ajavp-hover-time .ajavp-sprite {
  opacity: 0;
  width:100px;
  height:100px;
  background-color:#000;
  background-repeat: no-repeat;
  border:2px solid #fff;
  border-radius:5px;
  position:absolute;
  bottom:20px;
  left:0px;
  transition: opacity 0.7s;
  pointer-events:none;
}

.ajavp-wrapper .ajavp-hover-time .ajavp-sprite .ajavp-sprite-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  top: 100%;
}

.ajavp-wrapper .ajavp-hover-time .ajavp-sprite .ajavp-sprite-arrow.edge {
  transform:none;
}

.ajavp-wrapper .ajavp-hover-time .ajavp-sprite .ajavp-sprite-time {
  position: absolute;
  bottom: 5px;
  right:5px;
  background: rgba(60, 60, 60, 0.65);
  padding: 3px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: bold;
}

.ajavp-wrapper .ajavp-timeline:hover .ajavp-hover-time .ajavp-hover-duration,
.ajavp-wrapper .ajavp-timeline:hover .ajavp-hover-time .ajavp-sprite .ajavp-sprite-time {
  visibility: visible;
  opacity: 1;
  transition: all 0.2s;
  transform: scale(1);
}

.ajavp-wrapper .ajavp-timeline .ajavp-current-time {
  height: 100%;
  position: absolute;
  inset: 0;
  background: #ff6a00;
  z-index: 999;
  display: flex;
  align-items: center;
  width: 0;
  border-radius:24px;
}

.ajavp-wrapper .ajavp-current-time::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  right: calc((-16px / 2));
  background: #ff6a00;
  border-radius: 50%;
  transition: all 0.2s;
  visibility: hidden;
  transform: scale(0);
}

.ajavp-wrapper .ajavp-timeline:hover .ajavp-current-time::before {
  visibility: visible;
  transform: scale(1);
}

.ajavp-wrapper .ajavp-btn-controls {
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ajavp-wrapper .ajavp-controls.withtags .ajavp-timeline{
  bottom: 64px;
}

.ajavp-wrapper .ajavp-left-controls {
  display: flex;
  align-items: center;
  margin-left:-15px;
}

.ajavp-wrapper .ajavp-right-controls {
  margin-right:-18px;
}

.ajavp-wrapper .ajavp-left-controls, .ajavp-wrapper .ajavp-btn-controls > span {
  cursor: pointer;
}

.ajavp-wrapper .ajavp-control-btn {
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:70% 70%;
  border: 1px solid transparent;
}

.ajavp-wrapper.small-player .ajavp-control-btn {
  width: 32px;
  height: 32px;
  margin-right: 5px;
}

/*
.ajavp-wrapper .ajavp-control-btn:last-child {
  margin-right: 0;
}
*/

.ajavp-wrapper .ajavp-control-btn:hover {
  border: 1px solid #3131315c;
}

.ajavp-wrapper .ajavp-control-btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #2424246a;
  position: absolute;
  transition: all 0.1s;
  transform: scale(0);
}

.ajavp-wrapper .ajavp-control-btn:active::before {
  transform: scale(1);
  border: 1px solid #3131315c;
}

.ajavp-wrapper .ajavp-time-container {
  font-size: 13px;
  font-weight: 500;
  padding-left: 11px;
  white-space: nowrap;  
}

.ajavp-wrapper .volume {
  display: flex;
  align-items: center;
  cursor: default;
}

.ajavp-wrapper .mute-unmute {
  display: flex;
  cursor: pointer;
}

.ajavp-wrapper .max-vol {
  height: 3px;
  cursor: pointer;
  background: #ffffff6e;
  transition: all 0.1s;
  width: 0;
  visibility: hidden;
  transform: scaleX(0);
  transform-origin: left;
  display: flex;
  align-items: center;
}

.ajavp-wrapper .max-vol.show {
  width: 56px;
  visibility: visible;
  transform: scaleX(1);
}

.ajavp-wrapper .current-vol {
  position: absolute;
  inset: 0;
  width: 20%;
  height: 100%;
  background: #fff;
  display: flex;
  transition: none;
  align-items: center;
}

.ajavp-wrapper .current-vol::before {
  content: "";
  position: absolute;
  right: -5px;
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
  background: #eee;
}

.ajavp-wrapper .ajavp-menu {
  opacity: 0;
  visibility: hidden;
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  position: absolute;
  bottom: 52px;
/*
  transition: all 0.2s;
  transform: scaleY(0);
*/  
  background: rgba(28, 28, 28, 0.9);
  transform-origin: bottom;
  border-radius: 5px;
}

.ajavp-wrapper .ajavp-controls.withtags .ajavp-menu{
  bottom: 68px;
}

.ajavp-wrapper .ajavp-menu.show-menu {
  opacity: 1;
/*  transform: scaleY(1); */
  visibility: visible;
}

.ajavp-wrapper .ajavp-menu li{
  text-align:left;
}

.ajavp-wrapper .ajavp-tag-menu {
  background: rgba(34,34,34,0.5);
  background: rgba(28, 28, 28, 0.9);
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:40px;
  list-style: none;
  padding-inline-start: 0;
  border-radius: 5px;
  border: 1px solid #fafafa;
  overflow-y: hidden;
  scrollbar-width: thin;  
}

.ajavp-wrapper .ajavp-tag-menu-arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fafafa;
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: 49px;
}

.ajavp-wrapper .ajavp-tag-menu-arrow.edge-left {
  transform:none;
  right:unset;
  left:10px;
}
.ajavp-wrapper .ajavp-tag-menu-arrow.edge-right {
  transform:none;
  left:calc(100% - 30px);
  right:unset;
}

.ajavp-wrapper .ajavp-tag-menu li{
  width:auto;
  padding: 5px 8px;  
  margin: 8px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  white-space: nowrap;
  text-align:left;
}

.ajavp-wrapper .ajavp-tag-menu li span {
	font-weight: bold;
	margin-right: 10px;
	pointer-events:none;
}

.ajavp-wrapper .ajavp-tag-menu li:hover {
  background: rgb(31, 31, 31);
}

.ajavp-wrapper .ajavp-tag-menu li:active {
	background: #dedede;
	color: #313131;
}

.ajavp-wrapper .ajavp-menu.scrollable {
  transition: none;
  overflow-x:hidden;
  padding-right:6px;
  scrollbar-width: thin;  
}

.ajavp-wrapper .ajavp-menu.horizontal {
  display: flex;
  align-items: center;
}

.ajavp-wrapper .ajavp-menu li {
  padding: 5px 20px;  
  margin: 8px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 5px;
  white-space: nowrap; 
}

.ajavp-wrapper .ajavp-menu.horizontal li {
  font-size: 12px;
  padding: 2px 2px;  
  width:50%;
}

.ajavp-wrapper .ajavp-active-menu-item {
  background: rgb(125, 125, 125);
  color: #ccc;
  cursor: default;
}

.ajavp-wrapper .ajavp-menu li:hover {
  background: rgb(31, 31, 31);
}

.ajavp-wrapper .ajavp-menu li.ajavp-active-menu-item:hover {
	background: rgb(125, 125, 125);
}

.ajavp-wrapper .ajavp-menu li:active {
	background: #dedede;
	color: #313131;
}

.ajavp-wrapper .fullscreen {
  position: absolute !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  background: #000 !important;
  align-items: center !important;
}

.ajavp-wrapper .ajavp-right-controls {
  display: flex;
  align-items: center;
}

.ajavp-wrapper .ajavp-right-controls span {
  cursor: pointer;
}

@keyframes mainStateAnim {
  50% {
    opacity: 1; transform: scale(1.1);
  }
  100% {
    opacity: 0; transform: scale(1);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ajavp-wrapper .ajavp-switch-res-poster {
	position:absolute;
	background:#313131;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}

.ajavp-wrapper .ajavp-error-state {
	display:flex;
	position:absolute;width:100%;height:100%;top:0px;left:0px;
	padding: 5px;
  	background: rgba(28, 28, 28, 0.5);
  	color: #fff;
	align-items: center; 
	justify-content : center;
	gap:20px;
  	text-align:center;
  	pointer-events: none;
  	cursor: default;
}

.ajavp-wrapper .ajavp-error-state span {
	padding:20px;
	font-size:20px;
}

.ajavp-wrapper .ajavp-tagline {
	height:100%;
	width:100%;
}

.ajavp-wrapper .tag-marker {
  position: absolute;
  margin-left:-2px;
  box-sizing:border-box;
  cursor:pointer;
  height: 20px;
  width: 20px;
  background-color:transparent;
  bottom:-18px;
  background-image: url(img/tag-outline.svg);
  background-position: center center;
  background-repeat: no-repeat;  	
  z-index:1001;
}

.ajavp-wrapper .ajavp-timeline:hover .ajavp-hover-time .ajavp-hover-duration-tag {
  position: absolute;
  bottom: 30px;
  color:#fff;
  display: flex;
  justify-content:space-between;
  gap:5px;
}

.ajavp-wrapper .ajavp-timeline:hover .ajavp-hover-time .ajavp-hover-duration-tag span {
  padding:3px;
  border-radius: 5px;
  background: #3c3c3ca7;
  text-align:center;
  white-space: nowrap;  
  border:2px solid #777;
  font-size: 16px;
}

.ajavp-wrapper .resolution-switcher.disabled {
  cursor:default;
}

.ajavp-wrapper .resolution-switcher {
 background-image:url(img/hd-off.svg); 
 background-size:110% 110% !important;
}
.ajavp-wrapper .resolution-switcher.hd {
	 background-image:url(img/hd-on.svg); 
	 background-size:110% 110% !important;
}

.ajavp-wrapper .play {background-image:url(img/play-outline.svg);}

.ajavp-wrapper .pause {background-image:url(img/pause-outline.svg);}
.ajavp-wrapper .enterfullscreen {
	background-image:url(img/fullscreen-outline.svg);
	background-size:90% 90% !important;
}
.ajavp-wrapper .exitfullscreen {
	background-image:url(img/fullscreen-exit-outline.svg);
	background-size:90% 90% !important;
}
.ajavp-wrapper .unmute {background-image:url(img/volume-high.svg);}
.ajavp-wrapper .mute {background-image:url(img/volume-off.svg);}

.ajavp-wrapper .ajavp-playback-rate-btn.normal { background-image:url(img/play-speed-1x.svg);}
.ajavp-wrapper .ajavp-playback-rate-btn { background-image:url(img/play-speed.svg);}

.ajavp-wrapper .ajavp-subtitles-btn {background-image:url(img/subtitles-outline.svg);}
.ajavp-wrapper .ajavp-subtitles-btn.off { background-image:url(img/subtitles-off-outline.svg); }

.ajavp-wrapper .resolution-switcher.hd::after,
.ajavp-wrapper .ajavp-playback-rate-btn:not(.normal)::after,
.ajavp-wrapper .ajavp-subtitles-btn:not(.off)::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 2px;
  bottom:3px;
  background: #fff;
}

.ajavp-wrapper .ajavp-state-forward { background-image:url(img/forward.svg); }
.ajavp-wrapper .ajavp-state-backward { background-image:url(img/backward.svg); }

.ajavp-wrapper .tooltip {
  background-color: rgba(0,0,0,0.5);
  color: white;
  border-radius: 3px;
  opacity: 0;
  position: absolute;
  transition: opacity 0.5s;
  white-space: nowrap;  
  padding:5px;
  font-size:12px;
  z-index:1000;
  left:50%;
  transform:translateX(-50%);
  top:5000px;
  pointer-events: none;
}

.ajavp-wrapper .tooltip.shown {
  opacity: 1;
  top: -40px;
}