@yoobic/yobi 8.3.0-45 → 8.3.0-48

package/dist/esm/yoo-form-todo-task-list.entry.js

@@ -107,9 +107,8 @@ const YooFormTodoTaskListComponent = class {
     return updated;
   }
   async deleteTask(index, withConfirmation = true) {
-    var _a, _b;
     const result = withConfirmation
-      ? await showAlert(translate('DELETETASK'), [translate('CANCEL'), { cssClass: 'danger', text: translate('DELETE') }], translate('CONFIRMDELETETASK', { title: ((_b = (_a = this.value.values[index]) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.value) || '' }))
+      ? await showAlert(translate('DELETETASK'), [translate('CANCEL'), { cssClass: 'danger', text: translate('DELETE') }], translate('CONFIRMDELETETASK'))
       : true;
     if (result) {
       this.updateValue({ ...this.value, values: [...this.value.values.slice(0, index), ...this.value.values.slice(index + 1)] });

package/dist/esm/yoo-login.entry.js

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, i as createEvent, f as forceUpdate, e as Host, g as getElement } from './index-becca019.js';
-import { t as translate, A as isWeb, aF as isPresent, bm as getContrastColor, cF as setStatusBarDarkMode, aa as disableKeyboardResize, j as isNativeMobile, S as ScreenOrientation, k as isAndroid, cG as removeKeyboardEventListeners, cr as isIonic, af as showActionSheet, cH as addKeyboardEventListener, H as isIOS, bR as isTabletOrIpad } from './overlays-be5a9ab3.js';
+import { t as translate, A as isWeb, aF as isPresent, bm as getContrastColor, cF as setStatusBarDarkMode, aa as disableKeyboardResize, j as isNativeMobile, S as ScreenOrientation, k as isAndroid, cG as removeKeyboardEventListeners, cr as isIonic, af as showActionSheet, cH as addKeyboardEventListener, h as isFullScreenFalse, H as isIOS, bR as isTabletOrIpad } from './overlays-be5a9ab3.js';
 import './index-c7d02f02.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
@@ -24,26 +24,25 @@ const Footer = ({ textColor, copyrightMessage, version, hasCustomBackground, onC
   h("p", null, "|"),
   h("p", { class: "version" }, `V${version}`)));
 
-const Header = ({ logo, title, textColor, error, closeClick }) => ([
-  error &&
-    h("yoo-banner", { id: "error-alert", class: {
-        'center header': true,
-        'sharp': !isWeb()
-      }, fill: true, closable: true, leftIcon: { name: 'info', color: isWeb() ? 'danger' : 'light' }, onCloseClick: closeClick, style: {
-        '--main-color': `var(--${isWeb() ? 'danger-20' : 'danger'})`,
-        '--main-text-color': `var(--${isWeb() ? 'dark' : 'light'})`,
-        '--close-icon-color': `var(--${isWeb() ? 'danger' : 'light'})`
+const Header = ({ logo, title, textColor, error, closeClick }) => [
+  error && (h("yoo-banner", { id: "error-alert", class: {
+      'center header': true,
+      sharp: !isWeb()
+    }, fill: true, closable: true, leftIcon: { name: 'info', color: isWeb() ? 'danger' : 'light' }, onCloseClick: closeClick, style: {
+      '--main-color': `var(--${isWeb() ? 'danger-20' : 'danger'})`,
+      '--main-text-color': `var(--${isWeb() ? 'dark' : 'light'})`,
+      '--close-icon-color': `var(--${isWeb() ? 'danger' : 'light'})`
+    } },
+    h("div", { slot: "content", class: {
+        'error-content': true,
+        web: isWeb()
       } },
-      h("div", { slot: "content", class: {
-          'error-content': true,
-          'web': isWeb()
-        } },
-        h("p", null, translate(error)),
-        h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP')))),
+      h("p", null, translate(error)),
+      h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP'))))),
   h("header", { class: "header" },
     h("img", { src: logo, alt: "app logo" }),
     h("h1", { style: { color: textColor } }, title))
-]);
+];
 
 const LoginInput = ({ style, label, inputType, isFocused, bindReference, onIconClicked, onInputChanged, onInputBlurred, onInputFocused, onKeyPress, onShowPassword, clearInput, inputSize, hasValue, inputValue, showPassword, isMobile, isWhitelabel }) => (h("div", { class: {
     'outer-input-container': true,
@@ -62,31 +61,28 @@ const LoginInput = ({ style, label, inputType, isFocused, bindReference, onIconC
     h("div", { class: `icon-suffix-focus ${inputType}-input-clear-icon`, onMouseDown: (e) => e.preventDefault(), onClick: () => (hasValue ? clearInput() : null) },
       h("yoo-icon", { size: inputSize === 'medium' ? 'small' : 'medium', name: "cross" })))));
 
-const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, host, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, magicButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
-  const inputAndButtonSize = isWeb(host) ? 'medium' : 'large';
-  const loginDisabled = !(!!(getInputValue('username') || '') &&
-    !!(getInputValue('password') || ''));
+const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, magicButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
+  const inputAndButtonSize = isWeb() ? 'medium' : 'large';
+  const loginDisabled = !(!!(getInputValue('username') || '') && !!(getInputValue('password') || ''));
   const onKeyPress = (e) => {
     if (e.key === 'Enter') {
       onEnterPressed();
     }
   };
   const renderInputContainer = (type) => {
-    return (h(LoginInput, { style: { '--field-title-color': fieldTitleColor }, isFocused: type === focusedInput, inputType: type, label: getInputLabel(type), bindReference: bindReference, onIconClicked: () => onIconClicked(type), inputSize: inputAndButtonSize, inputValue: isPresent(getInputValue(type)) ? getInputValue(type) : getDefaultInputValue(type) || '', hasValue: (getInputValue(type) || getDefaultInputValue(type) || '') ? true : false, onShowPassword: onShowPassword, showPassword: showPassword, onInputChanged: (e) => onInputChanged(e, type), onKeyPress: (e) => onKeyPress(e), onInputFocused: () => onInputFocused(type), onInputBlurred: () => onInputBlurred(), clearInput: () => clearInput(type), isMobile: !isWeb(host), isWhitelabel: isWhitelabel }));
+    return (h(LoginInput, { style: { '--field-title-color': fieldTitleColor }, isFocused: type === focusedInput, inputType: type, label: getInputLabel(type), bindReference: bindReference, onIconClicked: () => onIconClicked(type), inputSize: inputAndButtonSize, inputValue: isPresent(getInputValue(type)) ? getInputValue(type) : getDefaultInputValue(type) || '', hasValue: getInputValue(type) || getDefaultInputValue(type) || '' ? true : false, onShowPassword: onShowPassword, showPassword: showPassword, onInputChanged: (e) => onInputChanged(e, type), onKeyPress: (e) => onKeyPress(e), onInputFocused: () => onInputFocused(type), onInputBlurred: () => onInputBlurred(), clearInput: () => clearInput(type), isMobile: !isWeb(), isWhitelabel: isWhitelabel }));
   };
-  return !ssoOnly
-    ? h("form", { autoComplete: "on", id: "login-form", novalidate: true, onSubmit: onFormSubmit },
-      renderInputContainer('username'),
-      renderInputContainer('password'),
-      h("div", { class: { 'help-buttons': true, mobile: !isWeb(host) } },
-        isWeb(host) && magicButtonElement,
-        helpButtonElement),
-      h("input", { id: "default-login-button", class: {
-          [inputAndButtonSize]: true,
-          mobile: !isWeb(host),
-          disabled: loginDisabled
-        }, ref: loginButtonRef, type: "submit", form: "login-form", name: "doLogin", disabled: loginDisabled, value: translate('YOOBICLOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))
-    : h("div", { class: "sso-only-login" }, ssoLoginButtonElement);
+  return !ssoOnly ? (h("form", { autoComplete: "on", id: "login-form", novalidate: true, onSubmit: onFormSubmit },
+    renderInputContainer('username'),
+    renderInputContainer('password'),
+    h("div", { class: { 'help-buttons': true, mobile: !isWeb() } },
+      isWeb() && magicButtonElement,
+      helpButtonElement),
+    h("input", { id: "default-login-button", class: {
+        [inputAndButtonSize]: true,
+        mobile: !isWeb(),
+        disabled: loginDisabled
+      }, ref: loginButtonRef, type: "submit", form: "login-form", name: "doLogin", disabled: loginDisabled, value: translate('YOOBICLOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))) : (h("div", { class: "sso-only-login" }, ssoLoginButtonElement));
 };
 
 const Divider = ({ style }) => (h("div", { id: "divider", style: style },
@@ -94,14 +90,14 @@ const Divider = ({ style }) => (h("div", { id: "divider", style: style },
   h("p", null, "or"),
   h("div", null)));
 
-const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBackground, dividerColor, googleLoginButtonElement, ssoLoginButtonElement, host }) => {
+const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBackground, dividerColor, googleLoginButtonElement, ssoLoginButtonElement }) => {
   if (!ssoOnly) {
     return (h("div", { class: {
         'login-options': true,
         'sso-only': ssoOnly,
         'hide-google-login': hideGoogleLogin,
         'hide-advanced-login': hideAdvancedLogin,
-        mobile: !isWeb(host)
+        mobile: !isWeb()
       } },
       h(Divider, { style: hasCustomBackground ? { '--divider-color': dividerColor } : undefined }),
       googleLoginButtonElement,
@@ -117,7 +113,7 @@ const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel
   h("h1", { style: { color: textColor } }, title),
   image && h("img", { src: image })));
 
-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.keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container{--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not([is-whitelabel]) .content-container{padding-top:0}.outer-login-container.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.keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios.keyboard-transitioning .content-container,.outer-login-container.tablet.ios.keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.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 #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 footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container 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 .header img{height:4rem;max-height:4rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container .header img{margin:2rem 0}.outer-login-container .header h1{display:none}.outer-login-container #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:9rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[logo-shape=square] #error-alert{top:11rem}.outer-login-container.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] .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel] header h1{display:none}.outer-login-container[is-whitelabel] header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel][logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel][logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:7rem}.outer-login-container[logo-shape=square] #error-alert{top:9rem}.outer-login-container.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 .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed .header{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open .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{--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{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile) 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{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 .login-options .google-logo{height:1rem}}.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 .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .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 .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .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: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)}";
+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)}";
 
 const YooLoginComponent = class {
   constructor(hostRef) {
@@ -127,7 +123,7 @@ const YooLoginComponent = class {
     this.passwordResetModalRequested = createEvent(this, "passwordResetModalRequested", 7);
     this.advancedLoginRequested = createEvent(this, "advancedLoginRequested", 7);
     this.magicLinkModalRequested = createEvent(this, "magicLinkModalRequested", 7);
-    //* COMPONENT TEXT 
+    //* COMPONENT TEXT
     // Title Text
     this.mainTitle = '';
     // Subtitle Text
@@ -159,22 +155,16 @@ const YooLoginComponent = class {
     return !!((_a = this.passwordInputElement) === null || _a === void 0 ? void 0 : _a.value);
   }
   get hasBackgroundMedia() {
-    return (this.backgroundSrc)
-      ? true
-      : false;
+    return this.backgroundSrc ? true : false;
   }
   get hasCustomBackground() {
-    return (this.hasBackgroundMedia || this.backgroundColor) ? true : false;
+    return this.hasBackgroundMedia || this.backgroundColor ? true : false;
   }
   get primaryColor() {
     if (this.textColor) {
       return this.textColor;
     }
-    const color = this.hasBackgroundMedia
-      ? 'light'
-      : !this.backgroundColor
-        ? 'dark'
-        : 'app-color';
+    const color = this.hasBackgroundMedia ? 'light' : !this.backgroundColor ? 'dark' : 'app-color';
     return `var(--${color})`;
   }
   async getPassword() {
@@ -185,8 +175,7 @@ const YooLoginComponent = class {
     this.defaultPassword && (this.password = this.defaultPassword);
     setStatusBarDarkMode(true);
     disableKeyboardResize();
-    isNativeMobile() &&
-      this.setKeyboardListeners();
+    isNativeMobile() && this.setKeyboardListeners();
   }
   componentDidLoad() {
     var _a;
@@ -208,7 +197,8 @@ const YooLoginComponent = class {
     if (!isNativeMobile()) {
       this.isFocused = true;
     }
-    else { // Has to be called here, as the 'keyboardWillShow' is called after, causing jittering
+    else {
+      // Has to be called here, as the 'keyboardWillShow' is called after, causing jittering
       if (this.keyboardState !== 'open') {
         this.contentContainerElement.style.top = `${this.contentContainerElement.offsetTop || 150}px`;
         this.contentContainerElement.style.position = 'absolute';
@@ -226,7 +216,8 @@ const YooLoginComponent = class {
     if (!isNativeMobile()) {
       this.isFocused = false;
     }
-    else { // Has to be called here, as the 'keyboardWillHide' is called after, causing jittering
+    else {
+      // Has to be called here, as the 'keyboardWillHide' is called after, causing jittering
       this.contentContainerElement.style.position = 'absolute';
     }
     this.focusedInput = undefined;
@@ -333,25 +324,25 @@ const YooLoginComponent = class {
   getButton(type, onClick, ref = undefined) {
     const isOtherLoginOptions = ['GOOGLE', 'SSO'].includes(type);
     const isHelpButton = ['HELP', 'MAGIC'].includes(type);
-    return (h("yoo-button", { id: !isHelpButton ? `${type.toLowerCase()}-login-button` : `${type.toLowerCase()}-button`, color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && isHelpButton ? { color: this.textColor } : undefined, fill: isHelpButton ? 'transparent' : 'solid', size: isWeb(this.host)
-        ? isHelpButton ? 'small' : 'medium'
-        : isHelpButton ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref }, type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }), type === 'GOOGLE' && h("img", { class: "google-logo", src: googleColorSvg, alt: "google logo", slot: "start" }), isHelpButton
-      ? translate(type === 'HELP' ? this.helpText : this.magicLinkText)
-      : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
+    return (h("yoo-button", { id: !isHelpButton ? `${type.toLowerCase()}-login-button` : `${type.toLowerCase()}-button`, color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && isHelpButton ? { color: this.textColor } : undefined, fill: isHelpButton ? 'transparent' : 'solid', size: isWeb(this.host) ? (isHelpButton ? 'small' : 'medium') : isHelpButton ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref }, type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }), type === 'GOOGLE' && h("img", { class: "google-logo", src: googleColorSvg, alt: "google logo", slot: "start" }), isHelpButton ? translate(type === 'HELP' ? this.helpText : this.magicLinkText) : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
   }
   render() {
     return (h(Host, { style: {
-        ...this.hasCustomBackground ? {
-          '--header-footer-border-color': `var(--${this.hasBackgroundMedia ? 'light-40' : 'app-color-20'})`,
-          backgroundColor: this.backgroundColor ? this.backgroundColor : 'unset'
-        } : {}
+        ...(this.hasCustomBackground
+          ? {
+            '--header-footer-border-color': `var(--${this.hasBackgroundMedia ? 'light-40' : 'app-color-20'})`,
+            backgroundColor: this.backgroundColor ? this.backgroundColor : 'unset'
+          }
+          : {})
       }, class: {
         'outer-login-container': true,
         focused: this.isFocused,
         [`keyboard-${this.keyboardState}`]: true,
-        'ios': isIOS(),
-        'tablet': isTabletOrIpad()
-      } }, h(Header, { error: this.error, logo: this.logo, title: this.mainTitle, textColor: this.primaryColor, closeClick: () => this.onAlertClosed() }), h(Background, { hasBackgroundMedia: this.hasBackgroundMedia, image: this.backgroundSrc }), h("div", { class: "content-container", ref: (el) => this.contentContainerElement = el }, h(Sidepanel, { title: this.mainTitle, textColor: this.primaryColor, image: this.sidepanelImage }), h(MainContent, { subtitle: this.subtitle, textColor: this.primaryColor }, h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, host: this.host, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => this.loginButtonElement = el, helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), magicButtonElement: this.getButton('MAGIC', () => this.magicLinkModalRequested.emit(true)), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }), h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()), host: this.host }))), h(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
+        emulated: isFullScreenFalse(),
+        web: isWeb(),
+        ios: isIOS(),
+        tablet: isTabletOrIpad()
+      } }, h(Header, { error: this.error, logo: this.logo, title: this.mainTitle, textColor: this.primaryColor, closeClick: () => this.onAlertClosed() }), h(Background, { hasBackgroundMedia: this.hasBackgroundMedia, image: this.backgroundSrc }), h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) }, h(Sidepanel, { title: this.mainTitle, textColor: this.primaryColor, image: this.sidepanelImage }), h(MainContent, { subtitle: this.subtitle, textColor: this.primaryColor }, h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => (this.loginButtonElement = el), helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), magicButtonElement: this.getButton('MAGIC', () => this.magicLinkModalRequested.emit(true)), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }), h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()) }))), h(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
         if (this.ssoOnly) {
           this.ssoOnly = false;
         }

package/dist/types/components/form/form-swipe-cards/form-swipe-cards.d.ts

@@ -11,13 +11,14 @@ export declare class YooFormSwipeCardsComponent {
   asyncValidators: AsyncValidator<string>[];
   validity: boolean;
   numberSteps: number;
-  isVisible: boolean;
   readonly: boolean;
   mode: SwipeCardsMode;
   livePreview: boolean;
   showInstructionView: boolean;
   animated: boolean;
   shuffled: boolean;
+  isVisible: boolean;
+  onIsVisibleChanged(): void;
   categories: string[];
   onCategoriesChanged(nv: string[], ov: string[]): void;
   values: string[];
@@ -26,28 +27,31 @@ export declare class YooFormSwipeCardsComponent {
   onImagesChanged(nv: string[], ov: string[]): void;
   required: boolean;
   onRequireChanged(): void;
+  enableButtonActions: boolean;
   validityChanged: EventEmitter<boolean>;
   inputChanged: EventEmitter<string[]>;
   blockMoves: EventEmitter<boolean>;
   host: HTMLYooFormSwipeCardsElement;
-  onIsVisibleChanged(): void;
   private swipeCards;
-  private hasDuplicatesValues;
-  private hasEmptyValues;
   private revealCards;
   private hasDataChanged;
   private cardValues;
   private animationDelay;
   private nextButtonText;
   private gameContainerElement;
-  private cardsElements;
   private swipeButtons;
   private get isMode();
-  private get numberEmptyItems();
+  private get cardData();
+  private get cardsElements();
   private get hasImage();
   private get hasText();
   private get hasTwoCategories();
-  get hasAllCardBeenSwiped(): boolean;
+  private get hasDuplicateValues();
+  private get hasEmptyValues();
+  private get hasMinimumRequiredData();
+  private get hasData();
+  private get isDataValid();
+  private get hasAllCardBeenSwiped();
   get buttons(): {
     left: HTMLYooButtonElement;
     undo: HTMLYooButtonElement;
@@ -66,28 +70,31 @@ export declare class YooFormSwipeCardsComponent {
   private updateGame;
   private shuffleCardValues;
   private getCardElement;
-  private spyOnValuesChanged;
   private showWarnings;
   private getUserAnswer;
   private displayFooterElement;
   private initDraggable;
   private initCards;
-  private lockSwipeButtons;
+  private lockSwipeActions;
+  private resetCards;
   private swipeCard;
   private getSwipedState;
   private setSwipingColor;
   private getDraggableInstance;
   private clickToSwipe;
-  private undoSwipe;
+  private undoCard;
   renderCards(): any;
   renderInstructionCategory(side: SwipeCardsDirection.left | SwipeCardsDirection.right): JSX.Element;
   renderTopDescription(): JSX.Element;
-  renderInstructions(): JSX.Element;
-  renderSwipeButtons(): JSX.Element;
+  renderHeaderInstructions(): JSX.Element[];
+  renderActions(): JSX.Element;
   renderSwipeAction(direction: SwipeCardsDirection, index: number): JSX.Element;
-  renderEndGameMessage(): JSX.Element;
+  renderBackground(): JSX.Element;
   renderGame(): JSX.Element[];
+  renderStartButton(): JSX.Element;
+  renderInstructions(): JSX.Element[];
   renderSummary(): JSX.Element[][];
   renderBanner(): JSX.Element;
+  renderMain(): JSX.Element;
   render(): JSX.Element;
 }

package/dist/types/feature-platform/login/login/parts/LoginForm.d.ts

@@ -7,7 +7,6 @@ interface LoginFormProps {
   getDefaultInputValue: (type: TInputType) => string;
   getInputValue: (type: TInputType) => string;
   focusedInput: TInputType;
-  host: HTMLYooLoginElement;
   showPassword: boolean;
   loginButtonRef: (el: HTMLInputElement) => void;
   bindReference: (el: HTMLInputElement, type: TInputType) => void;

package/dist/types/feature-platform/login/login/parts/LoginOptions.d.ts

@@ -7,7 +7,6 @@ interface LoginOptionsProps {
   dividerColor: string;
   googleLoginButtonElement: HTMLYooButtonElement;
   ssoLoginButtonElement: HTMLYooButtonElement;
-  host: HTMLYooLoginElement;
 }
 export declare const LoginOptions: FunctionalComponent<LoginOptionsProps>;
 export {};

package/dist/types/home/runner/work/yoobic-ng-6/yoobic-ng-6/design-system/stencil/.stencil/shared/interfaces/src/entities/form-field/form-field.interface.d.ts

@@ -247,6 +247,7 @@ export interface IFormField {
   slideId?: string;
   deleteOnHidden?: boolean;
   isDocument?: boolean;
+  shuffled?: boolean;
   hideMobile?: boolean;
   hideFromPhotoLibrary?: boolean;
   isImageRecognition?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoobic/yobi",
-  "version": "8.3.0-45",
+  "version": "8.3.0-48",
   "description": "Yobi - Yoobic Design System",
   "module": "dist/index.js",
   "main": "dist/index.cjs.js",