#mapdiv{ 
    height: 100%;
    width: 100%;
}      

/* 

Interface divided into 4 main parts (boxes)
1. Title box (up)
2. Settings box (left)
3. Map box (center)
4. Results box (right)

 */
 
.box1 {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 1260px;
  height: 66px;
  background-color: #ffffff;
  border: 0.5px solid #666;
  padding: 5px;
}

.box2 {
  position: absolute;
  top: 86px;
  left: 5px;
  width: 339px;
  height: 474px;
  background-color: #f7f5f2;
  border: 0.5px solid #666;
  padding: 5px;
}

.box3 {
  position: absolute;
  top: 86px;
  left: 354px;
  width: 550px;
  height: 474px;
  background-color: #ffffff;
  border: 0.5px solid #666;
  padding: 5px;
}

.box4 {
  position: absolute;
  top: 86px;
  left: 914.5px;
  width: 350.5px;
  height: 474px;
  background-color: #f2f6f7;
  border: 0.5px solid #666;
  padding: 5px;
}

.coordinates {
  position: absolute;
  top: 93%;
  left: 1%;
  width: 225px;
  height: 13px;
  padding: 6px 8px;
  font: 10px Arial, Helvetica, sans-serif;
  background: rgba(255,255,255,1);
  border-radius: 4px;
  border: 2px solid rgba(0,0,0,0.2);
  z-index: 1000;
}

.logo_coord {
  position: absolute;
  top: 90.7%;
  left: 2.3%;
  opacity: 1;
  z-index: 1000;
}

.logo_officiel {
  position: absolute;
  top: 3px;
  left: 6px;
  opacity: 1;
  z-index: 2;
}
 
.bandeau {
  position: absolute;
  top: -15.5px;
  left: 6px;
  opacity: 1;
  z-index: 1;
}

.github {
  width:30px;
  height:30px;
  position: absolute;
  top: 5px;
  left: 1235px;
  opacity: 1;
  z-index: 1;
  cursor: pointer;
  background-image: url('images/github.svg');
  border: none;
  z-index: 1000;
}

.help {
  width:30px;
  height:30px;
  position: absolute;
  top: 40px;
  left: 1235px;
  opacity: 1;
  z-index: 1;
  cursor: pointer;
  background-image: url('images/infos.svg');
  border: none;
  z-index: 1000;
}

.text_settings {
  position: absolute;
  top: 25px;
  left: 20px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15pt;
  color: #777777;
  z-index: 3;
}

.logo_settings {
  position: absolute;
  top: 0px;
  left: 10px;
  opacity: 1;
  z-index: 1000;
}

.box_type_service {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 315px;
  height: 60px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 3;
}

.title_box_type_service {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 315px;
  height: 17px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 1;
}

.logo_type_service {
  position: absolute;
  top: 67px;
  left: 15px;
  opacity: 1;
  z-index: 1000;
}

.liste_deroulante {
  position: absolute;
  top: 115px;
  left: 48px;
  opacity: 1;
  z-index: 100000;
}

.fleche_liste_deroulante {
  position: absolute;
  top: 101.5px;
  left: 275px;
  opacity: 0.6;
  z-index: 3500;
}

.dropdownCell{
    border : 1px solid #bbb;
    width: 254px;
    height: 28px;
    cursor: pointer;
    font-family: arial;
    font-size: 9.5pt;   
    max-height: 28px;
    background: transparent;
    line-height: 30px;
    color:#777777;
    box-shadow: 2px 2px 4px #ddd;
}

.dropdownCell img{
    margin : -3px 3px 0px 3px;
    vertical-align: middle;
    width: 24px;
}

.dropdownPanel{
    border : 1px solid #bbb;
    width: 254px;
    position: absolute;
}

.dropdownOpt{
    background-color: #fff;
    cursor: pointer;
    font-family: arial;
    font-size: 9.5pt;
    color:#777777
}

.dropdownOpt img{
    margin : 0px 3px 0px 3px;
    vertical-align: middle;
    width: 24px;
}

.dropdownOptSelected{
    background-color: #ccc;
}

.box_unites_selectionnees {
  position: absolute;
  top: 160px;
  left: 10px;
  width: 315px;
  height: 80px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 3;
}

.title_box_unites_selectionnees {
  position: absolute;
  top: 160px;
  left: 10px;
  width: 315px;
  height: 17px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 1;
}

