/* Ensure html and body take full height */
html, body {
    height: 100%;
    background-color: var(--container-bg-color, #2b2929);
    font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    overflow: hidden;
}

/* Static Text Container Adjustments */
/* #staticTextContainer {
    position: absolute;
    top: 10px;                       
    left: 50%;
    transform: translateX(-50%);      
    z-index: 1000;                    
    width: 70%;                       
    max-width: calc(100% - 260px);     */
    /* 260px = sideMenu width (250px) + right spacing (10px) */
    /* transition: max-width 0.3s ease, left 0.3s ease; 
} */

/* Adjust #staticTextContainer when Side Menu is open */
/* #map_container.menu-open #staticTextContainer {
    max-width: calc(100% - 260px);    /* Adjust if side menu width changes */
    /* left: calc(50% - 125px);          /* Shift left by half side menu width */
/*} */ 


.leaflet-control-layers {
    background: url("/static/assets/your-layer-control-bg.png") no-repeat center center;
    background-size: cover;
    border: none;
    box-shadow: none;
  }
  
  /* Optionally, style the header if it exists */
  .leaflet-control-layers-expanded > label {
    color: white;
    font-weight: bold;
  }
  
/* Static text box styling */
/* #static_text_box {
    padding: 10px;
    background-color: rgba(51, 51, 51, 0.8);
    color: #ffffff;
    border: 2px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
} */


/* Adjust #container to accommodate side menu */
#map_container {
    display: flex;
    flex-direction: row; /* Stack content horizontally */
    height: 100vh;
    position: relative;
    width: 100vw;
    overflow: hidden;
/*     right: 15px */
}

/* Container for top buttons, including User Info */
#top-buttons {
    position: absolute;
    top: 5px;
    right: 10px;
    display: flex;
    align-items: center; /* Center items vertically */
    gap: 5px;
    z-index: 1002;
}


#login-status {
    color: #ffffff; /* White text color */
    background-color: rgba(43, 41, 41, 0.8); /* Same background as layer buttons */
    padding: 10px 15px; /* Padding for consistent styling */
    border-radius: 5px; /* Rounded corners like layer buttons */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    font-size: 16px; /* Font size to match */
    text-align: center; /* Center-align text */
    white-space: nowrap; /* Prevent text from wrapping */
    display: none; /* Initially hidden, can be toggled via JavaScript */
}

.top-button {
    color: #ffffff; /* Text color */
    background-color: #2b2929; /* Background color */
    padding: 5px 5px; /* Padding */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Base font size */
    transition: background-color 0.3s ease, transform 0.3s ease, width 0.3s ease; /* Smooth transitions */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    display: flex;
    align-items: center;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    width: auto; /* Initial width to show only the icon */
    height: 40px;
}

/* Animal Layers scrollable container */
.layer-buttons-container.animal-layers {
    max-height: 200px; /* Set a maximum height (adjust as needed) */
    overflow-y: auto;  /* Enable vertical scrolling */
    overflow-x: hidden; /* Keep horizontal overflow hidden */
  }

/* Text label inside the button */
.top-button .button-label {
    opacity: 1;
    margin-left: 0px;
    transition: opacity 0.3s ease, margin 0.3s ease;
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Hover Effect for Top Buttons */
.top-button:hover {
    background-color: #555555; /* Darker background on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Expanded State for Top Buttons */
.top-button.expanded {
    width: 200px; /* Width to accommodate icon and text */
}

/* Show Text When Button is Expanded */
.top-button.expanded .button-label {
    opacity: 1;
    margin-left: 10px; /* Space between icon and text */
}

.top-button.expanded img {
    margin-right: 10px; /* Add margin when expanded */
}

/* Specific styling for Slack button */
.slack-button {
    background-color: #ffffff; /* White background */
    color: #4A154B; /* Slack's brand color for any text */
    padding: 10px 15px; /* Same padding as other top buttons */
    height: 44px; /* Same height as other buttons */
}


/* Updated User Info Styling */
#user-info {
    color: #000000; /* Change text color to black */
    background-color: rgba(43, 41, 41, 0.8); /* Match layer button background */
    font-size: 16px; /* Slightly larger font for user info */
    padding: 10px 20px; /* Custom padding for user info */
    cursor: default; /* Remove pointer cursor since it's not clickable */
    pointer-events: none; /* Ensure it's not interactive */
    display: flex;
    align-items: center; /* Center content vertically */
    height: 42px; /* Adjust height if needed */
    border-radius: 5px; /* Optional: Rounded corners */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); /* Shadow for depth */
}

/* Remove hover effects and cursor pointer for User Info, since it’s not clickable */
#user-info {
    cursor: default;
    pointer-events: none; /* Ensure it's not interactive */
}

/* Specific styling for Menu Toggle Button */
#menuToggle {
    font-size: 14px; /* Larger font for the menu icon */
    padding: 8px 12px; /* Adjust padding */
    width: 50px;
}

/* Specific styling for Login Button */
#loginButton.expanded .button-label {
    font-size: 14px; /* Standard font size */
    padding: 8px 12px; /* Adjust padding */
    /* Optional: Add an icon or modify appearance if needed */
}

/* Hover effect for the button */
#menuToggle:hover {
    background-color: #555; /* Background color on hover */
}

/* Adjust #menuToggle position when Side Menu is open */
#map_container.menu-open #menuToggle {
    right: 50px; /* sideMenu width (250px) + right spacing (10px) */
}

