/* 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--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
   Re-declared at runtime by the iframe template / vjs-access.js to inject the
   tenant colour, so these names must not change. */

.vjs-5centsCDN-skin {
  --vjs-5centsCDN-skin--primary: #4fa83d;
  --vjs-5centsCDN-skin--secondary: #ffffff;
  --vjs-5centsCDN-skin--mainplayer: var(--vjs-5centsCDN-asset--main-player-hover);
  --vjs-5centsCDN-skin--mainplayerhover: var(--vjs-5centsCDN-asset--main-player-hover);
  --vjs-5centsCDN-text-color: #ffff;
  --vjs-5centsCDN-skin--chapters: var(--vjs-5centsCDN-asset--chapters);
}

/* tenant colour application */
.vjs-5centsCDN-skin .vjs-play-progress,
.vjs-5centsCDN-skin .vjs-volume-level,
.vjs-5centsCDN-skin .vjs-zoom-menu .vjs-zoom-level,
.vjs-5centsCDN-skin .vjs-play-progress .vjs-time-tooltip {
  background-color: var(--vjs-5centsCDN-skin--secondary) !important;
}


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


/* 6. TOUCH NAV (centre overlay: skip back / play-pause / skip forward) */

.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-p-b .vjs-svg-icon svg,
.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-r-b .vjs-svg-icon svg,
.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-f-b .vjs-svg-icon svg {
  display: none;
}

/* play / pause. nuevo swaps state by setting data-id on the icon span, not by a
   class on the button (this is the old .vjs-touch-overlay rule, ported). */
.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-p-b .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-asset--main-player);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-p-b .vjs-svg-icon[data-id="pause"] {
  background-image: var(--vjs-5centsCDN-asset--main-player-pause);
}

/* skip buttons — videojs.css sizes these icons to 45px, so only the artwork is
   swapped here. */
.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-r-b .vjs-svg-icon,
.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-f-b .vjs-svg-icon {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-r-b .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-asset--rewind);
}

.vjs-5centsCDN-skin .vjs-touch-nav .vjs-b-f-b .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-asset--forward);
}


/* 7. CONTROL BAR — SHELL */

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

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

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

/* control order */
.vjs-control-bar .vjs-resolution-menu-button {
  order: 91;
}

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

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


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

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

/* play icon */
.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.4);
  background-image: var(--vjs-5centsCDN-asset--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 {
  background-image: var(--vjs-5centsCDN-asset--pause);
}

/* replay icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-play-control.vjs-ended .vjs-svg-icon {
  background-image: var(--vjs-5centsCDN-asset--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);
}


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

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

/* seek-interval number overlay. NOTE: `.num` no longer appears in videojs.css
   or in the rendered DOM — nuevo bakes the interval into the icon symbol. */
.vjs-5centsCDN-skin .vjs-rewind-control .num {
  bottom: 16px !important;
  right: 17px;
}

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

.vjs-1600 .vjs-forward-control .num {
  left: 21px !important;
}

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

.vjs-5centsCDN-skin .vjs-control-bar .vjs-progress-control .vjs-progress-holder {
  top: -2px;
}

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

.vjs-480 .vjs-control-bar .vjs-custom-control-spacer.vjs-spacer {
  display: none !important;
}

.vjs-480 .vjs-control-bar .vjs-progress-control {
  position: relative;
  top: -6px;
}

.vjs-480 .vjs-progress-control .vjs-load-progress, .vjs-480 .vjs-progress-control .vjs-play-progress {
  top: 22px;
}

.vjs-5centsCDN-skin.vjs-480 .vjs-progress-control .vjs-slider:before {
  height: 6px;
  top: 49%;
}


/* 10. CONTROL BAR — VOLUME */

.video-js.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-1600.vjs-5centsCDN-skin .vjs-control-bar .vjs-volume-panel .vjs-svg-icon {
  top: -5px;
}

/* 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: -4px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: width 0.3s;
}

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

.vjs-5centsCDN-skin.vjs-480 .vjs-control-bar .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-svg-icon,
.vjs-5centsCDN-skin.vjs-480 .vjs-control-bar .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal > div {
  top: 0;
}

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


/* 11. CONTROL BAR — PROGRESS BAR */

.vjs-5centsCDN-skin .vjs-progress-control {
  margin: 0 0.5em !important;
}

.vjs-5centsCDN-skin .vjs-progress-control .vjs-slider {
  position: relative;
  margin: 0 0.45em 0 0.45em;
  height: 44px !important;
}

.vjs-5centsCDN-skin .vjs-progress-control .vjs-slider:before {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, .5);
  top: 50%;
}

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

.vjs-5centsCDN-skin .vjs-progress-holder {
  height: 0.5em;
}

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

.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::before {

  border-radius: 50px;

}

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

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

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


