@charset "UTF-8";

:root { 	
	--font-family: arial, sans-serif;	
	--header-height: 3.5rem; 	
	--footer-height: 2rem; 
	--home-footer-height: 2rem;	
	--border-radius:9px;
	--form-background:#dfdfdf;
	--body-background:linear-gradient(90deg, rgba(180,207,222,1) 0%, rgba(222,235,247,1) 50%, rgba(180,207,222,1) 100%);
	--header-background: linear-gradient(to top, rgba(0, 103, 132,0.6),  rgba(0, 103, 132,0.8) , rgba(0, 103, 132,0.6));	
	--form-header-background: rgb(0, 103, 132);
	--footer-background: linear-gradient(to top, rgba(30, 30, 30, 0.55), rgba(30, 30, 30, 0.75),  rgba(30, 30, 30, 0.55));	
	--shadow-color:#000;
	--header-err-background:#FFC5C5;
	--input-background:white;
	--input-color:#111;
	--border-color:#555;
	--label-color:#1A365D;
	--list-block-shadow:#444;
}


*, *::after, *::before {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html, body{
	padding:0;
	margin:0;
	width:100vw;
	font-family: var(--font-family);
}


html {
	 font-size: clamp(10pt, calc(4px + 0.8vw), 16px); 		
}


body{
	padding-top:var(--header-height);
	min-width:100vw;
	background:var(--body-background);
}

header{
	height:var(--header-height);
	position:absolute;
	top:0;
	left:0;
	width:100vw;	
	background: var(--header-background);
    display:flex;
    align-items:center;  
    justify-content:space-between;
    gap:1rem;
    padding:0 3rem 0 1.4rem;    
	flex-wrap: wrap;	
}

main{	
	width:100mvw;
	/* min-width:360px; */
	height:calc(100vh - var(--header-height) - var(--footer-height));
	max-height:calc(100vh - var(--header-height) - var(--footer-height));
	overflow:auto; 
	padding:1rem 0 1rem 1rem;
	text-align:center;
}


footer {
	background: var(--footer-background);	
	color: white;
	height: var(--footer-height);
	display:flex;
	align-items: center;
	justify-content:center;	
	gap:1rem;
}



button{
	padding:0.1rem 1rem;
	font-size:1rem;
	color:black;
	outline: none;
	box-shadow: 1.5px 1.5px 1px var(--shadow-color);
}

button.home{
	background:#777;
	color:white;
	border-radius:4px;
	border:none;
	outline:none; 
	height:2rem;
	padding:0 4px 6px 4px;
	display:inline-flex;
	align-items:center;
}

button.home:hover{
	box-shadow:none;
}

button.arrow{
	background:#777;
	color:white;
	border-radius:4px;
	border:none;
	outline:none; 
	height:2rem;
	padding:0 4px 1px 4px;
	display:inline-flex;
	align-items:center;
	font-weight:bold;
}

button.arrow:hover{
	box-shadow:none;
}

.arrow span{
	font-size:2rem;
}

button.esteso{
	margin-right:0.3rem;
	margin-bottom:1rem;
	border-radius:3px;
	border:1px solid silver;
	height:2.5rem;
	display:inline-flex;
	align-items:center;	
}

button.esteso:hover{
	box-shadow:none;
}

.esteso span{
	font-size:2rem;
}

header div.titolo{
	letter-spacing: 0.12rem;
	font-size: 1.5rem;
	font-weight:bold;
	text-shadow: 2px 2px 3px #000;
	color:white;  
	display:flex;
	align-items:center;	
}

header img{
	max-width:2.4rem;	
	border-radius:0;
}


header > .material-symbols-outlined{
	font-size:2rem;
	cursor:pointer;
	text-shadow: 2px 2px 3px #000;
	color:white;  
}


footer a{
	color:white;
	font-size:0.9rem;
	letter-spacing:0.02rem; 
}

h1 {
	color: #1A365D;
	letter-spacing: 0.08rem;
	line-height: 2.5rem;
}

.flex{
	display:flex;
	align-items:center;
}


input[type=text], input[type=password], input[type=date], select, textarea {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	box-shadow: 0.15rem 0.092rem 0.1rem var(--shadow-color);
	font-size: 1.2rem;
	min-height: 2.5rem;
	padding-left:0.5rem;
}

.campo, .campo-str{
	display:inline-block;
	position:relative;
	vertical-align:top;
}

.campo{	
	margin: 0 0.2rem 1rem 0;
}

.campo-str{
	margin: 0 0.5rem 0 0;
}

.medio{
	width:24rem;
}

.piccolo{
	width:9rem;
}


.campo.flex{
	display:flex;
	align-items:center;
}

.campo.flex label{
	min-width:8rem;
}


.cell{
	display:inline-block;
	position:relative;	
	vertical-align:top;
}

.campo > p.err, .campo-str > p.err, p.err{
	padding:0.2em;
	color:black;
	background-color:#ffC0C0;
	text-shadow: 0px 1px #ccc;	
	border-radius: 4px;
	box-shadow: 0.15rem 0.092rem 0.1rem var(--shadow-color);
	min-width:90%;
	}
	
p.err{
	position:absolute;
	top:100%;	
	left:0;
	z-index:10;	
}


footer > div{
	position:relative;
}

.footer-info {
	position:absolute;
	bottom:2rem;
	background:#ddd;
	text-shadow:none;
	color:#222;
	border:1px solid silver;
	border-radius:0.3rem;
	overflow:hidden;
	box-shadow:2px 2px 2px #444;
	width:20rem;
	display:none;
} 

.footer-info .testa{
	text-align:right;
	background:#ccc;
	padding-right:0.5rem;
	line-height:1.2rem;
}

.testa span{
	cursor:pointer;
	font-weight:bold;
}

.footer-info .corpo{
	padding:1rem;
	line-height:1.5rem;
}
	

.text-box{
	background:white;
	width:50rem;
	border:3px ridge silver;
}


@media screen and (max-width:640px){
	html {
		font-size:10pt;}
	
	header {
	 padding:0 1rem 0 1rem;}
	
	button{
		padding:0.1rem 0.3rem;
		font-size:0.8rem;}
		
	main{padding:0;}
}