/* :root {
    --brand-color-indicator: #FF4646;
} */

.schedule-item {
    padding: 1em 0;
    border-top: solid 0.06em var(--color-font);
    position: relative;
}

.schedule-item-icon {
    width: 2.5em;
    height: 2.5em;
    margin: 0 0.8em 0 0;
    padding: 0.25em;
    background-color: var(--brand-color-secondary);
    border-radius: 20%;
}
.schedule-item-icon,
[dir="ltr"] .schedule-item-icon,
[dir="auto"] .schedule-item-icon {
    float: left;
    margin: 0 0.8em 0 0;
}
[dir="rtl"] .schedule-item-icon {
    float: right;
    margin: 0 0 0 0.8em;
}

.schedule-when {
    height: 2.5em;
    padding: 0.25em;
    margin: 0 0 0.8em 0;
    font-weight: bold;
    line-height: 1.4em;
}

.schedule-details {
    line-height: 1.6em;
    margin: 0.3em 0 0 0;
    display: grid;
    grid-gap: 0.3em;
    grid-template-columns: [label] auto [div] 1fr;
}

.schedule-details label {
    font-weight: bold;
    min-width: 3.6em;
}
.schedule-details label,
[dir="ltr"] .schedule-details label,
[dir="auto"] .schedule-details label {
    text-align: right;
}
[dir="rtl"] .schedule-details label {
    text-align: left;
}

.schedule-attribute {
    display: inline-block;
}

.schedule-unread-indicator {    
    position: absolute;
    top: 1.3em;
    right: 0.2em;
    width: 0.6em;
    height: 0.6em;
    background-color: var(--brand-color-indicator);
    border-radius: 50%;
}