/* Para limitar a largura dos botões */
#botaoReconhecimentoVoz, #botaoEnviar {
    width: 500; /* Ou defina um valor fixo como 'width: 200px;' */
}


/* Definindo a fonte e estilo do texto no corpo */
body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #ffffff;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    height: 100vh; /* Preenche toda a altura da tela */
}

/* Centralizando o contêiner do avatar */
#avatar-container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100%; /* Garante que o contêiner ocupe toda a altura disponível */
    margin-bottom: 5px; /* Espaço entre o avatar e o conteúdo abaixo */
}


/* Estilo para quando o campo está focado */
#pergunta:focus {
    border-color: #4CAF50; /* Cor da borda quando o campo estiver em foco */
    outline: none; /* Remove o contorno padrão do navegador */
}

/* Estilos para o contêiner de formulários */
#form-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    position: relative;
    z-index: 1;
    margin-bottom: 100px; /* Adiciona um espaço abaixo do formulário */
}

/* Espaço abaixo do formulário do Mautic */
#mautic-form-container {
    margin-bottom: 40px;
}

.mautic-form {
    margin-bottom: 30px;
}