body {
    font-family: "Montserrat","Arial","Helvetica Neue","Helvetica","sans-serif";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 16px;
        line-height: 1.2em;
        color:#222222;
        padding: 0;
        margin: 0;
}

.mmtv {
    --col: 4;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    user-select: none;
}
.mmtv::-webkit-scrollbar,
.mmtv *::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    display: none;
}
.mmtv *::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
.mmtv *::-webkit-scrollbar-thumb,
.mmtv *::-webkit-scrollbar-thumb:hover,
.mmtv *::-webkit-scrollbar-thumb:active {
    background: #EEE;
}
.mmtv *::-webkit-scrollbar-track,
.mmtv *::-webkit-scrollbar-track:hover,
.mmtv *::-webkit-scrollbar-track:active,
.mmtv *::-webkit-scrollbar-corner {
    background: transparent;
}
.mmtv img {
    max-width: 100%;
}
.mmtv [data-mmtv-action] {
    cursor: pointer;
}
.mmtv-header {
    display:flex;
    flex-direction: column;
    white-space: nowrap;
    position: sticky;
    background: #FFF;
    top: 0;
    background: #FFF;
    z-index: 99;
}
.mmtv button, .mmtv select {
    padding: 0.6em 1.2em;
    border: 1px solid #00000011;
    background-color: #ffffff;
    color: #000000;
    cursor: pointer;
    outline: none;
    font-size: 0.8em;
    font-weight: 500;
    font-family: 'Montserrat';
}
.mmtv-header-filters {
    display:flex;
    flex-direction: row;
    flex: 1;
    gap: 1em;
    overflow: auto;
    padding: 0.5em 1em;
    background: #00000005;
}
.mmtv-header-filters-day {

}
.mmtv-header-filters-when {
    display:flex;
    flex-direction: row;
    gap: 0.5em;
    flex:1;
}
.mmtv-container {
    margin: 0.5em;
}
.mmtv-scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    box-sizing: border-box;
}
.mmtv-scroller > div {
    scroll-snap-align: start;
}
.mmtv-header-channels-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 80px;
    position: sticky;
    top: 0;
    background-color: #FFF;
    box-shadow: 0px 8px 10px #00000011;
    z-index: 99;
    overflow: hidden;
}
.mmtv-header-channels {
    display:flex;
    flex-direction: row;
    flex:1;
    font-weight: bold;
    text-transform: uppercase;
    align-items: center;
    margin-right: -40px;
    margin-left: -40px;
}
.mmtv-header-channels > div {
    text-align: center;
    flex: 1;
    padding:0.5em 0;
    position: relative;
    max-width: calc(100% / var(--col));
    min-width: calc(100% / var(--col));
    border-right: 1px solid #EEE;
    cursor: pointer;
}
/* .mmtv-header-channels img {
    max-height: 50px;
    width: 70px;
} */
.mmtv-header-channels .logo-channel {
    min-height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: auto;
    min-width: 70px;
    max-height: 50px;
}
.mmtv-header-channels-nav > div:not(.mmtv-header-channels) {
    z-index: 9;
    width: 30px;
    text-align: center;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0.5em;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    width: 60px;
    /* position: absolute;
    top: 0;
    bottom: 0; */
}
.mmtv-header-channels-nav > div:last-child {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    right: 0;
}
.mmtv-header-channels-nav > div:not(.mmtv-header-channels) img {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background: #FFF;
    box-shadow: 0 2px 6px #00000033;
    padding: 4px;
    margin: auto;
}
/* .mmtv-container {
    display:flex;
    flex-direction: row;
    flex:1;
} */
.mmtv-broadcast {
    display:flex;
    flex-direction: row;
    flex:1;
}
.mmtv-container .mmtv-broadcast:not(:empty):nth-child(odd) {
    background-color: #00000005;
}
.mmtv-broadcast-slot {
    flex:1;
    max-width: calc(100% / var(--col));
    min-width: calc(100% / var(--col));
    scroll-snap-align: start;
    padding-top: 2em;
    display: flex;
}
.mmtv-broadcast-slot + .mmtv-broadcast-slot {
    border-left: 1px solid #00000011;
    margin-left: -1px;
}
.mmtv-broadcast-items {
    position: sticky;
    bottom: 0;
    display: block;
    align-self: flex-start;
    max-width:100%;
}
.mmtv-broadcast-item {
    display: grid;
    padding: 0.5em 1em;
    grid-template-columns: auto 1fr;
    column-gap: 0.5em;
    cursor:pointer;
    position: relative;
}
.mmtv-broadcast-item.short {
    font-size: 0.8em;
}
.mmtv-broadcast-item.short .mmtv-broadcast-item-category,
.mmtv-broadcast-item.short .mmtv-broadcast-item-subtitle{
    display: none;
}
.mmtv-broadcast-item:hover {
    background:#00000011;
}
.mmtv-broadcast-item + .mmtv-broadcast-item {
    border-top: 1px solid #00000011;
}
.mmtv-broadcast-item-time {
    grid-area: 1 / 1 / -1 / 1;
    white-space: nowrap;
    font-size: 1em;
}
.mmtv-broadcast-item-time span {
    display: block;
    /* background: #111;
    color: #FFF; */
    font-size: 0.8em;
    font-weight: bolder;
    padding: 0.2em 0.8em;
    margin-left: -1.2em;
    margin-top: -0.2em;
    margin-bottom: -0.2em;
}
.mmtv-broadcast-item > div:not(.mmtv-broadcast-item-time) {
    grid-area: auto/2/auto/auto;
}

