/*Theming options - change and everything updates*/
/*don't use more decimals, as it makes browser round errors more likely, make heights unmatching
-also watch using decimals at all at low wizardSize font sizes!*/
.wizardbar {
  font-size: 9px;
  line-height: 1;
  display: inline-block;
  /*margin: 50px 0;*/
}
/*base item styles*/
.wizardbar-item {
  display: inline-block;
  padding: 0.5em 0.8em;
  padding-left: 1.8em;
  text-decoration: none;
  transition: all .15s;
  /*default styles*/
  background-color: #ff5e5e;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  /*margin-right: 2px;*/
}
/*arrow styles*/
.wizardbar-item:before,
.wizardbar-item:after {
  content: "";
  height: 0;
  width: 0;
  border-width: 1em 0 1em 1em;
  border-style: solid;
  transition: all .15s;
  position: absolute;
  left: 100%;
  top: 0;
}
/*arrow overlapping left side of item*/
.wizardbar-item:before {
  border-color: transparent transparent transparent black;
  left: 0;
}
/*arrow pointing out from right side of items*/
.wizardbar-item:after {
  border-color: transparent transparent transparent #ff5e5e;
  z-index: 1;
}
/*current item styles*/
.current.wizardbar-item {
  background-color: #a00;
  color: white;
  cursor: default;
}
.current.wizardbar-item:after {
  border-color: transparent transparent transparent #a00;
}
/*hover styles*/
.wizardbar-item:not(.current):hover {
  /*background-color: #ff1111;*/
}
.wizardbar-item:not(.current):hover:after {
  /*border-color: transparent transparent transparent #ff1111;*/
}
/*remove arrows from beginning and end*/
.wizardbar-item:first-of-type:before,
.wizardbar-item:last-of-type:after {
  border-color: transparent!important;
}
/*no inset arrow for first item*/
.wizardbar-item:first-of-type {
  border-radius: 0.25em 0 0 0.25em;
  padding-left: 1.3em;
}
/*no protruding arrow for last item*/
.wizardbar-item:last-of-type {
  border-radius: 0 0.25em 0.25em 0;
  padding-right: 1.3em;
}
.stepBlocked {
background-color:#777777;
}
.stepSucceed {
    background-color:#58B957;
}
.stepCanceled {
    background-color:#a00;
}



/*base item styles*/
.wizardbar-item-blocked {
  display: inline-block;
  padding: 0.5em 0.8em;
  padding-left: 1.8em;
  text-decoration: none;
  transition: all .15s;
  /*default styles*/
  background-color: #777777;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  /*margin-right: 2px;*/
}
.wizardbar-item-blocked:before {
  border-color: transparent transparent transparent white;
  left: 0;
}
/*arrow pointing out from right side of items*/
.wizardbar-item-blocked:after {
  border-color: transparent transparent transparent #777777;
  z-index: 1;
}



/*base item styles*/
.wizardbar-item-Succeed {
  display: inline-block;
  padding: 0.5em 0.8em;
  padding-left: 1.8em;
  text-decoration: none;
  transition: all .15s;
  /*default styles*/
  background-color: #58B957;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  /*margin-right: 2px;*/
}
.wizardbar-item-Succeed:before {
  border-color: transparent transparent transparent white;
  left: 0;
}
/*arrow pointing out from right side of items*/
.wizardbar-item-Succeed:after {
  border-color: transparent transparent transparent #58B957;
  z-index: 1;
}


/*base item styles*/
.wizardbar-item-Canceled {
  display: inline-block;
  padding: 0.5em 0.8em;
  padding-left: 1.8em;
  text-decoration: none;
  transition: all .15s;
  /*default styles*/
  background-color: #FF1111;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  /*margin-right: 2px;*/
}
.wizardbar-item-Canceled:before {
  border-color: transparent transparent transparent white;
  left: 0;
}
/*arrow pointing out from right side of items*/
.wizardbar-item-Canceled:after {
  border-color: transparent transparent transparent #FF1111;
  z-index: 1;
}