/* Adjusted Layer Buttons Container */
.layer-buttons-container {
    position: absolute;
    top: 72.5px;
    right: 10px; /* Initial position when collapsed */
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 1000;
    width: 50px; /* Collapsed width */
    transition: width 0.3s ease, right 0.3s ease; /* Added transition for 'right' */
    overflow: visible;
    box-sizing: border-box; /* Ensure padding is included in width */
    overflow-x: hidden;
    height: 75%;
}

/* Base styles for the play/pause button */
#DateTimePlayPause {
    background: rgba(51, 51, 51, 0.8);
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    bottom: 62px;
    right: 175px;
    position: absolute;
    outline: none;
}

/* ---------- Play Icon ---------- */
/* When the button has the .play class, display a triangle */
#DateTimePlayPause.play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 16px;  /* Adjust these values for size */
    border-color: transparent transparent transparent white;  /* Change 'white' to your desired color */
}

/* ---------- Pause Icon ---------- */
/* When the button has the .pause class, display two vertical bars */
#DateTimePlayPause.pause::before,
#DateTimePlayPause.pause::after {
    content: "";
    position: absolute;
    top: 25%;
    width: 6px;
    height: 50%;
    background-color: white;  /* Change 'white' to your desired color */
}

/* Position the two bars */
#DateTimePlayPause.pause::before {
    left: 30%;
}

#DateTimePlayPause.pause::after {
    right: 30%;
}

.layer-buttons-container.expanded {
    width: 200px; /* Match side menu width */
    right: 15px; /* Align with side menu's position */
    padding: 0; /* Remove padding to prevent width inconsistencies */
    transition: width 0.3s ease, right 0.3s ease;
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Adjust Layer Buttons */
.layer-button {
    display: flex;
    align-items: center;
    background-color: rgba(43, 41, 41, 0.8);
    color: #ffffff;
    border: none;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease, padding 0.3s ease;
    cursor: pointer;
    padding: 5px 15px; /* Adjust padding for better alignment */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    width: 100%; /* Take full width of the container */
    box-sizing: border-box; /* Ensure padding fits within the width */
    white-space: nowrap;
    overflow: hidden;
    margin: 3px;
}

/* Container for the hamburger icon */
.hamburger {
    display: inline-block;
    width: 30px;    /* Adjust width as needed */
    height: 30px;   /* Total height for the three lines */
    position: relative;
}

/* Style each line */
.hamburger span {
    display: block;
    position: absolute;
    height: 2px;           /* Thickness of the line */
    width: 100%;
    background-color: #ffffff;  /* Color of the lines */
    border-radius: 2px;    /* Optional: rounds the corners */
    transition: background-color 0.3s ease;
}

/* Position the three lines */
.hamburger span:nth-child(1) {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 9px;    /* Adjust spacing between lines as needed */
}

.hamburger span:nth-child(3) {
    top: 18px;
}

/* Adjust Icon Position */
.layer-button img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Text label inside the button */
.layer-button span {
    opacity: 0;
    transition: opacity 0.3s ease, margin-left 0.3s ease;
    margin-left: 0;
}

/* Show text when container is expanded */
.layer-buttons-container.expanded .layer-button span {
    opacity: 1;
    margin-left: 10px; /* Space between icon and text */
}

/* Hover effect for layer buttons */
.layer-button:hover {
    background-color: rgba(85, 85, 85, 0.8);
    transform: translateY(-2px);
}
/* Active button style */
.layer-button.active {
    background-color: orange; /* Darker translucent background */
    color: rgb(0, 0, 0);
}

/* General Button Hover Effect */
button:hover {
    opacity: 0.8;
}

/* Style for selected button */
button.selected {
    background-color: #5d5223; /* Darker background for selected state */
    color: rgb(0, 0, 0);
}

.layer-dropdown.active .dropdown-content {
    display: block;
    max-height: 500px; /* Adjust as needed */
    transition: max-height 0.5s ease-in;
}

/* Dropdown button */
.dropbtn {
    background-color: rgb(210, 154, 66); /* Green background */
    color: white; /* White text */
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

/* Style for the dropdown container */
.dropdown {
    position: relative; /* Ensure the dropdown is positioned relative to the button */
    display: inline-block; /* Keeps dropdown content aligned to the button */
}

/* Style the dropdown button */
.dropdown-toggle {
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

/* Dropdown content styling */
.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute; /* Position dropdown content absolutely */
    top: 100%; /* Position it directly below the button */
    left: 0; /* Align it to the left edge of the button */
    background-color: #ffffff;
    border: 1px solid #ccc;
    color: #000000;
    border-radius: 5px;
    z-index: 1000; /* Ensure it appears above other elements */
    width: 100%; /* Match the button width */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
    padding: 10px;
}

/* Show dropdown content when dropdown is active */
.dropdown.show .dropdown-content {
    display: block;
}

/* Optional: Add hover effect for the dropdown button */
.dropdown-toggle:hover {
    background-color: #e0e0e0;
}

/* Layer label styling */
.layer-label {
    display: block;
    margin-bottom: 8px;
}

/* Container for the map */
#map {
    position: relative; /* Added position relative */
    background-color: var(--background-color, #252424); /* Adjustable map background */
    z-index:0;
    flex-grow: 1;
    touch-action: pan-x pan-y;
    touch-action: none;   /* Prevent page-level gestures */
    -ms-touch-action: none;
    /* Ensure the container receives all pointer events */
    pointer-events: auto;
}

#sideMenu {
    width: 0;
    overflow-x: hidden;
    transition: width 0.3s ease;
    background-color: #2b2929;
    color: #ffffff;
    z-index: 1001;
}

#sideMenu.open {
    width: 250px; /* Adjust as needed */
}

