@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

/* ==========================================================================
   Preloader Styles
   ========================================================================== */
#preloader {
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 11000;
  position: fixed;
  display: block;
}

@keyframes loader {
  0%, 10%, 100% {
    width: 80px;
    height: 80px;
  }
  65% {
    width: 150px;
    height: 150px;
  }
}

@keyframes loaderBlock {
  0%, 30% {
    transform: rotate(0);
  }
  55% {
    background-color: #3181e9;
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes loaderBlockInverse {
  0%, 20% {
    transform: rotate(0);
  }
  55% {
    background-color: #4031e9;
  }
  100% {
    transform: rotate(-90deg);
  }
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
  animation: loader 1.2s infinite ease-in-out;
}

.loader span {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  background-color: #0800ff;
  animation: loaderBlock 1.2s infinite ease-in-out both;
}

.loader span:nth-child(1) {
  top: 0;
  left: 0;
}

.loader span:nth-child(2) {
  top: 0;
  right: 0;
  animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}

.loader span:nth-child(3) {
  bottom: 0;
  left: 0;
  animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}

.loader span:nth-child(4) {
  bottom: 0;
  right: 0;
}

/* ==========================================================================
   Background Animation & Layout Styles
   ========================================================================== */
* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: 'Exo', sans-serif;
}

.context {
  width: 100%;
  position: absolute;
  top: 50vh;
}

.context h1 {
  text-align: center;
  color: #fff;
  font-size: 50px;
}

.area {
  background: rgba(51, 92, 255, 1);
  background: -webkit-linear-gradient(to left, rgba(143, 157, 251, 1), rgba(51, 71, 255, 1));
  background: linear-gradient(180deg, #42aaff, 5%, #3535ff, 50%, #3300ff);
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(92, 51, 255, 0.35);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

/* ==========================================================================
   Login & Signup Form Custom Styles
   ========================================================================== */
.login .custom-control-label {
  white-space: normal !important;
}

.login .wrapper.wrapper-login .container-signup {
  width: 640px;
  max-width: 95%;
  padding: 30px 32px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.login .wrapper.wrapper-login .container-signup h3 {
  margin-bottom: 18px;
}

.login .wrapper.wrapper-login .container-signup .form-group {
  padding: 6px 8px;
  margin-bottom: 2px;
}

.login .wrapper.wrapper-login .container-signup .form-group label {
  margin-bottom: 4px;
  font-size: 13px;
  color: #333;
}

.login .wrapper.wrapper-login .container-signup .form-control {
  height: calc(2.25rem + 2px);
  padding: 0.45rem 0.75rem;
  font-size: 13px;
}

.login .wrapper.wrapper-login .container-signup .form-action {
  display: flex !important;
  padding: 14px 4px 0 !important;
  margin: 0;
  width: 100%;
}

.login .wrapper.wrapper-login .container-signup .captcha-image {
  background-color: #f1f3f5;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 6px 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  font-size: 15px;
  color: #2b303a;
  min-width: 80px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s;
}

.login .wrapper.wrapper-login .container-signup .captcha-image:hover {
  background-color: #e2e6ea;
}

.btn-reload-captcha {
  background: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 4px;
  color: #6c757d;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-reload-captcha:hover {
  background: #e9ecef;
  color: #007bff;
}

.login .wrapper.wrapper-login .container-signup .custom-control-label {
  font-size: 12px;
  line-height: 1.35;
  color: #555;
  cursor: pointer;
  user-select: none;
}

.login .wrapper.wrapper-login .container-forgot {
  width: 440px;
  max-width: 95%;
  padding: 30px 32px 25px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.login .wrapper.wrapper-login .container-forgot h3 {
  margin-bottom: 12px;
}

.login .wrapper.wrapper-login .container-forgot .form-group {
  padding: 6px 8px;
  margin-bottom: 2px;
}

.login .wrapper.wrapper-login .container-forgot .form-group label {
  margin-bottom: 4px;
  font-size: 13px;
  color: #333;
}

.login .wrapper.wrapper-login .container-forgot .form-control {
  height: calc(2.25rem + 2px);
  padding: 0.45rem 0.75rem;
  font-size: 13px;
}

.login .wrapper.wrapper-login .container-forgot .form-action {
  display: flex !important;
  padding: 14px 4px 0 !important;
  margin: 0;
  width: 100%;
}

.login .wrapper.wrapper-login .container-forgot .captcha-image {
  background-color: #f1f3f5;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 6px 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  font-size: 15px;
  color: #2b303a;
  min-width: 80px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s;
}

.login .wrapper.wrapper-login .container-forgot .captcha-image:hover {
  background-color: #e2e6ea;
}

@media (max-width: 767.98px) {
  .login .wrapper.wrapper-login .container-signup,
  .login .wrapper.wrapper-login .container-forgot {
    width: 100%;
    padding: 24px 18px 15px;
  }
  .login .wrapper.wrapper-login .container-signup .form-group,
  .login .wrapper.wrapper-login .container-forgot .form-group {
    padding: 6px 2px;
  }
}

/* ==========================================================================
   Biometric / Passkey Login Button Styles
   ========================================================================== */
.biometric-login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 14px 0 10px;
}

.biometric-login-divider::before,
.biometric-login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2e8f0;
}

.biometric-login-divider span {
  padding: 0 10px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.btn-biometric-signin {
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
  background: #f0f9ff !important;
}

.btn-biometric-signin:hover,
.btn-biometric-signin:focus {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}

.btn-biometric-signin .fa-fingerprint,
.btn-biometric-signin i {
  font-size: 17px !important;
}

/* Fingerprint SVG mask for login screen */
.fa-fingerprint {
  display: inline-block !important;
  width: 1.05em !important;
  height: 1.05em !important;
  vertical-align: -0.15em !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M256 0c-78.3 0-145 42-181.3 104.7-5.9 10.2-2.4 23.3 7.9 29.2 10.2 5.9 23.3 2.4 29.2-7.9C143.1 72.8 195.9 36.6 256 36.6c80.6 0 146.3 65.7 146.3 146.3 0 8.4-1.2 16.5-3.3 24.3-3.1 11.4 3.7 23.1 15.1 26.2 11.4 3.1 23.1-3.7 26.2-15.1 2.9-11 4.5-22.6 4.5-35.4C444.8 82.5 360.3 0 256 0zM140.4 179.3c-2.7-11.5-14.3-18.3-25.8-15.6-11.5 2.7-18.3 14.3-15.6 25.8 4.6 19.5 7.1 39.8 7.1 60.5 0 28.5-4.8 56.4-13.8 83-3.8 11.2 2.2 23.4 13.4 27.2 11.2 3.8 23.4-2.2 27.2-13.4 10.4-30.8 16-63.3 16-96.8 0-24.1-2.9-47.7-8.5-70.7zM256 73.1c-60.5 0-109.7 49.2-109.7 109.7 0 14.5 2.9 28.4 8.2 41.2 4.5 10.9 17.1 16.1 28 11.6 10.9-4.5 16.1-17.1 11.6-28-3.4-8.2-5.3-17.2-5.3-26.6 0-38.3 31.2-69.5 69.5-69.5 38.3 0 69.5 31.2 69.5 69.5 0 22.8-8.8 44-24.6 59.8l-18.8 18.8c-29.2 29.2-45.3 68.8-45.3 110.1 0 11.8 9.6 21.4 21.4s21.4-9.6 21.4-21.4c0-29.9 11.7-58.7 32.8-79.8l18.8-18.8c24.6-24.6 38.4-57.8 38.4-93.5C370.3 122.3 319.1 73.1 256 73.1zm-84.5 288.7c-7.9-8.7-21.6-9.4-30.3-1.5-8.7 7.9-9.4 21.6-1.5 30.3 26.6 29.2 42.4 67.2 44.9 107.5.7 11.8 10.4 21 22.1 21 .5 0 1.1 0 1.6-.1 11.8-.8 20.8-11 20.1-22.8-3.1-46.7-21.4-90.8-52.2-124.6l-4.7-9.8zm224.2-102.7c-11.2-3.8-23.4 2.2-27.2 13.4-12.8 37.8-34.9 71.3-64.4 97.4-9 8-9.8 21.8-1.8 30.8 8 9 21.8 9.8 30.8 1.8 35.8-31.7 62.6-72.4 78.1-118.2 3.8-11.2-2.2-23.4-13.4-27.2l-2.1-1.2z'/%3E%3C/svg%3E") no-repeat center center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M256 0c-78.3 0-145 42-181.3 104.7-5.9 10.2-2.4 23.3 7.9 29.2 10.2 5.9 23.3 2.4 29.2-7.9C143.1 72.8 195.9 36.6 256 36.6c80.6 0 146.3 65.7 146.3 146.3 0 8.4-1.2 16.5-3.3 24.3-3.1 11.4 3.7 23.1 15.1 26.2 11.4 3.1 23.1-3.7 26.2-15.1 2.9-11 4.5-22.6 4.5-35.4C444.8 82.5 360.3 0 256 0zM140.4 179.3c-2.7-11.5-14.3-18.3-25.8-15.6-11.5 2.7-18.3 14.3-15.6 25.8 4.6 19.5 7.1 39.8 7.1 60.5 0 28.5-4.8 56.4-13.8 83-3.8 11.2 2.2 23.4 13.4 27.2 11.2 3.8 23.4-2.2 27.2-13.4 10.4-30.8 16-63.3 16-96.8 0-24.1-2.9-47.7-8.5-70.7zM256 73.1c-60.5 0-109.7 49.2-109.7 109.7 0 14.5 2.9 28.4 8.2 41.2 4.5 10.9 17.1 16.1 28 11.6 10.9-4.5 16.1-17.1 11.6-28-3.4-8.2-5.3-17.2-5.3-26.6 0-38.3 31.2-69.5 69.5-69.5 38.3 0 69.5 31.2 69.5 69.5 0 22.8-8.8 44-24.6 59.8l-18.8 18.8c-29.2 29.2-45.3 68.8-45.3 110.1 0 11.8 9.6 21.4 21.4s21.4-9.6 21.4-21.4c0-29.9 11.7-58.7 32.8-79.8l18.8-18.8c24.6-24.6 38.4-57.8 38.4-93.5C370.3 122.3 319.1 73.1 256 73.1zm-84.5 288.7c-7.9-8.7-21.6-9.4-30.3-1.5-8.7 7.9-9.4 21.6-1.5 30.3 26.6 29.2 42.4 67.2 44.9 107.5.7 11.8 10.4 21 22.1 21 .5 0 1.1 0 1.6-.1 11.8-.8 20.8-11 20.1-22.8-3.1-46.7-21.4-90.8-52.2-124.6l-4.7-9.8zm224.2-102.7c-11.2-3.8-23.4 2.2-27.2 13.4-12.8 37.8-34.9 71.3-64.4 97.4-9 8-9.8 21.8-1.8 30.8 8 9 21.8 9.8 30.8 1.8 35.8-31.7 62.6-72.4 78.1-118.2 3.8-11.2-2.2-23.4-13.4-27.2l-2.1-1.2z'/%3E%3C/svg%3E") no-repeat center center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M256 0c-78.3 0-145 42-181.3 104.7-5.9 10.2-2.4 23.3 7.9 29.2 10.2 5.9 23.3 2.4 29.2-7.9C143.1 72.8 195.9 36.6 256 36.6c80.6 0 146.3 65.7 146.3 146.3 0 8.4-1.2 16.5-3.3 24.3-3.1 11.4 3.7 23.1 15.1 26.2 11.4 3.1 23.1-3.7 26.2-15.1 2.9-11 4.5-22.6 4.5-35.4C444.8 82.5 360.3 0 256 0zM140.4 179.3c-2.7-11.5-14.3-18.3-25.8-15.6-11.5 2.7-18.3 14.3-15.6 25.8 4.6 19.5 7.1 39.8 7.1 60.5 0 28.5-4.8 56.4-13.8 83-3.8 11.2 2.2 23.4 13.4 27.2 11.2 3.8 23.4-2.2 27.2-13.4 10.4-30.8 16-63.3 16-96.8 0-24.1-2.9-47.7-8.5-70.7zM256 73.1c-60.5 0-109.7 49.2-109.7 109.7 0 14.5 2.9 28.4 8.2 41.2 4.5 10.9 17.1 16.1 28 11.6 10.9-4.5 16.1-17.1 11.6-28-3.4-8.2-5.3-17.2-5.3-26.6 0-38.3 31.2-69.5 69.5-69.5 38.3 0 69.5 31.2 69.5 69.5 0 22.8-8.8 44-24.6 59.8l-18.8 18.8c-29.2 29.2-45.3 68.8-45.3 110.1 0 11.8 9.6 21.4 21.4s21.4-9.6 21.4-21.4c0-29.9 11.7-58.7 32.8-79.8l18.8-18.8c24.6-24.6 38.4-57.8 38.4-93.5C370.3 122.3 319.1 73.1 256 73.1zm-84.5 288.7c-7.9-8.7-21.6-9.4-30.3-1.5-8.7 7.9-9.4 21.6-1.5 30.3 26.6 29.2 42.4 67.2 44.9 107.5.7 11.8 10.4 21 22.1 21 .5 0 1.1 0 1.6-.1 11.8-.8 20.8-11 20.1-22.8-3.1-46.7-21.4-90.8-52.2-124.6l-4.7-9.8zm224.2-102.7c-11.2-3.8-23.4 2.2-27.2 13.4-12.8 37.8-34.9 71.3-64.4 97.4-9 8-9.8 21.8-1.8 30.8 8 9 21.8 9.8 30.8 1.8 35.8-31.7 62.6-72.4 78.1-118.2 3.8-11.2-2.2-23.4-13.4-27.2l-2.1-1.2z'/%3E%3C/svg%3E") no-repeat center center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.fa-fingerprint::before {
  content: "" !important;
  display: none !important;
}