.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #882222;
    padding: 10px 20px;
    font-size: 18px;
    flex-wrap: wrap;
    position: relative; /* Ensures proper positioning */
}

/* Navbar Left (Logo & Home Icon) */
.navbar-left {
    display: flex;
    align-items: center;
}

/* Navbar Links (Text & Favicons) */
.navbar-links {
    display: flex;
    gap: 15px;
}

/* Favicons */
.icon-link {
    font-size: 20px;
    color: white;
}

/* Hide Hamburger Menu on Large Screens */
.menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
}

/* Dropdown Menu (Hidden by Default) */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100px;
    left: 88%;
    transform: translateX(-50%);
    background:  white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    flex-direction: column;
    text-align: center;
    width: 40px;
}

/* Show Dropdown Menu When Active */
.dropdown-menu.active {
    display: flex;
}

/* Change the text color of items inside the dropdown */
.dropdown-menu a {
    color: #882222;  /* Replace with your desired color */
    text-decoration: none; /* Optional: remove underline from links */
    padding: 5px;
    display: block;
}

.dropdown-menu a:hover {
    color: #fff;  /* Text color when hovering */
    background-color: grey;  /* Optional: Background color when hovering */
}

/* Responsive Behavior */
@media (max-width: 960px) {
    .navbar-links {
        display: none; 
    }
    .menu-btn {
        display: block; /* ✅ Show Hamburger Menu */
        position: absolute;
        left: 90%;
        transform: translateX(-50%);
    }
}

/* 🔹 Left & Right sections */
.navbar-left, .navbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 🔹 Links */
.navbar a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

/* 🔹 Hover Effect (Ensures hover stays when active) */
.navbar a:hover,
.navbar a:focus {
    transform: scale(1.1); /* Slight enlargement */
    background-color: white;
    color: #882222;
}

/* 🔹 MyoMETH Logo */
.navbar .myometh img {
    height: 40px;
    width: auto;
}

/* 🔹 Hamburger button (hidden on desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
    margin-left: auto;
}

/* 🔹 Mobile Styles */
@media (max-width: 991px) {
    .navbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* 🔹 Show Hamburger Button */
    .menu-toggle {
        display: block;
    }

    /* 🔹 Hide Right Nav by Default */
    .navbar-right {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        background-color: #882222;
        text-align: center;
        padding: 10px;
    }

    /* 🔹 Show Menu When Active */
    .navbar-right.active {
        display: flex;
    }

    /* 🔹 Full-width clickable links */
    .navbar-right a {
        padding: 15px;
        width: 100%;
    }

    /* 🔹 Keep Hover Effect on Mobile */
    .navbar-right a:hover,
    .navbar-right a:focus {
        background-color: white;
        color: #882222;
    }
}


/* Optional: Responsive styling for small screens */
@media (max-width: 991px) {
    .navbar-list {
        flex-direction: row;  /* Keep items in one row */
    }
}

/* Customize the scrollbar for webkit browsers (Chrome, Safari) */
.navbar::-webkit-scrollbar {
    height: 10px;  /* Increase the height of the scrollbar (horizontal scrollbar) */
}

/* Customize the scrollbar track */
.navbar::-webkit-scrollbar-track {
    background-color: #f1f1f1;  /* Light gray background for the scrollbar track */
    border-radius: 10px;  /* Optional: rounded corners for the track */
}

/* Customize the scrollbar thumb */
.navbar::-webkit-scrollbar-thumb {
    background-color: #888;  /* Darker thumb color */
    border-radius: 10px;  /* Optional: rounded corners for the thumb */
    border: 4px solid #f1f1f1;  /* Add a border around the thumb */
}

/* Customize the scrollbar thumb on hover */
.navbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;  /* Darker color when hovering over the thumb */
}



/* Content styling */
.content {
    margin-top: 80px; /* Add margin to prevent content from being hidden under the navbar */
    padding: 20px;
    text-align: center;
}

.content h1 {
    margin-bottom: 20px;
}

.content p {
    font-size: 18px;
}


table {
    padding: 10px;
    max-width: 100%;
}

body {

    font-family: 'Roboto', sans-serif;
    font-size: 1.25em;
    margin: 0;
    padding: 10px;
    background: linear-gradient(to bottom, white, white);
    color: black;
}
 
