@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  /* FORMATO TESTO */
  --text-t0:8px;
  --text-t1:10px;
  --text-t2:12px;
  --text-t3:14px;
  --text-t4:18px;
  --text-t5:20px;
  --text-t6:24px;
  --text-t7:28px;
  --text-t8:32px;
  --text-t9:38px;
  --text-t10:48px;

  --text-w1:200;
  --text-w2:300;
  --text-w3:400;
  --text-w4:600;
  --text-w5:800;

  /* PALETTA COLORI */
  --color-bg:#edf2f4; /* background */
  --color-00:#0a0908; /* Nero */
  --color-01:#FFF; /* Bianco */
  --color-02:#03045e; /* Blue */
  --color-03:#0077b6; /* Blue 2*/
  --color-04:#1a80df; /* Celeste #4386f6 */
  --color-05:#2bbc8c; /* Verde */
  --color-06:#f4b123; /* Arancio */
  --color-07:#fc5557; /* Rosso */
  --color-08:#fee440; /* Giallo */
  --color-09:#dee2e6; /* Grigio */
  --color-10:#adb5bd; /*#748cab; /* Grigio 2 (10)#d9d9d9*/
  --color-11:#d9d9d9; /* Grigio 3 (11)#778da9*/
  --color-12:#8257C7; /* violetto */


  --gradient-b:linear-gradient(129deg, rgba(28,30,98,1) 0%, rgba(66,123,189,1) 92%); /* blue */
  --gradient-g: linear-gradient(262deg, rgba(233,236,239,1) 50%, rgba(173,181,189,1) 100%); /*grey */
  --gradient-g2:linear-gradient(262deg, rgba(108,117,125,1) 50%, rgba(173,181,189,1) 100%); /*grey scuro */
  --gradient-g3:linear-gradient(171deg, rgba(34,34,37,1) 0%, rgba(47,48,54,1) 100%);/*grey scuro new */

  --gradient-r:linear-gradient(90deg, rgba(252,85,87,1) 20%, rgba(193,104,105,1) 100%); /* rosso */
  --gradient-g:linear-gradient(90deg, rgba(43,188,140,1) 19%, rgba(102,229,82,1) 100%); /* verde */

  --ombra:0px 10px 13px -7px #000000, -5px -5px 2px -1px rgba(0,0,0,0);
}


body{
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  background: var(--color-bg);
  font-size:var(--text-t2);
  color:var(--color-00);
  font-weight: var(--text-w1);
  list-style-type: none;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* ========= SCROLL BAR */
/* width */
::-webkit-scrollbar {width: 5px;height: 5px;}
/* Track */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius: 10px;}
/* Handle */
::-webkit-scrollbar-thumb {background: var(--color-04);border-radius: 10px;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: var(--color-06);}

/* ================================================================================
L O A D E R - W A I T
================================================================================ */
.SfondoOpaco{
  display:flex;
  position:fixed;
  width:100%;
  height:100%;
  background:var(--color-02);
  opacity:0.8;
  z-index:1000;
}

#WaitCircle{
  display:block;
  position:fixed;
  width:250px;
  height:250px;
  z-index:1000;
  top:calc(50% - 125px);
  left:calc(50% - 125px);
  trasform:translate(-50% , -50%);
  border-radius:50%;
}

#WaitCircle .ring{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  animation: ring 2s linear infinite;
}

#WaitCircle .ring:before{
  position:absolute;
  content:'';
  left:0;
  top:0;
  height:100%;
  box-shadow: 0 0 5px rgba(255,255,255,.3);
}

#WaitCircle span{
  position:absolute;
  top:50%;
  height:20px;
  width:100%;
  color:#fff;
  font-size:12px;
  font-weight:500;
  text-transform: uppercase;
  letter-spacing:1px;
  trasform:translate(-50% , -50%);
  text-align:center;
  line-height:20px;
  animation: text 3s ease-in-out linear;
}

@keyframes ring {
  0%{
    transform:rotate(0deg);
    box-shadow:1px 5px 2px #e65c00;
  }
  50%{
    transform:rotate(180deg);
    box-shadow:1px 5px 2px #f06292;
  }
  100%{
    transform:rotate(360deg);
    box-shadow:1px 5px 2px #0456c8;
  }
}

@keyframes text {
  50%{
    color: var(--color-blue);;
  }
}


/* ================================================================================
I N D E X
================================================================================ */
.PAGEFULL{
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  height: 100vh;
  background: var(--color-01);
}

.PAGEFULL .BOXCONTENT {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;

  flex-wrap: wrap;
  width: calc(100% - 10px);
  height: calc(100vh - 10px);
  padding: 5px;
  background: var(--color-01);
}

.PAGEFULL .W60P{width: calc(60% - 5px);}
.PAGEFULL .W40P{width: calc(40% - 5px);}
.PAGEFULL .W70P{width: calc(70% - 5px);}
.PAGEFULL .W30P{width: calc(30% - 5px);}
.PAGEFULL .BGGRADIENT{background: var(--gradient-b);}

.PAGEFULL .BOXCONTENT .LOGO{
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  width: 100%;
  height: auto;
}

