.timeline-table-container {
  overflow-x: auto;
}

.gen-timeline {
  display: grid; 
  width: 100%;
  border-collapse: collapse;
  grid-template-columns: 25% 1fr; 
}

.gen-timeline thead, .gen-timeline tbody, .gen-timeline tr {
  display: contents;
}

.gen-timeline th, .gen-timeline td {
  padding: 1rem !important;
  border: 1px solid #e8ebee !important;
  text-align: left !important;
  font-size: 1.2em !important;
}


.gen-timeline thead th {
  background-color: #073850 !important;
  font-weight: bold !important;
  color: #fff !important;
  font-size: 1.4em !important;
}

ul.custom-check-list {
  list-style-type: none !important; 
  padding-left: 1em !important;
}

.custom-check-list li {
  display: flex;
  align-items: flex-start; 
  margin-bottom: 10px; 
}

.custom-check-list li.check::before {
  content: "✓ "; 
  color: #317aba; 
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
}

.custom-check-list li.bullet::before {
  content: "• "; 
  color: #000000; 
  font-weight: bold;
  margin-right: 18px;
  flex-shrink: 0;
}



@media (max-width: 758px) {
    .gen-timeline {
        grid-template-columns: 1fr;
      }

     .gen-timeline tbody tr {
        display: grid;
        margin-bottom: 1rem !important;
        border: 1px solid #ccc !important;
      }

      .gen-timeline td::before {
        content: attr(data-label);
        font-weight: bold !important;
        background-color: #ecf3f9;
        width: 100px; 
      }

    .gen-timeline tbody tr th {
      background-color: #ecf3f9 !important;   
    }

      /* Hide the original table header visually on small screens (while keeping it for screen readers) */
    .gen-timeline thead {
        display: none;
      }
  
}

@media (min-width: 759px)  {
    
    .gen-timeline tbody tr:hover td {
      background-color: #ecf3f9 !important; 
    }

    .gen-timeline tbody tr:hover th {
      background-color: #ecf3f9 !important;   
    }

}