@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
html {
    font-size: 16px; /* Default base font size */
}

/* Accessibility: Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}

/* Accessibility: Focus indicators */
*:focus {
    outline: 2px solid #007AC2;
    outline-offset: 2px;
}

/* Remove focus outline for mouse users but keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Accessibility: Button focus styles */
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #007AC2;
    outline-offset: 2px;
}

/* Accessibility: High contrast focus for colorblind theme */
body.theme-colorblind *:focus {
    outline: 3px solid #ffff00;
    outline-offset: 3px;
}

/* Accessibility: Ensure sufficient color contrast */
body.theme-colorblind {
    --focus-outline-color: #ffff00;
}

/* Accessibility: Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Accessibility: Improved button styling */
button {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Accessibility: Modal focus trap */
.modal:focus {
    outline: none;
}

.modal-content:focus {
    outline: none;
}

/* Accessibility: Ensure form labels are properly associated */
label {
    cursor: pointer;
}

/* Accessibility: Improve form field styling */
input, textarea, select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: #007AC2;
    box-shadow: 0 0 0 2px rgba(0, 122, 194, 0.2);
}

/* Accessibility: Menu item focus styles */
.extra-menu-popup li:focus {
    background-color: rgba(0, 122, 194, 0.1);
    outline: 2px solid #007AC2;
    outline-offset: -2px;
}

/* Accessibility: Theme-specific focus colors */
body.theme-dark *:focus {
    outline-color: #4CAF50;
}

body.theme-colorblind *:focus {
    outline-color: #ffff00;
}





/* #emailCopyButton {
    display: none;
} */



