/* body {
    background-color: #1a1a2e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
} */

    .scrollable-table-container {
        height: 40vh; /* Set a fixed height for the container to enable scrolling */
        overflow-y: auto; /* Add vertical scrollbar when content overflows */
        overflow-x: hidden;
    }
    .scrollable-table-container thead th {
        position: sticky;
        top: 0; /* Sticks the header to the top of its scroll container */
        background-color: #f2f2f2; /* Add a background color to prevent content from showing through */
        z-index: 1; /*Ensure the header stays above the table body content*/
    }

    .container {
      width: 100%;
      display: flex;
      /* flex-wrap: wrap; */
      /* gap: 1rem;
      padding: 1rem; */
      font-size: clamp(0.8rem, 1vw, 1.2rem);
    }

    table.scrolldown {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    table.scrolldown caption {
        position: sticky;
        top: 0;
        background-color: #e0e0e0;
        z-index: 3;
    }

    table.scrolldown th{
      position: sticky;
      top: 1.25em; /* This is crucial for sticky positioning */
      background-color: #e0e0e0; /* Add a background to sticky headers */ 
      z-index: 2; /* Ensure the sticky header is above other content */
    }

    table.scrolldown td {
        /* padding: 8px;
        border: 1px solid #ccc; */
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    table.scrolldown tr:hover {
        background-color:yellowgreen;
    }
    .table-container {
      flex: 1 1 100%;
      max-height: 70vh;
      overflow-y: auto;
      border: 2px solid black;
    }

  .picker-table { 
    border-collapse: collapse;
    width: 100%;
  }
  .picker-table th,
  .picker-table td {
    border: 1px solid #ccc;
    text-align: left;
  }
  .picker-table thead, 
  .picker-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* ensures equal column widths */
  }

  .picker-table tbody {
    display: block;
    height: 40vh;
    overflow-y: auto;
  }

  .picker-table tr.highlight {
    background-color: cornflowerblue  ;
  }
  .picker-table tr:hover {
    background-color: #f0f0f0;
    cursor: pointer;
  }

    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.3);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    #spinner {
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    #result {
      margin-top: 20px;
      font-family: sans-serif;
    }


/* Hide all spans by default */
.sequential-text span {
    opacity: 0;
    animation: sequential-glow 2s ease-in-out infinite;
}

/* Define the animation keyframes */
@keyframes sequential-glow {
    0%, 30% { /* Starts dim, stays dim for a bit */
        opacity: 0.2;
        text-shadow: none;
    }
    50% { /* Peaks with glow */
        opacity: 1;
        text-shadow: 0 0 8px #ff4da6, 0 0 20px #ff4da6;
    }
    100% { /* Fades back out */
        opacity: 0;
        text-shadow: none;
    }
}

/* Apply staggered animation delays to each letter */
.sequential-text span:nth-child(1) { animation-delay: 0.1s; }
.sequential-text span:nth-child(2) { animation-delay: 0.2s; }
.sequential-text span:nth-child(3) { animation-delay: 0.3s; }
.sequential-text span:nth-child(4) { animation-delay: 0.4s; }
.sequential-text span:nth-child(5) { animation-delay: 0.5s; }
.sequential-text span:nth-child(6) { animation-delay: 0.6s; }
.sequential-text span:nth-child(7) { animation-delay: 0.7s; }
/* Add more for the dots */
.sequential-text span:nth-child(8) { animation-delay: 0.8s; }
.sequential-text span:nth-child(9) { animation-delay: 0.9s; }
.sequential-text span:nth-child(10) { animation-delay: 1.0s; }