/* ==========================================================================
   IMP-XXX-UI: palette e misure comuni. Da riferire sempre via var(), mai
   riscritte letterali nelle regole.
   ========================================================================== */
:root {
	/* Superfici di "intestazione" (header di colonna e simili) */
	--rgui2-c-header-bg: #F1F5F9;
	/* IMP-XXX-UI: stesso colore delle label dei form, hanno lo stesso ruolo */
	--rgui2-c-header-fg: var(--rgui2-c-text-soft);

	/* Stati di riga/elemento */
	--rgui2-c-selected-bg: #D8E7F5;
	--rgui2-c-hover-bg: #E7F0F9;

	/* Sfondo alternato delle righe (zebra striping) */
	--rgui2-c-stripe-bg: #F6F9FC;

	/* Evidenziazione tenue di celle/colonne di rilievo (es. totali) */
	--rgui2-c-accent-bg: #FDF1E3;

	/* Colore generico di bordi, separatori e divisori */
	--rgui2-c-line: #E0E0E0;

	/* IMP-XXX-UI: contorno delle card, piu' marcato di -line perche' deve reggere
	   il confronto con lo sfondo della pagina */
	--rgui2-c-card-line: #CDD2D9;

	/* IMP-XXX-UI: sfondo della pagina di funzione, dietro le card */
	--rgui2-c-page-bg: #F4F5F7;

	/* IMP-XXX-UI: superficie dei sotto-pannelli e delle title bar delle card */
	--rgui2-c-subpanel-bg: #F6F7F9;

	/* Barre di cornice e linea appena accennata che le separa dal contenuto */
	--rgui2-c-bar-bg: #F5F9FD;
	--rgui2-c-line-soft: #DBE3EC;

	/* IMP-XXX-UI: fondo del banner e testo che ci va sopra. Ardesia, un piano piu'
	   chiaro della navbar, cosi' la barra si stacca da essa */
	--rgui2-c-banner-bg: #3D6280;
	--rgui2-c-banner-fg: #E4EDF3;

	/* Testo di servizio per cornice, note e didascalie */
	--rgui2-c-text-soft: #46586B;

	/* IMP-XXX-UI: testo dei dati nelle celle delle listbox. Grigio scuro al posto
	   del nero pieno, che a 11px affatica la lettura di tabelle dense */
	--rgui2-c-text-data: #2B3541;

	/* Blu scuro istituzionale, con il testo tenue che ci va sopra e lo sfondo
	   della voce attiva */
	--rgui2-c-brand-dark: #002B46;
	--rgui2-c-brand-dark-soft: #244960;
	--rgui2-c-brand-fg: #C9D7E2;

	/* IMP-XXX-UI: titoli delle card e dei sotto-pannelli. Schiarita di -brand-dark,
	   troppo carico come testo su bianco */
	--rgui2-c-title: #1D4B68;

	/* Colore primario dei pulsanti nei vari stati, piu' la versione tenue usata
	   come sfondo del pulsante secondario su hover */
	--rgui2-c-primary: #0B5D91;
	--rgui2-c-primary-hover: #0A5280;
	--rgui2-c-primary-active: #08476E;
	--rgui2-c-primary-soft: #EAF2F8;

	/* Elementi interattivi (icone e comandi dentro le liste), a riposo e su hover */
	--rgui2-c-action: #3089c7;
	--rgui2-c-action-hover: var(--rgui2-c-brand-dark);

	/* Altezza standard delle righe dei dati e relativo padding verticale */
	--rgui2-row-h: 28px;
	--rgui2-row-pad-v: 4px;
}

.z-window-content {
	padding: 0px;
	background: #FFFFFF;
	/*background: transparent !important;*/
	color: rgba(0, 0, 0, 0.9);
	overflow: hidden;
	zoom: 1;
}

.z-tabpanel {
	border-top: 1px solid #D9D9D9;
	padding: 0px;
	zoom: 1;
	color: rgba(0, 0, 0, 0.9);
}

.z-window {
	overflow: hidden;
	zoom: 1;
	border: 1px solid #A8A8A8;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	padding: 0px;
	background-color: #F9FCFF;
}

.z-north-body, .z-south-body, .z-west-body, .z-center-body, .z-east-body
	{
	line-height: 16px;
	padding: 0px;
	color: rgba(0, 0, 0, 0.9);
}

.z-borderlayout {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

.northFunction {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.57);
	height: 47px;
	background: #FFFFFF;
	border-bottom: 1px solid #D9D9D9;
	padding: 5px 10px;
	overflow: hidden;
	cursor: default;
	white-space: nowrap;
	text-align: left;
}

.my-form-table {
	width: 100%;
	border-collapse: separate;
	/* Senza bordi collapse o separate cambia poco */
	border-spacing: 0;
}

.my-form-table td, .my-form-table th {
	text-align: left;
	padding: 8px 12px;
	vertical-align: middle;
	border: 1px solid; /* Niente bordi */
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	color: #333;
	background-color: transparent; /* Sfondo trasparente */
}

.my-form-table tr:hover {
	background-color: transparent; /* Nessun hover */
}

/* IMP-XXX-UI: label meno incisiva del valore che descrive */
.form-label {
	text-align: left !important;
	color: var(--rgui2-c-text-soft) !important;
	font-size: 11px;
	font-weight: bold !important;
}

.form-label .z-label, .z-radio-content, .z-checkbox-content, .z-loading
	{
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
}

.form-item {
	text-align: left;
}

.no-highlight .z-grid {
	background: #FFFFFF;
	border: 0px;
	overflow: hidden;
	zoom: 1;
  border-collapse:collapse !important;
}

.no-highlight .z-grid-body .z-cell {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	color: var(--rgui2-c-text-data); /* IMP-XXX-UI */
	padding: 5px 8px;
	line-height: 15px;
	overflow: hidden;
}

.no-highlight .z-row .z-cell {
	border-top: 0px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.no-highlight tr.z-row td.z-row-inner, tr.z-grid-odd .z-cell, tr.z-grid-odd,
	.no-highlight tr.z-row-over>td.z-row-inner {
	background: white;
}

.z-row:hover>.z-row-inner, .z-row:hover>.z-cell {
	background: white;
}

.footer-buttons {
	height: 40px;
	width: 120px;
	background-color: #ffffff;
	text-align: center;
	padding-top: 2px;
}

.z-listheader-content, .z-listcell-content, .z-listgroup-content,
	.z-listgroupfoot-content, .z-listfooter-content {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: var(--rgui2-c-text-data); /* IMP-XXX-UI */
	line-height: 1.3em;
	overflow: hidden;
	padding: 4px 4px;
}

.z-panelchildren {
	position: relative;
	padding: 0px;
	overflow: hidden;
	zoom: 1;
}

.z-tabbox .z-tabs {
	border-bottom: 2px solid #ccc;
}

.z-tabbox .z-tab {
	font-size: 11px;
	padding: 6px 24px;
	border: 1px solid #ddd;
	border-bottom: none;
	background-color: #f8f9fa;
	border-radius: 6px 6px 0 0;
	height: 40px;
}

.z-tabbox .z-tab:hover {
	background-color: #e9ecef;
	cursor: pointer;
}

.z-tabbox .z-tab-selected {
	font-weight: bold;
	background-color: #ffffff;
	border-color: #007bff #007bff transparent #007bff;
	color: #007bff;
}

.z-tabbox .z-tabpanel {
	border: 1px solid #ccc;
	background-color: #fff;
}

.no-highlight .z-row .z-row-inner, .z-row .z-cell {
	border-top: 0px solid #F2F2F2;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.z-grid {
	background: #FFFFFF;
	border: 0px solid #D9D9D9;
	overflow: hidden;
	zoom: 1;
}

.z-panel-icon {
	background: transparent;
	color: #ffffff;
	margin: auto 1px;
	padding: 0px;
	text-align: left;
	overflow: hidden;
	cursor: pointer;
	font-size: 11px;
	display: inline-block;
	width: 28px;
	height: 24px;
	line-height: 24px;
	border: none;
}

/* IMP-XXX-UI: sostituita dal blocco sotto
.z-listbox-autopaging .z-listcell-content {
	height: 32px;
	padding: 4px 4px !important;
	line-height: 22px;
	overflow: hidden;
	border: 1px solid #f3f3f3;
}
*/

/* IMP-XXX-UI: riporta ai valori comuni l'altezza che il tema impone sul contenuto
   della cella. Con box-sizing:border-box il padding rientra nell'altezza */
.z-listbox-autopaging .z-listcell-content {
	height: var(--rgui2-row-h);
	line-height: calc(var(--rgui2-row-h) - var(--rgui2-row-pad-v) * 2);
	padding: var(--rgui2-row-pad-v) 4px;
	overflow: hidden;
}

/* ==========================================================================
   IMP-XXX-UI: look di base delle listbox dati, altezza riga uniforme con
   selezione e hover. Varianti opzionali nelle sclass rgui2-lbx-* a fine file.
   ========================================================================== */

/* L'altezza va sulla cella, sul listitem sarebbe solo un minimo suggerito */
.z-listitem > .z-listcell {
	height: var(--rgui2-row-h);
	vertical-align: middle;
}

/* Il padding rientra nell'altezza invece di sommarsi */
.z-listitem > .z-listcell > .z-listcell-content {
	box-sizing: border-box;
	overflow: hidden;
}

/* Hover e selezione. !important perche' il tema carica dopo regole di pari specificita' */
.z-listitem:hover > .z-listcell {
	background: var(--rgui2-c-hover-bg) !important;
}

.z-listitem.z-listitem-selected > .z-listcell {
	background: var(--rgui2-c-selected-bg) !important;
}

/* La listbox della navbar fa da menu, niente altezza fissa ne' colori dei dati */
.rgui2-navbar-root .z-listitem > .z-listcell,
.rgui2-navbar-root .z-listitem:hover > .z-listcell,
.rgui2-navbar-root .z-listitem.z-listitem-selected > .z-listcell {
	height: auto !important;
	background: transparent !important;
}

.modal-window {
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.3);
	/* IMP-XXX-UI: fascia traslucida piu' sottile. Per i 30px usare .rgui2-modal-wide */
	padding: 15px;
	border-radius: 10px;
	backdrop-filter: blur(10px);
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.modal-window-error .z-window-content {
	background-color: #8B0000 !important;
}

/*
.modal-window {
	background: rgba(255, 255, 255, 0.3) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	text-align:center; 
	padding: 30px; 
}
*/
.modal-window-error {
	background: rgba(255, 255, 255, 0.3) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	text-align: center;
	padding: 30px;
}

.modal-window-error .z-window-header {
	font-size: 16px !important;
	font-weight: bold;
	background-color: #8B0000 !important;
}

.z-caption-content {
	padding: 4px 2px;
	width: 100%;
}

.z-label, .z-radio-content, .z-checkbox-content, .z-loading {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
}

/* IMP-XXX-UI: sostituita dal blocco pulsanti sotto
.z-button {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	min-height: 24px;
	border: 2px solid transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	padding: 8px 16px;
	line-height: normal;
	background-color: #0093F9;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
	-o-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
	-ms-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
	cursor: pointer;
	white-space: nowrap;
}
*/

/* ==========================================================================
   IMP-XXX-UI: pulsanti. Default pieno primario, varianti da attivare con sclass.
     sclass="rgui2-btn-outline"  -> secondario, solo bordo su sfondo bianco
     sclass="rgui2-btn-compact"  -> additiva, altezza dei campi di input
   ========================================================================== */
.z-button {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	min-height: 24px;
	border: 1px solid transparent;
	border-radius: 6px; /* IMP-XXX-UI */
	padding: 8px 16px;
	line-height: normal;
	background-color: var(--rgui2-c-primary);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
	cursor: pointer;
	white-space: nowrap;
	/* Transizione breve, il cambio di stato si vede senza rallentare il click */
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.z-button:hover {
	background-color: var(--rgui2-c-primary-hover);
	color: #FFFFFF;
}

/* Pressione, tinta piu' scura e ombra rientrata */
.z-button:active {
	background-color: var(--rgui2-c-primary-active);
	box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.z-button:disabled,
.z-button[disabled] {
	opacity: 0.5;
	cursor: default;
	box-shadow: none;
}

/* Secondario, colore primario solo su testo e bordo. Su hover si accende un fondo
   tenue invece di invertire i colori */
.rgui2-btn-outline.z-button {
	background-color: #FFFFFF;
	color: var(--rgui2-c-primary);
	border-color: var(--rgui2-c-primary);
}

.rgui2-btn-outline.z-button:hover {
	background-color: var(--rgui2-c-primary-soft);
	color: var(--rgui2-c-primary);
	border-color: var(--rgui2-c-primary);
}

.rgui2-btn-outline.z-button:active {
	background-color: var(--rgui2-c-selected-bg);
	border-color: var(--rgui2-c-primary);
}

/* Compatta, stessa altezza dei campi di input. Additiva anche alla variante outline */
.rgui2-btn-compact.z-button {
	height: var(--rgui2-input-h);
	min-height: 0;
	padding: 0 12px;
	line-height: calc(var(--rgui2-input-h) - 2px);
	box-sizing: border-box;
}

.z-caption .z-button {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	-ms-box-shadow: none;
	box-shadow: none;
	padding: 6px 12px;
	font-size: 11px;
}

.z-paging-text {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.9);
	margin-right: 6px;
}

.z-paging-info {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.34);
}

.z-paging ul {
	display: inline-flex;
	align-items: center;
}

.z-paging-input {
	vertical-align: top !important;
}

.z-paging .z-paging-text {
	display: inline-block;
	height: var(--rgui2-input-h);
	line-height: var(--rgui2-input-h);
	vertical-align: top;
}

.z-comboitem, .z-comboitem a, .z-comboitem a:visited {
	font-size: 11px;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.9);
}

