.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-warning:empty {
    display: none;
  }
  
  /* :invalid is not yet supported in IE 9, so split selectors */
  
  .hf-invalid + .hf-warning {
    display: none;
    position: absolute;
  }
  :invalid + .hf-warning {
    display: none;
    position: absolute;
  }
  
  .hf-invalid:focus + .hf-warning:not(:empty) {
    display: block;
  }
  :invalid:focus + .hf-warning:not(:empty) {
    display: block;
  }