/* Scoping all styles to the #appTop30 container to prevent conflicts with parent (e.g., WordPress) styles. */
#appTop30 {
  font-family: helvetica, sans-serif;
}

#appTop30 div.tooltip {
  position: absolute;
  text-align: center;
  font-size: 12px !important;
  width: 170px;
  height: 70px;
  padding: 10px;
  background: #FFF;
  border: solid 1px #999;
  border-radius: 8px;
  pointer-events: none;
}

#appTop30 .legend {
  font-size: 12px;
}

#appTop30 #BarChartTop30d3js{
   position: relative;
}

#appTop30 #BarChartTop30groupLegend{
  font-size: 12px;
}

/* Pour rendre les svg responsive. Etrangement ne semble pas nécessaire. */

/* styles du barchart */

#appTop30 .axis path, #appTop30 .axis line {
   fill: none;
   stroke: #000;
   shape-rendering: crispEdges;
 }

#appTop30 .bar {
   fill: steelblue;
 }

#appTop30 .y.axis path {
   display: none;
 }

#appTop30 .supplierName{
   font-size: 80%;
 }

  /* styles du panneau des blocs de mise en page */
  #appTop30 #BarChartTop30topToolBar{
   font-size: 80%;
  }

  #appTop30 #BarChartTop30topToolBar2{
   font-size: 80%;
   padding: 15px;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start; /* Align to the left */
 }

 #appTop30 #BarChartTop30blocInputYear {
  display: flex;
  align-items: center;
  gap: 8px;
 }

 #appTop30 #BarChartTop30blocInputYear label {
  flex-shrink: 0; /* Prevent label from shrinking */
 }

 #appTop30 #BarChartTop30yearfSelect {
  /* Reset appearance to allow custom styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Modern styling */
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 8px 40px 8px 12px; /* Right padding for arrow */
  border: 1px solid #c2c9d6;
  border-radius: 8px;
  background-color: #fff;
  min-height: 40px;
  box-sizing: border-box;
  cursor: pointer;

  /* Custom dropdown arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235e636e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  }

  #appTop30 #BarChartTop30blocSelectMunicipality{
      flex: 1;
  }

 #appTop30 #BarChartTop30leftColumn{
   flex-basis: 100%; /* Take up full width of the flex container */
   /* float: left; is incorrect inside a flex container and has been removed */
   position: relative; /* Crucial for positioning the absolute child #BarChartTop30suppliersInfos */
   margin: 0;
/*   padding-top: 50px;*/
/*   border: solid 1px red;*/
/*   height: 600px;*/
 }
 #appTop30 #BarChartTop30rightColumn{
/*   float: left;
   width: 20%;*/
   margin: 0;
/*   border: solid 1px #e4e4e4;*/
/*   height: 600px;*/
 }
 #appTop30 #BarChartTop30svgChart{
   font-size: 13px;
 }

 /* styles du panneau d'affiche des infos sur les fournisseurs */

 #appTop30 #BarChartTop30suppliersInfos{
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
   font-size: 15px;
   position: absolute;
   background-color: ghostwhite;
   border: solid 1px #e4e4e4;
   box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.75);
   -moz-box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.75);
   -webkit-box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.75);
 }

 #appTop30 #BarChartTop30controllers{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-around;
}

 /* styles des controlleurs */
 /*#BarChartTop30controllers label{
   margin-right: 4px;
   vertical-align: middle;
 }*/
 /*.appInfo{
   margin-left: 3px;
 }*/
/* .appInfo img{
   vertical-align: middle;
 }*/

 /*#BarChartTop30blocInputTariffPart{
   width: 340px;
   float: left;
 }

 #BarChartTop30blocInputPower{
    width: 305px;
    float: left;
 }
 #BarChartTop30blocInputAuto{
   width: 250px;
   float: left;
 }


 #BarChartTop30blocInputTariffPartFr{
   width: 340px;
   float: left;
 }

 #BarChartTop30blocInputPowerFr{
    width: 305px;
    float: left;
 }
 #BarChartTop30blocInputAutoFr{
   width: 250px;
   float: left;
 }
 #BarChartTop30validatePW{
   margin-left: 3px;
 }

 #BarChartTop30blocInputTariffPartDe{
   width: 340px;
   float: left;
 }

 #BarChartTop30blocInputAutoDe{
   width: 250px;
   float: left;
 }
 #BarChartTop30blocInputPowerDe{
    width: 300px;
    float: left;
 }

 #BarChartTop30blocSelectMunicipality{
    width: 50%;
    float: left;
 }
 #BarChartTop30blocInputYear{
    width: 300px;
    float: left;
 }*/
 /*#BarChartTop30blocInputYear label{
   padding-right: 7px;
   line-height: 25px;
 }*/

 #appTop30 #BarChartTop30zoomControllerReset{
/*    position: relative;
     z-index: -1;
    top: 6px;
    left: 10px;
    width: 125px;
    height: 30px;
    background: transparent url("icon_zoom_retours_de.png") 50% 50% no-repeat;*/
    display: none;
  }
  #appTop30 #BarChartTop30blocZoomController{
    margin-left: 10px;
  }

/*  Classe de wp que l'on aimerait comme référence pour le positionnement des éléments en absolute*/
  #appTop30 .entry-content{
    position: relative;
  }


   #appTop30 #BarChartTop30helpMapFooter{
     font-size:80%;
     margin: 0;
     margin-right: 20px;
   }

   #appTop30 #BarChartTop30moreInfoMapFooter{
     font-size: 80%;
     margin: 0;
     margin-right: 20px;
   }

   #appTop30 #BarChartTop30contactMapFooter{
     font-size: 80%;
     margin: 0;
     margin-right: 20px;
   }

   #appTop30 #BarChartTop30logoSwissEnergyMapFooter img{
     width: 100px;
   }

   #appTop30 #BarChartTop30barChartDescription{
     border: none;
     width: 100%;
     height: 320px;
   }