/* General styling for the body */
:root {
  --primary-dark: #2C3E50;      /* Deep blue for navbar background */
  --primary-medium: #34495E;    /* Medium blue for hover states */
  --primary-light: #3498DB;     /* Light blue for highlights */

  --accent-gold: #F1C40F;       /* Gold for branding and important elements */
  --accent-teal: #1ABC9C;       /* Teal for buttons and actions */

  --neutral-white: #FFFFFF;
  --neutral-light: #F5F7FA;
  --neutral-medium: #E5E9F2;
  --neutral-dark: #4A5568;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;

}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}



.container {
    flex: 1; /* Pushes the footer to the bottom */
}

footer {
    position: relative;
    width: 100%;
    padding: 15px 0; /* Slightly more padding for better spacing */
    text-align: center;
    background-color: #2C3E50; /* Darker blue for contrast */
    color: white; /* Make text white */
    font-size: 14px; /* Adjust font size for readability */
}


footer p {
    margin: 0;
    color: white; /* Ensure text remains white */
}

footer a {
    color: #f0d75b; /* Gold accent for links */
    text-decoration: none;
}

footer a:hover {
    color: #e6c556; /* Lighter gold on hover */
}

.search_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 45vh; /* Ensures it takes up most of the screen */
    padding: 92px 20px 20px;
    z-index: 2000;
}

.server-status-banner {
    position: fixed;
    top: 92px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200001;
    width: min(930px, calc(100vw - 32px));
    padding: 14px 20px;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    border-left: 6px solid #dc3545;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

@media (max-width: 768px) {
    .server-status-banner {
        top: 74px;
        font-size: 0.95rem;
        padding: 12px 16px;
    }
}

.search_container h4 {
    font-size: 1.3rem;
    font-weight: 500;
    text-align: center;
    color: #2c3e50;
}

.search-input {
    margin-right: 15px; /* Adjust this value as needed */
}

/* Welcome Box */
.welcome-box {
  margin-top: -30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 10px;
  max-width: 90%; /* Prevents it from becoming too wide */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  padding-left: 30px;
  padding-right: 30px;
}

.welcome-box p,
.welcome-box ol,
.welcome-box ul {
  text-align: center;
  width: 100%;
  color: #34495e;
  font-size: 1rem;

  margin: 0.5rem 0;
  line-height: 1.4;
}

@media (min-width: 1500px) {
.welcome-box p,
.welcome-box ol,
.welcome-box ul {
  text-align: center;
  width: 100%;
  color: #34495e;
  font-size: 1.125rem;
  margin: 0.8rem 0;
}
}


.welcome-box h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  color: #2c3e50;
}

.welcome-logo {
  width: min(420px, 80vw);
  max-width: 100%;
  margin-bottom: 0.7rem;
}

.welcome-logo__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(95px, 13vw, 165px);
  object-fit: contain;
}


@media (min-width: 1500px) {
  .welcome-logo__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(110px, 16vw, 190px);
    object-fit: contain;
  }
}

.welcome-box ol {
  padding-left: 3.2rem;
  text-align: left;
}

.welcome-box ol li::marker {
  font-weight: bold;
}

/* Search option buttons */
.search-option {
    display: inline-block;
    padding: 12px 20px;
    background-color: #1E3A5F;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: clamp(1rem, 2vw, 1.2rem);
    transition: background 0.3s ease-in-out;
    text-align: center;
    position: relative;
}

.search-option:hover {
    background-color: #2C5A85;
}

.search-option::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 130%;
    transform: translate(-50%, 10px);
    background: rgba(44, 62, 80, 0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.search-option::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 120%;
    transform: translate(-50%, 10px);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.search-option:hover::after,
.search-option:hover::before {
    opacity: 1;
    transform: translate(-50%, 0);
}



/* Ensures text inside the navbar brand is properly styled */
.custom-navbar {
    background-color: #2C3E50; /* Deep purple theme */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 200000;
}

.custom-navbar .navbar-toggler {
    border-color: #fff;
}

.custom-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

/* Desktop navbar should scroll away with page content while keeping full width */
@media (min-width: 992px) {
  .custom-navbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: max(100%, 100vw) !important;
    min-width: 100vw;
    margin: 0 !important;
  }

  body.site-body {
    padding-top: 0 !important;
  }

  .site-body > .container-fluid.my-5.w-100.min-vw-100 {
    margin-top: 3rem !important;
  }
}

.navbar-collapse {
  overflow: visible !important;
}

.navbar .container {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2000;
}

.navbar-nav {
    margin-left: auto;
    display: flex;
    align-items: right;
    gap: 0.5rem;
}

/* Input field */
.navbar input {
    width: 60%;
    max-width: 300px;
    margin-right: 10px;
}

.navbar form {
    position: relative;
    flex-grow: 1;
    max-width: 500px;
    margin: 0 2rem;
    display: flex;
    z-index: 6000;
}

.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 2rem;
    transition: transform 0.2s ease;
}

.navbar-brand img {
    filter: brightness(0) invert(1); /* Turns dark colors to white */
    width: 28px;
    height: 28px;
}

.navbar-brand img.navbar-logo {
    filter: none; /* keep original colors for PNG logo */
    height: 50px;
    width: auto;
    aspect-ratio: 1024 / 654;
    max-height: 50px;
}



.navbar-brand-text {
    color: #F1C40F;
    font-size: 0.5rem;
    font-weight: 700;
    margin-left: 0.5rem;
    transition: color 0.2s ease;
}

/* Hover effect with a lighter grey color */
.navbar-brand-text:hover {
    color: #FFFFFF; /* Light grey color for hover */
}

.first-letter {
  font-size: 1.5em;
  vertical-align: middle;
}

/* Adjust spacing in navbar if necessary */
.navbar {
    width: 100%;
    padding-top: 1.5rem;  /* Increase top padding */
    padding-bottom: 1.5rem; /* Increase bottom padding */
    z-index: 200000; /* keep search results above all page content */
}

.navbar-nav .nav-item {
    margin-right: 10px; /* Space between items */
    margin-left: 10px;
}

.navbar-nav .nav-link {
    color: #fff;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: #F1C40F;
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:visited,
.navbar-nav .nav-link:focus {
    color: #F1C40F !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: var(--accent-gold);
  transition: all 0.2s ease;
  transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 70%;
}

/* Add this to your CSS file */
.navbar .btn {
    width: auto; /* Adjust the value as needed */
}

.navbar-nav {
    flex-direction: column;
    align-items: center;
}

.navbar input {
    flex-grow: 1;
    width: 40%;
    max-width: 600px; /* Prevents it from being too long */
    display: flex;
    justify-content: center; /* Centers the input & button */
    align-items: center; /* Aligns elements properly */
    margin-left: 2%;
}

.navbar .btn {
  background-color: #F1C40F;
   color: #2C3E50;
   border: none;
   font-weight: 500;
   padding: 0.5rem 1rem;
   border-radius: 9999px;
   margin-left: 0.5rem;
   transition: all 0.2s ease;
}

.navbar .btn:hover {
  background-color: #1ABC9C;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Style for search input */
.search-input {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--neutral-white);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  width: 100%;
  transition: all 0.2s ease;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.25);
}

/* Style for search result dropdown */
.search-results {
  position: absolute;
  top: 100%;             /* drop it right below the input */
  left: 0;               /* align with input */
  width: max-content;
  min-width: 100%;
  max-width: 90vw;
  max-height: 200px;
  margin-top: 0;         /* no longer needed if you use top */
  overflow-y: auto;
  overflow-x: auto;
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  z-index: 5000 !important;
}

@media (min-width: 1500px) {
  .search-results {
    width: max-content;
    min-width: 43.5%;
    max-width: 70vw;
  }
}




/* Style for search result dropdown */
.search-results-tissue {
    position: absolute;
    z-index: 300001;
    width: 70%; /* Matches width of the search input */
    background-color: #fff; /* White background for results */
    /* border: 0.5px solid #ddd; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    max-height: 200px; /* Limits height of dropdown */
    overflow-y: auto; /* Scrolls if content exceeds max height */
    top: 80%; /* Positions below the search input */
    left: 1; /* Aligns with the left edge of the search input */
    margin-top: 1.2rem; /* Adds space between the search input and results */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
    z-index: 5;
}

/* Style for search result dropdown */
.search-results-gene {
    position: absolute;
    top: 100%;     
    z-index: 300001;
    width: 73%; /* Matches width of the search input */
    background-color: #fff; /* White background for results */
    border: 0.5px solid #ddd; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    max-height: 200px; /* Limits height of dropdown */
    overflow-y: auto; /* Scrolls if content exceeds max height */
    left: 1; /* Aligns with the left edge of the search input */
    margin-top: 1.2rem; /* Adds space between the search input and results */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
    z-index: 5;
}

.btn_search_gene {
    background-color: #F1C40F;
    color: #2C3E50;
    border: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 7px;
    transition: all 0.2s ease;
}

.btn_search_gene:hover {
    background-color: #6c757d;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Style for individual search result items */
.result-item {
  position: relative;
  padding: 8px; /* Adds padding around each result */
  cursor: pointer; /* Indicates clickable items */
  border-bottom: 1px solid #ddd; /* Adds a bottom border to separate items */
  background-color: #F5F7FA;
  z-index: 5000;
  width: auto;
  white-space: nowrap;
  border-radius: 3px;
}

/* Hover effect for search result items */
.result-item:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
}

/* Style for no results found */
.no-results {
    padding: 8px; /* Adds padding for no results message */
    color: #888; /* Gray color for text */
    z-index: inherit;
}


/* Layout: chart | body map | chart */
#g-umap-wrapper.gene-umap-wrapper {
  display: grid !important;      
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); /* key change */

  align-items: start;
  width: 100%;
  column-gap: 1.5rem;  
  height: auto;
}

.selected_genes_bar_container {
  grid-column: 1;
  grid-row: 1;
  position: relative;       /* positioning context for dropdown */
  display: flex;
  flex-direction: column;
  gap: .75rem;
  z-index: 2;
}



/* .selected_genes_bar_container {
    display: flex;
    position: absolute;
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: center; 
    gap: 20px; 
    top: 23%;
    left: 16%;
    margin-top: 4%;
    margin-bottom: 15%;
    z-index: 300001;
} */

/* Style for the search bar */
.search_bar_gene {
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center; /* Align items vertically in the center */
    width: 100%;
    max-width: 800px;
    gap: 5px; /* Space between the search input and the button */
}

