body,
.font-graphik {
  font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
}

/* === COMMENTED OUT — replaced by polish block at end of file ===
body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(110.12deg, #FAFCFF 36.58%, #F1F4F8 97.98%);
  padding: 30px;
  height: 100vh;
  overflow: hidden;
}
=== */

/* dynamic class css start*/

.text-black-common {
  color: #0F1014 !important;
}

.text-green-common {
  color: #3FA92B !important;
}

.bg-green-common {
  background-color: #3FA92B !important;
}

.border-green-common {
  border: 2px solid #3FA92B !important;
}

.text-gray-common {
  color: #898A8E !important;
}

.text-danger-common {
  color: #E21D1D !important;
}

.bg-gray-common {
  background-color: #BABBC0 !important;
}

.bg-gray-4-common {
  background-color: #F1F2F4 !important;
}

.border-gray-common {
  border: 1px solid #D3D6DB !important;
}

/* common css start */
.login-form {
  display: flex;
  height: 100%;
  align-items: center;
}

.login-page.forgot-page .login-form .login-img {
  height: -webkit-fill-available;
  padding-top: 60px;
}

.login-page.forgot-page .login-form .login-text {
  padding: 60px 80px;
}

.sign-in-page .login-form .login-img {
  padding: 110px 0px 20px 0px;
}

.login-form .login-img,
.login-form .signup-img {
  padding: 20px 0px 20px 0px;
  display: flex;
}

  .login-form .login-img .login-img-text h2,
  .login-form .signup-img .login-img-text h2 {
    font-weight: 600;
    font-size: 28px;
    line-height: 100%;
  }

  .login-form .login-img .login-img-text p,
  .login-form .signup-img .login-img-text p {
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.5px;
  }

  .login-form .login-img .login-left-dot .main-dot,
  .login-form .signup-img .login-left-dot .main-dot {
    width: 22px;
    height: 6px;
    border-radius: 6px;
    background-color: #0F1014;
  }

  .login-form .login-img .login-left-dot .dot,
  .login-form .signup-img .login-left-dot .dot {
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background-color: #D3D6DB;
  }

.login-form .login-logo {
  margin-bottom: 20px;
}

/* === COMMENTED OUT — replaced by polish block at end of file ===
.login-form .login-text {
  border-radius: 50px;
  position: relative;
  padding: 30px 80px;
  max-height: 100%;
  height: 883px;
  overflow-y: auto;
}
=== */

.login-form .login-text .form-text {
  margin-bottom: 30px;
}

.sign-in-page .login-form .login-text .form-text {
  margin-bottom: 110px;
}

.forget-passwors-page.sign-in-page .login-form .login-text .form-text {
  margin-bottom: 85px;
}

.sign-in-page .login-form .login-text .form-text h2 {
  color: #0F1014;
  font-size: 20px !important;
  font-weight: 600;
}

.sign-in-page .login-form .login-text {
  padding: 80px;
}

.reset-password-page .login-form .login-text {
  height: auto;
}

.reset-password-page.sign-in-page .login-form .login-text form {
  gap: 0;
}

.reset-password-page.sign-in-page .login-form .login-text .form-text {
  margin-bottom: 90px;
}

.sign-in-page .login-form .login-text form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

  .sign-in-page .login-form .login-text form .input-group {
    position: relative;
  }

    .sign-in-page .login-form .login-text form .input-group span.reset-hello {
      font-size: 20px;
      font-weight: 600;
      color: #0F1014;
      margin-bottom: 25px;
    }

    .sign-in-page .login-form .login-text form .input-group .reset-lable {
      font-size: 14px;
      font-weight: 600;
      color: #0F1014;
    }

/* =====================================================================
   VALIDATION ERROR LABELS — Login + Signup pages
   ---------------------------------------------------------------------
   jQuery Validate appends `<label class="error">` after the input (or,
   via the errorPlacement callbacks we set, after the .input-group /
   inside the .field). Render it as a CLEAR red message that sits below
   the field, with a small slide-in animation. Also paints the offending
   input + its .input-group wrapper red.
   ===================================================================== */

/* The error message — RED text, block, sits tight under the field. */
/* SHARED error label look (color/size/weight/animation etc.).
   Layout/margin is set in the page-specific blocks below so SignIn
   and SignUp can each have their own spacing. */
/* label.error message styling centralized in validation-canonical.css */

/* SignIn-only margin (tucks error up into the field above) */
/* label.error message styling centralized in validation-canonical.css */

/* Reset / Forgot password: positive top margin instead of -11px. The negative
   margin made the error label OVERLAP the input above it, and the input's red
   error border crossed straight through the text - looking like a strikethrough.
   Push the error label BELOW the input with a small positive gap. */
/* label.error message styling centralized in validation-canonical.css */

/* SignUp-only margin (small gap below the field, more breathing room) */
/* label.error message styling centralized in validation-canonical.css */

/* When an `.input-group` is followed by a `<label class="error">` on
   the LOGIN form, kill its bottom margin so the error sits TIGHT
   against the input (the error supplies the gap to the next field via
   its own margin-bottom above). This matches the signup form's visual
   density — where the error is INSIDE the `.field` wrapper. */
html body form#form_Login .input-group.mb-3:has(+ label.error),
html body form#form_Login .input-group:has(+ label.error) {
  margin-bottom: 0 !important;
}

@keyframes si-err-in {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide the error label when jQuery Validate flips it back to valid */
/* label.error message styling centralized in validation-canonical.css */

/* Invalid fields: RED BORDER ONLY — no background tint, no shadow/ring.
   The input itself is borderless (the .input-group carries the border), so
   the red border is applied to the group; for dropdowns it's applied to the
   visible control. */
/* === COMMENTED OUT — moved to validation-canonical.css === */
/* All validation styling (red border, transparent bg, no shadow,
   .input-group.has-error wrapper, nice-select/Select2 in field.has-error)
   is now handled project-wide by validation-canonical.css. The universal
   `:is(#__vc__, form, .modal, .modal-body, ...)` rule covers Login,
   Registration, Reset Password and Forgot Password forms too. */
/*
html body form#form_Login .form-control.error,
html body form#form_Login input.error,
html body form#form_Registration .form-control.error,
html body form#form_Registration input.error,
html body form#form_reset_pass .form-control.error,
html body form#form_reset_pass input.error,
html body form#form_forgot_Pass .form-control.error,
html body form#form_forgot_Pass input.error {
  border-color: #dc2626 !important;
  background: transparent !important;
  box-shadow: none !important;
}

  html body form#form_Login .form-control.error:focus,
  html body form#form_Registration .form-control.error:focus,
  html body form#form_reset_pass .form-control.error:focus,
  html body form#form_forgot_Pass .form-control.error:focus {
    border-color: #dc2626 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

html body form#form_Login .input-group.has-error,
html body form#form_Registration .input-group.has-error,
html body form#form_reset_pass .input-group.has-error,
html body form#form_forgot_Pass .input-group.has-error {
  border-color: #dc2626 !important;
  box-shadow: none !important;
}

  html body form#form_Login .input-group.has-error .input-group-text,
  html body form#form_Registration .input-group.has-error .input-group-text,
  html body form#form_reset_pass .input-group.has-error .input-group-text,
  html body form#form_forgot_Pass .input-group.has-error .input-group-text {
    border-color: #dc2626 !important;
  }

html body form#form_Registration .field.has-error .nice-select,
html body form#form_Registration .field.has-error select.error + .nice-select,
html body form#form_Registration .field.has-error .select2-selection,
html body form#form_Registration .field.has-error .select2-container--default .select2-selection--single {
  border-color: #dc2626 !important;
  box-shadow: none !important;
}

html body form#form_Registration .contect-no .input-group.has-error,
html body form#form_Registration .field.contect-no.has-error .input-group {
  border-color: #dc2626 !important;
  box-shadow: none !important;
}

  html body form#form_Registration .contect-no .input-group.has-error .number-select,
  html body form#form_Registration .field.contect-no.has-error .number-select {
    border-color: #dc2626 !important;
    border-right-color: #dc2626 !important;
  }
*/

.sign-in-page .login-form .login-text form .input-group .input-group-prepend span {
  padding: 0 15px;
}

}

.login-form .login-text .form-text h2 {
  font-weight: 600;
  font-size: 20px !important;
  line-height: 160%;
  margin-bottom: 0px;
}

.login-form .login-text .form-text p {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0px;
  margin-top: 5px;
}

