:root {
  --plyr-color-main: #003366;
media-player {
  aspect-ratio: 16 / 9;
}
}
/* Custom player color */
.plyr--full-ui input[type="range"]::-webkit-slider-thumb {
  background: #003366 !important;
}

.plyr, .plyr__video-wrapper, .plyr__poster {
  border-radius: 12px !important;
  overflow: hidden;
}


/* width 
::-webkit-scrollbar {
  width: 12px;
}

Track 
::-webkit-scrollbar-track {
  background: #373a3c; 
}
 
Handle 
::-webkit-scrollbar-thumb {
  background: #373a3c; 
}

Handle on hover 
::-webkit-scrollbar-thumb:hover {
  background: #373a3c; 
}
*/
  .container-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/* Reduce the number of images used by switching colors */
.towhite {
  filter: invert(1%) sepia(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
}

.btn_sm {
    padding: 0.3445rem 0.75rem;
}
.capitalize {
  text-transform: capitalize;
}

.trans_gradient {
  background: linear-gradient(to bottom, rgb(22, 26, 29), rgba(22, 26, 29, 0.73));
}
.bg-primary {
    color: #fff!important;
    background-color: #215a7b!important;
}
    #preroll-container, #main-player-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #skip-ad {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 10;
      display: none;
    }
    #skip-ad-btn {
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      padding: 10px;
      cursor: pointer;
      border-radius: 3px;
    }
    #skip-ad-btn:hover {
      background: rgba(0, 0, 0, 0.7);
    }