.form-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.form-field label {
  padding: 10px 14px;
  color: var(--color-secondary-ink);
  line-height: 17.6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: 6px;
  color: var(--color-secondary-ink);
  background: transparent;
  font-size: var(--font-size-form-control);
  line-height: var(--line-height-form-control);
}

.form-field input,
.form-field select {
  min-height: 49px;
  padding: 10px 16px;
}

.form-field textarea {
  min-height: 111px;
  padding: 14px 16px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.form-field select:invalid {
  color: rgba(26, 26, 26, 0.62);
  opacity: 1;
}

.form-field select {
  appearance: none;
  background-image: url("../../src/assets/images/home-overview/overview-select-arrow.svg");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 8px 14px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary-green);
  outline: 2px solid var(--color-primary-green);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .form-field label {
    padding-right: 8px;
    padding-left: 8px;
  }
}