#map {
            background-color: #ffffff
        }
        html, body, #map {
			overflow: hidden;
        }
        .col9{
			height: 100%!important;
		}
		.col3{
			height: 100%;
			overflow: auto;
		}
        .info {
            padding: 6px 8px;
            font: 14px/16px Arial, Helvetica, sans-serif;
            background-color:#f8f8f8 !important;
            color: #444444 !important;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
        }
        .info h2 {
            margin: 0 0 5px;
        }
        .leaflet-container {
            background: #fff;
            padding-right: 10px;
        }
        .leaflet-popup-scrolled {
            border-bottom: unset!important;
            border-top: unset!important;
        }
        .leaflet-popup-content{
            max-height: 70vh;
            max-width: 70vw;
        }
        .leaflet-popup-content.media{
            width: auto!important;
            height: auto!important;
        }
        .leaflet-popup-content th {
            text-align: left;
            vertical-align: top;
            min-width: 75px;
        }
        .leaflet-popup-content td {
            min-width: 75px;
        }
        .leaflet-popup-content td img {
            max-height: 60vh;
            max-width: 60vw;
        }

        .leaflet-tooltip {
            background: none;
            box-shadow: none;
            border: none;
        }
        .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
            border: 0px;
        }
        }
        .fa, .leaflet-container, a {
            color: #444444 !important;
        }
        .leaflet-control-zoom-in, .leaflet-control-zoom-out,
        .leaflet-control-locate a,
        .leaflet-touch .leaflet-control-geocoder-icon,
        .leaflet-control-search .search-button,
         .leaflet-control-measure {
            background-color: #f8f8f8 !important;
            border-radius: 0px !important;
            color: #444444 !important;
        }
        .abstract {
            font: bold 18px 'Lucida Console', Monaco, monospace;
            text-indent: 1px;
            background-color: #f8f8f8 !important;
            width: 30px !important;
            color: #444444 !important;
            height: 30px !important;
            text-align: center !important;
            line-height: 30px !important;
        }
        .abstractUncollapsed {
            padding: 6px 8px;
            font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
            background-color:#f8f8f8 !important;
            color: #444444 !important;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
            max-width: 40%;
        }
        .leaflet-control {
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4)!important;
            border-radius: 4px;
        }
        .leaflet-touch .leaflet-control-layers,
        .leaflet-touch .leaflet-bar,
        .leaflet-control-search,
        .leaflet-control-measure {
            border: 3px solid rgba(255,255,255,.4) !important;
        }
        .leaflet-control-attribution a {
            color: #0078A8 !important;
        }
        .leaflet-control-scale-line {
            border: 2px solid #f8f8f8 !important;
            border-top: none !important;
            color: black !important;
        }
        .leaflet-control-search .search-button {
            width: 30px !important;
            height: 30px !important;
            font-size: 13px !important;
            text-align: center !important;
            cursor: pointer;
        }
        .search-button.fa.fa-binoculars{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .leaflet-control-measure .leaflet-control {
            width: 30px !important;
            height: 30px !important;
        }
        .leaflet-container .leaflet-control-search{
            background: none !important;
        }
        .leaflet-control-search .search-input {
            margin: 0px 0px 0px 0px !important;
            height: 30px !important;
        }
        .leaflet-control-measure {
            background: none!important;
            border-radius: 4px !important;
        }
        .leaflet-control-measure .leaflet-control-measure-interaction {
            background-color: #f8f8f8 !important;
        }
        .leaflet-touch .leaflet-control-measure
        .leaflet-control-measure-toggle,
        .leaflet-touch .leaflet-control-measure
        .leaflet-control-measure-toggle:hover {
            width: 30px !important;
            height: 30px !important;
            border-radius: 0px !important;
            background-color: #f8f8f8 !important;
            color: #444444 !important;
            font-size: 13px;
            line-height: 30px;
            text-align: center;
            text-indent: 0%;
        }
        .leaflet-control-layers {
			padding: 2px;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
            background-color: #f8f8f8 !important;
            color: #444444 !important;

		}
        .leaflet-control-layers-expanded {
			padding-left: 6px;
		}	
        .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
            display: block;
            background-image: none;
			text-decoration: none;
            margin-bottom: 3px;
        }
        .leaflet-control-layers-expanded .leaflet-control-layers-toggle::after {
            content: '»';
            font-size: x-large;
            color: #444444 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        .leaflet-overlay-pane {
            z-index: 550;
        }
        .leaflet-popup-pane {
            z-index: 700;
        }
        #gcd-button-control {
            display: flex;
            justify-content: center;
            align-items: center;
        }
