.channel-header {
    text-align: left;
    padding: 20px;
    background: #141414;
    border-bottom: 1px solid #222;
}

#nowPlaying {
    margin-top: 5px;
    font-size: 14px;
    color: #bb8b10;
}

.timeline-container {
    position: relative;
    padding: 20px;
    overflow-x: hidden;
    white-space: nowrap;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

.timeline-container:active {
    cursor: grabbing;
}

.schedule-track {
    display: flex;
    align-items: stretch;
    height: auto;
    border-radius: 10px;
    padding: 10px;
    overflow: visible;
}

.show {
    position: relative;
    flex-shrink: 0;
    min-width: 250px;
    margin-right: 5px;
    padding: 15px;
    font-size: 1.1em;
    border-radius: 8px;
    background: #2c2c2c;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    scroll-snap-align: start;
    transition: background 0.3s ease;
    cursor: pointer;
    user-select: none;
    max-width: 300px;
    /* remove restrictive max-width */
    width: auto;
    /* allow natural width */
    white-space: normal;
    /* wrap text */
    overflow-wrap: break-word;
    /* break long words */
}

.show .description {
    font-size: .85em;
    margin-top: 4px;
    /* more spacing for readability */
    color: #aaa;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 100%;
    font-weight: 400;
}

.show .genre, .show .pg {
    font-size: .85em;
    margin-top: 4px;
    /* more spacing for readability */
    color: #aaa;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 100%;
    font-weight: 400;
    margin-top: 5px;

    strong {
        color: #fff;
    }
}

.show .pg {
    display: none;
}

.show * {
    pointer-events: none;
}

.show[data-start][data-end] {
    width: calc((var(--duration, 3) / 24) * 2000px);
}

.show:hover {
    background: #3a3a3a;
}

.show.active {
    border: 2px solid #bb8b10;
    background: #353100;
}

.show .time {
    font-size: 11px;
    color: #ccc;
    text-align: left;
}

.show .title {
    font-weight: bold;
    margin-top: 4px;
    color: #fff;
    text-align: left;
}