html {
	height: 100vh;
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	margin: 0;
	padding: .5rem;
}

:root {
    --lime-50:  rgb(249, 251, 231);
    --lime-100: rgb(240, 244, 195);
    --lime-200: rgb(230, 238, 156);
    --lime-300: rgb(220, 231, 117);
    --lime-400: rgb(212, 225, 87);
    --lime-500: #cddc39;
    --lime-600: rgb(192, 202, 51);
    --lime-700: rgb(175, 180, 43);
    --lime-800: rgb(158, 157, 36);
    --lime-900: rgb(130, 119, 23);
}

.text-lime-50,.hover\:text-lime-50:hover,.focus\:text-lime-50:focus,.active\:text-lime-50:active{ color: var(--lime-50) !important; }
.text-lime-100,.hover\:text-lime-100:hover,.focus\:text-lime-100:focus,.active\:text-lime-100:active{ color: var(--lime-100) !important; }
.text-lime-200,.hover\:text-lime-200:hover,.focus\:text-lime-200:focus,.active\:text-lime-200:active{ color: var(--lime-200) !important; }
.text-lime-300,.hover\:text-lime-300:hover,.focus\:text-lime-300:focus,.active\:text-lime-300:active{ color: var(--lime-300) !important; }
.text-lime-400,.hover\:text-lime-400:hover,.focus\:text-lime-400:focus,.active\:text-lime-400:active{ color: var(--lime-400) !important; }
.text-lime-500,.hover\:text-lime-500:hover,.focus\:text-lime-500:focus,.active\:text-lime-500:active{ color: var(--lime-500) !important; }
.text-lime-600,.hover\:text-lime-600:hover,.focus\:text-lime-600:focus,.active\:text-lime-600:active{ color: var(--lime-600) !important; }
.text-lime-700,.hover\:text-lime-700:hover,.focus\:text-lime-700:focus,.active\:text-lime-700:active{ color: var(--lime-700) !important; }
.text-lime-800,.hover\:text-lime-800:hover,.focus\:text-lime-800:focus,.active\:text-lime-800:active{ color: var(--lime-800) !important; }
.text-lime-900,.hover\:text-lime-900:hover,.focus\:text-lime-900:focus,.active\:text-lime-900:active{ color: var(--lime-900) !important; }
.bg-lime-50,.hover\:bg-lime-50:hover,.focus\:bg-lime-50:focus,.active\:bg-lime-50:active{ background-color: var(--lime-50) !important; }
.bg-lime-100,.hover\:bg-lime-100:hover,.focus\:bg-lime-100:focus,.active\:bg-lime-100:active{ background-color: var(--lime-100) !important; }
.bg-lime-200,.hover\:bg-lime-200:hover,.focus\:bg-lime-200:focus,.active\:bg-lime-200:active{ background-color: var(--lime-200) !important; }
.bg-lime-300,.hover\:bg-lime-300:hover,.focus\:bg-lime-300:focus,.active\:bg-lime-300:active{ background-color: var(--lime-300) !important; }
.bg-lime-400,.hover\:bg-lime-400:hover,.focus\:bg-lime-400:focus,.active\:bg-lime-400:active{ background-color: var(--lime-400) !important; }
.bg-lime-500,.hover\:bg-lime-500:hover,.focus\:bg-lime-500:focus,.active\:bg-lime-500:active{ background-color: var(--lime-500) !important; }
.bg-lime-600,.hover\:bg-lime-600:hover,.focus\:bg-lime-600:focus,.active\:bg-lime-600:active{ background-color: var(--lime-600) !important; }
.bg-lime-700,.hover\:bg-lime-700:hover,.focus\:bg-lime-700:focus,.active\:bg-lime-700:active{ background-color: var(--lime-700) !important; }
.bg-lime-800,.hover\:bg-lime-800:hover,.focus\:bg-lime-800:focus,.active\:bg-lime-800:active{ background-color: var(--lime-800) !important; }
.bg-lime-900,.hover\:bg-lime-900:hover,.focus\:bg-lime-900:focus,.active\:bg-lime-900:active{ background-color: var(--lime-900) !important; }
.border-lime-50,.hover\:border-lime-50:hover,.focus\:border-lime-50:focus,.active\:border-lime-50:active{ border-color: var(--lime-50) !important; }
.border-lime-100,.hover\:border-lime-100:hover,.focus\:border-lime-100:focus,.active\:border-lime-100:active{ border-color: var(--lime-100) !important; }
.border-lime-200,.hover\:border-lime-200:hover,.focus\:border-lime-200:focus,.active\:border-lime-200:active{ border-color: var(--lime-200) !important; }
.border-lime-300,.hover\:border-lime-300:hover,.focus\:border-lime-300:focus,.active\:border-lime-300:active{ border-color: var(--lime-300) !important; }
.border-lime-400,.hover\:border-lime-400:hover,.focus\:border-lime-400:focus,.active\:border-lime-400:active{ border-color: var(--lime-400) !important; }
.border-lime-500,.hover\:border-lime-500:hover,.focus\:border-lime-500:focus,.active\:border-lime-500:active{ border-color: var(--lime-500) !important; }
.border-lime-600,.hover\:border-lime-600:hover,.focus\:border-lime-600:focus,.active\:border-lime-600:active{ border-color: var(--lime-600) !important; }
.border-lime-700,.hover\:border-lime-700:hover,.focus\:border-lime-700:focus,.active\:border-lime-700:active{ border-color: var(--lime-700) !important; }
.border-lime-800,.hover\:border-lime-800:hover,.focus\:border-lime-800:focus,.active\:border-lime-800:active{ border-color: var(--lime-800) !important; }
.border-lime-900,.hover\:border-lime-900:hover,.focus\:border-lime-900:focus,.active\:border-lime-900:active{ border-color: var(--lime-900) !important; }



