html {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;} /* IE fix */
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* affichage vertical */
  min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */

  background: #fff;
  font-family: helvetica, sans-serif;
  margin: 0; /* Pour éviter de voir l'ombre tout autour*/
}

/* Style des liens */

a:link{text-decoration:none;color:#134A81;}
a:active{text-decoration:none;color:#666;}
a:visited{text-decoration:none;color:#666;}

/* Structure */

/* Structure du header */
#bandeau{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;;
  box-shadow: 1px 0px 8px #555;
}
#branding{
  margin: 10px;
}
#spacingCentre{
  margin: 10px;
  text-align: center;
  font-size: 200%;
  font-weight: bold;
  color: #00476A;
  flex: 1;  // astuce: bloc au centre qui pousse les autres à gauche et droite
}
#languages{
  margin: 10px;
}

/* Structure du corps central du contenu */
#tronc{
  display: block; /* IE fix */
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; /* occupe la hauteur restante - flex-grow, flex-shrink et flex-basis */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; /* affichage horizontal */
}

/* Structure du menu qui se trouve dans le corps central */
#menuContainer{
  width: 10em;
}
#menuContainer ul{
  padding-left:0;
}
#menuContainer a {
  text-decoration: none;
  display: block;
  padding: 10px;
}
#menuContainer a:hover {
  text-decoration: none;
  color: #fff;
}
.menuitem a{
  color: #111;
}
.menuitem{
  background-color: #DDDDDD;
  list-style-type: none;
  padding: 0px;
  cursor: pointer;
}
.menuitem:hover{
  background-color: #888888;
  color: #fff;
}
.selectedmenuitem{
  background-color: #fdb825;
}
.selectedmenuitem a{
  color: #fff;
}

/* Structure du conteneur du contenu qui se trouve dans le corps central */

#appContainer{
   padding: 20px;
   border: 5px solid #fdb825;
   display: block; /* IE fix */
  -webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1; /* occupe la largeur restante */
}

#appContainer h2{
   margin-top: 0;
   margin-bottom: 10;
   color: #515356; /* gris */
}
.radioStyle{
  margin: 0px;
  padding-left: 20px;
  padding-top: 0;
  padding-bottom: 2px;
  text-indent: -20px;
}
.categorySummary{
  margin-top: 5;
  margin-bottom: 0;
  padding: 0;
  color: #515356; /* gris */
}
#mapTitle p{
  margin-top: 10px;
  margin-bottom: 10px;
  text-align:center;
  font-weight: bold;
  font-size: 150%;
  color: #515356; /* gris */
}

/* Structure du pied de page */
footer{
  text-align: center;
  padding: 10px;
	margin: 0;
}


/*********************** Styles de l'application *********************/

.country {
  fill: #456;
}
.municipality{
  fill: #999;
  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;
  font-size: 10px;
  background: #FFF;
  border: solid 1px #999;
  border-radius: 8px;
  pointer-events: none;
}

.legend {
  font-size: 12px;
}

#mapExpertgroupLegend{
  font-size: 12px;
}

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

 #mapExperttopToolBar{
   font-size: 80%;
   display: flex;
   flex-wrap:wrap;
   justify-content: initial;
  }

 #mapExperttopToolBar2{
   font-size: 80%;
   display: flex;
   flex-wrap:wrap;
   justify-content: initial;
  }

  #mapExpertd3js{
    position: relative;
    display: flex;
    flex-wrap:wrap;
    justify-content: flex-start;
  }

  #mapExpertsvgMap{
    overflow: hidden;
  }

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

 #mapExpertsuppliersInfos{
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
   font-size: 15px;
 }

 #mapExpertcontrollers{
  display:flex;
  flex-wrap: wrap;
  justify-content:initial;
}

#mapExpertblocInputPower{
  margin-right: 20px;
}

#mapExpertblocInputAuto{
  margin-right: 20px;
}

#mapExpertblocInputYear{
  margin-right: 20px;
}


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

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

 .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;
 }

 #mapExpertsuppliersInfos table th, #mapExpertsuppliersInfos table td{
   border: none;
 }

 /*à vérifier si vraiment utile... à voir avec textSearch*/

 #mapExpertblocSelectMunicipality{
    min-width : 50%;
 }
 #mapExpertblocInputYear{
    min-width : 100px;
 }

  #mapExpertblocZoomController{
    margin-left: 10px;
  }

  #mapExpertLoading{
    width: 90px;
    height: 90px;
  }

 /******************************* Affichage responsive *************************/


@media only screen and (max-width: 640px) {
  body {
    min-height: 0;
  }

  #tronc{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
  }

  #menuContainer {
    width: auto;
  }

  #appContainer{
    -ms-flex-preferred-size: auto;
		             flex-basis: auto;
  }
}