/* 1. LAYOUT */

body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #2b333f;
}

@media screen and (orientation: portrait) {
  .video-js {
    width: 100vw;
    height: 40vh
  }
}

@media screen and (orientation: landscape) {
  .video-js {
    width: 100vw;
    height: 100vh
  }
}


/* 2. ASSETS */

.vjs-5centsCDN-skin {
  /* big / touch play button */
  --vjs-5centsCDN-asset--main-player:       url("./assets/main-player.svg");
  --vjs-5centsCDN-asset--main-player-hover: url("./assets/main-player-hover.svg");
  --vjs-5centsCDN-asset--main-player-pause: url("./assets/main-play-button-pause.svg");

  /* playback */
  --vjs-5centsCDN-asset--play:              url("./assets/play.svg");
  --vjs-5centsCDN-asset--pause:             url("./assets/pause.svg");
  --vjs-5centsCDN-asset--replay:            url("./assets/replay.svg");
  --vjs-5centsCDN-asset--rewind:            url("./assets/rewind.svg");
  --vjs-5centsCDN-asset--forward:           url("./assets/forward.svg");

  /* volume */
  --vjs-5centsCDN-asset--volume-mute:       url("./assets/volume-mute.svg");
  --vjs-5centsCDN-asset--volume-no:         url("./assets/volume-no.svg");
  --vjs-5centsCDN-asset--volume-half:       url("./assets/volume-half.svg");
  --vjs-5centsCDN-asset--volume-full:       url("./assets/volume-full.svg");

  /* screen modes */
  --vjs-5centsCDN-asset--fullscreen:        url("./assets/fullscreen.svg");
  --vjs-5centsCDN-asset--fullscreen-exit:   url("./assets/fullscreen-exit.svg");
  --vjs-5centsCDN-asset--pip:               url("./assets/picture-in-picture.svg");
  --vjs-5centsCDN-asset--pip-exit:          url("./assets/picture-in-picture-exit.svg");

  /* control bar / overlays */
  --vjs-5centsCDN-asset--captions:          url("./assets/captions.svg");
  --vjs-5centsCDN-asset--chapters:          url("./assets/chapters.svg");
  --vjs-5centsCDN-asset--audio:             url("./assets/audio.svg");
  --vjs-5centsCDN-asset--settings:          url("./assets/settings.svg");
  --vjs-5centsCDN-asset--eye:               url("./assets/eye.svg");
  --vjs-5centsCDN-asset--live:              url("./assets/live.svg");
  --vjs-5centsCDN-asset--dvr:               url("./assets/dvr.svg");

  /* share modal */
  --vjs-5centsCDN-asset--share:             url("./assets/share.svg");
  --vjs-5centsCDN-asset--copy:              url("./assets/copy.svg");
  --vjs-5centsCDN-asset--facebook:          url("./assets/facebook.svg");
  --vjs-5centsCDN-asset--linkedin:          url("./assets/linkedin.svg");
  --vjs-5centsCDN-asset--twitter:           url("./assets/twitter.svg");
  --vjs-5centsCDN-asset--pinterest:         url("./assets/pinterest.svg");
  --vjs-5centsCDN-asset--whatsapp:          url("./assets/whatsapp.svg");
}


/* 3. THEME HOOKS
   Theme hooks. The icon variables below are re-declared at runtime by the iframe
   template / vjs-access.js to inject the tenant colour, so they must keep these
   names; their defaults come from the asset block above. */

.vjs-5centsCDN-skin {
  --vjs-5centsCDN-skin--primary: #4fa83d;
  --vjs-5centsCDN-skin--secondary: #ffffff;
  --vjs-5centsCDN-text-color: #ffff;
  --vjs-5centsCDN-skin--mainplayer: var(--vjs-5centsCDN-asset--main-player);
  --vjs-5centsCDN-skin--mainplayerhover: var(--vjs-5centsCDN-asset--main-player-hover);
  --vjs-5centsCDN-skin--play: var(--vjs-5centsCDN-asset--play);
  --vjs-5centsCDN-skin--pause: var(--vjs-5centsCDN-asset--pause);
  --vjs-5centsCDN-skin--replay: var(--vjs-5centsCDN-asset--replay);
  --vjs-5centsCDN-skin--fullscreen: var(--vjs-5centsCDN-asset--fullscreen);
  --vjs-5centsCDN-skin--fullscreen-exit: var(--vjs-5centsCDN-asset--fullscreen-exit);
  --vjs-5centsCDN-skin--chapters: var(--vjs-5centsCDN-asset--chapters);
  --vjs-5centsCDN-skin--mute: var(--vjs-5centsCDN-asset--volume-mute);

  --vjs-5centsCDN-skin--live: var(--vjs-5centsCDN-asset--live) no-repeat center center;
  --vjs-5centsCDN-skin--dvr: var(--vjs-5centsCDN-asset--dvr) no-repeat center center;
}

