/*
 * Copyright (C) 2013, 2014, 2015 Apple Inc.  All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 
 */

video:-webkit-full-page-media {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

video:-webkit-full-page-media::-webkit-media-controls-panel {
    bottom: 0px;
}

video:-webkit-full-page-media::-webkit-media-controls-panel.no-video {
    opacity: 1;
}

::-webkit-media-controls {
    width: inherit;
    height: inherit;
    position: relative;
    display: flex !important;
    align-items: stretch;
    justify-content: flex-end;
    flex-direction: column;
    font: -webkit-small-control;
    white-space: nowrap;
    -webkit-font-smoothing: subpixel-antialiased;
}

::-webkit-media-controls.placeholder-showing {
    overflow: hidden;
}

video::-webkit-media-text-track-container,
audio::-webkit-media-text-track-container {
    position: relative;
    flex: 1 1 auto;
}

video::-webkit-media-controls-panel,
audio::-webkit-media-controls-panel {
    box-sizing: border-box;
    position: relative;
    bottom: 0;
    width: 100%;
    min-height: 25px;
    height: 25px;
    line-height: 25px;
    user-select: none;
    -webkit-user-drag: element;
    background-color: transparent;

    display: flex;
    flex-direction: row;
    align-items: center;
    user-select: none;

    direction: ltr;

    transition: opacity 0.25s linear;
    
    -webkit-text-zoom: reset
}

video::-webkit-media-controls-panel {
    opacity: 0;
    padding-top: 20px;
    min-height: 45px;
    height: 45px;
}

video::-webkit-media-controls-panel.show,
video::-webkit-media-controls-panel.paused,
video::-webkit-media-controls-panel:hover {
    cursor: inherit;
    opacity: 1;
}

video::-webkit-media-controls-panel.picture-in-picture {
    pointer-events: none;
}

audio::-webkit-media-show-controls {
    display: none !important;
}
video::-webkit-media-show-controls {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 10px;
    opacity: 0;
    border: 0;
    background: none;
    appearance: none;
}

video::-webkit-media-controls-panel-background-container,
audio::-webkit-media-controls-panel-background-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

video::-webkit-media-controls-panel-background-container {
    z-index: 0;
}

video::-webkit-media-controls-panel-background-container {
    min-height: 45px;
    height: 45px;
    clip-path: inset(20px 0px 0px 0px);
}

video::-webkit-media-controls-panel-tint,
audio::-webkit-media-controls-panel-tint {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: transparent;
}

video::-webkit-media-controls-panel-tint {
    min-height: 45px;
    height: 45px;
    background-color: rgb(41, 41, 41);
    mix-blend-mode: lighten;
}

video::-webkit-media-controls-panel-background,
audio::-webkit-media-controls-panel-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 25px;
    height: 25px;
    background-color: rgb(41, 41, 41);
}

video::-webkit-media-controls-panel-background {
    min-height: 45px;
    height: 45px;
    background-color: rgba(30, 30, 30, 0.45);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

video::-webkit-media-controls-panel button,
audio::-webkit-media-controls-panel button {
    appearance: none;
    display: block;
    padding: 0;
    border: 0;
    height: 15px;
    background-color: transparent;
    color: white;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-position: center;
}

audio::-webkit-media-controls-panel button {
    z-index: 0;
}

video::-webkit-media-controls-panel button {
    mix-blend-mode: plus-lighter;
    transform: translateZ(0);
}

video::-webkit-media-controls-panel button:focus,
audio::-webkit-media-controls-panel button:focus {
    outline: 0;
}

video::-webkit-media-controls-rewind-button,
audio::-webkit-media-controls-rewind-button {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17" fill="rgba(255,255,255,0.45)"><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.451 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.453,0.599"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486"/></svg>');
    width: 16px;
    min-width: 16px;
    height: 18px;
    margin-bottom: 1px;
    margin-left: 8px;
    margin-right: 8px;
}

video::-webkit-media-controls-play-button,
audio::-webkit-media-controls-play-button {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="rgba(255,255,255,0.45)"><rect x="0" y="1" width="4" height="13"/><rect x="8" y="1" width="4" height="13"/></svg>');
    margin-left: 8px;
    margin-right: 8px;
    width: 12px;
    min-width: 12px;
}

video::-webkit-media-controls-play-button.paused,
audio::-webkit-media-controls-play-button.paused {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="rgba(255,255,255,0.45)"><path d="M 0,1 12,7.5 0,14 z"/></svg>');
    width: 12px;
}

video::-webkit-media-controls-panel .mute-box,
audio::-webkit-media-controls-panel .mute-box {
    width: 14px;
    min-width: 14px;
    height: 25px;
    margin-right: 8px;
    margin-left: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

video::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-mute-button,
video::-webkit-media-controls-volume-max-button {
    width: 14px;
    min-width: 14px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.45)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.45)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.45)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
}

