/*
copyright helene tonchia 2018
*/
/* 
    Created on : 24 juin 2018, 18:13:47
    Author     : helenetonchia
*/

 .legendeColor {
    width: 300px;
}
.circleBase {
    width: 16px;
    height: 16px;
    border-radius: 50%;

    behavior: url(../pie.html); /* remove if you don't care about IE8 */
}

.cGold {
    background: Gold;

}
.cSaddleBrown {
    background: saddlebrown;

}
.cBlack {
    background: black;

}
.cDarkGreen {
    background: DarkGreen;

}
.cMediumSeaGreen {
    background: mediumseagreen;

}
.cValide {
    background: white;
    border: 1px solid dodgerblue;
}
.cBlue{
    background: blue;

}
.cAttente {
    background: white;
    border: 1px solid deeppink;
}
.cNo {
    background: white;
    border: 1px solid purple;
}

.tooltip-inner {
    border: 2px solid white;
    white-space: pre-wrap;
    max-height: 700px;
    max-width: 700px;
    overflow-y: auto;
    text-align: left;
}
.ttimg {
    width: 400px;
    height: auto;
}
hr {
    margin-top: 10px;
    margin-bottom: 10px;
}
.showmore:before {
    font-family: "Glyphicons Halflings";
    content: "\e114";
    float: left;
    margin-right: 3px;
}
/* Icon when the collapsible content is hidden */
.showmore.collapsed:before {
  content: "\e080";
}  

.ol-overlay-container {
   width:94%;
   max-height: 710px;
   max-width: 740px;
}
.wrap { 
   /*to force wrap of long lines in the description*/
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}
.arrow_box {
   background: #fff;
   border: 1px solid #003c88;
  /*/width:100%;*/
   max-height: 710px;
   /*max-width: 710px;*/
   position: relative;

}
.arrow_box:after, .arrow_box:before {
   top: 100%;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;

}

.arrow_box:after {
   border-color: rgba(255, 255, 255, 0);
   border-top-color: #fff;
   border-width: 10px;
   margin-left: -10px;

}
.arrow_box:before {
   border-color: rgba(153, 153, 153, 0);
   border-top-color: #003c88;
   border-width: 11px;
   margin-left: -11px;


}
.arrow_box {
    border-radius: 5px;
    padding: 10px;

}
.popupdiv{
    display: block;
    overflow-y: scroll;
    max-height: 80%;
    /*width:90%;*/
    max-height: 700px;
    max-width: 700px;
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}
.popupdiv img{
  display: block;
  max-width:500px;
  max-height:500px;
  width: auto;
  height: auto;
}
.darkbw{
    color: darkblue;
}
.lightbw{
    color: lightskyblue;
}
.darkhr{
    border-top-color: dimgrey;
}
.lighthr{
    border-top-color: lavender;
}
::-webkit-file-upload-button {
/*  background: black;
  color: red;*/
  height:25px;
  font-size: 16px;

}
.HTtitre{
    font-size:large;
}
a:focus {
    outline: none;
}
.bg { 
    /* The image used */
    background-image: url("../png/ressault.png");

    /* Full height */
    height: 135px; 

    /* Center and scale the image nicely */
    /*background-position: center;*/
    background-repeat: repeat-x;
    background-size: cover;
}
    .error {color: #FF0000;}
    h1 {
        font-weight:bold;
        font-family: 'Encode Sans', sans-serif;
        font-size:24px;
    }
    h2 {
        font-weight:bold;
        font-family: 'Encode Sans', sans-serif;
        font-size:22px;
    }
.help-tip{
    position: absolute;
    top: 0px;
    right: -5px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
    border:0px;
}

.help-tip:before{
    content:'? ';
    /*bottom:20px;*/
    font-weight: bold;
    color:#fff;
}
.HTtooltip {
     outline-style: none;
}
.HTtooltipTop {
     outline-style: none;
}

.HTtooltip .tooltiptext{
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
    font-size: 14px;
    font-weight: normal;

    }
 .HTtooltipTop+.tooltiptext{
    visibility: hidden;
    width: 120px;
    display: block;
    white-space: normal;
    background-color: yellow;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 115%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
    font-size: 14px;
    font-weight: normal;
    border :1px solid black;
    overflow-wrap:  break-word;
    }    


.HTtooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}
.HTtooltipTop+.tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color:  black transparent transparent  transparent;
}

.HTtooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
} 

.HTtooltipTop:hover+.tooltiptext {
    visibility: visible;
    opacity: 1;
} 

.HTtooltip .tooltiplarge{
    width: 300px;
}

