:root {
    --range-progress-color: #015eea;
    --range-thumb-color: #fff;
    --range-track-color: #707070;
    --ui-scale: 1;
}

.player {
    display: flex;
    flex-direction: column;
    position: relative;
}

.player video {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.player.audio .player-controls {
    align-items: center;
    display: flex;
    gap: calc(1rem * var(--ui-scale));
    height: calc(4.5rem * var(--ui-scale));
    padding: calc(1.25rem * var(--ui-scale));
}

.player.audio .player-controls-progress {
    flex-grow: 1;
}

.player.audio .player-controls-buttons-volume {

}

.player.touch-device .player-controls-buttons-volume {
    display: none;
}

.player.video {
    cursor: default;
    transition: cursor 0.3s;
}

.player.video .player-controls {
    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
    bottom: 0;
    left: 0;
    opacity: 1;
    pointer-events: auto;
    position: absolute;
    right: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.player.video .player-controls-buttons-volume-slider {
    opacity: 0;
    transition: all 0.2s ease;
    width: 0;
}

.player.video .player-controls-progress {
    padding: calc(1.25rem * var(--ui-scale)) 0;
}

.player.video .player-overlay {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease;
    width: 100%;
    z-index: 1;
}

.player.video .player-overlay-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='2 2 20 20'%3E%3Cpath fill='red' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm-1.306-6.154 4.72-2.787c.781-.462.781-1.656 0-2.118l-4.72-2.787C9.934 7.706 9 8.29 9 9.214v5.573c0 .923.934 1.507 1.694 1.059Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    height: calc(5rem * var(--ui-scale));
    transition: transform 0.3s ease-out;
    width: calc(5rem * var(--ui-scale));
}

.player.video .player-overlay-button:hover {
    opacity: 1;
    transform: scale(1.2);
}

.player.video.idle {
    cursor: none;
}

.player.video.idle .player-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.player.video.paused .player-overlay {
    opacity: 1;
    pointer-events: auto;
}

.player:fullscreen video {
    object-fit: contain;
}

.player-controls {
    background: #000;
    padding: calc(1rem * var(--ui-scale));
}

.player-controls-buttons {
    align-items: center;
    display: flex;
    gap: calc(1rem * var(--ui-scale));
}

.player-controls-buttons button {
    background-color: unset;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    height: calc(2rem * var(--ui-scale));
    transition: transform 0.3s ease-out;
    width: calc(2rem * var(--ui-scale));
}

.player-controls-buttons button:hover {
    transform: scale(1.2);
}

.player-controls-buttons button span {
    display: none;
}

.player-controls-buttons-fullscreen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='1.25 1.25 21.5 21.5'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M9.944 1.25H10a.75.75 0 0 1 0 1.5c-1.907 0-3.261.002-4.29.14-1.005.135-1.585.389-2.008.812-.423.423-.677 1.003-.812 2.009-.138 1.028-.14 2.382-.14 4.289a.75.75 0 0 1-1.5 0v-.056c0-1.838 0-3.294.153-4.433.158-1.172.49-2.121 1.238-2.87.749-.748 1.698-1.08 2.87-1.238 1.14-.153 2.595-.153 4.433-.153Zm8.345 1.64c-1.027-.138-2.382-.14-4.289-.14a.75.75 0 0 1 0-1.5h.056c1.838 0 3.294 0 4.433.153 1.172.158 2.121.49 2.87 1.238.748.749 1.08 1.698 1.238 2.87.153 1.14.153 2.595.153 4.433V10a.75.75 0 0 1-1.5 0c0-1.907-.002-3.261-.14-4.29-.135-1.005-.389-1.585-.812-2.008-.423-.423-1.003-.677-2.009-.812ZM2 13.25a.75.75 0 0 1 .75.75c0 1.907.002 3.262.14 4.29.135 1.005.389 1.585.812 2.008.423.423 1.003.677 2.009.812 1.028.138 2.382.14 4.289.14a.75.75 0 0 1 0 1.5h-.056c-1.838 0-3.294 0-4.433-.153-1.172-.158-2.121-.49-2.87-1.238-.748-.749-1.08-1.698-1.238-2.87-.153-1.14-.153-2.595-.153-4.433V14a.75.75 0 0 1 .75-.75Zm20 0a.75.75 0 0 1 .75.75v.056c0 1.838 0 3.294-.153 4.433-.158 1.172-.49 2.121-1.238 2.87-.749.748-1.698 1.08-2.87 1.238-1.14.153-2.595.153-4.433.153H14a.75.75 0 0 1 0-1.5c1.907 0 3.262-.002 4.29-.14 1.005-.135 1.585-.389 2.008-.812.423-.423.677-1.003.812-2.009.138-1.027.14-2.382.14-4.289a.75.75 0 0 1 .75-.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.player-controls-buttons-fullscreen.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='1.25 1.25 21.5 21.5'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M14 1.25a.75.75 0 0 1 .75.75c0 1.907.002 3.261.14 4.29.135 1.005.389 1.585.812 2.008.423.423 1.003.677 2.009.812 1.027.138 2.382.14 4.289.14a.75.75 0 0 1 0 1.5h-.056c-1.838 0-3.294 0-4.433-.153-1.172-.158-2.121-.49-2.87-1.238-.748-.749-1.08-1.698-1.238-2.87-.153-1.14-.153-2.595-.153-4.433V2a.75.75 0 0 1 .75-.75Zm-4 0a.75.75 0 0 1 .75.75v.056c0 1.838 0 3.294-.153 4.433-.158 1.172-.49 2.121-1.238 2.87-.749.748-1.698 1.08-2.87 1.238-1.14.153-2.595.153-4.433.153H2a.75.75 0 0 1 0-1.5c1.907 0 3.261-.002 4.29-.14 1.005-.135 1.585-.389 2.008-.812.423-.423.677-1.003.812-2.009.138-1.028.14-2.382.14-4.289a.75.75 0 0 1 .75-.75ZM1.25 14a.75.75 0 0 1 .75-.75h.056c1.838 0 3.294 0 4.433.153 1.172.158 2.121.49 2.87 1.238.748.749 1.08 1.698 1.238 2.87.153 1.14.153 2.595.153 4.433V22a.75.75 0 0 1-1.5 0c0-1.907-.002-3.262-.14-4.29-.135-1.005-.389-1.585-.812-2.008-.423-.423-1.003-.677-2.009-.812-1.028-.138-2.382-.14-4.289-.14a.75.75 0 0 1-.75-.75Zm20.694-.75H22a.75.75 0 0 1 0 1.5c-1.907 0-3.262.002-4.29.14-1.005.135-1.585.389-2.008.812-.423.423-.677 1.003-.812 2.009-.138 1.027-.14 2.382-.14 4.289a.75.75 0 0 1-1.5 0v-.056c0-1.838 0-3.294.153-4.433.158-1.172.49-2.121 1.238-2.87.749-.748 1.698-1.08 2.87-1.238 1.14-.153 2.595-.153 4.433-.153Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.player-controls-buttons-hd {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='2 2 20 20'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Zm4.25-4a.75.75 0 0 0-1.5 0v8a.75.75 0 0 0 1.5 0v-3.25h3.315V16a.75.75 0 0 0 1.5 0V8a.75.75 0 0 0-1.5 0v3.25H6.25V8Zm5.722.8c0-.98.903-1.55 1.713-1.55 2.937 0 5.565 2.002 5.565 4.75s-2.628 4.75-5.565 4.75c-.81 0-1.713-.57-1.713-1.55V8.8Zm1.5.022a.321.321 0 0 1 .213-.072c2.381 0 4.065 1.58 4.065 3.25s-1.684 3.25-4.065 3.25a.321.321 0 0 1-.213-.072V8.822Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.25;
}

.player-controls-buttons-hd.active {
    opacity: 1;
}

.player-controls-buttons-play {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='4 2 19 20'%3E%3Cpath fill='%23fff' d='M21.409 9.353a2.998 2.998 0 0 1 0 5.294L8.597 21.614C6.534 22.736 4 21.276 4 18.968V5.033c0-2.31 2.534-3.769 4.597-2.648l12.812 6.968Z'/%3E%3C/svg%3E");
}

.player-controls-buttons-play.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='2 2 20 20'%3E%3Cg fill='%23fff'%3E%3Cpath d='M2 6c0-1.886 0-2.828.586-3.414C3.172 2 4.114 2 6 2c1.886 0 2.828 0 3.414.586C10 3.172 10 4.114 10 6v12c0 1.886 0 2.828-.586 3.414C8.828 22 7.886 22 6 22c-1.886 0-2.828 0-3.414-.586C2 20.828 2 19.886 2 18V6ZM14 6c0-1.886 0-2.828.586-3.414C15.172 2 16.114 2 18 2c1.886 0 2.828 0 3.414.586C22 3.172 22 4.114 22 6v12c0 1.886 0 2.828-.586 3.414C20.828 22 19.886 22 18 22c-1.886 0-2.828 0-3.414-.586C14 20.828 14 19.886 14 18V6Z'/%3E%3C/g%3E%3C/svg%3E");
}