video::-webkit-media-controls-panel .volume-box,
audio::-webkit-media-controls-panel .volume-box {
    position: absolute;
    box-sizing: border-box;
    width: 63px;
    bottom: 5px;
    left: -25px;

    clip-path: inset(20px 20px 20px 20px round 4px 4px 0px 0px);
    background-color: transparent;
    overflow: hidden;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    opacity: 0;
    /* make zero height (rather than display:none) for AX and FKA */
    height: 0px; /* will become 116px when shown */

}

audio::-webkit-media-controls-panel .volume-box {
    background-color: black;
}

video::-webkit-media-controls-volume-slider-container-background,
audio::-webkit-media-controls-volume-slider-container-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background-color: rgba(30, 30, 30, 0.45);
}

video::-webkit-media-controls-volume-slider-container-background {
    background-color: rgba(30, 30, 30, 0.45);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

video::-webkit-media-controls-volume-slider-container-tint,
audio::-webkit-media-controls-volume-slider-container-tint {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background-color: rgb(41, 41, 41);
}

video::-webkit-media-controls-volume-slider-container-tint {
    mix-blend-mode: lighten;
}

/* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
video::-webkit-media-controls-panel .mute-box:hover .volume-box,
video::-webkit-media-controls-panel .volume-box:hover,
video::-webkit-media-controls-panel .volume-box:active,
audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
audio::-webkit-media-controls-panel .volume-box:hover,
audio::-webkit-media-controls-panel .volume-box:active {
    opacity: 1;
    /* resize to usable amount (rather than display:none) for AX and FKA */
    height: 116px;
}

audio::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-slider {
    appearance: none !important;
    box-sizing: border-box !important;
    height: 9px !important;
    min-width: 64px !important;
    width: 64px !important;
    padding: 0 !important;
    margin: 0 !important;

    background-color: transparent !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-transform-origin: 0 0;
    transform: rotate(-90deg) translateY(28px) translateX(-40px);
}

video::-webkit-media-controls-volume-slider {
    mix-blend-mode: plus-lighter;
}

video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
    appearance: none !important;
    width: 7px !important;
    height: 7px !important;
    visibility: hidden;
}

video::-webkit-media-controls-mute-button.muted,
audio::-webkit-media-controls-mute-button.muted,
video::-webkit-media-controls-volume-min-button {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.45)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.45)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.45)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/></svg>');
}

video::-webkit-media-controls-wireless-playback-picker-button,
audio::-webkit-media-controls-wireless-playback-picker-button {
    margin-right: 8px;
    margin-left: 8px;
    width: 16px;
    min-width: 16px;
}

video::-webkit-media-controls-wireless-playback-picker-button.playing,
audio::-webkit-media-controls-wireless-playback-picker-button.playing {
    mix-blend-mode: normal;
}

