/*
File Name: 		custom.css
Description:  You can add your custom CSS here and it will overwrite template styles
*/
.grid {
  display: grid;
  gap: 1rem;
}

.grid-col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-d-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media (max-width: 767px) {
  .flex-d-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gap-4 {
  gap: 1rem;
}

.staff__member-details {
  padding-top: 10px;
  padding-right: 100px;
}

table {
  width: 100%;
  border-collapse: collapse; /* Merge borders into single lines */
}

th, td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #f4f4f4;
  font-weight: 600;
}

tbody tr:nth-child(even) {
  background-color: #fafafa;
}

tbody tr:hover {
  background-color: #f0f8ff;
}
/*# sourceMappingURL=maps/custom.css.map */