<div class="d-flex" id="fotos-perfil">
    <div class="col-3 d-flex p-5">
        <!--   fotos multiplas   -->
        <div class="d-flex-block col-1" id="perfil_subImg">
            <img src="/img/placeholder.png" alt="">
            <img src="/img/placeholder.png" alt="">
            <img src="/img/placeholder.png" alt="">
            <img src="/img/placeholder.png" alt="">
        </div>
        <!--  foto principal  -->
        <img src=" /img/placeholder.png" id="perfil_Img" alt="">
    </div>
    <div class="col-9 p-5" id="perfil_textos">
        <div class="d-flex">
            <h2 class="apresentacao-perfil">Oi, meu nome é </h2>
            <h2 class="apresentacao-perfil-nome px-2">Banguela</h2>
            <div class="d-flex px-3 pt-2">
                <a href="#">
                    <svg id="pontos_edicao" width="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 200 200">
                        <title>Opções</title>
                        <circle cx="100" cy="25" r="25" />
                        <circle cx="100" cy="100" r="25" />
                        <circle cx="100" cy="175" r="25" />
                    </svg>
                </a>
            </div>
        </div>
        <h4 class="apresentacao-perfil-historia">Essa é minha História</h4>
        <h6 class="" id="text-perfil">
            Banguela está procurando um treinador de gatinhos que lhe dê muito amor e carinho! Assim como seu xará
            Fúria
            da Noite, ele é muito amoroso, companheiro e super sapeca.<br><br>
            Esse gatinho foi resgatado no campus do Pici em um estado muito crítico de desnutrição e desnutrição,
            além
            de feridas que pareciam ser decorrentes de brigas. No entanto, assim como o bravo Banguela do filme, ele
            lutou muito e fez todos os tratamentos necessários. Agora é um gatinho extremamente feliz e agitado que
            está
            em busca do seu Soluço para que juntos possam viver vários momentos de aventuras e fofurices.
        </h6>
    </div>
</div>