.cpgs {
    text-align: center;
    margin-top: 5rem;

}

.cpgs h1 {
    font-size: 3rem;
}

.proteins {
    text-align: center;
    margin-top: 5rem;
}

.proteins h1 {
    font-size: 3rem;
}

.page-content {
    padding: 20px;
}

.page-content {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center horizontally within page-content */
    width: 90%; /* Adjust as needed */
    max-width: 1200px; /* Optional max-width */
    margin: 20px auto; /* Centers the whole block */
    padding: 20px;
}

.text-above-search {
    text-align: center;
    margin-bottom: 10px;
}

/* Existing Search Bar Styles (Keep these) */
.search-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

#search-form {
    width: 100%;
    display: flex;
    justify-content: center;
}

.search-box {
    display: flex;
    align-items: center;
    border: 2px solid #882222;
    border-radius: 5px;
    padding: 5px;
    width: 90%;
    max-width: 1400px;
}

.search-input {
    flex-grow: 1;
    width: 100%;
    padding: 1rem;
    border: none;
    font-size: 1.2rem;
}

.search-button {
    padding: 1rem 2rem;
    margin-left: 5px;
    background-color: #6C757D;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.search-button:hover {
    background-color: #882222;
}

.search-dropdown {
    padding: 1rem;
    font-size: 1rem;
    border-radius: 5px;
    border: none;
    background-color: #6C757D;
    color: white;
    margin-left: 5px;
    transition: background-color 0.3s;
}

.search-dropdown:hover {
    background-color: #882222;
}

.search-dropdown:focus {
    outline: none;
    border: 2px solid #882222;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .search-box {
        flex-direction: column; /* Stack input and button */
        align-items: stretch; /* Stretch items to full width */
        width: 95%; /* Adjust width for smaller screens */
        padding: 10px;
    }

    .search-input,
    .search-button,
    .search-dropdown {
        width: 100%; /* Full width on mobile */
        margin: 5px 0; /* Add spacing between elements */
    }

    .search-button,
    .search-dropdown{
        white-space: normal;
    }
}

.circle-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.image-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px; /* Fixed width */
    height: 180px; /* Fixed height */
    max-width: 100%; /* Allow scaling down */
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background-color: #F4F4F5;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.image-link:hover {
    transform: scale(1.1);
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
}

.circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.info-content {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #F4F4F5;
    color: #882222;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.image-link:hover .info-content {
    opacity: 1;
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    .image-link {
        width: 120px; /* Reduced width on smaller screens */
        height: 120px; /* Reduced height on smaller screens */
    }

    .circle-container {
      gap: 15px; /* Reduce gap on smaller screens */
      padding: 10px; /* Reduce padding on smaller screens */
    }
}

 .boxplot, .scatterplot {
     flex: 1; /* Allow both plots to take equal width */
     max-width: 48%; /* Optional: Limit each plot to 48% width */
    }

 .img {
     max-width: 100%; /* Ensure images don't overflow */
     height: auto; /* Maintain aspect ratio */
     border: 1px solid #ccc; /* Optional: Add a border for styling */
     border-radius: 5px; /* Optional: Add rounded corners */
    }


 #cpgsTable tr {
     cursor: pointer;
 }
 #cpgsTable tr:hover {
     background-color: #f1f1f1; /* Add a hover effect */
 }


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


.styled-table tbody tr:hover {
    background-color: #f9f9f9;
}


#cpgStatsTable, #proteinStatsTable, #rangesTable, #cpgsTable, #proteinsTable {
    overflow-y: auto; /* Vertical scroll if content is too tall */
    max-height: 400px;
    overflow-x: auto;  /* Horizontal scroll if table is too wide */ 
}

@media (max-width: 960px) { 
    #cpgStatsTable, #proteinStatsTable, #rangesTable, #cpgsTable, #proteinsTable  {
        display: block; /* Force horizontal scroll on small screens */
        overflow-x: auto; 
    }
}

.tables-container {
    max-width: 100%;
}

.plots-container {
    display: flex;
    width: 100%;

}



