@import "layout/variable.css";
@import "layout/general.css";
@import "layout/font-size.css";
@import "layout/button.css";
@import "layout/helper.css";
@import "layout/flex.css";
@import "layout/shadows.css";
@import "layout/radious.css";
@import "layout/icons.css";
@import "layout/color.css";
@import "layout/media.css";
@import "layout/loader.css";

@import "layout/click-slider.css";
@import "layout/form.css";
@import "layout/list.css";
@import "layout/table.css";

@import "layout/faq.css";

@import "layout/default.css";
@import "layout/info.css";

@import "layout/content.css";
@import "layout/custom.css";
@import "layout/responsive.css";

.stepcontainer {
  width: 100%;
  margin-top: 10px;
	padding:10px;
}

.stepprogressbar {
  counter-reset: step;
}

.stepprogressbar li {
  position: relative;
  list-style: none;
  float: left;
  width: 33.33%;
  text-align: center;
}

/* Circles */
.stepprogressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 40px;
  height: 40px;
  border: 0px solid #2979FF;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: #FF9100;
  color: #ffffff !important;
   
  /* Center # in circle */
  line-height: 39px;
}

.stepprogressbar li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: orange ;
	color: #ffffff !important;
  top: 20px; /*half of height Parent (li) */
  left: -50%;
  z-index: -1;
}

.stepprogressbar li:first-child:after {
  content: none;
}

.stepprogressbar li.stepactive:before {
  background: #0E71CE;
	color: #ffffff !important;
  content: "✔";  
}

.stepprogressbar li.stepactive + li:after {
  background: #00E676;
color: #ffffff !important;
}