/*
* Media
*/
media-player {
    /*root styles*/
    --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; /*background*/
    --video-border-radius: 6px; /*border*/
    --video-border: 1px solid rgb(255 255 255 / 0.1);

    /* Buffering. */
    --media-buffering-duration: 1s; /*transition duration*/
    --media-buffering-animation: vds-buffering-spin var(--media-buffering-duration) linear infinite;
    --media-buffering-size: 64px; /*size*/
    --media-buffering-track-color: #f5f5f5; /*color*/
    --media-buffering-track-fill-color: #fff; /*fill color*/
    --media-buffering-track-fill-offset: 50;
    --media-buffering-track-fill-opacity: 0.75;
    --media-buffering-thick: 9; /*thickness*/
    --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;

    /* Buttons. */
    --media-controls-color: #f5f5f5; /*background*/
    --video-sm-play-button-bg: rgba(0, 0, 0, 0.6); /*play button background*/
    --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; /*border*/
    --media-button-touch-hover-border-radius: 100%;
    --media-button-size: 40px; /*size*/
    --media-sm-fullscreen-button-size: 40px;
    --media-fullscreen-button-size: 40px;

    /* Tooltips. */
    --media-tooltip-bg-color: black; /*background*/
    --media-tooltip-border-radius: 4px; /*border*/
    --media-tooltip-border: 1px solid rgb(255 255 255 / 0.1);

    --media-tooltip-color: hsl(0, 0%, 80%); /*typography*/
    --media-tooltip-font-size: 13px;
    --media-tooltip-font-weight: 500;

    --media-tooltip-padding: 2px 8px; /*padding*/

    --media-tooltip-entrance-duration: 0.2s; /*transition duration*/
    --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;

    /* Live Indicator. */
    --media-live-button-edge-bg: #dc2626; /*background*/
    --media-slider-track-fill-live-bg: #dc2626; /*track color*/
    --media-live-button-border-radius: 2px; /*border*/

    --media-live-button-height: 40px;
    --media-live-button-padding: 1px 4px;
    --media-live-button-width: 40px;
    
    --media-live-button-edge-color: #f5f5f5; /*typography*/
    --media-live-button-font-size: 12px;
    --media-live-button-font-weight: 600;
    --media-live-button-letter-spacing: 1.5px;


    /* Controls. */
    --media-controls-padding: 0px;
    --media-controls-entrance-duration: 0.2s; /*transition duration*/
    --media-controls-in-transition: opacity var(--media-controls-entrance-duration) ease-in;
    --media-controls-out-transition: opacity var(--media-controls-entrance-duration) ease-out;

    /* Thumbnails. */
    --media-thumbnail-bg: black; /*background*/
    --media-thumbnail-border: 1px solid white; /*border*/
    --media-thumbnail-aspect-ratio: 16 / 9;
    --media-thumbnail-min-width: 120px; /*min-width*/
    --media-thumbnail-min-height: calc(var(--media-thumbnail-min-width) / var(--aspect-ratio));
    --media-thumbnail-max-width: 180px; /*max-width*/
    --media-thumbnail-max-height: calc(var(--media-thumbnail-max-width) / var(--aspect-ratio));

    /* Time. */
    --media-time-bg: unset;
    --media-time-border-radius: unset;
    --media-time-border: unset;

    --media-time-color: #f5f5f5; /*time typography*/
    --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; /*divider gap*/

    /* Sliders. */
    --media-slider-width: 100%;
    --media-slider-height: 48px;

    /* Slider Thumb. */
    --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;

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

    /* Slider Steps. */
    --media-slider-step-width: 2.5px;
    --media-slider-step-color: rgb(124, 124, 124);

    /* Slider Chapter. */
    --media-slider-chapter-hover-transform: scaleY(2);
    --media-slider-chapter-hover-transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);

    /* Slider Preview. */
    --media-slider-preview-bg: unset;
    --media-slider-preview-border-radius: 2px;

    /* Slider Chapter Title. */
    --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;

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