/* font tratta dal sito uniacque */
@font-face {
	font-family: "filson-pro";
	src: url("https://use.typekit.net/af/c12453/0000000000000000000157bf/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/c12453/0000000000000000000157bf/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/c12453/0000000000000000000157bf/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 700;
}

:root, :root:not(.style-scope) { /* edge richiede l'aggiunta di :not(.style-scope) */
	--colore-primario: #009ED6; /* blu uniacque */
	--colore-secondario: white;
	/* NOTA: si può creare un tema custom usando https://demo.vaadin.com/lumo-editor/ */
	--lumo-border-radius: 0.5em;
	--lumo-primary-color: var(--colore-primario);
	--lumo-primary-text-color: var(--lumo-primary-color);
	/*--lumo-font-family: "Montserrat", sans-serif;*/
	--lumo-header-text-color: #194976;
	--lumo-required-field-indicator: "⁎"; /* se non definito usa "•" */
}

.v-loading-indicator {
	background-color: #80d6f7 !important;
}

#CookiebotWidget {
	bottom: 17px !important; /* perchè non rispetta le impostazioni del sito quando larghezza minore di 600px */
}

/*
[class^="container"] {
    border: 3px dashed green;
}
.row {
    border: 2px dotted gray;
}
[class^="col-"] {
    border: 2px dashed burlywood;
}
*/

vaadin-button {
	box-sizing: border-box; /* ripristina un valore sovrascritto da bootstrap */
	cursor: pointer;
}

vaadin-button vaadin-icon {
	margin-top: -4px; /* altrimenti è troppo in basso rispetto al testo */
}

vaadin-button[theme~="tertiary"] {
	margin: 0px;
}

[slot="drawer"] iron-icon, [slot="drawer"] vaadin-icon {
	box-sizing: content-box; /* ripristina un valore sovrascritto da bootstrap */
}

.container, .container-fluid {
	box-sizing: border-box; /* ripristina un valore sovrascritto da AppLayout */
}

.container {
	padding-top: var(--lumo-space-l);
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-family: 'filson-pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	font-weight: 700;
	font-style: normal;
}

h4.azzurro {
	color: var(--colore-primario);
}

/*
edge richiede l'aggiunta di :not(.style-scope) 
 
h2, h3, h4, h5, h6, h2:not(.style-scope), h3:not(.style-scope), h4:not(.style-scope), h5:not(.style-scope), h6:not(.style-scope) {  
	font-weight: unset;
}

h1 {
	font-weight: bold;
}

h5, h6 {
	color: black;
}
*/

.cliccabile {
	cursor: pointer;
}

.riquadri [class^="col-"] {
	margin-bottom: 30px;
}

.riquadro {
	margin-top: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	height: 100%;
	background-color: white;
	border-radius: var(--lumo-border-radius);
}

.riquadroVideo {
	margin-top: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	height: 100%;
	background-color: white;
	border-radius: var(--lumo-border-radius);
}

.visita-comune-facile {
	text-align: center;
	margin-top: 50px;
}

.versione {
	font-size: 0.8em;
	position: fixed;
	bottom: 0;
	right: 10px;
	background: white;
}

.feature-icons {
	/*width: 800px;*/
	clear: both;
	display: block;
	margin: 15px 0;
	max-width: 100%;
}

dl {
	border: 1px solid #bdc8ca;
	background-color: #f7fafa;
	margin-bottom: 2em;
}

dt,
dd {
	box-sizing: border-box;
	padding: 3px 8px;
}

dd ~ dt,
dd ~ dd {
	border-top: 1px solid #bdc8ca;
}

dt {
	float: left;
	width: 30%;
	padding-bottom: 0;
}

dd {
	margin-left: 30%;
	border-left: 1px dotted #bdc8ca;
	background-color: #fff;
}

dd:after {
	content: "";
	display: block;
	clear: both;
}

/*dt*/
.row2 + dd:after {
	content: none;
}


[highlight] {
	color: var(--colore-primario);
}

/* barra di navigazione */
img[slot="navbar"] {
	border-radius: 100%;
	margin: 0 var(--lumo-space-m);
	/*margin-left: auto;*/
	width: var(--lumo-size-s);
}

/*
h4[slot="navbar"]:first-of-type {
    min-width: 15em; /* per evitare che la posizione del conto si sposti orizzontalmente al cambio pagina * /
}*/
h4[slot="navbar"]:not(:first-of-type) {
	margin-left: auto;
	padding-left: 0.5em;
}

/* nasconde il titolo della pagina quando non c'è spazio
@media(max-width: 500px) {
  h4[slot="navbar"]:first-of-type {
    display: none;
  }
}*/
@media (max-width: 500px) {
	h4[slot="navbar"] {
		font-size: 0.8em;
	}
}

/* menu laterale */
.testata {
	align-items: center;
	padding: 16px 8px;
	border-bottom: 1px solid lightgray;
}

.testata img {
	width: 30%;
	padding-right: 8px;
}

.testata h3 {
	display: contents;
}

ul[slot="drawer"] {
	font-size: var(--lumo-font-size-s);
	font-weight: 500;
	list-style-type: none;
	padding-left: 0;
}

ul[slot="drawer"] a {
	padding: 8px 8px 8px 16px;
	/*
	xpadding-left: 24px;
	xmargin-left: -16px;
	*/
	display: block;
}

