.zui-steps {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}
.zui-steps.zui-steps-horizontal {
  align-items: center;
  padding: 10px 25px 20px;
}
.zui-steps.zui-steps-horizontal .step-wrapper {
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.zui-steps.zui-steps-horizontal .step-wrapper.reached .text-wrapper .name {
  color: #41485d;
}
.zui-steps.zui-steps-horizontal .step-wrapper.current .text-wrapper .name {
  color: #fcd404;
}
.zui-steps.zui-steps-horizontal .text-wrapper {
  top: 100%;
  padding-top: 10px;
  text-align: center;
}
.zui-steps.zui-steps-horizontal .text-wrapper .name {
  color: #858b9c;
}
.zui-steps.zui-steps-horizontal .text-wrapper .desc {
  margin-top: 10px;
  color: #858b9c;
}
.zui-steps.zui-steps-horizontal.no-current .reached:last-of-type {
  display: none !important;
}
.zui-steps.zui-steps-vertical {
  align-items: flex-start;
  flex-direction: column;
}
.zui-steps.zui-steps-vertical.vertical-adaptive {
  justify-content: normal;
  padding: 20px 20px 4px;
}
.zui-steps.zui-steps-vertical.vertical-adaptive .bar.vertical-bar {
  flex: 1;
}
.zui-steps.zui-steps-vertical .step-wrapper {
  width: 100%;
  margin: 4px 0;
  align-items: stretch;
}
.zui-steps.zui-steps-vertical .step-wrapper .icon-wrapper {
  position: relative;
}
.zui-steps.zui-steps-vertical .step-wrapper .icon-wrapper .step-node-default {
  min-width: 20px;
  min-height: 20px;
}
.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper {
  left: 16px;
  padding-left: 10px;
}
.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper .name,
.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper .desc {
  white-space: normal;
}
.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper .name {
  color: #41485d;
}
.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper .desc {
  margin-top: 10px;
  color: #858b9c;
}
.zui-steps .icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2e4ea;
}
.zui-steps .icon-wrapper >div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.zui-steps .icon-wrapper:nth-child(2) {
  display: none;
}
.zui-steps .icon-wrapper .step-node-default-icon {
  background: #e2e4ea;
}
.zui-steps .step-wrapper {
  display: flex;
  position: relative;
  min-width: 20px;
  min-height: 20px;
}
.zui-steps .step-wrapper .icon-wrapper {
  min-width: 20px;
  min-height: 20px;
}
.zui-steps .step-wrapper .icon-wrapper .zui-icon {
  width: 20px;
  height: 20px;
  font-size: 20px !important;
  line-height: 20px;
}
.zui-steps .step-wrapper .text-wrapper {
  position: absolute;
}
.zui-steps .step-wrapper .text-wrapper .name,
.zui-steps .step-wrapper .text-wrapper .desc {
  white-space: nowrap;
}
.zui-steps .step-wrapper .text-wrapper .name {
  font-size: 14px;
}
.zui-steps .step-wrapper .text-wrapper .desc {
  line-height: 14px;
  font-size: 12px;
}
.zui-steps .step-wrapper.reached .icon-wrapper,
.zui-steps .step-wrapper.current .icon-wrapper {
  color: #fcd404;
}
.zui-steps .step-wrapper.reached .icon-wrapper .step-node-default-icon,
.zui-steps .step-wrapper.current .icon-wrapper .step-node-default-icon {
  background: #fcd404;
}
.zui-steps .bar {
  position: relative;
  background-color: #e2e4ea;
  overflow: hidden;
}
.zui-steps .bar .bar-inner {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  transition: all linear 1s;
}
.zui-steps .bar.horizontal-bar {
  flex: 1;
  height: 1px;
}
.zui-steps .bar.horizontal-bar .bar-inner {
  width: 100%;
  height: 1px;
  background-color: #fcd404;
}
.zui-steps .bar.vertical-bar {
  left: 10px;
  width: 1px;
  transform: translateX(-50%);
}
.zui-steps .bar.vertical-bar .bar-inner {
  width: 1px;
  height: 100%;
  background-color: #fcd404;
}
.zui-steps .bar:last-of-type.horizontal-bar {
  display: none;
}
.zui-steps .bar:last-of-type.vertical-bar {
  visibility: hidden;
}