.floating-input-field {
  background-color: transparent;
  position: relative;
  z-index: 1;
}

.floating-input-label {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  color: #6b7280;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  z-index: 10;
}

.floating-input-field:focus+.floating-input-label,
.floating-input-field:not(:placeholder-shown)+.floating-input-label {
  top: 10px;
  left: 0.5rem;
  background-color: transparent;
  padding: 0 0.25rem;
  font-size: 0.75rem;
  color: #1f2937;
}

.floating-input-field:focus {
  outline: none;
}

:root {
  --form-input-border-color: #DFE0DD;
  --form-input-height: 4.5rem;
  --form-input-padding: 1rem;
  --form-input-border-radius: .7rem;
}

.floating-input {
  position: relative;
  input:focus,
  input:not(:placeholder-shown) {
    padding-top: 1.5rem !important;
    padding-bottom: .5rem !important;
  }
  input:focus + label,
  input:not(:placeholder-shown) + label {
    top: 20px;
    left: 1rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    color: #1f2937;
  }
  label {
    font-weight: normal !important;
    position: absolute;
    top: 50%;
    left: 1rem;
    color: #6b7280;
    pointer-events: none;
    transform: translateY(-50%);
    transition: all 0.2s ease-in-out;
    z-index: 10;
  }
}