/* Map */
#mapa-id {
    height: 100vh;
    /* height: 50vh; */
  }

.highlight {
    font-weight: bold !important;
    color: white !important;
}

.divisao-button {
    width: 175px;
    height: 48px;
    background-color: grey;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 14px !important;
}

.botao-configuracao {
    font-size: 14px !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.container {
    padding: 0px !important;
    margin-bottom: 10px;
}

.descricao {
    width: 250px;
    max-height: 50vh;
    /* max-height: 500px; */
    max-width: 250px;
    font-size: 16px;
    color: #333;
    padding: 10px 8px;
    background-color: hsla(0, 0%, 100%, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    border: 1px solid grey;
    overflow-y: scroll;
    overflow-x: hidden;
}

.descricao::-webkit-scrollbar {
    width: 12px;
}

.descricao::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

.descricao::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 10px;
    border: 2px solid #f1f1f1; 
}

.descricao::-webkit-scrollbar-thumb:hover {
    background: #555; 
}


  #div-titulo {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgb(20, 114, 20);
      padding: 12px 12px;
      margin-bottom: 10px;
      color: white;
      font-weight: bold;
      border: solid 2px black;
      border-radius: 8px;
  }

  .conteudo {
      width: 220px;
      word-break: break-word;
      margin-left: 20px;
  }

  .informacoes-divisoes {
      font-size: 14px;
  }

  /* Barra lateral CSS */
  .sidebar {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      right: 0;
      /* background-color: rgb(207, 207, 207); */
      background-color: #84b384;
      overflow-x: hidden;
      transition: 0.3s;
  }

  .sidebar a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
  }

  .sidebar a:hover {
      color: #f1f1f1;
  }


  .sidebar .closebtn {
      position: absolute;
      top: 0;
      font-size: 36px;
  }

  .slider-tempo {
    margin: 0 12px;    
  }

  #slider-tempo {
    display: flex;
    align-items: center;
    justify-content: center;

  }

  #div-principal {
      transition: margin-right 0.3s;
  }

  .btn-remover-outline {
    outline: none !important;
  }

  .card {
    border-radius: 0px !important;
  }

  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  /* @media screen and (max-height: 450px) {
      .sidebar {padding-top: 15px;}
      .sidebar a {font-size: 18px;}
  } */

  #titulo-barra-lateral {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 0;
      font-weight: bold;
      font-size: 18px;
      /* background-color: rgb(189, 189, 189); */
      background-color: #84b384;
  }

  .tabs:hover {
      cursor: pointer;
  }

  .Teste {
      margin-left: 15px;
  }

  .teste:before {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      transform: rotate(180deg);
  }

  .com-coordenadas {
      display: flex;
      /* background-color: #333; */
      align-items: center;
      justify-content: space-between;
      /* margin-left: 5px; */
  }

  .sem-coordenadas {
      opacity: 0.65;
      color: black;
  }

  .sem-coordenadas:hover {
      background-color: black !important;
  }

  /* Teste */
  .leaflet-verticalcenter {
      position: absolute;
      z-index: 1000;
      pointer-events: none;
      top: 15%; /* possible because the placeholder's parent is the map */
      transform: translateY(-50%); /* using the CSS3 Transform technique */
      padding-top: 10px;
  }

  .leaflet-verticalcenter .leaflet-control {
      margin-bottom: 10px;
  }

  .transparent-modal {
      background-color: transparent !important;
      border: none !important;
  }

  #imagem-divisao:hover {
      cursor: zoom-in;
  }


  .titulo-grafico {
      color: black;
  }

  .container-spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 0;
  }

  /* Botão home */
  #voltar-para-casa {
      background-color: #fff;
      border: 2px solid rgba(0,0,0,0.2);
      background-clip: padding-box;
      box-shadow: none;
      margin-left: 10px;
      margin-top: 10px;
      -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
      position: relative;
      pointer-events: auto;
      width: 40px;
      height: 40px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  #voltar-para-casa:hover {
      background-color: #f0f0f0;
  }

  .leaflet-bar a {
      width: 36px !important;
      height: 36px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
  }

  .icone-home {
      height: 16px;
      width: 16px;
  }

  /* Mudar cursor ao adicionar marcador */
  .leaflet-container.crosshair-cursor-enabled {
      cursor:crosshair;
  }

  .cursor-crosshair {
      cursor:crosshair !important;
  }

  .modal-chart-area {
      background-color: white;
      height: 400px;
      width: 500px;
  }

  .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .clicavel {
      background-color: rgba(70, 70, 70, 0.4);
      padding: 5px;
      border-radius: 4px;
  }

  .clicavel:hover {
      cursor: pointer;
  }


  /* Toggle */
  .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      margin-top: 10px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #04a22c;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider {
      background-color: #04a22c;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }

  .slider.round:before {
      border-radius: 50%;
  }

  .dropdown-item {
      background-color: white !important;
  }

  .dropdown-item:hover {
      cursor: pointer;
      background-color: rgba(200,200,200,0.9) !important;
  }

      /* Select fazenda */
  .select-fazenda {
      width: 198px;
      height: 40px;
      margin: -40px 0 0 62px !important;
      box-shadow: none;
      -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
      position: relative;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid grey;
      font-size: 15px;
      border: 2px solid rgba(0,0,0,0.2);
  }

  .select-fazenda:hover {
      cursor: pointer;
  }

  .teste {
      display: flex;
      align-items: center;
      justify-content: center;
  }