.search-input-gene {
    flex: 1 1 0;   /* grow + shrink, zero basis */
    min-width: 0;  /* without this, long text prevents shrinking */
    max-width: 100%;
}

/* Error message box */
.error-message {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 300001;
    align-items: center;
    justify-content: start; /* Align text to the left */
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    padding: 8px 12px;
    margin-top: 0;
    border-left: 5px solid #dc3545; /* Red left border */
    border-radius: 5px;
    font-size: 14px;
    width: min(420px, calc(100vw - 2rem));
    min-width: min(320px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    opacity: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: opacity 0.5s ease-out; /* Smooth fade-out effect */
}

/* Close button (×) */
.close-btn {
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
    color: #721c24;
}
.close-btn:hover {
    color: #a71d2a;
}


#gene_wrapper.gene-page-wrapper {
  flex: 1 0 auto;
  display: grid !important;      
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto auto;

  align-items: start;
  width: 100%;
  height: auto;
  margin-bottom: 8rem; /* reserve room so table below does not overlap the body map */
}




#dataTypeToggleGene.toggle-container-data{
  /* shrink the green padding block you’re seeing in DevTools */
  grid-row: 1 !important;   
  grid-column: 2 !important; 
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  padding: 8px 12px !important;
  margin: 0 auto !important;
  width: min(96vw, 700px);
  overflow-x: auto !important;
  overflow-y: visible !important;
  box-sizing: content-box !important;
  gap: 12px;
  align-items: flex-end; 
}





/* #dataTypeToggle .toggle-option{
  flex: 0 0 auto;                 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  min-height: 56px;               
  max-width: 160px;               
  width: auto !important;
  border-radius: 12px;
  line-height: 1.25;
  white-space: normal !important; 
  word-break: break-word;         
  text-align: center;
  padding-bottom: 12px;
} */

.toggle-container-data .toggle-option:hover {
    background-color: #e0e0e0; /* slightly darker grey on hover */
}




/* Style for the container holding the title and gene boxes */
#gene_wrapper .selected-genes-container {
  grid-row: 1 !important;
  grid-column: 1 !important;
  position: relative !important;  /* cancel absolute at large screens */
  top: auto !important;
  margin: 0 !important;
  width: auto !important;
}

@media (min-width: 1500px) {
  #gene_wrapper .selected-genes-container {
    grid-row: 1 !important;
    grid-column: 1 !important;
    position: relative !important;  /* cancel absolute at large screens */
    top: auto !important;
    margin: 0 !important;
    width: auto !important;
  }

  .error-message {
      display: flex;
      position: absolute;
      top: calc(100% + 8px);
      z-index: 300001;
      align-items: center;
      justify-content: start; /* Align text to the left */
      background-color: #f8d7da; /* Light red */
      color: #721c24; /* Dark red text */
      padding: 8px 12px;
      margin-top: 0;
      left: 0;
      border-left: 5px solid #dc3545; /* Red left border */
      border-radius: 5px;
      font-size: 14px;
      width: min(420px, calc(100vw - 2rem));
      min-width: min(320px, calc(100vw - 2rem));
      max-width: calc(100vw - 2rem);
      opacity: 1;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
      transition: opacity 0.5s ease-out; /* Smooth fade-out effect */
  }
}

/* Style for the title */
.selected-genes-container h5 {
  font-size: 18px;
  font-weight: bold;
  color: #1f3a4d; /* Deep blue to match theme */
  margin-top: 6%; /* More spacing from content */
  margin-left: 0%;
  margin-bottom: 0%;
}

.selected-genes-container .jump-to-hrdb-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0b5ed7;
  text-decoration: none;
  white-space: nowrap;
}

.selected-genes-container .jump-to-hrdb-link:hover,
.selected-genes-container .jump-to-hrdb-link:focus {
  color: #084298;
  text-decoration: underline;
}

/* Style for the container holding the selected genes */
.selected-genes-container-umap {
  display: flex;
  position: relative;
  justify-content: flex-start; /* Align items to the left */
  flex-wrap: wrap; /* Ensures items wrap properly on smaller screens */
   /* Moves the container closer to the top */
  margin: 0;
  height: auto;
 
  background-color: #ffffff; /* Clean white background */
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for a professional look */
 
  /*border: 1px solid #ddd; /* Light border */
}

/* Style for the title in the selected genes container */
.selected-genes-container-umap h5 {
  font-size: 18px;
  font-weight: bold;
  color: #1f3a4d; /* Deep blue to match theme */
  margin-top: 0%; /* More spacing from content */
  padding-top: 0%;
  padding-bottom: 0px;
  margin-left: 0%;
  margin-bottom: 0%;
  width: 85%;
}

/* Container for the list of selected genes */
#selected-genes-list {
    margin-top: 10px;
}


#gene_wrapper #bodyMapContainer.human-body-container{
  grid-row: 2 !important;   
  grid-column: 1 !important; 
  position: relative;
  width: 100%;
  max-width: 420px;
  min-width: 300px;
  aspect-ratio: 210 / 297;
  height: auto;
  z-index: auto;
  pointer-events: auto;  

  display: flex;          
  flex-direction: column; 
  align-items: center;     

  overflow: hidden;
}

/* Gene-page bodymap gene toggles: keep wrapper width fixed and scroll horizontally. */
#gene_wrapper #bodymap-toggle-wrapper {
  display: none;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding: 6px 8px;
  margin-top: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  align-items: center;
}

#gene_wrapper #bodymap-toggle-wrapper .toggle-option {
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  padding: 8px 14px;
  margin-right: 6px;
  line-height: 1.1;
}

#gene_wrapper #bodymap-toggle-wrapper .toggle-option:last-child {
  margin-right: 0;
}





@media (min-width: 1500px) {
  #selected-genes-list {
      margin-top: 2px;
  }
}


.selected-hormones-container {
  position: relative !important;  /* back in normal flow */
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: .25rem 0;

  grid-column: 1 !important;     /* ⬅ column 1 */
  grid-row: 2 !important;        /* ⬆ first row */
  justify-self: start;
  align-self: start;
  z-index: 2500;                  /* above charts; below toggle/search */
}



.hormone-info-text {
    align-self: flex-start; /* Align to the left */
    font-size: 14px;
    color: #1f3a4d;
    font-style: italic;
    margin-top: 0%;
    margin-bottom:0%;
}

#selected-hormones-list {
  display: flex;              /* arrange boxes in a row */
  flex-wrap: wrap;            /* allow wrapping onto new lines */
  gap: 6px;                   /* small spacing between boxes */
  max-width: 100%;            /* take full width of parent */
  margin-top: 8px;
  align-items: flex-start;
}

@media (min-width: 1500px) {
  
  .info-box-hormone { position: relative; top: 0; margin-top: 0; }
}




/* Style for the title */
.selected-hormones-container h5 {
  position: relative;
  padding-right: 260px;
  font-size: 18px;
  font-weight: bold;
  color: #1f3a4d; /* Deep blue to match theme */
  margin-top: 6%; /* More spacing from content */
  margin-left: 0%;
  margin-bottom: 0%;
}

.selected-hormones-container h5 .tooltip-container-hormone-main {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  z-index: 6000;
}

.selected-hormones-container .jump-to-hrdb-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #0b5ed7;
  text-decoration: none;
  margin-left: 14px;
  white-space: nowrap;
}

.selected-hormones-container .jump-to-hrdb-link:hover,
.selected-hormones-container .jump-to-hrdb-link:focus {
  color: #084298;
  text-decoration: underline;
}

.selected-genes-container-umap .gene-info-text {
    order: 1;
    align-self: flex-start; /* Align to the left */
    font-size: 14px;
    color: #1f3a4d;
    font-style: italic;
    margin-top: 0%;
    margin-bottom:4%;
}

.gene-info-text-umap {
    align-self: flex-start; /* Align to the left */
    font-size: 14px;
    color: #1f3a4d;
    font-style: italic;
    margin-top: 4%;
    margin-bottom:4%;
}


.loading-spinner {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 12px;
    z-index: 300001;
}

#loading-bar-container-gene {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-width: calc(100vw - 32px);
    height: 12px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    z-index: 300002;
    pointer-events: none;
}

#loading-bar-gene {
    width: 0%;
    height: 100%;
    background: #1f3a4d;
    transition: width 0.6s;
}

.spinner {
    width: 25px;
    height: 25px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #1f3a4d; /* Dark blue */
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Style for the selected gene boxes */
#selected-genes-list {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    margin-top: -3%;
    gap: 10px; /* Adds space between boxes */
    justify-content: flex-start; /* Center the gene boxes within the container */
    z-index: 200;
}

@media (min-width: 1800px) {
  #selected-genes-list {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    margin-top: 1%;
    width: 50%;
    gap: 10px; /* Adds space between boxes */
    justify-content: flex-start; /* Center the gene boxes within the container */
    z-index: 200;
  }
}

#selected-genes-list-umap {
    order: 2;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    gap: 10px; /* Adds space between boxes */
    justify-content: flex-start; /* Center the gene boxes within the container */
    z-index: 3;
}

/* Style for the selected gene box */
.selected-gene-box {
    position: relative;
    display: inline-block;
    overflow: visible;
    padding: 8px 16px;
    margin: 2px;
    margin-bottom: 0;
    background-color: #f1f1f1;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 5;
}

.selected-gene-label {
    display: inline-flex;
    align-items: center;
}

.hormone-warning {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    color: #c62828;
    cursor: help;
}

.selected-gene-box.warning-orange .hormone-warning {
    color: #ef6c00;
}

.hormone-warning-mark {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.hormone-warning-tooltip {
    position: absolute;
    left: 10px;
    bottom: 100%;
    margin-left: 0;
    margin-bottom: 8px;
    transform: translateY(0);
    padding: 4px 6px;
    background: #fff0f0;
    color: #7a1e1e;
    border: 1px solid #e57373;
    border-radius: 4px;
    font-size: 12px;
    max-width: min(50ch, calc(100vw - 24px));
    white-space: normal;
    overflow-wrap: break-word;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 7001;
}

.selected-gene-box.warning-orange .hormone-warning-tooltip {
    background: #fff4e5;
    color: #8a4b08;
    border-color: #f0a64b;
}

.hormone-warning-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 12px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #e57373;
    transform: translateX(0);
}

