.brator-megasell-area .splide__arrows .splide__arrow--next svg,
.brator-megasell-area .splide__arrows .splide__arrow--prev svg,
.brator-banner-slider-area .splide__arrows .splide__arrow--prev svg,
.brator-banner-slider-area .splide__arrows .splide__arrow--next svg { 
    font-size: 17px;
    width: 1em;
    height: 1em;
}
.brator-megasell-area .splide__arrows .splide__arrow--prev span:hover,
.brator-banner-slider-area .splide__arrows .splide__arrow--prev span:hover{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/> </svg>");
}
.brator-megasell-area .splide__arrows .splide__arrow--prev span,
.brator-banner-slider-area .splide__arrows .splide__arrow--prev span{   
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/> </svg>");
    background-repeat: no-repeat;
    background-position-x: 49%;
    background-position-y: 49%;
    width: 100%;
    height: 100%;
    z-index: 9;
    position: absolute;
    display: block;
    clear: both;
    overflow: hidden;
    /*left: 0px;*/
    top: 0;
}
.brator-megasell-area .splide__arrows .splide__arrow--next span:hover,
.brator-banner-slider-area .splide__arrows .splide__arrow--next span:hover{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/> </svg>");
}
.brator-megasell-area .splide__arrows .splide__arrow--next span,  
.brator-banner-slider-area .splide__arrows .splide__arrow--next span{   
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/> </svg>");
    background-repeat: no-repeat;
    background-position-x: 49%;
    background-position-y: 49%;
    width: 100%;
    height: 100%;
    z-index: 9;
    position: absolute;
    display: block;
    clear: both;
    overflow: hidden;
    /*left: 10px;*/
    top: 0;
}
/*
.brator-megasell-area .splide__arrows .splide__arrow--prev,
.brator-banner-slider-area .splide__arrows .splide__arrow--prev{
    background: transparent;
    width: 30px;
    height: 118px;
    opacity: 1;
    left: -1px;
}
.brator-megasell-area .splide__arrows .splide__arrow--next,
.brator-banner-slider-area .splide__arrows .splide__arrow--next{
    background: transparent;
    width: 30px;
    height: 118px;
    opacity: 1;
    right: -1px;
}
*/

.brator-megasell-area .splide__arrows .splide__arrow--prev,
.brator-banner-slider-area .splide__arrows .splide__arrow--prev{
    background: rgba(255,255,255,.5);
    width: 80px;
    height: 80px;
    /*opacity: 1;*/
    left: 15px;
}
.brator-megasell-area .splide__arrows .splide__arrow--next,
.brator-banner-slider-area .splide__arrows .splide__arrow--next{
    background: rgba(255,255,255,.5);
    width: 80px;
    height: 80px;
    opacity: 1;
    right: 15px;
}


/* CUSTOM MARLON & FRANCISCO*/

.brator-section-header h2 {
    margin-right: 0px;
    font-family: "Titillium Web", sans-serif;
}

.text-white {
    color: #fff !important;
}

.text-center {
    justify-content: center !important;
    text-align: center !important;
}

/*
.brator-section-header {
    justify-content: center !important;
    text-align: center !important;  
}
*/


.brator-newsletter-area.design-one.design-for-home-two {
    padding-top: 35px;
    padding-bottom: 20px;
}

.brator-newsletter-form.design-one .news-letter-form button, .brator-newsletter-form.design-one .news-letter-form button:hover, .brator-newsletter-form.design-one .news-letter-form input {
    border: 1px solid #fff;
}

.call-servicio {
    background-color: #1e2228!important;
}

.call-servicio .brator-app-content-area {
    background: none;
}

.call-servicio .brator-app-content-area h2, .call-servicio .brator-app-content-area p {
    color: #fff !important;
}

.sombracompleta {
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 999999999;
    opacity: 0.8;
    filter: alpha(opacity=80);
    display: none;
  }
  
  .popover2 {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    top: 15% !important;
    max-width: 600px;
    min-width: 320px;
    min-height: 320px;
    max-height: 600px;
    margin: auto auto !important;
    vertical-align: central;
    z-index: 99999999999 !important;
    background-color: transparent;
    display: none;
  }
  
  .closex {
    display: block;
    float: right;
    position: fixed;
    top: 10px;
    right: 10px;
    height: 20px;
    cursor: pointer;
    cursor: hand;
  }
  

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem
}