/* Style the menu content */
#sideMenu h2 {
    color: #ffffff;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #444;
}

#sideMenu .layer-label {
    display: block;
    margin: 10px;
}

#sideMenu .layer-label input {
    margin-right: 8px;
}

/* Layer toggle box styles */
.layer-toggle-box {
    position: absolute; /* Absolute positioning */
    top: 80px; /* Adjust as needed */
    right: 50px; /* Adjust as needed */
    background-color: #2b2929; /* Slightly increased opacity for better visibility */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Inner padding */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    z-index: 1000; /* Increased z-index for visibility over map tiles */
}

/* Menu content styles */
.layer-label {
    display: block; /* Stack labels vertically */
    color: #ffffff; /* Text color for labels */
}

/* Date-Time Slider Container Styling */
#date-time-slider-container {
    position: fixed; /* Fixes the slider relative to the viewport */
    bottom: 20px; /* Positions it 20px above the bottom */
    left: 56%; /* Centers it horizontally */
    transform: translateX(-50%); /* Adjusts centering */
    width: 85%; /* Takes up 90% of the viewport width */
    background: rgba(43, 41, 41, 0.8); /* Semi-transparent background for better visibility */
    padding: 10px; /* Inner spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
    z-index: 1000; /* Ensures it overlays the map */
    display: flex; /* Enables flex layout for child elements */
    align-items: center; /* Vertically centers the slider */
    justify-content: center; /* Horizontally centers the slider */
    transition: opacity 0.3s ease, bottom 0.3s ease; /* Smooth transitions */
    opacity: 1; /* Fully visible by default */
}

/* Styling for the range slider */
#date-time-slider-container .slider {
    width: 100%; /* Slider takes up full width of its container */
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    background: #000; /* Slider track color */
    outline: none;
    opacity: 1;
    transition: opacity .2s;
    border-radius: 4px; /* Rounded slider track */
    margin: 0; /* Removes default margins */
}

/* Slider Thumb Styling */
#date-time-slider-container .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: orange;
    cursor: pointer;
    border-radius: 50%; /* Circular thumb */
    border: none;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

#date-time-slider-container .slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: rgb(210, 154, 66);
    cursor: pointer;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Day-Time Selection Styling */
#day-time-selection {
    position: fixed; /* Fixes the position relative to the viewport */
    bottom: 60px; /* Positions it 60px above the bottom (slider height + spacing) */
    right: 10px; /* Centers it horizontally */
    background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent background */
    color: #ffffff; /* White text color */
    padding: 10px 20px; /* Inner spacing */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
    z-index: 1000; /* Ensures it appears above the map and slider */
    font-size: 16px; /* Readable font size */
    text-align: center; /* Centers the text */
    width: 125px;
    transition: bottom 0.3s ease, opacity 0.3s ease; /* Smooth transitions */
    opacity: 1; /* Fully visible by default */
}

/* Optional: Slightly fade the text when the side menu is open */
#map_container.menu-open #day-time-selection {
    opacity: 0.9; /* Slightly transparent */
}

/* Close Button Styling */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Hover effect for Add Observation Button */
.add-observation-button:hover {
    background-color: #d29a42;
}

/* Active state for Add Observation Button */
.add-observation-button.active {
    background-color: #d29a42; /* Darker green when active */
}

/* Login Button Styling */
.login-button {
    width: 30%;
    padding: 10px;
    margin: 10px 0; /* Space above and below the button */
    background-color: #d29a42; /* Green background */
    color: white; /* White text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow for visibility */
}

/* Hover effect for Login Button */
.login-button:hover {
    background-color: #d29a42;
}

/* Active state for Login Button */
.login-button.active {
    background-color: #d29a42; /* Darker green when active */
}

/* Style for the Sign-Up link within the Login modal */
.sign-up-link {
    color: rgb(210, 154, 66); /* Match dropdown button color */
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.sign-up-link:hover {
    color: #d29a42; /* Slightly darker on hover */
    text-decoration: underline;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1004; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(43, 41, 41, 0.8); /* Semi-transparent black */
}

.modal-content {
    background-color:  #2b2929; /* White background */
    color: #ffffff;
    margin: 10% auto; /* Center vertically and horizontally */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow for depth */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}

label {
    display: block;
    margin-top: 10px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
}

button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

button:hover {
    background-color: #2980b9;
}

p {
    margin-top: 10px;
}

a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#resetPasswordMessage,
#setNewPasswordMessage {
    margin-bottom: 10px;
    font-weight: bold;
}

.popup-content {
    font-family: Arial, sans-serif;
}

/* Custom Leaflet Popup Styles */

/* Main popup container */
.leaflet-popup {
    z-index: 1500; /* Ensure it's above other elements */
    transition: opacity 0.3s ease;
}