#boxplot-container {
    width: 100%; /* Or a specific width if you don't want it to be full width */
    max-width: 500px; /* Example max width */
    height: auto; /* Allow height to adjust to content */
    display: flex;
    flex-direction: column;
}

.svg-box {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plot-left, .plot-right {
    width: 40%; /* Each plot will take up 48% of the width */
    text-align: center;
}



@media (max-width: 768px) {
    .plots-container {
        flex-direction: column;
        align-items: center;
    }

    .plot-left, .plot-right {
        width: 90%; /* In mobile, take up more space */
        margin-bottom: 20px;
    }
}


/* Make the link text black */
.probe-link {
    color: black;
    text-decoration: none; /* Remove underline */
}

/* Optional: Add hover styling */
.probe-link:hover {
    text-decoration: underline; /* Add underline on hover */
    color: darkgray; /* Change color on hover */
}

   /* Container for the Boxplot (Top-left quadrant) */
.boxplot-container {
    position: fixed; /* Use fixed positioning to keep the plot in place */
    top: 20%; /* Space from the top of the screen */
    left: 10%; /* Space from the left of the screen */
    width: 30vw;  /* Set a percentage of viewport width */
    height: 30vw; /* Set height equal to width to make it square */
    overflow: hidden;
    z-index: 10; /* Ensure it is above other content */
    border: 2px solid #000; /* Add a black border around the SVG container */
    border-radius: 8px; /* Optional: rounded corners for the border */
    padding: 5px; /* Optional: adds spacing between the border and the SVG */
    background-color: #000; /* Optional: background color to make the border stand out */
}

/* New container for the LogFC plot (Top-right quadrant) */
.logfc-container {
            position: fixed; /* Use fixed positioning to keep the plot in place */
            top: 20%; /* Space from the top of the screen */
            right: 10%; /* Space from the right of the screen */
            width: 30vw;  /* Set a percentage of viewport width */
            height: 30vw; /* Set height equal to width to make it square */
            overflow: hidden;
            z-index: 9; /* Ensure it is below the boxplot */
            border: 2px solid #000; /* Add a black border around the container */
            border-radius: 8px; /* Optional: rounded corners for the border */
            padding: 5px; /* Optional: adds spacing between the border and the content */
            background-color: #000; /* Optional: background color to make the border stand out */
        }

.plots-container {
    display: flex; /* Enables flexbox for side-by-side layout */
    width: 100%; /* Take full width of the parent container */
    height: auto;  /* Adjust height as needed or set a specific height */
    flex-wrap: wrap; /* Allows plots to wrap if the screen is too narrow */
    
}

.plot-left, .plot-right {
    flex: 1 1 50%; /* Each plot takes 50% width */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    padding: 20px; /* Add some padding around plots */
      display: flex;
    flex-direction: column; /* Align content vertically */
    align-items: center; /* Center horizontally */
}


/* Styling for images and containers (optional, adjust as needed) */
.plot-left img, .plot-right img {
    max-width: 100%; /* Image scales down if necessary */
    height: auto;
    display: block; /* Prevents small space below image */
}

/* Optional: Add some spacing between elements within each plot container */
.plot-left > *, .plot-right > * {
    margin-bottom: 10px;
}
/* Layout for the table */
.protein-table {
    position: relative;
    padding: 20px;
    margin-top: 10%; /* Ensures there's space from the top */
    margin-left: 10%; /* Adds space on the left side */
    z-index: 1; /* Place it below the SVG */
    max-width: 80%; /* Ensure the table doesn't overflow the page */
}

       
.protein-table {
    margin-top: 50%; /* Adjust table margin for smaller screens */
    margin-left: 5%; /* Make table less crowded on small screens */
}
}
    


/* Optional: Add some margin or custom styling */
.download-button {
    text-align: right;
    margin-top: 10px;
}

.download-button a {
    text-decoration: none;
}

.download-button button {
    padding: 10px 10px;
    font-size: 12px;
    color: white;
}

.citation {
  display: inline-block;
  margin: 0px 0 20px 20px;
  padding: 15px;
  border: 1px solid #999;
  border-radius: 5px;
}

.citation p {
    margin: 0;
}

#loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

  <style>
        /* Spinner styling */
        #spinner {
            border: 6px solid #f3f3f3; /* Light grey */
            border-top: 6px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 10px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #loading-container {
            text-align: center;
            margin-top: 20px;
        }

        #loading-message {
            margin-bottom: 10px;
        }

	/* Hide both triangles by default */
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    opacity: 0; /* Or display: none; */
    content: "\f0dc"; /* Or your preferred sorting icon */
}

/* Show the appropriate triangle on sort */
table.dataTable thead th.sorting_asc:after {
    opacity: 1;
    content: "\f0de"; /* Or your preferred ascending icon */
}

table.dataTable thead th.sorting_desc:after {
    opacity: 1;
    content: "\f0dd"; /* Or your preferred descending icon */
}

 /* Basic styling for the info box */
  #info-rect {
    display: none; /* Hidden by default */
    position: absolute; /* Or fixed if you want it to stay in viewport */
    top: 50%;
    left: 50%;
    text-align: left;
    transform: translate(-50%, -50%); /* Center the box */
    width: 90%; /* Occupy most of the screen width on smaller screens */
    max-width: 900px; /* Set a specific width */
    height: 300px;
    background-color: white;
    border: 1px solid black;
    padding: 20px;
    z-index: 1000; /* Ensure it's on top */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  }

  #info-rect:hover { /* Optional: Add a hover effect */

  box-shadow: 0 12px 25px rgba(0, 0, 0.5, 2.0); /* Adjust shadow on hover */
  }
  
  #info-rect .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
  @media (min-width: 768px) { /* Adjust breakpoint as needed */
    #info-rect {
    width: 900px; /* Use a fixed width on larger screens */
    }
}
  /* Style for the info icon (optional) */
  .info-icon {
      cursor: pointer; /* Make it look clickable */
      color: #882222;
      font-size: 24px;
}

  .info-icon:hover {
      transform: scale(1.1); /* Slightly enlarge the icon on hover */
   }
    .title-with-icon {
  
   margin-right: 30px;
  }
  .seqnames-link {
    color: black;
    text-decoration: none; /* Optional: Remove underline */
  }

     .all-plots-container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .top-plots-container {
        display: flex;
        justify-content: center;
        gap: 400px;
    }

    .methylation-plot-container,
    .protein-plot-container {
        width: 600px; /* Adjust width as needed */
        margin: 10px; /* Adjust margins as needed */
        box-sizing: border-box;
    }

    .genome-plot-container {
        width: 100%;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .plot-figure {
        text-align: center;
    }

    
     .figure-caption::before {
        content: "Figure " attr(data-figure) ": ";
        font-size: 1.2em; /* Increase font size for "Figure" part */
        font-weight: bold; /* Optional: Make it bold */
        margin-right: 5px; /* Optional: Add space after "Figure" */
    }
        .figure-caption {
        font-size: 1.2em; 
        color: #666;
        margin-top: 5px;
        text-align: left;
        display: block;
    }

	    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 9999;
    }

    .loading-icon {
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
        margin-bottom: 10px;
    }

    .loading-quote {
    font-style: italic;
    margin-top: 10px;
       color: black;
    font-size: 20px;
    padding: 5px;
   }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


   .lists-container {
      display: flex;
      justify-content: space-around;
      padding: 20px;
    }

    .list-column {
      width: 45%;
      border: 1px solid #ccc;
      padding: 10px;
    }

    .list-column h2 {
      margin-top: 0;
    }

    .list-column ul {
      list-style-type: disc;
      margin: 0;
      padding: 0 0 0 20px;
    }

    .copyButton {
      margin-top: 10px;
      padding: 5px 10px;
      cursor: pointer;
    }

    .copyMessage {
      margin-top: 10px;
      color: green;
    }

    .hidden-list-item {
      display: none;
    }

.site-footer {
    /* Creates the light gray line above the footer (as previously agreed) */
    border-top: 1px solid #e0e0e0;
    
    background-color: transparent; 
    font-size: 0.85rem; 
}

/* 2. The sticky footer implementation rule */
.main-content-wrapper {
    /* This element consumes all available vertical space, 
       pushing the footer to the bottom of the viewport. */
    flex-grow: 1; 
}
</style>