/* Fix for large images and pop-up scrollbar */
.leaflet-popup-content img {
    /* Ensures image does not overflow the pop-up's width */
    max-width: 100% !important; 
    
    /* NEW RULE: Limits the image's height to a reasonable size (e.g., 200-300px) */
    max-height: 250px !important; 
    
    /* Ensures the image maintains its aspect ratio when scaling */
    width: auto !important;
    height: auto !important;
}

/* Ensure the pop-up container is not unnecessarily constrained by a low max-width */
.leaflet-popup-content {
    max-width: 400px !important; 
}
/* Fix to reduce spacing in the pop-up table */
.leaflet-popup-content table td {
    /* Reduce padding (space inside the cell) */
    padding-top: 2px !important;    /* Small space at the top */
    padding-bottom: 2px !important; /* Small space at the bottom */
}
/* Fix to reduce excessive horizontal padding/width in the pop-up table */
.leaflet-popup-content table tr td:first-child {
    /* Reduces the padding on the right side of the label (the title column) */
    padding-right: 5px !important; 
    
    /* Ensure the column is only as wide as its content (optional, but helpful) */
    width: auto !important; 
}
/* Alternative Fix: Reduce the padding on the left side of the data column (the value column) */
.leaflet-popup-content table tr td:last-child {
    /* Reduces the padding on the left side of the text value */
    padding-left: 5px !important; 
}
/* Final fix to FORCE the label column (first cell) to be narrow */
.leaflet-popup-content table tr td:first-child {
    /* Set a very small, fixed width for the label column */
    width: 60px !important; 
    
    /* Reduce the padding on the right side of the label (the title column) */
    padding-right: 5px !important; 
}

/* Ensure the second column (text value) uses the rest of the space */
.leaflet-popup-content table tr td:last-child {
    /* Remove unnecessary padding on the left of the value column */
    padding-left: 5px !important; 
}
/* Fix to increase the maximum width of the Leaflet pop-up box */
.leaflet-popup-content {
    /* Set a new maximum width (e.g., 450px). Adjust this value as needed. */
    max-width: 600px !important; 
}
/* Aggressively increase the maximum width of the Pop-up container */

/* Targets the wrapper element */
.leaflet-popup-content-wrapper {
    /* Set a wide width (e.g., 550px). Adjust this value as needed. */
    width: 450px !important; 
}

/* Ensure the content itself also stretches to fit the wrapper */
.leaflet-popup-content {
    max-width: 100% !important; /* Forces content to use the full wrapper width */
}

/* Ensure images don't overflow the new width */
.leaflet-popup-content img {
    max-width: 100% !important; 
    height: auto !important;
}
/* Custom Styling for Pop-up Header (The Club Name Row) */
/* Targets the first table row in the pop-up */
.leaflet-popup-content table tr:first-child {
    background-color: #008000 !important; /* A nice green color */
    color: white !important;             /* White text for contrast */
    font-weight: bold !important;
    padding: 8px 10px !important;        /* Add padding for visual space */
    border-radius: 5px 5px 0 0 !important; /* Match pop-up's top corners */
}

/* Ensure the cells inside the first row inherit the colors */
.leaflet-popup-content table tr:first-child td {
    background-color: #008000 !important; /* Match the row color */
    color: white !important;             /* Match the row text color */
    border-radius: 0 !important;
}

/* Optional: Add a subtle green border to the image for visual segmentation */
.leaflet-popup-content img {
    border: 3px solid #008000;
    padding: 5px;
    box-sizing: border-box; /* Include padding/border in the element's total width/height */
}
/* Custom Styling for Pop-up Footer Rows (Notes and Sport) */

/* Targeting the 3rd and 4th table rows (Notes and Sport) */
.leaflet-popup-content table tr:nth-child(3),
.leaflet-popup-content table tr:nth-child(4) {
    background-color: #A3D900 !important; /* A lighter, mint green color */
    color: #333 !important;             /* Darker text for contrast */
    font-weight: bold !important;
    padding: 5px 10px !important; 
}

/* Ensure the cells inside these rows inherit the colors */
.leaflet-popup-content table tr:nth-child(3) td,
.leaflet-popup-content table tr:nth-child(4) td {
    background-color: #A3D900 !important; /* Match the row color */
    color: #333 !important;             /* Match the row text color */
}
/* Styling for pop-up images (Webmap1 example) */
.leaflet-popup-content img {
    max-width: 100% !important; 
    max-height: 250px !important; 
    width: auto !important;
    height: auto !important;
    
    /* ADD THIS LINE to create rounded corners */
    border-radius: 8px !important; 
}