.stepper {

  font-size: 14px;

  font-weight: 400;

  line-height: 1.5;

  padding: 0;

  margin-top: 15px;

  position: absolute;

  top: 0;

  left: 0;

  max-width: 1100px;

  width: 100%;

  overflow: hidden;

  z-index: 1;

  transition: 2s;

  opacity: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow-y: auto;

}

.form-two .checkbox,

.form-four .checkbox {

    display: flex;

    align-items: center;

    justify-content: start;

}

.form-two .checkbox > input[type="checkbox"],

.form-four .checkbox > input[type="checkbox"] {

    margin-right: 10px;

}

.stepper .changed-text-color-blue:hover{

  color: var(--kivi-primary-second);

}

.stepper .changed-text-color-pink:hover{

  color: var(--kivi-secondary-second);

}

.stepper .changed-bg-color-white:hover{

  background-color: #fff;

}

.stepper .switch-container {

  display: flex;

  flex-direction: row !important;

  align-items: center;

  justify-content: space-between;

  height: 40px;

  padding: 0 1em;

  border-radius: 7px;

  outline-color: var(--kivi-primary-second);

  border: 1px solid var(--kivi-primary-second);

  background-color: #fff;

}

.stepper .label {

  margin-right: 20px;

  font-size: 16px;

  color: #333;

}

.stepper .switch {

  position: relative;

  display: inline-block;

  width: 48px;

  height: 24px;

  margin-bottom: 0px !important;

}

.stepper .switch input {

  opacity: 0;

  width: 0;

  height: 0;

}

.stepper .slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  transition: 0.2s;

  border-radius: 34px;

}

.stepper .slider:before {

  position: absolute;

  content: "";

  height: 16px;

  width: 16px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  transition: 0.4s;

  border-radius: 50%;

}

.stepper input:checked + .slider {

  background-color: var(--kivi-primary-second);

}

.stepper input:checked + .slider:before {

  transform: translateX(26px);

}

.stepper a {

  text-decoration: none;

  color: inherit;

}

.stepper ul {

  list-style: none;

}

.stepper h1,

.stepper h2,

.stepper h3 {

  font-weight: 700;

  line-height: 1.25;

  margin: 0 0 0.5em;

}

.stepper img {

  max-width: 100%;

  vertical-align: middle;

}

.stepper .form-step {

  height: 100%;

}

.stepper .form-box {

  display: flex;

  flex-direction: column;

  border: 6px solid var(--kivi-primary-third);

  border-radius: 15px;

  background-color: #fff;

  position: relative;

  width: 100%;

}

.stepper .form-box .stepper-progress {

  position: relative;

  padding: 1em;

}



.stepper .stepper-progress ul.progress-steps {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  gap: 1.4em;

  margin-top: 15px;

  padding-left: 10px;

  flex-wrap: wrap;

}

.stepper .stepper-progress ul.progress-steps li {

  position: relative;

  display: flex;

  align-items: flex-start;

  margin: 2em 0;

}

.stepper .stepper-progress ul.progress-steps li > span {

  position: relative;

  width: 40px;

  height: 40px;

  font-size: var(--font-smaller);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 1em;

  border-radius: 50%;

  border: 2px solid var(--kivi-primary-second);

  background-color: var(--kivi-secondary-firsth);

  z-index: 1;

}

.stepper .stepper-progress ul.progress-steps li.active > span {

  color: var(--kivi-primary-zeroth);

  background-color: var(--kivi-primary-second);

  border: 4px solid var(--kivi-primary-third);

  z-index: 1;

}

.stepper .stepper-progress ul.progress-steps li p span {

  font-size: var(--font-smaller);

  color: var(--light-color);

  display: none;

}

.stepper .stepper-progress ul li p {

  position: absolute;

  top: -2em;

  font-size: 12px;

}

.stepper .form-box form {

  width: 100%;

  padding: 3em 1em;

  background-color: var(--kivi-primary-first);

  border-radius: 30px 30px 15px 15px;

}

.stepper form > div {

  margin-right: 25px;

}

.stepper form > div p {

  color: var(--light-color);

  margin-bottom: 2em;

}

.stepper form > div > div:not(.checkbox) {

  display: flex;

  flex-direction: column;

  margin-bottom: 2em;

}

.stepper form .form-one :where(input, select),

