/* Default theme variables */
:root {
  --primary-color: #1262c9;
  --login-card-box-color: #bcc0c7;
  --login-card-box-hover-color: var(--primary-color);
  --login-card-box-focus-color: var(--primary-color);
  --login-background: #f7f9fd;
  --language-icon-color: #ffffff;
  --language-icon-bg-color: var(--primary-color);
  --login-background-min-height: calc(100vh - 102px) !important;
  --brand-only-logo-url: url('/logo.png');
  --brand-logo-url: url('/images/brand_logo.png');
  --background-logo-url: url('/images/illustration_one.png');
  --footer-brand-logo-url: url('/images/footer_logo.png');
  --primary-button-color: #ffffff;
  --primary-button-bg-color: var(--primary-color);
  --primary-button-border-color: var(--primary-color);
  --primary-button-hover-color: #ffffff;
  --primary-button-hover-bg-color: color-mix(
    in srgb,
    var(--primary-color) 95%,
    black 25%
  );
  --primary-button-hover-border-color: color-mix(
    in srgb,
    var(--primary-color) 95%,
    black 25%
  );
  --primary-button-disable-color: #94a3b8;
  --primary-button-disable-bg-color: #ffffff;
  --primary-button-disable-border-color: #94a3b8;
  --secondary-button-color: var(--primary-color);
  --secondary-button-bg-color: #ffffff;
  --secondary-button-border-color: #ffffff;
  --secondary-button-hover-color: color-mix(
    in srgb,
    var(--primary-color) 95%,
    black 25%
  );
  --secondary-button-hover-bg-color: #ffffff;
  --secondary-button-hover-border-color: #ffffff;
  --secondary-button-disable-color: #ffffff;
  --secondary-button-disable-bg-color: #cbcbcb;
  --secondary-button-disable-border-color: #cbcbcb;
  --loading-indicator-ring-color: var(--primary-color);
  --loading-indicator-bg-color: transparent;
  --loading-indicator-font-color: #000000;
  --qrcode-border-color: var(--primary-color);
  --info-icon-color: var(--primary-color);
  --toggle-button-inactive-bg-color: #ffffff;
  --toggle-button-inactive-border-color: #d8d8d8;
  --toggle-button-active-bg-color: #ffffff;
  --toggle-button-active-border-color: var(--primary-color);
  --toggle-button-inactive-ball-color: #a7a8a9;
  --toggle-button-inactive-ball-border-color: #a7a8a9;
  --toggle-button-active-ball-color: var(--primary-color);
  --toggle-button-active-ball-border-color: var(--primary-color);
  --toggle-button-ring-color: var(--primary-color);
  --header-height: 55px;
  --footer-height: 47px;
  --signup-banner-background-color: color-mix(
    in srgb,
    var(--primary-color) 10%,
    white
  );
  --signup-banner-bottom-radius: 5px;
  --signup-banner-padding-top: 20px;
  --signup-banner-padding-bottom: 20px;
  --signup-banner-margin-top: 16px;
  --signup-banner-signup-url-color: var(--primary-color);
  --signup-banner-signup-url-color-hover: color-mix(
    in srgb,
    var(--primary-color) 95%,
    black 25%
  );
  --signup-banner-signup-url-color-focus: var(--primary-color);
  --signup-banner-font: normal normal 400 15px/19px 'Montserrat', sans-serif;
  --multipurpose-login-card-border-radius: 10px;
  --multipurpose-login-card-background-color: #ffffff;
  --top-left-bg-logo-url: url('/images/top_left_bg_logo.svg');
  --bottom-right-bg-logo-url: url('/images/bottom_right_bg_logo.svg');
  --bottom-left-bg-logo-display: none;
  --top-right-bg-logo-display: none;
  --top-left-bg-width: 14rem;
  --top-left-bg-height: 14rem;
  --top-left-bg-position-top: 10px;
  --top-left-bg-position-left: 10px;
  --bottom-left-bg-width: 14rem;
  --bottom-left-bg-height: 14rem;
  --bottom-left-bg-position-bottom: 10px;
  --bottom-left-bg-position-left: 10px;
  --top-right-bg-width: 14rem;
  --top-right-bg-height: 14rem;
  --top-right-bg-position-top: 10px;
  --top-right-bg-position-right: 10px;
  --bottom-right-bg-width: 17rem;
  --bottom-right-bg-height: 17rem;
  --bottom-right-bg-position-bottom: 10px;
  --bottom-right-bg-position-right: 10px;
  --login-client-logo-image-height: 3.25rem;
  --login-client-logo-image-width: 3.25rem;
  --login-alternate-arrow: '\21CB';
  --login-alternate-arrow-size: 1.5rem;
  --login-text-color: #000000;
  --login-card-separator: linear-gradient(0deg, #fffbf7 0%, #ffffff 100%);
  --login-card-separator-height: 1px;
  --footer-text-color: #898989;
  --footer-text-size: 14px;
  --language-check-icon-color: var(--primary-color);
  --forgot-password-color: var(--primary-color);
  --forgot-password-font-size: small;
  --forgot-password-width: max-content;
  --forgot-password-margin-top: 0.5rem;
  --forgot-password-margin-bottom: 0.5rem;
  --password-google-reCaptcha-margin-top: 3rem;
  --password-google-reCaptcha-margin-bottom: 1rem;
  --navbar-position: relative;
  --navbar-zIndex: 1;
  --navbar-box-shadow: 0px 2px 5px #0000001a;
  --back-button-color: var(--primary-color);
  --more-signin-options-color: var(--primary-color);
  --arrow-down-color: var(--primary-color);
  --primary-button-border-radius: 8px;
  --consent-details-header-font:
    normal normal 600 24px/29px 'Montserrat', sans-serif;
  --consent-details-header-color: #2b3840;
  --consent-details-subheader-font:
    normal normal 700 16px/21px 'Montserrat', sans-serif;
  --consent-details-subheader-color: #2c2c2c;
  --consent-details-infoIcon-fill: var(--primary-color);
  --consent-details-infoIcon-stroke: var(--primary-color);
  --consent-details-available-font:
    normal normal 500 14px/17px 'Montserrat', sans-serif;
  --consent-details-available-color: #76ac6d;
  --consent-details-unavailable-font:
    normal normal 500 14px/16px 'Montserrat', sans-serif;
  --consent-details-unavailable-color: #707070;
  --consent-details-message-color: var(--primary-color);
  --consent-details-message-background: color-mix(
    in srgb,
    var(--primary-color) 5%,
    white
  );
  --otp-pin-input-width: 40px;
  --otp-pin-input-height: 40px;
  --otp-pin-input-margin: 0 5px;
  --otp-pin-input-color: var(--primary-color);
  --otp-pin-input-border-bottom: 2px solid var(--primary-color);
  --checkbox-color: var(--primary-color);
  --wallet-download-text-color: var(--primary-color);
  --no-record-banner-background: color-mix(
    in srgb,
    var(--primary-color) 5%,
    white
  );
  --no-record-banner-border-radius: 10px;
  --no-record-banner-font: normal normal 400 13px/18px 'Montserrat', sans-serif;
  --no-record-banner-color: var(--primary-color);
  --no-record-banner-padding: 1em 1.5em;
  --selected_login_id_border_color: var(--primary-color);
  --selected_login_id_color: var(--primary-color);
  --login_id_hover_border_color: var(--primary-color);
  --login_id_hover_color: var(--primary-color);
  --selected_login_id_focus_color: var(--primary-color);
  --selected_login_id_focus_outline_color: var(--primary-color);
  --qr_code_title_color: #696969;
  --resend_otp_button_color: var(--primary-color);
  --login-client-logo-image-shadow: 0px 4px 15px 2px
    color-mix(in srgb, var(--primary-color) 30%, transparent);
  --caps-lock-text-color: #2d86ba;
  --login-header-text-color: rgb(0, 0, 0);
  --login-subheader-text-color: #838383;
  --selected-lang-text-color: var(--primary-color);
  --border-button-text-color: var(--primary-color);
  --border-button-border-color: var(--primary-color);
  --consent-timer-text-color: var(--primary-color);
  --consent-banner-background-color: color-mix(
    in srgb,
    var(--primary-color) 5%,
    white
  );
  --consent-banner-border-radius: 10px;
}

/* example theme to override default variables
[class='brown'] {
  --primary-color: #eb6f2d;
  --bottom-left-bg-logo-url: url('/images/top_left_bg_logo.svg');
  --bottom-left-bg-logo-display: block;
} */