<!--

<div class="w-100 pt-1" id="secao-adm">
    <a href="#">Catalogo de Animais</a></h6>
    <a class="px-3" href="#">Apoio ao Projeto</a>
</div>

-->


<!--  formas do background  -->
<div>

    <svg class="formas" id="forma-1" data-name="forma 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
                <defs>
                    <style>.cls-1{fill:#f5f5f5;}</style>
                </defs>
                <title>Forma 1</title>
                <path class="cls-1" d="M.13,1022,0,0H1920c-.15,246.6,0,937.57,0,937.57s-18.23-2.84-35.43-4.05c-253.4-17.85-420.34-26-749.93,60.94-78.24,20.65-302.12,63.56-371.22,71.75-80.24,9.52-160.83,13.15-241.57,13.72-61.71.43-123.37-1-185-5-49.76-3.25-99.31-8.43-148.61-15.87C125,1049.46,62.62,1035.44.13,1022Z"/>
    </svg>

    <svg class="formas" id="forma-adm" data-name="forma 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
        <defs>
            <style>.cls-1{fill:#f5f5f5;}</style>
        </defs>
        <title>Forma 3</title>
        <path class="cls-1" d="M0,0V1080c117,0,173.94-23.73,234.23-48.85S357,980,480,980s185.41,26,245.77,51.15S843,1080,960,1080s173.94-23.73,234.23-48.85S1317,980,1440,980s185.41,26,245.77,51.15S1803,1080,1920,1080V0Z"/>
    </svg>
</div>




<div class="title-catalogo-adm m-5 pt-5">
    <h4 id="animal-titulo">Catálogo de Animais</h4>
</div>

<div id="main-adm">
    <div class="container-fluid d-flex w-100  " id="myBtnContainer">
        
        <div class="d-flex w-100" id="filtro-body"></div>

        <h7 class="col-1 floar-right pt-5" id="filtro-custom">Filtros: </h7>
        <div class="floar-right d-flex" id="icones-filtro">
            
            <button class="btn" onclick="filterSelection('Disponivel')">
                <svg id="Camada_1" height="35px" 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>
                <p>Disponivel</p>
            </button>

            <button class="btn" onclick="filterSelection('Adotado')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 240 200">
                    <title>Filtro - Adotado</title>
                    <path
                        d="M119.78,141.72c2.42-1.64,4.66-3.24,7-4.71,6.89-4.37,14-4.66,20.91-.33,7.14,4.45,10.07,11.16,9.58,19.44-.5,8.44-4.65,15.08-10.63,20.69-7.81,7.32-15.78,14.49-23.62,21.79-2,1.88-3.81,1.84-5.78,0-8.2-7.57-16.53-15-24.6-22.7-5.21-5-9.06-10.93-9.78-18.33-.78-7.94,1.23-15,8-19.93,6.42-4.7,13.5-5.34,20.63-1.78C114.35,137.34,116.85,139.64,119.78,141.72Z" />
                    <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>
                <p>Adotado</p>
            </button>

            <button class="btn" onclick="filterSelection('all')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 240 200">
                    <title>Filtro - Disp e Adot</title>
                    <path
                        d="M121.82,166.08A13.08,13.08,0,0,1,132.59,171a90.69,90.69,0,0,1,12.07,17.15c3.22,6.14,0,11.45-7,11.81a15.58,15.58,0,0,1-8.2-1.88,16.89,16.89,0,0,0-16.15-.1,16,16,0,0,1-7.94,2.05c-7.52-.32-10.85-5.81-7.22-12.28a99.34,99.34,0,0,1,11.25-16.2A14.93,14.93,0,0,1,121.82,166.08Z" />
                    <path
                        d="M98.72,143.74a19.32,19.32,0,0,1,2.68-9.06c3.63-6.06,10-6.26,14-.47,4.16,6,3.94,16.28-.47,22.08-3.46,4.54-8.39,4.77-12.27.57C100.19,154.14,98.68,149.5,98.72,143.74Z" />
                    <path
                        d="M141.32,145c-.2,4.31-1,8.15-3.57,11.46-3.57,4.62-8.95,4.61-12.56,0-4.69-6-4.78-16.76-.2-22.78,3.65-4.79,9.14-4.82,12.87,0C140.53,137.05,141.17,141.09,141.32,145Z" />
                    <path
                        d="M103,167.23c-.15.92-.25,1.9-.49,2.83-1.09,4.15-4.8,5.91-8.75,4-4.67-2.26-7.07-6.27-8.31-11a12,12,0,0,1,0-6.58c1.27-4.14,5-5.78,8.88-3.71C100.15,155.84,102.38,161.06,103,167.23Z" />
                    <path
                        d="M137.15,167.32a16.82,16.82,0,0,1,6.1-13c2.37-2,5.07-3.4,8.19-1.89S155.12,157,155,160a17,17,0,0,1-6.24,12.56,11.21,11.21,0,0,1-2.31,1.48c-4.1,2-7.75.37-8.88-4A22.5,22.5,0,0,1,137.15,167.32Z" />
                    <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>
                <p>Todos</p>
            </button>

            <div class="vl d-flex"></div>

            <button id="padding-icon-adm" class="btn col-md-2" onclick="filterSelection('Adotado')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Com Adotantes</title>
                    <path
                        d="M110,166.8c0-8.39.07-16.79,0-25.18a18.27,18.27,0,0,1,5.41-13.83c9.55-9.55,19-19.19,28.62-28.67,4.82-4.76,10.76-4.89,14.9-.68s3.7,10-1.08,14.87c-4.17,4.26-8.44,8.42-12.62,12.68-2.69,2.74-2.94,5.46-.83,7.67s5.15,2.18,8-.62c8.64-8.56,17.28-17.12,25.74-25.86A8.28,8.28,0,0,0,180,102c.24-10.58.12-21.17.31-31.75.11-6.28,4.49-10.05,10.72-9.59a9.37,9.37,0,0,1,8.84,9.47q.27,23.72,0,47.44c0,4.43-2.38,8-5.56,11.12-13.84,13.51-27.57,27.13-41.42,40.62a8.52,8.52,0,0,0-2.77,6.76c.09,5.71,0,11.43-.15,17.15-.12,5-1.37,6.4-6.27,6.46q-13.68.17-27.37,0c-4.75-.07-6-1.47-6.08-6.21-.07-8.88,0-17.76,0-26.64Z" />
                    <path
                        d="M89.78,166.69c0,9,0,18,0,27,0,4.51-1.63,6.18-6.18,6.23q-13.7.12-27.39,0c-4.52,0-6-1.65-6.1-6.31-.09-5.72-.11-11.44,0-17.16a9.39,9.39,0,0,0-3.19-7.39c-13.87-13.49-27.6-27.13-41.45-40.64a17.11,17.11,0,0,1-5.42-13C.12,101,0,86.67,0,72.31c0-7.61,3.48-11.7,9.88-11.64s9.73,4.19,9.73,11.84c0,9.74-.14,19.48.12,29.22a9.83,9.83,0,0,0,2.48,6c7.66,8,15.57,15.76,23.43,23.57A18.48,18.48,0,0,0,49,134.11c2.21,1.33,4.6,2,6.57-.35s1.83-4.93-.41-7.19c-3.95-4-7.92-7.91-11.87-11.89a34.52,34.52,0,0,1-3-3.21c-3.31-4.33-2.88-9.6,1-13.16a9.42,9.42,0,0,1,13.45.13c10.38,10.26,20.67,20.64,31,30.95,3,3,4,6.6,4,10.64v26.66Z" />
                    <path
                        d="M99.7,11C103,8.82,106,6.64,109.17,4.64c9.34-5.91,18.91-6.3,28.34-.43,9.67,6,13.64,15.11,13,26.33-.68,11.44-6.29,20.44-14.39,28-10.59,9.93-21.38,19.64-32,29.53-2.74,2.55-5.16,2.5-7.83,0C85.14,77.89,73.85,67.82,62.92,57.39c-7.06-6.75-12.29-14.81-13.26-24.84-1-10.76,1.67-20.34,10.77-27,8.71-6.37,18.3-7.24,28-2.42C92.35,5.1,95.74,8.21,99.7,11Z" />
                </svg>
                <p>C/ Candidato</p>
            </button>

            <button id="padding-icon-adm" class="btn col-md-2"  onclick="filterSelection('Adotado')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Sem Adotantes</title>
                    <path
                        d="M110,166.8c0-8.39.07-16.79,0-25.18a18.27,18.27,0,0,1,5.41-13.83c9.55-9.55,19-19.19,28.62-28.67,4.82-4.76,10.76-4.89,14.9-.68s3.7,10-1.08,14.87c-4.17,4.26-8.44,8.42-12.62,12.68-2.69,2.74-2.94,5.46-.83,7.67s5.15,2.18,8-.62c8.64-8.56,17.28-17.12,25.74-25.86A8.28,8.28,0,0,0,180,102c.24-10.58.12-21.17.31-31.75.11-6.28,4.49-10.05,10.72-9.59a9.37,9.37,0,0,1,8.84,9.47q.27,23.72,0,47.44c0,4.43-2.38,8-5.56,11.12-13.84,13.51-27.57,27.13-41.42,40.62a8.52,8.52,0,0,0-2.77,6.76c.09,5.71,0,11.43-.15,17.15-.12,5-1.37,6.4-6.27,6.46q-13.68.17-27.37,0c-4.75-.07-6-1.47-6.08-6.21-.07-8.88,0-17.76,0-26.64Z" />
                    <path
                        d="M89.78,166.69c0,9,0,18,0,27,0,4.51-1.63,6.18-6.18,6.23q-13.7.12-27.39,0c-4.52,0-6-1.65-6.1-6.31-.09-5.72-.11-11.44,0-17.16a9.39,9.39,0,0,0-3.19-7.39c-13.87-13.49-27.6-27.13-41.45-40.64a17.11,17.11,0,0,1-5.42-13C.12,101,0,86.67,0,72.31c0-7.61,3.48-11.7,9.88-11.64s9.73,4.19,9.73,11.84c0,9.74-.14,19.48.12,29.22a9.83,9.83,0,0,0,2.48,6c7.66,8,15.57,15.76,23.43,23.57A18.48,18.48,0,0,0,49,134.11c2.21,1.33,4.6,2,6.57-.35s1.83-4.93-.41-7.19c-3.95-4-7.92-7.91-11.87-11.89a34.52,34.52,0,0,1-3-3.21c-3.31-4.33-2.88-9.6,1-13.16a9.42,9.42,0,0,1,13.45.13c10.38,10.26,20.67,20.64,31,30.95,3,3,4,6.6,4,10.64v26.66Z" />
                </svg>
                <p>S/ Candidato</p>
            </button>

            <button class="btn" onclick="filterSelection('Adotado')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Com e Sem Adotantes</title>
                    <path
                        d="M110,166.8c0-8.39.07-16.79,0-25.18a18.27,18.27,0,0,1,5.41-13.83c9.55-9.55,19-19.19,28.62-28.67,4.82-4.76,10.76-4.89,14.9-.68s3.7,10-1.08,14.87c-4.17,4.26-8.44,8.42-12.62,12.68-2.69,2.74-2.94,5.46-.83,7.67s5.15,2.18,8-.62c8.64-8.56,17.28-17.12,25.74-25.86A8.28,8.28,0,0,0,180,102c.24-10.58.12-21.17.31-31.75.11-6.28,4.49-10.05,10.72-9.59a9.37,9.37,0,0,1,8.84,9.47q.27,23.72,0,47.44c0,4.43-2.38,8-5.56,11.12-13.84,13.51-27.57,27.13-41.42,40.62a8.52,8.52,0,0,0-2.77,6.76c.09,5.71,0,11.43-.15,17.15-.12,5-1.37,6.4-6.27,6.46q-13.68.17-27.37,0c-4.75-.07-6-1.47-6.08-6.21-.07-8.88,0-17.76,0-26.64Z" />
                    <path
                        d="M89.78,166.69c0,9,0,18,0,27,0,4.51-1.63,6.18-6.18,6.23q-13.7.12-27.39,0c-4.52,0-6-1.65-6.1-6.31-.09-5.72-.11-11.44,0-17.16a9.39,9.39,0,0,0-3.19-7.39c-13.87-13.49-27.6-27.13-41.45-40.64a17.11,17.11,0,0,1-5.42-13C.12,101,0,86.67,0,72.31c0-7.61,3.48-11.7,9.88-11.64s9.73,4.19,9.73,11.84c0,9.74-.14,19.48.12,29.22a9.83,9.83,0,0,0,2.48,6c7.66,8,15.57,15.76,23.43,23.57A18.48,18.48,0,0,0,49,134.11c2.21,1.33,4.6,2,6.57-.35s1.83-4.93-.41-7.19c-3.95-4-7.92-7.91-11.87-11.89a34.52,34.52,0,0,1-3-3.21c-3.31-4.33-2.88-9.6,1-13.16a9.42,9.42,0,0,1,13.45.13c10.38,10.26,20.67,20.64,31,30.95,3,3,4,6.6,4,10.64v26.66Z" />
                    <path
                        d="M121.27,90c-3.09-1.09-6.28-2-9.24-3.32-7-3.23-14-3.44-20.88,0-4.29,2.17-8.59,3.16-13.37,2.11C71.3,87.39,68,81.92,70.9,76c4.68-9.48,10.46-18.39,18.35-25.54,7.13-6.45,19.86-5.85,26.14,1.48a186.87,186.87,0,0,1,15.47,21.17C136.53,82,132.11,89.3,121.27,90Z" />
                    <path
                        d="M127.19,20.6c-.21,4.56-1.33,10.16-5.76,14.52-4,4-9.16,4-13.26.09-7.84-7.4-8-24.56-.3-32.08C112.07-1,117.12-1,121.43,3,125.11,6.47,127.2,12.34,127.19,20.6Z" />
                    <path
                        d="M97.83,18.65c-.39,5.78-1.4,10.71-4.7,14.9-4.3,5.48-10.94,5.73-15.56.56-6.7-7.5-6.54-23.28.3-30.6,4.38-4.7,10.12-4.67,14.55,0C96.61,8,97.28,13.61,97.83,18.65Z" />
                    <path
                        d="M122.27,45.87c.3-6.11,3.43-12,9.65-15.94s12-1.16,13,6S140.94,52.67,134.54,56C127.79,59.56,122.3,55.57,122.27,45.87Z" />
                    <path
                        d="M55,38.81c0-4.65.85-8.1,4.5-9.9s7-.49,9.86,1.87c6.14,5.08,9.26,11.54,8,19.63-.94,5.79-5.77,8.4-11.07,5.8C58.72,52.52,55.61,45.91,55,38.81Z" />
                </svg>
                <p>Todos</p>
            </button>

            <div class="vl d-flex"></div>

            <!--  buscador adm  -->

            <div class="p-1" id="search-perfil-adm">
                <form class="d-flex pt-2" action="#" id="search-form-adm">
                    <input type="text" class="w-100" id="search-input-adm" name="add-ende" placeholder=" Digite o nome"><br><br>
                    <button class="btn" onclick="">
                        <svg id="Camada_1"  height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                            <title>Filtro - Pesquisa</title>
                            <path d="M42.14,79.54C42,35.68,77.14.07,120.67,0A79.13,79.13,0,0,1,200,78.85c.11,44.2-35,79.65-78.88,79.7A78.69,78.69,0,0,1,42.14,79.54Zm78.53,51.83A52,52,0,0,0,173,79.79c.2-28.9-23.18-52.63-51.9-52.69a52.14,52.14,0,0,0-.45,104.27Z"/>
                            <path d="M67.64,150.46,49.46,132.23a7.33,7.33,0,0,0-1.07.86C32.1,149.4,15.83,165.72,0,181.58L18.39,200Z"/>
                        </svg>
                    </button>
            </button>

                </form>
            </div>



          
            

            
        </div>
  

        

    </div>


</div>

<!--   Botão de adicionar animal   -->
<div class="margin-button-adm col-5">
    <button id="button_inicial">Adicionar Animal</button>
</div>





<!--  Catalogo - Admin  -->

<div id="container2">
    

    <!--  LISTA DE ANIMAIS -->
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>
    <div class="pt-5"></div>


    <!-- botoes de passar pagina-->
    <center>
    <div class=" pt-5" id="pages-adm-perfil">
        <button id="button-adm-perfil-1"><a href="#">1</a></button>
        <button id="button-adm-perfil"><a href="#">2</a></button>
        <button id="button-adm-perfil"><a href="#">3</a></button>
        <button id="button-adm-perfil"><a href="#">4</a></button>
        <button id="button-adm-perfil"><a href="#">5</a></button>
        <button id="button-adm-perfil"><a href="#">...</a></button>
        <button id="button-adm-perfil-pro"><a href="#">Próximo></a></button>
        <button id="button-adm-perfil-ult"><a href="#">Último>></a></button>
    </div>
    </center>

</div>

<div class="p-5"></div>