@charset "UTF-8";

@-webkit-keyframes autofill {
  0%, 100% {
    color: var(--primaryFontColor) !important;
    background: var(--primary-light) !important;
  }
}

input:-webkit-autofill {
  -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: autofill;
}

.floating-label-group {
  margin-bottom: 15px;
  margin-top: 15px;
  position: relative;
}

.floating-label-group .floating-label {
  color: var(--white);
  font-size: 13px;
  font-weight: normal;
  left: 12px;
  opacity: .7; /* Firefox */
  pointer-events: none;
  position: absolute;
  text-align: left !important;
  top: 9px;
  transition: all 0.3s ease-out;
}

.floating-label-group input:focus ~ .floating-label,
.floating-label-group input:not(:focus):valid ~ .floating-label,
.floating-label-group input:-webkit-autofill ~ .floating-label{
  bottom: 0;
  color: var(--headerFontColor);
  font-size: 13px;
  font-weight: 500;
  left: 3px;
  margin-bottom: 10px;
    opacity:1;
  top: -18px;
}

@media (max-width: 650px), (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .floating-label-group .floating-label, .floating-label-group input:focus ~ .floating-label,
  .floating-label-group input:not(:focus):valid ~ .floating-label,
  .floating-label-group input:-webkit-autofill{
    padding-left: 10px !important;
  }
}