button {
  color: var(--secondary);
}

.filterWrapper {
  width: 100%;
}

.filter {
  color: var(--on-surface) !important;
}

table, th, tr, td {
  background-color: var(--primary-variant) !important;
  color: var(--on-surface) !important;
  hyphens: auto;
  overflow-wrap: anywhere;
}

th, tr {
  font-size: small !important;
}

.tableOverflow {
  height: 20rem;
  overflow: auto;
}

.sessionName {
  width: 8%;
  min-width: 50px;
  color: var(--on-surface) !important;
}

.sessionId {
  width: 8%;
  min-width: 50px;
  color: var(--on-surface) !important;
}

.roleName {
  color: var(--on-surface) !important;
  width: 5%;
}

.buttonName {
  color: var(--on-surface) !important;
  width: 5%;
  display: flex;
  place-content: stretch flex-end;
}

.noRoomHistory {
  padding-top: 100px;
  color: var(--on-surface);
  font-weight: normal;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -10000px;
}

.mat-badge-content {
  background: var(--secondary);
  color: var(--on-secondary);
}

.table-container {
  height: 45vh;
  overflow: auto;
}

.fill-space {
  height: 20px;
}

.delete {
  color: var(--red);
  margin-right: 10px;
}

.delete-text {
  color: var(--on-dialog);
}

.export {
  color: var(--green);
  margin-right: 10px;
}

.clickable {
  cursor: pointer;
}

.list-entries {
  width: 100%;
}