#logo {
  max-width: 100%;
  width: calc(5em + 2.5vw);
  display: block;
  float:left;
}  /* Still use the width and height attributes on your <img> tag. 
Modern browsers will use this information to 
reserve space for the image before it loads in, this will help 
to avoid layout shifts as content loads 
#332829
#332C28
#283333
*/


#panel {
  max-width:100%;
  height: auto;
  object-fit: contain;border-radius: 7px;
} 

@-ms-viewport{
  width: device-width;
}


.row {
   max-width: calc(100% + 1em);
  padding-top: calc(65px - 1.5vW);
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  margin-top: 0px;
  margin-bottom: 50px;
  margin-right: 0px;
  
}
.block
{
 display: flex;
    align-items: center;
    justify-content: center;
text-align: center;
width: 300px;height:50px;
/*border-top:    3px solid  #781D00;
border-right:  3px solid #781D00;
border-left:   3px solid  #781D00;*/
border: 2px solid  white;
border-radius: 35px 35px 5px 5px;
font-size:calc(0.9em + 0.3vw);font-weight: bold;
/*
  text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3);
 */ 

  }

#wrap {
  position: relative;
  width: 1024px;
  min-height: 100vh;
  max-width: 100%;
  display: block; 
  margin: 0 auto;
  font-family: sans-serif;
}
.logoframe {
  float: left;
  display: block;
  margin: 0 auto;
  width: 120px;
  max-width: 100%;
  height: 119px;
  max-height: 100%;
}

.header h1 {
  float: left;
  margin-left: 0.4em;
  color:#062705;
  font-size: calc(2.6em + 1.5vw);
   margin-top: calc(15px + 0.5vW);
  margin-bottom: 0px;
}

.login {
  position: absolute;
  right: 2em;
  color:#054C03;
  font-size: calc(1.2em);
  top: calc(6.5em - 4.6vw);
  margin-bottom: 0px;
}

.centrevtrap {color:white; text-decoration: none;}

a.lien:link {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a.lien:visited {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a.lien:hover {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}


h2{margin-top:35px;
  font-size:calc(1.2em + 0.2vw);
   margin-bottom:-3px;color:#062705;
}

p{color:#062705;
}

h3{margin-top:35px;
   margin-bottom:-5px;color:#062705;
}
hr{height:3px;border-width:0;color:#781D00;background-color:#781D00}


.content {
float: left;clear: both; display: block; 
margin-right:0;
margin-bottom:100px;
width: calc(100% - 1em);
margin-top: 1em;
margin-left:0.5em;
font-size:1em;
}

.footer {
clear: both;
position: relative;
height: 60px;
margin-top: -60px;
margin-left:auto;
margin-right:auto;
width: 1024px;
max-width: 100%;
display: block; 
 /*  border-top: 2px solid grey;
 background-color: #D3D7CF;*/
font-size:1.1em;
text-align: center;
}

hr.footbar {height:2px;border-width:0;color:#054C03;background-color:#054C03}



body {
/* background-image: url(/pictures/background3.jpg);
  background-repeat: repeat;
   */
 color: #000000;

}

#intro
{width: 100%; margin-bottom:-15px;margin-top: 20px;}

#wrapperinfo
{width: 100%;display: flex; flex-wrap: wrap; justify-content:space-between;}

#infoin1
{height: 500px;width: 320px;margin-top: 25px;}

#info23
{width: 660px;margin-top: 25px;display: flex; flex-wrap: wrap;justify-content:space-between;}

#infoin2
{height: 500px;width: 280px;margin-top: 0px;}

#titpark
{height: 160px;width: 100%;}

#titsp
{height: 278px;width: 100%; overflow-y: scroll;}

#infoin3
{height: 500px;width: 320px;margin-top: 0px;}

#sptext
{width: 100%; height: 443px; margin-top:7px; overflow-y: scroll;}


@media screen and (max-width: 1029px) {
#infoin1 {width: 500px;height: 100%; margin-top: 25px;margin-left:auto;margin-right:auto;}
#info23 {margin: 0 auto; margin-top:25px;}
}
@media screen and (max-width: 692px) {
#infoin2 {margin-left:auto;margin-right:auto;}  
#infoin3 {margin-left:auto;margin-right:auto; margin-top:50px;}
}

ul {list-style-type: none;padding: 0 auto;}


.species{ background-color: #10530E;
  border: none; width: 80%;font-size:0.9em;
  color: white;
  padding: 10px;
  text-align: center;
  display: inline-block;
  border-radius: 7px; margin-bottom:12px;
  /*  text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3);*/
  }
.parks{ background-color: #10530E;font-size:0.9em;
  border: none; width: 75%;
  color: white;
  padding: 10px;
  text-align: center;
  display: inline-block;
  border-radius: 7px; margin-bottom:12px;
  }





















 .chartWrapper {
            position: relative;
            width: 100%;
        }

        .chartWrapper > canvas {
            position: absolute;
            left: 0;
            top: 0;
            pointer-events:none;
           /* border: 1px dotted green;*/
        }
.chartAreaWrapper {
          overflow-x: scroll;direction: rtl;
            position: relative;
         /*border: 1px dotted orange;*/
            width: 100%;
        }


#graftitle
{width: 100%;}

 h3.titreg {margin-top:5px;
   margin-bottom:-0px;color:#062705;
}
 h4.titreg {margin-top:5px;
   margin-bottom:-0px;color:#062705;
}


#chart-legends
{
width: 100%;}

.wrapper100
{overflow: auto;display: flex; width: 100%;}

#toredowloadwrp
{width:260px; float:left;margin-top:25px;margin-right:40px;}

#textwrp
{max-width: 750px;float:left;margin-left:10px; padding:10px;}

@media screen and (max-width: 700px) {
.wrapper100 {flex-wrap: wrap;}
#textwrp{max-width: 500px;margin: 0 auto;}
#toredowloadwrp {margin: 0 auto;}
}





[class="0-legend"] {
  list-style: none;
  cursor: pointer; 
  padding-left: 0;margin-top: 5px;
}
[class="0-legend"] li {
  display: inline-block;margin-top: 5px;
  padding: 0 5px;
}
[class="0-legend"] li.hidden {
  text-decoration: line-through;
}
[class="0-legend"] li span {
  border-radius: 3px;
  display: inline-block;
  height: 17px;
  margin-right: 10px;
  width: 30px;
  margin-top: 5px;
  margin-left: 10px;
  margin-bottom: -3px;
}

button {
  background-color: #10530E; /* Green */
  border: none;
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 1.1em;
  margin: 0 auto;
}

input {font-size: 1.2em; width:200px;}