.video-player {
    position: absolute;

    top: 50%;
    left: 50%;

    min-width: 100%;
    min-height: 100%;

    width: auto;
    height: auto;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);

    object-fit: contain;

    background-color: black;
}

video {
    height: 100% !important;
    width: 100% !important;
    
}

.video-timeline {
    position: absolute;
    width: 90%;
    height: 20px;
    z-index: 10;

    bottom: 7%;
    left: calc(50% + 10px);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.video-timeline-background {

    position: absolute;
    width: 100%;
    height: 2px;

    left: 0px;
    top: 50%;

    background-color: rgba(240, 248, 255, 0.432);
}

.video-timeline-fill {
    position: relative;
    width: 50%;
    height: 2px;

    left: 0px;
    top: 0px;

    background-color: red;
}

.video-circle {
    position: absolute;
    left: 0%;
    top: 50%;

    width: 20px;
    height: 20px;

    background-color: white;

    transform: translate(-50%, -40%);
    -webkit-transform: translate(-50%, -40%);
    border-radius: 50%;

    opacity: 0;
}

.video-time {
    position: absolute;
    left: 50%;
    top: -130%;

    font-size: 20px;

    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    letter-spacing: 2px;
}


.volume-icon{
    position: absolute;
    width: 30px;
    height: 30px;

    right: 40px;
    top: 30px;

}

.mute{
    
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;

    background-image: url("../images/mute.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    pointer-events: none;
}

.unmute{
    
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;

    display: none;

    background-image: url("../images/volume-up-interface-symbol.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    
    pointer-events: none;
}

.volume-icon-animation-container{
    
    position: absolute;
    width: 25px;
    height: 15px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    opacity: 0.5;

    pointer-events: none;
}

.volume-bar{
    position: relative;
    height: 100%;
    background-color: white;
    width: 10%;
    display: inline-flex;
    height: 100%;
    bottom: -50%;
    pointer-events: none;
}

.bar-animation-1{
    animation-name: bar-animation;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.bar-animation-2{
    animation-name: bar-animation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.bar-animation-3{
    animation-name: bar-animation;
    animation-duration: 0.75s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.bar-animation-4{
    animation-name: bar-animation;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes bar-animation {
    0%{
        transform: scaleY(0) translateY(-50%);
        -webkit-transform: scaleY(0) translateY(-50%);
    }
    40%{
        transform: scaleY(1) translateY(-50%);
        -webkit-transform: scaleY(1) translateY(-50%);
    }
    60%{
        transform: scaleY(1) translateY(-50%);
        -webkit-transform: scaleY(1) translateY(-50%);
    }
    100%{
        transform: scaleY(0) translateY(-50%);
        -webkit-transform: scaleY(0) translateY(-50%);
    }
}

.play-button{
    position: absolute;
    left: 50%;
    top: 50%;

    width: 100px;
    height: 100px;

    transform: translate(-50%, -50%);

    background-image: url("../images/play.png");
    background-repeat: no-repeat;
    background-position: center;

    pointer-events: none;
}

.buffer-animation{
    position: absolute;
    left: 50%;
    top: 50%;

    width: 300px;
    height: 300px;

    transform: translate(-50%, -50%);

    background-image: url("../images/loading.png");
    background-repeat: no-repeat;
    background-position: center;

    pointer-events: none;
    
    animation-name: rotating-animation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    opacity: 0.5;

    z-index: 200;
}

@keyframes rotating-animation {
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(359deg);
    }
}