#banner {
           background-color: #090A3A;
            padding: 10px;
            display: flex;
            font-family: 'Lora', serif ;
     justify-content: space-between;
        }
.text-left {
    flex: 1; /* Take up remaining space */
    color: #FFFFFF;
     margin-left: 20px; /* Adjust margin between logo and text */
}
.text-right {
    flex: 0 0 auto; /* Do not grow, do not shrink, stay auto size */
margin-right: 20px; 
        .text-right img {
    float: right;
    width: 65px;
    height: 65px;
    margin-right: 10px; /* Adjust margin between logo and text */
}
        
        .text {  
     margin: 0 0 0 0;
    font-family: 'Lora', serif !important;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 0px;
}
.text {
    float: left;
    margin: 5px 0 0 8px;
     text-align: right;
     margin-right: 10px; /* Adjust margin between logo and text */
     line-height: 1.3;
} }

        .container {
            
            margin-top: 20px;
             border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
             margin-bottom: 20px;
            border-bottom: 3px solid #333;
            background-color:white;
            
        }
/* Mobile view adjustments */
@media (max-width: 768px) {
    .container {
        width: 100%; /* Take up full width */
        max-width: 100%; /* Ensure it doesn't exceed container width */
        padding: 30px; /* Minimal padding */
        margin: 20px auto; /* Center the container with minimal side gaps */
        border-width: 1px; /* Minimal border width */
        box-sizing: border-box; /* Include padding and border in width */
    }

    /* Adjust side-by-side elements to stack vertically on mobile */
    .side-by-side > div {
        flex: 1 1 100%; /* Full width on smaller screens */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 10px; /* Space between stacked elements */
    }
}


       #aboutUs {
            margin-top: 20px;
            text-align: left; /* Align the text to the left */
            font-size: 1.1em;
            color: #090A3A;
            background-color:  #e0f7fa;
            padding: 20px;
            border-radius: 20px;
           
        }
        #aboutUsTitle {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 10px;
             color: #090A3A; 
        }
#dataStatistics {
     background-color: #e0f7fa;
    
    padding: 18px;
    border-radius: 20px;
     margin-top: 20px;
    width:inherit;
}

#dataStatistics h5 {
   color: #090A3A;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

#dataStatistics table {
     background-color: white;
    width: 100%;
    margin-bottom: 0;
    font-size: 15px;
     border: 1px solid #ccc;
    padding: 8px;
}

#dataStatistics td {
    padding: 8px;
    vertical-align: middle;
     border: 1px solid #ccc;
   
}
/* Chart containers */
#phenotype-chart .card-body,
#gene-chart .card-body {
    background-color: #e0f7fa;
    padding: 15px;
    border-radius: 20px;
    margin-top: 20px;
    height: auto;
    display: flex;
    flex-direction: column;
}

#phenotype-chart,
#gene-chart {
    border: none;
    box-sizing: inherit;
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
}

#phenotype-chart .card-title,
#gene-chart .card-title {
    color: #090A3A;
    font-size: 1.25rem;
    margin-bottom: 15px;
    text-align: left;
}

/* Ensure badges have pointer cursor */
#phenotype-chart .badge-pill,
#gene-chart .badge-pill {
   
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    background-color: #090A3A; /* Background color for badges */
    color: white;
}

#phenotype-chart.badge-pill, #gene-chart .badge-pill {
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

#phenotype-chart .badge-pill:hover, #gene-chart .badge-pill:hover {
    background-color: #090A3A;
    color: white;
}
#backToPhenotype{
    font: #333;
    border: 1px solid #ccc;
    background-color:white;
    width: 20%;
    display: inline-block;
    align-items: left;
}

/* Add styles for pagination buttons */
/* Add styles for pagination buttons */
.btn-light {
    margin: 2px;
}

/* Style for active page button */
.btn-light.active {
    background-color: #090A3A; /* Dark blue background for active page */
    color: white; /* White text for contrast */
    border-color: #090A3A; /* Dark blue border to match background */
}



#exampleSearch {
    background-color: #e0f7fa;
    padding: 20px;
    border-radius: 20px;
     margin-top: 20px;
    width:inherit;
    
}

#exampleSearch h4 {
    color: #090A3A;
    font-size: 1.25rem;
    
}

  #exampleSearch table {
     background-color: white;
    width: 100%;
    margin-bottom: 0;
    font-size: 16px;
   
     border: 1px solid #ccc;
    padding: 8px;
        }
#exampleSearch td {
    padding: 8px;
    vertical-align: middle;
     border: 1px solid #ccc;
   
}
#exampleSearch th {
   
    vertical-align: middle;
     border: 1px solid #ccc;
   
}
#searchForm {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align items */
    width: 130%; /* Make the search form take up the full width of its container */
}

