@import url("../shared/control-bar.css");

:root {
  --purple: #948FFF;
  --white: #ffffff;
  --stv-controlbar-accent: var(--purple);
  --stv-controlbar-pip-icon: url("/player-web/players/vod/icons/pip.svg");
  --stv-controlbar-restart-icon: url("/player-web/players/vod/icons/restart-button.svg");
  --stv-controlbar-fullscreen-icon: url("/player-web/players/live/icons/fullscreen.svg");
  --stv-controlbar-exit-fullscreen-icon: url("/player-web/players/live/icons/exit-fullscreen.svg");
  --stv-controlbar-subtitles-icon: url("/player-web/players/vod/icons/subs-caps-button.svg");
  --stv-controlbar-subtitles-active-icon: url("/player-web/players/vod/icons/subs-caps-button-hover.svg");
  --stv-controlbar-menu-icon: url("/player-web/players/vod/icons/settings.svg");
  --stv-guidance-warning-accent: #ff5a67;
  --stv-vod-topbar-padding-x: 16px;
  --stv-vod-topbar-padding-y: 12px;
  --stv-vod-topbar-radius: 20px;
  --stv-vod-control-layer-z-index: 9;
}

@font-face {
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src:
    url('fonts/sourcesanspro-bold.woff2') format('woff2'),
    url('fonts/sourcesanspro-bold.woff') format('woff');
}

@font-face {
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src:
    url('fonts/sourcesanspro-semibold.woff2') format('woff2'),
    url('fonts/sourcesanspro-semibold.woff') format('woff');
}

@font-face {
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src:
    url('fonts/sourcesanspro-regular.woff2') format('woff2'),
    url('fonts/sourcesanspro-regular.woff') format('woff');
}

html,
body,
.video-js {
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', Tahoma, sans-serif;
  font-size: 16px;
}

/* base layout */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#stv-vod-player {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #000;
}

.video-js {
  bottom: 0;
  height: 100% !important;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100% !important;
}

/* Spinner */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.stv-spinner {
  display: none;
  left: 50%;
  position: absolute;
  top: 50%;
}

.unloaded .stv-spinner,
.video-js.vjs-seeking .vjs-loading-spinner,
.video-js.vjs-waiting .vjs-loading-spinner {
  -webkit-animation: spin 0.75s infinite cubic-bezier(0.6, 0.2, 0, 0.8);
  animation: spin 0.75s infinite cubic-bezier(0.6, 0.2, 0, 0.8);
  display: block;
  visibility: visible;
}

.unloaded .video-js {
  opacity: 0;
}

.video-js .vjs-loading-spinner::before,
.video-js .vjs-loading-spinner::after {
  display: none !important;
}

.video-js {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: #000;
}

.video-js .vjs-tech:focus,
.video-js .vjs-tech:focus-visible,
.video-js video:focus,
.video-js video:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.stv-spinner,
.video-js .vjs-loading-spinner {
  border-radius: 100%;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  box-sizing: border-box;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  opacity: 1;
  width: 100px;
  -webkit-animation: spin 0.75s infinite cubic-bezier(0.6, 0.2, 0, 0.8);
  animation: spin 0.75s infinite cubic-bezier(0.6, 0.2, 0, 0.8);
}

/* Big Play Button */
.vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.5) !important;
  mix-blend-mode: normal;
  width: 75px !important;
  height: 75px !important;
  line-height: 1.5em !important;
  margin: 0px !important;
  transform: translate(-50%, -50%);
}
.vjs-big-play-button:hover {
  height: 96px !important;
  width: 96px !important;
  line-height: 2em !important;
  background-color: #948FFF !important;
  opacity: 0.75;
}

.vjs-big-play-button .vjs-icon-placeholder:before {
  display: flex;
  align-items: center;
  justify-content: center;
}

.theo-button-tooltip {
  font-family: "Source Sans Pro", sans-serif;
}
/* Control Bar */
.video-js.vjs-ad-playing .vjs-play-progress {
  background-color: var(--white);
}

