﻿
/*//////////////////*/

@charset "UTF-8";
/**
 * Stepbar
 *
 * Step Bar Progress Bar for Bootstrap.
 *
 * Author: Kushal Pandya <kushalspandya@gmail.com> (https://doublslash.com)
 * Date: 1 December, 2015
 */
@-webkit-keyframes active-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes active-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.container {
  margin-top: 20px;
}
.container h2 {
  text-align: center;
}
.container h4 {
  color: #999;
  text-align: center;
}
.container .stepbar-progress {
  margin-top: 30px;
}

.stepbar-progress {
  width: 100%;
  height: 32px;
  border-collapse: collapse;
}
.stepbar-progress .step-item {
  width: 32px;
}
.stepbar-progress .step-item .step-body {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  background-color: #E4E4E7;
  border: 5px solid #E4E4E7;
  border-radius: 50%;
}
.stepbar-progress .step-item .step-body .glyphicon:before {
  color: white;
  margin: auto 4px 0 4px;
  line-height: 20px;
}
.stepbar-progress .step-item-progress {
  width: 0;
  height: 32px;
  verticle-align: middle;
}
.stepbar-progress .step-item-progress .progress-body {
  display: block;
  height: 11px;
  background-color: #E4E4E7;
  border-top: 3px solid #E4E4E7;
  border-bottom: 3px solid #E4E4E7;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, transparent 5%, rgba(255, 255, 255, 0.3) 10%, transparent 15%, rgba(255, 255, 255, 0.3) 20%, transparent 25%, rgba(255, 255, 255, 0.3) 30%, transparent 35%, rgba(255, 255, 255, 0.3) 40%, transparent 45%, rgba(255, 255, 255, 0.3) 50%, transparent 55%, rgba(255, 255, 255, 0.3) 60%, transparent 65%, rgba(255, 255, 255, 0.3) 70%, transparent 75%, rgba(255, 255, 255, 0.3) 80%, transparent 85%, rgba(255, 255, 255, 0.3) 90%, transparent 95%, rgba(255, 255, 255, 0.3) 100%);
  transition: all 1s ease;
}
.stepbar-progress .step-item-progress .progress-body .body-fill {
  width: 20px;
  height: 5px;
  background-color: #1AB394;
}
.stepbar-progress .step-item-first .step-body:after,
.stepbar-progress .step-item-middle .step-body:after,
.stepbar-progress .step-item-middle .step-body:before,
.stepbar-progress .step-item-last .step-body:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  height: 11px;
  width: 6px;
  background-color: #E4E4E7;
  border-top: 3px solid #E4E4E7;
  border-bottom: 3px solid #E4E4E7;
}
.stepbar-progress .step-item-first .step-body:after,
.stepbar-progress .step-item-middle .step-body:after {
  left: 100%;
}
.stepbar-progress .step-item-middle .step-body:before,
.stepbar-progress .step-item-last .step-body:before {
  right: 100%;
}

