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

        .form-group-floating-label > label { top: -17px; left: 0px; font-size: 13px; background: none; height: auto; width: auto; padding: 0 5px; cursor: default; }


    .form-group-floating-label  input::-webkit-input-placeholder,
    .form-group-floating-label  textarea::-webkit-input-placeholder { color: transparent; }
    .form-group-floating-label  input::-ms-input-placeholder,
    .form-group-floating-label  textarea::-ms-input-placeholder { color: transparent; }
    .form-group-floating-label  input::-ms-input-placeholder,
    .form-group-floating-label  textarea::-ms-input-placeholder { color: transparent; }
    .form-group-floating-label  input::-moz-placeholder,
    .form-group-floating-label  textarea::-moz-placeholder { color: transparent; }
    .form-group-floating-label  input::placeholder,
    .form-group-floating-label  textarea::placeholder { color: transparent; }
    /*.form-group-floating-label  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-group-floating-label  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-group-floating-label  input:not(:placeholder-shown),
    .form-group-floating-label  textarea:not(:placeholder-shown) { padding-top: 10px; padding-bottom: 10px; }
        .form-group-floating-label  input:not(:placeholder-shown) ~ label,
        .form-group-floating-label  textarea:not(:placeholder-shown) ~ label { top: -17px; left: 0px; font-size: 13px; color: #777; background: none; height: auto; width: auto; padding: 0 5px; cursor: default; }
    .form-group-floating-label  input:focus:not(:placeholder-shown) ~ label,
    .form-group-floating-label  textarea:focus:not(:placeholder-shown) ~ label { color: #053d5e; }
    .form-group-floating-label  input:focus ~ label,
    .form-group-floating-label  textarea:focus ~ label { top: -17px; left: 0px; font-size: 13px; background: none; height: auto; width: auto; padding: 0 5px; cursor: default; }
    /*validation*/
    .form-group-floating-label  input.input-validation-error:not(:placeholder-shown) ~ label,
    .form-group-floating-label  input.input-validation-error:focus ~ label { color: red; }
    .form-group-floating-label  input.valid:not(:placeholder-shown) ~ label,
    .form-group-floating-label  input.valid:focus ~ label { color: #476a30 }