.vjs-ssai .vjs-ssai-ad-marker {
  width: 4px;
  background: #fff;
}

.video-js .vjs-control-bar.vjs-control-bar {
  font-size: 12px;
  color: white;
  background: transparent;
  height: var(--stv-controlbar-height) !important;
  z-index: var(--stv-vod-control-layer-z-index);
  opacity: 1 !important;
  transform: translateY(0) !important;
  -webkit-transition-property: opacity !important;
  transition-property: opacity !important;
  -webkit-transition-duration: var(--stv-controlbar-fade-duration) !important;
  transition-duration: var(--stv-controlbar-fade-duration) !important;
}

.vjs-control-bar {
  font-size: 16px !important;
  color: #4a4a4a !important;
}
/* don't show focus ring on mouse click */
.vjs-control[data-mouse-focus] {
  outline: none;
}

.video-js.stv-controlbar-auto-hide:not(.stv-controlbar-touch-visible).vjs-has-started:not(.vjs-user-active)
  .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.stv-controlbar-auto-hide.vjs-has-started.vjs-paused.vjs-ad-playing:not(.vjs-user-active)
  .vjs-control-bar {
  opacity: 0 !important;
  transform: translateY(0) !important;
}

.video-js.stv-pause-overlay-active .vjs-control-bar,
.video-js.stv-controlbar-auto-hide.stv-pause-overlay-active:not(.stv-controlbar-touch-visible).vjs-has-started:not(.vjs-user-active)
  .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.stv-controlbar-auto-hide.stv-pause-overlay-active.vjs-has-started.vjs-paused:not(.vjs-user-active)
  .vjs-control-bar {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  z-index: calc(var(--stv-vod-control-layer-z-index) + 2) !important;
}

.vjs-ssai.vjs-ad-playing .vjs-control-bar .vjs-volume-level {
  background-color: rgba(255, 255, 255, 0.96);
  border-radius: 5px;
}

.video-js .vjs-volume-level {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-radius: 5px !important;
}

.vjs-progress-control {
  opacity: 0.8;
}

.video-js .vjs-control-bar > .vjs-volume-panel {
  height: var(--stv-controlbar-bubble-size) !important;
  min-height: var(--stv-controlbar-bubble-size) !important;
}

.video-js .vjs-control-bar > .vjs-audio-button.vjs-hidden {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
}

.video-js .vjs-big-play-button:active,
.video-js .vjs-big-play-button:focus,
.video-js:active .vjs-big-play-button,
.video-js:hover .vjs-big-play-button {
  background-color: #948FFF !important;
}

.vjs-current-time-display,
.vjs-duration,
.vjs-time-divider {
  color: #F6F6F6 !important;;
}

