@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap');

body {
  font-family: 'Poppins', sans-serif;

}


#map {
  position: fixed;
  top: 0;
  left:0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.popup{
  font-family: 'Poppins', sans-serif;
 
}

#console{

  position:fixed;

  font-family: 'Poppins', sans-serif;
  padding:42px 0px 22px 32px ;
   background-image: linear-gradient(to right,white,white,white,white,white,white,white,white,white,white,white,white,white, #ffffff00);
  width:365px;
  height:100%;
 
}




.logo{
 
  width:110px;

}
#logo2{
  margin-left:10px;
 width:53px; 
}

.logo-container {
   position:fixed;
bottom:30px;
   left:82px;
  display: flex;
  align-items: center;
  gap: 10px; /* Space between logos */
}



#screenshot-btn{
  margin-left:85px;
  margin-top:20px;
   border-radius:30px;
  padding:0px 30px ;
  height:30px;
    background-color: #bababa;
  
  
  border: 2px solid #c9c9c9;
   text-transform:uppercase;
  font-size:15px;
  font-weight:500;
  color:#ffffff
}

#screenshot-btn:hover{
   background-color: #cfcfcf;
}

#title{
   
  font-size:16px;
margin-bottom:0px;
  line-height:19px;
  text-transform:uppercase;
  font-weight:bold;
  color:#3d3d3d;
}

#update{
  font-size:13px;

  font-weight:500;
  color:#adadad;
}

option[value=""][disabled][selected] {
display:none;
}

option[value="2"] {
display:none;
}
.mapboxgl-popup{
  scale:1;
  
}

.mapboxgl-popup-content{
 background-color:#ffffff;
 padding:10px 10px;
 border-radius:10px;
 border-color:#dde1ed;
 border-style:solid;
 border-width:3px;
width:150px;
  max-height:3500px;
   min-height:100px;
}

.pieFood{
  margin-top:-10px !important;
}




#info-panel3, #info-panelFood{
  position:fixed;
  top:w0px;
  right:0px;
    margin-top:0px;
  
width:400px;

    position:fixed;
background: #ffffffcc;
  font-family: 'Poppins', sans-serif;
  padding:0px 20px 20px 10px ;
   width:300px;
  height:auto;
   top:115px;
right:60px;
   border-radius:8px;
  border: 2.5px solid #e2e2e2;
}

#info-panel3{
  padding-left:20px;
}


#info-tit,#info-titFood{
  text-transform:uppercase;
   margin-top:15px ;
  font-size:14px ;
  font-weight:600;
}

#info-text,#info-textFood{
  margin-top:0px;
  font-size:11px;
  margin-bottom:10px;
}

#info-text{
 font-size:10px;
  margin-bottom:20px;
}

.info{
  margin-top:11px;
  margin-left:7px !important;}

.iconBlock{
   
 width:280px;
  height:auto;
  
  margin-right:50px;
  margin-bottom:15px;
}

.icon-text{
   margin-top:8px;
  margin-left:0px;

  height:auto;

}

#info-panel2{
  display:none;
    margin-top:0px;
  padding-right:0px;
}

#info-panel2>.iconBlock{
   
 width:280px;
  height:auto;
  margin-top:10px;
  margin-right:50px;
}


#info-panel{
  
    margin-top:40px;
  padding-right:110px;
}

.iconBlock{
  display:inline-block;
  margin-top:0px;
}

#paragraph{

  font-size:12px;
  font-weight:700;
  color:#3d3d3d;

}
.icon{
width:35px !important;
  margin-right:6px;
  float:left;
}
#iconD{
 display:none;
}

#infoD{
  text-align:center;
  margin:80px 0px 0px 0px;
width:290px;;
float:left;
  color:#d4af37;
}

.info{
  margin-left:20px;
  font-size:10px;
  font-weight:500;
  color:#3d3d3d;
 float:left;
  width:220px
}



