/* WebVTT cues */
:: cue {
    color: #ccc;
}

::cue(v[voice='Test']) {
    color: #fff;
    background: #0095dd;
}

/* fullscreen */
html:-ms-fullscreen {
    width: 100%;
}

:root {
    --video-progress-bar: #FF934E;
    --video-text-color: #c0c0c0;
    --video-volume-bar-color: #c0c0c0;
    --video-progress-bar-bg: #6c757d;
}

:-webkit-full-screen {
    background-color: transparent;
}

video:-webkit-full-screen + .controls {
    background: #ccc; /* required for Chrome which doesn't heed the transparent value set above */
}

    video:-webkit-full-screen + .controls progress {
        margin-top: 0.5rem;
    }


figure {
    /*position: relative;
    max-width: 1024px;
    max-width: 64rem;
    width: 100%;
    height: 100%;*/
    /*	max-height:494px;
	max-height:30.875rem;*/
    /*margin: 20px auto;
    margin: 1.25rem auto;
    padding: 20px;
    padding: 1.051%;
    background-color: #666;*/
    margin: 0;
    padding: 0;
    /*background-color: #655B58;*/
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    /*border: solid 1px #655B58;*/
    position: relative;
}

figcaption {
    display: block;
    font-size: 12px;
    font-size: 0.75rem;
    color: #fff;
}

video {
    width: 100%;
}


/* hide controls on fullscreen with WebKit */
figure[data-fullscreen=true] video::-webkit-media-controls {
    display: none !important;
}

figure[data-fullscreen=true] {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    max-height: 100%;
}

    figure[data-fullscreen=true] video {
        height: auto;
    }

    figure[data-fullscreen=true] figcaption {
        display: none;
    }

    figure[data-fullscreen=true] .controls {
        position: absolute;
        bottom: 2%;
        width: 100%;
        z-index: 2147483647;
    }

        figure[data-fullscreen=true] .controls li {
            width: 5%;
        }

        figure[data-fullscreen=true] .controls .progress {
            width: 68%;
        }

