/* IMPORTANTE: afecta a todos los overlaypanel sin importar clases o ids  */

body .ui-overlaypanel{
    max-width: 75vw !important;
    max-height: 80vh !important;
    border-radius: .5rem;
}

body .ui-overlaypanel .ui-overlaypanel-content{
    width: 100% !important;
    height: 100% !important;
    max-height: 80vh !important;
    border-radius: .5rem;
}

body .ui-overlaypanel-close{
    background-color: var(--color-strong-error) !important;
}

/* scrolling */

/* Solo funciona para Firefox */
@-moz-document url-prefix()  {
    .body .ui-overlaypanel,
    .body .ui-overlaypanel .ui-overlaypanel-content{
        scrollbar-width: thin;
        scrollbar-color: #666 #f1f1f1;
    }
}

/* chromium */

/* Estilo del fondo de la barra de desplazamiento */
.body .ui-overlaypanel::-webkit-scrollbar,
.body .ui-overlaypanel .ui-overlaypanel-content::-webkit-scrollbar{
    width: 1rem;
    height: 1rem;
}

/* Estilo del track (pista) de la barra de desplazamiento */
.body .ui-overlaypanel::-webkit-scrollbar-track,
.body .ui-overlaypanel .ui-overlaypanel-content::-webkit-scrollbar-track{
    border-radius: 0 .5rem .5rem 0 !important;
    background-color: var(--color-white-bold); /* Color de fondo de la pista */
}

/* Estilo del thumb (el bloque que se mueve dentro de la barra) */
.body .ui-overlaypanel::-webkit-scrollbar-thumb,
.body .ui-overlaypanel .ui-overlaypanel-content::-webkit-scrollbar-thumb{
    background-color: #777; /* Color del bloque */
    border-radius: 1rem; /* Bordes redondeados */
    border: 3px solid var(--color-white-bold); /* Borde del bloque */
}

/* Estilo del thumb al hacer hover */
.body .ui-overlaypanel::-webkit-scrollbar-thumb:hover,
.body .ui-overlaypanel .ui-overlaypanel-content::-webkit-scrollbar-thumb:hover{
    background-color: #555; /* Cambia el color al pasar el cursor */
}