/* General Map Styling */
#india-map-d3 {
  display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: auto;
 margin: 0 auto;
 text-align: center;
 padding: 20px 0; 
}
/* svg {
 display: block;
 margin: 0 auto;
} */

.map-container {
 display: flex;
 justify-content: center;
 align-items: center;
 overflow-x: auto; /* Enable horizontal scrolling if necessary */
 max-width: 100%;
}

.state-label {
 font-family: Arial, sans-serif;
 font-size: 8px;
 font-weight: bold;
 fill: #333333;
 /* text-anchor: middle;
 pointer-events: none; */
}


/* Desktop Styling */
@media screen and (min-width: 1024px) {
/*     #india-map-d3{
     height: 600px; 
 } */
}

/* Tablet Styling */
@media screen and (min-width: 768px) and (max-width: 1023px) {
 #india-map-d3 {
     padding: 10px;
     max-width: 90%;
 }
 svg {
     width: 95%;
     height: auto;
 }
}

@media (max-width: 768px) {
              .responsive-container {
                  flex-direction: column-reverse; /* Show right panel first */
              }
              .map-container {
                  flex: none;
                  width: 100%; /* Take full width */
              }
              .right-panel {
                  flex: none;
                  width: 100%; /* Take full width */
              }
          }



/* right panel */
.year-dragger > input[type="range"]{
    appearance: auto;
  cursor: default;
  color: light-dark(rgb(16, 16, 16), rgb(255, 255, 255));
  padding: initial;
  border: initial;
  margin: 2px;
}
.year-dragger {
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #eef4f9;
 padding: 10px;
 border-radius: 8px;
 margin-bottom: 20px;
 position: relative;
}

.year-slider {
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 height: 6px;
 background: #ddd;
 outline: none;
 border-radius: 5px;
 margin: 10px;
 cursor: pointer;
}

.year-slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 20px;
 height: 20px;
 background: #0073e6;
 border-radius: 50%;
 cursor: pointer;
}

.year-slider::-moz-range-thumb {
 width: 20px;
 height: 20px;
 background: #0073e6;
 border-radius: 50%;
 cursor: pointer;
}

.year-labels {
 display: flex;
 justify-content: space-around;
 position: absolute;
 top: 35px;
 width: 100%;
 font-size: 12px;
 color: #444;
 /* margin-bottom: 10px; */
}

.progress-section {
 background-color: #fff;
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-top: 20px;
}

.progress-bar {
 margin-bottom: 20px;
 margin-top: 20px;
}

.progress-bar:last-child {
 margin-bottom: 0;
}

.progress-bar label {
 display: flex;
 justify-content: space-between;
 margin-bottom: 5px;
 font-size: 14px;
 color: #333;
}

.progress-bar .bar {
 height: 10px;
 border-radius: 5px;
 background-color: #eef4f9;
 overflow: hidden;
 position: relative;
}

.progress-bar .bar span {
 display: block;
 height: 100%;
 border-radius: 5px;
}

.very-high {
 background-color: #ff4d4f;
 width: 20%;
}

.high {
 background-color: #ff7f50;
 width: 40%;
}

.medium {
 background-color: #ffc107;
 width: 56%;
}

.low {
 background-color: #85e085;
 width: 75%;
}

.very-low {
 background-color: #36cfc9;
 width: 87%;
}
#tooltip {
  display: none;
  position: absolute;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 5px;
  pointer-events: none;
  font-size: 12px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}





.state-label {
  font-family: Arial, sans-serif;
  font-weight: bold;
  fill: #333;
}

.state-line {
  stroke: #555;
  stroke-dasharray: 2, 2; /* Optional dashed lines */
}
.mapdiv {
display: flex;
flex-direction: row;
}
.map-container{
flex: 4; 
position: relative;
}
.right-panel{
flex: 1; background: #f7fafd;
padding: 20px;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); 
display: flex;
flex-direction: column;
height: fit-content;
}
@media (max-width: 768px) { /* Adjust the max-width as per your mobile breakpoint */
.mapdiv {
  flex-direction: column-reverse; /* Reverse the order of rows on mobile */
}

.map-container,
.right-panel {
  flex: none; /* Disable flex-grow */
  width: 100%; /* Make each div 100% wide */
}
}