/*Colori globali*/
.map-responsive,.map-responsive iframe,.maps{height: 500px;}
#banner{
margin-top: 85px;
}
/* Pannello degli accordion (organigramma della trasparenza, elenchi docman, ricerca avanzata,
   form di modifica frontend): la cornice grigia stacca il pannello aperto dalla pagina.
   Il bordo è "solid 3.5rem #eee" perché fa da riquadro pieno senza aggiungere un elemento;
   border-top: none lo lascia attaccato alla propria intestazione.
   SOLO sul pannello APERTO ([aria-hidden="false"]): frend collassa i pannelli chiusi con
   "visibility:hidden; height:0" (vedi build.css), MA con box-sizing:border-box il bordo (35px)
   e il padding (2rem) tengono comunque ~74px di altezza anche a contenuto azzerato. Applicata a
   TUTTI i pannelli, ogni voce chiusa lasciava quindi ~74px di vuoto invisibile: invisibile con
   un solo accordion (trasparenza, sempre uno), ma con accordion multipli si vedeva come tanto
   spazio fra una voce e l'altra. Limitandola all'aperto, i chiusi tornano a height:0 reale.
   Nessuno scatto: il pannello non ha transizione di altezza (transition-duration:0s). */
.fr-accordion--is-ready .fr-accordion__panel[aria-hidden="false"] {
    overflow: hidden;
    border: solid 3.5rem #eee;
    padding: 2rem;
    border-top: none;
}
a{ 
	color: #003569;
	background-color: transparent;        
}    
.u-background-50, .Megamenu,.Megamenu li.current.active > a {
	background-color: #083E76 !important;
}
.u-color-50{
	color: #083E76 !important;	
}
.u-color-60{
	color: #002452 !important;
}
.u-color-70{
	color: #003569 !important;	
}
.Linklist a, .Linklist li, .Linklist-link{	color: #002452 !important;}
.Button--default {
	background-color: #002452 !important;
	color:#FFFFFF !important;
	border:none;
	height: 47px;
    line-height: 1.5;
}
.Button--alert{
	background-color: red !important;
}
.Button--warning{
	background-color: #ECE149 !important;
	color: #003569 !important;		
}
.Button--alert a{
	color:#FFFFFF !important;
}
.Button--warning a{
	color: #003569 !important;	
}
.button--floatright{
	float:right;
}
.Footer,.Footer-links li.current.active a, .Footer-links li.current.active a:hover {    
    background-color: #002452 !important;    
}
.Header-navbar,.Share-revealIcon,.Header-searchTrigger button,.banner,.u-background-compl-9 {
	background-color: #003569 !important;	
}
.Forward{
	background-color:#FFFFFF !important;
}
.u-background-compl-10{
	background-color:#eceff1 !important;
}

.Icon-search{
	background-color:#FFFFFF !important;
	color: #003569 !important;
	cursor: pointer;
}
/* IWT dà ".Linklist li{overflow:hidden!important}" (serve a contenere i float: qui il chevron
   è float:right) e il link a display:block riempie il <li> esattamente. L'outline di
   :focus-visible si disegna FUORI dal bordo, quindi finiva tagliato e il focus era invisibile
   (es. le cartelle di docman). Con l'offset negativo l'outline cade dentro il link e si vede.
   Stesso rimedio già usato dal tema per ".item-image a:focus-visible". */
.Linklist li > a:focus-visible{
	outline-offset: -3px;
}
/* Un <a> inline che va a capo genera un box per ogni riga, e quel box è alto quanto l'area del
   font (~1.52em) mentre il line-height ereditato è 1.15em: i box si sovrappongono di ~5px, così
   l'outline del focus cade sopra il testo delle righe vicine e sembra che siano barrate.
   Come inline-block il link ha un box solo e l'outline lo avvolge una volta sola. Vale per i
   titoli-link (unico figlio di un heading): i titoli su una riga restano identici, quelli su
   più righe diventano solo un filo più compatti perché le righe non si accavallano più. */
h1 > a:only-child,
h2 > a:only-child,
h3 > a:only-child,
h4 > a:only-child{
	display: inline-block;
}
/* Stesso difetto, ma fuori dagli heading: le voci del menu "quadrattoni" (mod_menu layout
   tecsispa:entrypoint) sono <a> dentro un <p>, quindi la regola qui sopra non le prendeva.
   Hanno "u-text-h3" (28px) con line-height 33.6px: misurato, ogni box di riga e' alto 43.2px
   e su un titolo di due righe i box si accavallano di 9.6px, cioe' l'outline della prima riga
   cade sul testo della seconda. Con inline-block il link ha un box solo. */
.Entrypoint-item p > a{
	display: inline-block;
	width: 100%;
}
/* Il trigger della ricerca mobile ha anch'esso la classe .Icon-search, ma sta su fondo blu
   (glifo blu su blu = invisibile): qui riprende il bianco. Il color di IWT non basta perché
   è senza !important e perde contro .Icon-search qui sopra. */
.Header-searchTrigger button.Icon-search{
	color: #FFFFFF !important;
}
/* Su mobile la pagina scorreva lateralmente di una ventina di pixel: contenuto tagliato a
   sinistra e una fascia vuota a destra (segnalato su Samsung A57; su desktop stretto compare
   anche la barra orizzontale). La causa NON è stata trovata: misurando a 360 e a 412, sia in
   locale sia sul sito reale, e rendendo statici gli elementi fissi (sul telefono un fixed è
   largo quanto il viewport, mentre in emulazione risulta largo quanto il viewport PIÙ la
   scrollbar, il che falsa ogni misura), non sborda nessun elemento: header, offcanvas,
   carosello, owl-stage, frecce e footer sono tutti dentro. Questo taglia lo scorrimento senza
   nascondere nulla, appunto perché non c'è nulla che sporga.
   "clip" e non "hidden": hidden renderebbe la pagina un contenitore di scorrimento e
   spegnerebbe eventuali position:sticky; clip si limita a tagliare. Solo sotto i 768px: sul
   desktop il problema non si pone e il layout resta libero.
   Se un domani si trova l'elemento colpevole, questa regola va tolta e corretto quello. */
@media screen and (max-width: 767px){
	html{
		overflow-x: clip;
	}
}
/* Footer su mobile. I 32px di margine sopra e sotto a ogni blocco, i 16px di padding dei
   sotto-blocchi e i 40px di padding del footer sono tarati sul desktop, dove i blocchi stanno
   affiancati su una riga sola e quel respiro si vede solo ai bordi. Impilati in una colonna
   sola si sommano tutti: il footer arrivava a 1600px, il 43% dell'altezza della pagina, di cui
   circa 650px di spazi vuoti. Sotto i 768px si stringono (i margini restano, ma dimezzati: il
   distacco fra un blocco e l'altro serve a capire dove finisce l'uno e inizia l'altro).
   Gli !important servono perché il padding lo impone la utility u-padding-all-xxl di IWT,
   che è già !important: senza, questa regola perderebbe. */
@media screen and (max-width: 767px){
	/* Laterale 2.4rem e non 1.6: con 1.6rem il testo finiva a 9px dal bordo, incollato.
	   Il contenuto resta comunque più largo di prima, quando il padding era 4rem. */
	.Footer.u-padding-all-xxl{
		padding: 2.4rem !important;
	}
	/* La Grid dei blocchi si tira indietro col margine negativo del gutter, che serve a
	   compensare la spaziatura fra le colonne: su mobile però la colonna è una sola, quindi quel
	   margine non compensa niente e si limita a rosicchiare il padding del footer. Risultato: il
	   nome dell'ente partiva da 24px e i blocchi sotto da 17, disallineati fra loro. Azzerandolo
	   tutto il footer si incolonna sullo stesso asse. */
	.Footer .Grid--withGutter{
		margin-left: 0 !important;
	}
	/* Il margine verticale lo dà la cella della Grid con selettori più specifici di .Footer-block
	   (e già !important): servono sia la specificità in più sia !important, altrimenti la regola
	   passa solo su un lato. Si toccano solo top e bottom, mai la shorthand: il margine laterale
	   è il gutter della Grid e va lasciato dov'è. */
	/* I blocchi sono celle di una Grid flex: fra fratelli flex i margini NON collassano, quindi
	   1.6rem sopra + 1.6rem sotto diventano 3.2rem pieni fra un blocco e l'altro, a cui si
	   somma il padding del sotto-blocco. Su una colonna sola è troppo: 0.8rem bastano a
	   separare i blocchi (che hanno già titolo e riga a dividerli). */
	/* Il margine destro (l'altra metà del gutter) va lasciato: azzerandolo le celle si allargano
	   e il testo arriva a 17px dal bordo destro invece che a 20 — cioè peggio. Misurato. */
	.Footer .Footer-block.Grid-cell{
		margin-top: 0.8rem !important;
		margin-bottom: 0.8rem !important;
	}
	/* Il titolo di ogni blocco ha 3.2rem di stacco sotto: sul desktop separa il titolo dalla
	   colonna, su mobile — dove i blocchi sono già distanziati dai propri margini — diventa un
	   buco fra l'intestazione e il suo contenuto (è lo spazio più vistoso del footer stretto). */
	.Footer .Footer-blockTitle{
		padding-bottom: 1.2rem !important;
	}
	/* Anche qui serve la specificità in più: con il solo .Footer-subBlock il padding restava 16px. */
	.Footer .Footer-subBlock{
		padding-top: 0.8rem !important;
		padding-bottom: 0.8rem !important;
	}
}
/* Focus sui fondi scuri (footer, incluso il "powered by"). Il focus del tema è a due anelli:
   outline arancione + box-shadow #30373d, che sul bianco fa da stacco esterno. Sul blu del
   footer (#002452) quel grigio ha contrasto 1.2 e sparisce: restava il solo filo arancione,
   senza stacco, e il focus si leggeva a fatica. Qui l'anello esterno diventa bianco, che sul
   blu stacca nettamente. L'outline arancione non si tocca: sul blu ha già contrasto 6.55,
   sopra il 3:1 che WCAG 1.4.11 chiede agli indicatori. */
.Footer a:focus-visible{
	box-shadow: 0 0 0 5px #FFFFFF;
}
/* Il bordo #ccc di IWT sul bianco ha contrasto ~1.5:1, sotto il 3:1 che WCAG 1.4.11 chiede al
   contorno dei campi. #767676 sul bianco dava 4.54:1 (appena sopra il minimo): passava axe ma
   restava al limite e Silktide lo segnalava ancora come "Form control contrast". Portato a
   #666666 = 5.74:1, margine netto sopra i 3:1 (e anche sopra i 4.5:1 del testo), restando un
   grigio neutro non troppo scuro. Si cambia il solo border-color: dove il tema azzera il bordo
   di proposito (range, checkbox, radio, .Form--ultraLean e il modulo di ricerca qui sotto) la
   larghezza resta 0 e il bordo non riappare. */
.inputbox,
.Form-input{
	border-color: #666666;
}
/* Solo il modulo di ricerca (header/footer): lì l'input è accostato al bottone .Icon-search
   dentro una Grid e il bordo spezzerebbe la barra. Va limitato a quel form: applicata a tutti
   i .Form-input azzerava il "border:1px solid #ccc" di IWT e lasciava i campi bianchi su
   bianco, quindi invisibili (es. la pagina di ricerca) e sotto il contrasto minimo. */
.Form[role="search"] .Form-input{
	border:none;
}
/* Nel modulo di ricerca l'input è accostato al bottone .Icon-search: il bordo destro
   dell'input coincide col bordo sinistro del bottone, che ha sfondo bianco ed è dopo nel DOM.
   L'outline si disegna FUORI dal bordo, quindi il lato destro finiva coperto dal bottone e il
   focus sembrava aperto. Con l'offset negativo cade dentro il campo e si vede su tutti i lati. */
.Form[role="search"] .Form-input:focus-visible{
	outline-offset: -3px;
}
/* Stesso problema nel form filtro delle pagine dei tag (com_tags): i campi sono celle di una
   Grid accostate (campo di ricerca -> "Visualizza #" -> bottone Cerca) e il vuoto fra loro è
   minore dei 3px dell'outline. L'elemento che segue nel DOM ha sfondo bianco e viene dipinto
   sopra, quindi il lato destro dell'anello veniva mangiato. Il bottone non serve: è l'ultimo
   della riga e non ha nulla a destra. */
.tag-category .Form-input:focus-visible{
	outline-offset: -3px;
}

/* ============================================================================
   RSForm! Pro — resa dei form allineata al tema.
   Nel componente, per ogni form: Proprieta' > Layout form > "Responsive (CSS3)" e
   "Carica Layout CSS / JS" = No. Cosi' RSForm NON carica piu' il suo framework: prima
   iniettava "media/com_rsform/css/frameworks/bootstrap3/bootstrap.min.css" (121 KB di
   Bootstrap 3) dentro un sito IWT, con due conseguenze — i campi non somigliavano a
   quelli del sito (34px di altezza, font 14px, bordo #ccc, angoli 4px contro i ~50px,
   18px, #666666 e angoli vivi del tema) e un secondo framework interferiva con le
   regole globali del tema.
   Senza quel foglio i campi restano nudi (bordo "inset" del browser): lo stile lo diamo
   qui, una volta sola per TUTTI i form RSForm del sito, presenti e futuri.
   Il markup conserva le classi Bootstrap del layout salvato (row, col-sm-*,
   form-horizontal): ora sono inerti, ma vanno neutralizzate perche' non reintroducano
   float e padding di griglia se un domani un altro CSS le definisse.
   Il pulsante di invio NON si tocca: il layout del form gli mette gia' le classi del
   tema (Button Button--default u-text-r-xs u-linkClean). */
.formContainer .row,
.formContainer [class*="col-sm-"],
.formContainer [class*="col-md-"]{
	width: auto !important;
	float: none !important;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
.formContainer .rsform-block{
	margin: 0 0 2.4rem;
}
/* Etichetta sopra il campo, come nel resto del sito (il layout va impostato su
   "Verticale" nel componente; questa regola regge anche se resta su "Orizzontale",
   perche' annulla il float e la larghezza di colonna). */
.formContainer .formControlLabel{
	display: block;
	width: auto;
	float: none;
	text-align: left;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 .6rem;
}
/* L'asterisco degli obbligatori: rosso con contrasto 7.4:1 sul bianco. L'<abbr> non
   deve prendere il sottolineato punteggiato del browser. */
.formContainer .formRequired{
	color: #b30000;
}
.formContainer .formRequired abbr{
	text-decoration: none;
	border: 0;
}
.formContainer input[type="text"],
.formContainer input[type="email"],
.formContainer input[type="tel"],
.formContainer input[type="url"],
.formContainer input[type="number"],
.formContainer input[type="password"],
.formContainer input[type="date"],
.formContainer select,
.formContainer textarea{
	box-sizing: border-box;
	width: 100%;
	max-width: 60rem;
	font-family: inherit;
	font-size: 1.8rem;
	line-height: 1.4;
	color: #1a1a1a;
	padding: 1.1rem 1.2rem;
	background-color: #fff;
	border: 1px solid #666666;
	border-radius: 0;
}
.formContainer textarea{
	min-height: 16rem;
	resize: vertical;
}
/* Caselle e radio: 20px reali (i 13px di default sono sotto la soglia comoda al tocco)
   e stacco dal testo, che senza CSS restava incollato al quadratino. */
.formContainer input[type="checkbox"],
.formContainer input[type="radio"]{
	width: 2rem;
	height: 2rem;
	margin: 0 .8rem 0 0;
	vertical-align: -.35rem;
}
.formContainer .rsform-type-checkboxgroup .rsform-checkbox-desc,
.formContainer .rsform-type-radiogroup .rsform-radio-desc{
	display: inline-block;
	font-size: 1.8rem;
	line-height: 1.4;
}
/* Messaggi di validazione. NB: .formNoError e' lo stato "nessun errore" e resta
   display:none; qui si stila .formError, cioe' il messaggio che compare davvero. */
.formContainer .formValidation .formError{
	display: block;
	margin-top: .6rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: #b30000;
}
.formContainer .rsform-submit-button{
	margin-top: 1.2rem;
}
.Hero {
    /*margin-top: -40px !important;*/
	background-color: #5C95C9;
}
.Header-logo img {
    height: 8.5rem !important;
    width: 8.5rem !important;
}
.input_deactive{
	height: 150px !important;
}
.u-linkClean:hover{
	text-decoration: underline !important;
}
.Navscroll ul{
padding-left: 0 !important;
}
/* Inizio Tipografia */
.u-text-h4{
	font-size: 2.2rem !important;
}
.Navscroll > ul{
	padding:0;
}

article ul,article ol,article p,.docman_description ol,.docman_description ul,.docman_description p
{
	margin-bottom: 36px !important;
	letter-spacing: .005em !important;	
}
article ul,.docman_description ul{
	padding: 0em 3em!important;
	list-style-type: disc;
}
article ol,.docman_description ol{
	padding: 0em 3em!important;
	list-style-type: decimal;
}
article li,.docman_description li{
	padding: .2em!important;	
}
article h1,article h2,article h3,article h4,article h5,article h6{
	margin-bottom: 34px !important;
}

.Footer-block address, .Footer-block dl,.Footer-subBlock p, .Prose-blockquote>p, .Prose>h5, .u-text-h5, time{
    font-size: 1.6rem !important;
}
.Hero-content p,.u-text-p,.u-textSecondary, .Footer-subBlock strong, .Footer-subBlock dt
 {font-size: 1.8rem !important;}
.widthmax-250 {max-width: 250px;}
.Footer-subBlock dt{
	font-weight: bold;
}

/* Fine Tipografia */
/* Inizio Header*/
.Header-owner {
    float: none;	
}
.Header-banner .separator{
	/*color: #002452 !important;*/
	display: none;
}
/* Recapiti dell'header: lista semantica resa in linea. La spaziatura fra le voci resta
   quella del padding di .Header-banner a, non serve margine sui li. */
.Header-links{
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}
.Header-links > li{
	display: inline;
}
/* IWT dimensiona i recapiti con ".Header-owner > a" e ".Header-owner > a > span": ora che gli
   <a> stanno dentro i <li> quei selettori a figlio diretto non li raggiungono più, quindi ne
   ripetiamo qui i valori. Le tre media query di IWT da 768px in su valgono tutte 1.5rem per
   l'<a>; lo span passa a 1.6rem solo da 992px. Se si aggiorna IWT, riallineare questi valori. */
.Header-links > li > a,
.Header-links > li > a > span{
	font-size: 1.4rem !important;
}
@media screen and (min-width: 768px){
	.Header-links > li > a{
		font-size: 1.5rem !important;
	}
}
@media screen and (min-width: 992px){
	.Header-links > li > a > span{
		font-size: 1.6rem !important;
		letter-spacing: 0.01em !important;
	}
}
.Header-banner,.u-background-60{     
	background-color: #002452 !important;	
}
.Header-banner a {	
	color: #FFF!important;
	font-weight: normal !important;
    padding: 0 10px !important;
}
/* Il nome del sito nell'header non è più un <h1> (ora <div class="Header-titleLink">):
   l'<h1> di pagina è nel contenuto, o nascosto nel <main> in home page.
   Replichiamo le proprietà d'elemento che aveva l'<h1> (font-size 2em, grassetto,
   line-height 1.2) così l'aspetto e l'altezza dell'header restano identici. */
.Header-titleLink {
	font-size: 2em;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
/* Titoli di SEZIONE (titoli dei moduli): il tag è forzato a <h2> per una gerarchia
   heading corretta (h1 di pagina -> h2 delle sezioni), vedi layout tecsispa.moduleheading.
   Se il modulo è configurato con un tag NON heading (parametro "Tag intestazione" = p/span),
   questa classe ne replica la resa originale: peso normale e, in assenza di una utility
   di dimensione (u-text-h*), corpo ereditato dal contesto. Così la semantica migliora
   senza cambiare l'aspetto. */
.Section-headingAsText {
	font-weight: normal;
}
.Section-headingAsText:not([class*="u-text-h"]) {
	font-size: inherit;
}
/* Paginazione AcyMailing: AcyMailing pagina via POST del proprio form, quindi i controlli
   sono <button type="submit"> (semantici e accessibili da tastiera) invece di <a>.
   Qui si azzerano gli stili nativi del bottone per renderli identici ai link di
   paginazione usati nel resto del sito. */
.page-item > button.page-link {
	background: none;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	cursor: pointer;
	text-align: center;
}
/* AcyMailing resetta gli elementi HTML5 con "#acym_wrapper nav{display:block}": specificità
   (1,0,1), che batte ".Grid{display:flex}" (0,1,0). Senza flex il <ul> della paginazione si
   allarga a tutta la riga e le celle ".Grid--fit > .Grid-cell{flex:1 1 0%}" si spalmano. */
#acym_wrapper nav.Grid {
	display: flex;
}
/* Stessa famiglia: AcyMailing ha "#acym_wrapper ul{margin-left:1.25rem;list-style-type:disc}".
   Sempre per via dell'ID (1,0,1) vince sul reset del tema, quindi le liste dell'archivio
   mostravano i pallini ed erano spostate di 12.5px (1.25rem con rem=10): la barra di paginazione
   e l'elenco delle email. Verificato che la stessa .Linklist fuori da #acym_wrapper vale
   list-style:none / margin-left:0: qui si ripristinano quei valori. */
#acym_wrapper nav.Grid ul,
#acym_wrapper ul.Linklist {
	margin-left: 0;
	list-style: none;
}
/* Sempre dentro #acym_wrapper, AcyMailing impone il proprio line-height (e i <button> non lo
   ereditano affatto): le voci risultavano di altezze diverse fra loro e dal resto del sito.
   1.15 è il valore che le altre paginazioni ereditano da "html{line-height:1.15}" (normalize). */
#acym_wrapper nav.Grid .page-item > a,
#acym_wrapper nav.Grid .page-item > span,
#acym_wrapper nav.Grid .page-item > button,
#acym_wrapper nav.Grid .page-link {
	line-height: 1.15;
}
/* Fine Header */
/* Inizio Menu */
.Megamenu-item:first-child>:first-child{
	min-width: 70px;	
}
.u-background-compl {
    background-color: #FFF!important;
}
.u-separator{
	cursor: default;	
}
.nav-header{
	text-transform: uppercase!important;
    font-weight: 700!important;
	font-size: 2.1rem!important;
}
div.Offcanvas-toggleContainer{
	background: #003569 !important;
}
.nav-header{
	cursor: default;
}
/* Gli heading di navigazione che raggruppano voci figlie sono <span>: qui riprendono
   il display a blocco che avevano da <h2>. */