/* 12. CONTROL BAR — CAPTIONS */

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

/* captions icon */
.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-has-mouse.vjs-ad-playing .vjs-button:hover,
.vjs-has-mouse .vjs-button:hover {
  background-color: transparent;
}

/* videojs.css marks "captions on" with a border-bottom on the icon span, which
   is now a scaled full-size box, so the underline would render half-width and
   mispositioned. Draw it as a pseudo-element instead — a border here would be
   stripped by the `.vjs-control .vjs-button { border: none }` reset in §22. */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-cap-active .vjs-svg-icon {
  border-bottom: 0;
}

.vjs-5centsCDN-skin .vjs-control-bar .vjs-cap-active::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 8px;
  height: 2px;
  background-color: #C00;
  pointer-events: none;
}

/* NOTE: inert — this build's captions menu items render no icon span. */
.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;
}


/* 13. CONTROL BAR — CHAPTERS & MARKERS */

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

/* 14. CONTROL BAR — QUALITY BUTTON */

.vjs-5centsCDN-skin .vjs-quality-button {
  line-height: 40px !important;
}

.vjs-5centsCDN-skin .vjs-quality-button span {
  padding: 0.35em;
  background-color: var(--vjs-5centsCDN-skin--primary);
  border-radius: 3px;
  text-transform: capitalize;
  font-size: 12px;
}

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


/* 15. CONTROL BAR — RESOLUTION BUTTON */

.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: 20%;
  background: var(--vjs-5centsCDN-skin--primary);
  padding: 6px;
  border-radius: 10%;
  display: flex;
  justify-content: space-evenly;
  line-height: 9px;
  font-size: 11px;
}


/* 16. CONTROL BAR — PLAYBACK RATE */

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

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

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

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

  left: -26px;
}

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


/* 17. CONTROL BAR — SETTINGS (COG) */
.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;
}


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

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

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


/* 19. CONTROL BAR — FULLSCREEN */

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

/* fullscreen icon */
.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-asset--fullscreen);
  background-repeat: no-repeat;
  background-position: center center;
}

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


/* 20. CONTROL BAR — CHROMECAST / AIRPLAY */
/* 
.vjs-5centsCDN-skin .vjs-control-bar .vjs-chromecast-button:hover {
  background-color: transparent !important;
}

.vjs-5centsCDN-skin .vjs-chromecast-button {
  position: absolute;
  top: 50%;
  left: 10px;
  text-shadow: 1px 1px 1px #000;
  z-index: 2;
  height: 35px !important;
}

.vjs-5centsCDN-skin .vjs-chromecast-button.vjs-cast-big {
  display: none !important;
}

.vjs-5centsCDN-skin .vjs-chromecast-button .vjs-icon-placeholder:before {
  top: 1px;
  font-size: 22px !important;
} */

/* airplay */
/* .vjs-5centsCDN-skin .vjs-airplay-button .vjs-icon-placeholder:before {
  font-size: 24px !important;
  top: 8px !important;
} */


/* 21. MENUS */

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

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

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

.video-js .vjs-menu-quality .vjs-settings-back,
.video-js .vjs-menu-settings .vjs-settings-back {
  padding-left: 32px !important;
}

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


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

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

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


/* 23. OVERLAY — CURRENT VIEWERS */

.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: 2.3em !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;
}


/* 24. OVERLAY — LIVE / DVR */

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

.vjs-5centsCDN-skin .vjs-seek-to-live-control.vjs-at-live-edge {
  position: fixed;
  top: 1em;
  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;
  top: 1em;
  width: 4em;
  height: 2em;
  right: 7em;
  background: var(--vjs-5centsCDN-asset--live) no-repeat center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


/* 25. OVERLAY — TITLE */

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


/* 26. OVERLAY — 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;
}


/* 27. SHARE BUTTON & MODAL */

/* share button  custom icon */
.vjs-5centsCDN-skin .vjs-control-bar .vjs-social-share {
  position: fixed;
  top: 1em;
  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.4);
}

.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);
  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: 17px;
  right: 8px;
  background: black;
  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;
}

/* 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);
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 10px;
  height: 3em;
  width: 22em;
  margin-bottom: 0.5em;
  color: #ffffff;
  padding: 7px;
  padding-right: 45px;
}

.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: #615b55;
  top: -3em;
  position: absolute;
  right: 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: #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 */

.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);
  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;
  border-radius: 6px;
  padding: 5px;
  display: none;
}


/* 28. ADVERTS */

.vjs-5centsCDN-skin.vjs-ad-playing .vjs-logo-content,
.vjs-5centsCDN-skin.vjs-ad-playing .vjs-cv-control {
  display: none;
}

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

.vjs-5centsCDN-skin .vjs-vast-label {
  line-height: 39px !important;
}


/* 29. ERROR DISPLAY */

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

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

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

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

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