.timeline {
    display: grid;
    grid-column-gap: 1rem;
    grid-template-columns: 5rem 0.125rem 1fr;
}

.timeline__date {
    text-align: right;
}

.timeline__separator {
    background: rgb(203 213 225);
    position: relative;
}
.timeline__separator::before {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 50%;
    transform: translateX(-50%);

    background: inherit;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
}

.timeline__title {
    font-weight: 500;
}

.timeline__description {
    margin-bottom: 1rem;
}

.running_flow_container {
    display: flex;
    justify-content: center;
    align-items: center;

}

.step {
    background: whitesmoke;
}

.connector__line {
    stroke: darkslategray;
    stroke-dasharray: 10 5;
    stroke-dashoffset: 120;
    animation: flow 5s linear infinite;
}
@keyframes flow {
    from {
        stroke-dashoffset: 120;
    }
    to {
        stroke-dashoffset: 0;
    }
}


:root {
    --circle-size: 1.5rem;
}

.circle {
    height: var(--circle-size);
    width: var(--circle-size);
    background: whitesmoke;
    box-shadow: 0 0 0 0 rgba(72,61,139/1);
    border-radius: 9999px;

    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
		transform: scale(0.95);
		box-shadow: rgba(72,61,139/0.7);
	}

	75% {
		transform: scale(1);
		box-shadow: 0 0 0 calc(var(--circle-size)/2) rgba(72,61,139/0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(72,61,139/0);
	}
}