@font-face {
    font-family: 'epg-icons';
    src:  url('../fonts/epg-icons.eot?xj8p7p');
    src:  url('../fonts/epg-icons.eot?xj8p7p#iefix') format('embedded-opentype'),
    url('../fonts/epg-icons.ttf?xj8p7p') format('truetype'),
    url('../fonts/epg-icons.woff?xj8p7p') format('woff'),
    url('../fonts/epg-icons.svg?xj8p7p#epg-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.fp-icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'epg-icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

/* Use the old flowplayer class for the icons */
.fp-prevbtn:before {
    content: "\e902";
}

.fp-nextbtn:before {
    content: "\e901";
}

.fp-cross:before {
    content: "\e900";
}

.icon-more_vert:before {
    content: "\e5d4";
}
.icon-fp-download:before {
    content: "\e903";
}

.icon-fp-watch-back:after {
    content: "\e904";
    margin-left: 0.5em;
}
.icon-fp-watch-again:before {
    content: "\e913";
}

.overlay.missed {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 9;
    height: 95%;
    font-size: 0.7em;
}

.overlay.hidden {
    display: none !important;
}

.overlay .hidden {
    display: none !important;
}

/* Overlay Header */
.overlay.missed .header {
    padding: .6em .9em;
    background-color: #2B2B2B;
    color: #FFFFFF;
    text-align: left;
    font-size: 1em;
    overflow: hidden;
    font-family: avenir, sans-serif;
}

.overlay.missed .header .current_channel {
    float: left;
    max-width: 30%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay.missed .header .current_day {
    text-align: center;
    margin-left: 50%;
    transform: translateX(-50%);
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

.overlay.schedule .header .current_day {
    text-align: center;
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

.overlay.missed .header .current_day .fp-prevbtn:hover,
.overlay.missed .header .current_day .fp-nextbtn:hover {
    color: #00abcd;
    cursor: pointer;
}

#prevDayButton {

}

.overlay.missed .header .day_indicator {
    width: 13em;
    display: inline-block;
    text-align: center;
}

.overlay.missed .header .close {
    position: absolute;
    right: 1em;
    top: 0.7em;
    z-index: 99;
}

.overlay.missed .header .fp-icon {
    color: #FFFFFF;
    text-decoration: none;
}

.overlay.missed .header .fp-icon:before {
    font-size: 1.2em;
}

/* Overlay Content */
.overlay.missed .content {
    background: #FFFFFF;
    opacity: 0.9;
    overflow-y: scroll;
    height: calc(100% - 85px);
    font-family: avenir, sans-serif;
}
.overlay.schedule .content{
    height: calc(100% - 50px);
}

#streamContainer .flowplayer .fp-header{
    right:3em;
}

#streamContainer #closePlayerButton{
    float:right;
    color:#ffffff;
    cursor:pointer;
}


.overlay.missed .content {
    /*display: flex;*/
    /*width: 100%;*/
}

.overlay.missed .content .program {
    column-count: 4;
    column-width: 25%;
    height: 100%;
    width: 100%;
    padding: 1em 0;
    /*display: grid;*/
    /*grid-template-columns: repeat(auto-fit, minmax(25%, 3fr));*/
}

.overlay.missed .content .program .program_line {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 2em;
    min-height: 1.3em;
    align-items: center;
    margin: 0;
    box-sizing: border-box;
    border-right: 1px solid gray;
}

.overlay.missed .content .program .program_line span {
    position: absolute;
    left: 1em;
    display: inline-block;
    width:75%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.5em;
}
.overlay.missed .content .program .program_line a {
    display:inline-block;
    opacity:0;
    cursor:default;
}
.overlay.missed .content .program .program_line.has_stream .play,
.overlay.missed .content .program .program_line.has_download .download{
    position: absolute;
    text-decoration: none;
    color: inherit;
    opacity:1;
}

.overlay.missed .content .program .program_line.has_stream .play {
    position: relative;
}
.overlay.missed .content .program .program_line.has_stream .play:before {
    float: right;
    font-size: 1em;
    padding: 0.1em 1em;
}
.overlay.missed .content .program .program_line.has_download .download {
    right: 0;
    padding: 0.15em 1em;
    line-height: inherit;
}
.overlay.missed .content .program .program_line.has_download .download:before {
    font-size: 1em;
}

.overlay.missed .content .program .program_line.has_stream .play:hover,
.overlay.missed .content .program .program_line.has_download .download:hover {
    background: #1b1b1b45;;
    color: #00abcd;
    cursor:pointer;
}

.overlay.missed .content .program .program_line .button_container{
    width:22%;
    float:right;
    display:inline-block;
}


.overlay.missed .content .program_line a.active {
    color: #00abcd;
}
.overlay.missed .content .program_line .is_restart:before {
    color: #ff5000;
}

.icon_spacer {
    float: right;
    width: 5em;
    height: 1em;
    visibility: hidden;
}

#streamContainer .icon_spacer{
    width:1em;
}

.headerBtn {
    position: relative;
    float: right;
    z-index: 100;
    color: white;
    font-family: avenir, sans-serif, 'icomoon' !important;
    font-size: 1.2em;
    text-decoration: none;
    margin-right: 3em;
    line-height: 0.6;
    border: .1em solid white;
    padding: 0.3em 0.5em;
    border-radius: 5px;
}
.headerBtn:hover, .overlay.missed .header .close, fp-prevbtn, fp-nextbtn {
    cursor: pointer;
}

.headerBtn.hidden {
    display: none;
}

@media screen and (max-width: 1300px) {
    .overlay.missed:not(.schedule) .header {
        height: 3em;
    }
    .overlay.schedule .header {
        font-size: 0.8em;
    }
    .overlay.schedule .content{
        height: calc(100% - 30px);
    }
    .overlay.missed .header .current_channel {
        display: block;
        float: none;
        font-size: 0.75em;
        max-width: 80%;
    }
    .overlay.missed:not(.schedule) .header .current_day {
        width: 100%;
        font-size: 0.75em;
        margin-top: 0.5em;
    }
    .headerBtn {
        margin-right: 1.5em ;
    }
    .overlay.missed .content .program .program_line span {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 1600px) {
    .overlay.missed .content .program {
        column-count: 3;
        column-width: 33%;
        /*grid-template-columns: repeat(auto-fit, minmax(33%, 3fr));*/
    }
    .overlay.missed .content .program .program_line span {
        width: 70%;
    }
}

@media screen and (max-width: 1024px) {
    .overlay.missed .content .program {
        column-count: 2;
        column-width: 50%;
        /*grid-template-columns: repeat(auto-fit, minmax(50%, 2fr));*/
    }
}

@media screen and (max-width: 1035px) {
    .fp-message.fp-title {
        width: 50%;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .headerBtn {
        float: right;
    }
}

@media screen and (max-width: 710px) {
    /*.headerBtn {*/
    /*font-size: 0.8em;*/
    /*}*/
    .overlay.missed {
        font-size: 0.6em;
    }
}

@media screen and (max-width: 600px) {    
    .overlay.missed .content .program {
        column-count: 1;
        column-width: 100%;
        /*grid-template-columns: repeat(auto-fit, minmax(100%,1fr));*/
    }

    .overlay.missed .content .program:first-child {
        border: 0;
    }
    .overlay.missed .content .program .program_line span {
        width: 75%;
    }
}

@media screen and (max-width: 600px) {
    .overlay.missed .content:not(.primary) {
        height: calc(100% - 70px);
    }
}

@media screen and (max-width: 400px) {
    .overlay.missed .content:not(.primary) {
        height: calc(100% - 60px);
    }
}


.flowplayer .extraHeader {
    opacity: 0;
    transition: opacity 0.3s;
    z-index:4;
    position:relative;
    margin-top: .55em;
}


.schedule .program {height:auto !important;}