.tv-program{
    --tv-accent:#ff2434;
    --tv-text:#adb3bb;
    --tv-muted:#667085;
    --tv-line:#c8c8c8;
    --tv-tab-bg:#f3f3f3;
    --tv-tab-active:#080808;
    --tv-bg:#fff;
    width:100%;
    background:var(--tv-bg);
    font-family:inherit;
}

.tvp-tabs{
    display:flex;
    align-items:stretch;
    width:100%;
    overflow-x:auto;
    scrollbar-width:thin;
    background:var(--tv-tab-bg);
    -webkit-overflow-scrolling:touch;
}

.tvp-tab{
    appearance:none;
    border:0;
    border-radius:0;
    background:transparent;
    color:#111;
    cursor:pointer;
    flex:1 0 auto;
    min-width:104px;
    padding:15px 17px;
    font-size:12px;
    font-weight:500;
    line-height:1;
    letter-spacing:.02em;
    text-align:center;
    transition:background .2s ease,color .2s ease;
}

.tvp-tab:hover,
.tvp-tab:focus-visible{
    background:#e8e8e8;
    outline:none;
}

.tvp-tab.is-active{
    background:var(--tv-tab-active);
    color:#fff;
}

.tvp-panels{
    padding:72px 10px 30px;
}

.tvp-panel[hidden]{display:none!important}
.tvp-panel.is-active{display:block}

.tvp-timeline{
    position:relative;
    max-width:1180px;
    margin:0 auto;
    padding:8px 0;
}

.tvp-timeline::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:2px;
    transform:translateX(-1px);
    background:var(--tv-line);
}

.tvp-item{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);
    align-items:center;
    min-height:104px;
}

.tvp-card{
    position:relative;
    max-width:420px;
    min-width:0;
}

.tvp-item.side-left .tvp-card{
    grid-column:1;
    justify-self:end;
    text-align:right;
    padding-right:42px;
}

.tvp-item.side-right .tvp-card{
    grid-column:3;
    justify-self:start;
    text-align:left;
    padding-left:42px;
}

.tvp-item.side-left .tvp-card::after,
.tvp-item.side-right .tvp-card::after{
    content:"";
    position:absolute;
    top:27px;
    width:32px;
    height:2px;
    background:var(--tv-line);
}

.tvp-item.side-left .tvp-card::after{right:0}
.tvp-item.side-right .tvp-card::after{left:0}

.tvp-axis{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    position:relative;
    width:90px;
    height:100%;
    min-height:104px;
}

.tvp-dot{
    position:absolute;
    top:50%;
    left:50%;
    width:14px;
    height:14px;
    border:4px solid var(--tv-line);
    border-radius:50%;
    background:#fff;
    transform:translate(-50%,-50%);
    z-index:2;
}

.tvp-time-desktop{
    font-size:19px;
    color:var(--tv-muted);
    white-space:nowrap;
}

.tvp-item.side-left .tvp-time-desktop{
    grid-column:3;
    justify-self:start;
    padding-left:19px;
}

.tvp-item.side-right .tvp-time-desktop{
    grid-column:1;
    justify-self:end;
    padding-right:19px;
    position: relative;
    bottom: 65px;
}

.tvp-title-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.tvp-item.side-left .tvp-title-row{justify-content:flex-end}
.tvp-item.side-right .tvp-title-row{justify-content:flex-start}

.tvp-title{
    margin:0 0 4px;
    color:var(--tv-accent);
    font-size:25px;
    font-weight:700;
    line-height:1.25;
    text-transform:uppercase;
}

.tvp-subtitle{
    color:var(--tv-text);
    font-size:20px;
    font-weight:300;
    line-height:1.05;
}

.tvp-live{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 7px;
    border-radius:999px;
    background:var(--tv-accent);
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1;
    letter-spacing:.08em;
}

.tvp-item.is-now .tvp-dot{
    border-color:var(--tv-accent);
    box-shadow:0 0 0 5px rgba(255,36,52,.10);
}

.tvp-time-mobile{display:none}

.tvp-empty{
    max-width:1180px;
    margin:0 auto;
    padding:42px 20px;
    text-align:center;
    color:var(--tv-muted);
    background:#fafafa;
}

@media (max-width: 900px){
    .tvp-panels{padding-top:52px}
    .tvp-subtitle{font-size:21px}
    .tvp-item{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr)}
    .tvp-axis{width:70px}
    .tvp-item.side-left .tvp-card{padding-right:34px}
    .tvp-item.side-right .tvp-card{padding-left:34px}
    .tvp-item.side-left .tvp-card::after,
    .tvp-item.side-right .tvp-card::after{width:25px}
}

@media (max-width: 767px){
    .tvp-tabs{gap:0}
    .tvp-tab{min-width:98px;padding:14px 13px;font-size:11px}
    .tvp-panels{padding:30px 0 12px}
    .tvp-timeline{padding:0 0 0 24px}
    .tvp-timeline::before{
        left:24px;
        transform:none;
    }
    .tvp-item{
        display:grid;
        grid-template-columns:26px minmax(0,1fr);
        min-height:0;
        padding:0 0 30px;
    }
    .tvp-axis{
        grid-column:1;
        grid-row:1;
        width:26px;
        min-height:100%;
        justify-self:stretch;
    }
    .tvp-dot{
        top:20px;
        left:0;
        width:12px;
        height:12px;
        border-width:3px;
        transform:translate(-5px,0);
    }
    .tvp-item.side-left .tvp-card,
    .tvp-item.side-right .tvp-card{
        grid-column:2;
        grid-row:1;
        justify-self:stretch;
        max-width:none;
        padding:0 12px 0 14px;
        text-align:left;
    }
    .tvp-item.side-left .tvp-card::after,
    .tvp-item.side-right .tvp-card::after{display:none}
    .tvp-item.side-left .tvp-title-row,
    .tvp-item.side-right .tvp-title-row{justify-content:flex-start}
    .tvp-time-desktop{display:none}
    .tvp-time-mobile{
        display:block;
        margin-bottom:5px;
        color:var(--tv-muted);
        font-size:15px;
        line-height:1.3;
    }
    .tvp-title{font-size:13px}
    .tvp-subtitle{font-size:20px;line-height:1.12}
}