.hide_box_unites_selectionnees {
  position: absolute;
  top: 160px;
  left: 10px;
  width: 315px;
  height: 80px;
  padding: 6px 8px;
  background: #000000;
  border-radius: 5px;
  opacity: 0.1;
  z-index: 10000;
}

.logo_unites_selectionnees {
  position: absolute;
  top: 147px;
  left: 15px;
  opacity: 1;
  z-index: 1000;
}

.select_all {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 1;
  position: absolute;
  top: 56px;
  left: 120px;
}

.liste_unites_selectionnees {
  position: absolute;
  top: 195px;
  left: 47px;
  opacity: 1;
  z-index: 1000;
}

.nombre1 {
  position: absolute;
  top: 190px;
  left: 48px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10pt;
  color: #777777;
  z-index: 3;
}
.nombre2 {
  position: absolute;
  top: 210px;
  left: 48px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10pt;
  color: #777777;
  z-index: 3;
}

.hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 1800px;
    min-height: 400px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.hover_close:hover {
    background-color: #ccc;
}

.AMB_hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.AMB_hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.AMB_hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 600px;
    min-height: 400px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.AMB_hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.AMB_hover_close:hover {
    background-color: #ccc;
}

.AMB_checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:50%; /* 2 colonnes */
}

.URG_hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.URG_hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.URG_hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 600px;
    min-height: 400px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.URG_hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.URG_hover_close:hover {
    background-color: #ccc;
}

.URG_checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:50%; /* 2 colonnes */
}

.CDC_hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.CDC_hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.CDC_hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 1200px;
    min-height: 400px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.CDC_hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.CDC_hover_close:hover {
    background-color: #ccc;
}

.CDC_checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:25%; /* 4 colonnes */
}

.SOI_hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.SOI_hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.SOI_hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 1200px;
    min-height: 400px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.SOI_hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.SOI_hover_close:hover {
    background-color: #ccc;
}

.SOI_checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:33%; /* 3 colonnes */
}

.DPS_hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.DPS_hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.DPS_hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 1200px;
    min-height: 400px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.DPS_hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.DPS_hover_close:hover {
    background-color: #ccc;
}

.DPS_checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:33%; /* 3 colonnes */
}

.DAP_hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.DAP_hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.DAP_hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 1500px;
    min-height: 400px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.DAP_hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.DAP_hover_close:hover {
    background-color: #ccc;
}

.DAP_checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:20%; /* 5 colonnes */
}

.PHA_hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.PHA_hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.PHA_hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 500px;
    min-height: 200px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.PHA_hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.PHA_hover_close:hover {
    background-color: #ccc;
}

.PHA_checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:100%; /* 1 colonne */
}

.PHAform {
    display:none;
}

.MED_hover_bg{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000000;
}
.MED_hover_bg .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.MED_hover_bg > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 500px;
    min-height: 200px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
    opacity:0.9;
}
.MED_hover_close {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.MED_hover_close:hover {
    background-color: #ccc;
}

.MED_checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:100%; /* 1 colonne */
}

.MEDform {
    display:none;
}


.text_checkbox {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12pt;
    color: #777777;
	float: left;
}

.checkbox_box {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #777777;
	float: left;
	width:33%; /* 3 colonnes */
}

.bouton_check {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 40px;
  height: 40px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10pt;
  color: #777777;
  z-index: 3;
  cursor: pointer;
  background-image: url('images/check.svg');
  border:none;
}

.bouton_lasso_select {
  position: absolute;
  top: 200px;
  left: 250px;
  width: 40px;
  height: 40px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10pt;
  color: #777777;
  z-index: 1500;
  cursor: pointer;
  background-image: url('images/lasso_select_all.svg');
  border:none;
}

.bouton_lasso_unselect {
  position: absolute;
  top: 200px;
  left: 290px;
  width: 40px;
  height: 40px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10pt;
  color: #777777;
  z-index: 1500;
  cursor: pointer;
  background-image: url('images/lasso_unselect_all.svg');
  border:none;
}

.lassoResult_sel {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  font-size: 0.001pt;
}

.lassoResult_unsel {
  position: absolute;
  top: 0px;
  left: 160px;
  opacity: 0;
}

.radio{
  position: absolute;
  top: 10px;
  left: 250px;
  opacity: 0;
}


.box_choix_duree {
  position: absolute;
  top: 260px;
  left: 10px;
  width: 315px;
  height: 80px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 3;
}

.title_box_choix_duree {
  position: absolute;
  top: 260px;
  left: 10px;
  width: 315px;
  height: 17px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 1;
}