.nav-header--block{
	display: block;
}

.Megamenu--default .Megamenu-subnavGroup > li > a.nav-header:hover{
    text-decoration: none !important;
}
/* Fine Menu */
/* Inizio Carosello */
.Button--info {
    color: #003569 !important;
}
.Hero-content .u-text-h2,.u-text-h2{
	font-size: 3.8rem !important;
}
/* Qui c'era ".owl-item:hover" con l'icona pausa come background-image: era il feedback della
   vecchia pausa "al passaggio del mouse" (autoplayHoverPause di Owl), inutilizzabile da
   tastiera. Ora il comando di pausa è un vero <button> accanto agli indicatori (vedi sotto),
   quindi l'icona era un doppione. Il "color:black" della stessa regola era inerte: l'.owl-item
   è già nero di default e i testi delle card hanno colori propri. */
.featured-theme .owl-dots .owl-dot.active span, .heronews-theme .owl-dots .owl-dot.active span, .news-theme .owl-dots .owl-dot.active span {
    background: #fff;
    border-color: #003569;
}
/* Comando pausa/riprendi del carosello (WCAG 2.2.2). Lo crea il JS di "tecsispa.carousel"
   in fila con gli indicatori: è solo icona, il nome accessibile lo dà l'aria-label.
   #003569 è lo stesso blu del bordo dell'indicatore attivo (contrasto 11:1 sul bianco,
   sopra il 3:1 che WCAG 1.4.11 chiede ai controlli).
   .Carousel-controls è la riga che avvolge .owl-dots e il bottone: dentro .owl-dots il
   bottone non può stare, perché Owl ridisegnando gli indicatori rimuove i figli che non
   riconosce (il perché sta nel commento del layout tecsispa/carousel.php).
   Il gruppo resta centrato come prima: il centraggio lo dava il text-align:center di
   .owl-dots sugli inline-block, ora lo dà justify-content, e l'allineamento verticale
   non ha più bisogno del vertical-align misurato a mano (ci pensa align-items). */
