/* TABLE */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

thead th {
  background: var(--KindowDonkergrijs);
  cursor: default;
  color: var(--TextWhite);
  font-weight: normal;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

th  {
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  cursor: default;
  padding: 5px 5px;
  border: 1px solid var(--row-border);
  text-align: center;
  vertical-align: middle;
  color: var(--background);
}



th[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  cursor: default;
  position: absolute;
  Top: 190px; /* boce de kop */
  left: 0;
  background:var(--KindowGeel);
  color: var(--background);
  padding: 6px 10px;
  border-radius: 0px;
  white-space: nowrap;
  z-index: 10;
}

td {
  vertical-align: middle;
  text-align: center;
  line-height: 1;
  border: 1px solid var(--row-border);
  color: var(--text);
}

td, th {
  line-height: 32px;  /* maakt tekst en iconen visueel even hoog */
  padding: 0 5px;
  vertical-align: middle;
}

td svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

tbody tr:nth-child(even) {
  background: var(--table-row-even-bg);
}
tbody tr:nth-child(odd) {
  background: var(--table-row-even-odd-bg);
}

tbody tr:hover {
  background: var(--table-row-hover-bg);
}

/* Input and select elements in tables (e.g., Admin page) */
table input[type="text"],
table input[type="email"],
table input.input,
table select,
table select.input {
  background: var(--input-background);
  color: var(--text);
  border: 1px solid var(--Kindowlichtgrijs);
  border-radius: 0px;
  padding: 4px 6px;
  box-sizing: border-box;
}

table input:focus,
table select:focus {
  outline: none;
  border-color: var(--KindowGeel);
  box-shadow: 0 0 0 2px rgba(252, 192, 25, 0.12);
}

/* Checkboxes in tables */
table input[type="checkbox"] {
  cursor: pointer;
}