.reload-button {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ff0000; /* Cor do fundo do botão de reload */
    color: #ffffff;
    padding: 10px;
    border-radius: 50%; /* Torna o botão redondo */
    font-size: 16px; /* Tamanho do texto */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.reload-button:hover {
    background-color: #ff5d5d; /* cor do fundo de quando passa o mouse do botao de reload */
    color: rgb(0, 0, 0)
}

/* Estilo para o ícone de voltar */
.reload-button i {
    font-size: 1.2em; /* Ajuste do tamanho do ícone */
}

.result-container {
    text-align: center;
    font-size: 16px; /* Reduzir o tamanho da fonte */
    margin-bottom: 0px; /* Espaço abaixo dos resultados */
}

.result-header {
    font-size: 1.2em; /* Tamanho maior para o título */
    font-weight: bold;
    color: #000000; /*Cor da fonte dos titulos dos resultados*/
    margin-bottom: 1px; /* Reduzir o espaçamento abaixo do título */
}

.result-header .value {
    display: block;
    font-size: 0.9em; /* Tamanho da fonte dos números ligeiramente reduzido */
    color: #000000; /* Números em verde */
    margin-top: 6px; /* Espaço entre o texto e o número */
}

.result-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap; /* Permite que os itens quebrem linha em dispositivos menores */
}

.result-item {
    display: inline-block;
    width: 48%; /* Ajustar a largura para caber lado a lado */
    margin: 0 4%; /* Espaçamento entre os itens */
    text-align: center;
}

.result-item .value {
    display: block;
    font-size: 0.9em; /* Tamanho da fonte dos números aumentado em 2px */
    color: #000000; /* Números em verde */
    margin-top: 5px; /* Espaço entre o texto e o número */
}

.result-spacer {
    display: block;
    height: 15px; /* Espaçamento vertical */
}

.result-occupation {
    color: #000000; /* Cor azul padrão */
    font-weight: bold;
    margin-top: 10px;
}


#enviar-dados {
    display: block;
    margin: 5px auto; /* Aumenta o espaço embaixo do botão */
    padding: 20px 20px;
    margin-top: 0px;
    background-color: #ff0000; /* Cor do fundo do botão de enviar final */
    color: #ffffff;/*cor da fonte do botão de enviar final*/
    border: none;
    border-radius: 30px; /* Borda arredondada */
    font-size: 1.5em; /* Fonte maior */
    font-weight: bold; /* Negrito para destacar */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

#enviar-dados:hover {
    background-color: #ff6363; /* cor do fundo do botão de enviar final quando passa o mouse */
    transform: scale(1.05); /* Efeito de hover para destaque */
}

#enviar-dados i {
    margin-right: 20px; /* Espaço entre o ícone e o texto */
}

.error {
    border-color: red !important;
    background-color: #FFDDDD !important; /* Fundo levemente avermelhado */
    color: red;
}
.error-input {
    border-color: red !important;
    background-color: #fd999900 !important; /* Fundo levemente avermelhado */
}




/* Estilo para o formulário de ocupação */
.form-container-ocupacao {
    text-align: center;
    margin-top: 20px;
}

.form-container-ocupacao h1 {
    font-size: 1.4em;
    margin-bottom: 20px;
    color: #000000; /* Cor primeiro titulo do form ocupaçao */
}

.form-container-ocupacao .form-group-container {
    display: flex;
    flex-direction: column; /* Alinhar verticalmente */
    align-items: flex-start; /* Alinhar itens à esquerda */
    justify-content: center;
    margin: 0 auto; /* Centralizar o container */
    width: fit-content; /* Ajustar a largura ao conteúdo */
}

.form-container-ocupacao .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 40px; /* Espaçamento entre os grupos de formulários */
}

.form-container-ocupacao .form-group label {
    display: flex;
    align-items: center;
    font-size: 18px; /* Aumenta o tamanho do texto */
    color: #000000; /* Cor fonte das opções de ocupação */
    margin: 5px 0; /* Espaçamento vertical entre as caixinhas */
}

.form-container-ocupacao .form-group input[type="checkbox"] {
    margin-right: 10px; /* Espaço entre a caixinha e o texto */
    width: 20px; /* Largura da caixinha */
    height: 20px; /* Altura da caixinha */
    border: 2px solid hsl(0, 0%, 0%); /* Borda mais grossa */
    border-radius: 5px; /* Bordas arredondadas */
}

#button-container {
    display: flex;
    justify-content: center;
    gap: 40px; /* Espaço entre os botões */
    margin-top: 20px; /* Espaço acima dos botões */
}

#button-container .back-button,
#button-container .next-button {
    padding: 12px 28px;
    font-size: 1.1 em;
    border-radius: 30px;
    background-color: #ff0000;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

#button-container .back-button:hover,
#button-container .next-button:hover {
    background-color: #ff7c7c; /* Nova cor secundária */
}


.form-container-ocupacao .form-group input[type="checkbox"].error-input {
    border-color: red; /* Cor da borda vermelha para erro */
}

.form-container-ocupacao .form-group label.error-text {
    color: red; /* Cor do texto vermelha para erro */
}