.cookie-container .container {
  background-color: #F57D01!important;
}
.placeholdertext {
 width: 300px !important;
}

/* ===== Font-face for Pilat (GLOBAL theme) ===== */
@font-face {
  font-family: 'Pilat';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('../../fonts/Pilat-Demi.ttf') format('truetype');
}

/* ===== ODS Theme: GLOBAL Keycloak Login (DPWorld) ===== */
:root {
  --ods-login-navy: #1e1450;
  --ods-login-navy-border: #1E1450;
  --ods-login-text: #0f1227;
  --ods-login-label: #6a7080;
  --ods-login-field-bg: #ffffff;
  --ods-login-field-border: #B6B6B9;
  --ods-login-card-bg: #F5F3F5;
  --ods-login-error: #f44336;
}

/* ===== Global: Required field asterisk (*) in red color ===== */
span.required,
label span.required,
.text-danger,
label span.text-danger,
.kcLabelClass span.text-danger {
  color: var(--ods-login-error) !important;
}

.cookie-container .container {
  background-color: #f57d01 !important;
}

.placeholdertext {
  width: 300px !important;
}

body {
  color: var(--ods-login-text) !important;
}

#kc-form #errordiv.alert,
#kc-form #errordiv,
#kc-form .alert.alert-error {
  margin: 0 !important;
  padding: 24px 24px 8px !important;
  background: var(--ods-login-card-bg) !important;
  border: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: none !important;
}

#kc-form #errordiv .kc-feedback-text,
#kc-form .alert.alert-error .kc-feedback-text {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #be2f3d !important;
  font-family: "Pilat", sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

@media (max-height: 950px) {
  #footerclass {
    padding-top: 12px !important;
  }
}

