body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa; /* A very light grey background for the whole page */
}

h1 {
  font-size: 2.5rem;
}

button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.form-select, .form-control {
  margin-bottom: 1rem;
}

input {
  border-radius: 0.25rem;
}

.table {
  margin-top: 1rem;
}

.form-check-inline {
  margin-right: 1rem;
}

/* Active rows */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #ffffff !important; /* White background for odd rows */
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #f1f1f1 !important; /* Very light grey background for even rows */
}

.table-bordered thead th {
  background-color: #e2e3e5 !important; /* Slightly darker grey for the headers */
  color: #333 !important; /* Darker text to contrast with the grey background */
}

/* Inactive rows */
.inactive-row {
  background-color: #d6d6d6 !important; /* Medium grey background for inactive rows */
  color: #8c8c8c !important; /* Slightly muted text color for inactive rows */
}

.autocomplete {
  position: relative;
  display: inline-block;
  width: 100%; /* Ensure the container is as wide as the input field */
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  width: 100%; /* Set the width to match the input field */
  margin-top: 5px;
  max-height: 200px; /* Optional: limit height for long lists */
  overflow-y: auto; /* Enable scrolling if the list gets too long */
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
  background-color: #e9e9e9; /* Hover effect */
}

.autocomplete-items div.active {
  background-color: #007bff; /* Active suggestion background */
  color: white; /* Active suggestion text color */
}

/* Make sure the footer is aligned to the left */
footer {
  position: fixed;   /* Ensures the footer stays fixed at the bottom */
  bottom: 0;         /* Aligns it to the bottom of the page */
  left: 0;           /* Aligns it to the left of the screen */
  width: 100%;       /* Ensures the footer spans the entire width */
  text-align: left;  /* Aligns text to the left */
  padding: 10px;     /* Adds some padding for spacing */
  background-color: #f8f9fa; /* Optional: Background color similar to Bootstrap's light background */
}

/* Make the footer font smaller compared to the rest of the page */
footer p {
  font-size: 0.85em; /* 0.85em makes it 85% of the page's main font size */
  color: #6c757d;    /* Optional: A subtle grey color */
}