.mmtv-broadcast-item-title {
    font-weight: 900;
    font-size: 1em;
    color:#111;
    padding-right:0.5em;
    display: inline-block;
}
.mmtv-broadcast-item-subtitle,
.mmtv-broadcast-item-category {
    font-weight: bold;
    font-size: 0.8em;
    font-style: italic;
    line-height: 1.3em;
    margin-top: 0.2em;
    /* border-left: 4px solid #00000011;
    padding-left: 0.4em; */
}
.mmtv-broadcast-item-description {
    font-size: 0.8em;
    color: #666;
    line-height: 1.3em;
    margin-top: 0.4em;
    font-weight: 500;
}
.mmtv-broadcast-item-image {
    padding-top:0.4em;
}

@media (max-width: 768px) { .mmtv { --col : 2; }}
@media (max-width: 480px) { 
    .mmtv { --col : 1; } 
    .mmtv-header-channels { padding-left: 40px; padding-right: 40px; }
    .mmtv-header-channels > div { max-width: auto!important; min-width: auto!important; padding:1em!important; border-right: 0px; } 
    .mmtv-header-channels > div.active:after {
        content: '';
        display: inline-block;
        background: #111;
        position: absolute;
        bottom: 0;
        width: 60px;
        height: 8px;
        margin: auto;
        right: 0;
        left: 0;
    }
}
.onplay .mmtv-broadcast-item-time span {
    background: #CC0000;
    color: #FFF;
}
.onplay .mmtv-broadcast-item-onplay {
    height: 5px;
    margin: 0.5em 0;
    background-color: #00000011;
    position: relative;
}
.onplay .mmtv-broadcast-item-onplay > span {
    display: inline-block;
    height: 100%;
    background-color: #CC0000;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
.mmtv-broadcast-item-airing {
    font-size: 0.6em;
    font-weight: bold;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}
.mmtv-broadcast-item-airing:after {
    content:'H';
    background: #00000011;
    padding: 0.2em 0.4em;
}
.mmtv-broadcast-item-airing[data-value*=",28,"]:after {
    content:'L';
    background: #CC0000;
    color: #FFF;
}
.mmtv-broadcast-item.time-before:not(:hover) {
    opacity: 0.3;
    filter: grayscale(1);
}

.mmtv[data-filter-when="now"] .time-before,
.mmtv[data-filter-when="night"] .time-morning,
.mmtv[data-filter-when="night"] .time-afternoon,
.mmtv[data-filter-when="night"] .time-evening,
.mmtv[data-filter-when="morning"] .time-night,
.mmtv[data-filter-when="morning"] .time-afternoon,
.mmtv[data-filter-when="morning"] .time-evening,
.mmtv[data-filter-when="afternoon"] .time-night,
.mmtv[data-filter-when="afternoon"] .time-morning,
.mmtv[data-filter-when="afternoon"] .time-evening,
.mmtv[data-filter-when="evening"] .time-night,
.mmtv[data-filter-when="evening"] .time-morning,
.mmtv[data-filter-when="evening"] .time-afternoon {
    display:none;
}
.mmtv[data-filter-when=""] .mmtv-broadcast-item.time-evening + .time-night,
.mmtv[data-filter-when=""] .mmtv-broadcast-item.time-morning + .time-afternoon {
    border-top: 8px solid #000;
    /* margin-top: 2em; */
    /* padding-top: 2em; */
}

/* special zita */
@media (max-width: 767px) {
  .td-container .mmtv {
    margin-left: -20px;
    margin-right: -20px;
    width: auto;
  }
}
.pipe {
    display: flex;
    flex-direction: row;
    gap: 1em;
    margin: 1em 0;
    align-items:center;
    overflow:auto;
}
.pipe > span {
    white-space:nowrap;
}
.pipe > span + span {
    border-left:1px solid #EEE;
    padding-left:1em;
}
/* modal */
/* .mmtv-modal:not(.open){
    display: none;
}
.mmtv-modal {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    background: #FFF;
    top: 0;
    z-index: 999;
    box-shadow: 0 0 10px #00000011;
    margin: 1em;
    border-radius: 10px;
    padding: 1em;
}
.mmtv-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-weight: 600;
    font-size: 24px;
    cursor: pointer;
} */

.mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-night) + .time-night {
    border-top:40px solid #000;
}
.mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-night) + .time-night:before {
    content:"Nacht";
    display:block;
    margin-top:-33px;
    margin-left:20px;
    color:#FFF;
    position:absolute;
    top:0;
    left:0;
}
.mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-evening) + .time-evening {
    border-top:40px solid #000;
}
.mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-evening) + .time-evening:before {
    content:"Avond";
    display:block;
    margin-top:-33px;
    margin-left:20px;
    color:#FFF;
    position:absolute;
    top:0;
    left:0;
}
.mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-afternoon) + .time-afternoon {
    border-top:40px solid #000;
}
.mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-afternoon) + .time-afternoon:before {
    content:"Middag";
    display:block;
    margin-top:-33px;
    margin-left:20px;
    color:#FFF;
    position:absolute;
    top:0;
    left:0;
}
.mmtv-header {
    transition: top .2s;
}
[scroll-dir="up"].device-mobile .mmtv-header {
    top: 115px!important;
    transition: top .2s;
}

    h1 {
        line-height: normal;
    }
    .mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-night) + .time-night:before,
    .mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-evening) + .time-evening:before,
    .mmtv[data-filter-when=""] .mmtv-broadcast-item:not(.time-afternoon) + .time-afternoon:before {
        margin-top: -30px;
    }
    .darkmode .mmtv-broadcast-item-description {
        color:#999;
    }
    .darkmode .mmtv-header {
        background:#000;
    }
    .darkmode .mmtv-header-channels-nav {
        background:#111;
    }
    .darkmode .mmtv-header-channels-nav > div:not(.mmtv-header-channels) {
        background: linear-gradient(90deg, rgba(0,0,0, 1) 0%, rgba(0,0,0, 0) 100%);
    }
    .darkmode .mmtv-header-channels-nav > div:last-child {
        background: linear-gradient(90deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, 1) 100%);
    }
    .darkmode .mmtv-header-channels > div {
        border-right: 1px solid #FFFFFF11;
    }
    .darkmode select option {
        color:#FFF;
    }
    .darkmode .mmtv-broadcast-item-title {
        color:#FFF;
        font-weight: 600;
    }
    .darkmode .mmtv-broadcast-item-subtitle {
        font-weight: 400;
        color:#CCC;
    }
    .darkmode [data-slug="france-2"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/france-2.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="france-2"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/france-2.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="bbc1"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/bbc1.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="bbc2"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/bbc2.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="vrt-een"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/vrt-een.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="vrt-canvas"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/vrt-canvas.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="france-3"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/france-3.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="q2"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/q2.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="la-une"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/la-une.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="rtl-tvi"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/rtl-tvi.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="tipik"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/tipik.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="tf1"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/tf1.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="vier"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/vier.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="vtm"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/vtm.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="national-geographic"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/national-geographic.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="ab3-channel"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/ab3-channel.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="ab-xplore"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/ab-xplore.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="rtl-plug"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/rtl-plug.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="discovery-channel"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/discovery-channel.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="c8"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/c8.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="nickelodeon"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/nickelodeon.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="vijf-tv"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/vijf-tv.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="la-trois"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/la-trois.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="npo-1"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/npo-1.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="npo-2"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/npo-2.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="npo-3"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/npo-3.png)!important;  transform: scale(0.8); }
    .darkmode [data-slug="vitaya"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/vitaya.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="vrt-ketnet"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/vrt-ketnet.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="comedy-central"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/comedy-central.png)!important;    transform: scale(0.8); }
    .darkmode [data-slug="arte-belgique"] .logo-channel { background-image:url(https://www.cinenews.be/assets/img/tv/arte-belgique.png)!important;  transform: scale(0.8); }