.Carousel-controls {
	display: flex;
	justify-content: center;
	align-items: center;
}
.Carousel-controls .Carousel-pause {
	margin: 0 4px;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1;
	color: #003569;
	cursor: pointer;
}
.Carousel-controls .Carousel-pause .material-icons {
	display: block;
	font-size: 25px;
}
/*
.imgCarousel{
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}*/
/* Fine Carosello */
/* Inizio Quadrattoni */
.Entrypoint-item {
	background-color: #003569 !important;	
    min-height: 105px;
	margin-bottom: .8rem!important;
	margin: 1.6rem!important;
	padding: 0.9em!important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
  
.Entrypoint-item:hover {
	background-color: #002452 !important;	
}

.Grid--withGutter>.Grid-cell {
    padding: 0 .1rem !important;
}
.img_featured_big {
    clear: both;
    display: block;
    padding-bottom: 0.5rem;
	float: right;
}
.img_featured_small {
    height: 50px !important;
    padding-right: 0.5rem;
	float:right;
}
/* Fine Quadrattoni */
/* Inizio Accordion */
.Accordion--default .Accordion-header{
	border-bottom: .1rem solid currentColor!important;
	background-color: #eee!important;
	margin-bottom: 0 !important;
	padding-top: 0.1em!important;
    padding-bottom: 0.1em!important;
}

.Accordion--default .Accordion-header:hover{
	background-color: #d9e6f2!important;
}
/*.Accordion-panel p{
	text-align: justify;
}*/
.Accordion--default .Accordion-link{
	padding: 0 !important;
	color: #003569;		
    padding-bottom: 0.1em!important;
}
.Table--striped tbody tr:nth-child(odd) {
    background-color: transparent !important;
}
.Table--striped th{
	text-align: left !important;
}

/* Fine Accordion */
/* Inizio Menu Trasparenza */
/*freccia giù*/
.Linklist-link, .Linklist a{
	color:#002452!important;	
}
.Treeview--default li[aria-expanded=true] li a:hover{
	background-color: #D9E6F2 !important;
 }

 .Treeview--default li[aria-expanded=true] li a{
	background-color: #ECECEC !important;
 }

 .Treeview li.current.active > a:nth-child(1), .Treeview li.current.active > a:hover, .Treeview--default li[aria-expanded=true] li.current.active a:hover, .Treeview--default li[aria-expanded=true] li.deeper.parent li.current.active a{
 	font-weight: bold;
	background-color: #d9e6f2 !important;
	color: #00264d !important;
 }
 .Treeview--default li[aria-expanded=true] li.deeper.parent li.current.active a,
 .Treeview--default li[aria-expanded=true] li[aria-expanded=true] li.current.active a{
	background-color: #D9E6F2 !important;
	color:#002452!important;
	font-weight: normal;
 }
 .Treeview li.active.deeper.parent > a:nth-child(1) {
    /*font-weight: bold;*/
    background-color: #083E76 !important;
    color: #fff!important;
}
/* Il ramo aperto va letto a colpo d'occhio: gli antenati attivi annidati (un <li> dentro un
   altro <li>) prendono un blu più chiaro del primo livello, così la gerarchia si distingue.
   #004C99 è la tinta u-background-70 del tema: contrasto 8.4:1 col testo bianco.
   Scala risultante: 1° livello #083E76 → livelli interni #004C99 → voce corrente #D9E6F2. */
.Treeview li li.active.deeper.parent > a:nth-child(1) {
	background-color: #004C99 !important;
}
.Treeview-handler--standalone {
	border-left: 0px solid #fff;
}
/* Fine Menu Trasparenza */
/* Inizio overlay banner-leed */
.overlay-wrapper,.u-color-gray-30{
	opacity: 0.9;
}
.overlay-wrapper:hover,.u-color-gray-30:hover{
	opacity: 1;
}

/* Fine overlay banner-leed */
/* Inizio Footer */
.Footer a {
    color: #D9E6F2;
  	font-weight: 600!important;	
	font-size: 1.8rem!important;
}
.Footer-subBlock a{
	font-size: 1.6rem!important;
}
.Footer li {
    display: inline;	
	margin-right: 3.2rem!important;
}

.FooterSocial li {
    display: inline;
  	padding: 0!important;
}
.FooterSocial a {
	text-decoration: none;
}
.Footer-logo{
	width:85px;
}
.Footer-siteName{
	padding-top:0.5rem;
}
.Footer-subBlock p {
    color: #fff!important;
	margin: 0 0 0.5rem 0;
}
.footer_guide-line h2{
	color: #0b3148 !important;
	visibility: hidden;
}
.tcs-copyright {
	background-image: url('../../../images/tecsis/credits_tecsis.png');
 	width:83px;
	height:20px;
	position:absolute;
	right:85px;
	padding-top: 0em;
}
.Footer-links,.FooterSocial{
	padding: 1.5rem 0 !important;
}
.Footer-block {
    margin-bottom: 1em!important;
	margin-right: 1%;
	width: 24%!important;
}

.Footer-block a{
	font-weight: normal !important;
}

.FooterSocial .image-title{
	padding-left: 5px;
}

@media(max-width: 767px) {
	/* Sotto i 767px ogni voce del menu "footer" occupa una riga intera. IWT le dichiara pero'
	   display:inline-block con margin-right:3.2rem !important (`.Footer-links li, .u-margin-right-xl`
	   in build.min.css), margine che serve solo quando le voci stanno AFFIANCATE: con width:100%
	   si somma alla riga piena e il contenuto della <ul> diventa 344+32 = 376px contro i 344
	   disponibili. Risultato: la pagina diventava piu' larga dello schermo e su telefono scorreva
	   lateralmente (l'header, corretto a parte, restava a filo e il resto lasciava la fascia vuota).
	   Trovato disattivando il modulo menu "footer": era l'unico elemento a sforare, e non per il
	   suo BOX — che resta dentro — ma per il CONTENUTO, motivo per cui i controlli basati sui
	   riquadri non lo vedevano. Serve !important per battere quello di IWT. */
	.Footer-links li{
		width: 100%;
		margin-right: 0 !important;
   }
}
.u-margin-bottom-none{
	margin-bottom: 0 !important;
}

.Footer-subBlock{
	padding-left: 0 !important;	
	border-color:#FFF !important;
}
.Footer-subBlock .labelFooter{
	font-weight: bold;
}

.Footer-subBlock h3,.Footer-subBlock div{
	padding: 1rem 0 0px 0 !important;
}


/* Fine Footer */
/* Inizio AdsManager */
#adsmanager_innermenu{
	margin-bottom: 5rem;
}
.ads_link{
	color: #003569;
	font-weight: normal;
	text-decoration: none !important;
}	
.ads_search-form button{
	line-height: 10px !important;
}
.ads_search-form button:hover{
	cursor: pointer;
}
h2.ads_category-title{
	line-height: 14px !important;
	float: left;
}
#tsearch{
	font-size: 2.1rem !important;
	letter-spacing: .005em !important;
    font-family: Titillium Web,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
    border: 1px solid #ccc;
	border-radius: 0;
	box-sizing: border-box;
	color: inherit;
	display: block;
	margin: 0;
	padding: 20px;
	float: left;
}