.vjs-control-bar .vjs-time-control {
  display: flex !important;
  align-items: center !important;
  height: var(--stv-controlbar-bubble-size) !important;
  min-height: var(--stv-controlbar-bubble-size) !important;
  line-height: 1 !important;
  min-width: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.vjs-control-bar .vjs-current-time,
.vjs-control-bar .vjs-duration,
.vjs-control-bar .vjs-time-divider {
  width: auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
.video-js.vjs-controls-disabled .vjs-text-track-display, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{
  bottom: 3em !important
}
.vjs-control-bar .vjs-time-control .vjs-current-time-display,
.vjs-control-bar .vjs-time-control .vjs-duration-display {
  display: flex !important;
  align-items: center !important;
  font-family: "Source Sans Pro", Tahoma, sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 74% !important;
  letter-spacing: 0px;
  vertical-align: middle;
}

.vjs-control-bar .vjs-time-divider {
  margin: 0 0.15em !important;
  font-family: "Source Sans Pro", Tahoma, sans-serif;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 74% !important;
  letter-spacing: 0px;
  vertical-align: middle;
}

.video-js .vjs-control-bar > .vjs-remaining-time {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

@media (max-width: 319px) {
  .vjs-time-controls,
  .vjs-restart-button {
    display: none !important;
  }
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  width: 10em !important;
}

/* subtitles menu */
.vjs-menu-item {
  border-radius: 0 !important;
  margin: 0 !important;
  color: white !important;
  background-color: rgba(246, 246, 246, 0.8) !important;
}

.vjs-menu-item:hover {
  text-shadow: none !important;
  color: var(--purple) !important;
}

.vjs-selected {
  color: var(--purple) !important;
  background: #fff !important;
}
.vjs-selected:hover {
  background: #fff !important;
}

.video-js .vjs-control-bar .stv-settings-popover {
  position: absolute;
  inset: auto 0 calc(100% + 8px) auto;
  z-index: 30;
}

.video-js .vjs-control-bar .stv-settings-popover.is-hidden {
  display: none !important;
}

.video-js .vjs-control-bar .stv-settings-button {
  width: var(--stv-controlbar-menu-width) !important;
  min-width: var(--stv-controlbar-menu-width);
  background: none !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  align-self: center;
  height: var(--stv-controlbar-bubble-size);
  min-height: var(--stv-controlbar-bubble-size);
  margin: 0 !important;
  overflow: visible;
  padding: 0 !important;
  position: relative;
}

.video-js .vjs-control-bar .stv-settings-button > button {
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  background-color: transparent !important;
  border-radius: 999px !important;
  border: none;
  color: #fff;
}

.video-js .vjs-control-bar .stv-settings-button > button::before {
  content: '';
  position: absolute;
  inset: var(--stv-controlbar-control-bubble-inset);
  border-radius: 999px;
  background-color: var(--stv-controlbar-bubble-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 0;
}

.video-js .vjs-control-bar .stv-settings-button > button:hover::before,
.video-js .vjs-control-bar .stv-settings-button > button:focus-visible::before {
  opacity: var(--stv-controlbar-bubble-opacity-hover);
}

.video-js .vjs-control-bar .stv-settings-button.is-open > button::before {
  opacity: var(--stv-controlbar-bubble-opacity-hover);
}

.stv-settings-button__glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  pointer-events: none;
}

.stv-settings-button__glyph svg {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
}

.video-js .vjs-control-bar .stv-settings-popover .stv-settings-menu__content {
  box-sizing: border-box;
  width: min(200px, calc(100vw - 1rem)) !important;
  min-width: 200px;
  position: relative;
  padding: 0 !important;
  border-radius: 14px;
  background: var(--stv-controlbar-group-bubble-color) !important;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: var(--stv-controlbar-group-bubble-filter);
  backdrop-filter: var(--stv-controlbar-group-bubble-filter);
  overflow: hidden;
}

.stv-settings-menu__panel {
  display: none;
}

.stv-settings-menu__panel.is-active {
  display: grid;
}

.stv-settings-menu__item,
.stv-settings-menu__back {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: transparent !important;
  color: #fff !important;
  border: none;
  font-family: "Source Sans Pro", Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 74%;
  letter-spacing: 0px;
  vertical-align: middle;
  position: relative;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, opacity 160ms ease;
  overflow: hidden;
  border-radius: 0 !important;
}

.stv-settings-menu__item--no-icon {
  grid-template-columns: minmax(0, 1fr) 16px;
}

.stv-settings-menu__item::before,
.stv-settings-menu__back::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--stv-controlbar-bubble-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 0;
}

.stv-settings-menu__item:hover,
.stv-settings-menu__item:focus-visible,
.stv-settings-menu__item.vjs-selected,
.stv-settings-menu__back:hover,
.stv-settings-menu__back:focus-visible {
  background: transparent !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.stv-settings-menu__item:hover::before,
.stv-settings-menu__item:focus-visible::before,
.stv-settings-menu__back:hover::before,
.stv-settings-menu__back:focus-visible::before {
  opacity: var(--stv-controlbar-bubble-opacity-hover);
}

.stv-settings-popover .stv-settings-menu__item.vjs-selected,
.stv-settings-popover .stv-settings-menu__item.vjs-selected:hover,
.stv-settings-popover .stv-settings-menu__item.vjs-selected:focus-visible,
.stv-settings-popover .stv-settings-menu__back:hover,
.stv-settings-popover .stv-settings-menu__back:focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.stv-settings-menu__back-header {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}

.stv-settings-menu__back {
  color: rgba(255, 255, 255, 0.88) !important;
}

.stv-settings-menu__label {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}

.stv-settings-menu__label--back {
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  grid-column: 1 / 3;
}

.stv-settings-menu__back-divider {
  margin: 4px 0;
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.stv-settings-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #fff;
  position: relative;
  z-index: 1;
}

.stv-settings-menu__icon svg {
  display: block;
  width: 16px;
  height: 16px;
  overflow: visible;
}

.stv-settings-menu__back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.stv-settings-menu__back-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.stv-settings-menu__title {
  display: block !important;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 74%;
  letter-spacing: 0px;
  vertical-align: middle;
  font-family: inherit;
  margin-bottom: 4px;
}

.stv-settings-menu__description {
  display: block !important;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  font-family: inherit;
}

.stv-settings-menu__meta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  min-width: 16px;
  width: 16px;
  height: 16px;
  margin-left: 0;
  position: relative;
  z-index: 1;
}

.stv-settings-menu__item[data-meta-type="chevron"] .stv-settings-menu__meta::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.62);
  border-right: 1.5px solid rgba(255, 255, 255, 0.62);
  transform: rotate(45deg);
}