.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.login-header {
    text-align: center;
    margin-bottom: 2rem;
}
.login-header img {
    max-width: 200px;
    margin-bottom: 1rem;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-group label {
    font-weight: 500;
}
.form-group input {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}
.login-button {
    background: #003366;
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.login-button:hover {
    background: #004488;
}
.error-message {
    color: #dc3545;
    text-align: center;
    margin-top: 1rem;
    display: none;
}
.back-link {
    text-align: center;
    margin-top: 1rem;
}
.back-link a {
    color: #003366;
    text-decoration: none;
}
.back-link a:hover {
    text-decoration: underline;
}



/* ArcGIS Login Button Styles */
.arcgis-login-container {
    margin: 20px 0;
    text-align: center;
}

.arcgis-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: #007AC2;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.arcgis-login-button:hover {
    background-color: #005A8C;
}

.arcgis-login-button img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

/* Login Divider Styles */
.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.login-divider span {
    padding: 0 10px;
    color: #666;
    font-size: 14px;
    text-transform: uppercase;
}

/* Update existing login form styles to match */
.login-form {
    margin-top: 20px;
}

/* Banner for Beta Status */
.beta-banner {
    background-color: #F1F1F1;
    color: #000000;
    padding: 0;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    font-weight: light;
    border-bottom: 2px solid #c7c7c7; /* 2px */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.beta-banner a {
    color: #0000EE;
    text-decoration: underline;
    cursor: pointer;
}

.beta-banner a:hover {
    color: #5555ff;
}


/* General Styling */
body {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    margin: 5px; /* 5px */
    padding: 30px 30px 30px 30px;
    display: flex;
    height: 94dvh; /* Scales properly as it is % */
    overflow: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 2px solid #c7c7c7;
    border-radius: 30px;
    /*padding-top: 2.5rem; /* 40px */
}

/* Default Theme */
body.theme-default {
    --bg-color: #ffffff;
    --text-color: #1C1C1C;
    --button-bg-color: #2B2B2B;
    --nav-button-bg-color: #EEEEEE;
    --button-ask-color: #007BFF;
    --button-text-color: #ffffff;
    --user-message-bg-color: #F6F6F6;
    --user-message-border-color: #EEEEEE;
    --user-message-text-color: #1C1C1C;
    --bot-message-bg-color: #f1f1f1;
    --bot-message-text-color: #000000;
    --pill-button-bg-color: #fff;
    --pill-button-border-color: #007BFF;
    --pill-button-text-color: #007BFF;
    --additional-button-bg-color: #007BFF;
    --additional-button-text-color: #ffffff;
    --settings-menu-text-color: #535353;
    --starting-question-color: rgba(50, 117, 184, 0.1);
    --settings-menu-hover-color: #f0f0f0;
    --ask-button-image: url('../images/ask_arrow.png');
    --lead-submit-text-color: #ffffff;
    --loading-border-color: #ececec;
    --loading-box-shadow-color: #F7F7F7;
}

/* Dark Theme */
body.theme-dark {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #555555;
    --button-ask-color: #007BFF;
    --button-text-color: #ffffff;
    --nav-button-bg-color: #555555;
    --user-message-bg-color: #666666;
    --user-message-text-color: #ffffff;
    --bot-message-bg-color: #444444;
    --bot-message-text-color: #ffffff;
    --pill-button-bg-color: #555555;
    --pill-button-border-color: #ffffff;
    --pill-button-text-color: #ffffff;
    --additional-button-bg-color: #555555;
    --additional-button-text-color: #ffffff;
    --settings-menu-text-color: #fff;
    --starting-question-color: rgba(50, 117, 184, 0.1);
    --settings-menu-hover-color: #444444;
    --ask-button-image: url('../images/ask_arrow.png');
    --lead-submit-text-color: #ffffff;
    --loading-border-color: #555555;
    --loading-box-shadow-color: #777777;

}

/* Color Blind Mode */
body.theme-colorblind {
    --bg-color: #000000;
    --text-color: #ffffff;
    --button-bg-color: #ffff00;
    --button-ask-color: #ffff00;
    --button-text-color: #000000;
    --nav-button-bg-color: #1a1a1a;
    --user-message-bg-color: #ffff00;
    --user-message-text-color: #000000;
    --bot-message-bg-color: #ffffff;
    --bot-message-text-color: #000000;
    --pill-button-bg-color: #000000;
    --pill-button-border-color: #ffff00;
    --pill-button-text-color: #ffff00;
    --additional-button-bg-color: #ffff00;
    --additional-button-text-color: #000000;
    --settings-menu-text-color: #fff;
    --starting-question-color: #ffff00;
    --settings-menu-hover-color: #1a1a1a;
    --ask-button-image: url('../images/ask_arrow_black.png');
    --lead-submit-text-color: #000000;
    --loading-border-color: #000000;
    --loading-box-shadow-color: #c0c000;   /* Slightly lighter dark yellow for shadow */
}

.esri-view .esri-view-surface:focus:after {
    border-radius: 31px !important;
    display: none !important;
  }


.theme-icon {
    fill: var(--button-bg-color);
    margin-left: auto;
    margin: 0;
    margin-right: 1.125rem; /* 18px */
}

.theme-icon:hover {
    cursor: pointer;
}


.theme-selector-icon.rotated {
    transform: rotate(180deg);
}

.resizeHandle.modified {
    display: none;
}


/* Parent container for chat and map */


.theme-label {
    margin-left: auto;
}




.layout-container {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  
  .chat-container {
    position: relative;
    background-color: var(--bg-color);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    flex: 35%; /* Do not grow or shrink; basis 30% */
    min-width: 20%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .chat-container.widened {
    flex: 75%;
  }
  .chat-container.right {
    margin: 0 0 0 15px;
  }





  calcite-dropdown-item img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
  }
  

  .chat-container.modified {
    position: absolute;
    z-index: 90;
    left: 5%;
    top: 8%;
    padding: 0.5rem; /* 8px */
    border-radius: 8px; /* 8px */
    box-shadow: 0 0 1.875rem 0 rgba(0, 0, 0, 0.75); /* 30px */
    height: 85%; /* Percentage values remain unchanged */
}


  
  /* Map container settings */
  .rightDiv {
    display: flex;
    flex-direction: row;
    height: 93dvh;
    overflow: hidden;
    width: 70%; /* Adjust width as needed */
    position: relative;
    border-radius: 30px;
  }
  
  /* Flip the order when .dock-right is added */
  .layout-container.dock-right .chat-container {
    order: 2;
  }
  
  .layout-container.dock-right .rightDiv {
    order: 1;
  }
  




/* Parent container becomes a flex container */
.main-container {
    display: flex;
    flex-direction: row;
  }
  
  /* Both containers take equal space */

  
  /* Default ordering: chat left, map right */
  /* When .dock-right is added, swap the order */
  .main-container.dock-right .chat-container {
    order: 2;
  }
  .main-container.dock-right .rightDiv {
    order: 1;
  }






/* Make sure the parent li is relatively positioned */
.extra-menu-popup li.has-submenu {
    position: relative;
  }
    

  /* Optional: Style the select element */
  .theme-selector {
    font-family: inherit;
    font-size: 14px;
    padding: 4px;
  }




.menu-container {
    position: relative; /* sets the context for the popup */
    display: inline-block;
  }
  

  
  /* Hide the popup by default */
  .extra-menu-popup {
    display: none;
    position: absolute;
    top: 100%;          /* positions the popup directly below the button */
    right: 0;            /* aligns the left edge with the button */
    margin-top: 4px;    /* small gap, reduce if necessary */
    background: var(--bg-color);
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 5px 0;
    white-space: nowrap;
    z-index: 99999999;
    color: var(--settings-menu-text-color);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    transition: background-color 0.3s ease;

  }
  
  
  /* Remove default list styling */
  .extra-menu-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* Style each menu item */
  .extra-menu-popup li {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center; /* Vertically center the children */
    gap: 8px;  
  }

  .extra-menu-popup li img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
  }
  

  
  /* Highlight menu item on hover */
  .extra-menu-popup li:hover {
    background: var(--settings-menu-hover-color);
  }
  










.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1.25rem; /* 20px */
    cursor: ew-resize;
    background: var(--bot-message-bg-color);
    z-index: 10;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Map container */
#viewDiv {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}


/*         Start Previous Map Notifications      */
/*         Start Previous Map Notifications      */
/*         Start Previous Map Notifications      */

/* Full-width overlay at the bottom of rightDiv */
#custom-alert-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 0.625rem 0; /* 10px */
    background-color: transparent;
    transition: opacity 0.3s ease;
}

