.institution-item.highlighted {
    background-color: #cce6ff; /* Light blue */
}

/* Hide latitude and longitude within institution items */
.institution-item .right-content p:nth-child(2),
.institution-item .right-content p:nth-child(3),
/* Hide latitude and longitude within oncologist items */
.oncologist-item .left-content p:nth-child(2),
.oncologist-item .left-content p:nth-child(3),
.oncologist-item .right-content p:nth-child(1),
.oncologist-item .right-content p:nth-child(2),
.oncologist-item .right-content p:nth-child(3) 
{
      display: none;
}

/* General styling */
body {
    font-family: Roboto, sans-serif;
    padding: 0;
    margin: 0;
}

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

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}

.container {
    padding-bottom: env(safe-area-inset-bottom);
}

.banner {
    background-color: white; /* Green background color */
    padding: 5px; /* Padding around content */
    display: flex;
    align-items: center; /* Center vertically */
    border: 1px solid lightgrey; /* Add border */
    flex-direction: row;
}
  
.banner h1 {
    margin: 0; /* Remove default margin for h1 */
    color: #0d86ff;
}

.custom-recaptcha {
    /* placeholder for now */
}

.sections {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 5px; /* Padding around content */
    margin: 10px;
}

.section {
    margin-left: 10px;
    position: relative;
}

.section-button {
    background-color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 9999; /* Set a high z-index value */
    height: 50px;
    font-size: 14px;
}

.section-button:hover {
    text-decoration: underline;
}

.section-content {
    display: none;
    position: fixed;
    top: 100px; /* Adjust as needed */
    right: 0;
    width: 50%;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 9999; /* Set a high z-index value */
    margin-right: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    font-size: 14px; /* Adjust font size */
    line-height: 1.6; /* Adjust line height */
    color: #333; /* Text color */
    overflow-y: auto;
    max-height: calc(100vh - 175px); /* Set maximum height to 100vh minus header height and some padding */
}

.content {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow-y: auto;
}

.left-overall {
    flex: 1;
    display: flex;
    overflow-y: auto;
    position: relative;
    z-index: 3;
    background-color: white;
}

.right-overall {
    flex: 3;
    display: flex;
    flex-direction: row;
}

.map-container {
    flex: 3;
    position: relative;
    z-index: 2;
}

.overlay-container {
    position: absolute; /* Or fixed if required */
    top: 0;
    left: 0;
    width: 100%;
    height: 0; /* Set height to 0 when not visible */
    display: none; /* Hide it unless necessary */
    z-index: 10; /* Ensure it's layered above other content */
}

.blank-space {
    flex: 3;
    z-index: 1;
}

.blank-space * {
    pointer-events: none; /* Make children of the container transparent to pointer events */
}

/* Map styling */
#map {
    width: 100%;
    height: 100%;
}

/* Filter container styling */
.filters {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add shadow with blur radius of 10px and color with 0.1 opacity */
    height: 50px;
    border-radius: 5px;
}

.filter-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-button {
    background-color: #f5f5f5;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    height: 30px; /* Adjust the height as needed */
    display: inline-block;
    border-radius: 5px;
}

.toggle-button.active {
    background-color: #989898; /* Change to your desired active background color */
    color: white;
}
  
.toggle-button:not(:last-child) {
    margin-right: 5px;
}

/* Title styling */
h1, h2 {
    text-align: center;
}

h2 {
    font-size: 20px;
}

/* Rounded corners */
.rounded {
    border-radius: 8px;
}

.title {
    margin: 0; /* Remove default margin */
    font-size: 24px; /* Adjust font size as needed */
    padding-left: 10px;
    padding-right: 60px;
    position: relative;
}

.title-link {
    text-decoration: none; /* Remove underline */
    color: inherit;        /* Use the parent element's color */
}

.beta-tag {
    display: inline-block;
    background-color: #4da6ff; /* Orange color for Beta tag */
    color: white;
    padding: 2px 6px;
    font-size: 0.4em;
    margin-left: 10px;
    border-radius: 3px;
    cursor: pointer;
    position: absolute; /* Needed for positioning the tooltip */
    top: 0;
}
  