/* ===== Mobile Styles (max-width: 991px) ===== */
@media (max-width: 991px) {

  /* Welcome heading - Figma: Large Device/Sub Heading/L */
  #kc-form-wrapper > h5 {
    margin: 0 0 50px !important;
    text-align: left !important;
    color: #0F0F19 !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 28.8px !important;
    letter-spacing: -0.12px !important;
  }

  /* Subtitle - Sign in using your credentials (Figma: Body Multi line - Focus/L) */
  .lbl-txt {
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    color: #0F0F19 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -0.08px !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
  }

  /* Form card - gray background like desktop */
  #kc-form {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  #kc-form-login {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: var(--ods-login-card-bg) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Form-group gaps: 20px between email and password, 14px before submit */
  #kc-form-login .form-group {
    width: 100% !important;
    padding: 0 !important;
  }

  #kc-form-login .form-group:nth-of-type(1) {
    margin-bottom: 20px !important;
  }

  #kc-form-login .form-group:nth-of-type(2) {
    margin-bottom: 14px !important;
  }

  #kc-form-login .form-group:nth-of-type(3) {
    margin: 0 0 14px !important;
  }

  #kc-form #errordiv + #kc-form-login {
    border-radius: 0 !important;
    padding-top: 12px !important;
  }

  #kc-form #errordiv.alert,
  #kc-form #errordiv,
  #kc-form .alert.alert-error {
    margin: 0 !important;
    padding: 24px 24px 8px !important;
    background: var(--ods-login-card-bg) !important;
    border: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Remove gap and padding from all Bootstrap columns in form area */
  .mainBody .row > .col-sm-12,
  .mainBody .row > .col-sm-12.mb-3,
  .mainBody .row > [class*="col-"],
  .mainBody .col-sm-12.mb-3,
  .mainBody .mb-3 {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Add margin to entire form area - space from screen edges */
  .mainBody .mx-auto.col-lg-9.col-xl-7 .row {
    margin: 0 16px !important;
    padding: 0 !important;
  }

  /* Remove any gap between form and social providers containers */
  #kc-form,
  #kc-form-wrapper {
    margin-bottom: 0 !important;
  }

  /* Ensure social providers connects directly to form */
  .mainBody #kc-socialProviders,
  .mainBody #kc-socialProviders-wrapper,
  .mainBody .login-pf-signup {
    margin-top: -1px !important;
  }

  /* Form labels */
  #kc-form label,
  #kc-form .kcLabelClass,
  .required {
    overflow: hidden !important;
    color: #6E6E72 !important;
    text-overflow: ellipsis !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 10px !important;
    letter-spacing: -0.06px !important;
    margin-bottom: 4px !important;
    text-transform: none !important;
  }

  #kc-registration .mat-button-wrapper {
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
  }

  #kc-form-options .checkbox {
    display: none !important;
  }

  #kc-form-options + div,
  #kc-form-options + div > span {
    display: block !important;
    width: 100% !important;
  }

  #kc-form-options {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Override #kc-form label styles for .lbl-txt subtitle */
  #kc-form .lbl-txt {
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    color: #0F0F19 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -0.08px !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
  }

  /* Form inputs - Figma: 32px height, 8px padding, #B6B6B9 border */
  #kc-form input[type="text"],
  #kc-form input[type="password"],
  #kc-form input[type="number"],
  #kc-form input[type="email"],
  #kc-form-login input[type="text"],
  #kc-form-login input[type="password"],
  #kc-form-login input[type="number"],
  #kc-form-login input[type="email"] {
    display: flex !important;
    width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 8px !important;
    border: 1px solid #B6B6B9 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    color: #0F0F19 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 14px !important;
    line-height: 16px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Form placeholders - Figma spec */
  #kc-form input::placeholder,
  #kc-form-login input::placeholder {
    overflow: hidden !important;
    color: #B6B6B9 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    letter-spacing: -0.07px !important;
    opacity: 1 !important;
  }

  #kc-form :is(#username, #password),
  #kc-form-login :is(#username, #password) {
    background: #ffffff !important;
  }

  #kc-form :is(#username, #password):focus,
  #kc-form-login :is(#username, #password):focus {
    background: #ffffff !important;
  }

  #kc-form :is(#username, #password):-webkit-autofill,
  #kc-form-login :is(#username, #password):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #22283a !important;
  }

  #kc-form input:focus,
  #kc-form-login input:focus {
    border-color: var(--ods-login-navy-border) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 1px var(--ods-login-navy-border) !important;
  }

  /* Password toggle icon */
  #toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #toggle-password .eye_icons {
    width: 20px !important;
    height: 20px !important;
    margin-top: 0 !important;
  }

  /* Hide eye icon when password field is empty */
  #kc-form-login .form-group:has(input[type="password"]:placeholder-shown) #toggle-password {
    display: none !important;
  }

  /* Forgot password link */
  #resetPasswordBtn {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 0 !important;
    color: #1E1450 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 17.143px !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  /* Sign In button - match desktop style */
  #kc-form-buttons {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Sign In primary button - Figma: 36px pill, Pilat Wide 600 12px */
  #kc-login,
  #kc-getOtp,
  #kc-submitOtp {
    display: flex !important;
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 10px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: #1E1450 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14.4px !important;
    letter-spacing: -0.06px !important;
    text-transform: capitalize !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  #kc-login[disabled],
  #kc-getOtp[disabled],
  #kc-submitOtp[disabled] {
    background: #f5f6f8 !important;
    border: 1px solid #e8eaef !important;
    color: #a8acb8 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }

  /* Social providers section - aligned with the form card (form column has margin: 0 16px) */
  #kc-socialProviders {
    background: var(--ods-login-card-bg) !important;
    border-radius: 0 !important;
    margin: 0 16px !important;
    width: auto !important;
    border-top: 0 !important;
    box-sizing: border-box !important;
  }
  #kc-socialProviders-wrapper {
    background: var(--ods-login-card-bg) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-top: 0 !important;
    box-sizing: border-box !important;
  }

  /* Parent container for social providers */
  .mainBody .mx-auto.col-lg-9.col-xl-7 .row > .col-sm-12:last-child {
    padding: 0 !important;
    margin: 0 !important;
  }

  #kc-social-providers,
  #kc-info,
  #kc-info-wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  #kc-social-providers ul {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* "OR" divider */
  /* OR divider - Figma: Pilat 14px/21px, color #6E6E72 */
  #kc-social-providers h2 {
    position: relative;
    padding: 24px 0 !important;
    border-bottom: 0 !important;
    text-align: center !important;
    color: #6E6E72 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    letter-spacing: 0 !important;
  }

  #kc-social-providers h2 span {
    background: var(--ods-login-card-bg) !important;
    color: #6E6E72 !important;
    padding: 0 14px !important;
  }

  #kc-social-providers h2::before,
  #kc-social-providers h2::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    border-top: 1px solid #cfd3dc;
  }

  #kc-social-providers h2::before {
    left: 0;
  }

  #kc-social-providers h2::after {
    right: 0;
  }

  /* Hide "Employee Sign In via Single Sign on" subtitle */
  #kc-social-providers h6,
  #kc-social-providers > h6,
  .social-provider-container h6,
  .social-provider-container > h6 {
    display: none !important;
  }

  /* SSO section container */
  #kc-social-providers .social-provider-element {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* DP World pill button - Figma: icon LEFT, text CENTER */
  #kc-social-providers .social-provider-label,
  #kc-social-providers .social-DPWorldAzureAD-label {
    display: flex !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 10px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    border: 1px solid #1E1450 !important;
    border-radius: 100px !important;
    background: #FFFFFF !important;
    color: #1E1450 !important;
    position: relative !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  /* Hide DPWorld logo inside the label */
  #kc-social-providers .social-DPWorldAzureAD-label img.DPWorldAzureAD-logo,
  #kc-social-providers .social-provider-label img.DPWorldAzureAD-logo {
    display: none !important;
  }

  /* Azure icon pinned to the LEFT inside the pill (from wrapper) */
  #kc-social-providers .social-DPWorldAzureAD-wrapper .social-provider-icon {
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    z-index: 4 !important;
    pointer-events: none !important;
  }

  /* Button text - centered, Pilat Wide 600 12px */
  #kc-social-providers .social-provider-label .DPWorldAzureAD-signin-text,
  #kc-social-providers .social-provider-label .social-provider-signin-text,
  #kc-social-providers .social-DPWorldAzureAD-label .DPWorldAzureAD-signin-text {
    color: #1E1450 !important;
    text-align: center !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14.4px !important;
    letter-spacing: -0.06px !important;
    text-transform: capitalize !important;
  }

  /* Hide duplicate mobile label */
  #kc-social-providers .social-provider-mobile-label {
    display: none !important;
  }

  #kc-social-providers .social-provider-wrapper,
  #kc-social-providers .fallback-icon {
    display: none !important;
  }

  /* Wrapper anchor becomes a transparent click overlay on top of the styled label */
  #kc-social-providers .social-DPWorldAzureAD-wrapper {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 3 !important;
    pointer-events: auto !important;
  }

  #kc-social-providers .social-DPWorldAzureAD-wrapper a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 100px !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }

  /* Hide any other images inside the wrapper anchor, but NOT the Azure icon */
  #kc-social-providers .social-DPWorldAzureAD-wrapper a img:not(.social-provider-icon),
  #kc-social-providers .social-DPWorldAzureAD-wrapper .fallback-icon {
    display: none !important;
  }

  #kc-socialProviders,
  #kc-socialProviders-wrapper,
  #kc-social-providers,
  #kc-info-wrapper {
    gap: 0 !important;
  }

  /* Registration/Info section */
  #kc-info {
    width: 92% !important;
    margin: -1px auto 0 !important;
    padding: 0 24px 24px !important;
    background: var(--ods-login-card-bg) !important;
    border-radius: 0 0 8px 8px !important;
    box-sizing: border-box !important;
  }

  #kc-registration > .col-md-12 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 24px 0 0 !important;
    padding: 0 24px !important;
  }

  /* "Not A Member ? Sign Up" left side text - Pilat Wide 600 12px/14.4px #1E1450 */
  #kc-registration .member-txt {
    display: inline-flex !important;
    align-items: center !important;
    color: #1E1450 !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14.4px !important;
    letter-spacing: -0.06px !important;
    text-transform: capitalize !important;
    margin: 0 !important;
    padding: 0 4px 0 0 !important;
  }

  #kc-registration #kc-guest-login-or {
    display: none !important;
  }

  #kc-registration #kc-guest-login {
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
    bottom: auto !important;
    margin: 0 0 0 auto !important;
  }

  /* "Sign Up" / "Guest Login" links - Pilat Wide 600 12px/14.4px #1E1450 */
  #kc-registration .not-member-sign,
  #kc-registration .kc-guestLogin,
  #kc-guestLogin {
    color: #1E1450 !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14.4px !important;
    letter-spacing: -0.06px !important;
    text-transform: capitalize !important;
  }

  #kc-registration .not-member-sign {
    display: inline-flex !important;
    align-items: center !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #kc-guest-login-or {
    display: none !important;
  }

  #kc-guest-login {
    display: inline-flex !important;
    position: static !important;
    bottom: auto !important;
    margin: 0 0 0 auto !important;
  }

  #kc-guestLogin {
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Footer - match desktop style */
  #footerclass {
    padding: 24px 16px 16px !important;
    margin-top: auto !important;
    width: 100% !important;
    background: #ffffff !important;
  }

  #footerclass .row {
    margin: 0 !important;
    justify-content: center !important;
  }

  #footerclass .row:first-child {
    margin-bottom: 8px !important;
  }

  #footerclass .row:nth-child(n + 3) {
    display: none !important;
  }

  #footerclass #copyRights {
    display: block !important;
    color: #8a8d99 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-align: center !important;
    letter-spacing: -0.05px !important;
  }

  #footerclass .row:nth-child(2) .footer-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: 0 !important;
  }

  #footerclass #privacyPolicy,
  #footerclass #termsAndConditions,
  #footerclass #acceptableUsePolicy,
  #footerclass #cookiePolicy {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #2f80ed !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 10px !important;
    line-height: 8px !important;
    font-weight: 400 !important;
    letter-spacing: -0.05px !important;
    text-decoration: none !important;
    padding-left: 16px !important;
  }

  #footerclass #acceptableUsePolicy,
  #footerclass #cookiePolicy {
    display: none !important;
  }

  #footerclass #privacyPolicy::before,
  #footerclass #termsAndConditions::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
  }

  #footerclass #privacyPolicy::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4154' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-2.8 7.9-7 9-4.2-1.1-7-4.8-7-9V6l7-3z'/%3E%3Cpath d='M9.5 12.5l1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
  }

  #footerclass #termsAndConditions::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4154' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 2.2 2.8 15.8 0 18M12 3c-2.8 2.2-2.8 15.8 0 18'/%3E%3C/svg%3E");
  }

  #footerclass #privacyPolicy.show-pipe::after {
    margin-left: 10px;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
    color: #1e1450;
  }

  .footer-text,
  .footer-text a {
    font-size: 10px !important;
    line-height: 8px !important;
    letter-spacing: -0.05px !important;
  }
}

