/* Gère les variables */
.timeline {
    --id3c-timeline-background-color: var(--app-component-color);
    --id3c-timeline-code-background-color: var(--app-component-disabled-bg);
    --id3c-timeline-icon-background-color: var(--app-component-bg);
    --id3c-timeline-icon-size: 20px;
    --id3c-timeline-item-content-margin-left: 14em;
    --id3c-timeline-item-element-top: 0px;
    --id3c-timeline-item-padding-bottom: .9375rem;
    --id3c-timeline-item-padding-top: 0px;
    --id3c-timeline-item-vertical-line-content: "";
    --id3c-timeline-item-vertical-line-height: calc(calc(100% - var(--id3c-timeline-item-vertical-line-top)) + 1px);
    --id3c-timeline-item-vertical-line-left: calc(12em + 9px);
    --id3c-timeline-item-vertical-line-top: 20px;
    --id3c-timeline-width: 2px;
}

    .timeline .timeline-item:last-child {
        --id3c-timeline-item-vertical-line-height: calc(calc(calc(100% - var(--id3c-timeline-item-vertical-line-top)) - 1px) - var(--id3c-timeline-item-padding-bottom));
    }

    .timeline .timeline-item:last-of-type::before {
        --id3c-timeline-item-vertical-line-content: none;
    }


@media (max-width: 575.98px) {
    .timeline {
        --id3c-timeline-item-vertical-line-content: none;
    }

        .timeline .timeline-content {
            --id3c-timeline-item-content-margin-left: 1em;
        }
}

/* Retire des règles du thème. */
.timeline .timeline-icon a {
    width: unset;
    height: unset;
    display: unset;
    background: unset;
    line-height: unset;
    color: unset;
    font-size: unset;
    border: unset;
    transition: unset;
    border-radius: unset;
}

/* Gère les chronologies */
.timeline::before,
.timeline .timeline-content::before {
    content: none;
}

.timeline .timeline-item {
    padding-bottom: var(--id3c-timeline-item-padding-bottom);
    padding-top: var(--id3c-timeline-item-padding-top);
}

    .timeline .timeline-item::before {
        background-color: var(--id3c-timeline-background-color);
        content: var(--id3c-timeline-item-vertical-line-content);
        height: var(--id3c-timeline-item-vertical-line-height);
        left: var(--id3c-timeline-item-vertical-line-left);
        position: absolute;
        top: var(--id3c-timeline-item-vertical-line-top);
        width: var(--id3c-timeline-width);
    }

    .timeline .timeline-item.timeline-future-item::before {
        background-color: transparent;
        border: 1px dashed;
    }

.timeline .timeline-time {
    width: 10em;
}

.timeline .timeline-icon {
    left: 12em;
    width: unset;
}

.timeline .timeline-icon,
.timeline .timeline-time {
    top: var(--id3c-timeline-item-element-top);
}

    .timeline .timeline-icon i {
        background-color: var(--id3c-timeline-icon-background-color);
        border: var(--id3c-timeline-width) solid var(--id3c-timeline-background-color);
        border-radius: 24px;
        font-size: 9px;
        height: var(--id3c-timeline-icon-size);
        line-height: 15px;
        width: var(--id3c-timeline-icon-size);
    }

.timeline .timeline-content {
    margin-left: var(--id3c-timeline-item-content-margin-left);
    max-width: unset;
}

.timeline .timeline-header,
.timeline .timeline-body {
    padding: var(--id3c-timeline-item-padding-top);
}

.timeline code {
    background-color: var(--id3c-timeline-code-background-color);
    color: inherit;
}

.timeline li {
    list-style: none;
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {

    .timeline .timeline-icon,
    .timeline .timeline-time {
        display: none;
    }

    .timeline .timeline-content {
        margin-right: var(--id3c-timeline-item-content-margin-left);
        margin-top: var(--id3c-timeline-item-element-top);
    }
}