.stv-settings-menu__item[data-meta-type="radio"] .stv-settings-menu__meta {
  box-sizing: border-box;
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
}

.stv-settings-menu__item[data-meta-type="radio"] .stv-settings-menu__meta::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 160ms ease, transform 160ms ease;
}

.stv-settings-menu__item[data-meta-type="radio"].vjs-selected .stv-settings-menu__meta {
  border-color: #fff;
}

.stv-settings-menu__item[data-meta-type="radio"].vjs-selected .stv-settings-menu__meta::after {
  opacity: 1;
  transform: scale(1);
}

/* remove sub track issues */
/*.vjs-captions-menu-item {
  display: none !important; /* removes extra English subs option */
/*}*/

::-webkit-media-text-track-region {
  margin: 0px auto;
  margin-top: 90vh;
  width: 100%;
}
::-webkit-media-text-track-display {
  font-size: 20px !important;
}

/* quality selector */

.vjs-quality-menu-button-HD-flag:after {
  color: #fff !important;
}

.pulse-loading-background .pulse-loading-spinner {
  background: none;
}
.pulse-adplayer-skin .pulse-ad-counter {
  text-align: left;
  display: none !important;
}
.pulse-play-button,
.pulse-mute-button-unmuted,
.pulse-mute-button-muted {
  visibility: hidden;
}
.ads-countdown {
  position: relative;
  z-index: 10001;
  font-size: medium;
  padding: 2%;
  text-align: right;
}

.pulse-progress {
  height: 0.3em;
  color: #948FFF !important;
  background-color: #4a4a4a !important;
  border: 0 !important;
}
.pulse-progress::-moz-progress-bar {
  background: #948FFF !important;
}
.pulse-progress::-webkit-progress-bar {
  background: #4a4a4a !important;
}
.pulse-progress::-webkit-progress-value {
  background: #948FFF !important;
}
.bcplayer {
  margin-top: 0 !important;
}
.vjs-layout-small .vjs-time-control:not(.vjs-time-divider,.vjs-remaining-time) {
  display: flex !important;
}

@media (max-width: 319px) {
  .vjs-time-controls,
  .vjs-restart-button {
    display: none !important;
  }
}