.selected-gene-box.warning-orange .hormone-warning-tooltip::after {
    border-top-color: #f0a64b;
}

#selected-hormones-list .selected-gene-box.has-warning:hover .hormone-warning-tooltip,
#selected-hormones-list .selected-gene-box.has-warning:focus-within .hormone-warning-tooltip,
#selected-hormones-list .hormone-warning:hover .hormone-warning-tooltip,
#selected-hormones-list .hormone-warning:focus .hormone-warning-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.selected-gene-box.active-gene-box {
    background-color: grey;
    color: white; /* Optional: change text color to make it stand out */
    z-index: 3;
}

.selected-gene-box.has-warning {
    z-index: 6500;
}

.selected-gene-box.has-warning:hover,
.selected-gene-box.has-warning:focus-within {
    z-index: 7000;
}

/* Delete button styles (same as before) */
.delete-button {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff6b6b;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid #ff6b6b;
    z-index: 3;
}

.delete-button:hover {
    background-color: #ff4c4c;
    cursor: pointer;
    z-index: 3;
}

#gene_wrapper #dataTypeToggleGene .toggle-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 18px;
}

#gene_wrapper #dataTypeToggleGene .toggle-delete-button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #ff6b6b;
  background-color: #ff6b6b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

#gene_wrapper #dataTypeToggleGene .toggle-delete-button:hover {
  background-color: #ff4c4c;
  border-color: #ff4c4c;
}

.selected-gene-box:hover {
    background-color: #e0e0e0;
    z-index: 3;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .navbar .container {
    flex-wrap: wrap;
  }

  .navbar form {
    order: 3;
    margin: 1rem 0;
    max-width: 100%;
  }

  .navbar-nav {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .navbar-brand-text {
    font-size: 1.25rem;
  }

  .navbar-nav .nav-link::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .navbar .container {
    padding: 0.5rem;
  }

  .navbar-brand-text {
    font-size: 1.1rem;
  }

  .navbar .btn {
    margin-top: 0.5rem;
    width: 100%;
    margin-left: 0;
  }

  .navbar form {
    display: flex;
    flex-direction: column;
  }
}

.search_bar_tissue {
    position: absolute; /* Positioning the search bar */
    top: 9%; /* Adjust to move it higher or lower */
    right: 21%; /* Adjust to move it to the right */
    /*width: auto; /* Allow the width to adjust automatically */
}

#gene_wrapper.info-box {
    grid-row: 1 !important;
    position: relative;
    /*background-color: #f8f9fa; /* Keep the light gray background */
    /*padding: 15px 20px;*/
    border-radius: 8px;
    font-size: 16px;
    text-align: left;
    /*box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);*/
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap properly on smaller screens */
    max-width: 65%;
    margin-left: 1.7%;
    margin-bottom: -2%;
    margin-top: -1%;
    /*z-index: 1003;*/
}

@media (min-width: 1500px) {
  .info-box-tissue {
    border-radius: 8px;
    font-size: 13px;
    text-align: left;
    position: absolute;

    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;

    max-width: 65%;
    margin-left: 1.7%;
    margin-top: 2%;
    top: 10%;     /* adjust as needed */
    /* remove negative bottom margin */

    /* pin to the top of its flex‐parent */
    align-self: flex-start;
  }
}

.info-box-tissue {
  border-radius: 8px;
  font-size: 10px;
  text-align: left;
  position: absolute;

  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;

  max-width: 65%;
  margin-left: 1.7%;
  margin-top: 2%;
  top: 10%;     /* adjust as needed */
  /* remove negative bottom margin */

  /* pin to the top of its flex‐parent */
  align-self: flex-start;
}

.info-box-tissue__text {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 1500px) {
  .info-box-tissue {
    border-radius: 8px;
    font-size: 16px;
    text-align: left;
    position: absolute;

    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 14px;

    max-width: 65%;
    margin-left: 1.7%;
    margin-top: 2%;
    top: 8%;     /* adjust as needed */
    /* remove negative bottom margin */

    /* pin to the top of its flex‐parent */
    align-self: flex-start;
  }
}



#info-box-hormone, .info-box-hormone{
  position:relative !important; top:auto !important; left:auto !important;
  grid-column: 1;           /* use 1 / -1 to span all columns */
  grid-row: 1;
  justify-self:start; align-self:start;
  margin:0 0 .25rem 0;
  z-index:auto; /* avoid stacking context so tooltip z-index can sit above toggles */
}



.info-box-umap {
    position: relative;
    /*background-color: #f8f9fa; /* Keep the light gray background */
    /*padding: 15px 20px;*/
    border-radius: 8px;
    font-size: 16px;
    text-align: left;
    /*box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);*/
    /* display: flex;
    flex-wrap: wrap; 
    max-width: 65%;
    margin-left: 1.7%;
    margin-bottom: -3%;
    margin-top: -2%;
    z-index: 3; */
}

.info-box p,
.info-box-umap p,
.info-box-tissue p,
.info-box-hormone p {
    margin: 0;
    font-size: 15px;
    color: #333;
}

.info-box strong,
.info-box-umap strong,
.info-box-tissue strong,
.info-box-hormone strong {
    color: #1f3a4d; /* Deep blue for emphasis */
    font-weight: bold;
}

.info-box::after {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap properly on smaller screens */
    content: "";
    display: block;
    width: 50%;
    height: 4px;
    background: #1f3a4d; /* Deep blue line */
    margin: 2% 0 0;
    border-radius: 2px;
    z-index: inherit;
}

.info-box-umap::after {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap properly on smaller screens */
    content: "";
    display: block;
    width: 50%;
    height: 4px;
    background: #1f3a4d; /* Deep blue line */
    margin: 2% 0 0;
    border-radius: 2px;
    z-index: inherit;
}

/* .info-box-tissue::after {
    display: flex;
    flex-wrap: wrap; 
    content: "";
    display: block;
    width: 50%;
    height: 4px;
    background: #1f3a4d; 
    margin: 2% 0 0;
    border-radius: 2px;
    z-index: inherit;
} */

.info-box-hormone::after {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap properly on smaller screens */
    content: "";
    display: block;
    width: 50%;
    height: 4px;
    background: #1f3a4d; /* Deep blue line */
    margin: 2% 0 0;
    border-radius: 2px;
    z-index: inherit;
}

/* Container to hold the human body and organs */
.human-body-container {
    position: relative; /* Set to relative to position child elements absolutely */
    width: 150%;
    top: 3%;
    max-width: 550px; /* Set the width of the human body image */
    aspect-ratio: 210 / 297;
  height: auto;
    margin: 0 auto 0 0; /* Center the container on the page */
    margin-top: 0; /* Scales based on viewport height */
    margin-left: 0px;

    text-align: center;
    z-index: 5;
    overflow: visible; 
    min-width: 0;
}

@media (min-width: 1500px) {
  .human-body-container {
    position: relative; /* Set to relative to position child elements absolutely */
    width: 170%;
    top: 18vh;
    max-width: 550px; /* Set the width of the human body image */
    aspect-ratio: 210 / 297;
  height: auto;
    margin: 0 auto 0 0; /* Center the container on the page */
    margin-top: 0; /* Scales based on viewport height */
    margin-left: 0px;
    left: 0px;
    text-align: center;
    z-index: 5;
    margin-bottom: 10%;
    overflow: visible; 
    min-width: 0;
  }
}






.human-body-container-umap {
    position: absolute; /* Set to relative to position child elements absolutely */
    width: 100%;
    top: 18%;
    max-width: 450px; /* Set the width of the human body image */
    height: 400px;
    margin: 0 auto 0 0; /* Center the container on the page */
    margin-top: 0; /* Scales based on viewport height */
    margin-left: 0px;
    left: -6%;
    text-align: center;
    z-index: 1;
    align-items: center;
    display: flex;
}



.human-body-container-2 {
    position: relative;
    max-width: 550px;
    margin-top: 60px; /* Move it closer to the navbar */
    height: auto;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    left: -220px;
    opacity: 0;
}

.human-containers {
    display: flex;
    justify-content: center; /* Centers the children horizontally */
    align-items: center; /* Centers the children vertically */
    height: auto; /* Full viewport height */
    gap: 0; /* Add space between the two containers */
}

.human-hormone-body-container {
    position: relative; /* Set to relative to position child elements absolutely */
    max-width: 430px; /* Set the width of the human body image */
    margin: 0; /* Center the container on the page */
    margin-top: 16vh; /* Scales based on viewport height */
    margin-left: 0px;
    height: auto;
    padding: 0;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    margin-right: -145px;
}

.human-receptor-body-container {
    position: relative; /* Set to relative to position child elements absolutely */
    max-width: 430px; /* Set the width of the human body image */
    margin: 0; /* Center the container on the page */
    margin-top: 16vh; /* Scales based on viewport height */
    margin-left: 0px;
    height: auto;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    padding: 0;
    margin-left: -145px;
}

.graphs-container {
    position: relative;
    align-items: flex-start;
    grid-column: 1 / -1;
    grid-row: 3;
    /*left: 15%;
    right: 40%;   /* Adjust horizontal position */ 
    width: 100%;  /* Set your desired width for the graphs */
    /* Optionally, add background, padding, or borders */
    background: rgba(255,255,255,0.9);
    justify-content: space-between;  /* Space out the graphs */
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    gap: 10px;
    overflow: visible;
    overflow-x: auto;
}

.umap-container {
    position: relative;
    align-items: flex-start;
    grid-column: 2;
    grid-row: 1;
    /*left: 15%;
    right: 40%;   /* Adjust horizontal position */ 
    width: 100%;  /* Set your desired width for the graphs */
    /* Optionally, add background, padding, or borders */
    background: rgba(255,255,255,0.9);
    justify-content: space-between;  /* Space out the graphs */
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    gap: 10px;
    overflow: visible;
    overflow-x: auto;
}

#umap-plot,
#umap-plot-gene,
.gene-expression-container-second {
    width: 100%;
    height: 500px; /* Or whatever height works for your layout */
    max-width: 100%;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 250px; /* Ensure minimum width so axes can render */
}

/* Container for the dotplot */
.dot-container {
    grid-column: 1 / -1;
    grid-row: 4;
    display: block;
    position: relative;
    justify-content:center;           /* or flex if you require inner alignment */
    margin-top: 13%;
    margin-bottom: 0%;        /* Space between the UMAP plots and dotplot */
    width: 100%;                /* Adjust width as needed */
    height: auto;              /* Let height adjust to content */
    box-sizing: border-box;
    /* Removed absolute positioning and transforms */
    z-index: 400;
}

