.fas.fa-bell.fa-fw {
}

html {
  font-family: sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.list-group-item {
  font-size: medium;
  font-weight: bolder;
}

.invalid {
  border: thick solid red;
  background-color: #f0f0f0;
}

.valid {
  /*border: thick solid green;*/
  /*background-color: #f0f0f0;*/
  border-color: #28B62C;
  /*padding-right: calc(1.5em + 0.75rem);*/
  /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328B62C' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");*/
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.numspan {
  float: left;
}

input[type="text"], input[type="number"] {
  transition: border 0.3s ease-in-out;
}

input[type="text"].preinvalid, input[type="number"].preinvalid {
  border: thick solid red;
  animation: blink 0.6s;
}

@keyframes blink {
  9% {
    border-color: red;
  }
  18% {
    border-color: transparent;
  }
  27% {
    border-color: red;
  }
  36% {
    border-color: transparent;
  }
  45% {
    border-color: red;
  }
  54% {
    border-color: transparent;
  }
  63% {
    border-color: red;
  }
  72% {
    border-color: transparent;
  }
  81% {
    border-color: red;
  }
  90% {
    border-color: transparent;
  }
  100% {
    border-color: red;
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px) rotate(-5deg);
  }
  50% {
    transform: translateX(10px) rotate(5deg);
  }
  75% {
    transform: translateX(-10px) rotate(-5deg);
  }
  100% {
    transform: translateX(0);
  }
}

.shake {
  animation: shake 0.5s;
}