/* Deployment-safe final overrides. Keep this at EOF so nothing re-splits the card. */
#kc-form-wrapper,
#kc-form-wrapper *,
#kc-socialProviders,
#kc-socialProviders *,
#kc-info,
#kc-info *,
#footerclass,
#footerclass * {
  font-family: "Pilat", sans-serif !important;
}

#kc-form-login {
  background: var(--ods-login-card-bg) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 24px 24px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#kc-socialProviders,
#kc-socialProviders-wrapper,
#kc-social-providers,
#kc-info,
#kc-info-wrapper {
  background: var(--ods-login-card-bg) !important;
  box-sizing: border-box !important;
}

#kc-socialProviders,
#kc-socialProviders-wrapper {
  width: 100% !important;
  margin: -1px 0 0 !important;
  border-radius: 0 !important;
}

#kc-socialProviders-wrapper {
  padding: 0 16px !important;
}

#kc-social-providers {
  padding: 0 !important;
}


#kc-social-providers .social-provider-label {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
}

#kc-social-providers .social-DPWorldAzureAD-wrapper,
#kc-social-providers .social-DPWorldAzureAD-wrapper a {
  width: 100% !important;
  box-sizing: border-box !important;
}

#kc-social-providers .social-DPWorldAzureAD-wrapper a {
  min-height: 36px !important;
  padding: 0 !important;
}

