/* 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--audio:             url("./assets/audio.svg");
  --vjs-5centsCDN-asset--captions:          url("./assets/captions.svg");
  --vjs-5centsCDN-asset--chapters:          url("./assets/chapters.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-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--mainplayerhover: var(--vjs-5centsCDN-asset--main-player-hover);
  --vjs-5centsCDN-skin--mainplayer: var(--vjs-5centsCDN-asset--main-player);
}

/* tenant colour application */
.vjs-5centsCDN-skin .vjs-play-progress,
.vjs-5centsCDN-skin .vjs-zoom-menu .vjs-zoom-level {
  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
   NOTE: .vjs-big-play-button .vjs-icon-placeholder is styled by both a
   .vjs-5centsCDN-skin rule and a .video-js rule at equal specificity, and the
   :before is finished off by the .video-js block in §31. Source order matters
   throughout — do not reshuffle these. */

.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 {
  width: 0;
  height: 0;
  left: -10px !important;
}

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

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

/* Ties with the .vjs-5centsCDN-skin rule above; the `left: -10px !important`
   there still wins, the rest comes from here. */
.video-js .vjs-big-play-button .vjs-icon-placeholder {
  align-items: center;
  position: absolute;
  left: 28px;
  display: flex;
}

.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;
  transform: scale(0.6);
}

.vjs-5centsCDN-skin .vjs-touch-overlay .vjs-play-control.vjs-paused .vjs-icon-placeholder::before {
  background-image: var(--vjs-5centsCDN-skin--mainplayer) !important;
  transform: scale(0.6);
}


/* 7. CONTROL BAR — SHELL
   NOTE: `.video-js .vjs-control { margin: 0 }` and
   `.vjs-5centsCDN-skin .vjs-control { margin-right: 1px }` tie on specificity —
   the margin-right rule must stay second or the gap between controls is lost. */

.vjs-5centsCDN-skin .vjs-control-bar {
  background: none;
  background: rgba(255, 255, 255, 0.1);
  height: 35px;
  margin: 1%;
  width: 98%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  border-radius: 3px;
}

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

.video-js .vjs-control {
  margin: 0;
  padding: 0;
  height: 100%;
}

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

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


/* 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.3);

}

/* 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);
}

.vjs-5centsCDN-skin .vjs-play-control .vjs-icon-placeholder:before {
  line-height: 1.3;
}

@media screen and (max-width: 1080px) {
  .vjs-5centsCDN-skin .vjs-play-control .vjs-icon-placeholder:before {
    line-height: 1.7 !important;
  }
}


/* 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
   NOTE: .vjs-volume-level:before is declared twice (colour, then display:none) —
   kept in source order. */

.vjs-5centsCDN-skin .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  transition: none !important;
  transition: visibility 0.5s, opacity 0.5s, height 0.5s 0.5s, width 0.5s 0.5s, left 0.5s 0.5s, top 0.5s 0.5s !;
  top: -80px;
  height: 80px;
}

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

.vjs-5centsCDN-skin .vjs-volume-level:before {
  color: var(--vjs-5centsCDN-skin--primary);
}

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

.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;
}

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

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

/*  volume low icon*/
.vjs-5centsCDN-skin .vjs-control-bar .vjs-mute-control.vjs-vol-1 .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-asset--volume-no);
}

/* volume half icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-mute-control.vjs-vol-2 .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-asset--volume-half);
}

/* volume section customize */
.vjs-5centsCDN-skin .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  opacity: 1;
}

.vjs-5centsCDN-skin .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar {
  width: 2em;
  height: 61px;
  background: linear-gradient(rgba(0, 0, 0, 0.438),
    rgba(0, 0, 0, 0.438) 50%,
    transparent 50%,
    transparent) center bottom / 5px 4px;
}

.vjs-5centsCDN-skin .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical .vjs-volume-level {
  width: 2em;

  background: linear-gradient(var(--vjs-5centsCDN-skin--secondary),
    var(--vjs-5centsCDN-skin--secondary) 50%,
    transparent 50%,
    transparent) center bottom / 5px 4px;
}

.vjs-5centsCDN-skin .vjs-volume-level:before {
  display: none;
}

.video-js .vjs-volume-panel .vjs-volume-vertical {
  background: #232930 !important;
}

.vjs-5centsCDN-skin .vjs-volume-bar.vjs-slider-vertical {
  bottom: 0 !important;
}


/* 11. CONTROL BAR — PROGRESS BAR */

.vjs-5centsCDN-skin .vjs-play-progress::before {
  background-color: var(--vjs-5centsCDN-skin--secondary);
  border-radius: 50px;
}

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

.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: 10px !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);
}

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

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

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

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

/* progress bar */
.video-js .vjs-slider {
  position: relative;
  margin: 0 0.45em 0 0.45em;
}


/* 12. CONTROL BAR — TIME */

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

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

.vjs-5centsCDN-skin .vjs-remaining-time {
  display: none;
}