video::-webkit-media-controls-toggle-closed-captions-button,
audio::-webkit-media-controls-toggle-closed-captions-button {
    width: 16px;
    min-width: 16px;
    margin-right: 8px;
    margin-left: 8px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.45)"  fill="none"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
    outline: 0;
}

video::-webkit-media-controls-closed-captions-container,
audio::-webkit-media-controls-closed-captions-container {
    position: absolute;
    display: block;
    right: 38px;
    bottom: 29px;
    max-width: calc(100% - 48px); /* right + 10px */
    max-height: calc(100% - 39px); /* bottom + 10px */
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(128, 128, 128, 0.75);
    border-radius: 6px;
    cursor: default;
    z-index: 2;
    text-align: initial;
}

video::-webkit-media-controls-closed-captions-container .list,
audio::-webkit-media-controls-closed-captions-container .list {
    display: block;
    user-select: none;
}

video::-webkit-media-controls-closed-captions-container h3,
audio::-webkit-media-controls-closed-captions-container h3 {
    margin: 0;
    color: rgb(140, 140, 140);
    text-shadow: 0 1px 0 black;
    margin-inline-start: 16px;
    padding-top: 4px;
    font-size: 11px;
}

video::-webkit-media-controls-closed-captions-container ul,
audio::-webkit-media-controls-closed-captions-container ul {
    list-style-type: none;
    margin: 0 0 8px 0;
    padding: 0;
}

video::-webkit-media-controls-closed-captions-container li,
audio::-webkit-media-controls-closed-captions-container li {
    position: relative;
    color: white;
    background-image: none;
    text-shadow: 0 1px 0 black;
    margin: 0;
    padding-left: 28px;
    padding-right: 28px;
    padding-top: 0.15em;
    padding-bottom: 0.2em;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

video::-webkit-media-controls-closed-captions-container li:focus,
audio::-webkit-media-controls-closed-captions-container li:focus {
    outline: 0;
    background-color: rgba(140, 140, 140, 0.5);
}

video::-webkit-media-controls-closed-captions-container li:hover,
audio::-webkit-media-controls-closed-captions-container li:hover {
    background-color: rgba(26, 68, 243, 0.6);
}

video::-webkit-media-controls-closed-captions-container li .checkmark-container,
audio::-webkit-media-controls-closed-captions-container li .checkmark-container {
    display: none;
    position: absolute;
    top: 0.25em;
    left: 1em;
    width: 1.1em;
    height: 1.1em;
}

video::-webkit-media-controls-closed-captions-container li.selected .checkmark-container,
audio::-webkit-media-controls-closed-captions-container li.selected .checkmark-container {
    display: inline-block;
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgb(163, 163, 163)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
}

video::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container,
audio::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgba(255,255,255,0.45)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
}

video::-webkit-media-controls-panel .picture-in-picture-button {
    margin-right: 7px;
    margin-left: 8px;
    margin-top: 1px;
    width: 16px;
    min-width: 18px;
    height: 12px;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12" fill="rgba(255,255,255,0.45)"><polygon points="6 8 1 8 1 1 14 1 14 6 15 6 15 0 0 0 0 9 6 9 6 8"/><rect x="7" y="7" width="9" height="5"/><polyline transform="translate(4, 4) rotate(180) translate(-4, -4)" points="5.33 2 5.33 3 3.67 3 5.67 5 5 5.67 3 3.67 3 5.33 2 5.33 2 2"/></svg>');
  }

video::-webkit-media-controls-panel .picture-in-picture-button.return-from-picture-in-picture {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12" fill="rgba(255,255,255,0.45)"><polygon points="6 8 1 8 1 1 14 1 14 6 15 6 15 0 0 0 0 9 6 9 6 8"/><rect x="7" y="7" width="9" height="5"/><polyline points="5.33 2 5.33 3 3.67 3 5.67 5 5 5.67 3 3.67 3 5.33 2 5.33 2 2"/></svg>');
  }