/* Alert box */
.custom-alert {
    background-color: var(--bot-message-bg-color, #ffffff);
    color: var(--bot-message-text-color, #000000);
    border: 1px solid var(--bot-message-bg-color, #ccc); /* 1px */
    border-radius: 8px; /* 8px */
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    margin: 0.625rem; /* 10px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 4px 8px */
    pointer-events: auto;
    font-family: Arial, sans-serif;
    width: 90%;
    max-width: 40.625rem; /* 650px */
    text-align: left;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    opacity: 0.85;
    animation: fade-out-alert 9s linear forwards;
    margin-bottom: 3%;
    transition: opacity 0.3s ease;
}


/* Moving border animation */
.custom-alert::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px; /* Border thickness */
    width: 100%;
    background-color: var(--button-bg-color, #007bff); /* Border color */
    animation: move-border 9s linear forwards;
    z-index: 98;
}

/* Keyframes for moving border */
@keyframes move-border {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Keyframes for alert fade-out */
@keyframes fade-out-alert {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Hover effect: solid background and pause animations */
.custom-alert:hover {
    animation-play-state: paused;
    opacity: 1 !important;
}

/* Resume fade-out and transparency after hover */
.custom-alert:hover::after {
    animation-play-state: paused;
    opacity: 1 !important;

}

/* Title inside the alert */
.custom-alert h4 {
    margin: 0 0 0.3125rem 0; /* 5px */
    font-size: 0.9375rem; /* 15px */
    font-weight: bold;
    color: var(--text-color, #000000);
    text-align: left;
}

/* Content inside the alert (icon, p tag, and button on the same line) */
.custom-alert .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.625rem; /* 10px */
}

/* Icon inside the alert for default theme */
body:not(.theme-default) .custom-alert .content .alert-icon {
    flex-shrink: 0;
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    color: var(--text-color);
}

/* Icon inside the alert for other themes */
body.theme-default .custom-alert .content .alert-icon {
    flex-shrink: 0;
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    color: var(--button-bg-color);
}


/* Paragraph inside the content */
.custom-alert .content p {
    margin: 0;
    font-size: 0.875rem; /* 14px */
    flex-grow: 1;
    color: var(--bot-message-text-color, #000000);
}

/* Button inside the content */
.custom-alert .content button {
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    background-color: var(--button-bg-color, #007bff);
    color: var(--button-text-color, #ffffff);
    border: none;
    border-radius: 5px; /* 5px */
    cursor: pointer;
    font-size: 0.875rem; /* 14px */
    flex-shrink: 0;
}

.custom-alert .content button:hover {
    background-color: var(--button-bg-hover-color, #0056b3); /* Hover effect */
}

/* Increase the size of the icon */
.custom-alert::part(icon) {
    font-size: 2.5rem;
    color: var(--calcite-brand);
}

/* Change the color of the duration bar */
.custom-alert::part(duration-bar) {
    background-color: var(--user-message-bg-color);
}
/*         End Previous Map Notifications      */
/*         End Previous Map Notifications      */
/*         End Previous Map Notifications      */


/* Scroll button that stays fixed inside chat-wrapper */
.scroll-button {
    position: absolute;
    bottom: 0.625rem; /* 10px */
    right: 50%;
    background-color: var(--button-bg-color);
    color: white;
    border: none;
    padding: 0.25rem; /* 4px */
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    display: none;
}

.scroll-button:hover {
    opacity: 1;
}

.scroll-button svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    fill: white;
    margin-bottom: -3px; /* -3px */
}


/* Chat Container Styling */
.chat-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative; /* Ensure the scroll button can be positioned relative to this */
    overflow: hidden; /* Ensure the content doesn't overflow */
    z-index: 1000;
}

/* Chat box should scroll within the available space */
.chat-box {
    position: relative;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 10px 0; /* 10px */
    background-color: var(--bg-color);
    scroll-behavior: smooth; /* This enables smooth scrolling */
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    z-index: 1000;
}








/* For WebKit-based browsers */
/* For WebKit-based browsers (Chrome, Safari, Edge, Opera) */
.chat-box::-webkit-scrollbar {
    width: 6px;       /* Adjust width as needed */
    height: 8px;      /* For horizontal scrollbar, if any */
  }
  
  .chat-box::-webkit-scrollbar-track {
    background: transparent; /* Or a subtle color if desired */
  }
  
  .chat-box::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3); /* Minimal, subtle thumb */
    border-radius: 4px;
    border: none;
  }
  
  /* For Firefox */
  .chat-box {
    scrollbar-width: thin; /* Options: auto, thin */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Thumb color and track color */
  }
  

  .chat-box::-webkit-scrollbar-button {
    display: none;
  }

  /* Dark theme scrollbar - lighter color for visibility */
  body.theme-dark .chat-box::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
  }

  body.theme-dark .chat-box {
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  }

  /* High contrast theme scrollbar - bright yellow for maximum visibility */
  body.theme-colorblind .chat-box::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 0, 0.7);
  }

  body.theme-colorblind .chat-box {
    scrollbar-color: rgba(255, 255, 0, 0.7) transparent;
  }








  .chat-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75px; /* Adjust the height as needed */
    background: linear-gradient(to bottom, var(--bg-color), rgba(255,255,255,0));
    pointer-events: none; /* Ensures overlay doesn't block clicks */
    z-index: 10; /* Make sure it's above the chat messages */
  }










/* Header Styling */
.header-container {
    background-color: var(--bg-color) !important;
}

.header-container-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0 10px; /* 10px */
    background-color: var(--bg-color) !important;

}