.player-controls-buttons-quality {
    margin-left: auto;
    position: relative;
}

.player-controls-buttons-quality-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='3 2 19 20'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.409 0-1.779.152a2.008 2.008 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.615 1.615 0 0 1-.796 1.353 1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.026 2.026 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453-.47.807-.704 1.21-.757 1.605-.07.526.074 1.058.4 1.479.148.192.357.353.68.555.477.297.783.803.783 1.361 0 .558-.306 1.064-.782 1.36-.324.203-.533.364-.682.556-.325.421-.469.953-.399 1.479.053.394.287.798.757 1.605.47.807.704 1.21 1.022 1.453.424.323.96.465 1.49.396.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353.015.38.051.64.145.863.204.49.596.88 1.09 1.083.37.152.84.152 1.779.152s1.409 0 1.779-.152a2.008 2.008 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308.53.07 1.066-.073 1.49-.396.318-.242.553-.646 1.022-1.453.47-.807.704-1.21.757-1.605a1.99 1.99 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555-.477-.297-.783-.803-.783-1.361 0-.558.306-1.064.782-1.36.324-.203.533-.364.682-.556a1.99 1.99 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605-.47-.807-.704-1.21-1.022-1.453a2.026 2.026 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008 1.615 1.615 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2.007 2.007 0 0 0-1.09-1.083ZM12.5 15c1.67 0 3.023-1.343 3.023-3S14.169 9 12.5 9c-1.67 0-3.023 1.343-3.023 3s1.354 3 3.023 3Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: unset;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    display: flex;
    height: calc(2rem * var(--ui-scale));
    width: calc(2rem * var(--ui-scale));
}

