table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

.fixed-thead {
    position: sticky;
    top: 0;
    background-color: #ededed;
    z-index: 1;
    box-shadow: #b3b3b3 0px 1px 5px 0px;
  }

  .fixed-thead th {
    font-weight: bold;
  }

 .show-all {
    background-color: #333333;
    color: #ffffff;
  }    
  
  .all-color {
    background-color: #333333;
    color: #ffffff;
  }
  
  .bc-color {
    background-color: #963636;
    color: #fff;
  }
  
  .wc-color {
    background-color: #ffcc99;
    color: #fff;
  }
  
  .es-color {
    background-color: #ffff99;
    color: #000;
  }
  
  .eq-color {
    background-color: #99ff99;
    color: #000;
  }
  
  .rs-color {
    background-color: #69b4ff;
    color: #000;
  }
  
  .pr-color {
    background-color: #9999ff;
    color: #fff;
  }
  
  .yw-color {
    background-color: #ff99cc;
    color: #fff;
  }
  
  .ym-color {
    background-color: #b3767a;
    color: #fff;
  }
  
  .ss-color {
    background-color: #ffccff;
    color: #000;
  }
  
  .fm-color {
    background-color: #ffcccc;
    color: #000;
  }
  
  .wml-color {
    background-color: #ffcc00;
    color: #000;
  }
  
  .fhc-color {
    background-color: #cccc00;
    color: #000;
  }
  
  .sa-color {
    background-color: #00cc99;
    color: #fff;
  }  
  
  .wm-color {
    background-color: #1f6d1d;
    color: #ffffff;
  }
    
  .wm-color {
    background-color: #6e0c4e;
    color: #ffffff;
  }
  
  .color-coded {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 5px;
    min-width: 60px;
    margin: 2px 4px;
    text-align: center;
  }

  #legend{
    margin-bottom: 10px;
  }

  .legend-item {
    cursor: pointer;
    padding: 8px 16px;
    margin: 4px;
    display: inline-block;
    border: 2px solid #1e5f8b;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    background-color: #fff;
    color: #1e5f8b;
  }

  .legend-item:hover {
    color: #fff;
    background-color: #1e5f8b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(30, 95, 139, 0.3);
  }

  .legend-item.active-filter {
    color: #fff;
    background-color: #0d3b66;
    border-color: #0d3b66;
    box-shadow: 0 4px 12px rgba(13, 59, 102, 0.4);
  }

  .highlighted {
    background-color: rgb(255, 255, 184);  /* Choose your highlight color */
  }

  .custom-table-responsive {
    overflow-x: unset;
    -webkit-overflow-scrolling: unset;
}

@media screen and (max-width: 520px) {
  .custom-table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: auto;
  }
}