:root {
  --salemx-sky-1: #38d6ff;
  --salemx-sky-2: #1da3ff;
  --salemx-sky-3: #77e7ff;
  --salemx-ink: #0f2f4f;
}

.mx_AuthPage,
.mx_AuthPage_modal,
.mx_SplashPage,
.mx_Welcome {
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(119, 231, 255, 0.45), transparent 70%),
    radial-gradient(1000px 700px at 100% 0%, rgba(29, 163, 255, 0.35), transparent 68%),
    linear-gradient(165deg, #071b2f 0%, #0a2f4f 42%, #0a3a63 100%) !important;
}

.mx_AuthPage .mx_AuthBody {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(119, 231, 255, 0.45) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 64px rgba(2, 15, 30, 0.35) !important;
  backdrop-filter: blur(10px);
}

.mx_AuthPage {
  --cpd-color-bg-accent-rest: #22b4ff;
  --cpd-color-bg-accent-hovered: #169fe5;
  --cpd-color-bg-accent-pressed: #1189c7;
  --cpd-color-border-focused: #22b4ff;
}

.mx_AuthHeader,
.mx_AuthBody,
.mx_AuthFooter {
  color: var(--salemx-ink) !important;
}

.mx_AuthHeaderLogo {
  width: 240px !important;
  height: 56px !important;
  max-width: 92% !important;
  margin: 0 auto 16px auto !important;
  background-image: url('/img/salemx-logo.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_ServerPicker,
.mx_AuthBody .mx_ServerPicker_server,
.mx_AuthBody .mx_ServerPicker_change,
.mx_AuthBody input[type="text"],
.mx_AuthBody input[type="password"],
.mx_AuthBody input[type="email"] {
  border-radius: 14px !important;
}

.mx_AuthBody .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
.mx_AuthBody .mx_AccessibleButton[type="submit"],
.mx_SSOButton_primary,
.mx_SSOButton {
  border-radius: 14px !important;
}

.mx_AuthBody a,
.mx_AuthBody .mx_AccessibleButton_kind_link {
  color: #0f78cc !important;
}

.mx_AuthFooter,
.mx_AuthFooter a {
  color: #d3ecff !important;
}

@media (max-width: 740px) {
  .mx_AuthPage .mx_AuthBody {
    border-radius: 18px !important;
    margin: 12px !important;
  }

  .mx_AuthHeaderLogo {
    width: 210px !important;
    height: 48px !important;
  }
}