/*
Lets try to overwrite the native videojs style with a custom ones
*/
/**/


.timms-player-container {
    position: relative;
    margin: 0 3em 0 3em; 
    background-color: white;
}

.vjs-labw-style.video-js {
    color: rgb(255, 145, 0);
    width: 100%;
    height: auto;
    
}

/*
.video-js.vjs-1-1:not(.vjs-audio-only-mode), 
.video-js.vjs-16-9:not(.vjs-audio-only-mode), 
.video-js.vjs-4-3:not(.vjs-audio-only-mode), 
.video-js.vjs-9-16:not(.vjs-audio-only-mode), 
.video-js.vjs-fluid:not(.vjs-audio-only-mode){
    height: 35em;
}
*/

/*Play button: using top and left as well as this margin values put it in the center
changing colors */
.vjs-labw-style .vjs-big-play-button {
    border-color: rgb(255, 106, 47);
    top: 50%;
    left: 50%;
    margin-top: -.81666em;
    margin-left: -1.5em;

}
/*ToDo before and after, .vjs-poster*/

/*Customize various "bars" like volume, seek slider and so on*/

.vjs-labw-style .vjs-volume-level,
.vjs-labw-style .vjs-play-progress,
.vjs-labw-style .vjs-slider-bar {
    background: #ffd000;
}

/*Controlbar */
/* ..sorry for the acid color... 
     it's just easier to determine if I the right element that way */
/*.vjs-labw-style .vjs-control-bar {
    background-color: blueviolet;
}
*/
/*temporary description style*/
.vid-description {
    margin: 1em 0 4em 0;
    color: rgb(64,64,64);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0.7em 0.7em 1em 0.7em;
    /*background-color: #ff5c33;*/
}

.player-ui-container {
    margin: 0 3em 0 3em; 
    background-color: white;
    display: flex;
}

.vjs-playlist {
    width: 30%;
}

.vjs-playlist-thumbnail {
    width: 100px;
    height: 100px;
}