table.sql {
  max-width: 100%;
  border-collapse: collapse;
  font-family: monospace;
  font-size: 14px;
  margin-top: 1em;
  min-width: 300px;
}
table.sql caption {
  text-align: start;
  background: var(--bg-course-bar);
  padding: 0.25rem;
  width: fit-content;
}

table.sql[data-table-name]::before {
  content: attr(data-table-name);
  display: block;
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 1.1em;
  color: #444;
}
table.sql thead {
  background: var(--accent-color-dark);
  color: var(--bg-color);
}
table.sql.result thead {
  background: var(--bg-opposite);
  color: var(--bg-color);
}

table.sql th,
table.sql td {
  border: 2px solid var(--accent-color-50);
  padding: 8px 12px;
  text-align: left;
}

table.sql tbody tr:nth-child(even) {
  background-color: var(--bg-secondary-mid);
}

table.sql tbody tr:hover {
  background-color: var(--bg-secondary);
}
.highlight {
  color: #fff;
}