/* controls */

.video-container{
    max-height: 90vh;/*fixed by terry was 60vh*/
    max-width: 100%;
    background: var(--iq-bg1); /*created by terry*/
}
.video-container{
    position: relative;
}

body[locked="1"] .video-controls{
    visibility: hidden!important;
}

.video-container *{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.video-controls, .video-controls > * {
    padding:0;
    margin:0;
}
.video-controls {
    overflow:hidden;
    background:transparent;
    width: calc(100% - 3vmax);
    height: 100%;
    position:absolute;
    bottom: 0;
    margin: 1.5vmax;
    overflow: initial;
}

.video-controls .buttons{
    position:absolute;
    width: 100%;
    height: 2vmax;/* fixed by terry was 3vmax*/
    bottom: 1vmax;/* fixed by terry was 3vmax*/
}

.video-controls .center{
    position:absolute;
    width: auto;
    height: 6vmax;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.video-controls .center-control{
    height: 8vmax;
    width: 8vmax;
    cursor: pointer;
    position: relative;
    border-radius: 4.5vmax;
}

.video-controls .center-control:hover{
    background-color: #5557;
    transition: 0.4s;
}

.video-controls .center-control img{
    height: 7.5vmax;
    aspect-ratio:1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.video-controls .buttons *{
    position: relative;
    display: inline-block;
}

.video-controls .buttons > div{
    height: auto;
    position: absolute;
    display: inline-block;
    top:50%;
    transform: translateY(-50%);
}

.video-controls .buttons > div.right-area,
.video-controls .buttons > div.left-area
{
    height: 3vmax;
}

.video-controls .buttons > div.right-area{
    right: 0;
}
.video-controls .buttons > div.time{
    left: 4vmax;
    font-size: 1.3vmax;
}
.video-controls .control{
    height: 3vmax;
    width: 3vmax;
    cursor: pointer;
    position: relative;
    border-radius: 1.5vmax;
}

.video-controls .control:hover{
    background-color: #5557;
    transition: 0.4s;
}
.video-controls .text{
    height: 1.4vmax;
}

.video-controls .control img{
    height: 1.4vmax;
    aspect-ratio:1;
    position: absolute;
    right: 1.5vmax;
    top: 50%;
    transform: translate(50%, -50%);
}

.video-controls .control:not(:last-child){
    margin-right: 0.3vmax;/*fixed by terry, was 2vmax*/
}

.video-container[playing="1"]:not([mouse_active="1"]) .video-controls
{
    opacity: 0;
    transition: 0.5s;
}

.video-container .video-controls .ajustable:hover{
    width: 9vmax;
    transition: 1s;
}

.video-container[mouse_active="1"] .video-controls,
.video-container[playing="0"] .video-controls
{
    opacity: 1;
    transition: 0.5s;
}

.video-container:not([repeat="1"]) .video-controls .repeat{
    opacity: 0.5;
}

body:not([cast="1"]) .control.cast_connected,
body:not([cast_connected="1"]) .control.cast_connected,
body:not([cast_connected="1"]) .onlyWhenCasting,
body[cast_connected="1"] .control.cast,
.video-container:not([muted="1"]) .video-controls .sound .mute,
.video-container[muted="1"] .video-controls .sound .unmute,
.video-container:not([zoom="1"]) .video-controls .zoomout,
.video-container[zoom="1"] .video-controls .zoomin,
.video-container:not([playing="1"]) .video-controls .pause,
.video-container[playing="1"] .video-controls .play{    
    display: none;
}

body:not([cast="1"]) .control.cast,
body[cast_connected="1"] .control.speed-down,
body[cast_connected="1"] .control.speed-up{
    opacity: 0.5;
    pointer-events: none;
}

.video-progressbar, .video-progress{
    background-color: gray;
    height: 4px;
    width: 100%;
    bottom:0;
    position: absolute!important;
    cursor: pointer;
}

.video-progress{
    background-color: var(--iq-primary);
}

.video-progressbar .video-progress .bolt,
.video-progressbar .video-progress{
    pointer-events: none;
}

.video-progressbar .video-progress .bolt{
    width: 14px;
    aspect-ratio: 1;
    background-color: var(--iq-primary);
    border-radius: 50%;
    right:0;
    top: 50%;
    transform: translate(50%, -50%);
    position: absolute;
}

.video-progressbar:not(:hover) .video-progress .bolt{
    opacity: 0;
    transition: 0.5s;
}

.ajustable .slider{
    position: absolute;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    left:1vmax;
    right: 3vmax;
}

.casting{
    position: absolute;
    top:0; left:0;bottom:0;right:0;
    background-color: #0007;
    text-align: center;
}

.casting > .text{
    position: absolute;
    display: inline-block;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 5vw;
}