/* tenant colour application */
.vjs-5centsCDN-skin .vjs-play-progress::before,
.vjs-5centsCDN-skin .vjs-zoom-menu .vjs-zoom-level {
  background-color: var(--vjs-5centsCDN-skin--secondary);
  border-radius: 50px;
}

.vjs-5centsCDN-skin .vjs-play-progress {
  background-color: var(--vjs-5centsCDN-skin--secondary) !important;
}


/* 4. LOADING SPINNER */

/* new spinner */
.vjs-5centsCDN-skin .vjs-loading-spinner:before {
  border: 5px solid var(--vjs-5centsCDN-skin--secondary);
  border-top: 5px solid rgb(76 235 3 / 0%);
}


/* 5. BIG PLAY BUTTON */

.video-js.vjs-5centsCDN-skin .vjs-big-play-button .vjs-svg-icon svg {
  display: none;
}

.video-js.vjs-5centsCDN-skin .vjs-big-play-button {
  width: 70px !important;
  height: 70px !important;
  line-height: 70px;
  margin: -35px 0 0 -35px;
  padding: 0;
  background: none !important;
  border: 0 !important;
}

.video-js.vjs-5centsCDN-skin .vjs-big-play-button .vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-image: var(--vjs-5centsCDN-skin--mainplayer) !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* BIG PLAY BUTTON HOVER */
.video-js.vjs-5centsCDN-skin .vjs-big-play-button:hover .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-skin--mainplayerhover) !important;
}

.vjs-5centsCDN-skin .vjs-big-play-button .vjs-icon-placeholder:before {
  content: var(--vjs-5centsCDN-skin--mainplayer) !important;
  transform: scale(0.5);
  left: 0.7rem !important;
  top: 0.1rem !important;
}

.vjs-5centsCDN-skin .vjs-big-play-button:hover .vjs-icon-placeholder:before {
  content: var(--vjs-5centsCDN-skin--mainplayerhover) !important;
  transform: scale(0.5);
}

/* NOTE: the width/height here lose to the `70px !important` on the
   .video-js.vjs-5centsCDN-skin block above, which is one class more specific. */
.vjs-5centsCDN-skin .vjs-big-play-button {
  height: 0px !important;
  width: 0px !important;
  border: 0 !important;
  background: none !important;
  z-index: 1;
}

.vjs-5centsCDN-skin.vjs-paused .vjs-big-play-button {
  display: block;
}

.vjs-5centsCDN-skin.vjs-playing .vjs-big-play-button,
.vjs-5centsCDN-skin.vjs-seeking .vjs-big-play-button {
  display: none;
}


/* 6. TOUCH OVERLAY (centre play / pause) */

.vjs-5centsCDN-skin .vjs-touch-overlay .vjs-play-control.vjs-playing .vjs-icon-placeholder::before {
  background-image: var(--vjs-5centsCDN-asset--main-player-pause) !important;
  left: 14px;
}

.vjs-5centsCDN-skin .vjs-touch-overlay .vjs-play-control.vjs-paused .vjs-icon-placeholder::before {
  background-image: var(--vjs-5centsCDN-asset--main-player) !important;
  left: 14px;
}


/* 7. CONTROL BAR — SHELL
   NOTE: the two .vjs-control-bar blocks below tie on specificity. The second
   one's `background` shorthand resets background-image, so the gradient declared
   in the first block never paints — the bar ends up solid primary, 40px tall.
   They are kept in their original source order. */

