@font-face {
	font-family: "Red Hat Display";
  src: local("Red Hat Display"),
    local("RedHatDisplay"),
    url('/font/RedHatDisplay.ttf') format('truetype');
	font-optical-sizing: auto;
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Set your font family --- */
  --bs-font-sans-serif: "Red Hat Display", sans-serif;
  --bs-body-font-size: 1.1rem;
  --bs-body-color: #000;
  --bs-body-color-rgb: 0, 0, 0;
  --bs-btn-color: var(--bs-white);
  --bs-btn-color-rgb: var(--bs-white-rgb);

  /* --- Set your primary and secondary color --- */
  --bs-primary: #222;
  --bs-primary-rgb: 34, 34, 34;
  --bs-secondary: #ffc0cb;
  --bs-secondary-rgb: 255, 192, 203;

  /* --- Set your border-radius --- */
  --bs-border-radius: 0.4rem;
}

/* --- Customization --- */
.h1, input {
	font-weight: 700 !important;
}
input, code {
  letter-spacing: 1px;
}
code {
	color: #673ab7;
}
strong {
	font-weight: 700;
}
.container-sm {
  max-width: 620px;
}
/* .form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background: transparent;
} */
.risultato {
	cursor: progress;
}
@media (max-width: 767px) {
  #calcoloForm .d-flex:not(:first-child) {
    display: inline-block !important;
  }
  #calcoloForm .d-flex:not(:first-child) > div {
    float: left;
    width: 2% !important;
  }
	#calcoloForm .d-flex:not(:first-child) > div:nth-child(4) {
		width: 100% !important;
		padding: 0 !important;
	}
  #calcoloForm .d-flex:not(:first-child) .w-100 {
    width: 49% !important;
  }
}

.woila {
  opacity: 0;
  animation: woila 2s ease-in-out forwards;
}
.woila-1 {
  animation-delay: .5s;
}
.woila-2 {
  animation-delay: 1s;
}
.woila-3 {
  animation-delay: 1.5s;
}
@keyframes woila {
  0% {
    opacity: 0.01;
  }
  100% {
    opacity: 1;
  }
}