@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
/*@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');*/
/*@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0")*/
@import url("../icone/node_modules/material-symbols/index.css");

* {
	font-family: arial;
	font-size: 17px;
	outline: none;
}

*:not(.schede, .proforma) {
	transition: all 0.3s linear;
}

#messaggio_noip {
	position: fixed;
	top: 150px;
	right: 50px;
	background-color: #ff0000;
	color: #fff;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 #4f4f4f;
	border: none;
	font-weight: bold;
}

.glassy {
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 2px );
  -webkit-backdrop-filter: blur( 2px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

/*body scrollbar a destra*/
body::-webkit-scrollbar {
    display: none;
}

/*icone*/
footer .fas, header .fas {
	font-size: 33px !important;
}

.fas {
	font-size: 33px;
	transition: all 0.3s ease-in-out;
}

.fas:hover {
	color: #ff0000 !important;
}

svg {
	height: 80%;
	width: 80%;
}

.boxes .fas, .boxes .far,
.boxes .material-icons-outlined,
.boxes .fa-solid {
	color: #fff;
	text-align: center;
	font-size: 75px;
}

.boxes .reversed_filter {
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(53deg) brightness(101%) contrast(104%);
}

.boxes .fas:hover, .boxes .far:hover {
	color: #fff !important;
}

#cerca .fas {
	font-size: 20px;
}

table .fas, table .far {
	font-size: 20px;
}

body {
	margin: 0px;
	background-color: #e8f3ff;
	zoom: 0.8 !important;
	/*prove magari da rimuovere*/
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

input[type="submit"] {
	cursor: pointer;
}

/* HEADER */

header {
	height: 60px;
	background-color: #005691; /*pre colore 3C8DBC*/
	box-shadow: 0px 0px 10px 4px #4f4f4f;
	position: fixed;
	width: 100%;
	top: -100px;
	z-index: 999999999;
	text-align: center;
	padding-top: 100px;
}

#headermargin {
	margin-bottom: 120px;
}

header a {
	color: #fff;
	margin: 0px;
	padding-top: 17px;
	font-size: 25px;
	padding-left: 20px;
	padding-right: 20px;
}

header a, header a:link, header a:visited, header a:checked {
	text-decoration: none;
	color: #fff !important;
}

#headercontainer {
	text-align: center;
	width: 100%;
	margin-top: 15px;
}

#headerleft {
    float: left;
    width: 420px;
	text-align: left;
}

#headercenter {
    display: inline-block;
    margin: 0 auto;
    width: 170px;
}

#headerright {
    float: right;
    width: 420px;
    text-align: right;
}

#headermobile {
    display: none;
 	text-align: left;
}

#headermobile div {
	display: inline-block;
}

#headermobile a {
	font-size: 30px;
	position: relative;
	top: 12px;
}

#headermobilemenu {
	float: right;
	margin: 15px 15px 0 0;
	color: #fff;
	cursor: pointer;
}

#headermobilemenu:hover + #headerlinks, #headerlinks:hover {
	right: 0;
}

#headerlinks {
	display: block !important;
	position: absolute;
	background-color: #fff;
	border: 1px solid #000;
	border-right: none;
	border-radius: 15px 0 0 15px;
	box-shadow: 0 0 10px 0 #4f4f4f;
	width: 180x;
	top: 230px;
	right: -220px;
	transition: all 0.4s ease-in-out;
	text-align: center;
	padding: 20px;
	height: 600px;
	overflow: scroll;
}

#headerlinks a {
	padding: 0;
	cursor: pointer;
}

#headerlinks p {
	margin: 15px 0 15px 0px;
	line-height: 15px;
	font-size: 20px;
	padding: 10px 5px 10px 5px;
	text-transform: uppercase;
	background-color: #005691;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 #4f4f4f;
}

/* NAV RIGHT MENU */
#navrightmenu {
	width: auto;
	background-color: #fff;
	border-radius: 15px;
	border: 1px solid #000;
	box-shadow: 0 0 10px 0 #4f4f4f;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	position:absolute;
	right:40px;
}

#navrightmenu a, #navrightmenu a:link, #navrightmenu a:active, #navrightmenu a:visited {
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
}

#navrightmenu p:hover, #navrightmenu p:checked {
	background-color:#3C8DBC;
	border: 1px solid #3C8DBC;
}

#navrightmenu p {
	border: 1px solid #000;
	border-radius: 20px;
	padding: 10px;
	margin: 15px;
	box-shadow: 0px 0px 5px 0px #4f4f4f;
	background-color: #005691;
}

/* ASIDE CALENDAR */

aside#asidecalendar * {
	font-size: 17px;
}

aside#asidecalendar {
	position: absolute;
	left: 40px;
	top: 130px;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #000;
	box-shadow: 0 0 10px 0 #4f4f4f;
	border-radius: 15px;
	width: 300px;
}

aside#asidecalendar #datadioggi {
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #000;
}

aside#asidecalendar #datadioggi p {
	/*line-height: 2px;*/
	margin: 10px 0 10px 0;
}

aside#asidecalendar #datadidomani {
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
}

aside#asidecalendar #datadidomani p {
	/*line-height: 10px;*/
    margin: 10px 0 10px 0;
}

aside#asidecalendar li {
	margin-bottom: 10px;
}

aside#asidecalendar a {
	color: #000;
	text-decoration: none;
}

aside#asidecalendar #linkaggiungicalendario {
	text-align: center;
	font-weight: bold;
}

/* FOOTER */

footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 60px;
	background-color: #005691;
	box-shadow: 0px 0px 10px 4px #4f4f4f;
	z-index: 999999999;
	text-align: center;
}

#footermargin {
	margin-top: 120px;
}

