@import url('https://fonts.googleapis.com/css?family=Lato');

:root, :root:not(.style-scope) { /* edge richiede l'aggiunta di :not(.style-scope) */
	--colore-primario: #0066CC; /* blu italia pagopa */
	/*--colore-primario: #5088c6; il colore della scritta yamme nel logo */ 
	--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-font-family: "Lato", sans-serif;*/
 --lumo-header-text-color: var(--colore-primario);
 background-color: var(--lumo-shade-5pct);
}

.v-loading-indicator {
    background-color: yellowgreen !important;
}

/*
[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;
}

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

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

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) { /* edge richiede l'aggiunta di :not(.style-scope) */
	font-weight: unset;
}

h1 {
	font-weight: bold;
   /*margin-top: unset;*/
  }
 
.riquadri [class^="col-"] {
  margin-bottom: 30px;
}
.riquadro {
    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;
    cursor: pointer;
}
 
.visita-comune-facile {
	text-align: center;
	margin-top: 50px;
}

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

.nota {
	font-size: 0.8em;
	/*float: right;*/
}

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

dl {
  display: flex;
  flex-flow: row wrap;
  border: solid var(--colore-primario);
  border-width: 1px 1px 0 0;
}
dt {
  flex-basis: 20%;
  min-width: 6em;
  padding: 2px 4px;
  background: var(--colore-primario);
  text-align: right;
  color: white;
}
dd {
  flex-basis: 70%;
  flex-grow: 1;
  margin: 0;
  padding: 2px 4px;
  border-bottom: 1px solid var(--colore-primario);
}

[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;
}
@media(max-width: 500px) {
  h4[slot="navbar"]:first-of-type {
    display: none; /* non c'è spazio per il titolo della pagina */
	}
}

/* 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;
    font-weight: bold;
}
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"] iron-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]) iron-icon {
	color: var(--lumo-tertiary-text-color);	
}


/* 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;
	}
}