#videoLoading {
        position: fixed;
        top: 0px;
        left: 0px;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        width: 100dvw;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        gap: 20px;
        color: #fff;
        background-color: #000;
        opacity: 0;
        transition: opacity 2000ms;
        z-index: 5;
    }

    #videoLoading.hidden {
        display: none;
    }

    #videoLoading.show {
        opacity: 1;
    }

    #videoLoadingAnimation {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 20px
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .videoLoadingReel {
        animation: spin 2s linear infinite;
    }

    #videoLoadingReelLeft {
        transform: translateX(50px);
    }

    #videoLoadingReelRight {
        transform: translateX(-50px);
    }

    #videoLoadingFilmContainer {
        width: 90px;
        height: 1px;
        margin-top: 5px;
        background-color: #997d36;
    }

    #videoLoadingFilm {
        height: 1px;
        width: 100%;
        overflow: hidden;
        background: repeating-linear-gradient(to right,
                #b1a074 0px,
                #b1a074 30px,
                transparent 30px,
                transparent 33px);
        background-size: 66px 100%;
        animation: moveDashes 1s linear infinite;
    }

    @keyframes moveDashes {
        from {
            background-position: 0 0;
        }

        to {
            background-position: 66px 0;
        }
    }

    #failsafeExitPlayBtn {
        position: absolute;
        top: 20px;
        left: 20px;
        background-color: #000;
        border: none;
        display: none;
    }

    #failsafePlayBtn {
        background-color: #000;
        border: none;
        display: none;
    }

    #failsafePlayBtn.show,
    #failsafeExitPlayBtn.show {
        display: unset;
    }

    #failsafePlayBtnHint {
        color: #fff;
        margin-bottom: 8px;
        font-size: 16px;
    }

    .videoSelectBtn {
        height: 50px;
        width: 200px;
        border: none;
        cursor: pointer;
        color: #000;
    }

    .videoSelectBtn:hover {
        color: #444;
    }

    #loadBtn1 {
        background-color: lightskyblue;
    }

    #loadBtn2 {
        background-color: lightseagreen;
    }

    /* #region | video render */

    #playbackContainer {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0 auto;
        height: 100dvh;
        width: 100dvw;
        overflow: hidden;
        z-index: 5;
    }

    #playbackContainer.hidden {
        display: none;
    }


    body[data-webview="1"][data-device="phone"][data-os="ios"][data-orientation="portrait"] #videoControlsContainerTop {
        top: 50px;
    }

    body[data-webview="1"][data-device="phone"][data-os="ios"][data-orientation="portrait"] #videoControlsContainerBottom {
        bottom: 54px;
    }

    body[data-webview="1"][data-device="tablet"][data-os="ios"] #videoControlsContainerTop {
        padding-top: 16px !important;
        min-height: 80px !important;
    }

    body[data-webview="1"][data-device="tablet"][data-os="ios"] #videoControlsContainerBottom {
        padding-bottom: 10px !important;
    }

    body[data-webview="1"][data-device="tablet"][data-os="ios"][data-orientation="portrait"] #videoControlsContainerBottom {
        transform: translateY(-8px) !important;
    }

    #videoContainer {
        position: relative;
        backdrop-filter: blur(0px);
        height: 100dvh;
        width: 100dvw;
        z-index: 2;
    }

    #video {
        width: 100%;
        height: 100%;
        background: #000;
        transition: opacity 3000ms;
    }

    #video.hidden {
        display: none;
    }

    .resumeBtn {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0px;
        background-color: transparent;
        border: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        max-width: 120px;
        max-height: 120px;
        margin: auto;
        z-index: 3
    }

    .resumeBtn.hidden {
        z-index: 1
    }

    /* .resumeBtn.casting {
        display: none;
    } */


    .resumeBtnImage {
        opacity: 0;
        transition: opacity 1000ms;
    }

    .resumeBtn:not(.hidden)>.resumeBtnImage {
        opacity: 1;
    }

    .resumeBtn:not(.hidden)>.resumeBtnImage,
    .resumeBtn.loading>.resumeBtnImage {
        opacity: 1;
    }

    @media screen and (max-height: 500px) {
        .resumeBtn {
            bottom: 120px;
        }
    }

    #resumePlayBtnImage {
        cursor: pointer;
    }

    #skipBack10Btn {
        max-width: 80px;
        max-height: 80px;
        transform: translateX(-120px);
        cursor: pointer;
    }

    #skipForward10Btn {
        max-width: 80px;
        max-height: 80px;
        transform: translateX(120px);
        cursor: pointer;
    }

    /* #endregion | video render */

    /* #region | video playback controls */

    #videoControlsContainerTop {
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 70px;
        overflow: hidden;
        opacity: 0;
        transition: opacity 1000ms;
        background-color: rgba(80, 80, 80, .525);
    }

    #videoControlsTopLeft,
    #videoControlsTopCenter,
    #videoControlsTopRight {
        transform: translateY(-70px);
        transition: transform 1000ms;
    }

    #videoControlsContainerBottom.paused,
    #videoControlsContainerTop.paused {
        opacity: 1;
    }

    #videoControlsContainerBottom.hidden,
    #videoControlsContainerTop.hidden {
        display: none;
    }

    #videoControlsContainerTop.paused>#videoControlsTopLeft,
    #videoControlsContainerTop.paused>#videoControlsTopCenter,
    #videoControlsContainerTop.paused>#videoControlsTopRight {
        transform: none;
    }

    #videoControlsTopLeft {
        padding-top: 12px;
    }

    #exitPlayBtn {
        min-height: 56px;
        margin-top: -5px;
    }

    #exitPlayBtn.indent {
        margin-left: 150px;
    }

    #exitPlayBtn.hide {
        opacity: 0;
    }

    #videoDetails {
        display: flex;
        flex-direction: column;
        color: #fff;
        padding-right: 10px;
        justify-content: center;
        gap: 5px;
    }

    #videoControlsContainerBottom {
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: fit-content;
        overflow: hidden;
        opacity: 0;
    }

    #positionThumbnails {
        overflow-x: auto;
        overflow-y: hidden;
        height: 100px;
        position: relative;
        transition: opacity 3000ms;
        cursor: pointer;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        display: none;
        margin-bottom: 20px;
    }

    #videoControlsContainerBottom.paused #positionThumbnails {
        display: flex;
    }

    .os-scrollbar {
        opacity: 0;
        transition: opacity 2000ms;
    }

    #positionThumbnails.show .os-scrollbar {
        opacity: 1;
    }

    #positionThumbnailsList {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 6px;
        opacity: 0;
        transform: translateY(110px);
        transition: all 1000ms;
    }

    #positionThumbnails.show #positionThumbnailsList {
        opacity: 1;
        transform: none;
    }

    .positionThumbnailImageContainer {
        min-width: 120px;
        height: 100%;
        position: relative;
    }

    .positionThumbnailImage {
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .positionThumbnailTime {
        display: inline-block;
        position: absolute;
        bottom: 1px;
        right: 2px;
        font-size: 10px;
        color: #fff;
        font-family: Barlow;
    }

    #playPosition {
        height: 28px;
        width: 100%;
        position: relative;
        overflow: hidden;
        background-color: rgba(266, 255, 255, 0.1);
        cursor: pointer;
    }

    #videoControlsContainerBottom.paused>#videoControlsBottom,
    #videoControlsContainerBottom.floated>#videoControlsBottom {
        opacity: 1;
        background-color: rgba(0, 0, 0, .75);
    }

    #videoControlsBottom {
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        transition: transform 1000ms, opacity 200ms;
    }

    #videoControlsBottom.hidden {
        opacity: 0;
        transform: translateY(50px);
    }

    #videoControlsContainerBottom.floated>#videoControlsBottom {
        opacity: 1;
        transform: translateY(0px);
    }

    #playPosition {
        border: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    #playPositionIndicator {
        height: 100%;
        width: 100%;
        position: relative;
        background-color: #f74198;
        background-color: #d3b97a;
        right: 100%;
        transition: right 100ms;
        border: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    video::cue {
        font-size: 18px;
        color: rgb(253, 253, 225);
        background-color: rgba(0, 0, 0, 0.7);
        padding: 4px;
        vertical-align: super;
    }

    #videoControlBtns {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 50px;
        overflow: hidden;
        background-color: rgba(80, 80, 80, .45);
    }

    #videoControlsTopLeft,
    #videoControlsTopRight,
    #videoControlsBottomLeft,
    #videoControlsBottomRight {
        flex: 0 0 auto
    }

    #videoControlsTopCenter,
    #videoControlsBottomCenter {
        flex: 1 1;
    }

    body[data-webview="1"][data-device="phone"][data-os="ios"][data-orientation="landscape"] #videoControlsBottomLeft {
        padding-left: 12px;
    }

    body[data-webview="1"][data-device="phone"][data-os="ios"][data-orientation="landscape"] #videoControlsBottomRight {
        padding-right: 12px;
    }

    #PlayDisplay {
        position: absolute;
        color: #fcfcfa;
        font-size: 12px;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        padding-top: 18px;
    }

    .videoControlContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #castOnBtn,
    #castOffBtn {
        max-width: 50px;
    }

    #captionsOnBtn,
    #captionsOffBtn {
        padding-top: 6px;
    }

    #fullscreenOnBtn.isTouch,
    #fullscreenOffBtn.isTouch {
        display: none;
    }

    #muteBtn.casting,
    #unmuteBtn.casting {
        display: none !important;
    }

    .btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0px 12px 0px 12px;
        cursor: pointer;
        max-height: 42px;
        margin-top: 3px;
        color: #fcfcfa;
        font-size: 17px;
        background-color: transparent;
        border: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .btn:disabled {
        background: #666;
        cursor: not-allowed;
    }

    .btn.hidden {
        display: none;
    }

    .btn:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .btn:active {
        background-color: rgba(255, 255, 255, 0.25);
    }

    .btn>svg.hidden {
        display: none;
    }

    .waitingForPlayStart {
        opacity: 0 !important;
    }

    .transparent {
        opacity: 0 !important;
        max-height: 0px !important;
        max-height: 0px !important;
        overflow: hidden !important;
    }

    /* #endregion | video playback controls */

    /* #region | Overlay scrollbars */

    .video-theme {
        --os-handle-bg: rgba(212, 184, 90, 0.55) !important;
        --os-handle-bg-hover: rgba(211, 196, 151, 0.65) !important;
        --os-handle-bg-active: rgba(206, 194, 154, 0.7) !important;
        --os-size: 8px;
        --os-padding-perpendicular: 0px;
        --os-padding-axis: 0px;
        --os-track-border-radius: 10px;
        --os-handle-interactive-area-offset: 0px;
        --os-handle-border-radius: 10px;
    }

    .os-scrollbar-track:hover {
        background: rgba(212, 184, 90, 0.2);
    }

    /* #endregion | Overlay scrollbars */