video::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-fullscreen-button {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
    margin-right: 7px;
    margin-left: 8px;
    width: 14px;
    min-width: 14px;
}

video::-webkit-media-controls-fullscreen-button.exit,
audio::-webkit-media-controls-fullscreen-button.exit {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" fill="none"><path d="M 7.5,1 L 7.5,6.5 L 13,6.5"/><path d="M 0,8.5 L 5.5,8.5 L 5.5,14"/><path stroke-linecap="round" d="M 7.5,6.5 L 12.5,1.5"/><path stroke-linecap="round" d="M 5.5,8.5 L 0.5,13.5"/></svg>');
    margin-right: 11px;
    margin-left: 0px;
    margin-top: 6px;
}

video::-webkit-media-controls-status-display,
audio::-webkit-media-controls-status-display {
    cursor: default;
    overflow: hidden;
    color: rgb(156, 156, 156);
    opacity: 0.99;

    letter-spacing: normal;
    word-spacing: normal;
    line-height: 25px;
    text-transform: none;
    text-indent: 0;
    text-decoration: none;
    text-align: left;

    padding: 0 12px;

    flex: 1 1 0;
}

video::-webkit-media-controls-status-display {
    color: white;
    opacity: .45;
    mix-blend-mode: plus-lighter;
}

video::-webkit-media-controls-timeline,
audio::-webkit-media-controls-timeline {
    appearance: none !important;
    flex: 1 1 0 !important;
    height: 17px !important;
    margin: 0 !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
    background-color: transparent;
}

video::-webkit-media-controls-timeline {
    mix-blend-mode: plus-lighter;
}

video::-webkit-media-controls-timeline::-webkit-slider-thumb,
audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
    appearance: none !important;
    width: 3px !important;
    height: 15px !important;
}

video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
    user-select: none;
    flex: 0 0 0;
    display: flex;
    cursor: default;
    overflow: hidden;
    color: rgb(156, 156, 156);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-decoration: none;
    position: relative;
    bottom: 0.5px;
    font-family: -apple-system-monospaced-numbers;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: normal !important;
    -webkit-text-size-adjust: none;
}

video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
    color: white;
    opacity: .45;
    mix-blend-mode: plus-lighter;
}

video::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-current-time-display {
    margin-left: 8px;
    margin-right: 8px;
    width: 32px;
    min-width: 32px;
    justify-content: flex-end;
}

video::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-time-remaining-display {
    margin-left: 8px;
    margin-right: 8px;
    width: 37px;
    min-width: 37px;
    justify-content: flex-start;
}

video::-webkit-media-controls-time-remaining-display.five-digit-time,
audio::-webkit-media-controls-time-remaining-display.five-digit-time {
    min-width: 47px;
}

video::-webkit-media-controls-current-time-display.five-digit-time,
audio::-webkit-media-controls-current-time-display.five-digit-time {
    min-width: 42px;
}

video::-webkit-media-controls-time-remaining-display.six-digit-time,
audio::-webkit-media-controls-time-remaining-display.six-digit-time {
    min-width: 54px;
}

video::-webkit-media-controls-current-time-display.six-digit-time,
audio::-webkit-media-controls-current-time-display.six-digit-time {
    min-width: 49px;
}

video::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-timeline-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    user-select: none;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    padding: 0;
}

