@charset "UTF-8";

:root{
	--menu-hover: linear-gradient(to top, rgba(0, 103, 132,0.8),  rgba(0, 103, 132,0.9) , rgba(0, 103, 132,0.8));
}

.parent {
    display:grid;    
    grid-template-columns: minmax(27rem, 11%) 1fr;  
    height:100%;   
    gap:1rem;   
 }

.parent h1{
	font-size:1.7rem;	
	padding-left:0.5rem;
}


.sinistra h1{
	display:flex;
	align-items: center;
	justify-content: space-between;
	padding-right:1rem;
	margin-bottom:0.5rem;
	height:3rem;
	border-radius: 0.3rem;
	width:98%;
	background:#ddd;
	color: #1A365D;
	font-size: 1.5rem;;
}

.sinistra h1:hover{
	color:white;
	background:var(--menu-hover);
	cursor:pointer;
	
}

.sinistra, .destra{
	height:100%;
	text-align:left;
	padding-left:0.5rem;
	background:#f0f0f0;
	max-height:calc(100vh - 6rem);
	overflow-y:scroll;
	
}

.sinistra{
	background:#f5f5f5;
	padding-top:1rem;
	
}

.destra{
	background:#fafafa;
	margin-right:1rem;
	padding:1.5rem 2rem 1rem 2rem;
	font-size:1.2rem;
	letter-spacing:0.03rem;
	line-height:1.8rem;	
	
}

.destra p{
	text-shadow:0px 0px 0px #000;
	margin-bottom:1rem;
	display:flex;
	align-items:center;
}

.destra p span{
	font-size:3rem;
	margin-right:1rem;
}

section.contenuto p span{
	font-size:inherit;
	margin-right:0;
}

.underline{
	text-decoration: underline;
}

section.contenuto p{
	display:block;
}



.destra h1{
	padding-left:0;
}


.destra  ul, .destra  ol {
	padding-left: 1rem;	
}

.destra li {
	padding: 0.2rem;
	display: flex;
	align-items: center;
	letter-spacing: 0.03rem;
	font-size: 1.1rem;	
}


.scheda li {	
	line-height:1.2rem;
	padding-bottom:1rem;
}

.corpo li a{
	font-size: 1.1rem;	
}

.scheda ul{
	margin-bottom:1rem;
}


.sinistra h2{
	cursor:pointer;
	border-top:1px solid #ddd;
}

.sinistra h2:hover{
	background:var(--menu-hover);
	color:white;
	text-shadow:none;
}


.flex{
	flex-wrap: wrap;
	gap:1.5rem;
	justify-content:flex-start;
	align-items:flex-start;
}

.flex > div {
	flex:0 0 26rem;	
}

.nascosta {
	visibility:hidden;
}

.scheda {
	border-radius:0.5rem;
	overflow:hidden;
	border-left:1px solid rgba(0, 103, 132, 0.85);
	box-shadow: 2px 2px 3px #333;
	padding-bottom:1rem;
}

.scheda .testa{
	background:rgba(0, 103, 132, 0.85);
	color:white;
	padding:0.3rem 1rem;
	text-shadow:1px 1px 3px #000;
}

.scheda li span{
	font-size:2.6rem;
	margin-right:1rem;
}

.scheda a{
	font-size:0.9rem;
}

.account-info{
	position:absolute;
	top:2.5rem;
	right:0.1rem;;
	width:18rem;
	background:white;	
	border-radius:0.3rem;
	border:1px solid rgb(0, 103, 132);
	box-shadow:2px 2px 2px #1A365D; 
	color:#1A365D; 
	overflow:hidden;
	display:none;
}

.account-box{
	position:absolute;
	display:flex;
	align-items:center;
	color:white;	
	right:2.5rem;
	top:0.7rem;
}

.account-box > span:first-child{
	text-shadow:1px 1px 3px #000; 
}

.account-info .testa{
	background:rgba(0, 103, 132, 0.75);
	color:white;
	padding:0px 0.5rem 0 0;
	text-align:right; 	
}

