body {
            margin: 0;
            font-family: 'Roboto Mono', monospace;
            font-weight: 300;
            margin: 0;
	    background-color: #404040;
        }

 .leaflet-popup-content {
        font-family: 'Roboto Mono', monospace;
    }


        #navbar {
            background-color: #404040;
            padding: 11px;
            color: white;
            text-align: left;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 3;
            display: flex;
            align-items: center;

        }


        #logo {
            max-width: 250px;
            max-height: 50px;
		margin: 0px 0;
            margin-right: auto;
            margin-left: 20px;
        }

#nav-title {
    font-family: 'IBM Plex Mono', monospace; /* Use IBM Plex Mono font */
    font-size: 20px; /* Adjust the font size as needed */
margin: 0px 0px; 
margin-right: 750px;    
margin-left: auto; /* Remove default margin */
    color: white; /* Set text color to white */
    /* Add more styles or adjust as needed */
}


#sidebar-toggle {
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  #sidebar-toggle {
    max-width: none;
  }
}


        #map {
            height: calc(89vh - 2 * 8px); /* Adjusted for top and bottom padding of the navbar */
            z-index: 1;
            margin-top: 70px; /* Adjusted for top padding of the navbar */
            margin-bottom: 8px; /* Adjusted for bottom padding of the navbar */
        }

        #footer {
            background-color: #404040;
            padding: 10px;
            text-align: center;
            color: white;
            position: fixed;
            bottom: 0;
            width: 100%;
            z-index: 3;
        }

        #footer a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
        }

        #sidebar {
            height: 91%;
            width: 0;
            position: fixed;
            z-index: 2;
            top: 0;
            right: 0;
            background-color: #606060;
            overflow-x: hidden;
            overflow-y: auto; /* Enable vertical scrolling */
            transition: 0.5s;
            padding-top: 80px;
            color: white;
            width: 35%;
        }

        #sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 15px;
            color: white;
            display: block;
            transition: 0.3s;
        }

        #sidebar a:hover {
            color: #ffc107;
        }

        #sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
        }

        #search-container {
            padding: 15px;
		margin-top: -5px;
        }

        #search-input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

#sidebar .sidebar-subtitle .nested-subtitle ul {
    list-style-type: disc; /* Use disc for filled circles, or replace with 'circle' or 'square' as needed */
    padding-left: 20px; /* Adjust the padding-left value as needed */
}

#sidebar .sidebar-subtitle .nested-subtitle li {
    padding-bottom: 5px; /* Add some space between each list item */
}

#sidebar .sidebar-subtitle .nested-subtitle a {
    display: block;
    color: white;
    text-decoration: none;
    padding-bottom: 0px; /* Adjust the padding if needed */
}


#popup {
   
    opacity: 0; /* Start with 0 opacity */
    transition: opacity 0.5s ease-in-out; /* Transition opacity over 0.5 seconds with ease-in-out timing function */
}

#popup.open {
    opacity: 1; /* Change to full opacity when the 'open' class is added */
}