.form-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.form-field.wide {
  width: 100%;
}

.form-field.wide input {
  width: 100%;
}

.form-field-wrapper {
  position: relative;
}

.form-control {
  border: 1px solid rgba(0, 10, 23, 0.25);
  border-radius: 4px;
  padding: 22px;
  font-size: 18px;
  line-height: 24px;
  min-width: 300px;
  transition: border 0.3s ease;
}

.form-control:hover,
.form-control:focus {
  border: 1px solid var(--primary-color);
}

.form-field-title {
  position: absolute;
  top: -36px;
  font-size: 20px;
  line-height: 24px;
}

.form-field label {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
  font-size: 18px;
  pointer-events: none;
  margin: 0;
  transition: all 0.3s ease;
}

.form-control:focus + label,
.form-control:not(:placeholder-shown) + label {
  top: 17px;
  font-size: 12px;
  color: rgba(0, 10, 23, 0.5);
}