.account-info .corpo{
	padding:0.3rem 1rem;
	display:block;	
}

.account-info .corpo ul{
	 all: initial;
}

.account-info .corpo ul li{
	 all: initial;
	 font-size:0.9rem;
	 display:block;
	 margin-bottom:0.2rem;
}

label{
	color:var(--label-color);
	font-weight:bold;
}

.material-symbols-outlined.small{
	font-size:1.4rem;
	font-weight:bold;
	cursor:pointer;
}

.material-symbols-outlined.big{
	font-size:2.2rem;	
	cursor:pointer;
}

.material-symbols-outlined.home{
	font-size:2.2rem;	
	cursor:pointer;
	padding-top:0.5rem;
	text-shadow:1px 1px 5px #333;
}


button.small{
	font-size:0.8rem;
	padding:0 0.5rem;
}

.medio{
	width:11.6rem;
}

.lunghissimo{
	width:25rem;
}

ul.large li{
	font-size:1.2rem;
}


li.verde{
	background-color:#B6DF89;
}

li.rosso{
	background-color:#FF9F9F;
}

li div {
	padding-left:1rem;
}

.text-box li {
	border-bottom:1px solid #ddd;
}

div.video-box{
	position:absolute;
	top:0.1rem;
	z-index:10;
	color:white;
	font-weight:bold;
	cursor:pointer;
	background:#666;
	line-height:1rem; 
}



.sezione h2{
	line-height: 1.3rem;
	display:flex;
	justify-content: space-between;
	align-items: center;
	border:2px solid rgb(75, 125, 126);
	border-radius:0.6rem;
	box-shadow: 1px 1px 2px silver;
	width:98%;			
	margin-bottom:0.2rem;	
	padding:0.5rem 0.3rem 0.7rem 1rem;
	color:rgb(0, 64, 128);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 500;		
	font-size:1.3rem;			
}

.sezione h2 span:last-child{
	font-size:2.3rem;
	font-weight: bold;
	background-color:#ddd;
	border-radius: 16%;
	color:rgb(0, 64, 128);
	box-shadow: 1px 1px 1px silver;
}

.sezione h2 span:last-child:hover{
	background-color:#fff;


}

div.capitolo {		
	border-left:1px solid rgb(75, 125, 126);
	border-right:1px solid rgb(75, 125, 126);
	border-bottom:1px solid rgb(75, 125, 126);
	width:90%;
	margin:auto;
	margin-bottom:1rem;
	border-bottom-right-radius: 0.6rem;
	border-bottom-left-radius: 0.6rem;
	line-height: 1.8rem;
	font-size:1.2rem;
	padding-left:0.5rem;
}

div.paragrafo{
	font-size:1.1rem;
	padding:0.3rem 0.2rem 0.3rem 0.2rem;	
	line-height: 1.3rem;	
	margin-left:0.5rem;
	margin-bottom:0.2rem;
	display: flex;
	align-items: center;		
	width:96%;
	font-weight: 400;
	border-bottom:1px solid silver;
}

div.paragrafo:last-child{
	border:0;
	border-bottom-left-radius:0.4rem;
	border-bottom-right-radius:0.4rem;
}

div.paragrafo:hover{
	background:var(--menu-hover);
	color:white;
	cursor:pointer;
}
	
h2.scelto, .scelto, h1.scelto {
	background:var(--menu-hover);
	color:white;
}	

.capitolo.chiuso{
	display:none;
}

.highlight{
	padding:1rem;
	background-color:#f0f0f0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	border-radius: 3px;
	box-shadow: 2px 2px 2px #666;
	font-weight: 500;
}

h4{
	padding:0.5rem;
	background-color:#EAF2FA;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	border-radius: 3px;
	box-shadow: 1px 1px 1px #666;
	font-weight: 500;
}

div.video-box{
	position:relative;
	width:53rem;
	min-height:30rem;
	border:3px ridge silver;
	box-shadow:2px 2px 2px #333;
}

div.video-box iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	border:0;
}