.form-label-group { position: relative; margin-bottom: 1.5rem; margin-bottom:20px; }
    .form-label-group > input,
    .form-label-group > textarea,
    .form-label-group > label { /*padding: var(--input-padding-y) var(--input-padding-x);*/ }
    .form-label-group > label { position: absolute; top: 0; left: 0; display: block; width: 100%; margin-bottom: 0; color: #495057; border: 1px solid transparent; border-radius: .25rem; transition: all .1s ease-in-out; height: calc(2.25rem + 2px); padding: .375rem .75rem; cursor: text; }
    .form-label-group input::-webkit-input-placeholder,
    .form-label-group textarea::-webkit-input-placeholder { color: transparent; }
    .form-label-group input::-ms-input-placeholder,
    .form-label-group textarea::-ms-input-placeholder { color: transparent; }
    .form-label-group input::-ms-input-placeholder,
    .form-label-group textarea::-ms-input-placeholder { color: transparent; }
    .form-label-group input::-moz-placeholder,
    .form-label-group textarea::-moz-placeholder { color: transparent; }
    .form-label-group input::placeholder,
    .form-label-group textarea::placeholder { color: transparent; }
    /*.form-label-group input:not(:placeholder-shown) { padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3)); padding-bottom: calc(var(--input-padding-y) / 3); }
        .form-label-group input:not(:placeholder-shown) ~ label { padding-top: calc(var(--input-padding-y) / 2); padding-bottom: calc(var(--input-padding-y) / 3); font-size: 10px; color: #777; }*/

    .form-label-group input:not(:placeholder-shown),
    .form-label-group textarea:not(:placeholder-shown) { padding-top: 10px; padding-bottom: 10px; }
        .form-label-group input:not(:placeholder-shown) ~ label,
        .form-label-group textarea:not(:placeholder-shown) ~ label { top: -14px; left: 5px; font-size: 16px; color: #777; background: #FFF; height: auto; width: auto; padding: 0 5px; cursor: default; }
    .form-label-group input:focus:not(:placeholder-shown) ~ label,
    .form-label-group textarea:focus:not(:placeholder-shown) ~ label { color: #053d5e; }
    .form-label-group input:focus ~ label,
    .form-label-group textarea:focus ~ label{top: -14px; left: 5px; font-size: 16px; background: #FFF; height: auto; width: auto; padding: 0 5px; cursor: default;}
    /*validation*/
    .form-label-group input.input-validation-error:not(:placeholder-shown) ~ label,
    .form-label-group input.input-validation-error:focus ~ label {color:red; }
    .form-label-group input.valid:not(:placeholder-shown) ~ label, 
    .form-label-group input.valid:focus ~ label {color:#476a30}