:root {
  --primary-color: #6abea7;
  --success-color: #72E4A3;
  --main-color: #FFCD9E;
  --base-color: #5e6973;
  --final-color: #BDF6FF;
  --download-color: #528DF2;
  --final-card-color: #F0F8FF;
  --classification-color: #59AFC9;
  --subtype-color: #1E036F;
}
.text-base {
  color: var(--base-color) !important;
}
.bg-result-primary {
  background-color: var(--primary-color) !important;
}
.bg-success {
  background-color: var(--success-color) !important;
}
.bg-final{
  background-color: var(--final-color) !important;
}
.bg-base {
  background-color: var(--base-color) !important;
}
.bg-download {
  background-color: var(--download-color) !important;
}
.btn-download-color {
  background-color: var(--download-color);
  border-color: var(--download-color);
  color: #fff;
}
.btn-download-color:hover {
  background-color: #3a75d9;
  border-color: #3a75d9;
  color: #fff;
}
.btn-pdf-color {
  background-color: #F35353;
  border-color: #F35353;
  color: #fff;
}
.btn-pdf-color:hover {
  background-color: #d43f3f;
  border-color: #d43f3f;
  color: #fff;
}
.btn-outline-download {
  background-color: transparent;
  border-color: var(--download-color);
  color: var(--download-color);
}
.btn-outline-download:hover {
  background-color: var(--download-color);
  border-color: var(--download-color);
  color: #fff;
}
.row {
  justify-content: center;
  align-items: center;
}
.results-main-row {
  align-items: stretch;
}
.side-panel-col {
  margin-top: 2.75rem;
  display: block;
  align-self: flex-start;
}
.side-panel-card {
  width: 100%;
  border-width: 1px;
  height: auto;
}
.side-subheader {
  border-radius: 6px;
  text-align: center;
  font-weight: 700;
  padding: 0.35rem 0.5rem;
}
.summary-list {
  list-style-type: none;
  padding-left: 0;
}
.summary-list li {
  margin-bottom: 0.35rem;
  line-height: 1.25;
}
.plot-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.plot-container .js-plotly-plot,
.plot-container .plotly,
.plot-container svg {
  margin: 0 auto !important;
}
#plotly-plot,
#plotly-tree {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}
#plotly-plot {
  min-height: 550px;
}
#plotly-tree {
  min-height: 650px;
}
.plot-container-small {
  width: 800px;
  height: auto;
  min-height: 400px;
  overflow: hidden;
}
.genetic-data-body {
  max-height: none;
  overflow: visible;
}
.gene-plot-container {
  height: auto;
  width: 100%;
  max-width: none;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
}
.gene-plot-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#plotly-plot-gene,
#plotly-plot-gene-secondary {
  width: 100% !important;
  max-width: 1100px;
  height: 900px;
}
.gene-search-form {
  width: 250px;
  position: relative;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gene-suggestions {
  display: none;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
}
#gene-search-input {
  width: 200px;
}
.table-center {
  margin: auto;
}
.classification-summary-card {
  border: 1px solid var(--bs-card-border-color, rgba(0, 0, 0, 0.175));
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  background-color: var(--final-card-color);
}
.classification-intro {
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--base-color);
  margin-bottom: 0;
}
.classification-disease {
  font-size: 2rem;
  font-weight: 700;
  color: var(--classification-color);
  line-height: 1.1;
  overflow-wrap: anywhere;
  margin-bottom: 0;
}
.classification-subtype {
  font-size: 2rem;
  font-weight: 700;
  color: var(--subtype-color);
  line-height: 1.1;
  overflow-wrap: anywhere;
  margin-bottom: 0;
}
.classification-learn-more {
  color: var(--base-color);
  text-decoration: underline;
  font-size: 1rem;
  cursor: pointer;
}
.classification-differentials {
  border-top: 1px solid var(--base-color);
  text-align: left;
}
.classification-differentials ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .side-panel-col {
    margin-top: 1rem;
  }
  .side-panel-card {
    min-height: auto;
  }
  .classification-intro {
    font-size: 1.5rem;
  }
  .classification-disease {
    font-size: 2rem;
  }
  .classification-subtype {
    font-size: 1.8rem;
  }
  .classification-learn-more {
    font-size: 1.3rem;
  }
}