/***
Bootstrap Wizard
***/

.form-wizard {
	
	.progress {
  		margin-bottom: 30px;
	}

	.steps {
		padding: 10px 0;
	  	margin-bottom: 15px;
	  	background-color: #fff ;
	 	background-image: none ;
	  	filter:none ;
	  	border: 0px;
	  	box-shadow: none ;

	  	> li {
	  		> a.step {
		  		background-color: #fff ;
		  		background-image: none ;
		  		filter:none;
		  		border: 0px;
		  		box-shadow: none ;

		  		&:hover {
  					background: none;
				}			

				> .number {
					  background-color: #eee;
					  display: inline-block;
					  text-align: center !important;
					  font-size: 16px;
					  font-weight: 300;
					  padding: 11px 15px 13px 15px;
					  margin-right: 10px;
					  height: 45px;
					  width: 45px;
					  -webkit-border-radius: 50% !important;
					     -moz-border-radius: 50% !important;
					          border-radius: 50% !important;
				}

				> .desc {
				  	display: inline-block;
				  	font-size: 16px; 
				  	font-weight: 300;

				  	> i {
  						display: none;
					}
				}

			}

			&.active {
				> a.step {
					.number {
						background-color: $brand-success;
	  					color: #fff;
	  				}

	  				.desc {
	  					color: #333;
	  				}
				}
			}

			&.done {
				> a.step {
					.number {
						background-color: $brand-warning;
  						color: #fff;
  					}

  					.desc {
  						color: #333; 					

	  					i {
	  						font-size: 12px;
							font-weight: normal;
							color: #999;
							display: inline-block;  
	  					}
	  				}
				}
			}
		}
	}
}

@media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) { /* 768px & 1200px */
  .form-wizard .step .desc {
    margin-top: 10px;
    display: block;
  }
} 

@media (max-width: $screen-sm-min) { /* 768px */
  .form-wizard .steps > li > a {
    text-align: left;
  }
}