.leaflet-popup-content-wrapper {
    background-color: rgba(51, 51, 51, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
}

.leaflet-popup-tip {
    background-color: rgba(51, 51, 51, 0.95);
}

.leaflet-popup-content {
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

/* Styling buttons inside popups */
.leaflet-popup-content button {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.leaflet-popup-content button:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* Ensure buttons are spaced properly */
.popup-content button {
    margin-right: 5px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .leaflet-popup-content {
        font-size: 12px;
    }

    .leaflet-popup-content button {
        padding: 4px 8px;
        font-size: 12px;
    }
}

/* Apply grayscale filter to elements with the 'grayscale-topo' class */
.leaflet-layer .leaflet-tile-container .grayscale-topo .leaflet-tile{
    -webkit-filter: grayscale(100%); /* For Safari and older browsers */
    filter: grayscale(100%);
}

/* ---------------------- Custom Leaflet Control Styles ---------------------- */

/* Update background color to match layer buttons */
.custom-control,
.custom-control-button {
    background-color: rgba(43, 41, 41, 0.8);
}

/* Container for custom controls */
.custom-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 5px; /* Space between buttons */
    background-color: #2b2929; /* Match your side menu background */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, none ease;
}

/* Style for the button images */
.custom-control-button img {
    width: 30px;
    height: 30px;
    transition: none;
}

/* Hover effect for custom controls */
.custom-control:hover {
    background-color: #555555; /* Slightly lighter on hover */
    transform: none; /* Slight lift on hover */
}

/* Active state styling */
.custom-control-button.active {
    background-color: #555555; /* Example active color */
}

.custom-control-button.active img {
    transform: none; /* Example: rotate icon when active */
}

/* Optional: Tooltip styling */
.leaflet-control.custom-control .custom-control-button {
    position: relative;
}

.leaflet-control.custom-control .custom-control-button::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: 120%; /* Position above the button */
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0px 0px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    font-size: 12px;
}

/* Show tooltip on hover */
.leaflet-control.custom-control .custom-control-button:hover::after {
    opacity: 1;
}

/* Adjust z-index to ensure controls are clickable */
.leaflet-top.leaflet-left {
    z-index: 1000; /* Adjust as needed */
}


/* Style for the legend container */
.custom-legend {
    position: fixed; /* Add this line */
    background: rgba(51, 51, 51, 0.8);
    font-size: 11px;
    left: 192px;
    bottom: 60px;
    padding: 0px;
    border-radius: 5px;
    max-height: 40px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px;
    color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

/* Style for legend items */
.legend-item {
    display: flex;
    align-items: center;
    margin-right: 0px; /* Spacing between items */
}

.legend-item i {
    width: 30px;
    height: 30px;
    margin-right: 0px;
}

/* Legend layer wrapper */
.legend-layer-wrapper {
    display: flex;
    flex-direction: column; /* Stack header and items vertically */
    margin-bottom: 20px;
}

/* Header styling */
.legend-layer-header {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px; /* Space below the header */
    text-align: left;
}

/* Legend items container */
.legend-layer-wrapper .legend-items-container {
    display: flex;
    flex-wrap: wrap; /* Wrap items horizontally */
    gap: 10px; /* Space between items */
}

.legend-item .legend-label {
    font-size: 12px;
}

/* Container positioning */
.leaflet-control.add-observation-control,
.leaflet-control.draw-polygon-control {
    display: flex;
    align-items: center;
    position: relative;
}

/* Main buttons */
.add-observation-button,
.draw-polygon-button {
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    width: 20px; /* Set width to 10px */
    height: 20px; /* Set height to 10px */
    padding: 0; /* Remove padding */
    margin: 1px; /* Adjust margin as needed */
    background-color: #4CAF50; /* Green background */
    color: white; /* White text or icon */
    border: none; /* Remove border */
    border-radius: 0%; /* Make it circular for better aesthetics */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 8px; /* Reduce font size to fit the button */
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow for visibility */
    overflow: hidden; /* Hide any overflow */
}


.add-observation-button.active,
.draw-polygon-button.active {
    background-color: #e0e0e0; /* Highlight active button */
}

/* Cancel buttons */
.cancel-observation-button,
.cancel-drawing-button {
    display: none; /* Hidden by default */
    width: 10px;
    height: 10px;
    text-align: center;
    line-height: 10px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.cancel-observation-button:hover,
.cancel-drawing-button:hover {
    background-color: #f0f0f0; /* Hover effect */
}

/* Show the submenu when the parent control is active */
.leaflet-control.add-observation-control.active .add-observation-submenu,
.leaflet-control.draw-polygon-control.active .draw-polygon-submenu {
    display: block;
}

/* Style the DOC Hunting layer button with a white background */
.layer-button[data-layer-id="DOC_hunting"] {
    background-color: rgba(43, 41, 41, 0.8); /* White background */
    color: #ffffff; /* Black text for contrast */
    /* Optional: Add a border if desired */
}

/* Adjust hover effects for the DOC Hunting button */
.layer-button[data-layer-id="DOC_hunting"]:hover {
    background-color: rgba(43, 41, 41, 0.8); /* Light grey on hover */
    transform: translateY(-2px); /* Slight lift on hover */
    /* Optional: Change text color or add other hover effects */
    color: #ffffff;
}

/* Ensure the active state is visible */
.layer-button[data-layer-id="DOC_hunting"].active {
    background-color: orange; /* Darker grey when active */
    color: #f7f7f7;
    /* Optional: Adjust border color when active */
}

/* Specific styling for the Login button within the Login Modal without adding a class */
#loginModal .modal-content #loginForm button[type="submit"] {
    background-color: orange; /* Orange background */
    color: rgb(0, 0, 0); /* White text */
    padding: 10px 20px;
    font-size: 16px;
    border: none; /* Ensure no border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#loginModal .modal-content #loginForm button[type="submit"]:hover {
    background-color: #ff8c00; /* Darker orange on hover */
    transform: scale(1.05); /* Slightly enlarge on hover for feedback */
}

/* Specific styling for the Sign Up button within the Sign Up Modal without adding a class */
#signupModal .modal-content #signupForm button[type="submit"] {
    background-color: orange; /* Orange background */
    color: rgb(0, 0, 0); /* White text */
    padding: 10px 20px;
    font-size: 16px;
    border: none; /* Ensure no border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#signupModal .modal-content #signupForm button[type="submit"]:hover {
    background-color: #ff8c00; /* Darker orange on hover */
    transform: scale(1.05); /* Slightly enlarge on hover for feedback */
}

/* Apply grayscale filter to topo-layer when the map has the 'grayscale' class */
#map.grayscale .topo-layer img {
    filter: grayscale(100%);
    transition: filter 0.3s ease; /* Optional: Smooth transition */
}

