.form-group.placeholder {
    position: relative;
    margin-top:1rem;
}

    .form-group.placeholder label {
        position: absolute;
        top: 3px;
        padding: 7px 0 0 13px;
        transition: all 200ms;
        opacity: 0.5;
    }


    .form-group.placeholder input::-webkit-input-placeholder, .form-group.placeholder textarea::-webkit-input-placeholder {
        color: transparent;
    }

    .form-group.placeholder input:-ms-input-placeholder, form-group.placeholder textarea:-ms-input-placeholder {
        color: transparent;
    }

    .form-group.placeholder input::-ms-input-placeholder, .form-group.placeholder textarea::-ms-input-placeholder {
        color: transparent;
    }

    .form-group.placeholder input::-moz-placeholder, .form-group.placeholder textarea::-moz-placeholder {
        color: transparent;
    }

    .form-group.placeholder input::placeholder, .form-group.placeholder 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-group.placeholder input:not(:placeholder-shown) ~ label, .form-group.placeholder textarea:not(:placeholder-shown) ~ label {
        font-size: 75%;
        transform: translate3d(0, -100%, 0);
        opacity: 1;
    }

    .form-group.placeholder input.light ~ label, .form-group.placeholder textarea.light ~ label {
        padding: 0;
        padding-bottom: 3px;
    }

    .form-group.placeholder input.light:not(:placeholder-shown) ~ label, .form-group.placeholder textarea.light:not(:placeholder-shown) ~ label {
        top: 6px;
    }

    .form-group.placeholder select + label {
        top: 6px;
        font-size: 75%;
        transform: translate3d(0, -100%, 0);
        opacity: 1;
        padding: 0;
        padding-bottom: 3px;
    }