#kc-info {
  width: 100% !important;
  margin: -1px 0 0 !important;
  padding: 24px 24px 24px !important;
  border-radius: 0 0 8px 8px !important;
}

#kc-info-wrapper {
  padding: 0 !important;
}

#kc-registration > .col-md-12 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 24px 0 0 !important;
  padding: 0 24px !important;
}

#kc-registration .member-txt {
  display: inline-flex !important;
  align-items: center !important;
  color: #1E1450 !important;
  font-family: "Pilat Wide", sans-serif !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  font-weight: 600 !important;
  letter-spacing: -0.06px !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
}

#kc-registration #kc-guest-login-or {
  display: none !important;
}

#kc-registration #kc-guest-login {
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  bottom: auto !important;
  margin: 0 0 0 auto !important;
}

#kc-registration .mat-button-wrapper,
#kc-guestLogin {
  font-family: "Pilat Wide", sans-serif !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  font-weight: 600 !important;
  letter-spacing: -0.06px !important;
  text-transform: capitalize !important;
  color: #1E1450 !important;
}

#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form input[type="number"],
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-form-login input[type="number"] {
  background: #ffffff !important;
}

/* Deployment-safe final overrides. Keep this at EOF so nothing re-splits the card. */
#kc-form-wrapper,
#kc-form-wrapper *,
#kc-socialProviders,
#kc-socialProviders *,
#kc-info,
#kc-info *,
#footerclass,
#footerclass * {
  font-family: "Pilat", sans-serif !important;
}

#kc-form-login {
  background: var(--ods-login-card-bg) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 24px 24px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#kc-socialProviders,
#kc-socialProviders-wrapper,
#kc-social-providers,
#kc-info,
#kc-info-wrapper {
  background: var(--ods-login-card-bg) !important;
  box-sizing: border-box !important;
}

#kc-socialProviders,
#kc-socialProviders-wrapper {
  width: 100% !important;
  margin: -1px 0 0 !important;
  border-radius: 0 !important;
}

#kc-socialProviders-wrapper {
  padding: 0 16px !important;
}

#kc-social-providers {
  padding: 0 !important;
}


#kc-social-providers .social-provider-label {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
}

#kc-social-providers .social-DPWorldAzureAD-wrapper,
#kc-social-providers .social-DPWorldAzureAD-wrapper a {
  width: 100% !important;
  box-sizing: border-box !important;
}

#kc-social-providers .social-DPWorldAzureAD-wrapper a {
  min-height: 36px !important;
  padding: 0 !important;
}

#kc-info {
  width: 100% !important;
  margin: -1px 0 0 !important;
  padding: 24px 24px 24px !important;
  border-radius: 0 0 8px 8px !important;
}

#kc-info-wrapper {
  padding: 0 !important;
}

#kc-registration > .col-md-12 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 24px 0 0 !important;
  padding: 0 24px !important;
}

#kc-registration .member-txt {
  display: inline-flex !important;
  align-items: center !important;
  color: #1E1450 !important;
  font-family: "Pilat Wide", sans-serif !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  font-weight: 600 !important;
  letter-spacing: -0.06px !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
}

#kc-registration #kc-guest-login-or {
  display: none !important;
}

#kc-registration #kc-guest-login {
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  bottom: auto !important;
  margin: 0 0 0 auto !important;
}

#kc-registration .mat-button-wrapper,
#kc-guestLogin {
  font-family: "Pilat Wide", sans-serif !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  font-weight: 600 !important;
  letter-spacing: -0.06px !important;
  text-transform: capitalize !important;
  color: #1E1450 !important;
}

#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form input[type="number"],
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-form-login input[type="number"] {
  background: #ffffff !important;
}

/* Final login-card hardening: this must stay last so desktop/mobile blocks cannot split the card. */
#kc-form-wrapper,
#kc-form-wrapper *,
#kc-socialProviders,
#kc-socialProviders *,
#kc-info,
#kc-info *,
#footerclass,
#footerclass * {
  font-family: "Pilat", sans-serif !important;
}

#kc-form-login {
  background: var(--ods-login-card-bg) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 24px 24px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#kc-socialProviders,
#kc-socialProviders-wrapper,
#kc-social-providers,
#kc-info,
#kc-info-wrapper {
  background: var(--ods-login-card-bg) !important;
  box-sizing: border-box !important;
}

#kc-socialProviders,
#kc-socialProviders-wrapper {
  width: 100% !important;
  margin: -1px 0 0 !important;
  border-radius: 0 !important;
}

#kc-socialProviders-wrapper {
  padding: 0 16px !important;
}

#kc-social-providers {
  padding: 0 !important;
}


