/* Styling for the banner */
     #banner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #156082;
        color: rgb(250, 250, 250);
        text-align: center;
        padding: 20px 0;
        z-index: 2000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
            #banner h1 {
            margin: 0;
            font-family: Garamond, serif;
            font-size: 30px;
            pointer-events: auto; /* Allow interaction with the text if needed */
            }

    /* Make sure the map doesn't get hidden under the banner */
            #map {
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            }

    /* Leaflet container */     
        html, body {
            height: 100%;
            margin: 0;
            }
        .leaflet-container {
        height: 100vh; /* Use 100vh instead of max-height to ensure full screen height */
        width: 100%;
        max-width: 100%;
        }
	
    /* Define the popup for marker's styling globally */
        .popup-content {
         background-color:#fff; /* Popup background color */
         padding: 10px;                 /* Padding inside the popup */
         border-radius: 5px;            /* Rounded corners (optional) */
         color: #333;                   /* Text color (optional) */
         font-family: Lato, Helvetica, sans-serif; /* Font style (optional) */
        }
    
    /* Position and size infobox menu*/
		#info-box {
        position: fixed; 
        top: 80px;
        left: 10px;
        width: 24%;
        padding: 30px;
        background-color: rgba(250, 250,250, 0.88);
        border: 5px solid rgb(250, 250, 250);
        border-radius: 10px; /* Rounded corners */
        font-family: Lato, Helvetica, sans-serif;
        z-index: 1000; /* Ensure it stays on top of the map */
        overflow-y: auto; /* Make the info-box scrollable */
        max-height: 80vh; /* Optional: Limit the height of the info-box */
        }

        /* Optional: Style for the image */
        #info-box img {
            max-width: 40%;   /* Make sure the image fits within the info box */
            height: auto;      /* Maintain the aspect ratio of the image */
            margin-bottom: 10px; /* Add space below the image */
            display: block; /*centres the image*/
            margin: 0 auto /*centres the image*/
        }
        /*style for buttons*/
        #info-box button {
        background-color: #156082;
        color: rgb(250, 250, 250);
        border: none; /* remove border */
        border-radius: 10px; /* Rounded corners */
        padding: 6px; /* add padding */
        font-size: 13px; /* set font size */
        font-family: Lato, Helvetica, sans-serif;
        cursor: pointer; /* change cursor shape on hover */
        display: inline-block;
        margin: 0 3px;
        }

        #info-box .toggleLayerGroup1:hover {
            background-color: #152982;
            color: rgb(250, 250, 250);
            }
        #info-box     .toggleLayerGroup2:hover {
            background-color: #E02F1F;
            color: rgb(250, 250, 250);
            }
        #info-box    .toggleLayerGroup3:hover {
            background-color: #E8AB1E;
            color: rgb(250, 250, 250);
            }
            #info-box .toggleLayerGroup4:hover {
        background-color: #EC8915;
        color: rgb(250, 250, 250);
            }
            #info-box .toggleLayerGroup5:hover {
        background-color: #228B22;
        color: rgb(250, 250, 250);
}
    /* Button styling */
        #info-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgb(250, 250, 250); /* Button background color */
        color: rgb(21, 96, 130); /* Button text color */
        border: none; /* Remove border */
        padding: 10px 15px; /* Button padding */
        border-radius: 5px; /* Rounded corners */
        cursor: pointer; /* Pointer cursor on hover */
        font-family: Lato, Helvetica, sans-serif;
        font-size: 16px; /* Font size */
        z-index: 2010; /* Ensure it appears above the banner */
            }

    /* Modal styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 2100; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
        }
        .modal.show {
            display: block; /* Show the modal */
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
            max-width: 600px; /* Maximum width */
            border-radius: 8px; /* Rounded corners */
            font-family: Lato, Helvetica, sans-serif;
        }