.feature-nucleotide {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  gap: 20px;
}

.nucleotide-view {
  flex: 1;
  width: 100%;
  height: 400px; /* Adjust as needed */
}

.nucleotide-view svg {
  width: 100%;
  height: 400px;
}
.bottom {
  display: flex;
  gap: 20px;
}

.nucleotide-mini-charts {
  display: flex;
  gap: 20px;
  /* height: 400px; */
}

.nucleotide-sort,
.nucleotide-zoom {
  width: 100%;
  height:100%;
}

.nucleotide-sort svg,
.nucleotide-zoom svg {
  width: 100%;
  height: 100%;
}


.feature-legend-container {
  flex: 0 1 auto;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  background-color: none;
  border-radius: 8px;
}

.feature-legend-grids {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.feature-legend-title {
  text-align: center;
  font-size: 16px;
  /* font-weight: 600; */
  /* margin-bottom: 0.5rem; */
}

.legend {
  width: 100%;
  height: 30px;
  margin-bottom: 0.5rem;
}

.feature-grids-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.svg-grid-inclusion,
.svg-grid-skipping {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.5rem;
  width: 50%;
}

.svg-grid-long-skipping {
  display: grid;
  flex-direction: row;
  gap: 0.2rem;
  width: 48%;
  margin-left: auto;
  margin-top: -8px;

} 

.feature-svg {
  border: 1px solid #ccc;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: white;
}

.feature-long-svg {
  border: 1px solid #ccc;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: white;
  margin-bottom: 5px;
}

.psi-bar-chart {
  position: relative;
}


.chart-container {
  width: 800px;
  margin: 0 auto;

}
.nucleotide-view {
  flex: 1;
  width: 100%;
  height: 500px; /* Adjust as needed */

}

.nucleotide-view svg {
  width: 100%;
  height: 500px;

}

.nucleotide-view-exon1  {
  width: 100%;
  height: 500px;
}
.nucleotide-view-exon1 svg {
  width: 100%;
  height: 500px;

}
.nucleotide-view-exon-s1-mutation{
  width: 100%;
  height: 400px;

}

.nucleotide-view-exon-comp  {
  width: 100%;
  height: 500px;
}
.nucleotide-view-exon-comp svg {
  width: 100%;
  height: 500px;

}
.nucleotide-view-exon-brca2 {
  width: 200%; /* This will extend the container width */
  overflow-x: scroll; /* Optional: Add this to allow horizontal scrolling if the content is too wide */
}

.nucleotide-view-exon-brca2 svg {
  width: 200%;
  height: 500px;
}

.nucleotide-view-exon-cfrt,
.nucleotide-view-exon-cfrt svg {
  width: 100%;
  height: 500px;

}


.psi-bar-chart-s1,
.psi-bar-chart-s1-comparison,
.psi-bar-chart-exon-brca2,
.psi-bar-chart-exon-cfrt {
  width: 30%;
  height: 400px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  width: 100%
  /* margin-left: -200px; */
}

.grid-item {
  /* width:450px; */
  width: 100%;
  height: 200px;
  background-color: #f2f2f2;
  border-radius: 5px;
}

.nucleotide-view-exon-grid {
  width: 100%;
  height: 100%;
}