.label-float {
  position: relative; }
  .label-float + .label-float {
    margin-top: 10px; }
  .label-float input {
    border: 0;
    border-bottom: 2px solid lightgrey;
    box-shadow: unset;
    outline: none;
    min-width: 180px;
    font-size: 16px;
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -webkit-appearance: none;
    border-radius: 0; }
    .label-float input:focus {
      margin-top: 0.5rem;
      border: 0;
      border-bottom: 2px solid #3951b2; }
    .label-float input:not(:placeholder-shown) {
      margin-top: 1rem; }
    .label-float input::placeholder {
      color: transparent; }
    .label-float input:required:invalid + label {
      color: red; }
    .label-float input:focus:required:invalid {
      border-bottom: 2px solid red; }
    .label-float input:required:invalid + label:before {
      content: '*'; }
    .label-float input:focus + label,
    .label-float input:not(:placeholder-shown) + label {
      font-size: 13px;
      margin-top: -0.8rem;
      left: 2rem;
      background: #fff;
      color: #3951b2;
      margin-left: 0;
      top: 0;
      bottom: unset; }
  .label-float label {
    color: #cacaca;
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 2rem;
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out; }