@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light.woff2') format('woff2'),
        url('Roboto-Light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

body {
    font-family:Roboto;
    font-weight: 300;
    margin:0px;
    padding:0px;
    }

.btnAdd{
border-radius: 1px;
color: #fff;
text-transform: uppercase;
font-size: 13px;
font-weight:700;
margin:2px;
padding:20px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
transition: .3s background-color;
cursor: pointer;
background-color:#495057;
border-width: 1px;
border-style: solid;
border-color:#666;
text-align:center;
-webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.23);
-moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.23);
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.23);
}
.btnAdd:hover{
background: #ddd;
color:#000;
border-color:#333;
}  
.btnRed{
  border-radius: 1px;
  color: #fff;
  text-transform: uppercase;
  font-size: 13px;
  font-weight:700;
  margin:2px;
  padding:20px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  transition: .3s background-color;
  cursor: pointer;
  background-color:darkred;
  border-width: 1px;
  border-style: solid;
  border-color:#666;
  text-align:center;
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.23);
  -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.23);
  }
  .btnRed:hover{
  background: #ddd;
  color:#000;
  border-color:#333;
  }  
.barraTop{
    width:calc(100% - 68px);
    text-align:center; 
    position:absolute; 
    top:0px;
    margin-left:48px; 
    padding:10px; 
    font-size:24px;
}  
.casella{
    padding: 10px;
    font-family: Roboto, sans-serif;	
    margin:2px;
    width: 80%;
    color:#000;
    background:#fff;
    font-size: 15px;
    border: 1px solid #111;
    border-bottom-width:2px ;
    border-bottom-color:darkorange ;
    border-bottom-style:solid ;
    }      
    .casellaRed{
    padding: 10px;
    margin:2px;
    width: 80%;
    font-family: Roboto, sans-serif;	
    color:#000;
    background:#fff;
    font-size: 15px;
    border: 1px solid #111;
    border-bottom-width:2px;
    border-bottom-color:red;
    border-bottom-style:solid ;
    } 
.bgCerchio{
  border-radius: 50%;
  background: bleu ;
  width: 120%;
  height:100vh;
  bottom:-80vh;
  left:-10%;
  position:absolute;
}
.calcolare{
  position:absolute;
  width:406px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
  overflow:hidden;
}
.recupero{
  position:absolute;
  top:0px;
  width:400px; 
  margin-left: -406px; 
}
.registrati{
  position:absolute;
  top:0px;
  width:400px; 
  margin-left: -406px; 
}

.etichette label {
  display: flex;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.375em;
}
.etichette label input {
  position: absolute;
  left: -9999px;
}
.etichette label input:checked + span {
  background-color: #d6d6e5;
}
.etichette label input:checked + span:before {
  box-shadow: inset 0 0 0 0.4375em #00005c;
}
.etichette label span {
  display: flex;
  align-items: center;
  padding: 0.375em 0.75em 0.375em 0.375em;
  border-radius: 99em;
  transition: 0.25s ease;
}
.etichette label span:hover {
  background-color: #d6d6e5;
}
.etichette label span:before {
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.375em;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.125em #00005c;
}