/*
 * Styles for /phished-vs-knowbe4/.
 *
 * The capability comparison is a real <table> rather than an SVG image, so its
 * text is crawlable and readable by screen readers. Everything is scoped under
 * .CapabilityTable so the bare element selectors cannot reach the rest of the
 * page. Sizes are rem against the site's html{font-size:62.5%}.
 */

.CapabilityTable { margin: 0 0 8px; }

.CapabilityTable .table-scroll { overflow-x: auto; border-radius: 14px; background: #08142E; }

.CapabilityTable table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
}
.CapabilityTable col.col-label { width: 18%; }
.CapabilityTable col.col-vendor { width: 41%; }

.CapabilityTable th,
.CapabilityTable td {
  text-align: left;
  vertical-align: top;
  padding: 16px 18px;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #fff;
  border-bottom: 1px solid #1F3460;
  overflow-wrap: break-word;
}
.CapabilityTable thead th {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  padding-bottom: 12px;
  border-bottom: 2px solid #50BCBD;
}
.CapabilityTable thead th.brand { color: #50BCBD; }
.CapabilityTable tbody th { font-weight: 700; }
.CapabilityTable td.is-phished { font-weight: 500; }
.CapabilityTable strong { color: #fff; font-weight: 700; }
.CapabilityTable tbody tr:last-child th,
.CapabilityTable tbody tr:last-child td { border-bottom: none; }

@media (max-width: 767px) {
  .CapabilityTable th,
  .CapabilityTable td { padding: 12px 14px; font-size: 1.4rem; }
}