/*
 * E-cards: the form to write a card puts its fields in tables, a label row
 * above a row of fields, two columns wide. On a phone those tables keep
 * their columns but share the width evenly, and each field fills its cell.
 * Loaded after common.css (see old/sn-sections.php).
 */
@media (max-width: 767px) {
  #frmEcard table { display: table; width: 100% !important; table-layout: fixed; }
  #frmEcard td { overflow-wrap: break-word; }
  /* The message and its font choices: one under the other, the message the
     full width. */
  #frmEcard table:has(> tbody > tr > td > textarea),
  #frmEcard table:has(> tbody > tr > td > textarea) > tbody,
  #frmEcard table:has(> tbody > tr > td > textarea) > tbody > tr,
  #frmEcard table:has(> tbody > tr > td > textarea) > tbody > tr > td { display: block; width: auto !important; }
  /* The row with the "next" button between two arrows keeps its natural
     widths, so the button's text fits. */
  #frmEcard table:has(img[src*="pijl_rood"]) { table-layout: auto; }
  #frmEcard input[type=text], #frmEcard input[type=email], #frmEcard textarea { width: 100% !important; }
}