@charset "utf-8";
/* CSS Document */


.bg-background {
  background-image: url('/assets/img/fundos.jpg');
  /* Substitua 'sua-imagem.jpg' pelo caminho da sua imagem */
  background-size: cover;
  /* Faz a imagem cobrir toda a área */
  background-position: center;
  /* Centraliza a imagem */
  background-repeat: no-repeat;
  /* Evita repetição */
  width: 100%;
  /* Ocupa 100% da largura */
  min-height: 100vh;
  /* Garante que a altura mínima seja 100% da viewport */
  display: flex;
  /* Permite centralizar conteúdo interno, opcional */
  align-items: center;
  /* Centraliza verticalmente o conteúdo, opcional */
  justify-content: center;
  /* Centraliza horizontalmente o conteúdo, opcional */
}

nav.navbar {
  text-align: center;
  color: #ffffff;
  font-size: large;
  background-color: #024b03 !important;
  text-decoration: none !important;
}

nav.navbar a:hover {
  color: #ffffff;
  text-decoration: none;
}

nav.navbar .dropdown-item:hover {
  color: #ffffff;
  background-color: #024b03;
}

.rodape {
  background-color: #024b03;
  color: white;
  min-height: 200px;

}

#spinner-overlay.show {
  display: flex !important;
}

/* Cor padrão: verde escuro */
.btn-verde-personalizado {
  background-color: #024b03 !important;
  color: white !important;
}

/* Quando selecionado */
.btn-verde-personalizado.ativo {
  background-color: #ffc107 !important;
  /* Bootstrap yellow */
  color: #000 !important;
}

.fundo-verde-personalizado {
  background-color: #024b03 !important;
  color: white;
}


.label-scroll {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 25s linear infinite;
}

.label-blink {
  animation: blink 1s step-start infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.scroll-container {
  width: 100%;
  overflow: hidden;
}

#previsao_clima,
#previsao_clima_amanhã {
  font-family: 'Consolas', 'Monaco', 'Source Code Pro', 'Roboto Mono', 'Courier New', monospace;
  font-size: 18px;
  white-space: pre-wrap;
}

/* Estilo para os botões fixos */
.btn-lateral {
  position: fixed;
  right: 0;
  width: 50px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4f446f;
  color: #fff;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: width 0.3s ease;
  overflow: hidden;
  display: none;
  /* Ocultar inicialmente */
  padding-left: 40px;
}

.btn-lateral:hover {
  width: 100px;
  padding-left: 2px;
}

/* Ícone do botão */
.icon {
  font-size: 20px;
}

/* Texto do botão (oculto inicialmente) */
.text {
  margin-left: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-lateral:hover .text {
  opacity: 1;
}

#btnTopo {
  bottom: 20px;
}