/****************** ESTILO DO MAPA E DO HTML - BODY ******************/  

        #map { cursor: pointer !important; }
        html, body, #map {
            width: 100%;
            height: 100vh;
            padding: 0;
            margin: 0;
            font-family: Arial, sans-serif;
            background-size: cover;
            z-index: 10;            
        }  

      .icon {
        max-width: 70%;
        max-height: 70%;
        margin: 4px;
      } 

        .area-tooltip {
            background: #363636;
            background: rgba(0,0,0,0.5);
            border: none;
            color: #f8d5e4;
        }   

.leaflet-control-layers {
  left: 0px;
  /*top: 75px; -- no caso de não ter o brasão do Governo */
  top: 0px;
  overflow-y: hidden;
}

.img-icon{
    height: 25px;
    width: 25px;
    padding: 2px;    
    vertical-align: middle;
    }

/******************* ESTILO DO DIV DAS INFORMAÇÕES **********************************/
.informations {
  background-color: rgb(255,255,255,0.5);
  width: 40%;
/*  height: 80%;*/
  max-height: 80%;
  position: fixed;
  margin-top: 5%;
  margin-bottom: 5%;
  margin-left: 30%;
  margin-right: 30%;
  z-index: 6500;
  display: none;
  overflow-y: auto;
  font-family: Arial;
}

/* **************  MODAL ***************** */
  /* Set a style for all buttons */
  .modal_button {
      background-color: rgb(0, 100, 0, 0.6);
      color: white;
      padding: 10px;
      border: none;
      width: 70px;
      border-radius: 5px;                  
      height: 35px;
  }
  .modal_button :hover {
      opacity: 0.8;
  }
  /* Extra styles for the cancel button */
  .cancelbtn {
      padding: 10px;
      background-color: rgba(255, 45, 0, 0.8);
      color: white;
      border: none;
      width: 70px;
      height: 35px;   
      border-radius: 5px;            
  }

  /* Center the image and position the close button */
  .imgcontainer {
      text-align: center;
      /* topo | direita | inferior | esquerda */
      margin: 24px 0 12px 0;
      padding: 10px;
      position: relative;
  }
  .container {
      padding: 16px;
  }

  /* The Close Button (x) */
  .close {
      position: absolute;
      right: 20px;
      top: 0;
      color: #000;
      font-size: 30px;
      font-weight: bold;
  }
  .close:hover,
  .close:focus {
      color: rgba(255, 45, 0, 0.8);
      cursor: pointer;
  }
  /* Add Zoom Animation */
  .animate {
      -webkit-animation: animatezoom 0.6s;
      animation: animatezoom 0.6s
  }

  @-webkit-keyframes animatezoom {
      from {-webkit-transform: scale(0)} 
      to {-webkit-transform: scale(1)}
  }
      
  @keyframes animatezoom {
      from {transform: scale(0)} 
      to {transform: scale(1)}
  }

  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
      span.psw {
        display: block;
        float: none;
      }
      .cancelbtn {
        width: 100%;
    }
}
/* ************** LOGIN MODAL ***************** */ 

.leaflet-marker-pane  { z-index: 3960; }
.leaflet-popup-pane   { z-index: 3970; }


/*********************************  BARRA DE MENU *********************************/  

.img-circle{
  border: 1px solid #FFFFFF;    
  background-color: #ddd;
  border-radius: 50%;
  height: 40px;
  object-fit: cover;
  width: 40px;  
  opacity:70%;
  margin: 0 5px 5px 0;
  vertical-align: top;  
}

.img-circle:hover {
  opacity:100%;
}

.img-off{
  border: 1px solid #FFFFFF;    
  background-color: #ddd;
  border-radius: 50%;
  height: 20px;
  object-fit: cover;
  width: 20px;  
  opacity:70%;
  /*margin: 0 5px 5px 0;*/
  vertical-align: top;  
}

/************************************* ICONES *************************************/

.head-on {
            position: fixed; 
            top: 0px;
            width: 100%; 
            height: 70px;
            z-index: 50;
            left: 0px;   
            text-align: left;  
}

.head-on_2 {
            position: fixed; 
            top: 0px;
            width: 25%; 
            height: 70px;
            z-index: 405;
            left: 50%;   
            text-align: left;  
}

/* RESPONSIBLE DIVS */
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column_d10 {
  background: rgb(0, 100, 0, 0.5);
  border-radius: 15px;
  float: left;
  width: 77px;
  margin: 2px 2px 2px 2px;
  font-family: Arial, sans-serif;  
  font-size: 9px;        
  font-weight: bold;
  text-align: center;
}

.column_d10:hover {
  background: rgb(0, 100, 0, 0.9);
  color: white;
}

/* LOGOS PARQUES E ICONES */ 
  .servicos{
              border: 1px solid #FFFFFF;    
              background-color: white;
              border-radius: 50%;
              height: 30px;
              object-fit: cover;
              width: 30px;  
              /* topo | direita | inferior | esquerda */
              margin: 2px 2px 2px 2px;
  }  


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column_d10 {
    width: 50px;
}


/* ESTILO DAS FERRAMENTAS - ICONES NO FINLA DA PÁGINA*/
 .tools  {
  position: fixed; 
  width: 20%; 
  height: 70px;
  z-index: 1500;
  left: 40%;   
  text-align: center;  
  bottom: 0;
  z-index: 1000;
}