.vplayer_body {

}

.vplayer_body #player_video_wrapper {
    position: absolute;
    z-index: 0;
    width:100%;
    height:100%;

}

#vplayer_controlls_overlay {
    position: absolute;
    display: flex;

    flex-direction: column;
    justify-content: flex-end;
   /* //  margin-bottom: auto;
    //  margin-top: auto;
    //  bottom: 0;*/

    border-width: 5px;
    border-color: black;
    border-radius: 10px;
   /* //  background-color: #20208040;*/
    height:100%;
    width:100%;

    opacity: 1;
    transition: opacity 0.3s;

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#vplayer_controlls_overlay.hide {
    opacity: 0;
    transition: opacity 0.7s;
    transform: translateY(50vh);

    -webkit-transition: all 0.7s linear;
    -moz-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    -ms-transition: all 0.7s linear;
    transition: all 0.7s linear;
}



#epg_times{
    display:flex;
    flex-direction: row;
}
#stream_slidetime {
    flex:1;
    font-size: calc((2.2vh + 2.2vw)/2);
    text-align: center;
    color:yellow;
}

#stream_currenttime {
    font-size: calc((2.2vh + 2.2vw)/2);
}

#stream_duration {
    font-size: calc((2.2vh + 2.2vw)/2);
}

#controll_icons_container {
    display:flex;
    align-items: center;
    align-content: center;
}

#controll_icons_left{
    flex:0.2;
    text-align: left;
    /* background-color: red;*/
}

#controll_icons_center {
    flex:1;
    align-items: center;
    text-align: center;
    /* background-color: red;*/
}

#controll_icons_right {
    flex:0.2;
    text-align: right;
    /* background-color: green;*/
    /* align-items: end;*/
}

#vplayer_controlls {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    width:100%;
    height:fit-content;

    background-color: #30303075;
    /* border: 0.2vh solid gray;*/
    border-top: 0.2vh solid gray;
    border-radius:  2vh 2vh 0vh 0vh;
    padding: 2vh;
    box-sizing: border-box;
    /*vertical-align: bottom;*/
    /*height:fit-content;*/
    gap: 3px;



}
#controll_icons{
    display: flex;
    flex-direction: row;

    /* background-color: #90909090;*/
    align-self: center;

}

#stream_title {
    font-size: calc((3.0vh + 3.0vw)/2);
    color:white;
    text-shadow: 3px 2px #000000FF;
    padding-left: 2.5vw;


}

#stream_subtitle {
    font-size: 3.8vh;
    color:#CCCCCCFF;

    padding-left: 2.5vw;
    text-shadow: 3px 2px #000000FF;
}

.vplayer_button {
    border-radius: 0.5vh;
    height: calc((8vh + 8vw) /2);

    background-color: var(--selector_normal_fill);
    border: solid 0.33vh var(--selector_normal_outline);
    border-radius: var(--button_border_radius);
}

#timeline_div {
    width:100vw;
    height: 100px;
}

#timeline {
    width:100%;
    height: 100px;

}

#vplayer_back {
    opacity: 0.75;
    transform: scale(0.70, 0.70);
    -ms-transform: scale(0.70, 0.70);
    -webkit-transform: scale(0.70, 0.70);
}


#vplayer_playpause {
    opacity: 0.85;
    transform: scale(0.90, 0.90);
    -ms-transform: scale(0.90, 0.90);
    -webkit-transform: scale(0.90, 0.90);
}

#vplayer_rewind {
    opacity: 0.75;
    transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    -webkit-transform: scale(0.75, 0.75);

}
#vplayer_fastforward {
    opacity: 0.75;
    transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    -webkit-transform: scale(0.75, 0.75);
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 25rem;
}

#timeline {
    border-radius: 1vh;
    height: 2.0vh;
}
/*input[type="range"] can be replaced by class or id
https://stackblitz.com/edit/js-rxng2u?file=index.html
https://range-input-css.netlify.app/
*/
/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track  {
    background-color: darkorange;
    border-radius: 0.5vh;
    height:1.0vh; /* if + 0.2 */
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -1.6vh; /* Centers thumb on the track, if +0.2 add minus 0.2 here */
    background-color: yellow;
    border-radius: 5vh;
    height: 4.0vh;
    width: 4.0vh;

    border: 5px;
    border-color: black;
}

input[type="range"]:focus::-webkit-slider-thumb {
    outline: 3px solid #f34444;
    outline-offset: 0.125rem;
}




/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
    background-color: #add8e6;
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
    background-color: #f34444;
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb{
    outline: 3px solid #f34444;
    outline-offset: 0.125rem;
}


.centerplaybutton {
    position: absolute;
    height:10vh;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    opacity:0.85;
    /*  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate; */
} 

.ic_radio {
    display:none;
    position: absolute;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    opacity:0.5;
    background-color: #404040;
    padding: 10%;
    box-sizing: border-box;
    /*  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate; */
}