// >>-- 30 Form_wizard css start --<<

.form-wizard {
  .form-wizard-header{
    position: relative;
  }
  .form-wizard-steps {
    display: flex;
    margin-bottom: 24px;
    height: 55px;
    justify-content: space-between;
    li {
      width: calc(50% - 30px);
      position: relative;
      span{
        display: inline-block;
      }
      &:last-child{
        width: 60px;
        &:after{
          content: none;
        }
      }
      .wizard-steps {
        background-color: rgba(var(--secondary), 1);
        color: var(--white);
        border-radius: 10px;
        font-size: 20px;
        position: relative;
        text-align: center;
        z-index: 1;
        width: 45px;
        height: 45px;
        transition: var(--app-transition);
        padding: 8px;
        &.circle-steps {
          border-radius: 50%;
        }
      }
      &:after {
        width: 100%;
        height: 2px;
        content: "";
        position: absolute;
        background-color: rgba(var(--secondary), 1);
        top: 22px;
        left: 0;
        transition: var(--app-transition);
      }
      &.active,
      &.activated {
        .wizard-steps,
        &::after {
          background-color: rgba(var(--primary), 1);
          color: var(--white);
        }
      }
    }
  }
  .vertica-wizard-steps{
    li{
      position: relative;
      .wizard-steps {
        background-color: rgba(var(--secondary), 1);
        color: var(--white);
        border-radius: 10px;
        display: block;
        width: 45px;
        height: 45px;
        line-height: 2.3;
        text-align: center;
        z-index: 1;
        transition: var(--app-transition);
        margin: 0 auto 36px auto;
        font-size: 20px;
        &.circle-steps {
          border-radius: 50%;
        }
      }
      &:after {
        width: 2px;
        height: 100%;
        content: "";
        position: absolute;
        background-color: rgba(var(--secondary), 1);
        top: 100%;
        left: 50%;
        transition: var(--app-transition);
      }
      &:last-child {
        &:after {
          content: none;
        }
      }
      &.active,
      &.activated {
        .wizard-steps,
        &::after {
          background-color: rgba(var(--primary), 1);
          color: var(--white);
        }
      }
    }
  }
  .wizard-fieldset {
    display: none;
    &.show {
      display: block;
    }
    &.complted {
      text-align: center;
      vertical-align: middle;
    }
  }
  .wizard-form-error {
    display: none;
    color: rgba(var(--danger), 1);
  }
}

// >>-- 30 Form_wizard css end --<<