/* Responsive tables (mobile card layout)
   - Apply by adding class "responsive-table" to <table>
   - Wrap the table container with class "responsive-table-wrap" (often the same div that has overflow-x-auto)
*/
@media (max-width: 640px){
  .responsive-table-wrap{ overflow-x: visible !important; }

  table.responsive-table{ width:100%; border-collapse: separate; border-spacing: 0; }
  table.responsive-table thead{ display:none !important; }

  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table td{ display:block; width:100%; }

  table.responsive-table tr{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    margin: 0 0 14px;
    overflow: hidden;
  }

  table.responsive-table td{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    white-space: normal !important;
  }
  table.responsive-table td:last-child{ border-bottom:0; }

  table.responsive-table td::before{
    content: attr(data-label);
    flex: 0 0 42%;
    font-weight: 700;
    text-align: left;
    opacity: .9;
  }
}