@asicupv/paella-core/dist/paella-core.css

Multi stream HTML video player

.table-info-pop-up-plugin{font-family:var(--table-info-pop-up-plugin-font-family);color:var(--table-info-pop-up-plugin-text-primary);border-radius:var(--table-info-pop-up-plugin-border-radius);box-shadow:var(--table-info-pop-up-plugin-shadow-main);padding:0}.table-info-pop-up-plugin-container{gap:24px;padding:2px;display:grid}.table-info-pop-up-plugin-category{border:1px solid var(--table-info-pop-up-plugin-border-color);border-radius:var(--table-info-pop-up-plugin-border-radius-small);background:var(--table-info-pop-up-plugin-bg-secondary);overflow:hidden}.table-info-pop-up-plugin-category-title{background:var(--table-info-pop-up-plugin-bg-tertiary);font-size:var(--table-info-pop-up-plugin-font-size-category);color:var(--table-info-pop-up-plugin-text-primary);border-bottom:1px solid var(--table-info-pop-up-plugin-border-color);margin:0;padding:6px 10px;font-weight:600}.table-info-pop-up-plugin-list{padding:0}.table-info-pop-up-plugin-row{border-bottom:1px solid var(--table-info-pop-up-plugin-border-color);background:var(--table-info-pop-up-plugin-bg-primary);align-items:flex-start;padding:5px 8px;transition:background-color .2s;display:flex}.table-info-pop-up-plugin-row:last-child{border-bottom:none}.table-info-pop-up-plugin-row:hover{background:var(--table-info-pop-up-plugin-bg-secondary)}.table-info-pop-up-plugin-key{color:var(--table-info-pop-up-plugin-text-primary);font-weight:600;font-size:var(--table-info-pop-up-plugin-font-size-description);margin-right:64px}.table-info-pop-up-plugin-value{font-size:var(--table-info-pop-up-plugin-font-size-description);color:var(--table-info-pop-up-plugin-text-secondary);word-break:break-word;text-align:justify;text-align-last:right;flex:1;line-height:1.4}.table-info-pop-up-plugin-value a{color:#6bb6ff;text-decoration:none;transition:color .2s}.table-info-pop-up-plugin-value a:hover{color:#87ceeb;text-decoration:underline}.table-info-pop-up-plugin-header{background:var(--table-info-pop-up-plugin-bg-secondary);border-bottom:1px solid var(--table-info-pop-up-plugin-border-color);text-align:center;font-size:var(--table-info-pop-up-plugin-font-size-category);color:var(--table-info-pop-up-plugin-text-primary);padding:16px 20px;font-weight:700}.table-info-pop-up-plugin-footer{background:var(--table-info-pop-up-plugin-bg-secondary);border-top:1px solid var(--table-info-pop-up-plugin-border-color);text-align:center;font-size:var(--table-info-pop-up-plugin-font-size-small);color:var(--table-info-pop-up-plugin-text-muted);padding:16px 20px}input[type=range].isu{appearance:none;cursor:pointer;background:0 0}input[type=range].isu:focus{outline:none}.isu{--isu-main-fg-color:black;--isu-main-bg-color:lightgray;--isu-theme-color-1:#d8d8d8;--isu-theme-color-2:#bdbdbd;--isu-theme-color-3:#5f5f5f;--isu-theme-color-4:#3e3e3e;--isu-highlight-color:#7bd7f1;--isu-transition-time-slow:.15s;--isu-transition-time-medium:.1s;--isu-transition-time-fast:50ms;--range-input-default-width:150px;--range-runnable-track-background:var(--isu-theme-color-3);--range-runnable-track-height:.5rem;--range-runnable-track-border-radius:.5rem;--range-runnable-track-border-size:2px;--range-runnable-track-border-color:var(--isu-theme-color-4);--range-runnable-track-border-style:solid;--range-runnable-track-outline:0;--range-runnable-track-outline-offset:0;--range-runnable-track-box-shadow:0 0 2px #0000004d;--range-runnable-track-focus-background:var(--isu-highlight-color);--range-runnable-track-focus-height:var(--range-runnable-track-height);--range-runnable-track-focus-border-radius:var(--range-runnable-track-border-radius);--range-runnable-track-focus-border-size:var(--range-runnable-track-border-size);--range-runnable-track-focus-border-color:var(--range-runnable-track-border-color);--range-runnable-track-focus-border-style:var(--range-runnable-track-border-style);--range-runnable-track-focus-border:var(--range-runnable-track-border);--range-runnable-track-focus-outline:var(--range-runnable-track-outline);--range-runnable-track-focus-outline-offset:var(--range-runnable-track-outline-offset);--range-thumb-background:var(--isu-theme-color-1);--range-thumb-size:1.2rem;--range-thumb-border-radius:50%;--range-thumb-border:3px solid var(--isu-theme-color-4);--range-thumb-outline:0;--range-thumb-outline-offset:0;--range-thumb-box-shadow:0 0 4px 0 #0006;--range-thumb-hover-background:var(--isu-theme-color-2);--range-thumb-hover-size:1.4rem;--range-thumb-hover-border-radius:var(--range-thumb-border-radius);--range-thumb-hover-border:3px solid var(--isu-theme-color-3);--range-thumb-hover-outline:0;--range-thumb-hover-outline-offset:0;--range-thumb-focus-background:var(--range-thumb-background);--range-thumb-focus-size:var(--range-thumb-hover-size);--range-thumb-focus-border-radius:var(--range-thumb-border-radius);--range-thumb-focus-border:var(--range-thumb-border);--range-thumb-focus-outline:3px solid var(--isu-highlight-color);--range-thumb-focus-outline-offset:2px;--range-thumb-active-background:var(--isu-theme-color-3);--range-thumb-active-size:1.2rem;--range-thumb-active-border-radius:var(--range-thumb-border-radius);--range-thumb-active-border:var(--range-thumb-border);--range-thumb-active-outline:var(--range-thumb-outline);--range-thumb-active-outline-offset:var(--range-thumb-outline-offset)}input[type=range].isu{height:max(var(--range-runnable-track-height),var(--range-thumb-size));box-sizing:border-box;padding:0}input[type=range].isu::-webkit-slider-runnable-track{background:var(--range-runnable-track-background);height:var(--range-runnable-track-height);border-radius:var(--range-runnable-track-border-radius);border:var(--range-runnable-track-border-size) var(--range-runnable-track-border-style) var(--range-runnable-track-border-color);outline:var(--range-runnable-track-outline);outline-offset:var(--range-runnable-track-outline-offset);box-shadow:var(--range-runnable-track-box-shadow);box-sizing:border-box;padding:0}input[type=range].isu:focus-visible::-webkit-slider-runnable-track{background:var(--range-runnable-track-focus-background);height:var(--range-runnable-track-focus-height);border-radius:var(--range-runnable-track-focus-border-radius);border:var(--range-runnable-track-focus-border-size) var(--range-runnable-track-focus-border-style) var(--range-runnable-track-focus-border-color);outline:var(--range-runnable-track-focus-outline);outline-offset:var(--range-runnable-track-focus-outline-offset)}input[type=range].isu::-moz-range-track{background:var(--range-runnable-track-background);height:var(--range-runnable-track-height);border-radius:var(--range-runnable-track-border-radius);border:var(--range-runnable-track-border-size) var(--range-runnable-track-border-style) var(--range-runnable-track-border-color);outline:var(--range-runnable-track-outline);outline-offset:var(--range-runnable-track-outline-offset);box-sizing:border-box;box-shadow:var(--range-runnable-track-box-shadow);padding:0}input[type=range].isu:focus-visible::-moz-range-track{background:var(--range-runnable-track-focus-background);height:var(--range-runnable-track-focus-height);border-radius:var(--range-runnable-track-focus-border-radius);border:var(--range-runnable-track-focus-border-size) var(--range-runnable-track-focus-border-style) var(--range-runnable-track-focus-border-color);outline:var(--range-runnable-track-focus-outline);outline-offset:var(--range-runnable-track-focus-outline-offset)}input[type=range].isu::-webkit-slider-thumb{appearance:none;margin-top:calc((-1 * var(--range-runnable-track-border-size)) + (-.5 * var(--range-thumb-size)) + (.5 * var(--range-runnable-track-height)));background:var(--range-thumb-background);width:var(--range-thumb-size);height:var(--range-thumb-size);border-radius:var(--range-thumb-border-radius);border:var(--range-thumb-border);outline:var(--range-thumb-outline);outline-offset:var(--range-thumb-outline-offset);box-shadow:var(--range-thumb-box-shadow);box-sizing:border-box;transition:all var(--isu-transition-time-fast) linear}input[type=range].isu:hover::-webkit-slider-thumb{margin-top:calc((-1 * var(--range-runnable-track-border-size)) + (-.5 * var(--range-thumb-hover-size)) + (.5 * var(--range-runnable-track-height)));background:var(--range-thumb-hover-background);width:var(--range-thumb-hover-size);height:var(--range-thumb-hover-size);border-radius:var(--range-thumb-hover-border-radius);border:var(--range-thumb-hover-border);outline:var(--range-thumb-hover-outline);outline-offset:var(--range-thumb-hover-outline-offset)}input[type=range].isu:focus-visible::-webkit-slider-thumb{margin-top:calc((-1 * var(--range-runnable-track-focus-border-size)) + (-.5 * var(--range-thumb-focus-size)) + (.5 * var(--range-runnable-track-focus-height)));background:var(--range-thumb-focus-background);width:var(--range-thumb-focus-size);height:var(--range-thumb-focus-size);border-radius:var(--range-thumb-focus-border-radius);border:var(--range-thumb-focus-border);outline:var(--range-thumb-focus-outline);outline-offset:var(--range-thumb-focus-outline-offset)}input[type=range].isu:active::-webkit-slider-thumb{margin-top:calc((-1 * var(--range-runnable-track-border-size)) + (-.5 * var(--range-thumb-active-size)) + (.5 * var(--range-runnable-track-height)));background:var(--range-thumb-active-background);width:var(--range-thumb-active-size);height:var(--range-thumb-active-size);border-radius:var(--range-thumb-active-border-radius);border:var(--range-thumb-active-border);outline:var(--range-thumb-active-outline);outline-offset:var(--range-thumb-active-outline-offset)}input[type=range].isu::-moz-range-thumb{-moz-appearance:none;background:var(--range-thumb-background);width:var(--range-thumb-size);height:var(--range-thumb-size);border-radius:var(--range-thumb-border-radius);border:var(--range-thumb-border);outline:var(--range-thumb-outline);outline-offset:var(--range-thumb-outline-offset);box-shadow:var(--range-thumb-box-shadow);box-sizing:border-box}input[type=range].isu:hover::-moz-range-thumb{background:var(--range-thumb-hover-background);width:var(--range-thumb-hover-size);height:var(--range-thumb-hover-size);border-radius:var(--range-thumb-hover-border-radius);border:var(--range-thumb-hover-border);outline:var(--range-thumb-hover-outline)}input[type=range].isu:focus-visible::-moz-range-thumb{background:var(--range-thumb-focus-background);width:var(--range-thumb-focus-size);height:var(--range-thumb-focus-size);border-radius:var(--range-thumb-focus-border-radius);border:var(--range-thumb-focus-border);outline:var(--range-thumb-focus-outline);outline-offset:var(--range-thumb-focus-outline-offset)}input[type=range].isu:active::-moz-range-thumb{background:var(--range-thumb-active-background);width:var(--range-thumb-active-size);height:var(--range-thumb-active-size);border-radius:var(--range-thumb-active-border-radius);border:var(--range-thumb-active-border);outline:var(--range-thumb-active-outline);outline-offset:var(--range-thumb-active-outline-offset)}.player-container{grid-template-rows:1fr;grid-template-columns:1fr;display:grid}.player-container h1,.player-container h2,.player-container h3,.player-container h4,.player-container h5,.player-container h6,.player-container p,.player-container strong,.player-container span,.player-container a,.player-container button,.player-container div,.player-container nav,.player-container section,.player-container article,.player-container header,.player-container footer,.player-container aside,.player-container main,.player-container ul,.player-container li,.player-container ol,.player-container dl,.player-container dt,.player-container dd,.player-container dialog{box-sizing:border-box}.player-container>.video-container,.player-container>.captions-canvas,.player-container>.playback-bar-container{grid-area:1/1/-1/-1}div.error-container{z-index:1000;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;bottom:0}div.error-container div{text-align:center}div.error-container i{width:350px;height:350px;margin-left:auto;margin-right:auto;display:block}@media (width<=500px){div.error-container i{width:100px;height:100px}}@media (width<=800px){div.error-container i{width:200px;height:200px}}.player-container{container:player-container/inline-size}:root{--popup-resizeable-border:10px;--popup-title-bar-size:20px;--popup-title-bar-color:var(--highlight-bg-color);--popup-dock-button-size:15px}.player-container{font-family:var(--player-font-family);position:relative;overflow:hidden}svg{pointer-events:none;color:var(--icon-color)}.player-container button,.video-container .video-canvas .button-area button,.button-group .button-plugin-container button{outline-style:none}.player-container button:focus-visible,.video-container .video-canvas .button-area button:focus-visible,.button-group .button-plugin-container button:focus-visible{outline-style:solid;outline-color:var(--main-outline-color);outline-width:2px}.progress-indicator{-webkit-user-select:none;user-select:none;box-sizing:content-box;height:calc(max(var(--progress-indicator-slide-marker-height), var(--handler-height)));flex-grow:1;justify-content:center;align-items:center;display:flex}.progress-indicator.hide-timeline{display:none}.player-container div.progress-indicator{box-sizing:content-box}.progress-indicator>.range-container{grid-template-rows:1fr;grid-template-columns:1fr 1fr;align-items:center;width:100%;display:grid;position:relative}.progress-indicator>.range-container>.timeline-preview-container{grid-area:1/1/-1/-1}.progress-indicator>.range-container>.tracker{height:var(--progress-indicator-height);border-radius:var(--progress-bar-radius);flex-direction:row;grid-area:1/1/-1/-1;display:flex;overflow:hidden}.progress-indicator>.range-container>.tracker>.elapsed{width:50%;height:var(--progress-indicator-height);background-color:var(--elapsed-color);-webkit-user-select:none;user-select:none;pointer-events:none;border-start-start-radius:var(--progress-bar-radius);border-end-start-radius:var(--progress-bar-radius);margin:0}.progress-indicator>.range-container>.tracker>.remaining{width:50%;height:var(--progress-indicator-height);background-color:var(--remaining-color);-webkit-user-select:none;user-select:none;pointer-events:none;border-start-end-radius:var(--progress-bar-radius);border-end-end-radius:var(--progress-bar-radius);margin:0}.progress-indicator>.range-container>input,.progress-indicator>.range-container>.markers-container{grid-area:1/1/-1/-1}.progress-indicator:hover{--handler-color:white}.progress-indicator:active{--handler-color:white;--handler-radius:8px}.progress-indicator .range-container input[type=range]{appearance:none;cursor:pointer;background:0 0;width:15rem}.progress-indicator .range-container input[type=range]::-webkit-slider-thumb{appearance:none;width:var(--slider-thumb-width);height:var(--slider-thumb-height);background:var(--slider-thumb-color);opacity:var(--handler-opacity);border:none;border-radius:100%;box-shadow:0 0 3px #0006}.progress-indicator .range-container input[type=range]::-webkit-slider-runnable-track{appearance:none;background:var(--slider-runnable-track-color)}.progress-indicator .range-container>input[type=range]{width:100%;height:var(--progress-indicator-height);z-index:1;-webkit-user-select:none;user-select:none;background:0 0;margin:0;inset:0}.progress-indicator .range-container input[type=range]{appearance:none;cursor:pointer;background:0 0;margin:0}.progress-indicator .range-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--handler-width);height:var(--handler-width);background:var(--handler-color);border:var(--handler-border);border-radius:var(--handler-radius);opacity:var(--handler-opacity);box-sizing:border-box;box-shadow:var(--handler-shadow);transform:scale(var(--handler-scale));transition:all var(--handler-transition-time) ease-in-out;margin-top:0}.progress-indicator .range-container input[type=range]::-moz-range-thumb{width:var(--handler-width);height:var(--handler-width);background:var(--handler-color);border:var(--handler-border);border-radius:var(--handler-radius);box-sizing:border-box;box-shadow:var(--handler-shadow);opacity:var(--handler-opacity);transition:all var(--handler-transition-time) ease-in-out;margin-top:0}.progress-indicator .range-container input[type=range]:focus-visible{outline:2px solid var(--highlight-bg-color-hover);outline-offset:2px}.playback-bar-container{justify-content:flex-end;gap:var(--playback-bar-container-gap);height:100%;padding:var(--playback-bar-container-padding);flex-direction:column;align-items:center;display:flex}.playback-bar-container.pop-up-active{z-index:100;pointer-events:all;position:relative}.playback-bar{background:var(--playback-bar-gradient);-webkit-backdrop-filter:var(--playback-bar-backdrop-filter);backdrop-filter:var(--playback-bar-backdrop-filter);z-index:100;width:var(--playback-bar-width);border-radius:var(--playback-bar-border-radius);border-color:var(--playback-bar-border-color);border-style:var(--playback-bar-border-style);border-width:var(--playback-bar-border-width);box-shadow:var(--playback-bar-shadow);flex-shrink:0;transition:-webkit-backdrop-filter .2s ease-in-out,backdrop-filter .2s ease-in-out;bottom:0;overflow:hidden;container:playback-bar/inline-size}.playback-bar:hover{background:var(--playback-bar-gradient-hover);-webkit-backdrop-filter:var(--playback-bar-backdrop-filter-hover);backdrop-filter:var(--playback-bar-backdrop-filter-hover);transition:-webkit-backdrop-filter .3s ease-in-out,backdrop-filter .3s ease-in-out}.playback-bar nav{padding:var(--playback-bar-buttons-padding);justify-content:space-between;align-items:center;display:flex}.playback-bar nav>ul{flex:0;margin:0;padding:0;list-style-type:none;display:flex}.playback-bar nav>div{flex:1}.playback-bar nav>ul>li{align-items:center;margin:0;display:flex}.playback-bar nav>ul>li>.side-container.hidden{display:none}.playback-bar nav>ul>li>.side-container.hidden:focus-within,.playback-bar nav>ul>li>.side-container.hidden:hover{display:block}button,a{font-size:14px}:is(button,a) .button-title-small{font-size:var(--small-text-size)}:is(button,a) .button-title-medium{font-size:var(--medium-text-size)}:is(button,a) .button-title-large{font-size:var(--large-text-size)}div.non-interactive .button-title-small{font-size:var(--small-text-size)}div.non-interactive .button-title-medium{font-size:var(--medium-text-size)}div.non-interactive .button-title-large{font-size:var(--large-text-size)}.playback-bar ul>li>button,.playback-bar ul>li>a{height:var(--button-fixed-height);border-radius:var(--button-border-radius);background:var(--button-background);color:var(--button-color);box-sizing:border-box;background:0 0;border:none;justify-content:center;align-items:center;gap:3px;display:flex;overflow:hidden}.playback-bar ul>li>button.active-popup-button,.playback-bar ul>li>a.active-popup-button{background-color:var(--button-background-active)}.playback-bar ul>li>button.fixed-width,.playback-bar ul>li>a.fixed-width{grid-template-rows:1fr;grid-template-columns:1fr;place-items:center;display:grid}:is(.playback-bar ul>li>button.fixed-width,.playback-bar ul>li>a.fixed-width)>i{z-index:1;grid-row-start:1;grid-column-start:1}:is(.playback-bar ul>li>button.fixed-width,.playback-bar ul>li>a.fixed-width)>span{z-index:1;color:var(--button-color);grid-row-start:1;grid-column-start:1}.playback-bar ul>li>button.dynamic-width,.playback-bar ul>li>a.dynamic-width{width:auto;min-width:var(--button-fixed-width)}.playback-bar ul>li>button.fixed-width,.playback-bar ul>li>a.fixed-width{width:var(--button-fixed-width)}.playback-bar ul>li>button:hover,.playback-bar ul>li>a:hover{background-color:var(--button-background-hover)}.playback-bar ul>li>button:active,.playback-bar ul>li>a:active{background-color:var(--button-background-active)}:is(.playback-bar ul>li>button,.playback-bar ul>li>a)>span{color:var(--button-color)}:is(.playback-bar ul>li>button,.playback-bar ul>li>a)>i{width:var(--button-icon-size);height:var(--button-icon-size);justify-content:center;align-items:center;display:flex}:is(.playback-bar ul>li>button,.playback-bar ul>li>a)>i>svg{width:100%;height:100%;color:var(--icon-color)}.playback-bar ul>li>div{height:var(--button-fixed-height);box-sizing:border-box;-webkit-user-select:none;user-select:none;background:0 0;border:none;justify-content:center;align-items:center;gap:3px;display:flex}.playback-bar ul>li>div.fixed-width{grid-template-rows:1fr;grid-template-columns:1fr;place-items:center;display:grid}.playback-bar ul>li>div.fixed-width>i{z-index:1;grid-row-start:1;grid-column-start:1}.playback-bar ul>li>div.fixed-width>span{z-index:1;color:var(--button-color);grid-row-start:1;grid-column-start:1}.playback-bar ul>li>div.dynamic-width{width:auto;min-width:var(--button-fixed-width)}.playback-bar ul>li>div.fixed-width{width:var(--button-fixed-width)}.playback-bar ul>li>div>span{color:var(--button-color);text-wrap:nowrap;padding-left:4px;padding-right:4px}.playback-bar ul>li>div>i{justify-content:center;align-items:center;width:90%;height:90%;display:flex}.playback-bar ul>li>div>i>svg{height:100%;color:var(--icon-color)}.progress-indicator>.range-container>ul.markers-container{width:100%;height:var(--progress-indicator-slide-marker-height);border-radius:var(--progress-bar-radius);align-items:center;margin:0;padding:0;list-style:none;display:flex;position:relative;overflow:hidden}.progress-indicator>.range-container>ul.markers-container>li{position:absolute}.progress-indicator:has(.markers-container>li){--remaining-color:transparent;--elapsed-color:transparent}.progress-indicator{padding:var(--progress-indicator-padding);--slide-marker-hover-scale:calc(var(--progress-indicator-slide-marker-height) / var(--progress-indicator-height))}.progress-indicator>.range-container>ul.markers-container>li{box-sizing:border-box;height:var(--progress-indicator-height);background-color:#0000;flex-direction:row;margin:0;transition:height .2s,background-color .2s;display:flex;overflow:hidden}.progress-indicator>.range-container>ul.markers-container>li>div.elapsed{box-sizing:border-box;background-color:var(--slide-marker-elapsed-color);height:100%;margin:0}.progress-indicator>.range-container>ul.markers-container>li>div.remaining{box-sizing:border-box;background-color:var(--slide-marker-remaining-color);height:100%;margin:0}.progress-indicator>.range-container>ul.markers-container>li.active{height:var(--progress-indicator-slide-marker-height)}.progress-indicator>.range-container>ul.markers-container>li:first-of-type{border-left:none;border-start-start-radius:var(--progress-bar-radius);border-end-start-radius:var(--progress-bar-radius)}.progress-indicator>.range-container>ul.markers-container>li:last-of-type{border-start-end-radius:var(--progress-bar-radius);border-end-end-radius:var(--progress-bar-radius)}@media (forced-colors:active){ul.menu-button-content li.menu-button-item button.selected{border:2px solid #fff}.progress-indicator-content{box-sizing:border-box;border:5px solid #fff}.progress-indicator-remaining{box-sizing:border-box;border:3px solid gray}.progress-indicator-handler{box-sizing:border-box;border:5px solid #fff}}:root{--main-fg-color:white;--main-bg-color:#000c;--main-bg-color-hover:#000;--secondary-bg-color:#202020;--secondary-bg-color-hover:#202020cc;--highlight-bg-color:red;--highlight-bg-color-hover:#b60000;--main-border-color:#7d7d7d;--main-outline-color:var(--highlight-bg-color-hover);--button-color:var(--main-fg-color);--icon-color:var(--button-color);--player-font-family:sans-serif;--popup-wrapper-padding:0px 0;--button-fixed-size:5.5ex;--button-fixed-width:var(--button-fixed-size);--button-fixed-height:var(--button-fixed-size);--button-border-radius:7px;--button-icon-size:calc(var(--button-fixed-width) * .5);--button-background:transparent;--button-background-hover:var(--highlight-bg-color);--button-background-active:var(--highlight-bg-color-hover);--progress-indicator-font-size:11px;--small-text-size:.7em;--medium-text-size:.9em;--large-text-size:1em;--playback-bar-buttons-padding:15px 15px;--playback-bar-gradient:linear-gradient(0deg, #202020 0%, #20202080 72%, #20202000 100%);--playback-bar-gradient-hover:linear-gradient(0deg, #202020cc 0%, #202020cc 100%);--playback-bar-backdrop-filter:blur(1px);--playback-bar-backdrop-filter-hover:blur(15px);--playback-bar-width:100%;--playback-bar-container-padding:0;--playback-bar-container-gap:4px;--playback-bar-border-radius:0;--playback-bar-border-color:var(--main-border-color);--playback-bar-border-style:solid;--playback-bar-border-width:0;--playback-bar-shadow:none;--progress-indicator-padding:10px 1ch;--progress-indicator-elapsed-color:var(--highlight-bg-color);--progress-indicator-remaining-color:#606060;--progress-indicator-height:6px;--progress-indicator-slide-marker-height:18px;--progress-bar-radius:100px;--handler-size:20px;--handler-height:var(--handler-size);--handler-width:var(--handler-size);--handler-scale:1;--handler-color:white;--handler-shadow:0 0 4px 0 #000c;--handler-radius:50%;--handler-opacity:0;--handler-border:none;--handler-transition-time:.1s;--handler-scale-hover:1.1;--handler-color-hover:var(--main-fg-color);--handler-shadow-hover:0 0 4px 0 #000c;--handler-radius-hover:50%;--handler-opacity-hover:1;--handler-border-hover:none;--handler-scale-active:.9;--handler-shadow-active:0 0 4px 0 #000c;--handler-color-active:var(--main-fg-color);--handler-radius-active:50%;--handler-opacity-active:1;--handler-border-active:none;--elapsed-color:var(--progress-indicator-elapsed-color);--remaining-color:var(--progress-indicator-remaining-color);--slide-marker-elapsed-color:var(--progress-indicator-elapsed-color);--slide-marker-remaining-color:var(--progress-indicator-remaining-color);--slide-marker-gap:4px;--timeline-preview-gap:22px;--timeline-preview-border-radius:10px;--timeline-preview-box-shadow:0 0 4px 0 #000c;--timeline-preview-padding:9px;--timeline-preview-background:var(--main-bg-color);--timeline-preview-color:var(--main-fg-color);--timeline-preview-max-image-block-size:17ex;--video-container-padding:0px;--video-container-gap:10px;--video-container-background-color:#e4e4e4;--base-video-rect-background-color:#8a8a8a;--video-container-message-bkg:#0006;--video-container-message-color:white;--video-container-message-padding:1ch;--video-container-message-border-radius:5px;--video-container-message-icon-width:90%;--video-container-message-icon-max-width-sm:50px;--video-container-message-icon-max-width-md:110px;--video-container-message-icon-max-width-lg:250px;--video-container-message-font-size-sm:1.2em;--video-container-message-font-size-md:2em;--video-container-message-font-size-lg:2.3em;--popup-backdrop-filter:blur(5px);--popup-backdrop-filter-hover:blur(15px);--popup-border-radius:10px;--popup-box-shadow:0 0 10px 0 #00000080;--popup-padding:13px 13px;--popup-menu-margin:0 0;--popup-menu-gap:4px;--popup-menu-item-height:2em;--popup-menu-item-font-size:1.1em;--popup-menu-item-border-radius:5px;--popup-title-font-size:1.2em;--popup-menu-item-icon-size:30px;--popup-menu-item-text-to-state-spacing:7ch;--popup-menu-item-state-text-size:.8em;--canvas-button-container-padding:5px;--canvas-button-height:15%;--canvas-button-min-height:28px;--canvas-button-max-height:64px;--canvas-button-aspect-ratio:1;--canvas-button-gap:5px;--canvas-button-padding:3%;--canvas-button-border-radius:7px;--canvas-button-opacity:.7;--canvas-button-opacity-hover:1;--canvas-button-opacity-out:.2;--canvas-button-border:none;--canvas-button-background:var(--main-bg-color);--table-info-pop-up-plugin-bg-primary:var(--main-bg-color);--table-info-pop-up-plugin-bg-secondary:var(--secondary-bg-color-hover);--table-info-pop-up-plugin-bg-tertiary:var(--main-bg-color-hover);--table-info-pop-up-plugin-text-primary:var(--main-fg-color);--table-info-pop-up-plugin-text-secondary:#e0e0e0;--table-info-pop-up-plugin-text-muted:#ccc;--table-info-pop-up-plugin-border-color:#404040;--table-info-pop-up-plugin-border-light:#555;--table-info-pop-up-plugin-shadow-main:0 10px 40px #0006;--table-info-pop-up-plugin-font-family:var(--player-font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--table-info-pop-up-plugin-font-size-category:var(--medium-text-size,16px);--table-info-pop-up-plugin-font-size-description:var(--medium-text-size,14px);--table-info-pop-up-plugin-font-size-small:var(--small-text-size,12px);--table-info-pop-up-plugin-border-radius:var(--popup-border-radius,12px);--table-info-pop-up-plugin-border-radius-small:var(--popup-item-border-radius,8px);--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-color:var(--secondary-bg-color-hover,transparent);--scrollbar-track-border-radius:var(--popup-item-border-radius,8px);--scrollbar-thumb-color:var(--highlight-bg-color);--scrollbar-thumb-color-hover:var(--highlight-bg-color-hover);--scrollbar-thumb-border-radius:var(--popup-item-border-radius,8px);--mobile-popup-backdrop-filter:blur(5px);--mobile-popup-background:#000000a6;--mobile-popup-header-btn-width:var(--mobile-popup-header-btn-size);--mobile-popup-header-btn-height:var(--mobile-popup-header-btn-size);--mobile-popup-header-btn-size:35px}.progress-indicator:hover{--handler-scale:var(--handler-scale-hover);--handler-color:var(--handler-color-hover);--handler-shadow:var(--handler-shadow-hover);--handler-radius:var(--handler-radius-hover);--handler-opacity:var(--handler-opacity-hover);--handler-border:var(--handler-border-hover)}.progress-indicator:active{--handler-scale:var(--handler-scale-active);--handler-color:var(--handler-color-active);--handler-shadow:var(--handler-shadow-active);--handler-radius:var(--handler-radius-active);--handler-opacity:var(--handler-opacity-active);--handler-border:var(--handler-border-active)}.isu{--isu-theme-color-1:#fbb8b8;--isu-theme-color-2:#ffa8a8;--isu-theme-color-3:var(--highlight-bg-color);--isu-theme-color-4:var(--highlight-bg-color);--isu-highligh-color:var(--highlight-bg-color-hover);--range-runnable-track-border-color:black;--range-runnable-track-background:var(--main-bg-color);--range-runnable-track-focus-background:var(--main-bg-color-hover);--range-thumb-border:2px solid black;--range-thumb-focus-border:2px solid black;--range-thumb-active-border:2px solid black;--range-thumb-hover-border:2px solid black;--range-thumb-background:white;--range-thumb-focus-background:white;--range-thumb-active-background:white;--range-thumb-hover-background:white}.pop-up-content>menu{box-sizing:border-box;margin:var(--popup-menu-margin);gap:var(--popup-menu-gap);-webkit-user-select:none;user-select:none;flex-direction:column;padding:0;list-style:none;display:flex}.pop-up-content>menu>li{box-sizing:border-box}.pop-up-content>menu>li>button,.pop-up-content>menu>li>a{box-sizing:border-box;width:100%;height:var(--popup-menu-item-height);color:var(--main-fg-color);font-size:var(--popup-menu-item-font-size);border-radius:var(--popup-menu-item-border-radius);text-align:left;background:0 0;border:none;flex-direction:row;justify-content:space-between;align-items:center;gap:5px;text-decoration:none;display:flex}:is(.pop-up-content>menu>li>button,.pop-up-content>menu>li>a)>i{height:var(--popup-menu-item-icon-size);text-align:center;flex-grow:0}:is(.pop-up-content>menu>li>button,.pop-up-content>menu>li>a)>i.menu-icon{width:var(--popup-menu-item-icon-size)}:is(.pop-up-content>menu>li>button,.pop-up-content>menu>li>a) .state-icon{box-sizing:border-box;height:var(--popup-menu-item-height);padding:.5ch 0}:is(.pop-up-content>menu>li>button,.pop-up-content>menu>li>a)>span.menu-title{text-align:left;flex-grow:1;justify-self:flex-start}:is(.pop-up-content>menu>li>button,.pop-up-content>menu>li>a)>span.button-state{margin-left:var(--popup-menu-item-text-to-state-spacing);flex-direction:row;flex-grow:0;align-items:center;gap:3px;display:flex}:is(.pop-up-content>menu>li>button,.pop-up-content>menu>li>a)>span.button-state>.state-text{font-size:var(--popup-menu-item-state-text-size)}.pop-up-content>menu>li>button:hover,.pop-up-content>menu>li>a:hover{background:var(--highlight-bg-color-hover)}.pop-up-content>menu>li>button.selected,.pop-up-content>menu>li>a.selected,.pop-up-content>menu>li>button.selected:hover,.pop-up-content>menu>li>a.selected:hover{background:var(--highlight-bg-color)}.pop-up-content>menu>li svg{height:100%;color:var(--icon-color)}.progress-indicator .timeline-preview-container{width:100%;position:relative}.progress-indicator .timeline-preview-container>.timeline-preview{bottom:var(--timeline-preview-gap);background:var(--timeline-preview-background);box-sizing:border-box;padding:var(--timeline-preview-padding);color:var(--timeline-preview-color);border-radius:var(--timeline-preview-border-radius);text-align:center;box-shadow:var(--timeline-preview-box-shadow);position:absolute}.progress-indicator .timeline-preview-container>.timeline-preview.hidden{display:none}.progress-indicator .timeline-preview-container>.timeline-preview>img{max-block-size:var(--timeline-preview-max-image-block-size)}.progress-indicator .timeline-preview-container>.timeline-preview>p{margin:0}.progress-indicator .timeline-preview-container>.timeline-preview>p.timeline-preview-text{font-weight:700}.progress-indicator .timeline-preview-container>.timeline-preview>p.timeline-preview-time{font-size:.9em}.pop-up-wrapper{z-index:10;pointer-events:none;height:100%;width:var(--playback-bar-width);padding:var(--popup-wrapper-padding);justify-content:center;align-items:flex-end;display:flex}.pop-up-wrapper.hidden{display:none}.pop-up-wrapper.left{justify-content:left}.pop-up-wrapper.right{justify-content:right}.pop-up-wrapper.left.right{grid-template-columns:1fr;align-items:end;display:grid}.pop-up-wrapper.left.right.hidden{display:none}.pop-up-wrapper .pop-up{pointer-events:all;background-color:var(--main-bg-color);-webkit-backdrop-filter:var(--popup-backdrop-filter);backdrop-filter:var(--popup-backdrop-filter);box-shadow:var(--popup-box-shadow);color:var(--main-fg-color);box-sizing:border-box;padding:var(--popup-padding);border-radius:var(--popup-border-radius);grid-template-rows:auto 1fr;grid-template-columns:1fr;max-height:80%;display:grid}.pop-up-wrapper .pop-up:hover{-webkit-backdrop-filter:var(--popup-backdrop-filter-hover);backdrop-filter:var(--popup-backdrop-filter-hover)}.pop-up-wrapper .pop-up.out{display:none}.pop-up-wrapper .pop-up header.pop-up-title{justify-content:space-between;align-items:center;gap:10px;padding-top:5px;padding-bottom:5px;display:flex}.pop-up-wrapper .pop-up header>h1,.pop-up-wrapper .pop-up header h2,.pop-up-wrapper .pop-up header h3,.pop-up-wrapper .pop-up header h4,.pop-up-wrapper .pop-up header h5,.pop-up-wrapper .pop-up header p{-webkit-user-select:none;user-select:none;margin:0}.pop-up-wrapper .pop-up header>h2{font-size:var(--popup-title-font-size)}.pop-up-wrapper .pop-up .pop-up-content{padding:2px 0;overflow:auto}.pop-up-wrapper .pop-up .pop-up-content::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-height)}.pop-up-wrapper .pop-up .pop-up-content::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-track-border-radius)}.pop-up-wrapper .pop-up .pop-up-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-thumb-border-radius)}.pop-up-wrapper .pop-up .pop-up-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-color-hover)}.pop-up-wrapper .pop-up article p{font-size:.9em}button.pop-up-header-btn{border:1px solid var(--main-fg-color);background:var(--main-bg-color);stroke:var(--main-fg-color);cursor:pointer;border-radius:5px;justify-content:center;align-items:center;padding:0 5px 0 4px;transition:all 50ms ease-in;display:flex}button.pop-up-header-btn svg{width:16px;height:16px;color:var(--icon-color)}button.pop-up-header-btn:hover{background-color:var(--highlight-bg-color-hover);transform:scale(1.1)}button.pop-up-header-btnaction-back:active{background-color:var(--highlight-bg-color);transform:scale(.94)}.captions-canvas{z-index:50;pointer-events:none;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0}.captions-canvas .text-container{background-color:var(--main-bg-color);width:80%;color:var(--main-fg-color);box-sizing:border-box;text-align:center;border-radius:5px;padding:10px;font-size:15px;position:absolute;bottom:5px;left:10%;right:10%}.captions-canvas.visible-ui .text-container{bottom:calc(30px + var(--playback-bar-height))}.captions-canvas.size-s .text-container{font-size:18px}.captions-canvas.size-m .text-container{font-size:20px}.captions-canvas.size-l .text-container{font-size:24px}.captions-canvas.size-xl .text-container{font-size:30px}.captions-canvas.size-xxl .text-container{font-size:34px}div.loader-container{z-index:1000;pointer-events:none;background-color:#fff9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}div.loader-container i{width:350px;height:350px;animation:1s linear infinite spin;display:block}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=500px){div.loader-container i{width:100px;height:100px}}@media (width<=800px){div.loader-container i{width:200px;height:200px}}.video-canvas .button-area{height:var(--canvas-button-height);min-height:var(--canvas-button-min-height);max-height:var(--canvas-button-max-height);box-sizing:border-box;pointer-events:none;z-index:1;padding:var(--canvas-button-container-padding);flex-direction:row;display:flex;position:absolute;top:0;left:0;right:0}.video-canvas .button-area>div{justify-content:center;align-items:center;gap:var(--canvas-button-gap);flex-direction:row;height:100%;display:flex}.video-canvas .button-area>.buttons-left{margin-right:auto}.video-canvas .button-area>.buttons-right{margin-left:auto}.video-canvas .button-area button{height:100%;aspect-ratio:var(--canvas-button-aspect-ratio);padding:var(--canvas-button-padding);pointer-events:all;background-color:var(--main-bg-color);border:var(--canvas-button-border);border-radius:var(--canvas-button-border-radius);opacity:var(--canvas-button-opacity-out);box-sizing:border-box}.video-canvas:hover .button-area button{opacity:var(--canvas-button-opacity)}.video-canvas .button-area button:hover{background-color:var(--highlight-bg-color-hover)}.video-canvas .button-area button i svg{width:100%;height:100%;color:var(--icon-color)}.video-canvas .button-area button:hover{opacity:var(--canvas-button-opacity-hover)}.video-canvas .button-area button.align-left{order:0}.video-canvas .button-area button.align-right{order:1}.video-canvas.image-canvas .image-container{place-content:center;align-items:center;width:100%;height:100%;display:flex}.video-canvas.image-canvas img.landscape{height:100%}.video-canvas.image-canvas img.portrait{width:100%}.video-container{background-color:var(--video-container-background-color);justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.video-container.over-playback-bar{height:calc(100% - var(--playback-bar-height));top:0;transform:none}.base-video-rect{background-color:var(--base-video-rect-background-color);position:relative}.base-video-rect.static{width:100%;height:100%}.base-video-rect.dynamic{gap:var(--video-container-gap);padding:var(--video-container-padding);box-sizing:border-box;background-color:#0000;width:100%;height:100%;display:flex}.base-video-rect.dynamic.portrait{flex-wrap:wrap;justify-content:center;align-items:center}.base-video-rect.dynamic.landscape{justify-content:space-around}.base-video-rect.dynamic{align-items:center}.base-video-rect.dynamic.portrait.align-left{justify-content:start}.base-video-rect.dynamic.portrait.align-right{justify-content:right}.base-video-rect.dynamic .landscape-container{justify-content:space-around;width:100%;display:flex}.base-video-rect.dynamic.align-bottom .landscape-container{align-items:flex-end}.base-video-rect.dynamic.align-top .landscape-container{align-items:flex-start}.base-video-rect.dynamic.align-center .landscape-container{align-items:center}.video-container .button-plugins{z-index:100;height:40px;position:absolute;top:10px}.video-container .button-plugins.left-side{left:10px}.video-container .button-plugins.right-side{right:10px}.video-container .user-area{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.video-container .button-plugins .button-plugin-container{display:inline}.video-container .button-plugins .button-plugin-container button{height:var(--button-fixed-height);background-color:var(--main-bg-color);float:left;border:none;border-radius:6px;margin-left:2px;margin-right:2px;display:block}.video-container .button-plugins .button-plugin-container button.fixed-width{width:var(--button-fixed-width)}.video-container .button-plugins .button-plugin-container button.dynamic-width div.interactive-button-content{flex-direction:row;justify-content:flex-start;align-items:center;display:flex}.video-container .button-plugins button.dynamic-width span{color:var(--main-fg-color);margin-top:0;padding-left:3px;padding-right:3px}.video-container .button-plugins button:hover{background-color:var(--highlight-bg-color-hover)}.video-container .button-plugins button:active{background-color:var(--main-bg-color-hover)}.video-container .button-plugins button i{background-position:3px 7px;background-repeat:no-repeat;background-size:50% 50%;width:20px;margin-left:5px;display:block}.video-container .button-plugins button i svg{width:100%;height:100%;color:var(--icon-color)}.video-container .button-plugins .button-plugin-container div.non-interactive{height:var(--button-fixed-height);float:left;box-sizing:border-box;pointer-events:none;background-color:#0000;border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.video-container .button-plugins .button-plugin-container div.non-interactive.fixed-width{width:var(--button-fixed-width)}.video-container .button-plugins div i{background-position:3px 7px;background-repeat:no-repeat;background-size:50% 50%;width:20px;margin-left:auto;margin-right:auto;display:block}.video-container .button-plugins div i svg{width:100%;height:100%;color:var(--icon-color)}.video-container .button-plugins .button-plugin-container div.dynamic-width div.non-interactive-button-content{flex-direction:row;justify-content:flex-start;align-items:center;display:flex}.video-container .button-plugins div.non-interactive span{text-align:center;display:block}.video-container .button-plugins div.no-icon span{line-height:var(--button-fixed-height);color:var(--main-fg-color);margin-top:0}.video-container .button-plugins div.dynamic-width span{color:var(--main-fg-color);margin-top:0;padding-left:3px;padding-right:3px}.video-container .button-plugin-side-area{color:var(--main-fg-color);height:40px;line-height:40px;display:inline}.video-layout-button{background-size:100% 100%;background-color:var(--main-bg-color-hover);border:none;border-radius:5px;padding:.5%;display:block;position:absolute;box-shadow:1px 1px 5px #000c}.video-layout-button:hover{background-color:var(--highlight-bg-color)}.video-layout-button:active{background-color:var(--highlight-bg-color-hover)}.video-player{box-shadow:2px 2px 4px #5a5a5acc}.preview-container{cursor:pointer;background-color:#e4e4e4;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.preview-container>.preview-image-container{width:100%;display:grid}.preview-container>.preview-image-container>.preview-image-landscape,.preview-container>.preview-image-container>.preview-image-portrait{width:100%}.video-container-message{box-sizing:border-box;pointer-events:none;z-index:10;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);align-items:center;width:100%;height:100%;display:grid;position:absolute;top:0;left:0;container:video-container-message/size}.video-container-message .container{box-sizing:border-box;justify-content:space-evenly;align-items:stretch;padding:2ch;display:flex}.video-container-message .container .message-content{background-color:var(--video-container-message-bkg);border-radius:var(--video-container-message-border-radius);text-align:center;padding:var(--video-container-message-padding);flex-direction:column;flex-grow:1;align-items:center;display:flex}.video-container-message .container .message-content .text{text-shadow:0px 0px 3px var(--video-container-message-bkg);color:var(--video-container-message-color);width:100%;margin:0;padding:0}.video-container-message .container .message-content i{width:var(--video-container-message-icon-width);display:inline-block}.video-container-message .container .message-content i svg{width:100%;height:100%;color:var(--video-container-message-color)}@container video-container-message (width<=700px){.video-container-message .container .message-content i{max-width:var(--video-container-message-icon-max-width-sm)}.video-container-message .container .message-content .text{font-size:var(--video-container-message-font-size-sm)}}@container video-container-message (width>=701px) and (width<=1300px){.video-container-message .container .message-content i{max-width:var(--video-container-message-icon-max-width-md)}.video-container-message .container .message-content .text{font-size:var(--video-container-message-font-size-md)}}@container video-container-message (width>=1301px){.video-container-message .container .message-content i{max-width:var(--video-container-message-icon-max-width-lg)}.video-container-message .container .message-content .text{font-size:var(--video-container-message-font-size-lg)}}@media (width<=500px) or (height<=500px){.pop-up-wrapper{z-index:10000;background:var(--mobile-popup-background);width:100%;height:100%;-webkit-backdrop-filter:var(--mobile-popup-backdrop-filter);backdrop-filter:var(--mobile-popup-backdrop-filter);position:absolute;top:0;left:0}.pop-up-wrapper,.pop-up-wrapper.right,.pop-up-wrapper.left{justify-content:center;align-items:center;display:flex}.pop-up-wrapper.hidden{display:none}.pop-up-wrapper button.pop-up-header-btn{width:var(--mobile-popup-header-btn-width);height:var(--mobile-popup-header-btn-height)}}
/*$vite$:1*/