.dot-container h6 {
    display: block;
    justify-content:center;           /* or flex if you require inner alignment */
    margin-left: 5%;
    width: 100%;                /* Adjust width as needed */
    height: auto;              /* Let height adjust to content */
    box-sizing: border-box;
    z-index: 400;
    /* Removed absolute positioning and transforms */
}

/* Optional: Dotplot-specific styling */
.dot_plot {
    margin-top: 4%;
    /*left: 20%;
    width: 100%;               /* Take full width of the dot-container */
    height: 600px;             /* Set a fixed height or use auto if you want it to adjust */
    /* Add any border, background, or padding as needed */
}

.plot-subtitle-umap {
    text-align: left;
    font-size: 12px;
    color: #555;
    font-style: italic;
    margin-top: -2px;
    margin-left: 5%;
    z-index: 400;
}

.plot-subtitle-umap::after {
    content: "";
    position: absolute;
    bottom: 89%; /* Adjusts distance from text */
    left: 17%;
    width: 24%; /* Makes it half the width of the text */
    height: 3px;
    background-color: #1f3a4d;
    transform: translateX(-50%); /* Centers the underline */
    border-radius: 8px; /* Softens the edges */
}

/* Style for the human body image */
.human-body {
    width: 100%; /* Ensure it takes up the full width of the container */
    display: block; /* Center the image horizontally */
}

/* Container for each organ and its label */
.organ-label-container {
    position: absolute;
    text-align: center;
    /* Ensure container dimensions are appropriate for the organs */
    width: auto; /* Auto width to fit content */
    height: auto; /* Auto height to fit content */
    pointer-events: auto;
    display: inline-block;
}

/* General style for organ images */
.organ {
    width: 15%; /* Set a fixed width for the organ images */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* Optional: Change cursor to indicate interactivity */
    position: relative; /* Ensure it can be positioned within its container */
}

/* Specific positioning for the heart */
.heart-container {
    top: 30%; /* Adjust this value to position the heart vertically */
    left: 53%; /* Adjust this value to position the heart horizontally */
    transform: translate(-50%, -50%); /* Center the heart relative to the specified position */
}

/* Specific positioning for the pancreas */
.pancreas-container {
    top: 38%; /* Adjust this value to position the pancreas vertically */
    left: 51.8%; /* Adjust this value to position the pancreas horizontally */
    transform: translate(-50%, -50%); /* Center the pancreas relative to the specified position */
}

/* Specific positioning for the adipose tissue */
.adipose-container {
    top: 46%; /* Adjust this value to position the pancreas vertically */
    left: 54.7%; /* Adjust this value to position the pancreas horizontally */
    transform: translate(-50%, -50%); /* Center the pancreas relative to the specified position */
}

/* Specific positioning for the pituitary gland */
.pituitary-container {
    top: 11%; /* Adjust this value to position the pancreas vertically */
    left: 50.9%; /* Adjust this value to position the pancreas horizontally */
    width: 30%;
    transform: translate(-50%, -50%); /* Center the pancreas relative to the specified position */
}

.thyroid-container {
    top: 17%; /* Adjust this value to position the pancreas vertically */
    left: 50.9%; /* Adjust this value to position the pancreas horizontally */
    width: 25%;
    transform: translate(-50%, -50%); /* Center the pancreas relative to the specified position */
}

/* Hide the label and line by default */
.organ-label {
    display: none; /* Hide by default */
    position: absolute; /* Position it absolutely relative to .organ-label-container */
    top: 30%; /* Position below the organ */
    left: 50%; /* Center horizontally */
    transform: translateX(120%); /* Center horizontally */
    font-size: 16px;
    background-color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap; /* Prevent text from wrapping */
    z-index: 300001; /* Ensure it appears above other elements */
    pointer-events: auto; /* Parent is hoverable */
}

/* Show the label and line on hover of the organ container */
.organ-label-container:hover .organ-label {
    display: block; /* Show the label on hover */
}

/* Line pointing from the organ to the label */
.organ-label::before {
    content: '';
    position: absolute;
    top: 50%; /* Position at the center vertically */
    left: -70px; /* Position line to the left of the label */
    transform: translateY(-50%); /* Center line vertically with the label */
    width: 70px; /* Length of the line */
    height: 2px; /* Thickness of the line */
    background-color: #000; /* Color of the line */
}

/* Specific label positioning for the heart */
.heart-container .organ-label {
    top: 30%;
    left: 60%; /* Adjust left position if necessary */
}

/* Specific label positioning for the pancreas */
.pancreas-container .organ-label {
    top: 30%;
    left: 60%; /* Adjust left position if necessary */
}

/* Extend the line for the pancreas label */
.pancreas-container .organ-label::before {
    width: 110px; /* Extend the length of the line */
    left: -110px; /* Adjust the start position of the line to match its length */
}

/* Specific label positioning for the adipose tissue */
.adipose-container .organ-label {
    top: 30%;
    left: 40%; /* Adjust left position if necessary */
}

/* Extend the line for the adipose label */
.adipose-container .organ-label::before {
    width: 90px; /* Extend the length of the line */
    left: -90px; /* Adjust the start position of the line to match its length */
}

/* Extend the line for the adipose label */
.pituitary-container .organ-label::before {
    width: 130px; /* Extend the length of the line */
    left: -130px; /* Adjust the start position of the line to match its length */
}

/* Extend the line for the adipose label */
.thyroid-container .organ-label::before {
    width: 120px; /* Extend the length of the line */
    left: -120px; /* Adjust the start position of the line to match its length */
}

.umap-container {
    position: relative;
    width: 100%;  /* Full width of the parent container */
    height: 400px; /* Height of the UMAP plot */
    margin-bottom: 5px; /* Space between the plots */
    padding: 0; /* Remove padding */
    margin-top: 0px; /* Ensure there's no top margin */
    z-index: 2;  /* Make sure it’s above the gene plot */
}

.gene-expression-container {
    position: relative;
    width: 100%;  /* Full width of the parent container */
    height: 500px; /* Height of the gene expression plot */
    margin-top: 0px;
    margin-bottom: 50px;
    overflow: hidden;
    z-index: 1;  /* Lower than umap-container */
}

/* Container for the cluster information box */
#cluster-info-box {
    opacity: 0;  /* Initially invisible */
    visibility: hidden; /* Hidden by default; shown when data is available */
    position: absolute; /* Position it as needed */
    /*top: 80px; /* Adjust as needed */
    /*left: 85%;
    /*right: 30px; /* Adjust as needed */
    width: 480px; /* Set a fixed width */
    background-color: #ffffff; /* White background for contrast */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    padding: 15px; /* Padding for content */
    z-index: 10; /* Ensure it appears above other elements */
    filter: blur(10px);  /* Initially blurred */
    transform: translateX(50px); /* Slide out of view */
    transition: opacity 0.75s ease, filter 0.8s ease, transform 0.75s ease;  /* Smooth transition for all */
}

#cluster-info-box.show {
    opacity: 1; /* Make it fully visible */
    visibility: visible;
    filter: blur(0px);  /* No blur */
    transform: translateX(0); /* Moves the box to the intended position */
}

/* Header style for the box */
#cluster-info-box h3 {
    margin: 0; /* Remove default margin */
    color: #333; /* Dark color for contrast */
    font-size: 18px; /* Font size */
    border-bottom: 2px solid #d1d3d7; /* Bottom border */
    padding-bottom: 10px; /* Spacing below the header */
}

/* Paragraph styling for info */
#cluster-info-box p {
    margin: 8px 0; /* Spacing between paragraphs */
    color: #555; /* Slightly lighter color for text */
    font-size: 14px; /* Font size */
}

.info-columns {
    display: flex;
    flex-direction: column; /* Stack columns vertically */
    gap: 0px; /* Space between the columns */
    width: 100%;
    box-sizing: border-box; /* Ensure padding is included in width */
}

.info-column h5 {
    font-size: 1.0em;
    margin-top: 30px;
    margin-bottom: 0px;
    text-align: left;
    color: #333;
    font-weight: bold;

}

.info-column p {
    margin: 8px 0;
}

hr {
    margin: 20px 0;
    border: 1px solid #ddd;
    width: 100%; /* Adjust as needed; could also use a percentage */
}

.info-row {
    display: flex;          /* Use flexbox to align items */
    gap: 20px;            /* Space between items */
    margin-top: 10px;     /* Optional: space above the row */
}

.info-row p {
    margin: 0;            /* Remove default margins */
}

.circles_plot{
    opacity: 0; /* Start invisible */
    width: 30%; /* Make the circles section take 20% */
    padding-top: 20px;
    padding-left: 0px; /* Space between plot and circles */
    margin-left: -165px; /* Fine-tune the positioning */
    margin-top: 150px;
    text-align: center;
    z-index: 10;
}

.circle-item {
    display: inlines;
    gap: 0px; /* Space between the circle and the label */
    justify-content: left; /* Center-align the contents */
    margin-bottom: 10px; /* Space between items */
}

.circle-item svg {
    display: inline-block;
    margin: 0 auto;
}

#dot_plot {
    width: 100%; /* Ensure the plot takes full width */
    z-index: 8;
}

.gene-hover-box {
    display: none; /* Initially hidden */
    position: absolute; /* Position it relative to the containing element */
    background-color: white; /* Background color of the tooltip */
    border: 1px solid #ccc; /* Border for the tooltip */
    padding: 10px; /* Padding inside the tooltip */
    z-index: 300001; /* Ensure it appears on top */
    text-align: center; /* Center the text inside the tooltip */
    font-size: 14px; /* Reduce font size */
    border-radius: 5px; /* Rounded corners for the tooltip */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
}

.gene-info-title {
    position: relative;
    font-size: 16px; /* Reduce font size */
    top: -10px;
    display: inline-block; /* Allows for padding and border */
    padding: 10px 20px; /* Padding for spacing around the text */
    background-color: #f9f9f9; /* Light background color for the box */
    border: 1px solid #ccc; /* Light border color */
    border-radius: 8px; /* Rounded corners */
    font-size: 14px; /* Font size */
    color: #333; /* Text color */
    margin-right: 5px; /* Space to the right */
    float: right;
    cursor: default; /* Prevent cursor change on hover */
}