.beta-tag::after {
    content: 'This application is currently in beta. Our goal is to help users find the right oncologist, but please note that the app is still under development and has not been fully tested. As a beta user, your experience is valuable to us. You may encounter some issues or incomplete features as we continue to refine the app. Your feedback will play a crucial role in helping us improve the service. Thank you for your understanding and support!';
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #f9f9f9;
    color: rgb(117, 117, 117);
    padding: 8px;
    width: 400px;
    font-size: 14px; /* Adjust font size */
    font-weight: normal;
    border-radius: 5px;
    z-index: 10;
    text-align: left; /* Left align text */
    white-space: normal; /* Allows the text to wrap naturally */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for better visibility */
}
  
.beta-tag:hover::after {
    display: block;
}

.search-button {
    cursor: pointer;
    background-color: #0d86ff;
    color: white;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    margin: 0;
    margin-right: 0;
    margin-left: 10px;
    border: none;
    width: 60px;
    height: 50px;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

.search-button:hover {
    background-color: #4da6ff; /* Lighter blue background color on hover */
}

.search-button img {
    width: 25px; /* Adjust the width as needed */
    height: 25px; /* Adjust the height as needed */
    margin: 0 auto;
    fill: #4da6ff;
}

.search-button:hover img {
    content: url(/assets/spyglass-light-73ec99429b1953eed3e98d24f47545c7c62a3e80b721526b3c3c4ee22d323ac5.png);
}

/* Adjust the height of the text field and select dropdown */
#zip_code, #search_radius, #cancer_type {
    height: 30px; /* Adjust the height as needed */
    border: none;
    border-radius: 0;
    font-size: 14px; /* Adjust font size to maintain consistency */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    box-shadow: none; /* Remove mobile-specific shadows */
}

/* Target the select elements within #search_radius and #cancer_type */
#search_radius option, #cancer_type option {
    background-color: white !important; /* Set background color to white */
}

#search_radius, #cancer_type {
    border-left: 1px solid #ccc; /* Add border to maintain consistent appearance */
}

.zip-validation-dialog {
    display: none;
    padding: 10px;
    background-color: #ff9999; /* Red background */
    color: white; /* White text */
    border-radius: 5px;
  }
  
/* Additional styles to make the dialog box look nice */
.zip-validation-dialog p {
    margin: 0;
}

/* Error Message Styling */
.error-message {
    background-color: #ffe6e6; /* Light red background */
    border-left: 6px solid #ff4d4d; /* Darker red border on the left */
    margin-top: 20px;
    padding: 10px 16px;
    color: #cc0000; /* Dark red text */
    border-radius: 4px;
  }
  
  /* No Results Message Styling */
  .no-results-message {
    background-color: #ffffe6; /* Light yellow background */
    border-left: 6px solid #ffcc00; /* Orange border on the left */
    margin-top: 20px;
    padding: 10px 16px;
    color: #996600; /* Dark yellow text */
    border-radius: 4px;
  }
  
  .no-results-message ul {
    margin-top: 10px;
    padding-left: 20px;
    list-style-type: disc;
  }
  
  /* Ensure responsiveness */
  @media (max-width: 768px) {
    .error-message, .no-results-message {
      padding: 8px 12px;
      font-size: 14px;
    }
}

.missing-inputs-dialog {
    display: none;
    padding: 10px;
    background-color: #ff9999; /* Red background */
    color: white; /* White text */
    border-radius: 5px;
  }
  
/* Additional styles to make the dialog box look nice */
.missing-inputs-dialog p {
    margin: 0;
}

.zip-validation-dialog.hide {
    display: none;
}
  
.institution-list {
    list-style-type: none; /* Remove default list bullet points */
    overflow-y: auto;
    flex: 1;
    position: relative;
}

.institution-list h2 {
    background-color: white;
    padding: 15px;
    margin: 0;
}

.institution-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sorting-options {
    padding: 15px;
    background-color: white;
    display: flex;
    align-items: center;
}

#sort-institution, #sort-oncologist {
    border: none;
    margin-left: 5px;
    background-color: white;
}

.oncologist-list {
    overflow-y: auto;
    flex: 1;
    z-index: 3;
}

.oncologist-list h2 {
    background-color: white;
    padding: 15px;
    margin: 0;
}

.oncologist-title {
    display: flex;
    justify-content: space-between;
    background-color: white;
}
  
