.mzansi-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 20px;
}
.mzansi-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--mzansi-font-size, 16px);
  border: 1px solid #444;
}
.mzansi-table td {
  padding: var(--mzansi-padding-top, 22px) var(--mzansi-padding-right, 22px) var(--mzansi-padding-bottom, 22px) var(--mzansi-padding-left, 22px);
  border: 1px solid #444;
  vertical-align: middle;
  line-height: 1.35;
}
.mzansi-table .mzansi-label {
  width: var(--mzansi-left-width, 40%);
  font-weight: 400;
}
.mzansi-table .mzansi-value {
  font-weight: 700;
}
.mzansi-style-soft-grey .mzansi-table td { background:#d9d9d9; color:#111; }
.mzansi-style-cool-light .mzansi-table td { background:#e7eaee; color:#111; }
.mzansi-style-warm-stone .mzansi-table td { background:#ddd6ce; color:#111; }
.mzansi-style-dark-contrast .mzansi-table td { background:#2e3136; color:#fff; border-color:#d0d0d0; }

.mzansi-table tr.has-custom-bg td {
  background: var(--mzansi-row-bg) !important;
}

.mzansi-table tr.mzansi-align-left td { text-align: left; }
.mzansi-table tr.mzansi-align-center td { text-align: center; }
.mzansi-table tr.mzansi-align-right td { text-align: right; }

@media (max-width: 680px) {
  .mzansi-table,
  .mzansi-table tbody,
  .mzansi-table tr,
  .mzansi-table td {
    display:block;
    width:100%;
  }
  .mzansi-table tr {
    margin-bottom: 12px;
    border:1px solid #444;
  }
  .mzansi-table td {
    border-width: 0 0 1px 0;
    padding: 16px;
  }
  .mzansi-table tr td:last-child { border-bottom: 0; }
  .mzansi-table .mzansi-label,
  .mzansi-table .mzansi-value { width:100%; }
}