.table {
  width: 100%;
  line-height: 1.4;
}
.table tbody tr {
  background: var(--colour-neutral);
}
.table tbody tr:nth-child(even) {
  background: var(--colour-accent);
}
.table tbody td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.table table {
  width: 100%;
}
.table td,
.table th {
  padding-left: calc(var(--spacing-internal) / 2);
  padding-right: calc(var(--spacing-internal) / 2);
  width: 50%;
}
.table td:first-child,
.table th:first-child {
  padding-left: var(--spacing-internal);
}
.table td:last-child,
.table th:last-child {
  padding-right: var(--spacing-internal);
}
.table thead {
  text-align: left;
  background: var(--table-head-bg);
  color: var(--colour-neutral);
}
.table thead th {
  background: var(--table-head-bg);
  font-family: var(--font-family-title);
  vertical-align: middle;
  padding-top: 15px;
  padding-bottom: 15px;
}
.table thead th,
.table thead td {
  border-bottom: var(--border-style) 2px var(--colour-border);
}
.table tbody td {
  border-bottom: var(--border-style) 1px var(--colour-border);
  vertical-align: middle;
}
.table tbody td.has-button {
  padding-top: var(--spacing-internal);
  padding-bottom: var(--spacing-internal);
}
.table tbody tr {
  border-bottom: solid 1px var(--colour-border);
}
.table .embed-th {
  display: none;
}
.table--has-hover tbody tr {
  transition: 0.4s border;
  border-top: solid 1px transparent;
  border-right: solid 1px transparent;
  border-left: solid 1px transparent;
}
.table--has-hover tbody tr:hover td, .table--has-hover tbody tr.active td {
  background: rgba(var(--table-hover-bg-rgb), 0.2);
}
.table--has-hover tbody tr:hover td:first-child, .table--has-hover tbody tr.active td:first-child {
  border-left: 1px solid var(--colour-accent);
}
.table--has-hover tbody tr:hover td.cell--add-to-spec--added, .table--has-hover tbody tr.active td.cell--add-to-spec--added {
  background: var(--colour-two);
}
.table--has-hover tbody tr:hover .button:not(:hover), .table--has-hover tbody tr.active .button:not(:hover) {
  color: var(--table-hover-button-color);
  border-color: var(--table-hover-button-border-color);
}
.table--has-hover tbody tr:hover .button:not(:hover) .la,
.table--has-hover tbody tr:hover .button:not(:hover) .las, .table--has-hover tbody tr.active .button:not(:hover) .la,
.table--has-hover tbody tr.active .button:not(:hover) .las {
  color: var(--table-hover-button-color);
}
.table--has-hover tbody tr:hover .button.button--1--alt:focus, .table--has-hover tbody tr.active .button.button--1--alt:focus {
  color: var(--colour-one);
  border-color: currentColor;
}
.table--has-hover tbody tr:hover .button.button--1--alt:focus .la, .table--has-hover tbody tr.active .button.button--1--alt:focus .la {
  color: currentColor;
}
.table--has-odd-rows tbody tr:nth-child(even) {
  background: var(--table-row-accent);
}
.table--pad td,
.table--pad th {
  padding-left: calc(0.5 * var(--spacing-mobile));
  padding-right: calc(0.5 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .table--pad td,
.table--pad th {
    padding-left: calc(0.5 * var(--spacing-tablet));
    padding-right: calc(0.5 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .table--pad td,
.table--pad th {
    padding-left: calc(0.5 * var(--spacing-desktop));
    padding-right: calc(0.5 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .table--pad td,
.table--pad th {
    padding-left: calc(0.5 * var(--spacing-large));
    padding-right: calc(0.5 * var(--spacing-large));
  }
}
.table--pad td:first-child,
.table--pad th:first-child {
  padding-left: calc(1 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .table--pad td:first-child,
.table--pad th:first-child {
    padding-left: calc(1 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .table--pad td:first-child,
.table--pad th:first-child {
    padding-left: calc(1 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .table--pad td:first-child,
.table--pad th:first-child {
    padding-left: calc(1 * var(--spacing-large));
  }
}
.table--pad td:last-child,
.table--pad th:last-child {
  padding-right: calc(1 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .table--pad td:last-child,
.table--pad th:last-child {
    padding-right: calc(1 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .table--pad td:last-child,
.table--pad th:last-child {
    padding-right: calc(1 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .table--pad td:last-child,
.table--pad th:last-child {
    padding-right: calc(1 * var(--spacing-large));
  }
}
.table--slim tbody tr td {
  padding-top: var(--spacing-internal);
  padding-bottom: var(--spacing-internal);
}
.table--2columns tr {
  display: grid;
  grid-template-columns: 50% 50%;
}
@media (min-width: 992px) {
  .table td,
.table th {
    padding-left: calc(0.5 * var(--spacing-mobile));
    padding-right: calc(0.5 * var(--spacing-mobile));
  }
}
@media (min-width: 992px) and (min-width: 768px) {
  .table td,
.table th {
    padding-left: calc(0.5 * var(--spacing-tablet));
    padding-right: calc(0.5 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .table td,
.table th {
    padding-left: calc(0.5 * var(--spacing-desktop));
    padding-right: calc(0.5 * var(--spacing-desktop));
  }
}
@media (min-width: 992px) and (min-width: 1200px) {
  .table td,
.table th {
    padding-left: calc(0.5 * var(--spacing-large));
    padding-right: calc(0.5 * var(--spacing-large));
  }
}
@media (min-width: 1200px) {
  .table {
    table-layout: fixed;
  }
}