html,
            body {
                height: 100%;
                margin: 0;
            }
			
			  /* Container styling */
			.toggle-container {
			max-width: 900px;
			margin: 24px auto;
			padding: 16px;
			background: #ffffff;
			border: 1px solid #e5e7eb;
			border-radius: 12px;
			box-shadow: 0 6px 18px rgba(0,0,0,0.06);
			}


  /* Hidden utility (if you’re not using Bootstrap’s d-none) */
  .hidden { display: none !important; }
  
            .leaflet-container {
                height: 600px;
                width: 800px;
                max-width: 100%;
                max-height: 100%;
            }

            .info {
                padding: 6px 8px;
                font:
                    14px/16px Arial,
                    Helvetica,
                    sans-serif;
                background: white;
                background: rgba(255, 255, 255, 0.8);
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
                border-radius: 5px;
            }
            .info h4 {
                margin: 0 0 5px;
                color: #777;
            }
            .legend {
                text-align: left;
                line-height: 18px;
                color: #555;
            }
            .legend i {
                width: 18px;
                height: 18px;
                float: left;
                margin-right: 8px;
                opacity: 0.7;
            }

            body {
                background-color: #163352;
                font-family: Arial, sans-serif;
            }
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0px;
            }
            #map {
                margin-left: auto;
                margin-right: auto;
                height: 600px;
                width: 800px;
            }
            table {
                width: 100%;
                border-collapse: collapse;
                margin-right: auto;
                margin-left: auto;
                margin-top: 0px;
            }
            th,
            td {
                border: 1px solid #163352;
                padding: 0px;
                text-align: left;
            }

            #groupTable th,
            #groupTable td {
                color: #163352; /* text */
                font-size: 14px;
                font-weight: bold; /* Optional */
            }

            /* Center the canvas */
            #doughnutChart {
                display: block;
                margin-right: auto;
                margin-left: auto;
                margin-top: 0;
                width: 500px; /* Increase width */
                height: 500px; /* Increase height */
            }

            /* Change font style for chart labels */
            .chart-text {
                color: #163352
				font-family: "Arial", sans-serif; /* Change to any font you like */
				font-size: 12px;
            }

            .chart-container {
                /* Layout */
                display: block;
                max-width: 800px; /* cap the width */
                width: 100%; /* allow shrinking on small screens */
                margin-top: 0px;
                margin: 0 auto; /* center horizontally */

                /* Aesthetic */
                padding: 0px;
                background: #ffffff;
                border: 1px solid #e5e7eb;
                border-radius: 12px;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            }

            /* Optional: make canvas block-level */
            .chart-container canvas {
                display: block;
            }

            .chart-container {
                max-width: 800px;
                margin: 40px auto; /*  Adds space above and below */
                padding: 20px;
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .chart-container canvas {
                width: 100%;
                height: 100%; /* Resize chart */
            }

            .btn-custom {
                padding: 10px 20px;
                font-size: 16px;
                font-weight: bold;
            }