.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;
}