.hf-warning {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .75));
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 1px;
    box-shadow: 0 12px 10px -10px rgba(0, 0, 0, .5);
    box-sizing: border-box;
    max-width: 100%;
    color: #621;
    font-size: 14px;
    line-height: 18px;
    padding: .25em .5em;
    pointer-events: none;
    /* make sure, \n is preserved in messages. */
    white-space: pre-line;
}

.hf-invalid+.hf-warning,
:invalid+.hf-warning {
    display: none;
    position: absolute;
}

.hf-invalid:focus+.hf-warning,
:invalid:focus+.hf-warning {
    display: block;
}