#map {
    flex-grow: 1;
    height: 100vh;
}

textarea,
select,
button,
input {
    resize: none;
    width: 100%;
    padding: 3px;
    margin-top: 5px;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    background-color: white; 
    color: black; 
    border: 2px solid #04AA6D;
}
  
.leaflet-control-search .search-input {
    width: 90%;
    padding: 10px;
}
button:hover {
    background-color: #04AA6D;
    color: white;
  }

p {
    resize: none;
    width: 100%;
    padding: 3px;
    margin-top: 5px;
    box-sizing: border-box;
    font-size: 16px;
}

h2 {
    resize: none;
    width: 100%;
    padding: 3px;
    margin-top: 5px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bold;
}

i {
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    color: black;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(20px); }
}

.leaflet-dragging .leaflet-grab {cursor: move;}

.lorem {
    font-style: italic;
    text-align: justify;
    color: #AAA;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-bottom: 5px;
}

.toggle-label {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid #333;
    background-color: white;
    cursor: pointer;
    transition: 0.3s;
}

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + .toggle-label {
    background-color: #04AA6D;
    color: white;
}

.file-upload-container {
    display: flex;
    align-items: left;
    justify-content: left;
    gap: 10px;
    margin-top: 0px;
    /* border: 2px solid #04AA6D; */
}

.file-input {
    display: none;
}

.file-label {
    padding: 3px;
    font-size: 16px;
    border: 2px solid #04AA6D;
    background-color: white;
    color: black;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0px;
}

.file-label:hover {
    background-color: #04AA6D;
    color: white;
}

#fileName {
    font-size: 16px;
    color: black;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

/* Style the popup container */
.leaflet-popup-content-wrapper {
    background-color: #ede0b0;  /* Change background color */
    color: black;               /* Change text color */
    border-radius: 8px;         /* Rounded corners */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

/* Style the popup content (inside the popup) */
.leaflet-popup-content {
    font-size: 16px;
    padding: 3px;
    text-align: left;
}

/* Style the close button */
.leaflet-popup-close-button {
    color: black;
    font-size: 16px;
    top: 5px;
    right: 5px;
}

/* Style the popup arrow (tip) */
.leaflet-popup-tip {
    background-color: #ede0b0;
}

/* Remove the default margin */
.leaflet-popup-content p {
    margin: 0;
}

.nav-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 3px;
    gap: 10px;
}

.image-container {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap;
    gap: 10px; /* Spacing between images */
    padding: 10px;
    scroll-behavior: smooth; /* Smooth scrolling */
    border: 2px solid #ddd; /* Optional border */
}

/* Hide scrollbar for a cleaner look */
.image-container::-webkit-scrollbar {
    display: none;
}

/* Image styles */
.image-container img {
    height: 200px; /* Fixed height */
    width: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional rounded corners */
    display: 'flex';
    object-fit: 'cover';
}
.image-container video {
    height: 200px; /* Fixed height */
    width: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional rounded corners */
    display: 'flex';
    object-fit: 'cover';
}