@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');


 .box-player {
   display: block !important;
   z-index: 1;
   width: 100%;
   height: 100%;
   opacity: 1;
   transition: opacity 0.5s ease;
   position: absolute;
   z-index: 9999999999999999;
 }




 .box-bar-progress {
   width: 100%;
   height: auto;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   top: 100%;
   left: 50%;
   padding: 0 16px 0 16px;
   transform: translate(-50%, -533%);
 }

 #bar-progress {
   width: 60%;
   height: 4.5px;
   position: absolute;
   appearance: none;
   background: #003cff;
   border-radius: 50px;
   z-index: 2;
 }

 #bar-progress2 {
   width: 100%;
   height: 4.5px;
   position: relative;
   appearance: none;
   background: #4F4F4F;
   border-radius: 50px;
   z-index: 1;
 }





 .controls {
   width: 100%;
   height: 100%;
   display: inline-flex;
   justify-content: center;
   align-items: flex-start;
   z-index: 1000000;
 }



 :root {
   --body: #09090b;
   --primary: #09090b;
   --secondary: #27272a;
   --white: #ffffff;
   --red: #ba181b;
   --green: #37f1a3;
 }











 /* ============================================================
    MAPA DE CLASSES VIDEO.JS
   ============================================================ */

 /* O container principal que envolve todo o player */
 .video-js {
   font-family: 'Poppins', sans-serif !important;
   font-weight: 500 !important;
 }

 #direct-player {
   object-fit: contain;
   object-fit: cover;
 }

 #direct-player.fullscreen-chat .vjs-tech {
   width: calc(100% - 30%) !important;
   /* Serve para: Controlar o ajuste do vídeo (object-fit) */
 }

 /* remove o brilho quando estao com focu */
 .vjs-control:focus,
 .vjs-button:focus {
   outline: none !important;
   box-shadow: none !important;
   text-shadow: none !important;
 }

 .video-js *:focus {
   outline: none !important;
   box-shadow: none !important;
 }








 /*****************************************
  CUSTOMIZACAO: BOTAO GRANDE DE PLAY
 ******************************************/

 .video-js .vjs-big-play-button {
   border: none !important;
   background-color: #37f1a3 !important;
   height: 50px !important;
   width: 50px !important;
   border-radius: 50% !important;
   top: 50% !important;
   left: 50% !important;
   display: none !important;
   transform: translate(-50%, -50%) !important;
   margin: 0 !important;
 }

 #direct-player.fullscreen-chat .vjs-big-play-button {
   left: calc((100% - 30%) / 2) !important;
 }

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









 /*****************************************
  CUSTOMIZACAO: SPINNER
 ******************************************/


 /* esconde o design padrao antigo do Video.js */
 .video-js .vjs-loading-spinner {
   display: none !important;
 }

 /* container do spinner */
 .video-js.vjs-waiting .vjs-loading-spinner {
   display: block !important;
   background: rgba(0, 0, 0, 0) !important;
   border-radius: 20px !important;
   border: none !important;
   width: 60px !important;
   height: 60px !important;
   opacity: 1 !important;
 }

 .video-js.vjs-waiting .vjs-loading-spinner.hidden-spinner {
   display: none !important;
 }

 /* anel interno animado */
 .video-js.vjs-waiting .vjs-loading-spinner::after {
   content: "" !important;
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%);
   width: 30px !important;
   height: 30px !important;
   margin-top: -12px !important;
   margin-left: -12px !important;
   border: 2px solid rgb(38, 42, 51) !important;
   border-top: 2.5px solid #37f1a3 !important;
   border-radius: 50% !important;
   animation: spin-animation 0.8s cubic-bezier(0, 0, 0, 0) infinite !important;
   display: block !important;
 }

 @keyframes spin-animation {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }











 /*****************************************
        BOTOES DENTRO DA BARRA
 ******************************************/


 .video-js .vjs-control-bar {
   background-color: rgba(0, 0, 0, 0.4) !important;
   backdrop-filter: blur(8px) brightness(2) saturate(1.5);
   -webkit-backdrop-filter: blur(15px);
   height: 50px !important;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
 }

 #direct-player.fullscreen-chat .vjs-control-bar {
   width: calc(100% - 30%) !important;
 }

 /* container do botao play */
 .vjs-play-control {
   background-color: rgba(255, 0, 0, 0) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   position: relative !important;
   top: 0 !important;
   left: 0 !important;
   transform: none !important;
   width: 50px !important;
   height: 100% !important;
   padding: 0 !important;
   margin: 0 !important;
   cursor: pointer;
 }

 .vjs-play-control::before {
   content: "";
   position: absolute;
   background-color: rgba(0, 0, 0, 0.6);
   transform: none;
   width: 62%;
   height: 62%;
   border-radius: 50%;
   padding: 0;
   margin: 0;
   cursor: pointer;
   z-index: 1;
 }

 /* o elemento interno (placeholder) */
 .vjs-play-control .vjs-icon-placeholder {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 100% !important;
   height: 100% !important;
   position: relative;
 }

 /* icone do play */
 .vjs-play-control .vjs-icon-placeholder:before {
   position: relative !important;
   top: 51% !important;
   line-height: 0 !important;
   font-size: 2.3em !important;
   color: #37f1a3 !important;
   margin: 0 !important;
   display: block !important;
   text-align: center !important;
   z-index: 2;
 }









 /*****************************************
  CUSTOMIZACAO: VOLUME
******************************************/


 /* container do volume */
 .vjs-volume-panel {
   background-color: rgba(255, 0, 0, 0) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   height: 100% !important;
 }

 .vjs-volume-panel .vjs-icon-placeholder:before {
   color: var(--green) !important;
   font-size: 2em !important;
   line-height: 0 !important;
   position: relative !important;
   top: 0 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
 }

 /* a barra de volume */
 .vjs-volume-level {
   border-radius: 10px !important;
   background-color: var(--green) !important;
 }

 .video-js .vjs-volume-panel {
   background-color: rgba(255, 0, 0, 0) !important;
   width: 50px !important;
   height: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   position: relative !important;
   /* Base para a barra subir */
 }

 /* a barra de volume (a que sobe) */
 .video-js .vjs-volume-control.vjs-volume-vertical {
   background-color: #0000009a !important;
   width: 30px !important;
   height: 100px !important;
   position: absolute !important;
   bottom: 110% !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   border-radius: 8px !important;
   display: none;
 }

 .video-js .vjs-volume-control.vjs-volume-vertical::before {
   content: "";
   position: absolute;
   background-color: transparent !important;
   width: 100% !important;
   height: 100% !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   border-radius: 8px !important;
   top: 5%;
 }

 .vjs-volume-panel:hover .vjs-volume-control {
   display: block !important;
 }

 .vjs-volume-bar.vjs-slider-vertical {
   width: 5px !important;
   height: 80px !important;
   margin: 10px auto !important;
   background-color: rgba(255, 255, 255, 0.2) !important;
   border-radius: 10px !important;
 }

 /* o nivel do volume (a parte preenchida) */
 .vjs-volume-level {
   background-color: var(--green) !important;
   width: 100% !important;
 }

 /* o PINGO' de arrastar */
 .vjs-volume-level:before {
   left: -0.2em !important;
   font-size: 1em !important;
   color: white !important;
 }







 /*****************************************
  CUSTOMIZACAO: BARRA DE PROGRESSO
******************************************/


 /* a barra de progresso (Linha do tempo) */
 /*  .vjs-progress-control { */
 /* serve para: altura da barra e centralizacao no meio */
 /*  } */

 /* a parte da barra que ja foi assistida */
 .vjs-play-progress {
   background: linear-gradient(to right, var(--green) 55%, rgb(0, 238, 255)) !important;
   border-radius: 10px;
 }

 /* a parte da barra que ja carregou (buffer) */
 .vjs-load-progress {
   background-color: rgba(255, 255, 255, 0.404) !important;
   border-radius: 10px;
 }

 /* 'PINGO' o circulo no fianl da barra */
 .video-js .vjs-play-progress:before {
   color: #fff !important;
   display: block !important;
 }

 .video-js .vjs-slider {
   background-color: rgba(0, 0, 0, 0.650) !important;
   border-radius: 10px;
 }

 /* o balao que segue o mouse */
 .video-js .vjs-mouse-display .vjs-time-tooltip {
   background-color: #0000009a !important;
   color: #fff !important;
   backdrop-filter: none !important;
 }

 .video-js .vjs-mouse-display .vjs-time-tooltip:after {
   border-top-color: #000000 !important;
 }

 /* o balao que fica fixo */
 .video-js .vjs-play-progress .vjs-time-tooltip {
   background-color: var(--green) !important;
   color: black !important;
   font-weight: bold !important;
   border-radius: 4px !important;
 }

 .video-js .vjs-play-progress .vjs-time-tooltip:after {
   border-top-color: var(--green) !important;
 }








 /*****************************************
  CUSTOMIZACAO: CONTROLES DE TEMPO
  - currentTime: Tempo decorrido
  - duration: Duracao total
******************************************/

 /* ocultar o tempo restante */
 .video-js .vjs-remaining-time {
   display: none !important;
 }

 /* defini a ordem dos elementos */
 .video-js .vjs-current-time {
   display: flex !important;
   align-items: center !important;
   order: 0;
 }

 .video-js .vjs-duration {
   display: flex !important;
   align-items: center !important;
   order: 1;
   /* posicao final */
 }

 .video-js .vjs-picture-in-picture-control,
 .video-js .vjs-fullscreen-control {
   order: 4;
   /* vem depois do spacer, mas antes da duracao */
 }









 /*****************************************
  CUSTOMIZACAO: BOTAO DE Picture-in-Picture
 ******************************************/


 /* botao de Picture-in-Picture (Janela flutuante) */
 .vjs-picture-in-picture-control {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 50px !important;
   height: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   position: relative !important;
   background-color: rgba(255, 0, 0, 0) !important;
 }

 /* centraliza o icone */
 .vjs-picture-in-picture-control .vjs-icon-placeholder {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 100% !important;
   height: 100% !important;
   line-height: 0 !important;
 }

 .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
   position: relative !important;
   top: 50% !important;
   /* Tamanho do icone */
   font-size: 1.5 !important;
   display: block !important;
   line-height: 0 !important;
 }









 /*****************************************
  CUSTOMIZACAO: BOTAO DE TELA CHEIA
 ******************************************/


 /* botao de Tela Cheia (Fullscreen) */
 .vjs-fullscreen-control {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 40px !important;
   height: 100% !important;
   position: relative !important;
   margin: 0 !important;
   padding: 0 !important;
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0) !important;
 }

 /* centraliza o icone */
 .vjs-fullscreen-control .vjs-icon-placeholder {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 100% !important;
   height: 100% !important;
   line-height: 0 !important;
 }

 .vjs-fullscreen-control .vjs-icon-placeholder:before {
   position: relative !important;
   top: 50% !important;
   font-size: 2em !important;
   display: block !important;
   line-height: 0 !important;
   text-align: center !important;
 }










 /* --- CLASSES DE ESTADO --- */

 /* Estilo aplicado quando o usuario nao mexe o mouse */
 /* Serve para: Sumir com a barra de ferramentas suavemente */
 /* .vjs-user-inactive {} */


 /* Estilo aplicado quando o video esta pausado */
 /* Serve para: Mostrar elementos especificos na pausa */
 /* .vjs-paused {} */


 /* Estilo aplicado quando da erro no video */
 /* Serve para: Mudar a cara da mensagem de "Video indisponivel" */
 /* .vjs-error-display {} */


 /* As legendas que aparecem na tela */
 /* Serve para: Mudar posicao e cor das legendas */
 /* .vjs-text-track-display {} */


 /* A imagem de capa (poster) que aparece antes do play */
 /* .vjs-poster {} */









 /*****************************************
  CUSTOMIZACAO: TITULO DO VIDEO
 ******************************************/


 /* Container do Titulo */
 .video-title-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 26px;
   background: linear-gradient(to bottom,
       rgba(0, 0, 0, 0.7) 0%,
       rgba(0, 0, 0, 0.66) 12%,
       rgba(0, 0, 0, 0.55) 26%,
       rgba(0, 0, 0, 0.4) 42%,
       rgba(0, 0, 0, 0.25) 58%,
       rgba(0, 0, 0, 0.12) 74%,
       rgba(0, 0, 0, 0.04) 88%,
       transparent 100%);
   pointer-events: none;
   opacity: 0;
   z-index: 9;
 }

 /* Texto do Titulo */
 .video-title-overlay h1 {
   color: rgba(255, 255, 255, 0.9) !important;
   font-family: "Poppins", sans-serif;
   font-size: 1.3em !important;
   font-weight: 500 !important;
   margin: 0;
   margin-top: -15px;
   margin-left: -13px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

 .video-js.vjs-user-active .video-title-overlay {
   opacity: 1;
 }

 .video-js.vjs-user-inactive .video-title-overlay {
   opacity: 0;
 }








 /*****************************************
  CUSTOMIZACAO: BOTOES DE SKIP
 ******************************************/


 .vjs-skip-backward-10,
 .vjs-skip-forward-10 {
   position: absolute !important;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
   border-radius: 50%;
   width: 40px !important;
   height: 40px !important;
   background: rgba(0, 0, 0, 0.4) !important;
   color: #37f1a3 !important;
   backdrop-filter: blur(10px);
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 0 !important;
   opacity: 0;
 }

 .video-js.vjs-user-active .vjs-skip-backward-10,
 .video-js.vjs-user-active .vjs-skip-forward-10 {
   opacity: 1;
 }

 .video-js.vjs-user-inactive .vjs-skip-backward-10,
 .video-js.vjs-user-inactive .vjs-skip-forward-10 {
   opacity: 0;
 }

 .vjs-skip-forward-10 {
   right: calc(50% - 34%);
 }

 .vjs-skip-backward-10 {
   left: calc(50% - 34%);
 }

 #direct-player.fullscreen-chat .vjs-skip-forward-10 {
   right: calc(30% + (50% - 34%) * 0.7) !important;
 }

 #direct-player.fullscreen-chat .vjs-skip-backward-10 {
   left: calc((50% - 34%) * 0.7) !important;
 }










 /*****************************************
  CUSTOMIZACAO: BOTAO DO CHOMACAST
 ******************************************/

 .vjs-web-video-caster-button {
   position: absolute !important;
   background-color: rgba(255, 0, 0, 0)(0, 0, 0) !important;
   height: 40px !important;
   width: 43px !important;
   top: 0 !important;
   right: 0;
   color: #37f1a3 !important;
   font-size: 1.8em !important;
   z-index: 10;
   opacity: 0;
 }

 #direct-player.fullscreen-chat .vjs-web-video-caster-button {
   right: 30% !important;
 }

 .video-js.vjs-user-active .vjs-web-video-caster-button {
   opacity: 1;
 }

 .video-js.vjs-user-inactive .vjs-web-video-caster-button {
   opacity: 0;
 }

 .vjs-web-video-caster-button:hover {
   color: #37f1a3 !important;
 }










 /*****************************************
  CUSTOMIZACAO: BOTAO DO CHAT
******************************************/


 .video-js .vjs-chat-button {
   position: absolute !important;
   height: 40px !important;
   width: 43px !important;
   top: 0 !important;
   right: 40px;
   z-index: 10;
   border: none;
   cursor: pointer;
   display: none;
   align-items: center;
   justify-content: center;
   opacity: 1;
 }

 #direct-player.fullscreen-chat .vjs-chat-button {
   right: calc(30% + 40px) !important;
 }

 .vjs-chat-button.animation-new-msg {
   display: flex;
   animation: fa-shake-and-fade 1s ease-in-out infinite;
 }

 .vjs-chat-button.new-msg::after {
   content: var(--dynamic-content, "1");
   background-color: #E1002D;
   position: absolute;
   top: 5px;
   right: 9px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 11.5px;
   height: 11.5px;
   border-radius: 50%;
 }

 .video-js.vjs-fullscreen.vjs-user-active .vjs-chat-button {
   opacity: 1 !important;
   display: flex !important;
 }

 .video-js.vjs-user-inactive .vjs-chat-button {
   opacity: 0;
   pointer-events: none;
 }









 @keyframes fa-shake-and-fade {
   0% {
     transform: translateX(0);
     opacity: 1;
   }

   9.375% {
     transform: translateX(-6px) rotate(-0.5deg);
   }

   18.75% {
     transform: translateX(5px) rotate(0.5deg);
   }

   28.125% {
     transform: translateX(-5px) rotate(-0.5deg);
   }

   37.5% {
     transform: translateX(4px) rotate(0.5deg);
   }

   46.875% {
     transform: translateX(-3px) rotate(-0.5deg);
   }

   56.25% {
     transform: translateX(2px) rotate(0.5deg);
   }

   65.625% {
     transform: translateX(-1px) rotate(-0.5deg);
   }

   75% {
     transform: translateX(0);
     opacity: 1;
   }

   100% {
     transform: translateX(0);
     opacity: 0;
     display: none;
   }
 }












 .wrapper-next-ep {
   background-color: #eeeeee;
   width: 126px;
   border-radius: 4px;
   position: absolute;
   bottom: 58px;
   right: 13px;
   display: none;
   align-items: center;
   justify-content: center;
   gap: 5px;
   font-size: 0.8rem;
   color: black;
   cursor: pointer;
 }

 #direct-player.fullscreen-chat .wrapper-next-ep {
   right: calc(30% + 40px) !important;
 }

 .wrapper-next-ep.next-ep-show {
   display: flex;
 }