@media screen and (max-width: 414px) {
	#adsmanager_innermenu .ads_link,
   .ads_category_list .ads_link{
		   background: #003569;
	   font-weight: normal;
	   text-decoration: none !important;
	   padding: 10px 10px;
	   display: block;
	   color: white;
	   font-size: 25px;
	   margin-bottom: 10px;
   }
   .ads_separator{
	   display: none;
   }
}

/* Fine AdsManager */

/* Inizio DocMan */
.docman_master{
	width: 80%;
	float: left;
}
  
.docman_detail{
	width: 20%;
	float: left;
	text-align: right;
	padding: 20px;
}
.folder {
    background-image: url(../../../images/icone/cartella-icona.png);
    padding-right: 32px;
    margin-right: 1rem;
}

/* Niente "top": spostava il bottone visibile fuori dall'<a> che riceve il focus, così
   l'outline restava 8px più in basso del bottone e il bottone stesso non era centrato sulla
   riga. Il centraggio verticale lo fa già .docman_item_row (flex + align-items:center). */
.docmanListDoc .btnDownload,.docmanListDoc .btnVisualizza{
	float:right;
}
.btnDownload{
	background-color:#ECE149 !important;
	color: #000000 !important;
}
.btnDownload:hover {
    background-color: #E8CA1D !important;	
}
.btnVisualizza:hover{
	background-color: #002452 !important;	
}
.docmanListDoc .Linklist a:hover {
    background-color: transparent;
}
/* Riga di dettagli del documento (pubblicato il / modificato il / firma / categoria /
   download / peso / nome file). DOCman la rende a 12px (site.min.css), fuori da qualunque
   scala del tema. Il riferimento del sito per le informazioni di contorno e' il blocco info
   degli articoli (layouts/joomla/content/info_block/*), misurato sull'articolo 81:
   testo 16px e colore #444e57 (= u-textSecondary). Qui era 1.8rem NERO, cioe' piu' grande e
   piu' scuro di ogni altro meta del sito: era quello che stonava.
   Il colore si mette solo sulla <p> e si lascia ereditare, cosi' gli eventuali link della
   riga (i tag) tengono il colore link del tema invece di diventare grigi.
   Il border-bottom di DOCman disegnava inoltre una riga a tutta larghezza che sembrava
   un <hr>. */
