@import url('/templates/moki-moki_v4_copy3/css/google-Jura.css');
@import url('/templates/moki-moki_v4_copy3/css/google-Comfortaa.css');

@font-face {
    font-family: 'Copperplate';
    src: url('copperplate-webfont.woff2') format('woff2'),
         url('copperplate-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.main_player_content {
  opacity: 0;
  visibility: hidden;

}


.main_player_content.content-ready {
  opacity: 1;
  visibility: visible;
}


.player-frame.owl-loading {
  
}






.seek-feedback-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 999999;
  width: 50%;
  height: 257px;
  top: calc(50% - 25px); 
  transform: translateY(-50%);
  overflow: hidden;
}


.seek-feedback-background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}


.seek-feedback-container.left {
  left: 0;
}

.seek-feedback-container.left .seek-feedback-background {
  border-radius: 0 200px 200px 0;
  right: 0;
}


.seek-feedback-container.right {
  right: 0;
}

.seek-feedback-container.right .seek-feedback-background {
  border-radius: 200px 0 0 200px;
  left: 0;
}


.seek-feedback-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.seek-feedback-icon {
  font-size: 1.5em; 
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.seek-feedback-text {
  color: rgba(255, 255, 255, 1);
  font-size: 1.3em; 
  font-weight: 600;
  font-family: 'Copperplate', sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 0;
  letter-spacing: 0.3px;
  white-space: nowrap;
}


.seek-feedback-container.active .seek-feedback-background {
  opacity: 1;
  transform: scale(1);
}

.seek-feedback-container.active .seek-feedback-content {
  opacity: 1;
  transform: scale(1);
}


.seek-feedback-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  overflow: hidden;
}

.seek-feedback-container.left .seek-feedback-ripple {
  border-radius: 0 200px 200px 0;
  right: 0;
}

.seek-feedback-container.right .seek-feedback-ripple {
  border-radius: 200px 0 0 200px;
  left: 0;
}

.seek-feedback-container.active .seek-feedback-ripple {
  animation: rippleEffect 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes rippleEffect {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}


.video-js.vjs-fullscreen .seek-feedback-container {
  position: fixed !important;
  width: 50% !important;
  height: 300px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2147483647 !important;
}

.video-js.vjs-fullscreen .seek-feedback-container.left {
  left: 0 !important;
  right: auto !important;
}

.video-js.vjs-fullscreen .seek-feedback-container.right {
  right: 0 !important;
  left: auto !important;
}

.video-js.vjs-fullscreen .seek-feedback-icon {
  font-size: 2em !important;
}

.video-js.vjs-fullscreen .seek-feedback-text {
  font-size: 1.2em !important;
}


.video-wra {
  position: relative;
  overflow: visible !important; 
}

.video-js:not(.vjs-fullscreen) {
  position: relative;
  overflow: visible !important; 
}

.video-js.vjs-fullscreen {
  overflow: hidden !important;
}



@media (max-width: 620px) {
  .seek-feedback-container {
    height: 184px;
    top: calc(50% - 20px); 
  }

  .seek-feedback-icon {
    font-size: 1.4em;
  }
  
  .seek-feedback-text {
    font-size: 1em;
  }

}


@media (max-width: 465px) {
  .seek-feedback-container {
    height: 162px;
    top: calc(50% - 18px); 
  }
  
  .seek-feedback-icon {
    font-size: 1.2em;
  }
  
  .seek-feedback-text {
    font-size: 0.9em;
  }
  
  .seek-feedback-container.left .seek-feedback-background,
  .seek-feedback-container.left .seek-feedback-ripple {
    border-radius: 0 130px 130px 0;
  }
  
  .seek-feedback-container.right .seek-feedback-background,
  .seek-feedback-container.right .seek-feedback-ripple {
    border-radius: 130px 0 0 130px;
  }
  
  
  body.vjs-full-window .seek-feedback-container,
  .video-js:fullscreen ~ .seek-feedback-container {
    height: 220px;
  }
  
  body.vjs-full-window .seek-feedback-icon,
  .video-js:fullscreen ~ .seek-feedback-container .seek-feedback-icon {
    font-size: 1.6em;
  }
  
  body.vjs-full-window .seek-feedback-text,
  .video-js:fullscreen ~ .seek-feedback-container .seek-feedback-text {
    font-size: 1em;
  }
}

@media (max-width: 410px) {
  .seek-feedback-container {
    height: 134px;
    top: calc(50% - 16px); 
  }

  .seek-feedback-icon {
    font-size: 1.1em;
  }
  
  .seek-feedback-text {
    font-size: 0.8em;
  }
  
  
  
  .seek-feedback-container.left .seek-feedback-background,
  .seek-feedback-container.left .seek-feedback-ripple {
    border-radius: 0 120px 120px 0;
  }
  
  .seek-feedback-container.right .seek-feedback-background,
  .seek-feedback-container.right .seek-feedback-ripple {
    border-radius: 120px 0 0 120px;
  }
  
  
  body.vjs-full-window .seek-feedback-container,
  .video-js:fullscreen ~ .seek-feedback-container {
    height: 200px;
  }
  
  body.vjs-full-window .seek-feedback-icon,
  .video-js:fullscreen ~ .seek-feedback-container .seek-feedback-icon {
    font-size: 1.5em;
  }
  
  body.vjs-full-window .seek-feedback-text,
  .video-js:fullscreen ~ .seek-feedback-container .seek-feedback-text {
    font-size: 0.95em;
  }
}

@media (max-width: 375px) {
  .seek-feedback-container {
    height: 118px;
  }
  
  .seek-feedback-icon {
    font-size: 1em;
  }
  
  .seek-feedback-text {
    font-size: 0.7em;
  }
  
  
  body.vjs-full-window .seek-feedback-container,
  .video-js:fullscreen ~ .seek-feedback-container {
    height: 180px;
  }
  
  body.vjs-full-window .seek-feedback-icon,
  .video-js:fullscreen ~ .seek-feedback-container .seek-feedback-icon {
    font-size: 1.4em;
  }
  
  body.vjs-full-window .seek-feedback-text,
  .video-js:fullscreen ~ .seek-feedback-container .seek-feedback-text {
    font-size: 0.9em;
  }
}






.video-js.vjs-fullscreen .vjs-progress-control {
  position: absolute !important;
  
  width: calc(100% - 28.7em) !important;
  
  left: 17.75em !important;
  right: 11em !important;
  bottom: 40% !important;
  height: 0.6em !important;
  margin: 0 !important;
  z-index: 999999 !important;
  transition: none !important;
}




.video-js.vjs-fullscreen .vjs-progress-control.volume-hover-fast {
  left: calc(17.75em + 90px) !important;
  width: calc(100% - 28.7em - 90px) !important;
  right: 17.75em !important;
  transition: left 0.15s ease-out, width 0.15s ease-out !important;
}

.video-js.vjs-fullscreen .vjs-progress-control.volume-hover-slow {
  left: 17.75em !important;
  width: calc(100% - 28.7em) !important;
  right: 17.75em !important;
  transition: left 0.65s ease-in-out, width 0.65s ease-in-out !important;
}


.video-js::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 120px !important;
    pointer-events: none !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent) !important;
    z-index: 1 !important;
}