.player-controls-buttons-quality-menu {
    background: var(--range-progress-color);
    border-radius: calc(0.3125rem * var(--ui-scale));
    bottom: calc(100% + (1rem) * var(--ui-scale));
    display: none;
    flex-direction: column;
    gap: calc(0.25rem * var(--ui-scale));
    overflow: hidden;
    padding: calc(0.5rem * var(--ui-scale));
    position: absolute;
    left: -100%;
}

.player-controls-buttons-quality-menu.active {
    display: flex;
}

.player-controls-buttons-quality-menu-option {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    font-size: calc(1.25rem * var(--ui-scale));
    height: auto !important;
    padding: calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale));
    text-align: left;
    transition: background 0.3s ease;
    white-space: nowrap;
    width: auto !important;
}

.player-controls-buttons-quality-menu-option:hover {

}

.player-controls-buttons-quality-menu-option.active {
    color: #daa520;
}

.player-controls-buttons-time {
    font-family: "Quicksand", sans-serif;
    font-size: calc(1.5rem * var(--ui-scale));
    font-weight: 500;
}

.player-controls-buttons-volume {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: calc(0.75rem * var(--ui-scale));
    transition: gap 0.2s ease;
}

.player.video .player-controls-buttons-volume:hover .player-controls-buttons-volume-slider {
    opacity: 1;
    width: calc(6rem * var(--ui-scale));
}

