/* CSS GENERALE */

/* importo url da google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

*				{ font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
html			{ font-size: 10px; }

/* generale body */
body, header,
nav, section,
footer, div,
input, textarea	{ /*transition: 0.5s ease-in-out;*/ }
body			{ width: 100%; height: 100vh; margin: 0; padding: 0; background: var(--bg); color: var(--testo); }
/*
.container		{ position: relative; width: 100%; height: calc(100% - var(--headerHeight) - var(--bannerHeight)); padding-top: 2rem; text-align: center; overflow-Y: scroll; }
.container--adm	{ position: relative;  width: 100%; height: calc(100% - var(--headerHeight)); padding-top: 2rem; text-align: center; overflow-Y: scroll; }
.cont_abs		{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 100rem; margin: auto; text-align: center; }
*/

/* regole utili per l'allineamento di testo o contenuti */
.center			{ float: none; text-align: center; margin: auto; }
.left			{ float: left; }
.right			{ float: right; }
.text-center	{ text-align: center !important; }
.text-left		{ text-align: left !important; }
.text-right		{ text-align: right !important; }
.text-justify	{ text-align: justify; }
.capitalize		{ text-transform: capitalize; }

/* dimensione campi */
.gg-mm			{ width: 2rem; text-align: center; } 	/* per campi giorno e mese */
.aaaa			{ width: 2.5rem; text-align: center; }	/* per campi anno */
.w5em			{ width: 5rem; }
.w10em			{ width: 10rem; }
.w15em			{ width: 15rem; }
.w20em			{ width: 20rem; }
.w25em			{ width: 25rem; }
.w30em			{ width: 30rem; }
.w40em			{ width: 40rem; }
.w50em			{ width: 50rem; }
.w60em			{ width: 60rem; }
.w10			{ width: 10%; }
.w20			{ width: 20%; }
.w25			{ width: 25%; }
.w30			{ width: 30%; }
.w33			{ width: 33%; }
.w40			{ width: 40%; }
.w50			{ width: 50%; }
.w60			{ width: 60%; }
.w70			{ width: 70%; }
.w75			{ width: 75%; }
.w80			{ width: 80%; }
.w90			{ width: 90%; }
.w100			{ width: 100%; }

/* limite di linee dei campi visualizzabili */
.limit-line		{ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.limit-1		{ -webkit-line-clamp: 1; /* 1 rigo visualizzato */ }
.limit-2		{ -webkit-line-clamp: 2; /* 2 righe visualizzate */ }
.limit-3		{ -webkit-line-clamp: 3; /* 3 righe visualizzate */ }
.limit-4		{ -webkit-line-clamp: 4; /* 4 righe visualizzate */ }
.limit-5		{ -webkit-line-clamp: 5; /* 5 righe visualizzate */ }

/* visibilità elementi */
.no-desk		{ display: none; }
.only-desk		{ display: block; }
.only-cell		{ display: none; }
.desk-inline	{ display: inline; }
.cell-inline	{ display: none; }
.block			{ display: block !important; }
.hidden			{ display: none !important; }

/* scrollbar */
/* barra generale */
::-webkit-scrollbar					{ width: 1.2rem; height: 1rem; }
/* track */
::-webkit-scrollbar-track			{ background: var(--grey); border-radius: 1rem; }
/* barra */
::-webkit-scrollbar-thumb			{ background: var(--dark-grey); border-radius: 1rem; opacity: 0.5; }
/* barra con mouse over */
::-webkit-scrollbar-thumb:hover		{ background: var(--blu-L); }
::-webkit-scrollbar-corner			{ background: none; }

/* loading */
.loader				{ display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background: none; z-index: 1500; }
.loader>div			{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; padding: 1rem; background: none; border-radius: .5rem; text-align: center; z-index: 500;
						/*-webkit-box-shadow: 0px 0px 28px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 28px 1px rgba(0,0,0,0.75); box-shadow: 0px 0px 28px 1px rgba(0,0,0,0.75);*/ }
.loader img			{ display: inline-block; width: 10rem; height: auto; }
.loader p			{ font-size: 1.8rem; font-weight: bold; text-shadow: 0px 0px 28px 1px rgba(0,0,0,0.75); }

/* finestra popup */
.openPopup			{ cursor: pointer; }
.fade				{ position: fixed; left: 0; top: 0; z-index: 3000; width: 100%; height: 100%; display: none; transition: 0.5s ease-in; }
#popup				{ display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 90%; height: auto; max-height: 100%;
					  background: var(--light); font-size: 1rem; border-radius: 2rem; padding-bottom: 5rem;
					  box-sizing: border-box; overflow: hidden; z-index: 3500; transition: 0.5s ease;
					  -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35); 
					  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35); }
.chiudiPopup		{ float: right; text-align: right; font-size: 2rem; cursor: pointer; color: var(--fas); }
.chiudiPopup:hover	{ color: var(--rosso); }
.fixed_button		{ position: absolute; bottom: 0rem; width: calc(100% - (4.8rem * 2)); height: 5rem; line-height: 5rem; box-sizing: border-box; z-index: 200; }

@-webkit-keyframes fadeInDown {
	0%				{ opacity: 0;	-webkit-transform: translate3d(0, -100%, 0);	transform: translate3d(0, -100%, 0); }
	0%				{ opacity: 1;	-webkit-transform: translate3d(0, 0, 0);		transform: translate3d(0, 0, 0); }
	80%				{ opacity: 1;	-webkit-transform: translate3d(0, 0, 0);		transform: translate3d(0, 0, 0); }
	100%			{ opacity: 0;	-webkit-transform: translate3d(0, -100%, 0);	transform: translate3d(0, -100%, 0); }
}

@keyframes fadeInDown {
	0%				{ opacity: 0;	-webkit-transform: translate3d(0, -100%, 0);	transform: translate3d(0, -100%, 0); }
	20%				{ opacity: 1;	-webkit-transform: translate3d(0, 0, 0);		transform: translate3d(0, 0, 0); }
	80%				{ opacity: 1;	-webkit-transform: translate3d(0, 0, 0);		transform: translate3d(0, 0, 0); }
	100%			{ opacity: 0;	-webkit-transform: translate3d(0, -100%, 0);	transform: translate3d(0, -100%, 0); }
}

@media only screen and ( max-width: 650px) {
	.only-desk		{ display: none !important; }
	.only-cell		{ display: block !important; }
}