.hide_box_choix_duree {
  position: absolute;
  top: 260px;
  left: 10px;
  width: 315px;
  height: 80px;
  padding: 6px 8px;
  background: #000000;
  border-radius: 5px;
  opacity: 0.1;
  z-index: 10000;
}

.logo_choix_duree {
  position: absolute;
  top: 247px;
  left: 15px;
  opacity: 1;
  z-index: 1000;
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
  position:absolute;
  top: 300px;
  left: 70px;
  z-index: 1500;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 140px;
  height: 4px;
  border-radius: 5px; 
  background: #777777;
  outline: none; /* Remove outline */
  opacity: 0.8; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  border-radius: 50%; 
  background: url('images/bouton_slider.svg');
  cursor: grab;
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
}

.slideLeft {
  position: absolute;
  top: 300px;
  left: 45px;
  width: 20px;
  height: 20px;
  z-index: 2000;
  cursor: pointer;
  background: url('images/left_arrow.svg');
  border:none;
}

.slideRight {
  position: absolute;
  top: 300px;
  left: 220px;
  width: 20px;
  height: 20px;
  z-index: 2000;
  cursor: pointer;
  background: url('images/right_arrow.svg');
  border:none;
}

.nombre_temps_trajet {
  position: absolute;
  top: 13px;
  left: 2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10pt;
  color: #777777;
  z-index: 3;
}

.eraseSquares {
  position: absolute;
  top: 300px;
  left: 245px;
  width: 40px;
  height: 40px;
  z-index: 2000;
  cursor: pointer;
  background-image: url('images/remove_squares.svg');
  border:none;
}

.eraseSelection {
  position: absolute;
  top: 300px;
  left: 290px;
  width: 40px;
  height: 40px;
  z-index: 2000;
  cursor: pointer;
  background-image: url('images/remove_selection.svg');
  border:none;
}



.box_population {
  position: absolute;
  top: 380px;
  left: 10px;
  width: 315px;
  height: 85px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 3;
}

.title_box_population {
  position: absolute;
  top: 380px;
  left: 10px;
  width: 315px;
  height: 17px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 1;
}

.hide_box_population {
  position: absolute;
  top: 445px;
  left: 10px;
  width: 315px;
  height: 20px;
  padding: 6px 8px;
  background: #000000;
  border-radius: 5px;
  opacity: 0.1;
  z-index: 10000;
}

.logo_population {
  position: absolute;
  top: 365px;
  left: 15px;
  opacity: 1;
  z-index: 1000;
}

.radio_population {
  position: absolute;
  top: 420px;
  left: 45px;
  opacity: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9pt;
  color: #777777;
  z-index: 3;
}

.checkbox_pop {
  position: absolute;
  top: 450px;
  left: 45px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9pt;
  color: #777777;
  z-index: 3;
}


.text_calculs {
  position: absolute;
  top: 25px;
  left: 15px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15pt;
  color: #777777;
  z-index: 3;
}

.logo_calculs {
  position: absolute;
  top: 0px;
  left: 15px;
  opacity: 1;
  z-index: 1000;
}

.resultPop {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 150px;
  height: 180px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 3;
}

.titleResultPop {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 150px;
  height: 17px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 1;
}

.logoResultPop {
  position: absolute;
  top: 67px;
  left: 15px;
  opacity: 1;
  z-index: 1000;
}

.resultMWD {
  position: absolute;
  top: 80px;
  left: 185px;
  width: 150px;
  height: 180px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 3;
}

.titleResultMWD {
  position: absolute;
  top: 80px;
  left: 185px;
  width: 150px;
  height: 17px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 1;
}

.logoResultMWD {
  position: absolute;
  top: 67px;
  left: 190px;
  opacity: 1;
  z-index: 1000;
}

.logoSelectionPop {
  position: absolute;
  top: 115px;
  left: 25px;
  opacity: 1;
  z-index: 1000;
}

.logoBassinPop {
  position: absolute;
  top: 160px;
  left: 24px;
  opacity: 1;
  z-index: 1000;
}

.valueSelectedPop {
  position: absolute;
  text-align: center;
  top: 125px;
  left: 50px;
  width: 130px;
  height: 70px;
  opacity: 1;
  z-index: 100;
  background: none;
  font-size: 12pt;
  font-weight: bold;
  font-family: Arial;
  color: #078fcb;
  line-height: 2.5;
}