body, html {
    height: 100%;
    margin: 0;
}
#map {
    height: 100%;
    width: 100%;
}
#weather-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 300px; /* Adjust this value as needed */
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
    overflow-y: auto;
    padding: 10px;
    display: none; /* Hidden by default */
    z-index: 1000;
}

#weather-bar.active {
    display: block;
}
.weather-item {
    margin-bottom: 10px;
}
/* Weather Grid Container */
#weather-grid {
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    overflow-x: auto; /* Allow horizontal scrolling if content overflows */
}

/* Weather Cells */
.weather-cell {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    min-width: 80px; /* Ensure cells have a minimum width */
}

/* Header Cells */
.weather-header {
    background-color: #f0f0f0;
    font-weight: bold;
}

/* Day Columns */
.day-column {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(80px, 1fr);
}

/* Time Container */
.time-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(80px, 1fr);
}

/* Data Container */
.data-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(80px, 1fr);
}
/* Loading indicator styles */
#loading {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: none; /* Hidden by default */
    z-index: 1001;
}

/* In your CSS file */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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

/* Settings Panel Styles */
#settingsPanel {
    position: absolute;
    top: 145px;
    left: 50px;
    width: 175px;
    background: rgba(43, 41, 41, 0.8);
    color: white;
    padding: 10px;
    z-index: 1000;
    display: none;
    border-radius: 8px; /* Add rounding to the corners */
}

#settingsPanel h3 {
    margin-top: 0;
}

#settingsPanel label {
    display: block;
    margin-bottom: 5px;
}

#settingsPanel input[type="checkbox"] {
    margin-right: 5px;
}

/* Manage Subscription Button Styles */
.settings-button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #ff8c00; /* Green background */
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
}

/* Divider Styles */
.layer-buttons-container .divider {
    height: 2px; /* Thin line */
    background-color: orange; /* Orange color */
    margin: 1px 0; /* Vertical spacing */
    opacity: 1; /* Slight transparency */
}

.layer-button.locked {
    position: relative;
    opacity: 0.5; /* Dim the button to indicate it's locked */
    cursor: not-allowed;
}

.layer-button.locked::after {
    content: url('/static/assets/lock-icon.png'); /* Path to your lock icon */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

#notification-container {
    position: fixed;
    top: 20px;
    right: 80px;
    z-index: 1000;
}

.notification {
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 60%;
}

.notification.success {
    background-color: #4CAF50; /* Green */
}

.notification.error {
    background-color: #F44336; /* Red */
}

.notification.info {
    background-color: #2196F3; /* Blue */
}

/* Subscribe Button Base Styles */
#subscribeButton {
    background-color: orange; /* Green background */
    color: #ffffff; /* White text */
    padding: 12px 24px; /* Top-bottom and left-right padding */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: inline-block; /* Inline-block for proper alignment */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline if any */
}

/* Pricing Section Styles */
.pricing-section {
    margin-top: 30px;
    margin-bottom:30px;
    text-align: center;
    font-size: 20px;
    color: orange;
    font-weight: bold;
}

#huntForm label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
  }
  
  #huntForm input,
  #huntForm select,
  #huntForm textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
  }
  
  #huntForm button {
    margin-top: 20px;
    padding: 12px 25px;
    background-color: orange; /* Green */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
  }
  
  #huntForm button:hover {
    background-color: orange;
  }
  
 /* Hide the default checkbox */
.toggle-box input[type="checkbox"] {
    display: none;
}

/* Toggle Boxes Container Styling */
.toggle-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Adjust min-width as needed */
    gap: 10px; /* Space between buttons */
    margin-top: 10px; /* Optional: Space above the container */
}

/* Style the span to look like a button */
.toggle-box span {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    border: 2px solid rgb(255, 255, 255); /* Green border */
    background-color: #f0f0f0;
    border-radius: 20px;
    cursor: pointer;
    width: 60px;
    transition: background-color 0.3s, color 0.3s;
    color: rgb(0, 0, 0); /* Green text */
    user-select: none; /* Prevent text selection */
}

/* Style when checkbox is checked */
.toggle-box input[type="checkbox"]:checked + span {
    background-color: orange;
    color: white;
    border-color: orange;
}

/* Optional: Hover effect for better UX */
.toggle-box span:hover {
    background-color: #f0f0f0;
}
  
  /* Slider Container */
  .slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
  }
  
  .slider-container input[type="range"] {
    flex-grow: 1;
  }
  
  .slider-container span {
    min-width: 150px;
    text-align: center;
    font-weight: bold;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 600px) {
    .slider-container span {
      min-width: 100px;
      font-size: 14px;
    }
  
    #huntForm button {
      width: 100%;
    }
  }

  /* Confirmation Modal Styles */