/* Session buttons container */
.session-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Theme Selector Styling */
.theme-selector-container {
    padding: 0.625rem 1.125rem 0.625rem 0.625rem; /* 10px 18px 10px 10px */
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    gap: 10px; /* 10px */
}

.theme-selector {
    padding: 8px; /* 8px */
    border-radius: 5px; /* 5px */
    /*border: 1px solid var(--text-color); /* 1px */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 11px; /* 11px */
    cursor: pointer;
}

.theme-selector:hover {
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
}


/* Position the button container at the top right of the chat container */
.button-container {
    top: 10px;    /* Adjust vertical position as needed */
    right: 10px;  /* Adjust horizontal position as needed */
    display: flex;
    flex-direction: column;  /* Stack buttons vertically */
    align-items: flex-end;     /* Align buttons to the right edge */
    gap: 10px;                 /* Space between buttons */
    padding: 10px;             /* Optional, for some inner spacing */
}

/* Pill button styling (you can adjust margins if needed) */
.pill-button {
    padding: 10px 20px; /* 10px 20px */
    background-color: var(--starting-question-color);
    color: var(--user-message-text-color);
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
    border: none;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

.pill-button:hover {
    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1); /* 4px 8px */
}


















.chat-input-container {
    position: relative; /* For absolute positioning of the button */
    padding: 10px;  /* 10px */
    background-color: var(--bg-color);
}

/* Accessibility: Ensure chat input is properly focusable */
.chat-input {
    width: 100%;
    height: 150px;             /* Fixed height */
    box-sizing: border-box;    /* Includes padding in dimensions */
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid #D7D7D7;
    border-radius: 24px;
    resize: vertical;
    line-height: 1.2;          /* Ensures normal line-height */
    vertical-align: top;
    font-family: 'Inter', sans-serif;
    font-weight: 400;  
    padding: 15px 0 0 15px; 
    font-size: 15px;
    resize: none;
}

/* Ensure the chat input container doesn't interfere with focus */
.chat-input-container {
    position: relative; /* For absolute positioning of the button */
    padding: 10px;  /* 10px */
    background-color: var(--bg-color);
    /* Ensure the container doesn't block focus */
    pointer-events: auto;
}

/* Position the Ask button in the bottom-right corner */
.chat-button {
    position: absolute;
    bottom: 15px; /* Adjust as needed */
    right: 15px;  /* Adjust as needed */
    width: 32px;
    height: 32px;
    background-color: var(--button-ask-color);
    border: none;
    border-radius: 50%;
    background-image: var(--ask-button-image);
    background-repeat: no-repeat;
    background-position: 60% center;
    background-size: 40%;
    cursor: pointer;
    
    /* Hide the text */
    color: transparent;
    text-indent: -9999px;
    padding: 0.625rem; /* 10px */
    cursor: pointer;
    /* Ensure button is above textarea but doesn't block it */
    z-index: 2;
}

/* Enhanced focus styles for chat input */
.chat-input:focus {
    outline: 2px solid #007AC2;
    outline-offset: 2px;
    border-color: #007AC2;
    box-shadow: 0 0 0 2px rgba(0, 122, 194, 0.2);
}

/* Theme-specific focus colors for chat input */
body.theme-dark .chat-input:focus {
    outline-color: #4CAF50;
    border-color: #4CAF50;
}

body.theme-colorblind .chat-input:focus {
    outline-color: #ffff00;
    border-color: #ffff00;
}

/* Style the placeholder to align at the top */
.chat-input::placeholder {
    text-align: left;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
    color: #8d8d8d;
    font-size: 15px;
    font-weight: 400;
}



.terms-statement p {
    color: #808080;
    font-size: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-align: center;
    margin: auto;
}







.new-session-button {
    padding: 12px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--bg-color);
}
.new-session-button:hover {
    background-color: var(--nav-button-bg-color);
}


/* Extra-menu button remains as is */
.extra-menu-button {
    cursor: pointer;
    padding: 13px 13px;
}

/* Additional Buttons Styling */
.additional-buttons-container {
    display: flex;
    gap: 0.625rem; /* 10px */
    padding: 0;
}

.additional-button {
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: var(--additional-button-bg-color);
    color: var(--additional-button-text-color);
    border: none;
    border-radius: 5px; /* 5px */
    cursor: pointer;
}

.additional-button:hover {
    background-color: var(--additional-button-bg-color);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px */
}

/* Message Styling */
.message {
    padding: 0.625rem; /* 10px */
    margin: 0.3125rem; /* 5px */
    border-radius: 5px; /* 5px */
    font-size: 0.9375rem; /* 15px */
    align-self: flex-start;
}