.alert-heading {
    color: inherit
}

.alert-link {
    font-weight: 700
}

.alert-dismissible {
    padding-right: 4rem
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: .75rem 1.25rem;
    color: inherit
}

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff
}

.alert-primary hr {
    border-top-color: #9fcdff
}

.alert-primary .alert-link {
    color: #002752
}

.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db
}

.alert-secondary hr {
    border-top-color: #c8cbcf
}

.alert-secondary .alert-link {
    color: #202326
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb
}

.alert-success hr {
    border-top-color: #b1dfbb
}

.alert-success .alert-link {
    color: #0b2e13
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb
}

.alert-info hr {
    border-top-color: #abdde5
}

.alert-info .alert-link {
    color: #062c33
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba
}

.alert-warning hr {
    border-top-color: #ffe8a1
}

.alert-warning .alert-link {
    color: #533f03
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb
}

.alert-danger hr {
    border-top-color: #f1b0b7
}

.alert-danger .alert-link {
    color: #491217
}

.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe
}

.alert-light hr {
    border-top-color: #ececf6
}

.alert-light .alert-link {
    color: #686868
}

.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca
}

.alert-dark hr {
    border-top-color: #b9bbbe
}

.alert-dark .alert-link {
    color: #040505
}


.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5
}

.close:hover {
    color: #000;
    text-decoration: none
}

.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover {
    opacity: .75
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0
}

a.close.disabled {
    pointer-events: none
}

.fade-out {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.swal-button--confirm {
    background-color: #000;
}
.swal-button--confirm:hover {
    background-color: #000 !important;
}
.swal-button--cancel:hover {
    background-color:#e4061d !important;
    color:#fff !important;
}

.product__showing--count {
    font-weight: 500;
    letter-spacing: 0.5px;
    display: block;
    width: 100%;
    text-align: end;
    padding: 10px 15px;
    background-color: #f4f5f9;
    border-radius: 5px;
}

ul.tags_cloud {
    padding-left: 0px;
}

.tags_cloud li {
    display: inline-block;
    margin: 0 4px 4px 0; 
}

.button_grey {
    padding: 6px 13px;
    display: inline-block;
    background: #fff;
    text-transform: capitalize;
    border-radius: 5px;
    font-size: 14px;
    border: none; }

.button_grey:hover {
      color: white;
      background: #e4061d; 
}
  
.button_red {
    padding: 6px 13px;
    display: inline-block;
    background: #e4061d;
    color: white;
    text-transform: capitalize;
    border-radius: 5px;
    font-size: 14px;
    border: none; }

.button_red:hover {
      color: white;
      background: #000; 
}




    li.widget__tagcloud--list a.active  {
        color: white;
        background: #e4061d;
    }

    .brator-cart-header-area h2 {
        font-size: 48px;
        color: black;
        font-weight: 700;
    }    

    .form-control {
        width: 100%;
        height: 40px; 
        border-radius: 3px;
        background: var(--color-white);
        padding: 10px 15px;
        margin-bottom: 10px;
        border-width: 1px !important;
        border-color: #999999 !important;
        border-style: solid !important;
        font-size: 16px;
    }
    textarea.form-control {
        min-height: 100px !important;
    }


    select.form-control {
        -webkit-appearance: none; /* Ocultar la flecha en Safari y Chrome */
        -moz-appearance: none; /* Ocultar la flecha en Firefox */
        appearance: none; /* Ocultar la flecha en navegadores modernos */
        background-color: white;
        background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 30px;
      }
    
      /* Ajustes adicionales para navegadores móviles */
      select.form-control::-ms-expand {
        display: none; /* Ocultar la flecha en Internet Explorer y Edge */
      }
 


    .checkbox_item input {
        float: left;
        margin-right: 10px;
        }
    .checkbox_item label  {
        font-size: 14px;
    font-weight: bold;
    }

    .ul_li_block p {
        line-height: 18px;
        text-wrap: balance;

    }

    .notificacion_despacho {
        line-height: 18px;
        text-wrap: balance;  
    }




.brator-header-top-bar-area.design-one.dark-bg {
    background-color: #f3f4f6 !important;
    border-bottom: 2px solid #e4061d;
}   
.brator-header-area.header-three.header-one.dark-bg {
    background-color: #f3f4f6 !important;
}

.brator-header-menu-area.dark-bg {
    background-color: #e4061d !important;
}

.caja-sugerencia {
    cursor: pointer;
    position: relative;
    display: block;
  }

  .caja-sugerencia span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: yellow;
    border-radius: 50%;
    font-size: 25px;
    font-weight: bold;
  }

  /* Contenedor emergente: tamaño = tamaño de la imagen */
  .contenedor-foto {
    display: none;
    position: absolute;
    top: 100%; /* Aparece debajo del círculo */
    left: 0;
    background-color: white;
    /*border: 3px solid yellow;*/
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 10100;
    padding: 0; /* Eliminamos el padding para que no afecte el tamaño */
  }

  /* La imagen controla el tamaño del contenedor */
  .contenedor-foto img {
    display: block; /* Elimina espacios fantasma */
    width: auto; /* Tamaño original de la imagen */
    height: auto; /* Proporción natural */
    /*max-width: 300px;*/ /* Opcional: límite máximo (ajusta según necesites) */
    max-width: none;
  }

  .caja-sugerencia:hover .contenedor-foto {
    display: block;
  }

    /* Ajuste para pantallas pequeñas (opcional) */
    @media (max-width: 600px) {
        .contenedor-foto {
          left: 0; /* Alineado a la izquierda en móviles */
          transform: none;
          max-width: 100vw !important; /* Ocupa todo el ancho disponible */
        }

        .contenedor-foto img {
            width: 100% !important;
            min-width: 400px;
            height: auto !important;
        }

      }

  .brator-features-area.design-one a.brator-features-single p {
    font-size: 18px;
  }
  .brator-features-area.design-one a.brator-features-single p span {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
  }

  .search__filter--form {
    border-bottom: 1px solid #e5e5e5;
  }

