Q-table slot:pagination 'q-table__control' it just stays centered in the middle of the footer

[ILadyLuckI]

using slot:pagination generates a 'q-table__control' with
a Records per page: tag that is very practical for the user! However, I am unable to move this 'q-table__control' either to the right or to the left! This doesn't allow me to add items to the table footer in an organized way, for example some 'badges'! Is there any way to move this ''q-table__control' component? I've already tried using !important, as well as ::v-deep and it just doesn't leave the middle of the footer!
Thanks!

<q-table dense style="background-color: #fafafa; overflow: auto" class="fixar-scroll-header scroll altura-tabela" :class="[ atribuiSombra ? 'atribui-sombra-th-left' : '', atribuiSombraFuncoes ? 'atribui-sombra-td-right atribui-sombra-th-right' : '' ]" :data="recebimentos" :pagination.sync="pagination" selection="multiple" :selected.sync="recebimentosSelecionados" >

<template v-slot:pagination="scope"> <!-- CONTAINER --> <div class="container"> <!-- PAGINATION --> <div class="pagination"> </div> <!-- BADGES --> <div class="badges"> </div> </div> </template> </q-table>

`<style scoped>
.fixar-scroll-header ::v-deep .q-table__bottom {
display: flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
padding: 0px !important;
}
.container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}

.badges {
display: flex;
flex-wrap: nowrap;
}

.pagination{
display: flex;
justify-content: right;
align-items: center;
flex-wrap: nowrap;
}
</style>
`