.wrapper{
  display:flex;
  gap:20px;
  padding:15px;
  max-width:1400px;
  margin:auto;
}


      
.map-box{
  flex:1;
  min-height:420px;
  position:relative;
}

#chartdiv{
  width:100%;
  height:100%;
  min-height:400px;
}

.map-box svg{
  display:block;
  margin:0 auto;
}

.info-box{
  flex:1;
}

h2{
  margin-top:0;
}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:15px;
}
th,td{
  border:1px solid #ccc;
  padding:8px;
  font-size:14px;
}
th{
  background:#008920;
  color:#fff;
}

.map-tooltip{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-9999px,-9999px);
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  line-height:1.2;
  pointer-events:none;
  z-index:10;
  white-space:nowrap;
  display: block; /* Ensure it is visible */
}

.map-tooltip.is-visible{
  transform:translate(0,0);
}

.state {
  fill: #CCCCCC;
	fill-opacity: 1;
  stroke:white;
	stroke-opacity: 1;
	stroke-width:0.5;
}
a:hover .state { 
  fill: #94c6ff; 
}



/* Add active state for map states */
.state.is-active {
  fill: #008920; /* Change to desired active color */
  stroke: #ffffff;
  stroke-width: 1;
}


/* ✅ MOBILE RESPONSIVE */
@media(max-width:768px){
  .wrapper{
    flex-direction:column;
  }
  #chartdiv{
    min-height:300px;
  }
}
  .marker {
    fill: red;
    stroke: white;
    stroke-width: 1;
    cursor: pointer;
  }