.login-tab .nav.nav-pills {
  border: 1px solid #F1F2F4;
  border-radius: 12px;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

  .login-tab .nav.nav-pills .nav-link.active {
    background-color: #0F1014;
    color: #fff !important;
    border-radius: 10px;
  }

.login-tab .tab-content .input-group .input-group-prepend .input-group-text,
.forget-tab .input-group .input-group-prepend .input-group-text {
  border: 1px solid #D3D6DB;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  padding: 14px 18px;
  height: 48px;
  background: #F1F2F4;
}

.login-tab .tab-content .input-group .form-control::placeholder,
.forget-tab .input-group .form-control::placeholder {
  color: #0F1014;
  font-weight: 300;
}

.login-tab .tab-content .input-group .form-control,
.forget-tab .input-group .form-control,
.signup-form-tab .field .input-group .input-select {
  border: 1px solid #D3D6DB;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 20px 12px;
  height: 48px;
  font-size: 14px;
}

  .login-tab .tab-content .input-group .form-control.login-password {
    border-radius: 0px;
    border-right: 0px;
    height: 48px;
  }

.login-tab .tab-content .input-group .input-group-append .input-group-text {
  border: 1px solid #D3D6DB;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 9px 12px;
  background-color: transparent;
  border-left: 0px;
  height: 48px;
  cursor: pointer;
}

.form-footer {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

  .form-footer .switch {
    --w: 40px;
    --h: 20px;
    display: inline-grid;
    align-items: center;
    margin: 0px;
  }

    .form-footer .switch input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

  .form-footer .track {
    width: var(--w);
    height: var(--h);
    background: #ccc;
    border-radius: calc(var(--h) / 2);
    position: relative;
    transition: background .18s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  .form-footer .knob {
    width: calc(var(--h) - 6px);
    height: calc(var(--h) - 6px);
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform .18s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  .form-footer .switch input:checked + .track {
    background: #4caf50;
  }

    .form-footer .switch input:checked + .track .knob {
      transform: translateX(calc(var(--w) - var(--h)));
    }

  .form-footer .switch input:focus + .track {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.18);
  }

  .form-footer .remeber span {
    font-size: 14px;
    color: #0F1014;
  }

  .form-footer .remeber {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Remember me — standard checkbox (replaces the old toggle switch). */
  .form-footer .si-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #3FA92B;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .form-footer .si-remember label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #0F1014;
    cursor: pointer;
  }

  .form-footer .forget span {
    font-size: 14px;
    color: #E21D1D;
    cursor: pointer;
  }

.login-btn button {
  width: 100%;
  background: linear-gradient(97.06deg, #76D164 -0.73%, #3FA92B 92.81%);
  border: 1px solid #3FA92B;
  padding: 8px 14px;
  border-radius: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

  .login-btn button:hover {
    background: #3FA92B;
  }

  .login-btn button:focus {
    outline: 0px;
  }

  .login-btn button span {
    width: 100%;
  }

  .login-btn button .login-arrow {
    width: 31px;
    height: 31px;
    border-radius: 8px;
    background: #FFFFFF33;
    padding: 5px;
    display: flex;
  }

.new-account-link span,
.login-note .login-note-link span {
  color: #0F1014;
  font-weight: 400;
}

  .new-account-link span a,
  .login-note .login-note-link span a {
    color: #3FA92B;
    text-decoration: none;
    font-weight: 600;
  }

.login-note {
  position: absolute;
  bottom: 15px;
  left: 0px;
  right: 0px;
  font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
  font-weight: 200;
}

  .login-note .login-note-link span {
    color: #898A8E;
  }

    .login-note .login-note-link span a {
      font-weight: 200;
      color: #3FA92B;
      text-decoration: none;
    }

.signup-form-tab {
  margin-top: 30px;
  /* height: 400px; */
  overflow: hidden;
  overflow-y: auto;
}

  .signup-form-tab .signup-form-inner {
    padding-right: 10px;
  }

  .signup-form-tab .field .form-label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 6px;
    color: #0F1014;
  }

    .signup-form-tab .field .form-label span {
      color: #E21D1D;
    }

  .signup-form-tab .field .input-group input,
  .signup-form-tab .field .input-group .input-select {
    width: 100%;
    padding: 5px 12px;
    font-size: 14px;
    border: 1px solid #D3D6DB;
    border-radius: 12px;
    background: #FFFFFF;
    color: #0F1014;
    height: 41px;
  }

.login-page .select2-container--default .select2-selection--single {
  height: 41px;
}

.signup-form-tab .field .input-group input::placeholder {
  color: #898A8E;
  font-weight: 300;
}

.signup-form-tab .signup-password.field .input-group .input-group-append .input-group-text {
  position: absolute;
  border: 0px;
  right: -1px;
  bottom: 0;
  height: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
  background: transparent;
}

.signup-form-tab .field .input-group input:focus {
  background-color: transparent;
  box-shadow: none;
}

.signup-form-tab .contect-no .input-group input.form-control {
  width: auto;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.signup-form-tab .contect-no .input-group .number-select {
  width: 80px;
  background-color: #F1F2F4;
  border: 1px solid #D3D6DB;
  border-right: 0px;
  color: #0F1014;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 41px;
  padding: 0px 10px;
}

  .signup-form-tab .contect-no .input-group .number-select select.nice-select {
    width: 60px;
    height: 38px;
    padding: 0px;
    background-color: transparent;
    border: 0px;
  }

.signup-form-tab .field .input-group .input-select select {
  height: 26px;
  border: 0px;
  width: 100%;
  padding: 0px;
}

.signup-form-tab::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #e2e2e2;
}

.signup-form-tab::-webkit-scrollbar {
  width: 5px;
}

.signup-form-tab::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #555;
}

.login-page .select2-container--default .select2-selection--single {
  background: transparent !important;
  border: none !important;
}

.login-page .select2.select2-container.select2-container--default {
  position: absolute;
  top: 0;
  left: 0;
}

.login-page .contect-no .select2.select2-container.select2-container--default {
  width: 80px !important;
}

.login-page .contect-no .select2-container--default .select2-selection--single:hover {
  background: transparent !important;
  border: none !important;
}

.login-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.6;
  font-size: 14px;
}

/* `.login-page label.error` legacy absolute-positioning rule removed —
   it was orphaned (no markup has `.login-page` class anymore) but kept
   defining `position: absolute; bottom: -18px` which fought the modern
   canonical rule above. */

.form-control:focus {
  box-shadow: none !important;
}


.rest-form-tab .input-group .form-label span {
  color: #E21D1D;
}

/* `.reset-password-page label.error` legacy absolute-positioning rule
   removed — same reason as above. Modern canonical rule flows it in
   document order below the input. */

body.animsition {
  height: 100vh !important;
}

/* === COMMENTED OUT — replaced by polish block at end of file ===
.register-main-page .login-form.d-flex.sign-up,
.login-form
{
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100% !important;
}
=== */


/* ==========================================================================
   LOGIN PAGE — FINAL FRESH DESIGN
   --------------------------------------------------------------------------
   Earlier conflicting rules in this file have been commented out
   (body padding/height, .login-text fixed height, the
   transform-translate centering hack). This block is now the only
   authority on the login layout.

   Design: full-bleed two-column split, left = green hero with
   illustration, right = clean white form. No outer card border or
   shadow — the page itself is the surface.
   ========================================================================== */

/* --- Reset html/body to fill the viewport ------------------------- */
html,
html body,
html body.animsition,
html body.animsition.layout-full {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  min-height: 100vh !important;
  background: #ffffff !important;
  overflow-x: clip !important;
}

  /* --- Page wrapper --- */
  html body .page.sign-in-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
  }

    html body .page.sign-in-page > .page-content {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

  /* --- The 2-column split — defeats Bootstrap col-lg-6 widths -------- */
  html body .login-form,
  html body .login-form.d-flex {
    display: flex !important;
    flex-direction: row !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    /* Cancel any legacy absolute-position centering */
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

    /* --- LEFT — Pale mint hero panel (full height, 55% width) -------------
   Light brand-aligned background using the project's emerald-green family
   at its palest stops. The green character + dashboard in the SVG sit
   against a soft mint wash that feels fresh and premium without
   competing for attention. Text + dots are recoloured to dark slate /
   brand green below so they remain readable on the light surface. */
    html body .login-form .login-img,
    html body .login-form > .login-img.col-md-12.col-lg-6.col-xl-6.col-xxl-6 {
      flex: 0 0 55% !important;
      max-width: 55% !important;
      width: 55% !important;
      height: 100vh !important;
      padding: 56px 56px !important;
      margin: 0 !important;
      /* Mesh-gradient stack: six floating radial blobs of varying green
       tones layered over the pale mint linear-gradient. Creates depth
       and organic colour movement without any image asset. */
      background: radial-gradient(380px 320px at 18% 12%, rgba(118, 209, 100, .35), transparent 65%), radial-gradient(460px 380px at 92% 22%, rgba(63, 169, 43, .22), transparent 70%), radial-gradient(520px 420px at 6% 78%, rgba(45, 122, 31, .18), transparent 70%), radial-gradient(420px 360px at 88% 92%, rgba(167, 243, 208, .55), transparent 65%), radial-gradient(680px 520px at 100% 0%, rgba(118, 209, 100, .12), transparent 60%), radial-gradient(600px 460px at 0% 100%, rgba(63, 169, 43, .10), transparent 60%), linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 50%, #DCFCE7 100%) !important;
      color: #14532D !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: space-between !important;
      position: relative !important;
      overflow: hidden !important;
      border: 0 !important;
      border-radius: 0 !important;
    }

      /* Decorative dot grid (green dots, top-right corner). Brand-green
   dots at a balanced opacity - visible enough to read as intentional
   texture, soft enough to feel ambient rather than busy. */
      html body .login-form .login-img::before {
        content: "" !important;
        position: absolute !important;
        right: -120px !important;
        top: -120px !important;
        width: 460px !important;
        height: 460px !important;
        background-image: radial-gradient(circle, rgba(63, 169, 43, .55) 1.5px, transparent 1.8px) !important;
        background-size: 22px 22px !important;
        transform: rotate(-12deg) !important;
        pointer-events: none !important;
        opacity: .70 !important;
        z-index: 0 !important;
        animation: loginDotsDrift 14s ease-in-out infinite !important;
      }
      /* Soft glow blob (green, bottom-left corner). Gentle pulse so the
   panel breathes without being distracting. */
      html body .login-form .login-img::after {
        content: "" !important;
        position: absolute !important;
        left: -140px !important;
        bottom: -140px !important;
        width: 480px !important;
        height: 480px !important;
        background: radial-gradient(circle at center, rgba(118, 209, 100, .35), rgba(63, 169, 43, .12) 50%, transparent 75%) !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        z-index: 0 !important;
        filter: blur(10px) !important;
        animation: loginGlowPulse 9s ease-in-out infinite !important;
      }

/* Gentle animations */
@keyframes loginDotsDrift {
  0%, 100% {
    transform: rotate(-12deg) translate(0, 0);
  }

  50% {
    transform: rotate(-9deg) translate(-8px, 6px);
  }
}

@keyframes loginGlowPulse {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }

  50% {
    transform: scale(1.08) translate(8px, -10px);
    opacity: .85;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .login-form .login-img::before,
  html body .login-form .login-img::after {
    animation: none !important;
  }
}

/* Tagline — premium block with chip badge above and decorative accents */
html body .login-form .login-img .login-img-text {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  max-width: 640px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}

  /* "Welcome Back" pill chip ABOVE the heading — via ::before.
   Recoloured for the pale mint panel: emerald-tinted glass surface
   with brand-green text + 1px green border. The translucent
   background still uses backdrop-filter blur so the underlying
   green blobs subtly show through the chip. */
  html body .login-form .login-img .login-img-text::before {
    content: "✨ Welcome Back" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .80) 0%, rgba(240, 253, 244, .65) 100%) !important;
    border: 1px solid rgba(63, 169, 43, .35) !important;
    border-radius: 999px !important;
    color: #166534 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 4px 10px rgba(63, 169, 43, .15), 0 1px 2px rgba(15, 23, 42, .04) !important;
    margin: 0 !important;
  }

  /* Heading — bigger, sharper, with the markup `<br>` rendered as a real
   line break (forces "A few more clicks to sign in" on line 1 and
   "to your account." on line 2, both centered).
   `text-wrap: balance` keeps each line close in length so a single
   word doesn't end up orphaned on its own line. */
  html body .login-form .login-img .login-img-text h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    /* Dark-emerald gradient text - tints the heading toward the green
       theme while staying readable. Falls back to a deep emerald on
       browsers without background-clip:text support. */
    color: #14532D !important;
    background: linear-gradient(135deg, #14532D 0%, #166534 50%, #2D7A1F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: -0.7px !important;
    line-height: 1.22 !important;
    margin: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
    width: 100% !important;
    position: relative !important;
  }
    /* Make the markup `<br>` an explicit block break with extra breathing
   room, so the two halves of the heading sit on their own lines. */
    html body .login-form .login-img .login-img-text h2 br {
      display: block !important;
      content: "" !important;
      margin: 6px 0 !important;
      line-height: 0 !important;
    }
    /* Decorative gradient underline pill below the heading */
    html body .login-form .login-img .login-img-text h2::after {
      content: "" !important;
      display: block !important;
      width: 60px !important;
      height: 4px !important;
      border-radius: 999px !important;
      background: linear-gradient(90deg, #3FA92B 0%, rgba(63, 169, 43, .35) 100%) !important;
      margin: 14px auto 0 auto !important;
      box-shadow: 0 2px 6px rgba(63, 169, 43, .22) !important;
    }

  /* Subtitle — softer, longer leading. Forest-green slate so the text
   colour cohabits with the mint background instead of feeling like
   neutral grey on green. */
  html body .login-form .login-img .login-img-text p {
    font-size: 16px !important;
    color: #166534 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    max-width: 440px !important;
    opacity: 0.85 !important;
  }

/* Hero illustration */
html body .login-form .login-img .login-sub-img {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  padding: 32px 0 !important;
  margin: 0 !important;
}

  html body .login-form .login-img .login-sub-img img {
    max-width: 440px !important;
    width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, .22)) !important;
  }