.user-message {
    background-color: var(--user-message-bg-color);
    border: 1px solid var(--user-message-border-color);
    color: var(--user-message-text-color);
    text-align: right;
    display: inline-block;
    align-self: flex-end;
}

/* Parent container with flex layout, aligning items at the top */
.message-content {
    display: flex;
    align-items: flex-start;
}

/* Icon wrapper: fixed size, circular with white background and border */
.icon-wrapper {
    background-color: white;
    border: 1px solid #D7D7D7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px; /* Adjust spacing as needed */
    width: 38px;   /* Adjust size as needed */
    height: 38px;  /* Adjust size as needed */
    flex-shrink: 0; /* Prevent the icon from shrinking */
}

/* Icon image styling */
.bot-icon {
    width: 24px;  /* Adjust as needed */
    height: auto;
}

/* Text container can grow as needed */
.bot-text {
    flex-grow: 1;
    white-space: pre-wrap; /* Preserve line breaks and wrap text */
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

/* Preserve URL integrity */
.bot-text a {
    overflow-wrap: normal;
    word-break: keep-all;
}



@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

























.followup-container {
    top: 10px;    /* Adjust vertical position as needed */
    right: 10px;  /* Adjust horizontal position as needed */
    display: flex;
    flex-direction: column;  /* Stack buttons vertically */
    align-items: flex-end;     /* Align buttons to the right edge */
    gap: 10px;                 /* Space between buttons */
    padding: 10px;
    opacity: 0; /* Start invisible */
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* This class will be added via JavaScript to trigger fade-in */
.followup-container.visible {
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.5s ease-out;
}

.followup-button {
    margin-bottom: 8px;
    cursor: pointer;
    text-align: left !important; /* Override global calcite-button center alignment */
    --calcite-button-text-align: left !important;
    --calcite-color-brand: var(--starting-question-color);
    --calcite-color-brand-hover: var(--starting-question-color);
    --calcite-color-brand-press: var(--starting-question-color);
    --calcite-color-text-1: var(--user-message-text-color);
    --calcite-color-text-inverse: var(--user-message-text-color);
    --calcite-button-corner-radius: 12px;
    white-space: normal !important;
}

/* Override calcite-button internal styling for left alignment and rounded corners */
.followup-button::part(button) {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    /* border-radius: 12px; */
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

/* Additional override for text content within button */
.followup-button::part(content) {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Override for the button's text wrapper */
.followup-button::part(text) {
    text-align: left !important;
}

.followup-button:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Adjust button width in widened chat mode */
.chat-container.widened .followup-button {
    width: 70% !important;
}

/* Adjust image wrapper width in widened chat mode */
.chat-container.widened .chat-image-wrapper {
    max-width: clamp(150px, 30%, 250px);
}

/* Fade out effect */
.followup-container.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.followup-container.hidden.display-none {
    display: none;
}



.button-container.hidden.display-none {
    display: none; /* Removes white space after fade-out */
}


/* Center the content for loading messages */
.loading-message {
    display: contents;
    justify-content: center;
  }
  
  /* Your existing loading container styles */
  .loading-container {
    padding: 5px 8px;
    background: var(--user-message-bg-color);
    border: 1px solid var(--loading-border-color);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: var(--user-message-text-color);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    box-shadow: 0 0 0 3px var(--loading-box-shadow-color);
    margin: 10px auto;
}

  




.dots-wrapper {
    display: flex;
}

/* Animate each dot to appear sequentially */
.dot {
    opacity: 0;
    animation: dotAnimation 1.5s infinite;
}

/* Stagger animation for each dot */
.dot:nth-child(1) {
    animation-delay: 0s;
}
.dot:nth-child(2) {
    animation-delay: 0.3s;
}
.dot:nth-child(3) {
    animation-delay: 0.6s;
}

/* Keyframes for dot animation: they fade in then stay visible */
@keyframes dotAnimation {
    0%, 20% { opacity: 0; }
    40% { opacity: 1; }
    100% { opacity: 1; }
}







.email-input {
    width: 70%;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0.5rem auto;
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  .send-email-button {
    width: 25%;
    padding: 0.5rem 1rem;
    background-color: #3275B8;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin: 0 auto;
  }
  
  .send-email-button:hover {
    background-color: #285a93;
  }
  






.esri-attribution {
    display: none !important;
}
.esri-attribution__sources {
    white-space: normal !important;
}



.resize-arrow {
    font-size: 1rem; /* 16px */
    color: var(--text-color)
}





/* Link Button Styling */
.link-button {
    display: inline-block;
    margin: 0.3125rem 0; /* 5px 0 */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 12px; /* 5px */
    cursor: pointer;
    text-align: center;
    margin-right: 10px;
}

.link-button:hover {
    background-color: var(--button-bg-color);
}

/* Logos */
#labelBox {
    background-color: #fff;
    border-radius: 50%;
    align-items: normal;
    display: contents;
    padding: 0.3125rem; /* 5px */
    padding-bottom: 0;
    border: 1px solid #e3e3e3; /* 1px */
}

.logoDivCity {
    box-shadow: none !important;
}

#HLLabel {
    border-radius: 5px; /* 5px */
    align-items: normal;
    display: inline-flex;
    padding: 10px; /* 10px */
    padding-bottom: 0;
    box-shadow: none !important;
}

.logoDivHL {
    box-shadow: none !important;
}

.logoDivHL img {
    width:  115px; /* 125px */
    margin-left: 25px;
}

.logoDivCity img {
    width: 175px; /* 50px */
}

.logoDivHL {
	box-shadow: none !important;
}

/* Banner */
.banner {
    background-color: var(--bot-message-bg-color);
    color: var(--bot-message-text-color);
    display: none;
}
.banner p {
    text-align: center;
}


.logo-container {
    width: 50%;
}

.logo-container img {
    width: 180px; /* Default width to prevent flash */
    max-width: 100%;
    height: auto;
}


/* Modal container (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
/* Modal content box */
.modal-content {
    background-color: var(--bg-color);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 4px;
}
/* Close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Calcite Dialog - ensure it appears on top of all elements */
#termsDialog {
    z-index: 100000000 !important;
}

calcite-dialog {
    z-index: 100000000 !important;
}

/* Terms Dialog Dark Mode Styling */
#termsDialog.calcite-mode-dark {
    --calcite-color-foreground-1: #2b2b2b;
    --calcite-color-foreground-2: #333333;
    --calcite-color-foreground-3: #3a3a3a;
    --calcite-color-background: #1a1a1a;
    --calcite-color-text-1: #ffffff;
    --calcite-color-text-2: #e0e0e0;
    --calcite-color-text-3: #c0c0c0;
    --calcite-color-border-1: #555555;
    --calcite-color-border-2: #666666;
    --calcite-color-brand: #4a8dd9;
    --calcite-color-brand-hover: #5a9de9;
    --calcite-color-brand-press: #3a7dc9;
}

/* Terms Dialog High Contrast/Colorblind Mode */
body.theme-colorblind #termsDialog.calcite-mode-dark {
    --calcite-color-foreground-1: #000000;
    --calcite-color-foreground-2: #1a1a1a;
    --calcite-color-foreground-3: #2a2a2a;
    --calcite-color-background: #000000;
    --calcite-color-text-1: #ffffff;
    --calcite-color-text-2: #ffffff;
    --calcite-color-text-3: #ffff00;
    --calcite-color-border-1: #ffff00;
    --calcite-color-border-2: #ffff00;
    --calcite-color-brand: #ffff00;
    --calcite-color-brand-hover: #ffff00;
    --calcite-color-brand-press: #ffff00;
}