.HT90 {
    width: 90%;
}
.vote{
    white-space: nowrap;
}
.mouseActiv{
    cursor: pointer;
    font-size: larger;
}
.layerActiv{
    font-weight:bolder;
    color: #5F8100;
    color: #356000;

}
.ol-btnc{
     position: absolute;
     top:10px;
     left: 40px;
     visibility: visible;
     /*background-color:     ;*/
}
.ol-ls{
     position: absolute;
     top:10px;
     right: 8px;
     visibility: visible;
     /*background-color: yellow    ;*/
}

.red {
    font-size: larger;
    color: red;
    background-color: black;
}
.vert-mdb{
        color: rgb(153, 204, 0);
    }
.vert-mdb-darker{
    /*color: rgb(153, 204, 0);*/
        color: #82B100;
        color: #5F8100;
 }
 .fgRed {
    background-color: white;   
    color: red;
    border: 1px solid black;
 }
.bgBlack{
    background-color: black;   
    color: white;
    border: 1px solid black;
}
.bgSaddleBrown{
    background-color: saddlebrown;   
    color: white;
    border: 1px solid black;

}

.bgGold{
    background-color: Gold;   
    color: black;
    border: 1px solid black;
}
.bgMediumSeaGreen{
    background-color: MediumSeaGreen;   
    color: white;
    border: 1px solid black;
}
.bgDarkGreen{
    background-color: DarkGreen;   
    color: white;
    border: 1px solid black;
}
.bgBlue{
    background-color: Blue;   
    color: black;
    border: 1px solid black;
}
.bgYellow{
    background-color: Yellow;   
    color: black;
    border: 1px solid black;
}
.bgOrange{
    background-color: Orange;   
    color: black;
    border: 1px solid black;
}
.btn, .btn:focus{
    outline: none;
}
textArea:focus {
    outline: none;
}
p{
        font-family: 'Encode Sans', sans-serif;
        font-size:16px;
}
.text-center {
    text-align: center;
}
footer {
    background: black;
    min-height: 90px;
    color: rgb(153, 204, 0);
}
.logo, .logo img {
    height: 62px;
    width: 90px;
    position: absolute;
    left:5px;
}
.star{
    /*font-size: 200%;*/
    color: orange;
    background:none;
    box-shadow: none;
    border:none;
    padding:0px;
    -webkit-appearance: ok;
}
#moins{
    color: black;
    font-style: italic;
}
#doc{
    display:block;
}
body {
    font-size: 100%;
    line-height: 1.2em;
    font-family: 'Lato', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Encode Sans', sans-serif;
    margin: 0;
    margin-left: 5px;
    height: 100%;
    -webkit-text-size-adjust: none;
    font-size: 16px;
    font-weight: normal;
    color: #5F8100;
}

#map:focus {
    outline: #4A74A8 solid 0.15em;
} 
#map {
    position:relative;
    height: 90vh;
    width: 100%;
    margin-bottom: 10px;
    margin-left: 5px;

    /*max-height: 740px;*/
    border-right: solid gray 23px;
/*            max-width: 740px;
float:left*/
}
#rectangle {
width: 23px;
height: 50px;
background: lightgray;
position:absolute;
top : 40%;
left: 100%;
border-top: 2px;
border-top-style: solid;
border-top-color: #eeeeee;
border-bottom: 2px;
border-bottom-style: solid;
border-bottom-color: darkslategray;
z-index: 100;
}
input, textarea {
    line-height: 1.2em;
    font-family: 'Encode Sans', sans-serif;
    /*font-family: 'Lato', sans-serif;*/
    margin: 0;
    /*height: 120%;*/
    -webkit-text-size-adjust: none;
    font-size: 16px;
    font-weight: normal;
    color:   #324400;
}
input {

}
input[type:"text"] {
    /*height: 120%;*/
}
input.ad{
    width:90%;
    max-width: 725px;
}
input.nobox{
    box-shadow: none;
    border: none;
}
input.nobox::placeholder {
    color:grey;
}
.large{
    width:98%;
}
input.large {
    /*height: 15px;*/
    font-family: 'Encode Sans', sans-serif;
    /*width: 50em;*/
    width:98%;
    margin: 2px;
    margin-bottom: 10px;
    max-width: 740px;
}

.msg {
    color:black;
}

textArea {
    width:98%;
    /*width: 50em;*/
    max-width: 740px;
}
.city, .city:focus {
    width:98%;
    /*outline: none;*/
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    margin: 0px;
    font-size: 16px;
    max-width: 740px;

}
.nomusuel, .nomusuel:focus {
    outline: none ;
    -webkit-box-shadow: none;
    box-shadow: none;
    /*border: none;*/
    display:table-cell;
    width:100%;
}

