body {
  background: #fff;
  font-family: helvetica;
  margin: 0;
}

.country {
  fill: #456;
}
.municipality{
  fill: #777;
  cursor: pointer;
}

.canton-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
}

.municipality-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: .3;
}

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

#BarChartTop30Elcomsd3js div.tooltip_elcom {
  position: absolute;
  text-align: center;
  font-size: 11px !important;
  width: 210px;
  height: 70px;
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 15px;
  font-size: 9px;
  background: #FFF;
  border: solid 1px #999;
  border-radius: 8px;
  pointer-events: none;
}


.legend {
  font-size: 12px;
}

#BarChartTop30d3js, #BarChartTop30Elcomsd3js{
  position: relative;
}

#BarChartTop30groupLegend,#BarChartTop30ElcomsgroupLegend{
  font-size: 12px;
}

/* Pour rendre les svg responsive. Etrangement ne semble pas nécessaire. */
.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 70%; /* aspect ratio 70% pour le barchart. 100% dans l'exemple */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

/* styles du barchart */

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

 .bar {
   fill: steelblue;
 }

 .y.axis path {
   display: none;
 }

 .supplierName{
   font-size: 80%;
 }

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

  #BarChartTop30topToolBar2,  #BarChartTop30ElcomstopToolBar2{
   font-size: 80%;
   padding: 15px;
   display: flex;
   flex-wrap:wrap;
   justify-content: space-around;
  }

  #BarChartTop30blocSelectMunicipality,#BarChartTop30ElcomsblocSelectMunicipality{
      flex: 1;
  }

 #BarChartTop30leftColumn,#BarChartTop30ElcomsleftColumn{
/*   float: left;
   width: 80%;*/
   margin: 0;
/*   padding-top: 50px;*/
/*   border: solid 1px red;*/
/*   height: 600px;*/
 }
 #BarChartTop30rightColumn,#BarChartTop30ElcomsrightColumn{
/*   float: left;
   width: 20%;*/
   margin: 0;
/*   border: solid 1px #e4e4e4;*/
/*   height: 600px;*/
 }
 #BarChartTop30svgChart,#BarChartTop30ElcomssvgChart{
   font-size: 13px;
 }

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

 #BarChartTop30suppliersInfos,#BarChartTop30ElcomssuppliersInfos{
   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);
 }

 /*Les 2 types de contenus: */
.aSupplierInfos{
  width: 50%;
  min-width: 360px;
}

.closeSuppliersInfos {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    right: 0;
    background: #cfcfcf url("../img/icon-close.png") 50% 50% no-repeat;
}

.supplierHistoryChart{
  width: 50%;
  min-width: 360px;
}



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

 .supplierTarifData{
   border-collapse: collapse;
   border: solid 1px black;
   text-align: right;
 }
 .supplierTarifData th, .supplierTarifData td{
   padding: 5px;
 }
 .total{
   border-top: solid 1px black;
 }
 .tabLabel{
   text-align: left;
 }
/*  Surchargé par vese.ch qui met les table.th en gris avec image donc indiqué en dure dans le html */
 .entete{
   background-color: #5082b8;
   color: white;
   border: none;
 }

 #BarChartTop30suppliersInfos table th, #BarChartTop30suppliersInfos table td, #BarChartTop30ElcomssuppliersInfos table th, #BarChartTop30ElcomssuppliersInfos table td{
   border: none;
 }


 /* 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;
 }*/

 #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;
  }
  #BarChartTop30blocZoomController{
    margin-left: 10px;
  }

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


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

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

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

   #BarChartTop30logoSwissEnergyMapFooter img{
     width: 100px;
   }

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



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

  .aSupplierInfos{
    width: inherit;
    min-width: 60px;
  }

  .supplierHistoryChart{
    width: inherit;
    min-width: 60px;
  }

  .closeSuppliersInfos {
      width: 22px;
      height: 19px;
      position: absolute;
      top: 0;
      left: 0;
      background: #cfcfcf url("../img/icon-close.png") 50% 50% no-repeat;
  }

}