/* Page indicator dots */
html body .login-form .login-img .login-left-dot {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

  html body .login-form .login-img .login-left-dot .main-dot {
    width: 32px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #76D164, #3FA92B) !important;
    margin: 0 !important;
    box-shadow: 0 2px 6px rgba(63, 169, 43, .25) !important;
  }

  html body .login-form .login-img .login-left-dot .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(63, 169, 43, .35) !important;
    margin: 0 !important;
  }

/* --- RIGHT — Form panel (full height, 45% width) ------------------ */
html body .login-form .login-text,
html body .login-form > .login-text.col-md-12.col-lg-6.col-xl-6.col-xxl-5,
html body .sign-in-page .login-form .login-text {
  flex: 0 0 45% !important;
  max-width: 45% !important;
  width: 45% !important;
  height: 100vh !important;
  background: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  position: relative !important;
}

  /* Inner form wrapper — constrained centred column */
  html body .login-form .login-text > * {
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Logo */
  html body .login-form .login-text .login-logo {
    margin: 0 0 28px 0 !important;
    padding-top: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

    html body .login-form .login-text .login-logo img {
      height: 50px !important;
      width: auto !important;
    }

  /* Heading */
  html body .login-form .login-text .form-text,
  html body .sign-in-page .login-form .login-text .form-text {
    margin: 0 0 26px 0 !important;
    text-align: left !important;
  }

    html body .login-form .login-text .form-text h2,
    html body .sign-in-page .login-form .login-text .form-text h2 {
      font-size: 20px !important;
      font-weight: 800 !important;
      letter-spacing: -0.6px !important;
      line-height: 1.18 !important;
      margin: 0 0 8px 0 !important;
      background: linear-gradient(135deg, #0F1014 0%, #2D7A1F 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      text-transform: none !important;
    }

    html body .login-form .login-text .form-text p {
      font-size: 14px !important;
      color: #6b7688 !important;
      font-weight: 500 !important;
      margin: 0 !important;
      line-height: 1.5 !important;
    }

  /* Form layout */
  html body .login-form .signin-form-tab,
  html body .sign-in-page .login-form .login-text form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 0 !important;
  }

    /* --- Inputs (54px pill, mint focus ring) -------------------------- */
    html body .login-form .signin-form-tab .input-group {
      background: #ffffff !important;
      border: 1.5px solid #E1E5EF !important;
      border-radius: 14px !important;
      height: 54px !important;
      overflow: hidden !important;
      transition: border-color .18s, box-shadow .18s !important;
      margin: 0 !important;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
      flex-wrap: nowrap !important;
    }

      html body .login-form .signin-form-tab .input-group:focus-within {
        border-color: #3FA92B !important;
        box-shadow: 0 0 0 4px rgba(63, 169, 43, .12) !important;
      }

    /* Mint icon-tile prepend */
    html body .login-form .signin-form-tab .input-group-prepend {
      margin: 0 !important;
    }

      html body .login-form .signin-form-tab .input-group-prepend .input-group-text,
      html body .login-tab .tab-content .input-group .input-group-prepend .input-group-text {
        background: #f6f6f6 !important;
        border: 0 !important;
        border-right: 1.5px solid #E1E5EF !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 54px !important;
        border-radius: 0 !important;
      }

        html body .login-form .signin-form-tab .input-group-prepend .input-group-text img {
          width: 18px !important;
          height: 18px !important;
          object-fit: contain !important;
          margin: 0 !important;
          /* Grey (#6b7688) — neutral so the icon doesn't compete with the
       form's brand-green focus accent. */
          filter: brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(420%) hue-rotate(176deg) brightness(94%) contrast(89%) !important;
        }

    /* Native input */
    html body .login-form .signin-form-tab .input-group .form-control,
    html body .login-tab .tab-content .input-group .form-control,
    html body .login-tab .tab-content .input-group .form-control.login-password {
      border: 0 !important;
      background: transparent !important;
      height: 100% !important;
      font-size: 14.5px !important;
      font-weight: 500 !important;
      color: #0F1014 !important;
      padding: 0 16px !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0 !important;
    }

      html body .login-form .signin-form-tab .input-group .form-control:focus {
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
      }

      html body .login-form .signin-form-tab .input-group .form-control::placeholder {
        color: #97a3b6 !important;
        font-weight: 500 !important;
      }

    /* Password show/hide eye */
    html body .login-form .signin-form-tab .input-group-append {
      margin: 0 !important;
    }

      html body .login-form .signin-form-tab .input-group-append .input-group-text,
      html body .login-tab .tab-content .input-group .input-group-append .input-group-text {
        background: #f6f6f6 !important;
        border: 0 !important;
        border-left: 1.5px solid #E1E5EF !important;
        padding: 0 16px !important;
        height: 100% !important;
        cursor: pointer !important;
        transition: background .18s !important;
        border-radius: 0 !important;
      }

        html body .login-form .signin-form-tab .input-group-append .input-group-text:hover {
          background: #f6f6f6 !important;
        }

html body .login-form #togglePassword {
  cursor: pointer !important;
  width: 18px !important;
  height: 18px !important;
  filter: brightness(0) saturate(100%) invert(50%) !important;
  transition: filter .18s !important;
}

  html body .login-form #togglePassword:hover {
    filter: brightness(0) saturate(100%) invert(45%) sepia(81%) saturate(528%) hue-rotate(74deg) brightness(95%) contrast(91%) !important;
  }

/* --- Footer row (Remember + Forgot) ------------------------------- */
html body .login-form .form-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 4px 0 !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
}

  html body .login-form .form-footer .remeber {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

    html body .login-form .form-footer .remeber span {
      font-size: 13.5px !important;
      color: #1a2236 !important;
      font-weight: 600 !important;
    }

  /* iOS-style switch — 44×26 */
  html body .login-form .form-footer .switch {
    --w: 44px !important;
    --h: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

    html body .login-form .form-footer .switch .track {
      width: var(--w) !important;
      height: var(--h) !important;
      background: #cbd5e1 !important;
      border-radius: 999px !important;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08) !important;
      transition: background .25s ease !important;
    }

    html body .login-form .form-footer .switch .knob {
      width: 20px !important;
      height: 20px !important;
      background: #ffffff !important;
      border-radius: 50% !important;
      top: 3px !important;
      left: 3px !important;
      box-shadow: 0 2px 4px rgba(15, 23, 42, .2) !important;
      transition: transform .25s cubic-bezier(.34, 1.56, .64, 1) !important;
    }

    html body .login-form .form-footer .switch input:checked + .track {
      background: linear-gradient(135deg, #76D164 0%, #3FA92B 100%) !important;
    }

      html body .login-form .form-footer .switch input:checked + .track .knob {
        transform: translateX(18px) !important;
      }

  /* "Forgot Password?" */
  html body .login-form .form-footer .forget a {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #2D7A1F !important;
    text-decoration: none !important;
    transition: color .18s !important;
  }

    html body .login-form .form-footer .forget a span {
      font-size: 13.5px !important;
      color: inherit !important;
      cursor: pointer !important;
    }

    html body .login-form .form-footer .forget a:hover,
    html body .login-form .form-footer .forget a:hover span {
      color: #1f6b15 !important;
      text-decoration: underline !important;
    }

/* --- Login button ------------------------------------------------- */
html body .login-form .login-btn {
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
}

  html body .login-form .login-btn button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    height: 54px !important;
    padding: 0 8px 0 28px !important;
    border-radius: 14px !important;
    background: linear-gradient(97deg, #76D164, #3FA92B) !important;
    color: #ffffff !important;
    border: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 22px rgba(63, 169, 43, .30), 0 1px 0 rgba(255, 255, 255, .35) inset !important;
    transition: background .2s, transform .2s, box-shadow .2s !important;
  }

    html body .login-form .login-btn button:hover {
      background: linear-gradient(97deg, #82d670, #46b631) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 14px 32px rgba(63, 169, 43, .40), 0 1px 0 rgba(255, 255, 255, .35) inset !important;
    }

    html body .login-form .login-btn button span {
      color: #ffffff !important;
      font-weight: 800 !important;
      flex: 1 1 auto !important;
      text-align: center !important;
      width: auto !important;
    }

  html body .login-form .login-btn .login-arrow {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .22) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    transition: transform .25s !important;
  }

  html body .login-form .login-btn button:hover .login-arrow {
    transform: translateX(5px) !important;
  }

  html body .login-form .login-btn .login-arrow img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) invert(1) !important;
  }