#comment{
  width:290px;;
  text-align:center;
  font-size:11px;
  line-height:15px;
  font-weight:400;
  color:#b4b4b4;
  position:absolute;
  bottom:90px;
}

#info-panel{
  position:absolute;
 bottom:100px;
  height:190px;

  width:290px;;
}


#buttons-container-text{
  display:inline-block
}

.button-text{
  font-size:11px;

   width:300px;
  margin:0px;
  text-align:center;
  color: #8c8c8c;
    margin-bottom:5px;
  margin-top:5px;
}

.buttons-container{
  width:100%;
float:left;
}

#buttonInt{
margin-bottom:10px;
}

#buttons-container2{
margin-top:-20px;
  width:300px;
float:left;
}

#buttons-container2 >.toggle-button{
  
  width:144px !important;

}

 

#buttons-container1{

margin-bottom:22px;
}


#buttons-container2 >.toggle-button{
  
  width:95px;

}

#button-5{
  display:none;
}

#buttons-containerYear {
  display: flex;

  width:300px;
  flex-direction: row;
  gap: 6px;           /* Space between buttons */

}

#buttons-containerYear .toggle-button {
  /* Optional: style for the buttons */


  font-size: 14px;
  cursor: pointer;
}



.toggle-button,.toggle-buttonInt {
 
    border-radius:30px;
  padding:0px 10px ;
  height:30px;
    background-color: #dbdbdc;
  border:none;
  width:144px;
   text-transform:uppercase;
  font-size:12px;
  font-weight:500;
  color:#757575;
  opacity:0.5
}





#yearDropdown{
    border-radius:30px;
  padding:0px 0px 0px 10px ;
  height:30px;
    background-color: #dbdbdc;
  border:none;
  width:185px;;
  text-align:center;
   text-transform:uppercase;
  font-size:13px;
  font-weight:500;
  color:#757575;
   border:solid;
  border-color:#d4af3791;
  border-width:3px;
    opacity:1;
  margin-left:auto;
  margin-right:auto;
}




.toggle-button.active{

  border:solid;
  border-color:#d4af3791;
  border-width:3px;
    opacity:1
}

.toggle-button:hover{
   background-color: #d3d3d3;
}


.button-containerInt {
width:294px;
  
  
}
.toggle-buttonInt {
  text-align:left;
width:100%;
 font-size:11px;
line-height:11px;
 margin-bottom:4px;

  
}

.toggle-buttonInt>img {
  margin-right:10px;
}

.toggle-buttonInt {
 
 
  opacity:0.9
}

.toggle-buttonInt.active {
  border:solid;
  border-color:#d4af3791;
  border-width:3px;
  opacity:1
}
.toggle-buttonInt img {
  width: 20px; /* Adjust size as needed */
  height: 20px;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color: #080a0d00;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: #080a0d00;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #080a0d00;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #080a0d00;
}

.propPop1{
  font-size:12px;
  text-transform:uppercase;
  font-weight:500;
  color:#bbbbbb;
  text-align:center;
}

.propPop2{
  margin-top:-24px;
font-size:13px;
  text-transform:uppercase;
  font-weight:700;
  color:#969696;
  text-align:center;
}

.propPop3{
  font-size:11px;
margin-top:-5px;
  font-weight:600;
  color:#3d3d3d;
  text-align:center;
}

.propPop4{
  margin-top:-20px;
font-size:16px;
  text-transform:uppercase;
  font-weight:700;
  color:#3d3d3d;
  text-align:center;
  margin-bottom:0px;
}





.dropdown {
  position: relative;
  display: inline-block;
  width: 200px;
}

#dropdown1 {
  margin-top:30px;
  margin-bottom:20px;


}

.agree{
  font-size:10px;
  font-weight:400;
  text-transform:lowercase;

}

#options{
  border-radius:30px;
  padding:0px 10px ;
  height:30px;
    background-color: #dbdbdc;
  border:none;
  width:292px;
  text-transform:uppercase;
  font-size:13px;
  font-weight:500;
  color:#757575;
  margin-bottom:-10px;
}