video::-webkit-media-controls-panel .thumbnail-track,
audio::-webkit-media-controls-panel .thumbnail-track {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 17px;
    margin: 0 2px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

video::-webkit-media-controls-panel .thumbnail,
audio::-webkit-media-controls-panel .thumbnail {
    position: absolute;
    opacity: 0;
    transition: opacity 0.25s linear;
    bottom: 15px;
    width: 100px;
    height: 58px;
    margin-left: -50px;
    border: 5px solid black;
    box-shadow: 0 0 3px white;
    border-radius: 3px;
}

video::-webkit-media-controls-panel .thumbnail-image,
audio::-webkit-media-controls-panel .thumbnail-image {
    width: 100%;
    height: 100%;
}

video::-webkit-media-controls-panel .thumbnail.show,
audio::-webkit-media-controls-panel .thumbnail.show {
    opacity: 1;
}

video::-webkit-media-controls-panel.hidden,
audio::-webkit-media-controls-panel.hidden {
    display: none;
}

video::-webkit-media-controls-panel .hidden,
audio::-webkit-media-controls-panel .hidden,
video::-webkit-media-controls-panel .dropped,
audio::-webkit-media-controls-panel .dropped {
    display: none;
}

/* Full Screen */

/*
    Page stylesheets are not allowed to override the style of media
    controls while in full screen mode, so many if not all the rules
    defined in this section will be marked as !important to enforce
    this restriction
*/

video:-webkit-full-screen::-webkit-media-controls-panel {
    align-items: flex-start !important;
    justify-content: flex-end !important;
    clip-path: inset(20px round 6px);

    width: 480px !important;
    height: 104px !important;
    margin: 0 auto 12px auto !important;
    padding: 20px;
    padding-top: 30px !important;

    background-color: transparent;
    border-radius: 6px !important;

    transition: opacity 0.3s linear !important;
}

video:-webkit-full-screen::-webkit-media-controls-panel-tint,
audio:-webkit-full-screen::-webkit-media-controls-panel-tint {
    position: absolute;
    left: 0;
    top: 0;
    width: 480px !important;
    height: 104px !important;
    border-radius: 6px !important;
    background-color: rgb(41, 41, 41);
    mix-blend-mode: lighten;
}

video:-webkit-full-screen::-webkit-media-controls-panel-background,
audio:-webkit-full-screen::-webkit-media-controls-panel-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 480px !important;
    height: 104px !important;
    border-radius: 6px !important;
    background-color: rgba(30, 30, 30, 0.45);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
    opacity: 0 ! important;
    transition: opacity 0 ! important;
}

video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
    transform: none;
    clip-path: none;
    opacity: 1;
    left: 32px;
    top: 35px;
    width: 96px;
    height: 17px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    border: none;
}

video:-webkit-full-screen::-webkit-media-controls-panel .volume-box:not(.uses-ltr-user-interface-layout-direction) {
    transform: translateX(23px) scaleX(-1);
}

video:-webkit-full-screen::-webkit-media-controls-volume-slider {
    transform: none;
    background-color: transparent;
    min-width: 60px !important;
    width: 60px !important;
    height: 9px !important;
    margin: 0 !important;
}

video:-webkit-full-screen::-webkit-media-controls-mute-button,
audio:-webkit-full-screen::-webkit-media-controls-mute-button,
video:-webkit-full-screen::-webkit-media-controls-volume-max-button {
    width: 14px !important;
    margin-left: 6px !important;
    margin-bottom: 2px !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.45)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.45)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.45)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
}
video:-webkit-full-screen::-webkit-media-controls-mute-button,
audio:-webkit-full-screen::-webkit-media-controls-mute-button,
video:-webkit-full-screen::-webkit-media-controls-volume-min-button {
    width: 14px !important;
    margin-right: 2px !important;
    margin-bottom: 2px !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.45)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.45)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.45)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/></svg>');
}

video:-webkit-full-screen::-webkit-media-controls-play-button {
    position: absolute;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.45)"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');

    width: 21px;
    height: 23px;
    left: 230px;
    top: 32px;
    margin: 0;
    padding: 0;
}

video:-webkit-full-screen::-webkit-media-controls-play-button.paused {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.45)"><path d="M 0,0 21,11.5 0,23 z"/></svg>');
}

video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
    position: absolute;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="rgba(255,255,255,0.45)"><path d="M 24,0 12,7 24,15 z"/><path d="M 12,0 0,7 12,15 z"/></svg>');

    width: 24px;
    height: 15px;
    left: 176px;
    top: 36px;
}