.docman_document .docman_document_details,
.docman_document .docman_document_details span,
.docman_document .docman_document_details time {
	font-size: 1.6rem;
}
.docman_document .docman_document_details {
	border-bottom: 0;
	color: #444e57;
}

/* SCHEDA DEL DOCUMENTO (dettaglio DOCman): un unico riquadro con tutti i dati del
   documento e, in fondo, il pulsante Scarica. Sostituisce la vecchia disposizione in cui
   le informazioni erano sparse in tre punti (riga di meta sotto il titolo, colonna
   flottante a destra col file, descrizione in fondo).
   Le etichette stanno in colonna a sinistra, i valori a destra: <dl> in griglia, che si
   riduce a una colonna sola sotto i 480px. Il grigio e' lo stesso dei riquadri della
   ricerca (u-background-compl-10). */
.docman_document .docman_document_card {
	margin: 0 0 2.4rem;
	padding: 2rem;
	background-color: rgb(236, 239, 241);
}
/* Da tablet in su la scheda sta a destra e la descrizione le scorre a fianco. Nel DOM la scheda
   precede la descrizione: e' quello che permette al testo di avvolgerla, ed e' anche cio' che su
   mobile (float annullato) la fa restare sopra la descrizione, come richiesto. */
@media (min-width: 768px) {
	.docman_document .docman_document_card {
		float: right;
		width: 34rem;
		margin: 0 0 2rem 2.4rem;
	}
}
/* Il float va contenuto, altrimenti sfonda sotto il blocco successivo quando la descrizione
   e' piu' corta della scheda. */
