@yoobic/yobi 8.3.1-8 → 8.3.1-9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/yoo-login.cjs.entry.js +14 -4
  2. package/dist/collection/feature-platform/login/login/login.css +41 -20
  3. package/dist/collection/feature-platform/login/login/parts/Header.js +2 -1
  4. package/dist/collection/feature-platform/login/login/parts/LoginTitle.js +10 -0
  5. package/dist/collection/feature-platform/login/login/parts/MainContent.js +2 -1
  6. package/dist/collection/feature-platform/login/login/parts/Sidepanel.js +2 -1
  7. package/dist/design-system/yoo-login.entry.js +14 -4
  8. package/dist/esm/yoo-login.entry.js +14 -4
  9. package/dist/types/feature-platform/login/login/parts/LoginTitle.d.ts +8 -0
  10. package/package.json +1 -1
package/dist/cjs/yoo-login.cjs.entry.js CHANGED
@@ -28,6 +28,16 @@ const Footer = ({ textColor, copyrightMessage, version, hasCustomBackground, onC
28
28
  index.h("p", null, "|"),
29
29
  index.h("p", { class: "version" }, `V${version}`)));
30
30
 
31
+ const LoginTitle = ({ style = {}, title, type = 'main' }) => {
32
+ if (type === 'main') {
33
+ style.fontSize = title.length > 60 ? '18px' : title.length > 50 ? '24px' : title.length > 36 ? '28px' : title.length > 30 ? '32px' : '36px';
34
+ }
35
+ else {
36
+ style.fontSize = title.length > 40 ? '12px' : title.length > 30 ? '14px' : title.length > 25 ? '18px' : title.length > 18 ? '20px' : '24px';
37
+ }
38
+ return type === 'main' ? (index.h("h1", { class: 'login-main-title', style: style }, title)) : (index.h("h3", { class: 'login-sub-title', style: style }, title));
39
+ };
40
+
31
41
  const Header = ({ logo, title, textColor, error, closeClick }) => [
32
42
  error && (index.h("yoo-banner", { id: "error-alert", class: {
33
43
  'center header': true,
@@ -45,7 +55,7 @@ const Header = ({ logo, title, textColor, error, closeClick }) => [
45
55
  index.h("a", { class: "link", style: { color: `var(--${overlays.isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, overlays.translate('YOOBICNEEDHELP'))))),
46
56
  index.h("header", { class: "header" },
47
57
  index.h("img", { src: logo, alt: "app logo" }),
48
- index.h("h1", { style: { color: textColor } }, title))
58
+ index.h(LoginTitle, { style: { color: textColor }, title: title }))
49
59
  ];
50
60
 
51
61
  const LoginInput = ({ style, label, inputType, isFocused, bindReference, onIconClicked, onInputChanged, onInputBlurred, onInputFocused, onKeyPress, onShowPassword, clearInput, inputSize, hasValue, inputValue, showPassword, isMobile, isWhitelabel }) => (index.h("div", { class: {
@@ -110,14 +120,14 @@ const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBa
110
120
  };
111
121
 
112
122
  const MainContent = ({ subtitle, textColor }, children) => (index.h("div", { class: "main-content" },
113
- index.h("h3", { style: { color: textColor } }, overlays.translate(subtitle)),
123
+ index.h(LoginTitle, { style: { color: textColor }, title: overlays.translate(subtitle), type: "sub" }),
114
124
  children));
115
125
 
116
126
  const Sidepanel = ({ image, title, textColor }) => (index.h("div", { class: "sidepanel" },
117
- index.h("h1", { style: { color: textColor } }, title),
127
+ index.h(LoginTitle, { style: { color: textColor }, title: title }),
118
128
  image && index.h("img", { src: image })));
119
129
 
120
- const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%}.outer-login-container h1,.outer-login-container h3{font-weight:900}.outer-login-container h1{font-size:2.25rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:80%;margin-top:0;margin-bottom:0.875rem;font-size:var(--font-size-24, 1.5rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:7.5rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 699px){.outer-login-container:not(.emulated).keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container:not(.emulated){--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container:not(.emulated) .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container{padding-top:0}.outer-login-container:not(.emulated).keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container:not(.emulated).keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container,.outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container.emulated:not([is-whitelabel]) .content-container{padding-top:9rem}.outer-login-container.emulated[is-whitelabel] .content-container{padding-top:8rem}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container:not(.emulated) footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header h1{margin:0}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header h1{display:none}@media screen and (min-width: 750px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated) .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) .header img{margin:2rem 0}.outer-login-container:not(.emulated) .header h1{display:none}.outer-login-container:not(.emulated) #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:9rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:11rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel]:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel]:not(.emulated) header h1{display:none}.outer-login-container[is-whitelabel]:not(.emulated) header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}.outer-login-container[is-whitelabel].emulated .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel].emulated header h1{display:none}.outer-login-container[is-whitelabel].emulated header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{margin-top:var(--spacing-48, 3rem)}.outer-login-container:not([is-whitelabel]).emulated:not(.hide-advanced-login):not(.hide-google-login) .header img{margin-top:var(--spacing-24, 1.5rem)}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container:not(.emulated) .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container:not(.emulated) .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container:not(.emulated) #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:7rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:9rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed:not(.emulated) .header h1,.outer-login-container.keyboard-closed:not(.emulated) .header img{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open:not(.emulated) .header{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container.emulated #error-alert{padding-top:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container .help-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.outer-login-container .help-buttons yoo-button#help-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons yoo-button#magic-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons.mobile,.outer-login-container .help-buttons.emulated{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button{margin:-0.25rem 0 0 -0.5rem}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){cursor:pointer;-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button:hover.disabled{cursor:not-allowed}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile,.outer-login-container #default-login-button.medium.emulated{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(3rem);transform:translateY(3rem);visibility:hidden !important}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .login-options .google-logo{height:1rem}}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{display:none}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container.emulated:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.emulated.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container.emulated .sidepanel{display:none}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
130
+ const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%}.outer-login-container .login-main-title,.outer-login-container .login-sub-title{font-weight:900}.outer-login-container .login-main-title{margin:0;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .login-sub-title{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-top:0;margin-bottom:0.875rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:7.5rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 649px){.outer-login-container:not(.emulated).keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container:not(.emulated){--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container:not(.emulated) .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container{padding-top:0}.outer-login-container:not(.emulated).keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container:not(.emulated).keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container,.outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container.emulated:not([is-whitelabel]) .content-container{padding-top:9rem}.outer-login-container.emulated[is-whitelabel] .content-container{padding-top:8rem}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container:not(.emulated) footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transform:scale(100%) translateY(0);transform:scale(100%) translateY(0);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header .login-main-title{margin:0;padding:0 0.3rem}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header .login-main-title{display:none}@media screen and (min-width: 750px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated) .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) .header img{margin:2rem 0}.outer-login-container:not(.emulated) .header .login-main-title{display:none}.outer-login-container:not(.emulated) #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:9rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:11rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel]:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title{display:none}.outer-login-container[is-whitelabel]:not(.emulated) header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}.outer-login-container[is-whitelabel].emulated .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel].emulated header .login-main-title{display:none}.outer-login-container[is-whitelabel].emulated header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{margin-top:var(--spacing-48, 3rem)}.outer-login-container:not([is-whitelabel]).emulated:not(.hide-advanced-login):not(.hide-google-login) .header img{margin-top:var(--spacing-24, 1.5rem)}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container:not(.emulated) .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container:not(.emulated) .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container:not(.emulated) #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:7rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:9rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 739px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-16, 1rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}}@media screen and (max-height: 649px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header .login-main-title{display:none}}@media screen and (max-height: 599px){.outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title,.outer-login-container.keyboard-closed:not(.emulated) .header img{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open:not(.emulated) .header{-webkit-transform:scale(80%) translateY(-10%);transform:scale(80%) translateY(-10%)}.outer-login-container.keyboard-open:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 400px){.outer-login-container.keyboard-open:not(.emulated) .header .login-main-title,.outer-login-container.keyboard-open:not(.emulated) .header img{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container.emulated #error-alert{padding-top:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container .help-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.outer-login-container .help-buttons yoo-button#help-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons yoo-button#magic-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons.mobile,.outer-login-container .help-buttons.emulated{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button{margin:-0.25rem 0 0 -0.5rem}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){cursor:pointer;-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button:hover.disabled{cursor:not-allowed}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile,.outer-login-container #default-login-button.medium.emulated{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(3rem);transform:translateY(3rem);visibility:hidden !important}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .login-options .google-logo{height:1rem}}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{display:none}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content .login-sub-title{display:none}.outer-login-container.focused .login-sub-title{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container.emulated:not([is-whitelabel]) .main-content .login-sub-title{display:none}.outer-login-container.emulated.focused .login-sub-title{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel .login-main-title{margin-top:0;margin-bottom:var(--spacing-24, 1.5rem)}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container.emulated .sidepanel{display:none}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
121
131
 
122
132
  const YooLoginComponent = class {
123
133
  constructor(hostRef) {
package/dist/collection/feature-platform/login/login/login.css CHANGED
@@ -210,19 +210,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
210
210
  width: 100%;
211
211
  height: 100%;
212
212
  }
213
- .outer-login-container h1, .outer-login-container h3 {
213
+ .outer-login-container .login-main-title, .outer-login-container .login-sub-title {
214
214
  font-weight: 900;
215
215
  }
216
- .outer-login-container h1 {
217
- font-size: 2.25rem;
216
+ .outer-login-container .login-main-title {
217
+ margin: 0;
218
218
  transition: all ease-in-out 0.2s;
219
219
  }
220
- .outer-login-container h3 {
220
+ .outer-login-container .login-sub-title {
221
221
  width: fit-content;
222
- max-width: 80%;
223
222
  margin-top: 0;
224
223
  margin-bottom: 0.875rem;
225
- font-size: var(--font-size-24, 1.5rem);
226
224
  transition: all ease-in-out 0.2s;
227
225
  }
228
226
  .outer-login-container .content-container {
@@ -253,7 +251,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
253
251
  padding-top: var(--spacing-96, 6rem);
254
252
  }
255
253
 
256
- @media screen and (max-height: 699px) {
254
+ @media screen and (max-height: 649px) {
257
255
  .outer-login-container:not(.emulated).keyboard-closed .content-container {
258
256
  padding-top: 0;
259
257
  }
@@ -440,10 +438,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
440
438
  width: 100%;
441
439
  margin-top: var(--spacing-24, 1.5rem);
442
440
  text-align: center;
441
+ transform: scale(100%) translateY(0);
443
442
  transition: all ease-in-out 0.2s;
444
443
  }
445
- .outer-login-container .header h1 {
444
+ .outer-login-container .header .login-main-title {
446
445
  margin: 0;
446
+ padding: 0 0.3rem;
447
447
  }
448
448
  .outer-login-container .header img {
449
449
  max-width: 80%;
@@ -454,7 +454,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
454
454
  height: 6rem;
455
455
  max-height: 6rem;
456
456
  }
457
- .outer-login-container[is-whitelabel] .header h1 {
457
+ .outer-login-container[is-whitelabel] .header .login-main-title {
458
458
  display: none;
459
459
  }
460
460
 
@@ -481,7 +481,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
481
481
  .outer-login-container:not(.emulated) .header img {
482
482
  margin: 2rem 0;
483
483
  }
484
- .outer-login-container:not(.emulated) .header h1 {
484
+ .outer-login-container:not(.emulated) .header .login-main-title {
485
485
  display: none;
486
486
  }
487
487
  .outer-login-container:not(.emulated) #error-alert {
@@ -512,7 +512,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
512
512
  height: 4rem;
513
513
  max-height: 4rem;
514
514
  }
515
- .outer-login-container[is-whitelabel]:not(.emulated) header h1 {
515
+ .outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title {
516
516
  display: none;
517
517
  }
518
518
  .outer-login-container[is-whitelabel]:not(.emulated) header img {
@@ -531,7 +531,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
531
531
  height: 4rem;
532
532
  max-height: 4rem;
533
533
  }
534
- .outer-login-container[is-whitelabel].emulated header h1 {
534
+ .outer-login-container[is-whitelabel].emulated header .login-main-title {
535
535
  display: none;
536
536
  }
537
537
  .outer-login-container[is-whitelabel].emulated header img {
@@ -588,19 +588,39 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
588
588
  margin-top: var(--spacing-32, 2rem);
589
589
  }
590
590
  }
591
+ @media screen and (max-height: 739px) {
592
+ .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
593
+ margin-top: var(--spacing-16, 1rem);
594
+ }
595
+ }
591
596
  @media screen and (max-height: 699px) {
592
- .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1 {
597
+ .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
598
+ margin-top: var(--spacing-08, 0.5rem);
599
+ margin-bottom: var(--spacing-08, 0.5rem);
600
+ }
601
+ }
602
+ @media screen and (max-height: 649px) {
603
+ .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header .login-main-title {
593
604
  display: none;
594
605
  }
595
606
  }
596
- @media screen and (max-height: 665px) {
597
- .outer-login-container.keyboard-closed:not(.emulated) .header h1,
607
+ @media screen and (max-height: 599px) {
608
+ .outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title,
598
609
  .outer-login-container.keyboard-closed:not(.emulated) .header img {
599
610
  display: none;
600
611
  }
601
612
  }
602
613
  @media screen and (max-height: 500px) {
603
614
  .outer-login-container.keyboard-open:not(.emulated) .header {
615
+ transform: scale(80%) translateY(-10%);
616
+ }
617
+ .outer-login-container.keyboard-open:not(.emulated) .header img {
618
+ margin-top: var(--spacing-32, 2rem);
619
+ }
620
+ }
621
+ @media screen and (max-height: 400px) {
622
+ .outer-login-container.keyboard-open:not(.emulated) .header .login-main-title,
623
+ .outer-login-container.keyboard-open:not(.emulated) .header img {
604
624
  display: none;
605
625
  }
606
626
  }
@@ -805,26 +825,27 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
805
825
  }
806
826
  }
807
827
  @media screen and (max-width: 899px) {
808
- .outer-login-container:not([is-whitelabel]) .main-content h3 {
828
+ .outer-login-container:not([is-whitelabel]) .main-content .login-sub-title {
809
829
  display: none;
810
830
  }
811
831
 
812
- .outer-login-container.focused h3 {
832
+ .outer-login-container.focused .login-sub-title {
813
833
  transform: scale(1.2) translateX(10%);
814
834
  }
815
835
  }
816
- .outer-login-container.emulated:not([is-whitelabel]) .main-content h3 {
836
+ .outer-login-container.emulated:not([is-whitelabel]) .main-content .login-sub-title {
817
837
  display: none;
818
838
  }
819
- .outer-login-container.emulated.focused h3 {
839
+ .outer-login-container.emulated.focused .login-sub-title {
820
840
  transform: scale(1.2) translateX(10%);
821
841
  }
822
842
 
823
843
  .outer-login-container .sidepanel {
824
844
  margin-right: var(--spacing-64, 4rem);
825
845
  }
826
- .outer-login-container .sidepanel h1 {
846
+ .outer-login-container .sidepanel .login-main-title {
827
847
  margin-top: 0;
848
+ margin-bottom: var(--spacing-24, 1.5rem);
828
849
  }
829
850
 
830
851
  @media screen and (min-width: 1000px) {
package/dist/collection/feature-platform/login/login/parts/Header.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { isWeb, translate } from '@shared/utils';
2
2
  import { h } from '@stencil/core';
3
+ import { LoginTitle } from './LoginTitle';
3
4
  export const Header = ({ logo, title, textColor, error, closeClick }) => [
4
5
  error && (h("yoo-banner", { id: "error-alert", class: {
5
6
  'center header': true,
@@ -17,5 +18,5 @@ export const Header = ({ logo, title, textColor, error, closeClick }) => [
17
18
  h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP'))))),
18
19
  h("header", { class: "header" },
19
20
  h("img", { src: logo, alt: "app logo" }),
20
- h("h1", { style: { color: textColor } }, title))
21
+ h(LoginTitle, { style: { color: textColor }, title: title }))
21
22
  ];
package/dist/collection/feature-platform/login/login/parts/LoginTitle.js ADDED
@@ -0,0 +1,10 @@
1
+ import { h } from '@stencil/core';
2
+ export const LoginTitle = ({ style = {}, title, type = 'main' }) => {
3
+ if (type === 'main') {
4
+ style.fontSize = title.length > 60 ? '18px' : title.length > 50 ? '24px' : title.length > 36 ? '28px' : title.length > 30 ? '32px' : '36px';
5
+ }
6
+ else {
7
+ style.fontSize = title.length > 40 ? '12px' : title.length > 30 ? '14px' : title.length > 25 ? '18px' : title.length > 18 ? '20px' : '24px';
8
+ }
9
+ return type === 'main' ? (h("h1", { class: 'login-main-title', style: style }, title)) : (h("h3", { class: 'login-sub-title', style: style }, title));
10
+ };
package/dist/collection/feature-platform/login/login/parts/MainContent.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { translate } from '@shared/utils';
2
2
  import { h } from '@stencil/core';
3
+ import { LoginTitle } from './LoginTitle';
3
4
  export const MainContent = ({ subtitle, textColor }, children) => (h("div", { class: "main-content" },
4
- h("h3", { style: { color: textColor } }, translate(subtitle)),
5
+ h(LoginTitle, { style: { color: textColor }, title: translate(subtitle), type: "sub" }),
5
6
  children));
package/dist/collection/feature-platform/login/login/parts/Sidepanel.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { h } from '@stencil/core';
2
+ import { LoginTitle } from './LoginTitle';
2
3
  export const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel" },
3
- h("h1", { style: { color: textColor } }, title),
4
+ h(LoginTitle, { style: { color: textColor }, title: title }),
4
5
  image && h("img", { src: image })));
package/dist/design-system/yoo-login.entry.js CHANGED
@@ -24,6 +24,16 @@ const Footer = ({ textColor, copyrightMessage, version, hasCustomBackground, onC
24
24
  h("p", null, "|"),
25
25
  h("p", { class: "version" }, `V${version}`)));
26
26
 
27
+ const LoginTitle = ({ style = {}, title, type = 'main' }) => {
28
+ if (type === 'main') {
29
+ style.fontSize = title.length > 60 ? '18px' : title.length > 50 ? '24px' : title.length > 36 ? '28px' : title.length > 30 ? '32px' : '36px';
30
+ }
31
+ else {
32
+ style.fontSize = title.length > 40 ? '12px' : title.length > 30 ? '14px' : title.length > 25 ? '18px' : title.length > 18 ? '20px' : '24px';
33
+ }
34
+ return type === 'main' ? (h("h1", { class: 'login-main-title', style: style }, title)) : (h("h3", { class: 'login-sub-title', style: style }, title));
35
+ };
36
+
27
37
  const Header = ({ logo, title, textColor, error, closeClick }) => [
28
38
  error && (h("yoo-banner", { id: "error-alert", class: {
29
39
  'center header': true,
@@ -41,7 +51,7 @@ const Header = ({ logo, title, textColor, error, closeClick }) => [
41
51
  h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP'))))),
42
52
  h("header", { class: "header" },
43
53
  h("img", { src: logo, alt: "app logo" }),
44
- h("h1", { style: { color: textColor } }, title))
54
+ h(LoginTitle, { style: { color: textColor }, title: title }))
45
55
  ];
46
56
 
47
57
  const LoginInput = ({ style, label, inputType, isFocused, bindReference, onIconClicked, onInputChanged, onInputBlurred, onInputFocused, onKeyPress, onShowPassword, clearInput, inputSize, hasValue, inputValue, showPassword, isMobile, isWhitelabel }) => (h("div", { class: {
@@ -106,14 +116,14 @@ const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBa
106
116
  };
107
117
 
108
118
  const MainContent = ({ subtitle, textColor }, children) => (h("div", { class: "main-content" },
109
- h("h3", { style: { color: textColor } }, translate(subtitle)),
119
+ h(LoginTitle, { style: { color: textColor }, title: translate(subtitle), type: "sub" }),
110
120
  children));
111
121
 
112
122
  const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel" },
113
- h("h1", { style: { color: textColor } }, title),
123
+ h(LoginTitle, { style: { color: textColor }, title: title }),
114
124
  image && h("img", { src: image })));
115
125
 
116
- const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%}.outer-login-container h1,.outer-login-container h3{font-weight:900}.outer-login-container h1{font-size:2.25rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:80%;margin-top:0;margin-bottom:0.875rem;font-size:var(--font-size-24, 1.5rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:7.5rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 699px){.outer-login-container:not(.emulated).keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container:not(.emulated){--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container:not(.emulated) .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container{padding-top:0}.outer-login-container:not(.emulated).keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container:not(.emulated).keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container,.outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container.emulated:not([is-whitelabel]) .content-container{padding-top:9rem}.outer-login-container.emulated[is-whitelabel] .content-container{padding-top:8rem}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container:not(.emulated) footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header h1{margin:0}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header h1{display:none}@media screen and (min-width: 750px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated) .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) .header img{margin:2rem 0}.outer-login-container:not(.emulated) .header h1{display:none}.outer-login-container:not(.emulated) #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:9rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:11rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel]:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel]:not(.emulated) header h1{display:none}.outer-login-container[is-whitelabel]:not(.emulated) header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}.outer-login-container[is-whitelabel].emulated .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel].emulated header h1{display:none}.outer-login-container[is-whitelabel].emulated header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{margin-top:var(--spacing-48, 3rem)}.outer-login-container:not([is-whitelabel]).emulated:not(.hide-advanced-login):not(.hide-google-login) .header img{margin-top:var(--spacing-24, 1.5rem)}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container:not(.emulated) .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container:not(.emulated) .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container:not(.emulated) #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:7rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:9rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed:not(.emulated) .header h1,.outer-login-container.keyboard-closed:not(.emulated) .header img{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open:not(.emulated) .header{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container.emulated #error-alert{padding-top:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container .help-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.outer-login-container .help-buttons yoo-button#help-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons yoo-button#magic-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons.mobile,.outer-login-container .help-buttons.emulated{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button{margin:-0.25rem 0 0 -0.5rem}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){cursor:pointer;-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button:hover.disabled{cursor:not-allowed}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile,.outer-login-container #default-login-button.medium.emulated{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(3rem);transform:translateY(3rem);visibility:hidden !important}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .login-options .google-logo{height:1rem}}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{display:none}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container.emulated:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.emulated.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container.emulated .sidepanel{display:none}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
126
+ const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%}.outer-login-container .login-main-title,.outer-login-container .login-sub-title{font-weight:900}.outer-login-container .login-main-title{margin:0;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .login-sub-title{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-top:0;margin-bottom:0.875rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:7.5rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 649px){.outer-login-container:not(.emulated).keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container:not(.emulated){--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container:not(.emulated) .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container{padding-top:0}.outer-login-container:not(.emulated).keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container:not(.emulated).keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container,.outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container.emulated:not([is-whitelabel]) .content-container{padding-top:9rem}.outer-login-container.emulated[is-whitelabel] .content-container{padding-top:8rem}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container:not(.emulated) footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transform:scale(100%) translateY(0);transform:scale(100%) translateY(0);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header .login-main-title{margin:0;padding:0 0.3rem}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header .login-main-title{display:none}@media screen and (min-width: 750px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated) .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) .header img{margin:2rem 0}.outer-login-container:not(.emulated) .header .login-main-title{display:none}.outer-login-container:not(.emulated) #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:9rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:11rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel]:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title{display:none}.outer-login-container[is-whitelabel]:not(.emulated) header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}.outer-login-container[is-whitelabel].emulated .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel].emulated header .login-main-title{display:none}.outer-login-container[is-whitelabel].emulated header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{margin-top:var(--spacing-48, 3rem)}.outer-login-container:not([is-whitelabel]).emulated:not(.hide-advanced-login):not(.hide-google-login) .header img{margin-top:var(--spacing-24, 1.5rem)}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container:not(.emulated) .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container:not(.emulated) .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container:not(.emulated) #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:7rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:9rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 739px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-16, 1rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}}@media screen and (max-height: 649px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header .login-main-title{display:none}}@media screen and (max-height: 599px){.outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title,.outer-login-container.keyboard-closed:not(.emulated) .header img{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open:not(.emulated) .header{-webkit-transform:scale(80%) translateY(-10%);transform:scale(80%) translateY(-10%)}.outer-login-container.keyboard-open:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 400px){.outer-login-container.keyboard-open:not(.emulated) .header .login-main-title,.outer-login-container.keyboard-open:not(.emulated) .header img{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container.emulated #error-alert{padding-top:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container .help-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.outer-login-container .help-buttons yoo-button#help-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons yoo-button#magic-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons.mobile,.outer-login-container .help-buttons.emulated{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button{margin:-0.25rem 0 0 -0.5rem}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){cursor:pointer;-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button:hover.disabled{cursor:not-allowed}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile,.outer-login-container #default-login-button.medium.emulated{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(3rem);transform:translateY(3rem);visibility:hidden !important}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .login-options .google-logo{height:1rem}}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{display:none}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content .login-sub-title{display:none}.outer-login-container.focused .login-sub-title{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container.emulated:not([is-whitelabel]) .main-content .login-sub-title{display:none}.outer-login-container.emulated.focused .login-sub-title{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel .login-main-title{margin-top:0;margin-bottom:var(--spacing-24, 1.5rem)}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container.emulated .sidepanel{display:none}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
117
127
 
118
128
  const YooLoginComponent = class {
119
129
  constructor(hostRef) {
package/dist/esm/yoo-login.entry.js CHANGED
@@ -24,6 +24,16 @@ const Footer = ({ textColor, copyrightMessage, version, hasCustomBackground, onC
24
24
  h("p", null, "|"),
25
25
  h("p", { class: "version" }, `V${version}`)));
26
26
 
27
+ const LoginTitle = ({ style = {}, title, type = 'main' }) => {
28
+ if (type === 'main') {
29
+ style.fontSize = title.length > 60 ? '18px' : title.length > 50 ? '24px' : title.length > 36 ? '28px' : title.length > 30 ? '32px' : '36px';
30
+ }
31
+ else {
32
+ style.fontSize = title.length > 40 ? '12px' : title.length > 30 ? '14px' : title.length > 25 ? '18px' : title.length > 18 ? '20px' : '24px';
33
+ }
34
+ return type === 'main' ? (h("h1", { class: 'login-main-title', style: style }, title)) : (h("h3", { class: 'login-sub-title', style: style }, title));
35
+ };
36
+
27
37
  const Header = ({ logo, title, textColor, error, closeClick }) => [
28
38
  error && (h("yoo-banner", { id: "error-alert", class: {
29
39
  'center header': true,
@@ -41,7 +51,7 @@ const Header = ({ logo, title, textColor, error, closeClick }) => [
41
51
  h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP'))))),
42
52
  h("header", { class: "header" },
43
53
  h("img", { src: logo, alt: "app logo" }),
44
- h("h1", { style: { color: textColor } }, title))
54
+ h(LoginTitle, { style: { color: textColor }, title: title }))
45
55
  ];
46
56
 
47
57
  const LoginInput = ({ style, label, inputType, isFocused, bindReference, onIconClicked, onInputChanged, onInputBlurred, onInputFocused, onKeyPress, onShowPassword, clearInput, inputSize, hasValue, inputValue, showPassword, isMobile, isWhitelabel }) => (h("div", { class: {
@@ -106,14 +116,14 @@ const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBa
106
116
  };
107
117
 
108
118
  const MainContent = ({ subtitle, textColor }, children) => (h("div", { class: "main-content" },
109
- h("h3", { style: { color: textColor } }, translate(subtitle)),
119
+ h(LoginTitle, { style: { color: textColor }, title: translate(subtitle), type: "sub" }),
110
120
  children));
111
121
 
112
122
  const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel" },
113
- h("h1", { style: { color: textColor } }, title),
123
+ h(LoginTitle, { style: { color: textColor }, title: title }),
114
124
  image && h("img", { src: image })));
115
125
 
116
- const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%}.outer-login-container h1,.outer-login-container h3{font-weight:900}.outer-login-container h1{font-size:2.25rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:80%;margin-top:0;margin-bottom:0.875rem;font-size:var(--font-size-24, 1.5rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:7.5rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 699px){.outer-login-container:not(.emulated).keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container:not(.emulated){--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container:not(.emulated) .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container{padding-top:0}.outer-login-container:not(.emulated).keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container:not(.emulated).keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container,.outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container.emulated:not([is-whitelabel]) .content-container{padding-top:9rem}.outer-login-container.emulated[is-whitelabel] .content-container{padding-top:8rem}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container:not(.emulated) footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header h1{margin:0}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header h1{display:none}@media screen and (min-width: 750px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated) .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) .header img{margin:2rem 0}.outer-login-container:not(.emulated) .header h1{display:none}.outer-login-container:not(.emulated) #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:9rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:11rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel]:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel]:not(.emulated) header h1{display:none}.outer-login-container[is-whitelabel]:not(.emulated) header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}.outer-login-container[is-whitelabel].emulated .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel].emulated header h1{display:none}.outer-login-container[is-whitelabel].emulated header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{margin-top:var(--spacing-48, 3rem)}.outer-login-container:not([is-whitelabel]).emulated:not(.hide-advanced-login):not(.hide-google-login) .header img{margin-top:var(--spacing-24, 1.5rem)}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container:not(.emulated) .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container:not(.emulated) .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container:not(.emulated) #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:7rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:9rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed:not(.emulated) .header h1,.outer-login-container.keyboard-closed:not(.emulated) .header img{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open:not(.emulated) .header{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container.emulated #error-alert{padding-top:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container .help-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.outer-login-container .help-buttons yoo-button#help-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons yoo-button#magic-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons.mobile,.outer-login-container .help-buttons.emulated{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button{margin:-0.25rem 0 0 -0.5rem}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){cursor:pointer;-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button:hover.disabled{cursor:not-allowed}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile,.outer-login-container #default-login-button.medium.emulated{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(3rem);transform:translateY(3rem);visibility:hidden !important}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .login-options .google-logo{height:1rem}}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{display:none}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container.emulated:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.emulated.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container.emulated .sidepanel{display:none}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
126
+ const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%}.outer-login-container .login-main-title,.outer-login-container .login-sub-title{font-weight:900}.outer-login-container .login-main-title{margin:0;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .login-sub-title{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-top:0;margin-bottom:0.875rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:7.5rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 649px){.outer-login-container:not(.emulated).keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container:not(.emulated){--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container:not(.emulated) .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container{padding-top:0}.outer-login-container:not(.emulated).keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container:not(.emulated).keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container,.outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container.emulated:not([is-whitelabel]) .content-container{padding-top:9rem}.outer-login-container.emulated[is-whitelabel] .content-container{padding-top:8rem}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container:not(.emulated) footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transform:scale(100%) translateY(0);transform:scale(100%) translateY(0);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header .login-main-title{margin:0;padding:0 0.3rem}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header .login-main-title{display:none}@media screen and (min-width: 750px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container:not(.emulated) .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container:not(.emulated) .header img{margin:2rem 0}.outer-login-container:not(.emulated) .header .login-main-title{display:none}.outer-login-container:not(.emulated) #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:9rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:11rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel]:not(.emulated) .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title{display:none}.outer-login-container[is-whitelabel]:not(.emulated) header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}.outer-login-container[is-whitelabel].emulated .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel].emulated header .login-main-title{display:none}.outer-login-container[is-whitelabel].emulated header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img{margin-top:var(--spacing-48, 3rem)}.outer-login-container:not([is-whitelabel]).emulated:not(.hide-advanced-login):not(.hide-google-login) .header img{margin-top:var(--spacing-24, 1.5rem)}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container:not(.emulated) .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container:not(.emulated) .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container:not(.emulated) #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert{top:7rem}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert{top:9rem}.outer-login-container:not(.emulated).tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 739px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-16, 1rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}}@media screen and (max-height: 649px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header .login-main-title{display:none}}@media screen and (max-height: 599px){.outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title,.outer-login-container.keyboard-closed:not(.emulated) .header img{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open:not(.emulated) .header{-webkit-transform:scale(80%) translateY(-10%);transform:scale(80%) translateY(-10%)}.outer-login-container.keyboard-open:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 400px){.outer-login-container.keyboard-open:not(.emulated) .header .login-main-title,.outer-login-container.keyboard-open:not(.emulated) .header img{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container.emulated #error-alert{padding-top:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container .help-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.outer-login-container .help-buttons yoo-button#help-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons yoo-button#magic-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons.mobile,.outer-login-container .help-buttons.emulated{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button{margin:-0.25rem 0 0 -0.5rem}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){cursor:pointer;-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button:hover.disabled{cursor:not-allowed}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile,.outer-login-container #default-login-button.medium.emulated{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(3rem);transform:translateY(3rem);visibility:hidden !important}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .login-options .google-logo{height:1rem}}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{display:none}.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #sso-login-button{display:none}.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #google-login-button{-webkit-transform:translateY(0);transform:translateY(0)}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container:not(.emulated) .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content .login-sub-title{display:none}.outer-login-container.focused .login-sub-title{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container.emulated:not([is-whitelabel]) .main-content .login-sub-title{display:none}.outer-login-container.emulated.focused .login-sub-title{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel .login-main-title{margin-top:0;margin-bottom:var(--spacing-24, 1.5rem)}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container:not(.emulated) .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container.emulated .sidepanel{display:none}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
117
127
 
118
128
  const YooLoginComponent = class {
119
129
  constructor(hostRef) {
package/dist/types/feature-platform/login/login/parts/LoginTitle.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { FunctionalComponent } from '../../../../stencil-public-runtime';
2
+ interface LoginTitleProps {
3
+ style?: Partial<CSSStyleDeclaration> & Record<string, string | null>;
4
+ type?: 'main' | 'sub';
5
+ title: string;
6
+ }
7
+ export declare const LoginTitle: FunctionalComponent<LoginTitleProps>;
8
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yoobic/yobi",
3
- "version": "8.3.1-8",
3
+ "version": "8.3.1-9",
4
4
  "description": "Yobi - Yoobic Design System",
5
5
  "module": "dist/index.js",
6
6
  "main": "dist/index.cjs.js",