#kc-social-providers .social-provider-label {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
}

#kc-social-providers .social-DPWorldAzureAD-wrapper {
  width: 100% !important;
}

#kc-social-providers .social-DPWorldAzureAD-wrapper a {
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#kc-info {
  width: 100% !important;
  margin: -1px 0 0 !important;
  padding: 24px 24px 24px !important;
  border-radius: 0 0 8px 8px !important;
}

#kc-info-wrapper {
  padding: 0 !important;
}

#kc-registration > .col-md-12 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 24px 0 0 !important;
  padding: 0 24px !important;
}

#kc-registration .member-txt {
  display: inline-flex !important;
  align-items: center !important;
  color: #1E1450 !important;
  font-family: "Pilat Wide", sans-serif !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  font-weight: 600 !important;
  letter-spacing: -0.06px !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
}

#kc-registration #kc-guest-login-or {
  display: none !important;
}

#kc-registration #kc-guest-login {
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  bottom: auto !important;
  margin: 0 0 0 auto !important;
}

#kc-registration .mat-button-wrapper,
#kc-guestLogin {
  font-family: "Pilat Wide", sans-serif !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  font-weight: 600 !important;
  letter-spacing: -0.06px !important;
  text-transform: capitalize !important;
  color: #1E1450 !important;
}

#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form input[type="number"],
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-form-login input[type="number"] {
  background: #ffffff !important;
}

@media (max-width: 991px) {
  #kc-socialProviders-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #kc-info {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Final Figma alignment overrides: keep login typography and card geometry consistent across breakpoints. */
#kc-form-wrapper,
#kc-form-wrapper *,
#kc-socialProviders,
#kc-socialProviders *,
#kc-info,
#kc-info *,
#footerclass,
#footerclass * {
  font-family: "Pilat", sans-serif !important;
}

#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form input[type="number"],
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-form-login input[type="number"] {
  background: #ffffff !important;
}

#kc-form :is(#username, #password):-webkit-autofill,
#kc-form-login :is(#username, #password):-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

@media (max-width: 991px) {
  #kc-form-login,
  #kc-socialProviders,
  #kc-socialProviders-wrapper,
  #kc-info {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #kc-form-login {
    border-radius: 8px 8px 0 0 !important;
    padding: 24px 24px 0 !important;
  }

  #kc-socialProviders,
  #kc-socialProviders-wrapper {
    border-radius: 0 !important;
    background: var(--ods-login-card-bg) !important;
  }

  #kc-socialProviders-wrapper {
    padding: 0 24px !important;
  }

  #kc-info {
    padding: 0 24px 24px !important;
    background: var(--ods-login-card-bg) !important;
    border-radius: 0 0 8px 8px !important;
  }
}

@media (min-width: 992px) {
  #kc-form-login,
  #kc-socialProviders-wrapper,
  #kc-info {
    background: var(--ods-login-card-bg) !important;
  }

  #kc-form-login {
    border-radius: 8px 8px 0 0 !important;
  }

  #kc-socialProviders-wrapper {
    border-radius: 0 !important;
  }

  #kc-info {
    border-radius: 0 0 8px 8px !important;
  }
}

