/*
  Backily article table fix
  Keeps desktop tables aligned and makes wide tables horizontally
  scrollable on mobile without breaking the page layout.
*/

.article-body {
  max-width: 100%;
}

.article-body table {
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.45;
}

.article-body thead {
  background: #f6f8fa;
}

.article-body th,
.article-body td {
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.article-body th {
  font-weight: 700;
}

.article-body tbody tr:nth-child(even) {
  background: #fafafa;
}

.article-body p:empty {
  display: none;
}

@media (max-width: 768px) {
  .article-body table {
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: separate;
    border-spacing: 0;
  }

  .article-body th,
  .article-body td {
    min-width: 130px;
    white-space: normal !important;
  }

  .article-body th:first-child,
  .article-body td:first-child {
    min-width: 105px;
  }
}