.textInputContainer .labelContainer,
.textareaContainer .labelContainer {
  position: relative;
}
.textInputContainer label,
.textareaContainer label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 1px));
  display: block;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 500ms, top 500ms;
  cursor: text;
  color: var(--color-black);
}

.textInputContainer input {
  width: 100%;
  text-align: center;
  border: 0;
  border-radius: var(--border-radius);
  background-color: var(--color-gray-form);
  color: var(--color-black);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-xs);
  text-transform: uppercase;
  text-transform: none !important;
  margin-top: 0px;
  transition: margin-top 400ms, color 400ms, outline 400ms, background-color 400ms;
  outline: var(--outline-width) solid transparent !important;
  outline-offset: var(--outline-offset) !important;
}
@media screen and (hover: hover) {
  .textInputContainer input:hover {
    background-color: var(--color-white) !important;
    outline: var(--outline-width) solid var(--color-black) !important;
    outline-offset: var(--outline-offset) !important;
  }
}
.textInputContainer input:focus {
  background-color: var(--color-white) !important;
  outline: var(--outline-width) solid var(--color-black) !important;
  outline-offset: var(--outline-offset) !important;
}
.textInputContainer input:focus + label, .textInputContainer input:not(:placeholder-shown) + label {
  visibility: hidden;
}
.textInputContainer.error input {
  outline: var(--outline-width) solid red !important;
  outline-offset: var(--outline-offset) !important;
  color: red;
}
.textInputContainer.error strong {
  color: red;
  margin-top: 3px;
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-xs);
  text-transform: uppercase;
}
.textInputContainer.movePlaceholder input:focus, .textInputContainer.movePlaceholder input:not(:placeholder-shown) {
  margin-top: 1.9em;
}
.textInputContainer.movePlaceholder input:focus + label, .textInputContainer.movePlaceholder input:not(:placeholder-shown) + label {
  visibility: visible;
  transform: translate(-50%, 0.3em);
  top: 0px;
  color: grey;
}

.textareaContainer textarea {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--border-radius);
  background-color: var(--color-gray-form);
  color: var(--color-black);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-xs);
  text-transform: uppercase;
  text-transform: none !important;
  resize: none;
  margin-top: 0px;
  transition: margin-top 400ms, color 400ms, outline 400ms;
  outline: var(--outline-width) solid transparent !important;
  outline-offset: var(--outline-offset) !important;
}
@media screen and (hover: hover) {
  .textareaContainer textarea:hover {
    background-color: var(--color-white) !important;
    outline: var(--outline-width) solid var(--color-black) !important;
    outline-offset: var(--outline-offset) !important;
  }
}
.textareaContainer textarea:focus {
  background-color: var(--color-white) !important;
  outline: var(--outline-width) solid var(--color-black) !important;
  outline-offset: var(--outline-offset) !important;
}
.textareaContainer textarea:focus + label, .textareaContainer textarea:not(:placeholder-shown) + label {
  visibility: hidden;
}
.textareaContainer.error textarea {
  outline: var(--outline-width) solid red !important;
  outline-offset: var(--outline-offset) !important;
  color: red;
}
.textareaContainer.error strong {
  color: red;
  margin-top: 3px;
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-xs);
  text-transform: uppercase;
}
.textareaContainer.movePlaceholder textarea:focus, .textareaContainer.movePlaceholder textarea:not(:placeholder-shown) {
  margin-top: 1.9em;
}
.textareaContainer.movePlaceholder textarea:focus + label, .textareaContainer.movePlaceholder textarea:not(:placeholder-shown) + label {
  visibility: visible;
  transform: translate(-50%, 0.3em);
  top: 0px;
  color: grey;
}

.form__field.error strong {
  color: red;
  margin-top: 6px;
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-xs);
  text-transform: uppercase;
}

.radioInputContainer input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  pointer-events: none;
}
.radioInputContainer label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-xs);
  text-transform: uppercase;
}
.radioInputContainer label.underline {
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-color: transparent;
  text-decoration-thickness: var(--underline-thickness);
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-color: transparent;
  -webkit-text-decoration-style: solid;
  -webkit-text-decoration-thickness: var(--underline-thickness);
}
@media screen and (hover: hover) {
  .radioInputContainer label.underline:hover {
    color: var(--color-darkgray);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
    text-decoration-color: var(--color-darkgrey);
    text-decoration-thickness: var(--underline-thickness);
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-color: var(--color-darkgrey);
    -webkit-text-decoration-style: solid;
    -webkit-text-decoration-thickness: var(--underline-thickness);
  }
}
.radioInputContainer label.grey {
  flex: 1 1 0px;
  width: 100%;
  cursor: pointer;
  height: var(--button-height);
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-gray);
}
.radioInputContainer label.outline {
  flex: 1 1 0px;
  width: 100%;
  cursor: pointer;
  border-radius: var(--border-radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--button-v-padding) var(--button-h-padding);
  transition: outline 400ms, background-color 400ms;
  outline: var(--outline-width) solid lightgrey !important;
  outline-offset: var(--outline-offset) !important;
}
@media screen and (hover: hover) {
  .radioInputContainer label.outline:hover {
    background-color: var(--color-white) !important;
    outline: var(--outline-width) solid var(--color-black) !important;
    outline-offset: var(--outline-offset) !important;
  }
}
.radioInputContainer input:checked + .grey, .radioInputContainer input:checked + .outline {
  outline: var(--outline-width) solid var(--color-black) !important;
  outline-offset: var(--outline-offset) !important;
}
.radioInputContainer input:checked + .underline {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-color: var(--color-black);
  text-decoration-thickness: var(--underline-thickness);
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-color: var(--color-black);
  -webkit-text-decoration-style: solid;
  -webkit-text-decoration-thickness: var(--underline-thickness);
}

.submitButton {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-xs);
  text-transform: uppercase;
  margin-top: 1lh;
  min-width: var(--button-minwidth);
  background-color: var(--color-black) !important;
  border-radius: var(--border-radius);
  color: var(--color-lightgray);
  padding: var(--button-v-padding) var(--button-h-padding);
  padding: 8px 24px;
  cursor: pointer;
}
.submitButton[disabled=""] {
  pointer-events: none;
  opacity: 0.5;
}

/*# sourceMappingURL=inputs.build.css.map */