.is-valid {
    border-color: green !important;
}

.is-invalid {
    border-color: red !important;
}

.stepper {
  position: relative;
  width: 100%;
}

.step {
  text-align: center;
  flex: 1;
  position: relative;
}

.step .circle {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  background: #e6e6fa; /* default */
  color: #000;
  line-height: 40px;
  font-weight: bold;
  position: relative;
  z-index: 2;
}

.step.active .circle {
  background: #163b72; /* Bootstrap primary */
  color: #fff;
}

.step .label {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
}

.step::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 100%;
  height: 4px;
  background: #e6e6fa;
  z-index: 1;
}

.step:last-child::after {
  display: none;
}

.step.active ~ .step::after {
  background: #e6e6fa;
}

.step.active::after {
  background: #e6e6fa;
}

.form_heading{
  background-color: #f7edef;
}