@media screen and (max-width: 500px) {
  .vjs-progress-holder,
  .vjs-fullscreen {
    width: 100% !important;
  }

  .vjs-layout-small .vjs-time-control .vjs-time-divider,
  .vjs-control-bar .vjs-time-control .vjs-duration-display,
  .vjs-control-bar .vjs-time-control .vjs-current-time-display,
  .vjs-fullscreen .vjs-control-bar .vjs-time-control .vjs-duration-display,
  .vjs-fullscreen .vjs-control-bar .vjs-time-control .vjs-current-time-display {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue.vjs-text-track-cue-en {
    font-size: 20px !important;
  }
}

.vjs-endboard-overlay {
    position: absolute;
    bottom: 90px;
    right: 15px;
    z-index:10;
}

.vjs-control-bar .vjs-next-episode-button {
    position: absolute;
    bottom: 6rem;
    right: 15px;
    background-color: white;
    border-radius: 8px;
    padding: 12px 23px 12px 17px;
    cursor: pointer;
    z-index: 10;
    color: black !important;
    pointer-events: auto !important;
}

.video-js .vjs-control-bar .vjs-next-episode-button,
.video-js .vjs-control-bar .vjs-next-episode-button > span,
.video-js .vjs-endboard-overlay button,
.video-js .vjs-endboard-overlay button > span {
    color: #151515 !important;
}

.vjs-endboard-overlay button {
    color: black;
    background-color: white;
    border-radius: 8px;
    padding: max(1.06vw, 8px) max(2.03vw, 14px) max(1.06vw, 8px) max(1.5vw, 10px);
    cursor: pointer;
    font-size: 20px;
    z-index: 2;
    position: relative;
}

/* .vjs-hide-controls:not(.miniPlayer) .vjs-endboard-overlay button {
  transform: translateY(3rem);
  transition: transform 1s ease 0s;
} */

.vjs-endboard-overlay button > span {
  margin-left: 0.25rem;
}

.vjs-play-icon{
  margin-right: 10px;
  position: relative;
  top: 1px;
}

.vjs-eos-mode div.vjs-endboard-overlay {
    left: 0;
    top: 0;
    bottom: unset;
    right: unset;
    width: 100%;
    height: 100%;
    z-index: calc(var(--stv-vod-control-layer-z-index) + 1);
}

.vjs-eos-mode img.vjs-recommended-poster {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vjs-eos-mode .vjs-endboard-overlay:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: linear-gradient(89.54deg, rgba(21, 21, 21, 0.93) 7.6%, rgba(21, 21, 21, 0) 56.25%),
  linear-gradient(360deg, rgba(21, 21, 21, 0.95) 20.19%, rgba(21, 21, 21, 0) 54.54%);
  z-index: 1;

}

#stv-vod-player.vjs-eos-mode video {
    z-index: 5;
    width: max(250px, 35.04vw) !important;
    height: auto !important;
    right: 4.41vw;
    left: unset;
    bottom: 6.17vw;
    top: unset;
    cursor: pointer;
    border: 3px #656262 solid;
}

#stv-vod-player.vjs-eos-mode .vjs-mini-player-controls {
    display: none;
    position: absolute;
    bottom: 6.17vw;
    right: 4.41vw;
    z-index: 6;
    width: max(250px, 35.04vw);
    padding: 0.88vw;
    aspect-ratio: 16/9;
}
.vjs-mini-player-watch-credits-button{
    width: 30px;
    padding: 0;
}

#stv-vod-player.vjs-eos-mode .vjs-mini-player-controls .vjs-mini-player-watch-credits{
  margin-left: 10px;
  white-space: nowrap;
}

#stv-vod-player.vjs-eos-mode .vjs-mini-player-controls .vjs-mini-player-watch-credits-button{
  margin: auto;
  top: 0.5rem;
  position: relative;
}

#stv-vod-player.vjs-eos-mode video:hover ~ .vjs-mini-player-controls,
#stv-vod-player.vjs-eos-mode .vjs-mini-player-controls:hover {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