#ckoe {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;

}

#ckode {
    display: flex;
    align-items: center;
    justify-content: center;

}

/* Botão home */
#importar-kml {
    background-color: #fff;
    border: 2px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
    box-shadow: none;
    margin-left: 10px;
    margin-top: 10px;
    -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
    position: relative;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#importar-kml:hover {
    background-color: #f0f0f0;
}

.marcador-wrapper {
    font-size: 20px;
}

.marcador-botao {
   align-items: center;
}

/* Legenda */
.legenda-div {
    width: 84px;
    max-height: 50vh;
    max-width: 84px;
    padding: 10px 8px;
    background-color: rgba(78, 74, 74, 0.7);
    color: black;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    color: white;
}

.legenda-div span {
    color: white;
    font-size: 16px;
}

.legenda-tamanho {
    min-width: 30px;
    min-height: 20px;
    margin-right: 8px;
}

.legenda-div-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

#legenda0 {
    background-color: rgb(0,68,0);
}

#legenda1 {
    background-color: rgb(0,68,27);
}

#legenda2 {
    background-color: rgb(0,109,44);
}
#legenda3 {
    background-color: rgb(35,139,69);
}
#legenda4 {
    background-color: rgb(65,171,93);
}
#legenda5 {
    background-color: rgb(116,196,118);
}
#legenda6 {
    background-color: rgb(161,217,155);
}
#legenda7 {
    background-color: rgb(199,233,192);
}
#legenda8 {
    background-color: rgb(229,245,224);
}
#legenda9 {
    background-color: rgb(247,252,245);
}
#legenda10 {
    background-color: rgb(255,255,255);
}

/* Spinner */
/* .loader {
    width: 8px;
    height: 48px;
    display: inline-block;
    position: relative;
    border-radius: 4px;
    box-sizing: border-box;
    animation: animloader 1s linear infinite alternate;
  }
  
  @keyframes animloader {
    0% {
      box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0), 30px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 50px 0 rgba(255, 255, 255, 0);
    }
    20% {
      box-shadow: 10px 0 green, 20px 0 rgba(255, 255, 255, 0), 30px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 50px 0 rgba(255, 255, 255, 0);
    }
    40% {
      box-shadow: 10px 0 green, 20px 0 green, 30px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 50px 0 rgba(255, 255, 255, 0);
    }
    60% {
      box-shadow: 10px 0 green, 20px 0 green, 30px 0 green, 40px 0 rgba(255, 255, 255, 0), 50px 0 rgba(255, 255, 255, 0);
    }
    80% {
      box-shadow: 10px 0 green, 20px 0 green, 30px 0 green, 40px 0 green, 50px 0 rgba(255, 255, 255, 0);
    }
    100% {
      box-shadow: 10px 0 green, 20px 0 green, 30px 0 green, 40px 0 green, 50px 0 green;
    }
  }
       */


#imagem-gee {
    max-width: 100%;
    height: auto;
}

#div-imagem-gee {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .my-gee-image.leaflet-image-layer {
    display: none;
} */

.marca-dagua {
        position: absolute;
        top: 128px;
        left: 60px;
        opacity: 0.25;
}

#area-grafico-ndvi {
    background-image: url("../images/logoWatermark.png");
    background-repeat: no-repeat;
    background-size: 100px;
    background-position-x: 90%;
    background-position-y: 90%;
}

#botao-area-divisao {
    background-color: #fff;
    border: 2px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
    box-shadow: none;
    margin-left: 10px;
    margin-top: 10px;
    -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
    position: relative;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#botao-area-divisao:hover {
    background-color: #f0f0f0;
}