.institution-item {
    background-color: white; /* Background color for each item */
    border-top: 1px solid lightgray;
    padding: 10px; /* Add padding to each item */
    font-size: 12px;
    line-height: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
  
.institution-item h3 {
    margin: 0; /* Remove default margin */
    width: 45%;
}

/* Adjust styling of specific content blocks */
.institution-item .left-content {
    text-align: left; /* Align left */
    flex: 1.5;
}

.institution-item .right-content {
    text-align: right; /* Align right */
    flex: 1;
}

.institution-item p {
    margin-top: 5px;
    margin-bottom: 5px;
}

.highlight-nci-center {
    background-color: #d9ead3; /* Light green color */
}

.oncologist-item {
    background-color: white; /* Background color for each item */
    border-top: 1px solid lightgray;
    padding: 10px; /* Add padding to each item */
    font-size: 12px;
    line-height: 1; /* Adjust line height */
    display: flex;
    flex-direction: column;
}

/* Apply hover effect to institution items */
.institution-item:hover {
    background-color: #e0e0e0; /* Light grey background color on hover */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.oncologist-item p {
    margin: 5px 0; /* Adjust margin for each paragraph */
    flex: 1; /* Make paragraphs take equal space */
}

.oncologist-item .top-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Adjustments for specific content blocks */
.oncologist-item .left-content {
    text-align: left; /* Align left */
    margin-right: 10px; /* Add margin to separate from right content */
}

.oncologist-item .right-content {
    text-align: right; /* Align right */
}

/* Apply styling to link */
.oncologist-item a {
    color: #007bff; /* Link color */
    text-decoration: none; /* Remove underline */
}

.oncologist-item .bottom-content {
    margin-top: auto; /* Add some top margin to separate it from the rest of the content */
    color: #333; /* Adjust text color */
    text-align: center;
}
  


/* Dynamic classes below */

.banner-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    padding-bottom: 25vh;
}

.banner-unverified {
    display: none;
}

.title-center {
    font-size: 60px; /* Adjust font size as needed */
    padding-bottom: 10px;
}

.content-hide {
    display: none;
}

.recaptcha-verified {
    display: none;
}

/* Overlay styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.overlay-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    position: relative;
}

.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #0d86ff; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

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

.progress-bar-container {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 4px;
    margin: 20px 0;
}

.progress-bar {
    width: 0;
    height: 8px;
    background-color: #0d86ff;
    border-radius: 4px;
    transition: width 0.5s;
}

.overlay button {
    margin-top: 20px;
}

/* Banner toggle button */
.banner-toggle {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001;
    display: none; /* Hide by default */
    align-items: center;
    color: #333;
    padding: 5px;
}

.banner-toggle .toggle-icon {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #333; /* Downward arrow */
    transition: transform 0.3s;
    margin-right: 5px;
    transform: rotate(0deg); /* Initial state */
}

.banner.collapsed .toggle-icon {
    transform: rotate(0deg); /* Downward arrow */
}

.banner:not(.collapsed) .toggle-icon {
    transform: rotate(180deg); /* Upward arrow */
}

.banner-toggle .toggle-text {
    font-size: 12px;
    display: inline-block;
    visibility: visible;
}

.banner.collapsed .filters,
.banner.collapsed .terms-container {
    display: none; /* Hide content when collapsed */
}

@media (max-height: 650px) {
    .banner-center {
        padding-bottom: 0; /* Remove bottom padding */
    }
}

@media (max-height: 375px) {
    .title {
        font-size: 40px;    /* Reduce font size to 40px */
    }

    /* Override flex properties to prevent .banner-center from growing */
    .banner-center {
        flex: 0 0 auto;
        margin-top: auto; /* Pushes it to the bottom */
        padding-bottom: 30px; /* Remove bottom padding */
    }

    /* Ensure .content fills available space */
    .content {
        flex: 1 0 auto;
    }

}

/* 1535PX WIDTH */

@media (max-width: 1535px) {
    body.map-visible .sections {
        display: none;
    }
}

/* 1335PX WIDTH */

@media (max-width: 1335px) {
    body.map-visible .terms-container {
        display: none;
    }
}

/* 1170PX WIDTH */

