.steps{
	padding:0;
	margin:0;
	list-style:none;
	display:flex;
	overflow-x:auto
}
.steps .step:first-child{
	margin-left:auto
}
.steps .step:last-child{
	margin-right:auto
}
.step:first-of-type .step-circle::before{
	display:none
}
.step:last-of-type .step-content{
	padding-right:0
}
.step-content{
	box-sizing:content-box;
	display:flex;
	align-items:center;
	flex-direction:column;
	width:8rem;
	min-width:5rem;
	max-width:10rem;
	padding-top:.5rem;
	padding-right:1rem
}
.step-circle{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:2rem;
	height:2rem;
	color:#adb5bd;
	border:2px solid #adb5bd;
	border-radius:100%;
	background-color:#fff
}
.step-circle::before{
	content:"";
	display:none;
	position:absolute;
	top:50%;left:-2px;
	width:calc(10rem);
	height:2px;
	transform:translate(-100%,-50%);
	color:#adb5bd;
	background-color:currentColor
}
.step-text{
	color:#adb5bd;
	word-break:break-all;
	margin-top:.25em
}
.step-active .step-circle{
	color:#fff;
	background-color:#007bff;
	border-color:#007bff
}
.step-active .step-circle::before{
	color:#007bff
}
.step-active .step-text{
	color:#007bff
}
.step-error .step-circle{
	color:#fff;
	background-color:#dc3545;
	border-color:#dc3545
}
.step-error .step-circle::before{
	color:#dc3545
}
.step-error .step-text{
	color:#dc3545
}
.step-success .step-circle{
	color:#28a745;
	background-color:#fff;
	border-color:#28a745
}
.step-success .step-circle::before{
	color:#28a745
}
.step-success .step-text{
	color:#28a745
}