/* Default (light theme) */
:root {
  --primary-color: #fafafa;
  --secondary-color: #393939;
  --background-color: #f5f5f5;
  --text-color: #000000;
  --hover-background-color: #f0f0f0;
  --hover-text-color: #0f0f0f;
  --primary-font-size: 12px;
}

/* Dark theme */
[data-theme="dark"] {
  --primary-color: #1E1E1E;
  --secondary-color: #BB86FC;
  --background-color: #121212;
  --text-color: #121212;
  --hover-background-color: #f0f0f0;
}

/* Apply these variables in Materialize classes */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: var(--primary-font-size);
}

td {
  font-size: var(--primary-font-size);
}

.clickable {
  cursor: pointer;
}

.btn {
  background-color: var(--primary-color);
}

nav {
  background-color: var(--primary-color);
  color: 'black';
}

.nav-link {
  color: var(--text-color);
}

.btn-primary {
  background-color: var(--secondary-color);
}
.btn-primary:hover {
  background-color: var(--hover-background-color);
  color: var(--hover-text-color);
}


.datatable-pagination {
  background-color: var(--secondary-color);
}

.container {
  width: 95%;
}

nav,nav .nav-wrapper i,nav a.sidenav-trigger,nav a.sidenav-trigger i {
    height: 44px;
    line-height: 44px
}

.scrollable {
  flex: 1; /* Equal width for both divs */
  overflow: auto; /* Enable independent scrolling */
  padding: 10px;
  border: 1px solid #ccc;
}