video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
    position: absolute;
    display: flex;
    width: 29px;
    height: 16px;
    left: 262px;
    top: 13px;
}

video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
    position: absolute;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="rgba(255,255,255,0.45)"><path d="M 0,0 12,7 0,15 z"/><path d="M 12,0 24,7 12,15 z"/></svg>');

    width: 24px;
    height: 15px;
    left: 275px;
    top: 36px;
}

video:-webkit-full-screen::-webkit-media-controls-timeline-container {
    height: auto;
    width: 440px;
    position: absolute;
    bottom: 28px;
    left: 20px;
}

video:-webkit-full-screen::-webkit-media-controls-current-time-display {
    margin-left: 12px;
}

video:-webkit-full-screen::-webkit-media-controls-time-remaining-display {
    margin-right: 12px;
}

video:-webkit-full-screen::-webkit-media-controls-status-display {
    width: 440px;
    position: absolute;
    bottom: 25px;
    text-align: center;
    padding: 0;
    left: 20px;
}

video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
audio:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button {
    margin-top: 6px;
    margin-right:24px;
    margin-left: 0px;
}

video:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button,
audio:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button {
    margin-top: 6px;
    margin-right:24px;
    margin-left: 0px;
}

video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
    bottom: 100px;
    right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
    max-width: calc(50% + 173px); /* right + 10px */
    max-height: calc(100% - 124px); /* bottom + 10px */
}

video::-webkit-media-text-track-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 5px;
    z-index: 0;

    text-align: center;
    color: rgba(255, 255, 255, 1);

    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0;
    text-decoration: none;
    pointer-events: none;
    user-select: none;

    flex: 1 1;

    -webkit-line-box-contain: block inline-box replaced;
}

video::cue {
    background-color: rgba(0, 0, 0, 0.8);
}

video::-webkit-media-text-track-display {
    position: absolute;
    overflow: hidden;
    white-space: pre-wrap;
    box-sizing: border-box;
    font: 22px sans-serif;
}

video::-webkit-media-text-track-display-backdrop {
    display: inline-block;
}

video::cue(:future) {
    color: gray;
}

video::-webkit-media-text-track-container b {
    font-weight: bold;
}

video::-webkit-media-text-track-container u {
    text-decoration: underline;
}

video::-webkit-media-text-track-container i {
    font-style: italic;
}

video::-webkit-media-text-track-container .hidden,
audio::-webkit-media-text-track-container .hidden {
    display: none;
}

/* ============ ACTIVE VERSIONS OF ALL BUTTONS ============= */

video::-webkit-media-controls-mute-button:active,
audio::-webkit-media-controls-mute-button:active,
video::-webkit-media-controls-volume-max-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="white" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="white" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
}

video::-webkit-media-controls-panel button.muted:active,
audio::-webkit-media-controls-panel button.muted:active,
video::-webkit-media-controls-volume-min-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="white" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="white" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/></svg>');
}

video::-webkit-media-controls-toggle-closed-captions-button:active,
audio::-webkit-media-controls-toggle-closed-captions-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="white"  fill="none"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
}

video::-webkit-media-controls-rewind-button:active,
audio::-webkit-media-controls-rewind-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17" fill="white"><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.451 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.453,0.599"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486"/></svg>');
}

video::-webkit-media-controls-panel button.paused:active,
audio::-webkit-media-controls-panel button.paused:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="white"><path d="M 0,1 12,7.5 0,14 z"/></svg>');
}

video::-webkit-media-controls-play-button:active,
audio::-webkit-media-controls-play-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="white"><rect x="0" y="1" width="4" height="13"/><rect x="8" y="1" width="4" height="13"/></svg>');
}

