media-player { --width: 600px;
--height: 100%;
max-width: var(--width) !important;
height: var(--height) !important;
--video-controls-color: #2710f800;
--video-focus-ring-color: rgb(78 156 246);
--video-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
--video-font-family: sans-serif;
--video-bg: black; --video-border-radius: 6px; --video-border: 1px solid rgb(255 255 255 / 0.1); --media-buffering-duration: 1s; --media-buffering-animation: vds-buffering-spin var(--media-buffering-duration) linear infinite;
--media-buffering-size: 64px; --media-buffering-track-color: #f5f5f5; --media-buffering-track-fill-color: #fff; --media-buffering-track-fill-offset: 50;
--media-buffering-track-fill-opacity: 0.75;
--media-buffering-thick: 9; --media-buffering-track-fill-width: var(--media-buffering-thick);
--media-buffering-track-opacity: 0.25;
--media-buffering-track-width: calc(var(--media-buffering-thick) - 1);
--media-buffering-transition: opacity 200ms ease; --media-controls-color: #f5f5f5; --video-sm-play-button-bg: rgba(0, 0, 0, 0.6); --media-button-color: var(--media-controls-color, #f5f5f5);
--media-button-hover-transform: scale(1);
--media-button-hover-transition: transform 0.2s ease-in;
--media-button-icon-size: 80%;
--media-button-padding: 0px;
--media-button-border-radius: 8px; --media-button-touch-hover-border-radius: 100%;
--media-button-size: 40px; --media-sm-fullscreen-button-size: 40px;
--media-fullscreen-button-size: 40px; --media-tooltip-bg-color: black; --media-tooltip-border-radius: 4px; --media-tooltip-border: 1px solid rgb(255 255 255 / 0.1);
--media-tooltip-color: hsl(0, 0%, 80%); --media-tooltip-font-size: 13px;
--media-tooltip-font-weight: 500;
--media-tooltip-padding: 2px 8px; --media-tooltip-entrance-duration: 0.2s; --media-tooltip-enter-animation: vds-tooltip-enter var(--media-tooltip-entrance-duration) ease-in;
--media-tooltip-exit-animation: vds-tooltip-exit var(--media-tooltip-entrance-duration) ease-out; --media-live-button-edge-bg: #dc2626; --media-slider-track-fill-live-bg: #dc2626; --media-live-button-border-radius: 2px; --media-live-button-height: 40px;
--media-live-button-padding: 1px 4px;
--media-live-button-width: 40px;
--media-live-button-edge-color: #f5f5f5; --media-live-button-font-size: 12px;
--media-live-button-font-weight: 600;
--media-live-button-letter-spacing: 1.5px; --media-controls-padding: 0px;
--media-controls-entrance-duration: 0.2s; --media-controls-in-transition: opacity var(--media-controls-entrance-duration) ease-in;
--media-controls-out-transition: opacity var(--media-controls-entrance-duration) ease-out; --media-thumbnail-bg: black; --media-thumbnail-border: 1px solid white; --media-thumbnail-aspect-ratio: 16 / 9;
--media-thumbnail-min-width: 120px; --media-thumbnail-min-height: calc(var(--media-thumbnail-min-width) / var(--aspect-ratio));
--media-thumbnail-max-width: 180px; --media-thumbnail-max-height: calc(var(--media-thumbnail-max-width) / var(--aspect-ratio)); --media-time-bg: unset;
--media-time-border-radius: unset;
--media-time-border: unset;
--media-time-color: #f5f5f5; --media-time-font-size: 14px;
--media-time-font-weight: 400;
--media-time-letter-spacing: 0.025em;
--media-time-divider-color: #f5f5f5;
--media-time-divider-gap: 2.5px;  --media-slider-width: 100%;
--media-slider-height: 48px; --media-slider-thumb-bg: #fff;
--media-slider-thumb-border-radius: 9999px;
--media-slider-thumb-border: 1px solid #cacaca;
--media-slider-thumb-size: 15px;
--media-slider-thumb-transition: opacity 0.2s ease-in, box-shadow 0.2s ease; --media-slider-track-width: 100%;
--media-slider-track-bg: rgb(255 255 255 / 0.3);
--media-slider-track-border-radius: 1px;
--media-slider-track-fill-bg: var(--media-brand);
--media-slider-track-height: 5px;
--media-slider-track-progress-bg: rgb(255 255 255 / 0.5);
--media-slider-focused-thumb-shadow: 0 0 0 4px hsla(0, 0%, 100%, 0.4);
--media-slider-focused-thumb-size: calc(var(--thumb-size) * 1.1);
--media-slider-focused-track-height: calc(var(--track-height) * 1.25);
--media-slider-focused-track-height: var(--track-height);
--media-slider-focused-track-width: calc(var(--track-width) * 1.25);
--media-slider-focused-track-width: var(--track-width); --media-slider-step-width: 2.5px;
--media-slider-step-color: rgb(124, 124, 124); --media-slider-chapter-hover-transform: scaleY(2);
--media-slider-chapter-hover-transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1); --media-slider-preview-bg: unset;
--media-slider-preview-border-radius: 2px; --media-slider-chapter-title-bg: unset;
--media-slider-chapter-title-color: #f5f5f5;
--media-slider-chapter-title-font-size: 14px;
--media-slider-chapter-title-gap: 6px; --media-slider-value-bg: black;
--media-slider-value-border-radius: 2px;
--media-slider-value-border: unset;
--media-slider-value-color: white;
--media-slider-value-gap: 0px;
--media-slider-value-padding: 1px 10px;
}
media-player[hide-controls="1"] media-controls{
display: none;
}
.vds-buffering-spinner{
width: var(--media-buffering-size);
height: var(--media-buffering-size);
}