/* Navigation link styles */
.nav-link {
    font-size: 20px; /* Font size for navigation links */
    color: #036085; /* Default color for navigation links */
  }
  
  /* Body styles */
  body {
    font-family: 'Montserrat', 'Open Sans', 'Poppins', sans-serif; /* Font families for body text */
    font-weight: 400; /* Normal font weight */
    font-size: 16px; /* Base font size */
    line-height: 1.7; /* Line height for readability */
    color: #6d6d6d; /* Default text color */
  }
  
  .ctlink {
    color: white;
  }
  #hero {
    background-color: #FAFAFA
  }
  strong {
    color: #6d6d6d;
  }
  /* Preformatted text styles */
  pre {
    font-family: 'Montserrat', 'Open Sans', 'Poppins', sans-serif; /* Font for preformatted text */
    font-weight: 400; /* Normal font weight */
    font-size: 16px; /* Base font size for preformatted text */
    line-height: 1.7; /* Line height for readability */
    color: #6d6d6d; /* Default text color */
  }
  
  /* Email text styling */
  .email {
    color: #036085; /* Color for email links */
  }
  
  #metastaticFilter {
    transform: scale(1.5);
    margin: 4pt;
  }
  
  /* Custom button styles */
  .custom-btn {
    background-color: #036085; /* Custom background color for buttons */
    color: white; /* Text color for buttons */
    border: none; /* Remove border for a cleaner look */
  }
  
  .custom-btn:hover {
    background-color: #036085b2; /* Darker color on hover for visual feedback */
    color: white; /* Ensure text color remains white */
  }
  
  /* Study title styles */
  .study-title {
    grid-column: 1; /* Position study title in the left column */
  }
  
  /* Custom background and text color for specific sections */
  .text-bg-custom {
    background-color: #036085; /* Background color for custom sections */
    color: white; /* Text color for contrast */
    border: none; /* Remove border for a cleaner look */
    text-align: center; /* Center text alignment */
    font-size: 16px; /* Font size for custom text */
  }
  
  /* Additional details layout */
  .additional-details {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Align sections horizontally */
    gap: 15px; /* Space between sections */
    flex-grow: 1; /* Allow it to grow within its parent */
    align-items: center; /* Center items vertically */
    justify-content: left; /* Align items to the left */
  }
  
  /* Info badge styles */
  .info-badge {
    font-size: 0.8rem; /* Font size for info badges */
    padding: 2; /* Padding around badges */
  }
  
  /* Link styles */
  a {
    color: black; /* Default link color */
    text-decoration: none; /* Remove underline for links */
  }
  
  /* Title styles */
  .title {
    color: white; /* Text color for titles */
    font-size: 1.5rem; /* Font size for titles */
    font-weight: bold; /* Bold font weight for emphasis */
    padding: 10px; /* Padding for spacing */
    text-align: left;
  }
  
  /* Custom card background for titles */
  .custom-card-background .title {
    background-color: #e0f7fa; /* Light cyan background for card titles */
    color: #000; /* Dark text color for contrast */
    padding: 15px; /* Increased padding for spacious feel */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 5px; /* Rounded corners for a softer look */
  }
  
  /* Top section styles */
  .top {
    background-color: #036085; /* Dark blue background for top sections */
    padding: 10px; /* Padding for top section */
    color: white; /* Text color for visibility */
    border-radius: 10px; /* Rounded corners for a softer look */
  }
  
  /* Search bar layout */
  #search {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center horizontally */
    margin-bottom: 20px; /* Spacing below the search bar */
  }
  
  .search-bar {
    width: 80%; /* Set the width of the search bar */
  }
  
  /* Detail section width */
  .detail-section {
    width: 200px; /* Fixed width for detail sections */
  }
  
  /* Heading styles */
  h5 {
    font-size: calc(1.4rem); /* Responsive font size for h5 */
  }
  
  /* Heading styles for detail sections */
  .detail-section h1 {
    font-size: calc(1.4rem); /* Responsive font size for h1 */
  }
  
  /* Body styles for full height */
  body {
    margin: 0; /* Remove default margin */
    height: 100vh; /* Make the body take the full viewport height */
    overflow-y: scroll; /* Always show the vertical scrollbar */
  }
  
  /* Button margin */
  button {
    margin: 2; /* Margin for buttons */
  }
  
  /* Contact form container styles */
  .contact-form-container {
    background-color: #ffffff; /* White background for contact form */
    padding: 40px; /* Padding around contact form */
    border-radius: 10px; /* Rounded corners for form container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    width: 100%; /* Full width of container */
    max-width: 500px; /* Maximum width for the form */
  }
  
  /* Main heading styles */
  h1 {
    font-size: 2rem; /* Font size for main headings */
    margin-bottom: 20px; /* Margin below heading */
    color: #333; /* Dark color for contrast */
    text-align: center; /* Center alignment for headings */
  }
  
  /* Form group margin */
  .form-group {
    margin-bottom: 15px; /* Space below form groups */
  }
  
  /* Form group label styles */
  .form-group label {
    font-size: 1rem; /* Font size for labels */
    color: #666; /* Color for labels */
    margin-bottom: 5px; /* Space below labels */
    display: block; /* Display labels as block elements */
  }
  
  /* Input and textarea styles */
  .form-group input, .form-group textarea {
    width: 100%; /* Full width for inputs */
    padding: 12px; /* Padding for inputs */
    font-size: 1rem; /* Font size for inputs */
    border: 1px solid #ddd; /* Light border for inputs */
    border-radius: 5px; /* Rounded corners for inputs */
    box-sizing: border-box; /* Include padding and border in width */
    transition: border-color 0.3s ease-in-out; /* Transition for border color on focus */
  }
  
  /* Focus state for inputs */
  .form-group input:focus, .form-group textarea:focus {
    border-color: #5c6bc0; /* Change border color on focus */
    outline: none; /* Remove default outline */
  }
  
  /* Textarea specific styles */
  .form-group textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 100px; /* Minimum height for textareas */
  }
  
  /* Button hover effect */
  button:hover {
    background-color: #3949ab; /* Change background color on hover */
  }
  
  /* Error message styles */
  .form-group span.error {
    color: red; /* Red color for error messages */
    font-size: 0.875rem; /* Font size for error messages */
  }
  
  /* Contact details styles */
  .contact-details {
    margin-top: 20px; /* Space above contact details */
    text-align: center; /* Center text alignment */
    font-size: 0.875rem; /* Font size for contact details */
    color: #777; /* Grey color for contact details */
  }
  
  /* Link styles in contact details */
  .contact-details a {
    color: #5c6bc0; /* Link color in contact details */
    text-decoration: none; /* Remove underline for links */
  }
  
  /* Hover effect for links in contact details */
  .contact-details a:hover {
    text-decoration: underline; /* Underline links on hover */
  }
  
  /* Filter card background color */
  .filter-card {
    background-color: #036085; /* Dark teal color for filter card */
    color: white; /* White text color for better contrast */
  }
  
  /* Style filter buttons */
  .filter-card .btn.custom-btn {
    background-color: white; /* White background for filter buttons */
    color: #036085; /* Dark teal text color for buttons */
    border: 2px solid #036085; /* Border for filter buttons */
  }
  
  /* Button hover effect for filter buttons */
  .filter-card .btn.custom-btn:hover {
    background-color: #036085; /* Dark teal background on hover */
    color: white; /* Change text color to white on hover */
  }
  
  /* Dropdown menu background and checkbox labels */
  .filter-card .dropdown-menu {
    background-color: white; /* White background for dropdown menu */
    color: #036085; /* Dark teal text color for dropdown */
    max-width: 100%; /* Ensures the dropdown menu adapts to its container */
    overflow: hidden;
    padding: 0;
    word-wrap: break-word; /* Wraps text within the container */
  }
  
  .filter-card .dropdown-menu .dropdown-item {
    background-color: white; /* Keep background white for dropdown items */
    color: #036085; /* Dark teal text for dropdown items */
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Ensures that overflowed text is hidden */
    text-overflow: ellipsis; /* Adds '...' when text is cut off */
    display: block; /* Ensure the labels take up block space */
    width: 100%; /* Makes sure the item stretches across the dropdown */
    padding: 10px;
  }
  
  /* Active dropdown item style */
  .filter-card .dropdown-menu .dropdown-item:hover,
  .filter-card .dropdown-menu .dropdown-item.active {
    background-color: #036085; /* Dark teal background when hovering or active */
    color: white; /* White text for contrast */
  }
  
  /* Clear Filters button style */
  #clearFilters {
    background-color: white; /* White button for clear filters */
    color: #036085; /* Dark teal text color for button */
    border: 2px solid #036085; /* Border to match other buttons */
  }
  
  /* Clear Filters button hover effect */
  #clearFilters:hover {
    background-color: #036085; /* Dark teal background on hover */
    color: white; /* White text on hover */
  }
  
  /* Custom style for the navbar toggler (hamburger menu button) */
  .navbar-toggler {
    border: 2px solid #036085; /* Border for toggler button */
    background-color: #036085; /* Color for toggler button */
    padding: 0.25rem; /* Adjust as needed */
    border: none; /* Remove border if needed */
    width: 100%; /* Adjust the width */
  }
  
  /* Hover effect for nav links */
  .navbar-nav .nav-link:hover {
    background-color: #036085; /* Dark teal background on hover */
    color: white; /* Change text color to white on hover */
  }
  
  /* Collapsed menu link hover effect */
  .collapse .nav-link:hover {
    background-color: #036085; /* Dark teal background for collapsed menu links on hover */
    color: white; /* Change text color to white on hover */
  }
  
  #header img {
    max-width: 100%;
    height: auto; /* Ensures the logo maintains its aspect ratio */
  }
  
  @media (max-width: 576px) {
    #header p {
        font-size: 14pt; /* Slightly smaller font for better readability */
    }
  
    #header .navbar-nav .nav-link {
        font-size: 14pt; /* Consistent font size for navigation links */
    }
  }
  
  #header {
    padding: 1rem 0; /* Keep overall padding */
  }
  
  header {
    margin-bottom: 1rem; /* Adjust header bottom margin to reduce space */
  }
  
  .navbar-toggler {
    margin-top: 0.5rem; /* Reduced space above the toggle button */
  }
  
  .navbar-nav .nav-item {
    padding: 0.5rem 1rem; /* Keep padding for nav items */
  }
  
  p.mb-1 {
    margin-bottom: 0.25rem; /* Reduced bottom margin for contact paragraphs */
  }
  
  .navbar {
    padding-bottom: 0; /* Remove bottom padding of the navbar */
    margin-bottom: 0; /* Remove bottom margin if present */
  }
  .card-text {
    margin: 0; /* Optional: Adjust margin if needed */
  }
  
  .eligibility-text {
    white-space: pre-wrap; /* Allows wrapping of text and respects whitespace */
    word-wrap: break-word; /* Breaks long words to wrap */
    overflow-wrap: break-word; /* Ensures that long words can break */
    max-width: 100%; /* Prevents overflow on smaller screens */
    margin-top: 0.5em; /* Optional: Adds space between the title and text */
  }
   #resultCount {
    color: blue; /* Gold color for contrast */
    font-weight: bold; /* Bold text for visibility */
  }
  
  
  /* High Contrast Mode */
  .high-contrast {
    background-color: #000; /* Black background */
    color: #ffd700; /* White text */
  }
  
  .high-contrast .ctlink {
    color: #ffd700
  }
  /* Navbar */
  .high-contrast .navbar,
  .high-contrast .navbar-nav .nav-link {
    background-color: #000;
    color: #ffeb3b; /* Yellow for links */
  }
  
  .high-contrast .nav-link:hover{
    background-color: #ffd700;
    color:#000;
  }
  
  .high-contrast strong {
    color: #ffd700;
  }
  /* Logo */
  .high-contrast .logo {
    background-color: #ffd700; /* White background for contrast */
  }
  
  /* Buttons */
  .high-contrast button,
  .high-contrast .btn.custom-btn {
    background-color: #333;
    color: #ffeb3b; /* Yellow for high-contrast */
    border: 1px solid #ffeb3b;
  }
  
  .high-contrast .btn.custom-btn {
    background-color: #ffd700; /* Gold button */
    color: #000; /* Black text */
    border-color: #ffd700; /* White border */
  }
  
  .high-contrast .btn.custom-btn:hover {
    background-color: #000;
    color: #ffd700; /* Gold text on hover */
    border-color: #ffd700;
  }
  
  /* Headers */
  .high-contrast h1, 
  .high-contrast h3, 
  .high-contrast h5, 
  .high-contrast h6 {
    color: #ffd700; /* Gold headings */
  }
  
  /* Filters and Containers */
  .high-contrast #filters .container,
  .high-contrast .card,
  .high-contrast .filter-card,
  .high-contrast .protocol-card {
    background-color: #333; /* Dark background for elements */
    color: #ffd700; /* White text */
    border: 2px solid #ffd700; /* White border for cards */
  }
  
  /* Clear Filters Button */
  .high-contrast #clearFilters {
    background-color: #ffd700 !important; /* Gold background */
    color: #000 !important; /* Black text */
    border: 2px solid #ffd700 !important;
  }
  
  .high-contrast #clearFilters:hover,
  .high-contrast #clearFilters:focus {
    background-color: #222 !important; /* Dark background on hover/focus */
    color: #ffd700 !important; /* White text */
  }
  
  /* Dropdowns */
  .high-contrast .dropdown-menu,
  .high-contrast .dropdown-menu .dropdown-item {
    background-color: #222 !important; /* Dark background */
    color: #ffd700 !important; /* Yellow text */
    border: 2px solid #ffd700 !important;
  }
  
  .high-contrast .dropdown-menu .dropdown-item:hover,
  .high-contrast .dropdown-menu .dropdown-item:focus {
    background-color: #ffd700 !important; /* Gold on hover */
    color: #000 !important; /* Black text */
  }
  
  /* Input Fields */
  .high-contrast input,
  .high-contrast .form-control {
    background-color: #222; /* Darker input fields */
    color: #fff; /* White text */
    border: 2px solid #ffd700; /* Yellow border */
  }
  
  /* Badges */
  .high-contrast .badge,
  .high-contrast .badge.text-bg-custom {
    background-color: #ffd700 !important; /* Gold background */
    color: #000 !important; /* Black text */
    border: 1px solid #000 !important;
  }
  
  /* Placeholder Text */
  .high-contrast ::placeholder {
    color: #ffd700 !important; /* Yellow placeholder */
    opacity: 1 !important; /* Full opacity */
  }
  
  /* Results Found */
  .high-contrast #resultCount {
    color: #ffd700; /* Gold color for contrast */
    font-weight: bold; /* Bold text for visibility */
  }
  
  .high-contrast p {
    color: #ffd700;
  }
  
  .high-contrast a {
    color: #ffd700;
  }
  
  /* Styling for Return Link */
  .high-contrast .return-link {
    color: #ffd700; /* Yellow text color */
  }
  
  .high-contrast .return-link:hover {
    color: #fff; /* White text on hover */
  }
  
  .high-contrast .contact-card {
    background-color: #000;
    border: 2px solid #ffd700; /* White border */
  }
  
  /* Top section styles */
  .high-contrast .top {
    background-color: #333; /* Dark blue background for top sections */
    padding: 10px; /* Padding for top section */
    color: white; /* Text color for visibility */
    border-radius: 10px; /* Rounded corners for a softer look */
  }
  
  /* Top section styles */
  .contrast .top {
    background-color: #333; /* Dark blue background for top sections */
    padding: 10px; /* Padding for top section */
    color: white; /* Text color for visibility */
    border-radius: 10px; /* Rounded corners for a softer look */
  }
  
  
  /* Contrast Mode */
  .contrast {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
  }
  
  .contrast .ctlink {
    color: #fff;
  }
  
  /* Navbar */
  .contrast .navbar,
  .contrast .navbar-nav .nav-link {
    background-color: #000;
    color: #fff; /* White for links */
  }
  
  .contrast .nav-link:hover{
    background-color: #fff;
    color:#000;
  }
  
  /* Logo */
  .contrast .logo {
    background-color: #fff; /* White background for contrast */
  }
  
  /* Buttons */
  .contrast button,
  .contrast .btn.custom-btn {
    background-color: #333; /* Dark grey background */
    color: #fff; /* White for text */
    border: 1px solid #fff; /* White border */
  }
  
  .contrast .btn.custom-btn {
    background-color: #fff; /* White button */
    color: #000; /* Black text */
    border-color: #000; /* Black border */
  }
  
  .contrast .btn.custom-btn:hover {
    background-color: #000;
    color: #fff; /* White text on hover */
    border-color: #fff; /* White border on hover */
  }
  
  /* Headers */
  .contrast h1, 
  .contrast h3, 
  .contrast h5, 
  .contrast h6 {
    color: #fff; /* White headings */
  }
  
  .contrast strong {
    color: #fff;
  }
  
  /* Filters and Containers */
  .contrast #filters .container,
  .contrast .card,
  .contrast .filter-card,
  .contrast .protocol-card {
    background-color: #333; /* Dark grey background for elements */
    color: #fff; /* White text */
    border: 2px solid #fff; /* White border for cards */
  }
  
  /* Clear Filters Button */
  .contrast #clearFilters {
    background-color: #fff !important; /* White background */
    color: #000 !important; /* Black text */
    border: 2px solid #000 !important; /* Black border */
  }
  
  .contrast #clearFilters:hover,
  .contrast #clearFilters:focus {
    background-color: #222 !important; /* Dark grey background on hover/focus */
    color: #fff !important; /* White text */
  }
  
  /* Dropdowns */
  .contrast .dropdown-menu,
  .contrast .dropdown-menu .dropdown-item {
    background-color: #222 !important; /* Dark grey background */
    color: #fff !important; /* White text */
    border: 2px solid #fff !important;
  }
  
  .contrast .dropdown-menu .dropdown-item:hover,
  .contrast .dropdown-menu .dropdown-item:focus {
    background-color: #fff !important; /* White on hover */
    color: #000 !important; /* Black text */
  }
  
  /* Input Fields */
  .contrast input,
  .contrast .form-control {
    background-color: #222; /* Darker input fields */
    color: #fff; /* White text */
    border: 2px solid #fff; /* White border */
  }
  
  /* Badges */
  .contrast .badge,
  .contrast .badge.text-bg-custom {
    background-color: #fff !important; /* White background */
    color: #000 !important; /* Black text */
    border: 1px solid #fff !important;
  }
  
  /* Placeholder Text */
  .contrast ::placeholder {
    color: #fff !important; /* White placeholder */
    opacity: 1 !important; /* Full opacity */
  }
  
  /* Results Found */
  .contrast #resultCount {
    color: #fff; /* White color for contrast */
    font-weight: bold; /* Bold text for visibility */
  }
  
  .contrast p {
    color: #fff;
  }
  
  .contrast a {
    color: #fff;
  }
  
  /* Styling for Return Link */
  .contrast .return-link {
    color: #fff;
  }
  
  /* Styling for Return Link */
  .contrast .return-link:hover {
    background-color: #fff;
    color: #000;
  }
  
  .contrast .contact-card {
    background-color: #000;
    border: 2px solid #fff; /* White border */
  }
  
  
  .contact-category {
    margin-bottom: 3rem;
  }
  .contact-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
  
  .contact-card h3 {
    font-size: 18px;
    font-weight: 700;
  }
  
