.fr-player {
    position:relative;
    background:#000;
    overflow:hidden;
}


.fr-player video {
    width:100%;
    display:block;
}


.fr-controls {

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:10px;

    display:flex;
    flex-direction:column;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.8)
    );

    transition:.3s;

     opacity:1;
    transition:opacity .3s ease;
    pointer-events:auto;

}

.fr-controls.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.fr-player.hide-cursor {
    cursor:none;
}

.fr-center-play {

    position:absolute;

    top:50%;
    left:50%;

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

    width:70px;
    height:70px;

    border-radius:50%;

    border:none;

    background:rgba(0,0,0,.6);

    color:white;

    font-size:32px;

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    opacity:0;
    pointer-events: none;

    transition:opacity .3s ease;
    

}


.fr-center-play.show {

    opacity:1;
     pointer-events: auto;

}

.fr-bottom {

    display:flex;
    align-items:center;
    gap:8px;

}



.fr-progress-area {

    flex:1;

}



.fr-buffer {

    height:3px;
    background:#777;
    width:0%;

}



.fr-spinner {

    position:absolute;

    top:50%;
    left:50%;

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

    color:white;

    display:none;

}



.fr-player.fullscreen {

    width:100vw;
    height:100vh;

}


.fr-player.fullscreen video {

    height:100%;
    object-fit:contain;

}