body {
  font-family: sans-serif;
}

/* ==========================================================================
    Component: Table
   ========================================================================== */

.c-table {
  width: 100%;
  border-collapse: collapse;
}
  
.c-table th {
  border-bottom: 2px solid #CCC;
  font-weight: 700;
}

.c-table td {
  border-bottom: 1px solid #CCC;
}

.c-table td,
.c-table th {
  text-align: left;
  padding: 16px;
}

/* Table with clickable rows
   ========================================================================== */

.c-table tr[data-href]:hover {
  background: #EEE;
  cursor: pointer;
}

.c-table--rows-clickable tr:focus-within td {
  background-color: #EEE;
}

/* Utility class to hide table cell accessibly */
/* Important to use this one since some others do not work in Safari */
.u-sr-accessible-table-cell {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}