/* Importação da fonte Roboto do Google Fonts mantida */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Estilos básicos para corpo e fundo */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}


/* Melhorias nos títulos para melhor visibilidade e estética */
h2, h3 {
  color: #333;
  font-size: 22px; /* Ajuste no tamanho para maior destaque */
}

/* Configurações do container central */
.container {
  max-width: 800px;
  height: 100%;
  min-height: 600px;
  margin: 20px auto 0; /* Espaçamento superior igual à altura do alerta container */
  padding: 22px;
  background-color: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* Estilos para a seleção de candidatos */
.options-container {
  display: flex;
  flex-wrap: wrap; /* Permite que os itens sejam distribuídos em várias linhas */
  justify-content: space-between; /* Distribui o espaço entre os itens */
  align-items: flex-start; /* Alinha os itens no início do contêiner */
  margin-bottom: 20px;
  max-width: 100%; /* Limita a largura máxima do contêiner à largura da tela */
}

.option {
  flex-basis: calc(50% - 13px); /* Ajuste de tamanho com margem, garantindo no máximo 2 itens por linha */
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  padding: 10px;
  margin: 8px 5px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s; /* Suavização da transformação e sombra */
}

.option:hover {
  transform: translateY(-5px);
}

.option img {
  width: 150px; /* Largura fixa */
  height: 150px; /* Altura fixa */
  object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
  border-radius: 15px; /* Borda arredondada, ajustada para ser mais visível */
  margin: 0 auto 10px; /* Centraliza horizontalmente e adiciona margem inferior */
  display: block; /* Torna o img um bloco para permitir margem automática */
}


.option .name {
  font-size: 16px;
}

.details {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
.party {
  font-size: 14px;
  color: #007bff;
}

.selected {
  border-color: #007bff; /* Cor da borda ao selecionar */
  background-color: #e7f0fd; /* Fundo ao selecionar */
}

.disabled {
  opacity: 0.6;
}

/* Estilos para popups, garantindo centralização e tamanho adequado */
.popup, .pre-councilor-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.popup-content, .pre-councilor-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.popup-buttons button, .pre-councilor-buttons button {
  background-color: #2C3E50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  margin: 10px 0;
  cursor: pointer;
}

/* Estilo específico para o botão "Não, Concluir Votação" */
.pre-councilor-buttons .highlighted {
  background-color: #55555563; /* Cinza escuro */

}

.popup-buttons button:hover, .pre-councilor-buttons button:hover {
  background-color: #3c6792; /* Escurece o botão ao passar o mouse */
}

/* Efeito hover específico para o botão "Não, Concluir Votação" */
.pre-councilor-buttons .highlighted:hover {
  background-color: #2C3E50; /* Cinza ainda mais escuro no hover */
}



.highlighted {
  background-color: #f44336;
}

.highlighted:hover {
  background-color: #d32f2f;
}



#pre-councilor-query {
  display: none;
}

#confirmation-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
}
#confirmation-popup .popup-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 300px; /* Fixa a largura em 300 pixels */
  max-width: 100%; /* Define a largura máxima como 100% para garantir responsividade */
  text-align: center;
  animation: fadeIn 0.3s;
}

#confirmation-popup h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333333;
}

#confirmation-popup input[type="text"] {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  font-size: 16px;
}

#confirmation-popup .popup-buttons {
  display: flex;
  justify-content: center;
}

#confirmation-popup .popup-buttons button {
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 16px;
  border-radius: 5px;
  background-color: #2C3E50;
  color: #ffffff;
  border: none;
  cursor: pointer;
}

#confirmation-popup .popup-buttons button:hover {
  background-color: #3c6792;
}

#confirmation-popup .popup-buttons #cancelVotes {
  background-color: #55555563;
}

#confirmation-popup .popup-buttons #cancelVotes:hover {
  background-color: #2C3E50;
}

#confirmation-popup p {
  font-size: 12px;
  color: #666666;
}







.custom-footer {
  background-color: #2C3E50;
  color: #FFFFFF;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
}

.custom-footer a {
  color: #ffffff; /* Mudança para uma cor de destaque para links */
  text-decoration: none;
}

.custom-footer a:hover {
  text-decoration: underline;
}

.custom-footer section {
  padding: 20px;
  margin-bottom: 10px;
}

.custom-footer h2 {
  font-size: 18px; /* Tamanho maior para título da seção */
  margin-bottom: 10px;
  color: #FFFFFF;
}

.custom-footer p {
  font-size: 14px;
  line-height: 1.5; /* Espaçamento de linha para melhor legibilidade */
  margin-bottom: 10px; /* Espaço entre parágrafos */
}

.privacy-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 15px;
  text-align: center;
}

.text-content {
  text-align: justify;
  font-size: 14px;
  line-height: 1.6;
}

.text-content p {
  margin-bottom: 10px;
}

.text-content p strong {
  font-weight: bold;
}







.modal.custom-modal {
  display: none; /* Inicia oculto */
  position: fixed; /* Posicionamento fixo na tela */
  left: 0;
  top: 0;
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  background-color: rgba(0, 0, 0, 0.5); /* Sombreamento de fundo */
  z-index: 999; /* Garante que fique no topo */
}