.top-25 {
	top: 25% !important;
}
.right-25 {
	right: 25% !important;
}
.bottom-25 {
	bottom: 25% !important;
}
.left-25 {
	left: 25% !important;
}

.top-75 {
	top: 75% !important;
}
.right-75 {
	right: 75% !important;
}
.bottom-75 {
	bottom: 75% !important;
}
.left-75 {
	left: 75% !important;
}


@media screen and (min-width: 576px) {
    .sm\:white-space-normal {
        white-space: normal !important
    }

    .sm\:white-space-nowrap {
        white-space: nowrap !important
    }
}

@media screen and (min-width: 768px) {
    .md\:white-space-normal {
        white-space: normal !important
    }

    .md\:white-space-nowrap {
        white-space: nowrap !important
    }
}

@media screen and (min-width: 992px) {
    .lg\:white-space-normal {
        white-space: normal !important
    }

    .lg\:white-space-nowrap {
        white-space: nowrap !important
    }
}

@media screen and (min-width: 1200px) {
    .xl\:white-space-normal {
        white-space: normal !important
    }

    .xl\:white-space-nowrap {
        white-space: nowrap !important
    }
}


.s-label {
	display: inline-block;
	padding: 0.5rem;
	white-space: nowrap;
	border: 1px solid transparent;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

.ui-datatable table.s-table-auto, .s-table-auto .ui-selectonemenu-table {
	table-layout: auto;
}

.s-table-auto td, .s-table-auto th {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.s-table-auto .s-col-commands {
	width: 3rem;
	text-align: center;
}

.s-noborder, .s-noborder td, .s-noborder th {
    border: 0 !important;
}


.s-cc-field2 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.s-cc-field2 .s-cc-field2-label {
	font-weight: bold;
	padding: 8px 0;
}

.s-cc-field2 .s-cc-field2-value {
	padding: 0 4px;
	/* line-height: 2.45em; */
}

.s-cc-field2 .s-cc-field2-value .s-cc-field2-value-content {
	/* display: inline-block;
	width: 100%; */
	vertical-align: middle;
}

.s-cc-field2 .s-cc-field2-value .s-cc-field2-value-content>label {
	display: block;
	padding: 0.5rem 0.5rem;
	border: 1px solid transparent;
}




table.s-valuetable>tbody>tr>td {
	padding: 0.25rem;
	text-align: right;
}

table.s-valuetable>tbody>tr:nth-child(1)>td, table.s-valuetable>tbody>tr>td:nth-child(1)  {
	background-color: var(--gray-300);
	font-weight: bold;
	text-align: center;
}


/* .ui-tabs {
	display: flex;
	flex-direction: column;
}

.ui-tabs .ui-tabs-nav {
	flex: 0;
}

.ui-tabs .ui-tabs-panels {
	flex: 1;
	overflow: hidden;
}

.ui-tabs .ui-tabs-panels .ui-tabs-panel {
	height: 100%;
	overflow: auto;
} */




/* 1. IL CONTENITORE GALLEGGIANTE
   Serve solo a posizionare il tutto sopra gli altri elementi.
*/
.shape-floating-message {
    position: absolute;
    z-index: 9998; /* Abbastanza alto per stare sopra input e dialog */
    white-space: nowrap; /* Impedisce che il messaggio vada a capo su più righe */
    display: flex; /* Allinea freccia e messaggio */
    align-items: center; /* Centra verticalmente la freccia rispetto al box */
}

/* 2. IL MESSAGGIO INTERNO
   È un p:message standard, ma dobbiamo resettare i margini esterni 
   e aggiungere l'ombra perché ora sta "volando".
*/
.shape-floating-message .ui-message {
    /* Aggiungiamo l'ombra per dare profondità (Material style shadow) */
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* 3. LA FRECCIA (Base) */
.shape-floating-message .shape-msg-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 9999; /* Deve stare sopra l'ombra del box */
}

/* --- POSIZIONAMENTO FRECCIA --- */

/* Caso A: Messaggio a DESTRA dell'input -> Freccia a SINISTRA */
.shape-floating-message.pos-right-side .shape-msg-arrow {
    left: -8px; /* Esce dal box */
    border-width: 8px 8px 8px 0;
    border-color: transparent;
    /* Dobbiamo colorare il bordo destro per fondersi col messaggio */
    border-right-color: inherit; 
}
/* Collega la freccia al box messaggio per ereditarne il colore */
.shape-floating-message.pos-right-side .ui-message {
    margin-left: 0; 
}

/* Caso B: Messaggio a SINISTRA dell'input -> Freccia a DESTRA */
.shape-floating-message.pos-left-side .shape-msg-arrow {
    right: -8px; /* Esce dal box */
    border-width: 8px 0 8px 8px;
    border-color: transparent;
    border-left-color: inherit;
}

/* --- COLORI FRECCIA (Theme Matching) ---
   Qui sta il trucco: applichiamo il colore del tema alla freccia.
   Sostituisci i codici HEX con quelli del tuo tema se diversi.
   Questi sono i default comuni per i temi 'light'.
*/

/* ERROR */
.shape-floating-message:has(.ui-message-error) .shape-msg-arrow {
    border-right-color: #ef5350; /* Per pos-right-side */
    border-left-color:  #ef5350; /* Per pos-left-side */
}

/* FATAL (Spesso uguale a Error) */
.shape-floating-message:has(.ui-message-fatal) .shape-msg-arrow {
    border-right-color: #ef5350; 
    border-left-color:  #ef5350;
}

/* WARN */
.shape-floating-message:has(.ui-message-warn) .shape-msg-arrow {
    border-right-color: #ffc107; /* Giallo chiaro tipico */
    border-left-color:  #ffc107;
}

/* INFO */
.shape-floating-message:has(.ui-message-info) .shape-msg-arrow {
    border-right-color: #03a9f4; /* Azzurro chiaro tipico */
    border-left-color:  #03a9f4;
}