@yoobic/yobi 8.5.0-2 → 8.5.0-6

package/dist/cjs/yoo-form-capture.cjs.entry.js

@@ -1054,6 +1054,7 @@ const YooFormCaptureComponent = class {
     overlays.showAlert('', [overlays.translate('YOOBICOK')], description);
   }
   async onShowActionSheet(value, index, event) {
+    var _a, _b, _c;
     if (index && index < 0 && this.max && this.value && this.value.length === this.max) {
       this.onShowMaximumCaptureReached();
       return;
@@ -1161,7 +1162,7 @@ const YooFormCaptureComponent = class {
       }
       else if (buttons.length > 0) {
         if (overlays.isWeb(this.host)) {
-          overlays.showContextMenu(event, { multipleSelection: false, contentButtons: buttons, className: 'width-unset', hostElement: this.cameraContainerElement });
+          overlays.showContextMenu(event, { multipleSelection: false, contentButtons: buttons, className: 'width-unset', hostElement: this.cameraContainerElement || ((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector) === null || _c === void 0 ? void 0 : _c.call(_b, '.camera-container')) });
         }
         else {
           overlays.showActionSheet(buttons, null, { heading: actionSheetTitle });

package/dist/cjs/yoo-form-dynamic.cjs.entry.js

@@ -967,6 +967,23 @@ const YooFormDynamicComponent = class {
       }
     }, 1000);
   }
+  getActiveSlideWithField(field) {
+    let activeSlide;
+    this.slides.forEach((s) => {
+      let found = false;
+      if (s.items) {
+        s.items.forEach((f) => {
+          if (f.name === field.name) {
+            found = true;
+          }
+        });
+      }
+      if (found) {
+        activeSlide = s;
+      }
+    });
+    return activeSlide;
+  }
   checkIfFirstSlideAndLockSwipePrev() {
     // timeout -> wait swipe is done
     setTimeout(() => {
@@ -1527,42 +1544,27 @@ const YooFormDynamicComponent = class {
       dataArray.forEach((d) => {
         const key = d.key;
         const value = d.value;
-        let activeSlide;
-        if (this.slides) {
-          this.slides.forEach((s) => {
-            let found = false;
-            if (s.items) {
-              s.items.forEach((f) => {
-                if (f.name === field.name) {
-                  found = true;
-                }
-              });
-            }
-            if (found) {
-              activeSlide = s;
-            }
-          });
-          if (activeSlide) {
-            const fieldIndex = activeSlide.items.indexOf(field);
-            for (let i = fieldIndex + 1; i < activeSlide.items.length; i++) {
-              if (key && key.toLowerCase && activeSlide.items[i].title.toLowerCase() === key.toLowerCase()) {
-                const foundField = lodash.cloneDeep(activeSlide.items[i]);
-                let isVisibleProp = true;
-                if (foundField.condition) {
-                  // we have to pass the whole data because maybe some conditions are on other fields
-                  // we also have to disable the hide from mobile here
-                  foundField.hideMobile = false;
-                  foundField.readonly = false;
-                  isVisibleProp = overlays.isVisible(foundField, false, Object.assign({ [foundField.name]: { value } }, this.currentData), this.currentDataFlatten, this.suffix, this.session);
-                }
-                if (isVisibleProp || !foundField.dontSaveIfHidden) {
-                  this.currentData[foundField.name] = { value };
-                }
-                break;
+        const activeSlide = this.getActiveSlideWithField(field);
+        if (this.slides && activeSlide) {
+          const fieldIndex = activeSlide.items.indexOf(field);
+          for (let i = fieldIndex + 1; i < activeSlide.items.length; i++) {
+            if (key && key.toLowerCase && activeSlide.items[i].title.toLowerCase() === key.toLowerCase()) {
+              const foundField = lodash.cloneDeep(activeSlide.items[i]);
+              let isVisibleProp = true;
+              if (foundField.condition) {
+                // we have to pass the whole data because maybe some conditions are on other fields
+                // we also have to disable the hide from mobile here
+                foundField.hideMobile = false;
+                foundField.readonly = false;
+                isVisibleProp = overlays.isVisible(foundField, false, Object.assign({ [foundField.name]: { value } }, this.currentData), this.currentDataFlatten, this.suffix, this.session);
               }
-              else if (activeSlide.items[i].isImageRecognition) {
-                break;
+              if (isVisibleProp || !foundField.dontSaveIfHidden) {
+                this.currentData[foundField.name] = { value };
               }
+              break;
+            }
+            else if (activeSlide.items[i].isImageRecognition) {
+              break;
             }
           }
         }
@@ -4018,9 +4020,7 @@ const YooFormDynamicComponent = class {
         TagType = 'yoo-form-capture';
         const imageRecognitionKpiKeys = [];
         if (field.isImageRecognition) {
-          // slideIndex needs to be based on the active tab index
-          const finalIndex = this.isRenderFormSlidesWithTab() ? this.selectedTabIndex || 0 : slideIndex;
-          const activeSlide = this.slides[finalIndex];
+          const activeSlide = this.getActiveSlideWithField(field);
           for (let i = inputIndex + 1; i < activeSlide.items.length; i++) {
             const f = activeSlide.items[i];
             if (f.readonly && f.title) {

package/dist/cjs/yoo-form-stripe-card.cjs.entry.js

@@ -52,7 +52,7 @@ var registerWrapper = function registerWrapper(stripe, startTime) {
 
   stripe._registerWrapper({
     name: 'stripe-js',
-    version: "1.35.0",
+    version: "1.36.0",
     startTime: startTime
   });
 };

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

@@ -127,7 +127,7 @@ const Sidepanel = ({ image, title, textColor }) => (index.h("div", { class: "sid
   index.h(LoginTitle, { style: { color: textColor }, title: title }),
   image && index.h("img", { src: image })));
 
-const loginCss = "svg:not(:root){overflow:hidden}.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:var(--spacing-16, 1rem);-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:var(--border-width-01, 0.0625rem) 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(--border-width-01, 0.0625rem) solid var(--header-footer-border-color)}.outer-login-container:not(.emulated) footer *{margin:var(--spacing-24, 1.5rem) 0 var(--spacing-32, 2rem) 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;background:-webkit-gradient(linear, left top, left bottom, from(var(--main-color)), to(var(--main-color))), -webkit-gradient(linear, left top, left bottom, from(var(--light-80, rgba(255, 255, 255, 0.8))), to(var(--light-80, rgba(255, 255, 255, 0.8))));background:linear-gradient(var(--main-color), var(--main-color)), linear-gradient(var(--light-80, rgba(255, 255, 255, 0.8)), var(--light-80, rgba(255, 255, 255, 0.8)))}.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:var(--spacing-08, 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:var(--spacing-16, 1rem) 0}.outer-login-container #error-alert .error-content.web p{margin:0 var(--spacing-16, 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(--safe-area-inset-top)}.outer-login-container .header img{height:var(--logo-06, 4rem);max-height:var(--logo-06, 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 var(--spacing-04, 0.25rem)}.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:var(--logo-08, 6rem);max-height:var(--logo-08, 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:var(--logo-06, 4rem);max-height:var(--logo-06, 4rem)}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:var(--logo-08, 6rem);max-height:var(--logo-08, 6rem)}}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .header img{height:var(--logo-06, 4rem);max-height:var(--logo-06, 4rem)}.outer-login-container:not(.emulated) .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--border-width-01, 0.0625rem) solid var(--header-footer-border-color)}.outer-login-container:not(.emulated) .header img{margin:var(--spacing-32, 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:var(--logo-08, 6rem);max-height:var(--logo-08, 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:var(--logo-06, 4rem);max-height:var(--logo-06, 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:var(--logo-08, 6rem);max-height:var(--logo-08, 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:var(--logo-06, 4rem);max-height:var(--logo-06, 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:var(--logo-08, 6rem);max-height:var(--logo-08, 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:var(--logo-08, 6rem);max-height:var(--logo-08, 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: 749px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) #error-alert{top:6rem}}@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)}.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) #error-alert{top:4.5rem}}@media screen and (max-height: 649px){.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header .login-main-title{display:none}.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) #error-alert{top:3rem}}@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}.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) #error-alert{top:0.5rem}}@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:var(--logo-04, 2rem);max-height:var(--logo-04, 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(--safe-area-inset-top)}.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:calc(var(--spacing-08, 0.5rem) * -1) 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:calc(var(--spacing-08, 0.5rem) * -1) 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:calc(var(--spacing-04, 0.25rem) * -1) calc(var(--spacing-08, 0.5rem) * -1) 0 0}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button{margin:calc(var(--spacing-04, 0.25rem) * -1) 0 0 calc(var(--spacing-08, 0.5rem) * -1)}.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:var(--spacing-08, 0.5rem);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: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: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) var(--spacing-32, 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:var(--spacing-64, 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:var(--spacing-32, 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:var(--spacing-56, 3.5rem);padding-left:var(--spacing-56, 3.5rem)}.outer-input-container.large .inner-input-container.password input{padding-right:var(--spacing-96, 6rem)}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-16, 1rem)}.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-16, 1rem)}.outer-input-container.large .inner-input-container .input-show-icon{right:var(--spacing-40, 2.5rem);padding:0.75rem var(--spacing-16, 1rem)}.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 = "svg:not(:root){overflow:hidden}.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:var(--spacing-16, 1rem);-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:var(--border-width-01, 0.0625rem) 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(--border-width-01, 0.0625rem) solid var(--header-footer-border-color)}.outer-login-container:not(.emulated) footer *{margin:var(--spacing-24, 1.5rem) 0 var(--spacing-32, 2rem) 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;background:-webkit-gradient(linear, left top, left bottom, from(var(--main-color)), to(var(--main-color))), -webkit-gradient(linear, left top, left bottom, from(var(--light-80, rgba(255, 255, 255, 0.8))), to(var(--light-80, rgba(255, 255, 255, 0.8))));background:linear-gradient(var(--main-color), var(--main-color)), linear-gradient(var(--light-80, rgba(255, 255, 255, 0.8)), var(--light-80, rgba(255, 255, 255, 0.8)))}.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:var(--spacing-08, 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:var(--spacing-16, 1rem) 0}.outer-login-container #error-alert .error-content.web p{margin:0 var(--spacing-16, 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(--safe-area-inset-top)}.outer-login-container .header img{height:var(--logo-06, 4rem);max-height:var(--logo-06, 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 var(--spacing-04, 0.25rem)}.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:var(--logo-08, 6rem);max-height:var(--logo-08, 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:var(--logo-06, 4rem);max-height:var(--logo-06, 4rem)}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:var(--logo-08, 6rem);max-height:var(--logo-08, 6rem)}}@media screen and (min-width: 1000px){.outer-login-container:not(.emulated) .header img{height:var(--logo-06, 4rem);max-height:var(--logo-06, 4rem)}.outer-login-container:not(.emulated) .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--border-width-01, 0.0625rem) solid var(--header-footer-border-color)}.outer-login-container:not(.emulated) .header img{margin:var(--spacing-32, 2rem) 0}.outer-login-container:not(.emulated) .header .login-main-title{display:none}.outer-login-container:not(.emulated) #error-alert:not(.mobile){top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container:not(.emulated)[is-whitelabel] #error-alert:not(.mobile){top:9rem}.outer-login-container:not(.emulated)[logo-shape=square] .header img{height:var(--logo-08, 6rem);max-height:var(--logo-08, 6rem)}.outer-login-container:not(.emulated)[logo-shape=square] #error-alert:not(.mobile){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:var(--logo-06, 4rem);max-height:var(--logo-06, 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:var(--logo-08, 6rem);max-height:var(--logo-08, 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:var(--logo-06, 4rem);max-height:var(--logo-06, 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:var(--logo-08, 6rem);max-height:var(--logo-08, 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:var(--logo-08, 6rem);max-height:var(--logo-08, 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.keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-32, 2rem)}.outer-login-container.keyboard-closed:not(.emulated)[logo-shape=square] .header img{margin-top:var(--spacing-48, 3rem)}}@media screen and (max-height: 749px){.outer-login-container.keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-closed:not(.emulated)[logo-shape=square] .header img{margin-top:var(--spacing-32, 2rem)}.outer-login-container.keyboard-closed:not(.emulated) #error-alert:not(.mobile):not(.tablet){top:6rem}}@media screen and (max-height: 699px){.outer-login-container.keyboard-closed:not(.emulated) .header img{margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}.outer-login-container.keyboard-closed:not(.emulated)[logo-shape=square] .header img{margin-top:0;margin-bottom:0}.outer-login-container.keyboard-closed:not(.emulated) #error-alert:not(.mobile):not(.tablet){top:4.5rem}}@media screen and (max-height: 649px){.outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title{display:none}.outer-login-container.keyboard-closed:not(.emulated)[logo-shape=square] .header img{display:none}.outer-login-container.keyboard-closed:not(.emulated) #error-alert:not(.mobile):not(.tablet){top:3rem}}@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}.outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) #error-alert:not(.mobile):not(.tablet){top:0.5rem}}@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:var(--logo-04, 2rem);max-height:var(--logo-04, 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(--safe-area-inset-top)}.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:calc(var(--spacing-08, 0.5rem) * -1) 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:calc(var(--spacing-08, 0.5rem) * -1) 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:calc(var(--spacing-04, 0.25rem) * -1) calc(var(--spacing-08, 0.5rem) * -1) 0 0}.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button{margin:calc(var(--spacing-04, 0.25rem) * -1) 0 0 calc(var(--spacing-08, 0.5rem) * -1)}.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:var(--spacing-08, 0.5rem);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: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: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) var(--spacing-32, 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:var(--spacing-64, 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:var(--spacing-32, 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:var(--spacing-56, 3.5rem);padding-left:var(--spacing-56, 3.5rem)}.outer-input-container.large .inner-input-container.password input{padding-right:var(--spacing-96, 6rem)}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-16, 1rem)}.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-16, 1rem)}.outer-input-container.large .inner-input-container .input-show-icon{right:var(--spacing-40, 2.5rem);padding:0.75rem var(--spacing-16, 1rem)}.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) {