[data-ui="video-control"] {
    position: absolute;
    box-sizing: border-box;
    right: 0rem; top: calc(100% + 2rem); 
    width: 31.5rem; height: 7.4rem;
    z-index: -1;
    background-color:rgba(160,110,71,0.5);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-gold);
    transform-origin: top right;
    transition: top var(--transition-duration), opacity var(--transition-duration), transform var(--transition-duration), height var(--transition-duration), width var(--transition-duration);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2rem);
    overflow: hidden;

    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);

    will-change: transform, opacity;
    backface-visibility: hidden;
}

main.video-play [data-ui="video-control"] {
    
}

main:not(.auto-video) [data-ui="video-control"] {
    /* display: none; */
}


[data-ui="vr-app"]:not(.settings-open):not(.tracks-open).video-control [data-ui="video-control"] {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0rem);
}


[data-ui="video-control"] .stage {
    position: relative;
    width: 100%; height: 7rem;
    transition: opacity var(--transition-duration);
    /* display: grid; */
    /* grid-template-rows: 15rem minmax(0,1fr) 15rem; */
}

[data-ui="video-control"] [data-role="icon360"] {
    position: absolute;
    left: 4rem; top: 3.5rem; transform: translate(-50%,-50%);
    width: 6rem; height: 6rem;
    pointer-events: all;
    z-index: 100;
    cursor: pointer;
    transition: background-color var(--transition-duration), left calc(var(--transition-duration) * 1.0);
}

main.video-control-mini [data-ui="video-control"] [data-role="icon360"] { left: 50%; top: 3.5rem; transform: translate(-50%,-50%); }

[data-ui="video-control"] [data-role="icon360"] svg { width: 100%; height: 100%; }

[data-ui="video-control"] [data-role="icon360"]:hover { background-color: rgba(255,255,255,0.15); }

[data-ui="video-control"] .stage .descr {
    position: absolute;
    left: 9rem; top: 50%; 
    width: 15rem;
    pointer-events: none;

    font-family: sans-serif;
    font-size: 1.5rem;
    /* text-transform: uppercase; */
    color: white;

    transition: opacity var(--transition-duration), transform var(--transition-duration);
    opacity: 0;
    transform: translate(1rem,-50%);
}

[data-ui="video-control"].small .stage .descr {
    display: none;
}

main:not(.video-play) [data-ui="video-control"] .stage .descr {
    opacity: 1;
    transform: translate(0rem,-50%);
}

[data-ui="video-control"] .timeline {
    position: absolute;
    left: 50%; top: 50%;
    width: calc(100%); height: 0.4rem;
    background-color: rgba(255,255,255,0.4);
    pointer-events: none;

    transition: opacity var(--transition-duration), transform var(--transition-duration), width var(--transition-duration);
    opacity: 0;
    transform: translate(-50%,-50%) translateY(0rem) scaleX(0);
}

[data-ui="video-control"].small .timeline {
    display: none;
}


main.video-play [data-ui="video-control"] .timeline {
    opacity: 1;
    transform: translate(-50%,-50%) translateY(3.5rem) scaleX(1);
}

[data-ui="video-control"] .timeline .time {
    position: absolute;
    left: 0rem; top: 0; width: 0%; height: 100%;
    background-color: white;
    pointer-events: none;

    transition: opacity var(--transition-duration), transform var(--transition-duration);
}

[data-ui="video-control"] .stage my-btn {
    position: absolute;
    width: 4rem; height: 4rem;
    background-color: rgba(255,255,255,0.0);
    cursor: pointer;
    transition: opacity var(--transition-duration), transform var(--transition-duration), background-color var(--transition-duration);
    opacity: 0;
    transform: translate(50%,-50%) scale(0.5);
    font-family: sans-serif;
    font-size: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-ui="video-control"] .stage my-btn[data-role="close"] {
    position: absolute;
    right: 0rem; top: 0rem; width: 4rem; height: 4rem;
    transform: scale(1);
    border: 0;
    pointer-events: all;
    opacity: 0.6;
    display: none;
}

[data-ui="video-control"] .stage my-btn[data-role="close"]:hover { background-color: rgba(255,255,255,0.2); }


[data-ui="video-control"] .stage my-btn[data-role="play"] {
    position: absolute;
    right: 4.0rem; top: 50%; 
    border: 0;
}

[data-ui="video-control"] .stage my-btn {
    box-sizing: border-box;
    border: 0.1rem solid var(--color-cream-opaque);
}