.video-screenshots-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  border-radius: 0px;
  overflow: hidden;
}

.video-screenshots-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.screenshot-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.screenshot-slide.active {
  opacity: 0.85;
}


.video-wra {
  position: relative;
  border-radius: 0px;

}


.video-js.vjs-playing .video-screenshots-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}


.video-js:not(.vjs-playing) .vjs-big-play-button:hover ~ .video-screenshots-overlay {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}





.anime_name {
  text-align: center;
  margin-top: 50px;
  font-family: "Comfortaa", arial;
  font-weight: 600;
  font-size: 9px;
  line-height: 26px;
  align-items: center;
  color: #000000;
}

.choice {
  font-family: Copperplate;
  font-weight: 300;
  font-size: 11px;
  margin-top: 120px;
  margin-left: 120px;
  display: none !important;
}

.under_name {
  text-align: center;
 
  font-family: "Comfortaa", arial;
  font-weight: 600;
  font-size: 9px;
  line-height: 26px;

  align-items: center;
  color: rgba(0, 0, 0, 0.6);
}

.back_buttom {
  width: 146px;
  height: 50px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fcd2d9;
  text-align: center;
  font-family: var(--jura-21-regular-family);
  font-size: 15px;
  font-weight: 300;
  line-height: var(--jura-21-regular-line-height);
}

.buttonto {
  
  margin-top: 350px;
  margin-left: 390px;
  width: 85px;
  height: 15px;
  border: none;
  outline: none;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  
  font-family: "Comfortaa", arial;
  font-weight: 600;
  font-size: 15px;
  
  padding: 12px 16px;
  border-radius: 5px;
  color: #000000;
}

.txt_anime_movies {
  display: none;
}

#next_buttom {
  margin-left: 411px;
}

#all_series {
  width: 190px;
  height: 15px;
  margin-left: -430px;

}


.buttonto i {
  margin-right: 4px;
}
.buttonto + .buttonto {
  margin-left: 6px;
}
.buttonto.color {
  background: #fcd2d9;
}
.buttonto.color.purple {
  background: #ebd0ef;
}

.buttonto:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.buttonto:hover.color {
  background: #f9c7cf;
}
.buttonto:hover.color.purple {
  background: #e6c1ec;
}
E0BDE5 .buttonto:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}








.episode {
box-sizing: border-box;
text-align: center;
float: left;
  font-family: Copperplate;
  font-weight: 300;
  font-size: 13px;
  text-decoration: none;
  color: black;
  position: relative;
  margin: 15px 0 0 0px;

}

.episode a {
  font-family: Copperplate;
  font-weight: 300;
  font-size: 15px;
  text-decoration: none;
  color: black;
}

.episode span {
  margin-top: -10px;
}

.btn_prev span {
  font-family: Copperplate;
  font-weight: 300;
  font-size: 15px;
  text-decoration: none;
  color: black;
}

.btn_all span {
  font-family: Copperplate;
  font-weight: 300;
  font-size: 15px;
  text-decoration: none;
  color: black;
}


