/* Estilos de paginação termina aqui */

 .pagination-container {
            margin: 0px 0;
            padding: 0px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        
        .pagination-description {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0px;
            flex-wrap: wrap;
        }
        
        .current-page-info {
            font-weight: bold;
        }
        
        .goto-page input {
            padding: 5px;
            margin: 0 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            color: black;
        }
        
        .goto-page button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: black;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .pagination {
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
            margin: 0px 0;
        }

        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            margin: 0 0px;
        }
        
        .pagination a.active {
            background-color: #4CAF50;
            color: grey;
            border: 1px solid #4CAF50;
        }
        
        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }

/* Estilos de paginação termina aqui */
        @media (max-width: 768px) {
            /* Ajusta layout para telas médias e pequenas */
            .pagination-description {
                flex-direction: row;
                flex-wrap: nowrap;
                font-size: 0.9em;
            }
            
            .current-page-info {
                font-size: 0.9em;
            }
            
            /* Reduz o tamanho do campo de entrada */
            .goto-page input {
                width: 120px;
                font-size: 0.9em;
            }
            
            .goto-page button {
                padding: 4px 8px;
                font-size: 0.9em;
            }
        }

        @media (max-width: 500px) {

            /* Em telas muito pequenas, ajusta para melhor visualização */
            .pagination-description {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            
            .goto-page {
                align-self: flex-end;
            }
            
            .goto-page input {
                width: 100px;
            }
        }