.has-float-label {
    display: block;
    position: relative;
    width: 100%;
  }
  
  .has-float-label label.float-label::after {
    content: " ";
    display: block;
    position: absolute;
    background: white;
    height: 1em;
    top: 2px;
    left: -.2em;
    right: -.2em;
    z-index: -1;
  }
  
  .has-float-label label.float-label {
    color: #7c7c7c;
    font-size: 14px;
    left: 0;
    margin: 0px .75rem;
    transition: all 0.2s ease-in-out;
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    top: 0;
    transform: translateY(0.8rem);
    z-index: 9;
    pointer-events: none;
    background: none !important;
  }

  .has-float-label input:focus + label.float-label,
  .has-float-label input + label.float-label.freeze {
    opacity: 1;
    transform: translateY(-50%);
    font-size:80%;
  }

  .has-float-label textarea:focus + label.float-label,
  .has-float-label textarea + label.float-label.freeze {
    opacity: 1;
    transform: translateY(-50%);
    font-size:80%;
  }  

  .has-float-label ul:focus + label.float-label,
  .has-float-label ul + label.float-label.freeze {
    opacity: 1;
    transform: translateY(-50%);
    font-size:80%;
  }
  .has-float-label select:focus + label.float-label,
  .has-float-label select + label.freeze.float-label {
    opacity: 1;
    transform: translateY(-50%);
    font-size:80%;
  }
  .has-float-label label.selected.float-label {
    opacity: 1;
    transform: translateY(-50%);
    font-size:80%;
  }
  
  
  .has-float-label .form-control::-webkit-input-placeholder {
    opacity: 1;
    -webkit-transition: all .2s;
            transition: all .2s;
  }
  .has-float-label .form-control::-moz-placeholder {
    opacity: 1;
    transition: all .2s;
  }
  .has-float-label .form-control:-ms-input-placeholder {
    opacity: 1;
    transition: all .2s;
  }
  .has-float-label .form-control::placeholder {
    opacity: 1;
    -webkit-transition: all .2s;
            transition: all .2s;
  }
  
  .input-group .has-float-label {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
/* Version centered */

  .has-float-label label.float-label-centered {
    color: #7c7c7c;
    font-size: 14px;
    left: 0;
    margin: 0;
    transition: all 0.2s ease-in-out;
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    top: 0;
    transform: translateY(0.8rem);
    z-index: 9;
    pointer-events: none;
    background: none !important;
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .has-float-label label.float-label-centered span {
    background-color: white;
    padding: 0 5px;
  }
  .has-float-label input:focus + label.float-label-centered,
  .has-float-label input + label.float-label-centered.freeze {
    opacity: 1;
    transform: translateY(-50%);
    font-size:80%;
  }