@media (min-width: 992px) {
  .mainBody > .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .mainBody {
    justify-content: flex-start !important;
    align-self: flex-start !important;
    margin-bottom: 0 !important;
    padding-top: 100px !important;
    padding-left: 130px !important;
    color: var(--ods-login-text) !important;
  }

  .mainBody .mx-auto.col-lg-9.col-xl-7,
  .mainBody > .row > #kc-socialProviders {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 460px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }

  .mainBody .col-sm-12.mb-3 {
    margin-bottom: 0 !important;
  }

  #kc-form-wrapper {
    margin-bottom: 0 !important;
    background: transparent !important;
  }

  #kc-form-wrapper > h5 {
    margin: 0 0 50px !important;
    text-align: left !important;
    color: #0F0F19 !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 28.8px !important;
    letter-spacing: -0.12px !important;
  }

  .lbl-txt {
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    color: #0F0F19 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -0.08px !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
  }

  #kc-form {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  #kc-form-login {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: var(--ods-login-card-bg) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 24px 24px 0 !important;
  }

  /* Form-group gaps: 20px between email and password, 14px before submit */
  #kc-form-login .form-group {
    width: 100% !important;
    padding: 0 !important;
  }

  #kc-form-login .form-group:nth-of-type(1) {
    margin-bottom: 20px !important;
  }

  #kc-form-login .form-group:nth-of-type(2) {
    margin-bottom: 14px !important;
  }

  #kc-form-login .form-group:nth-of-type(3) {
    margin: 0 0 14px !important;
  }

  #kc-form #errordiv + #kc-form-login {
    border-radius: 0 !important;
    padding-top: 12px !important;
  }

  #kc-form label,
  #kc-form .kcLabelClass,
  .required {
    overflow: hidden !important;
    color: #6E6E72 !important;
    text-overflow: ellipsis !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 10px !important;
    letter-spacing: -0.06px !important;
    margin-bottom: 4px !important;
    text-transform: none !important;
  }

  #kc-form-options .checkbox {
    display: none !important;
  }

  #kc-form-options {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #kc-form-options + div,
  #kc-form-options + div > span {
    display: block !important;
    width: 100% !important;
  }

  /* Override #kc-form label styles for .lbl-txt subtitle */
  #kc-form .lbl-txt {
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    color: #0F0F19 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -0.08px !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
  }

  /* Form inputs - Figma: 32px height, 8px padding, #B6B6B9 border */
  #kc-form input[type="text"],
  #kc-form input[type="password"],
  #kc-form input[type="number"],
  #kc-form input[type="email"],
  #kc-form-login input[type="text"],
  #kc-form-login input[type="password"],
  #kc-form-login input[type="number"],
  #kc-form-login input[type="email"] {
    display: flex !important;
    width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 8px !important;
    border: 1px solid #B6B6B9 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    color: #0F0F19 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 14px !important;
    line-height: 16px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Form placeholders - Figma spec */
  #kc-form input::placeholder,
  #kc-form-login input::placeholder {
    overflow: hidden !important;
    color: #B6B6B9 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    letter-spacing: -0.07px !important;
    opacity: 1 !important;
  }

  #kc-form :is(#username, #password),
  #kc-form-login :is(#username, #password) {
    background: #ffffff !important;
  }

  #kc-form :is(#username, #password):focus,
  #kc-form-login :is(#username, #password):focus {
    background: #ffffff !important;
  }

  #kc-form :is(#username, #password):-webkit-autofill,
  #kc-form-login :is(#username, #password):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #22283a !important;
  }

  #kc-form input:focus,
  #kc-form-login input:focus {
    border-color: var(--ods-login-navy-border) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 1px var(--ods-login-navy-border) !important;
  }

  #toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #toggle-password .eye_icons {
    width: 20px !important;
    height: 20px !important;
    margin-top: 0 !important;
  }

  /* Hide eye icon when password field is empty */
  #kc-form-login .form-group:has(input[type="password"]:placeholder-shown) #toggle-password {
    display: none !important;
  }

  #resetPasswordBtn {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 0 !important;
    color: #1E1450 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 17.143px !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  #kc-form-buttons {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Sign In primary button - Figma: 36px pill, Pilat Wide 600 12px */
  #kc-login,
  #kc-getOtp,
  #kc-submitOtp {
    display: flex !important;
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 10px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: #1E1450 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14.4px !important;
    letter-spacing: -0.06px !important;
    text-transform: capitalize !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  #kc-login[disabled],
  #kc-getOtp[disabled],
  #kc-submitOtp[disabled] {
    background: #f5f6f8 !important;
    border: 1px solid #e8eaef !important;
    color: #a8acb8 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }

  #kc-form-login:has(#username:placeholder-shown) #kc-login,
  #kc-form-login:has(#password:placeholder-shown) #kc-login {
    background: #f5f6f8 !important;
    border: 1px solid #e8eaef !important;
    color: #a8acb8 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }

  #kc-socialProviders-wrapper {
    background: var(--ods-login-card-bg) !important;
    border-radius: 0 !important;
    padding: 0 24px !important;
    margin: 0 !important;
    width: 100% !important;
    border-top: 0 !important;
  }

  #kc-social-providers,
  #kc-info,
  #kc-info-wrapper {
    background: transparent !important;
    padding: 15px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  #kc-social-providers {
    padding: 0 !important;
  }

  /* OR divider - Figma: Pilat 14px/21px, color #6E6E72 */
  #kc-social-providers h2 {
    position: relative;
    padding: 24px 0 !important;
    border-bottom: 0 !important;
    text-align: center !important;
    color: #6E6E72 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    letter-spacing: 0 !important;
  }

  #kc-social-providers h2 span {
    background: var(--ods-login-card-bg) !important;
    color: #6E6E72 !important;
    padding: 0 14px !important;
  }

  #kc-social-providers h2::before,
  #kc-social-providers h2::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 41%;
    border-top: 1px solid #cfd3dc;
  }

  #kc-social-providers h2::before {
    left: 0;
  }

  #kc-social-providers h2::after {
    right: 0;
  }

  #kc-social-providers .social-provider-element {
    width: 100% !important;
    max-width: 90% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  #kc-socialProviders,
  #kc-socialProviders-wrapper,
  #kc-social-providers,
  #kc-info-wrapper {
    gap: 0 !important;
  }

  /* DP World pill button - Figma: icon LEFT, text CENTER */
  #kc-social-providers .social-provider-label,
  #kc-social-providers .social-DPWorldAzureAD-label {
    display: flex !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 10px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    border: 1px solid #1E1450 !important;
    border-radius: 100px !important;
    background: #FFFFFF !important;
    color: #1E1450 !important;
    position: relative !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  /* Hide DPWorld logo inside the label */
  #kc-social-providers .social-DPWorldAzureAD-label img.DPWorldAzureAD-logo,
  #kc-social-providers .social-provider-label img.DPWorldAzureAD-logo {
    display: none !important;
  }

  /* Azure icon pinned to the LEFT inside the pill (from wrapper) */
  #kc-social-providers .social-DPWorldAzureAD-wrapper .social-provider-icon {
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    z-index: 4 !important;
    pointer-events: none !important;
  }

  /* Button text - centered, Pilat Wide 600 12px */
  #kc-social-providers .social-provider-label .DPWorldAzureAD-signin-text,
  #kc-social-providers .social-provider-label .social-provider-signin-text,
  #kc-social-providers .social-DPWorldAzureAD-label .DPWorldAzureAD-signin-text {
    color: #1E1450 !important;
    text-align: center !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14.4px !important;
    letter-spacing: -0.06px !important;
    text-transform: capitalize !important;
  }

  #kc-social-providers .social-provider-wrapper,
  #kc-social-providers .fallback-icon {
    display: none !important;
  }

  /* Wrapper anchor becomes a transparent click overlay on top of the styled label */
  #kc-social-providers .social-DPWorldAzureAD-wrapper {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 3 !important;
    pointer-events: auto !important;
  }

  #kc-social-providers .social-DPWorldAzureAD-wrapper a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }

  /* Hide any other images inside the wrapper anchor, but NOT the Azure icon */
  #kc-social-providers .social-DPWorldAzureAD-wrapper a img:not(.social-provider-icon),
  #kc-social-providers .social-DPWorldAzureAD-wrapper .fallback-icon {
    display: none !important;
  }

  #kc-info {
    width: 100% !important;
    margin: -1px 0 0 !important;
    padding: 0 24px 24px !important;
    background: var(--ods-login-card-bg) !important;
    border-radius: 0 0 8px 8px !important;
    box-sizing: border-box !important;
  }

  #kc-info-wrapper {
    padding: 0 !important;
  }

  #kc-registration > .col-md-12 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 24px 0 0 !important;
    padding: 0 24px !important;
  }

  #kc-registration .mat-button-wrapper {
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
  }

  /* "Not A Member ? Sign Up" left side text - Pilat Wide 600 12px/14.4px #1E1450 */
  #kc-registration .member-txt {
    display: inline-flex !important;
    align-items: center !important;
    color: #1E1450 !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14.4px !important;
    letter-spacing: -0.06px !important;
    text-transform: capitalize !important;
    margin: 0 !important;
    padding: 0 4px 0 0 !important;
  }

  #kc-registration #kc-guest-login-or {
    display: none !important;
  }

  #kc-registration #kc-guest-login {
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
    bottom: auto !important;
    margin: 0 0 0 auto !important;
  }

  /* "Sign Up" / "Guest Login" links - Pilat Wide 600 12px/14.4px #1E1450 */
  #kc-registration .not-member-sign,
  #kc-registration .kc-guestLogin,
  #kc-guestLogin {
    color: #1E1450 !important;
    font-family: "Pilat Wide", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14.4px !important;
    letter-spacing: -0.06px !important;
    text-transform: capitalize !important;
  }

  #kc-registration .not-member-sign {
    display: inline-flex !important;
    align-items: center !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #kc-guest-login-or {
    display: none !important;
  }

  #kc-guest-login {
    display: inline-flex !important;
    position: static !important;
    bottom: auto !important;
    margin: 0 0 0 auto !important;
  }

  #kc-guestLogin {
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #footerclass {
    padding-top: 20px !important;
    padding-bottom: 12px !important;
    margin-top: 10px !important;
  }

  #footerclass .row {
    margin: 0 !important;
  }

  #footerclass .row:first-child {
    margin-bottom: 6px !important;
  }

  #footerclass .row:nth-child(n + 3) {
    display: none !important;
  }

  #footerclass #copyRights {
    display: block !important;
    color: #8a8d99 !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    letter-spacing: -0.05px !important;
  }

  #footerclass .row:nth-child(2) .footer-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: 0 !important;
  }

  #footerclass #privacyPolicy,
  #footerclass #termsAndConditions,
  #footerclass #acceptableUsePolicy,
  #footerclass #cookiePolicy {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #2f80ed !important;
    font-family: "Pilat", sans-serif !important;
    font-size: 10px !important;
    line-height: 8px !important;
    font-weight: 400 !important;
    letter-spacing: -0.05px !important;
    text-decoration: none !important;
    padding-left: 16px !important;
  }

  #footerclass #acceptableUsePolicy,
  #footerclass #cookiePolicy {
    display: none !important;
  }

  #footerclass #privacyPolicy::before,
  #footerclass #termsAndConditions::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
  }

  #footerclass #privacyPolicy::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4154' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-2.8 7.9-7 9-4.2-1.1-7-4.8-7-9V6l7-3z'/%3E%3Cpath d='M9.5 12.5l1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
  }

  #footerclass #termsAndConditions::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4154' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 2.2 2.8 15.8 0 18M12 3c-2.8 2.2-2.8 15.8 0 18'/%3E%3C/svg%3E");
  }

  #footerclass #privacyPolicy.show-pipe::after {
    margin-left: 10px;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
    color: #1e1450;
  }

  .footer-text,
  .footer-text a {
    font-size: 10px !important;
    line-height: 8px !important;
    letter-spacing: -0.05px !important;
  }
}

