.form-floating-label {
  position: relative;
  
}

.form-floating-label [type='text'],
.form-floating-label [type='password'],
.form-floating-label [type='date'],
.form-floating-label [type='datetime'],
.form-floating-label [type='datetime-local'],
.form-floating-label [type='month'],
.form-floating-label [type='week'],
.form-floating-label [type='email'],
.form-floating-label [type='number'],
.form-floating-label [type='search'],
.form-floating-label [type='tel'],
.form-floating-label [type='time'],
.form-floating-label [type='url'],
.form-floating-label [type='color'] {
  margin-bottom: 0;
  color: #8a8a8a;
  font-size: 32px;
  font-weight: 300;
  padding: 18px 1rem 9px 15px;
}

.form-floating-label textarea {
  margin-bottom: 0;
  color: #787878;
  font-size: 22px;
  font-weight: 300;
  padding: 18px 1rem 9px 15px;
  min-height: 150px;
}


.form-floating-label label {
  color: #000;
  font-size: 18px;
  position: absolute;
  pointer-events: none;
  left: 15px;
  bottom: 24px;
  transition: all 0.2s ease-in;
  font-weight: 300;
}

.form-floating-label textarea ~ label {
    color: #000;
    top: 16px;
    font-size: 18px;
    font-weight: 300;
}

.form-floating-label input:focus ~ label,
.form-floating-label input:disabled[value] ~ label,
.form-floating-label.has-value input ~ label {
  top: 8px;
  font-size: 14px !important;
  color: #787878;
  bottom: 12px;
  font-weight: 400;
}

.form-floating-label textarea:focus ~ label,
.form-floating-label.has-value textarea ~ label {
  top: 0;
  font-size: 14px;
  color: #787878;
  bottom: 12px;
  font-weight: 400;
}




@media (max-width: 575px) {
.form-floating-label [type='text'],
.form-floating-label [type='tel'] {
    font-size: 22px;
}

.form-floating-label textarea ~ label {
    top: 20px;
}

.form-floating-label textarea:focus ~ label,
.form-floating-label.has-value textarea ~ label {
  top: 20px;
}

}