.rf-registrationForm {
  padding: 10px;
}

* {
  box-sizing: border-box;
}

.rf-input-container {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.rg-form {
  margin: auto;
}

.rf-icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

.rf-input-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border-radius: 0;
}

.rf-input-field:focus {
  border: 2px solid dodgerblue;
}

.rf-btn {
  background-color: dodgerblue;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  border-radius: 0;
}

.rf-btn:hover {
  opacity: 1;
}

      .form-wrapper{
      max-width: 720px;
      }	


.otp-box { width: 50px; height: 50px; text-align: center; font-size: 1.25rem; }

/* Put this after your other CSS so it wins */
.rf-input-container { 
  display: block;              /* simplest: normal block flow */
}
.rf-input-container .form-control { 
  display: block; 
  width: 100%;
}
.rf-input-container .invalid-feedback {
  width: 100%;
  margin-top: .25rem;
  font-size: .875em;
}
/* only show when invalid */
.rf-input-container .form-control.is-invalid ~ .invalid-feedback {
  display: block !important;
}