<svg class="formas" id="forma-5" data-name="forma 5"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 600">
    <defs>
        <style>.cls-1{fill:#f5f5f5;}</style>
    </defs>
    <title>Forma Perfil animal</title>
    <path class="cls-1" d="M1920,0c-27.21,2.47-53.91,5-80.51,7.47C1623.31,27.74,1399.76,48.71,960,48.71S296.69,27.74,80.51,7.47C53.91,5,27.21,2.47,0,0V600c27.21-2.47,53.91-5,80.51-7.47C296.69,572.26,520.24,551.29,960,551.29s663.31,21,879.49,41.24c26.6,2.49,53.3,5,80.51,7.47Z"/>
</svg>


<!--   Meus dados   -->


<div class=" d-flex" id="perfil-info-div">
    <div class="col-5" id="perfil-info-colunas-adm">
        <ul>
            <div class="caracteristicas-geral"> Meus Dados</div>
            <li>
                <div class="d-flex">
                    <svg id="setas-color" width="15px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 200 200">
                        <title>Dados - Especie</title>
                        <path
                            d="M147.27,200c-6.86-2.42-14-4.34-20.54-7.38-15.59-7.18-31.09-7.65-46.39.07-9.55,4.81-19.09,7-29.71,4.68C36.22,194.19,28.82,182,35.34,168.84,45.74,147.78,58.57,128,76.12,112.1c15.85-14.35,44.12-13,58.07,3.27a414.33,414.33,0,0,1,34.39,47C181.18,182.22,171.36,198.44,147.27,200Z" />
                        <path
                            d="M160.42,45.77C160,55.9,157.47,68.35,147.62,78c-9,8.82-20.35,8.82-29.47.21C100.73,61.8,100.38,23.67,117.5,7c9.33-9.11,20.55-9.19,30.12-.23C155.81,14.38,160.44,27.42,160.42,45.77Z" />
                        <path
                            d="M95.17,41.44c-.87,12.86-3.11,23.8-10.43,33.12-9.56,12.17-24.32,12.73-34.58,1.25-14.89-16.67-14.55-51.74.66-68,9.74-10.44,22.5-10.37,32.34.09C92.46,17.76,94,30.25,95.17,41.44Z" />
                        <path
                            d="M149.49,101.94c.67-13.59,7.62-26.6,21.43-35.43s26.62-2.58,28.8,13.4-8.75,37.14-23,44.58C161.75,132.35,149.56,123.49,149.49,101.94Z" />
                        <path
                            d="M0,86.25c.11-10.34,1.89-18,10-22s15.55-1.09,21.9,4.16C45.57,79.69,52.49,94.05,49.59,112c-2.07,12.86-12.81,18.66-24.6,12.89C8.26,116.71,1.36,102,0,86.25Z" />
                    </svg>
                    <div class="px-2" id="container-edit-style">
                        <label class="container-edit"><p>Cachorro</p>
                            <input type="radio" name="Especie" value="Cachorro">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="" id="container-edit-style">
                        <label class="container-edit"><p>Gato</p>
                            <input type="radio" name="Especie" value="Gato">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                </div>
            </li>
            <li>
                <div class="d-flex" id="container-edit-margin">
                    <svg id="setas-color" width="15px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 200 200">
                        <title>Filtro - Tamanho</title>
                        <path
                            d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                        <path
                            d="M162.8,112.44c-9.46,0-18.92.08-28.38,0-5.13-.07-8.43-3.88-9.1-10-.9-8.31,2.58-14.72,8.55-14.78,19.07-.19,38.14-.16,57.21,0,5.33,0,9,5.65,8.92,12.66s-3.81,12.08-9.26,12.17C181.42,112.55,172.11,112.44,162.8,112.44Z" />
                        <path
                            d="M162.74,12.56c9.16,0,18.33,0,27.49,0,5.8,0,9.59,4.76,9.76,12s-3.59,12.69-9.3,12.74q-28.16.22-56.32,0c-6-.05-9.25-4.86-9.15-12.7.11-7.57,3.61-12,9.57-12.08C144.11,12.52,153.42,12.56,162.74,12.56Z" />
                        <path
                            d="M162.37,187.38c-9.32,0-18.63.05-27.94,0-5.6,0-9.07-4.64-9.2-12-.15-7.89,3.07-12.76,9.06-12.81q28.16-.22,56.32,0c5.74,0,9.5,5.43,9.38,12.63s-3.93,12.12-9.68,12.15C181,187.42,171.68,187.38,162.37,187.38Z" />
                    </svg>

                    <div class="px-2" id="container-edit-style">
                        <label class="container-edit "><p>Pequeno</p>
                            <input type="radio" name="Tamanho" value="Pequeno">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="px-1" id="container-edit-style">
                        <label class="container-edit "><p>Medio</p>
                            <input type="radio" name="Tamanho" value="Medio">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class=" px-2" id="container-edit-style">
                        <label class="container-edit "><p>Grande</p>
                            <input type="radio" name="Tamanho" value="Grande">
                            <span class="checkmark"></span>
                        </label>
                    </div>

                </div>
            </li>
            <li>
                <div class="d-flex" id="container-edit-margin">
                    <svg id="setas-color" width="15px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 200 200">
                        <title>Filtro - Macho e Femea</title>
                        <path
                            d="M143.11,36.88l11.56-11.07a3,3,0,0,0,.36-.68c-1.46.23-2.77.34-4,.64-7.52,1.83-13-4.68-14-9.85A12.84,12.84,0,0,1,149.25.36C161.07.13,172.89,0,184.71,0c4.1,0,8.06.89,10.89,4.37a9.93,9.93,0,0,1,2.1,6.48c0,13,.17,26-.12,39-.14,6-5.61,10.44-11.56,10.37a11.54,11.54,0,0,1-11.53-10.92,82,82,0,0,0-.49-8.78c-4.54,4.27-9.07,8.55-13.69,12.91a59.86,59.86,0,0,1,8.12,44.94,60.53,60.53,0,0,1-17.25,31.67c-18.75,18.44-44.47,21-62.36,14.35,3.9-2.33,8-4.59,11.89-7.17a62.34,62.34,0,0,0,13.62-12.73,4.59,4.59,0,0,1,2.4-1.5,37.31,37.31,0,0,0,28.72-33.82c1.26-23.1-16.9-41.18-40-39.84C88.06,50.36,73,64.8,71.19,82.07a37.37,37.37,0,0,0,6.29,25.68,12.25,12.25,0,0,1,.62,1.13,30.13,30.13,0,0,1-24.38,3.22,2.84,2.84,0,0,1-1.6-1.5c-7.93-19.68-6.61-38.72,4.71-56.69,9.43-15,23.21-24,40.64-27.12,15.79-2.83,30.45.42,43.91,9.1.34.22.67.44,1,.64C142.56,36.63,142.74,36.71,143.11,36.88Z" />
                        <path
                            d="M49.68,179.05c-4.64,0-8.75.06-12.86,0-5.77-.12-10.08-3.24-11.61-8.27A11.63,11.63,0,0,1,36,155.62c3.78-.14,7.57,0,11.35,0h2.19c0-4.44,0-8.67-.07-12.89,0-.47-1-1.17-1.56-1.32a57.94,57.94,0,0,1-24.54-12.6c-11.61-10-18.86-22.62-20.59-37.9C0,66.81,8.78,47.46,28.46,33.53,42.26,23.76,57.9,21,75,24.34c-.79.53-1.27.88-1.78,1.18A71.46,71.46,0,0,0,49.39,47.68a5.93,5.93,0,0,1-2.2,1.86C35.78,55.23,28.46,64.07,26.12,76.75a36.76,36.76,0,1,0,72.94,4.74,35.69,35.69,0,0,0-4.3-15.57c-.46-.87-.94-1.74-1.47-2.72a25.07,25.07,0,0,1,9.91-4,26.34,26.34,0,0,1,13.36.83,3.42,3.42,0,0,1,1.87,1.71,60,60,0,0,1-43.52,80c-.59.13-1.15.31-1.85.5v13.34H77c3.25,0,6.5,0,9.76,0,6.79.09,12,5,12,11.47A11.74,11.74,0,0,1,87,179c-4,.13-8,0-12,0H72.93c0,3,0,5.89,0,8.78a11.35,11.35,0,0,1-4.74,9.8,11.13,11.13,0,0,1-11.68,1.27,10.59,10.59,0,0,1-6.78-9.32C49.48,186.18,49.68,182.73,49.68,179.05Z" />
                    </svg>
                    <div class="px-2" id="container-edit-style">
                        <label class="container-edit "><p>Macho</p>
                            <input type="radio" name="Genero" value="Macho">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="px-3" id="container-edit-style">
                        <label class="container-edit "><p>Femea</p>
                            <input type="radio" name="Genero" value="Femea">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                </div>
            </li>


            <li>
                <div class="d-flex" id="container-edit-margin">
                    <svg id="setas-color" width="15px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 240 200">
                        <title>Filtro - Disponivel</title>
                        <path
                            d="M235.88,134.26,130.11,4.2a7.61,7.61,0,0,0-.9-.88,14.41,14.41,0,0,0-18.39,0,7.44,7.44,0,0,0-.93.89L4.12,134.26c-3.3,4.05-3.38,7.79-.22,10.5,3.32,2.84,6.93,2.09,10.45-2.2s7-8.56,10.47-12.84L33.66,119c1.37,7.72,2.57,14.45,3.76,21.18,3.35,18.92,6.73,37.83,10,56.76A4.83,4.83,0,0,0,48.83,200h29a9.38,9.38,0,0,0,0-1.52c-2.55-17.38-5-34.76-7.7-52.11-2.49-16.15,7.22-28.56,23.41-28.87,8.82-.17,44.14-.17,53,0,16.19.31,25.9,12.72,23.41,28.87-2.68,17.35-5.15,34.73-7.7,52.11a9.38,9.38,0,0,0,0,1.52h29a4.83,4.83,0,0,0,1.42-3.11c3.26-18.93,6.64-37.84,10-56.76,1.19-6.73,2.39-13.46,3.76-21.18l8.84,10.77q5.23,6.42,10.47,12.84c3.52,4.29,7.13,5,10.45,2.2C239.26,142.05,239.18,138.31,235.88,134.26Z" />
                    </svg>
                    <div class="px-2" id="container-edit-style">
                        <label class="container-edit"><p>Adotado</p>
                            <input type="radio" name="Disponibilidade" value="Adotado">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="px-1" id="container-edit-style">
                        <label class="container-edit "><p>Não Adotado</p>
                            <input type="radio" name="Disponibilidade" value="Nadotado">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                </div>
            </li>


            <li>
                <div class="d-flex pt-3" id="container-edit-margin">
                    <svg id="setas-color" width="15px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 200 200">
                        <title>Dados - Idade</title>
                        <path
                            d="M159.09,50a9.12,9.12,0,0,0,9.09-9.09V9.09a9.09,9.09,0,1,0-18.18,0V40.91A9.12,9.12,0,0,0,159.09,50Z" />
                        <path
                            d="M45.45,50h0a9.12,9.12,0,0,0,9.1-9.09V9.09a9.1,9.1,0,0,0-18.19,0h0V40.91A9.12,9.12,0,0,0,45.45,50Z" />
                        <path
                            d="M190.91,27.27A18.23,18.23,0,0,0,172.73,9.09h0V40.91a13.64,13.64,0,1,1-27.28,0V9.09H59.09V40.91a13.64,13.64,0,1,1-27.27,0V9.09H27.27A18.23,18.23,0,0,0,9.09,27.27V59.09H190.91Z" />
                        <path
                            d="M9.09,65.26V181.82A18.23,18.23,0,0,0,27.27,200H172.73a18.23,18.23,0,0,0,18.18-18.18v-9.09h0V65.26ZM119.68,97.75l-.08.42q-1.36,17.35-2.63,40.33t-1.1,39.74c-.06.84-.83,1.56-2.32,2.15a16.89,16.89,0,0,1-5.38,1.06,14.2,14.2,0,0,1-5.63-.76,4.64,4.64,0,0,1-3.17-3.47q-1.28-8.64-1.27-27.85t1.18-37.91a4.45,4.45,0,0,1,.09-.93c0-.45,0-.69,0-.72a1.9,1.9,0,0,0-.81.29l-.51.34c-1,.57-2.06,1.1-3.13,1.61-2.2,1.24-4.43,2.46-6.68,3.64-.57.23-1.42-.14-2.54-1.1a17.39,17.39,0,0,1-3.3-4,22,22,0,0,1-1.87-3.51,10.49,10.49,0,0,1-.84-3.34,2.42,2.42,0,0,1,1-2.29l6-3.89q4.32-2.79,9.52-6t9.4-5.5q4.18-2.33,5.29-2.33a10.89,10.89,0,0,1,3.64.89,18.17,18.17,0,0,1,4.06,2.16,3.43,3.43,0,0,1,1.78,2.62Z" />
                    </svg>
                    <div class="px-0" >
                        <label class="container-edit ">
                            <select id="idade-anos" name="idade-anos">
                                
                                <option value="0">0 anos</option>
                                <option value="1">1 ano</option>
                                <option value="2">2 anos</option>
                                <option value="3">3 anos</option>
                                <option value="4">4 anos</option>
                                <option value="5">5 anos</option>
                                <option value="6">6 anos</option>
                                <option value="7">7 anos</option>
                                <option value="8">8 anos</option>
                                <option value="9">9 anos</option>
                                <option value="10">10 anos</option>
                                <option value="11">11 anos</option>
                            </select>
                        </label>
                    </div>
                    <div class="px-1">e</div>

                    <div class="px-0">
                        <label class="container-edit ">
                            <select id="idade-meses" name="idade-meses">
                                <option value="0">0 meses</option>
                                <option value="1">1 mes</option>
                                <option value="2">2 meses</option>
                                <option value="3">3 meses</option>
                                <option value="4">4 meses</option>
                                <option value="5">5 meses</option>
                                <option value="6">6 meses</option>
                                <option value="7">7 meses</option>
                                <option value="8">8 meses</option>
                                <option value="9">9 meses</option>
                                <option value="10">10 meses</option>
                                <option value="11">11 meses</option>
                            </select>
                        </label>
                    </div>
                </div>
            </li>


            <li>
                <div class="d-flex" >
                    <div>
                        <svg id="setas-color" width="15px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                            <title>Dados - Endereço</title>
                            <path d="M171.22,74.33a77.6,77.6,0,0,1-11.86,40.6c-15.63,25.06-31.43,50-47.16,75-8.39,13.34-16.38,13.43-24.68.17C71,163.74,53.7,137.83,38.32,110.82,17.94,75,30.62,25.29,72.46,6.14,103.57-8.09,140.82,2.59,161,36.37,168.07,48.18,170.87,61.1,171.22,74.33Zm-44.45.3c0-15.29-12.11-28-26.65-28S73.43,59.34,73.44,74.59s12.2,28.05,26.64,28S126.78,89.87,126.77,74.63Z"/>
                        </svg>
                    </div>
                    
                    <div class=" d-block" id="endereco-rua">
                        <label for="endereço-rua">Rua/Av.</label>
                        <input type="text" id="rua/av" name="rua/av" placeholder="Ex: Rua Calos Severo"><br><br>
                    </div>
                    <div class=" d-block" id="endereco-bairro">
                        <label for="endereço-bairro">Bairro</label>
                        <input type="text" id="bairro" name="bairro" placeholder="Ex: Bairro Farias Brito"><br><br>
                    </div>
                </div>
            </li>
        </ul>
    </div>


    <!--   Minha personalidade   -->


    <div class="col-4" id="perfil-info-colunas-adm">
        <ul>
            <div class="caracteristicas-geral"> Minha Personalidade</div>
            <h6>Temperamento:</h6>

            <li>
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="temperamento_docil" name="temperamento" value="Docil">
                        <label for="temperamento_docil"><p>Dócil</p></label>
                    </div>

                    <div class="d-flex px-5">
                        <input type="checkbox" id="temperamento_calmo" name="temperamento" value="Calmo">
                        <label for="temperamento_calmo"><p>Calmo</p></label>
                    </div>
                </div>
            </li>

            <li class="colunas-checkbox">
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="temperamento_carente" name="temperamento" value="Carente">
                        <label for="temperamento_carente"><p>Carente</p></label>
                    </div>

                    <div class="d-flex px-4">
                        <input type="checkbox" id="temperamento_brincalhao" name="temperamento" value="Brincalhao">
                        <label for="temperamento_brincalhao"><p>Brincalhão</p></label>
                    </div>
                </div>
            </li>

            <li class="colunas-checkbox">
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="temperamento_divertido" name="temperamento" value="Divertido">
                        <label for="temperamento_divertido"><p>Divertido</p></label>
                    </div>

                    <div class="d-flex px-4">
                        <input type="checkbox" id="temperamento_timido" name="temperamento" value="Timido">
                        <label for="temperamento_timido"><p>Tímido</p></label>
                    </div>
                </div>
            </li>

            <h6 class="pt-2">Sociavel com:</h6>
            
            <li>
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="sociavel_gatos" name="sociavel" value="Gatos">
                        <label for="sociavel_gatos"><p>Gatos</p></label>
                    </div>

                    <div class="d-flex px-5">
                        <input type="checkbox" id="sociavel_criancas" name="sociavel" value="Criancas">
                        <label for="sociavel_criancas"><p>Crianças</p></label>
                    </div>
                </div>
            </li>

            <li class="colunas-checkbox">
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="sociavel_filhotes" name="sociavel" value="Filhotes">
                        <label for="sociavel_filhotes"><p>Filhotes</p></label>
                    </div>

                    <div class="d-flex px-4">
                        <input type="checkbox" id="sociavel_adultos" name="sociavel" value="Adultos">
                        <label for="sociavel_adultos"><p>Adultos</p></label>
                    </div>
                </div>
            </li>

            <li class="colunas-checkbox">
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="sociavel_cachorros" name="sociavel" value="Cachorros">
                        <label for="sociavel_cachorros"><p>Cachorros</p></label>
                    </div>

                    <div class="d-flex px-4">
                        <input type="checkbox" id="sociavel_bebes" name="sociavel" value="Bebes">
                        <label for="sociavel_bebes"><p>Bebes</p></label>
                    </div>
                </div>
            </li>

        </ul>
    </div>


    <!--   Minhas caracteristicas   -->

 
    <div class="col-5" id="perfil-info-colunas-adm">
        <ul>
            <div class="caracteristicas-geral"> Minhas Caracteristicas</div>
            <h6>Vivo bem com:</h6>
            
            <li>
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="caracteristicas_casa" name="caracteristicas" value="Casa">
                        <label for="caracteristicas_casa"><p>Casa</p></label>
                    </div>

                    <div class="px-5"></div><div class="d-flex px-5">
                        <input type="checkbox" id="caracteristicas_sitio" name="caracteristicas" value="Sitio">
                        <label for="caracteristicas_sitio"><p>Sítio</p></label>
                    </div>
                </div>
            </li>

            <li class="colunas-checkbox">
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="caracteristicas_apartamento" name="caracteristicas" value="Apartamento">
                        <label for="caracteristicas_apartamento"><p>Apartamento</p></label>
                    </div>

                    <div class="d-flex px-5">
                        <input type="checkbox" id="caracteristicas_nofrio" name="caracteristicas" value="No Frio">
                        <label for="caracteristicas_nofrio"><p>No Frio</p></label>
                    </div>
                </div>
            </li>

            <li class="colunas-checkbox">
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="caracteristicas_casaquintal" name="caracteristicas" value="Casa c/ Quintal">
                        <label for="caracteristicas_casaquintal"><p>Casa c/ Quintal</p></label>
                    </div>

                    <div class="d-flex px-4">
                        <input type="checkbox" id="caracteristicas_nocalor" name="caracteristicas" value="No Calor">
                        <label for="caracteristicas_nocalor"><p>No Calor</p></label>
                    </div>
                </div>
            </li>

            <h6 class="pt-2">Já estou:</h6>
            
            <li>
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="saude_castrado" name="saude" value="Castrado">
                        <label for="saude_castrado"><p>Castrado</p></label>
                    </div>
                </div>
            </li>

            <li class="colunas-checkbox">
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="saude_vacinado" name="saude" value="Vacinado">
                        <label for="saude_vacinado"><p>Vacinado</p></label>
                    </div>
                </div>
            </li>

            <li class="colunas-checkbox">
                <div class="d-flex" id="check-box">
                    <div class="d-flex">
                        <input type="checkbox" id="saude_vermifugado" name="saude" value="Vermifugado">
                        <label for="saude_vermifugado"><p>Vermifugado</p></label>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</div>


<!--    botao de enviar      -->
<div class="text-center pt-3">
    <button class="btn btn-none  btn-lg " id="button_inicial"><a href="/formulario" ><a href="#">SALVAR EDIÇÕES</a></button>
</div>


<!--      Relatorios      -->
<div class="pt-5"></div>
<div class="pt-5"></div>

<div class="d-flex">
    <div class="col-2 m-4"></div>
    <div class="d-flex">
        <svg class="px-2" id="setas-color3" height="70px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 200 200">
            <title>Relatorio - Icon</title>
            <path
                d="M175,87.78V58.31c0-.87,0-1.74,0-2.61a7,7,0,0,0-2.2-5.29Q148.56,26.34,124.33,2.23A7.29,7.29,0,0,0,119,0H43.15a22.26,22.26,0,0,0-2.87.13A17.35,17.35,0,0,0,25,17.49V180.05a18.65,18.65,0,0,0,2.16,9C31.05,196.18,37.35,200,45.38,200c10.3,0,20.69,0,31,0h78.29a19.84,19.84,0,0,0,14.05-5.49A19.64,19.64,0,0,0,175,179.65Q175,133.72,175,87.78ZM126.46,64.14c.8.08,1.61.13,2.4.13h32.72V179.8a6.4,6.4,0,0,1-5.68,6.74,7.88,7.88,0,0,1-1.38.07H45.5A6.6,6.6,0,0,1,39,182.76a6.06,6.06,0,0,1-.54-2.64V154.07q0-68.14,0-136.29a4.07,4.07,0,0,1,1.38-3.51,4,4,0,0,1,2.65-.9h67.9v33A18.08,18.08,0,0,0,126.46,64.14ZM151.12,50.9h-22.3a4.82,4.82,0,0,1-3.75-1.37,4.37,4.37,0,0,1-1.28-3.19q0-12.41,0-24.79V21.1l30,29.8Z" />
            <path d="M133.35,118.74q-21.27,0-42.55,0H80.51v13.33H136.6V127c0-1.65,0-3.29,0-4.93a3,3,0,0,0-3.26-3.31Z" />
            <path
                d="M136.59,143.07c0-.21,0-.42,0-.62l-.15-2.44H80.51V153.2l2.53.12.47,0h50a2.93,2.93,0,0,0,3.1-3.16c0-1.61,0-3.22,0-4.84Z" />
            <rect x="80.52" y="97.61" width="56.04" height="13.24" />
            <path
                d="M66,140a6.77,6.77,0,0,0-4.8,1.91,6.52,6.52,0,0,0-2,4.69,6.74,6.74,0,0,0,6.61,6.77h.13A6.69,6.69,0,0,0,66,140Z" />
            <path
                d="M65.85,118.76h0a6.69,6.69,0,0,0,0,13.37h0a6.73,6.73,0,0,0,6.71-6.67h0a6.57,6.57,0,0,0-2-4.73A6.68,6.68,0,0,0,65.85,118.76Z" />
            <path
                d="M65.89,110.9h0a6.62,6.62,0,0,0,4.71-2,6.55,6.55,0,0,0,1.94-4.7,6.65,6.65,0,0,0-2-4.74,6.86,6.86,0,0,0-4.76-1.91,6.64,6.64,0,0,0-6.66,6.71,6.54,6.54,0,0,0,2,4.71A6.77,6.77,0,0,0,65.89,110.9Z" />
        </svg>
        <h1 class="d-flex" id="titulo-relatio">
                Relatórios de 
            <h1 id="titulo-relatio" style="color:#FD5F2D">
                Adotantes
            <h1>
        </h1>
    
    </div>
</div>

<!--     relatorios on       -->
<div class="pt-5 d-flex" id="relatorios-style">
    <div class="px-3" id="container-de-relatorio">
        <a href="#">
            <div class="d-flex" id="container-de-relatorio-mini">
                <svg id="setas-color3" width="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Relatorio - Aberto</title>
                    <path
                        d="M192.48,139.32q0-13.89,0-27.79,0-17.19,0-34.39a4.44,4.44,0,0,0-1.58-3.55L177.28,61.81l-9.88-8.54c-.44-.38-.9-.73-1.36-1.08s-.66-.49-1-.75c-.5-.42-1-.84-1.46-1.27l-1.11-1c-1.26-1.08-1.34-1.32-1.26-1.8a14.76,14.76,0,0,0,.07-3l0-.61a12.7,12.7,0,0,0-10.94-12.16,39,39,0,0,0-4.91-.19c-1,0-2,0-2.93,0a1.26,1.26,0,0,1-.45-.14c-5.27-4.51-10.5-9-15.74-13.59l-7.48-6.47-8.1-7a15.92,15.92,0,0,0-21.37-.1c-3.51,3-7,6-10.5,9.08l-5.13,4.46-2.49,2.15c-4.47,3.87-8.94,7.74-13.41,11.56a.52.52,0,0,1-.16.06c-1.17,0-2.32,0-3.54,0-.9,0-1.8,0-2.7,0A12.74,12.74,0,0,0,38.72,44.25c0,.47,0,.94,0,1.41,0,.82,0,1.59,0,2.28-.78.71-1.58,1.4-2.43,2.12-.64.55-1.29,1.09-1.92,1.65s-1.22,1.12-1.83,1.69-1.3,1.22-2,1.81c-1.48,1.29-3,2.55-4.46,3.82l-2.93,2.49-4.4,3.79q-4.69,4.05-9.42,8.07a4.9,4.9,0,0,0-1.83,4c.09,21.51.16,43.17.2,64.39,0,1.69,0,3.43-.08,5.11s-.09,3.24-.09,4.86q0,17.75,0,35.51a12.15,12.15,0,0,0,1.88,6.57A12.63,12.63,0,0,0,20.73,200H179.36a12.74,12.74,0,0,0,13.12-13.14q0-5.13,0-10.25l-.06-12q-.06-9.34-.09-18.69c0-1.1,0-2.21.07-3.31S192.48,140.41,192.48,139.32ZM75.77,31.35q10.38-9,20.77-18c2.42-2.09,4.49-2.08,6.94,0L119,26.81l5.24,4.54ZM119.85,129c-1.43-1.25-2.84-2.48-4.24-3.74a23,23,0,0,0-10.87-5.55,25.94,25.94,0,0,0-5-.5,22.56,22.56,0,0,0-14.58,5.38c-1.8,1.47-3.62,3-5.44,4.7q-8.93-8.32-17.91-16.59l-6.67-6.16c-1.56-1.43-3.18-2.92-4.73-4.4q0-28.63,0-57.28c0-1.39.25-1.63,1.63-1.63H148c1.38,0,1.63.24,1.63,1.62V62.18q0,16,0,32.06c0,1.48,0,3,.09,4.38,0,.9.05,1.8.07,2.69,0,.64-.06.71-.15.79q-11.76,10.83-23.51,21.69l-5.91,5.46Zm-71,42.72,33.42-29c1.9-1.65,3.8-3.32,5.69-5L92.21,134a11.34,11.34,0,0,1,15.55,0q17.08,14.81,34.15,29.64l9.92,8.62L167.68,186l2.6,2.25H29.73Zm22-34.71L19.25,181.8V89.28Zm-47.68-60L38.66,63.51V91.24ZM129.06,137l51.68-47.74v92.54Zm32.3-45.81V63.54l15.45,13.39Z" />
                    <path
                        d="M58.43,57.53c4.07,0,8.15,0,12.23,0h0c4.94,0,9.87,0,14.81,0,3.53,0,7.07-.07,10.6-.08,3,0,6,.08,9,.07,3.78,0,7.56-.07,11.34-.07,8.44,0,16.88.07,25.33.06a3.37,3.37,0,0,0,3.28-3,3.41,3.41,0,0,0-2.47-3.63,6.91,6.91,0,0,0-1.82-.18H82.42c-7.93,0-15.87,0-23.81,0a4.58,4.58,0,0,0-2.3.77,3.2,3.2,0,0,0-1.15,3.68A3.34,3.34,0,0,0,58.43,57.53Z" />
                    <path
                        d="M141.44,106a3.55,3.55,0,0,0,3.37-2.41,3.42,3.42,0,0,0-1.22-3.75,6.2,6.2,0,0,0-2.78-.68c-3.41,0-6.83,0-10.25,0-4,0-8-.09-12.08-.09q-19.82,0-39.63,0c-3.57,0-7.13.09-10.7.09-3.16,0-6.32-.07-9.48-.09a4.07,4.07,0,0,0-3.48,2.3c-.82,2.38,1,4.59,3.76,4.58,4.1,0,8.21-.06,12.31-.07H92.5v0H128C132.5,106,137,106,141.44,106Z" />
                    <path
                        d="M140.7,66.82H59.28a9.43,9.43,0,0,0-1.51.09,3.39,3.39,0,0,0-2.61,4.36c.53,1.61,1.72,2.4,3.69,2.4H140.6a10.87,10.87,0,0,0,1.4,0,3.4,3.4,0,0,0,2.82-4.4C144.28,67.56,143,66.82,140.7,66.82Z" />
                    <path
                        d="M59.16,89.85h81.65a9.29,9.29,0,0,0,1.29-.06,3.37,3.37,0,0,0,2.75-4.26c-.49-1.71-1.7-2.52-3.81-2.52H59.5A12.69,12.69,0,0,0,58,83a3.22,3.22,0,0,0-2.85,2.47,3.27,3.27,0,0,0,1,3.46A4,4,0,0,0,59.16,89.85Z" />
                </svg>
                <h2 class="pt-2">Pretendente 1</h2>
            </div>
        </a>
    </div>

    <div class="p-2"></div>
    <!--     relatorios off       -->
    <div class="px-3" id="container-de-relatorio-off">
        <a href="#">
            <div class="d-flex" id="container-de-relatorio-off-mini">
                <svg id="setas-color2" width="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Relatorio - Aberto</title>
                    <svg id="Camada_1" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                        <title>Relatorio - Fechado</title>
                        <path d="M191.29,47.68A25.55,25.55,0,0,0,166.92,30H119.64L75,30,62.21,30c-9.39,0-19.1,0-28.64,0h-.15A25.9,25.9,0,0,0,8.75,47.52a29.15,29.15,0,0,0-1.25,9.6q0,16.18,0,32.36v21q0,16.62,0,33.24v.15a26.55,26.55,0,0,0,.24,4.24c1.71,10.27,7.67,17.25,17.72,20.72a29.53,29.53,0,0,0,10,1.22h.33q17.58,0,35.17,0h95.42a28.38,28.38,0,0,0,7.75-1.08,25.37,25.37,0,0,0,18.35-24.25V92.1q0-17.41,0-34.82A30.17,30.17,0,0,0,191.29,47.68ZM166.42,155.09H33.47a10.37,10.37,0,0,1-9.53-5.39,9.45,9.45,0,0,1-1.34-5q0-21.45,0-42.92V60.63L39.68,76.18Q61.58,96.12,83.53,116a24.48,24.48,0,0,0,32.92,0c7.71-7,15.51-14.06,23-20.93l9.83-9,28-25.52v83.69a10.44,10.44,0,0,1-6.49,9.94A11.34,11.34,0,0,1,166.42,155.09Zm-56.83-53-2.92,2.65c-4.19,3.8-9.21,3.78-13.43-.06L28.68,45.9a10.88,10.88,0,0,1,4.7-1H166.22a11.78,11.78,0,0,1,5.08,1Z"/>
                    </svg>
                </svg>
                <h2 class="pt-2">Pretendente 2</h2>
            </div>
        </a>
    </div>
</div>