:root {
  --color-primary: #5778ff;
  --color-primary-dark: #3C54B2;
  --color-secondary: #e6ebff;
  --color-textPrimary: #1b1d21;
  --color-textSecondary: #86898e;
  --color-grey1: #dedede;
  --color-grey2: #f4f5f6;
  --color-grey3: #e8eaec;
  --color-grey4: #86898e;
  --color-white: #ffffff;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --border-radius-s: 0.438rem;
  --border-radius-m: 0.75rem;
  --border-radius-l: 1.25rem;
  --border-radius-m: 0.75rem;
  --font-family-semibold: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --height-s: 1.25rem;

  /* Bootstrap variables overrides --- start */
  --bs-blue: var(--color-primary);
  --bs-body-color: var(--color-textPrimary);
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-dark);
  /* Bootstrap variables overrides --- end */
}

/* Bootstrap overrides --- start */
.btn {
  --bs-btn-border-radius: var(--border-radius-m);
}

.header .d-flex {
  align-items: center;
}

#register-button,
#login-button {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
}

.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
}

.btn-light {
  --bs-btn-color: var(--color-textPrimary);
  --bs-btn-bg: var(--color-grey2);
  --bs-btn-border-color: var(--color-grey2);
  --bs-btn-hover-color: var(--color-textPrimary);
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-focus-shadow-rgb: 211,212,213;
  --bs-btn-active-color: var(--color-textPrimary);
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-disabled-color: var(--color-textPrimary);
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;

  font-family: var(--font-family-semibold);
}

.card {
  --bs-card-border-radius: var(--border-radius-l);
  --bs-card-box-shadow: 0 7px 10px 0 rgba(222, 222, 222, 0.5);
  box-shadow: var(--bs-card-box-shadow);
}

.form-control {
  border-radius: var(--border-radius-m);
  background: var(--color-grey2);
  border: 1px solid var(--color-grey3)
}
/* Bootstrap end --- end */

.header {
  box-shadow: 0 1px 0 0 var(--color-grey1);
  padding: 0.5rem 1.5rem;
  background: var(--color-white);
}

.logo-full, .ds-logo {
  height: 50px !important;
  width: 165px !important;
}

.logo-small {
  display: none !important;
  height: 32px !important;
  width: 32px !important;
}

@media (max-width: 599.95px) {
  html {
    font-size: 13px !important;
  }

  /* Prevent iOS Safari auto-zoom on input focus (triggered when font-size < 16px) */
  .form-control,
  input[type="submit"],
  button[type="submit"] {
    font-size: 16px !important;
  }

  /* 44px minimum touch targets (Apple HIG) */
  .form-control,
  input[type="submit"],
  button[type="submit"] {
    min-height: 44px !important;
  }

  #register-button,
  #login-button,
  #show-login-form,
  #show-register-form,
  #sso-signin-btn {
    height: 44px !important;
    min-height: 44px !important;
  }

  /* Hide Zoho SalesIQ widget on mobile */
  [id^="zsiq"],
  .zsiq_floatmain {
    display: none !important;
  }

  .header {
    padding: 0.25rem 0.5rem !important;
  }

  .logo-full {
    display: none !important;
  }

  .logo-small {
    display: block !important;
  }

  #page-title {
    margin-top: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-textPrimary) !important;
  }

  .form-signin > .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .form-signin > .d-flex.justify-content-between > * {
    margin-left: 0 !important;
  }
}

html, body {
  background: var(--color-grey2);
}

.wrapper {
  background: var(--color-grey2);
  min-height: 100vh;
}

.form-title {
  font-family: var(--font-family-semibold);
}

.g-sign-in-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  font-size: 1.0625rem;
}

.button-icon {
  height: var(--height-s);
}

.register-subtitle {
  color: var(--color-primary);
}

.fs-div.mb-3.mt-4 > .fs-div > ul > .fs-error-msg {
  position: absolute;
}

.icon-with-error {
  top: 38%;
}

.icon-no-error {
  top: 53%;
}