video:-webkit-full-screen::-webkit-media-controls-mute-button:active,
audio:-webkit-full-screen::-webkit-media-controls-mute-button:active,
video:-webkit-full-screen::-webkit-media-controls-volume-max-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="white" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="white" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
}
video:-webkit-full-screen::-webkit-media-controls-mute-button:active,
audio:-webkit-full-screen::-webkit-media-controls-mute-button:active,
video:-webkit-full-screen::-webkit-media-controls-volume-min-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="white" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="white" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/></svg>');
}

video:-webkit-full-screen::-webkit-media-controls-play-button:active{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="white"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');
}

video:-webkit-full-screen::-webkit-media-controls-panel button.paused:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="white"><path d="M 0,0 21,11.5 0,23 z"/></svg>');
}

video:-webkit-full-screen::-webkit-media-controls-seek-back-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="white"><path d="M 24,0 12,7 24,15 z"/><path d="M 12,0 0,7 12,15 z"/></svg>');
}

video:-webkit-full-screen::-webkit-media-controls-seek-forward-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="white"><path d="M 0,0 12,7 0,15 z"/><path d="M 12,0 24,7 12,15 z"/></svg>');
}

video::-webkit-media-controls-fullscreen-button:active,
audio::-webkit-media-controls-fullscreen-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
}

video::-webkit-media-controls-panel button.exit:active,
audio::-webkit-media-controls-panel button.exit:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" fill="none"><path d="M 7.5,1 L 7.5,6.5 L 13,6.5"/><path d="M 0,8.5 L 5.5,8.5 L 5.5,14"/><path stroke-linecap="round" d="M 7.5,6.5 L 12.5,1.5"/><path stroke-linecap="round" d="M 5.5,8.5 L 0.5,13.5"/></svg>');
}

video::-webkit-media-controls-wireless-playback-picker-button:active,
audio::-webkit-media-controls-wireless-playback-picker-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="white"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0.5 L 16,0.5 L 16,15.5 L 0,15.5 z M 0,14.5 L 16,14.5 L 8,5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="2" width="15" height="8"/><path stroke="none" fill="white" d="M 3.5,13.25 L 12.5,13.25 L 8,8 z"/></svg>');
}

video::-webkit-media-controls-panel .picture-in-picture-button:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12" fill="white"><polygon points="6 8 1 8 1 1 14 1 14 6 15 6 15 0 0 0 0 9 6 9 6 8"/><rect x="7" y="7" width="9" height="5"/><path d="M5.5,4.45a0.5,0.5,0,0,0-.5.5v1.3L2.58,3.83a0.5,0.5,0,0,0-.71.71L4.33,7H3A0.5,0.5,0,0,0,3,8H5.5A0.5,0.5,0,0,0,6,7.5V4.95A0.5,0.5,0,0,0,5.5,4.45Z" transform="translate(0 -2)"/></svg>');
}

video::-webkit-media-controls-panel .picture-in-picture-button.return-from-picture-in-picture:active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12" fill="white"><polygon points="6 8 1 8 1 1 14 1 14 6 15 6 15 0 0 0 0 9 6 9 6 8"/><rect x="7" y="7" width="9" height="5"/><path d="M2.22,7.23a0.5,0.5,0,0,0,.5-0.5V5.43L5.15,7.85a0.5,0.5,0,0,0,.71-0.71L3.39,4.68H4.77a0.5,0.5,0,0,0,0-1H2.22a0.5,0.5,0,0,0-.5.5V6.73A0.5,0.5,0,0,0,2.22,7.23Z" transform="translate(0 -2)"/></svg>');
}

/* ==================== AIRPLAY PLACARD ==================== */

video::-webkit-media-controls-wireless-playback-status,
audio::-webkit-media-controls-wireless-playback-status {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131 90"><g fill="none" stroke="-apple-system-gray" stroke-width="4"><rect x="2" y="2" width="127" height="76"/><line x1="30" y1="88" x2="101" y2="88"/></g></svg>');
    background-color: rgb(51, 51, 53);
    background-repeat: no-repeat;
    background-position: 50% calc(.5 * (100% - 25px) - 21pt);
    background-size: 131px auto;
    color: -apple-system-gray;
    font-family: -apple-system;
    vertical-align: text-bottom;
}