.mobile-expand-button {
    display: none; /* Hidden on desktop by default */
}


/* Chat Image Styles */
.chat-image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
    max-width: 100%;
    box-sizing: border-box;
}

.chat-image-wrapper {
    max-width: clamp(150px, 45%, 250px); /* Responsive with min/max constraints */
    min-width: 150px;
    flex: 0 1 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    box-sizing: border-box;
}

.chat-image-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chat-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: contain;
}

/* Calcite Panel Styles */
calcite-panel {
    --calcite-ui-border-1: var(--calcite-ui-border-2);
    --calcite-ui-foreground-1: #ffffff;
    transition: all 0.2s ease;
    min-width: 200px !important;
    min-height: 150px !important;
}

calcite-panel img {
    padding: 4px;
    background: transparent;
}

/* Resize handle styling */
calcite-panel::-webkit-resizer {
    border-bottom-right-radius: 8px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}

/* Ensure smooth resizing */
calcite-panel {
    resize: both;
    overflow: hidden !important;
}

/* Ensure panel stays above map but below modal */
calcite-panel {
    z-index: 1000 !important;
}

/* Keep modal above panels */
.modal {
    z-index: 1001 !important;
}

/* Style the resize handle corner */
calcite-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, #ddd 50%);
    border-bottom-right-radius: 4px;
}

/* Lead Modal Styles */
#leadModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
}

.lead-modal {
    max-width: 500px;
    padding: 30px;
    background-color: var(--bg-color);
    border-radius: 8px;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 95dvh;
    width: 90%;
}

/* Remove any overflow properties from #leadModal */
#leadModal {
    overflow: initial;
}

#leadForm {
    margin-top: 20px;
}

.lead-modal h2 {
    color: var(--text-color);
    margin-bottom: 15px;
}