.dropdown-btn {
  margin-top:30px;
  width: 100%;
  padding: 8px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: left;
  cursor: pointer;
    border-radius:30px;
  padding:0px 10px ;
  height:30px;
    background-color: #dbdbdc;
  border:none;
  width:292px;
  text-transform:uppercase;
  font-size:13px;
  font-weight:500;
  color:#757575
}

.dropdown-options {
  display: none;
  position: absolute;
  width:292px;
  max-height: 750px;
  overflow-y: auto;
  background-color: #e8e8e8;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
border-radius:5px;
   
  padding:0px 10px ;
 
   
  border:none;
  
  text-transform:uppercase;
  font-size:13px;
  font-weight:500;
  color:#757575
}

.dropdown-options.active {
  display: block;
}

.dropdown-option {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-size:12px;
  line-height:13px;
}

.dropdown-option:hover {
  background-color: #f0f0f0;
}

.dropdown-option.active {

  font-weight:600;
}



#map-legend {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #b47979;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  width: 200px;
}

#map-legend div {
  margin-bottom: 5px;
}

#map-legend div:last-child {
  margin-bottom: 0;
}

#map-legend .gradient {
  height: 20px;
  width: 100%;
  border-radius: 3px;
  margin-top: 5px;
  border:solid;
  border-color:#075f42;
  border-width:3px;
}

#map-legend .labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

#map-legend .labels span {
  font-size: 10px;
  color: #555;
}

.labels{
  font-size:11px;
font-weight:600;}

.labelW{
  margin-left:1px !important;
  margin-right:1px !important;
  font-size:10px;
  line-height:11px;
  text-transform:uppercase;

}

#console2{

  position:fixed;
background: #ffffffcc;
  font-family: 'Poppins', sans-serif;
  padding:0px 0px 0px 10px ;
   width:300px;
  height:auto;
   top:115px;
right:60px;
   border-radius:8px;
  border: 2.5px solid #e2e2e2;
  display:none !important;
}

#legend-totals{
   position:fixed;
 bottom:70px;
  right:60px;
    margin-top:0px;
  padding:15px 15px;
 background: #ffffffcc;
font-size:12px;
   width:300px;
  line-height:19px;

   border-radius:8px;
   border: 2.5px solid #e2e2e2;
  scale:1.1;
  transform-origin:bottom right;
}

#to-span{
  padding:3px;
  font-size:15px;
  font-weight:bold;
  color:#d3a922
}

#to-span-lab{

  font-weight:bold;
  color:#535353
}

#to-span-note{
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-style: italic;
  color: #8a8a8a;
}

/* Mapbox's built-in "Improve this map" feedback link */
.mapboxgl-ctrl-attrib .mapbox-improve-map{
  display: none;
}


#legend{
  background: #ffffffcc;
  border-radius:8px;
  border: 2.5px solid #e2e2e2;
  padding:5px 15px 15px 15px;
  position:fixed;
  top:8px;
right:60px;
 
  text-align:right;
  font-size:12px;
  line-height:13px;
  
   
}

.legendG{
  width:auto !important;
}

.legend{
  width:300px !important;
}


#legend-pieChart{

 
    position:fixed;
background: #ffffffcc;
  font-family: 'Poppins', sans-serif;
  padding:10px 0px 0px 0px ;
   width:140px;
  height:140px;
   top:320px;
right:60px;
   border-radius:8px;
  border: 2.5px solid #e2e2e2;}

  #legend-pieChart>svg{
    scale:0.58;
        transform-origin: top center;
margin-left:-30px
  }

  #legend-pieChart>svg{
    scale:0.58;
        transform-origin: top center;
margin-left:-30px
  }

.pieLegLab{
  font-size:12px !important;
  font-weight:bold;
 text-transform:uppercase;
}
  
  
  .gradient {
  height: 20px;
  width: 100%;
  border-radius: 3px;
  margin-top: 5px;
  border:solid;
  border-color:#adadad;
  border-width:1px;
}