video::-webkit-media-controls-wireless-playback-text,
audio::-webkit-media-controls-wireless-playback-text {
    cursor: default;
    position: absolute;
    width: 100%;
    top: calc(.5 * (100% - 25px) + (.5 * (90px + 42pt) - 42pt));
    user-select: none;
    margin: 0px;
    height: 42pt;
}

video::-webkit-media-controls-wireless-playback-text-top,
audio::-webkit-media-controls-wireless-playback-text-top {
    position: absolute;
    top: 15pt;
    width: 100%;
    line-height: 12pt;
    height: 13pt;
    font-size: 12pt;
    text-align: center;
    margin: 0px;
}

video::-webkit-media-controls-wireless-playback-text-bottom,
audio::-webkit-media-controls-wireless-playback-text-bottom {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    line-height: 10pt;
    height: 11pt;
    font-size: 10pt;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0px;
}

video::-webkit-media-controls-wireless-playback-status.small,
audio::-webkit-media-controls-wireless-playback-status.small {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 43"><g fill="none" stroke="-apple-system-gray" stroke-width="2"><rect x="1" y="1" width="60" height="36"/><line x1="14" y1="42" x2="48" y2="42"/></g></svg>');
    background-position: 50% calc(.5 * (100% - 25px) - 5pt);
    background-size: 62px auto;
}

video::-webkit-media-controls-wireless-playback-text-top.small,
audio::-webkit-media-controls-wireless-playback-text-top.small {
    top: 4pt;
}

video::-webkit-media-controls-wireless-playback-text-bottom.small,
audio::-webkit-media-controls-wireless-playback-text-bottom.small {
    display: none;
}

video::-webkit-media-controls-wireless-playback-status.picture-in-picture,
audio::-webkit-media-controls-wireless-playback-status.picture-in-picture
{
    background-size: 304px auto;
    background-position: 50% calc(.5 * (100% - 25px));
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 150"><g fill="none" stroke="-apple-system-gray" stroke-width="3"><path d="m 172,106 -81,0 c -3.5,0 -6,-2.5 -6,-6 l 0,-89 c 0,-3.5 2.5,-6 6,-6 l 122,0 c 3.5,0 6,2.5 6,6 l 0,57" /><path d="m 233,119 -53,0 c -3,0 -3,-0 -3,-3 l 0,-40 c 0,-3 0,-3 3,-3 l 53,0 c 3,0 3,0 3,3 l 0,40 c 0,3 0,3 -3,3 z" /></g></svg>');
}

video::-webkit-media-controls-wireless-playback-text-top.picture-in-picture,
audio::-webkit-media-controls-wireless-playback-text-top.picture-in-picture {
    top: initial;
    bottom: 0;
}

video::-webkit-media-controls-wireless-playback-text-bottom.picture-in-picture,
audio::-webkit-media-controls-wireless-playback-text-bottom.picture-in-picture {
    display: none;
}

video::-webkit-media-controls-wireless-playback-status.hidden,
audio::-webkit-media-controls-wireless-playback-status.hidden {
    display: none;
}

video::-webkit-media-controls-panel.picture-in-picture {
    opacity: 0;
    pointer-events: none;
}

video:-webkit-full-screen::-webkit-media-controls-panel .picture-in-picture-button {
    margin-top: 7px;
    margin-right: 24px;
    margin-left: 0px;
}

/* Time display clones that we use in updateLayoutForDisplayedWidth(). */
::-webkit-media-controls-current-time-display.clone,
::-webkit-media-controls-time-remaining-display.clone {
    position: absolute;
    display: inline;
    top: 100%;
    mix-blend-mode: normal;
}