<!--     Cabeçalho      -->

<div id="container-formulario-all">

    <!--     Formulario      -->

    <form action="#">
        <div id="infos-formulario">
            <div id="title-formulario">Formulário de Adoção </div>
            <div id="subtitle-formulario">Para que cada animal encontre o seu lar ideal, o projeto Animais
                Universitários
                preza
                pela prática da adoção responsável. Dessa forma, antes de dar continuidade ao processo de adoção,
                primeiro
                precisamos coletar algumas informações sobre o candidato. Essas informações vão nos ajudar a avaliar se
                o
                pretendente possui as condições necessárias para adotar o animal.</div>
            <div id="avisos-formulario">Após a avaliação a equipe do Animais Universitários irá entrar em contato com o
                candidato via WhatsApp ou Email, por isso é imprescindível que o preenchimento desses dados estejam
                corretos.
                Salientamos que as informações que forem obtidas com esse formulário serão estritamente usadas para a
                avaliação
                do perfil do candidato para a adoção e não serão divulgadas ou utilizadas para qualquer outro fim.
            </div>
        </div>


        <!--     1. Sobre Você       -->

        <div class="p-3"></div>
        <div class="divs-topicos-back container-fluid w-100"></div>
        <div class="divs-topicos container-fluid w-100">
            <h4>1. Sobre Você :</h4>
        </div>
        




        <div class="d-block" id="">
            <div class="form-infos forms-type-1">
                <label for="Nome-Completo" width="200px">
                    <h6>Nome completo:</h6>
                </label>
                <input type="text" id="Nome-Completo" name="Nome-Completo"><br><br>
            </div>




            <div class="d-block form-infos  forms-type-2 ">
                <label for="Data-de-Nascimento">
                    <h6>Data de Nascimento:</h6>
                </label>
                <input type="text" id="Data-de-Nascimento" name="Data-de-Nascimento"><br><br>
            </div>




            <div class="d-flex form-infos  forms-type-2">
                <div class="d-inline">
                    <label for="Cidade">
                        <h6>Cidade:</h6>
                    </label>
                    <input type="text" id="Cidade" name="Cidade"><br><br>
                </div>
                <div class="d-inline form-infos  px-5 forms-type-2">
                    <label for="Bairro">
                        <h6>Bairro :</h6>
                    </label>
                    <input type="text" id="Bairro" name="Bairro"><br><br>
                </div>
            </div>




            <div class="form-infos forms-type-1">
                <label for="Email" width="200px">
                    <h6>E-mail:</h6>
                </label>
                <input type="text" id="Email" name="Email"><br><br>
            </div>
            <div class="d-block form-infos  forms-type-2 ">
                <label for="Celular">
                    <h6>Celular:</h6>
                </label>
                <input type="text" id="Celular" name="Celular"><br><br>
            </div>
        </div>
        <div class="p-3"></div>


        <!--     2. Sobre Sua Família       -->

        <div class="divs-topicos-back container-fluid w-100"></div>
        <div class="divs-topicos container-fluid">
            <h4>2. Sobre Sua Família :</h4>
        </div>




        <div class="form-infos d-block option-infos forms-type-2">
            <label for="numero-de-pessoas">
                <h6>Quantas pessoas há na sua familia? </h6>
            </label>
            <select id="numero-de-pessoas" name="numero-de-pessoas">
                <option value="1">1 </option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4 </option>
            </select>
        </div>




        <div class="form-infos forms-type-1">
            <label for="Quantidade-filhos" width="200px">
                <h6>Se tem filhos, quantas crianças e qual a idade delas?</h6>
            </label>
            <input type="text" id="Quantidade-filhos" name="Quantidade-filhos"><br><br>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Concordam-Adocao" width="200px">
                <h6>Todos na residência concordam com a adoção do animal?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Concordam-Adocao" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Concordam-Adocao" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>



        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Alergia-termo" width="200px">
                <h6>Há casos de alergias a animais na sua família?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Alergia-termo" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Alergia-termo" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Planeja-sair" width="200px">
                <h6>Você planeja/pretende mudar de residência nos próximos 12 meses?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Planeja-sair" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Planeja-sair" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>


        <!--     3. Sobre Sua Residência       -->

        <div class="p-2"></div>
        <div class="divs-topicos-back container-fluid w-100"></div>
        <div class="divs-topicos container-fluid">
            <h4>3. Sobre Sua Residência :</h4>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Sobre-residencia" width="200px">
                <h6>Sobre a sua residência: </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">É casa
                    <input type="radio" name="Sobre-residencia" value="Casa">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">É Apartamento
                    <input type="radio" name="Sobre-residencia" value="Apartamento">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">É Sítio/Chácara
                    <input type="radio" name="Sobre-residencia" value="Sitio-Chacara">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Imovel-alugado" width="200px">
                <h6>Se for imóvel alugado, o proprietário permite a presença de animais?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Imovel-alugado" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Imovel-alugado" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>



        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Apartamento-condominio" width="200px">
                <h6>Se for apartamento ou condomínio horizontal, o regimento interno/estatuto do condomínio
                    permite a presença de animais? </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Apartamento-condominio" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Apartamento-condominio" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Casa-murada" width="200px">
                <h6>Se casa, é murada? </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Casa-murada" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Casa-murada" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Muro-tamanho" width="200px">
                <h6>O muro é: </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Alto
                    <input type="radio" name="Muro-tamanho" value="Alto">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Médio
                    <input type="radio" name="Muro-tamanho" value="Medio">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Baixo
                    <input type="radio" name="Muro-tamanho" value="Baixo">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Quintal-tamanho" width="200px">
                <h6>Sobre o quintal : </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">É pequeno
                    <input type="radio" name="Quintal-tamanho" value="Pequeno">
                    <span class=" checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">É médio
                    <input type="radio" name="Quintal-tamanho" value="Medio">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">É grande
                    <input type="radio" name="Quintal-tamanho" value="Grande">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Nem tem
                    <input type="radio" name="Quintal-tamanho" value="Nem-tem">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Abrigo-clima" width="200px">
                <h6>A casa tem abrigo para o animal se proteger de sol, frio ou chuva??</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Abrigo-clima" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Abrigo-clima" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Apartamento-janela" width="200px">
                <h6>Se mora em apartamento, as janelas e sacada são telados?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Apartamento-janela" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Apartamento-janela" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>



        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Possibilidade-fugir" width="200px">
                <h6>Há possibilidade do animal fugir?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Possibilidade-fugir" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Possibilidade-fugir" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>

        <!--     4. Sobre outros Animais       -->

        <div class="p-2"></div>
        <div class="divs-topicos-back container-fluid w-100"></div>
        <div class="divs-topicos container-fluid">
            <h4>4. Sobre outros Animais :</h4>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Ja-teve" width="200px">
                <h6>Você já tem ou teve animais de estimação? </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim, eu tenho
                    <input type="radio" name="Ja-teve" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não tenho
                    <input type="radio" name="Ja-teve" value="Não">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Já tive
                    <input type="radio" name="Ja-teve" value="Ja-tive">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>



        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Outras-especies">
                    <h6>Se tem ou teve animais, quais as espécies?</h6>
                </label>
                <input type="text" id="Nome-Completo" name="Outras-especies"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Caso-castrado" width="200px">
                <h6>Caso tenha algum animal, ele é castrado?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Caso-castrado" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Caso-castrado" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Outras-alimentacao">
                    <h6>Caso tenha algum animal, qual é a alimentação?</h6>
                </label>
                <input type="text" id="Nome-Completo" name="Outras-alimentacao"><br><br>
            </div>
        </div>





        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Caso-vacinado" width="200px">
                <h6>Caso tenha algum animal, ele é vacinado anualmente? </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Caso-vacinado" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Caso-vacinado" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Caso-vermifugado" width="200px">
                <h6>Caso tenha algum animal, ele é vermifugado anualmente? </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Caso-vermifugado" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Caso-vermifugado" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Caso-doenca">
                    <h6>Algum animal ficou doente nos últimos 6 meses em sua residência? Caso positivo, a doença foi
                        diagnosticada? Indique a doença</h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Caso-doenca"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Caso-cliente">
                    <h6>Você é cliente de algum veterinário ou clínica veterinária? Qual?</h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Caso-cliente"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Caso-doou" width="200px">
                <h6>Você já deu algum bicho de estimação que era seu para alguém? </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Caso-doou" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Caso-doou" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Caso-doou-explicacao">
                    <h6>Se respondeu sim na pergunta acima, explique o motivo:</h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Caso-doou-explicacao"><br><br>
            </div>
        </div>


        <!--     5. Sobre o animal a ser adotado       -->

        <div class="p-2"></div>
        <div class="divs-topicos-back container-fluid w-100"></div>
        <div class="divs-topicos container-fluid">
            <h4>5. Sobre o animal a ser adotado :</h4>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Adocao-para-si">
                    <h6>O animal é para si ou para terceiros?</h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Adocao-para-si"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Adocao-responsavel">
                    <h6>Quem será o responsável pelos cuidados com o animal?</h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Adocao-responsavel"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Adocao-tempo-medio" width=" 200px">
                <h6>O tempo médio de vida de um animal é de 15 anos ou mais, está preparado para este
                    compromisso? </h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Adocao-tempo-medio" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Adocao-tempo-medio" value=" Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Adocao-passara-tempo">
                    <h6>Onde ele passará a maior parte do tempo? </h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Adocao-passara-tempo"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Adocao-acesso-residencia" width=" 200px">
                <h6>O animal terá acesso ao interior da residência?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Adocao-acesso-residencia" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Adocao-acesso-residencia" value=" Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Adocao-onde-dormira">
                    <h6>Onde o animal dormirá?</h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Adocao-onde-dormira"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Adocao-acesso-rua" width=" 200px">
                <h6>Você concorda que o animal adotado não tenha acesso à rua sem ser supervisionado?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Adocao-acesso-rua" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Adocao-acesso-rua" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Adocao-ficara-preso">
                    <h6>O animal ficará preso? Onde?</h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Adocao-ficara-preso"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Adocao-alimentacao">
                    <h6>Que tipo de alimentação você dará a ele? </h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Adocao-alimentacao"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="d-block">
            <div class="form-infos forms-type-1">
                <label for="Adocao-adoecer">
                    <h6>O que você fará se o animal adoecer? </h6>
                </label>
                <input type=" text" id="Nome-Completo" name="Adocao-adoecer"><br><br>
            </div>
        </div>




        <div class="p-2"></div>
        <div class="px-1 d-block">
            <label for="Adocao-contato" width=" 200px">
                <h6>Em nossas adoções costumamos manter contato com os adotantes a fim de saber sobre a
                    adaptação do animal. Há alguma restrição quanto a isso?</h6>
            </label>
            <div class="d-flex">
                <label class="container-edit ">Sim
                    <input type="radio" name="Adocao-contato" value="Sim">
                    <span class="checkmark"></span>
                </label>
                <div class="p-2"></div>
                <label class="container-edit ">Não
                    <input type="radio" name="Adocao-contato" value="Nao">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>

        <!--      botao de enviar       -->

        <div class="p-5"></div>
        <div class="text-center pt-3">
            <button type="submit" id="button-enviar"><a href="#">Enviar</a></button>
        </div>
    </form>





</div>