@media (max-width: 1170px) {

    .institution-title, .oncologist-title {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items to the start (left-aligned) */
        padding: 10px 0; /* Add padding for spacing */
    }

    .sorting-options {
        margin-top: 10px; /* Add some spacing below the title */
        width: 100%; /* Ensure it takes full width */
    }

    .sorting-options label {
        display: block; /* Move label to its own line */
        margin-bottom: 5px; /* Add spacing below label */
    }

    /* Make the container a flex column */
    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  
    /* Adjust the content area to flex column */
    .content {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      overflow: visible;
    }
  
    /* Map container adjustments */
    .right-overall {
      order: 1;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      overflow: visible;
    }
  
    .map-container {
      flex: 1 1 auto;
      position: relative;
      overflow: hidden;
    }
  
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  
    /* Institution list adjustments */
    .left-overall {
      order: 2;
      flex: none;
      width: 100%;
      background-color: white;
    }
  
    .institution-list {
        display: flex;  
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: 15vh; /* Adjust as needed */
        min-height: 125px;
        flex-direction: row;
    }

    .institution-item,
    .oncologist-item {
        flex: 0 0 auto;
        width: 300px; /* Make the item wider when at the bottom */
        padding-right: 15px; /* Add spacing between items */
        box-sizing: border-box; /* Include padding and borders in width */
    }

    .institution-item, .oncologist-item {
        border-top: none; /* Remove the top border */
        border-bottom: none; /* Remove the bottom border */
        border-left: 1px solid lightgray; /* Add left border */
        box-sizing: border-box; /* Include padding and borders in width */
    }

    .right-content {
        white-space: nowrap;
    }
  
    /* Oncologist list adjustments */
    .oncologist-list {
      display: none; /* Hidden by default */
      order: 3;
    }

    .oncologist-list {
        display: flex;  
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: 15vh; /* Adjust as needed */
        min-height: 125px;
        flex-direction: row;
    }
}

/* 935PX WIDTH */

@media (max-width: 935px) {
    body.map-visible .banner {
        flex-direction: column;
        align-items: center;
    }
    
    body.map-visible .filters {
        flex-direction: column;
        align-items: stretch;
        margin: 10px; /* Add horizontal padding */
        width: 100%;
        height: auto;
    }

    body.map-visible .filter-group {
        width: 100%; /* Make filter groups take full width */
        display: flex;
        align-items: center;
    }

    body.map-visible #zip_code, #search_radius, #cancer_type {
        width: 90%;
        margin-left: 0;
        margin-right: 0;
        align-items: center;
    }

    body.map-visible .search-button {
        width: 100%;
        margin-left: 0;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 5px;
    }

    /* Remove vertical borders from #search_radius and #cancer_type */
    body.map-visible #search_radius, #cancer_type {
        border-left: none;
        border-top: 1px solid #ccc;
    }

    body.map-visible #zip_code, #search_radius, #cancer_type {
        height: 40px;
    }

    body.map-visible .title {
        font-size: 24px;
    }

    body.map-visible .beta-tag {
        font-size: 0.3em;
    }

    body.map-visible .section-content {
        width: 70%;
    }

    body.map-visible .banner-toggle {
        display: flex;
    }

    body.map-visible .banner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    body.map-visible .content {
        margin-top: 60px; /* Adjust based on the banner's expanded height */
    }

    body.map-visible .banner.collapsed + .content {
        margin-top: 30px; /* Adjust based on the banner's collapsed height */
    }
}

/* 768PX WIDTH */

@media (max-width: 768px) {
    .banner {
        flex-direction: column;
        align-items: center;
    }
    
    .filters {
        flex-direction: column;
        align-items: stretch;
        margin: 10px; /* Add horizontal padding */
        width: 100%;
        height: auto;
    }

    .filter-group {
        width: 100%; /* Make filter groups take full width */
        display: flex;
        align-items: center;
    }

    #zip_code, #search_radius, #cancer_type {
        width: 90%;
        margin-left: 0;
        margin-right: 0;
        align-items: center;
    }

    .search-button {
        width: 100%;
        margin-left: 0;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 5px;
    }

    /* Remove vertical borders from #search_radius and #cancer_type */
    #search_radius, #cancer_type {
        border-left: none;
        border-top: 1px solid #ccc;
    }

    #zip_code, #search_radius, #cancer_type {
        height: 40px;
    }

    .title {
        font-size: 50px;
    }

    .beta-tag {
        font-size: 0.3em;
    }

    .section-content {
        width: 70%;
    }
}