.vjs-5centsCDN-skin .vjs-control-bar {
  background: none;
  background-image: linear-gradient(0deg, #000, transparent);
  height: 35px;
}

/* controll bar section */
.vjs-5centsCDN-skin .vjs-control-bar {
  width: 100%;
  text-align: center;
  height: 40px;
  background: var(--vjs-5centsCDN-skin--primary);
  padding: 0 !important;
}

.vjs-control .vjs-button {
  width: 40px;
  height: 35px;
}

.vjs-5centsCDN-skin .vjs-control {
  margin-right: 1px;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-spacer {
  display: none !important;
}

/* control order */
.vjs-control-bar .vjs-quality-selector {
  order: 100;
}

.vjs-control-bar .vjs-picture-in-picture-control {
  order: 110;
}

.vjs-control-bar .vjs-fullscreen-control {
  order: 120;
}


/* 8. CONTROL BAR — PLAY / PAUSE / REPLAY */

.vjs-5centsCDN-skin .vjs-control-bar .vjs-play-control {
  transform: scale(1);
  transition-duration: 0.5s;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-play-control:hover {
  transform: scale(1.5);

}

/* play icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-play-control .vjs-svg-icon svg {
  display: none;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-play-control .vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.5);
  background-image: var(--vjs-5centsCDN-skin--play);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* pause icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-play-control.vjs-playing .vjs-svg-icon {
  transform: scale(0.5);
  background-image: var(--vjs-5centsCDN-skin--pause);
}

/* replay icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-play-control.vjs-ended .vjs-svg-icon {
  transform: scale(0.4);
  background-image: var(--vjs-5centsCDN-skin--replay);
}


/* 9. CONTROL BAR — REWIND / FORWARD */

/* rewind & forward button */
.vjs-5centsCDN-skin .vjs-rewind-control .num {
  right: 17px;
  bottom: 13px;
}

.vjs-5centsCDN-skin .vjs-forward-control .num {
  left: 17px;
  bottom: 13px;
}

.vjs-1600 .vjs-forward-control .num {
  left: 22px;
}

.vjs-1600 .vjs-rewind-control .num {
  right: 22px;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-rewind-control .vjs-svg-icon svg,
.vjs-5centsCDN-skin .vjs-control-bar .vjs-forward-control .vjs-svg-icon svg {
  display: none;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-rewind-control .vjs-svg-icon,
.vjs-5centsCDN-skin .vjs-control-bar .vjs-forward-control .vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.55);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* rewind icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-rewind-control .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-asset--rewind);
}

/* forward icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-forward-control .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-asset--forward);
}

.vjs-5centsCDN-skin .vjs-rewind-control:active,
.vjs-5centsCDN-skin .vjs-forward-control:active {
  transform: scale(1.3);
}


/* 10. CONTROL BAR — VOLUME */

.vjs-5centsCDN-skin .vjs-volume-panel .vjs-svg-icon svg {
  display: none;
}

.video-js.vjs-5centsCDN-skin .vjs-control-bar .vjs-volume-panel .vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.4);
  background-repeat: no-repeat;
}

.vjs-5centsCDN-skin.vjs-1600 .vjs-control-bar .vjs-volume-panel .vjs-svg-icon {
  top: -3px;
}

/* volume mute icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-mute-control.vjs-vol-0 .vjs-svg-icon,
.vjs-icon-volume-mute:before {
  content: var(--vjs-5centsCDN-asset--volume-mute) !important;
}

/*  volume low icon*/
.vjs-5centsCDN-skin .vjs-control-bar .vjs-mute-control.vjs-vol-1 .vjs-svg-icon,
.vjs-icon-volume-low:before {
  content: var(--vjs-5centsCDN-asset--volume-no) !important;
}

/* volume half icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-mute-control.vjs-vol-2 .vjs-svg-icon,
.vjs-icon-volume-mid:before {
  content: var(--vjs-5centsCDN-asset--volume-half) !important;
}

/* volume full icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-mute-control .vjs-svg-icon,
.vjs-icon-volume-high:before {
  content: var(--vjs-5centsCDN-asset--volume-full) !important;
}

/* volume panel — expands to reveal the slider on hover */
.video-js .vjs-volume-panel {
  display: flex !important;
  align-items: center;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active {
  width: 10em;
}

.vjs-5centsCDN-skin .vjs-volume-vertical {
  background-color: transparent;
}

/* Volume slider. This player builds the horizontal panel, but videojs.css only
   sizes the vertical variant — so the control, the track and the level all
   compute to height 0 and there is nothing to paint. Size them here, and slide
   the track open on hover to match the panel expansion above. */
.vjs-5centsCDN-skin .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  width: 0;
  height: 5px;
  top: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: width 0.3s;
}

.vjs-5centsCDN-skin.vjs-1600 .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  top: -2px;
}

.vjs-5centsCDN-skin .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
.vjs-5centsCDN-skin .vjs-volume-panel.vjs-slider-active .vjs-volume-control.vjs-volume-horizontal,
.vjs-5centsCDN-skin .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
.vjs-5centsCDN-skin .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
}

.vjs-5centsCDN-skin .vjs-volume-bar.vjs-slider-horizontal {
  width: 5em;
  height: 100%;
  margin: 0;
  border-radius: 10px;
  background-color: rgba(115, 133, 159, 0.5);
}

/* videojs writes the level width inline; the 100% here is only the pre-init
   default, and it overrides nuevo's vertical-bar `width: 8px`. */
.vjs-5centsCDN-skin .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.video-js .vjs-volume-level {
  background-color: var(--vjs-5centsCDN-skin--secondary);
}

/* NOTE: the .vjs-volume-panel block above is one class more specific, so its
   top / transform win over this one. */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-mute-control .vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.5);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}


/* 11. CONTROL BAR — PROGRESS BAR
   NOTE: the .vjs-play-progress:before blocks tie on specificity — kept in source
   order, so the `display: none` in the progress-control group lands last. */

.vjs-5centsCDN-skin .vjs-time-tooltip {
  color: var(--vjs-)
}