.lead-modal p {
    margin-bottom: 20px;
  color: var(--text-color);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-color);  font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 95%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.submit-btn {
    background-color: var(--button-ask-color);
    color: var(--lead-submit-text-color);
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.submit-btn:hover {
    background-color: var(--button-ask-color);
}



.learn-more-link {
    color: var(--text-color);
    text-decoration: underline;
}

.success-message {
    text-align: center;
    padding: 30px 20px;
}

.success-message h3 {
    color: #28a745;
    margin-bottom: 15px;
}

.success-message p {
    margin-bottom: 25px;
    color: #666;
}

.success-message .submit-btn {
    max-width: 200px;
    margin: 0 auto;
}

.learn-more-banner {
    color: #666;
    text-align: center;
    font-size: 14px;
    font-style: italic;
    text-decoration: underline;
    cursor: pointer;
}


@media only screen and (max-width: 1233px) {
    .additional-button {
        padding: 0.5rem 0.4375rem; /* 8px 7px */
    }
}

@media only screen and (max-width: 929px) {
    .additional-button {
        padding: 0.5rem 0.4375rem; /* 8px 7px */
    }
}

@media only screen and (max-width: 768px) {
    #layerlist-expand {
        max-height: 200px !important; /* Or another value that fits your design */
        overflow-y: auto !important;
        /* Optionally, adjust padding or margins to ensure the close button is visible */
      }
    .esri-basemap-gallery {
        width: 100% !important;
    }

    .esri-expand__sheet {
        overflow-y: auto !important;
    }

    .esri-ui calcite-flow, .esri-ui calcite-panel {
        height: 280px !important;
        overflow: visible;
    }

    body {
        border: none !important;
        padding: 0px 10px;
        height: auto;
    }
    .layout-container {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        width: 100%;
        position: relative;
    }

    .logo-container img {
        width: 30% !important;
        max-width: 100%;
        height: auto;
    }

    .header-container-logo {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001; /* Ensure it's above everything */
        background: white; /* Or your theme background color */
        padding: 10px 10px 0px 10px;
        border-bottom: 1px solid #eee;
        height: 5dvh;
    }

    .learn-more-banner {
        position: fixed;
        top: 6dvh; /* Adjust based on your header height */
        left: 0;
        right: 0;
        z-index: 5;
        background: #f0f0f0;
    }

    .rightDiv {
        width: 100%;
        order: 1;
        margin-top: 9dvh;
        height: 70dvh;
        
    }

    .chat-container {
        width: 100%;
        height: 25dvh;
        order: 2;
        position: relative;
    }

    .chat-container.expanded {
        height: 90dvh;

    }

    /* When chat is expanded, shrink the map */
    .chat-container.expanded ~ .rightDiv {
        height: 10dvh;
    }

    .chat-input {
        height: 43px;
        border-radius: 6px;
    }

    /* Mobile responsive image adjustments */
    .chat-image-container {
        gap: 5px;
    }

    .chat-image-wrapper {
        max-width: clamp(120px, 48%, 200px);
        min-width: 120px;
    }

    .source-urls-container calcite-button {
        width: 90% !important;
        max-width: 100% !important;
        min-width: 100px !important;
    }

    /* Mobile expand button */
    .mobile-expand-button {
        display: block;
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 125px; /* Visible width */
        height: 1px;  /* Visible height */
        border-radius: 20px;
        z-index: 1000;
        cursor: grab;
        border: none;
        padding: 2px;
    }
    
    /* Create an invisible hit area */
    .mobile-expand-button::before {
        content: "";
        position: absolute;
        top: -15px;
        bottom: -15px;
        left: -15px;
        right: -15px;
        background: transparent;
    }

    .drag-handle {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

    .drag-handle span {
        width: 80px;
        height: 2px;
        background-color: #999;
        border-radius: 1px;
    }


    .chat-wrapper {
        height: calc(100% - 60px); /* Adjust based on remaining space needed */
        overflow-y: auto;
    }

    .theme-default {
        height: 100% !important;
        overflow: hidden;
    }
    #chatToggleIcon{
        display: none;
    }
    .lead-modal {
        top: 38%;
    }
}

@media only screen and (max-width: 425px) {

    body {
        padding: 0px;
    }
    #dockButton {
        display: none;
    }
    .logo-container img {
        width: 50% !important;
        max-width: 100%;
        height: auto;
    }
    .chat-container {
        width: 100%;
    }
    .banner {
        display: block;
    }
    .additional-button {
        padding: 0.25rem 0.6875rem; /* 4px 11px */
    }
    .resize-handle {
        display: none;
    }
    .additional-button {
        font-size: 0.75rem; /* 12px */
    }
    .theme-label {
        font-size: 0.75rem; /* 12px */
    }
    .theme-selector {
        font-size: 0.5625rem; /* 9px */
    }
    .button-container {
        display: none;
    }
    .chat-button {
        bottom: 5px;
    }
    .chat-input-container{
        padding-bottom: 0;
    }
    #attributionModal div {
        position: relative;
        top: 30%;
    }
}

@media only screen and (max-width: 375px) {

}

@media only screen and (max-width: 320px) {
    .theme-label, .theme-selector {
        display: none;
    }
    .additional-button {
        padding: 0.5625rem 0.6875rem; /* 9px 11px */
    }
}
  
/* Styles for devices with no pointer or coarse pointer (likely mobile) */
@media (pointer: none), (pointer: coarse) {
    .button-container {
        display: none;
    }
    .theme-default {
        height: 80dvh;
    }
}

/* General media query for devices larger than 768px */
@media only screen and (min-width: 769px) and (max-width: 929px) {
    .additional-button {
        padding: 0.5rem 0.4375rem; /* 8px 7px */
    }
}