.mediaControlsContainer {
    position: relative;
    padding: 0 6px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.slideContainer {
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: none;
    position: relative;
    height: 5px;
    background-color: silver;
    border-radius: 3px;
}

    .slideContainer .slideViewed {
        position: absolute;
        top: 0;
        left: 0;
        border: none;
        width: 100%;
        z-index: 100;
        height: 5px;
        background-color: var(--video-progress-bar-bg);
        border-radius: 3px;
    }

    .slideContainer .mediaSlice {
        height: 5px;
        background-color: var(--video-progress-bar);
        position: absolute;
        z-index: 101;
        border-radius: 3px;
    }

.mediaButtons {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    height: 32px;
    background-color: transparent;
    padding: 4px 0;
    clear: both;
}

    .mediaButtons div {
        position: relative;
        height: 24px;
        width: 24px;
        cursor: pointer;
    }

    .mediaButtons .mediaButtonMoveBegin {
        /*        
        top: 0;
        left: 0;
        */
        float: left;
        background: url('imgs/movebegin.svg') no-repeat;
        background-size: 18px 18px;
        background-position: 50% 50%;
    }

        .mediaButtons .mediaButtonMoveBegin:hover {
            background: url('imgs/movebegin.svg') no-repeat;
            background-size: 24px 24px;
            background-position: 50% 50%;
            /*transition: background-size 2s;*/
        }

    .mediaButtons .mediaButtonMoveBack {
        /*        
        top: 0;
        left: 0;
        */
        float: left;
        background: url('imgs/moveback.svg') no-repeat;
        background-size: 18px 18px;
        background-position: 50% 50%;
    }

        .mediaButtons .mediaButtonMoveBack:hover {
            background: url('imgs/moveback.svg') no-repeat;
            background-size: 24px 24px;
            background-position: 50% 50%;
        }

    .mediaButtons .mediaButtonMoveOn {
        /*        
        top: 0;
        left: 0;
        */
        float: left;
        background: url('imgs/moveon.svg') no-repeat;
        background-size: 18px 18px;
        background-position: 50% 50%;
    }

        .mediaButtons .mediaButtonMoveOn:hover {
            background: url('imgs/moveon.svg') no-repeat;
            background-size: 24px 24px;
            background-position: 50% 50%;
        }

    .mediaButtons .mediaButtonMoveEnd {
        /*        
        top: 0;
        left: 0;
        */
        float: left;
        background: url('imgs/moveend.svg') no-repeat;
        background-size: 18px 18px;
        background-position: 50% 50%;
    }

        .mediaButtons .mediaButtonMoveEnd:hover {
            background: url('imgs/moveend.svg') no-repeat;
            background-size: 24px 24px;
            background-position: 50% 50%;
        }

    .mediaButtons .mediaButtonPlay {
        /*        
        top: 0;
        left: 0;
        */
        float: left;
        background: url('imgs/play.svg') no-repeat;
        background-size: 24px 24px;
        background-position: 50% 50%;
    }

        .mediaButtons .mediaButtonPlay:hover {
            background: url('imgs/play.svg') no-repeat;
            background-size: 28px 28px;
            background-position: 50% 50%;
        }

        .mediaButtons .mediaButtonPlay.playing {
            /*            top: 0;
            left: 0;
*/
            /*float: right;*/
            background: url('imgs/pause.svg') no-repeat;
            background-size: 24px 24px;
            background-position: 50% 50%;
        }

            .mediaButtons .mediaButtonPlay.playing:hover {
                background: url('imgs/pause.svg') no-repeat;
                background-size: 28px 28px;
                background-position: 50% 50%;
            }

    .mediaButtons .mediaButtonFullScreen {
        /*top: 0;
        right: 0px;*/
        float: right;
        background: url('imgs/fullscreen.svg') no-repeat;
        background-size: 24px 24px;
        background-position: 50% 50%;
    }

        .mediaButtons .mediaButtonFullScreen:hover {
            background: url('imgs/fullscreen.svg') no-repeat;
            background-size: 28px 28px;
            background-position: 50% 50%;
        }

    .mediaButtons .mediaButtonAudioP {
        /*        top: 0;
        right: 25px;*/
        float: right;
        background: url('imgs/volumep.svg') no-repeat;
        background-size: 24px 24px;
        background-position: 50% 50%;
    }

        .mediaButtons .mediaButtonAudioP:hover {
            background: url('imgs/volumep.svg') no-repeat;
            background-size: 28px 28px;
            background-position: 50% 50%;
        }

    .mediaButtons .mediaButtonAudioL {
        /*top: 0;
        right: 45px;*/
        float: right;
        background: url('imgs/volumem.svg') no-repeat;
        background-size: 24px 24px;
        background-position: 50% 50%;
    }

        .mediaButtons .mediaButtonAudioL:hover {
            background: url('imgs/volumem.svg') no-repeat;
            background-size: 28px 28px;
            background-position: 50% 50%;
        }

    .mediaButtons .mediaAudioLevel {
        position: relative;
        float: right;
        width: 50px;
        height: 5px;
        border-radius: 3px;
        background-color: var(--video-volume-bar-color);
        background-image: url('imgs/volume.svg');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 0px 0px;
        margin-top: 9px;
        margin-right: 10px;
    }

    .mediaButtons .mediaTime {
        width: 100px;
        font-size: 1.2rem;
        color: var(--video-text-color);
        margin: 0 auto;
        text-align: center;
        vertical-align: middle;
        padding-top: 4px;
    }


::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    display: none !important;
}

.video-container {
    max-width: 800px;
    max-height: 600px;
    margin: 0 auto;
    padding: 2px;
}

figure .playOverlay {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 0%;
}

    figure .playOverlay div {
        background: url(imgs/play_media.svg) no-repeat;
        background-size: 50px 50px;
        background-position: 50% 50%;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        cursor: pointer;
    }

        figure .playOverlay div:hover {
            background: url(imgs/play_media.svg) no-repeat;
            background-size: 60px 60px;
            background-position: 50% 50%;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
figure .playOverlay.free {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 45%;
    left: 0%;
}