.episode button {
  border-color: #ffffff;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 11px;
  border-radius: 2px;
  background-color: #FCD2D9;
  
}

.episode button:hover {
  background-color: #F9DFE3;
}

#all_episode_butt {
  cursor: pointer;
  width: 250px;

  border-radius: 2px;
  background-color: #EBD0EF;
  margin: 0 auto !important;
}

#all_episode_butt:hover {
  background-color: #FBDFFF
}

.back_next_button {
  margin-top: 26px;
}

.back_next_button #all_episode_butt {
  margin-left: auto;
  margin-right: auto;
}


.player-frame {
     
  margin: 58px auto 0;       
       
  padding: 5px 48px;         

  padding-bottom: 70px;
}


.video-wrap {
  position: relative;
  width: 100%;
  height: 390px;
  margin: 0 auto;
 max-width: 690px;   
}




.video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0px;
  display: block;
  background: #000; 
}

.main_player_content {
  max-width: 640px; 
  margin: 0 auto;    
}



.back_next_button {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "prev all next";
  align-items: center;
  gap: var(--adaptive-gap, 84px); 
  position: relative;
  margin: 10px auto 0;
  max-width: 690px;
}







.episode .btn_prev {
  background-color: #FCD2D9;
  color: #000;
}
.episode .btn_prev:hover {
  background-color: #F9DFE3;
}




#all_episode_butt {
  background-color: #EBD0EF;
  color: #000;

}
#all_episode_butt:hover {
  background-color: #FBDFFF;
}

.title { color: #fff; }



#translation-selector {
  margin: 20px 0;
  padding: 0;
}

.translation-tabs {
	box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 25px 20px;
  
  background: rgba(25, 25, 30, 0.95);
  border-radius: 0px; 
  border: 1px solid rgba(60, 60, 70, 0.6);
  transition: none; 
}

#translation-selector {
  margin-top: 20px !important; 
}

.translation-label {
  color: rgba(200, 200, 210, 0.9);
  font-family: "Comfortaa", arial;
  font-weight: 600;
  font-size: 13px;
  margin-right: 8px;
  white-space: nowrap;
}

.translation-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.translation-btn {
  width: 183px;
  height: 35px;
  background: rgba(40, 40, 50, 1);
  color: rgba(180, 180, 190, 1);
  border: 1px solid rgba(70, 70, 80, 0.8);
  border-radius: 0px;
  cursor: pointer;
  font-family: "Comfortaa", arial;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  
  white-space: normal; 
  word-wrap: break-word; 

}



.translation-btn:hover {
  
  background: rgba(55, 55, 65, 1);
  color: rgba(220, 220, 230, 1);
}

.translation-btn.active {
  
  background: #EBD0EF;
  color: rgba(30, 30, 35, 1);
  border-color: #EBD0EF;
  font-weight: 600;
  opacity: 0.9;
}

.translation-btn.loading {
  opacity: 0.6;
  pointer-events: none;
  background: rgba(60, 60, 70, 1);
  cursor: wait;
}

.translation-btn.loading::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(120, 120, 130, 0.3);
  border-top: 2px solid rgba(200, 150, 180, 0.8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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









.video-js {
    
}


.video-js .vjs-control-bar {
    background: transparent !important;
    
    z-index: 2 !important;
    font-size: 1.5em !important;
}


.video-js .vjs-progress-control {
    z-index: 99999 !important;
}



.video-js .vjs-play-progress {
    background-color: #EBD0EE !important;
}

.video-js .vjs-volume-level {
    background-color: #EBD0EE !important;
}



.video-js .vjs-volume-bar {
    background-color: rgba(235, 208, 238, 0.3) !important;
}


.video-js .vjs-load-progress {
    background-color: rgba(235, 208, 238, 0.5) !important;
}






.video-js .vjs-progress-control{
  position:absolute!important;
  left:0; right:0; width:100%!important;
  bottom: calc(100% + 0.1em); 
  height:.5em!important;
  margin:0!important;
  z-index:3;
}

.video-js .vjs-control-bar{
  
}


.video-js:not(.vjs-fullscreen) .vjs-progress-control {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important; 
  width: 100% !important;
  top: -0.5em !important; 
  height: 0.5em !important;
  margin: 0 !important;
  z-index: 3 !important;

}





.video-js .vjs-custom-control-spacer{flex:1 1 auto!important}




.video-js .vjs-quality-selector,
.video-js .vjs-fullscreen-control{
  margin-left:auto!important;   
  order:999!important;          
}








.video-js .vjs-progress-holder{margin:0px !important; height:70%!important;}

.video-js .vjs-progress-holder:hover {

height:100%!important;
}




.video-js .vjs-quality-selector { position: absolute !important; right: 3.2em; bottom: 0; }


.video-js .vjs-fullscreen-control { position: absolute; right: 0; bottom: 0; }









.video-js .vjs-quality-selector:hover .vjs-menu {
  display: block;
}



.video-js .vjs-quality-selector .vjs-menu {
  
  width: 5.3em !important;
  
  left: 50% !important;
  transform: translateX(-50%) !important;
  
  z-index: 4;
}


.video-js .vjs-quality-selector .vjs-menu-item {
  
  font-family: 'Copperplate';
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(220, 220, 230, 1) !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease;
  padding: 0.5em 1.2em !important; 
  line-height: 1.4 !important;
  text-align: center;
}


.video-js .vjs-quality-selector .vjs-menu-item.vjs-selected {
  background-color: #EBD0EF !important; 
  color: rgba(30, 30, 35, 1) !important;
  font-weight: 600 !important;
}


.video-js .vjs-quality-selector .vjs-menu-item:hover:not(.vjs-selected) {
  background-color: rgba(55, 55, 65, 1) !important;
}



.video-js .vjs-quality-selector.vjs-lock-showing .vjs-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}






