label.required  {
    
    grid-template-columns: auto auto 1fr;
  }
  
  label.required input,
  label.required select,
  label.required textarea,
  p.feedback.attention {
    
    grid-column: 1 / -1;
  }
  
  .helpTip {
    position: relative;
  }
  
  .helpTip button {
    
    width: 1rem;
    height: 1rem;
    
    padding: 0rem;
    
    border-radius: 50%;
    
    color: #fff;
    background: #fb6262;
    
    position: relative;
  }
  
  .helpTip button::after {              /* these make the little arrow */
    
    content: '';
    
    visibility: hidden;
    
    position: absolute;
    top: 100%;
    left: 50%;
    
    transform: translate(-50%, 50%);
    
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-bottom: 0.25em solid #000;
    
    z-index: -1;
  }
  
  .helpTip span {
    
    visibility: hidden;
    
    position: absolute;
    top: calc(100% + 0.125em);          /* the arrow is positioned 2px (0.125em) downward, so we need to adjust */
    left: -1em;                         /* slightly to the left of the arrow */
    
    max-width: 20em;
    padding: 0.5em;
    
    color: #fff;
    background: #000;
    
    z-index: -1;
  }
  
  .helpTip:hover button::after,
  .helpTip:hover span {
    
    visibility: initial;
    z-index: 100;
  }