#searchForm .form-control {
    width: 55%; /* Set the search bar to occupy 55% of the container */
    margin-right: 10px; /* Add space between the search bar and the button */
    min-width: 300px; /* Prevent the search bar from shrinking below a certain width */
}

#searchForm .btn-primary {
    background-color: #090A3A; /* Change to your desired background color */
    border-color: #090A3A; /* Optional: Change the border color */
    color: white; /* Text color */
    width: 20%; /* Set the button width to 20% of the container */
    min-width: 100px; /* Prevent the button from shrinking below a certain width */
    white-space: nowrap; /* Prevent text wrapping inside the button */
}


.badge-pill {
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.badge-pill:hover {
    background-color: #090A3A;
    color: white;
}
#userManual {
    margin-top: 10px;
    text-align: left;
    font-size: 1.1em;
    color: #333;
}

.user-manual-box {
    background-color: #e0f7fa;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.user-manual-box h5 {
    font-size: 1.1rem;
    color: #090A3A;
    margin-bottom: 5px;
    align-items: center;
    width: 75%;
    margin-bottom: 5px;
    margin-top: 5px;
    display: inline-block;
    font-size: 18px;
    padding: 3px;
}


.user-manual-box:hover {
    background-color: #090A3A;
    
    color: white;
    
}

.user-manual-box:hover h5 {
    color: white;
    text-decoration: underline;
}

.user-manual-box a {
    text-decoration: none;
    color: inherit; /* Inherits color from parent */
}

#contactUs {
   
    text-align: left;
    font-size: 1.1em;
    color: #333;
    margin-top: 0px; /* Margin to create space between Example Search and Contact Us */
}

.contact-us-box {
    background-color: #e0f7fa;
    padding: 20px;
    border-radius: 20px;
    border: none;
    text-align: left;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-us-box h5 {
    font-size: 1.25em;
    color: #090A3A;
    margin-bottom: 10px;
}

.contact-us-box p {
    font-size: 1em;
    color: #090A3A;
    margin-bottom: 3px;
}

.contact-us-box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.contact-us-box li {
    margin-bottom: 3px;
    color:#090A3A ;
}

.contact-us-box a {
    color:#090A3A ;
    text-decoration: none;
}

.contact-us-box a:hover {
    text-decoration: underline;
}

.contact-us-box:hover {
    background-color: #090A3A;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-us-box:hover h5,
.contact-us-box:hover p,
.contact-us-box:hover a,
.contact-us-box:hover ul,
.contact-us-box:hover li{
    color: white;
}


#backToPhenotype{
    font: #333;
    border: 1px solid #ccc;
    background-color:white;
    width: 20%;
    display: inline-block;
    align-items: left;
}

#intermediateResults h4{
    color:#090A3A;
}
#intermediateResultsTable {
    width: 100%;
    border-collapse: collapse;  /* Ensures proper table borders */
    background-color: white;
    margin-top: 15px;
}
#intermediateResultsTable th, 
#intermediateResultsTable td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ccc;
    font-size: 1rem;
}
  /* Center the pagination */
    #pagination {
        text-align: center;
        margin: 20px 0;
    }

#intermediateResultsTable td {
    color: #333;
}

@media (max-width: 768px) {
    #intermediateResultsTable th, 
    #intermediateResultsTable td {
        font-size: 0.75rem;  /* Adjust font size on smaller screens */
    }
    #resultsPerPage {
        width: 100%;  /* Full width on smaller screens */
        margin-top: 10px;
    }
}

/* Button styling within the intermediate results */
#intermediateResultsTable .btn {
    background-color: #090A3A;
    color: white;
    border: none;
    display: inline-block; /* Ensures the button is inline and can be centered */
    margin: 0 auto;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.875rem;
}



#pagination {
    text-align: center;
    margin: 20px 0;
}

#pagination a {
    color: #090A3A;
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#pagination .active {
    background-color: #090A3A;
    color: white;
}

             .side-by-side #dataStatistics {
                flex: 1 1 calc(30% - 10px); /* One-quarter of the space */
                margin-right: 10px; /* Remove margin on the right for the last element */
            }
        }

        @media (max-width: 768px) {
            .side-by-side > div {
                flex: 1 1 100%; /* Full width on smaller screens */
                margin-right: 0; /* Reset margin */
                margin-bottom: 10px; /* Add some space between sections */
            }
        }
     /* Adjusting spinner speed */
     /* CSS for loading spinner */
        .spinner {
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2000s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none; /* Hidden by default */
        }

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