.modal-content {
  background-color: #FFFFFF; /* Fundo branco para o conteúdo do modal */
  margin: 15% auto; /* Centraliza verticalmente e horizontalmente */
  padding: 20px;
  border-radius: 5px; /* Bordas arredondadas */
  width: 80%; /* Largura do modal */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombreamento para destaque */
}

.close {
  color: #aaaaaa; /* Cor do botão fechar */
  float: right; /* Posição à direita */
  font-size: 28px; /* Tamanho grande para fácil clique */
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000; /* Cor ao passar o mouse e focar */
  text-decoration: none;
  cursor: pointer;
}



#party-filter {
  margin: 10px auto; /* Centraliza o dropdown horizontalmente */
  padding: 4px 8px; /* Padding reduzido para uma aparência mais fina */
  width: 180px; /* Redução da largura para um perfil ainda mais discreto */
  border-radius: 10px; /* Bordas arredondadas para suavidade */
  border: 1px solid #007bff; /* Bordas sutis e coloridas para um toque de estilo */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Sombra muito sutil para profundidade leve */
  font-size: 13px; /* Redução do tamanho da fonte para compactação */
  color: #333; /* Cor de fonte escura para contraste */
  background-color: #fff; /* Fundo branco para clareza */
  cursor: pointer; /* Indica que o elemento é interativo */
  display: block; /* Garante que o dropdown não esteja inline */
  transition: border-color 0.3s; /* Transição suave para mudança de borda */
}

#party-filter:focus {
  border-color: #0056b3; /* Cor mais escura ao focar para feedback visual */
  box-shadow: 0 0 4px rgba(0, 56, 179, 0.25); /* Sombra sutil ao focar */
  outline: none; /* Remove o contorno padrão para limpeza visual */
}

#party-filter option {
  padding: 4px; /* Padding consistente dentro das opções */
  background-color: #f0f0f0; /* Cor de fundo suave para cada opção */
}


#party-filter {
  display: none;
}



.search-container {
  position: relative;
  width: 180px; /* ajuste conforme necessário para seu layout */
}

#name-search-input {
  margin: 10px auto;
  padding: 4px 8px; /* Espaço à direita para o ícone */
  width: 180px;
   /* Faz uso de toda a largura do container */
  border-radius: 10px;
  border: 1px solid #007bff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 13px;
  color: #333;
  background-color: #fff;
  cursor: pointer;
  display: block;
  transition: border-color 0.3s;
}

#name-search-input:focus {
  border-color: #0056b3;
  box-shadow: 0 0 4px rgba(0, 56, 179, 0.25);
  outline: none;
}

#search-icon {
  position: absolute;
  left: 160px; /* Move o ícone para o lado esquerdo */
  top: 50%;
  transform: translateY(-50%);
  background: none; /* Remove qualquer fundo */
  border: none; /* Remove a borda */
  cursor: pointer;
  color: #007bff; /* Ajuste a cor conforme necessário */
}













/* Reset de estilos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.alert-container {
  background-color: #2C3E50;
  color: #fff;
  overflow: hidden;
  position: fixed; /* Fixa o container na janela do navegador */
  top: 0; /* Posiciona o container no topo */
  left: 50%; /* Centraliza horizontalmente */
  transform: translateX(-50%); /* Ajusta para que o centro do container esteja no centro da tela */
  width: 100%; /* Define a largura do container como 100% da largura da janela do navegador */
  max-width: 800px; /* Largura máxima do contêiner */
  padding: 15px;
  z-index: 999; /* Garante que o container fique acima de outros conteúdos */
}

.alert {
  position: absolute; /* Define a posição absoluta para o alerta dentro do container */
  top: 50%; /* Posiciona o alerta no meio vertical do container */
  left: 50%; /* Centraliza horizontalmente */
  transform: translate(-50%, -50%); /* Centraliza horizontalmente e verticalmente */
  white-space: nowrap;
  animation: slide 20s linear infinite;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  font-size: 14px;
}




.alert-container p {
  margin: 0; /* Remova a margem padrão do parágrafo */
}
/* Animação para deslizar o texto */
@keyframes slide {
  0% {
      left: 100%; /* Começa fora do contêiner à direita */
  }
  100% {
      left: -10%; /* Move todo o texto para a esquerda */
  }
}

/* Estilos para o rodapé */
.custom-footer {
  background-color: #2C3E50;
  color: #FFFFFF;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  max-width: 800px; /* Largura máxima igual à largura do contêiner */
  margin: 0 auto; /* Centraliza horizontalmente */
}