.player-controls-buttons-volume-mute {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='2 4 20 16'%3E%3Cg fill='%23fff'%3E%3Cpath d='M2.003 11.716c.037-1.843.056-2.764.668-3.552.112-.144.276-.315.413-.431.752-.636 1.746-.636 3.733-.636.71 0 1.065 0 1.403-.092.07-.02.14-.042.209-.067.33-.121.627-.33 1.22-.746 2.338-1.645 3.508-2.467 4.489-2.11.188.069.37.168.533.29.848.635.913 2.115 1.042 5.073.048 1.096.08 2.034.08 2.555 0 .521-.032 1.46-.08 2.555-.13 2.958-.194 4.438-1.042 5.073-.163.122-.345.221-.533.29-.982.357-2.15-.465-4.49-2.11-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z'/%3E%3Cpath fill-rule='evenodd' d='M19.49 5.552a.66.66 0 0 1 .97.094l-.529.471.53-.47.002.002.003.004.007.009a2.572 2.572 0 0 1 .079.112c.047.071.111.173.186.305.149.264.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75-.187.52-.377.907-.526 1.172a4.655 4.655 0 0 1-.265.417l-.007.009-.003.003-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 0 1-.971.094.77.77 0 0 1-.09-1.035l.03-.041c.026-.04.07-.11.125-.207a6.28 6.28 0 0 0 .422-.943c.314-.871.644-2.253.644-4.222 0-1.97-.33-3.35-.644-4.222a6.28 6.28 0 0 0-.422-.942 3.152 3.152 0 0 0-.157-.253M17.757 8.416c.333-.197.753-.07.938.286l-.603.357.603-.357.001.002.002.003.003.007.01.018.024.053c.018.042.042.099.07.17.053.145.12.35.185.62.13.54.252 1.337.252 2.425 0 1.089-.122 1.886-.252 2.426-.065.27-.132.475-.186.619a3.04 3.04 0 0 1-.094.223l-.009.018-.003.007-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286-.33-.196-.45-.638-.272-.991l.004-.01.035-.085c.032-.086.08-.23.13-.438.1-.416.208-1.09.208-2.06 0-.971-.108-1.645-.208-2.06a3.757 3.757 0 0 0-.165-.524l-.004-.01c-.179-.354-.058-.795.272-.991Z' clip-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
}

.player-controls-buttons-volume-mute.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='1 2.25 21.5 19.5'%3E%3Cg fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M20.515 6.316a.75.75 0 0 1 .991.376c.468 1.035.994 2.768.994 5.308 0 2.192-.392 3.783-.8 4.844-.204.53-.41.925-.572 1.195a4.73 4.73 0 0 1-.289.425l-.007.01-.003.003-.002.002L20.25 18l.576.48a.75.75 0 0 1-1.156-.956l.003-.004.031-.041a3.27 3.27 0 0 0 .137-.212c.12-.199.288-.516.459-.961.342-.889.7-2.298.7-4.306 0-2.326-.48-3.849-.86-4.692a.75.75 0 0 1 .375-.992ZM18.414 9.266a.75.75 0 0 1 .887.582c.11.53.199 1.24.199 2.152 0 1.11-.132 1.923-.273 2.474-.071.275-.144.484-.203.631a2.947 2.947 0 0 1-.102.228l-.01.018-.003.007-.002.003v.002s-.001.001-.657-.363l.656.364a.75.75 0 0 1-1.317-.719l.005-.01c.007-.015.02-.043.038-.087a3.66 3.66 0 0 0 .141-.447c.11-.424.227-1.111.227-2.101 0-.813-.08-1.421-.168-1.848a.75.75 0 0 1 .582-.886Z' clip-rule='evenodd'/%3E%3Cpath d='M21.78 3.53a.75.75 0 0 0-1.06-1.06l-4.45 4.449a11.265 11.265 0 0 0-.193-1.39c-.172-.788-.477-1.473-1.116-1.923a3.066 3.066 0 0 0-.769-.39c-.818-.28-1.631-.057-2.457.345-.814.395-1.8 1.046-3.032 1.857l-.267.176c-.447.295-.602.394-.76.464-.171.076-.35.13-.535.16-.171.03-.354.032-.89.032h-.162c-1.217 0-2.062-.001-2.814.347A3.962 3.962 0 0 0 1.548 8.22c-.392.729-.438 1.491-.504 2.575l-.008.13C1.014 11.294 1 11.658 1 12c0 .342.014.706.036 1.074l.008.13c.066 1.084.112 1.846.504 2.575a3.962 3.962 0 0 0 1.727 1.624c.61.283 1.283.336 2.166.345L2.72 20.47a.75.75 0 1 0 1.06 1.06l18-18ZM16.5 12a.75.75 0 0 0-1.255-.554l-.071.074-6 6.274A.778.778 0 0 0 9.34 19c1.039.68 1.899 1.225 2.631 1.549.743.328 1.48.489 2.222.236.272-.093.534-.226.769-.391.706-.497 1.005-1.28 1.167-2.18.159-.884.213-2.056.281-3.516l.003-.058c.052-1.115.088-2.088.088-2.64Z'/%3E%3C/g%3E%3C/svg%3E");
}

