.gradient-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}






.gradient-scale {
    position: relative;
    width: 100%;
    height: 40px;
   
    background: linear-gradient(to right,

    #004d00 0%,
#055000 1%,
#0a5400 2%,
#0f5700 3%,
#145b00 4%,
#1a5f00 5%,
#1f6200 6%,
#246600 7%,
#296a00 8%,
#2e6d00 9%,
#347100 10%,
#397400 11%,
#3e7800 12%,
#437c00 13%,
#487f00 14%,
#4e8300 15%,
#538700 16%,
#588a00 17%,
#5d8e00 18%,
#629200 19%,
#689500 20%,
#6d9900 21%,
#729c00 22%,
#77a000 23%,
#7ca400 24%,
#82a700 25%,
#87ab00 26%,
#8caf00 27%,
#91b200 28%,
#96b600 29%,
#9cb900 30%,
#a1bd00 31%,
#a6c100 32%,
#abc400 33%,
#b0c800 34%,
#b6cc00 35%,
#bbcf00 36%,
#c0d300 37%,
#c5d700 38%,
#cada00 39%,
#d0de00 40%,
#d5e100 41%,
#dae500 42%,
#dfe900 43%,
#e4ec00 44%,
#eaf000 45%,
#eff400 46%,
#f4f700 47%,
#f9fb00 48%,
#ffff00 49%,
#ffff00 51%,
#fff900 52%,
#fff400 53%,
#ffef00 54%,
#ffea00 55%,
#ffe400 56%,
#ffdf00 57%,
#ffda00 58%,
#ffd500 59%,
#ffd000 60%,
#ffca00 61%,
#ffc500 62%,
#ffc000 63%,
#ffbb00 64%,
#ffb600 65%,
#ffb000 66%,
#ffab00 67%,
#ffa600 68%,
#ffa100 69%,
#ff9c00 70%,
#ff9600 71%,
#ff9100 72%,
#ff8c00 73%,
#ff8700 74%,
#ff8200 75%,
#ff7c00 76%,
#ff7700 77%,
#ff7200 78%,
#ff6d00 79%,
#ff6800 80%,
#ff6200 81%,
#ff5d00 82%,
#ff5800 83%,
#ff5300 84%,
#ff4e00 85%,
#ff4800 86%,
#ff4300 87%,
#ff3e00 88%,
#ff3900 89%,
#ff3400 90%,
#ff2e00 91%,
#ff2900 92%,
#ff2400 93%,
#ff1f00 94%,
#ff1a00 95%,
#ff1400 96%,
#ff0f00 97%,
#ff0a00 98%,
#ff0500 99%,
#ff0000 100%
);


    border-radius: 10px;
    margin: 0 10px;
    display: flex;
    align-items: center;
}


.label-left, .label-right {
    font-weight: bold;
}

.label-left {
    color: purple;
}

.label-right {
    color: red;
}

.grid-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Make it more visible */
    z-index: 1;
}

.hover-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: black;
    z-index: 2; /* Ensure it appears above the grid lines */
    display: none;
}

.hover-text {
    position: absolute;
    bottom: 45px;
    left: -10px;
    background-color: black;
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 3px;
    white-space: nowrap;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    padding: 10px;
    text-align: center;
}

th {
    background-color: #f77596bb;
    color: white;
}


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

tr:hover {
    background-color: #ddd;
}

td {
    border: 1px solid #ddd;
    font-size: 14px;
}

#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal-content {
    background: white;
    border-radius: 10px;
    width: 80%;
    max-width: 1000px;
    overflow: hidden;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white; /* Ensure the text stands out */
    padding: 10px 20px;
    border-bottom: 2px solid #222; /* Add a border for clarity */
}

.modal-header h2 {
    font-family: 'Arial', sans-serif; /* Use a clean sans-serif font */
    font-size: 20px; /* Adjust font size */
    font-weight: bold; /* Make it bold */
    color: #333; /* Darker color for better visibility */
    margin: 0; /* Remove default margin */
}


.close-button {
    background: #ff4d4d; /* Brighter red for better visibility */
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.close-button:hover {
    background: #ff1a1a; /* Darker red on hover */
}

  
  .download-button {
    background: green;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
  }
  
  .download-button:hover {
    background: darkgreen;
  }
  
  #sub-table-container {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
  }
  


  .custom-cell-wrap {
    white-space: normal !important; /* Allow text to wrap */
    word-break: break-word; /* Break long words if necessary */
}

.tabulator-col {
    white-space: normal !important; /* Allow header text to wrap */
    word-break: break-word; /* Break long header text if necessary */
}