.mypath {
	width: 300px;
	--mypath-radius: 31px;
	--mypath-border: 2px dashed;
}

.mypath>div {

	border-top: var(--mypath-border);
	border-color: #777 !important;
	margin: 0;
	padding: var(--mypath-radius);
}

.mypath>div:nth-child(even) {
	border-left: var(--mypath-border);
	border-top-left-radius: var(--mypath-radius);
	border-bottom-left-radius: var(--mypath-radius);
	margin-right: var(--mypath-radius);
	padding-right: 0;
}

.mypath>div:nth-child(odd) {
	border-right: var(--mypath-border);
	border-top-right-radius: var(--mypath-radius);
	border-bottom-right-radius: var(--mypath-radius);
	margin-left: var(--mypath-radius);
	padding-left: 0;
}

.mypath>div:first-child {
	border-top: 0;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}

.mypath>div:last-child {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.timeline:before {
	content: "";
	background: var(--bs-secondary);
	width: 5px;
	height: 99%;
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%);
}

.timeline-item:nth-child(even) .timeline-content {
	float: right;
	/* /* padding: 40px 30px 10px 30px; */
	*/
}

.timeline-item:nth-child(even) .timeline-content .date {
	right: auto;
	left: 0;
}

.timeline-item:nth-child(even) .timeline-content::after {
	content: "";
	position: absolute;
	border-style: solid;
	width: 0;
	height: 0;
	top: 30px;
	left: -15px;
	border-width: 10px 15px 10px 0;
	border-color: transparent var(--bs-light) transparent transparent;
}

.timeline-item::after {
	content: "";
	display: block;
	clear: both;
}

.timeline-content {
	position: relative;
	width: 45%;
	padding: 10px 30px;
	border-radius: 4px;
	background: var(--bs-light);
}

.timeline-content::after {
	content: "";
	position: absolute;
	border-style: solid;
	width: 0;
	height: 0;
	top: 30px;
	right: -15px;
	border-width: 10px 0 10px 15px;
	border-color: transparent transparent transparent var(--bs-light);
}

.timeline-img {
	width: 30px;
	height: 30px;
	background: var(--bs-secondary);
	border-radius: 50%;
	position: absolute;
	left: 50%;
	margin-top: 25px;
	margin-left: -15px;
}


	.timeline::before {
		left: 50px;
	}

	.timeline .timeline-img {
		left: 50px;
	}

	.timeline .timeline-content {
		max-width: 100%;
		width: auto;
		margin-left: 70px;
	}

	.timeline .timeline-item:nth-child(even) .timeline-content {
		float: none;
	}

	.timeline .timeline-item:nth-child(odd) .timeline-content::after {
		content: "";
		position: absolute;
		border-style: solid;
		width: 0;
		height: 0;
		top: 30px;
		left: -15px;
		border-width: 10px 15px 10px 0;
		border-color: transparent #f5f5f5 transparent transparent;
	}