@viewlift/player-backup 2.0.69-smartTv → 2.0.70-smartTv

package/cjs/bundle.css

@@ -1,299 +1,5 @@
 
 
-/* CSS for videojs-dvr-seekbar */
-
-.video-js.vjs-dvr-seekbar {
-  display: block;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-live-control {
-  display: none;
-}
-
-.video-js.vjs-dvr-seekbar.vjs-live .vjs-progress-control {
-  display: flex;
-}
-
-.video-js.vjs-dvr-seekbar.vjs-user-inactive .vjs-control-bar.vjs-dvr-control-bar .vjs-progress-control .vjs-slider .vjs-seek-handle:before {
-  font-size: 0;
-  transition-delay: 3s;
-  -webkit-transition-delay: 3s;
-  -moz-transition-delay: 3s;
-  -ms-transition-delay: 3s;
-  -o-transition-delay: 3s;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-time-tooltip {
-  z-index: 0;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-mouse-display .vjs-time-tooltip {
-  z-index: 1;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar {
-  display: flex;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-dvr-progress-control {
-  background: transparent;
-}
-
-/* width of progress bar */
-.video-js.vjs-dvr-seekbar .vjs-progress-control.vjs-control.vjs-dvr-progress-control{
-  background: transparent; /* #aaa8a8 */
-  width: 99%;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  min-width: 50px;
-  font-weight: bold;
-  position: relative;
-  color: #8c8b8b;
-}
-
-/* align live circle with live text */
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button .liveCircle{
-  margin-top: -9px;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button.onair {
-  color: #fff;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button.onair .liveCircle:after {
-  background: tomato;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button.onair:focus .liveCircle:after {
-  box-shadow: 0 0 1em tomato;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button .liveText {
-  margin-left: 1.5em;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button .liveCircle:after {
-  content: '';
-  position: absolute;
-  width: 0.9em;
-  height: 0.9em;
-  border-radius: 50%;
-  background: gray;
-  left: 0.5em;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button:focus .liveCircle:after {
-  box-shadow: 0 0 1em gray;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button:hover {
-  cursor: pointer;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-load-progress {
-  overflow: hidden;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-current-time,
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-duration,
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-remaining-time,
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-time-divider {
-  display: none;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-live-display {
-  display: none;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-progress-control.vjs-control .vjs-slider .vjs-control-text:before {
-  height: 0;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-progress-control.vjs-control .vjs-slider .vjs-control-text:after {
-  content: ' \25BC';
-  color: #000;
-  top: 1.25em;
-  position: relative;
-  left: -1.55em;
-  font-size: 1.5em;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-progress-control.vjs-control .vjs-slider .vjs-seek-handle.vjs-slider-handle {
-  line-height: 0.2em;
-  position: relative;
-  top: -0.21em;
-  float: left;
-}
-
-.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-progress-control .vjs-slider .vjs-seek-handle.vjs-slider-handle:before {
-  content: ' \25CF';
-  font-size: 2em;
-  transition: font-size 0.2s;
-  -webkit-transition: font-size 0.2s;
-  -moz-transition: font-size 0.2s;
-  -ms-transition: font-size 0.2s;
-  -o-transition: font-size 0.2s;
-}
-
-/* handle  defaultV2 skin changes */
-.video-js.vjs-dvr-seekbar .vjs-seek-to-live-control.vjs-control{
-  display: none;
-}
-
-
-
-.video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
-    height: 0.7em;
-    position: absolute;
-    top: -0.7em;
-    width: 100%;
-}
-
-.video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
-    height: 100%;
-}
-
-.video-js.skin_vlone .vjs-play-progress:before {
-    display: none !important;
-}
-
-.video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
-    margin: 0 !important;
-
-}
-
-
-.video-js.skin_vlone .vjs-custom-control-spacer {
-    display: block;
-    flex: 1 1 auto;
-}
-
-.video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
-    z-index: 1;
-}
-
-
-.video-js.skin_vlone .vjs-control-bar {
-    height: 40px;
-}
-
-.video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
-.vjs-button>.vjs-icon-placeholder:before {
-    position: relative !important;
-}
-.video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
-    display: flex;
-    left: 0px;
-    top: -1px;
-}
-
-.vjs-button>.vjs-icon-placeholder:before {
-    font-size: 2em !important; 
-}
-
-.video-js.skin_vlone .vjs-control {
-    width: 4.3em;
-}
-
-.vjs-menu-button-popup .vjs-menu {
-    bottom: 10px !important;
-}
-
-
-.video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
-    height: 1.3em;
-    position: absolute;
-    top: -1.3em;
-    transition: height 0.3s, top 0.3s;
-}
-
-
-.video-js.skin_vlone.vjs-live .vjs-time-control{
-    display: none !important;
-}
-
-.video-js.skin_vlone .vjs-time-control {
-    display: block;
-}
-.video-js.skin_vlone .vjs-remaining-time {
-    display: none;
-}
-
-.video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
-    line-height: 3.5em;
-    font-size: 1.1em;
-    min-width: 4em;
-}
-
-.video-js.skin_vlone .vjs-time-divider > div{
-    display: flex;
-    justify-content: center;
-}
-
-.video-js.skin_vlone .vjs-live-control{
-    align-items: center;
-}
-.video-js.skin_vlone .vjs-live-display{
-    height: 2.2em;
-    display: flex;
-    align-items: center;
-    font-family: monospace;
-    width: 4em;
-    justify-content: center;
-    background: red;
-    margin: 4px 0px 4px 12px;
-}
-
-.video-js.skin_vlone .vjs-time-control {
-    line-height: 3.5em !important;
-    font-size: 1.1em !important;
-    width: min-content !important;
-    min-width: 1.5em;
-    padding: 0 !important;
-    user-select: none;
-}
-
-.video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
-    margin-left: 16px !important;
-}
-
-
-/* Big play */
-.video-js.skin_vlone.vjs-paused .vjs-big-play-button {
-    width: 80px;
-    height: 80px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    font-size: 5em;
-    line-height: 1.3em;
-    transform: none !important;
-    border-radius: 1.3em;
-}
-  
-  
-  @media(max-width:600px){
-    .video-js.skin_vlone button.vjs-big-play-button {
-    width: 50px !important;
-    height: 50px !important;
-    font-size: 2.1rem !important;
-  }
-  }
-  
-
 
 /*
  * Styles the icon size and line height for button icons in the SmartTV skin.
@@ -1383,476 +1089,770 @@
  *   - Adjusts the right position for alignment.
  *
  * Accessibility:
- *   - Ensures the menu is accessible and does not overlap with controls.
+ *   - Ensures the menu is accessible and does not overlap with controls.
+ */
+.video-js.skin_smartTV .vjs-menu > ul.vjs-menu-content {
+  bottom: 3.5em !important;
+  right: -1em;
+}
+
+/*
+ * Styles the Chromecast button icon in SmartTV skin.
+ *
+ * Purpose:
+ *   - Ensures the Chromecast button icon is properly sized.
+ *
+ * Visual Design:
+ *   - Fixed width (17px) and height (17px) for the icon.
+ *
+ * Accessibility:
+ *   - Crisp and legible icon on all displays.
+ */
+.video-js.skin_smartTV .vjs-chromecast-button .vjs-icon-placeholder {
+  width: 17px !important;
+  height: 17px !important;
+}
+
+/*
+ * Hides the subs and caps button in SmartTV skin.
+ *
+ * Purpose:
+ *   - Omits the subs and caps button to simplify the UI.
+ *
+ * Visual Design:
+ *   - None (display: none).
+ *
+ * Accessibility:
+ *   - Reduces visual clutter for users.
+ */
+.video-js.skin_smartTV .vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button {
+  display: none;
+}
+
+/*
+ * Styles the subs and caps button in SmartTV skin.
+ *
+ * Purpose:
+ *   - Ensures the subs and caps button is properly sized.
+ *
+ * Visual Design:
+ *   - Fixed height and width for consistency.
+ *
+ * Accessibility:
+ *   - Easily navigable with remotes or keyboard.
+ */
+.video-js.skin_smartTV button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button {
+  height: min-content;
+  width: min-content;
+}
+
+/*
+ * Styles the vertical volume panel in SmartTV skin.
+ *
+ * Purpose:
+ *   - Provides a vertical layout for the volume control, suitable for TV remotes and large screens.
+ *   - Ensures the volume panel is wide enough for easy interaction, especially with remote navigation.
+ *
+ * Visual Design:
+ *   - Sets a fixed width (6em) for consistent sizing and touch/remote usability.
+ *   - Integrates with the overall control bar design for a seamless look.
+ *
+ * Accessibility:
+ *   - Wide enough for easy focus and selection using a remote or keyboard.
+ *   - Supports users with limited dexterity by increasing the interactive area.
+ */
+.video-js.skin_smartTV .vjs-volume-panel.vjs-volume-panel-vertical {
+  width: 6em;
+}
+
+/*
+ * Adjusts the content position in SmartTV skin.
+ *
+ * Purpose:
+ *   - Fine-tunes the position of overlay content (such as menus or widgets) to avoid overlapping with controls.
+ *   - Ensures content is visually aligned and does not obscure important UI elements.
+ *
+ * Visual Design:
+ *   - Uses !important to override default positioning and guarantee placement.
+ *   - Moves content slightly up and to the left for optimal visibility on TV screens.
+ *
+ * Accessibility:
+ *   - Prevents overlay content from covering navigation or playback controls, supporting a better user experience.
+ */
+.video-js.skin_smartTV .content {
+  bottom: 3.4rem !important;
+  right: -4rem !important;
+}
+
+/*
+ * Styles the setting icon in SmartTV skin.
+ *
+ * Purpose:
+ *   - Ensures the settings icon (SVG) is clearly visible and appropriately sized for TV interfaces.
+ *   - Maintains visual consistency with other icons and controls.
+ *
+ * Visual Design:
+ *   - Sets a fixed height (18px) for the SVG icon, overriding any inherited styles.
+ *   - Keeps the icon crisp and legible on high-resolution displays.
+ *
+ * Accessibility:
+ *   - Sufficient size for visibility from a distance and for users with low vision.
+ */
+.setting-icon > svg {
+  height: 18px !important;
+}
+
+/*
+ * Styles the output overlay in SmartTV skin.
+ *
+ * Purpose:
+ *   - Provides a transparent overlay for displaying output or feedback without blocking user interaction.
+ *   - Used for visual effects, loading indicators, or non-interactive overlays.
+ *
+ * Visual Design:
+ *   - Absolutely positioned to cover the entire player area.
+ *   - Full width and height ensure complete coverage.
+ *   - z-index: 0 keeps the overlay behind interactive controls.
+ *   - pointer-events: none allows clicks and navigation to pass through.
+ *   - No border for a clean, unobtrusive appearance.
+ *
+ * Accessibility:
+ *   - Overlay does not interfere with keyboard or remote navigation.
+ *   - Ensures that feedback or effects are visible but never block controls or content.
  */
-.video-js.skin_smartTV .vjs-menu > ul.vjs-menu-content {
-  bottom: 3.5em !important;
-  right: -1em;
+.output-overlay {
+  position: absolute;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 0;
+  border: 0;
+  pointer-events: none;
 }
 
 /*
- * Styles the Chromecast button icon in SmartTV skin.
+ * Styles the iframe to take full width and height in SmartTV skin.
  *
  * Purpose:
- *   - Ensures the Chromecast button icon is properly sized.
+ *   - Ensures iframes used in the player take up the full available space.
  *
  * Visual Design:
- *   - Fixed width (17px) and height (17px) for the icon.
+ *   - Sets width and height to 100% for full coverage.
  *
  * Accessibility:
- *   - Crisp and legible icon on all displays.
+ *   - Guarantees that iframes do not interfere with player controls or content.
  */
-.video-js.skin_smartTV .vjs-chromecast-button .vjs-icon-placeholder {
-  width: 17px !important;
-  height: 17px !important;
+iframe {
+  width: 100%;
+  height: 100%;
 }
 
 /*
- * Hides the subs and caps button in SmartTV skin.
+ * Responsive styles for SmartTV skin on small screens.
  *
  * Purpose:
- *   - Omits the subs and caps button to simplify the UI.
+ *   - Adjusts the layout and element sizes for better usability on smaller screens.
  *
  * Visual Design:
- *   - None (display: none).
+ *   - Hides the provider image and adjusts icon sizes.
+ *   - Modifies button sizes and positions for smaller displays.
+ *   - Changes the layout of the seek to live control and live control.
+ *   - Hides unnecessary buttons like slowmo and rewind.
+ *   - Adjusts the title bar and progress control for smaller widths.
  *
  * Accessibility:
- *   - Reduces visual clutter for users.
+ *   - Ensures all controls are still accessible and usable on smaller screens.
+ *   - Maintains a good user experience across different device sizes.
  */
-.video-js.skin_smartTV .vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button {
-  display: none;
+@media (max-width: 600px) {
+  .tvProviderImage {
+    display: none;
+  }
+  .video-js.skin_smartTV .vjs-fullscreen .icon-minimize,
+  .icon-maximize {
+    height: 30px !important;
+  }
+  .video-js.skin_smartTV .vjs-fullscreen .icon-maximize,
+  .icon-minimize {
+    height: 30px !important;
+  }
+  .video-js.skin_smartTV button.vjs-fullscreen-control.vjs-control.vjs-button > span.vjs-icon-placeholder::before {
+    height: min-content;
+  }
+  .video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control {
+    position: relative !important;
+    right: 0em !important;
+    bottom: 0 !important;
+  }
+  .video-js.skin_smartTV .vjs-live-control {
+    right: -1em !important;
+    position: relative !important;
+    bottom: 0 !important;
+    font-size: 12px !important;
+  }
+  .video-js.skin_smartTV button.vjs-slowmo-button {
+    display: none;
+  }
+  .video-js.skin_smartTV button.vjs-rewind-button {
+    display: none;
+  }
+  .video-js.skin_smartTV button.vjs-rewind-button > svg {
+    height: 20px;
+  }
+  .video-js.skin_smartTV .vjs-button {
+    width: 4.8em;
+  }
+  .video-js.skin_smartTV .widget-selection {
+    display: none;
+  }
+  .video-js.skin_smartTV .container {
+    display: none !important;
+  }
+  .video-js.skin_smartTV .vjs-control-bar {
+    height: 4em !important;
+  }
+  .video-js.skin_smartTV .vjs-button > .vjs-icon-placeholder:before {
+    font-size: 2.5em;
+    line-height: 1.5;
+  }
+  .video-js.skin_smartTV .vjs-play-progress:before {
+    font-size: 1.2em;
+    position: absolute;
+    right: -0.5em;
+    z-index: 1;
+  }
+  .video-js.skin_smartTV button.vjs-skip-button > svg {
+    height: 20px;
+  }
+  .video-js.skin_smartTV button.vjs-big-play-button {
+    width: 50px !important;
+    height: 50px !important;
+    font-size: 2.1rem !important;
+  }
+  .video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control > span.vjs-icon-placeholder {
+    display: block;
+  }
+  .stream-selector-icon > svg {
+    width: 24px;
+    height: 24px;
+  }
+  .video-js.skin_smartTV.vjs-live .vjs-progress-control .vjs-progress-holder {
+    margin: 0 12px 0 21px;
+  }
+  .video-js.skin_smartTV .vjs-seek-to-live-text {
+    font-size: 12px;
+  }
+  .video-js.skin_smartTV .vjs-progress-control .vjs-progress-holder {
+    margin: 0 5px 0 5px;
+  }
 }
 
 /*
- * Styles the subs and caps button in SmartTV skin.
+ * Styles the big play button in paused state for SmartTV skin.
  *
  * Purpose:
- *   - Ensures the subs and caps button is properly sized.
+ *   - Provides a large, accessible play button when the video is paused.
  *
  * Visual Design:
- *   - Fixed height and width for consistency.
+ *   - Fixed size (90px) and circular shape.
+ *   - Centered icon with flexbox.
+ *   - Large font size (6em) for the play icon.
  *
  * Accessibility:
- *   - Easily navigable with remotes or keyboard.
+ *   - Large clickable area for easy interaction.
  */
-.video-js.skin_smartTV button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button {
-  height: min-content;
-  width: min-content;
+.video-js.skin_smartTV.vjs-paused .vjs-big-play-button {
+  width: 90px;
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  font-size: 6em;
+  line-height: 1.3em;
 }
 
 /*
- * Styles the vertical volume panel in SmartTV skin.
+ * Shows the volume control on hover and active states in SmartTV skin.
  *
  * Purpose:
- *   - Provides a vertical layout for the volume control, suitable for TV remotes and large screens.
- *   - Ensures the volume panel is wide enough for easy interaction, especially with remote navigation.
+ *   - Displays the volume control when the user hovers or the panel is active.
  *
  * Visual Design:
- *   - Sets a fixed width (6em) for consistent sizing and touch/remote usability.
- *   - Integrates with the overall control bar design for a seamless look.
+ *   - Flexbox display for centering content.
+ *   - Transition effects for smooth appearance.
  *
  * Accessibility:
- *   - Wide enough for easy focus and selection using a remote or keyboard.
- *   - Supports users with limited dexterity by increasing the interactive area.
+ *   - Ensures volume control is accessible when needed.
  */
-.video-js.skin_smartTV .vjs-volume-panel.vjs-volume-panel-vertical {
-  width: 6em;
+.video-js.skin_smartTV .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  transition: width 0.1s;
+}
+
+.video-js.skin_smartTV .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  transition: width 0.1s;
 }
 
 /*
- * Adjusts the content position in SmartTV skin.
+ * Styles the player setting options in SmartTV skin.
  *
  * Purpose:
- *   - Fine-tunes the position of overlay content (such as menus or widgets) to avoid overlapping with controls.
- *   - Ensures content is visually aligned and does not obscure important UI elements.
+ *   - Styles the individual setting options in the SmartTV skin.
  *
  * Visual Design:
- *   - Uses !important to override default positioning and guarantee placement.
- *   - Moves content slightly up and to the left for optimal visibility on TV screens.
+ *   - Flexbox display for alignment.
+ *   - Width (95%) and height (50px) for consistency.
+ *   - Background color and text color for visibility.
+ *   - Padding and margin for spacing.
+ *   - Border radius (2px) and box shadow for a modern look.
  *
  * Accessibility:
- *   - Prevents overlay content from covering navigation or playback controls, supporting a better user experience.
+ *   - High contrast and clear sizing for visibility.
+ *   - Easily selectable with remote or keyboard.
  */
-.video-js.skin_smartTV .content {
-  bottom: 3.4rem !important;
-  right: -4rem !important;
+.video-js.skin_smartTV .default-option-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 95%;
+  height: 50px;
+  background: rgba(0, 0, 0, 0.6);
+  color: currentColor;
+  padding: 5px 10px;
+  font-weight: 700;
+  font-size: 18px;
+  border-radius: 2px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
+  margin: 15px 0px;
+  text-transform: capitalize;
+  cursor: pointer;
+}
+
+.video-js.skin_smartTV .default-option-wrapper span {
+  height: 40px;
+}
+
+.video-js.skin_smartTV .default-option-wrapper span > img{
+  height: 100%;
 }
 
+
 /*
- * Styles the setting icon in SmartTV skin.
+ * Styles the default sidebar in SmartTV skin.
  *
  * Purpose:
- *   - Ensures the settings icon (SVG) is clearly visible and appropriately sized for TV interfaces.
- *   - Maintains visual consistency with other icons and controls.
+ *   - Provides a sidebar for additional options or information in the SmartTV skin.
  *
  * Visual Design:
- *   - Sets a fixed height (18px) for the SVG icon, overriding any inherited styles.
- *   - Keeps the icon crisp and legible on high-resolution displays.
+ *   - Absolutely positioned to the right of the video player.
+ *   - Fixed width (400px) and full height.
+ *   - Background color and padding for separation.
+ *   - Overflow set to scroll for content management.
  *
  * Accessibility:
- *   - Sufficient size for visibility from a distance and for users with low vision.
+ *   - Ensures the sidebar is always accessible and does not overlap with important controls.
  */
-.setting-icon > svg {
-  height: 18px !important;
+.video-js.skin_smartTV .default-sidebar {
+  position: absolute;
+  top: 0;
+  color: currentColor;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(43, 51, 63, 0.9);
+  height: 100%;
+  min-height: 720px;
+  width: 400px;
+  padding: 20px 25px 0 25px;
+  right: 0px;
+  z-index: 30;
+  overflow: scroll;
+  /* right: -450px; */
 }
 
 /*
- * Styles the output overlay in SmartTV skin.
+ * Adds a focus outline to focused elements in SmartTV skin.
  *
  * Purpose:
- *   - Provides a transparent overlay for displaying output or feedback without blocking user interaction.
- *   - Used for visual effects, loading indicators, or non-interactive overlays.
+ *   - Provides a clear visual indicator when an element is focused.
  *
  * Visual Design:
- *   - Absolutely positioned to cover the entire player area.
- *   - Full width and height ensure complete coverage.
- *   - z-index: 0 keeps the overlay behind interactive controls.
- *   - pointer-events: none allows clicks and navigation to pass through.
- *   - No border for a clean, unobtrusive appearance.
+ *   - Adds a 2px solid outline in the current color.
  *
  * Accessibility:
- *   - Overlay does not interfere with keyboard or remote navigation.
- *   - Ensures that feedback or effects are visible but never block controls or content.
+ *   - Supports keyboard and remote navigation for users who cannot use a mouse.
  */
-.output-overlay {
-  position: absolute;
-  bottom: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 0;
-  border: 0;
-  pointer-events: none;
+.video-js.skin_smartTV .focused{
+    outline: 2px solid currentColor;
 }
 
 /*
- * Styles the iframe to take full width and height in SmartTV skin.
+ * Hides player controls in SmartTV skin.
  *
  * Purpose:
- *   - Ensures iframes used in the player take up the full available space.
+ *   - Omits player controls to reduce clutter.
  *
  * Visual Design:
- *   - Sets width and height to 100% for full coverage.
+ *   - None (visibility: hidden; opacity: 0).
  *
  * Accessibility:
- *   - Guarantees that iframes do not interfere with player controls or content.
+ *   - Prevents accidental interaction with hidden controls.
  */
-iframe {
-  width: 100%;
-  height: 100%;
+.video-js.skin_smartTV .hidePlayerControls {
+  visibility: hidden !important;
+  opacity: 0 !important;
 }
 
 /*
- * Responsive styles for SmartTV skin on small screens.
+ * Styles the settings heading in SmartTV skin.
  *
  * Purpose:
- *   - Adjusts the layout and element sizes for better usability on smaller screens.
+ *   - Provides a heading for the settings section in the SmartTV skin.
  *
  * Visual Design:
- *   - Hides the provider image and adjusts icon sizes.
- *   - Modifies button sizes and positions for smaller displays.
- *   - Changes the layout of the seek to live control and live control.
- *   - Hides unnecessary buttons like slowmo and rewind.
- *   - Adjusts the title bar and progress control for smaller widths.
+ *   - Large font size (38px) and bold weight for prominence.
+ *   - Top and bottom padding for spacing.
  *
  * Accessibility:
- *   - Ensures all controls are still accessible and usable on smaller screens.
- *   - Maintains a good user experience across different device sizes.
+ *   - High contrast and large size for readability.
  */
+.video-js.skin_smartTV .settingsHeading {
+    font-size: 38px;
+    font-weight: 700;
+    padding-top: 30px;
+    padding-bottom: 20px;
+}
+
+.video-js.skin_smartTV .hide-default-controls {
+  display: none !important;
+}
 @media (max-width: 600px) {
-  .tvProviderImage {
-    display: none;
-  }
-  .video-js.skin_smartTV .vjs-fullscreen .icon-minimize,
-  .icon-maximize {
-    height: 30px !important;
-  }
-  .video-js.skin_smartTV .vjs-fullscreen .icon-maximize,
-  .icon-minimize {
-    height: 30px !important;
-  }
-  .video-js.skin_smartTV button.vjs-fullscreen-control.vjs-control.vjs-button > span.vjs-icon-placeholder::before {
-    height: min-content;
-  }
-  .video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control {
-    position: relative !important;
-    right: 0em !important;
-    bottom: 0 !important;
+  .video-js.skin_smartTV button.vjs-big-play-button {
+    width: 50px !important;
+    height: 50px !important;
+    font-size: 2.1rem !important;
   }
-  .video-js.skin_smartTV .vjs-live-control {
-    right: -1em !important;
+
+}
+
+.video-js.skin_smartTV .vjs-big-play-button .vjs-icon-placeholder:before,
+.vjs-button>.vjs-icon-placeholder:before {
     position: relative !important;
-    bottom: 0 !important;
-    font-size: 12px !important;
-  }
-  .video-js.skin_smartTV button.vjs-slowmo-button {
-    display: none;
-  }
-  .video-js.skin_smartTV button.vjs-rewind-button {
-    display: none;
-  }
-  .video-js.skin_smartTV button.vjs-rewind-button > svg {
-    height: 20px;
-  }
-  .video-js.skin_smartTV .vjs-button {
-    width: 4.8em;
-  }
-  .video-js.skin_smartTV .widget-selection {
-    display: none;
-  }
-  .video-js.skin_smartTV .container {
-    display: none !important;
-  }
-  .video-js.skin_smartTV .vjs-control-bar {
-    height: 4em !important;
-  }
-  .video-js.skin_smartTV .vjs-button > .vjs-icon-placeholder:before {
-    font-size: 2.5em;
-    line-height: 1.5;
-  }
-  .video-js.skin_smartTV .vjs-play-progress:before {
-    font-size: 1.2em;
+}
+.video-js.skin_smartTV .vjs-big-play-button .vjs-icon-placeholder:before{
+    display: flex;
+    left: 0px;
+    top: -1px;
+}
+
+
+
+
+
+.video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
+    height: 0.7em;
     position: absolute;
-    right: -0.5em;
+    top: -0.7em;
+    width: 100%;
+}
+
+.video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
+    height: 100%;
+}
+
+.video-js.skin_vlone .vjs-play-progress:before {
+    display: none !important;
+}
+
+.video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
+    margin: 0 !important;
+
+}
+
+
+.video-js.skin_vlone .vjs-custom-control-spacer {
+    display: block;
+    flex: 1 1 auto;
+}
+
+.video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
     z-index: 1;
-  }
-  .video-js.skin_smartTV button.vjs-skip-button > svg {
-    height: 20px;
-  }
-  .video-js.skin_smartTV button.vjs-big-play-button {
+}
+
+
+.video-js.skin_vlone .vjs-control-bar {
+    height: 40px;
+}
+
+.video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
+.vjs-button>.vjs-icon-placeholder:before {
+    position: relative !important;
+}
+.video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
+    display: flex;
+    left: 0px;
+    top: -1px;
+}
+
+.vjs-button>.vjs-icon-placeholder:before {
+    font-size: 2em !important; 
+}
+
+.video-js.skin_vlone .vjs-control {
+    width: 4.3em;
+}
+
+.vjs-menu-button-popup .vjs-menu {
+    bottom: 10px !important;
+}
+
+
+.video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
+    height: 1.3em;
+    position: absolute;
+    top: -1.3em;
+    transition: height 0.3s, top 0.3s;
+}
+
+
+.video-js.skin_vlone.vjs-live .vjs-time-control{
+    display: none !important;
+}
+
+.video-js.skin_vlone .vjs-time-control {
+    display: block;
+}
+.video-js.skin_vlone .vjs-remaining-time {
+    display: none;
+}
+
+.video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
+    line-height: 3.5em;
+    font-size: 1.1em;
+    min-width: 4em;
+}
+
+.video-js.skin_vlone .vjs-time-divider > div{
+    display: flex;
+    justify-content: center;
+}
+
+.video-js.skin_vlone .vjs-live-control{
+    align-items: center;
+}
+.video-js.skin_vlone .vjs-live-display{
+    height: 2.2em;
+    display: flex;
+    align-items: center;
+    font-family: monospace;
+    width: 4em;
+    justify-content: center;
+    background: red;
+    margin: 4px 0px 4px 12px;
+}
+
+.video-js.skin_vlone .vjs-time-control {
+    line-height: 3.5em !important;
+    font-size: 1.1em !important;
+    width: min-content !important;
+    min-width: 1.5em;
+    padding: 0 !important;
+    user-select: none;
+}
+
+.video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
+    margin-left: 16px !important;
+}
+
+
+/* Big play */
+.video-js.skin_vlone.vjs-paused .vjs-big-play-button {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    font-size: 5em;
+    line-height: 1.3em;
+    transform: none !important;
+    border-radius: 1.3em;
+}
+  
+  
+  @media(max-width:600px){
+    .video-js.skin_vlone button.vjs-big-play-button {
     width: 50px !important;
     height: 50px !important;
     font-size: 2.1rem !important;
   }
-  .video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control > span.vjs-icon-placeholder {
-    display: block;
-  }
-  .stream-selector-icon > svg {
-    width: 24px;
-    height: 24px;
-  }
-  .video-js.skin_smartTV.vjs-live .vjs-progress-control .vjs-progress-holder {
-    margin: 0 12px 0 21px;
-  }
-  .video-js.skin_smartTV .vjs-seek-to-live-text {
-    font-size: 12px;
-  }
-  .video-js.skin_smartTV .vjs-progress-control .vjs-progress-holder {
-    margin: 0 5px 0 5px;
   }
+  
+
+/* CSS for videojs-dvr-seekbar */
+
+.video-js.vjs-dvr-seekbar {
+  display: block;
 }
 
-/*
- * Styles the big play button in paused state for SmartTV skin.
- *
- * Purpose:
- *   - Provides a large, accessible play button when the video is paused.
- *
- * Visual Design:
- *   - Fixed size (90px) and circular shape.
- *   - Centered icon with flexbox.
- *   - Large font size (6em) for the play icon.
- *
- * Accessibility:
- *   - Large clickable area for easy interaction.
- */
-.video-js.skin_smartTV.vjs-paused .vjs-big-play-button {
-  width: 90px;
-  height: 90px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  font-size: 6em;
-  line-height: 1.3em;
+.video-js.vjs-dvr-seekbar .vjs-live-control {
+  display: none;
 }
 
-/*
- * Shows the volume control on hover and active states in SmartTV skin.
- *
- * Purpose:
- *   - Displays the volume control when the user hovers or the panel is active.
- *
- * Visual Design:
- *   - Flexbox display for centering content.
- *   - Transition effects for smooth appearance.
- *
- * Accessibility:
- *   - Ensures volume control is accessible when needed.
- */
-.video-js.skin_smartTV .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
+.video-js.vjs-dvr-seekbar.vjs-live .vjs-progress-control {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  transition: width 0.1s;
 }
 
-.video-js.skin_smartTV .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  transition: width 0.1s;
+.video-js.vjs-dvr-seekbar.vjs-user-inactive .vjs-control-bar.vjs-dvr-control-bar .vjs-progress-control .vjs-slider .vjs-seek-handle:before {
+  font-size: 0;
+  transition-delay: 3s;
+  -webkit-transition-delay: 3s;
+  -moz-transition-delay: 3s;
+  -ms-transition-delay: 3s;
+  -o-transition-delay: 3s;
 }
 
-/*
- * Styles the player setting options in SmartTV skin.
- *
- * Purpose:
- *   - Styles the individual setting options in the SmartTV skin.
- *
- * Visual Design:
- *   - Flexbox display for alignment.
- *   - Width (95%) and height (50px) for consistency.
- *   - Background color and text color for visibility.
- *   - Padding and margin for spacing.
- *   - Border radius (2px) and box shadow for a modern look.
- *
- * Accessibility:
- *   - High contrast and clear sizing for visibility.
- *   - Easily selectable with remote or keyboard.
- */
-.video-js.skin_smartTV .default-option-wrapper {
+.video-js.vjs-dvr-seekbar .vjs-time-tooltip {
+  z-index: 0;
+}
+
+.video-js.vjs-dvr-seekbar .vjs-mouse-display .vjs-time-tooltip {
+  z-index: 1;
+}
+
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 95%;
-  height: 50px;
-  background: rgba(0, 0, 0, 0.6);
-  color: currentColor;
-  padding: 5px 10px;
-  font-weight: 700;
-  font-size: 18px;
-  border-radius: 2px;
-  box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
-  margin: 15px 0px;
-  text-transform: capitalize;
-  cursor: pointer;
 }
 
-.video-js.skin_smartTV .default-option-wrapper span {
-  height: 40px;
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-dvr-progress-control {
+  background: transparent;
 }
 
-.video-js.skin_smartTV .default-option-wrapper span > img{
-  height: 100%;
+/* width of progress bar */
+.video-js.vjs-dvr-seekbar .vjs-progress-control.vjs-control.vjs-dvr-progress-control{
+  background: transparent; /* #aaa8a8 */
+  width: 99%;
 }
 
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 
-/*
- * Styles the default sidebar in SmartTV skin.
- *
- * Purpose:
- *   - Provides a sidebar for additional options or information in the SmartTV skin.
- *
- * Visual Design:
- *   - Absolutely positioned to the right of the video player.
- *   - Fixed width (400px) and full height.
- *   - Background color and padding for separation.
- *   - Overflow set to scroll for content management.
- *
- * Accessibility:
- *   - Ensures the sidebar is always accessible and does not overlap with important controls.
- */
-.video-js.skin_smartTV .default-sidebar {
+  min-width: 50px;
+  font-weight: bold;
+  position: relative;
+  color: #8c8b8b;
+}
+
+/* align live circle with live text */
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button .liveCircle{
+  margin-top: -9px;
+}
+
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button.onair {
+  color: #fff;
+}
+
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button.onair .liveCircle:after {
+  background: tomato;
+}
+
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button.onair:focus .liveCircle:after {
+  box-shadow: 0 0 1em tomato;
+}
+
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button .liveText {
+  margin-left: 1.5em;
+}
+
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button .liveCircle:after {
+  content: '';
   position: absolute;
-  top: 0;
-  color: currentColor;
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(43, 51, 63, 0.9);
-  height: 100%;
-  min-height: 720px;
-  width: 400px;
-  padding: 20px 25px 0 25px;
-  right: 0px;
-  z-index: 30;
-  overflow: scroll;
-  /* right: -450px; */
+  width: 0.9em;
+  height: 0.9em;
+  border-radius: 50%;
+  background: gray;
+  left: 0.5em;
 }
 
-/*
- * Adds a focus outline to focused elements in SmartTV skin.
- *
- * Purpose:
- *   - Provides a clear visual indicator when an element is focused.
- *
- * Visual Design:
- *   - Adds a 2px solid outline in the current color.
- *
- * Accessibility:
- *   - Supports keyboard and remote navigation for users who cannot use a mouse.
- */
-.video-js.skin_smartTV .focused{
-    outline: 2px solid currentColor;
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button:focus .liveCircle:after {
+  box-shadow: 0 0 1em gray;
 }
 
-/*
- * Hides player controls in SmartTV skin.
- *
- * Purpose:
- *   - Omits player controls to reduce clutter.
- *
- * Visual Design:
- *   - None (visibility: hidden; opacity: 0).
- *
- * Accessibility:
- *   - Prevents accidental interaction with hidden controls.
- */
-.video-js.skin_smartTV .hidePlayerControls {
-  visibility: hidden !important;
-  opacity: 0 !important;
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-live-button:hover {
+  cursor: pointer;
+}
+
+.video-js.vjs-dvr-seekbar .vjs-control-bar.vjs-dvr-control-bar .vjs-load-progress {
+  overflow: hidden;
 }
 
-/*
- * Styles the settings heading in SmartTV skin.
- *
- * Purpose:
- *   - Provides a heading for the settings section in the SmartTV skin.
- *
- * Visual Design:
- *   - Large font size (38px) and bold weight for prominence.
- *   - Top and bottom padding for spacing.
- *
- * Accessibility:
- *   - High contrast and large size for readability.
- */
-.video-js.skin_smartTV .settingsHeading {
-    font-size: 38px;
-    font-weight: 700;
-    padding-top: 30px;
-    padding-bottom: 20px;
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-current-time,
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-duration,
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-remaining-time,
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-time-divider {
+  display: none;
 }
 
-.video-js.skin_smartTV .hide-default-controls {
-  display: none !important;
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-live-display {
+  display: none;
 }
-@media (max-width: 600px) {
-  .video-js.skin_smartTV button.vjs-big-play-button {
-    width: 50px !important;
-    height: 50px !important;
-    font-size: 2.1rem !important;
-  }
 
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-progress-control.vjs-control .vjs-slider .vjs-control-text:before {
+  height: 0;
 }
 
-.video-js.skin_smartTV .vjs-big-play-button .vjs-icon-placeholder:before,
-.vjs-button>.vjs-icon-placeholder:before {
-    position: relative !important;
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-progress-control.vjs-control .vjs-slider .vjs-control-text:after {
+  content: ' \25BC';
+  color: #000;
+  top: 1.25em;
+  position: relative;
+  left: -1.55em;
+  font-size: 1.5em;
 }
-.video-js.skin_smartTV .vjs-big-play-button .vjs-icon-placeholder:before{
-    display: flex;
-    left: 0px;
-    top: -1px;
+
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-progress-control.vjs-control .vjs-slider .vjs-seek-handle.vjs-slider-handle {
+  line-height: 0.2em;
+  position: relative;
+  top: -0.21em;
+  float: left;
 }
 
+.video-js.vjs-dvr-seekbar .vjs-dvr-control-bar .vjs-progress-control .vjs-slider .vjs-seek-handle.vjs-slider-handle:before {
+  content: ' \25CF';
+  font-size: 2em;
+  transition: font-size 0.2s;
+  -webkit-transition: font-size 0.2s;
+  -moz-transition: font-size 0.2s;
+  -ms-transition: font-size 0.2s;
+  -o-transition: font-size 0.2s;
+}
 
+/* handle  defaultV2 skin changes */
+.video-js.vjs-dvr-seekbar .vjs-seek-to-live-control.vjs-control{
+  display: none;
+}
 
 .video-js .tvProviderImage {
     position: absolute;
@@ -1880,6 +1880,8 @@ iframe {
 
 
 
+
+
 .video-js .multicamera-parent.default{
     height: 345px;
     position: absolute;
@@ -1962,8 +1964,6 @@ iframe {
 
 
 
-
-
 /* nextep */
 .next-ep-preview{
     position: absolute;
@@ -2094,6 +2094,541 @@ iframe {
     -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
     animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
 }
+/* a wrapper element that tracks the mouse vertically */
+.vjs-thumbnail-holder {
+  position: absolute;
+  left: -1000px;
+}
+
+/* the thumbnail image itself */
+.vjs-thumbnail {
+  position: absolute;
+  left: 0;
+  bottom: 1.3em;
+  opacity: 0;
+  transition: opacity .2s ease;
+  -webkit-transition: opacity .2s ease;
+  -moz-transition: opacity .2s ease;
+  -mz-transition: opacity .2s ease;
+}
+
+/* fade in the thumbnail when hovering over the progress bar */
+/* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
+.vjs-progress-control:hover .vjs-thumbnail,
+.vjs-progress-control.fake-active .vjs-thumbnail,
+.vjs-progress-control:active .vjs-thumbnail {
+  opacity: 1;
+}
+
+/* ... but hide the thumbnail when hovering directly over it */
+.vjs-progress-control:hover .vjs-thumbnail:hover,
+.vjs-progress-control:active .vjs-thumbnail:active {
+  opacity: 0;
+}
+
+.vjs-poster {
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  background-color: #000;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+}
+
+
+.video-js .vjs-tech{
+  outline: none;
+}
+
+.video-js .vjs-loading-spinner{
+  margin: 0 !important;
+}
+.vjs-text-track-display-ttml{
+  inset: -30px 7px -40px 0.222222px !important;
+  margin: unset !important;
+}
+
+
+/* ADs */
+.ima-ad-container {
+    top: 0em;
+    position: absolute;
+    display: none;
+    width: 100%;
+    height: 100%;
+}
+  
+.ima-controls-div {
+    bottom: 0em;
+    height: 1.4em;
+    position: absolute;
+    overflow: hidden;
+    display: none;
+    opacity: 1;
+    background-color: rgba(7, 20, 30, .7);
+    background: -moz-linear-gradient(bottom, rgba(7, 20, 30, .7) 0%, rgba(7, 20, 30, 0) 100%);
+    /* FF3.6+ */
+    background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(7, 20, 30, .7)), color-stop(100%, rgba(7, 20, 30, 0)));
+    /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(bottom, rgba(7, 20, 30, .7) 0%, rgba(7, 20, 30, 0) 100%);
+    /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(bottom, rgba(7, 20, 30, .7) 0%, rgba(7, 20, 30, 0) 100%);
+    /* Opera 11.10+ */
+    background: -ms-linear-gradient(bottom, rgba(7, 20, 30, .7) 0%, rgba(7, 20, 30, 0) 100%);
+    /* IE10+ */
+    background: linear-gradient(to top, rgba(7, 20, 30, .7) 0%, rgba(7, 20, 30, 0) 100%);
+    /* W3C */
+    /* filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0007141E', endColorstr='#07141E', GradientType=0); */
+    /* IE6-9 */
+}
+
+.ima-controls-div.ima-controls-div-showing {
+    height: 3.7em;
+}
+
+.ima-countdown-div {
+    height: 1em;
+    color: #FFFFFF;
+    text-shadow: 0 0 0.2em #000;
+    cursor: default;
+}
+
+.ima-seek-bar-div {
+    top: 1.2em;
+    height: 0.3em;
+    position: absolute;
+    background: rgba(255, 255, 255, .4);
+}
+
+.ima-progress-div {
+    width: 0em;
+    height: 0.3em;
+    background-color: #ECC546;
+}
+
+.ima-play-pause-div,
+.ima-mute-div,
+.ima-slider-div,
+.ima-fullscreen-div {
+    width: 2.33em;
+    height: 1.33em;
+    top: 0.733em;
+    left: 0em;
+    position: absolute;
+    color: #CCCCCC;
+    font-size: 1.5em;
+    line-height: 2;
+    text-align: center;
+    font-family: VideoJS;
+    cursor: pointer;
+}
+
+.ima-mute-div {
+    left: auto;
+    right: 5.667em;
+}
+
+.ima-slider-div {
+    left: auto;
+    right: 2.33em;
+    width: 3.33em;
+    height: 0.667em;
+    top: 1.33em;
+    background-color: #555555;
+}
+
+.ima-slider-level-div {
+    width: 100%;
+    height: 0.667em;
+    background-color: #ECC546;
+}
+
+.ima-fullscreen-div {
+    left: auto;
+    right: 0em;
+}
+
+.ima-playing:before {
+    content: "\00f103";
+}
+
+.ima-paused:before {
+    content: "\00f101";
+}
+
+.ima-playing:hover:before,
+.ima-paused:hover:before {
+    text-shadow: 0 0 1em #fff;
+}
+
+.ima-non-muted:before {
+    content: "\00f107";
+}
+
+.ima-muted:before {
+    content: "\00f104";
+}
+
+.ima-non-muted:hover:before,
+.ima-muted:hover:before {
+    text-shadow: 0 0 1em #fff;
+}
+
+.ima-non-fullscreen:before {
+    content: "\00f108";
+}
+
+.ima-fullscreen:before {
+    content: "\00f109";
+}
+
+.ima-non-fullscreen:hover:before,
+.ima-fullscreen:hover:before {
+    text-shadow: 0 0 1em #fff;
+}
+
+/* Move overlay when controls are active. */
+.video-js.vjs-user-inactive.vjs-playing .bumpable-ima-ad-container {
+    margin-top: 0em;
+}
+
+.video-js.vjs-paused .bumpable-ima-ad-container,
+.video-js.vjs-playing:hover .bumpable-ima-ad-container,
+.video-js.vjs-user-active.vjs-playing .bumpable-ima-ad-container {
+    margin-top: -4em;
+}
+
+/* Move overlay if user fast-clicks play button. */
+
+.video-js.vjs-playing .bumpable-ima-ad-container {
+    margin-top: -4em;
+}
+ /* Resolution Module */
+
+ .video-js .container {
+     position: relative;
+     display: flex;
+     align-items: center;
+     width: 5em;
+     justify-content: center;
+ }
+
+ .video-js .setting-icon:hover {
+     cursor: pointer;
+ }
+
+ .video-js .customFontHeading {
+     font-size: 13px;
+ }
+
+ .video-js .content {
+     opacity: 1;
+     display: flex;
+     position: absolute;
+     background-color: rgb(52 51 51 / 70%);
+     height: max-content;
+     width: max-content;
+     text-align: center;
+     overflow-y: scroll;
+     bottom: 2.4rem;
+     right: -2rem;
+     border-radius: 5px;
+     z-index: 1;
+ }
+
+ .video-js .resolution{
+    min-width: 180px;
+ }
+
+ .video-js .rendition {
+     margin: 4px;
+ }
+
+ .video-js .rendition span {
+     background: brown;
+     color: #fff;
+     font-size: 9px;
+     padding: 1px 3px;
+     border-radius: 2px;
+     margin-left: 2px;
+ }
+
+ @media(max-width:500px) {
+    .video-js .rendition {
+         margin: 1px;
+     }
+
+     .video-js .title {
+         margin: 2px;
+     }
+ }
+
+ .video-js .resolution_hidden {
+     opacity: 0;
+     visibility: hidden;
+     transition: visibility 300ms, opacity 300ms;
+ }
+
+ .video-js .rendition {
+     padding: 3px 1.6rem;
+ }
+
+ .video-js .selected {
+     font-weight: 900;
+ }
+
+
+ .video-js .renditions {
+     font-size: 12px;
+     position: relative;
+     padding: 1px;
+ }
+
+ .video-js .rendition.selected::before {
+     content: "";
+     position: absolute;
+     width: 5px;
+     height: 5px;
+     top: 50%;
+     border-radius: 50%;
+     background: white;
+     left: 10px;
+     -webkit-transform: translateY(-50%);
+     transform: translateY(-50%);
+ }
+
+ .video-js .content::-webkit-scrollbar {
+     /* WebKit */
+     width: 0;
+     height: 0;
+ }
+
+ .video-js .disable-play-btn {
+     display: none !important;
+     pointer-events: none !important;
+ }
+
+ .video-js .title {
+     font-size: 14px;
+     font-weight: 900;
+     padding: 3px 0px;
+     margin-top: 5px;
+ }
+
+ .video-js .rendition:hover {
+     cursor: pointer;
+ }
+
+ .video-js .relative {
+     position: relative;
+ }
+
+
+ .video-js p.customFontHeading {
+     margin: 4px;
+     padding: 3px;
+     font-weight: 900;
+ }
+
+ .video-js .font {
+     font-size: 1rem;
+     width: 5rem;
+ }
+
+
+
+ /* @media (max-width:700px){
+    .hideCustomFonts{
+        display: none;
+    }
+  } */
+
+ @media (max-width:700px) {
+    .video-js .title {
+         font-size: 12px;
+     }
+
+     .video-js .rendition.selected:before {
+         height: 5px;
+         width: 5px;
+     }
+
+     .video-js .renditions {
+         font-size: 10px;
+     }
+
+ }
+
+ .hideCustomFonts {
+     /* display: none; */
+ }
+
+ /* Resolution Module End */
+/* Chromecast */
+.video-js .vjs-chromecast-button .vjs-icon-placeholder {
+    background: url('https://player.viewlift.com/images/ic_cast_white_24dp.png') center center no-repeat;
+    background-size: contain;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.video-js .vjs-chromecast-button:hover {
+    cursor: pointer;
+}
+
+.video-js .vjs-chromecast-button:hover .vjs-icon-placeholder {
+    background-image: url('https://player.viewlift.com/images/ic_cast_white_24dp.png');
+}
+
+.video-js .vjs-chromecast-button.vjs-chromecast-casting-state .vjs-icon-placeholder {
+    background-image: url('https://player.viewlift.com/images/ic_cast_connected_white_24dp.png');
+}
+
+.video-js .vjs-chromecast-button.vjs-chromecast-casting-state:hover .vjs-icon-placeholder {
+    background-image: url('https://player.viewlift.com/images/ic_cast_connected_white_24dp.png');
+}
+.video-js .vjs-chromecast-button >.vjs-chromecast-button-label{
+    display: none !important;
+}
+
+.video-js .vjs-tech-chromecast {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-poster::after {
+    content: ' ';
+    display: block;
+    height: 2px;
+    width: 100px;
+    background-color: #cccccc;
+    position: absolute;
+    left: calc(50% - 50px);
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-poster-img {
+    max-height: 180px;
+    width: auto;
+    border: 2px solid #cccccc;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-poster-img.vjs-tech-chromecast-poster-img-empty {
+    width: 160px;
+    height: 90px;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-title-container {
+    position: absolute;
+    bottom: 50%;
+    margin-bottom: 100px;
+    color: #cccccc;
+    text-align: center;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-title {
+    font-size: 22px;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-title.vjs-tech-chromecast-title-empty {
+    display: none;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-subtitle {
+    font-size: 18px;
+    padding-top: 0.5em;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-subtitle.vjs-tech-chromecast-subtitle-empty {
+    display: none;
+}
+
+.video-js .vjs-tech-chromecast {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-poster::after {
+    content: ' ';
+    display: block;
+    height: 2px;
+    width: 100px;
+    background-color: #ccc;
+    position: absolute;
+    left: calc(50% - 50px);
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-poster-img {
+    max-height: 180px;
+    width: auto;
+    border: 2px solid #ccc;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-poster-img.vjs-tech-chromecast-poster-img-empty {
+    width: 160px;
+    height: 90px;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-title-container {
+    position: absolute;
+    bottom: 50%;
+    margin-bottom: 100px;
+    color: #ccc;
+    text-align: center;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-title {
+    font-size: 22px;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-title.vjs-tech-chromecast-title-empty {
+    display: none;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-subtitle {
+    font-size: 18px;
+    padding-top: 0.5em;
+}
+
+.video-js .vjs-tech-chromecast .vjs-tech-chromecast-subtitle.vjs-tech-chromecast-subtitle-empty {
+    display: none;
+}
+
+/* Chromecast End */
+/* Airplay */
+
+.video-js .vjs-airplay-button .vjs-icon-placeholder {
+    background: url('https://player.viewlift.com/images/ic_airplay_white_24px.svg') center center no-repeat;
+    background-size: contain;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+}
+
+.video-js .vjs-airplay-button:hover {
+    cursor: pointer;
+}
+
+.video-js .vjs-airplay-button:hover .vjs-icon-placeholder {
+    background-image: url('https://player.viewlift.com/images/ic_airplay_white_24px.svg');
+}
+
+/* Airplay end */
 .ssai-ad-container{
     display: none;
 }