.sdsl .sdsl-channel.sdepg-has-data {
    row-gap: 9px;
}

.sdsl .sdepg-inline {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr)
        auto;

    gap: 11px;

    align-items: center;

    padding: 10px 12px;

    border: 1px solid #E4E0F5;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #FBFAFF,
            #F7F5FF
        );
}

.sdsl .sdepg-now,
.sdsl .sdepg-next {
    min-width: 0;
}

.sdsl .sdepg-label {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-bottom: 3px;

    color: #776B93;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.sdsl .sdepg-live-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #159A76;
}

.sdsl .sdepg-programme-title {
    display: block;

    min-width: 0;

    overflow: hidden;

    color: #29314D;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.sdsl .sdepg-programme-time {
    color: #705AC3;

    font-weight: 850;
}

.sdsl .sdepg-button {
    appearance: none;

    padding: 8px 11px;

    border: 1px solid #CFC6EE;
    border-radius: 8px;

    background: #fff;

    color: #5F49B5;

    cursor: pointer;

    font-family: inherit;
    font-size: 10px;
    font-weight: 850;

    white-space: nowrap;
}

.sdsl .sdepg-button:hover {
    border-color: #9B7BFF;

    background: #F3EFFF;
}

.sdsl .sdepg-button[aria-expanded="true"] {
    border-color: #2E3A62;

    background: #2E3A62;

    color: #fff;
}

.sdsl .sdepg-details {
    grid-column: 1 / -1;

    display: none;

    max-height: 330px;

    overflow-y: auto;

    margin-top: 2px;
    padding-top: 4px;

    border-top: 1px solid #E5E1F2;
}

.sdsl .sdepg-details.is-open {
    display: block;
}

.sdsl .sdepg-detail-row {
    display: grid;

    grid-template-columns:
        105px
        minmax(0,1fr);

    gap: 12px;

    padding: 8px 2px;

    border-bottom: 1px solid #EBE8F4;
}

.sdsl .sdepg-detail-row:last-child {
    border-bottom: 0;
}

.sdsl .sdepg-detail-time {
    color: #6955B5;

    font-size: 11px;
    font-weight: 850;
}

.sdsl .sdepg-detail-title {
    color: #39415C;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.sdsl .sdepg-search-hit {
    box-shadow:
        inset 3px 0 0 #9B7BFF;
}


@media(max-width:720px) {

    .sdsl .sdepg-inline {
        grid-template-columns:
            minmax(0,1fr)
            auto;
    }

    .sdsl .sdepg-now {
        grid-column: 1;
        grid-row: 1;
    }

    .sdsl .sdepg-next {
        grid-column: 1;
        grid-row: 2;
    }

    .sdsl .sdepg-button {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .sdsl .sdepg-details {
        grid-column: 1 / -1;
    }
}


@media(max-width:440px) {

    .sdsl .sdepg-inline {
        grid-template-columns: 1fr;
    }

    .sdsl .sdepg-now,
    .sdsl .sdepg-next,
    .sdsl .sdepg-button,
    .sdsl .sdepg-details {
        grid-column: 1;
        grid-row: auto;
    }

    .sdsl .sdepg-button {
        width: max-content;
    }

    .sdsl .sdepg-detail-row {
        grid-template-columns:
            88px
            minmax(0,1fr);
    }
}