/* Media query para telas menores que 410px */
@media (max-width: 409px) {
  body {
      font-size: 14px; /* Ajusta o tamanho da fonte para um equilíbrio entre legibilidade e espaço */
  }

  .container, .custom-footer {
      padding: 20px; /* Mantém um padding reduzido */
  }

  h2, h3 {
      font-size: 15px; /* Reduz ligeiramente o tamanho para caber melhor na tela */
  }

  .options-container {
      padding: 5px; /* Reduz o padding interno para mais espaço */
  }

  .option {
      flex-basis: calc(50% - 10px); /* Ajusta a base do flex para garantir dois elementos por linha com margem apropriada */
      margin: 5px; /* Reduz a margem para economizar espaço */
      padding: 8px; /* Reduz o padding interno */
  }

  .option img {
      width: 120px; /* Ajusta a largura da imagem para manter proporção */
      height: 120px; /* Ajusta a altura da imagem para manter proporção */
  }

  .popup-content, .pre-councilor-content, #confirmation-popup .popup-content {
      width: 90%; /* Ajusta a largura para maior adequação à tela */
  }

  #party-filter {
      font-size: 14px; /* Mantém o tamanho da fonte para legibilidade */
  }

  #search.container {
    font-size: 14px; /* Mantém o tamanho da fonte para legibilidade */
}

  .modal-content {
      width: 95%; /* Ajusta a largura para melhor visualização dentro da tela reduzida */
  }

  .popup-buttons button, .pre-councilor-buttons button {
      font-size: 15px; /* Mantém o tamanho da fonte nos botões para facilidade de clique */
  }
}


/* Media query para telas menores que 360px */
@media (max-width: 359px) {
  body {
      font-size: 12px; /* Reduz mais o tamanho da fonte para economizar espaço */
  }

  .container, .custom-footer {
      padding: 10px; /* Reduz ainda mais o padding */
  }

  h2, h3 {
      font-size: 14px; /* Reduz ainda mais o tamanho do texto para se adequar a telas pequenas */
  }

  .options-container {
      padding: 3px; /* Reduz ainda mais o padding interno para maximizar o espaço */
  }

  .option {
      flex-basis: calc(50% - 8px); /* Ajusta ainda mais a base do flex para manter dois elementos por linha */
      margin: 3px; /* Reduz a margem para economizar espaço */
      padding: 5px; /* Reduz o padding interno */
  }

  .option img {
      width: 100px; /* Reduz ainda mais a largura da imagem */
      height: 100px; /* Reduz ainda mais a altura da imagem */
  }

  .popup-content, .pre-councilor-content, #confirmation-popup .popup-content {
      width: 85%; /* Reduz a largura para uma melhor adaptação à tela reduzida */
  }

  #party-filter {
      font-size: 12px; /* Reduz o tamanho da fonte para caber melhor */
  }

  #search-container {
    font-size: 12px; /* Reduz o tamanho da fonte para caber melhor */
}

  .modal-content {
      width: 90%; /* Mantém a largura ajustada para melhor visualização */
  }

  .popup-buttons button, .pre-councilor-buttons button {
      font-size: 14px; /* Reduz o tamanho da fonte nos botões para manter a funcionalidade */
  }
}


/* Media query para telas menores que 280px */
@media (max-width: 279px) {
  body {
      font-size: 11px; /* Redução adicional no tamanho da fonte */
  }

  .container, .custom-footer {
      padding: 5px; /* Minimiza o padding para aproveitar ao máximo o espaço disponível */
  }

  h2, h3 {
      font-size: 13px; /* Reduz mais ainda o tamanho da fonte para títulos */
  }

  .options-container {
      padding: 2px; /* Reduz ainda mais o padding interno */
  }

  .option {
      flex-basis: calc(50% - 6px); /* Reduz a base do flex para manter dois elementos por linha */
      margin: 2px; /* Diminui a margem para maximizar o espaço */
      padding: 4px; /* Reduz o padding interno */
  }

  .option img {
      width: 80px; /* Reduz ainda mais a largura da imagem */
      height: 80px; /* Reduz ainda mais a altura da imagem */
  }

  .popup-content, .pre-councilor-content, #confirmation-popup .popup-content {
      width: 80%; /* Reduz a largura para ajustar-se melhor ao espaço reduzido */
  }

  #party-filter {
      width: 90%; /* Ajusta a largura para ocupar quase todo o espaço disponível */
      font-size: 11px; /* Diminui ainda mais o tamanho da fonte */
  }

  #search-container {
    width: 90%; /* Ajusta a largura para ocupar quase todo o espaço disponível */
    font-size: 11px; /* Diminui ainda mais o tamanho da fonte */
}

  .modal-content {
      width: 85%; /* Ajusta a largura para melhor visualização dentro da tela reduzida */
  }

  .popup-buttons button, .pre-councilor-buttons button {
      padding: 6px 12px; /* Reduz o padding dos botões */
      font-size: 13px; /* Reduz o tamanho da fonte nos botões */
  }
}








select {
  background-color: white; /* Define o fundo como branco */
  color: black; /* Define o texto como preto */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('path-to-your-custom-dropdown-arrow.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 12px;
  /* Ajustes adicionais */
}

select {
  padding-right: 15px; /* Ajuste conforme necessário para não sobrepor a seta customizada */
  /* Outros estilos */
}

select {
  /* Seus estilos já existentes */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="black" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.5em top 50%; /* Ajusta a posição da seta */
  background-size: 1em; /* Tamanho da seta */
  padding-right: 1.5em; /* Espaço suficiente para mostrar a seta */
}