﻿body {
  background: url(/Files/125/Images/bg2.jpeg);
  backdrop-filter: blur(0px);
  background-size: cover;
}

#QQRGZSELUG {
  min-height: 100vh;
  align-content: center;
}

#QQRGZSELUG .login-wrapper {
  display: block;
  font-size: var(--typography-small-size);
  width: 100%;
  backdrop-filter: blur(2px);
  background-color: #ffffff7d;
}

#QQRGZSELUG .login-wrapper label {
  color: #333;
}

#QQRGZSELUG .form-loading {
  inset: 0;
  margin: auto;
  text-align: center;
  align-content: center;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background: hsla(0, 0%, 100%, 0.8);
  position: absolute;
  transition: 0.2s;
  width: 100%;
  z-index: 3;
}

#QQRGZSELUG .login-wrapper {
  border: 1px solid #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
  top: unset;
  left: unset;
  transform: unset;
}

#QQRGZSELUG .login-wrapper:not(.loading) .form-loading {
  filter: grayscale(1);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

#QQRGZSELUG .login-logo {
  margin-block-end: 2rem;
  text-align: center;
}

#QQRGZSELUG .login-logo img {
  height: 70px;
  border-radius: 0px;
  object-fit: contain;
  mix-blend-mode: darken;
}

#QQRGZSELUG .login-title {
  color: #333;
  font-size: var(--typography-heading-3-size);
  margin-bottom: var(--space-medium-large);
}

#QQRGZSELUG .login-wrapper {
  max-width: 380px;
  margin: auto;
}

#QQRGZSELUG fieldset {
  margin-block: 0.25rem;
  padding: 0;
  border: unset;
}

#QQRGZSELUG fieldset input {
  width: 100%;
  text-align: center;
  padding-block: 0.75rem;
}

#QQRGZSELUG .form-group {
  display: flex;
  flex-direction: column-reverse;
}

#QQRGZSELUG .form-group label {
  transition: 300ms ease;
}

#QQRGZSELUG .form-group+.form-group {
  margin-block-start: 0.5rem;
}

#QQRGZSELUG input:focus~label {
  font-size: 1.02rem;
}

#QQRGZSELUG .logo-wrapper {
  display: block;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}

#QQRGZSELUG .logo-wrapper img {
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  position: absolute;
  padding: 0.5rem;
  left: 0;
  top: 0;
}

#QQRGZSELUG .otp-group {
  direction: ltr;
  display: flex;
  gap: .5rem;
  justify-content: center;
}

#QQRGZSELUG .otp-group input {
  display: block;
  height: max(2.5rem, 100%);
  max-width: 2.5rem;
  max-height: 100%;
  aspect-ratio: 1;
  text-align: center;
  font-size: 1.25rem;
  border-radius: .5rem;
  padding: 0 !important;
}

#QQRGZSELUG .back-btn {
  position: absolute;
  z-index: 2;
}