.stepper form .form-five .phone-input

 {

  height: 40px;

  padding: 0 1em;

  border-radius: 7px;

  outline-color: var(--kivi-primary-second);

  border: 1px solid var(--light-color);

  background-color: #fff;

}

.stepper .form-step:not(:nth-of-type(5)) label {

  font-size: var(--font-smaller);

  margin-bottom: 0.5em;

  font-weight: 600;

}



.stepper .form-step:nth-of-type(5) label {

  margin-bottom: 0;

}



.stepper form .grouping {

  display: flex;

}

.stepper form .grouping input {

  max-width: 70px;

  text-align: center;

  margin-right: 1em;

}

.stepper form .checkbox input {

  height: auto;

}

.stepper form > div:not(.btn-group) {

  display: none;

  width: 100%;

  -webkit-animation: fadeIn 0.6s cubic-bezier (0.39, 0.575, 0.565, 1) both;

  animation: fadeIn 0.6s cubic-bezier (0.39, 0.575, 0.565, 1) both;

}

@keyframes fadeIn {

  0% {

    opacity: 0;

    -webkit-transform: translateY(10%);

    transform: translateY(10%);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

.stepper form > div.active {

  display: block;

}



.stepper .btn-group {

  display: flex;

  flex-wrap: wrap;

  gap: 1em;

  margin: 3em 2em 0 2em;

  justify-content: space-between;

  width: 90%;

}

.stepper .btn-group [class*="btn-"],

.btn-select, #sendVerifyCodeButton {

  background-color: var(--kivi-primary-second);

  color: white;

  padding: 1px 3px;

  border: 2px solid var(--kivi-primary-third);

  border-radius: 30px;

  cursor: pointer;

  -webkit-transition: background-color 0.3s, border-color 0.3s ease-out;

  transition: background-color 0.3s, border-color 0.3s ease-out;

  width: 70px;

  height: 35px;

}

.stepper .btn-group .btn-finish

{



  width: 100%;

  margin-bottom: 30px;

}

.stepper .btn-group [class*="btn-"]:disabled, #sendVerifyCodeButton:disabled {

  background-color: var(--light-color);

  border-color: var(--lighter-color);

  cursor: text;

}

.stepper .btn-group [class*="btn-"]:hover:not(:disabled) , #sendVerifyCodeButton:hover:not(:disabled) {

  background-color: var(--dark-color);

  border-color: var(--light-color);

}



.stepper .btn-group .btn-finish

{ 

  display: none;

}

.stepper .form-six.active ~ .btn-group .btn-finish

{

  display: block;

}

.stepper .form-six.active ~ .btn-group .btn-submit,

.stepper .form-five.active ~ .btn-group .btn-submit,

.stepper .form-one.active ~ .btn-group .btn-prev,

.stepper .form-six.active ~ .btn-group .btn-prev

{

visibility: hidden;

}



.stepper .form-six.active ~ .btn-group {

  justify-content: space-between;

}



::placeholder {

  color: var(--light-color);

}



.stepper .stepper-progress ul.progress-steps li > span {

  margin-top: 20px;

}



@media screen and (min-width: 768px) {

  .stepper {

    max-width: 1100px;

  }



  .stepper .form-box {

    flex-direction: row;

  }



  .stepper .form-box form {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: start;

  }

  .stepper .form-box .stepper-progress {

    flex: 1 0 35%;

    min-width: 300px;

    padding: 1em;

    flex-direction: column;

    justify-content: space-around;

    align-items: center;

    display: flex;

    

  }

  .stepper .stepper-progress ul.progress-steps {

    flex-direction: column;

    gap: 0;

    padding: 0;

  }

  .stepper .stepper-progress ul.progress-steps li:not(:last-child)::before {

    content: "";

    position: absolute;

    left: 20px;

    top: 30px;

    width: 3px;

    height: 90px;

    background-color: var(--light-color);

  }

  .stepper .form-box form {

    padding: 2em 3em;

    border-radius: 0 15px 15px 0;

  }

  .stepper .stepper-progress ul li p {

    position: relative;

    top: auto;

    font-size: inherit;

  }

  .stepper .stepper-progress ul.progress-steps li p span {

    display: block;

  }



  .stepper .stepper-progress ul.progress-steps li {

    width: 100%;

    margin-top: 0;

  }

  

}