@keyframes progressBar {   0% {   width: 0%;   }    100% {   width: 100%;   } }  .audio_muted_animation {   position: absolute;   padding: 5px !important; }  .audio_muted_animation svg {   width: 7rem; }  @-webkit-keyframes animation_audio {   0% {   opacity: 0;   }    33% {   opacity: 1;   }    66% {   opacity: 1;   }    100% {   opacity: 0;   } }  @keyframes animation_audio {   0% {   opacity: 0;   }    33% {   opacity: 1;   }    66% {   opacity: 1;   }    100% {   opacity: 0;   } }  .audio_muted_animation .animation_1 {   -webkit-animation: animation_audio 2s infinite;   animation: animation_audio 2s infinite;   opacity: 0; }  .audio_muted_animation .animation_2 {   -webkit-animation: animation_audio 2s infinite .3s;   animation: animation_audio 2s infinite .3s;   opacity: 0; }  .audio_muted_animation .animation_3 {   -webkit-animation: animation_audio 2s infinite .6s;   animation: animation_audio 2s infinite .6s;   opacity: 0; }  .audio_muted_animation .svganimation {   border: 4px solid red; }   .audio_muted_animation .svg-color-path-play {   fill: #ffffff !important; }  .audio_muted_animation svg {   vertical-align: middle; }  .message {   position: relative;   text-align: center;   font-size: 1.2rem;   font-weight: 500;   color: #ffffff; }  .button_pay_large_player_external {   position: absolute;   border: 2px solid rgb(6, 253, 109);   border-radius: 10px;   padding: 13px 20px;   font-size: 20px;   font-family: Poppins, sans-serif;   letter-spacing: 1px;   cursor: pointer;  box-shadow: 0 0 5px rgb(0, 255, 64);   transition: .5s;   z-index: 10000;   color: #fff;   background-color: rgb(0, 255, 64);   -webkit-animation: pulse_button_trigger_pay_new 1.5s infinite !important; }  .button_pay_large_player_external:hover {   color: #ffffff;   background-color: rgb(0, 255, 42);   filter: drop-shadow(0 0 10px rgb(0, 255, 55)) contrast(2) brightness(2); }  .button_pay_small_player_external {   position: absolute;   border: 1px solid rgb(6, 253, 109);   border-radius: 12px;   padding: 10px 22px;   font-size: 14px;   font-family: Poppins, sans-serif;   letter-spacing: 2px;   cursor: pointer;   font-weight: bold;   box-shadow: 0 0 5px rgb(6, 253, 109);   transition: .5s;   z-index: 10000;   color: #fff;   background-color: rgb(6, 253, 109);   -webkit-animation: pulse_button_trigger_pay_new 1.5s infinite; }  .button_pay_small_player_external:hover {   color: #fff;   background-color: rgb(6, 253, 109);   filter: drop-shadow(0 0 10px rgb(6, 253, 109)) contrast(2) brightness(2); }   @media (max-width: 350px) {    .audio_muted_animation svg {   width: 2rem !important;   } }  @media screen and (max-device-width: 640px) {    .audio_muted_animation svg {   width: 6rem !important;   }  }   @-webkit-keyframes pulse_button_muted_song {   0% {   transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);   }    70% {   transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);   }    100% {   transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);   } }   @-webkit-keyframes pulse_button_trigger_pay_new {   0% {   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   transform: scale(1);   }    70% {   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   transform: scale(1);   box-shadow: 0 0 0 10px rgba(90, 153, 212, 0) !important;   }    100% {   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   transform: scale(1);   box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);   } }   @-webkit-keyframes pulse_button_muted_song_x {   0% {   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   transform: scale(1);   }    70% {   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   transform: scale(1);   box-shadow: 0 0 0 10px rgba(90, 153, 212, 0);   }    100% {   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   transform: scale(1);   box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);   } }   @-webkit-keyframes pulsebuttonanimationframe {   0% {   -moz-transform: scale(.8);   -ms-transform: scale(.8);   -webkit-transform: scale(.8);   transform: scale(.8);  }   70% {   -moz-transform: scale(1);   -ms-transform: scale(1);   -webkit-transform: scale(1);   transform: scale(1);    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);   }   100% {   -moz-transform: scale(.8);   -ms-transform: scale(.8);   -webkit-transform: scale(.8);   transform: scale(.8);    box-shadow: 0 0 0 0px rgba(90, 153, 212, 0);   } }   body {   caret-color: transparent;   margin: 0;   padding: 0;   overflow: hidden;   width: 100%;   height: 100%;   display: flex;   background: transparent;   align-items: center;   justify-content: center;  }   :root {   --max-height: 100vh;   --muted-indicator-border-size: 2px;   --colorBtnPrincipal: #e60986;   --rangeBg: #747272; }   .systemcolor{   color: #e60986 !important; }  .buttons_controls {  background: none;   color: #ffffff;   outline: none;   margin: 0;   padding: 0;   border: none;   box-sizing: border-box; }  .buttons_controls, .inputs_controls { cursor: pointer; } #eplayvideo::-webkit-media-controls, #eplayvideo::-webkit-media-controls-enclosure {   display:none !important; }  #eplayvideo:-moz-full-screen + .video-controls {   bottom: 0; } #eplayvideo:-webkit-full-screen + .video-controls {   bottom: 0; }  .video-controls {   display: flex;   justify-content: space-around;   align-items: center;   position: absolute;   bottom: 15px;   left: 0;   z-index: 2000483647;   padding: 10px;   width: 100%;   border-radius:0px;   background-color: transparent; } .progress-video-container {   display: flex;   align-items: center;   position: relative;   width: 45%; } .time-video {   font-family: sans-serif;   font-size: 14px;   font-weight: bold;   color: var(--colorBtnPrincipal); } .progress-time { order: -1;}  .progress-video, .slide-volume-video {   background-image: linear-gradient(#e60986, #e60986);   background-repeat: no-repeat;   background-size: 0% 100%; }  .progress-video, .slide-volume-video {   width: 100%;   height: 10px;   margin: 0 10px;   -webkit-appearance: none;   border-radius: 4px;   outline: none;   background-color: #e7e7e7; } .progress-video::-moz-range-thumb, .slide-volume-video::-moz-range-thumb {   width: 15px;   height: 15px;   background-color: var(--colorBtnPrincipal);   border: none; } .slide-volume-video::-webkit-slider-thumb, .progress-video::-webkit-slider-thumb {   width: 15px;   height: 15px;   -webkit-appearance: none;   border-radius: 50%;   background-color: var(--colorBtnPrincipal); } .progress-video::-moz-range-track, .slide-volume-video::-moz-range-track {  height: 0;   background-color: var(--rangeBg);   border-radius: 4px; } .control-item { font-size: 16px; } .rewind { font-size: 18px; } .play-and-pause-video { font-size: 18px; } .slide-volume-video {   width: 60px;   display: none;   transition: display .2s ease-out;   margin-left: -2px; }  .audio-video-container:hover > .slide-volume-video{   display: inline-block; } .button_pay_small_player {  position: absolute; border: 1px solid #119c09; border-radius:12px; padding: 10px 22px; font-size: 14px; font-family: Poppins,sans-serif; letter-spacing: 2px; cursor: pointer; font-weight: bold;  box-shadow: 0 0 5px #119c09; transition: .5s; z-index: 10000; color: #ffffff; background-color: #119c09; -webkit-animation: pulse_button_trigger_pay_new 1.5s infinite; }  .button_pay_small_player:hover { color: #ffffff; background-color: #119c09; filter: drop-shadow(0 0 10px #119c09) contrast(2) brightness(2); } .button_pay_large_player {  position: absolute; border: 2px solid #119c09; border-radius:10px; padding: 13px 20px; font-size: 20px; font-family: Poppins,sans-serif; letter-spacing: 1px; cursor: pointer; font-weight: bold;  box-shadow: 0 0 5px #119c09; transition: .5s; z-index: 10000; color: #ffffff; background-color: #119c09; -webkit-animation: pulse_button_trigger_pay_new 1.5s infinite; }  .button_pay_large_player:hover { color: #ffffff; background-color: #119c09; filter: drop-shadow(0 0 10px #119c09) contrast(2) brightness(2); }  #muted-song{ box-shadow: 0px 2px 2px 2px #e60986; } .smart-player-muted-v1{ position:absolute; width:300px; height:80px; z-index: 1;  background-color:  #e60986;  border-radius: 10px; height: 140px; padding: 10px; text-align: center; top: 50%; left: 50%; margin-top: -5.21666em; margin-left: -9.9em; font-family: "Poppins", sans-serif; font-size: 0.9em; border: 0px solid rgba(175, 174, 174, 0.8) ; box-shadow: 0 0 0 0 rgba(90, 153, 212, 0); color: black; cursor: pointer;  opacity: 0.97;  -webkit-animation: pulse_button_muted_song_x 1.5s infinite;  z-index: 3; }  .smart-player-muted-v2{ position:absolute; width:175px; height:155px; z-index: 1;  background-color:  #e60986;;  border-radius: 10px; padding: 5px; text-align: center; top: 50%; left: 50%; margin-top: -5.21666em !important; margin-left: -6em !important; font-family: "Poppins", sans-serif; border: 0px solid rgba(175, 174, 174, 0.8) ; box-shadow: 0 0 0 0 rgba(90, 153, 212, 0); color: black; cursor: pointer;  opacity: 0.97;  -webkit-animation: pulse_button_muted_song_x 1.5s infinite;  z-index: 3; padding-top: 25px; }  .smart-player-muted-v3{ position:absolute; width:175px; height:155px; z-index: 1;  background-color:  #e60986;;  border-radius: 100px; padding: 5px; text-align: center; top: 50%; left: 50%; margin-top: -5.21666em !important; margin-left: -5.6em !important; font-family: "Poppins", sans-serif; border: 0px solid rgba(175, 174, 174, 0.8) ; box-shadow: 0 0 0 0 rgba(90, 153, 212, 0); color: black; cursor: pointer;  opacity: 0.97;  -webkit-animation: pulse_button_muted_song_x 1.5s infinite;  z-index: 3; padding-top: 25px; } .smart-player-muted-v4{   position:absolute;   width:100%;   height:100%;  background-color: transparent !important;  border-radius:0px;   padding: 0px;   text-align: center;   top: 0;   left:0;   font-family: "Poppins", sans-serif;   border: none;   color: black;   cursor: pointer;   z-index: 3;   padding-top: 18%; }   #eplay_wave { height: 70px; width: 70px; fill: #fff; }  .smart-player-muted-v2 > .message { margin-top: auto !important; font-size: 1rem !important; } .smart-player-muted-v3 > .message { margin-top: auto !important; font-size: 0.9rem !important; } .smart-player-muted-v4 > .message {   opacity: 1;   z-index: 90; }  .smart-player-muted-v4 > .block-muted-song {   opacity: 0.9   z-index: 10; } .smart-player-muted-v4 > #block-muted-song {   background-color:  #e60986; }  .smart-player-muted-v3 > .audio_muted_animation svg  { width: 77px; height: 77px; }  @keyframes eplay_wave { 0% { transform: scaleY(1); transform-origin: 50% 50%; }  50% { transform: scaleY(.7); transform-origin: 50% 50%; }  100% { transform: scaleY(1); transform-origin: 50% 50%; } } #Line_1 { animation: eplay_wave .5s infinite; }  #Line_2 { animation: eplay_wave 1s infinite; }  #Line_3 { animation: eplay_wave 1.5s infinite; }  #Line_4 { animation: eplay_wave 2s infinite; }  #Line_5 { animation: eplay_wave 1s infinite; }  #Line_6 { animation: eplay_wave 1.5s infinite; }  #Line_7 { animation: eplay_wave 2s infinite; }  #Line_8 { animation: eplay_wave 1s infinite; }  #Line_9 { animation: eplay_wave 3s infinite; }  @media (max-width: 320px) {   .control-item { font-size: 10px; }   .rewind { font-size: 12px; }   .play-and-pause-video { font-size: 12px; }   .progress-video-container {   width: 35%;   }   .slide-volume-video { width: 35px; }   .time-video {font-size: 10px; } }  @media screen and (max-width: 666px) { .resume_play_container{ font-size: 14px !important; }  .resume_play_container * svg{ width: 28px !important; height: 28px !important; }  #resume_play_title{ font-size: 22px !important; } }  @media screen and (max-width: 490px) { .smart-player-muted-v1 { height: 100px !important; width: 205px !important; margin-top: -3.8rem !important; margin-left: -6.9rem !important; }  .smart-player-muted-v1 .message { font-size: 0.8rem !important; }  .smart-player-muted-v2 { height: 110px !important; width: 125px !important; margin-top: -4rem !important; margin-left: -4.3rem !important; padding-top: 15px !important; }  .audio_muted_animation>svg { height: 42px !important; }  .smart-player-muted-v3 { height: 115px !important; width: 130px !important; margin-top: -4rem !important; margin-left: -4.3rem !important; padding-top: 15px !important; }  .smart-player-muted-v2 .message { font-size: 0.8rem !important; }  .smart-player-muted-v3 .message { font-size: 0.8rem !important; }  .smart-player-muted-v1 #eplay_wave { height: 40px !important; }  .smart-player-muted-v2 #eplay_wave { height: 42px !important; }  .smart-player-muted-v3 #eplay_wave { height: 40px !important; } .resume_play_container{ font-size: 8px !important; }  .resume_play_container * svg{ width: 28px !important; height: 28px !important; }  #resume_play_title{ font-size: 12px !important; } }  #eplay-video-resume{ display: none;  width:inherit; height:100%;  background-color: #e60986; position:absolute; top:0; left:0;  border: 0px !important;  z-index: 10000000; font-family: Poppins, sans-serif; }  #resume_play_title{ width: 100%;  text-align: center;  padding-top: 5%; }  .resume_play_container{ position:absolute; top:0; left:0; width:inherit; height:100%; padding-top: 7%; display:flex; justify-content: center; align-items: center; }  .context-menu { background-color: #1c1b1d; box-shadow: 0 0 20px rgba(37, 40, 42, 0.22); color: #ffffff !important; width: 8em; padding: 0.5em 0.4em; font-family: Arial, Helvetica, sans-serif; font-size: 0.9rem; position: fixed; visibility: hidden; z-index: 99999999999; }  .context-menu:hover { background-color: rgba(73, 2, 131, 0.8); cursor: pointer; } .context-menu a { color: #ffffff !important; }  .context-menu a:link { text-decoration: none; } .context-menu a:visited { text-decoration: none; } .context-menu a:hover { text-decoration: none; } .context-menu a:active { text-decoration: none; }  .playback-speed { background-color: #000000; box-shadow: 0 0 20px rgba(37, 40, 42, 0.22); border-radius: 10px; color: #ffffff !important; width: 8em; padding: 0.5em 0.4em; font-family: Arial, Helvetica, sans-serif; font-size: 0.9rem; z-index: 99999999999; position:absolute;  width: 100px;  heigth: 200px;  left: 0px; margin-left: calc(100% - 120px); bottom: 35px;  display: none; } .playback-speed:hover { cursor: pointer; } .playback-speed span { width: 100%; padding: 2px; color: #ffffff !important; }   .playback-speed span:hover { background-color: #e60986; text-decoration: none; }   @-webkit-keyframes pulseplay {   0% {   @include transform(scale(.9));   }   70% {   @include transform(scale(1));   box-shadow: 0 0 0 50px rgba(#5a99d4, 0);   }   100% {   @include transform(scale(.9));   box-shadow: 0 0 0 0 rgba(#5a99d4, 0);   } }  .big-button-play{   position: absolute;   width: 100px !important;   height: 100px !important;   border-radius: 75px;   z-index: 10000;   background-color: #e60986;  padding: 0px;   text-align: center;   top: 50%;   left: 50%;  margin-top: -3.50666em !important;   margin-left: -3.5em !important;   font-family: sans-serif;   border: none;  outline: none;   color: rgb(247, 242, 242);   cursor: pointer;   opacity: 0.89;   padding: 0px;  } .big-button-play > svg  {   width: 100%;   height: 100%;   margin-left: 7px;   fill: #fff; } .container_play_animation {   display:none;   position: absolute;   width: 100px !important;   height: 100px !important;   border-radius: 75px;   top: 50%;   left: 50%;  margin-top: -2.80666em !important;   margin-left: -3.0em !important;   -webkit-perspective: 1000;   -webkit-backface-visibility: hidden;   background: transparent !important;   z-index: 100000; }  .pulse-button-animation {   visibility: hidden;   position: relative;   /*   top: 50%;   left: 50%;   margin-left: -50px;   margin-top: -50px;   */   display: block;   width: 100px;   height: 100px;   font-size: 1.3em;   font-weight: light;  text-transform: uppercase;   text-align: center;   line-height: 100px;   letter-spacing: -1px;   color: white;   border: none;   border-radius: 50%;   background: #e60986;   cursor: pointer;   box-shadow: 0px 5px 1px  #e60986;   -webkit-animation: pulsebuttonanimationframe 0.5s infinite;   opacity: 0;   transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms; }  .pulse-button-animation.show {   visibility: visible;   opacity: 1;   transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms; }  .pulse-button-animation > svg  {   width: 100%;   height: 100%;   margin-left: 7px;   fill: #fff; }  .hideControls{  display: none !important; }  @media (max-width: 550px){   .big-button-play{   width: 70px !important;   height: 70px !important;   margin-top: -2.50666em !important;   margin-left: -2.5em !important;   } } @media (max-width: 440px){  .smart-player-muted-v4{   padding-top: 10%;   } }  @keyframes livestream {   0% {   transform: scale(1, 1);   }  100% {   transform: scale(4, 4);   background-color: rgba(255, 0, 0, 0);   } }  @-webkit-keyframes livestream {   0% {   transform: scale(1, 1);   }  100% {   transform: scale(4, 4);   background-color: rgba(255, 0, 0, 0);   } }  #livestream {   caret-color: transparent;   font-family: Poppins, sans-serif;   font-size: 12px;   position: relative;   border-radius: 70rem;   background-color: black;   color: #FFFFFF;   padding: 2px 1px 5px 2px;   z-index: 5;   left: 0px;   top: 0px;   margin-top: 5px;   margin-left: 5px;   width: 130px;   text-align: center;   align-items: center; } #livestream span.iconstream:before {   display: block;   content: "";   position: absolute;   background-color: rgba(255, 0, 0, 0.7);   border-radius: 50%;   width: 100%;   height: 100%;   animation: livestream 1.75s ease-in-out infinite;   -webkit-animation: livestream 1.75s ease-in-out infinite;   z-index: 1; } #livestream span.iconstream {   caret-color: transparent;   display: inline-block;   position: relative;   top: calc(50% - 6px);   background-color: red;   width: 8px;   height: 8px;   border: 1px solid rgba(0, 0, 0, 0.1);   border-radius: 50%;   z-index: 2;   margin-left: 5px;  } .textlivestream{   caret-color: transparent;   display: inline-block;   position: relative;   margin-top: 0px;   margin-left: 0px;   width: auto !important; } .iconpeoplelivestream{   caret-color: transparent;   display: inline-block;   position: relative;   margin-top: 0px !important;   margin-left: 0px !important;   width: auto !important;   top: 5px; } .peoplelivestream{   caret-color: transparent;   display: inline-block;   position: relative;   margin-top: 0px !important;   margin-left: 0px !important;   width: 2.1rem !important;   top: 0px; }