span#left {
	float: left;
	padding-left: 10px;
}

span#right {
	float: right;
	padding-right: 10px;
}

footer p, footer a {
	font-size: 25px;
	color: #fff !important;
	text-decoration: none;
}

footer p {
	position: relative;
	bottom: 7px;
}

#footermobile {
	display: none;
	text-align: center;
}

#footermobile a {
	position: relative;
	top: 10px;
	margin-left: 80px;
	margin-right: 80px;
}

/* GLOBALI UTILIZZATI SPESSO */

#oscuro {
	background-color: #000;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999999999999999;
    opacity: 0.4;
}

/* LOGIN */

#formlogin {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #fff;
	border-radius: 15px;
	box-shadow: 0 0 10px 0 #4f4f4f;
	background-color: #fff;
	text-align: center;
}

#formlogin .left {
	text-align: left;
	margin-left: 20px;
}

#formlogin input[type="text"], #formlogin input[type="password"] {
	float: right;
	margin-right: 20px;
	padding: 2px 0 2px 10px;
	border: 1px solid #000;
	border-radius: 5px;
	width: 60%;
}

#formlogin input[type="submit"] {
	padding: 5px;
	background-color: #005691;
	border: 1px solid #005691;
	color: #fff;
	border-radius: 5px;
}

#formlogin input[type="submit"]:hover {
	background-color: #037ed2;
	border: 1px solid #037ed2;
}

/*animazione caricamento gif*/
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/preloader.gif) center no-repeat #fff;
}

/*BOTTONI ANIMATI BASATI SU CLASSI*/
/*tasti disponibili: (p -> a) stampa, (p -> a) cancella, (p -> a) modifica*/
/*funzionamento: <p class="modifica"><a href=""><i>FONTAWESOME</i></a></p>*/
/*-------------------------------------------------*/
/*edit la classe direttamente nel link o nel submit*/
/*-------------------------------------------------*/
/*disponibile modifica, stampa, cancella, annulla, conferma*/

button.modifica, button.stampa, button.conferma {
	width: 70px;
}

button.modifica:hover, button.modifica:active, button.stampa:hover, button.stampa:hover:active {
	width: 170px;
}

.modifica *, .stampa *, .cancella *, .annulla *, .conferma *, .modifica, .stampa, .cancella, .annulla, .conferma {
	text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff !important;
	font-size: 20px;
	vertical-align: middle;
}

.modifica, .stampa, .conferma {
  background-color: #1565C0;
  padding: 20px;
  display: inline-block;
  width: 20px;
  transition: width 0.4s linear;
  border-radius: 15px;
  box-shadow: 0 0 4px 0 #4f4f4f;
}

.modifica i, .cancella i, .stampa i, .annulla i, .conferma i {
  display: inline;
	font-size: 20px !important;
}

.modifica:hover, .modifica:active {
  width: 150px;
}

.modifica:hover:before, .modifica:active:before {
  content:"modifica";
  margin-right: 15px;
}

.cancella, .annulla {
  background-color: #ff0000;
  padding: 20px;
  display: inline-block;
  width: 20px;
  transition: width 0.4s linear;
  border-radius: 15px;
  box-shadow: 0 0 4px 0 #4f4f4f;
}

.cancella:hover, .cancella:active {
  width: 150px;
}

.cancella:hover:before, .cancella:active:before {
  content:"cancella";
  margin-right: 15px;
}

.stampa:hover, .stampa:active, .annulla:hover, .annulla:active {
  width: 120px;
}

.conferma:hover, .conferma:active {
	width: 190px;
}

.stampa:hover:before, .stampa:active:before {
  content:"stampa";
  margin-right: 15px;
}

.annulla:hover:before, .annulla:active:before {
	content:"annulla";
  margin-right: 15px;
}

.conferma:hover:before, .conferma:active:before {
	content:"conferma";
	margin-right: 15px;
}

/* LOADING SPINNER */
#anicontainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	z-index: 99999999999999999999999999999999999999999999999;
}

#wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loadergif {
  display: inline-block;
  position: relative;
  width: 0px;
  height: 80px;
	left: -40px;
}
.loadergif div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.loadergif div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.loadergif div:nth-child(1) {
  animation-delay: -0.036s;
}
.loadergif div:nth-child(1):after {
  top: 63px;
  left: 63px;
  background-color: #005691;
}
.loadergif div:nth-child(2) {
  animation-delay: -0.072s;
}
.loadergif div:nth-child(2):after {
  top: 68px;
  left: 56px;
  background-color: #0864a1;
}
.loadergif div:nth-child(3) {
  animation-delay: -0.108s;
}
.loadergif div:nth-child(3):after {
  top: 71px;
  left: 48px;
  background-color: #096aab;
}
.loadergif div:nth-child(4) {
  animation-delay: -0.144s;
}
.loadergif div:nth-child(4):after {
  top: 72px;
  left: 40px;
  background-color: #0d71b5;
}
.loadergif div:nth-child(5) {
  animation-delay: -0.18s;
}
.loadergif div:nth-child(5):after {
  top: 71px;
  left: 32px;
  background-color: #0e7ec9;
}
.loadergif div:nth-child(6) {
  animation-delay: -0.216s;
}
.loadergif div:nth-child(6):after {
  top: 68px;
  left: 24px;
  background-color: #1187d6;
}
.loadergif div:nth-child(7) {
  animation-delay: -0.252s;
}
.loadergif div:nth-child(7):after {
  top: 63px;
  left: 17px;
  background-color: #1090e6;
}
.loadergif div:nth-child(8) {
  animation-delay: -0.288s;
}
.loadergif div:nth-child(8):after {
  top: 56px;
  left: 12px;
  background-color: #0992ed;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}