.form-wrapper {
  position: relative;
  display: block;
}
.form-wrapper :where(.container) {
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: var(--container-width);
  max-width: var(--narrow-width);
  margin: var(--section-margin) auto;
}
.form-wrapper .form-group:has(.cta) {
  padding-bottom: 0;
}

form {
  --grid-padding: 10px;
  --inset: 1rem;
}
form .row {
  display: flex;
  margin: 0 calc(var(--grid-padding) * -1);
  flex-wrap: wrap;
}
form .row > * {
  flex: 1 1 100%;
  max-width: 100%;
  padding: 0 var(--grid-padding);
}
form .row .col-6, form .row .col-xs-6 {
  flex: 1 1 50%;
  max-width: 50%;
}
@media (min-width: 568px) {
  form .row .col-sm-6 {
    flex: 1 1 50%;
    max-width: 50%;
  }
}
@media (min-width: 768px) {
  form .row .col-md-6 {
    flex: 1 1 50%;
    max-width: 50%;
  }
}

.form-group {
  position: relative;
  display: block;
  padding: var(--grid-padding) 0;
}

:where(.form-group:has(.form-control)) .form-label {
  position: absolute;
  display: flex;
  align-items: center;
  top: calc(var(--grid-padding) + 3px);
  height: calc(var(--input-height) - 6px);
  line-height: 1.2;
  left: calc(var(--inset, 1rem) / 2);
  transition: 0.2s ease;
  font-weight: 500;
  color: var(--grey-hex);
  background-color: var(--form-input-color);
  padding: 0 calc(var(--inset, 1rem) / 2);
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 3px;
}
:where(.form-group:has(.form-control)):has(.form-control:focus) .form-label, :where(.form-group:has(.form-control)):has(input.form-control:not(:placeholder-shown)) .form-label, :where(.form-group:has(.form-control)):has(textarea.form-control:not(:placeholder-shown)) .form-label, :where(.form-group:has(.form-control)):has(option:checked:not(:disabled)) .form-label {
  top: calc(var(--grid-padding) - 0.5em);
  height: 1em;
  font-size: var(--font-size-xxs);
  color: var(--text-color);
  background-color: var(--background-color);
}
:where(.form-group:has(.form-control)):has(.form-control:focus) .form-control, :where(.form-group:has(.form-control)):has(input.form-control:not(:placeholder-shown)) .form-control, :where(.form-group:has(.form-control)):has(textarea.form-control:not(:placeholder-shown)) .form-control, :where(.form-group:has(.form-control)):has(option:checked:not(:disabled)) .form-control {
  background-color: var(--background-color);
  border-color: var(--form-input-border-focus-color);
}
:where(.form-group:has(.form-control)) .required {
  color: var(--primary-hex);
  font-weight: 700;
  margin-left: 0.2em;
}

:where(.form-group:has(select.form-control)) .form-label {
  pointer-events: none;
}

.form-control {
  width: 100%;
  height: var(--input-height);
  background-color: var(--form-input-color);
  border: var(--input-border);
  border-radius: var(--border-radius-small);
  padding: 0.4em var(--inset, 1rem);
  transition: 0.2s ease;
  font: inherit;
  font-size: var(--font-size-sm);
}

textarea.form-control {
  min-height: 120px;
}

fieldset {
  all: unset;
  display: block;
}

.checkbox-wrapper, .radio-wrapper, .form-group:has(input[type=checkbox]), .form-group:has(input[type=radio]), .form-check-label {
  --offset: 0.2em;
  display: flex;
  align-items: flex-start;
  padding-top: var(--offset);
  margin: 1em 0;
}
.checkbox-wrapper input[type=checkbox], .checkbox-wrapper input[type=radio], .radio-wrapper input[type=checkbox], .radio-wrapper input[type=radio], .form-group:has(input[type=checkbox]) input[type=checkbox], .form-group:has(input[type=checkbox]) input[type=radio], .form-group:has(input[type=radio]) input[type=checkbox], .form-group:has(input[type=radio]) input[type=radio], .form-check-label input[type=checkbox], .form-check-label input[type=radio] {
  margin-top: calc(var(--offset) * -1);
}
@media (max-width: 767px) {
  .checkbox-wrapper, .radio-wrapper, .form-group:has(input[type=checkbox]), .form-group:has(input[type=radio]), .form-check-label {
    --offset: 0.1em;
  }
}

.form-check-label {
  margin: 0;
}

input[type=checkbox], input[type=radio] {
  appearance: none;
  width: 30px;
  aspect-ratio: 1;
  background-color: var(--form-input-color);
  border: 2px solid var(--form-input-border-color);
  height: auto;
  background-image: url("../../Icons/check.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0;
  margin: 0 0.8em 0 0;
  transition: 0.2s ease;
}
input[type=checkbox]:focus, input[type=radio]:focus {
  border-width: 2px;
}
input[type=checkbox]:checked, input[type=radio]:checked {
  border: 2px solid var(--primary-hex);
  background-color: var(--primary-hex);
  background-size: 70%;
}

input[type=radio] {
  border-radius: 50%;
}

/*# sourceMappingURL=form.css.map */