:root { color-scheme: light; /* for operating system */ /* Breakpoints: XS < 480px (default) SM: >= 480px MD: >= 768px LG: >= 992px XL: >= 1200px XXL: >= 1300px */ /* NEW - Vars for Shell - Light */ --nxn-la-fdic-bar-bg-color: #e0e0e0; --nxn-la-fdic-bar-fg-color: #000; --nxn-la-footer-bd-color: #ccc; --nxn-la-footer-bg-color: transparent; --nxn-la-footer-copyright-fg-color: #4b4b4b; --nxn-la-footer-fdic-bg-color: transparent; --nxn-la-footer-fdic-fg-color: #4b4b4b; --nxn-la-footer-fg-color: #4b4b4b; --nxn-la-footer-generic-link-color: #4b4b4b; --nxn-la-footer-generic-link-hover-color: #4b4b4b; --nxn-la-footer-nav-link-color: #4b4b4b; --nxn-la-footer-nav-link-hover-color: #4b4b4b; --nxn-la-header-banner-padding-sm: 20px 24px 20px 15px; --nxn-la-header-banner-padding-md: 30px 24px 30px 15px; --nxn-la-header-banner-padding-lg: 40px 24px 40px 15px; --nxn-la-header-bg-color: transparent; --nxn-la-header-fg-color: #4b4b4b; /* NEW - Vars for Shell - Light - end */ /* body */ --nxn-la-login-body-font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; --nxn-la-login-body-font-size: 1rem; --nxn-la-login-body-line-height: 1.5; --nxn-la-login-body-bg-color: #fafafa; --nxn-la-login-body-fg-color: var(--nxn-sys-color-on-background); --nxn-la-login-portal-wrapper-bg-color: transparent; --nxn-la-login-portal-wrapper-box-shadow: none; /* body background images */ --nxn-la-img-body-bg-land_1: none; --nxn-la-img-body-bg-land_2: none; --nxn-la-img-body-bg-port: none; /* deprecated */ --nxn-la-img-body-bg-xs: none; --nxn-la-img-body-bg-sm: none; --nxn-la-img-body-bg-md: none; --nxn-la-img-body-bg-lg: none; --nxn-la-img-body-bg-xl: none; --nxn-la-img-body-bg-xxl: none; /* deprecated - end */ --nxn-la-img-body-bg-position: left top; --nxn-la-img-body-bg-size: 100%; --nxn-la-img-body-bg-repeat: no-repeat; /* container- layout wrapper */ --nxn-la-container-margin: auto; /* margin-inline (left and right margin only) */ --nxn-la-container-padding: 1rem; /* padding-inline (left and right padding only) */ --nxn-la-container-width-xs: auto; /* starting from 0 */ --nxn-la-container-width-sm: 480px; /* min-width: 510px */ --nxn-la-container-width-md: 750px; /* min-width: 768px */ --nxn-la-container-width-lg: 970px; /* min-width: 992px */ --nxn-la-container-width-xl: 1170px; /* min-width: 1200px */ --nxn-la-container-width-xxl: 1270px; /* min-width: 1300px */ /* jumbotron */ --nxn-la-login-img-jumbotron-lg: url(/app/shared-wl-assets/17/img/whitelabel/nxn/hero_image_lg.jpg); --nxn-la-login-img-jumbotron-md: url(/app/shared-wl-assets/17/img/whitelabel/nxn/hero_image_md.jpg); --nxn-la-login-img-jumbotron-sm: url(/app/shared-wl-assets/17/img/whitelabel/nxn/hero_image_sm.jpg); --nxn-la-login-jumbotron-bg-color: transparent; --nxn-la-login-jumbotron-bg-position-xs: left top; --nxn-la-login-jumbotron-bg-position-sm: left top; --nxn-la-login-jumbotron-bg-position-md: left top; --nxn-la-login-jumbotron-bg-position-lg: left top; --nxn-la-login-jumbotron-bg-position-xl: left top; --nxn-la-login-jumbotron-bg-position-xxl: left top; --nxn-la-login-jumbotron-bg-repeat: no-repeat; --nxn-la-login-jumbotron-bg-size: cover; --nxn-la-login-jumbotron-bd-top-width-xs: 0; --nxn-la-login-jumbotron-bd-top-width-sm: 0; --nxn-la-login-jumbotron-bd-top-width-md: 0; --nxn-la-login-jumbotron-bd-top-width-lg: 0; --nxn-la-login-jumbotron-bd-top-width-xl: 0; --nxn-la-login-jumbotron-bd-top-width-xxl: 0; --nxn-la-login-jumbotron-bd-top-color: transparent; --nxn-la-login-jumbotron-border-radius: 0.1875rem; --nxn-la-login-jumbotron-box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 4px 1px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); /* Hero Text */ --nxn-la-login-hero-box-bg-color: transparent; --nxn-la-login-hero-box-border-radius: 0; --nxn-la-login-hero-box-z-index: 10; /* hero box css-grid column span (lines 1-101) */ --nxn-la-login-hero-box-grid-column-xs: 1 / 101; --nxn-la-login-hero-box-grid-column-sm: 1 / 101; --nxn-la-login-hero-box-grid-column-md: 4 / 49; --nxn-la-login-hero-box-grid-column-lg: 6 / 48; --nxn-la-login-hero-box-grid-column-xl: 6 / 42; --nxn-la-login-hero-box-grid-column-xxl: 5 / 42; /* hero box css-grid row placement */ --nxn-la-login-hero-box-grid-row-xs: 2; --nxn-la-login-hero-box-grid-row-sm: 2; --nxn-la-login-hero-box-grid-row-md: 1; --nxn-la-login-hero-box-grid-row-lg: 1; --nxn-la-login-hero-box-grid-row-xl: 1; --nxn-la-login-hero-box-grid-row-xxl: 1; /* hero box vertical alignment within cell */ /* start | end | center | stretch */ --nxn-la-login-hero-box-align-self-xs: start; --nxn-la-login-hero-box-align-self-sm: start; --nxn-la-login-hero-box-align-self-md: start; --nxn-la-login-hero-box-align-self-lg: start; --nxn-la-login-hero-box-align-self-xl: start; --nxn-la-login-hero-box-align-self-xxl: start; --nxn-la-login-hero-box-margin-xs: 0; --nxn-la-login-hero-box-margin-sm: 0; --nxn-la-login-hero-box-margin-md: 50px 0 60px 0; --nxn-la-login-hero-box-margin-lg: 60px 0 70px 0; --nxn-la-login-hero-box-margin-xl: 75px 0 85px 0; --nxn-la-login-hero-box-margin-xxl: 90px 0 100px 0; --nxn-la-login-hero-box-padding-xs: 1.3125rem; --nxn-la-login-hero-box-padding-sm: 1.575rem; --nxn-la-login-hero-box-padding-md: 1.75rem; --nxn-la-login-hero-box-padding-lg: 1.75rem; --nxn-la-login-hero-box-padding-xl: 2.1875rem; --nxn-la-login-hero-box-padding-xxl: 2.1875rem; --nxn-la-login-hero-tagline1-font-size-xs: 1.3125rem; --nxn-la-login-hero-tagline1-font-size-sm: 1.575rem; --nxn-la-login-hero-tagline1-font-size-md: 1.75rem; --nxn-la-login-hero-tagline1-font-size-lg: 1.75rem; --nxn-la-login-hero-tagline1-font-size-xl: 2.1875rem; --nxn-la-login-hero-tagline1-font-size-xxl: 2.1875rem; --nxn-la-login-hero-tagline2-font-size-xs: 0.91875rem; --nxn-la-login-hero-tagline2-font-size-sm: 1.1025rem; --nxn-la-login-hero-tagline2-font-size-md: 1.225rem; --nxn-la-login-hero-tagline2-font-size-lg: 1.225rem; --nxn-la-login-hero-tagline2-font-size-xl: 1.53125rem; --nxn-la-login-hero-tagline2-font-size-xxl: 1.53125rem; --nxn-la-login-hero-tagline1-color: var(--nxn-sys-color-primary); --nxn-la-login-hero-tagline2-color: #fff; --nxn-la-login-hero-tagline1-mar-bot: 1.3rem; /* login form */ --nxn-la-login-form-bg-gradient-start-color: rgba(255, 255, 255, 0.96); --nxn-la-login-form-bg-gradient-end-color: rgba(255, 255, 255, 0.96); --nxn-la-login-form-z-index: 20; /* login form css-grid column span (lines 1-101) */ --nxn-la-login-form-grid-column-xs: 1 / 101; --nxn-la-login-form-grid-column-sm: 1 / 101; --nxn-la-login-form-grid-column-md: 47 / 95; --nxn-la-login-form-grid-column-lg: 63 / 96; --nxn-la-login-form-grid-column-xl: 68 / 95; --nxn-la-login-form-grid-column-xxl: 68 / 95; /* login form css-grid row placement */ --nxn-la-login-form-grid-row-xs: 1; --nxn-la-login-form-grid-row-sm: 1; --nxn-la-login-form-grid-row-md: 1; --nxn-la-login-form-grid-row-lg: 1; --nxn-la-login-form-grid-row-xl: 1; --nxn-la-login-form-grid-row-xxl: 1; /* hero box vertical alignment within cell */ /* start | end | center | stretch */ --nxn-la-login-form-align-self-xs: start; --nxn-la-login-form-align-self-sm: start; --nxn-la-login-form-align-self-md: start; --nxn-la-login-form-align-self-lg: start; --nxn-la-login-form-align-self-xl: start; --nxn-la-login-form-align-self-xxl: start; --nxn-la-login-form-margin-xs: 1.5625rem; --nxn-la-login-form-margin-sm: 1.5625rem; --nxn-la-login-form-margin-md: 40px 0 40px 0; --nxn-la-login-form-margin-lg: 50px 0 50px 0; --nxn-la-login-form-margin-xl: 72px 0 72px 0; --nxn-la-login-form-margin-xxl: 72px 0 72px 0; --nxn-la-login-form-padding-xs: 20px; --nxn-la-login-form-padding-sm: 30px; --nxn-la-login-form-padding-md: 30px; --nxn-la-login-form-padding-lg: 30px; --nxn-la-login-form-padding-xl: 30px; --nxn-la-login-form-padding-xxl: 30px; --nxn-la-login-form-border-radius: 0.1875rem; --nxn-la-login-form-border-width: 0; --nxn-la-login-form-border-color: var(--nxn-sys-color-border); --nxn-la-login-form-error-msg-bg-color: transparent; --nxn-la-login-form-error-msg-color: var(--nxn-sys-color-warn); --nxn-la-login-form-error-msg-font-size: 0.9rem; --nxn-la-login-form-error-msg-font-weight: 400; --nxn-la-login-serverside-error-msg-bg-color: transparent; --nxn-la-login-serverside-error-msg-color: var(--nxn-sys-color-warn); --nxn-la-login-serverside-error-msg-font-size: 0.9rem; --nxn-la-login-serverside-error-msg-font-weight: 400; --nxn-la-login-form-not-available-icon-color: var( --nxn-comp-alert-warning-surface ); --nxn-la-login-form-label-color: var(--nxn-sys-color-on-surface); --nxn-la-login-form-label-font-weight: normal; --nxn-la-login-form-label-font-size: var(--nxn-la-login-body-font-size); --nxn-la-login-form-link-color: var(--nxn-comp-link-color); --nxn-la-login-form-link-hover-color: var(--nxn-comp-link-color-hover); --nxn-la-login-form-link-font-weight: normal; --nxn-la-login-form-link-font-size: 0.8125rem; /* 13px */ --nxn-la-login-form-icon-color: rgba(0, 0, 0, 0.55); --nxn-la-login-form-icon-hover-color: rgba(0, 0, 0, 0.7); --nxn-la-login-form-button-width: auto; --nxn-la-login-form-button-font-size: 1rem; --nxn-la-login-form-input-color: var(--nxn-sys-color-on-surface); --nxn-la-login-form-input-bg: var(--nxn-sys-color-surface); --nxn-la-login-form-input-border-color: var(--nxn-sys-color-form-border); --nxn-la-login-form-input-border-focus-color: var(--nxn-sys-color-primary); --nxn-la-login-form-input-disabled-color: var(--nxn-sys-disabled-on-surface); --nxn-la-login-form-input-disabled-bg: var(--nxn-sys-disabled-surface); --nxn-la-login-form-input-disabled-border-color: var( --nxn-sys-disabled-border-color ); --nxn-la-login-form-input-border-radius: 0.5rem; --nxn-la-login-form-input-box-shadow: none; --nxn-la-login-form-input-width: 100%; --nxn-la-login-form-input-height: 2.125rem; --nxn-la-login-form-input-padding: 0.375rem 0.75rem; --nxn-la-login-form-input-font-size: 1rem; --nxn-la-login-form-input-bg-img: none; --nxn-la-login-form-input-error-text-color: var(--nxn-sys-color-warn); --nxn-la-login-form-input-error-outline-color: var(--nxn-sys-color-warn); --nxn-la-login-form-input-placeholder: var(--nxn-sys-color-text-disabled); /* passcode input */ --nxn-la-login-form-passcode-input-text-align: center; --nxn-la-login-form-passcode-input-width: 2.5rem; --nxn-la-login-form-passcode-input-font-weight: 700; --nxn-la-login-form-passcode-long-input-text-align: center; --nxn-la-login-form-passcode-long-input-font-size: 2rem; --nxn-la-login-form-passcode-long-input-font-weight: 700; --nxn-la-login-form-passcode-long-input-letter-spacing: 0.2rem; --nxn-la-login-form-passcode-long-input-height: auto; --nxn-la-login-form-passcode-icon-color: var(--nxn-la-login-form-label-color); --nxn-la-login-form-passcode-icon-hover-color: var( --nxn-la-login-form-label-color ); /* Login Features */ --nxn-la-login-features-bg-color: var(--nxn-sys-color-surface); --nxn-la-login-features-border-width: 0; --nxn-la-login-features-border-color: transparent; --nxn-la-login-features-border-radius: 0.1875rem; --nxn-la-login-features-box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 4px 1px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); --nxn-la-login-features-padding: 1.5rem; --nxn-la-login-features-margin-bottom: 1.5rem; --nxn-la-login-features-marketing-image: url(/app/shared-wl-assets/17/img/whitelabel/nxn/nxn_promotional_photo_lg.jpg); /* Login Card */ --nxn-la-login-card-bg-color: var(--nxn-sys-color-surface); --nxn-la-login-card-bd-width: 0; --nxn-la-login-card-bd-color: var(--nxn-sys-color-border); --nxn-la-login-card-bd-top-color: var(--nxn-sys-color-primary); --nxn-la-login-card-bd-radius: 3px; --nxn-la-login-card-bd-padding: 1.5rem; --nxn-la-login-card-color: var(--nxn-sys-color-on-surface); --nxn-la-login-card-heading-color: var(--nxn-sys-color-on-surface); --nxn-la-login-card-heading-font-weight: 700; --nxn-la-login-card-heading-font-size: 1.5rem; /* va panels */ --nxn-la-login-main-panel-bg-color: var(--nxn-sys-color-surface); --nxn-la-login-main-panel-fg-color: var(--nxn-sys-color-on-surface); --nxn-la-login-aside-panel-bg-color: #f8fbfe; --nxn-la-login-aside-panel-fg-color: var(--nxn-sys-color-on-surface); --nxn-la-va-stepper-icon-color: var(--nxn-sys-color-on-primary); --nxn-la-logout-heading-color: var(--nxn-sys-color-primary); /* material vars */ --mat-autocomplete-background-color: var(--nxn-sys-color-surface); --mdc-filled-text-field-focus-active-indicator-color: var( --nxn-la-login-form-input-border-focus-color ); --mat-icon-color: var(--nxn-la-login-form-icon-color); } :root.dark-theme { color-scheme: dark; /* for operating system */ /* NEW - Vars for Shell - Dark */ --nxn-la-fdic-bar-bg-color: #262626; --nxn-la-fdic-bar-fg-color: rgba(255, 255, 255, 0.87); --nxn-la-footer-bd-color: rgba(255, 255, 255, 0.2); --nxn-la-footer-bg-color: #1a1a1a; --nxn-la-footer-copyright-fg-color: rgba(255, 255, 255, 0.5); --nxn-la-footer-fdic-bg-color: #1a1a1a; --nxn-la-footer-fdic-fg-color: rgba(255, 255, 255, 0.5); --nxn-la-footer-fg-color: rgba(255, 255, 255, 0.5); --nxn-la-footer-generic-link-color: rgba(255, 255, 255, 0.5); --nxn-la-footer-generic-link-hover-color: rgba(255, 255, 255, 0.5); --nxn-la-footer-nav-link-color: rgba(255, 255, 255, 0.5); --nxn-la-footer-nav-link-hover-color: rgba(255, 255, 255, 0.5); --nxn-la-header-banner-padding-sm: 20px 24px 20px 15px; --nxn-la-header-banner-padding-md: 30px 24px 30px 15px; --nxn-la-header-banner-padding-lg: 40px 24px 40px 15px; --nxn-la-header-bg-color: transparent; --nxn-la-header-fg-color: rgba(255, 255, 255, 0.87); /* NEW - Vars for Shell - Dark - end */ /* body */ --nxn-la-login-body-font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; --nxn-la-login-body-font-size: 1rem; --nxn-la-login-body-bg-color: #1c1c1c; --nxn-la-login-body-fg-color: var(--nxn-sys-color-on-background); --nxn-la-login-portal-wrapper-bg-color: transparent; --nxn-la-login-portal-wrapper-box-shadow: none; /* body background images */ --nxn-la-img-body-bg-land_1: none; --nxn-la-img-body-bg-land_2: none; --nxn-la-img-body-bg-port: none; /* deprecated */ --nxn-la-img-body-bg-xs: none; --nxn-la-img-body-bg-sm: none; --nxn-la-img-body-bg-md: none; --nxn-la-img-body-bg-lg: none; --nxn-la-img-body-bg-xl: none; --nxn-la-img-body-bg-xxl: none; /* deprecated - end */ --nxn-la-img-body-bg-position: left top; --nxn-la-img-body-bg-size: 100%; --nxn-la-img-body-bg-repeat: no-repeat; /* container- layout wrapper */ --nxn-la-container-margin: auto; /* margin-inline (left and right margin only) */ --nxn-la-container-width-xs: auto; /* starting from 0 */ --nxn-la-container-width-sm: 480px; /* min-width: 510px */ --nxn-la-container-width-md: 750px; /* min-width: 768px */ --nxn-la-container-width-lg: 970px; /* min-width: 992px */ --nxn-la-container-width-xl: 1170px; /* min-width: 1200px */ --nxn-la-container-width-xxl: 1270px; /* min-width: 1300px */ /* jumbotron */ --nxn-la-login-img-jumbotron-lg: url(/app/shared-wl-assets/17/img/whitelabel/nxn/hero_image_lg.jpg); --nxn-la-login-img-jumbotron-md: url(/app/shared-wl-assets/17/img/whitelabel/nxn/hero_image_md.jpg); --nxn-la-login-img-jumbotron-sm: url(/app/shared-wl-assets/17/img/whitelabel/nxn/hero_image_sm.jpg); --nxn-la-login-jumbotron-bg-color: transparent; --nxn-la-login-jumbotron-bg-position-xs: left top; --nxn-la-login-jumbotron-bg-position-sm: left top; --nxn-la-login-jumbotron-bg-position-md: left top; --nxn-la-login-jumbotron-bg-position-lg: left top; --nxn-la-login-jumbotron-bg-position-xl: left top; --nxn-la-login-jumbotron-bg-position-xxl: left top; --nxn-la-login-jumbotron-bg-repeat: no-repeat; --nxn-la-login-jumbotron-bg-size: cover; --nxn-la-login-jumbotron-bd-top-width-xs: 0; --nxn-la-login-jumbotron-bd-top-width-sm: 0; --nxn-la-login-jumbotron-bd-top-width-md: 0; --nxn-la-login-jumbotron-bd-top-width-lg: 0; --nxn-la-login-jumbotron-bd-top-width-xl: 0; --nxn-la-login-jumbotron-bd-top-width-xxl: 0; --nxn-la-login-jumbotron-bd-top-color: transparent; --nxn-la-login-jumbotron-border-radius: 0.1875rem; --nxn-la-login-jumbotron-box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.4), 0 2px 4px 1px rgba(0, 0, 0, 0.25), 0 1px 5px 0 rgba(0, 0, 0, 0.2); /* Hero Text */ --nxn-la-login-hero-box-bg-color: rgba(255, 255, 255, 0.7); --nxn-la-login-hero-box-border-radius: 0; /* hero box css-grid column span (lines 1-101) */ --nxn-la-login-hero-box-grid-column-xs: 1 / 101; --nxn-la-login-hero-box-grid-column-sm: 1 / 101; --nxn-la-login-hero-box-grid-column-md: 4 / 49; --nxn-la-login-hero-box-grid-column-lg: 6 / 48; --nxn-la-login-hero-box-grid-column-xl: 6 / 42; --nxn-la-login-hero-box-grid-column-xxl: 5 / 42; /* hero box css-grid row placement */ --nxn-la-login-hero-box-grid-row-xs: 1; --nxn-la-login-hero-box-grid-row-sm: 1; --nxn-la-login-hero-box-grid-row-md: 1; --nxn-la-login-hero-box-grid-row-lg: 1; --nxn-la-login-hero-box-grid-row-xl: 1; --nxn-la-login-hero-box-grid-row-xxl: 1; /* hero box vertical alignment within cell */ /* start | end | center | stretch */ --nxn-la-login-hero-box-align-self-xs: start; --nxn-la-login-hero-box-align-self-sm: start; --nxn-la-login-hero-box-align-self-md: start; --nxn-la-login-hero-box-align-self-lg: start; --nxn-la-login-hero-box-align-self-xl: start; --nxn-la-login-hero-box-align-self-xxl: start; --nxn-la-login-hero-box-margin-xs: 0; --nxn-la-login-hero-box-margin-sm: 0; --nxn-la-login-hero-box-margin-md: 50px 0 60px 0; --nxn-la-login-hero-box-margin-lg: 60px 0 70px 0; --nxn-la-login-hero-box-margin-xl: 75px 0 85px 0; --nxn-la-login-hero-box-margin-xxl: 90px 0 100px 0; --nxn-la-login-hero-box-padding-xs: 1.3125rem; --nxn-la-login-hero-box-padding-sm: 1.575rem; --nxn-la-login-hero-box-padding-md: 1.75rem; --nxn-la-login-hero-box-padding-lg: 1.75rem; --nxn-la-login-hero-box-padding-xl: 2.1875rem; --nxn-la-login-hero-box-padding-xxl: 2.1875rem; --nxn-la-login-hero-tagline1-font-size-xs: 1.3125rem; --nxn-la-login-hero-tagline1-font-size-sm: 1.575rem; --nxn-la-login-hero-tagline1-font-size-md: 1.75rem; --nxn-la-login-hero-tagline1-font-size-lg: 1.75rem; --nxn-la-login-hero-tagline1-font-size-xl: 2.1875rem; --nxn-la-login-hero-tagline1-font-size-xxl: 2.1875rem; --nxn-la-login-hero-tagline2-font-size-xs: 0.91875rem; --nxn-la-login-hero-tagline2-font-size-sm: 1.1025rem; --nxn-la-login-hero-tagline2-font-size-md: 1.225rem; --nxn-la-login-hero-tagline2-font-size-lg: 1.225rem; --nxn-la-login-hero-tagline2-font-size-xl: 1.53125rem; --nxn-la-login-hero-tagline2-font-size-xxl: 1.53125rem; --nxn-la-login-hero-tagline1-color: var(--nxn-sys-color-primary); --nxn-la-login-hero-tagline2-color: var(--nxn-sys-color-on-surface); --nxn-la-login-hero-tagline1-mar-bot: 0.5rem; /* login form */ --nxn-la-login-form-bg-gradient-start-color: rgba(0, 0, 0, 0.8); --nxn-la-login-form-bg-gradient-end-color: rgba(0, 0, 0, 0.7); /* login form css-grid column span (lines 1-101) */ --nxn-la-login-form-grid-column-xs: 1 / 101; --nxn-la-login-form-grid-column-sm: 1 / 101; --nxn-la-login-form-grid-column-md: 47 / 95; --nxn-la-login-form-grid-column-lg: 63 / 96; --nxn-la-login-form-grid-column-xl: 68 / 95; --nxn-la-login-form-grid-column-xxl: 68 / 95; /* login form css-grid row placement */ --nxn-la-login-form-grid-row-xs: 1; --nxn-la-login-form-grid-row-sm: 1; --nxn-la-login-form-grid-row-md: 1; --nxn-la-login-form-grid-row-lg: 1; --nxn-la-login-form-grid-row-xl: 1; --nxn-la-login-form-grid-row-xxl: 1; /* hero box vertical alignment within cell */ /* start | end | center | stretch */ --nxn-la-login-form-align-self-xs: start; --nxn-la-login-form-align-self-sm: start; --nxn-la-login-form-align-self-md: start; --nxn-la-login-form-align-self-lg: start; --nxn-la-login-form-align-self-xl: start; --nxn-la-login-form-align-self-xxl: start; --nxn-la-login-form-margin-xs: 1.5625rem; --nxn-la-login-form-margin-sm: 1.5625rem; --nxn-la-login-form-margin-md: 40px 0 40px 0; --nxn-la-login-form-margin-lg: 50px 0 50px 0; --nxn-la-login-form-margin-xl: 72px 0 72px 0; --nxn-la-login-form-margin-xxl: 72px 0 72px 0; --nxn-la-login-form-padding-xs: 20px; --nxn-la-login-form-padding-sm: 30px; --nxn-la-login-form-padding-md: 30px; --nxn-la-login-form-padding-lg: 30px; --nxn-la-login-form-padding-xl: 30px; --nxn-la-login-form-padding-xxl: 30px; --nxn-la-login-form-border-radius: 0.5rem; --nxn-la-login-form-border-width: 0; --nxn-la-login-form-border-color: var(--nxn-sys-color-border); --nxn-la-login-form-error-msg-bg-color: transparent; --nxn-la-login-form-error-msg-color: var(--nxn-sys-color-warn); --nxn-la-login-serverside-error-msg-bg-color: transparent; --nxn-la-login-serverside-error-msg-color: var(--nxn-sys-color-warn); --nxn-la-login-form-not-available-icon-color: var( --nxn-comp-alert-warning-surface ); --nxn-la-login-form-label-color: var(--nxn-sys-color-on-surface); --nxn-la-login-form-label-font-weight: normal; --nxn-la-login-form-label-font-size: var(--nxn-la-login-body-font-size); --nxn-la-login-form-link-color: var(--nxn-comp-link-color); --nxn-la-login-form-link-hover-color: var(--nxn-comp-link-color-hover); --nxn-la-login-form-link-font-weight: normal; --nxn-la-login-form-link-font-size: 0.8125rem; /* 13px */ --nxn-la-login-form-icon-color: rgba(255, 255, 255, 0.6); --nxn-la-login-form-icon-hover-color: rgba(255, 255, 255, 0.87); --nxn-la-login-form-button-width: auto; --nxn-la-login-form-button-font-size: 1rem; --nxn-la-login-form-input-color: var(--nxn-sys-color-on-surface); --nxn-la-login-form-input-bg: var(--nxn-sys-color-surface); --nxn-la-login-form-input-border-color: var(--nxn-sys-color-form-border); --nxn-la-login-form-input-border-focus-color: var(--nxn-sys-color-primary); --nxn-la-login-form-input-disabled-color: var(--nxn-sys-disabled-on-surface); --nxn-la-login-form-input-disabled-bg: var(--nxn-sys-disabled-surface); --nxn-la-login-form-input-disabled-border-color: var( --nxn-sys-disabled-border-color ); --nxn-la-login-form-input-border-radius: 0.1875rem; --nxn-la-login-form-input-box-shadow: none; --nxn-la-login-form-input-width: 100%; --nxn-la-login-form-input-height: 2.125rem; --nxn-la-login-form-input-padding: 0.375rem 0.75rem; --nxn-la-login-form-input-font-size: 1rem; --nxn-la-login-form-input-bg-img: none; --nxn-la-login-form-input-error-text-color: var(--nxn-sys-color-warn); --nxn-la-login-form-input-error-outline-color: var(--nxn-sys-color-warn); --nxn-la-login-form-input-placeholder: var(--nxn-sys-color-text-disabled); /* passcode input */ --nxn-la-login-form-passcode-input-text-align: center; --nxn-la-login-form-passcode-input-width: 2.5rem; --nxn-la-login-form-passcode-input-font-weight: 700; --nxn-la-login-form-passcode-long-input-text-align: center; --nxn-la-login-form-passcode-long-input-font-size: 2rem; --nxn-la-login-form-passcode-long-input-font-weight: 700; --nxn-la-login-form-passcode-long-input-letter-spacing: 0.2rem; --nxn-la-login-form-passcode-long-input-height: auto; --nxn-la-login-form-passcode-icon-color: var(--nxn-la-login-form-label-color); --nxn-la-login-form-passcode-icon-hover-color: var( --nxn-la-login-form-label-color ); /* Login Features */ --nxn-la-login-features-bg-color: var(--nxn-sys-color-surface); --nxn-la-login-features-border-width: 0; --nxn-la-login-features-border-color: transparent; --nxn-la-login-features-border-radius: 0.1875rem; --nxn-la-login-features-box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.4), 0 2px 4px 1px rgba(0, 0, 0, 0.25), 0 1px 5px 0 rgba(0, 0, 0, 0.2); --nxn-la-login-features-padding: 1.5rem; --nxn-la-login-features-margin-bottom: 1.5rem; /* Login Card */ --nxn-la-login-card-bg-color: var(--nxn-sys-color-surface); --nxn-la-login-card-bd-width: 0; --nxn-la-login-card-bd-color: var(--nxn-sys-color-border); --nxn-la-login-card-bd-top-color: var(--nxn-sys-color-primary); --nxn-la-login-card-bd-radius: 3px; --nxn-la-login-card-bd-padding: 1.5rem; --nxn-la-login-card-color: var(--nxn-sys-color-on-surface); --nxn-la-login-card-heading-color: var(--nxn-sys-color-on-surface); --nxn-la-login-card-heading-font-weight: 700; --nxn-la-login-card-heading-font-size: 1.5rem; /* va panels */ --nxn-la-login-main-panel-bg-color: var(--nxn-sys-color-surface); --nxn-la-login-main-panel-fg-color: var(--nxn-sys-color-on-surface); --nxn-la-login-aside-panel-bg-color: #333333; --nxn-la-login-aside-panel-fg-color: var(--nxn-sys-color-on-surface); --nxn-la-va-stepper-icon-color: var(--nxn-sys-color-on-primary); --nxn-la-logout-heading-color: var(--nxn-sys-color-primary); /* material vars */ --mat-autocomplete-background-color: var(--nxn-sys-color-surface); --mdc-filled-text-field-focus-active-indicator-color: var(--nxn-pri-500); --mat-icon-color: var(--nxn-la-login-form-icon-color); }