.nav-wizard>li {
  float: left
}

.nav-wizard>li>a {
  position: relative;
  background-color: #eee
}

.nav-wizard>li>a .badge {
  margin-left: 3px;
  color: #eee;
  background-color: #428bca
}

.nav-wizard>li:not(:first-child)>a {
  padding-left: 34px
}

.nav-wizard>li:not(:first-child)>a:before {
  width: 0;
  height: 0;
  border-top: 20px inset transparent;
  border-bottom: 20px inset transparent;
  border-left: 20px solid #fff;
  position: absolute;
  content: "";
  top: 0;
  left: 0
}

.nav-wizard>li:not(:last-child)>a {
  margin-right: 6px
}

.nav-wizard>li:not(:last-child)>a:after {
  width: 0;
  height: 0;
  border-top: 20px inset transparent;
  border-bottom: 20px inset transparent;
  border-left: 20px solid #eee;
  position: absolute;
  content: "";
  top: 0;
  right: -20px;
  z-index: 2
}

.nav-wizard>li:first-child>a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.nav-wizard>li:last-child>a {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.nav-wizard>li.done:hover>a, .nav-wizard>li:hover>a {
  background-color: #d5d5d5
}

.nav-wizard>li.done:hover>a:before, .nav-wizard>li:hover>a:before {
  border-right-color: #d5d5d5
}

.nav-wizard>li.done:hover>a:after, .nav-wizard>li:hover>a:after {
  border-left-color: #d5d5d5
}

.nav-wizard>li.done>a {
  background-color: #e2e2e2
}

.nav-wizard>li.done>a:before {
  border-right-color: #e2e2e2
}

.nav-wizard>li.done>a:after {
  border-left-color: #e2e2e2
}

.nav-wizard>li.active>a, .nav-wizard>li.active>a:hover, .nav-wizard>li.active>a:focus {
  color: #fff;
  background-color: #428bca
}

.nav-wizard>li.active>a:after {
  border-left-color: #428bca
}

.nav-wizard>li.active>a .badge {
  color: #428bca;
  background-color: #fff
}

.nav-wizard>li.disabled>a {
  color: #777
}

.nav-wizard>li.disabled>a:hover, .nav-wizard>li.disabled>a:focus {
  color: #777;
  text-decoration: none;
  background-color: #eee;
  cursor: default
}

.nav-wizard>li.disabled>a:before {
  border-right-color: #eee
}

.nav-wizard>li.disabled>a:after {
  border-left-color: #eee
}

.nav-wizard.nav-justified>li {
  float: none
}

.nav-wizard.nav-justified>li>a {
  padding: 10px 15px
}

@media (max-width:768px) {
  .nav-wizard.nav-justified>li>a {
    border-radius: 4px;
    margin-right: 0
  }

  .nav-wizard.nav-justified>li>a:before, .nav-wizard.nav-justified>li>a:after {
    border: none !important
  }
}