/* --- Bottom links ------------------------------------------------- */
html body .login-form .new-account-link {
  margin: 24px 0 0 0 !important;
  text-align: center !important;
  font-size: 13.5px !important;
  color: #6b7688 !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

  html body .login-form .new-account-link span {
    color: #6b7688 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
  }

    html body .login-form .new-account-link a,
    html body .login-form .new-account-link span a {
      color: #2D7A1F !important;
      font-weight: 800 !important;
      text-decoration: none !important;
      transition: color .18s !important;
    }

      html body .login-form .new-account-link a:hover {
        color: #1f6b15 !important;
        text-decoration: underline !important;
      }

html body .login-form .login-note {
  position: static !important;
  margin: -19px 0 53px 0 !important;
  padding: 16px 0 0 0 !important;
  border-top: 1px dashed #eef0f4 !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

  html body .login-form .login-note .login-note-link {
    text-align: center !important;
  }

    html body .login-form .login-note .login-note-link span,
    html body .forget-passwors-page .login-form .login-note .login-note-link span,
    html body .login-page .login-form .login-note .login-note-link span,
    html body .login-form.sign-up .login-note .login-note-link span {
      font-size: 11.5px !important;
      color: #97a3b6 !important;
      font-weight: 500 !important;
      line-height: 1.5 !important;
      white-space: nowrap !important;
      display: inline-block !important;
      max-width: none !important;
      overflow: visible !important;
    }

      html body .login-form .login-note .login-note-link span a {
        color: #475569 !important;
        text-decoration: underline !important;
        font-weight: 600 !important;
        transition: color .18s !important;
      }

        html body .login-form .login-note .login-note-link span a:hover {
          color: #2D7A1F !important;
        }

/* --- Responsive -------------------------------------------------- */
@media (max-width: 1199px) {
  html body .login-form .login-img {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding: 44px 36px !important;
  }

  html body .login-form .login-text {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  html body .login-form .login-img .login-img-text h2 {
    font-size: 28px !important;
  }

  html body .login-form .login-img .login-sub-img img {
    max-width: 360px !important;
  }
}

@media (max-width: 991px) {
  html,
  html body,
  html body.animsition.layout-full {
    overflow-y: auto !important;
    height: auto !important;
  }

    html body .page.sign-in-page {
      height: auto !important;
      min-height: 100vh !important;
      overflow: visible !important;
    }

    html body .login-form,
    html body .login-form.d-flex {
      flex-direction: column !important;
      height: auto !important;
      min-height: 100vh !important;
    }

      html body .login-form .login-img,
      html body .login-form .login-text {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        padding: 36px 24px !important;
      }

      html body .login-form .login-img {
        min-height: 320px !important;
      }

        html body .login-form .login-img .login-sub-img img {
          max-width: 220px !important;
        }

        html body .login-form .login-img .login-img-text h2 {
          font-size: 22px !important;
        }

      html body .login-form .login-text .form-text h2 {
        font-size: 24px !important;
      }
}

/* --- Login stacking fix (<=991px) ------------------------------------
   The desktop panel widths are pinned with a very high-specificity
   selector that includes the Bootstrap col-* classes (see the "2-column
   split" block: `.login-form > .login-img.col-md-12.col-lg-6.col-xl-6.col-xxl-6`).
   The Login page's panels carry ALL of those classes, so the generic
   `.login-form .login-img` stacking rules above can't beat them and the
   page stays 2-column (panels overlap). Re-assert the stack here at
   matching specificity so Login collapses to one column like Forgot/Reset. */
@media (max-width: 991px) {
  /* BULLETPROOF STACK: make the container a normal BLOCK box. Its two
       children then stack in normal document flow and physically cannot
       overlap, regardless of any leftover flex/position rules. */
  html body .sign-in-page .login-form,
  html body .sign-in-page .login-form.d-flex {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
    /* Both panels: in-flow, full width, content height. position:static +
       float:none defeats any absolute/float positioning that was pulling a
       panel out of flow and on top of the other. */
    html body .sign-in-page .login-form > .login-img.col-md-12.col-lg-6.col-xl-6.col-xxl-6,
    html body .sign-in-page .login-form > .login-text.col-md-12.col-lg-6.col-xl-6.col-xxl-5 {
      position: static !important;
      float: none !important;
      transform: none !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
    }
    /* Hero panel: pack content at the top (kill space-between spreading). */
    html body .sign-in-page .login-form > .login-img.col-md-12.col-lg-6.col-xl-6.col-xxl-6 {
      justify-content: flex-start !important;
      padding: 28px 24px !important;
    }
    /* The terms note is position:absolute on desktop (pinned to the form
       panel); let it flow normally at the end when stacked. */
    html body .sign-in-page .login-form .login-text .login-note {
      position: static !important;
    }
    /* Hide the decorative illustration + carousel dots in the stacked
       layout — they overlapped the form and aren't needed on small
       screens. The green hero text + logo carry the branding. */
    html body .sign-in-page .login-form .login-img .login-sub-img,
    html body .sign-in-page .login-form .login-img .login-left-dot {
      display: none !important;
    }
    /* Desktop form-text uses a huge ~110px bottom gap that looks broken
       when stacked — tighten it. */
    html body .sign-in-page .login-form .login-text .form-text {
      margin-bottom: 18px !important;
    }
}

/* --- Phones (<=575px) -------------------------------------------------
   On the stacked layout the illustration panel sits ON TOP of the form,
   so on small phones it pushes the login/forgot form below the fold.
   Shrink that panel (no 320px min-height, smaller art) so the form is the
   focus, and tighten spacing. Scoped to the sign-in-flavoured pages
   (Login / Forgot / Reset) — the signup form has its own rules. --- */
@media (max-width: 575.98px) {
  html body .sign-in-page .login-form .login-img {
    min-height: auto !important;
    padding: 22px 18px !important;
  }

    html body .sign-in-page .login-form .login-img .login-sub-img img {
      max-width: 150px !important;
    }

    html body .sign-in-page .login-form .login-img .login-img-text h2 {
      font-size: 18px !important;
      line-height: 1.3 !important;
    }

    html body .sign-in-page .login-form .login-img .login-img-text p {
      font-size: 13px !important;
    }

  html body .sign-in-page .login-form .login-text {
    padding: 28px 18px !important;
  }

    html body .sign-in-page .login-form .login-text .form-text h2 {
      font-size: 20px !important;
    }
}


/* --- Forgot Password page (<=991px) ----------------------------------
   The forgot page shares the .sign-in-page layout, but its panels carry
   only `.col-lg-6` (not the full col-* set the login page uses), so the
   high-specificity login stacking fix above doesn't target them. Re-assert
   the bulletproof block stack explicitly so it collapses to one column. */
@media (max-width: 991px) {
  html body .page.forgot-page,
  html body .page.forget-passwors-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  html body .forgot-page .login-form,
  html body .forgot-page .login-form.d-flex,
  html body .forget-passwors-page .login-form,
  html body .forget-passwors-page .login-form.d-flex {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

    html body .forgot-page .login-form > .login-img,
    html body .forgot-page .login-form > .login-text,
    html body .forget-passwors-page .login-form > .login-img,
    html body .forget-passwors-page .login-form > .login-text {
      position: static !important;
      float: none !important;
      transform: none !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
    }

    html body .forgot-page .login-form > .login-img,
    html body .forget-passwors-page .login-form > .login-img {
      justify-content: flex-start !important;
      padding: 28px 24px !important;
    }
    /* Hide the decorative illustration + dots on small screens. */
    html body .forgot-page .login-form .login-img .login-sub-img,
    html body .forgot-page .login-form .login-img .login-left-dot,
    html body .forget-passwors-page .login-form .login-img .login-sub-img,
    html body .forget-passwors-page .login-form .login-img .login-left-dot {
      display: none !important;
    }
    /* Terms note flows normally when stacked. */
    html body .forgot-page .login-form .login-note,
    html body .forget-passwors-page .login-form .login-note {
      position: static !important;
    }
}


/* Forgot Password — the terms note (.login-note) is position:absolute and,
   on this short form, it overlaps the "Log In" link and was swallowing its
   clicks (the click never reached the <a>). Let clicks pass THROUGH the
   note's empty area (its own links stay clickable) and lift the Log In link
   above it so it's reliably clickable. Applies at all sizes. */
html body .forgot-page .login-note,
html body .forget-passwors-page .login-note {
  pointer-events: none !important;
}

  html body .forgot-page .login-note a,
  html body .forget-passwors-page .login-note a {
    pointer-events: auto !important;
  }

html body .forgot-page .new-account-link,
html body .forget-passwors-page .new-account-link {
  position: relative !important;
  z-index: 5 !important;
}

  html body .forgot-page .new-account-link a,
  html body .forget-passwors-page .new-account-link a {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
  }


/* ==========================================================================
   SIGN-UP PAGE — FULL-BLEED PREMIUM DESIGN
   --------------------------------------------------------------------------
   Same vocabulary as the login polish above, adapted for the signup
   markup (different class names: `.signup-img`, `.login-form.sign-up`,
   labeled inputs without a prepend icon tile, select2 dropdowns).
   The page body has class `login-page` (not `sign-in-page`).
   ========================================================================== */

/* --- Page wrapper for signup ---------------------------------------- */
html body .page.login-page {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
  position: relative !important;
}

  html body .page.login-page > .page-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

/* --- 2-column split, full bleed ------------------------------------ */
html body .login-form.sign-up,
html body .login-form.sign-up.d-flex {
  display: flex !important;
  flex-direction: row !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}
  /* Inner wrapper (styles defaults to margin:auto) — defeat that */
  html body .login-form.sign-up .sign-up-inner-block,
  html body .login-form.sign-up .sign-up-inner-block.d-flex {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  /* --- LEFT — Green hero panel (55%) --------------------------------- */
  html body .login-form.sign-up .signup-img {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    width: 55% !important;
    height: 100vh !important;
    padding: 56px 56px !important;
    margin: 0 !important;
    /* Pale mint hero (matches SignIn) + mesh-gradient stack of green
       radial blobs for organic depth without an image. */
    background: radial-gradient(380px 320px at 18% 12%, rgba(118, 209, 100, .35), transparent 65%), radial-gradient(460px 380px at 92% 22%, rgba(63, 169, 43, .22), transparent 70%), radial-gradient(520px 420px at 6% 78%, rgba(45, 122, 31, .18), transparent 70%), radial-gradient(420px 360px at 88% 92%, rgba(167, 243, 208, .55), transparent 65%), radial-gradient(680px 520px at 100% 0%, rgba(118, 209, 100, .12), transparent 60%), radial-gradient(600px 460px at 0% 100%, rgba(63, 169, 43, .10), transparent 60%), linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 50%, #DCFCE7 100%) !important;
    color: #14532D !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
    /* Decorative dot grid - brand-green dots at balanced opacity. */
    html body .login-form.sign-up .signup-img::before {
      content: "" !important;
      position: absolute !important;
      right: -120px !important;
      top: -120px !important;
      width: 460px !important;
      height: 460px !important;
      background-image: radial-gradient(circle, rgba(63, 169, 43, .55) 1.5px, transparent 1.8px) !important;
      background-size: 22px 22px !important;
      transform: rotate(-12deg) !important;
      pointer-events: none !important;
      opacity: .70 !important;
      z-index: 0 !important;
      animation: loginDotsDrift 14s ease-in-out infinite !important;
    }
    /* Soft glow blob - green pulse, bottom-left corner. */
    html body .login-form.sign-up .signup-img::after {
      content: "" !important;
      position: absolute !important;
      left: -140px !important;
      bottom: -140px !important;
      width: 480px !important;
      height: 480px !important;
      background: radial-gradient(circle at center, rgba(118, 209, 100, .35), rgba(63, 169, 43, .12) 50%, transparent 75%) !important;
      border-radius: 50% !important;
      pointer-events: none !important;
      z-index: 0 !important;
      filter: blur(10px) !important;
      animation: loginGlowPulse 9s ease-in-out infinite !important;
    }
    /* Tagline — premium block with chip badge above and decorative accents */
    html body .login-form.sign-up .signup-img .login-img-text {
      position: relative !important;
      z-index: 1 !important;
      text-align: center !important;
      max-width: 640px !important;
      width: 100% !important;
      margin: 0 auto !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 14px !important;
    }

      /* "Get Started" pill chip - frosted-glass on the pale mint panel. */
      html body .login-form.sign-up .signup-img .login-img-text::before {
        content: "✨ Get Started" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 14px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, .80) 0%, rgba(240, 253, 244, .65) 100%) !important;
        border: 1px solid rgba(63, 169, 43, .35) !important;
        border-radius: 999px !important;
        color: #166534 !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        letter-spacing: 1.4px !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        box-shadow: 0 4px 10px rgba(63, 169, 43, .15), 0 1px 2px rgba(15, 23, 42, .04) !important;
        margin: 0 !important;
      }

      /* Heading - dark-emerald gradient text on the pale mint panel. */
      html body .login-form.sign-up .signup-img .login-img-text h2 {
        font-size: 36px !important;
        font-weight: 800 !important;
        color: #14532D !important;
        background: linear-gradient(135deg, #14532D 0%, #166534 50%, #2D7A1F 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        letter-spacing: -0.7px !important;
        line-height: 1.22 !important;
        margin: 0 !important;
        text-shadow: none !important;
        text-transform: none !important;
        text-align: center !important;
        text-wrap: balance !important;
        white-space: normal !important;
        width: 100% !important;
        position: relative !important;
      }
        /* Force the markup `<br>` to act as a real line break with breathing room */
        html body .login-form.sign-up .signup-img .login-img-text h2 br {
          display: block !important;
          content: "" !important;
          margin: 6px 0 !important;
          line-height: 0 !important;
        }
        /* Decorative brand-green pill below the heading. */
        html body .login-form.sign-up .signup-img .login-img-text h2::after {
          content: "" !important;
          display: block !important;
          width: 60px !important;
          height: 4px !important;
          border-radius: 999px !important;
          background: linear-gradient(90deg, #3FA92B 0%, rgba(63, 169, 43, .35) 100%) !important;
          margin: 14px auto 0 auto !important;
          box-shadow: 0 2px 6px rgba(63, 169, 43, .22) !important;
        }

      /* Subtitle - forest-green on mint, slight opacity. */
      html body .login-form.sign-up .signup-img .login-img-text p {
        font-size: 16px !important;
        color: #166534 !important;
        margin: 0 !important;
        line-height: 1.6 !important;
        font-weight: 500 !important;
        letter-spacing: 0.1px !important;
        max-width: 440px !important;
        opacity: 0.85 !important;
      }

    /* Mark "e-commerce accounts in one place" with a subtle highlight on
   hover — uses a pseudo highlight chip if we ever add a span. */
    /* Hero illustration */
    html body .login-form.sign-up .signup-img .login-sub-img {
      position: relative !important;
      z-index: 1 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      padding: 32px 0 !important;
      margin: 0 !important;
    }

      html body .login-form.sign-up .signup-img .login-sub-img img {
        max-width: 440px !important;
        width: 100% !important;
        height: auto !important;
        filter: drop-shadow(0 14px 28px rgba(15, 23, 42, .22)) !important;
      }
    /* Page indicator dots — note dot order is reversed on signup vs login */
    html body .login-form.sign-up .signup-img .login-left-dot {
      position: relative !important;
      z-index: 1 !important;
      display: inline-flex !important;
      gap: 10px !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
    }

      html body .login-form.sign-up .signup-img .login-left-dot .main-dot {
        width: 32px !important;
        height: 8px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #76D164, #3FA92B) !important;
        margin: 0 !important;
        box-shadow: 0 2px 6px rgba(63, 169, 43, .25) !important;
      }

      html body .login-form.sign-up .signup-img .login-left-dot .dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: rgba(63, 169, 43, .35) !important;
        margin: 0 !important;
      }

  /* --- RIGHT — Form panel (45%) -------------------------------------- */
  html body .login-form.sign-up .login-text {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    width: 45% !important;
    height: 100vh !important;
    background: #ffffff !important;
    padding: 0 0 36px 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    /* Top-align (NOT center): the form is long and, with validation
       messages, taller than the viewport. `justify-content: center` clips
       the top (logo/heading) and bottom (button) of overflowing content and
       you can't scroll to them. flex-start lets it scroll cleanly top->bottom. */
    justify-content: flex-start !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    position: relative !important;
  }
    /* Inner form wrapper */
    html body .login-form.sign-up .login-text > * {
      width: 100% !important;
      max-width: 460px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 40px !important;
      padding-right: 40px !important;
    }

    /* CRM logo above the "Create an Account" heading (small). */
    html body .login-form.sign-up .login-text .signup-logo {
      padding-top: 40px !important;
      margin: 0 0 14px 0 !important;
      text-align: left !important;
    }

      html body .login-form.sign-up .login-text .signup-logo img {
        width: 132px !important;
        height: auto !important;
        display: block !important;
      }

    /* Heading — logo now supplies the top spacing, so drop its big top pad. */
    html body .login-form.sign-up .login-text .form-text {
      margin: 0 0 24px 0 !important;
      padding-top: 0 !important;
      text-align: left !important;
    }

      html body .login-form.sign-up .login-text .form-text h2 {
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: -0.6px !important;
        line-height: 1.18 !important;
        margin: 0 0 8px 0 !important;
        background: linear-gradient(135deg, #0F1014 0%, #2D7A1F 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        text-transform: none !important;
      }

      html body .login-form.sign-up .login-text .form-text p {
        font-size: 14px !important;
        color: #6b7688 !important;
        font-weight: 500 !important;
        margin: 0 !important;
        line-height: 1.5 !important;
      }

  /* Form layout */
  html body .login-form.sign-up .signup-form-tab {
    margin-top: 0 !important;
    overflow: visible !important;
  }

  html body .login-form.sign-up .signup-form-inner {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* --- Field rows (label + input) ------------------------------------ */
  html body .login-form.sign-up .signup-form-tab .field {
    margin-bottom: 0 !important;
  }

    html body .login-form.sign-up .signup-form-tab .field .form-label {
      display: block !important;
      margin: 0 0 6px 0 !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      color: #1a2236 !important;
      letter-spacing: -0.005em !important;
      text-transform: none !important;
    }

      html body .login-form.sign-up .signup-form-tab .field .form-label span {
        color: #dc2626 !important;
        font-weight: 700 !important;
      }

  /* --- Input group / native input ----------------------------------- */
  html body .login-form.sign-up .signup-form-tab .input-group {
    background: #ffffff !important;
    border: 1.5px solid #E1E5EF !important;
    border-radius: 12px !important;
    height: 48px !important;
    overflow: hidden !important;
    transition: border-color .18s, box-shadow .18s !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
    flex-wrap: nowrap !important;
  }

    html body .login-form.sign-up .signup-form-tab .input-group:focus-within {
      border-color: #3FA92B !important;
      box-shadow: 0 0 0 3px rgba(63, 169, 43, .12) !important;
    }

    html body .login-form.sign-up .signup-form-tab .input-group .form-control,
    html body .login-form.sign-up .signup-form-tab .field .input-group input {
      border: 0 !important;
      background: transparent !important;
      height: 100% !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      color: #0F1014 !important;
      padding: 0 14px !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0 !important;
      width: 100% !important;
    }

      html body .login-form.sign-up .signup-form-tab .input-group .form-control:focus {
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
      }

      html body .login-form.sign-up .signup-form-tab .input-group .form-control::placeholder {
        color: #97a3b6 !important;
        font-weight: 500 !important;
      }

  /* Password show/hide eye toggle */
  html body .login-form.sign-up .signup-form-tab .input-group-append {
    margin: 0 !important;
  }

    html body .login-form.sign-up .signup-form-tab .input-group-append .input-group-text {
      background: transparent !important; /* blend into the white field, like the dropdown chevrons */
      border: 0 !important;
      border-left: 0 !important; /* drop the grey divider so it's one unified field */
      padding: 0 12px !important;
      height: 100% !important;
      cursor: pointer !important;
      transition: background .18s !important;
      border-radius: 0 !important;
    }

      html body .login-form.sign-up .signup-form-tab .input-group-append .input-group-text:hover {
        background: transparent !important;
      }

  html body .login-form.sign-up #togglePassword,
  html body .login-form.sign-up #toggleConPassword {
    cursor: pointer !important;
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) saturate(100%) invert(50%) !important;
    transition: filter .18s !important;
  }

  html body .login-form.sign-up .input-group-append .input-group-text:hover #togglePassword,
  html body .login-form.sign-up .input-group-append .input-group-text:hover #toggleConPassword {
    filter: brightness(0) saturate(100%) invert(45%) sepia(81%) saturate(528%) hue-rotate(74deg) brightness(95%) contrast(91%) !important;
  }

  /* Eye toggle layout. The toggle used to be position:absolute ON TOP of the
   input, which let the input capture clicks meant for the icon. Lay it out
   as a normal in-flow flex item INSTEAD: the input flexes to fill the row
   and the 46px icon box sits beside it, so the whole box is reliably
   clickable and never overlaps the input. */
  html body .login-form.sign-up .signup-form-tab .signup-password .input-group input,
  html body .login-form.sign-up .signup-form-tab .signup-password .input-group .form-control {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 14px !important;
  }

  html body .login-form.sign-up .signup-form-tab .signup-password .input-group-append {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

    html body .login-form.sign-up .signup-form-tab .signup-password .input-group-append .input-group-text {
      position: static !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 46px !important;
      height: 100% !important;
      pointer-events: auto !important;
      cursor: pointer !important;
    }

/* Live password-policy hint under the Password field. Generic selector so
   it is shared by the SignUp and ResetPassword pages. Hidden until the
   user focuses/types in the password field (.is-visible toggled from JS).
   Only ONE requirement is shown at a time -- the first still-unmet rule
   (li.active). As each rule is satisfied it is hidden and the next unmet
   rule takes its place. The dot marker uses a CSS escape (\2022) which is
   ASCII in the source, so no non-ASCII glyph lives in the file (avoids the
   mojibake that hits literal Unicode on these pages). */
html body .pwd-policy-hint {
  display: none !important;
  list-style: none !important;
  margin: 5px 0 12px 0 !important;
  padding: 0 !important;
  color: #dc2626 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

  html body .pwd-policy-hint.is-visible {
    display: block !important;
  }
  /* All rules hidden; only the current (first unmet) one is shown, styled as
   a validation message in the theme red (#dc2626) to match label.error. */
  html body .pwd-policy-hint li {
    display: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 0 16px !important;
    color: #dc2626 !important;
  }

    html body .pwd-policy-hint li.active {
      display: block !important;
      animation: si-err-in .2s ease-out !important;
    }

      html body .pwd-policy-hint li.active::before {
        content: "\2022" !important;
        position: absolute !important;
        left: 2px !important;
        top: 0 !important;
        color: #dc2626 !important;
        font-weight: 700 !important;
      }

/* Caps Lock warning under the password fields (toggled .is-on from JS).
   Generic selector so SignUp, SignIn and ResetPassword all share it. */
html body .caps-warning {
  display: none !important;
  margin: 6px 0 0 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #b45309 !important;
  line-height: 1.3 !important;
}

  html body .caps-warning.is-on {
    display: block !important;
    animation: si-err-in .2s ease-out !important;
  }

/* Email typo "Did you mean ...?" suggestion (non-blocking, toggled from JS). */
html body .email-suggest {
  display: none !important;
  margin: 6px 0 0 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6b7688 !important;
  line-height: 1.3 !important;
}

  html body .email-suggest.is-visible {
    display: block !important;
    animation: si-err-in .2s ease-out !important;
  }

  html body .email-suggest .email-suggest-link {
    color: #3FA92B !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

    html body .email-suggest .email-suggest-link:hover {
      text-decoration: underline !important;
    }

/* Required Terms & Privacy consent checkbox. */
html body .login-form.sign-up .signup-terms {
  margin: 0 !important;
}

html body .login-form.sign-up .signup-terms-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #404a5c !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  text-transform: none !important;
}

  html body .login-form.sign-up .signup-terms-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 1px 0 0 0 !important;
    flex: 0 0 auto !important;
    accent-color: #3FA92B !important;
    cursor: pointer !important;
  }

  html body .login-form.sign-up .signup-terms-label a {
    color: #3FA92B !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

    html body .login-form.sign-up .signup-terms-label a:hover {
      text-decoration: underline !important;
    }
/* When the consent box is invalid, tint its label red (validation theme). */
html body .login-form.sign-up .signup-terms.has-error .signup-terms-label {
  color: #dc2626 !important;
}

/* --- Contact number row (phone-code chip + text input) -------------
   Mirrors the LocationWizard chip: 90px mint chip on the left
   showing "<flag> +<dial>", joined seamlessly to the number input.
   The dropdown panel itself is suppressed in JS (select2:opening
   preventDefault), so the chevron is also hidden. */
html body .login-form.sign-up .contect-no .input-group {
  overflow: visible !important;
}

html body .login-form.sign-up .contect-no .number-select {
  flex: 0 0 auto !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 100% !important;
  padding: 0 8px !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5) !important;
  border-right: 1.5px solid #E1E5EF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

  html body .login-form.sign-up .contect-no .number-select .select2-container,
  html body .login-form.sign-up .contect-no .number-select .nice-select {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
  }

/* The phone-code Select2 inside .contect-no — flag + dial code only */
html body .login-form.sign-up .contect-no .select2-container--default .select2-selection--single {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

  html body .login-form.sign-up .contect-no .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
    padding: 0 16px 0 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0F1014 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Chevron — the dropdown is now openable, so show a caret to signal it. */
  html body .login-form.sign-up .contect-no .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 2px !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 18px !important;
  }

/* Flag icon inside the chip — slight visual polish.
   The visual gap between flag and "+1" is handled by `gap: 10px`
   on the parent flex container above; flag itself has 0 margin
   so the spacing stays predictable. */
html body .login-form.sign-up .contect-no .select2-selection__rendered .flag-icon,
html body .login-form.sign-up .contect-no .select2-selection__rendered img.flag {
  width: 18px !important;
  height: 13px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 0 1px rgba(15, 16, 20, 0.06) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* --- Select2 dropdowns (Country, Time Zone, phone code) ----------- */
html body .login-form.sign-up .signup-form-tab .input-select {
  width: 100% !important;
  height: 100% !important;
}

html body .login-form.sign-up .signup-form-tab .select2-container--default .select2-selection--single {
  height: 46px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

  html body .login-form.sign-up .signup-form-tab .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    padding: 0 7px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0F1014 !important;
  }

  html body .login-form.sign-up .signup-form-tab .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    width: 32px !important;
    right: 4px !important;
  }

    html body .login-form.sign-up .signup-form-tab .select2-container--default .select2-selection--single .select2-selection__arrow b {
      display: none !important;
    }

    html body .login-form.sign-up .signup-form-tab .select2-container--default .select2-selection--single .select2-selection__arrow::after {
      content: "" !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      width: 12px !important;
      height: 12px !important;
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233FA92B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>") no-repeat center / 12px 12px !important;
      transform: translate(-50%, -50%) !important;
      transition: transform .2s ease !important;
    }

html body .login-form.sign-up .signup-form-tab .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
  transform: translate(-50%, -50%) rotate(180deg) !important;
}
/* ========================================================================
   SELECT2 DROPDOWN PANEL — port of canonical LocationWizard panel
   Brand-green border, layered shadow, mint hover state, gradient pill
   on the selected option with white tick. Applies globally so any
   Select2 opened from login/signup/forget/reset pages picks it up.
   ======================================================================== */
html body .select2-container--open .select2-dropdown {
  border: 1.5px solid #3FA92B !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 48px -16px rgba(15, 16, 20, 0.18), 0 8px 16px -8px rgba(63, 169, 43, 0.18) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  z-index: 2147483647 !important;
}

  html body .select2-container--open .select2-dropdown .select2-search--dropdown {
    padding: 10px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

    html body .select2-container--open .select2-dropdown .select2-search--dropdown .select2-search__field {
      height: 38px !important;
      padding: 8px 12px !important;
      font-size: 13.5px !important;
      border: 1.5px solid #e2e8f0 !important;
      border-radius: 8px !important;
      outline: none !important;
      background: #ffffff !important;
      transition: border-color 160ms ease, box-shadow 160ms ease !important;
    }

      html body .select2-container--open .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
        border-color: #3FA92B !important;
        box-shadow: 0 0 0 3px rgba(63, 169, 43, 0.12) !important;
      }

  html body .select2-container--open .select2-dropdown .select2-results__options {
    max-height: 280px !important;
    padding: 6px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
  }

    html body .select2-container--open .select2-dropdown .select2-results__options::-webkit-scrollbar {
      width: 8px !important;
    }

    html body .select2-container--open .select2-dropdown .select2-results__options::-webkit-scrollbar-thumb {
      background: #cbd5e1 !important;
      border-radius: 8px !important;
    }

  html body .select2-container--open .select2-dropdown .select2-results__option {
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1a2236 !important;
    border-radius: 8px !important;
    margin: 1px 0 !important;
    transition: background-color 140ms ease, color 140ms ease !important;
    position: relative !important;
  }

  html body .select2-container--open .select2-dropdown .select2-results__option--highlighted[aria-selected],
  html body .select2-container--open .select2-dropdown .select2-results__option--highlighted {
    background: #f0fdf4 !important;
    color: #2D7A1F !important;
  }

  html body .select2-container--open .select2-dropdown .select2-results__option[aria-selected="true"] {
    background: linear-gradient(95deg, #76D164 0%, #3FA92B 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding-right: 36px !important;
  }

    html body .select2-container--open .select2-dropdown .select2-results__option[aria-selected="true"]::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 12px;
      width: 14px;
      height: 14px;
      transform: translateY(-50%);
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") no-repeat center / contain;
    }

  /* Contact-Number (phone-code) dropdown ONLY — tagged via dropdownCssClass
   'si-phonecode-dropdown' in sign-up.js. Hide the selected-option check
   tick here (Country / Time Zone keep it). Covers the class landing on
   either the dropdown or the container. */
  html body .select2-container--open .select2-dropdown.si-phonecode-dropdown .select2-results__option[aria-selected="true"]::after,
  html body .select2-container--open.si-phonecode-dropdown .select2-dropdown .select2-results__option[aria-selected="true"]::after,
  html body .si-phonecode-dropdown .select2-results__option[aria-selected="true"]::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  html body .select2-container--open .select2-dropdown.si-phonecode-dropdown .select2-results__option[aria-selected="true"],
  html body .select2-container--open.si-phonecode-dropdown .select2-dropdown .select2-results__option[aria-selected="true"],
  html body .si-phonecode-dropdown .select2-results__option[aria-selected="true"] {
    padding-right: 12px !important;
  }

/* --- Submit button (Create Account) ------------------------------- */
html body .login-form.sign-up .login-btn {
  margin: 14px 0 0 0 !important;
}

  html body .login-form.sign-up .login-btn button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 8px 0 24px !important;
    border-radius: 14px !important;
    background: linear-gradient(97deg, #76D164, #3FA92B) !important;
    color: #ffffff !important;
    border: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 22px rgba(63, 169, 43, .30), 0 1px 0 rgba(255, 255, 255, .35) inset !important;
    transition: background .2s, transform .2s, box-shadow .2s !important;
  }

    html body .login-form.sign-up .login-btn button:hover {
      background: linear-gradient(97deg, #82d670, #46b631) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 14px 32px rgba(63, 169, 43, .40), 0 1px 0 rgba(255, 255, 255, .35) inset !important;
    }

    html body .login-form.sign-up .login-btn button span {
      color: #ffffff !important;
      font-weight: 800 !important;
      flex: 1 1 auto !important;
      text-align: center !important;
      width: auto !important;
    }

  html body .login-form.sign-up .login-btn .login-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .22) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    transition: transform .25s !important;
  }

  html body .login-form.sign-up .login-btn button:hover .login-arrow {
    transform: translateX(5px) !important;
  }

  html body .login-form.sign-up .login-btn .login-arrow img {
    width: 14px !important;
    height: 14px !important;
    filter: brightness(0) invert(1) !important;
  }

/* --- Bottom links ------------------------------------------------- */
html body .login-form.sign-up .new-account-link {
  margin: 18px 0 0 0 !important;
  text-align: center !important;
  font-size: 13.5px !important;
  color: #6b7688 !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

  html body .login-form.sign-up .new-account-link span {
    color: #6b7688 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
  }

  html body .login-form.sign-up .new-account-link a {
    color: #2D7A1F !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: color .18s !important;
  }

    html body .login-form.sign-up .new-account-link a:hover {
      color: #1f6b15 !important;
      text-decoration: underline !important;
    }

html body .login-form.sign-up .login-note {
  position: static !important;
  margin: 22px 0 50px 0 !important;
  padding: 16px 0 0 0 !important;
  border-top: 1px dashed #eef0f4 !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

  html body .login-form.sign-up .login-note .login-note-link {
    text-align: center !important;
  }

    html body .login-form.sign-up .login-note .login-note-link span {
      font-size: 12px !important;
      color: #97a3b6 !important;
      font-weight: 500 !important;
      line-height: 1.6 !important;
    }

      html body .login-form.sign-up .login-note .login-note-link span a {
        color: #475569 !important;
        text-decoration: underline !important;
        font-weight: 600 !important;
        transition: color .18s !important;
      }

        html body .login-form.sign-up .login-note .login-note-link span a:hover {
          color: #2D7A1F !important;
        }

/* --- Responsive --------------------------------------------------- */
@media (max-width: 1199px) {
  html body .login-form.sign-up .signup-img {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding: 44px 36px !important;
  }

  html body .login-form.sign-up .login-text {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  html body .login-form.sign-up .signup-img .login-img-text h2 {
    font-size: 28px !important;
  }

  html body .login-form.sign-up .signup-img .login-sub-img img {
    max-width: 360px !important;
  }
}

@media (max-width: 991px) {
  /* Page scrolls (defeat the desktop height:100vh / overflow:hidden). */
  html body .page.login-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  /* BULLETPROOF STACK: make the form wrapper AND the inner block normal
       BLOCK boxes, so the hero + form panels stack in document flow and
       physically cannot overlap (same fix as the login page). */
  html body .login-form.sign-up,
  html body .login-form.sign-up.d-flex,
  html body .login-form.sign-up .sign-up-inner-block,
  html body .login-form.sign-up .sign-up-inner-block.d-flex {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
    /* Both panels: in-flow, full width, content height. */
    html body .login-form.sign-up .signup-img,
    html body .login-form.sign-up .login-text {
      position: static !important;
      float: none !important;
      transform: none !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      padding: 28px 24px !important;
    }
    /* Hero panel: pack content at the top (no space-between spreading). */
    html body .login-form.sign-up .signup-img {
      justify-content: flex-start !important;
    }
      /* Hide the decorative illustration + dots when stacked — the form is
       the focus on small screens. */
      html body .login-form.sign-up .signup-img .login-sub-img,
      html body .login-form.sign-up .signup-img .login-left-dot {
        display: none !important;
      }

      html body .login-form.sign-up .signup-img .login-img-text h2 {
        font-size: 22px !important;
      }

    html body .login-form.sign-up .login-text .form-text h2 {
      font-size: 24px !important;
    }

  /* --- Smooth scrolling on small screens ---------------------------
       ONE scroll surface only (the document / <html>). Giving the body or
       any inner panel `overflow:auto` creates a SECOND scroll container,
       which is what caused the stop-and-go scrolling (the wheel scrolls one
       container to its edge before the other moves). So the body grows with
       content and every panel is overflow:visible — nothing nested scrolls. */
  html body.register-main-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

    html body.register-main-page .page.login-page,
    html body.register-main-page .page.login-page > .page-content,
    html body.register-main-page .login-form.sign-up,
    html body.register-main-page .login-form.sign-up .sign-up-inner-block,
    html body.register-main-page .login-form.sign-up .login-text,
    html body.register-main-page .login-form.sign-up .signup-form-tab,
    html body.register-main-page .login-form.sign-up .signup-form-inner {
      overflow: visible !important;
      height: auto !important;
      max-height: none !important;
    }
  /* Disable the continuously-animating, blurred hero blobs on small
       screens — they repaint every frame and make scrolling stutter. */
  html body .login-form.sign-up .signup-img::before,
  html body .login-form.sign-up .signup-img::after {
    animation: none !important;
  }
}


/* ============================================================
   SWEET ALERT (swal) — port of canonical swal-theme.css + the
   inline _User_Layout block. Outlined ring icons + soft halo
   + line-drawn check/x marks. Same as dashboard pages and the
   LocationWizard, so login/signup/wizard all match.
   ============================================================ */

/* Backdrop — soft slate overlay with blur */
.sweet-overlay {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 2147483600 !important;
}

/* Card — true centering via transform translate */
.sweet-alert {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  max-height: calc(100vh - 32px);
  max-width: calc(100vw - 32px);
  overflow-y: auto;
  z-index: 2147483601 !important;
  background: #ffffff !important;
  border: 1px solid #eef1f6 !important;
  border-radius: 18px !important;
  padding: 30px 34px !important;
  text-align: center !important;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 25px 60px rgba(15, 23, 42, .25), 0 8px 22px rgba(15, 23, 42, .10) !important;
  font-family: 'Graphik', 'Poppins-Regular', 'Poppins', 'Segoe UI', Arial, sans-serif !important;
}

  .sweet-alert,
  .sweet-alert * {
    font-family: 'Graphik', 'Poppins-Regular', 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    letter-spacing: -0.005em;
  }

    .sweet-alert > * {
      text-align: center;
    }

    /* Spring entrance */
    .sweet-alert.showSweetAlert.visible,
    .sweet-alert.show-sweet-alert.visible {
      animation: swSpringIn 0.32s cubic-bezier(.34, 1.56, .64, 1) both !important;
    }

@keyframes swSpringIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.85);
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Top accent — always brand-green per project theme.
   Only ERROR flips to red. Info/warning/question keep the
   default green so swals stay on-brand. */
.sweet-alert {
  border-top: 3px solid #3FA92B !important;
}

  .sweet-alert:has(.sa-icon.sa-error) {
    border-top: 3px solid #ef4444 !important;
  }

  /* Title */
  .sweet-alert h2 {
    margin: 16px auto 6px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    max-width: 100%;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    color: #0F1014 !important;
    text-transform: none !important;
    -webkit-text-stroke: 0.3px #1a1a1a;
  }

  /* Body */
  .sweet-alert p {
    text-align: center !important;
    max-width: 100%;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    word-wrap: break-word;
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
  }

  .sweet-alert .sa-icon {
    margin: 12px auto 10px !important;
  }

    /* ============================================================
   ICONS — outlined ring + soft halo (canonical project style)
   Same as swal-theme.css → same as dashboard pages
   ============================================================ */

    /* SUCCESS */
    .sweet-alert .sa-icon.sa-success {
      border-color: #3FA92B !important;
      box-shadow: 0 0 0 6px rgba(63, 169, 43, .12);
    }

      .sweet-alert .sa-icon.sa-success::before,
      .sweet-alert .sa-icon.sa-success::after,
      .sweet-alert .sa-icon.sa-success .sa-fix {
        background: #ffffff !important;
      }

      .sweet-alert .sa-icon.sa-success .sa-placeholder {
        border: 4px solid rgba(63, 169, 43, .25) !important;
      }

      .sweet-alert .sa-icon.sa-success .sa-line {
        background-color: #3FA92B !important;
      }

    /* WARNING */
    .sweet-alert .sa-icon.sa-warning {
      border-color: #f59e0b !important;
      box-shadow: 0 0 0 6px rgba(245, 158, 11, .12);
      animation: swPulseWarning 2.4s ease-in-out infinite;
    }

      .sweet-alert .sa-icon.sa-warning .sa-body,
      .sweet-alert .sa-icon.sa-warning .sa-dot {
        background: #f59e0b !important;
      }

@keyframes swPulseWarning {
  0%, 100% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, .12);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(245, 158, 11, .04);
  }
}

/* ERROR */
.sweet-alert .sa-icon.sa-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 6px rgba(239, 68, 68, .12);
}

  .sweet-alert .sa-icon.sa-error::before,
  .sweet-alert .sa-icon.sa-error::after {
    background: rgba(239, 68, 68, 0) !important;
  }

  .sweet-alert .sa-icon.sa-error .sa-line {
    background-color: #ef4444 !important;
  }

  .sweet-alert .sa-icon.sa-error .sa-placeholder {
    border: 4px solid rgba(239, 68, 68, .25) !important;
  }

/* INFO */
.sweet-alert .sa-icon.sa-info {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, .12);
}

  .sweet-alert .sa-icon.sa-info::before,
  .sweet-alert .sa-icon.sa-info::after {
    background: #3b82f6 !important;
  }

/* QUESTION */
.sweet-alert .sa-icon.sa-question {
  border-color: #8b5cf6 !important;
  color: #8b5cf6 !important;
  box-shadow: 0 0 0 6px rgba(139, 92, 246, .12);
}

/* Custom IMG icon */
.sweet-alert .sa-icon.sa-custom {
  box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
  border-radius: 50%;
  padding: 6px;
  background: #f8fafc;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.sweet-alert .sa-button-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 18px 0 4px !important;
  padding: 0 !important;
  width: 100% !important;
}

  .sweet-alert button.cancel,
  .sweet-alert button.confirm,
  .sweet-alert .sa-button-container button {
    margin: 0 !important;
    flex: 0 0 auto;
    min-width: 130px !important;
    height: 44px !important;
    padding: 0 24px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap;
    border-radius: 11px !important;
    border: 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
    cursor: pointer !important;
    text-transform: none !important;
    transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .2s !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

    /* Default confirm — brand-green gradient */
    .sweet-alert button.confirm,
    .sweet-alert button.confirm.styled,
    .sweet-alert .btn-primary,
    .sweet-alert .btn-success {
      background: linear-gradient(97.06deg, #76D164 -0.73%, #3FA92B 92.81%) !important;
      border: 1px solid #3FA92B !important;
      color: #ffffff !important;
    }

      .sweet-alert button.confirm:hover,
      .sweet-alert .btn-primary:hover,
      .sweet-alert .btn-success:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(63, 169, 43, .32) !important;
        color: #ffffff !important;
      }

      /* Project theme — confirm button is ALWAYS brand-green by default.
   Per-type info/warning/error overrides removed so swals stay on-brand.
   Only `.btn-danger` is red (used for delete confirmations). */

      /* btn-danger explicit — red regardless of icon */
      .sweet-alert button.confirm.btn-danger,
      .sweet-alert button.btn-danger {
        background: linear-gradient(135deg, #ef4444, #dc2626) !important;
        border: 1px solid #dc2626 !important;
        color: #ffffff !important;
      }

        .sweet-alert button.confirm.btn-danger:hover,
        .sweet-alert button.btn-danger:hover {
          box-shadow: 0 6px 16px rgba(220, 38, 38, .32) !important;
          transform: translateY(-1px) !important;
        }

    /* Cancel — soft grey */
    .sweet-alert button.cancel,
    .sweet-alert button.cancel.styled,
    .sweet-alert .btn-default {
      background: #f1f5f9 !important;
      border: 1.5px solid #e2e8f0 !important;
      color: #475569 !important;
    }

      .sweet-alert button.cancel:hover,
      .sweet-alert .btn-default:hover {
        background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%) !important;
        color: #2D7A1F !important;
        border-color: #c6ebc0 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(63, 169, 43, .14) !important;
      }

/* Pressed state */
.sweet-alert button:active,
.sweet-alert .btn:active {
  transform: translateY(0) !important;
}

/* Focus ring */
.sweet-alert button:focus,
.sweet-alert button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(63, 169, 43, .25) !important;
}
/* All confirm buttons share the same green focus ring per project theme */

/* Single-button case — center the lone confirm */
.sweet-alert > button.confirm:only-of-type,
.sweet-alert .sa-button-container > button.confirm:only-of-type {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* PROMPT INPUT */
.sweet-alert input,
.sweet-alert textarea {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid #E1E5EF;
  background: #F7F9FC;
  color: #0F1014;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  margin: 12px 0 6px;
  box-sizing: border-box;
}

.sweet-alert textarea {
  height: auto;
  min-height: 84px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

  .sweet-alert input::placeholder,
  .sweet-alert textarea::placeholder {
    color: #94a3b8;
    font-weight: 500;
  }

  .sweet-alert input:focus,
  .sweet-alert textarea:focus {
    background: #ffffff !important;
    border-color: #3FA92B !important;
    box-shadow: 0 0 0 3px rgba(63, 169, 43, .12) !important;
    outline: none !important;
  }

/* Validation error message */
.sweet-alert .sa-input-error,
.sweet-alert div.sa-error-container {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  border: 1px solid rgba(239, 68, 68, .25) !important;
}

/* Loading dots */
.sweet-alert .la-ball-fall {
  display: inline-flex !important;
  gap: 4px;
}

  .sweet-alert .la-ball-fall > div {
    width: 8px !important;
    height: 8px !important;
    background: #ffffff !important;
    border-radius: 50%;
  }

/* Title-Case rule */
.sweet-alert,
.sweet-alert *,
.sweet-alert h2,
.sweet-alert button {
  text-transform: none !important;
}

/* Mobile */
@media (max-width: 480px) {
  .sweet-alert {
    width: calc(100vw - 32px) !important;
    max-width: 420px;
    padding: 24px 22px !important;
    border-radius: 14px !important;
  }

    .sweet-alert h2 {
      font-size: 18px !important;
    }

    .sweet-alert p {
      font-size: 12.5px !important;
    }

    .sweet-alert .sa-button-container {
      gap: 10px !important;
    }

      .sweet-alert button.cancel,
      .sweet-alert button.confirm,
      .sweet-alert .sa-button-container button {
        min-width: 112px !important;
        height: 42px !important;
        padding: 0 18px !important;
      }
}


/* =====================================================================
   MAIN-CARD HARDENING - keep BOTH panels (.login-img + .login-text) +
   the .login-form wrapper absolutely SHARP at every breakpoint. No
   side radius, no top/bottom radius. Defeats any leftover legacy rule
   or future media-query that tries to round the corners.
   Source-order last + max specificity means nothing can re-introduce
   a radius here.
   ===================================================================== */
html body .sign-in-page,
html body .sign-in-page .page-content,
html body .sign-in-page .login-form,
html body .sign-in-page .login-form .login-text,
html body .sign-in-page .login-form .login-img,
html body .sign-in-page .login-form > .login-text,
html body .sign-in-page .login-form > .login-img,
html body .sign-in-page .login-form > .login-text.col-md-12.col-lg-6.col-xl-6.col-xxl-5,
html body .sign-in-page .login-form > .login-img.col-md-12.col-lg-6.col-xl-6.col-xxl-6,
html body .login-page,
html body .login-page .page-content,
html body .login-form,
html body .login-form.sign-up,
html body .login-form.sign-up .sign-up-inner-block,
html body .login-form .login-text,
html body .login-form .login-img,
html body .login-form .signup-img,
html body .login-form.sign-up .signup-img,
html body .login-form.sign-up .login-text {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

@media (max-width: 1199px) {
  html body .sign-in-page .login-form,
  html body .sign-in-page .login-form .login-text,
  html body .sign-in-page .login-form .login-img,
  html body .login-form,
  html body .login-form .login-text,
  html body .login-form .login-img {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

@media (max-width: 767px) {
  html body .sign-in-page .login-form,
  html body .sign-in-page .login-form .login-text,
  html body .sign-in-page .login-form .login-img,
  html body .login-form,
  html body .login-form .login-text,
  html body .login-form .login-img {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

@media (max-width: 575.98px) {
  html body .sign-in-page .login-form,
  html body .sign-in-page .login-form .login-text,
  html body .sign-in-page .login-form .login-img,
  html body .login-form,
  html body .login-form .login-text,
  html body .login-form .login-img {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}


/* =====================================================================
   LEFT-PANEL DOTS — interactive welcome carousel / step indicator.
   Both dots are clickable; the "active" one is the pill, the inactive
   one is a small mint dot. Smooth springy transition when JS swaps the
   .main-dot / .dot classes between the two children (used by:
     - SignIn:         welcome-message carousel (auto-rotates)
     - ForgetPassword: welcome-message carousel (auto-rotates)
     - SignUp:         welcome-message carousel (auto-rotates, .signup-img scope)
     - ResetPassword:  Step 1 / Step 2 progress indicator (follows focused field)
   ===================================================================== */

/* Force the dot row visible on desktop (>=992px) regardless of page-specific
   wrapper class. Earlier overrides hide it at <=991px which is fine — we want
   it back on the wide layout. Scoped to BOTH .login-img and .signup-img. */
@media (min-width: 992px) {
  html body .login-form .login-img .login-left-dot,
  html body .login-form .signup-img .login-left-dot,
  html body .forgot-page .login-form .login-img .login-left-dot,
  html body .forget-passwors-page .login-form .login-img .login-left-dot {
    display: inline-flex !important;
    position: relative !important;
    z-index: 2 !important; /* sit above the illustration */
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 18px !important;
  }
}

/* Shared interactive polish — applies to BOTH .login-img and .signup-img
   so the dots feel identical across SignIn, ForgetPassword, ResetPassword
   and SignUp. */
html body .login-form .login-img .login-left-dot .main-dot,
html body .login-form .login-img .login-left-dot .dot,
html body .login-form .signup-img .login-left-dot .main-dot,
html body .login-form .signup-img .login-left-dot .dot {
  cursor: pointer !important;
  border: 0 !important;
  transition: width .4s cubic-bezier(.34, 1.56, .64, 1), border-radius .4s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, box-shadow .25s ease, transform .2s ease !important;
}
/* Active pill — green gradient, slight glow. */
html body .login-form .login-img .login-left-dot .main-dot,
html body .login-form .signup-img .login-left-dot .main-dot {
  width: 32px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #76D164, #3FA92B) !important;
  box-shadow: 0 2px 6px rgba(63, 169, 43, .25) !important;
}
/* Inactive — mint circle, lighter than the active pill. */
html body .login-form .login-img .login-left-dot .dot,
html body .login-form .signup-img .login-left-dot .dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(63, 169, 43, .30) !important;
}
  /* Hover affordances. */
  html body .login-form .login-img .login-left-dot .dot:hover,
  html body .login-form .signup-img .login-left-dot .dot:hover {
    background: rgba(63, 169, 43, .55) !important;
    transform: scale(1.2) !important;
  }

html body .login-form .login-img .login-left-dot .main-dot:hover,
html body .login-form .signup-img .login-left-dot .main-dot:hover {
  box-shadow: 0 4px 12px rgba(63, 169, 43, .40) !important;
}