.cityinput {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    display:table-cell;
    width:100%;
}
.dat, .dat:focus{
    font-family: 'Encode Sans', sans-serif;
    width: 11em;
    outline: none;
    box-shadow: none;
    border: none;
    margin: 2px;
}
.init {
    font-family: 'Encode Sans', sans-serif;
    width: 4.5em;
    outline: none;
    box-shadow: none;
    /*border: none;*/
    margin: 2px;
}
.ll, .ll:focus{
    font-family: 'Encode Sans', sans-serif;
    width: 10em;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    margin: 2px;
    font-size: 16px;
}
.nowrap{
    white-space: nowrap;
}

#iuploadImage{
    margin-top: 5px;
}

.HTmenu, .HTmenu:hover {
    color: #5F8100;
    cursor: pointer;
    padding-bottom: 5px;
}

.HTmenu:before{
    font-family: "Glyphicons Halflings";
    content: "\e114";
    float: left;
    margin-right: 5px;
    color: inherit
}

/* Icon when the collapsible content is hidden */
.HTmenu.collapsed:before {
  content: "\e080";
}
#menuFAQ{
    outline-style: none;
    padding-bottom: 5px;
    line-height: 2em;
}
#faqs{
   margin-right: 5px; 
}
.panel{
    border-color: #ddd;
    margin-top: 5px;
}
.panel-heading{
    background-color: #e0ffb2;

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

    #map {
height: 90vh;
width: 100%;
margin-bottom: 10px;
margin-left: 5px;
max-height: none;
/*        max-height: 600px;
max-width: 740px;*/
float:none;
border: blue 1px solid;
border-right: solid blue 23px;
}
.ol-overlay-container {
   width:94%;
   max-height: 700px;
   max-width: 700px;
}
.tooltip-inner {
    max-height: 700px;
    max-width: 700px;
}
}
@media only screen and (max-width: 414px) and (min-height: 500px) and (orientation: portrait){
    .remove{
        font-size :x-large;
    }
    .ttimg {
    width: 300px;
    height: auto;
}
    input.large, textArea, .city {
       width:95%; 
    }
    input.ad{
        width:88%;
    }
    .ll {
        width : 22%;
    }
    #map {
max-height: 1000px;
/*min-height: 460px;*/
width: 100%;
height: 85vh;
margin-bottom: 10px;
margin-left: 0px;


max-width: 740px;
border:solid 0px;
border-right: solid rgb(153, 204, 0) 5px;
border-right: solid #be5768 23px;

float:none;
}
.ol-overlay-container {
   width:90%;
   /*max-height: 450px;*/
   max-height: 2000px;
   max-width: 700px;
}
.tooltip-inner {
    width:90%;
    max-height: 350px;
    max-width: 600px;
}
.arrow_box {

/*           width:90%;

   max-width: 700px;*/
}
.arrow_box:after {
   margin-left: -10px;

}
.arrow_box:before {

   margin-left: -11px;

}
.popupdiv{
    display: block;
    overflow-y: scroll;
    /*max-height: 80%;*/

/*            width:95%;
    max-height: 2000px;*/
    max-width: 650px;
}
.popupdiv img{
  display: block;
  max-width:400px;
  max-height:300px;
  width: auto;
  height: auto;
  margin: 10px;
}
}
@media only screen and (max-height: 414px) and (orientation: landscape){
     .remove{
        font-size :x-large;
    }
    input.large, textArea, .city {
       width:100%; 
    }
    input.ad{
        width:91%;
    }
    .ll {
        width : 22%;
    }
    #map {

        width: 100%;
        margin-bottom: 10px;
        margin-left: 5px;
        /*max-height: 90%;*/
        height: 90vh;
        /*max-height: 650px;*/
        /*max-width: 760px;*/
        border:solid 1px;
        border-right: solid rgb(153, 204, 0) 25px;

        float:none;
    }
.ol-overlay-container {
   width:93%;
   max-height: 600px;
   max-width: 700px;
}
.tooltip.in {
   opacity:1;
}
.tooltip-inner {
    width:93%;
    max-height: 600px;
    max-width: 700px;
}
.arrow_box {
   /*width:95%;*/
   max-height: 2000px;
   /*max-width: 600px;*/
}
.arrow_box:after {
   border-width: 10px;
   margin-left: -10px;

}
.arrow_box:before {
   border-width: 11px;
   margin-left: -11px;

}
.popupdiv{

    max-height: 80%;
   /*width:90%;*/
    max-height: 2000px;
    /*max-width: 650px;*/
}
.popupdiv img{
  display: block;
  max-width:400px;
  max-height:200px;
  width: auto;
  height: auto;
} 
}
@media only screen and (min-height: 550px) {
    #map{
        max-height: 500px;
        border-right: solid DeepPink 25px;
    }
}