/* JR My Connections Width Fix
   Scope: only the My Connections block, only on tablet + mobile landscape.
   Purpose: override global table rule that sets width:max-content. */

/* Tablet only */
@media (min-width: 768px) and (max-width: 1024px) {
  body.jr-tablet .jr-my-connections,
  body.jr-tablet .jr-my-connections .jr-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.jr-tablet .jr-my-connections .jr-table-wrap {
    display: block !important;
    overflow-x: visible !important;
  }

  body.jr-tablet .jr-my-connections table.jr-table,
  body.jr-tablet .jr-my-connections table.jr-table.jr-mobile-tight-headers {
    display: table !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  body.jr-tablet .jr-my-connections table.jr-table thead th,
  body.jr-tablet .jr-my-connections table.jr-table tbody td,
  body.jr-tablet .jr-my-connections table.jr-table.jr-mobile-tight-headers thead th,
  body.jr-tablet .jr-my-connections table.jr-table.jr-mobile-tight-headers tbody td {
    width: 25% !important;
  }
}

/* Mobile landscape only */
@media (max-width: 1024px) and (orientation: landscape) {
  body.jr-mobile-landscape .jr-my-connections,
  body.jr-mobile-landscape .jr-my-connections .jr-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.jr-mobile-landscape .jr-my-connections .jr-table-wrap {
    display: block !important;
    overflow-x: visible !important;
  }

  body.jr-mobile-landscape .jr-my-connections table.jr-table,
  body.jr-mobile-landscape .jr-my-connections table.jr-table.jr-mobile-tight-headers {
    display: table !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  body.jr-mobile-landscape .jr-my-connections table.jr-table thead th,
  body.jr-mobile-landscape .jr-my-connections table.jr-table tbody td,
  body.jr-mobile-landscape .jr-my-connections table.jr-table.jr-mobile-tight-headers thead th,
  body.jr-mobile-landscape .jr-my-connections table.jr-table.jr-mobile-tight-headers tbody td {
    width: 25% !important;
  }
}