.valueBassinPop {
  position: absolute;
  text-align: center;
  top: 170px;
  left: 50px;
  width: 130px;
  height: 70px;
  opacity: 1;
  z-index: 100;
  background: none;
  font-size: 12pt;
  font-weight: bold;
  font-family: Arial;
  color: #44b8ea;
  line-height: 2.5;
}

.valuePercPop {
  position: absolute;
  text-align: center;
  top: 225px;
  left: 45px;
  width: 100px;
  height: 70px;
  opacity: 1;
  z-index: 100;
  background: none;
  font-size: 15pt;
  font-weight: bold;
  font-family: Arial;
  color: #44b8ea;
  line-height: 1.75;
}

.percBarBckgr {
  position: absolute;
  text-align: center;
  top: 255px;
  left: 67px;
  width: 50.4px;
  height: 3px;
  opacity: 1;
  z-index: 100;
  background: #c0c0c0;
}

.logoSelectionMWD {
  position: absolute;
  top: 115px;
  left: 200px;
  opacity: 1;
  z-index: 1000;
}

.logoBassinMWD {
  position: absolute;
  top: 160px;
  left: 199px;
  opacity: 1;
  z-index: 1000;
}

.logoEval {
  position: absolute;
  top: 210px;
  left: 199px;
  opacity: 1;
  z-index: 1000;
}

.valueSelectedMWD {
  position: absolute;
  text-align: center;
  top: 125px;
  left: 240px;
  width: 110px;
  height: 70px;
  opacity: 1;
  z-index: 100;
  background: none;
  font-size: 15pt;
  font-weight: bold;
  font-family: Arial;
  color: #008fcc;
  line-height: 2.5;
}

.valueBassinMWD {
  position: absolute;
  text-align: center;
  top: 170px;
  left: 240px;
  width: 110px;
  height: 70px;
  opacity: 1;
  z-index: 100;
  background: none;
  font-size: 15pt;
  font-weight: bold;
  font-family: Arial;
  color: #44b8ea;
  line-height: 2.5;
}

.positiveMeanDeviation {
  position: absolute;
  text-align: center;
  top: 210px;
  left: 240px;
  width: 110px;
  height: 70px;
  opacity: 1;
  z-index: 100;
  background: none;
  font-size: 13pt;
  font-weight: bold;
  font-family: Arial;
  color: #ff5555;
  line-height: 2.5;
}

.negativeMeanDeviation {
  position: absolute;
  text-align: center;
  top: 210px;
  left: 240px;
  width: 110px;
  height: 70px;
  opacity: 1;
  z-index: 100;
  background: none;
  font-size: 13pt;
  font-weight: bold;
  font-family: Arial;
  color: #63c163;
  line-height: 2.5;
}

.badEval {
  position: absolute;
  text-align: center;
  top: 240px;
  left: 245px;
  width: 100px;
  height: 70px;
  opacity: 1;
  z-index: 200;
  background: none;
  font-size: 7pt;
  font-family: Arial;
  color: #ff5555;
  font-weight: bold;
  white-space:nowrap
}

.goodEval {
  position: absolute;
  text-align: center;
  top: 240px;
  left: 245px;
  width: 100px;
  height: 70px;
  opacity: 1;
  z-index: 200;
  background: none;
  font-size: 7pt;
  font-family: Arial;
  color: #63c163;
  font-weight: bold;
  white-space:nowrap
}

.box_hist {
  position: absolute;
  top: 280px;
  left: 10px;
  width: 325px;
  height: 183px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
}

.title_box_hist {
  position: absolute;
  top: 280px;
  left: 10px;
  width: 325px;
  height: 17px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #777777;
  z-index: 1;
}

.logo_hist {
  position: absolute;
  top: 266px;
  left: 15px;
  opacity: 1;
  z-index: 1000;
}

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

.axis text {
    font-family: sans-serif;
    font-size: 10px;
    font-weight: bold;
    opacity:0.5;
}

.bar {
    fill: #44b8ea;
}

.bar:hover {
    fill: #00a4dd;
}


.d3-tip {
  font-family: Arial;
  font-size: 10pt;
  font-weight: bold;
  line-height: 1;
  padding: 4px;
  background: #00a4dd;
  color: #f0f0f0;
  border-radius: 2px;
  z-index:10000;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: #00a4dd;
  content: "\25BC";
  position: absolute;
  text-align: center;
}

.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.axisLabels {
  font-family: Arial;
  font-size: 6pt;
  fill: #777777;
  z-index:10000;
}