.gene-info-title:hover {
    background-color: #e6e6e6; /* Darken background on hover */
    border-color: #bbb; /* Darken border color on hover */
}

.toggle-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    /*border-bottom: 2px solid #ddd; /* Light grey bottom border */
    margin-bottom: 15px;
    width: 45%;
    max-width: 520px;
    left: 70%;
    top: -120%;
    margin-left: 10px;
}

#gene_wrapper #plotTogglesRow {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: none;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 25px 0;
  align-self: start;
  z-index: 20;
}

#gene_wrapper #scsnToggleContainer {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  max-width: none;
  margin: 0 18px 0 0;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

#gene_wrapper #scsnToggleContainer .toggle-options-wrapper {
  margin-left: 0;
}

#gene_wrapper #scsnToggleContainer .toggle-option {
  min-width: 120px;
  width: auto;
  padding: 10px 16px;
  white-space: nowrap;
}

#gene_wrapper #scsnTooltipContainer {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 8px;
}




#right-controls{
  grid-column: 3;
  justify-self: start;
  align-self: end;   /* was start */
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: fit-content;
}

/* one-line horizontal scroller for the hormone/tissue buttons */
/* #dataTypeToggle{
  grid-column: 3;            
  grid-row: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;         
  width: 100%;
  overflow-x: auto;         
  overflow-y: hidden;
  white-space: nowrap;       
  padding: 40px 0 12px 50px;       
  box-sizing: content-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  align-items: flex-end; 
} */

/* pills sit side-by-side and size to content */
/* works but text overflows */
/* #dataTypeToggle .toggle-option{
  flex: 0 0 auto;          
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
} */




#hormone-level-toggle{
  display: inline-flex;   /* instead of flex or block */
  width: auto;  
  margin-top: .35rem;
  border-bottom: 2px solid #1f3a4d;
  padding-bottom: .25rem;
}




/* #hormone-level-toggle {
  display: flex;
  flex-direction: row;       
  align-items: stretch;
  justify-content: stretch;
  gap: .5rem;
  width: 100%;
} */

/* overlay toggle: remove it from normal flow so it won't push the plots */





/* #dataTypeToggle.toggle-container-hormone{
  width: 100%;
  display: flex;
  flex-wrap: nowrap !important;
  padding: 6px 8px 10px !important;
  margin: 0 auto !important;
  max-width: 420px !important;   
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important; 
  box-sizing: content-box !important;
  gap: .5rem;
  align-items: stretch !important; 
} */

/* #dataTypeToggle.toggle-container-hormone{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 12px;
  width: 100%;
  align-items: stretch;
  border-bottom: 3px solid #1f3a4d;
} */


/* This wrapper ensures only the options have the underline */
.toggle-options-wrapper {
    
    justify-content: space-between;
    position: relative;
    border-bottom: 2px solid #ddd; /* Keep light grey line only under options */
    display: inline-flex;
    width: auto;  
    align-self: flex-start;


    
}

.toggle-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    position: relative;
    width: 25%; 
    background-color: #f0f0f0;   
    border-radius: 6px;          
    transition: background 0.2s; 
}

.toggle-option:hover {
    background-color: #e0e0e0; /* slightly darker grey on hover */
}

.toggle-option.active {
    background-color: #d6d6d6;
    color: #1f3a4d; /* Blue active text */
}

.toggle-option.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1f3a4d; /* Blue underline */
    transition: left 0.3s ease-in-out;
}

/* reset text element margins */
.toggle-option h4,
.toggle-option p,
.toggle-option span {
  margin: 0;
  line-height: 1.1;
}

.toggle-option strong,
.toggle-option .toggle-hormone {
  display: block;
  margin: 0;
  line-height: 1;        /* tighten the two lines */

  
}

.toggle-container .toggle-options-wrapper {
    gap: 10px;
}

.toggle-container .toggle-option {
    flex: 1 1 0;
    width: auto;
    min-width: 100px;
    padding: 10px 14px;
}

.toggle-container .tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-container-hsc {
    position: relative;
    display: inline-block;
    margin-left: 80%;
    margin-top: -80%;
    z-index: 6001;
}

.tooltip-container-rsc {
    position: relative;
    display: inline-block;
    margin-left: 70%;
    margin-top: -10%;
    z-index: 3000; 
}

.tooltip-container-umap {
    left: 67%;
    top: -37%;
    position: relative;
    display: inline-block;
}

.tooltip-container-dot {
    left: 57%;
    top: 11%;
    position: relative;
    display: inline-block;
    z-index: 300001;
}

.tooltip-container-ranked {
    position: absolute;
    left: 35%;
    top: 1%;
    position: relative;
    display: inline-block;
}

.tooltip-container-tissue {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-top: 2px;
    margin-left: 0;
    z-index: 300001;
}

/* .tooltip-container-hormone-main {
    left: 35%;
    bottom: 75%;
    position: absolute;
    display: inline-block;
    z-index: 6000;
} */

@media (min-width: 1500px) {
  .tooltip-container-tissue {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 0;
      margin-top: 0;
      z-index: 300001;
  }
  .tooltip-container-ranked {
      position: absolute;
      left: 27%;
      top: 25%;
      display: inline-block;
  }
}

/* "i" icon styling */
.tooltip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #1f3a4d; /* Matching active blue */
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 3000; /* Ensures it stays above other elements */
}

/* Keep hormone warning info icon inline with label and slightly smaller */
.hormone-warning.tooltip-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    min-width: 14px;
    font-size: 10px;
    margin-right: 4px;
    vertical-align: middle;
    transform: translateY(-1px);
}

/* Tooltip styling */
.tooltip-text {
    visibility: hidden;
    width: 550px; /* Responsive: Max width is 80% of viewport but never more than 250px */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: left;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;

    /* Positioning */
    position: absolute;
    bottom: 120%;
    transform: translateX(-80%);

    /* Visibility & Interaction */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;

    /* Text Wrapping */
    white-space: normal;
    word-wrap: break-word;
    z-index: 4000;
}

.tooltip-container-hormone-main .tooltip-text {
    top: 50%;
    bottom: auto;
    left: calc(100% + 15px);
    transform: translateY(-50%);
    right: auto;
    width: 360px;
    max-width: 360px;
    padding: 8px 10px;
    font-size: 11px;
    z-index: 3500;
}

.tooltip-text-tissue {
    visibility: hidden;
    width: 550px; /* Responsive: Max width is 80% of viewport but never more than 250px */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: left;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;

    /* Positioning */
    position: absolute;
    top: calc(100% + 8px);
    left: calc(100% + 8px);
    margin-top: 0;
    transform: none;

    /* Visibility & Interaction */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;

    /* Text Wrapping */
    white-space: normal;
    word-wrap: break-word;
    z-index: 200001;
}

.tooltip-text-rsc {
    visibility: hidden;
    width: 400px; /* Responsive: Max width is 80% of viewport but never more than 250px */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: left;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;

    /* Positioning */
    position: absolute;
    bottom: 120%;
    transform: translateX(-80%);

    /* Visibility & Interaction */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;

    /* Text Wrapping */
    white-space: normal;
    word-wrap: break-word;
    z-index: 4000;
}

.tooltip-text-hsc {
    visibility: hidden;
    width: 400px; /* Responsive: Max width is 80% of viewport but never more than 250px */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: left;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;

    /* Positioning */
    position: absolute;
    bottom: 120%;
    transform: translateX(-80%);

    /* Visibility & Interaction */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;

    /* Text Wrapping */
    white-space: normal;
    word-wrap: break-word;
    z-index: 5000;
}

/* Ensure tooltip appears only when hovering over the icon */
.tooltip-icon:hover + .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip-icon:hover + .tooltip-text-tissue {
    visibility: visible;
    opacity: 1;
}

/* Ensure tooltip appears only when hovering over the icon */
.tooltip-icon:hover + .tooltip-text-rsc {
    visibility: visible;
    opacity: 1;
    z-index: 100000;
}

.tooltip-icon:hover + .tooltip-text-hsc {
    visibility: visible;
    opacity: 1;
}

.ranked-cluster-wrapper{
  display: none;
  position: absolute;
  width: 50%;
  height: 80%;
  left: 37%;
  top: 40%;
}

.ranked-spacer {
  display: none;
  visibility: hidden;
  height: calc( 4vh /* top */ + 80vh /* plot height */ + 20px /* gutter */ );
}

@media (min-width: 1500px) {
  .ranked-spacer {
    display: none;
    visibility: hidden;
    height: calc( 4vh /* top */ + 100vh /* plot height */ + 20px /* gutter */ );
  }

  .ranked-cluster-wrapper{
    display: none;
    position: absolute;
    width: 50%;
    height: 75%;
    left: 37%;
    top: 34%;
  }
}

#gene_wrapper .ranked-plot-container {
    position: relative;
    grid-column: 2 !important; 
    grid-row:2 !important;
    width: 100%; /* Set a specific width for the container */
    height: 600px; /* Set a specific height for the container */
    display: none; /* Hidden by default; shown by JS when active */
    /*margin: 500px -2500px 0 0; /* Move it up and to the right */

    overflow: auto;    /* Hide overflow if the plot doesn't fit */
}

#gene_wrapper .cluster-plot-container {
    grid-column: 2 !important; 
    grid-row: 3 !important;
    
    position: relative;  /* Ensures elements stack properly */
    width: 100%; /* Ensures both plots have the same width */
    height: 80vh; /* Fixed height to maintain consistency */
    display: none; /* Initially hidden */
    margin-top: 0;
    margin-left: 0%; /* Move it to the right */
    padding-top: 0;
    /*margin: 0 auto; /* Centers the plots horizontally */
    overflow: visible; /* Prevents any overflow issues */
    z-index: auto;
}








/* Style for the title */
.ranked-plot-container h5 {
    font-size: 16px;
    text-align: left;
    font-weight: bold;
    color: #333; /* Deep blue */
    margin-bottom: 0px;
    position: relative; /* Needed for the underline positioning */
    display: inline-block; /* Keeps it centered without stretching */
}

.plot-title {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 0px;
    position: relative; /* Needed for the underline positioning */
    display: inline-block; /* Keeps it centered without stretching */
}

.plot-title-cluster {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 0px;
    position: relative; /* Needed for the underline positioning */
    display: inline-block; /* Keeps it centered without stretching */
}

