/* Define que o formulário terá 80% da largura da tela */
.transaction-filter-form {
  width: 80%;
  margin: 0 auto;
  /* Centraliza o formulário na tela */
}

/* As divs de filtro ficam uma embaixo da outra */
.filter-section {
  margin-bottom: 20px;
  /* Adiciona espaçamento entre as divs */
}

/* Faz com que os inputs e labels dentro da div fiquem lado a lado */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Espaçamento entre os inputs */
}

/* Estiliza os inputs e labels para melhor espaçamento */
#periodoSection label,
#statusSection label {
  margin-right: 10px;
  /* Espaço entre os rótulos e os campos */
}

#personalizadoFields,
#mesFields {
  margin-top: 10px;
}

/* Layout Flex para as linhas de filtro */
.filter-row {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  /* Alinha inputs e labels na base se houver diferença de altura */
  flex-wrap: wrap;
}

.filter-row>div {
  flex: 1;
  /* Distribui espaço igualmente */
  min-width: 150px;
}

#personalizadoFields label,
#mesFields label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  /* Destaque leve para labels */
}

#personalizadoFields input,
#mesFields select,
#mesFields input {
  display: block;
  width: 100%;
  padding: 8px;
  /* Melhor área de clique */
  border: 1px solid #ccc;
  border-radius: 4px;
}

button[type="submit"] {
  display: block;
  margin: 0 auto;
  /* Centraliza o botão de filtro */
  padding: 10px 20px;
  font-size: 16px;
}

.filtro {
  display: block;
  width: 100%;
}

/*----------editar transação--------*/
.modal {
  display: none;
  /* Oculta o modal por padrão */
  position: fixed;
  /* Fica fixo na tela */
  z-index: 1000;
  /* Certifica-se de que está na frente */
  left: 0;
  top: 0;
  width: 100%;
  /* Largura total */
  height: 100%;
  /* Altura total */
  overflow: auto;
  /* Habilita scroll se necessário */
  background-color: rgba(0, 0, 0, 0.5);
  /* Fundo semi-transparente */
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  /* Centraliza o conteúdo */
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  /* Largura do modal */
  max-width: 600px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}