.forms__hidden{ display: none;}


.__form{ display: block;}
.__message_hidden{ display: none;}

.max_w_md{ max-width: 75%; margin: 0 auto 30px; }

._continue,
.modal-body h2,
.popup_description{ margin-bottom: 25px;}

h2._h2_accented{ font-size: 28px; color: var(--eco-green);}
h2._h2_accented_2{ font-size: 28px; color: var(--eco-blue);}

._continue{ max-width: 80%;}

._continue_footer{ display: flex; gap:15px}
._continue_footer .popup_description{ text-align: left;}

/* ................................................................ */
.step_container{ display: flex;  justify-content: center; align-items: center; flex-grow:1; position: relative;}
.step_container::after{content: ""; width: 100%; position: absolute; z-index:-1;  border-bottom: 1px dashed var(--gray); }

.steps_{ font-size: 22px; border: 1px dashed var(--gray); background: #fff;  border-radius: 30px; display: block; padding: 1px 20px;}
.steps_ b{ color: var(--eco-blue); }

/* ................................................................ */
.form_cols{ text-align: left;}

.form_wizzard .form-group { margin-top: 15px;}
.form_wizzard .form-check { margin-bottom: 5px;}
.form_wizzard .form-check .form-check-label{ font-size: 15px;}
.form_wizzard .btn-outline-primary{  min-width: 150px}

.form-group{ text-align:left; }
.form-group .invalid-feedback{ margin-left: 20px; }
.form-group label{ margin-left: 20px; margin-bottom: 5px;}

.form_wizzard ._bg_button{ background: #fff;}

._block_submit{ margin: 30px 0}


.form__elem label,
.form__elem .form-check .form-check-label{ font-size: 16px;}

.checkbox-group .custom-control{ margin-left: 20px}
.checkbox-group .label_checkbox{ margin-bottom: 15px}


.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-control:valid,
.was-validated .form-control:invalid{background-size: calc(.75em + .375rem) calc(.75em + .375rem);}


.was-validated .form-control:valid:not([required]){ background:#fff; border-color: var(--eco-gray4);}

.was-validated .form-check-input:valid ~ .form-check-label {
  color: inherit;
}
.was-validated .form-check-input:valid {
  border-color:inherit;
}

.is-invalid-MY.error label.label_checkbox{ color: var(--bs-form-invalid-color);}


img.img_goal{ border-radius: 15px; margin: 0 }


/* .my-tooltip */
.my-tooltip{  display: block; opacity: 0; font-size: 0px; transition: all 200ms ease-in-out; }
.form-control:focus-within ~ .my-tooltip{ opacity: 1; font-size: 12px;}


/* confirmation */
.inputed_email{ font-size: 22px; color: var(--eco-blue);}
.inputed_email_block{ padding: 5px;}

.deco-line._special{ margin-top: 45px;}
.f_small{ font-size: 14px;    }


.modal-body h3 { font-size: 24px; font-weight: 100; }



@media (max-width: 576px) {
  h2._h2_accented,
  h2._h2_accented_2{ font-size: 22px; }

  .form__elem label,
  .form__elem .form-check .form-check-label,
  .form__elem label{font-size: 15px;}

  .max_w_md{ max-width: 100%}


  .form-row.row.g-2 .form-group:first-child { margin-bottom: 7px;}

  .inputed_email{ font-size: 16px;}

  .modal-body h2{ font-size: 24px; }
}