html:has(.welcome),body:has(.welcome),body:has(.welcome) #root,
html:has(.registration-page),body:has(.registration-page),body:has(.registration-page) #root {
  width: 100%; min-height: 100%; margin: 0 !important; padding: 0 !important;
  background: #061a31 !important;
}
.welcome.welcome {
  box-sizing: border-box !important; width: 100% !important; max-width: none !important;
  min-height: 100dvh !important; height: 100dvh !important; margin: 0 !important;
  border-radius: 0 !important; padding: clamp(16px, 3vh, 32px) 20px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: center !important; overflow: auto !important;
}
.welcome .welcome-single-logo { margin: 0 auto clamp(18px, 3vh, 33px) !important; }
.welcome footer { margin-top: clamp(8px, 2vh, 18px) !important; }
.registration-page {
  box-sizing: border-box !important; width: 100% !important; max-width: none !important;
  min-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important;
  display: grid !important; place-items: center !important; overflow-x: hidden !important;
  background: radial-gradient(circle at 12% 8%, #12bcb433, transparent 31%),
    radial-gradient(circle at 90% 88%, #a6e22e1a, transparent 28%),
    linear-gradient(155deg, #0b3154 0%, #071d35 58%, #041528 100%) !important;
}
.registration-page > main {
  box-sizing: border-box !important; width: min(100%, 660px) !important;
  margin: auto !important; padding: clamp(16px, 3vh, 28px) 18px !important;
  background: transparent !important; color: white !important;
}
.registration-page .registration-intro { text-align: center !important; }
.registration-page .registration-form {
  color: white !important; background: #092743e8 !important;
  border: 1px solid #ffffff24 !important;
}
.registration-page .registration-form label,
.registration-page .registration-form legend { color: #f4fbfd !important; }
.registration-page .registration-form input,
.registration-page .registration-form select,
.registration-page .registration-form textarea {
  color: white !important; -webkit-text-fill-color: white !important;
  caret-color: white !important; background: #0c365b !important;
  border: 1px solid #ffffff29 !important; opacity: 1 !important;
}
.registration-page .registration-form input::placeholder,
.registration-page .registration-form textarea::placeholder {
  color: #9fb8c8 !important; -webkit-text-fill-color: #9fb8c8 !important; opacity: 1 !important;
}
.registration-page .registration-form input:-webkit-autofill {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0 1000px #0c365b inset !important;
}
.registration-page .choice-row { gap: 10px !important; background: transparent !important; padding: 0 !important; }
.registration-page .choice-row button {
  color: #d9e8ee !important; background: #0c365b !important;
  border: 1px solid #ffffff29 !important; border-radius: 10px !important;
}
.registration-page .choice-row button.active {
  color: #062641 !important; background: #12bcb4 !important; border-color: #12bcb4 !important;
}
@media (max-width: 700px) {
  .welcome.welcome { height: auto !important; min-height: 100dvh !important; }
  .registration-page { min-height: 100dvh !important; }
  .registration-page > main { padding: 14px !important; }
}

@media (max-width: 700px) {
  html:has(.auth-page), body:has(.auth-page), body:has(.auth-page) #root {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    overflow-x: clip !important; overscroll-behavior-x: none !important;
  }
  .auth-page {
    box-sizing: border-box !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    overflow-x: clip !important; overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }
  .auth-page *, .auth-page *::before, .auth-page *::after {
    box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important;
  }
}

@media (max-width: 700px) {
  html:has(.welcome), body:has(.welcome), body:has(.welcome) #root {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    overflow-x: clip !important; overscroll-behavior-x: none !important;
  }
  .welcome.welcome {
    box-sizing: border-box !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    overflow-x: clip !important; overflow-y: auto !important;
    overscroll-behavior-x: none !important; touch-action: pan-y !important;
  }
  .welcome.welcome *, .welcome.welcome *::before, .welcome.welcome *::after {
    box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important;
  }
  .welcome .welcome-glow { pointer-events: none !important; }
}