/* Variables init */
:root {
	--bg-body: #f4f4f4;
	--bg-gradientA: #a3fccf;
	--bg-gradientZ: rgb(163 252 207 / 0%);
	--bg-header: #ffffff;
	--bc-header: #95c8f0;
	--bc-header-title: #da8044;
	--cl-body: #3f3f3f;
	--cl-body-title: #4caac9;
	--ac-body: #4caac9;
	--cl-gradientA: #a3fccf;
	--cl-gradientZ: #63bfed;
	--bc-footer: #95c8f0;
	--bg-footer: #ededed;
	--ac-footer: #4caac9;
	--ah-footer: #da8044;
}

/* ATTIVARE BLOCCO SE SI VUOLE CUSTOMIZZARE IL TEMPLATE */
/*
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
*/

HTML {
	height: 100%;
}

BODY {
	display: flex;
	height: 100%;
	background-color: var(--bg-body);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: clamp(10px, 1vw, 16px);
	font-weight: 300;
	color: var(--cl-body);
}

#header-login {
	background-color: var(--bg-header);
	border-bottom: 4px solid var(--bc-header);
	top: 0;
	position: absolute;
	width: 100%;
	height: 10rem;
}

#header-login .image {
	position: absolute;
	top: 1rem;
	left: 3rem;
	width: 6rem;
}

#header-login .image img {
	width: 100%;
}

#header-login .title h1 {
	font-size: clamp(32px, 4vw, 40px);
	font-weight: 700;
    color: var(--bc-header-title);
	position: absolute;
    left: 50%;
    top: 50%;
	webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

div.page-login {
	width: 40rem;
	position: absolute;
	top: 50vh;
	left: 50%;
	webkit-transform: translateY(-25vh) translateX(-50%);
	-ms-transform: translateY(-25vh) translateX(-50%);
	transform: translateY(-25vh) translateX(-50%);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
div.page-login fieldset legend {
	text-align: center;
	font-weight: 600;
	color: var(--cl-body-title);
}
div.page-login fieldset input.form-control {
	padding: 1rem 0.75rem;
}
div.page-login fieldset a {
	color: var(--ac-body);
	text-decoration: none;
}
div.page-login fieldset a:hover {
	text-decoration: underline;
}
div.page-login button.btn-block {
	width: 100%;
	padding-top: 0.25rem;
    padding-bottom: 0.25rem;
	/*border-radius: 1rem;*/
	/*text-transform: uppercase;*/
	background-color: #248eea;
    background-image: linear-gradient(to bottom, #2990EA, #208be9);
    border: 1px solid #1476cc;
    box-shadow: rgba(0,0,0,0.2) 0 1px 2px 0;
    color: #fff;
    text-shadow: #1476cc 0 -1px 1px;
}
div.page-login button.btn-block:hover {
	background-color: #1681df;
    background-image: linear-gradient(to bottom, #1684e3, #157eda);
}
div.page-login p.lost-pwd {
	text-align: left;
	padding-top: 0.25rem;
}

button.g-recaptcha, div.grecaptcha-badge {
	bottom: 50px!important;
}

div#informativa {
	position: absolute;
	top: 24vh;
	height: 70vh;
}
div#informativa div.testo-informativa {
	overflow: auto;
}
div#informativa .btn {
	width: 10vw;
}

#footer-login {
	background-color: var(--bg-footer);
    border-top: 4px solid var(--bc-footer);
    height: 5vh;
    padding-top: 1vh;
	font-size: clamp(9px, 0.8vw, 14px);
}

#footer-login a {
	color: var(--ac-footer);
	text-decoration: none;
}

#footer-login a:hover {
	color: var(--ah-footer);
	text-decoration: none;
}