@media screen and (max-width: 991.98px) {
  .eol-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table.eol-mobile-table {
    display: table !important;
    width: max-content !important;
    min-width: 100%;
    max-width: none !important;
    table-layout: auto !important;
  }

  table.eol-mobile-table > thead { display: table-header-group !important; }
  table.eol-mobile-table > tbody { display: table-row-group !important; }
  table.eol-mobile-table > tfoot { display: table-footer-group !important; }
  table.eol-mobile-table > :is(thead, tbody, tfoot) > tr,
  table.eol-mobile-table > tr {
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  table.eol-mobile-table > :is(thead, tbody, tfoot) > tr > :is(th, td),
  table.eol-mobile-table > tr > :is(th, td) {
    display: table-cell !important;
    width: auto !important;
    min-width: 0;
    max-width: 32rem;
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
  }
  table.eol-mobile-table td::before {
    content: none !important;
    display: none !important;
  }
  /* Keep application-controlled hidden rows/columns hidden. */
  table.eol-mobile-table :is(thead, tbody, tfoot, tr, th, td)[hidden],
  table.eol-mobile-table :is(thead, tbody, tfoot, tr, th, td)[style*="display: none"],
  table.eol-mobile-table :is(thead, tbody, tfoot, tr, th, td)[style*="display:none"],
  table.eol-mobile-table :is(thead, tbody, tfoot, tr, th, td).d-none {
    display: none !important;
  }
}

/* Added wrappers have no layout effect on desktop or printed documents. */
@media screen and (min-width: 992px), print {
  .eol-table-scroll--added { display: contents; }
}