.vjs-5centsCDN-skin .vjs-progress-holder {
  height: 0.5em;
  margin: 0px !important;
  height: 11px;
}

.vjs-5centsCDN-skin .vjs-progress-control .vjs-load-progress {
  background-color: rgba(115, 141, 180, 0.5);
}

.vjs-5centsCDN-skin .vjs-load-progress {
  background-color: unset;
}

.vjs-5centsCDN-skin .vjs-progress-holder,
.vjs-5centsCDN-skin .vjs-load-progress div,
.vjs-5centsCDN-skin .vjs-play-progress.vjs-slider-bar {
  border-radius: 0px !important;
}

.vjs-5centsCDN-skin .vjs-play-progress:before {
  top: -0.2em;
}

.vjs-5centsCDN-skin .vjs-play-progress .vjs-time-tooltip {
  background-color: var(--vjs-5centsCDN-skin--secondary);
}

/* progress bar controll */
.vjs-5centsCDN-skin .vjs-progress-control {
  position: absolute;
  width: 100%;
  top: -17.3px;
  margin: 0;
}

.vjs-5centsCDN-skin .vjs-progress-control .vjs-progress-holder {
  margin: 4px;
  border-radius: 0 !important;
}

.vjs-5centsCDN-skin .vjs-play-progress:before {
  display: none;
}

.vjs-5centsCDN-skin .vjs-progress-control .vjs-slider:before {
  border-radius: 0;
}

.vjs-5centsCDN-skin .vjs-progress-control .vjs-slider {
  height: 24px !important;
}

.vjs-5centsCDN-skin .vjs-progress-control .vjs-slider:before,
.vjs-5centsCDN-skin .vjs-progress-control .vjs-load-progress,
.vjs-progress-control .vjs-play-progress {
  height: 0.6em !important;
  margin-top: -3px !important
}

.vjs-5centsCDN-skin .vjs-progress-control .vjs-mouse-display {
  top: 9px !important;
}

.vjs-5centsCDN-skin.vjs-480 .vjs-control-bar .vjs-progress-control {
  top: -18px;
}

.vjs-5centsCDN-skin.vjs-480 .vjs-progress-control .vjs-load-progress, .vjs-480 .vjs-progress-control .vjs-play-progress {
  top: 16px;
}

/* marker */
.vjs-5centsCDN-skin .vjs-marker {
  top: 4px;
}

.vjs-5centsCDN-skin .vjs-marker-inn {
  height: 8.5px;
}

.vjs-5centsCDN-skin.vjs-480 .vjs-marker {
  top: 8px;
}

.vjs-5centsCDN-skin.vjs-480 .vjs-marker-inn {
  top: 9.3px;
}

/* 12. CONTROL BAR — TIME */

