/* ----------------
SCROLLBAR
----------------------------- */
* {
    letter-spacing: .43px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #A5A3A3;
    border-radius: 360px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A5A3A3;
}

::-webkit-scrollbar-corner {
  background: transparent;
}


/* ----------------
CONNECTION LOST
--------------------------- */
.OnOfflineToast{ border-radius: 20px; gap: 20px; padding: 25px; box-shadow: 0px 17px 32px -2px rgba(0, 0, 0, .1); max-width: 90%;
                position: fixed; top: 150px; left: 50%; transform: translate(-50%, -100px); opacity: 0; visibility: hidden; transition: .3s ease-in-out; z-index: 9999; }

.OnOfflineToast.active{ transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.OnOfflineToast.offline{ background: #FFFAEB; }
.OnOfflineToast.online{ background: #E4FFEC; }

.OnOfflineToast p{ font-weight: 700; font-size: 13px; margin: 0; color: #222; }
.OnOfflineToast .dots{ font-size: 8px; color: rgba(0,0,0, .3); gap: 3px; }





/* ----------------
CONFIRM DIALOG (abbiamo creato una dlg custom di conferma uguale a quella di PF utilizzando javascript) --> guardare sipal-theme-functions.js
--------------------------- */
.sipal-confirm{
    display: none;
    z-index: 9999;
    width: 600px;
    max-width: 95%;
}

.sipal-confirm .ui-dialog-footer{
    width: 100% !important;
}

.sipal-confirm .ui-dialog-footer .sipal-dialog-container-button{
    width: 60%;
    margin-left: auto;
}

@media(max-width: 676px){
    .ui-confirm-dialog{ max-width: 85% !important; }
}



/* ----------------
DIALOG
--------------------------- */
/* Posiziono correttamente al centro della pagina le dialog (avalon le posiziona con i px, quindi al resize o al cambio di altezza si spostano a caso)*/
.ui-dialog:not(.ui-draggable){
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.ui-resizable-n { top: 0; left: 0; }
.ui-resizable-s { bottom: 0; left: 0; }
.ui-resizable-e { right: 0; top: 0; }
.ui-resizable-w { left: 0; top: 0; }
.ui-resizable-ne { right: 0; top: 0; }
.ui-resizable-nw { left: 0; top: 0; }
.ui-dialog .ui-resizable-se { right: 0; bottom: 0; }
.ui-resizable-sw { left: 0; bottom: 0; }





/* ----------------
ELEMENTS
--------------------------- */
/* per elementi PF sticky abbiamo modfificato un po' lo stile. */
.ui-sticky {
    -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
    box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
    top: 150px !important;
}
 
.text-nowrap-ellipsis{
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}