.player-controls-buttons-volume-slider {
    appearance: none;
    background: linear-gradient(
            to right,
            var(--range-progress-color) 0%,
            var(--range-progress-color) var(--volume, 100%),
            var(--range-track-color) var(--volume, 100%),
            var(--range-track-color) 100%
    );
    border-radius: calc(3rem * var(--ui-scale));
    cursor: pointer;
    height: calc(0.3125rem * var(--ui-scale));
}

.player-controls-buttons-volume-slider::-webkit-slider-thumb {
    appearance: none;
    background: var(--range-thumb-color);
    border-radius: 50%;
    height: calc(1rem * var(--ui-scale));
    width: calc(1rem * var(--ui-scale));
}

.player-controls-buttons-volume-slider::-moz-range-progress {
    background: var(--range-progress-color);
    border-radius: calc(3rem * var(--ui-scale));
}

.player-controls-buttons-volume-slider::-moz-range-track {
    background: var(--range-track-color);
    border-radius: calc(3rem * var(--ui-scale));
    height: calc(0.3125rem * var(--ui-scale));
}

.player-controls-buttons-volume-slider::-moz-range-thumb {
    appearance: none;
    background: var(--range-thumb-color);
    border: none;
    border-radius: 50%;
    height: calc(1rem * var(--ui-scale));
    width: calc(1rem * var(--ui-scale));
}

.player-controls-progress {
    display: flex;
}

.player-controls-progress-bar {
    appearance: none;
    background: linear-gradient(
            to right,
            var(--range-progress-color) 0%,
            var(--range-progress-color) var(--progress, 0%),
            var(--range-track-color) var(--progress, 0%),
            var(--range-track-color) 100%
    );
    border-radius: calc(3rem * var(--ui-scale));
    cursor: pointer;
    height: calc(0.3125rem * var(--ui-scale));
    width: 100%;
}

.player-controls-progress-bar::-webkit-slider-thumb {
    appearance: none;
    background: var(--range-thumb-color);
    border-radius: 50%;
    height: calc(1rem * var(--ui-scale));
    width: calc(1rem * var(--ui-scale));
}

.player-controls-progress-bar::-moz-range-progress {
    background: var(--range-progress-color);
    border-radius: calc(3rem * var(--ui-scale));
}

.player-controls-progress-bar::-moz-range-track {
    background: var(--range-track-color);
    border-radius: calc(3rem * var(--ui-scale));
    height: calc(0.3125rem * var(--ui-scale));
}

.player-controls-progress-bar::-moz-range-thumb {
    appearance: none;
    background: var(--range-thumb-color);
    border: none;
    border-radius: 50%;
    height: calc(1rem * var(--ui-scale));
    width: calc(1rem * var(--ui-scale));
}

@media (max-width: 1000px) {
    :root {
        --ui-scale: 2.5;
    }

    .player:fullscreen {
        --ui-scale: 1;
    }
}