.n-stepper-header {
  counter-reset: step-header;
}

.n-stepper-step {
  counter-increment: step-header;
  position: relative;
  border: 1px solid;
  padding: 8px 16px 8px 8px;
}

.n-stepper-step:not(:first-child) {
  padding-right: 30px;
  padding-left: 22px;
}

.n-stepper-step:before,
.n-stepper-step:after {
  content: '';
  height: calc(50% + 1px);
  width: 100%;
  position: absolute;
  z-index: 0;
  left: -7px;
  border: 1px solid;
  
}

.n-stepper-step:before {
  border-bottom: none;
}

.n-stepper-step:after {
  border-top: none;
}

.n-stepper-step:first-child {
  border-left: none;
}

.n-stepper-step:last-child {
  overflow: hidden;
  border-right: none;
}

.n-stepper-step:first-child:after,
.n-stepper-step:first-child:before {
  border-right: none;
}

.n-stepper-step:last-child:after,
.n-stepper-step:last-child:before {
  border-left: none;
}

.n-stepper-step:first-child,
.n-stepper-step:first-child:after,
.n-stepper-step:first-child:before {
  border-radius: 0px 6px 6px 0px;
}

.n-stepper-step:last-child,
.n-stepper-step:last-child:after,
.n-stepper-step:last-child:before {
  border-radius: 6px 0px 0px 6px;
}

.n-stepper-step:not(:first-child, :last-child) {
  border-right: none;
  border-left: none;
}

.n-stepper-step:before {
  top: -1px;
  transform: skew(-30deg);
}

.n-stepper-step:after {
  bottom: -1px;
  transform: skew(30deg);
}

.n-stepper-step.n-stepper-step--active:before,
.n-stepper-step.n-stepper-step--active:after {
  background-color: var(--package-primary-5-color, #F2F9F6);
}

.n-stepper-step.n-stepper-step--active,
.n-stepper-step.n-stepper-step--active:before,
.n-stepper-step.n-stepper-step--active:after {
  border-color: var(--package-primary-50-color, #80C6AA);
}


.n-stepper-step.n-stepper-step--pending:before,
.n-stepper-step.n-stepper-step--pending:after {
  background-color: #FFF;
}

.n-stepper-step.n-stepper-step--pending,
.n-stepper-step.n-stepper-step--pending:before,
.n-stepper-step.n-stepper-step--pending:after {
  border-color: #D2D6DC;
}

.n-stepper-step.n-stepper-step--complete {
  color: #fff;
}

.n-stepper-step.n-stepper-step--complete:before,
.n-stepper-step.n-stepper-step--complete:after {
  background-color: var(--package-primary-bg-color, #00AD68);
}

.n-stepper-step.n-stepper-step--complete,
.n-stepper-step.n-stepper-step--complete:before,
.n-stepper-step.n-stepper-step--complete:after {
  border-color: var(--package-primary-bg-color, #00AD68);
}

.n-stepper-step:first-child.n-stepper-step--active {
  background-color: var(--package-primary-5-color, #F2F9F6);
}

.n-stepper-step:first-child.n-stepper-step--pending {
  background-color: #fff;
}

.n-stepper-step:first-child.n-stepper-step--complete {
  background-color: var(--package-primary-bg-color, #00AD68);
}

.n-stepper-step .n-stepper-step--step {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F0F0F0;
}

.n-stepper-step .n-stepper-step--step:before {
  position: absolute;
  color: var(--package-main-font-color);
  font-size: var(--layout-text-body2, 18px);
  line-height: normal;
  content: counter(step-header);
}

.n-stepper-step .n-stepper-step--step,
.n-stepper-step .n-stepper-label {
  position: relative;
  z-index: 1;
}

.n-stepper-step.n-stepper-step--complete .n-stepper-step--step {
  background-color: unset;
}

.n-stepper-step.n-stepper-step--complete .n-stepper-step--step:before {
  content: "\ec41";
  color: #fff;
  font-size: 33px;
  font-family: icomoon!important;
}

.n-stepper-step.n-stepper-step--pending .n-stepper-label {
  color: var(--package-main-font-color);
}

/* ? Active header */
.n-stepper-step.n-stepper-step--active .n-stepper-label {
  color: var(--package-primary-dark-color);
}

.n-stepper-step.n-stepper-step--active .n-stepper-step--step {
  background-color: var(--package-primary-dark-color);
}

.n-stepper-step.n-stepper-step--active .n-stepper-step--step:before {
  color: #fff;
}