@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
   transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0);
  }
}

input.invalid {
  animation: shake 0.2s ease-in-out 0s 2;
}

/* https://stackoverflow.com/questions/43186015/css-hide-scroll-bar-but-have-element-scrollable */
.hide-scrollbar::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

/* Prevent auto-zoom on iOS
 * https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
 */
@media screen and (max-width: 767px) {
    input, select:focus, textarea {
        font-size: 16px;
    }
}