.video-js.vjs-fullscreen .vjs-quality-selector .vjs-menu {
  
  width: 6em !important; 
}


.video-js.vjs-fullscreen .vjs-quality-selector .vjs-menu-item {
  
  font-size: 16px !important; 
  padding: 0.5em 1.5em !important;
  left: 19px;
}

.video-js .vjs-fullscreen-control {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: background-color 0.2s ease;
  border-radius: 2px;
}

.video-js .vjs-fullscreen-control:hover {
  
}



.video-js.vjs-hide-native-time .vjs-current-time,
.video-js.vjs-hide-native-time .vjs-time-divider,
.video-js.vjs-hide-native-time .vjs-duration { display:none !important; }

.video-js .vjs-compact-time{
  font-family: inherit; font-size: 1em; opacity:.9; padding:0 .6em;
}


.video-js.vjs-hide-native-time .vjs-current-time,
.video-js.vjs-hide-native-time .vjs-time-divider,
.video-js.vjs-hide-native-time .vjs-duration { display: none !important; }

.video-js .vjs-compact-time { 
  vertical-align: bottom; padding-top: 0.8em; 
  font-family: 'Copperplate';
  font-size: 1.05rem;
}




.video-js .vjs-big-play-button {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    
    width: 3em !important;
    height: 3em !important;
    border-radius: 50% !important;
    
    
    background: rgba(255, 255, 255, 0.25) !important; 
    border: 2px solid rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(4px) !important;
    transition: all 0.3s ease !important;
    
    
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    
    
    z-index: 10 !important;
}


.video-js .vjs-big-play-button:hover {
    background: rgba(255, 255, 255, 0.4) !important; 
    border-color: rgba(255, 255, 255, 0.9) !important; 
    transform: translate(-50%, -50%) scale(1.1) !important;
}


.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: '' !important;
    display: none !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::after {
    content: '\f04b' !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 1.3em !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    line-height: 1 !important;
    
    position: relative !important;
    left: 0.08em !important;
    
}






.video-js .vjs-big-play-button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}



.video-js:not(.vjs-playing):not(.vjs-user-has-played) .vjs-loading-spinner {
  display: none !important;
}

.video-js:not(.vjs-playing):not(.vjs-user-has-played) .vjs-big-play-button .vjs-loading-spinner {
  display: none !important;
}


.video-js:not(.vjs-playing) .vjs-big-play-button.vjs-seeking,
.video-js:not(.vjs-playing) .vjs-big-play-button.vjs-waiting {
  background: rgba(255, 255, 255, 0.25) !important;
}

.video-js:not(.vjs-playing) .vjs-big-play-button.vjs-seeking::before,
.video-js:not(.vjs-playing) .vjs-big-play-button.vjs-waiting::before {
  display: none !important;
}


.video-js:not(.vjs-playing) .vjs-loading-spinner,
.video-js:not(.vjs-playing) .vjs-seeking-spinner {
  opacity: 0 !important;
  visibility: hidden !important;
}





.video-js .vjs-progress-control {
  position: absolute !important;
  left: 0; 
  right: 0; 
  width: 100% !important;
  bottom: calc(100% + 0.7em); 
  height: 0.5em !important;
  margin: 0 !important;
  z-index: 3;
}










.video-js .vjs-control-bar {
  margin-bottom: 5px;
}

.video-js.vjs-fullscreen .vjs-control-bar {
  margin-bottom: 0px;
}









.video-js:not(.vjs-has-started) .vjs-tech,
.video-js:not(.vjs-has-started) video {
  opacity: 0 !important;

  background: transparent !important;
}


.video-js.vjs-has-started .vjs-tech,
.video-js.vjs-has-started video {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease !important;
}


.video-js .vjs-poster {
  display: none !important;
}




.vjs-progress-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.vjs-progress-marker {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;

}

.vjs-progress-marker.intro {
  background-color: rgba(90, 90, 90, 0.6) !important;
border: 1px solid rgba(90, 90, 90, 0.8) !important;
}

.vjs-progress-marker.outro {
  background-color: rgba(90, 90, 90, 0.6) !important;
border: 1px solid rgba(90, 90, 90, 0.8) !important;
}


.video-js.vjs-fullscreen .vjs-progress-marker {


}


.video-js .vjs-progress-control .vjs-play-progress:before {
  z-index: 2;
}

.vjs-progress-markers {
  overflow: hidden !important;

}


.vjs-progress-marker {
  pointer-events: auto !important; 
  cursor: pointer;
  font-family: 'Copperplate';
}

