/* Contenitore SVG e tabella */
#svg_table_container {
	display: flex;
}
#svg {
	position:relative;
	flex-basis: 100%;
}
#svg > div:first-child {
	text-align:center;
	min-height:70px;
}

#svg svg {
	margin:2em 0;
}
#svg #Terra {
	opacity:0 !important;
}
#svg #Cielo {
	fill:var(--grigiochiaro);
	opacity:0.7 !important;
}
#svg #Prato {
	fill:var(--verde);
	opacity:0.8 !important;
}

/* Si attiva con JS e mostra info app sopra SVG */
#info_app {
	display:none;
	justify-content:center;
	align-items:center;
	text-align:center;
	min-height:70px;
}
#info_app > div {
	padding:0.1em 2em;
	color: var(--bianco);
}
#prato {
	position: relative;
}

/* Sopra 1024px */
@media only screen and (min-width: 1024px) {
	/* Divisore documenti a destra della tabella */
	#docs {
		flex:1;
		margin-left:2vmin;
	}
	
	/* Tabella a sx grande 66% del div */
	#app {
		flex: 2;
	}
}
@media only screen and (max-width: 1023px) {
	/* Tabella larga al 100% */
	#app {
		flex-basis: 100%;
	}
	/* blocco documenti sotto tabella largo 100% */
	#docs {
		flex-basis: 100%;
		margin-top: 2em;
	}
}
@media only screen and (min-width: 769px) {
	/* Schermo > 769px taglia per riga */
	#svg_table_container {
		flex-flow: row wrap;
	}
	#svg {
		margin-top:1em;
	}
	/* Blocco documenti blu sul lato */
	#docs {
		padding:1.5vh;
		background:var(--bluchiaro);
		color:var(--bianco);
	}
}

/* Nascondo SVG sotto i 769px */
@media only screen and (max-width: 768px) {
	/* Schermo piccolo inverto ordine colonne */
	#svg_table_container {
		flex-direction:column-reverse;
	}
	/* Tabella con scritta + piccola */
	#app table {
		font-size:80%;
	}
	/* Nascondo info varie non servono x svg */
	#info_svg, info_app {
		display: none !important;
	}
	/* Poiché è column-reverse l'order è al contrario
	*  tabella app in cima, poi SVG e in fondo documenti */
	#svg {
		margin:0;
		order: 2;
	}
	#app {
		order: 3;
	}
	#docs {
		order: 1;
	}
}

#app {
	background:var(--grigio);
	color:var(--bianco);
	padding:1.5vh;
}

#app > div:nth-child(2) {
	display: flex;
	justify-content: space-evenly;
	flex-flow: row wrap;
}

#app table {
	width: 100%;
	margin:1.5vh 0;
	border-collapse: collapse;
}
#app table th,
#app table td {
	padding:0 2%;
	text-align: center;
}
#app table td,
#app input[type="button"] {
	cursor:pointer;
}
#app input[type="button"] {
	margin-bottom:4%;
}
#app input[type="button"]:hover {
	background-color:var(--giallochiaro);
}
#app table td a {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	display:block;
	max-width: 35%;
    margin: auto;
}
#app table td a:hover {
	text-decoration: none;
}

td[id^="stato"] > span:last-child {
	display:none;
}

/* Nascondo colonna casa */
#app .casa {
	display:none;
}
/* Di base nascondo casa B */
#app .casa_B {
	display:none;
}
/* Bottone PerSempre A attivo e background app. attivo su tabella */
.show_casa_A_on, .app_attivo_A {
	background-color: var(--rossochiaro);
	color: var(--bianco);
}
/* idem per B */
.show_casa_B_on, .app_attivo_B {
	background-color: var(--turchese);
	color: var(--bianco);
}

/* Colori normali appartamenti */
.app_normal_A_front {
	fill: var(--rossochiarissimo) !important;
	opacity: 0.8 !important;
}
.app_normal_A_side {
	fill: var(--rossochiaro) !important;
	opacity: 0.7 !important;
}
.app_normal_A_top {
	fill: var(--rosso) !important;
	opacity: 1 !important;
}
.app_normal_B_front {
	fill: var(--turchese) !important;
	opacity: 0.7 !important;	
}
.app_normal_B_side {
	fill: var(--bluchiaro) !important;
	opacity: 0.8 !important;	
}
.app_normal_B_top {
	fill: var(--blu) !important;
	opacity: 1 !important;	
}

/* Colore appartamento attivo in SVG casa A */
.app_on_A_front {
	fill: var(--rossoliberofront) !important;
	opacity: 0.8 !important;
}
.app_on_A_side {
	fill: var(--rossoliberoside) !important;
	opacity: 0.9 !important;
}
.app_on_A_top {
	fill: var(--rossoliberotop) !important;
	opacity: 1 !important;
}
/* Colore appartamento attivo in SVG casa B */
.app_on_B_front {
	fill: var(--bluliberofront) !important;
	opacity: 0.8 !important;	
}
.app_on_B_side {
	fill: var(--bluliberoside) !important;
	opacity: 0.8 !important;	
}
.app_on_B_top {
	fill: var(--bluliberotop) !important;
	opacity: 1 !important;	
}

/* Colore appartamento attivo già riservato SVG */
.app_on_O_A_front,
.app_on_O_B_front{
	fill: var(--grigiochiaro) !important;
	opacity: 0.7 !important;	
}
.app_on_O_A_side,
.app_on_O_B_side{
	fill: var(--grigiomedio) !important;
	opacity: 0.8 !important;
}
.app_on_O_A_top,
.app_on_O_B_top{
	fill: var(--grigio) !important;
	opacity: 1 !important;	
}

/* Tutti gli elementi appartamento hanno cursore pointer */
g[id*="_App"] {
	cursor: pointer;
}

#docs > a {
	display:flex;
	text-decoration:none;
	color:inherit;
	margin-bottom:2%;
}
#docs > a img {
	max-height:100%;
}
#docs > a > div:first-child {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	flex-basis: 15%;
}
#docs > a > div:last-child {
	display:inline-block;
    white-space:nowrap;
    overflow:hidden;
	text-overflow:ellipsis;
	flex-basis:85%;
}
#docs .sub_titles {
	padding-bottom:1em;
	margin-top:2.5em;
}
/* Tolgo margine eccessivo prima categoria documenti */
#docs > div:first-child {
	margin-bottom:-1.5em;
}