#confirmationModal .modal-content {
    background-color: #2b2929; /* Match existing modal background */
    color: #ffffff; /* White text */
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    margin: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#confirmationModal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#confirmationModal .close:hover,
#confirmationModal .close:focus {
    color: white;
    text-decoration: none;
}

#wildvisionPremiumInfo {
    margin-top: 20px;
    padding: 20px;
    background-color: #2b2929; /* Match your existing modal or page background */
    color: #ffffff; /* White text */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#wildvisionPremiumInfo h3 {
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center;
    color: orange; /* Optional: Add accent color for the heading */
}

#wildvisionPremiumInfo img {
    display: block;
    margin: 0 auto 20px auto; /* Center the image and add spacing below */
    max-width: 100%; /* Ensure image is responsive */
    border-radius: 8px; /* Optional: Add rounded corners to the image */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

#wildvisionPremiumInfo ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

#wildvisionPremiumInfo ul li {
    margin-bottom: 15px; /* Add spacing between list items */
    line-height: 1.5; /* Improve readability */
}

#wildvisionPremiumInfo ul li strong {
    display: block;
    font-size: 16px; /* Make headings more prominent */
    margin-bottom: 5px; /* Space below each heading */
    color: #ffcc00; /* Optional: Accent color for headings */
}

/* Overlay covering the entire viewport */
.walkthrough-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    z-index: 2000; /* Ensure it's above other elements */
    display: none; /* Hidden by default */
}

/* ---------------------- Walkthrough Tooltip ---------------------- */

.walkthrough-tooltip {
    position: absolute;
    max-width: 400px;
    background-color: #2b2929; /* Match your modal background */
    color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 2001; /* Above the overlay */
    display: none; /* Hidden by default */
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: scale(0.95);
}

/* Tooltip Content */
.tooltip-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Tooltip Text */
#walkthrough-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 5px;
}

/* Tooltip Navigation Buttons */
.tooltip-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

/* Navigation Buttons Styling */
.walkthrough-button {
    background-color: orange; /* Consistent with existing button styles */
    color: #ffffff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.walkthrough-button:hover {
    background-color: #ff8c00; /* Darker orange on hover */
    transform: scale(1.05);
}

.walkthrough-button:disabled {
    background-color: #cccccc; /* Grey background for disabled state */
    cursor: not-allowed;
}

/* Tooltip Arrow */
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Arrow pointing upwards */
.tooltip-arrow.bottom {
    top: 100%;
    left: 20%;
    border-width: 10px 10px 0 10px;
    border-color: rgba(43, 41, 41, 0.8) transparent transparent transparent;
}

/* Arrow pointing downwards */
.tooltip-arrow.top {
    bottom: 100%;
    left: 20%;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent rgba(43, 41, 41, 0.8) transparent;
}

/* ---------------------- Highlighting Target Element ---------------------- */

/* Highlight overlay for the target element */
.walkthrough-highlight {
    position: absolute;
    border: 3px solid orange; /* Highlight border color */
    border-radius: 6px;
    box-sizing: border-box;
    z-index: 2002; /* Above the tooltip */
    pointer-events: none; /* Allows clicks to pass through */
    transition: all 0.3s ease;
}

/* ---------------------- Responsive Design ---------------------- */

@media (max-width: 600px) {
    .walkthrough-tooltip {
        max-width: 90%;
        padding: 10px;
    }
    
    .walkthrough-button {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    #walkthrough-text {
        font-size: 14px;
    }
}

/* Walkthrough Overlay */
.introjs-overlay {
    background: rgba(43, 41, 41, 0.8); /* Semi-transparent dark background */
    z-index: 2000; /* Above other elements */
}

/* Increase top padding to accommodate the Skip button */
.introjs-tooltip {
    padding: 15px 15px 15px 15px; /* Top, Right, Bottom, Left */
    background-color: #2b2929; /* Match modal background */
    color: #ffffff; /* White text */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Similar shadow to modals */
    font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Consistent font */
    max-width: 400px; /* Adjust as needed */
    transition: all 0.3s ease; /* Smooth transitions */
}

/* Tooltip Header */
.introjs-tooltipheader {
    background-color: #2b2929;
    color: #ffffff;
    border-bottom: 1px solid #444;
    border-radius: 5px 5px 0 0;
    padding: 5px 10px 10px 10px;
    font-size: 18px;
    font-weight: bold;
}

/* Tooltip Body */
.introjs-tooltiptext {
    margin-top: 10px; /* Adjust as needed */
    font-size: 14px;
    line-height: 1.5;
}

/* Reposition the Skip button to the top-right corner */
.introjs-skipbutton {
    position: absolute;
    top: 10px; /* Distance from the top of the tooltip */
    right: 10px; /* Distance from the right edge of the tooltip */
    z-index: 1001; /* Ensure it stays above other elements */
    background-color: transparent; /* Make background transparent or match your design */
    color: #ffffff; /* Set text color to white or as per your design */
    border: none; /* Remove any default borders */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-size: 14px; /* Adjust font size as needed */
    padding: 0; /* Remove default padding */
}

/* Walkthrough Navigation Buttons */
.introjs-button,
.introjs-prevbutton,
.introjs-nextbutton {
    background-color: orange; /* Match modal button color */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 4px; /* Rounded corners */
    padding: 8px 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    margin: 5px;
}

