::ng-deep {
	.pop-steps {
		&.p-popover.p-popover-flipped:before {
			display: none;
		}
		&.p-popover.p-popover-flipped:after {
			display: none;
		}
		&.p-popover:before {
			display: none;
		}
		&.p-popover:after {
			display: none;
		}
		&.p-popover-flipped {
			margin-top: -5px;
		}
		.p-popover-content {
			padding: 0;
		}
	}
	.end-steps {
		&.p-popover {
			margin-top: 2.5px;
			z-index: 999;
			position: absolute !important;
			left: auto !important;
			right: 0 !important;
			top: 100% !important;
			min-width: 125px;
		}
	}
	.start-steps {
		&.p-popover {
			margin-top: 2.5px;
			z-index: 999;
			position: absolute !important;
			left: 0 !important;
			right: auto !important;
			top: 100% !important;
			min-width: 125px;
		}
	}
}

.step-item {
	position: relative;
	height: 32px;
	padding: 0 5px;
	background-color: #e7e9ed;
	span {
		color: #334155c2;
		white-space: nowrap;
	}
}
.step-item.step-first {
	padding-left: 15px;
}
.step-item.step-last {
	padding-right: 15px;
}
.step-item:not(.step-first) {
	border-left: 15px solid transparent;
	margin-left: 2px;
}
.step-item:not(.step-first)::before {
	content: '';
	position: absolute;
	top: 0;
	left: -15px;
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 12px solid white;
}
.step-item:not(.step-last)::after {
	content: '';
	position: absolute;
	top: 0;
	right: -12px;
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 12px solid #e7e9ed;
	z-index: 2;
}
.step-item.step-active {
	background-color: var(--p-primary-200);
	span {
		color: #334155;
	}
}
.step-item.step-active::after {
	border-left: 12px solid var(--p-primary-200);
}