.info-box {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  color: #6d6d6d;
  border: 1px solid #ccc;
  width: 200px;
  padding: 8px;
  border-radius: 4px;              /* default width */
  max-width: 90vw;            /* max 90% of viewport width */
  box-sizing: border-box;     /* include padding/border in width */
  z-index: 100;
  top: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow-wrap: break-word;  /* break long words if needed */
  word-wrap: break-word;      /* fallback for older browsers */
  hyphens: auto;              /* enable hyphenation for wrapping */
}



  
  .info-box ul {
    margin-top: 5pxpx;
    margin-bottom: 5px; /* Reset bottom margin to avoid excess space */
    line-height: 1.5; /* Improve readability */
  }
  
  .info-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  /* Ensure the tooltip appears correctly when visible */
  .info-box.visible {
    display: block;
  }
  
  .home-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
/* Target extra-small devices (<576px) */
@media (max-width: 575.98px) {
  .home-card {
    height: 12rem; /* Or whatever works best */
    width: 25rem;
  }
}
/* Medium screens (≥768px) */
@media (min-width: 768px) {
  .home-card {
    height: 16rem;
  }
}

/* Large screens (≥992px) */
@media (min-width: 992px) {
  .home-card {
    height: 15rem;
  }
}

/* Extra-large screens (≥1200px) */
@media (min-width: 1200px) {
  .home-card {
    height: 14rem;
  }
}

  .home-card svg {
    width: 75px; /* Standardize SVG width */
    height: 75px; /* Standardize SVG height */
    margin-bottom: 0.5rem; /* Consistent spacing below the image */
    margin-top:0.5rem;
  }
  
  .home-card h5 {
    margin-top: 0.5rem;
    color: #6E6E6E;
  }
  
  .home-card p {
    margin-top: 0.5rem;
    color: #6E6E6E;
  }
  
  .home-card a {
    text-decoration: none;
    color: inherit;
  }
  
  /* Position the tooltip */
  .high-contrast .info-box {
    display: none;
    position: absolute;
    background-color: #000;
    color: #ffd700;
    border: 1px solid #ffd700;
    padding: 8px;
    border-radius: 4px;
    width: 400px;
    z-index: 100;
    top: 20px; 
    left: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  
  .high-contrast .home-card h5 {
    margin-top: 0.5rem;
    color: #ffd700;
    border: #ffd700
  }
  
  .high-contrast .home-card p {
    margin-top: 0.5rem;
    color: #ffd700;
  }
  
  .home-card a {
    text-decoration: none;
    color: inherit;
  }
  
  .high-contrast svg {
    fill: #ffd700;
  }
  
  
  /* Position the tooltip */
  .contrast .info-box {
    display: none;
    position: absolute;
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px;
    border-radius: 4px;
    width: 400px;
    z-index: 100;
    top: 20px; 
    left: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  
  .contrast .home-card h5 {
    margin-top: 0.5rem;
    color: #fff;
    border: #fff
  }
  
  .contrast .home-card p {
    margin-top: 0.5rem;
    color: #fff;
  }
  
  .home-card a {
    text-decoration: none;
    color: inherit;
  }
  
  .contrast svg {
    fill: #fff;
  }
  
  .contrast #hero h1 {
    font: #000;
  }
  
  .contrast #hero {
    background-color: #333;
  }
  
  .high-contrast #hero {
    background-color: #333;
  }
  
  .badge {
    display: inline-block;
    max-width: 100%; /* Ensure it doesn't overflow the container */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevent wrapping, truncates long text */
}