.vjs-5centsCDN-skin .vjs-duration {
  display: block;
}

.video-js .vjs-time-control {
  padding-left: 1rem;
  padding-right: 1rem;
}

.video-js .vjs-progress-control .vjs-slider:before,
.video-js .vjs-progress-control .vjs-load-progress, 
.vjs-progress-control .vjs-play-progress {
  top: 44%;
}

/* 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: 0;
  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: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: scale(0.5);
  background-image: var(--vjs-5centsCDN-asset--chapters);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.vjs-5centsCDN-skin .vjs-chapter {
  bottom: 65px !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.6);
  background-image: var(--vjs-5centsCDN-asset--audio);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}


/* 16. CONTROL BAR — QUALITY / RESOLUTION */

.vjs-5centsCDN-skin .vjs-quality-selector {
  display: none;
}

.vjs-5centsCDN-skin .vjs-quality-selector .vjs-icon-placeholder::before {
  content: 'Quality';

}

.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);
}

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

.vjs-5centsCDN-skin .vjs-resolution-button-label {
  position: relative;
  top: -60%;
}

/* quality*/
.vjs-5centsCDN-skin .vjs-quality-button span {
  font-size: 0.8rem;
}

.vjs-1600 .vjs-quality-button {
  line-height: 42px !important;
}


/* 17. CONTROL BAR — PLAYBACK RATE */

/* playback rate button */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-playback-rate {
  display: none;
}


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

.vjs-5centsCDN-skin .vjs-sm-top-level-header {
  display: flex;
  flex-direction: column;
}

.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;
}

#my-video-vjs-settings-menu-default li {
  display: flex;
  justify-content: space-between;
}

#my-video-vjs-settings-menu-default {
  padding: 2px;
  border-radius: 2px;
  outline: 7px solid rgba(43, 51, 63, .7);
  outline-offset: 0px;

}

/* settings button */
.vjs-5centsCDN-skin .vjs-control.vjs-button.vjs-settings-menu-button {
  display: block;
}


/* 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.5);
  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);
}


/* 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.5);
  background-image: var(--vjs-5centsCDN-asset--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-asset--fullscreen-exit);
}


/* 21. CONTROL BAR — CHROMECAST / AIRPLAY */


/* 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 {
  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-quality .vjs-settings-back,
.video-js .vjs-menu-settings .vjs-settings-back,
.video-js .vjs-menu-speed .vjs-settings-back {
  padding-left: 28px !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;
  right: 1em;
  line-height: 20px !important;
  font-weight: 400;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  width: auto !important;
  min-width: 5em !important;
  height: 2em !important;
}

.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;
  text-align: center;
}


/* 25. OVERLAY — LIVE / DVR */

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


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


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

.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-asset--live) no-repeat center center;
  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 */

/* videojs share icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-social-share span:before {
  content: "";

  background-image: var(--vjs-5centsCDN-asset--share) !important;
  transform: scale(0.5);

  display: inline-block;
  width: 100%;
  height: 28px;
  background-repeat: no-repeat;

}

.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;
}

/* videojs share icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-social-share {
  height: 25px;
  position: relative;
  left: -25px;
}

/* 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: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  border-radius: 10px;
  height: 3em;
  width: 23em;
  margin-bottom: 0.5em;
  color: #ffffff;
  padding: 7px;
  display: none;
}

.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: 10px;
  margin: -0.8em;
  cursor: pointer;
  width: 6em;
  height: 6em;
  transform: scale(0.6);
  border: 0.3px solid #FFF;
}

/* 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: var(--vjs-5centsCDN-skin--primary);
}

.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: #3b5998 !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);
}

/* 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: #2867b2 !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);
}

/* 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: #000 !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);
}

/* 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: #e60023 !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);
}

/* 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: #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 {
  display: none;
}

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


/* 30. ERROR DISPLAY */

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


/* 31. VIDEOJS BASE POSITIONING
   Kept last, and in this order. `.vjs-button > .vjs-icon-placeholder:before`
   ties with `.vjs-cv-control .vjs-icon-placeholder::before` in §24, and the
   big-play `:before` block below ties with both the group here and the
   .vjs-5centsCDN-skin rule in §5 — all of them resolve 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%;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  top: -1.5rem;
  left: 1.7rem;
}


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


/* custom */
.vjs-480 .vjs-control-bar .vjs-progress-control {
  position: relative;
}

.vjs-5centsCDN-skin.vjs-480 > .vjs-control-bar > .vjs-current-time.vjs-time-control,
.vjs-5centsCDN-skin.vjs-480 > .vjs-control-bar > .vjs-time-control.vjs-time-divider,
.vjs-5centsCDN-skin.vjs-480 > .vjs-control-bar > .vjs-duration.vjs-time-control {
  display: none
}

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

.vjs-480 .vjs-progress-control .vjs-slider:before {
  background: #00b2e133;
}

/* 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;
}

/* 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;
}