@import "./variables.css";
label {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  font-family: var(--brand-font);
}

.input {
  border: 1px solid var(--secondary-color);
  box-sizing: border-box;
  border-radius: 4px;
  height: 40px;
  display: block;
  width: 100%;
  max-width: 350px;
  padding: 9px;
  font-size: 16px;
  line-height: 24px;
  font-family: var(--brand-font);
  color: var(--secondary-color);
}

.input--error {
  background: #FCE6E6;
  border: 1px solid #CC0000;
}

.input:focus {
  background: #E7F2FA;
  border: 1px solid #0D7DCA;
  outline: none;
  box-sizing: border-box;
  box-shadow: 1px 0px 6px rgba(13, 125, 202, 0.3), 0px 1px 6px rgba(13, 125, 202, 0.3);
  border-radius: 4px;
}

.input:disabled {
  background: #EBEBEB;
  -webkit-text-fill-color: var(--secondary-color);
  opacity: 1;
}

.required::after {
  content: " *";
  color: var(--red-color);
}

@media (max-width: 575px) {
  input[type=date] {
    width: 100%;
  }
}

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