.introjs-button:hover,
.introjs-skipbutton:hover,
.introjs-prevbutton:hover,
.introjs-nextbutton:hover {
    background-color: #ff8c00; /* Darker orange on hover */
}

/* Highlighted Element */
.introjs-highlighted {
    border: 2px solid orange; /* Highlight border color */
    box-shadow: 0 0 10px orange; /* Highlight shadow */
    z-index: 2100; /* Above the overlay */
}

/* Tooltip Arrow */
.introjs-tooltip .introjs-arrow {
    top: -10px; /* Move the arrow upwards */
    border-top-color: #2b2929; /* Match tooltip background */
    box-shadow: none; /* Remove default shadow */
}

.introjs-tooltip .introjs-arrow::after {
    border-top-color: #2b2929; /* Ensure the arrow matches the tooltip */
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .introjs-tooltip {
        width: 90%;
        max-width: none;
        padding: 10px;
    }

    .introjs-button,
    .introjs-skipbutton,
    .introjs-prevbutton,
    .introjs-nextbutton {
        padding: 6px 12px;
        font-size: 12px;
    }

    .introjs-tooltipheader {
        font-size: 16px;
    }

    .introjs-tooltiptext {
        font-size: 13px;
    }
}

/* Ensure consistent font across all walkthrough elements */
.introjs-tooltip,
.introjs-tooltipheader,
.introjs-tooltiptext,
.introjs-button,
.introjs-skipbutton,
.introjs-prevbutton,
.introjs-nextbutton {
    font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.tour-step {
    text-align: center;
}

.tour-step img {
    margin-bottom: 5px;
    border-radius: 8px;
}

/* -------------------- Updated Opacity Slider Container -------------------- */
/* 2. Opacity Slider Container and Elements */
.per-layer-opacity-container,
.per-layer-opacity-container * {
    font-family: inherit; /* Ensures inheritance from body */
}

.per-layer-opacity-container {
    position: fixed;
    bottom: 20px;
    left: 100px;
    transform: translateX(-50%);
    background: rgba(43, 41, 41, 0.8);
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    flex-direction: row; /* Horizontal stacking */
    align-items: center; /* Align items vertically center */
    justify-content: center; /* Center the sliders within the container */
    gap: 20px; /* Space between sliders */
    transition: opacity 0.3s ease, bottom 0.3s ease;
    opacity: 1;
    max-width: 290px; /* Allow up to 90% of viewport width */
    overflow-x: auto; /* Enable horizontal scrolling if necessary */
}

.layer-opacity {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
}

.layer-opacity h4 {
    margin: 0 0 5px 0; /* Remove top margin and set bottom margin */
    font-size: 12px;
    text-align: center;
    color: #fff;
    width: 100%; /* Ensure the heading spans the full width */
}

.layer-opacity input[type="range"].slider {
    width: 100%; /* Full width of the parent container */
    -webkit-appearance: none; /* Remove default styling */
    height: 6px;
    border-radius: 3px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* Slider Thumb */
.layer-opacity input[type="range"].slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: orange;
    cursor: pointer;
    border: 2px solid #fff;
    transition: background 0.3s ease;
}

.layer-opacity input[type="range"].slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: orange;
    cursor: pointer;
    border: 2px solid #fff;
    transition: background 0.3s ease;
}

/* Hover Effects */
.layer-opacity input[type="range"].slider:hover {
    opacity: 1;
}

.layer-opacity input[type="range"].slider::-webkit-slider-thumb:hover {
    background: #ff8c00;
}

.layer-opacity input[type="range"].slider::-moz-range-thumb:hover {
    background: #ff8c00;
}




/* -------------------- Weather & Animal Behavior Container -------------------- */

.weather-behavior-container {
    width: 100%;
    background-color: rgba(51, 51, 51, 0.95); /* Semi-transparent dark background */
    color: #ffffff;
    bottom: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    transition: all 0.3s ease-in-out;
    /* Optional: Add a shadow for depth */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.weather-behavior-container .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 1.5em;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.animal-behavior-display {
    text-align: center;
    margin-bottom: 20px;
}

.animal-behavior-display h3 {
    margin-bottom: 10px;
}

.animal-behavior-display .behavior-value {
    font-size: 2em;
    font-weight: bold;
}

/* Forecast Timeline */
.forecast-timeline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    overflow-x: auto; /* Enable horizontal scrolling on small screens */
}

.forecast-timeline .forecast-day {
    flex: 1 0 20%; /* Each day takes up 20% of the container */
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s;
}