.vjs-5centsCDN-skin .vjs-control-bar .vjs-time-control {
  line-height: 43px !important;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-duration {
  flex: auto;
  display: revert !important;
  position: relative;
  left: auto;
}

.vjs-5centsCDN-skin .vjs-current-time {
  display: block;
  color: white;
}


/* 13. CONTROL BAR — CAPTIONS */

/* captions icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-captions-button .vjs-svg-icon svg,
.vjs-5centsCDN-skin .vjs-control-bar .vjs-subs-caps-button .vjs-svg-icon svg {
  display: none;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-captions-button .vjs-svg-icon,
.vjs-5centsCDN-skin .vjs-control-bar .vjs-subs-caps-button .vjs-svg-icon {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.5);
  background-image: var(--vjs-5centsCDN-asset--captions);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.vjs-5centsCDN-skin .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: none !important;
  margin-bottom: -0.1em;
}

.vjs-captions-menu-item>.vjs-menu-item-text>.vjs-icon-placeholder {
  display: none;
}


/* 14. CONTROL BAR — CHAPTERS */

/* chapters icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-chapters-button .vjs-svg-icon svg {
  display: none;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-chapters-button .vjs-svg-icon {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.6);
  background-image: var(--vjs-5centsCDN-skin--chapters);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.vjs-5centsCDN-skin .vjs-chapter {
  bottom: 53px !important;
}


/* 15. CONTROL BAR — AUDIO TRACKS */

/* audio icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-audio-button .vjs-svg-icon svg {
  display: none;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-audio-button .vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.5);
  background-image: var(--vjs-5centsCDN-asset--audio);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}


/* 16. CONTROL BAR — QUALITY / RESOLUTION
   NOTE: .vjs-quality-selector .vjs-icon-placeholder is declared twice at equal
   specificity — the second block (further down) wins for padding and
   background-color, so the chip is white-on-primary, not primary-on-white.
   Kept in source order. */

.vjs-5centsCDN-skin .vjs-quality-selector .vjs-menu-button {
  padding: 0px;
}

.vjs-5centsCDN-skin .vjs-quality-selector .vjs-icon-placeholder {
  padding: 0.25em;
  background-color: var(--vjs-5centsCDN-skin--primary);
  border-radius: 3px;
  text-transform: capitalize;
}

.vjs-5centsCDN-skin .vjs-quality-selector .vjs-menu-content {
  background: rgba(1, 1, 1, 0.75);
}

.vjs-5centsCDN-skin .vjs-quality-selector .vjs-menu-content .vjs-menu-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.vjs-5centsCDN-skin .vjs-quality-selector .vjs-menu-content .vjs-menu-item {
  color: var(--vjs-5centsCDN-text-color);
  text-transform: capitalize;
}

.vjs-5centsCDN-skin .vjs-quality-selector .vjs-menu-content .vjs-menu-item.vjs-selected {
  background-color: var(--vjs-5centsCDN-skin--primary);
}

/* player menus > quality button */
.vjs-5centsCDN-skin .vjs-control.vjs-menu-button {
  top: -2px;
}

.vjs-5centsCDN-skin .quality-span {
  color: var(--vjs-5centsCDN-skin--primary);
  background-color: white;
  padding: 3px !important;
  border-radius: 10%;
  font-size: 9px !important;
}

/* quality selector */
.vjs-5centsCDN-skin .vjs-quality-selector .vjs-icon-placeholder {
  padding: 0.35em;
  background-color: var(--vjs-5centsCDN-skin--secondary);
  border-radius: 3px;
  text-transform: capitalize;
  color: var(--vjs-5centsCDN-skin--primary);
  font-weight: 600;
  font-size: 11px;
}

.vjs-5centsCDN-skin .vjs-quality-button span {
  font-size: 11px !important;
  font-weight: 600;
}

/* resolution */
.vjs-5centsCDN-skin .vjs-quality-button .vjs-icon-placeholder:before {
  font-size: 2em;
  line-height: 2em;
}

.video-js .vjs-quality-button {
  min-width: 40px;
  width: auto !important;
  text-align: center;
  line-height: 38px;
  white-space: nowrap;
}


/* 17. CONTROL BAR — PLAYBACK RATE */

.vjs-5centsCDN-skin .vjs-playback-rate .vjs-menu {

  left: -19px;
}

.vjs-5centsCDN-skin .vjs-playback-rate-value {
  padding-top: 1px;
}

/* playback rate button */
.vjs-playback-rate .vjs-playback-rate-value,
.vjs-playback-rate>.vjs-menu-button {
  position: absolute !important;
  width: 100%;
  height: 100%;
}

.vjs-playback-rate .vjs-playback-rate-value {
  top: 10px;
}

.vjs-5centsCDN-skin .vjs-playback-rate-value {
  display: flex;
  justify-content: center;
}


/* 18. CONTROL BAR — SETTINGS (COG) */

.vjs-5centsCDN-skin .vjs-control-bar .vjs-settings-menu {
  display: none;
}

.vjs-5centsCDN-skin > .vjs-control-bar > button.vjs-control.vjs-button.vjs-c-b.vjs-c-m-b > span.vjs-svg-icon > svg {
  display: none;
}

/* settings icon */
.vjs-5centsCDN-skin > .vjs-control-bar > button.vjs-control.vjs-button.vjs-c-b.vjs-c-m-b > span.vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  transform: scale(0.5);
  transition: transform 0.3s;
  background-image: var(--vjs-5centsCDN-asset--settings);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* videojs.css spins the inner <svg> while the menu is open; that svg is hidden
   now, so spin the icon span instead. */
.vjs-5centsCDN-skin vjs-control-bar > button.vjs-control.vjs-button.vjs-c-b.vjs-c-m-b.vjs-cog-active > span.vjs-svg-icon  {
  transform: scale(0.5) rotate(90deg);
}

/* cog menu-settings */
.vjs-5centsCDN-skin:not(.vjs-touch-enabled) .vjs-menu-settings .vjs-menu-content li:hover,
.video-js:not(.vjs-touch-enabled) .vjs-menu .vjs-menu-content li:not(.vjs-menu-title):hover {
  color: #fff;
  background-color: rgba(43, 51, 63, .7)
}

.vjs-5centsCDN-skin:not(.vjs-touch-enabled) .vjs-menu-settings .vjs-menu-content li:hover svg {
  fill: #fff
}

.vjs-5centsCDN-skin .vjs-menu-settings .vjs-menu-content .vjs-menu-forward:hover:after {
  border-left-color: #fff
}

.vjs-settings-menu-mobile {
  display: none;
}

.vjs-5centsCDN-skin .vjs-control.vjs-button.vjs-settings-menu-button {
  display: none;
}


/* 19. CONTROL BAR — PICTURE IN PICTURE */

/* picture in picture icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-picture-in-picture-control .vjs-svg-icon svg {
  display: none;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-picture-in-picture-control .vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.54);
  background-image: var(--vjs-5centsCDN-asset--pip);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* exit picture in picture mode icon */
.vjs-5centsCDN-skin.vjs-picture-in-picture .vjs-control-bar .vjs-picture-in-picture-control .vjs-svg-icon {
  transform: scale(0.5);
  background-image: var(--vjs-5centsCDN-asset--pip-exit);
}

.vjs-5centsCDN-skin .vjs-picture-in-picture-control {
  left: -6px;
}


/* 20. CONTROL BAR — FULLSCREEN */

/* fullscreen icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-fullscreen-control .vjs-svg-icon svg {
  display: none;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-fullscreen-control .vjs-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.4);
  background-image: var(--vjs-5centsCDN-skin--fullscreen);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* exit fullscreen icon */
.vjs-5centsCDN-skin.vjs-fullscreen .vjs-control-bar .vjs-fullscreen-control .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-skin--fullscreen-exit);
}


