@charset "UTF-8";
.zk-step.is-horizontal,
.zk-step.is-vertical .zk-step__head,
.zk-step.is-vertical .zk-step__main,
.zk-step__line {
  display: inline-block
}

.zk-step {
  position: relative;
  vertical-align: top
}

.zk-step.is-vertical .zk-step__main {
  padding-left: 10px
}

.zk-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #c0ccda
}

.zk-step__line.is-vertical {
  width: 2px;
  box-sizing: border-box;
  top: 30px;
  bottom: 0
}

.zk-step__line.is-horizontal {
  top: 15px;
  height: 2px;
  left: 30px;
  right: 0
}

.zk-step__line.is-icon.is-horizontal {
  right: 4px
}

.zk-step__line-inner {
  display: inherit;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  -webkit-transition: all 150ms;
  transition: all 150ms;
  width: 0;
  height: 0
}

.zk-step__icon {
  display: block;
  line-height: 28px
}

.zk-step__icon>* {
  line-height: inherit;
  vertical-align: middle
}

.zk-step__head {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: transparent;
  text-align: center;
  line-height: 28px;
  font-size: 28px;
  vertical-align: top;
  -webkit-transition: all 150ms;
  transition: all 150ms
}

.zk-step__head.is-finish {
  color: $color-primary;
  border-color: $color-primary
}

.zk-step__head.is-error {
  color: #ff4949;
  border-color: #ff4949
}

.zk-step__head.is-success {
  color: #13ce66;
  border-color: #13ce66
}

.zk-step__head.is-process,
.zk-step__head.is-wait {
  color: #c0ccda;
  border-color: #c0ccda
}

.zk-step__head.is-text {
  font-size: 14px;
  border-width: 2px;
  border-style: solid
}

.zk-step__head.is-text.is-finish {
  color: #fff;
  background-color: $color-primary;
  border-color: $color-primary
}

.zk-step__head.is-text.is-error {
  color: #fff;
  background-color: #ff4949;
  border-color: #ff4949
}

.zk-step__head.is-text.is-success {
  color: #fff;
  background-color: #13ce66;
  border-color: #13ce66
}

.zk-step__head.is-text.is-wait {
  color: #c0ccda;
  background-color: #fff;
  border-color: #c0ccda
}

.zk-step__head.is-text.is-process {
  color: #fff;
  background-color: #c0ccda;
  border-color: #c0ccda
}

.zk-step__main {
  white-space: normal;
  padding-right: 10px;
  text-align: left
}

.zk-step__title {
  font-size: 14px;
  line-height: 32px;
  display: inline-block
}

.zk-step__title.is-finish {
  font-weight: 700;
  color: $color-primary
}

.zk-step__title.is-error {
  font-weight: 700;
  color: #ff4949
}

.zk-step__title.is-success {
  font-weight: 700;
  color: #13ce66
}

.zk-step__title.is-wait {
  font-weight: 400;
  color: #99a9bf
}

.zk-step__title.is-process {
  font-weight: 700;
  color: #475669
}

.zk-step__description {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px
}

.zk-step__description.is-finish {
  color: $color-primary
}

.zk-step__description.is-error {
  color: #ff4949
}

.zk-step__description.is-success {
  color: #13ce66
}

.zk-step__description.is-wait {
  color: #c0ccda
}

.zk-step__description.is-process {
  color: #8492a6
}