.plot-subtitle,
.plot-subtitle-cluster {
    text-align: left;
    font-size: 12px;
    color: #555;
    font-style: italic;
    margin-top: 6px;
    padding-top: 10px;
    line-height: 1.45;
    position: relative;
}

.plot-subtitle::after,
.plot-subtitle-cluster::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72%;
    height: 3px;
    background-color: #1f3a4d;
    border-radius: 8px; /* Softens the edges */
}

.sc-title-wrapper {
    display: flex;
    justify-content: space-between; /* Side by side with equal space */
    align-items: flex-start;
    width: 100%;
    margin-left: 8%;
    margin-bottom: 1%;
    flex-wrap: wrap; /* Stack titles vertically if the screen is small */
}

/* Title group containing title and subtitle */
.title-group {
    margin-bottom: 4px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Consistent Title Styling */
.plot-title-sc,
.plot-title-scr {
    text-align: left;
    font-size: 16px;
    color: #333;
    margin-bottom: 4px;
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Subtitle Styling */
.plot-subtitle-sc,
.plot-subtitle-scr {
    text-align: left;
    font-size: 12px;
    color: #555;
    font-style: italic;
    margin-top: 0;
    position: relative;
    width: 120%;
}

/* Underline Effect */
.plot-subtitle-sc::after,
.plot-subtitle-scr::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 60%; /* Full width to keep it consistent */
    height: 3px;
    background-color: #1f3a4d;
    border-radius: 8px;
}

/* Media Query for Small Screens */
@media (max-width: 1200px) {
    .sc-title-wrapper {
        flex-direction: column; /* Stack on smaller screens */
        gap: 5%;
        align-items: center;
    }

    .title-group {
        width: 90%; /* Make them full width on smaller devices */
        margin-top: 1%;
    }
}

#gene_wrapper .ranked_plot {
    width: 100%;
    height: 600px; 
    min-width: 700px;

}
  
#gene_wrapper .cluster_plot {
    width: 100%;
    height: 800px; 
    min-width: 750px;
}

/* Ensure they appear when needed */
#gene_wrapper .ranked-plot-container.visible {
    position: relative;
    min-width: 700px;
    grid-column: 2 !important; 
    grid-row:2 !important;
    width: auto; /* Set a specific width for the container */
    height: 600px; /* Set a specific height for the container */
    display: block; /* Initially hide the plot */
    /*margin: 500px -2500px 0 0; /* Move it up and to the right */

    overflow: visible;    /* Hide overflow if the plot doesn't fit */
}


#gene_wrapper .cluster-plot-container.visible {
    min-width: 700px;
    position: relative;
    grid-column: 2 !important; 
    grid-row: 3 !important;
    width: auto; /* Set a specific width for the container */
    height: 800px; /* Set a specific height for the container */
    display: block; /* Initially hide the plot */
    /*margin: 500px -2500px 0 0; /* Move it up and to the right */

    overflow: visible;    /* Hide overflow if the plot doesn't fit */
}



/* Add spacing between the two plots */
.cluster-plot-container {
    margin-top: 0px; /* Ensures a small gap between the two plots */
}

/* Optional: Style for when the plot is visible */
.cluster-plot-container.visible {
    display: block; /* Show the plot when it has content */
}

#gene_wrapper .celltype-page-controls {
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 8px 0 10px;
}

#gene_wrapper .celltype-page-btn {
    border: 1px solid #c7ccd1;
    background: #f4f6f8;
    color: #1f3a4d;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

#gene_wrapper .celltype-page-btn:hover:not(:disabled) {
    background: #e9edf1;
}

#gene_wrapper .celltype-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#gene_wrapper .celltype-page-status {
    min-width: 110px;
    font-size: 12px;
    color: #555;
    text-align: center;
    font-weight: 600;
}



#gene_wrapper .individual-rank-plot-container{
  position: relative;
  grid-column: 2 !important; 
  grid-row:2 !important;
  width: 100%; /* Set a specific width for the container */
  height: 80vh; /* Set a specific height for the container */
  display: none; /* Initially hide the plot */
  /*margin: 500px -2500px 0 0; /* Move it up and to the right */

  overflow: visible;    /* Hide overflow if the plot doesn't fit */
}

@media (min-width: 1500px) {
  #gene_wrapper .individual-rank-plot-container {
    position: relative;
    grid-column: 2 !important; 
    grid-row:2 !important;
    width: 100%; /* Set a specific width for the container */
    height: 80vh; /* Set a specific height for the container */
    display: none; /* Initially hide the plot */
    /*margin: 500px -2500px 0 0; /* Move it up and to the right */

    overflow: visible;    /* Hide overflow if the plot doesn't fit */
  }
}


 

#gene_wrapper .individual_ranked_plot {
  width: 100%;
  height: 600px; 
  min-width: 700px;
} 

#gene_wrapper #plotViewToggleContainer {
  display: none;
  margin: 0;
}

#gene_wrapper #plotViewToggleContainer .toggle-options-wrapper {
  gap: 10px;
  border-bottom: 0;
}

#gene_wrapper #plotViewToggleContainer .toggle-option {
  min-width: 120px;
  width: auto;
  padding: 12px 18px;
  font-size: 14px;
  line-height: 1.1;
  border-radius: 8px;
}

#gene_wrapper #allGenesCellTypeToggleContainer {
  display: none;
  margin: 0;
  padding: 0 !important;
  width: auto;
  overflow: visible !important;
  align-items: center;
  gap: 8px;
}

#gene_wrapper #allGenesCellTypeToggleContainer .toggle-options-wrapper {
  gap: 10px;
  border-bottom: 0;
}

#gene_wrapper #allGenesCellTypeToggleContainer .toggle-option {
  min-width: 120px;
  width: auto;
  padding: 12px 18px;
  font-size: 14px;
  line-height: 1.1;
  border-radius: 8px;
}

#gene_wrapper #allGenesCellTypeTooltipContainer {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#gene_wrapper #scsnTooltipContainer .tooltip-text,
#gene_wrapper #allGenesCellTypeTooltipContainer .tooltip-text {
  top: 50%;
  bottom: auto;
  right: calc(100% + 10px);
  left: auto;
  transform: translateY(-50%);
  width: min(460px, 70vw);
  max-width: 70vw;
}


#gene_wrapper .heatmap_plot {
  width: 100%;
  height: 900px; 
  min-width: 700px;
} 





@media (min-width: 1500px) {

  #gene_wrapper #bodyMapContainer.human-body-container-hormone { max-width: 450px; height: 650px}
  #gene_wrapper .individual_ranked_plot { height: 700px }
  #gene_wrapper .heatmap_plot { height: 900px }
  
}




#individual_wrapper.plot-wrapper-individual {
  display: grid !important;      
  grid-template-columns: 1fr 380px 1fr;
  column-gap: 2rem !important; 
  align-items: start;
  width: 100%;
  height: auto;
}

@media (min-width: 1500px) {
  #individual_wrapper.plot-wrapper-individual {
    grid-template-columns: 1fr 420px 1fr;
    gap: 2rem;
  }
  #individual_wrapper #bodyMapContainer.human-body-container-hormone { max-width: 420px; height: 600px; top: 5rem; display: flex; flex-direction: column;   align-items: center; }
  #individual_wrapper .individual_hormone_plot, #individual_wrapper .individual_receptor_plot { height: 700px; }

}


#individual_wrapper .individual-hormone-plot-container  { grid-column: 1; }
#individual_wrapper .individual-receptor-plot-container { grid-column: 3; }

#individual_wrapper #bodyMapContainer.human-body-container-hormone{
  grid-column: 2;
  position: sticky;
  top: 5rem;
  width: 100%;
  max-width: 420px;
  height: 600px;
  z-index: 5;
  pointer-events: auto;

  display: flex;          
  flex-direction: column; 
  align-items: center;     
}




/* Style for the individual plots */
#individual_wrapper .individual_hormone_plot,
#individual_wrapper .individual_receptor_plot {
  width: 100%;
  height: 600px;
}

/* Media query for smaller screens */
@media (max-width: 1200px) {
  .plot-wrapper {
    flex-direction: column; /* Stack plots vertically on smaller screens */
    align-items: center;
    gap: 5%; /* Increase gap for smaller screens */
    display: none;
  }

  .individual-hormone-plot-container,
  .individual-receptor-plot-container {
    width: 90%; /* Make them take more space on smaller screens */
    margin-top: 7%;
  }
}














.level-btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  min-width: 140px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  background-color: #f0f0f0;   /* light grey */
  border: none;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.level-btn:hover {
  background-color: #e0e0e0;   /* slightly darker grey on hover */
}

.level-btn.active {
  background-color: #333;      /* active dark background */
  color: #fff;                 /* white text */
}



/* Layout: chart | body map | chart */
#sc_wrapper.sc-plot-wrapper {
  display: grid !important;      
  grid-template-columns: 1fr 380px 1fr;
  column-gap: 0;    /* or `gap: 0;` to cover both row & column gaps */
  row-gap: 0;
  align-items: start;
  width: 100%;
  height: auto;
}

/* Left and right columns for the plots */
#sc_wrapper .sc-hormone-plot-container  { grid-row:2; grid-column: 1; width: 100%; overflow:visible; position: relative; min-width: 520px;  margin-top: 10px}
#sc_wrapper .sc-receptor-plot-container { grid-row:2; grid-column: 3; width: 100%; overflow:visible; position: relative; min-width: 520px;  margin-top: 10px}

#sc_wrapper #bodyMapContainer.human-body-container-hormone {
  width: 100%;
  max-width: 450px;     /* or whatever the original layout used */
  aspect-ratio: 210 / 297;  /* matches the SVG’s viewBox */
  height: auto;
}


/* Normalise plot sizes (avoid >100% overflow) */
#sc_wrapper .sc_hormone_plot,
#sc_wrapper .sc_receptor_plot {
  width: 100%;
  height: auto; 
  min-height: 550px;
  padding-top: 10px;
}


.table-root{
  position: relative;
  width: 100%; 
  grid-row:3; 
  grid-column:1;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: .75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  font-size: 0.9rem;       /* shrink */
  max-width: 900px;
}


/*#table-root { width: 100%; grid-row:2; grid-column:1} */