/* 21. CONTROL BAR — CHROMECAST / AIRPLAY */
.video-js .vjs-chromecast-button .vjs-svg-icon {
  margin-top: 4px;
}

/* 22. MENUS */
.js-focus-visible .vjs-menu li.vjs-selected:hover,
.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover,
.vjs-menu-settings .vjs-menu-content .vjs-checked,
.vjs-menu .vjs-menu-content .vjs-checked {
  /*ak*/
  background-color: var(--vjs-5centsCDN-skin--primary) !important;
  color: var(--vjs-5centsCDN-text-color) !important;
}

.vjs-5centsCDN-skin .vjs-menu {
  min-width: 81px;
}

.video-js .vjs-menu-button .vjs-hidden {
  display: none !important;
}

.vjs-lock-showing {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
}

.video-js .vjs-menu-speed .vjs-settings-back {
  padding-left: 5px !important;
}


/* 23. FOCUS / BORDER RESETS
   Kept after the component sections so it wins the equal-specificity ties. */

/* video js remove auto focus border */
.vjs-5centsCDN-skin .vjs-control {
  box-shadow: none;
  outline: none;
  border: none;
}

.vjs-5centsCDN-skin .vjs-modal-dialog {
  box-shadow: none;
  outline: none;
  border: none;
}

.vjs-5centsCDN-skin .vjs-menu li {
  box-shadow: none;
  outline: none;
  border: none;
}

.vjs-5centsCDN-skin .vjs-control .vjs-button {
  box-shadow: none;
  outline: none;
  border: none;
}


/* 24. OVERLAY — CURRENT VIEWERS */

/* current view */
.vjs-5centsCDN-skin .vjs-cv-control {
  position: fixed;
  top: 1em;
  line-height: 20px !important;
  font-weight: 400;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  min-width: 5em !important;
  height: 2.3em;
}

.vjs-cv-control .vjs-icon-placeholder::before {
  content: var(--vjs-5centsCDN-asset--eye);
  transform: scale(0.8);
  position: absolute;
  left: 8px;
  top: 5px;
}

.vjs-5centsCDN-skin .vjs-cv-control .vjs-cv-display {
  left: 0px !important;
}

.vjs-5centsCDN-skin .vjs-cv-control .vjs-cv-display {
  font-size: 0.9em;
  height: 100%;
  line-height: 32px;
  margin-left: 35px;
  padding-right: 10px;
}

.vjs-5centsCDN-skin .vjs-cv-control {
  width: auto !important;
  right: 1em;
  top: 1em;
}


/* 25. OVERLAY — LIVE / DVR */

.vjs-5centsCDN-skin .vjs-seek-to-live-control .vjs-seek-to-live-text {
  display: none;
}

.vjs-5centsCDN-skin .vjs-seek-to-live-control {
  position: fixed;
  top: 1em;
  right: 6em;
  background: var(--vjs-5centsCDN-skin--dvr);
  background-size: contain;
  width: 5em;
  height: 2em;
}

.vjs-5centsCDN-skin .vjs-seek-to-live-control.vjs-at-live-edge {
  position: fixed;
  top: 1em;
  right: 6em;
  width: 5em;
  height: 2em;
  background: var(--vjs-5centsCDN-skin--live);
  background-size: contain;
}

.vjs-5centsCDN-skin .vjs-seek-to-live-control .vjs-icon-placeholder {
  color: unset !important;
  display: none;
}

.vjs-5centsCDN-skin .vjs-seek-to-live-control .vjs-icon-placeholder:before {
  content: "";
}