#stv-vod-player.vjs-eos-mode .vjs-mini-player-controls button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    width: auto;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(150, 150, 150, 0.4);
    padding: 10px;
    border-radius: 100px;
}

#stv-vod-player.vjs-eos-mode .vjs-mini-player-controls button:hover {
    background: rgba(150, 150, 150, 0.8);
}

#stv-vod-player:not(.vjs-eos-mode) .vjs-endboard-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    bottom: 90px;
    right: 15px;
    z-index: 10;
}

#stv-vod-player:not(.vjs-eos-mode) .vjs-endboard-overlay .vjs-recommended-info-container {
    display: none;
}

#stv-vod-player:not(.vjs-eos-mode) .vjs-eos-button-wrapper {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding-left: 0;
}

.vjs-eos-mode .vjs-control-bar {
    display: none;
}

.vjs-eos-mode .vjs-guidance-overlay {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.vjs-recommended-info-container {
    position: relative;
    width: max(500px, 33.131vw);
    max-width: 100%;
    padding: max(15px, 8.33vw) max(15px, 6.042vw) 0 max(15px, 6.042vw);
    z-index: 2;
}

p.vjs-watched-text {
  font-size: max(16px, 1.25vw);
}

h2.vjs-recommended-title {
  font-size: max(28px, 2.813vw); 
  font-weight: 600;   
  margin-bottom: 10px;
  margin-top: 0;
}
p.vjs-recommended-summary {
  font-size: max(16px, 1.25vw);
}

.vjs-eos-mode .vjs-eos-button-wrapper{
  display:flex;
  flex-wrap: nowrap;
  padding-left: max(15px, 6.042vw);
  padding-right: max(15px, 6.042vw);
}

.vjs-eos-mode .vjs-eos-button-wrapper button {
    font-size: max(16px, 1.354vw);
    margin-right: 18px;
    white-space: wrap;
    max-width: 100%;
}

.vjs-meta-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 16px 0;
}

.vjs-meta-genre {
  color: #F6F6F6;
  font-size: 14px;
  line-height: 20px;
}

.vjs-meta-separator {
  color: #F6F6F6;
  margin: 0;
  line-height: 20px;
  font-size: 10px;
}

.vjs-meta-icon {
  color: #F6F6F6;
  margin-left: 1px;
  width: auto;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

.vjs-meta-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vjs-ad-icon {
  width: 26px;
  height: 17px;
}

.video-js.vjs-ad-playing .stv-playback-feedback-layer {
  z-index: 10002;
}

/* Guidance Overlay Styles */
.vjs-guidance-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--stv-controlbar-foreground);
  padding: 12px var(--stv-controlbar-padding-inline);
  z-index: var(--stv-vod-control-layer-z-index);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--stv-controlbar-gap);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--stv-controlbar-fade-duration) linear,
    visibility 0s linear var(--stv-controlbar-fade-duration);
  background: none;
  pointer-events: none;
}

.video-js:not(.stv-controlbar-ready) .vjs-guidance-overlay,
.video-js:not(.vjs-has-started) .vjs-guidance-overlay {
  display: none !important;
}

.video-js.stv-controlbar-always-visible .vjs-guidance-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.video-js.stv-controlbar-auto-hide.vjs-has-started.vjs-user-active .vjs-guidance-overlay,
.video-js.stv-controlbar-auto-hide.stv-controlbar-touch-visible.vjs-has-started .vjs-guidance-overlay,
.video-js.stv-controlbar-auto-hide.vjs-has-started .vjs-control-bar.vjs-focus-within ~ .vjs-guidance-overlay,
.video-js.stv-controlbar-auto-hide.vjs-has-started .vjs-control-bar.vjs-control-bar-visible ~ .vjs-guidance-overlay,
.video-js.stv-controlbar-auto-hide.casting .vjs-guidance-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.video-js.stv-controlbar-auto-hide.vjs-has-started:not(.vjs-user-active):not(.stv-controlbar-touch-visible) .vjs-guidance-overlay {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, var(--stv-controlbar-fade-duration);
}

