@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  font-family: "Montserrat", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  user-select: none;
}

.leaflet-control-zoom {
  position: fixed;
  right: 1vw;
}

.leaflet-container {
  height: 100% !important;
  width: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

.tag-filter-tags-container {
  left: 3vw;
  color: rgba(255, 255, 255, 0.644);
}

.leaflet-control-attribution {
  margin-bottom: 15vh !important;
  color: rgb(138, 138, 138) !important;
  text-decoration: none !important;
  margin-right: 0vw !important;
  background-color: rgba(255, 255, 255, 0.407) !important;
}

.leaflet-control-attribution a {
  text-decoration: none !important;
}

#rodape {
  position: fixed;
  bottom: 0;
  height: 13vh;
  width: 100%;
  max-width: 100%;
  padding: 15px 0;
  background-color: #ffffff;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  box-shadow: 2px 0 10px rgb(0, 0, 0);
  border-radius: 25px 25px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  position: relative;
  margin: 0px 10px;
}

.item span {
  font-size: 14px;
  position: absolute;
  top: -20px;
  left: 58%;
  transform: translateX(-50%);
  font-weight: 600;
}

#rodape img {
  width: auto;
  height: 50px;
}

@media screen and (max-width: 720px) {
  #rodape {
    display: flex;
    flex-direction: row; /* Garante que os itens fiquem em uma linha */
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    overflow-x: auto; /* Permite o scroll horizontal se necessário */
    padding: 10px 0;
    height: 14vh; /* Ajusta a altura do rodapé conforme o conteúdo */
    width: 100%; /* Garante que o rodapé ocupe toda a largura disponível */
  }

  #rodape .group {
    display: flex;
    flex-wrap: nowrap; /* Não permite que os itens quebrem a linha */
    justify-content: center; /* Garante que os itens da group sejam centralizados */
    align-items: center; /* Garante que os itens da group sejam centralizados verticalmente */
  }

  #rodape .item {
    order: 0;
    margin: 0 7px; /* Ajusta a margem entre os itens */
    width: auto;
    flex-shrink: 1; /* Permite que as imagens encolham, se necessário */
  }

  #rodape img {
    width: auto;
    height: 10px; /* Ajusta a altura das imagens */
    max-width: auto; /* Garante que as imagens não fiquem muito grandes */
    min-width: auto; /* Garante que as imagens não fiquem pequenas demais */
    margin: 0 5px; /* Ajusta o espaçamento entre as imagens */
  }

  #rodape .item span {
    top: -10px;
  }

  .item span {
    font-size: 4px;
  }
}

@media screen and (max-width: 1270px) {
  .leaflet-control-zoom {
    visibility: hidden;
  }
}