.z-datebox-input {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.9);
	width: 100%;
	height: 34px;
	border: 1px solid #D9D9D9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	margin: 0;
	padding: 0 4px;
	padding-right: 8px;
	padding-right: 48px;
	line-height: 16px;
	background: #FFFFFF;
}

.z-textbox, .z-decimalbox, .z-intbox, .z-longbox, .z-doublebox {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.9);
	height: 34px;
	border: 1px solid #D9D9D9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	padding: 4px 4px;
	line-height: 16px;
	background: #FFFFFF;
}

.z-menu-text, .z-menuitem-text {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
}

.truncate-cell>div {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate-cell2 {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.z-combobox-input {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.9);
	width: 100%;
	height: 34px;
	border: 1px solid #D9D9D9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	margin: 0;
	padding: 4px 4px;
	padding-right: 8px;
	padding-right: 48px;
	line-height: 16px;
	background: #FFFFFF;
}

.z-column-content, .z-row-content, .z-group-content,
	.z-groupfoot-content, .z-footer-content {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: var(--rgui2-c-text-data); /* IMP-XXX-UI */
	line-height: 1.3em;
	overflow: hidden;
	padding: 8px 8px;
}

.panel-1 {
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px solid #CFCFCF;
	padding: 0px 0px 0px;
}

.navbar .z-listcell-content {
	font-family: var(--rgui2-font-sans);
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	color: var(--rgui2-c-brand-dark);
	line-height: 1.3em;
	overflow: hidden;
	padding: 0px;
}

.navbar .z-panelchildren {
	position: relative;
	padding: 0px;
	overflow: hidden;
	zoom: 1;
}

.z-panel-header {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
	font-style: normal;
	color: #ffffff;
	background-color: var(--rgui2-c-brand-dark);
	border: 0;
	padding: 4px 4px;
	line-height: 24px;
	overflow: hidden;
	zoom: 1;
	text-align: left;
}

.panel-1 .z-panel-icon {
	background-color: white !important;
	border-radius: 4px; /* Arrotonda i bordi */
}

.panel-menu {
	background-color: #cfcfcf;
}

/* Rimuove lo sfondo e i bordi quando un elemento è selezionato */
.navbar .z-listitem-selected, .navbar  .z-listitem-selected>.z-listcell
	{
	background: transparent !important;
	color: inherit !important;
	border: none !important;
	box-shadow: none !important;
}

/* Rimuove lo sfondo e i bordi quando si passa sopra un elemento */
.navbar .z-listitem:hover, .navbar .z-listitem:hover>.z-listcell {
	background: transparent !important;
	color: inherit !important;
	border: none !important;
	box-shadow: none !important;
}

/* Rimuove il focus evidenziato */
.z-listitem:focus, .z-listcell:focus {
	outline: none !important;
	box-shadow: none !important;
}

.z-panel-icon:hover {
	color: #cccccc;
}

.groupbox-title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.z-groupbox-3d.groupbox-menu>.z-groupbox-header {
	font-family: var(--rgui2-font-sans);
	height: auto;
	min-height: 40px;
	border-bottom: 2px solid #999;
	padding: 4px 4px;
	background-color: #f1f1f1;
}

.z-groupbox-3d.groupbox-menu>.z-groupbox-header .z-caption,
	.z-groupbox-3d.groupbox-menu>.z-groupbox-header .z-groupbox-title {
	font-family: var(--rgui2-font-sans);
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 0px 16px;
	line-height: 24px;
	background: none;
	top: 0;
}

.z-groupbox-3d.groupbox-menu>.z-groupbox-header .z-caption-content,
	.z-groupbox-3d.groupbox-menu>.z-groupbox-header .z-groupbox-title-content
	{
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
	font-style: normal;
	color: #7f7f7f;
	padding: 0;
}

.z-groupbox-3d.groupbox-menu>.z-groupbox-content {
	padding: 3px;
}

.z-groupbox-3d.groupbox-menu .z-label, .z-groupbox-3d.groupbox-menu .z-radio-content,
	.z-groupbox-3d.groupbox-menu .z-checkbox-content, .z-groupbox-3d.groupbox-menu .z-loading
	{
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
}

.z-caption .z-label {
	padding: 0px;
	font-weight: bold;
}

.banner {
	background-color: var(--rgui2-c-brand-dark);
	color: white;
	padding: 5px;
	text-align: center;
	vertical-align: center;
}

.footer {
	background-color: var(--rgui2-c-brand-dark);
	color: white;
	padding: 10px;
	text-align: center;
	vertical-align: center;
	font-size: 10px
}

.label-footer {
	font-size: 12px;
}

.vetro-box {
	background: rgba(255, 255, 255, 1);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	padding: 30px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
}

.custom-input {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 14px;
	width: 100%;
	margin-bottom: 10px;
}

.custom-input-icon-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.eye-icon {
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.custom-button {
	background: #0099ff;
	color: white;
	font-weight: bold;
	border: none;
	border-radius: 6px;
	padding: 10px 0;
	cursor: pointer;
	width: 100%;
	transition: background 0.3s;
}

.custom-button:hover {
	background: #007acc;
}

/* IMP-XXX-UI */
.bold-label {
	font-weight: bold;
	color: var(--rgui2-c-text-soft);
	display: block;
	margin: 10px 0 5px 0;
}

/* X di chiusura bianca e posizionata a destra */
.z-window-close {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.z-window-icon {
	font-size: 18px;
	color: white;
	display: block;
	width: 28px;
	height: 24px;
	margin: auto 1px;
	padding: 4px 2px;
	line-height: 24px;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	border: none;
	background: transparent;
}

/* Titolo centrato */
.z-window-title {
	margin: 0 auto;
}

.z-window-icon:hover {
	color: white;
}

.z-icon-times {
	display: block;
	font-weight: 900;
}

.z-window-header {
	background-color: var(--rgui2-c-brand-dark) !important;
	color: white !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 11px;
	height: 42px;
	position: relative;
	padding: 0 40px; /* Spazio laterale per la X */
	box-sizing: border-box;
}

.loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url('/img/loader.gif'); /* Spinner */
	background-repeat: no-repeat;
	background-position: center;
	z-index: 10000;
}

.form-label-error {
	text-align: left !important;
	color: red !important;
	font-size: 11px;
	font-weight: bold !important;
}

.attach-button {
	padding: 0px 0px;
	font-size: 11px;
}

.z-timebox-input {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.9);
	width: 100%;
	height: 34px;
	border: 1px solid #D9D9D9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	margin: 0;
	padding: 0 8px;
	padding-right: 8px;
	padding-right: 48px;
	line-height: 16px;
	background: #FFFFFF;
}

.z-bandbox-input {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.9);
	width: 100%;
	height: 34px;
	border: 1px solid #D9D9D9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	margin: 0;
	padding: 0 8px;
	padding-right: 8px;
	padding-right: 48px;
	line-height: 16px;
	background: #FFFFFF;
}

.z-auxheader-content {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	/* IMP-XXX-UI: intestazione in evidenza sul nuovo header chiaro */
	font-weight: bold;
	font-style: normal;
	color: var(--rgui2-c-header-fg);
	padding: 4px 4px;
	line-height: 1.3em;
	overflow: hidden;
}

/* IMP-XXX-UI: sostituite dalle due regole subito sotto
.z-listheader {
	border-left: 1px solid #0064ED;
	border-bottom: 1px solid #0064ED;
	padding: 4px 4px;
	background: #3089c7;
	background-clip: border-box;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.z-listhead-bar {
	border-left: 1px solid #0064ED;
	border-bottom: 1px solid #0064ED;
	padding: 4px 4px;
	background: #3089c7;
	background-clip: border-box;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}
*/