.nice-table { width:100%; border-collapse:collapse; }
.nice-table th, .nice-table td { padding:.5rem .6rem; border-bottom:1px solid #e5e7eb; }
.nice-table thead th { position:sticky; top:0; background:#fff; z-index:1; cursor:pointer; user-select:none; }
.nice-table tbody tr:hover { background:#fafafa; }

.table-pager { display:flex; gap:.75rem; align-items:center; justify-content:flex-end; padding:.5rem 0; }
.table-pager button { padding:.35rem .6rem; }

.btn-row {
  display:inline-block; padding:.3rem .55rem; border:1px solid #e5e7eb;
  border-radius:.5rem; text-decoration:none;
}
.btn-row + .btn-row { margin-left:.35rem; }






/* Large screens: tweak only sizes, not positioning */
@media (min-width: 1500px) {
  #sc_wrapper.sc-plot-wrapper {
    grid-template-columns: 1fr 420px 1fr;
    column-gap: 0;    /* or `gap: 0;` to cover both row & column gaps */
    row-gap: 0;
  }
  /*#sc_wrapper #bodyMapContainer.human-body-container-hormone { grid-column: 2; grid-row: 2; max-width: 500px; width: 100%; height: 700px; display: flex; flex-direction: column;   align-items: center; } */
  
  #sc_wrapper #bodyMapContainer.human-body-container-hormone {
  width: 100%;
  max-width: 450px;     /* or whatever the original layout used */
  aspect-ratio: 210 / 297;  /* matches the SVG’s viewBox */
  height: auto;
  }
  
  
  #sc_wrapper .sc_hormone_plot, #sc_wrapper .sc_receptor_plot { 
    height: auto; 
    min-height: 600px;
  }

  
}


/* make the body map stage taller and stop clipping */



/* you already have this, but keep it: ensures the SVG itself doesn’t clip */
#bodyMapContainer svg { 
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Keep hormone-page body map constrained to its own column */
#sc_wrapper #bodyMapContainer.human-body-container-hormone {
  overflow: hidden;
}

#sc_wrapper #bodyMapContainer svg {
  overflow: hidden;
}

#bodyMapContainer.human-body-container-hormone > .echarts {
  order: 1;
}









.no-data-message {
    display: none;  /* Hidden by default */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    padding: 20px;
}

#gene_wrapper .heatmap-container {
    position: relative;
    min-width: 700px;
    grid-column: 2 !important; 
    grid-row:2 !important;
    width: auto; /* Set a specific width for the container */
    height: 600px; /* Set a specific height for the container */
    display: none; /* Hidden by default; shown only when heatmap view is active */
    /*margin: 500px -2500px 0 0; /* Move it up and to the right */

    overflow: auto;    /* Hide overflow if the plot doesn't fit */
}

@media (min-width: 1500px) {
  .heatmap-container{
    position: relative;
    grid-column: 2 !important; 
    grid-row:2 !important;
    width: 100%; /* Set a specific width for the container */
    height: 600px; /* Set a specific height for the container */
    display: none; /* Hidden by default; shown only when heatmap view is active */
    /*margin: 500px -2500px 0 0; /* Move it up and to the right */

    overflow: auto;    /* Hide overflow if the plot doesn't fit */
  }
}

.heatmap_plot{
  width: 100%; /* Make the plot take the full width of the container */
  height: 100%; /* Make the plot take the full height of the container */
}

/* Place both plots side by side */
.heatmap-container-wrapper {
    display: none;
    justify-content: center;
    gap: 12%;
    margin-top: 20%;
    margin-left: -4%;
    width: 100%;
    overflow: visible;
    z-index: 6;
}

.heatmap-hormone-plot-container,
.heatmap-receptor-plot-container {
    display: none;
    width: 45%; /* Default width for both containers */
    height: 75vh; /* Set the default height */
    /*margin-top: -50px; /* Default margin for standard screens */
    /*margin-right: 12%; /* Default position to the right */
    overflow: visible; /* Hide any overflow */
    justify-content: flex-start;
    align-items: center;
}

.heatmap_hormone_plot,
.heatmap_receptor_plot{
  width: 100%; /* Make the plot take the full width of the container */
  height: 100%; /* Make the plot take the full height of the container */
}

@media (min-width: 1500px) {
  .heatmap-container-wrapper {
      display: none;
      justify-content: center;
      gap: 14%;
      margin-top: 24%;
      margin-left: -3%;
      width: 100%;
      overflow: visible;
      z-index: 6;
  }
  .heatmap-hormone-plot-container,
  .heatmap-receptor-plot-container {
      display: none;
      width: 45%; /* Default width for both containers */
      height: 75vh; /* Set the default height */
      /*margin-top: -50px; /* Default margin for standard screens */
      /*margin-right: 12%; /* Default position to the right */
      overflow: visible; /* Hide any overflow */
      justify-content: flex-start;
      align-items: center;
  }
  .heatmap_hormone_plot{
    width: 100%; /* Make the plot take the full width of the container */
    height: 100%; /* Make the plot take the full height of the container */
  }
  .heatmap_receptor_plot{
    width: 100%; /* Make the plot take the full width of the container */
    height: 100%; /* Make the plot take the full height of the container */
  }
}

.heatmap-container-tissue{
  position: absolute;;  /* For proper positioning */
  width: 1050px; /* Set a specific width for the container */
  height: 500px; /* Set a specific height for the container */
  /*display: none; /* Initially hide the plot */
  /*margin: 500px -2500px 0 0; /* Move it up and to the right */
  margin-top: -630px; /* Move it up */
  margin-left: 1000px; /* Move it to the right */
  margin-right: 400px;
  z-index: 30;
}

.heatmap_plot_tissue{
  width: 80%; /* Make the plot take the full width of the container */
  height: 100%; /* Make the plot take the full height of the container */
}

.expression-table {
    position: static;
    width: 60%;
    border-collapse: collapse;
    margin-top: -2%;
    margin-left: 25%;
    border-radius: 10px; /* Rounded corners for the table */
    overflow: visible;; /* Ensure content inside respects the border-radius */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for the table */
    z-index: auto;
}

.expression-table th, .expression-table td {
    border: 1px solid #ddd;
    padding: 12px 16px; /* More padding for a more spacious look */
    text-align: center;
    transition: background-color 0.3s ease; /* Smooth transition for hover effects */
}

.expression-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.expression-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping for even rows */
}

.expression-table tr:hover {
    background-color: #f1f1f1; /* Highlight row on hover */
}

.expression-table td {
    color: #333; /* Darker text for better readability */
}

.expression-table th, .expression-table td {
    border-radius: 5px; /* Rounded edges for each cell */
}

.expression-table td:first-child {
    border-left: none; /* Optional: Removes left border for the first column */
}

.expression-table th:first-child {
    border-left: none; /* Optional: Removes left border for the first header cell */
}




.umap_tissue_container {
  display: flex;
  flex-direction: row; /* Arrange elements in a row */
  align-items: flex-start;
  justify-content: flex-start;
  width: 73%;
  height: 72%;
  left: 23%;
  top: 25%;
  margin-bottom: 0%;
  position: absolute;
  overflow: hidden; /* Hide overflow content */
  transition: all 0.3s ease;
}

.linkouts-label {
  font-size: 16px;
  color: #1f3a4d;
}

@media (min-width: 1500px) {

  .linkouts-label {
    font-size: 20px
}

}

.tissue-sidebar {
  display: flex;
  flex-direction: row; /* Arrange elements in a row */
  align-items: flex-start;
  justify-content: flex-start;
  width: 73%;
  height: 60%;
  left: 23%;
  top: 35%;
  margin-bottom: 0%;
  margin-top: 50px;
  position: absolute;
  overflow: hidden; /* Hide overflow content */
  transition: all 0.3s ease;
}



.umap_tissue_plot {
  flex-grow: 1; /* Allow the plot to take up remaining space */
  height: calc(92% - 60px); /* Ensure the plot height takes the available space */
  width: calc(74% - 200px); /* Subtract width of the toggle container */
  min-height: 360px; /* Ensure the plot has a minimum height */
  max-height: 900px; /* Optional: set a max height if desired */
  margin-top: 24px;
  position: relative;
  overflow: visible; /* Important for legend */
}

.toggle-container-umap {
  display: flex;
  flex-direction: column; /* Stack toggle options vertically */
  width: 200px; /* Fixed width for the toggle list */
  max-height: 80%; /* Allow the container to expand within the available space */
  margin-right: 20px;
  margin-top: 20px;
  /*border-right: 2px solid #ddd;*/
  padding-right: 10px;
  z-index: 10;
  overflow-y: auto; /* Enable vertical scrolling if the list exceeds the height */
}

.toggle-option-umap {
  padding: 10px;
  margin: 4px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  position: relative;
  white-space: nowrap;
}

.toggle-option-umap.active {
  color: #1f3a4d;
}

.toggle-option-umap.active::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6px; /* Slightly outside the box */
  width: 4px;
  height: 100%;
  background-color: #1f3a4d; /* Active indicator on the right */
  border-radius: 2px;
}




/* #sidebar-column {
  display: flex;
  flex-direction: column; 
  gap: 16px;              
  width: 250px;
}


.sidebar {
  padding: 10px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow-y: auto;
}


.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


.sidebar li {
  padding: 12px;
  cursor: pointer;
  border-bottom: 2px solid #1f3a4d;
  text-align: center;
  border-radius: 2px;
  margin: 6px 0;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.sidebar li:hover {
  background-color: #e6f0f7;
  transform: scale(1.02);
}


.sidebar h3 {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
  color: #333;
} */



/* old elements: */


.sidebar {
  position: absolute;
  top: 25%;                     
  left: 2%;                 
  width: 250px;
  padding: 10px;
  background-color: white;
  height: 65%;

  bottom: 1rem;               
  overflow-y: auto;
  z-index: 999;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  padding: 12px;
  cursor: pointer;
  border-bottom: 2px solid #1f3a4d;

  text-align: center; 
  border-radius: 2px; 
  margin: 6px 0;
  transition: background-color 0.3s ease, transform 0.2s ease; 
}

.sidebar li.disabled {
  color: #aaa;                 /* greyed out text */
  background-color: #f5f5f5;   /* lighter background */
  cursor: not-allowed;         /* “forbidden” cursor */
  pointer-events: none;        /* blocks clicks */
  opacity: 0.6;                /* faded look */
  transform: none !important;  /* disables hover scaling */
}


.sidebar li:hover {
  background-color: #e6f0f7;
  transform: scale(1.02);
}

.sidebar h3 {
  font-size: 25px;      
  font-weight: 500;     
  text-align: center;   
  margin-bottom: 10px;
  color: #333;
} 


