html {
  -webkit-tap-highlight-color: rgba(94,104,121,0.3);
  tap-highlight-color: rgba(94,104,121,0.3);
}

body{
  min-height: 100vh;
  width: 100%;
  background: #dde1e7;
  /* background: #1F1B24; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
}
.overlay {
  background-color:#6c757d;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  top: 0px;
  left: 0px;
  opacity: .5; /* in FireFox */
  filter: alpha(opacity=50); /* in IE */
}
.spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150px;
  width: 100%;
  height: 100%;
  color: black;
}
.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}
.form-custom {
  /* height: 150px;
  width: 150px; */
  outline: inherit;
  border: none;
  display: block;
  background: #dde1e7;
  border-radius: 20px;
  margin: 20px;
  box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
 }
.form-custom:focus{
  box-shadow:
  -10px -10px 15px rgba(255, 255, 255, 0.5),
  10px 10px 15px rgba(70, 70, 70, 0.12),
  inset -10px -10px 15px rgba(255, 255, 255, 0.5),
  inset 10px 10px 15px rgba(70, 70, 70, 0.12);
}
.pushBtn {
  height: 105px;
  width: 105px;
  border: none;
  background: #dde1e7;
  border-radius: 20px;
  /* box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3); */

  /* background-color: rgba(94,104,121,0.3); */
  background-color: rgba(255,255,255,0.45);
  color: #7a7a7a;
}

.pushBtn:active {
  /* box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
  -webkit-box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3); */

  background-color: rgba(94,104,121,0.3);
}

.pushBtn:target {
  /* box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
  -webkit-box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3); */

  background-color: rgba(94,104,121,0.3);
}

.pushBtn-form:active {
  /* box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
  -webkit-box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3); */

  background-color: rgba(94,104,121,0.3);
}

.pushBtn-form:target {
  /* box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
  -webkit-box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3); */

  background-color: rgba(94,104,121,0.3);
}

.toggleBtn {
  height: 100px;
  width: 100px;
  -webkit-appearance: none;
  /* box-shadow:
    -10px -10px 15px rgba(255, 255, 255, 0.5),
    10px 10px 15px rgba(70, 70, 70, 0.12); */
  background-color: rgba(94,104,121,0.3);
  border-radius: 50%;
  border: 5px solid #ececec;
  outline: none;
  cursor: pointer;
}

.toggleBtn::after {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: FontAwesome;
  content: "\f011";
  color: #7a7a7a;
  font-size: 35px;
}

.toggleBtn:checked {
  /* box-shadow:
  inset -10px -10px 15px rgba(255, 255, 255, 0.5),
  inset 10px 10px 15px rgba(70, 70, 70, 0.12),
  inset -10px -10px 15px rgba(255, 255, 255, 0.5),
  inset 10px 10px 15px rgba(70, 70, 70, 0.12);
  -webkit-box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5),
    inset 10px 10px 15px rgba(70, 70, 70, 0.12),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5),
    inset 10px 10px 15px rgba(70, 70, 70, 0.12); */

  background-color: rgba(255,255,255,0.45);
}

.toggleBtn:checked::after {
  color: #72aa34;
}

.fa-generale:after {
  content: "\f5df";
}
.fa-pompa:after {
  content: "\e005";
}
.fa-fancoil:after {
  content: "\f769";
}
.fa-condizionatore:after {
  content: "\f863";
}
.fa-caldaia:after {
  content: "\f773";
}

/* @media screen and (max-width: 600px) {
  .toggleBtn:hover {
    animation: toggleBtnChecked 1s ease;
  }
}
@keyframes toggleBtnChecked {
  0% {
    box-shadow:
      -10px -10px 15px rgba(255, 255, 255, 0.5),
      10px 10px 15px rgba(70, 70, 70, 0.12);
  }
  50% {
    box-shadow:
    inset -10px -10px 15px rgba(255, 255, 255, 0.5),
    inset 10px 10px 15px rgba(70, 70, 70, 0.12),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5),
    inset 10px 10px 15px rgba(70, 70, 70, 0.12);
    -webkit-box-shadow:
    inset -10px -10px 15px rgba(255, 255, 255, 0.5),
    inset 10px 10px 15px rgba(70, 70, 70, 0.12),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5),
    inset 10px 10px 15px rgba(70, 70, 70, 0.12);
  }
  100% {
    box-shadow:
      -10px -10px 15px rgba(255, 255, 255, 0.5),
      10px 10px 15px rgba(70, 70, 70, 0.12);
  }
} */

/* MEDIA QUERY CON ANIMATION PER SAFARI WEB */
/* @media screen and (max-width: 600px) {
  .pushBtn:hover {
    animation: pushbtnActive 1s ease;
  }
}
@keyframes pushbtnActive {
  0% {
    box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);
  }
  50% {
    box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
    -webkit-box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
  }
  100% {
    box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);
  }
} */

/* input[type="checkbox"] {
  height: 100px;
  width: 100px;
  -webkit-appearance: none;
  box-shadow:
    -10px -10px 15px rgba(255, 255, 255, 0.5),
    10px 10px 15px rgba(70, 70, 70, 0.12);
  border-radius: 50%;
  border: 5px solid #ececec;
  outline: none;
  cursor: pointer;
}
input[type="checkbox"]::after {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: FontAwesome;
  content: "\f011";
  color: #7a7a7a;
  font-size: 35px;
}
input[type="checkbox"]:checked{
  box-shadow:
  -10px -10px 15px rgba(255, 255, 255, 0.5),
  10px 10px 15px rgba(70, 70, 70, 0.12),
  inset -10px -10px 15px rgba(255, 255, 255, 0.5),
  inset 10px 10px 15px rgba(70, 70, 70, 0.12);
}
input[type="checkbox"]:checked::after{
  color: #b0dc0a;
} */
