#stepProgressBar  {
	display:  flex;
	justify-content:  space-between;
	align-items:  flex-end;
	width:  300px;
	margin:  0  auto;
	margin-bottom:  40px;
}

.step  {
text-align:  center;
}

.step-text  {
margin-bottom:  10px;
color:  #28a745;
}


.bullet {
	border: 1px solid #28a745;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	color: #28a745;
	display: inline-block;
	position: relative;
	transition: background-color 500ms;
  line-height:20px;
}


.bullet.completed  {
	color:  white;
	background-color:  #28a745;
}



.bullet.completed::after {
	content: '';
	position: absolute;
	right: -60px;
	bottom: 10px;
	height: 1px;
	width: 54px;
	background-color: #28a745;
}

/* Base styles and helper stuff */
.hidden  {
	display:  none;
}
 
button  {
	padding:  5px  10px;
	border:  1px  solid  black;
	transition:  250ms background-color;
}

button:hover  {
	cursor:  pointer;
	background-color:  black;
	color:  white;
}

button:disabled:hover  {
	opacity:  0.6;
	cursor:  not-allowed;
}

.text-center  {
	text-align:  center;
}
  
.container  {
	max-width:  400px;
	margin:  0  auto;
	margin-top:  20px;
	padding:  40px;
}