.stepbar-progress {
  /* Individual Steps */
}
.stepbar-progress[data-current-step="1"][data-step-status="pending"] .step-item[data-step="1"] .step-body {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="1"][data-step-status="pending"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="pending"] .step-item[data-step="1"] .step-body {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="2"][data-step-status="pending"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="pending"] .step-item[data-step="2"] .step-body {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="2"][data-step-status="pending"] .step-item[data-step="2"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="pending"] .step-item[data-step="1"] .step-body:after,
.stepbar-progress[data-current-step="2"][data-step-status="pending"] .step-item[data-step="1"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="2"][data-step-status="pending"] .step-item[data-step="2"] .step-body:before {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="1"] .step-body {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="2"] .step-body {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="2"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="3"] .step-body {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="3"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="1"] .step-body:after,
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="1"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="2"] .step-body:before {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="2"] .step-body:after,
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="2"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="3"][data-step-status="pending"] .step-item[data-step="3"] .step-body:before {
  background-color: #F8AC59;
}
.stepbar-progress[data-current-step="1"][data-step-status="active"] .step-item[data-step="1"] .step-body {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="1"][data-step-status="active"] .step-item[data-step="1"] .step-body .glyphicon {
  -webkit-animation: active-spin infinite 1s linear;
          animation: active-spin infinite 1s linear;
}
.stepbar-progress[data-current-step="1"][data-step-status="active"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="active"] .step-item[data-step="1"] .step-body {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="2"][data-step-status="active"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="active"] .step-item[data-step="2"] .step-body {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="2"][data-step-status="active"] .step-item[data-step="2"] .step-body .glyphicon {
  -webkit-animation: active-spin infinite 1s linear;
          animation: active-spin infinite 1s linear;
}
.stepbar-progress[data-current-step="2"][data-step-status="active"] .step-item[data-step="2"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="active"] .step-item[data-step="1"] .step-body:after,
.stepbar-progress[data-current-step="2"][data-step-status="active"] .step-item[data-step="1"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="2"][data-step-status="active"] .step-item[data-step="2"] .step-body:before {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="1"] .step-body {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="2"] .step-body {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="2"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="3"] .step-body {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="3"] .step-body .glyphicon {
  -webkit-animation: active-spin infinite 1s linear;
          animation: active-spin infinite 1s linear;
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="3"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="1"] .step-body:after,
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="1"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="2"] .step-body:before {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="2"] .step-body:after,
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="2"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="3"][data-step-status="active"] .step-item[data-step="3"] .step-body:before {
  background-color: #1C84C6;
}
.stepbar-progress[data-current-step="1"][data-step-status="pass"] .step-item[data-step="1"] .step-body {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="1"][data-step-status="pass"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="pass"] .step-item[data-step="1"] .step-body {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="2"][data-step-status="pass"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="pass"] .step-item[data-step="2"] .step-body {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="2"][data-step-status="pass"] .step-item[data-step="2"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="pass"] .step-item[data-step="1"] .step-body:after,
.stepbar-progress[data-current-step="2"][data-step-status="pass"] .step-item[data-step="1"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="2"][data-step-status="pass"] .step-item[data-step="2"] .step-body:before {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="1"] .step-body {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="2"] .step-body {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="2"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="3"] .step-body {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="3"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="1"] .step-body:after,
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="1"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="2"] .step-body:before {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="2"] .step-body:after,
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="2"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="3"][data-step-status="pass"] .step-item[data-step="3"] .step-body:before {
  background-color: #1AB394;
}
.stepbar-progress[data-current-step="1"][data-step-status="fail"] .step-item[data-step="1"] .step-body {
  background-color: #ED5565;
}
.stepbar-progress[data-current-step="1"][data-step-status="fail"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="fail"] .step-item[data-step="1"] .step-body {
  background-color: #ED5565;
}
.stepbar-progress[data-current-step="2"][data-step-status="fail"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="fail"] .step-item[data-step="2"] .step-body {
  background-color: #ED5565;
}
.stepbar-progress[data-current-step="2"][data-step-status="fail"] .step-item[data-step="2"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="2"][data-step-status="fail"] .step-item[data-step="1"] .step-body:after,
.stepbar-progress[data-current-step="2"][data-step-status="fail"] .step-item[data-step="1"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="2"][data-step-status="fail"] .step-item[data-step="2"] .step-body:before {
  background-color: #ED5565;
}
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="1"] .step-body {
  background-color: #ED5565;
}
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="1"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="2"] .step-body {
  background-color: #ED5565;
}
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="2"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="3"] .step-body {
  background-color: #ED5565;
}
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="3"] .step-body .glyphicon:before {
  content: "";
}
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="1"] .step-body:after,
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="1"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="2"] .step-body:before {
  background-color: #ED5565;
}
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="2"] .step-body:after,
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="2"] + .step-item-progress .progress-body,
.stepbar-progress[data-current-step="3"][data-step-status="fail"] .step-item[data-step="3"] .step-body:before {
  background-color: #ED5565;
}