.player {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    /*background: url("../img/bg.jpg") center no-repeat;*/
    /*background-color: #FFFFFF;*/
    background-size: cover;
}
.player .left {
    width: 25%;
    height: 100%;
    overflow: auto;
    /*background-color: rgba(0,0,0, 0.7);*/
    /*color: #FFFFFF;*/
    padding: 10px;
}

.player .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    /*background-color: rgba(0,0,0, 0.7);*/
    padding-top: 30px;
}

#videoPlayer {
    width: 90%;
    aspect-ratio: 16 / 9;
    height: auto;
}
#playlist {
    list-style-type: none;
    padding: 0;
    overflow: auto;
    padding-bottom: 50px;
    font-size: 20px;
}
#playlist li {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #4a4a4a;
    /*color: #eeeeee;*/
}
#playlist li:hover {
    background-color: #002c9d;
    color: #FFFFFF;
}
#playlist li.active {
    background: #002c9d;
    color: #FFFFFF;
    border-left: 3px solid #870000;
    font-weight: bold;
}

/* Custom styles for the video controls */
/*video::-webkit-media-controls-timeline {*/
/*    height: 10px;*/
/*    background-color: #870000;*/
/*}*/

@media only screen and (max-width :800px) {
    .player { flex-direction: column; }
    .player .left, .player .right { padding: 10px; }
    .player .left { width: 100%; height: 100%; order: 2; padding-top: 0; }
    .player .right { height: auto; order: 1 }

    #videoPlayer { width: 100% }
    #playlist { font-size: 16px; }
}