.vjs-progress-marker:hover {
  opacity: 1 !important;
  transform: scaleY(1.05);
  transition: all 0.2s ease;
}

.vjs-custom-marker-tooltip {

  font-size: 14px !important; 
  font-weight: 600 !important;
  color: white !important;
  
  border-radius: 4px !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.7) !important;
  pointer-events: none !important;
  background-color: rgba(0, 0, 0, 0.9) !important; 
}

.vjs-mouse-display.marker-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}




.video-js:not(.vjs-fullscreen) .vjs-custom-marker-tooltip {
  font-size: 13px !important; 
  padding: 4px 8px !important; 
  margin-bottom: 6px !important; 
  border-radius: 3px !important; 
  background-color: rgba(0, 0, 0, 0.85) !important; 
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important; 
}


.video-js:not(.vjs-fullscreen) .vjs-progress-marker {
  border-radius: 2px !important; 
  opacity: 0.8 !important; 
}

.video-js:not(.vjs-fullscreen) .vjs-progress-marker:hover {
  opacity: 1 !important;
  transform: scaleY(1.02) !important; 
}






@media (max-width: 768px) {
  
  .video-js:not(.vjs-fullscreen) .vjs-custom-marker-tooltip {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }
  
  
  .video-js.vjs-fullscreen .vjs-custom-marker-tooltip {
    font-size: 16px !important;
    padding: 6px 10px !important;
  }
}


@media (min-width: 769px) and (max-width: 1024px) {
  
  .video-js:not(.vjs-fullscreen) .vjs-custom-marker-tooltip {
    font-size: 13px !important;
    padding: 5px 9px !important;
  }
  
  
  .video-js.vjs-fullscreen .vjs-custom-marker-tooltip {
    font-size: 17px !important;
    padding: 7px 12px !important;
  }
}




.vjs-custom-marker-tooltip {
  transition: font-size 0.3s ease, padding 0.3s ease, margin 0.3s ease !important;
}

.vjs-progress-marker {
  transition: opacity 0.3s ease, transform 0.3s ease, border-radius 0.3s ease !important;
}


.video-js:not(.vjs-fullscreen) .vjs-progress-control {
  left: 2px !important;
  right: 10px !important;
  width: calc(100% - 8px) !important;
}





.video-js {
  --progress-padding: 6px; 
}










/*.video-wra {
  
  width: 100%;
  aspect-ratio: 16/9; 

  background: #000;
  position: relative;


}*/

.video-js .vjs-quality-selector .vjs-menu-button { width: 3.5em !important; }





.video-js:not(.vjs-has-started) {
  cursor: pointer !important;
}

.video-js:not(.vjs-has-started):hover .vjs-big-play-button {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}














.video-js .vjs-picture-in-picture-control {
  display: none !important;
  visibility: hidden !important;
}


.video-js .vjs-pip-control {
  font-family: inherit !important;
  position: absolute !important;
  right: 6.4em !important;
  z-index: 1000 !important;
}

.video-js .vjs-pip-control svg {
  vertical-align: middle !important;
  display: block !important;
}

.video-js .vjs-pip-control .vjs-icon-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}


.video-js .vjs-pip-control::before,
.video-js .vjs-pip-control::after {
  display: none !important;
}


.video-js.vjs-fullscreen .vjs-pip-control {
  right: 9.6em !important;
}


.video-js [class*="picture-in-picture"]:not(.vjs-pip-control) {
  display: none !important;
}




/* Адаптивные кнопки пропуска - ОРИГИНАЛЬНЫЕ СТИЛИ ПО УМОЛЧАНИЮ */


/* Адаптивные кнопки пропуска - ОРИГИНАЛЬНЫЕ СТИЛИ ПО УМОЛЧАНИЮ */
/* Адаптивные кнопки пропуска - БЕЗ !important */



