.timeline {
    display: flex;
}

    .timeline line {
        stroke-width: 5;
    }

.timeline-svg-circle {
    height: 20px;
    width: 20px;
}

.timeline-svg-line {
    height: 5px;
    margin-top: 4px;
}

.timeline-event {
    position: relative;
    text-align: left !important;
    left: 0 !important;
}

.timeline-event-bubble-top, .timeline-event-bubble-top-special,
.timeline-event-bubble-bottom, .timeline-event-bubble-bottom-special {
    position: absolute;
    min-width: 140px;
    min-height: 23px; /* ATTENZIONE: se si modifica questo, modificare in egual misura .timeline-event-bubble-top.top, .timeline-event-bubble-top-special.top, .timeline-event-bubble-bottom.--timeline-event-bubble-bottom_pseudo-bottom e .timeline-event-bubble-bottom-special.--timeline-event-bubble-bottom_pseudo-bottom */
    padding-right: 8px;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64);
    z-index: 1;
    padding-bottom: 4px;
}

    .timeline-event-bubble-top:before, .timeline-event-bubble-top-special:before,
    .timeline-event-bubble-top:after, .timeline-event-bubble-top-special:after,
    .timeline-event-bubble-bottom:before, .timeline-event-bubble-bottom-special:before,
    .timeline-event-bubble-bottom:after, .timeline-event-bubble-bottom-special:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
        border-bottom: 0;
    }

.timeline-event-bubble-top {
    top: -30px;
    left: -15px !important;
}

.timeline-event-bubble-top-special {
    top: -38px;
    left: -2px !important;
}

.timeline-event-bubble-bottom {
    top: 26px;
    left: -105px !important;
    --timeline-event-bubble-bottom_pseudo-bottom: 25px;
}

.timeline-event-bubble-bottom-special {
    top: 34px;
    left: -94px !important;
    --timeline-event-bubble-bottom_pseudo-bottom: 25px;
}

.timeline-event-bubble-top:before, .timeline-event-bubble-top-special:before {
    bottom: -10px;
    left: 15px;
    border-top-color: inherit;
    border-width: 12px;
}

.timeline-event-bubble-top:after, .timeline-event-bubble-top-special:after {
    bottom: -8px;
    left: 15px;
    border-top-color: inherit;
    border-width: 12px;
}

.timeline-event-bubble-bottom:before, .timeline-event-bubble-bottom-special:before {
    bottom: var(--timeline-event-bubble-bottom_pseudo-bottom);
    left: 105px;
    border-top-color: inherit;
    border-width: 12px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.timeline-event-bubble-bottom:after, .timeline-event-bubble-bottom-special:after {
    bottom: var(--timeline-event-bubble-bottom_pseudo-bottom);
    left: 105px;
    border-top-color: inherit;
    border-width: 12px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.timeline-event-date {
    display: flex;
    padding-top: 2px;
    margin-left: 8px;
    left: 0 !important;
    font-weight: 400;
}

.timeline-event-title {
    font-size: 11px;
    display: flex;
    flex: 1;
    align-items: center;
    margin-left: 8px;
    padding-top: 2px;
    left: 0 !important;
    font-weight: 700;
}

.timeline-event-descr {
    margin-left: 8px;
    margin-bottom: 0;
    font-size: 9px;
    font-weight: 400;
    white-space: pre-line;
    width: max-content;
}

.timeline-special {
    border-radius: 7px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 2px;
    font-size: 10px;
    font-family: var(--font-family);
    border: 2px solid white;
    font-weight: bold;
    width: 40px;
    height: 23px;
}