[data-ui="video-control"] .stage my-btn.active,
[data-ui="video-control"] .stage my-btn:hover {
    background-color: rgba(255,255,255,0.15);
}

[data-ui="video-control"].btns .stage my-btn[data-role="r4k"] { left: calc(50% - 8rem); top: 50%; border-right-width: 0; }
[data-ui="video-control"].btns .stage my-btn[data-role="r6k"] { left: calc(50% - 4rem); top: 50%; }
[data-ui="video-control"].btns .stage my-btn[data-role="r8k"] { left: calc(50% + 0rem); top: 50%; border-left-width: 0; }




main:not(.video-play) [data-ui="video-control"].btns .stage my-btn[data-role="play"],
main.video-play [data-ui="video-control"].btns .stage my-btn[data-role="r4k"],
main.video-play [data-ui="video-control"].btns .stage my-btn[data-role="r6k"],
main.video-play [data-ui="video-control"].btns .stage my-btn[data-role="r8k"] {
    opacity: 1;
    transform: translate(50%,-50%) scale(1);
    pointer-events: all;
}

/* [data-ui="video-control"] .stage my-btn[data-role="pause"] {
    position: absolute;
    right: 4rem; top: 50%; width: 4rem; height: 4rem;
    background-color: rgba(255,255,255,0.0);
    pointer-events: none;
    cursor: pointer;

    transition: opacity var(--transition-duration), transform var(--transition-duration), background-color var(--transition-duration);
    opacity: 0;
    transform: translate(50%,-50%) scale(0.5);
}

[data-ui="video-control"] .stage my-btn[data-role="pause"]:hover {
    background-color: rgba(255,255,255,0.15);
}

[data-ui="video-control"].btns:not(.play) .stage my-btn[data-role="pause"] {
    opacity: 1;
    transform: translate(50%,-50%) scale(1);
    pointer-events: all;
} */

[data-ui="video-control"] .stage my-btn[data-role="stop"] {
    position: absolute;
    right: 4.0rem; top: 50%; width: 4rem; height: 4rem;
    background-color: rgba(255,255,255,0.0);
    border: 0;
    pointer-events: none;
    cursor: pointer;

    transition: opacity var(--transition-duration), transform var(--transition-duration), background-color var(--transition-duration);
    opacity: 0;
    transform: translate(50%,-50%) scale(0.5);
}

[data-ui="video-control"] .stage my-btn[data-role="stop"]:hover {
    background-color: rgba(255,255,255,0.15);
}

main.video-play [data-ui="video-control"].btns .stage my-btn[data-role="stop"] {
    opacity: 1;
    transform: translate(50%,-50%) scale(1);
    pointer-events: all;
}


@media screen and (max-width: 500px) {
 
    [data-ui="video-control"].btns .stage my-btn[data-role="r4k"] { display: none; }
    [data-ui="video-control"].btns .stage my-btn[data-role="r6k"] { display: none; }
    [data-ui="video-control"].btns .stage my-btn[data-role="r8k"] { display: none; }

    [data-ui="video-control"] {
        right: 0rem; top: calc(100% + 3rem); 
        width: calc(100vw - 2rem); 
    }

    main.video-play [data-ui="video-control"] .timeline {
        width: calc(100% - 20rem);
        transform: translate(-50%,-50%) translateY(0rem) scaleX(1);
    }

    [data-ui="vr-app"].bottom-nav-menu-open [data-ui="video-control"] {
        pointer-events: none!important;
        opacity: 0!important;
        /* transform: translateY(0rem); */
    }
}

main.video-control-mini [data-ui="video-control"] .timeline {
    width: calc(100% - 0rem);
    transform: translate(-50%,-50%) translateY(3.2rem) scaleX(1);
}


main.video-control-mini [data-ui="video-control"] {
    top: calc(100% + 1rem); width: 8.15rem;
    /* transform: translateY(-2rem) scale(0.75)!important; */
}

main.video-play.video-control-mini [data-ui="video-control"] {
    width: 10.15rem;
    /* transform: translateY(-2rem) scale(0.75)!important; */
}

main.video-play.video-control-mini [data-ui="video-control"] {
    height: 7rem;
    /* transform: translateY(-2rem) scale(0.75)!important; */
}

main.video-control-mini [data-ui="video-control"] .stage {
    opacity: 0!important;
    pointer-events: none!important;
}

main.video-control-mini [data-ui="video-control"] .stage * {
    pointer-events: none!important;
}