/* Центральная кнопка play/pause для мобильных */
.vjs-mobile-center-play-button {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  
  width: 6em !important;
  height: 6em !important;
  border-radius: 50% !important;
  
  background: rgba(255, 255, 255, 0.25) !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(4px) !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  cursor: pointer !important;
  z-index: 10 !important;
  
  pointer-events: auto !important;
  
  /* ПЛАВНЫЙ ПЕРЕХОД */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.vjs-mobile-center-play-button:hover {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.vjs-mobile-center-play-button i {
  font-size: 2.6em !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vjs-mobile-center-play-button i.fa-play {
  padding-left: 0.15em !important;
}

/* ПОКАЗЫВАЕМ ВМЕСТЕ С КОНТРОЛАМИ */
.video-js.vjs-mobile-device.vjs-user-active .vjs-mobile-center-play-button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ПОКАЗЫВАЕМ КОГДА НА ПАУЗЕ */
.video-js.vjs-mobile-device.vjs-paused .vjs-mobile-center-play-button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* СКРЫВАЕМ КОГДА ВОСПРОИЗВЕДЕНИЕ И БЕЗДЕЙСТВИЕ */
.video-js.vjs-mobile-device.vjs-playing.vjs-user-inactive .vjs-mobile-center-play-button {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* СКРЫВАЕМ ДО ПЕРВОГО НАЖАТИЯ */
.video-js.vjs-mobile-device:not(.vjs-has-started) .vjs-mobile-center-play-button {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ============================================
   ГЛОБАЛЬНЫЙ CSS RESET & БАЗОВЫЕ СТИЛИ
   ============================================ */

/* 1️⃣ BOX-SIZING: BORDER-BOX
   За что: Упрощает расчёты ширины и высоты
   Без этого: Padding и border добавляются к размеру элемента
   Результат: Более предсказуемая верстка, меньше багов
   Браузеры: Все современные (IE8+)
*/


/* 2️⃣ УБИРАЕМ ДЕФОЛТНЫЕ ОТСТУПЫ
   За что: Разные браузеры имеют разные margin/padding по умолчанию
   Без этого: На разных браузерах элементы смещены по-разному
   Результат: Единообразный вид на всех браузерах
   Браузеры: Все

* {
  margin: 0;
  padding: 0;
}*/

/* 3️⃣ НАСЛЕДОВАНИЕ ШРИФТА ДЛЯ ФОРМ
   За что: input, button, textarea, select не наследуют шрифт по умолчанию
   Без этого: Форма имеет другой шрифт, чем остальной сайт
   Результат: Единый шрифт везде на сайте
   Браузеры: Все
*/


/* 6️⃣ УБИРАЕМ TAP HIGHLIGHT НА МОБИЛЬНЫХ
   За что: Chrome и Safari добавляют синий highlight при тапе
   Без этого: Синий квадрат при каждом нажатии (уже это сделали!)
   Результат: Чистый вид на мобильных
   Браузеры: Chrome, Safari, Edge на мобильных
*/
* {
  -webkit-tap-highlight-color: transparent;
}



/* 🔟 УБИРАЕМ ДЕФОЛТНЫЙ СТИЛЬ ССЫЛОК
   За что: Браузеры добавляют подчеркивание и синий цвет
   Без этого: Все ссылки синие и подчёркнутые
   Результат: Чистый холст для своего дизайна
   Браузеры: Все
*/
a {
  color: inherit;
  text-decoration: none;
}


/* 1️⃣2️⃣ УБИРАЕМ ДЕФОЛТНЫЙ СТИЛЬ СПИСКОВ
   За что: ul/ol имеют дефолтные bullets и indent
   Без этого: Список с точками и отступом
   Результат: Чистый список без украшений
   Браузеры: Все
*/
ul,
ol {
  list-style: none;
}

/* 1️⃣3️⃣ ОТКЛЮЧАЕМ МАСШТАБИРОВАНИЕ НА DOUBLE TAP
   За что: На iOS при двойном тапе происходит zoom
   Без этого: Пользователь может случайно увеличить сайт
   Результат: Контролируешь масштабирование
   Браузеры: iOS Safari
*/
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* 1️⃣5️⃣ УЛУЧШЕННЫЙ РЕНДЕРИНГ ШРИФТОВ
   За что: Делает шрифты гладче и чётче
   Без этого: Шрифты выглядят размытыми на Mac/Linux
   Результат: Лучший внешний вид текста
   Браузеры: Chrome, Safari, Firefox
*/
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* 
@media screen and (max-width: 620px) {
  .vjs-mobile-center-play-button {
    width: 3em !important;
    height: 3em !important;
  }
  
  .vjs-mobile-center-play-button i {
    font-size: 1.3em !important;
  }
}

@media screen and (max-width: 465px) {
  .vjs-mobile-center-play-button {
    width: 2.7em !important;
    height: 2.7em !important;
  }
  
  .vjs-mobile-center-play-button i {
    font-size: 1.2em !important;
  }
}

@media screen and (max-width: 410px) {
  .vjs-mobile-center-play-button {
    width: 2.5em !important;
    height: 2.5em !important;
  }
  
  .vjs-mobile-center-play-button i {
    font-size: 1.1em !important;
  }
}

@media screen and (max-width: 375px) {
  .vjs-mobile-center-play-button {
    width: 2.3em !important;
    height: 2.3em !important;
  }
  
  .vjs-mobile-center-play-button i {
    font-size: 1em !important;
  }
}
Адаптивные размеры для разных экранов */
.video-js .vjs-play-control .vjs-icon-placeholder::before {
  content: '\f04b' !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 1.3em !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    line-height: 1 !important;
    
    position: relative !important;
    left: 0.08em !important;
}

.video-js.vjs-playing .vjs-play-control .vjs-icon-placeholder::before {
  content: "\f04c" !important;
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 1.3em !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    line-height: 1 !important;
    
    position: relative !important;
    left: 0.08em !important;
}


@media screen and (max-width: 720px) {

.video-js .vjs-picture-in-picture-control {
    display: none !important;
    visibility: hidden !important;
  }

.video-js .vjs-pip-control {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

.video-js.vjs-fullscreen .vjs-picture-in-picture-control {
    display: none !important;
    visibility: hidden !important;
  }

  .video-js.vjs-fullscreen .vjs-pip-control {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }


.main_player_content {
  max-width: 530px; 
  margin: 0 auto;    
}

.player-frame {
  width: max(620px, calc(100vw - 120px)); 

  padding: 5px 0px;   
   
}




.translation-btn {
  width: 158px;
  height: 33px;
}





.btn_prev span { 
  font-size: 14px;
}

.btn_all span {
  font-size: 15px;
}


.episode {
  font-size: 15px;
}

.episode a {
  font-size: 15px;
}

.episode button {
  padding: 10px;
}

#all_episode_butt {
  width: 210px;
}

.anime_name {
  font-size: 8px;
}

.video-js .vjs-big-play-button {
    width: 2.6em !important;
    height: 2.6em !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::after {
    font-size: 1.05em !important;
}



.video-js .vjs-control-bar {
    font-size: 1.2em !important; 
  }
  
  
  .video-js.vjs-fullscreen .vjs-control-bar {
    font-size: 1.5em !important;
  }

.video-js .vjs-compact-time {
    font-size: 0.83rem !important; 
  }

.video-js.vjs-fullscreen .vjs-compact-time {
    font-size: 1.05rem !important;
  }


.video-js.vjs-fullscreen .vjs-progress-control {
  position: absolute !important;
  
  width: calc(100% - 25em) !important;
}




.video-js.vjs-fullscreen .vjs-progress-control.volume-hover-fast {
  width: calc(100% - 25em - 90px) !important;
}

.video-js.vjs-fullscreen .vjs-progress-control.volume-hover-slow {
  width: calc(100% - 25em) !important;
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {
    font-size: 2.3em !important;
    margin-top: -5px;
  }


}


@media screen and (max-width: 620px) {
.main_player_content {
  max-width: 390px; 
  margin: 0 auto;    
}

.player-frame {
   width: 460px; 

 
}

.translation-btn {
  width: 112px;
  height: 30px;
}


.btn_prev span { 
  font-size: 13.5px;
}

.btn_all span {
  font-size: 14px;
}

.episode {
  font-size: 13.5px;
}

.episode a {
  font-size: 13.5px;
}


.episode button {
  padding: 8px;
}

#all_episode_butt {
  width: 135px;
}

.translation-btn {
  font-size: 10px;
}

.anime_name {
  font-size: 7px;
}

.video-js .vjs-big-play-button {
    width: 2.2em !important;
    height: 2.2em !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::after {
    font-size: 0.9em !important;
}

.translation-tabs {
  padding: 20px 20px;
}

.video-js .vjs-control-bar {
    font-size: 1em !important;
  }
  
  .video-js.vjs-fullscreen .vjs-control-bar {
    font-size: 1.3em !important;
  }

.video-js .vjs-compact-time {
    font-size: 0.7rem !important;
  }

 .video-js.vjs-fullscreen .vjs-compact-time {
    font-size: 0.9rem !important;
  }

 .video-js .vjs-control-bar .vjs-play-control {
    margin-right: -0.5em !important; 
  }
  

.video-js .vjs-quality-selector .vjs-menu {
  
  width: 5.3em !important;
}


.video-js .vjs-quality-selector .vjs-menu-item {
  
  font-size: 11px !important;
}

}


@media screen and (max-width: 465px) {
.main_player_content {
  max-width: 354px; 
  margin: 0 auto;    
}

.player-frame {
     width: max(400px, calc(100vw - 100px)); 
 
}

.translation-btn {
  width: 100px;
  height: 30px;
}


.btn_prev span { 
  font-size: 12px;
}

.btn_all span {
  font-size: 13px;
}

.episode {
  font-size: 13px;
}

.episode a {
  font-size: 12px;
}


.episode button {
  padding: 8px;
}

#all_episode_butt {
  width: 115px;
}

.translation-btn {
  font-size: 10px;
}

.anime_name {
  font-size: 6.3px;
}

.video-js .vjs-big-play-button {
    width: 2em !important;
    height: 2em !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::after {
    font-size: 0.8em !important;
}

.translation-tabs {
  padding: 17px 20px;
}


.video-js .vjs-control-bar {
    font-size: 0.9em !important;
  }
  
  .video-js.vjs-fullscreen .vjs-control-bar {
    font-size: 1.2em !important;
  }

.video-js .vjs-compact-time {
    font-size: 0.63rem !important;
  }

.video-js.vjs-fullscreen .vjs-compact-time {
    font-size: 0.85rem !important;
  }

.video-js .vjs-quality-selector .vjs-menu {
  
  width: 5.3em !important;
}


.video-js .vjs-quality-selector .vjs-menu-item {
  
  font-size: 10px !important;
}


.translation-btn {
  align-items: center;
  justify-content: center;
  user-select: none;
  padding: 8px 12px;
  
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.translation-btn {
    
   
    
    
    max-height: 55px; 
    
    padding: 1px 4px;
    
    
    white-space: normal;
    
    
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    
    
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    
    line-height: 1.4;
  }
  
  
  

  
  .video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {
    font-size: 2.3em !important;
    margin-top: -3.5px;
  }
  

}


@media screen and (max-width: 410px) {

.main_player_content {
  max-width: 297px; 
  margin: 0 auto;    
}

.player-frame {
  width: max(370px, calc(100vw - 80px)); 
  padding: 0px 0px;   
 
}


.video-js:not(.vjs-fullscreen) .vjs-progress-control {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    top: -0.4em !important; 
    height: 0.4em !important; 
    margin: 0 !important;
    z-index: 999 !important;
    pointer-events: auto !important;
  }

.translation-btn {
  width: 84px;
  height: 28px;

}


.btn_prev span { 
  font-size: 10.5px;
}

.btn_all span {
  font-size: 11px;
}

.episode {
  font-size: 9px;
}

.episode a {
  font-size: 10.5px;
}

.episode button {
  padding: 7px;
}


#all_episode_butt {
  width: 95px;
}

.translation-btn {
  font-size: 9px;
}

.anime_name {
  font-size: 5.5px;
}

.video-js .vjs-big-play-button {
    width: 1.8em !important;
    height: 1.8em !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::after {
    font-size: 0.67em !important;
}

.translation-tabs {
  padding: 15px 15px;
}

.video-js .vjs-control-bar {
    font-size: 0.8em !important;
  }
  
  .video-js.vjs-fullscreen .vjs-control-bar {
    font-size: 1.1em !important;
  }

.video-js .vjs-compact-time {
    font-size: 0.55rem !important;
  }

.video-js.vjs-fullscreen .vjs-compact-time {
    font-size: 0.8rem !important;
  }

.video-js .vjs-quality-selector .vjs-menu {
  
  width: 5.3em !important;
}


.video-js .vjs-quality-selector .vjs-menu-item {
  
  font-size: 9px !important;
}

.video-js .vjs-quality-selector .vjs-menu .vjs-menu-content {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }

}


@media screen and (max-width: 375px) {

.main_player_content {
  max-width: 268px; 
  margin: 0 auto;    
}

.player-frame {
   width: 320px; 
 
}

.translation-btn {
  width: 74.6px;
  height: 25px;
}


.btn_prev span { 
  font-size: 9.5px;
}

.btn_all span {
  font-size: 10px;
}

.episode a {
  font-family: Copperplate;
  font-weight: 300;
  font-size: 9.5px;
  text-decoration: none;
  color: black;
}

.episode button {
  padding: 6px;
}

#all_episode_butt {
  width: 80px;
}

.translation-btn {
  font-size: 8px;
}

.anime_name {
  font-size: 5px;
}

.video-js .vjs-big-play-button {
    width: 1.8em !important;
    height: 1.8em !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::after {
    font-size: 0.67em !important;
}

.translation-tabs {
  padding: 15px 15px;
}

.video-js .vjs-quality-selector .vjs-menu-item {
  
  font-size: 8px !important;
}


}





:root {
  
  --black: rgba(0, 0, 0, 1);

  --pale-violet-red: rgba(204, 126, 139, 1);
  --transparent-hot-pink: rgba(252, 118, 179, 0.62);
  --transparent-sandy-brown: rgba(250, 205, 104, 0.68);
  --transparent-white: rgba(255, 255, 255, 0.6);

  
  
  --jura-13-bold-family: "Jura";
  --jura-13-bold-size: 13px;
  --jura-13-bold-weight: 700;
  --jura-13-bold-line-height: normal;

  
  --jura-13-medium-family: "Jura";
  --jura-13-medium-size: 13px;
  --jura-13-medium-weight: 500;
  --jura-13-medium-line-height: normal;

  
  --jura-22-bold-family: "Jura";
  --jura-22-bold-size: 22px;
  --jura-22-bold-weight: 700;
  --jura-22-bold-line-height: normal;

  
  
  
  --jura-20-regular-family: "Jura";
  --jura-20-regular-size: 20px;
  --jura-20-regular-weight: 400;
  --jura-20-regular-line-height: normal;

  
  --jura-20-semi-bold-family: "Jura";
  --jura-20-semi-bold-size: 20px;
  --jura-20-semi-bold-weight: 600;
  --jura-20-semi-bold-line-height: normal;

  
  --jura-21-regular-family: "Jura";
  --jura-21-regular-size: 21px;
  --jura-21-regular-weight: 500;
  --jura-21-regular-line-height: normal;

  
  --jura-22-bold-family: "Jura";
  --jura-22-bold-size: 22px;
  --jura-22-bold-weight: 700;
  --jura-22-bold-line-height: normal;

  
  --jura-22-medium-family: "Jura";
  --jura-22-medium-size: 22px;
  --jura-22-medium-weight: 500;
  --jura-22-medium-line-height: normal;

  
  --jura-30-bold-family: "Jura";
  --jura-30-bold-size: 30px;
  --jura-30-bold-weight: 700;
  --jura-30-bold-line-height: normal;

  
  --jura-30-semi-bold-family: "Jura";
  --jura-30-semi-bold-size: 30px;
  --jura-30-semi-bold-weight: 600;
  --jura-30-semi-bold-line-height: normal;

  
  --plyr-color-main: #dc8f9c;
  --plyr-font-weight-regular: 400;
  --plyr-video-control-background-hover: #252525;
  --plyr-font-weight-bold: 1000;
  --plyr-font-weight-regular: 500;
  --plyr-badge-border-radius: 100px;
  --plyr-control-play-size: 28px;
}