/* Slider container */
.slider-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  margin: 20px 0;
  
}

/* Slider input */
input[type="range"] {
  -webkit-appearance: none;
  width: 200px;
  height: 6px;
  background:#dbdbdc;
  border-radius: 5px;
  outline: none;
  border: 0px solid #ccc;
  transition: background 0.3s;
}

/* Slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #aaaaaa;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.3s, transform 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #8b8b8b;
  transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #2196f3;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.3s, transform 0.2s;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #4caf50;
  transform: scale(1.1);
}

/* Value display */
#slider-value {
  font-weight: bold;
  color: #fff;
}

#year-display{
  
    font-weight: 400;
  color: #838383;
 
}

#slider>label{
     font-weight: 400;
  color: #838383;
}

#pieChart{
  

  margin-left:-2px
}

.pie-chart>svg{
  width:200px;
}

.pie-label{
  fill:#1e1e1e !important;
  font-size:11px;
  text-transform:uppercase;
  font-weight:bold;
}

path{
  stroke:#deb88700;
}

.highlight{
  color:#d4af37;
  font-weight:bold;
}

.highlight0{

  font-weight:bold;


}



.icon-container {
position:relative;
  width:300px;
  align-items: center;
  margin-top:-10px !important;
 

}

.icon-cat {
position:relative;
  width:300px;
  align-items: center;

 

}

.icon-wrapper {
 
  align-items: center;
  gap: 0px; /* Space between icon and text */
  background-color: #f4f4f400; /* Light gray background */
  padding: 5px 5px 5px 0px;
  margin-bottom:5px;
  margin-left:25px ;
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.icon-wrapper img {
 
  height: 33px;
}

.icon-wrapper span {
  margin-left:15px;
  font-size: 14px;
  font-weight: bold;
  color: #333; /* Dark text */
}

.icon-container-p{
 position:relative;
  width:300px;
  align-items: center;
  margin-top:-20px;
  
padding-bottom:10px;
}



@media only screen and (max-width: 500px) {



  #info-panel3-toggle {
    display: block !important;
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    padding: 5 10px;
    color: #212529;
  }
  /* Collapsed state: hide content except header */
#info-panel3.collapsed #info-panel3-content {
  display: none;
}
  #info-panel3.collapsed .iconBlock {
  display: none;
}

#info-panel3{
  top:144px;
  scale:0.8;
  transform-origin: top right;
  padding-bottom:0px;
 
}  

  #info-tit{
    margin-top:14px;
  }

#legend-totals{
   position:fixed;
 bottom:unset;
  top:80px;
  right:60px;
    margin-top:0px;
  padding:15px 15px;
 background: #ffffffcc;
font-size:12px;
   width:300px;
  line-height:19px;

   border-radius:8px;
   border: 2.5px solid #e2e2e2;
  scale:0.8;
  transform-origin:top right;
  z-index:7;
}

  #info-panelFood{
  top:90px;
  scale:0.8;
  transform-origin: top right;
  padding-bottom:5px;
} 


  
  #legend-pieChart{
  top:90px;
  scale:0.9;
  transform-origin: top right;
  padding-bottom:5px;
}

    .pieFood{
 margin-top:145px !important;
 
}


.logo-container {
   position:absolute;


  margin-left:40px;;

}

  #comment{
    margin-bottom:25px;
  }

  #legend{
     transform-origin: top right;
    scale: 0.8
  }

  #console2{
    transform-origin: top right;
     scale: 0.8;
    margin-top:-24px;
  }

  #console{

  position:absolute;
top:89%;
  font-family: 'Poppins', sans-serif;
  padding:25px 22px 22px 62px ;
   background-color:#fff;
  width:100%;
  height:100%;
 z-index: 2147483647 !important;
}

  }