.docman_document::after {
	content: "";
	display: table;
	clear: both;
}
.docman_document .docman_document_card__data {
	display: grid;
	grid-template-columns: minmax(12rem, max-content) 1fr;
	gap: .8rem 2rem;
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.4;
}
.docman_document .docman_document_card__data dt {
	margin: 0;
	font-weight: 700;
	color: #444e57;
}
.docman_document .docman_document_card__data dd {
	margin: 0;
	color: #1a1a1a;
}
/* I nomi di file sono lunghi e senza spazi: senza questo allargano la griglia. */
.docman_document .docman_document_card__filename {
	word-break: break-all;
}
/* Il pulsante torna allineato a sinistra come il resto della scheda: la regola di DOCman
   lo centrava perche' stava in una colonna stretta a destra, che qui non esiste piu'. */
.docman_document .docman_document_card .docman_download {
	margin-top: 2rem;
	max-width: none;
	width: auto;
	float: none;
	text-align: left;
}
@media (max-width: 479px) {
	.docman_document .docman_document_card__data {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.docman_document .docman_document_card__data dd {
		margin: 0 0 1.2rem;
	}
}

.Linklist .k-icon-document-pdf {
	font-size: 1.8rem !important;
}
.docmanListDoc .Accordion-header {   
	background-color: #FFF!important;	
    padding-top: 1em !important;
}
.docmanListDoc .Accordion-header:hover {   
	background-color: #ECEFF1 !important;
}
	
.docmanListDoc .Accordion-link a,.docmanListDoc li a {
    color: #000000!important;
    font-size: 1.8rem !important;
    font-weight: 500!important;
	line-height: 0;    	
}
.docmanListDoc li{
	padding-top: 0.1em!important;
    padding-bottom: 0.1em!important;
}
.docmanListDoc li:hover{
	background-color: #ECEFF1;
}
.Button--default:active, .Button--default.is-pressed {
    background-color: #ECE149;
    border-color: #FFF;
    color: #FFF;
}
.k-ui-namespace .jqtree-whitespace, .k-ui-namespace .jqtree-toggler, .k-ui-namespace .jqtree-icon, .k-ui-namespace .jqtree-title {
     font-size: 16px !important;
}


/*.docmanListDoc .fr-accordion--is-ready .fr-accordion__panel {
	background-color: #ECEFF1 !important;
    padding: 2em;
}*/

/* Fine DocMan */
/* Inizio Jem */
.jem_categories .copyright {display:none;}
/* Fine Jem */

/* Inizio counter */
.jmm-counter{
	background:#fff;
	padding-top: 2em;
	padding-bottom: 2em;
	}
/* Fine counter */
.osmap-items a{
	text-decoration: none;
	font-size:1.8rem !important;
}

.osmap-items a:hover{
	text-decoration: underline;
}

/* trasparenza box articolo evidenza */
.Hero-content{
	opacity: .90;
	}

/* Articolo in evidenza (hero) in home: il riquadro .Hero ha altezza FISSA (540px) e overflow
   visibile, quindi un titolo o un testo introduttivo troppo lunghi uscivano dal riquadro e si
   sovrapponevano alla sezione sottostante. Si limita il numero di RIGHE con ellissi (…):
   -webkit-line-clamp lega l'altezza alle righe, non ai caratteri, quindi tiene a ogni larghezza.
   TITOLO a 2 righe, OVUNQUE (non era gestito da nessuna regola: sfora anche su mobile). Il titolo
   e' un <a> inline-block, quindi il clamp va messo ANCHE su di lui: altrimenti l'h3 lo conta come
   un blocco unico e non tronca. (Il titolo della slide e' un <h3>: era <h2>, portato a <h3> quando
   e' stato aggiunto l'h2 nascosto di sezione "Articoli in evidenza".) */
.Hero-content h3,
.Hero-content h3 > a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
/* TESTO INTRODUTTIVO a 4 righe da tablet in su. Sotto i 768px resta la troncatura a UNA riga gia'
   prevista piu' avanti (.Hero-content p { white-space:nowrap }), quindi qui si parte da 768 per non
   entrare in conflitto. Il clamp va sul <p> interno (contiene direttamente il testo): sul <div>
   .u-text-p i margini del <p> falserebbero il conteggio delle righe. */
@media (min-width: 768px) {
	.Hero-content .u-text-p > p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		overflow: hidden;
	}
}

