body {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.authentication-wrapper {
  display: flex;
  flex-basis: 100%;
  min-height: 100vh;
  width: 100%;
}

.authentication-wrapper .authentication-inner {
  width: 100%;
}

.authentication-wrapper.authentication-basic {
  align-items: center;
  justify-content: center;
}

.authentication-wrapper .auth-cover-illustration {
  z-index: 1;
  max-inline-size: 38rem;
}

.authentication-wrapper .authentication-image {
  z-index: -1;
  inline-size: 100%;
  inset-block-end: 7%;
  position: absolute;
  inset-inline-start: 0;
}

.authentication-wrapper.authentication-cover {
  align-items: flex-start;
}

.authentication-wrapper.authentication-cover .authentication-inner {
  min-height: 100vh;
  position: relative;
}

.authentication-wrapper.authentication-cover .authentication-image {
  inline-size: 70%;
}

html:not([dir=rtl]) .authentication-wrapper.authentication-cover .authentication-image {
  inset-inline-start: unset;
}

.authentication-wrapper.authentication-basic .authentication-inner {
  max-width: 450px;
}

.authentication-wrapper .auth-input-wrapper .auth-input {
  max-width: 50px;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 150%;
}

@media (max-width: 575.98px) {
  .authentication-wrapper .auth-input-wrapper .auth-input {
    font-size: 1.125rem;
  }
}
@media (max-width: 1199.98px) {
  .authentication-cover .authentication-image {
    inset-block-end: 9%;
  }
  [dir=rtl] .authentication-cover .authentication-image {
    inline-size: 65%;
  }
}
#twoStepsForm .fv-plugins-bootstrap5-row-invalid .form-control {
  border-color: #ff4d49;
}

.light-style .authentication-wrapper .authentication-bg {
  background-color: #fff;
}

.dark-style .authentication-wrapper .authentication-bg {
  background-color: #30334e;
}

/* ///////////////////////////////////////// */
@keyframes float {
  0%, 50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.2, 0.25, 0.55, 1);
  }
  25% {
    transform: translateY(-7px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.75);
  }
  75% {
    transform: translateY(7px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.75);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes fade-up {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    transform: translate(0, -20px);
    opacity: 1;
  }
  100% {
    transform: translate(0, -20px);
    opacity: 0;
  }
}
@keyframes fadeLTR {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    transform: translate(10px, -20px);
    opacity: 1;
  }
  100% {
    transform: translate(10px, -20px);
    opacity: 0;
  }
}
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.01);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tada {
  0% {
    transform: rotate(0deg) scaleX(1) scaleY(1);
  }
  10% {
    transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
  }
  20% {
    transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
  }
  30% {
    transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
  }
  40% {
    transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
  }
  50% {
    transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
  }
  60% {
    transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
  }
  70% {
    transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
  }
  80% {
    transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
  }
  90% {
    transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
  }
  100% {
    transform: rotate(0deg) scaleX(1.2) scaleY(1.2);
  }
}
/* ////////////////////////////////////////////// */
.animation-2 {
  position: relative;
}

.intro-img {
  position: absolute;
  top: 200px;
  left: 200px;
  animation: float 3s ease infinite;
}

.icon-1 {
  position: absolute;
  top: 250px;
  left: 120px;
  height: 30px;
  animation: fade-up 1.8s infinite ease-in-out;
}

.icon-2 {
  position: absolute;
  left: 200px;
  top: 180px;
  animation: fade-up 1.1s infinite ease-in-out;
}

.icon-3 {
  position: absolute;
  left: 290px;
  top: 160px;
  animation: fadeLTR 1.5s infinite ease-in-out;
}

.icon-4 {
  position: absolute;
  left: 480px;
  top: 150px;
  height: 35px;
  animation: heartBeat 1.1s infinite ease-in-out;
}

.icon-5 {
  position: absolute;
  left: 590px;
  top: 200px;
  height: 40px;
  animation: tada 1.8s infinite ease-in-out;
}

.icon-6 {
  position: absolute;
  left: 690px;
  top: 250px;
  height: 35px;
  animation: tada 1.8s infinite ease-in-out;
}

.icon-7 {
  position: absolute;
  left: 690px;
  top: 250px;
  height: 35px;
  animation: tada 1.8s infinite ease-in-out;
}

.icon-10 {
  position: absolute;
  left: 690px;
  top: 250px;
  top: 107px;
  animation: tada 1.8s infinite ease-in-out;
}

.icon-tree {
  position: absolute;
  left: 600px;
  bottom: 520px;
  height: 80px;
  animation: float 3s ease infinite;
}

.register-img, .password-img {
  animation: float 3s ease infinite;
}