/* Add this CSS to your project's stylesheet */
#chunkDisplayContainer {
    display: flex;
    justify-content: space-around;
    font-family: 'Roboto', sans-serif;
    font-size: small;
    padding: 10px;
  }

  #textInput{
    font-family: 'Roboto', sans-serif;
    font-size:small;
    padding: 5px;
  }


button {
    font-family: 'Roboto', sans-serif;

  }
  label{
    font-family: 'Roboto', sans-serif;
  }

  .tooltip {
    font-family: 'Roboto', sans-serif;
    font-size:smaller;
    padding: 10px;
  }

  
  .strategy-column {
    flex: 1;
    margin: 0px;
    overflow-y: auto; /* Makes the column scrollable */
    max-height: 400px; /* Adjust based on your needs */
  }
  
  .text-chunk {
    padding: 5px;
    margin-bottom: 0px;
    cursor: pointer;
  }

  .original-text, .token-text {
    transition: opacity 0.5s ease-in-out;
  }


.unhighlight{
  transition: background-color 1s ease-out; /* Ensure smooth transition for these classes as well */
}

  
  .highlight {
    background-color: yellow; /* Existing highlight color */
    transition: background-color 0.5s ease-in-out; /* Ensure smooth transition for these classes as well */
  }
  
  .highlight-parent {
    background-color: lightblue; /* Different color for parent chunks */
    transition: background-color 0.5s ease-in-out; /* Ensure smooth transition for these classes as well */
  }
  
  .highlight-child {
    background-color: lightgreen; /* Different color for child chunks */
    transition: background-color 0.5s ease-in-out; /* Ensure smooth transition for these classes as well */
  }

  .background {
    stroke: rgb(128, 128, 128);
    stroke-width: 1px;
    fill: rgb(250, 250, 250);
  }

  
  .strategy-column {
    /* Assuming you want each strategy column to vertically take up the full height */
    height: 100%;
    overflow-y: auto; /* Enables scrolling within each strategy column */
  }
  
  .strategy-title {
    padding: 5px;
    font-size: medium;
    font-weight: bold;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Adjust based on desired offset */
    background-color: white; /* Ensure the title background isn't transparent */
    z-index: 1; /* Ensure the title overlays the scrollable content */
  }
  
  .chunk {
    transition: opacity 0.5s ease-in-out;
  }

  .chunk-container {
    position: relative;
  }