/* Inizio Mobile fix */
.Grid--withGutterM {
    margin: 0 !important;
}
div.Offcanvas-toggleContainer {
    background:#002452 !important
}

@media(max-width: 767px) {
	.Hero-content p {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}
	.iconSharePrint .Icon-share{font-size: 28px;}
	.iconSharePrint .Share-reveal{height: 41.19px;}
	.img_featured_big,.img_featured_small{display: none;}
	.map-responsive{height: 350px;}
	.banner{padding:1.5em;}
	.docmanListDoc .btnDownload, .docmanListDoc .btnVisualizza {
		margin: 0!important;
	}
	
}
@media screen and (min-width: 768px) and (max-width: 991px){
	.iconSharePrint .Icon-share{font-size: 28px;}
	.iconSharePrint .Share-reveal{height: 45.59px;}
}
@media screen and (min-width: 992px) and (max-width: 1365px){
	.iconSharePrint .Icon-share{font-size: 28px;}
	.iconSharePrint .Share-reveal{height: 45.59px;}
}
.Skiplinks>li>a {
    background-color: #fff;
    color: #000;
}

@media(max-width: 767px) {
	.Header-logo img {
		height: 4.5rem !important;
		width: 4.5rem !important;
	}
	.hideme_mobile{
		display:none !important;
	}
	#banner .u-nbfc{
		width:90%;
	}
	#main{
		overflow: hidden;
	}
}

#jem .copyright{
	display:none !important;
}

.Header-language-other a{
	color:#00264d!important;
	padding:16px!important;
  }
  
.convertforms .cf-label .cf-required-label{
color: black !important;
}

.convertforms .cf-input:focus, .convertforms .cf-input:invalid:focus{
outline: 1px solid black !important;
}

.Button--info.is-pressed, .Button--info:active {
 	background-color: #002452 !important;
    color: #FFFFFF !important;
}

.convertforms.cf-success .cf-response {
	background-color: #002452;
}

.convertforms.cf-error .cf-response {
    background-color: #C00000;
}

.captionTable {
  text-align: left;
  padding-bottom: 20px;
  overflow: visible !important;
}

/*Chosen start*/

