@charset "utf-8";

.progress {
	text-align: center;
	margin-bottom: 20px;
	margin-top: 70px;
	font-size: 0.9em;
}
 
.progress .circle {
	display: inline-block;
	background: #777777;
	width: 30px;
	height: 30px;
	border-radius: 30px;
	position: relative;
}
.barContainer{
	
}
.progress .bar {
	display: inline-block;
	background: #777777;
	
	position: relative;
	width: 10%;
	height: 2px;
	top: -24px;
	margin-left: -3px;
	margin-right: -3px;
	border-left: none;
	border-right: none;
	border-radius: 0;
}

.progress .circle .label {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 30px;
	margin-top: 0px;
	color: #fff;
	font-size: 1.8em;
	font-weight: bold;
}

.progress .circle .progressBarTitle {
	color: #b5b5ba;
	/* line-height: 30px; */
	/* margin-left: -41%;
	margin-right: -41%; */
	white-space: nowrap;
}
.progressBarTitle {
	   display: block;
    margin-left: -35%;
    margin-right: -35%;
}

/* Done / Active */
.progressBarTitle.active{
	color: #4e6e25 !important;
}
.progress .bar.done,.progress .circle.done {
	background: #0177bf;
}
.progress .half.first,.progress .done.first,.progress .bar.end,.progress .half.end{
	width: 5%;
}
.progress .circle.active {
	background: #A8BB44;
}

.progress .bar.active {
	background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}

.progress .circle.done .label {
	color: #FFF;
	background: #0177bf;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.done .progressBarTitle {
	color: #0177bf;
	position: relative;
}

.progress .circle.active .label {
	color: #FFF;
	background: #A8BB44;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.active .progressBarTitle {
	/* color: #0177bf; */
}