/* Table Styles */
.staff-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
} 

.staff-table tbody tr .member-image{
    border: 2px solid green;
    width: 100px;
    height: 100px;
    border-radius: 100%;
}

.staff-table th,
.staff-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.staff-table tbody tr:nth-child(odd) {
    background-color: var(---top-nav-bg); 
}

.staff-table th {
    font-weight: bold;
    color: var(---menu-bg-color);
    font-family: var(---outfit-font);
    font-size: var(---org-title);
}

.staff-table tbody tr:hover {
    background-color: #f5f5f5;
}

.staff-table td {
    font-family: var(---lato-font);
    font-size: var(---GON);
    color: var(---font-color);
}

.staff-table td a{
    color: var(---font-color);
}



/*  MOBILE VIEW */
@media (max-width: 768px) {
    .staff-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; 
    }

    .staff-table {
        min-width: 600px; 
    }

    .staff-table th,
    .staff-table td {
        padding: 8px; 
    }

    .staff-table tbody tr .member-image {
        width: 70px; 
        height: 70px;
    }

    .staff-table th {
        font-size: calc(var(---org-title) - 4px); 
    }

    .staff-table td {
        font-size: calc(var(---GON) - 2px);
    }
}





/* TABLET VIEW */
@media (max-width: 1024px) and (min-width: 768px) {
    .staff-table {
        /* border: 2px solid red; */
      width: 100%;
      /* padding: 0 10px; */
    }
  
    .staff-table th, 
    .staff-table td {
        /* border: 3px solid green; */
      padding: 10px; 
    }
  
    .staff-table tbody tr .member-image {
      width: 80px; 
      height: 80px; 
    }
  
    .staff-table th {
      font-size: calc(var(---org-title) - 2px); 
    }
  
    .staff-table td {
      font-size: calc(var(---GON) - 2px); 
    }
  
    .staff-table td a {
      font-size: 0.9rem;
    }
  }