.input-prepend .chosen-container-single .chosen-single {
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}
.input-prepend .chosen-container-single .chosen-single-with-drop {
	-webkit-border-radius: 0 3px 0 0;
	-moz-border-radius: 0 3px 0 0;
	border-radius: 0 3px 0 0;
}
.input-append .chosen-container-single .chosen-single {
	-webkit-border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
}
.input-append .chosen-container-single .chosen-single-with-drop {
	-webkit-border-radius: 3px 0 0 0;
	-moz-border-radius: 3px 0 0 0;
	border-radius: 3px 0 0 0;
}
.input-prepend.input-append .chosen-container-single .chosen-single,
.input-prepend.input-append .chosen-container-single .chosen-single-with-drop {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.btn-group .chosen-results {
	white-space: normal;
}
select.chosen-done.invalid + .chosen-container.chosen-container-single > a.chosen-single,
select.chosen-done.invalid + .chosen-container.chosen-container-multi > ul.chosen-choices {
	border-color: #9d261d;
	color: #9d261d;
}
.well select,
.well .chosen-container {
	max-width: 100%;
}
.Form-field .chosen-container {
  background-color: white!important;
  /*border: 1px solid #ccc;*/
  border-radius: 0;
  box-sizing: border-box;
  font-size: inherit!important;
  margin: 0;
  padding: 0.5em;
}
.Form-field .chosen-container-multi .chosen-choices,
.Form-field .chosen-container-single .chosen-single {
  background: unset!important;
  border: 0!important;
  box-shadow: unset!important;
  font-size: inherit!important;
  margin: 0!important;
  padding: 0 !important;
}
.Form-field .chosen-container-single .chosen-single div b {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3Eexpand%3C/title%3E%3Cpath d='M3.733 6.133L0 9.866l16 16 16-16-3.733-3.733L16 18.4 3.733 6.133z'/%3E%3C/svg%3E");
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 1em;
}
.Form-field .chosen-container-single.chosen-with-drop .chosen-single div b {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3Ecollapse%3C/title%3E%3Cpath d='M28.267 25.867L32 22.134l-16-16-16 16 3.733 3.733L16 13.6l12.267 12.267z'/%3E%3C/svg%3E");
  background-position: 0;
}
/*Chosen end*/
/* ============================================================
   Focus visibile (WCAG 2.1 - SC 2.4.7, contrasto SC 1.4.11)
   Anello arancio (colore focus del toolkit) + bordo scuro
   esterno: visibile sia su fondi chiari che su fondi scuri.
   :focus-visible = solo navigazione da tastiera.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
	outline: 3px solid #ff8c00;
	outline-offset: 0;
	box-shadow: 0 0 0 5px #30373d;
}

/* Link immagine nelle card (banner, notizie, docman):
   - block + line-height 0: il box di focus segue l'immagine,
     non la riga di testo (era la "sottolineatura")
   - anello interno: non viene tagliato dai contenitori
     con overflow nascosto (u-nbfc) */
.item-image a {
	display: block;
	line-height: 0;
}
.item-image a:focus-visible {
	outline-offset: -5px;
	box-shadow: inset 0 0 0 2px #30373d;
}

/* Banner: .overlay-wrapper ha opacity 0.9 e crea uno stacking
   context che copre l'anello disegnato sul link contenitore.
   L'anello viene quindi disegnato anche sull'elemento in cima
   (figure/img), che non puo' essere coperto; il focus riceve
   inoltre la stessa opacita' piena dell'hover. */
.item-image a:focus-visible figure,
.item-image a:focus-visible > img {
	outline: 3px solid #ff8c00;
	outline-offset: -5px;
	box-shadow: inset 0 0 0 2px #30373d;
}
.item-image a:focus-visible .overlay-wrapper {
	opacity: 1;
}

/* I trigger accordion iniettati da IWT (span role="button" con
   classe c-hideFocus) hanno outline:none !important nel build:
   qui serve pari forza perche' l'indicatore di focus non deve
   mai perdere. */
[role="button"]:focus-visible,
.c-hideFocus:focus-visible,
.js-fr-accordion__header :focus-visible,
.js-fr-accordion__header:focus-visible {
	outline: 3px solid #ff8c00 !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 5px #30373d !important;
}

/* Trigger apri-chiudi del Treeview (menu trasparenza e menu hamburger). IWT li marca
   tutti con "js-Treeview-handler" e ne ha due varianti, che hanno lo stesso difetto:
   - "--standalone" (menu trasparenza): uno <span role="button"> in position:absolute
     con right:0, top:0, height:100%, che combacia con i bordi destro, superiore e
     inferiore del <li>;
   - "--default" (hamburger): l'<a role="button"> stesso, display:block, che riempie
     tutto il <li>.
   In entrambi i casi il <li> e' .Linklist li, che IWT fa overflow:hidden !important per
   contenere i float. L'anello di focus si disegna FUORI dal bordo, quindi finisce
   ritagliato: nel primo caso restava visibile il solo filo sinistro, nel secondo non
   restava niente (tutti e 4 i lati fuori).
   Disegnato dentro il box si vede tutto: con offset -3px l'arancio occupa gli stessi
   3px, ma verso l'interno; la box-shadow diventa inset e resta i suoi 2px oltre
   l'arancio, come fuori. Il chevron non viene coperto: e' un background da 18px
   centrato (--standalone) o un ::after appoggiato a destra (--default).
   Serve !important per PARI FORZA con [role="button"]:focus-visible qui sopra, che ha
   outline-offset:0 !important e ha la meglio anche sul rimedio gia' presente
   ".Linklist li > a:focus-visible" (che infatti qui non poteva funzionare). */
.Treeview .js-Treeview-handler:focus-visible {
	outline-offset: -3px !important;
	box-shadow: inset 0 0 0 5px #30373d !important;
}

/* Titolo dell'articolo in evidenza (carosello hero) in home. Il titolo e' troncato
   con -webkit-line-clamp (vedi piu' sopra .Hero-content h3 > a), che impone
   overflow:hidden sia sull'<a> sia sull'<h3> genitore, che hanno lo STESSO
   rettangolo. L'anello di focus disegnato FUORI dal box (outline-offset:0 +
   box-shadow esterna) cade quindi oltre il bordo dell'h3 e viene ritagliato su
   tutti e 4 i lati: il focus era quasi invisibile. Stesso rimedio del Treeview e
   di .item-image: anello DENTRO il box con outline-offset negativo e box-shadow
   inset, cosi' resta identico agli altri (arancio 3px + 2px scuri) ma non tagliato.
   (Il titolo era un <h2>: e' diventato <h3> con l'aggiunta dell'h2 nascosto di sezione.) */
.Hero-content h3 > a:focus-visible {
	outline-offset: -3px;
	box-shadow: inset 0 0 0 5px #30373d;
}

/* Riga documento DOCman: titolo (bottone accordion o testo) +
   pulsante Scarica/Visualizza affiancati. Ogni riga e' una scatola
   autonoma: bordo, padding e stati hover/aperto a tutta larghezza. */
.docman_item_row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 0.25rem;
}
.docman_item_row--bordered {
	border-bottom: 1px solid #d3d7db;
}
.docman_item_row .Accordion-header {
	flex: 1 1 auto;
	margin: 0;
	border: 0;
}
.docman_item_row .docman_item_title {
	flex: 1 1 auto;
}
/* Il bottone visibile è lo <span class="Button"> interno, ma il focus (e quindi l'outline) sta
   sull'<a>: con un padding qui l'outline restava staccato dal bottone e sbilanciato sulla riga.
   Senza padding i due box coincidono, l'outline segue il bottone e l'allineamento verticale lo
   dà il flex della riga (align-items:center). La spaziatura la mette già il padding del .Button. */
.docman_item_row .docman_item_download {
	flex: 0 0 auto;
	display: inline-block;
	margin-right: 0.5rem;
	margin-top: 0rem;
}
/* Hover e stato aperto: banda uniforme sull'intera riga;
   gli sfondi parziali interni (hover del trigger) vanno azzerati
   per non vedere la cucitura di due grigi diversi. */
.docman_item_row:hover,
.docman_item_row:has([aria-expanded="true"]) {
	background-color: #f2f4f6;
}
.docman_item_row:has([aria-expanded="true"]) {
	border-bottom-color: transparent;
}
.docman_item_row .Accordion-header,
.docman_item_row .Accordion-link,
.docman_item_row [role="button"] {
	background-color: transparent !important;
}

/* Disclosure nativa (sostituisce l'accordion iniettato da IWT,
   il cui roving tabindex rendeva i titoli non raggiungibili col Tab
   finche' non aperti col mouse): un vero <button> per riga,
   tutti normali tab stop. */
.docman_item_heading {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 500;
	color: #003569;
}
.docman_item_meta {
	margin: 0.2rem 0 0;
	font-size: 1.4rem;
	color: #3d454c;
}
.docman_item_details {
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0.5rem;
	font-family: inherit;
	font-size: 1.6rem;
	color: #003569;
	text-decoration: underline;
	cursor: pointer;
}
.docman_item_details:hover {
	text-decoration: none;
}

.bannergroup {
  padding-top:5px;
}