:root {
  --dark-color: #212529;
}

#dark-color-please {
  color: var(--dark-color);
}

thead {
  background: #dbdbdb
}

.dt-info, table.dataTable {
  font-size: 1.6rem;
}

/* Table rows */
.table tbody tr {
  border-bottom: 1px solid #21252970;
}

.table tbody tr:nth-of-type(odd) {
  background-color: transparent;
}

.table tbody tr:nth-of-type(even) {
  background-color: #dbdbdb59;
}

/* Grouped table rows */
.table.grouped-row-table thead {
  background-color: #dbdbdb59;
}

.table.grouped-row-table tbody tr {
  background-color: transparent;
}

.table.grouped-row-table tbody tr.group {
  background-color: #dbdbdb;
  font-weight: 800;
}

/* Overwrite dataTable buttons */
div.dt-container .dt-paging .dt-paging-button {
  padding: 0.3em 0.8em;
}

div.dt-container .dt-paging .dt-paging-button:active,
div.dt-container .dt-paging .dt-paging-button:visited,
div.dt-container .dt-paging .dt-paging-button:hover {
  background: transparent;
  border: 1px solid #dbdbdb;
}

div.dt-container .dt-paging .dt-paging-button:focus-visible,
div.dt-container .dt-paging .dt-paging-button:focus  {
  outline: #dbdbdb auto 1px;
}

/* Overwrite dataTable search input */
div.dt-container .dt-search input {
  font-size: 1.6rem;
  border-radius: 20px;
  padding: 4px 12px;
  border: 1px solid var(--dark-color);
  color: var(--dark-color);
  background: transparent;
}

div.dt-container .dt-search input:focus {
  outline: none;
  box-shadow: 0 0 8px #5c83ad;
}

/* Placeholder */
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--dark-color);
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--dark-color);
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--dark-color);
}

/* Responsive */
@media screen and (min-width: 0px) and (max-width: 768px) {
  .dataTables_wrapper .dataTables_filter {
    text-align: start;
  }

  .dataTables_wrapper .dataTables_info {
    text-align: end;
  }
}