calcite-button {
    --calcite-color-text-1: #151515;
    --calcite-color-text-inverse: #ffffff;
    --calcite-color-brand: #3275B8;
    --calcite-color-brand-hover: #2862a3;
    --calcite-color-brand-press: #1f4d8a;
    /* text-align: center; */
    --calcite-color-border-1: #3275B8;
}

body.theme-dark calcite-button {
    --calcite-color-text-1: #ffffff;
    --calcite-color-text-inverse: #ffffff;
    --calcite-color-brand: #3275B81A;
    --calcite-color-brand-hover: #3275B81A;
    --calcite-color-brand-press: #3275B81A;
    --calcite-color-border-1: #4a8dd9;
}

body.theme-colorblind calcite-button {
    --calcite-color-text-1: #000000;
    --calcite-color-text-inverse: #000000;
    --calcite-color-brand: #ffff00;
    --calcite-color-brand-hover: #ffff00;
    --calcite-color-brand-press: #ffff00;   
    --calcite-color-border-1: #ffff00;
}
/* Somehow this works correctly, even though the color is invalid. Maybe that's why it works. */
body.theme-dark calcite-button.theme-selector-title {
    --calcite-color-brand: #a832b81;
    --calcite-color-brand-hover: #a832b81;
    --calcite-color-brand-press: #a832b81;
    --calcite-color-border-1: #a832b81;
}

body.theme-default calcite-button.theme-selector-title {
    --calcite-color-text-1: #151515;
    --calcite-color-text-inverse: #151515;
    --calcite-color-brand: #ffffff;
    --calcite-color-brand-hover: #ffffff;
    --calcite-color-brand-press: #ffffff;
    --calcite-color-border-1: #ffffff;
}

/* Fix source URL button widths to be responsive */
.source-urls-container calcite-button {
    width: 35% !important;
    max-width: 300px !important;
    min-width: 150px !important;
    white-space: normal !important;
    --calcite-color-brand: var(--starting-question-color);
    --calcite-color-brand-hover: var(--starting-question-color);
    --calcite-color-brand-press: var(--starting-question-color);
    --calcite-color-text-1: var(--user-message-text-color);
    --calcite-color-text-inverse: var(--user-message-text-color);
}

/* Tour widget theme support */
#simple-tour-tooltip {
    background: white;
    color: #1C1C1C;
    border: 2px solid #667eea;
}

#simple-tour-tooltip .tour-close-btn {
    color: #999;
}

#simple-tour-tooltip .tour-step-counter {
    color: #666;
}

#simple-tour-tooltip .tour-prev-btn {
    padding: 8px 16px;
    background: #f8f9fa;
    color: #1C1C1C;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

#simple-tour-tooltip .tour-next-btn {
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

#simple-tour-tooltip .tour-done-btn {
    padding: 8px 16px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

/* Dark theme tour styles */
body.theme-dark #simple-tour-tooltip {
    background: #2B2B2B;
    color: #ffffff;
    border: 2px solid #4CAF50;
}

body.theme-dark #simple-tour-tooltip .tour-close-btn {
    color: #cccccc;
}

body.theme-dark #simple-tour-tooltip .tour-step-counter {
    color: #aaaaaa;
}

body.theme-dark #simple-tour-tooltip .tour-prev-btn {
    background: #444444;
    color: #ffffff;
    border: 1px solid #666666;
}

body.theme-dark #simple-tour-tooltip .tour-next-btn {
    background: #4CAF50;
    color: #ffffff;
}

body.theme-dark #simple-tour-tooltip .tour-done-btn {
    background: #4CAF50;
    color: #ffffff;
}

body.theme-dark #simple-tour-tooltip h3 {
    color: #ffffff;
}

body.theme-dark #simple-tour-tooltip p {
    color: #e0e0e0;
}

/* Colorblind/High contrast theme tour styles */
body.theme-colorblind #simple-tour-tooltip {
    background: #000000;
    color: #ffffff;
    border: 3px solid #ffff00;
}

body.theme-colorblind #simple-tour-tooltip .tour-close-btn {
    color: #ffffff;
}

body.theme-colorblind #simple-tour-tooltip .tour-step-counter {
    color: #ffffff;
}

body.theme-colorblind #simple-tour-tooltip .tour-prev-btn {
    padding: 8px 16px;
    background: #333333;
    color: #ffffff;
    border: 2px solid #ffff00;
    border-radius: 5px;
    cursor: pointer;
}

body.theme-colorblind #simple-tour-tooltip .tour-next-btn {
    padding: 8px 16px;
    background: #ffff00;
    color: #000000;
    border: 2px solid #ffff00;
    border-radius: 5px;
    cursor: pointer;
}

body.theme-colorblind #simple-tour-tooltip .tour-done-btn {
    padding: 8px 16px;
    background: #ffff00;
    color: #000000;
    border: 2px solid #ffff00;
    border-radius: 5px;
    cursor: pointer;
}

body.theme-colorblind #simple-tour-tooltip h3 {
    color: #ffff00;
}

body.theme-colorblind #simple-tour-tooltip p {
    color: #ffffff;
}