/* Deployment-safe final overrides. Keep this at EOF so nothing re-splits the card. */
#kc-form-wrapper,
#kc-form-wrapper *,
#kc-socialProviders,
#kc-socialProviders *,
#kc-info,
#kc-info *,
#footerclass,
#footerclass * {
  font-family: "Pilat", sans-serif !important;
}

#kc-form-login {
  background: var(--ods-login-card-bg) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 24px 24px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#kc-socialProviders,
#kc-socialProviders-wrapper,
#kc-social-providers,
#kc-info,
#kc-info-wrapper {
  background: var(--ods-login-card-bg) !important;
  box-sizing: border-box !important;
}

#kc-socialProviders,
#kc-socialProviders-wrapper {
  width: 100% !important;
  margin: -1px 0 0 !important;
  border-radius: 0 !important;
}

#kc-socialProviders-wrapper {
  padding: 0 16px !important;
}

#kc-social-providers {
  padding: 0 !important;
}


#kc-social-providers .social-provider-label {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
}

#kc-social-providers .social-DPWorldAzureAD-wrapper,
#kc-social-providers .social-DPWorldAzureAD-wrapper a {
  width: 100% !important;
  box-sizing: border-box !important;
}

#kc-social-providers .social-DPWorldAzureAD-wrapper a {
  min-height: 36px !important;
  padding: 0 !important;
}

