.has-float-label {
    position: relative;
}

.has-float-label .float-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.has-float-label .form-control {
    border: 0;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box !important;
    transition: all .3s linear;
    -webkit-appearance: none !important;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

.has-float-label .float-input-wrap label {
    position: absolute;
    cursor: text;
    font-size: 75%;
    font-weight: normal !important;
    opacity: 1;
    transition: all .2s;
    top: -.5em;
    left: 5px;
    z-index: 3;
    line-height: 1;
    padding: 0 1px;
    background: #fff;
}

.has-float-label .float-input-wrap label:after {
    content: " ";
    display: block;
    position: absolute;
    background: #fff;
    height: 2px;
    top: 50%;
    left: -.2em;
    right: -.2em;
    z-index: -1;
}

.has-float-label .form-control::-webkit-input-placeholder {
    opacity: 0;
    transition: all .2s;
}
.has-float-label .form-control::-moz-placeholder {
    opacity: 0;
    transition: all .2s;
}
.has-float-label .form-control:-ms-input-placeholder {
    opacity: 0;
    transition: all .2s;
}
.has-float-label .form-control::placeholder {
    opacity: 0;
    transition: all .2s;
}

/* label inside input when empty */
.has-float-label .form-control:placeholder-shown:not(:focus) + label {
    font-size: 100%;
    opacity: 1;
    top: 12px;
    left: 5px;
}

/* label floats when focused or has value */
.has-float-label .form-control:focus + label,
.has-float-label .form-control:not(:placeholder-shown) + label {
    font-size: 75%;
    opacity: 0.5;
    top: -0.8em;
    left: 5px;
}

.has-float-label .input-group-addon {
    vertical-align: bottom;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding: 6px 10px;
}