/* General */
.hide-until-dom-content-loaded {
    display: none !important;
}

.epg-h1 {
    font: bold 16px Colibri, Tahoma, sans-serif;
    line-height: 21px;

    margin: 30px 0 14px 20px;
}

.epg-h1 > img {
    vertical-align: middle;
}

.epg-categories {
    margin-left: 13px;
}

.epg-dates {
    margin: 14px 0 14px 13px;
}

/* Selector  */
.horizontal-selector {
    font-size: 16px;

    display: flex;

    margin: 14px 0;
    padding: 0;

    list-style: none;

    flex-wrap: wrap;
}

.horizontal-selector a {
    line-height: 26px;

    display: inline-block;

    padding: 0 7px;

    text-decoration: none;

    color: black;
    border-bottom: 2px solid transparent;
}

.horizontal-selector a:hover,
.horizontal-selector > .selected a {
    text-decoration: none;

    color: red;
    border-bottom-color: red;
}

.horizontal-selector > .selected a {
    font-weight: bold;
}

/* Index */
.epg-index {
    font-size: 14px;

    margin-left: 15px; /* do mind A padding */
}

.epg-index ul {
    display: flex;

    margin: 0;
    padding: 0;

    list-style: none;

    flex-wrap: wrap;
}

.epg-index a {
    line-height: 21px;

    display: inline-block;

    padding: 0 5px;

    text-decoration: none;

    color: black;
    border-bottom: 2px solid transparent;
}

.epg-index a:hover {
    text-decoration: none;

    color: red;
    border-bottom-color: red;
}

.index-char {
    font: normal 44px sans-serif;

    width: 100%;
    margin: 14px 0 14px 20px;

    color: #42a5f5;

    flex: none;
}

.epg-listing-filtered .index-char {
    display: none;
}

/* Filter */
.epg-filter-wrap {
    position: relative;

    display: inline-block;

    margin: 14px 0 0 20px;
}

.epg-filter-wrap input {
    box-sizing: border-box;
    width: 220px;
    padding: 5px;

    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 5px;
}

.epg-filter-wrap button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    display: none;

    width: 24px;

    cursor: pointer;

    border: none;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==') no-repeat center;
}

/* Listing */
.epg-listing {
    font-family: sans-serif;
    font-size: 12px;

    display: flex;

    margin: 20px 0;

    flex-wrap: wrap;
}

.epg-listing a {
    text-decoration: none;

    color: #000;
}

.epg-channel {
    margin-bottom: 14px;

    flex: 0 0 240px;
}

.epg-channel > h4 {
    font-size: 14px;
    font-weight: bold;
    line-height: 28px;

    margin: 0 0 0 20px;

    color: #333;
}

.epg-channel > h4 img {
    width: 33px;
    height: 28px;
    margin-right: 4px;

    vertical-align: middle;
}

.epg-channel > ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.epg-channel > ul > li {
    line-height: 14px;

    position: relative;

    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 57px;

    text-indent: -37px;
}

.epg-listing-popup-enabled .epg-channel > ul > li:hover {
    cursor: pointer;

    color: red;
}

.epg-channel > ul > li:first-child {
    padding-top: 0;
}

.epg-channel > ul > li:last-child {
    padding-bottom: 0;
}

/* Notifications */
#epg-toggle-notification-buttons {
    position: absolute;
    z-index: 1;

    display: none;
}

#epg-toggle-notification-buttons .button {
    display: inline-block;

    width: 20px;
    height: 20px;

    cursor: pointer;

    border: 1px solid #666;
    border-radius: 4px;
    background: #F1F1F1 no-repeat 50% 40%;
}

#epg-toggle-notification-buttons .button:hover {
    background-color: #fff000;
}

#epg-toggle-notification-buttons .button.simple {
    /* font awesome svg icon-bell */
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm-666-288h1300q-266-300-266-832 0-51-24-105t-69-103-121.5-80.5-169.5-31.5-169.5 31.5-121.5 80.5-69 103-24 105q0 532-266 832zm1482 0q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z"/></svg>');
}

#epg-toggle-notification-buttons > .button.pattern-matching {
    /* font awesome svg icon-bullhorn */
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 640q53 0 90.5 37.5t37.5 90.5-37.5 90.5-90.5 37.5v384q0 52-38 90t-90 38q-417-347-812-380-58 19-91 66t-31 100.5 40 92.5q-20 33-23 65.5t6 58 33.5 55 48 50 61.5 50.5q-29 58-111.5 83t-168.5 11.5-132-55.5q-7-23-29.5-87.5t-32-94.5-23-89-15-101 3.5-98.5 22-110.5h-122q-66 0-113-47t-47-113v-192q0-66 47-113t113-47h480q435 0 896-384 52 0 90 38t38 90v384zm-128 604v-954q-394 302-768 343v270q377 42 768 341z"/></svg>');
}

#epg-toggle-notification-buttons > .button.remove {
    /* font awesome svg icon-times */
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg>');
}

.epg-channel > ul > li.notification-mark {
    background: yellow;
}

.epg-channel > ul > li.notification-mark.pattern-matching {
    background: tomato;
}