@media (min-width: 1500px) {
  .sidebar {
    position: absolute;
    top: 20%;                     /* how far down from the top of the viewport */
    left: 2%;                      /* your existing “left” offset */
    width: 250px;
    padding: 10px;
    background-color: white;
    height: 65%;

    /* fill the rest of the viewport height */
    bottom: 1rem;                  /* sets height for you automatically */
    overflow-y: auto;
    z-index: 999;
  }
  .sidebar ul {
    list-style: none;
    padding: 0;
  }
  .sidebar li {
    padding: 12px;
    cursor: pointer;
    border-bottom: 2px solid #1f3a4d;
    text-align: center; /* Center the text */
    border-radius: 2px; /* Smooth edges for the border */
    margin: 6px 0; /* Add space between items */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Optional smooth interaction */
  }

  .sidebar li:hover {
    background-color: #e6f0f7;
    transform: scale(1.02);
  }

  .sidebar h3 {
    font-size: 25px;       /* Smaller font size */
    font-weight: 500;      /* Medium weight */
    text-align: center;    /* Optional: center the title */
    margin-bottom: 10px;
    color: #333;
  }
}


/* interactive table on hormone page */

.gene-btn{
  position: relative;
  display:inline-flex;
  align-items: center;
  gap: .25rem;
  padding:.25rem .5rem;
  border:1px solid #e5e7eb; border-radius:.5rem;
  text-decoration:none;
}
.gene-btn + .gene-btn{ margin-left:.35rem; }

.gene-btn.active-gene-btn {
  background: #007bff;
  color: #fff;
  border-color: #4b5563;
}

/* Grey style for excluded genes */
.gene-btn.excluded {
  background: #eee;
  color: #666;
  border-color: #ccc;
}

.gene-btn.low-confidence-receptor {
  border-color: #e57373;
  background: #fff7f7;
}

.receptor-warning-triangle {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid #c62828;
  flex: 0 0 auto;
}

.receptor-warning-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(46ch, calc(100vw - 24px));
  padding: 5px 7px;
  background: #fff0f0;
  color: #7a1e1e;
  border: 1px solid #e57373;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 7001;
}

.receptor-warning-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #e57373;
}

.gene-btn.low-confidence-receptor:hover .receptor-warning-tooltip,
.gene-btn.low-confidence-receptor:focus .receptor-warning-tooltip {
  opacity: 1;
  transform: translateY(0);
}


.table-root-tooltip-corner {
  position: absolute !important;
  top: 10px;
  right: 12px;
  left: auto !important;
  display: block;
  z-index: 3001;
}

.table-root-tooltip-corner .tooltip-text {
  width: 360px;
  max-width: min(90vw, 360px);
  right: 0;
  left: auto;
  bottom: 125%;
  transform: none;
}

.table-root h5 {
  padding-right: 2rem;
  font-size: 18px;
  font-weight: bold;
  color: #1f3a4d; /* Deep blue to match theme */
  margin-top: 0%; /* More spacing from content */
  margin-left: 0%;
  margin-bottom: 3%;
}


/* TISSUE PAGE */
#sanger-tissue-button {
  position: absolute;
  top: 80px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
}

#sanger-link-btn {
  padding: 4px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-weight: 500;
  font-size: 14px; 
  line-height: 1.1; 
}
#sanger-link-btn:hover {
  background-color: #0056b3;
}


/* GENE PAGE -> UMAPS button */
#sanger-link-btn-umap {
  position: relative;     /* stays in same spot even when scrolling */
  grid-row: 2;
  grid-column: 1;

  
  padding: 4px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-weight: 500;
  font-size: 14px; 
  line-height: 1.1; 
}
#sanger-link-btn-umap:hover {
  background-color: #0056b3;
}


#hypo-link-btn {
  position: absolute;     /* stays in same spot even when scrolling */
  top: 85px;           /* distance from top */
  right: 20px;         /* distance from right */
  z-index: 1000;       /* keep it above other elements */
  padding: 4px 10px;
  background-color: #9900ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-weight: 500;
  font-size: 14px; 
  line-height: 1.1; 
}
#hypo-link-btn:hover {
  background-color: #0056b3;
}

/* hypo-cell-btn */

#hypo-cell-btn {
  position: absolute;     /* stays in same spot even when scrolling */
  top: 85px;           /* distance from top */
  right: 180px;         /* distance from right */
  z-index: 1000;       /* keep it above other elements */
  padding: 4px 10px;
  background-color: #9900ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-weight: 500;
  font-size: 14px; 
  line-height: 1.1; 
}
#hypo-cell-btn:hover {
  background-color: #0056b3;
}





@media (min-width: 1500px) {
  #sanger-tissue-button {
  position: absolute;
  top: 130px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
}

  #sanger-link-btn {
  padding: 4px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-weight: 500;

}
#sanger-link-btn:hover {
  background-color: #0056b3;
}


#hypo-link-btn {
  position: absolute;     /* stays in same spot even when scrolling */
  top: 85px;           /* distance from top */
  right: 20px;         /* distance from right */
  z-index: 1000;       /* keep it above other elements */
  padding: 4px 10px;
  background-color: #9900ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-weight: 500;

}
#hypo-link-btn:hover {
  background-color: #0056b3;
}

#hypo-cell-btn {
  position: absolute;     /* stays in same spot even when scrolling */
  top: 85px;           /* distance from top */
  right: 180px;         /* distance from right */
  z-index: 1000;       /* keep it above other elements */
  padding: 4px 10px;
  background-color: #9900ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-weight: 500;
}
#hypo-cell-btn:hover {
  background-color: #0056b3;
}


}





/* SMALL SCREENS */

/* Top-right, not floating: absolute (scrolls with page) */
#dataTypeToggle.toggle-container-hormone{
  position: absolute !important;  /* not fixed */
  top: 200px;
  right: 90px;
  left: auto;
  z-index: 2000 !important;
  border-bottom: 2px solid #1f3a4d;
  padding-bottom: .25rem;

  

  display: inline-flex !important;
  flex-wrap: nowrap !important;
  column-gap: 12px;
  /*padding: 8px 12px;*/

  
  width: max-content;
  min-width: 0;
  max-width: min(600px, calc(100vw - 60px));
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}



/* If there’s an inner wrapper, keep it horizontal too */
#dataTypeToggle.toggle-container-hormone .toggle-options-wrapper {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;        /* vertical centers match */
  border-bottom: 0;           /* avoid the baseline illusion */
}


/* Grey buttons */
#dataTypeToggle.toggle-container-hormone .toggle-option{
  flex: 0 0 clamp(140px, 45vw, 220px) !important;
  min-width: 140px;
  width: auto !important;
  padding: 10px 14px;
  display: flex;
  overflow: hidden; 
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  white-space: normal;
  z-index: 2000;

  background: #e9ecefa4;          /* light grey */
  border: 1px solid #c7ced6;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}





#dataTypeToggle .toggle-option:hover{ background:#dfe3e8; }
#dataTypeToggle .toggle-option.active{
  background:#d1d6dc;
  border-color:#b5bfc9;
}


@media (min-width: 1500px) {

/* Top-right, not floating: absolute (scrolls with page) */
#dataTypeToggle.toggle-container-hormone{
  position: absolute !important;  /* not fixed */
  top: 200px;
  right: 110px;
  left: auto;
  z-index: 2000 !important;

  display: inline-flex !important;
  flex-wrap: nowrap !important;
  column-gap: 12px;
  padding: 8px 12px;
  width: max-content;
  min-width: 0;
  max-width: min(900px, calc(100vw - 90px));

  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 2px solid #1f3a4d;
  padding-bottom: .25rem;
  box-sizing: border-box;
}

/* If there’s an inner wrapper, keep it horizontal too */
#dataTypeToggle.toggle-container-hormone .toggle-options-wrapper {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;        /* vertical centers match */
  border-bottom: 0;           /* avoid the baseline illusion */
}


/* Grey buttons */
#dataTypeToggle.toggle-container-hormone .toggle-option{
  flex: 0 0 clamp(140px, 24vw, 260px) !important;
  min-width: 140px;
  width: auto !important;
  padding: 10px 14px;
  display: flex;
  overflow: hidden; 
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  white-space: normal;

  background: #e9ecefa4;          /* light grey */
  border: 1px solid #c7ced6;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}





#dataTypeToggle .toggle-option:hover{ background:#dfe3e8; }
#dataTypeToggle .toggle-option.active{
  background:#d1d6dc;
  border-color:#b5bfc9;
}

}

/* Firefox: keep both initial toggle buttons fully visible */
@supports (-moz-appearance: none) {
  #dataTypeToggle.toggle-container-hormone {
    right: 120px;
    width: min(520px, calc(100vw - 40px));
    min-width: min(420px, calc(100vw - 40px));
    max-width: min(620px, calc(100vw - 40px));
  }

  #dataTypeToggle.toggle-container-hormone .toggle-options-wrapper {
    width: max-content;
    min-width: 100%;
  }

  @media (min-width: 1500px) {
    #dataTypeToggle.toggle-container-hormone {
      right: 140px;
      width: min(620px, calc(100vw - 50px));
      min-width: min(460px, calc(100vw - 50px));
      max-width: min(700px, calc(100vw - 50px));
    }
  }
}


.is-home .navbar .d-flex.w-100.justify-content-start.position-relative {
  display: none !important;
}



/* styling for login, sign up pages for downloads page */

.auth-downloads-link {
  position: fixed;
  top: 120px;
  left: 50px;
  z-index: 1100;
  font-size: 30px;
  font-weight: bold;
  color: #1f3a4d;
}

.auth-downloads-link a {
  color: inherit;
  text-decoration: none;
}

.auth-downloads-link a:hover {
  text-decoration: underline;
}

.auth-form--compact {
 
  max-height: 500px;
  margin: 0 auto;
}

.auth-form--compact input {
  padding: 0.4rem 0.6rem;
}



.auth-form p { margin-bottom: 1rem; }
.auth-form label { display: block; margin-bottom: 0.35rem; font-weight: 500; }
.auth-form input {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.3rem 0.6rem;
  height: auto;
}

/* Form error styling */
.errorlist {
    color: #c0392b;
    font-weight: 700;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.errorlist li {
    margin-bottom: 0.25rem;
}


/* interactive table on gene page */
.hormone-btn { color: #7a1f1f; }
.hormone-btn:hover { color: #5e1515; }