/* sample!
- every from group has an unique css class that follows the schema form-group-{identifier}.
- add css for the icons.
- implement for every element.
- remove comment after done.
*/
.form.form-framework .form-group-email input.error {
  border-color: red;
  border-style: dotted;
}

.form.form-framework.user_hub h2 {
  font-size: 30px
}

.form.form-framework.user_hub .btn {
  background-color: rgb(133, 134, 136);
  padding-left: 50px;
  padding-right: 50px;
  border: 0;
}

.form.form-framework.user_hub .next{
  background-color: rgb(0, 155, 218);
}


.form.form-framework.user_hub .error {
  margin-top: inherit;
}

.form.form-framework.user_hub .help-block,
.form.form-framework.user_hub span.error{
  margin-top: 5px;
  flex-basis: 100%;
}

.form.form-framework.user_hub .input-group-text {
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgb(0, 155, 218);
  color: white;
}

.form.form-framework.user_hub input:not(.error),
.form.form-framework.user_hub select:not(.error),
.form.form-framework.user_hub textarea:not(.error),
.form.form-framework.user_hub .input-group-text:not(.error) {
  border: rgb(0, 155, 218) 2px solid;
}

.form-stepper {
  display: table;
  width: 100%;
  position: relative;
  margin: 50px 0;
}

.form-stepper__step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.form-stepper__step-line {
  background-color: rgb(133, 134, 136);
  height: 10px;
  width: 100%;
  position: absolute;
  top: 16px;
}

.form-stepper__step-index {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  text-align: center;
  padding: 9px 0;
  margin: 0 auto 10px auto;
  font-size: 18px;
  border-radius: 22px;
  color: white;
  background-color: rgb(133, 134, 136);
}

.form-stepper__step--active, .form-stepper__step--prev {
  color: rgb(0, 155, 218)
}

.form-stepper__step--active .form-stepper__step-index,
.form-stepper__step--prev .form-stepper__step-index,
.form-stepper__step-line--active {
  background-color: rgb(0, 155, 218);
  color: white;
}

.input-group.is-invalid .input-group-text, .input-group:has(.form-control.error) .input-group-text{
  background-color: #ee0000 !important;
  border-color: #ee0000 !important;
}