.brator-whats-hot-slider .brator-hot-single-box {
    padding: 0px; 
    min-height: 320px;
}

.brator-features-area.design-one {
    border-bottom: 1px solid #e5e5e5;
}

.brator-offer-slider-area.brator-whats-hot-area .brator-section-header {
    justify-content: start;
}

.brator-deal-product-slider.brator-best-seller {
    background-color: transparent !important;
    padding-top: 35px;
    padding-bottom: 35px;
}

/*.brator-main-banner-content {
    text-align: center;
    padding-top: 200px;
    padding-bottom: 200px;
}*/

/*************************************/
.brator-main-banner-area.banner-style-two {
    background-color: white;
}


.brator-parts-search-box-area.search-box-with-banner.design-two .brator-parts-search-box-form {
    border: 1px solid #eee;
}

.search__filter--form {
    border-bottom: none;
}

/************************************************/


.caja-amarilla-menu {
    background-color: yellow;
}

.caja-amarilla-menu a {
    color: #040505 !important;
}

.header-support-info a {
    font-size: 22px;
    color: black !important;
    font-weight: 700;
}

.brator-social-link2{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}



.brator-social-link2 a:hover {
    color: black;
}



.ws-flotante {
    position: fixed;
    right: 35px;
    bottom: 15%;
    transform: translateY(-50%);
    z-index: 99999;
    font-family: Arial, sans-serif;
  }
  
  .ws-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
  }
  
  .ws-icon {
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    z-index: 2;
  }
  
  .ws-text {
    background-color: #1c9911; /* Color oficial de WhatsApp */
    color: white;
    padding: 8px 15px;
    border-radius: 12px 0 0 12px;
    opacity: 0;
    width: 0;
    height: 66px; /* Ajustado para mejor proporción */
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: absolute;
    right: 100%; /* Posiciona el texto a la izquierda del icono */
    display: flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/
    font-weight: bold;
  }
  
  /* Efecto hover */
  .ws-link:hover .ws-text {
    opacity: 1;
    width: 150px; /* Usamos auto en lugar de un valor fijo */
    padding-right: 20px;
    margin-right: -30px; /* Pequeño solape con el icono */
  }
  
  .ws-link:hover .ws-icon {
    transform: scale(1.1);
  }

  .brator-header-area.header-three.header-one.dark-bg .brator-search-area .search-form input::placeholder {
    color: #383d41;
  }