.forecast-timeline .forecast-day:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.forecast-timeline .forecast-day.active {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Forecast List */
.forecast-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Individual Forecast Item */
.daily-forecast {
    background-color: rgba(85, 85, 85, 0.8);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.daily-forecast h4.forecast-date {
    margin-bottom: 10px;
    font-size: 1.2em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.daily-forecast p {
    margin: 5px 0;
    font-size: 1em;
}

/* Responsive Design: Adjustments for smaller screens */
@media (max-width: 768px) {
    /* Adjust top-buttons */
    #top-buttons {
        top: 0px;
        right: 10px;
        gap: 5px;
    }

    /* Adjust top-button sizes */
    .top-button {
        padding: 8px 12px;
        font-size: 14px;
        height: 40px;
    }

    /* Adjust Slack button similarly */
    .slack-button {
        padding: 8px 12px;
        font-size: 14px;
        height: 40px;
    }

    /* Adjust Menu Toggle Button */
    #menuToggle {
        font-size: 12px;
        padding: 6px 10px; /* Reduce padding */
        top: 10px;
        width: 50px;
        display: inline-block; /* Ensures width is respected */
    }

    /* Adjust Login Button */
    #loginButton {
        font-size: 14px;
        padding: 8px 12px;
    }

    /* Adjust Layer Buttons Container Position */
    .layer-buttons-container {
        top: 63px;
        right: 10px;
        gap: 1px;
        max-height: 60vh; /* Set maximum height */
        overflow-y: auto; /* Enable vertical scrolling */
        width: 50px;
        display: inline-block; /* Ensures width is respected */
    }

    /* Adjust Layer Buttons Container Expanded Width on Small Screens */
    .layer-buttons-container.expanded {
        width: 200px; /* Adjust as needed */
        right: 15px;
        top: 63px; /* Position from the top */
        max-height: 60vh; /* Set maximum height */
        overflow-y: auto; /* Enable vertical scrolling */
        gap: 1px;
    }

    /* Adjust Layer Button Sizes */
    .layer-button {
        font-size: 12px; /* Smaller font size for labels */
        padding: 6px 10px; /* Reduce padding */
        height: 32px; /* Reduce button height */
        border-radius: 3px; /* Adjust border radius */
    }


    .layer-button img {
        width: 20px;
        height: 20px;
    }

    .layer-button span {
        margin-left: 8px;
        font-size: 12px;
    }

    .layer-buttons-container.expanded .layer-button {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Adjust Slider Width */
    .slider {
        width: 80%;
        height: 100%;
    }

    /* Adjusted Opacity Container */
    .per-layer-opacity-container {
        position: fixed;
        bottom: 65px; /* Position above the legend */
        left: 80px;
        width: 33%;
        flex-direction: column;
        align-items: center;
        background: rgba(43, 41, 41, 0.8);
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        z-index: 2000;
    }
    .layer-opacity {
        width: 100%; /* Full width on smaller screens */
    }
    /* Base styles for the play/pause button */
    #DateTimePlayPause {
        height: 30px;
        bottom: 62px;
        right: 160px;
        position: absolute;
        outline: none;
    }

    /* Slider styling */
    .layer-opacity input[type="range"].slider {
        width: 100%; /* Full width of the layer-opacity container */
    }

    /* Optional: Adjust slider labels or headings if present */
    .layer-opacity h4 {
        font-size: 12px; /* Smaller font size for labels */
        text-align: center; /* Center the labels */
    }

    #date-time-slider-container {
        bottom: 32px; /* Move up to accommodate the legend */
        width: 90%; /* Slightly reduce width for better spacing */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Center alignment */
        z-index: 1001; /* Ensure it's above the legend */
    }

    /* 3. Adjust the Date-Time Selection Position */
    #day-time-selection {
        position: fixed; /* Fixed position relative to viewport */
        bottom: 65px; /* Positioned 100px from the bottom */
        right: 10px;
        background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent background */
        color: #ffffff; /* White text color */
        padding: 5px 10px; /* Reduced padding for mobile */
        border-radius: 5px; /* Rounded corners */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Subtle shadow */
        z-index: 1000; /* Ensure it appears above the map and slider */
        font-size: 14px; /* Readable font size */
        text-align: center; /* Centers the text */
        transition: bottom 0.3s ease, opacity 0.3s ease; /* Smooth transitions */
        opacity: 1; /* Fully visible by default */
    }
    /* Adjust Custom Control Buttons */
    .custom-control {
        width: 40px;
        height: 40px;
    }

    /* Increase Map Container Buttons */
    .add-observation-button,
    .draw-polygon-button {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }

/* Adjusted Legend */
    .custom-legend {
        position: fixed;
        bottom: 0px; /* Move up from bottom */
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        padding: 0px;
        background: rgba(51, 51, 51, 0.95);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        font-size: 12px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
        border-radius: 0px;
    }

    .legend-item {
        flex: 1 1 0;
        text-align: center;  /* Optional: centers the content inside each legend item */
        margin: 0; /* Remove any margins between items */
        padding: 0; /* Remove padding for compact layout */
    }

    .legend-item i {
        margin-right: 0px; /* Keep small spacing for icons */
        height: 20px;
        width: 100%;
    }
}
/* -------------------- End Weather & Animal Behavior Container -------------------- */

/* Styles for the opacity slider sub-heading */
.opacity-slider-subheading {
    font-size: 10px;          /* Adjust font size as needed */
    font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #fffbfb;               /* Dark gray color for readability */
    margin-bottom: 5px;       /* Space below the heading */
    text-align: center;        /* Center the heading text */
}

/* Optional: Add some padding to the container */
.per-layer-opacity-container {
    padding: 5px;
}

/* Optional: Style the opacity sliders for better appearance */
.layer-opacity .slider {
    width: 100%;               /* Full width sliders */
    margin-top: 5px;           /* Space above sliders */
}

/* Custom Marker Styles */
.custom-div-icon {
    /* Remove default styles */
    background: none;
    border: none;
}

.custom-marker {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Makes the div a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.marker-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    /* Adjust the icon size as needed */
    pointer-events: none; /* Allows clicks to pass through to the marker */
}

/* Optional: Add hover effects */
.custom-marker:hover {
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* Set the user location control background to white */
.leaflet-control-locate,
.leaflet-control-locate a {
  background-color: #fff !important;
  border: none;
  /* Optionally adjust padding/margin if needed */
  padding: 5px;
}