.section-schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.schedule-loading, .schedule-error, .schedule-content {
    display: none;
}

.section-schedule.loading .schedule-loading {
    display: unset;
}
.section-schedule.error .schedule-error {
    display: unset;
}
.section-schedule:not(.loading):not(.error) .schedule-content {
    display: unset;
}

.schedule-list {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.schedule-container {
    width: 100%;
}

.schedule-nav-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    margin: 1rem;
}

.schedule-nav-current-day {
    width: 7rem;
    text-align: center;
}

.schedule-nav-button {
    margin: .5rem;
    border-radius: 50%;
    border: solid white 2px;
}
.schedule-nav-button:hover {
    cursor: pointer;
    background-color: #ffffff22;
}

.schedule-block {
    width: calc(100% - 3rem);
    
    border-radius: 1rem;
    margin: .5rem;
    padding: .5rem 1rem;

    display: flex;
    flex-direction: column;

    background-color: color-mix(in srgb, var(--color) 30%, transparent 70%);
    transition: all .45s;
}

.schedule-block:hover {
    transform: scale(1.02);
}

.now-playing {
    animation: pulseBorder infinite 2.5s;
}

.schedule-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.schedule-name {
    font-size: 24px;
    font-weight: 800;
    filter: brightness(5) saturate(5);
    color: var(--color);
}
.schedule-time {
    margin: .25rem .5rem;
}

.schedule-desc {
    margin-bottom: 1rem;
}

.schedule-badges {
    font-size: 12px;
}

@media only screen and (max-width: 800px) { /* smaller screens */
    .schedule-header {
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .schedule-time {
        margin: 0;
        margin-bottom: .5rem;
    }
}