@media (max-width: 1599px) {
  .brator-banner-area.design-four .brator-banner-content h2 {
    max-width: 100%;
    color: white;
    font-size: 50px;
  }
}




.icon-bar {
    position: fixed;
    top: 50%;
    right: 0; 
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 999999;

  }
  
  
  .icon-bar a {
    display: block;
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: white;
    font-size: 18px;
  }
  

  .brator-footer-top-address .brator-footer-top-content a {
    font-size: 14px;
    color: #666666;
    text-decoration: underline;
  }

  .strong-suave strong {
    font-weight: bold !important;
    color: inherit !important;
  }


  .precio_oferta, .precio_oferta span {
    color: var(--color-high-dark) !important;
    font-weight: bold !important;
  }

  .precio_lista, .precio_lista span {
    font-size: 22px !important;
  }

  .indice_productos {
    display: block;
    font-weight: bold;
    margin-bottom: 5px !important;
  }

  .indice_productos span {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background-color: #000;
    margin-right: 20px;
    border-radius: 8px;
    width: 65px;
    height: 35px;

  }



  .btn_ws_kilometraje {
    /*margin-top: 60px;*/
    color: #fff;
    width: 100%;
    padding: 15px 20px;
    font-size: 22px;
    line-height: 20px;
    height: 50px;
    font-weight: 500;
    overflow: hidden;
    background-color: #1c9911;
    border: 2px solid #1c9911;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn_ws_kilometraje::after {
    content: "";
    width: 50px;
    height: 50px;
    background-image: url(../images/ws-flotante.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.btn_ws_kilometraje:hover {
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
    


/* Clase para mostrar en pantallas >= 768px (PC/Tablet) y ocultar en móvil */
.show-on-desktop {
    display: block; /* o flex, grid, etc. según necesites */
}
.hide-on-desktop {
    display: none !important;
}

/* Clase para mostrar en pantallas < 768px (Móvil) y ocultar en desktop */
.show-on-mobile {
    display: none !important;
}
.hide-on-mobile {
    display: block; /* o flex, grid, etc. según necesites */
}

/* Media Query para activar/desactivar según el tamaño */
@media (min-width: 768px) {
    .show-on-desktop {
        display: block !important; /* Visible en desktop */
    }
    .hide-on-desktop {
        display: none !important; /* Oculto en desktop */
    }
    .show-on-mobile {
        display: none !important; /* Oculto en desktop */
    }
    .hide-on-mobile {
        display: block !important; /* Visible en desktop */
    }
}

@media (max-width: 767px) {
    .show-on-mobile {
        display: block !important; /* Visible en móvil */
    }
    .hide-on-mobile {
        display: none !important; /* Oculto en móvil */
    }
    .show-on-desktop {
        display: none !important; /* Oculto en móvil */
    }
    .hide-on-desktop {
        display: block !important; /* Visible en móvil */
    }

    .caja-sugerencia span {
        display: block; /* Como lo tienes ahora para celulares */
        text-align: center; /* ¡IMPORTANTE! Centra el contenido inline (como la <i>) horizontalmente */
        line-height: 40px; /* ¡IMPORTANTE! Centra el contenido inline (como la <i>) verticalmente. */
    }

    .brator-parts-search-box-area.search-box-with-banner.design-two .brator-parts-search-box-form {
        border: none;
    }

}


/* Media Query para pantallas medianas (tablets y algunos laptops pequeños) */
/* De 300px a 1199.98px, width: 50% (2 elementos por fila) */
@media only screen and (min-width: 300px) and (max-width: 1199.98px) {
    .brator-features-area.design-one a.brator-features-single {
        margin: 15px 0; /* Margen vertical entre las filas */
        width: 50%; /* Dos elementos por fila */
        border: 0; /* Quita el borde vertical cuando se envuelven */
        /* Mantén justify-content: flex-start heredado de los estilos generales */
    }
}

/* Media Query para celulares (pantallas más pequeñas) */
/* De 300px a 500.98px, width: 100% (1 elemento por fila) */
@media only screen and (min-width: 300px) and (max-width: 500.98px) {
    .brator-features-area.design-one a.brator-features-single {
        width: 100%; /* Un elemento por fila */
        border: 0; /* Asegura que no haya bordes laterales si no los quieres */
        /* Mantén justify-content: flex-start heredado de los estilos generales */
    }
}

/* Media Query específica para el rango de 300px a 767.98px */
/* Simplemente elimina la regla 'justify-content: center;' o cámbiala a 'flex-start' */
@media only screen and (min-width: 300px) and (max-width: 767.98px) {
    .brator-features-area.design-one a.brator-features-single {
        padding: 0px 25px;
        /* justify-content: center;  <-- ¡ELIMINA ESTA LÍNEA! */
        /* O cámbiala a: */
        /* justify-content: flex-start; */
    }
}

/* Asegúrate de que .brator-features-area.design-one (el padre)
   tenga justify-content: flex-start; en su media query de wrap */
@media only screen and (min-width: 300px) and (max-width: 1199.98px) {
    .brator-features-area.design-one {
        flex-wrap: wrap;
        justify-content: flex-start !important; /* Crucial para alinear las filas a la izquierda */
        /* Considera añadir un 'gap' aquí si quieres espacio entre las columnas */
        /* gap: 20px; */
    }
}


@media only screen and (min-width: 300px) and (max-width: 1199.98px) {
    .brator-slide-menu-area.dark-bg .brator-slide-menu-close {
        background: #f3f4f6 !important
    }
    .brator-slide-menu-area.dark-bg .brator-slide-logo-items {
        background: #f3f4f6 !important
    }

    .mobile-menu-open .brator-slide-menu-content {
        z-index: 10001 !important;
    }

}


/* Media Query para Escritorio (aplica el scroll) */
@media (min-width: 992px) { /* Usamos 992px, que es un breakpoint común para 'lg' en Bootstrap, si lo estás usando.
                               Ajusta este valor si tu diseño de escritorio inicia en otro ancho, como 768px. */
    .brator-filter-item-content-area {
        max-height: 500px !important; /* ¡Ajusta esta altura máxima! Prueba con 300px, 350px, 400px, 500px para ver cuál se ve mejor. */
        overflow-y: auto; /* Habilita la barra de desplazamiento vertical si el contenido excede max-height */
        overflow-x: hidden; /* Oculta la barra de desplazamiento horizontal si aparece (raro en este caso) */
        
        /* Opcional: Estilo de la barra de desplazamiento para navegadores basados en Webkit (Chrome, Safari, Edge) */
        /* Ten en cuenta que esto es no-estándar y puede no funcionar en todos los navegadores (ej. Firefox) */
        scrollbar-width: thin; /* 'auto' | 'thin' | 'none' */
        scrollbar-color: #b0b0b0 #f0f0f0; /* color_del_thumb color_del_track */
    }

    /* Opcional: Estilo de la barra de desplazamiento Webkit */
    .brator-filter-item-content-area::-webkit-scrollbar {
        width: 8px; /* Ancho de la barra de desplazamiento vertical */
    }

    .brator-filter-item-content-area::-webkit-scrollbar-track {
        background: #f0f0f0; /* Color de fondo de la pista de la barra */
        border-radius: 10px;
    }

    .brator-filter-item-content-area::-webkit-scrollbar-thumb {
        background-color: #b0b0b0; /* Color del "pulgar" de la barra */
        border-radius: 10px;
        border: 2px solid #f0f0f0; /* Espacio alrededor del pulgar */
    }
}