/* 1. Style the placeholder text inside the input */
.date-placeholder::before {
    content: attr(placeholder);
    color: #000000;
    /* Standard placeholder gray */
    width: 100%;
    position: relative;
    top: 10px;
}

/* 2. Hide the default browser mask (mm/dd/yyyy) while empty */
.date-placeholder:invalid::-webkit-datetime-edit {
    color: transparent;
}

/* 3. Reveal the actual date/mask when focused or filled out */
.date-placeholder:focus::before,
.date-placeholder:valid::before {
    display: none;
}

.date-placeholder:focus::-webkit-datetime-edit,
.date-placeholder:valid::-webkit-datetime-edit {
    color: #000000;
    /* Regular text color */
}

.form-group .error {
    color: red;
}