.vjs-5centsCDN-skin .vjs-live-control .vjs-live-display {
  position: fixed;
  width: 5em;
  height: 2em;
  top: 1em;
  right: 7em;
  background: var(--vjs-5centsCDN-skin--live);
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


/* 26. OVERLAY — TITLE */

/* title overlay */
.vjs-title-overlay-container {
  display: flex;
  max-width: 80%;
  cursor: pointer;
}

.vjs-title-overlay-container .vjs-icon {
  display: flex;
  align-items: center;
}

.vjs-title-overlay-container .vjs-text {
  width: 100%;
}

.vjs-title-overlay-container .vjs-title,
.vjs-title-overlay-container .vjs-description {
  margin: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
}

.vjs-title-overlay-container .vjs-description {
  font-size: 14px;
}

.vjs-icon img {
  max-width: 70px;
  padding: 0;
  vertical-align: middle;
}


/* 27. OVERLAY — BIG UNMUTE BUTTON */

/* big unmute button */
.vjs-5centsCDN-skin .vjs-auto-mute {
  top: 53px;
}

.vjs-5centsCDN-skin .vjs-playlist-button~.vjs-auto-mute {
  top: 60px !important;
  right: 4px !important;
}


/* 28. SHARE BUTTON & MODAL */

/* share button  custom icon  */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-social-share {
  position: fixed;
  top: 2em;
  right: 1em;
  background: 0 0;
  border: none;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 4em;
  height: 4em;
  cursor: pointer;
}

/* videojs share icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-social-share .vjs-icon-placeholder:before {
  content: var(--vjs-5centsCDN-asset--share) !important;
  transform: scale(0.5);
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content {
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: -1 !important;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share {
  background: rgba(0, 0, 0, 0.65) !important;
  padding: 1em;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  position: relative;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share #share_url_copied_popup {
  position: absolute;
  top: -32px;
  left: 8px;
  background: black !important;
  border-radius: 6px;
  padding: 5px;
  display: none;
}

/* share modal title */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-title {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  color: #FFFFFF;
  display: none;
}

/* share input field */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .share-url-field {
  background: transparent !important;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 10px;
  height: 3em;
  width: 22em;
  margin-bottom: 0.5em;
  color: #ffffff;
  padding: 7px 12px 7px 46px;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .share-button {
  border-radius: 5px;
  margin: -0.8em;
  cursor: pointer;
  width: 6em;
  height: 6em;
  transform: scale(0.6);
  border: 1px solid #FFFFFF4D;
  border-radius: 50%;
}

/* copy  share url section */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-copy-url-button {
  background-color: rgba(255, 255, 255, 0.12) !important;
  top: -3em;
  position: absolute;
  left: 0em;
  width: 4em;
  height: 4em;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-copy-url-button .icon {
  content: var(--vjs-5centsCDN-asset--copy);
}

/* facebook share section */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-facebook-share {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-facebook-share .icon {
  content: var(--vjs-5centsCDN-asset--facebook);
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-facebook-share:hover {
  background-color: #3B5998 !important;
}

/* linkedin share section */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-linkedin-share {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-linkedin-share .icon {
  content: var(--vjs-5centsCDN-asset--linkedin);
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-linkedin-share:hover {
  background-color: #2867B2 !important;
}

/* twitter share section */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-twitter-share {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-twitter-share .icon {
  content: var(--vjs-5centsCDN-asset--twitter);
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-twitter-share:hover {
  background-color: #000 !important;
}

/* pinterest share section */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-pinterest-share {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-pinterest-share .icon {
  content: var(--vjs-5centsCDN-asset--pinterest);
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-pinterest-share:hover {
  background-color: #E60023 !important;
}


/* whatsapp share section */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-whatsapp-share {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-whatsapp-share:hover {
  background-color: #25d366 !important;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal .vjs-modal-dialog-content div .vjs-5centscdn-share .vjs-share-group-button .vjs-whatsapp-share .icon {
  content: var(--vjs-5centsCDN-asset--whatsapp);
}

/* share modal close button */
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal > button {
  width: 24px;
  height: 24px;
  padding: 0;
  background: #fff !important;
  border: 0;
  border-radius: 50%;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal > button:hover {
  opacity: 1;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal > button > .vjs-icon-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal > button > .vjs-icon-placeholder::before,
.vjs-5centsCDN-skin .vjs-5centscdn-share-modal > button > .vjs-icon-placeholder::after {
  content: "";
  position: absolute;
  top: 49%;
  left: 15%;
  width: 70%;
  height: 2px;
  border-radius: 2px;
  background-color: #000 !important;
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal > button > .vjs-icon-placeholder::before {
  transform: rotate(45deg);
}

.vjs-5centsCDN-skin .vjs-5centscdn-share-modal > button > .vjs-icon-placeholder::after {
  transform: rotate(-45deg);
}
/* share button close */


/* 29. ADVERTS */

/* on ad playing */
.vjs-5centsCDN-skin.vjs-ad-playing .vjs-logo-content,
.vjs-5centsCDN-skin.vjs-ad-playing .vjs-cv-control,
.vjs-5centsCDN-skin.vjs-ad-playing .vjs-social-share {
  display: none;
}

.vjs-has-mouse.vjs-ad-playing .vjs-button:hover,
.vjs-has-mouse .vjs-button:hover {
  background-color: transparent;
}

/* Advertisement */
.vjs-5centsCDN-skin .vjs-vast-label {
  font-size: 12px;
  line-height: 39px;
  color: #fff;
  display: none;
  padding: 0 10px 0 5px;
  float: left;
  text-shadow: 1px 1px 1px #000;
}


/* 30. ERROR DISPLAY */

/* error */
.vjs-5centsCDN-skin .vjs-error-display .vjs-modal-dialog-content {
  margin: 0 !important;
}


/* 31. VIDEOJS BASE POSITIONING
   Kept last: `.vjs-button > .vjs-icon-placeholder:before` ties on specificity
   with `.vjs-cv-control .vjs-icon-placeholder::before` in §24, and only wins on
   source order. */

.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
/* .video-js .vjs-modal-dialog, */
.vjs-button>.vjs-icon-placeholder:before
/* .vjs-modal-dialog .vjs-modal-dialog-content  */
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* fix quality menu */
.vjs-5centsCDN-skin .vjs-menu-div.vjs-settings-div {
  height: auto !important;
}

/* quality menu button */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-q-b.vjs-menu-button {
  top: 3px;
}

.vjs-5centsCDN-skin.vjs-1600 .vjs-control-bar .vjs-q-b.vjs-menu-button {
  top: -4px;
}

/* poster */
.vjs-5centsCDN-skin .vjs-poster img {
  object-fit: cover;
}

/* context menu */
.vjs-5centsCDN-skin .vjs-context-menu, .vjs-5centsCDN-skin .vjs-context-menu li:hover {
  background-color: rgba(43, 51, 63, 0.7);
  color: #fff;
  border: 0;
}
.vjs-context-menu .link {
  margin-top: 0;
  border: 0;
}
.vjs-5centsCDN-skin .vjs-context-menu li a {
  color: #fff;
}

.nvp-banner.banner-nvw {
  opacity: 1 !important;
}

/* setting menu */
.video-js .vjs-menu-settings .vjs-menu-content li span {
  overflow: visible;
}

/* 32. TEXT TRACK SETTINGS MODAL — DARK MODE */

.vjs-5centsCDN-skin .vjs-text-track-settings {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-radius: 8px;
}

.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-modal-dialog-content {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-track-settings-colors,
.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-track-settings-font {
  background-color: transparent;
}

.vjs-5centsCDN-skin .vjs-text-track-settings fieldset {
  border: none;
}

.vjs-5centsCDN-skin .vjs-text-track-settings legend,
.vjs-5centsCDN-skin .vjs-text-track-settings label {
  color: #ffffff !important;
}

.vjs-5centsCDN-skin .vjs-text-track-settings select {
  background-color: #2b2b2b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.vjs-5centsCDN-skin .vjs-text-track-settings select option {
  background-color: #2b2b2b;
  color: #ffffff;
}

.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-select-effects,
.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-select-attribute {
  color: #ffffff !important;
}

.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-track-setting {
  background-color: transparent;
}

.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-track-settings-controls button {
  background-color: var(--vjs-5centsCDN-skin--primary, #4fa83d) !important;
  color: #ffffff !important;
  border: none;
  border-radius: 4px;
}

.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-close-button {
  color: #ffffff !important;
}

.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-close-button .vjs-icon-placeholder:before {
  color: #ffffff !important;
}

/* dark scrollbar (Firefox) */
.vjs-5centsCDN-skin .vjs-text-track-settings,
.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-modal-dialog-content {
  scrollbar-color: #5a5a5a #1e1e1e;
  scrollbar-width: thin;
}

/* dark scrollbar (WebKit / Chromium) */
.vjs-5centsCDN-skin .vjs-text-track-settings::-webkit-scrollbar,
.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-modal-dialog-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.vjs-5centsCDN-skin .vjs-text-track-settings::-webkit-scrollbar-track,
.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-modal-dialog-content::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.vjs-5centsCDN-skin .vjs-text-track-settings::-webkit-scrollbar-thumb,
.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-modal-dialog-content::-webkit-scrollbar-thumb {
  background-color: #5a5a5a;
  border-radius: 4px;
  border: 2px solid #1e1e1e;
}

.vjs-5centsCDN-skin .vjs-text-track-settings::-webkit-scrollbar-thumb:hover,
.vjs-5centsCDN-skin .vjs-text-track-settings .vjs-modal-dialog-content::-webkit-scrollbar-thumb:hover {
  background-color: #7a7a7a;
}