.vjs-guidance-left-container {
  display: inline-flex;
  flex-direction: column;
  flex: 0 1 auto;
  align-self: flex-start;
  width: fit-content;
  max-width: min(100%, 36rem);
  min-width: 0;
}

.vjs-guidance-left-container,
.vjs-guidance-right-container {
  --stv-controlbar-panel-radius: var(--stv-vod-topbar-radius);
  min-height: var(--stv-controlbar-height);
  padding: var(--stv-vod-topbar-padding-y) var(--stv-vod-topbar-padding-x);
  border-radius: var(--stv-vod-topbar-radius);
}

.vjs-guidance-icon-line {
  width: 4px;
  height: 18px;
  background-color: var(--stv-controlbar-accent);
  margin-right: 7px;
  display: block;
  border-radius: 2.5px;
}

.vjs-guidance-overlay--guidance .vjs-guidance-icon-line {
  background-color: var(--stv-guidance-warning-accent);
}

.vjs-guidance-label {
  color: var(--stv-controlbar-foreground);
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.vjs-guidance-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.vjs-guidance-right-container {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  text-align: right;
  flex: 0 1 auto;
  min-width: 0;
}

.video-js.vjs-fullscreen .vjs-guidance-overlay {
  justify-content: space-between;
}

.video-js.vjs-fullscreen .vjs-guidance-right-container {
  display: flex;
}

.vjs-asset-title {
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 18px;
  color: var(--stv-controlbar-foreground);
}

.vjs-episode-info {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
}

@media screen and (max-width: 767px) {
  .vjs-guidance-overlay {
    padding-inline: var(--stv-controlbar-padding-inline-mobile);
  }

  .vjs-guidance-overlay {
    flex-direction: column;
    align-items: stretch;
  }

  .vjs-guidance-right-container {
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .video-js:not(.vjs-fullscreen) .vjs-guidance-overlay {
    --stv-vod-topbar-padding-x: 10px;
    --stv-vod-topbar-padding-y: 6px;
    --stv-vod-topbar-radius: 12px;
    padding: 0;
    box-sizing: border-box;
  }

  .video-js:not(.vjs-fullscreen) .vjs-guidance-left-container {
    min-height: 0;
    max-width: min(100%, 28rem);
  }

  .video-js:not(.vjs-fullscreen) .vjs-guidance-label {
    font-size: 14px;
  }

  .video-js:not(.vjs-fullscreen) .vjs-guidance-text {
    font-size: 12px;
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 575px) {
  .video-js:not(.vjs-fullscreen) .vjs-guidance-left-container {
    display: block;
    line-height: normal;
  }

  .video-js:not(.vjs-fullscreen) .vjs-guidance-label {
    display: inline;
    margin-right: 0.35em;
  }

  .video-js:not(.vjs-fullscreen) .vjs-guidance-icon-line {
    display: inline-block;
    height: 1em;
    vertical-align: middle;
  }
}

/* Added pause ads overlay styles */
.pause-overlay {
  background-color: transparent;
  backdrop-filter: brightness(0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: calc(var(--stv-vod-control-layer-z-index) + 1);
  padding: 16px;
  transition: opacity 0.3s ease;
  cursor: pointer;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
}

.pause-inner {
  background-color: transparent;
  width: fit-content;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 8px;
  background-position: center;
  opacity: 1;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  aspect-ratio: 16 / 9 !important;
}

.pause-buttons {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.pause-resume-button,
.pause-hide-button {
  min-width: 148px;
  padding: 10px 28px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Source Sans Pro', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22.63px;
  text-transform: none;
  white-space: nowrap;
  box-shadow:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.pause-resume-button {
  background-color: white !important;
  color: #000 !important;
  border: none;
}

.pause-hide-button {
  background-color: var(--stv-controlbar-group-bubble-color) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: var(--stv-controlbar-group-bubble-filter);
}

.pause-resume-button svg,
.pause-hide-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}