.steps-indicator {
  /* ---- steps quantity ---- */
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 20px 0 0 0;
  height: 30px;
  list-style: none;
  /* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
}
.steps-indicator:before {
  background-color: #e6e6e6;
  content: '';
  position: absolute;
  height: 1px;
}
.steps-indicator.steps-2:before {
  left: calc(100% / 2 / 2);
  right: calc(100% / 2 / 2);
}
.steps-indicator.steps-3:before {
  left: calc(100% / 3 / 2);
  right: calc(100% / 3 / 2);
}
.steps-indicator.steps-4:before {
  left: calc(100% / 4 / 2);
  right: calc(100% / 4 / 2);
}
.steps-indicator.steps-5:before {
  left: calc(100% / 5 / 2);
  right: calc(100% / 5 / 2);
}
.steps-indicator.steps-6:before {
  left: calc(100% / 6 / 2);
  right: calc(100% / 6 / 2);
}
.steps-indicator.steps-7:before {
  left: calc(100% / 7 / 2);
  right: calc(100% / 7 / 2);
}
.steps-indicator.steps-8:before {
  left: calc(100% / 8 / 2);
  right: calc(100% / 8 / 2);
}
.steps-indicator.steps-9:before {
  left: calc(100% / 9 / 2);
  right: calc(100% / 9 / 2);
}
.steps-indicator.steps-10:before {
  left: calc(100% / 10 / 2);
  right: calc(100% / 10 / 2);
}
.steps-indicator * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.steps-indicator li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  padding-top: 10px;
  text-align: center;
  line-height: 15px;
}
.steps-indicator li a {
  color: #808080;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  transition: 0.25s;
  cursor: pointer;
}
.steps-indicator li a:before {
  position: absolute;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background-color: #e6e6e6;
  content: '';
  transition: 0.25s;
}
.steps-indicator li a:hover {
  color: #4d4d4d;
}
.steps-indicator.steps-2 li {
  width: calc(100% / 2);
}
.steps-indicator.steps-3 li {
  width: calc(100% / 3);
}
.steps-indicator.steps-4 li {
  width: calc(100% / 4);
}
.steps-indicator.steps-5 li {
  width: calc(100% / 5);
}
.steps-indicator.steps-6 li {
  width: calc(100% / 6);
}
.steps-indicator.steps-7 li {
  width: calc(100% / 7);
}
.steps-indicator.steps-8 li {
  width: calc(100% / 8);
}
.steps-indicator.steps-9 li {
  width: calc(100% / 9);
}
.steps-indicator.steps-10 li {
  width: calc(100% / 10);
}
.steps-indicator.steps-11 li {
  width: calc(100% / 11);
}
.steps-indicator li.default {
  pointer-events: none;
}
.steps-indicator li.default a:hover {
  color: #808080;
}
.steps-indicator li.current,
.steps-indicator li.editing {
  pointer-events: none;
}
.steps-indicator li.current a:before {
  background-color: #808080;
}
.steps-indicator li.done a:before {
  background-color: #339933;
}
.steps-indicator li.editing a:before {
  background-color: #ff0000;
}