/* vikpay:crm-brand-assets:v1 */
html.vikpay-crm-auth-page,
html.vikpay-crm-auth-page body,
html.vikpay-crm-auth-page #root {
  min-height: 100%;
}

html.vikpay-crm-auth-page body {
  --t-background-primary: #ffffff !important;
  --t-background-secondary: #f4f7fc !important;
  --t-font-color-primary: #17223a !important;
  --t-font-color-secondary: #44506a !important;
  --t-font-color-tertiary: #6b7890 !important;
  --t-border-color-light: rgba(35, 82, 148, 0.12) !important;
  --t-border-color-medium: rgba(35, 82, 148, 0.2) !important;
  background: #020b1e url('/images/vikpay-crm/login-background.png') center / cover fixed no-repeat !important;
  isolation: isolate;
}

html.vikpay-crm-auth-page body::before {
  position: fixed;
  z-index: 0;
  background: linear-gradient(90deg, rgba(2, 11, 30, 0.25), rgba(2, 11, 30, 0.08));
  content: '';
  inset: 0;
  pointer-events: none;
}

html.vikpay-crm-auth-page body::after {
  position: fixed;
  z-index: 1;
  width: min(430px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 32px));
  border: 1px solid rgba(133, 205, 255, 0.5);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 28px 90px rgba(0, 16, 64, 0.55), 0 0 42px rgba(42, 171, 255, 0.2);
  content: '';
  inset: 50% auto auto 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html.vikpay-crm-auth-page #root {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

html.vikpay-crm-auth-page #root > div {
  background-color: transparent !important;
}

/*
 * Twenty renders the unauthenticated welcome form over a full demo workspace.
 * Keep that workspace mounted for React, but cover it with the reviewed CRM
 * background below Twenty's modal layers (z-index 39/40).
 */
html.vikpay-crm-auth-page #root > .s1nbwame::before {
  position: fixed;
  z-index: 38;
  background: #020b1e url('/images/vikpay-crm/login-background.png') center / cover no-repeat !important;
  content: '';
  inset: 0;
  pointer-events: none;
}

html.vikpay-crm-auth-page .sztoge {
  display: none !important;
}

html.vikpay-crm-auth-page .s1u3xbtx {
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(40, 175, 255, 0.38);
}

@media (max-width: 640px) {
  html.vikpay-crm-auth-page body {
    background-position: 67% center !important;
  }

  html.vikpay-crm-auth-page #root > .s1nbwame::before {
    background-position: 67% center !important;
  }

  html.vikpay-crm-auth-page body::after {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    border-radius: 22px;
  }
}