#kc-info {
  width: 100% !important;
  margin: -1px 0 0 !important;
  padding: 24px 24px 24px !important;
  border-radius: 0 0 8px 8px !important;
}

#kc-info-wrapper {
  padding: 0 !important;
}

#kc-registration > .col-md-12 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 24px 0 0 !important;
  padding: 0 24px !important;
}

#kc-registration .member-txt {
  display: inline-flex !important;
  align-items: center !important;
  color: #1E1450 !important;
  font-family: "Pilat Wide", sans-serif !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  font-weight: 600 !important;
  letter-spacing: -0.06px !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
}

#kc-registration #kc-guest-login-or {
  display: none !important;
}

#kc-registration #kc-guest-login {
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  bottom: auto !important;
  margin: 0 0 0 auto !important;
}

#kc-registration .mat-button-wrapper,
#kc-guestLogin {
  font-family: "Pilat Wide", sans-serif !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  font-weight: 600 !important;
  letter-spacing: -0.06px !important;
  text-transform: capitalize !important;
  color: #1E1450 !important;
}

#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form input[type="number"],
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-form-login input[type="number"] {
  background: #ffffff !important;
}


/* ============================================
   Floating Labels
   ============================================ */

/* Form group must be relative for absolute label + eye icon */
#kc-form-login .form-group {
  position: relative !important;
}

/* Label starts as placeholder inside the input */
#kc-form-login .form-group label {
  position: absolute !important;
  top: 50% !important;
  left: 8px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-family: "Pilat", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 12px !important;
  color: #B6B6B9 !important;
  letter-spacing: -0.07px !important;
  background: transparent !important;
  pointer-events: none !important;
  transition: all 0.2s ease !important;
  z-index: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* On focus or when input has content, float label up above input */
#kc-form-login .form-group:has(input:focus) label,
#kc-form-login .form-group:has(input:not(:placeholder-shown)) label,
#kc-form-login .form-group:has(#username:focus) label,
#kc-form-login .form-group:has(#username:not(:placeholder-shown)) label,
#kc-form-login .form-group:has(#password:focus) label,
#kc-form-login .form-group:has(#password:not(:placeholder-shown)) label {
  top: -9px !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  line-height: 10px !important;
  color: #6E6E72 !important;
  letter-spacing: -0.06px !important;
  padding: 0 4px !important;
}

/* Reset input padding/height back to Figma values */
#kc-form-login input[type="text"],
#kc-form-login input[type="password"] {
  padding: 8px !important;
  height: 32px !important;
}

/* Remove inline margin-bottom from password input */
#password {
  margin-bottom: 0 !important;
}

/* Disabled Sign In button background */
#kc-login:disabled,
#kc-login[disabled] {
  background: #B6B6B9 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Reset guest-login input inside button so it doesn't add extra height */
#kc-registration #kc-guestLogin {
  display: inline !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

/* Reset mat-button-wrapper spans inside registration buttons */
#kc-registration .mat-button-wrapper {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* ============================================
   Residual spacing cleanup (keep at EOF)
   ============================================ */

/* Remove any stray top padding/margin from form elements */
#kc-form-login .login-pf-settings,
#kc-form-login .form-options-wrapper,
#kc-form-login #kc-form-options,
#kc-form-login #kc-form-buttons,
#kc-form-login #kc-form-buttons > * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Ensure registration row centers vertically */
#kc-registration {
  align-items: center !important;
}

@media (max-width: 991px) {
  
  #kc-socialProviders {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: -1px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  #kc-socialProviders-wrapper {
    width: auto !important;
    margin: 0 16px !important;         /* inset gray 16px = form card + signup row */
    padding: 0 !important;
    background: var(--ods-login-card-bg) !important;
    box-sizing: border-box !important;
  }
  #kc-social-providers {
    padding: 0 24px 16px !important;   
  }
  #kc-social-providers ul {
    padding: 0 !important;
  }


  #kc-form-login,
  #kc-info,
  #kc-info-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .mainBody > .row {
    align-content: flex-start !important;
  }
  #kc-socialProviders,
  #kc-info {
    margin-top: -1px !important;
  }

  .mainBody .mx-auto.col-lg-9.col-xl-7 > .row,
  .mainBody .mx-auto.col-lg-9.col-xl-7 .col-sm-12,
  #kc-form,
  #kc-form-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #kc-social-providers h2,
  .social-provider-container h2 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
}