ul[slot="drawer"] a:hover {
	background-color: var(--lumo-contrast-5pct);
}

ul[slot="drawer"] vaadin-icon {
	padding-right: 8px;
	height: var(--lumo-icon-size-s);
	width: var(--lumo-icon-size-s);
	vertical-align: text-bottom;
}

ul[slot="drawer"] a:not([highlight]) vaadin-icon {
	color: var(--lumo-tertiary-text-color);
}

vaadin-select[slot="drawer"] {
	margin: var(--lumo-space-l);
	margin-top: auto;
}


/* workaround per Edge */
@supports (-ms-ime-align: auto) {
	/*
	[part='navbar'].vaadin-app-layout {
		background: var(--colore-primario, black);   
	}	
	*/
	[part='drawer'] [highlight] {
		color: var(--colore-primario);
	}

	#table {
		min-height: 20em;
	}
}

/* workaround per IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	img[slot="navbar"] {
		width: 30px;
	}

	#table {
		min-height: 20em;
	}
}

ol.conti {
	list-style-type: none;
	padding: 0;
}

ol.conti li {
	padding: 1em 0;
}

.bordo {
	border: 1px solid var(--colore-primario);
	padding: 0 1em 1em 1em;
	border-radius: var(--lumo-border-radius);
	box-sizing: border-box;
}

.legenda {
	padding: 0 2em 1em 2em;
	font-size: 80%;
}

.avviso {
	background-color: lightyellow;
	border-radius: var(--lumo-border-radius);
	padding: var(--lumo-space-l);
	margin: var(--lumo-space-l);
	border: 1px solid var(--lumo-header-text-color);
}

.informazioni {
	background-color: #73c6ed66;
	border-radius: var(--lumo-border-radius);
	padding: 1em;
	margin: 0 1em;
}

.errori {
	font-style: italic;
	margin-top: 0;
	padding: 0 1em;
	font-size: 90%;
}

.contenitore {
	padding: 1em 1em 1em 1em;
	box-sizing: border-box;
	margin-top: 10px;
}

.rigacheckbox {
	margin-left: 0;
	margin-top: 10px;
}

vaadin-checkbox.invalid {
	background: var(--lumo-error-color-10pct);
}

vaadin-checkbox.required label::after {
	content: var(--lumo-required-field-indicator, "•");
	color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
	padding-left: 0.5em;
}

vaadin-checkbox.invalid label::after {
	color: var(--lumo-error-text-color);
}

/*****************************************************************/

/*
esempio
<div style="display: flex;">
    <div >testo 1</div>
    <div >testo 2</div>
</div> 
*/

.stepper-wrapper {
	margin-top: auto;
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
}

.stepper-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
}

.stepper-item .step-counter {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ccc;
	margin-bottom: 6px;
}

.stepper-item .step-name {
	text-align: center;
	width: 120px;
}

.stepper-item::before {
	position: absolute;
	content: '';
	border-bottom: 2px solid #ccc;
	align-items: flex-start;
	width: 100%;
	top: 20px;
	left: -50%;
	z-index: 2;
}

.stepper-item::after {
	position: absolute;
	content: '';
	border-bottom: 2px solid #ccc;
	width: 100%;
	top: 20px;
	left: 50%;
	z-index: 2;
}

.stepper-item.completed::after {
	position: absolute;
	border-bottom: 2px solid var(--lumo-header-text-color);
	align-items: flex-start;
	color: var(--colore-secondario);
	width: 100%;
	top: 20px;
	left: 50%;
	z-index: 3;
}

.stepper-item.completed::before {
	position: absolute;
	content: '';
	border-bottom: 2px solid var(--lumo-header-text-color);
	align-items: flex-start;
	color: var(--colore-secondario);
	width: 100%;
	top: 20px;
	left: -50%;
	z-index: 2;
}

.stepper-item:first-child::before {
	content: none;
}

.stepper-item:last-child::after {
	content: none;
}


.stepper-item.active, .stepper-item.rifiutata, .stepper-item.evasa {
	font-weight: bold;
}

.stepper-item.active .step-counter, .stepper-item.rifiutata .step-counter {
	background-color: var(--colore-primario);
	color: var(--colore-secondario);
}

.stepper-item.disactive .step-counter {
	color: rgb(128, 128, 128);
}

.stepper-item.completed .step-counter {
	background-color: var(--lumo-header-text-color);
	color: var(--colore-secondario);
}

.stepper-item.rifiutata .step-counter {
	background-color: red;
	font-weight: bold;
}

.stepper-item.evasa .step-counter {
	background-color: #29a64b;
	color: var(--colore-secondario);
	font-weight: bold;
}

@media screen and (max-width: 576px) {
	.stepper-wrapper {
		margin-top: auto;
		justify-content: space-between;
		margin-bottom: 20px;
		display: block;
	}

	.stepper-item {
		/*font-size: 12px;*/
		position: relative;
		align-items: center;
		margin-right: 25px;
		display: flex; /* testo visualizzato accanto a bollo*/
		flex-direction: row;
		z-index: 1;
	}

	.stepper-item .step-name {
		margin-left: 10px;
		text-align: left;
	}

	.stepper-item::before {
		content: none;
	}

	.stepper-item::after {
		content: none;
	}

	.stepper-item.completed::after {
		content: none;
	}

	.stepper-item.completed::before {
		content: none;
	}
}