@media only screen and (max-height: 800px) {


#comment{
  font-size:10px;
  line-height:13px;
  margin-bottom:-1px;
}

  .logo-container{
    scale:0.8;
    
  }

  #screenshot-btn{
    margin-top:12px;
  }

  #info-panel3{
    padding-bottom:0px;
  }

  #legend-totals{
    padding: 9px 15px;
    font-size:12px;
  line-height:16px;
  }
}

/* =====================================================================
   LAYOUT FIX (desktop / tablet, window wider than 500px)

   The boxes on the right (legend, description, pie legend and the
   "provided x beneficiaries" box) used to be pinned to the window one
   by one, so on smaller windows or with browser zoom they landed on top
   of each other. They now sit in ONE column (#right-col, see index.html):
   boxes are stacked one below the other, never overlap, and the column
   scrolls if the window is too small to show everything at once.
   The phone layout (500px and below) is unchanged.
   ===================================================================== */
@media only screen and (min-width: 501px) {

  #right-col{
    position: fixed;
    top: 8px;
    right: 60px;
    bottom: 40px;                 /* keeps the map credits at the bottom visible */
    width: 345px;                 /* same width as the description box had before */
    display: flex;
    flex-direction: column;
    align-items: flex-end;        /* keep boxes aligned to the right edge */
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: none;         /* empty space in the column does not block the map */
    scrollbar-width: thin;
  }

  #right-col #legend,
  #right-col #info-panel3,
  #right-col #info-panelFood,
  #right-col #legend-pieChart,
  #right-col #legend-totals{
    position: static;             /* in the column instead of pinned to the window */
    top: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    scale: none;
    flex: 0 0 auto;               /* never squeeze a box, scroll instead */
    pointer-events: auto;
  }

  #right-col #info-panel3,
  #right-col #info-panelFood,
  #right-col #legend-totals{
    box-sizing: border-box;
    width: 100%;
  }

  #right-col #legend{
    max-width: 100%;
    box-sizing: border-box;
  }

  /* order in the column (top to bottom) */
  #right-col #legend{ order: 1; }
  #right-col #info-panel3,
  #right-col #info-panelFood{ order: 2; }
  #right-col #legend-pieChart{ order: 3; }
  #right-col #legend-totals{
    order: 4;
    margin-top: auto;             /* sits at the bottom if there is room, otherwise directly below */
    font-size: 13.2px;            /* was 12px with scale 1.1 */
    line-height: 20.9px;
  }

  #right-col #to-span{ font-size: 16.5px; }
  #right-col #to-span-note{ font-size: 11px; }

  /* left-hand panel: scroll instead of cutting off the logos on small windows */
  #console{
    top: 0;
    bottom: 0;
    height: auto;
    box-sizing: border-box;
    width: 397px;                 /* 365px of content + 32px padding, as before */
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* short windows: slightly tighter text, as the old layout did */
@media only screen and (min-width: 501px) and (max-height: 800px) {
  #right-col #legend-totals{
    padding: 9px 15px;
    line-height: 17.6px;
  }
}

/* narrow windows (e.g. strong browser zoom): make the column slimmer so it
   does not run into the left-hand panel */
@media only screen and (min-width: 501px) and (max-width: 860px) {
  #right-col{
    width: clamp(230px, calc(100vw - 430px), 345px);
  }
}

/* short windows: the description text and the logos used to be pinned to the
   bottom of the window and ran into the buttons above. Here they simply follow
   the buttons (and the panel scrolls if it is still too tall). */
@media only screen and (min-width: 501px) and (max-height: 790px) {
  #comment{
    position: static;
    bottom: auto;
    margin: 22px 0 0 0;
  }
  .logo-container{
    position: static;
    margin: 14px 0 0 50px;
  }
}

/* narrow windows: tuck the right column to the edge so it clears the left panel */
@media only screen and (min-width:501px) and (max-width:860px){
  #right-col{ right:12px; width:clamp(230px, calc(100vw - 424px), 345px); }
}