#tag-container-wrapper {
            position: relative;
            overflow: hidden; /* Oculta a área fora do contêiner */
        }
        #tag-container {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            padding: 10px;
            margin-bottom: -15px;
            width: auto;
            height: auto;
            background-color: transparent;
            scrollbar-width: none; /* For Firefox */
        }
        #tag-container::-webkit-scrollbar {
            display: none; /* For Chrome, Safari, and Opera */
        }
        .tag-item {
            display: inline-block;
            background-color: #fff;
            border: 1px solid #ff4d4d; /*Bordas finas em vermelho*/
            margin: 5px;
            padding: 5px 15px; /* Ajuste o padding para ficar mais retangular */
            border-radius: 10px; /* Menor border-radius para um retângulo */
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
            white-space: nowrap; /* Garante que o texto não quebre */
        }
        .tag-item:hover {
            background-color: #fff;
            transform: scale(1.05);
        }
        .scroll-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: #fff;
            border: none;
            padding: 10px;
            cursor: pointer;
            z-index: 1;
            opacity: 0.2; /* Diminui a opacidade para indicar que não é uma interação principal */
            transition: opacity 0.3s;
        }
        .scroll-button:hover {
            background-color: #fff;
            opacity: 0.6;
        }
        #scroll-left {
            left: 0;
            display: none; /* Começa oculto */
        }
        #scroll-right {
            right: 0;
            display: none; /* Começa oculto */
        }

            #selected-filters {
        background-color: #ffffff; /* Fundo branco */
        padding: 2px;
        border-radius: 8px; /* Bordas arredondadas */
        margin-top: 2px; /* Espaço acima dos filtros selecionados */
    }           

        .filter-item {    
            margin: 5px;
            padding: 10px;
            height: 30px;
            border: 1px solid #ff4d4d;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            transition: background-color .3s;
        }
        .filter-item:hover {
            background-color: #fff;
        }
        .filter-item .remove-btn {
            background: none;
            border: 1px solid #fff;
            border-radius: 50%;
            margin-left: 5px;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            padding: 2px 6px;
            transition: background-color .3s, border-color .3s;
        }
        .filter-item .remove-btn:hover {
            background-color: #fff;
            border-color: #f44336;
            color: #f44336;
        }
        .row-no-reverse {

            display: flex;
            flex-direction: column;
        }
        .row-reverse {

            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }/* Ajustes adicionais para espaçamento e aparência */

@media (min-width: 576px) {
    #ordenartag {
        width: 30%; 

        height:auto;
        float: right;
    }
}
@media (max-width: 576px) {
    #row-no-reverse {
display: flex;
    flex-direction: column-reverse;
    }
}
@media (max-width: 576px) {
    #column-reverse {
display: flex;
    flex-direction: column-reverse;
    }
}
@media (min-width: 576px) {
    .m-5p {
        margin-top: 10px;
    }
}