/* IMP-XXX-UI: header di colonna chiaro, con i separatori nel colore linea comune */
.z-listheader,
.z-listhead-bar {
	border-left: 1px solid var(--rgui2-c-line);
	border-bottom: 1px solid var(--rgui2-c-line);
	padding: 4px 4px;
	background: var(--rgui2-c-header-bg);
	background-clip: border-box;
	color: var(--rgui2-c-header-fg);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

/* Il tema colora il contenuto e non l'header, il colore va forzato qui */
.z-listheader-content,
.z-listheader .z-listheader-sort-icon,
.z-listheader .z-icon-caret-up,
.z-listheader .z-icon-caret-down {
	color: var(--rgui2-c-header-fg) !important;
}

/* IMP-XXX-UI: intestazioni sempre centrate. Sul contenuto per prevalere sugli
   allineamenti inline degli zul, che stanno sull'header */
.z-listheader-content {
	text-align: center;
	/* IMP-XXX-UI: la regola generica sui *-content li mette normal */
	font-weight: bold;
}

/* IMP-XXX-UI: sostituita dalla regola sotto, allineata agli header di colonna
.z-treecol {
	background: #3089c7;
	background-clip: border-box;
	border-left: 1px solid #0064ED;
	border-bottom: 1px solid #0064ED;
	padding: 0;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}
*/

.z-treecol {
	background: var(--rgui2-c-header-bg);
	background-clip: border-box;
	border-left: 1px solid var(--rgui2-c-line);
	border-bottom: 1px solid var(--rgui2-c-line);
	color: var(--rgui2-c-header-fg);
	padding: 0;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.z-treecol-content, .z-treecell-content, .z-treefooter-content {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	color: var(--rgui2-c-text-data); /* IMP-XXX-UI */
	padding: 8px 5px;
	line-height: 1.3em;
	overflow: hidden;
}

/* IMP-XXX-UI: intestazione dell'albero come i listheader. Deve stare dopo la regola generica */
.z-treecol-content {
	color: var(--rgui2-c-header-fg);
	font-weight: bold;
}

/* IMP-XXX-UI: sostituite dalla regola sotto, allineate agli header di colonna
.z-auxheader {
	border-left: 1px solid #0064ED;
	border-bottom: 1px solid #0064ED;
	padding: 4px 4px;
	background-color: #3089c7;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.z-auxhead-bar {
	border-left: 1px solid #0064ED;
	border-bottom: 1px solid #0064ED;
	padding: 4px 4px;
	background-color: #3089c7;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}
*/

/* IMP-XXX-UI: gli auxheader sono intestazioni a tutti gli effetti, stesso look dei listheader */
.z-auxheader,
.z-auxhead-bar {
	border-left: 1px solid var(--rgui2-c-line);
	border-bottom: 1px solid var(--rgui2-c-line);
	padding: 4px 4px;
	background-color: var(--rgui2-c-header-bg);
	color: var(--rgui2-c-header-fg);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

/* IMP-XXX-UI: sostituita dalla regola sotto, allineata agli header di colonna
.z-treecols-bar {
	border-left: 1px solid #0064ED;
	border-bottom: 1px solid #0064ED;
	padding: 4px 4px;
	background-color: #3089c7;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}
*/

.z-treecols-bar {
	border-left: 1px solid var(--rgui2-c-line);
	border-bottom: 1px solid var(--rgui2-c-line);
	padding: 4px 4px;
	background-color: var(--rgui2-c-header-bg);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

textarea.z-textbox {
	height: auto;
	padding-top: 5px;
}

.z-tabs-content {
	min-height: 46px;
}

.z-tabs {
	min-height: 40px;
	height: 40px;
}

.button-allegati {
	background-color: #1ab2fe;
	color: white;
	border-radius: 0;
	padding: 6px 16px;
	font-weight: 600;
	border: 0;
	cursor: pointer;
}

.button-allegati:hover {
	background-color: #1ab2fe;
}

/* IMP-XXX-UI */
.form-label-det {
	text-align: left !important;
	color: var(--rgui2-c-text-soft) !important;
	font-size: 11px;
	font-weight: bold !important;
	border: 1px solid #e2e2e2;
}

.form-label-det .z-label, .z-radio-content, .z-checkbox-content,
	.z-loading {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
}

.form-item-det {
	text-align: left;
	font-weight: normal;
	border: 1px solid #e2e2e2;
}

.form-label-det-value {
	border: 1px solid #e2e2e2;
}


.footer-button{
	margin-top: 1px !important;
}

.label-no-data{
  font-family: var(--rgui2-font-sans);
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  color: rgba(0,0,0,0.34);
  text-align: left;	
}


.z-popup-content{
	padding: 8px 8px;
}

/* ==========================================================================
   IMP-XXX-UI: navbar (west) con sfondo pieno, intestazioni bianche maiuscole e
   voce selezionata evidenziata. Tutte le regole sono scoped su .rgui2-navbar-root.
   ========================================================================== */

/* Sfondo uniforme e azzeramento di bordi e ombre ereditati dal tema */
.rgui2-navbar-root,
.rgui2-navbar-root .z-window-content,
.rgui2-navbar-root .z-panelchildren,
.rgui2-navbar-root .z-listbox,
.rgui2-navbar-root .z-listbox-body,
.rgui2-navbar-root .rgui2-navbar-panel,
.rgui2-navbar-root .rgui2-navbar-panel .z-panel-body,
.rgui2-navbar-root .rgui2-navbar-groupbox,
.rgui2-navbar-root .rgui2-navbar-groupbox .z-groupbox-content {
	background: var(--rgui2-c-brand-dark) !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* IMP-XXX-UI: stacco dall'alto, le voci partivano attaccate alla banner */
.rgui2-navbar-root > .z-window-content {
	padding-top: 16px !important;
}

/* IMP-XXX-UI: azzera i padding di caption e groupbox-content, cosi' l'indentazione
   orizzontale ha un unico punto di controllo */
.rgui2-navbar-root .rgui2-navbar-groupbox > .z-groupbox-header .z-caption,
.rgui2-navbar-root .rgui2-navbar-groupbox .z-groupbox-content {
	padding: 0 !important;
}

/* Intestazioni di panel e groupbox, bianche e maiuscole, allineate alle voci */
.rgui2-navbar-root .rgui2-navbar-panel > .z-panel-header,
.rgui2-navbar-root .rgui2-navbar-groupbox > .z-groupbox-header {
	background-color: var(--rgui2-c-brand-dark) !important;
	border: 0 !important;
}

.rgui2-navbar-root .rgui2-navbar-panel > .z-panel-header {
	color: #FFFFFF !important;
	text-transform: uppercase;
	padding: 8px 8px 8px 16px !important;
}

/* IMP-XXX-UI: linea sotto la caption disegnata come sfondo da 1px, cosi' resta
   rientrata di 16px per lato invece di attraversare la navbar */
.rgui2-navbar-root .rgui2-navbar-groupbox > .z-groupbox-header {
	background-image: linear-gradient(rgba(201, 215, 226, 0.25), rgba(201, 215, 226, 0.25)) !important;
	background-size: calc(100% - 32px) 1px !important;
	background-position: bottom 0 left 16px !important;
	background-repeat: no-repeat !important;
	padding-bottom: 6px;
}

.rgui2-navbar-root .rgui2-navbar-groupbox > .z-groupbox-header .z-caption-content,
.rgui2-navbar-root .rgui2-navbar-groupbox > .z-groupbox-header .z-groupbox-title-content {
	color: #FFFFFF !important;
	text-transform: uppercase;
	padding-left: 16px;
	box-sizing: border-box;
}

/* Voci di menu nel colore standard. Selettore lungo e !important per battere la
   regola con cui ZK attenua le righe non in hover */
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem .rgui2-navbar-menucell,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem .rgui2-navbar-menucell .z-listcell-content {
	color: var(--rgui2-c-brand-fg) !important;
}

/* Icona nel colore della voce e accostata al testo, senza i margini interni di ZK */
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem .rgui2-navbar-icon,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem .rgui2-navbar-icon *,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem .rgui2-navbar-icon:hover,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem .rgui2-navbar-icon:focus {
	color: var(--rgui2-c-brand-fg) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rgui2-navbar-root .rgui2-navbar-icon {
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px !important;
	text-decoration: none !important;
	cursor: pointer;
}

/* IMP-XXX-UI: pillola di evidenziazione della voce di menu. Misure identiche anche
   a riposo, cosi' il testo non trasla quando compare */
.rgui2-navbar-root .rgui2-navbar-menuitem {
	height: auto !important;
}

.rgui2-navbar-root .rgui2-navbar-menucell .z-listcell-content {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 8px;
	padding: 10px 10px 10px 8px;
	border-radius: 8px;
	background: transparent;
	box-sizing: border-box;
}

.rgui2-navbar-root .rgui2-navbar-menucell .z-listcell-content .rgui2-navbar-icon {
	flex: 0 0 auto;
}

.rgui2-navbar-root .rgui2-navbar-menuitem,
.rgui2-navbar-root .rgui2-navbar-menuitem > .z-listcell {
	background: transparent !important;
	box-shadow: none !important;
}

.rgui2-navbar-root .rgui2-navbar-menuitem.z-listitem-selected .rgui2-navbar-menucell .z-listcell-content,
.rgui2-navbar-root .rgui2-navbar-menuitem:hover .rgui2-navbar-menucell .z-listcell-content {
	background: var(--rgui2-c-brand-dark-soft) !important;
}

.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem.z-listitem-selected .rgui2-navbar-menucell,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem.z-listitem-selected .rgui2-navbar-menucell .z-listcell-content,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem.z-listitem-selected .rgui2-navbar-icon,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem.z-listitem-selected .rgui2-navbar-icon *,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem:hover .rgui2-navbar-menucell,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem:hover .rgui2-navbar-menucell .z-listcell-content,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem:hover .rgui2-navbar-icon,
.rgui2-navbar-root .rgui2-navbar-groupbox .rgui2-navbar-menuitem:hover .rgui2-navbar-icon * {
	color: #FFFFFF !important;
	font-weight: bold;
}

/* IMP-XXX-UI: override del selettore ZK che colora di nero la voce selezionata in hover */
.rgui2-navbar-root .z-listitem.z-listitem-selected:hover .z-listcell-content,
.rgui2-navbar-root .z-listitem.z-listitem-selected .z-listcell-content {
	color: #FFFFFF !important;
}

/* ==========================================================================
   IMP-XXX-UI: top bar (north) con striscia sinistra scura larga quanto la navbar,
   logo, descrizione contratto e comandi sulla stessa riga.
   ========================================================================== */

/* IMP-XXX-UI: striscia scura e fondo ardesia come strati di sfondo della banner, cosi'
   restano continui. Flex per centrare i figli e padding verticale azzerato per i 48px */
.rgui2-banner-root {
	background:
		linear-gradient(to right, var(--rgui2-c-brand-dark) 0 240px, var(--rgui2-c-banner-bg) 240px) !important;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	display: flex !important;
	align-items: center !important;
}

/* Striscia sinistra, stesso sfondo e larghezza della navbar. align-self:stretch per
   arrivare a tutta altezza, senza separatore in basso */
.rgui2-banner-brand {
	width: 240px;
	min-width: 240px;
	background-color: var(--rgui2-c-brand-dark) !important;
	align-self: stretch !important;
	box-sizing: border-box;
	/* IMP-XXX-UI: stesso margine sinistro delle card, il logo resta allineato a esse */
	padding-left: 10px !important;
}

/* IMP-XXX-UI: sfondo scuro anche sui wrapper interni, altrimenti la striscia resta
   scoperta sopra e sotto il logo */
.rgui2-banner-brand .z-hbox-inner,
.rgui2-banner-brand .z-hlayout-inner,
.rgui2-banner-brand .z-vbox-inner,
.rgui2-banner-brand td,
.rgui2-banner-brand tr {
	background-color: var(--rgui2-c-brand-dark) !important;
}

/* IMP-XXX-UI: border-bottom rimosso, la linea ora e' sullo sfondo di .rgui2-banner-root
.rgui2-banner-center,
.rgui2-banner-right {
	align-self: stretch !important;
	box-sizing: border-box;
	border-bottom: 1px solid #E0E0E0 !important;
}
*/

/* Blocco centrale con logo e descrizione contratto sulla stessa riga */
.rgui2-banner-center {
	/* IMP-XXX-UI: come il padding di rgui2-card-stack, il logo parte dalla x delle card */
	margin-left: 10px;
}

/* IMP-XXX-UI: descrizione contratto leggibile sul fondo ardesia della banner */
.rgui2-banner-contract-label {
	color: var(--rgui2-c-banner-fg) !important;
}

/* IMP-XXX: riga codice - descrizione contratto (sclass="rgui2-banner-contract" sull'hlayout).
   Senza flex la descrizione, che parte dopo codice e trattino, va a capo sulla larghezza
   dell'intero box e sborda a destra sotto il menu utente. Il padding stacca il testo dal pulsante */
.rgui2-banner-contract.z-hlayout {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	box-sizing: border-box;
	padding-right: 16px;
}

.rgui2-banner-contract.z-hlayout > .z-hlayout-inner {
	flex: 0 0 auto;
}

/* Solo la descrizione si restringe e va a capo */
.rgui2-banner-contract.z-hlayout > .z-hlayout-inner:last-child {
	flex: 0 1 auto;
	min-width: 0;
}

/* Pulsante menu utente, bordo e ombra leggeri per staccarlo dal fondo */
.rgui2-banner-userbtn {
	background: #FFFFFF !important;
	border: 1px solid #E0E0E0 !important;
	border-radius: 6px !important; /* IMP-XXX-UI */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
	color: var(--rgui2-c-brand-dark) !important;
}

.rgui2-banner-userbtn,
.rgui2-banner-userbtn *,
.rgui2-banner-helpbtn,
.rgui2-banner-helpbtn * {
	color: var(--rgui2-c-brand-dark) !important;
}

/* IMP-XXX-UI: annulla sul pulsante help lo sfondo blu della regola globale .z-button */
.rgui2-banner-helpbtn {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* IMP-XXX-UI: separatore verticale rimosso dal banner, regole non piu' usate
.rgui2-banner-separator {
	height: 28px;
	width: 1px;
}

.rgui2-banner-separator,
.rgui2-banner-separator .z-separator-bar {
	background-color: rgba(255, 255, 255, 0.3) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}
*/

/* ==========================================================================
   IMP-XXX-UI: footer (south) con lo stesso pattern della top bar, striscia
   sinistra scura larga quanto la navbar e copyright sulla parte bianca.
   ========================================================================== */

/* IMP-XXX-UI: sfondo e linea disegnati sul contenitore a tutta larghezza, cosi' la riga
   resta continua. Padding azzerato per non sforare i 40px del south */
.rgui2-footer-root {
	background:
		linear-gradient(to right, transparent 0 300px, var(--rgui2-c-line) 300px) top left / 100% 1px no-repeat,
		linear-gradient(to right, var(--rgui2-c-brand-dark) 0 300px, #FFFFFF 300px) !important;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 !important;
}

/* Striscia sinistra, stesso sfondo e larghezza della navbar, senza bordo */
.rgui2-footer-brand {
	width: 300px;
	min-width: 300px;
	background-color: var(--rgui2-c-brand-dark) !important;
	align-self: stretch !important;
	box-sizing: border-box;
}

/* IMP-XXX-UI: border-top rimosso, la linea ora e' sullo sfondo di .rgui2-footer-root
.rgui2-footer-center {
	align-self: stretch !important;
	box-sizing: border-box;
	border-top: 1px solid #E0E0E0 !important;
}
*/

/* Copyright leggibile sulla parte bianca del footer */
.rgui2-footer-label {
	color: var(--rgui2-c-text-soft) !important;
}

/* ==========================================================================
   IMP-XXX-UI: altezza uniforme dei campi di input e dei loro pulsanti laterali,
   textarea esclusa. --rgui2-input-h e' l'unico punto da cambiare per ritararla.
   ========================================================================== */
:root {
	--rgui2-input-h: 24px;
	/* IMP-XXX-UI: dimensione e colore del glifo nel pulsante dei campi composti */
	--rgui2-input-icon-size: 14px;
	--rgui2-input-icon-color: var(--rgui2-c-primary);
	--rgui2-input-icon-color-disabled: #A6AFB8;
	/* IMP-XXX-UI: icona di reset del filtro accanto ai campi (vedi .rgui2-clear-icon) */
	--rgui2-clear-icon-size: 14px;
	--rgui2-clear-icon-color: var(--rgui2-c-primary);
}

.z-combobox-input,
.z-datebox-input,
.z-timebox-input,
.z-bandbox-input,
.z-textbox:not(textarea),
.z-decimalbox,
.z-intbox,
.z-longbox,
.z-doublebox,
.z-paging-input {
	height: var(--rgui2-input-h) !important;
	box-sizing: border-box !important;
	/* Padding verticale azzerato, il centraggio lo fa la line-height */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: calc(var(--rgui2-input-h) - 2px) !important;
}

/* IMP-XXX-UI: campi semplici, allineati al testo della label affiancata */
.z-textbox:not(textarea),
.z-decimalbox,
.z-intbox,
.z-longbox,
.z-doublebox {
	vertical-align: middle !important;
}

/* IMP-XXX-UI: campi composti, l'input deve riempire il wrapper che lo contiene */
.z-combobox-input,
.z-datebox-input,
.z-timebox-input,
.z-bandbox-input {
	vertical-align: top !important;
}

/* IMP-XXX-UI: la cella allinea il wrapper, che senza altezza propria cresce oltre il campo */
.z-combobox,
.z-datebox,
.z-timebox,
.z-bandbox {
	height: var(--rgui2-input-h) !important;
	line-height: var(--rgui2-input-h) !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
}

/* Flex per centrare l'icona a qualsiasi altezza, top:0 per i pulsanti in absolute */
.z-combobox-button,
.z-datebox-button,
.z-timebox-button,
.z-bandbox-button {
	height: var(--rgui2-input-h) !important;
	line-height: var(--rgui2-input-h) !important;
	box-sizing: border-box !important;
	/* IMP-XXX-UI: con l'altezza forzata i valori di centratura del tema sfasano il glifo */
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: top !important; /* Riempie il wrapper come l'input a fianco */
	top: 0 !important;
}

/* IMP-XXX-UI: dimensione del glifo legata all'altezza del campo, altrimenti sborda dal
   pulsante. Vale sia sul pulsante stesso sia su un <i> interno */
.z-combobox-button,
.z-datebox-button,
.z-timebox-button,
.z-bandbox-button,
.z-combobox-button [class*="z-icon-"],
.z-datebox-button [class*="z-icon-"],
.z-timebox-button [class*="z-icon-"],
.z-bandbox-button [class*="z-icon-"] {
	font-size: var(--rgui2-input-icon-size) !important;
	color: var(--rgui2-input-icon-color) !important;
}

/* IMP-XXX-UI: campo disabilitato. Solo disabled, le combo di sola selezione sono
   readonly e restano operative */
.z-combobox-disabled .z-combobox-button,
.z-datebox-disabled .z-datebox-button,
.z-timebox-disabled .z-timebox-button,
.z-bandbox-disabled .z-bandbox-button,
.z-combobox-disabled .z-combobox-button [class*="z-icon-"],
.z-datebox-disabled .z-datebox-button [class*="z-icon-"],
.z-timebox-disabled .z-timebox-button [class*="z-icon-"],
.z-bandbox-disabled .z-bandbox-button [class*="z-icon-"] {
	color: var(--rgui2-input-icon-color-disabled) !important;
	cursor: default !important;
}

/* Niente line-height sul glifo, il centraggio lo fa il flex del pulsante */
.z-combobox-button [class*="z-icon-"],
.z-datebox-button [class*="z-icon-"],
.z-timebox-button [class*="z-icon-"],
.z-bandbox-button [class*="z-icon-"] {
	line-height: 1 !important;
}

/* ==========================================================================
   IMP-XXX-UI: varianti opzionali delle listbox dati, da attivare con sclass sulla
   singola listbox. Il look di base e' globale, vedi il blocco .z-listitem sopra.
     sclass="rgui2-lbx-border"          -> griglia con bordi leggeri
     sclass="rgui2-lbx-border-striped"  -> come sopra, con righe alternate
     sclass="rgui2-lbx-compact"         -> righe piu' basse, additiva alle precedenti
   ========================================================================== */

/* Variante compatta, ridefinisce i soli token di riga che le regole di base leggono via var() */
.rgui2-lbx-compact {
	--rgui2-row-h: 22px;
	--rgui2-row-pad-v: 2px;
}

/* Riallinea al token il padding che le listbox non autopaging prendono dalla regola generica */
.rgui2-lbx-compact .z-listcell-content {
	padding-top: var(--rgui2-row-pad-v);
	padding-bottom: var(--rgui2-row-pad-v);
}

/* IMP-XXX-UI: menubar usata come menu di riga, adattata alla cella e centrata */
.z-listcell .z-menubar,
.z-listcell .z-menubar .z-menu {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: normal !important;
	vertical-align: middle;
}

/* Stesso colore delle altre icone di riga. Il tema lo mette sul contenuto interno del menu */
.z-listcell .z-menubar .z-menu,
.z-listcell .z-menubar .z-menu * {
	color: var(--rgui2-c-action) !important;
}

.z-listcell .z-menubar .z-menu:hover,
.z-listcell .z-menubar .z-menu:hover * {
	color: var(--rgui2-c-action-hover) !important;
}

/* Cella di rilievo (sclass="rgui2-lbx-cell-accent" sul listcell), visibile anche in hover */
.z-listitem > .rgui2-lbx-cell-accent {
	background: var(--rgui2-c-accent-bg) !important;
}

/* Icona di azione sulla riga, stessa dimensione del testo della cella */
.rgui2-lbx-rowicon {
	color: var(--rgui2-c-action);
	cursor: pointer;
	text-decoration: none !important;
}

.rgui2-lbx-rowicon:hover {
	color: var(--rgui2-c-action-hover);
}

/* Bordo solo a destra e in basso di ogni cella, cosi' resta di 1px senza border-collapse */
.rgui2-lbx-border,
.rgui2-lbx-border-striped {
	border: 1px solid var(--rgui2-c-line);
}

.rgui2-lbx-border .z-listitem > .z-listcell,
.rgui2-lbx-border-striped .z-listitem > .z-listcell {
	border-right: 1px solid var(--rgui2-c-line);
	border-bottom: 1px solid var(--rgui2-c-line);
}

.rgui2-lbx-border .z-listitem > .z-listcell:last-child,
.rgui2-lbx-border-striped .z-listitem > .z-listcell:last-child {
	border-right: 0;
}

/* Righe alternate. Il colore va sulla cella, dove il tema dipinge lo sfondo */
.rgui2-lbx-border-striped .z-listitem:nth-child(even) > .z-listcell {
	background: var(--rgui2-c-stripe-bg);
}

.rgui2-lbx-border-striped .z-listitem:nth-child(odd) > .z-listcell {
	background: #FFFFFF;
}

/* ==========================================================================
   IMP-XXX-UI: il focus non altera piu' il riempimento del pulsante. Resta il solo
   anello di focus, per la navigazione da tastiera.
   ========================================================================== */
.z-button:focus,
.z-button:focus:hover,
.z-button:focus:active {
	background-image: none;
	color: #FFFFFF;
	outline: none;
}

.z-button:focus {
	background-color: var(--rgui2-c-primary);
}

/* Hover e pressione restano prioritari sul pulsante che ha il focus */
.z-button:focus:hover {
	background-color: var(--rgui2-c-primary-hover);
}

.z-button:focus:active {
	background-color: var(--rgui2-c-primary-active);
}

.rgui2-btn-outline.z-button:focus {
	background-color: #FFFFFF;
	color: var(--rgui2-c-primary);
	border-color: var(--rgui2-c-line);
}

.rgui2-btn-outline.z-button:focus:hover {
	background-color: var(--rgui2-c-primary-soft);
	color: var(--rgui2-c-primary);
	border-color: var(--rgui2-c-primary);
}

.rgui2-btn-outline.z-button:focus:active {
	background-color: var(--rgui2-c-selected-bg);
	color: var(--rgui2-c-primary);
	border-color: var(--rgui2-c-primary);
}

.z-button:focus-visible {
	outline: 2px solid var(--rgui2-c-action);
	outline-offset: 2px;
}

/* ==========================================================================
   IMP-XXX-UI: menu di riga con popup aperto, fondo tenue al posto del blu pieno
   del tema. Il selettore copre entrambe le classi di stato.
   ========================================================================== */
.z-listcell .z-menubar .z-menu-selected,
.z-listcell .z-menubar .z-menu-open,
.z-listcell .z-menubar .z-menu-selected *,
.z-listcell .z-menubar .z-menu-open * {
	background: var(--rgui2-c-hover-bg) !important;
	background-image: none !important;
	color: var(--rgui2-c-action-hover) !important;
	border-radius: 4px;
}

/* Voci del popup nell'azzurro tenue dell'hover. Il popup sta sul body, regola non scopabile */
.z-menupopup .z-menuitem:hover,
.z-menupopup .z-menuitem-selected {
	background: var(--rgui2-c-hover-bg) !important;
	background-image: none !important;
	color: var(--rgui2-c-brand-dark) !important;
}

.z-menupopup .z-menuitem:hover .z-menuitem-content,
.z-menupopup .z-menuitem-selected .z-menuitem-content {
	color: inherit !important;
}

/* ==========================================================================
   IMP-XXX-UI: pannelli in stile card, da attivare con sclass.
     sclass="rgui2-card"        -> bordo tenue, angoli arrotondati, ombra leggera
     sclass="rgui2-card-pad"    -> additiva, spaziatura interna del body. Da non
                                   usare con un contenuto in vflex
     sclass="rgui2-card-stack"  -> sul layout che impila le card, le distanzia dai
                                   bordi della pagina
   ========================================================================== */
.rgui2-card-stack {
	padding: 10px;
	box-sizing: border-box;
	background: var(--rgui2-c-page-bg);
}

/* Variante di rgui2-card-stack per le card distribuite su piu' regioni del borderlayout */
.rgui2-card-layout {
	background: var(--rgui2-c-page-bg);
}

/* Regioni trasparenti. Lo spazio attorno alle card lo da' il loro attributo margins,
   un padding sui body verrebbe incluso da ZK nel calcolo e taglierebbe la card */
.rgui2-card-layout .z-north,
.rgui2-card-layout .z-center,
.rgui2-card-layout .z-south,
.rgui2-card-layout .z-north-body,
.rgui2-card-layout .z-center-body,
.rgui2-card-layout .z-south-body {
	background: transparent;
}

/* IMP-XXX-UI: bordo e ombra rinforzati, sul grigio della pagina -line non stacca abbastanza */
.rgui2-card.z-panel {
	background: #FFFFFF;
	border: 1px solid var(--rgui2-c-card-line);
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	/* Arrotonda anche header e body, che sono quadrati */
	overflow: hidden;
}

/* Title bar staccata dal body dalla sola linea inferiore. Selettori discendenti perche'
   il tema puo' interporre un wrapper */
.rgui2-card .z-panel-header,
.rgui2-card .z-panel-head {
	/* IMP-XXX-UI: superficie tenue, il titolo si stacca dal corpo bianco della card */
	background: var(--rgui2-c-subpanel-bg) !important;
	background-image: none !important;
	color: var(--rgui2-c-title) !important; /* IMP-XXX-UI */
	border: 0 !important;
	border-bottom: 1px solid var(--rgui2-c-line) !important;
	padding: 5px 16px !important;
	font-size: 13px;
	font-weight: bold;
	line-height: 20px;
}

/* Le due classi sono annidate, padding e linea vanno presi solo dal contenitore esterno */
.rgui2-card .z-panel-head .z-panel-header {
	padding: 0 !important;
	border-bottom: 0 !important;
}

/* Vale sia per il titolo da attributo title sia per il contenuto di <caption> */
.rgui2-card .z-panel-header .z-caption,
.rgui2-card .z-panel-header .z-caption-content,
.rgui2-card .z-panel-header .z-label,
.rgui2-card .z-panel-head .z-caption,
.rgui2-card .z-panel-head .z-caption-content,
.rgui2-card .z-panel-head .z-label {
	background: transparent !important;
	color: var(--rgui2-c-title) !important; /* IMP-XXX-UI */
	font-size: 13px;
	font-weight: bold;
}

/* Il padding orizzontale lo da' l'intestazione, quello del contenuto si sommerebbe */
.rgui2-card .z-caption-content {
	padding-left: 0;
	padding-right: 0;
}

/* Le icone del panel sul tema sono bianche, invisibili sul fondo chiaro */
.rgui2-card .z-panel-icon {
	color: var(--rgui2-c-action) !important;
	background: transparent !important;
}

.rgui2-card .z-panel-icon:hover {
	color: var(--rgui2-c-action-hover) !important;
}

.rgui2-card .z-panel-body {
	background: #FFFFFF;
	border: 0;
}

.rgui2-card .z-panelchildren {
	background: #FFFFFF;
}

.rgui2-card-pad .z-panelchildren {
	padding: 10px 14px;
	box-sizing: border-box;
}

/* ==========================================================================
   IMP-XXX-UI: tabbox senza riquadro (sclass="rgui2-tabs" sul tabbox), con la sola
   linea sotto la barra dei tab.
   ========================================================================== */
.rgui2-tabs.z-tabbox {
	border: 0;
	background-color: transparent;
}

/* Body senza riquadro, solo la linea che lo separa dalla barra dei tab */
.rgui2-tabs.z-tabbox .z-tabpanels,
.rgui2-tabs.z-tabbox .z-tabpanel {
	border: 0;
	border-top: 1px solid var(--rgui2-c-line);
	background-color: transparent;
}

/* Toglie lo spazio che il tema aggiunge sopra la barra dei tab */
.rgui2-tabs.z-tabbox,
.rgui2-tabs.z-tabbox .z-tabs {
	padding-top: 0;
	margin-top: 0;
}

.rgui2-tabs.z-tabbox .z-tabs {
	border: 0;
}

/* Tab con bordo leggero, a riposo sulla tinta della cornice e selezionato bianco */
.rgui2-tabs.z-tabbox .z-tab {
	height: auto;
	padding: 4px 16px;
	border: 1px solid var(--rgui2-c-line);
	border-radius: 6px 6px 0 0;
	margin-right: 2px;
	background-color: var(--rgui2-c-bar-bg);
	color: var(--rgui2-c-text-soft);
	line-height: 18px;
}

.rgui2-tabs.z-tabbox .z-tab:hover {
	background-color: var(--rgui2-c-hover-bg);
	color: var(--rgui2-c-primary);
}

.rgui2-tabs.z-tabbox .z-tab-selected,
.rgui2-tabs.z-tabbox .z-tab-selected .z-tab-text {
	background-color: #FFFFFF;
	color: var(--rgui2-c-primary);
	font-weight: bold;
}

.rgui2-tabs.z-tabbox .z-tab-selected {
	border-color: var(--rgui2-c-line);
}

/* IMP-XXX-UI: variante additiva per il tabbox senza vflex, dimensionato sul contenuto.
   I wrapper del tema conservano l'altezza calcolata alla creazione e tagliano il resto */
.rgui2-tabs-auto.z-tabbox,
.rgui2-tabs-auto.z-tabbox .z-tabpanels,
.rgui2-tabs-auto.z-tabbox .z-tabpanel {
	height: auto !important;
	overflow: visible !important;
}

/* Il body della card dei filtri cresce con il contenuto, che .z-panelchildren taglierebbe */
.rgui2-card-pad .z-panelchildren {
	overflow: visible;
}

/* IMP-XXX-UI: icone FontAwesome nei pulsanti, con dimensione e stacco dal testo.
   Nel set Free il glifo esiste solo nel peso solid (900) */
.z-button .z-icon,
.z-button [class*="z-icon-"] {
	font-weight: 900;
	font-size: 12px;
	margin-right: 6px;
	/* IMP-XXX-UI: alcune icone sono display:block e manderebbero l'etichetta a capo */
	display: inline-block;
}

.z-menu [class*="z-icon-"],
.z-menuitem [class*="z-icon-"] {
	font-weight: 900;
}

.rgui2-menu-actions.z-menubar {
	border: 0;
	background: transparent;
}

.rgui2-menu-actions .z-menu-text,
.rgui2-menu-actions .z-menuitem-text {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
}

.rgui2-menu-actions .z-menu-content,
.rgui2-menu-actions .z-menuitem-content {
	color: var(--rgui2-c-primary);
	background: transparent;
	border-radius: 6px;
}

.rgui2-menu-actions .z-menu-content:hover,
.rgui2-menu-actions .z-menuitem-content:hover,
.rgui2-menu-actions .z-menu-content:focus,
.rgui2-menu-actions .z-menuitem-content:focus,
.rgui2-menu-actions .z-menu-hover > .z-menu-content,
.rgui2-menu-actions .z-menuitem-hover > .z-menuitem-content {
	color: var(--rgui2-c-primary);
	background-color: var(--rgui2-c-primary-soft);
}

.rgui2-menu-actions .z-menu-content:active,
.rgui2-menu-actions .z-menuitem-content:active,
.rgui2-menu-actions .z-menu-selected > .z-menu-content,
.rgui2-menu-actions .z-menuitem-selected > .z-menuitem-content {
	color: #FFFFFF;
	background-color: var(--rgui2-c-primary);
}

.rgui2-menu-actions .z-menu-content[disabled],
.rgui2-menu-actions .z-menuitem-content[disabled],
.rgui2-menu-actions .z-menu-content[disabled]:hover,
.rgui2-menu-actions .z-menuitem-content[disabled]:hover {
	color: var(--rgui2-c-primary);
	background: transparent;
	opacity: 0.5;
}

.rgui2-menu-compact .z-menu-content,
.rgui2-menu-compact .z-menuitem-content {
	min-height: 0;
	padding-top: var(--rgui2-row-pad-v);
	padding-bottom: var(--rgui2-row-pad-v);
	line-height: 18px;
}

/* Footer della card (sclass="rgui2-card-foot"), comandi centrati sotto una linea */
.rgui2-card-foot {
	border-top: 1px solid var(--rgui2-c-line);
	/* IMP-XXX-UI: riempimento simmetrico sopra e sotto i comandi */
	padding: 8px 0;
	margin-top: 8px;
	text-align: center;
}

/* Sotto-sezione di una card (sclass="rgui2-card-section"), senza bordo, ombra o angoli */
.rgui2-card-section.z-panel {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent;
}

/* Intestazione di sezione con lo stesso fondo delle intestazioni di colonna */
.rgui2-card .rgui2-card-section .z-panel-header,
.rgui2-card .rgui2-card-section .z-panel-head {
	background: var(--rgui2-c-header-bg) !important;
	color: var(--rgui2-c-header-fg) !important;
	border-bottom-color: var(--rgui2-c-line) !important;
	border-radius: 4px 4px 0 0;
	padding: 3px 8px !important;
	margin-top: 6px;
	font-size: 12px;
	line-height: 16px;
}

/* Le due classi sono annidate, senza azzeramento la regola sopra raddoppia la barra */
.rgui2-card .rgui2-card-section .z-panel-head .z-panel-header {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	padding: 0 !important;
	margin-top: 0;
}

.rgui2-card .rgui2-card-section .z-panel-header .z-caption,
.rgui2-card .rgui2-card-section .z-panel-header .z-caption-content,
.rgui2-card .rgui2-card-section .z-panel-header .z-label,
.rgui2-card .rgui2-card-section .z-panel-head .z-caption,
.rgui2-card .rgui2-card-section .z-panel-head .z-caption-content,
.rgui2-card .rgui2-card-section .z-panel-head .z-label {
	color: var(--rgui2-c-header-fg) !important;
}

/* IMP-XXX-UI: riquadro attorno a un gruppo di checkbox (sclass="rgui2-chk-group") */
.rgui2-chk-group {
	border: 1px solid var(--rgui2-c-line);
	border-radius: 6px;
	padding: 5px 14px;
	background: #FFFFFF;
	box-sizing: border-box;
}

/* Divisore interno al gruppo, non a tutta altezza */
.rgui2-chk-group-sep,
.rgui2-chk-group-sep .z-separator-bar {
	height: 18px;
	width: 1px;
	background-color: var(--rgui2-c-line) !important;
	border-color: var(--rgui2-c-line) !important;
}

/* IMP-XXX-UI: senza questo il bordo della prima riga cade sul limite del box e viene tagliato */
.rgui2-card .z-grid {
	padding-top: 1px;
}

/* Il body della sezione non ripete la spaziatura orizzontale gia' data dalla card */
.rgui2-card-pad .rgui2-card-section .z-panelchildren {
	padding: 8px 0 0 0;
}

/* IMP-XXX-UI: gli angoli arrotondati di .z-window interrompono la continuita' della sidebar */
.rgui2-navbar-root.z-window {
	border-radius: 0 !important;
}

/* IMP-XXX-UI: toglie i bordi che il tema mette alle regioni del borderlayout nonostante
   border="none" (sclass="rgui2-shell" sul borderlayout della pagina) */
.rgui2-shell .z-north,
.rgui2-shell .z-north-body,
.rgui2-shell .z-south,
.rgui2-shell .z-south-body,
.rgui2-shell .z-center,
.rgui2-shell .z-center-body,
.rgui2-shell .z-west,
.rgui2-shell .z-west-body {
	border: 0 !important;
	box-shadow: none !important;
}

/* IMP-XXX-UI: toglie bordo e angoli di .z-window dentro il center. Le finestre modali
   non sono figlie del center e restano intatte */
.rgui2-shell .z-center .z-window,
.rgui2-shell .z-center .z-borderlayout {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* IMP-XXX-UI: barra di filtro sopra una listbox (sclass="rgui2-filterbar" sul div) */
.rgui2-filterbar {
	padding: 6px;
	border-bottom: 1px solid var(--rgui2-c-line);
	box-sizing: border-box;
}

/* IMP-XXX-UI: variante additiva a rgui2-tabs, i tabpanel prendono il riquadro delle card */
.rgui2-tabs-card.z-tabbox .z-tabpanels,
.rgui2-tabs-card.z-tabbox .z-tabpanel {
	background-color: #FFFFFF;
}

.rgui2-tabs-card.z-tabbox .z-tabpanels {
	border: 1px solid var(--rgui2-c-line);
	border-radius: 0 10px 10px 10px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

/* ==========================================================================
   IMP-XXX-UI: sotto-pannello di una card (sclass="rgui2-subpanel"), come la card ma
   su fondo grigio, senza ombra e con intestazione e margini ridotti.
   L'icona si mette nel caption: <caption iconSclass="z-icon-..." label="..."/>
   ========================================================================== */
.rgui2-card .rgui2-subpanel.z-panel {
	margin: 6px;
	background: var(--rgui2-c-subpanel-bg);
	border: 1px solid var(--rgui2-c-line);
	border-radius: 8px;
	box-shadow: none;
	box-sizing: border-box;
	overflow: hidden;
}

/* Le regole della card arrivano qui per discendenza e vanno riscritte tutte */
.rgui2-card .rgui2-subpanel .z-panel-header,
.rgui2-card .rgui2-subpanel .z-panel-head {
	background: var(--rgui2-c-subpanel-bg) !important;
	border-bottom: 1px solid var(--rgui2-c-line) !important;
	padding: 2px 10px !important;
	font-size: 12px;
	line-height: 18px;
}

/* Classi annidate, padding e linea una volta sola come nella card */
.rgui2-card .rgui2-subpanel .z-panel-head .z-panel-header {
	padding: 0 !important;
	border-bottom: 0 !important;
}

.rgui2-card .rgui2-subpanel .z-panel-header .z-caption,
.rgui2-card .rgui2-subpanel .z-panel-header .z-caption-content,
.rgui2-card .rgui2-subpanel .z-panel-header .z-label,
.rgui2-card .rgui2-subpanel .z-panel-head .z-caption,
.rgui2-card .rgui2-subpanel .z-panel-head .z-caption-content,
.rgui2-card .rgui2-subpanel .z-panel-head .z-label {
	font-size: 12px;
	line-height: 18px;
}

.rgui2-card .rgui2-subpanel .z-panel-body,
.rgui2-card .rgui2-subpanel .z-panelchildren {
	background: var(--rgui2-c-subpanel-bg);
	border: 0;
}

/* Icona del titolo. Nel set FontAwesome Free il glifo esiste solo nel peso solid (900) */
.rgui2-subpanel .z-panel-header .z-icon,
.rgui2-subpanel .z-panel-header [class*="z-icon-"] {
	font-weight: 900;
	font-size: 11px;
	margin-right: 6px;
	color: var(--rgui2-c-action);
}

/* IMP-XXX-UI: card con contenuto scorrevole (sclass="rgui2-card-scroll" sul panel in vflex).
   Scorre il solo blocco rgui2-card-scrollbody, il footer resta in fondo alla card */
.rgui2-card-scroll .z-panelchildren {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Senza min-height:0 il flex item non si restringe e spinge il footer fuori dalla card */
.rgui2-card-scrollbody {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

.rgui2-card-scroll .rgui2-card-foot {
	flex: 0 0 auto;
	margin-top: 0;
}

/* Toglie il fondo bianco che le regole globali danno a griglie e righe. Niente !important,
   azzererebbe anche i background inline di alcune righe */
.rgui2-subpanel .z-grid,
.rgui2-subpanel .z-grid .z-grid-body,
.rgui2-subpanel .z-grid tr.z-row > .z-row-inner,
.rgui2-subpanel .z-grid tr.z-row > .z-cell,
.rgui2-subpanel .z-grid tr.z-row:hover > .z-row-inner,
.rgui2-subpanel .z-grid tr.z-row:hover > .z-cell,
.rgui2-subpanel .z-grid tr.z-grid-odd,
.rgui2-subpanel .z-grid tr.z-grid-odd > .z-cell {
	background: transparent;
}

/* IMP-XXX-UI: separatore verticale fra le celle, la prima esclusa. Il border-collapse va
   sul <table>, in modalita' separate i bordi sui <tr> non vengono disegnati */
.rgui2-subpanel .z-grid table {
	border-collapse: collapse;
}

.rgui2-subpanel .z-grid tr.z-row > td:not(:first-child) {
	border-left: 1px solid var(--rgui2-c-line);
}

/* Linee solo fra una riga e l'altra. Il bordo sta sul <tr>, sulle celle sparirebbe dove
   ZK non emette <td> */
.rgui2-subpanel .z-grid tr.z-row:not(:last-child) {
	border-bottom: 1px solid var(--rgui2-c-line);
}

/* ==========================================================================
   IMP-XXX-UI: icona di reset del filtro accanto ai campi.
   Uso: <a sclass="rgui2-clear-icon" iconSclass="z-icon-circle-xmark" onClick="..."/>
   ========================================================================== */
.rgui2-clear-icon {
	color: var(--rgui2-clear-icon-color);
	cursor: pointer;
	text-decoration: none !important;
	vertical-align: middle;
	line-height: var(--rgui2-input-h);
}

/* Nel set FontAwesome Free il glifo esiste solo nel peso solid (900) */
.rgui2-clear-icon [class*="z-icon-"] {
	font-size: var(--rgui2-clear-icon-size);
	font-weight: 900;
	line-height: 1;
}

.rgui2-clear-icon:hover {
	color: var(--rgui2-c-primary-hover);
}

/* IMP-XXX-UI: la cella con la sola icona non ha il padding orizzontale delle celle dati.
   Due selettori, :has() e la sclass esplicita da usare dove non e' supportato */
/* ==========================================================================
   IMP-XXX-UI: griglia di filtri dentro un popup (sclass="rgui2-filter-grid" sul
   grid), senza separatori e con spaziatura verticale compatta.
   ========================================================================== */
.rgui2-filter-grid .z-row > .z-cell,
.rgui2-filter-grid .z-row > .z-row-inner {
	border: 0;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Righe da tenere attaccate, -below sulla prima e -above sulla seconda */
.rgui2-filter-grid .rgui2-row-tight-below > .z-cell,
.rgui2-filter-grid .rgui2-row-tight-below > .z-row-inner {
	padding-bottom: 1px;
}

.rgui2-filter-grid .rgui2-row-tight-above > .z-cell,
.rgui2-filter-grid .rgui2-row-tight-above > .z-row-inner {
	padding-top: 1px;
}

.rgui2-filter-grid .bold-label {
	margin: 0;
}

/* Etichetta in linea con un campo, dove .bold-label la disallineerebbe */
.rgui2-inline-label {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
	line-height: var(--rgui2-input-h);
}

/* Intestazioni allineate a destra (sclass="rgui2-lbx-head-right"), la globale le centra */
.rgui2-lbx-head-right .z-listheader-content {
	text-align: right !important;
}

/* IMP-XXX: intestazioni allineate a sinistra (sclass="rgui2-lbx-head-left"), la globale le centra */
.rgui2-lbx-head-left .z-listheader-content {
	text-align: left !important;
}

/* Popup che fa da dialog, i 30px di .modal-window raddoppierebbero la cornice della card */
.rgui2-popup-tight {
	padding: 0;
}

td.rgui2-clear-cell,
td:has(> .rgui2-clear-icon) {
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: left !important;
	vertical-align: middle !important;
}

/* ==========================================================================
   IMP-XXX-UI: label e campo centrati nelle griglie usate come form. L'allineamento
   per baseline non funziona da quando l'altezza dei campi e' forzata.
   ========================================================================== */
td.form-label,
td.form-item,
td.form-label-det,
td.form-label-det-value,
td.form-item-det,
.z-row > td.form-label,
.z-row > td.form-item,
.z-row > td.form-label-det,
.z-row > td.form-label-det-value,
.z-row > td.form-item-det {
	vertical-align: middle;
}

/* ==========================================================================
   Font dell'applicazione, Inter self-hosted sotto /fonts/inter. I due file
   variable coprono tutti i pesi 100-900 senza grassettatura sintetica.
   ========================================================================== */
@font-face {
	font-family: "InterVariable";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
	font-family: "InterVariable";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

/* Fallback statici per i browser senza supporto ai font variabili */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter/Inter-Italic.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2");
}

:root {
	--rgui2-font-sans: "InterVariable", "Inter", system-ui, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

/* Estende il font a tutti i componenti del tema. Le icone vanno escluse, hanno il
   font di FontAwesome e i glifi nella Private Use Area */
body,
button,
input,
select,
textarea,
[class^="z-"]:not([class*="z-icon"]),
[class*=" z-"]:not([class*="z-icon"]) {
	font-family: var(--rgui2-font-sans);
}

/* Inter adatta il disegno alla dimensione del testo */
body {
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   IMP-XXX-UI: icona davanti al titolo delle card. Va messa dentro il div flex della
   caption e non come iconSclass: <span sclass="z-icon-<nome> rgui2-card-icon"/>
   ========================================================================== */
/* L'icona non si comprime con il titolo lungo. Glifo solo nel peso solid (900) */
.rgui2-card-icon {
	flex: 0 0 auto;
	font-weight: 900;
	font-size: 13px;
	margin-right: 6px;
	color: var(--rgui2-c-action);
}

/* Con tre elementi lo space-between della caption centrerebbe il titolo. Il margin auto
   raccoglie lo spazio dopo il titolo, che resta appaiato all'icona */
.rgui2-card-icon + .z-label {
	margin-right: auto;
}

/* IMP-XXX-UI: righe degli alberi piu' compatte, solo per le celle dati */
.z-treecell-content {
	padding-top: 2px;
	padding-bottom: 2px;
}

/* ==========================================================================
   IMP-XXX-UI: etichetta e campo in cima al body di un pannello (sclass
   "rgui2-field-label" sul div dell'etichetta, "rgui2-field-inset" sul campo).
   ========================================================================== */
.rgui2-field-label {
	text-align: left;
	color: var(--rgui2-c-text-soft);
	padding: 10px 10px 4px 10px;
}

/* Il peso va sul .z-label, il tema lo dichiara li' e non si eredita dal div */
.rgui2-field-label .z-label {
	font-weight: bold;
}

/* Il campo e' al 100%, senza calc i margini lo farebbero sbordare. ZK scrive inline */
.rgui2-field-inset {
	width: calc(100% - 20px) !important;
	margin: 0 10px 12px 10px;
}

/* ==========================================================================
   IMP-XXX-UI: intestazione delle regioni di un borderlayout con title
   (sclass="rgui2-region-head"), stesso aspetto della title bar delle card.
   ========================================================================== */
.rgui2-region-head .z-north-header,
.rgui2-region-head .z-south-header,
.rgui2-region-head .z-west-header,
.rgui2-region-head .z-east-header,
.rgui2-region-head .z-center-header {
	background: var(--rgui2-c-subpanel-bg) !important;
	background-image: none !important;
	color: var(--rgui2-c-title) !important;
	border-bottom: 1px solid var(--rgui2-c-line);
	padding-left: 12px;
	box-sizing: border-box;
}

/* Il tema colora l'elemento interno e non l'intestazione. Vale anche per l'icona di collasso */
.rgui2-region-head .z-north-header *,
.rgui2-region-head .z-south-header *,
.rgui2-region-head .z-west-header *,
.rgui2-region-head .z-east-header *,
.rgui2-region-head .z-center-header * {
	color: inherit !important;
}

/* ==========================================================================
   IMP-XXX-UI: card che si stringe attorno al form (sclass="rgui2-card-form",
   additiva a "rgui2-card"). La misura segue le colonne della griglia nel .zul.
   ========================================================================== */
.rgui2-card-form.z-panel {
	max-width: 728px;
}

/* ==========================================================================
   IMP-XXX-UI: pulsante con testo nella title bar di una card (sclass
   "rgui2-btn-caption"), ripristina gli angoli arrotondati tolti da .button-allegati.
   ========================================================================== */
.rgui2-btn-caption.z-button {
	border-radius: 6px;
}

/* IMP-XXX-UI: annulla il margin-top di .footer-button, che scentra il pulsante nella barra */
.rgui2-card-foot .footer-button.z-button {
	margin-top: 0 !important;
}

/* ==========================================================================
   IMP-XXX-UI: etichetta che intesta un elenco (sclass="rgui2-list-label" sulla
   label). display:block perche' su un inline il padding verticale non fa altezza.
   ========================================================================== */
.rgui2-list-label.z-label {
	display: block;
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
	color: var(--rgui2-c-text-soft);
	padding: 10px;
}

.rgui2-list-value.z-label {
	display: block;
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	color: var(--rgui2-c-text-data);
	padding: 10px 10px 10px 0;
}

/* ==========================================================================
   IMP-XXX-UI: cornice larga per le window modali (sclass="rgui2-modal-wide"
   additiva a "modal-window"), ripristina i 30px sulle finestre piccole.
   ========================================================================== */
.rgui2-modal-wide.modal-window {
	padding: 30px;
}

/* ==========================================================================
   IMP-XXX-UI: intestazioni uniformi (sclass="rgui2-lbx-head" sulla listbox), dove
   sono <label> figlie di listheader o auxheader e il tema le tratta da testo dati.
   ========================================================================== */
.rgui2-lbx-head .z-listheader-content .z-label,
.rgui2-lbx-head .z-auxheader-content,
.rgui2-lbx-head .z-auxheader .z-label {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
	color: var(--rgui2-c-header-fg);
}

/* L'allineamento sta sul contenuto, gli align inline restano sull'header */
.rgui2-lbx-head .z-auxheader-content {
	text-align: center;
}

/* Frecce di ordinamento impilate, senza interlinea non alzano l'intestazione */
.rgui2-lbx-sortbox {
	line-height: 0;
}

.rgui2-lbx-sortbox img {
	display: block;
	margin: 0 auto;
	cursor: pointer;
}

/* Con line-height a zero lo spacing del vlayout non si vede, il respiro lo da' il margine */
.rgui2-lbx-sortbox img + img {
	margin-top: 4px;
}

/* Intestazioni piu' basse (sclass="rgui2-lbx-head-tight"), il riempimento si paga due volte */
.rgui2-lbx-head-tight .z-listheader,
.rgui2-lbx-head-tight .z-auxheader,
.rgui2-lbx-head-tight .z-listhead-bar,
.rgui2-lbx-head-tight .z-auxhead-bar {
	padding-top: 0;
	padding-bottom: 0;
}

.rgui2-lbx-head-tight .z-listheader-content,
.rgui2-lbx-head-tight .z-auxheader-content {
	padding-top: 1px;
	padding-bottom: 1px;
}

/* Timebox senza pulsanti su e giu' (sclass="rgui2-nospin"). buttonVisible="false" li
   disabilita soltanto */
.rgui2-nospin .z-timebox-button {
	display: none !important;
}

/* Senza pulsante il rientro che il tema riserva e' spazio sottratto alle cifre */
.rgui2-nospin .z-timebox-input {
	width: 100% !important;
	padding-right: 4px !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* ==========================================================================
   IMP-XXX-UI: fascia dei totali in fondo a una listbox (sclass="rgui2-lbx-foot" sul
   listfoot), con il solo separatore verticale piu' la linea che stacca dai dati.
   ========================================================================== */
.rgui2-lbx-foot {
	border-top: 1px solid var(--rgui2-c-line);
}

.rgui2-lbx-foot .z-listfooter {
	border: 0;
	border-right: 1px solid var(--rgui2-c-line);
	background: var(--rgui2-c-header-bg);
}

.rgui2-lbx-foot .z-listfooter:last-child {
	border-right: 0;
}

/* Stesso trattamento tipografico delle etichette dei form */
.rgui2-lbx-foot .z-listfooter-content,
.rgui2-lbx-foot .z-listfooter .z-label {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
	color: var(--rgui2-c-text-soft);
}

/* ==========================================================================
   IMP-XXX-UI: ritocchi locali alla pagina del computo (sclass="rgui2-computo" sulla
   window), validi solo per questa pagina.
   ========================================================================== */

/* Le card non devono toccare i bordi della finestra */
.rgui2-computo-stack {
	padding: 6px 6px 0 6px;
	box-sizing: border-box;
}

/* Barra dei totali senza cornice ne' riempimenti, l'altezza la da' il footer della listbox */
.rgui2-computo-totbar.z-panel,
.rgui2-computo-totbar .z-panel-body,
.rgui2-computo-totbar .z-panelchildren {
	border: 0;
	background: transparent;
	padding: 0;
}

.rgui2-computo-totbar .z-listbox,
.rgui2-computo-totbar .z-listbox-body,
.rgui2-computo-totbar .z-listbox-footer {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Il div flex della title bar senza altezza minima si stringe sui pulsanti */
.rgui2-computo .rgui2-card .z-caption-content > div {
	min-height: 20px;
}

/* Title bar piu' bassa, qui il titolo e' una riga di comandi */
.rgui2-computo .rgui2-card .z-panel-header,
.rgui2-computo .rgui2-card .z-panel-head {
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	line-height: 20px;
}

/* La coppia annidata prende il riempimento una volta sola, come nella regola generale */
.rgui2-computo .rgui2-card .z-panel-head .z-panel-header {
	padding: 0 !important;
}

/* Il contenuto della caption ha un suo padding verticale che si somma a quello sopra */
.rgui2-computo .rgui2-card .z-caption-content {
	padding-top: 1px;
	padding-bottom: 1px;
}

/* I pulsanti nella title bar ne determinano l'altezza minima */
.rgui2-computo .rgui2-card .z-panel-header .z-button {
	height: var(--rgui2-input-h, 24px);
	padding-top: 0;
	padding-bottom: 0;
}

/* ==========================================================================
   IMP-XXX-UI: voci dei menu a tendina delle bandbox. Con checkmark="true" il flex
   riporta selettore e testo sullo stesso asse.
   ========================================================================== */
.z-bandpopup .rgui2-lbx-border .z-listcell-content,
.z-bandpopup .rgui2-lbx-border-striped .z-listcell-content {
	display: flex;
	align-items: center;
	min-height: var(--rgui2-row-h);
	box-sizing: border-box;
}

/* ==========================================================================
   IMP-XXX-UI: intestazioni di un tree come quelle delle listbox
   (sclass="rgui2-tree-head" sul tree), batte gli style inline rimasti nelle pagine.
   ========================================================================== */
.rgui2-tree-head .z-treecol {
	padding: 4px 4px;
}

.rgui2-tree-head .z-treecol,
.rgui2-tree-head .z-treecol-content {
	color: var(--rgui2-c-header-fg) !important;
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
}

/* ==========================================================================
   IMP-XXX-UI: tree con bordi leggeri e righe alternate, l'equivalente di
   rgui2-lbx-border*. Sui rami espansi l'alternanza puo' ripartire.
   ========================================================================== */
.rgui2-tree-border,
.rgui2-tree-border-striped {
	border: 1px solid var(--rgui2-c-line);
}

.rgui2-tree-border .z-treerow > .z-treecell,
.rgui2-tree-border-striped .z-treerow > .z-treecell {
	border-right: 1px solid var(--rgui2-c-line);
	border-bottom: 1px solid var(--rgui2-c-line);
}

.rgui2-tree-border .z-treerow > .z-treecell:last-child,
.rgui2-tree-border-striped .z-treerow > .z-treecell:last-child {
	border-right: 0;
}

/* Il colore va sulla cella, dove il tema dipinge lo sfondo */
.rgui2-tree-border-striped .z-treerow:nth-child(even) > .z-treecell {
	background: var(--rgui2-c-stripe-bg);
}

.rgui2-tree-border-striped .z-treerow:nth-child(odd) > .z-treecell {
	background: #FFFFFF;
}

/* ==========================================================================
   IMP-XXX-UI: hover e selezione di un tree come quelli delle listbox
   (sclass="rgui2-tree-highlight" sul tree, additiva alle precedenti).
   ========================================================================== */
.rgui2-tree-highlight .z-treerow:hover > .z-treecell,
.rgui2-tree-highlight .z-treerow.z-treerow-over > .z-treecell {
	background: var(--rgui2-c-hover-bg) !important;
}

.rgui2-tree-highlight .z-treerow.z-treerow-seld > .z-treecell,
.rgui2-tree-highlight .z-treeitem-seld > .z-treerow > .z-treecell {
	background: var(--rgui2-c-selected-bg) !important;
	color: var(--rgui2-c-text-data) !important;
}

/* Il tema colora il testo della riga selezionata sul contenuto della cella */
.rgui2-tree-highlight .z-treerow.z-treerow-seld > .z-treecell .z-treecell-content,
.rgui2-tree-highlight .z-treeitem-seld > .z-treerow > .z-treecell .z-treecell-content {
	color: var(--rgui2-c-text-data) !important;
}

/* ==========================================================================
   IMP-XXX-UI: estende a west ed east la trasparenza delle regioni gia' data sopra
   da .rgui2-card-layout.
   ========================================================================== */
.rgui2-card-layout .z-west,
.rgui2-card-layout .z-east,
.rgui2-card-layout .z-west-body,
.rgui2-card-layout .z-east-body {
	background: transparent;
}

/* ==========================================================================
   IMP-XXX-UI: griglia piu' compatta in verticale (sclass="rgui2-grid-tight" sulla
   grid, additiva a no-highlight). Cambia la sola misura verticale.
   ========================================================================== */
.rgui2-grid-tight .z-row > .z-cell,
.rgui2-grid-tight .z-row > .z-row-inner {
	padding-top: 2px;
	padding-bottom: 2px;
}

/* ==========================================================================
   IMP-XXX-UI: ombra della barra superiore resa come gradiente in cima allo sfondo
   della pagina. Una box-shadow sul banner resterebbe sotto la sua regione.
   ========================================================================== */
:root {
	/* Colore e altezza dell'ombra */
	--rgui2-banner-shadow-h: 16px;
	--rgui2-page-shadow:
		linear-gradient(to bottom,
			rgba(15, 40, 65, 0.10) 0,
			rgba(15, 40, 65, 0.04) 40%,
			rgba(15, 40, 65, 0) 100%);
}

/* Ombra in cima e sotto la tinta piatta della pagina. Il primo background sta davanti */
.rgui2-card-stack,
.rgui2-card-layout {
	background:
		var(--rgui2-page-shadow) top left / 100% var(--rgui2-banner-shadow-h) no-repeat,
		var(--rgui2-c-page-bg);
}

/* ==========================================================================
   IMP-XXX-UI: spazio che avanza a destra dell'ultima colonna, nella stessa tinta
   delle intestazioni. Vale per listbox, grid e tree.
   ========================================================================== */
.z-listhead-bar,
.z-auxhead-bar,
.z-columns-bar,
.z-treecols-bar {
	background: var(--rgui2-c-header-bg) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--rgui2-c-line);
}

/* ==========================================================================
   IMP-XXX-UI: card larga quanto il suo contenuto (sclass "rgui2-card-narrow" additiva
   a "rgui2-card"), per gli elenchi a poche colonne. La misura segue le colonne nel .zul.
   ========================================================================== */
.rgui2-card-narrow.z-panel {
	max-width: 910px;
}

/* ==========================================================================
   IMP-XXX-UI: selettore a passi (sclass="rgui2-stepper" su un div), due frecce ai lati
   di un valore di sola lettura, con l'aspetto e l'altezza di un campo di input.
     <div sclass="rgui2-stepper">
       <a sclass="rgui2-stepper-arrow" iconSclass="z-icon-chevron-left" .../>
       <label sclass="rgui2-stepper-value" .../>
       <a sclass="rgui2-stepper-arrow" iconSclass="z-icon-chevron-right" .../>
     </div>
   Il contenitore deve essere un div, l'hlayout avvolge ogni figlio in un proprio
   .z-hlayout-inner e il flex agirebbe sui wrapper.
   ========================================================================== */
/* Larghezza fissa, altrimenti il riquadro cambia misura a ogni passo.
   rgui2-stepper-wide per i valori testuali, la misura base per quelli numerici */
.rgui2-stepper {
	width: 120px;
	display: inline-flex !important;
	align-items: stretch;
	height: var(--rgui2-input-h);
	border: 1px solid var(--rgui2-c-line);
	border-radius: 4px;
	background: #FFFFFF;
	overflow: hidden;
	box-sizing: border-box;
	vertical-align: middle;
}

.rgui2-stepper-wide {
	width: 180px;
}

/* Le frecce tengono la loro misura, tutto il resto va al valore */
.rgui2-stepper-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	color: var(--rgui2-c-primary);
	font-size: 11px;
	cursor: pointer;
	text-decoration: none;
}

.rgui2-stepper-arrow:hover {
	background: var(--rgui2-c-hover-bg);
	color: var(--rgui2-c-primary-hover);
}

/* Il valore occupa lo spazio fra le frecce, separato da esse da una linea leggera */
.rgui2-stepper-value.z-label {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 8px;
	border-left: 1px solid var(--rgui2-c-line);
	border-right: 1px solid var(--rgui2-c-line);
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: bold;
	color: var(--rgui2-c-text-data);
	white-space: nowrap;
}

/* ==========================================================================
   IMP-XXX-UI: coda di un contenitore scorrevole (sclass="rgui2-scroll-pad"), il
   riempimento in basso riporta dentro l'ultima riga.
   ========================================================================== */
.rgui2-scroll-pad {
	padding-bottom: 20px;
	box-sizing: border-box;
}

/* ==========================================================================
   IMP-XXX-UI: evidenziazione tenue delle celle di totale. Due varianti:
     rgui2-lbx-cell-accent -> su un <listfooter> dentro un listfoot rgui2-lbx-foot
     rgui2-cell-accent     -> su una <cell> di una grid
   ========================================================================== */
.rgui2-lbx-foot .z-listfooter.rgui2-lbx-cell-accent {
	background: var(--rgui2-c-accent-bg) !important;
}

.z-row > .rgui2-cell-accent,
.z-row > td.rgui2-cell-accent {
	background: var(--rgui2-c-accent-bg) !important;
}

/* ==========================================================================
   IMP-XXX-UI: riga di totali resa con una grid (sclass="rgui2-grid-totrow" sulla
   grid), dove i totali non possono stare nel piede di una listbox.
   ========================================================================== */
.rgui2-grid-totrow table {
	border-collapse: collapse;
}

.rgui2-grid-totrow .z-row > .z-cell,
.rgui2-grid-totrow .z-row > .z-row-inner {
	border: 1px solid var(--rgui2-c-line);
	vertical-align: middle;
}

/* I margini di .bold-label sbilanciano il testo nella riga */
.rgui2-grid-totrow .bold-label {
	margin: 0;
}

/* ==========================================================================
   IMP-XXX-UI: larghezza del campo legata a quella della cella, altrimenti sborda
   quando il browser comprime le colonne e il bordo destro viene tagliato.
   ========================================================================== */
td.form-item > .z-textbox,
td.form-item > .z-decimalbox,
td.form-item > .z-intbox,
td.form-item > .z-longbox,
td.form-item > .z-doublebox,
td.form-item > .z-combobox,
td.form-item > .z-datebox,
td.form-item > .z-timebox,
td.form-item > .z-bandbox {
	max-width: 100%;
	box-sizing: border-box;
}

/* ==========================================================================
   IMP-XXX-UI: tab piu' bassi, con il testo centrato e senza lo sfondo che il tema
   dipinge sul contenuto.
   ========================================================================== */
/* L'altezza del tab e' in content-box, il riempimento verticale si sommerebbe */
.z-tabbox .z-tab {
	box-sizing: border-box;
	padding-top: 0;
	padding-bottom: 0;
	height: 32px; /* IMP-XXX-UI */
}

/* La fascia va ribassata insieme ai tab, altrimenti l'ingombro resta lo stesso */
.z-tabs {
	min-height: 32px;
	height: 32px;
}

.z-tabs-content {
	min-height: 36px;
}

.z-tabbox .z-tab > .z-tab-content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
}

.z-tabbox .z-tab > .z-tab-content,
.z-tabbox .z-tab > .z-tab-content .z-tab-text,
.z-tabbox .z-tab:hover > .z-tab-content,
.z-tabbox .z-tab:hover > .z-tab-content .z-tab-text {
	background: transparent;
	background-image: none;
}

/* ==========================================================================
   IMP-XXX-UI: righe alte (sclass="rgui2-tree-tall" sul tree, additiva alle
   precedenti). L'altezza la da' il riempimento del contenuto, non della cella.
   ========================================================================== */
.rgui2-tree-tall .z-treecell > .z-treecell-content {
	padding-top: 16px;
	padding-bottom: 16px;
}

.rgui2-tree-tall .z-treecell {
	vertical-align: middle;
}

/* Le intestazioni restano basse. Il riempimento si paga sulla colonna e sul contenuto */
.rgui2-tree-tall .z-treecol {
	padding-top: 3px;
	padding-bottom: 3px;
}

.rgui2-tree-tall .z-treecol > .z-treecol-content,
.rgui2-tree-tall .z-treecol .z-treecol-cnt {
	padding-top: 3px;
	padding-bottom: 3px;
}

/* ==========================================================================
   IMP-XXX-UI: cella con la sola icona di comando (sclass="rgui2-lbx-iconcell" sul
   listcell), centrata perche' il text-align dell'intestazione non scende sulle celle.
   ========================================================================== */
.rgui2-lbx-iconcell .z-listcell-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   IMP-XXX-UI: griglia usata come form (sclass="rgui2-form-tight" sulla grid), con
   il riempimento delle celle ridotto.
   ========================================================================== */
.rgui2-form-tight .z-row > .z-cell,
.rgui2-form-tight .z-row > .z-row-inner {
	padding: 1px 4px;
}

/* Rende vincolanti le larghezze delle <column>, altrimenti la tabella sborda */
.rgui2-form-tight table {
	table-layout: fixed;
	width: 100%;
}

/* Etichetta accostata al campo che segue, senza l'interlinea doppia del tema */
.rgui2-form-tight .form-label {
	padding-right: 4px;
	line-height: 14px;
	white-space: nowrap;
}

/* Riga di sole etichette sopra i campi (sclass="rgui2-form-labelrow" sulla <row>),
   senza riempimento in basso l'etichetta resta appaiata al suo campo */
.rgui2-form-labelrow > .z-cell,
.rgui2-form-labelrow > .z-row-inner {
	padding-top: 2px !important;
	padding-bottom: 0 !important;
}

.rgui2-form-labelrow .form-label {
	line-height: 12px;
}

/* Riempimento di un pannello con un form (sclass="rgui2-form-pad" sul panel) */
.rgui2-form-pad .z-panelchildren {
	padding: 6px 10px;
	box-sizing: border-box;
}

/* ==========================================================================
   IMP-XXX-UI: fascia che intesta una sezione dentro una grid
   (sclass="rgui2-grid-sectionhead" sulla cella), al posto degli stili inline.
   ========================================================================== */
.rgui2-grid-sectionhead {
	background-color: var(--rgui2-c-action) !important;
	color: #FFFFFF !important;
	vertical-align: middle !important;
	padding: 4px 8px !important;
}

/* Peso e colore forzati sul .z-label, dove il tema li dichiara */
.rgui2-grid-sectionhead .z-label {
	color: #FFFFFF !important;
	font-weight: bold;
	line-height: 20px;
	vertical-align: middle;
}

/* ==========================================================================
   IMP-XXX-UI: nota descrittiva (sclass="rgui2-note" sulla label), testo normale e
   tinta attenuata. display:block per dare altezza al padding verticale.
   ========================================================================== */
.rgui2-note.z-label {
	display: block;
	text-align: left;
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
	color: var(--rgui2-c-text-soft);
	line-height: 15px;
	padding: 6px 2px 8px 2px;
}

/* Variante affiancata a un titolo, senza riempimento verticale. Il selettore ripete
   .rgui2-card .z-panel-header per pareggiare la specificita' del titolo */
.rgui2-note-inline.z-label,
.rgui2-card .z-panel-header .rgui2-note-inline.z-label,
.rgui2-card .z-panel-head .rgui2-note-inline.z-label {
	display: inline;
	padding: 0;
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
	color: var(--rgui2-c-text-soft) !important;
	white-space: normal;
}

/* Trattino verticale di separazione dal titolo che la precede */
.rgui2-note-inline.z-label::before {
	content: "|";
	font-style: normal;
	color: var(--rgui2-c-line);
	margin: 0 8px;
}

/* ==========================================================================
   IMP-XXX-UI: pagina di login (index.zul). Le misure dei campi arrivano da
   .rgui2-login-form, dichiarata col blocco delle dialog di form.
   ========================================================================== */
/* Sfondo della login con vignettatura, gradiente sopra la foto. Gli stop intermedi
   concentrano lo scurimento sull'ultimo tratto del raggio */
.rgui2-login-bg {
	background-image:
		radial-gradient(ellipse at center,
			rgba(8, 20, 38, 0) 30%,
			rgba(8, 20, 38, 0.05) 58%,
			rgba(8, 20, 38, 0.18) 74%,
			rgba(8, 20, 38, 0.42) 87%,
			rgba(8, 20, 38, 0.75) 100%),
		url('../images/romeo-gestioni-background.jpg');
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

/* Testi piu' grandi degli 11px del tema, qui il form e' il contenuto della pagina */
.rgui2-login-form .form-label,
.rgui2-login-form .rgui2-link.z-a,
.rgui2-login-form .rgui2-login-error.z-label {
	font-size: 12.5px;
	line-height: 17px;
}

.rgui2-login-title.z-label {
	display: block;
	font-family: var(--rgui2-font-sans);
	font-size: 20px;
	font-weight: bold;
	color: var(--rgui2-c-title);
	line-height: 26px;
}

/* Testo che intesta il form sotto il titolo, tondo e piu' grande di .rgui2-note */
.rgui2-hint.z-label {
	display: block;
	text-align: center;
	font-family: var(--rgui2-font-sans);
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	color: var(--rgui2-c-text-soft);
	line-height: 20px;
	padding: 4px 0 0 0;
}

/* Il link va allineato al bordo destro della textbox, quindi rientrato della larghezza
   dell'icona piu' il gap della riga */
.rgui2-login-forgot {
	text-align: right;
	margin-top: 8px;
	padding-right: 24px;
}

/* Larghezza fissa alle icone di riga, il rientro del link sopra dipende da questa misura */
.rgui2-login-form .rgui2-field-deco,
.rgui2-login-form .rgui2-pwd-eye.z-a {
	display: inline-flex;
	justify-content: center;
	width: 16px;
}

/* ==========================================================================
   IMP-XXX-UI: copyright in fondo alla navbar (sclass="rgui2-navbar-copy"), al posto
   del footer della shell. In absolute per non spostare lo scroll del menu.
   ========================================================================== */
.rgui2-navbar-root {
	position: relative;
}

.rgui2-navbar-copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Sfondo pieno, le voci di menu scorrono sotto la scritta */
	background-color: var(--rgui2-c-brand-dark);
	color: var(--rgui2-c-brand-fg);
	padding: 6px 12px 16px 12px;
	box-sizing: border-box;
	text-align: center;
	/* Il testo esteso puo' andare a capo sui 300px della navbar */
	white-space: normal;
	line-height: 15px;
}

.rgui2-navbar-copy .z-label {
	font-family: var(--rgui2-font-sans);
	font-size: 12px;
	color: var(--rgui2-c-brand-fg);
}

/* L'ultima voce del menu finirebbe sotto la scritta quando l'elenco arriva in fondo */
.rgui2-navbar-root .z-listbox-body {
	padding-bottom: 42px;
}

/* ==========================================================================
   IMP-XXX-UI: banner ridotto della pagina di scelta contratto (sclass
   "rgui2-banner-bare" additiva a "rgui2-banner-root"), con i soli menu utente e help.
   ========================================================================== */
/* Fondo ardesia pieno, senza navbar la striscia scura non ha piu' senso */
.rgui2-banner-bare.rgui2-banner-root {
	background: var(--rgui2-c-banner-bg) !important;
}

/* Il blocco scuro del marchio resta invariato, il logo e' disegnato per fondo scuro */

/* Il margine automatico riporta a destra il box dei comandi, che non ha hflex */
.rgui2-banner-bare .rgui2-banner-right {
	margin-left: auto;
}

/* Icona davanti al testo dentro una cella di listbox (sclass="rgui2-lbx-labelicon"
   sull'hlayout che li contiene) */
.rgui2-lbx-labelicon.z-hlayout {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rgui2-lbx-labelicon.z-hlayout > .z-hlayout-inner {
	display: flex;
	align-items: center;
	margin: 0;
}

/* Intestazioni su piu' righe (sclass="rgui2-lbx-head-wrap"), per le colonne strette */
.rgui2-lbx-head-wrap .z-listheader-content {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 13px;
}

/* Intestazioni nascoste (sclass="rgui2-lbx-nohead"), per gli elenchi a una colonna */
.rgui2-lbx-nohead .z-listhead {
	display: none;
}

/* Ritorno alla login sotto l'azione principale, centrato come il pulsante che lo precede */
.rgui2-login-backlink {
	text-align: center;
	margin-top: 14px;
}

.rgui2-link.z-a {
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	color: var(--rgui2-c-action) !important;
	cursor: pointer;
	text-decoration: none !important;
}

.rgui2-link.z-a:hover {
	color: var(--rgui2-c-action-hover) !important;
	text-decoration: underline !important;
}

/* Messaggio di errore, tinta smorzata e bordo nel rosso del testo molto diluito */
.rgui2-login-error.z-label {
	display: block;
	text-align: left;
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	color: #A8564E;
	background: rgba(168, 38, 28, 0.06);
	border: 1px solid rgba(168, 38, 28, 0.18);
	border-radius: 6px;
	padding: 8px 12px;
	line-height: 15px;
	margin-top: 16px;
}

/* Pulsante a tutta colonna. L'altezza ripete il prefisso .rgui2-login-form per battere
   la regola sui pulsanti delle dialog di form */
.rgui2-btn-block.z-button {
	display: block;
	width: 100%;
	margin-top: 20px;
}

.rgui2-login-form .rgui2-btn-block.z-button {
	height: 40px;
	font-size: 13px;
}

/* ==========================================================================
   IMP-XXX-UI: grid di soli dati con bordi leggeri (sclass="rgui2-grid-border" sulla
   grid), l'equivalente di rgui2-lbx-border per le griglie.
   ========================================================================== */
/* Il border-collapse va sul <table>, in modalita' separate i bordi raddoppierebbero */
.rgui2-grid-border .z-grid,
.rgui2-grid-border.z-grid {
	border: 1px solid var(--rgui2-c-line);
	box-sizing: border-box;
}

.rgui2-grid-border table {
	border-collapse: collapse;
}

/* Il bordo sta sul <tr>, sulle celle sparirebbe dove ZK non emette <td>. Lo porta anche
   l'ultima riga, che altrimenti resterebbe aperta */
.rgui2-grid-border tr.z-row {
	border-bottom: 1px solid var(--rgui2-c-line);
}

.rgui2-grid-border tr.z-row > td:not(:first-child) {
	border-left: 1px solid var(--rgui2-c-line);
}

/* ==========================================================================
   IMP-XXX-UI: comandi della title bar resi come link con icona (<a sclass=
   "rgui2-caption-link"/> dentro "rgui2-caption-tools"), alti al massimo 16px.
   ========================================================================== */
.rgui2-caption-tools {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 16px;
	line-height: 16px;
}

.rgui2-caption-tools .rgui2-caption-link.z-a,
.rgui2-card .z-panel-header .rgui2-caption-link.z-a {
	display: inline-flex;
	align-items: center;
	height: 16px;
	font-family: var(--rgui2-font-sans);
	font-size: 11px;
	font-weight: normal;
	line-height: 16px;
	color: var(--rgui2-c-action) !important;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none !important;
}

/* Nel set FontAwesome Free il glifo esiste solo nel peso solid (900) */
.rgui2-caption-link.z-a [class*="z-icon-"] {
	font-weight: 900;
	font-size: 12px;
	margin-right: 4px;
}

.rgui2-caption-tools .rgui2-caption-link.z-a:hover,
.rgui2-card .z-panel-header .rgui2-caption-link.z-a:hover {
	color: var(--rgui2-c-action-hover) !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   IMP-XXX-UI: corpo di una dialog di form (sclass="rgui2-dialog-body" sul contenitore
   dei campi), al posto di .vetro-box. Classi accessorie:
     sclass="rgui2-dialog-foot"  -> additiva a rgui2-btn-bar, stacca i pulsanti
     sclass="rgui2-dialog-alert" -> avviso in testa alla dialog
     sclass="rgui2-field-row"    -> campo con icona affiancata
   ========================================================================== */
.rgui2-dialog-body {
	background: #FFFFFF;
	border-radius: 8px;
	border: 1px solid var(--rgui2-c-line);
	padding: 16px 20px;
	text-align: left;
	box-sizing: border-box;
	/* Campi piu' alti, qui sono il contenuto principale. Le regole globali leggono
	   il token via var() e lo ereditano da qui */
	--rgui2-input-h: 34px;
}

/* La login vuole gli stessi campi grandi ma non il riquadro, prende il solo token */
.rgui2-login-form {
	--rgui2-input-h: 34px;
}

.rgui2-dialog-body .z-textbox,
.rgui2-login-form .z-textbox {
	font-size: 13px;
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* Stacco fra una coppia etichetta e campo e la successiva, che lo spacing non distingue */
.rgui2-dialog-body .form-label,
.rgui2-login-form .form-label {
	display: block;
	margin-top: 20px;
}

.rgui2-dialog-body .z-button,
.rgui2-login-form .z-button {
	height: 32px;
	font-size: 12px;
	padding: 0 20px;
}

.rgui2-dialog-foot {
	margin-top: 20px;
}

.rgui2-dialog-alert {
	background-color: #FFEDC7;
	border: 1px solid #FFCB5D;
	border-radius: 6px;
	padding: 8px 12px;
	margin-bottom: 12px;
}

.rgui2-dialog-alert .z-label {
	font-weight: bold;
	color: var(--rgui2-c-text-data);
}


/* Il campo occupa la riga, l'icona resta appaiata e centrata sull'altezza del campo */
.rgui2-field-row.z-hlayout {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.rgui2-field-row.z-hlayout > .z-hlayout-inner {
	display: flex;
	align-items: center;
	margin: 0;
}

.rgui2-field-row.z-hlayout > .z-hlayout-inner:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.rgui2-pwd-eye.z-a {
	color: var(--rgui2-c-action) !important;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none !important;
}

.rgui2-pwd-eye.z-a:hover {
	color: var(--rgui2-c-action-hover) !important;
}

/* Icona decorativa accanto a un campo, senza stati di hover per non confonderla con
   quella di comando. Il glifo esiste solo nel peso solid (900) */
.rgui2-field-deco {
	flex: 0 0 auto;
	font-weight: 900;
	font-size: 16px;
	color: var(--rgui2-c-action);
	cursor: default;
}

/* ==========================================================================
   IMP-XXX-UI: icona del pulsante help nella banner. Il tema dichiara una misura
   propria sul glifo, che va forzata qui.
   ========================================================================== */
.rgui2-banner-helpbtn [class*="z-icon-"] {
	font-size: 22px !important;
	font-weight: 900;
	line-height: 1 !important;
	vertical-align: middle;
	/* IMP-XXX-UI: bianco, la tinta di azione sull'ardesia era illeggibile */
	color: #FFFFFF !important;
}

/* Pulsante di sola icona, senza il riempimento orizzontale di quello standard */
.rgui2-banner-helpbtn.z-button {
	padding: 0 4px !important;
	min-height: 0;
}

/* ==========================================================================
   IMP-XXX-UI: percorso di navigazione (sclass="rgui2-path" sulla label che lo porta,
   "form-label" su quella fissa), reso come un dato con cornice e monospaziato.
   ========================================================================== */
/* Il riquadro e' piu' alto della sua etichetta, il flex li centra fra loro */
.rgui2-path-bar.z-hlayout {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rgui2-path-bar.z-hlayout > .z-hlayout-inner {
	display: flex;
	align-items: center;
	margin: 0;
}

.rgui2-path.z-label {
	display: inline-block;
	font-family: Consolas, "Courier New", monospace;
	font-size: 11px;
	font-weight: normal;
	color: var(--rgui2-c-text-data);
	background: var(--rgui2-c-subpanel-bg);
	border: 1px solid var(--rgui2-c-line);
	border-radius: 4px;
	padding: 1px 8px;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ==========================================================================
   IMP-XXX-UI: barra dei pulsanti in fondo a una dialog (sclass="rgui2-btn-bar" sul
   div che li contiene), centrati e distanziati fra loro.
   ========================================================================== */
.rgui2-btn-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
}