.PAGEFULL .BOXCONTENT .LOGO img{
  width: 60px;
  height: 60px;
  position: relative;
  object-fit: contain;
}


/* ======== FORM LOGIN ========= */
.BOXCONTENT .FORMLOGIN{
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;

  width: 80%;
  min-width: 250px;
  height: auto;

  padding: 10px;
  border:1px solid var(--color-09);
  border-radius:5px;

  transition: 0.5s;
  z-index:1;
}

.BOXCONTENT .FORMLOGIN .TITLE{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 30px;

  background: var(--gradient-b);
  color: var(--color-01);
  font-size: var(--text-t3);
  font-weight: var(--text-w2);
  letter-spacing: 2px;
}

.BOXCONTENT .FORMLOGIN .SUBTITLE{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height:30px;

  color: var(--color-00);
  font-size: var(--text-t2);
  font-weight: var(--text-w2);
}


.BOXCONTENT .FORMLOGIN .AVVISO{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  width: 100%;
  height: auto;
}

.BOXCONTENT .FORMLOGIN .AVVISO span{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 30px;
  color: var(--color-00);
  font-size: var(--text-t3);
  font-weight: var(--text-w3);
}

/* ==== */

.BOXCONTENT .FORMLOGIN .FORMINPUT{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  width: 100%;
  height: auto;
}

.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM:last-child{margin-bottom:0;}

.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM span{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: calc(100% - 30px - 5px);
  height: 15px;
  padding-left: 5px;
  font-size: var(--text-t1);
  font-weight: var(--text-w2);
  color:var(--color-00);
  letter-spacing: 1px;
}

.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM .ITEMICO{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 30px;
  font-size: var(--text-t4);
  font-weight: var(--text-w2);
  color:var(--color-00);
}

.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM input{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: calc(100% - 5px);
  height: 30px;
  padding-left: 5px;
  font-size: var(--text-t3);
  font-weight: var(--text-w2);
  color:var(--color-00);
  border:1px solid var(--color-09);
  text-align: center;
}

.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM .LOGINBTN{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 30px;

  font-size: var(--text-t2);
  font-weight: var(--text-w3);
  color:var(--color-00);
  letter-spacing: 1px;
  transition: 0.5s;
  cursor: pointer;
}

.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM .BTNORANGE{background: var(--color-06);color:var(--color-01);}
.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM .BTNGREY{font-size: var(--text-t0);background: var(--color-10);color:var(--color-00);}

/* === HOVER */
.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM .BTNORANGE:hover{background: var(--color-05);letter-spacing: 3px;}
.BOXCONTENT .FORMLOGIN .FORMINPUT .ITEM .BTNGREY:hover{background: var(--color-04);color:var(--color-01);letter-spacing: 3px;}


.TITLEINDEX{
  position: absolute;
  top:80px;
  left: 30px;
  width: calc(100% - 50px);
  overflow: hidden;
}

.TITLEINDEX .TITLEBIG{
  position: relative;
  font-size:var(--text-t10);
  color:var(--color-01);
  font-weight: var(--text-w5);
}

.TITLEINDEX .TITLEBIG span{color:var(--color-06);}

.TITLEINDEX .SUBTITLE{
  position: relative;
  font-size:var(--text-t5);
  color:var(--color-01);
  font-weight: var(--text-w4);
  letter-spacing: 2px;
}

.TITLEINDEX .SALTA{
  position: relative;
  height: 20px;

}

.TITLEINDEX .DESCTITLE{
  position: relative;
  margin-top: 5px;
  font-size:var(--text-t3);
  color:var(--color-01);
  font-weight: var(--text-w3);
  letter-spacing: 0px;
}

.TITLEINDEX .DESCBIG{font-size:var(--text-t5)}

/* **** */
.BOXINDEX{
  position: relative;
  width: 50%;
  height: auto;
  margin-top: 20px;
  overflow-y: auto;
}

.BOXINDEX .BOXITEM{
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
}

.BOXINDEX .BOXITEM .BOXICO{
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size:var(--text-t6);
  color:var(--color-01);
  font-weight: var(--text-w1);
  border-radius:50%;
  background: var(--color-01);
  color:var(--color-00);
}

.BOXITEM .BOXTEXT{
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: calc(100% - 60px);
  margin-left: 10px;
}
.BOXINDEX .BOXITEM .BOXTITLE{
  position: relative;
  width: 100%;
  height: 15px;
  font-size:var(--text-t2);
  color:var(--color-06);
  font-weight: var(--text-w3);
  letter-spacing: 2px;
}


.BOXINDEX .BOXITEM .BOXDESC{
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  font-size:var(--text-t2);
  color:var(--color-09);
  font-weight: var(--text-w2);

}

/* **** */
.IMG{
  position: absolute;
  right:10px;
  bottom:-10px;
  width: calc(50% - 10px);
}

.IMG img{
  position: relative;
  object-fit: cover;
  width: 100%;
}

.LASTUPDATE{
  position: absolute;
  left: 5px;
  bottom:10px;
  font-size: var(--text-t1);
  font-weight: var(--text-w2);
  color:var(--color-09);
}