@pics-core/platform-settings 2026.10.26-DEV.0 → 2026.10.26-QA.11

package/fesm2022/pics-core-platform-settings.mjs

@@ -455,11 +455,11 @@ class DataSourceComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DataSourceComponent, deps: [{ token: SETTINGS_ALERT }, { token: i1.UntypedFormBuilder }, { token: DataSourceService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DataSourceComponent, isStandalone: false, selector: "app-data-source", ngImport: i0, template: "<div [formGroup]=\"settingForm\">\r\n  <p-card styleClass=\"w-100 mt-2 mb-3 shadow-sm\">\r\n    <ng-template pTemplate=\"header\">\r\n      Audit Field Mapping\r\n    </ng-template>\r\n    <div class=\"p-fluid p-formgrid row audit-enabled-radio\">\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label for=\"db_audit_enabled\" class=\"intake-form-labels\">Audit Field Enabled</label>\r\n        <div class=\"clearfix\">\r\n          <div *ngFor=\"let category of auditEnabledList\" class=\"field-checkbox\">\r\n            <p-radioButton [inputId]=\"category.key\" name=\"audit_enabled\" [value]=\"category.value\"\r\n              formControlName=\"audit_enabled\"></p-radioButton>\r\n            <label [for]=\"category.key\">{{category.key}}</label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      @if (settingForm.value.audit_enabled) {\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_created_by\" class=\"intake-form-labels\">Created By</label>\r\n          <input id=\"db_created_by\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"created_by\" placeholder=\"Enter DB Created BY\" pInputText />\r\n        </div>\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_created_at\" class=\"intake-form-labels\">Created At</label>\r\n          <input id=\"db_created_at\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"created_at\" placeholder=\"Enter DB Created At\" pInputText />\r\n        </div>\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_updated_by\" class=\"intake-form-labels\">Updated By</label>\r\n          <input id=\"db_updated_by\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"updated_by\" placeholder=\"Enter DB Updated By\" pInputText />\r\n        </div>\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_updated_at\" class=\"intake-form-labels\">Updated At</label>\r\n          <input id=\"db_updated_at\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"updated_at\" placeholder=\"Enter DB Updated At\" pInputText />\r\n        </div>\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_soft_delete\" class=\"intake-form-labels\">Soft Delete</label>\r\n          <input id=\"db_soft_delete\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"soft_delete\" placeholder=\"Enter DB Soft Delete\" pInputText />\r\n        </div>\r\n      }\r\n    </div>\r\n  </p-card>\r\n\r\n  <div class=\"p-fluid p-formgrid row\">\r\n    <div class=\"p-field col-md-12 col-12 text-md-right\">\r\n      <button class=\"mb-2 btn bg-white text-primary btncancel\" (click)=\"cancel()\">\r\n        Cancel\r\n      </button>\r\n      @if (userid && isEdit === false) {\r\n        <button class=\"mb-2 btn btn-primary btncommon\" (click)=\"editStatus()\">\r\n          Edit\r\n        </button>\r\n      }\r\n      @if (userid && isEdit === true) {\r\n        <button class=\"mb-2 btn btn-primary btncommon\" (click)=\"addUser()\">\r\n          Update\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep .p-card .p-card-header{color:var(--header-color);font-size:var(--font-16);font-weight:600;padding:1rem 1rem 0}:host ::ng-deep .p-card .p-card-content{padding-top:0;padding-bottom:0}.audit-enabled-radio .field-checkbox{display:inline-block;margin-right:15px}.audit-enabled-radio .field-checkbox p-radiobutton{vertical-align:text-bottom}.audit-enabled-radio .field-checkbox label{margin:0 0 0 5px;font-size:var(--font-14);color:var(--input-label)}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.InputText, selector: "[pInputText]" }, { kind: "component", type: i7$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DataSourceComponent, isStandalone: false, selector: "app-data-source", ngImport: i0, template: "<div [formGroup]=\"settingForm\">\n  <p-card styleClass=\"w-100 mt-2 mb-3 shadow-sm\">\n    <ng-template pTemplate=\"header\">\n      Audit Field Mapping\n    </ng-template>\n    <div class=\"p-fluid p-formgrid row audit-enabled-radio\">\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label for=\"db_audit_enabled\" class=\"intake-form-labels\">Audit Field Enabled</label>\n        <div class=\"clearfix\">\n          <div *ngFor=\"let category of auditEnabledList\" class=\"field-checkbox\">\n            <p-radioButton [inputId]=\"category.key\" name=\"audit_enabled\" [value]=\"category.value\"\n              formControlName=\"audit_enabled\"></p-radioButton>\n            <label [for]=\"category.key\">{{category.key}}</label>\n          </div>\n        </div>\n      </div>\n      @if (settingForm.value.audit_enabled) {\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_created_by\" class=\"intake-form-labels\">Created By</label>\n          <input id=\"db_created_by\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"created_by\" placeholder=\"Enter DB Created BY\" pInputText />\n        </div>\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_created_at\" class=\"intake-form-labels\">Created At</label>\n          <input id=\"db_created_at\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"created_at\" placeholder=\"Enter DB Created At\" pInputText />\n        </div>\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_updated_by\" class=\"intake-form-labels\">Updated By</label>\n          <input id=\"db_updated_by\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"updated_by\" placeholder=\"Enter DB Updated By\" pInputText />\n        </div>\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_updated_at\" class=\"intake-form-labels\">Updated At</label>\n          <input id=\"db_updated_at\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"updated_at\" placeholder=\"Enter DB Updated At\" pInputText />\n        </div>\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_soft_delete\" class=\"intake-form-labels\">Soft Delete</label>\n          <input id=\"db_soft_delete\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"soft_delete\" placeholder=\"Enter DB Soft Delete\" pInputText />\n        </div>\n      }\n    </div>\n  </p-card>\n\n  <div class=\"p-fluid p-formgrid row\">\n    <div class=\"p-field col-md-12 col-12 text-md-right\">\n      <button class=\"mb-2 btn bg-white text-primary btncancel\" (click)=\"cancel()\">\n        Cancel\n      </button>\n      @if (userid && isEdit === false) {\n        <button class=\"mb-2 btn btn-primary btncommon\" (click)=\"editStatus()\">\n          Edit\n        </button>\n      }\n      @if (userid && isEdit === true) {\n        <button class=\"mb-2 btn btn-primary btncommon\" (click)=\"addUser()\">\n          Update\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-card .p-card-header{color:var(--header-color);font-size:var(--font-16);font-weight:600;padding:1rem 1rem 0}:host ::ng-deep .p-card .p-card-content{padding-top:0;padding-bottom:0}.audit-enabled-radio .field-checkbox{display:inline-block;margin-right:15px}.audit-enabled-radio .field-checkbox p-radiobutton{vertical-align:text-bottom}.audit-enabled-radio .field-checkbox label{margin:0 0 0 5px;font-size:var(--font-14);color:var(--input-label)}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.InputText, selector: "[pInputText]" }, { kind: "component", type: i7$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DataSourceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-data-source', standalone: false, template: "<div [formGroup]=\"settingForm\">\r\n  <p-card styleClass=\"w-100 mt-2 mb-3 shadow-sm\">\r\n    <ng-template pTemplate=\"header\">\r\n      Audit Field Mapping\r\n    </ng-template>\r\n    <div class=\"p-fluid p-formgrid row audit-enabled-radio\">\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label for=\"db_audit_enabled\" class=\"intake-form-labels\">Audit Field Enabled</label>\r\n        <div class=\"clearfix\">\r\n          <div *ngFor=\"let category of auditEnabledList\" class=\"field-checkbox\">\r\n            <p-radioButton [inputId]=\"category.key\" name=\"audit_enabled\" [value]=\"category.value\"\r\n              formControlName=\"audit_enabled\"></p-radioButton>\r\n            <label [for]=\"category.key\">{{category.key}}</label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      @if (settingForm.value.audit_enabled) {\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_created_by\" class=\"intake-form-labels\">Created By</label>\r\n          <input id=\"db_created_by\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"created_by\" placeholder=\"Enter DB Created BY\" pInputText />\r\n        </div>\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_created_at\" class=\"intake-form-labels\">Created At</label>\r\n          <input id=\"db_created_at\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"created_at\" placeholder=\"Enter DB Created At\" pInputText />\r\n        </div>\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_updated_by\" class=\"intake-form-labels\">Updated By</label>\r\n          <input id=\"db_updated_by\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"updated_by\" placeholder=\"Enter DB Updated By\" pInputText />\r\n        </div>\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_updated_at\" class=\"intake-form-labels\">Updated At</label>\r\n          <input id=\"db_updated_at\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"updated_at\" placeholder=\"Enter DB Updated At\" pInputText />\r\n        </div>\r\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n          <label for=\"db_soft_delete\" class=\"intake-form-labels\">Soft Delete</label>\r\n          <input id=\"db_soft_delete\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\r\n            formControlName=\"soft_delete\" placeholder=\"Enter DB Soft Delete\" pInputText />\r\n        </div>\r\n      }\r\n    </div>\r\n  </p-card>\r\n\r\n  <div class=\"p-fluid p-formgrid row\">\r\n    <div class=\"p-field col-md-12 col-12 text-md-right\">\r\n      <button class=\"mb-2 btn bg-white text-primary btncancel\" (click)=\"cancel()\">\r\n        Cancel\r\n      </button>\r\n      @if (userid && isEdit === false) {\r\n        <button class=\"mb-2 btn btn-primary btncommon\" (click)=\"editStatus()\">\r\n          Edit\r\n        </button>\r\n      }\r\n      @if (userid && isEdit === true) {\r\n        <button class=\"mb-2 btn btn-primary btncommon\" (click)=\"addUser()\">\r\n          Update\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep .p-card .p-card-header{color:var(--header-color);font-size:var(--font-16);font-weight:600;padding:1rem 1rem 0}:host ::ng-deep .p-card .p-card-content{padding-top:0;padding-bottom:0}.audit-enabled-radio .field-checkbox{display:inline-block;margin-right:15px}.audit-enabled-radio .field-checkbox p-radiobutton{vertical-align:text-bottom}.audit-enabled-radio .field-checkbox label{margin:0 0 0 5px;font-size:var(--font-14);color:var(--input-label)}\n"] }]
+            args: [{ selector: 'app-data-source', standalone: false, template: "<div [formGroup]=\"settingForm\">\n  <p-card styleClass=\"w-100 mt-2 mb-3 shadow-sm\">\n    <ng-template pTemplate=\"header\">\n      Audit Field Mapping\n    </ng-template>\n    <div class=\"p-fluid p-formgrid row audit-enabled-radio\">\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label for=\"db_audit_enabled\" class=\"intake-form-labels\">Audit Field Enabled</label>\n        <div class=\"clearfix\">\n          <div *ngFor=\"let category of auditEnabledList\" class=\"field-checkbox\">\n            <p-radioButton [inputId]=\"category.key\" name=\"audit_enabled\" [value]=\"category.value\"\n              formControlName=\"audit_enabled\"></p-radioButton>\n            <label [for]=\"category.key\">{{category.key}}</label>\n          </div>\n        </div>\n      </div>\n      @if (settingForm.value.audit_enabled) {\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_created_by\" class=\"intake-form-labels\">Created By</label>\n          <input id=\"db_created_by\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"created_by\" placeholder=\"Enter DB Created BY\" pInputText />\n        </div>\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_created_at\" class=\"intake-form-labels\">Created At</label>\n          <input id=\"db_created_at\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"created_at\" placeholder=\"Enter DB Created At\" pInputText />\n        </div>\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_updated_by\" class=\"intake-form-labels\">Updated By</label>\n          <input id=\"db_updated_by\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"updated_by\" placeholder=\"Enter DB Updated By\" pInputText />\n        </div>\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_updated_at\" class=\"intake-form-labels\">Updated At</label>\n          <input id=\"db_updated_at\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"updated_at\" placeholder=\"Enter DB Updated At\" pInputText />\n        </div>\n        <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n          <label for=\"db_soft_delete\" class=\"intake-form-labels\">Soft Delete</label>\n          <input id=\"db_soft_delete\" aria-labelledby=\"template\" class=\"form-control\" type=\"text\"\n            formControlName=\"soft_delete\" placeholder=\"Enter DB Soft Delete\" pInputText />\n        </div>\n      }\n    </div>\n  </p-card>\n\n  <div class=\"p-fluid p-formgrid row\">\n    <div class=\"p-field col-md-12 col-12 text-md-right\">\n      <button class=\"mb-2 btn bg-white text-primary btncancel\" (click)=\"cancel()\">\n        Cancel\n      </button>\n      @if (userid && isEdit === false) {\n        <button class=\"mb-2 btn btn-primary btncommon\" (click)=\"editStatus()\">\n          Edit\n        </button>\n      }\n      @if (userid && isEdit === true) {\n        <button class=\"mb-2 btn btn-primary btncommon\" (click)=\"addUser()\">\n          Update\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-card .p-card-header{color:var(--header-color);font-size:var(--font-16);font-weight:600;padding:1rem 1rem 0}:host ::ng-deep .p-card .p-card-content{padding-top:0;padding-bottom:0}.audit-enabled-radio .field-checkbox{display:inline-block;margin-right:15px}.audit-enabled-radio .field-checkbox p-radiobutton{vertical-align:text-bottom}.audit-enabled-radio .field-checkbox label{margin:0 0 0 5px;font-size:var(--font-14);color:var(--input-label)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_ALERT]
@@ -919,11 +919,11 @@ class PlatformSettingsComponent {
         return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PlatformSettingsComponent, deps: [{ token: SETTINGS_ALERT }, { token: i1.UntypedFormBuilder }, { token: PlatformSettingsService }, { token: SETTINGS_LOCAL }, { token: SETTINGS_SESSION }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: PlatformSettingsComponent, isStandalone: false, selector: "app-platform-settings", ngImport: i0, template: "\r\n<p-card styleClass=\"w-100 mt-2\">\r\n  <div class=\"p-fluid p-formgrid row\" *ngIf=\"showOrgDropdown\">\r\n    <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n      <label class=\"intake-form-labels\" for=\"organizationConfig\"\r\n        >Organization\r\n        <span class=\"requiredfield text-danger\">*</span>\r\n      </label>\r\n      <p-dropdown\r\n        styleClass=\"w-100\"\r\n        [options]=\"configOptions\"\r\n        placeholder=\"Select Organization\"\r\n        inputId=\"organizationConfig\"\r\n        optionLabel=\"organization_title\"\r\n        optionValue=\"id\"\r\n        [(ngModel)]=\"selectedConfigId\"\r\n        [ngModelOptions]=\"{standalone: true}\"\r\n        (onChange)=\"onConfigSelectionChange($event.value)\"\r\n        [filter]=\"true\"\r\n        filterBy=\"organization_title\">\r\n      </p-dropdown>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"customizer\" [formGroup]=\"configRegistrationForm\">\r\n    <div class=\"p-fluid p-formgrid row\">\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"datetimeFormat\"\r\n          >Date & Time Format\r\n          <span class=\"requiredfield text-danger\">*</span>\r\n        </label>\r\n        <p-dropdown\r\n          styleClass=\"w-100\"\r\n          [options]=\"datetimeFomatList\"\r\n          placeholder=\"Select Date & Time Format\"\r\n          id=\"datetimeFormat\"\r\n          optionLabel=\"lookupvalue\"\r\n          optionValue=\"lookupkey\"\r\n          formControlName=\"datetimeformat\">\r\n        </p-dropdown>\r\n        <div\r\n          *ngIf=\"\r\n            tabErrorShow\r\n              ? configRegistrationForm.controls['datetimeformat'].invalid\r\n              : configRegistrationForm.controls['datetimeformat'].errors &&\r\n                configRegistrationForm.controls['datetimeformat'].touched\r\n          \">\r\n          <div class=\"p-error block mt-1\">Date & Time Format is required </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"timezone\"\r\n          >Time Zone\r\n          <span class=\"requiredfield text-danger\">*</span>\r\n        </label>\r\n        <p-dropdown\r\n          styleClass=\"w-100\"\r\n          [options]=\"timezoneList\"\r\n          placeholder=\"Select Time Zone\"\r\n          id=\"timezone\"\r\n          optionLabel=\"lookupvalue\"\r\n          optionValue=\"lookupvalue\"\r\n          formControlName=\"timezone\">\r\n        </p-dropdown>\r\n        <div\r\n          *ngIf=\"\r\n            tabErrorShow\r\n              ? configRegistrationForm.controls['timezone'].invalid\r\n              : configRegistrationForm.controls['timezone'].errors &&\r\n                configRegistrationForm.controls['timezone'].touched\r\n          \">\r\n          <div class=\"p-error block mt-1\">Timezone is required </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"isIdleMonitorEnabled\">Idle Monitor</label>\r\n        <div class=\"d-flex align-items-center mt-2\">\r\n          <p-inputSwitch\r\n            inputId=\"isIdleMonitorEnabled\"\r\n            formControlName=\"isIdleMonitorEnabled\">\r\n          </p-inputSwitch>\r\n          <label class=\"mb-0 ml-2\" for=\"isIdleMonitorEnabled\">\r\n            {{ configRegistrationForm.get('isIdleMonitorEnabled')?.value ? 'On' : 'Off' }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"p-fluid p-formgrid row\" *ngIf=\"configRegistrationForm.get('isIdleMonitorEnabled')?.value\">\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"idleTimeout\"\r\n          >Idle Timeout (minutes)\r\n          <span class=\"requiredfield text-danger\">*</span>\r\n        </label>\r\n        <p-inputNumber\r\n          inputId=\"idleTimeout\"\r\n          styleClass=\"w-100\"\r\n          [min]=\"1\"\r\n          [max]=\"maxIdleTimeout\"\r\n          [maxFractionDigits]=\"0\"\r\n          [useGrouping]=\"false\"\r\n          [showButtons]=\"false\"\r\n          formControlName=\"idleTimeout\"\r\n          placeholder=\"Minutes\">\r\n        </p-inputNumber>\r\n        <div\r\n          *ngIf=\"\r\n            tabErrorShow\r\n              ? configRegistrationForm.controls['idleTimeout'].invalid\r\n              : configRegistrationForm.controls['idleTimeout'].errors &&\r\n                configRegistrationForm.controls['idleTimeout'].touched\r\n          \">\r\n          <div class=\"p-error block mt-1\">Idle Timeout is required and must be between 1 and {{ maxIdleTimeout }} minutes </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"idleWarning\"\r\n          >Idle Warning (seconds)\r\n          <span class=\"requiredfield text-danger\">*</span>\r\n        </label>\r\n        <p-inputNumber\r\n          inputId=\"idleWarning\"\r\n          styleClass=\"w-100\"\r\n          [min]=\"1\"\r\n          [max]=\"maxIdleWarning\"\r\n          [maxFractionDigits]=\"0\"\r\n          [useGrouping]=\"false\"\r\n          [showButtons]=\"false\"\r\n          formControlName=\"idleWarning\"\r\n          placeholder=\"Seconds\">\r\n        </p-inputNumber>\r\n        <div\r\n          *ngIf=\"\r\n            tabErrorShow\r\n              ? configRegistrationForm.controls['idleWarning'].invalid\r\n              : configRegistrationForm.controls['idleWarning'].errors &&\r\n                configRegistrationForm.controls['idleWarning'].touched\r\n          \">\r\n          <div class=\"p-error block mt-1\">Idle Warning is required and must be between 1 and {{ maxIdleWarning }} seconds </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-md-right mt-2\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn bg-white text-primary btncancel\"\r\n      *ngIf=\"configRegistrationForm.invalid\"\r\n      (click)=\"getConfigById()\">\r\n      Cancel\r\n    </button>\r\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"saveConfig()\">\r\n      {{ updateButton ? 'Update' : 'Submit' }}\r\n    </button>\r\n  </div>\r\n</p-card>\r\n", styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-15);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-14);color:var(--text-dark)}.customizer p{font-size:var(--base-font-size);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i7$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: PlatformSettingsComponent, isStandalone: false, selector: "app-platform-settings", ngImport: i0, template: "\n<p-card styleClass=\"w-100 mt-2\">\n  <div class=\"p-fluid p-formgrid row\" *ngIf=\"showOrgDropdown\">\n    <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n      <label class=\"intake-form-labels\" for=\"organizationConfig\"\n        >Organization\n        <span class=\"requiredfield text-danger\">*</span>\n      </label>\n      <p-dropdown\n        styleClass=\"w-100\"\n        [options]=\"configOptions\"\n        placeholder=\"Select Organization\"\n        inputId=\"organizationConfig\"\n        optionLabel=\"organization_title\"\n        optionValue=\"id\"\n        [(ngModel)]=\"selectedConfigId\"\n        [ngModelOptions]=\"{standalone: true}\"\n        (onChange)=\"onConfigSelectionChange($event.value)\"\n        [filter]=\"true\"\n        filterBy=\"organization_title\">\n      </p-dropdown>\n    </div>\n  </div>\n\n  <div class=\"customizer\" [formGroup]=\"configRegistrationForm\">\n    <div class=\"p-fluid p-formgrid row\">\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"datetimeFormat\"\n          >Date & Time Format\n          <span class=\"requiredfield text-danger\">*</span>\n        </label>\n        <p-dropdown\n          styleClass=\"w-100\"\n          [options]=\"datetimeFomatList\"\n          placeholder=\"Select Date & Time Format\"\n          id=\"datetimeFormat\"\n          optionLabel=\"lookupvalue\"\n          optionValue=\"lookupkey\"\n          formControlName=\"datetimeformat\">\n        </p-dropdown>\n        <div\n          *ngIf=\"\n            tabErrorShow\n              ? configRegistrationForm.controls['datetimeformat'].invalid\n              : configRegistrationForm.controls['datetimeformat'].errors &&\n                configRegistrationForm.controls['datetimeformat'].touched\n          \">\n          <div class=\"p-error block mt-1\">Date & Time Format is required </div>\n        </div>\n      </div>\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"timezone\"\n          >Time Zone\n          <span class=\"requiredfield text-danger\">*</span>\n        </label>\n        <p-dropdown\n          styleClass=\"w-100\"\n          [options]=\"timezoneList\"\n          placeholder=\"Select Time Zone\"\n          id=\"timezone\"\n          optionLabel=\"lookupvalue\"\n          optionValue=\"lookupvalue\"\n          formControlName=\"timezone\">\n        </p-dropdown>\n        <div\n          *ngIf=\"\n            tabErrorShow\n              ? configRegistrationForm.controls['timezone'].invalid\n              : configRegistrationForm.controls['timezone'].errors &&\n                configRegistrationForm.controls['timezone'].touched\n          \">\n          <div class=\"p-error block mt-1\">Timezone is required </div>\n        </div>\n      </div>\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"isIdleMonitorEnabled\">Idle Monitor</label>\n        <div class=\"d-flex align-items-center mt-2\">\n          <p-inputSwitch\n            inputId=\"isIdleMonitorEnabled\"\n            formControlName=\"isIdleMonitorEnabled\">\n          </p-inputSwitch>\n          <label class=\"mb-0 ml-2\" for=\"isIdleMonitorEnabled\">\n            {{ configRegistrationForm.get('isIdleMonitorEnabled')?.value ? 'On' : 'Off' }}\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"p-fluid p-formgrid row\" *ngIf=\"configRegistrationForm.get('isIdleMonitorEnabled')?.value\">\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"idleTimeout\"\n          >Idle Timeout (minutes)\n          <span class=\"requiredfield text-danger\">*</span>\n        </label>\n        <p-inputNumber\n          inputId=\"idleTimeout\"\n          styleClass=\"w-100\"\n          [min]=\"1\"\n          [max]=\"maxIdleTimeout\"\n          [maxFractionDigits]=\"0\"\n          [useGrouping]=\"false\"\n          [showButtons]=\"false\"\n          formControlName=\"idleTimeout\"\n          placeholder=\"Minutes\">\n        </p-inputNumber>\n        <div\n          *ngIf=\"\n            tabErrorShow\n              ? configRegistrationForm.controls['idleTimeout'].invalid\n              : configRegistrationForm.controls['idleTimeout'].errors &&\n                configRegistrationForm.controls['idleTimeout'].touched\n          \">\n          <div class=\"p-error block mt-1\">Idle Timeout is required and must be between 1 and {{ maxIdleTimeout }} minutes </div>\n        </div>\n      </div>\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"idleWarning\"\n          >Idle Warning (seconds)\n          <span class=\"requiredfield text-danger\">*</span>\n        </label>\n        <p-inputNumber\n          inputId=\"idleWarning\"\n          styleClass=\"w-100\"\n          [min]=\"1\"\n          [max]=\"maxIdleWarning\"\n          [maxFractionDigits]=\"0\"\n          [useGrouping]=\"false\"\n          [showButtons]=\"false\"\n          formControlName=\"idleWarning\"\n          placeholder=\"Seconds\">\n        </p-inputNumber>\n        <div\n          *ngIf=\"\n            tabErrorShow\n              ? configRegistrationForm.controls['idleWarning'].invalid\n              : configRegistrationForm.controls['idleWarning'].errors &&\n                configRegistrationForm.controls['idleWarning'].touched\n          \">\n          <div class=\"p-error block mt-1\">Idle Warning is required and must be between 1 and {{ maxIdleWarning }} seconds </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"text-md-right mt-2\">\n    <button\n      type=\"button\"\n      class=\"btn bg-white text-primary btncancel\"\n      *ngIf=\"configRegistrationForm.invalid\"\n      (click)=\"getConfigById()\">\n      Cancel\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"saveConfig()\">\n      {{ updateButton ? 'Update' : 'Submit' }}\n    </button>\n  </div>\n</p-card>\n", styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-15);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-14);color:var(--text-dark)}.customizer p{font-size:var(--base-font-size);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i7$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PlatformSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-platform-settings', standalone: false, template: "\r\n<p-card styleClass=\"w-100 mt-2\">\r\n  <div class=\"p-fluid p-formgrid row\" *ngIf=\"showOrgDropdown\">\r\n    <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n      <label class=\"intake-form-labels\" for=\"organizationConfig\"\r\n        >Organization\r\n        <span class=\"requiredfield text-danger\">*</span>\r\n      </label>\r\n      <p-dropdown\r\n        styleClass=\"w-100\"\r\n        [options]=\"configOptions\"\r\n        placeholder=\"Select Organization\"\r\n        inputId=\"organizationConfig\"\r\n        optionLabel=\"organization_title\"\r\n        optionValue=\"id\"\r\n        [(ngModel)]=\"selectedConfigId\"\r\n        [ngModelOptions]=\"{standalone: true}\"\r\n        (onChange)=\"onConfigSelectionChange($event.value)\"\r\n        [filter]=\"true\"\r\n        filterBy=\"organization_title\">\r\n      </p-dropdown>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"customizer\" [formGroup]=\"configRegistrationForm\">\r\n    <div class=\"p-fluid p-formgrid row\">\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"datetimeFormat\"\r\n          >Date & Time Format\r\n          <span class=\"requiredfield text-danger\">*</span>\r\n        </label>\r\n        <p-dropdown\r\n          styleClass=\"w-100\"\r\n          [options]=\"datetimeFomatList\"\r\n          placeholder=\"Select Date & Time Format\"\r\n          id=\"datetimeFormat\"\r\n          optionLabel=\"lookupvalue\"\r\n          optionValue=\"lookupkey\"\r\n          formControlName=\"datetimeformat\">\r\n        </p-dropdown>\r\n        <div\r\n          *ngIf=\"\r\n            tabErrorShow\r\n              ? configRegistrationForm.controls['datetimeformat'].invalid\r\n              : configRegistrationForm.controls['datetimeformat'].errors &&\r\n                configRegistrationForm.controls['datetimeformat'].touched\r\n          \">\r\n          <div class=\"p-error block mt-1\">Date & Time Format is required </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"timezone\"\r\n          >Time Zone\r\n          <span class=\"requiredfield text-danger\">*</span>\r\n        </label>\r\n        <p-dropdown\r\n          styleClass=\"w-100\"\r\n          [options]=\"timezoneList\"\r\n          placeholder=\"Select Time Zone\"\r\n          id=\"timezone\"\r\n          optionLabel=\"lookupvalue\"\r\n          optionValue=\"lookupvalue\"\r\n          formControlName=\"timezone\">\r\n        </p-dropdown>\r\n        <div\r\n          *ngIf=\"\r\n            tabErrorShow\r\n              ? configRegistrationForm.controls['timezone'].invalid\r\n              : configRegistrationForm.controls['timezone'].errors &&\r\n                configRegistrationForm.controls['timezone'].touched\r\n          \">\r\n          <div class=\"p-error block mt-1\">Timezone is required </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"isIdleMonitorEnabled\">Idle Monitor</label>\r\n        <div class=\"d-flex align-items-center mt-2\">\r\n          <p-inputSwitch\r\n            inputId=\"isIdleMonitorEnabled\"\r\n            formControlName=\"isIdleMonitorEnabled\">\r\n          </p-inputSwitch>\r\n          <label class=\"mb-0 ml-2\" for=\"isIdleMonitorEnabled\">\r\n            {{ configRegistrationForm.get('isIdleMonitorEnabled')?.value ? 'On' : 'Off' }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"p-fluid p-formgrid row\" *ngIf=\"configRegistrationForm.get('isIdleMonitorEnabled')?.value\">\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"idleTimeout\"\r\n          >Idle Timeout (minutes)\r\n          <span class=\"requiredfield text-danger\">*</span>\r\n        </label>\r\n        <p-inputNumber\r\n          inputId=\"idleTimeout\"\r\n          styleClass=\"w-100\"\r\n          [min]=\"1\"\r\n          [max]=\"maxIdleTimeout\"\r\n          [maxFractionDigits]=\"0\"\r\n          [useGrouping]=\"false\"\r\n          [showButtons]=\"false\"\r\n          formControlName=\"idleTimeout\"\r\n          placeholder=\"Minutes\">\r\n        </p-inputNumber>\r\n        <div\r\n          *ngIf=\"\r\n            tabErrorShow\r\n              ? configRegistrationForm.controls['idleTimeout'].invalid\r\n              : configRegistrationForm.controls['idleTimeout'].errors &&\r\n                configRegistrationForm.controls['idleTimeout'].touched\r\n          \">\r\n          <div class=\"p-error block mt-1\">Idle Timeout is required and must be between 1 and {{ maxIdleTimeout }} minutes </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\r\n        <label class=\"intake-form-labels\" for=\"idleWarning\"\r\n          >Idle Warning (seconds)\r\n          <span class=\"requiredfield text-danger\">*</span>\r\n        </label>\r\n        <p-inputNumber\r\n          inputId=\"idleWarning\"\r\n          styleClass=\"w-100\"\r\n          [min]=\"1\"\r\n          [max]=\"maxIdleWarning\"\r\n          [maxFractionDigits]=\"0\"\r\n          [useGrouping]=\"false\"\r\n          [showButtons]=\"false\"\r\n          formControlName=\"idleWarning\"\r\n          placeholder=\"Seconds\">\r\n        </p-inputNumber>\r\n        <div\r\n          *ngIf=\"\r\n            tabErrorShow\r\n              ? configRegistrationForm.controls['idleWarning'].invalid\r\n              : configRegistrationForm.controls['idleWarning'].errors &&\r\n                configRegistrationForm.controls['idleWarning'].touched\r\n          \">\r\n          <div class=\"p-error block mt-1\">Idle Warning is required and must be between 1 and {{ maxIdleWarning }} seconds </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-md-right mt-2\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn bg-white text-primary btncancel\"\r\n      *ngIf=\"configRegistrationForm.invalid\"\r\n      (click)=\"getConfigById()\">\r\n      Cancel\r\n    </button>\r\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"saveConfig()\">\r\n      {{ updateButton ? 'Update' : 'Submit' }}\r\n    </button>\r\n  </div>\r\n</p-card>\r\n", styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-15);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-14);color:var(--text-dark)}.customizer p{font-size:var(--base-font-size);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}\n"] }]
+            args: [{ selector: 'app-platform-settings', standalone: false, template: "\n<p-card styleClass=\"w-100 mt-2\">\n  <div class=\"p-fluid p-formgrid row\" *ngIf=\"showOrgDropdown\">\n    <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n      <label class=\"intake-form-labels\" for=\"organizationConfig\"\n        >Organization\n        <span class=\"requiredfield text-danger\">*</span>\n      </label>\n      <p-dropdown\n        styleClass=\"w-100\"\n        [options]=\"configOptions\"\n        placeholder=\"Select Organization\"\n        inputId=\"organizationConfig\"\n        optionLabel=\"organization_title\"\n        optionValue=\"id\"\n        [(ngModel)]=\"selectedConfigId\"\n        [ngModelOptions]=\"{standalone: true}\"\n        (onChange)=\"onConfigSelectionChange($event.value)\"\n        [filter]=\"true\"\n        filterBy=\"organization_title\">\n      </p-dropdown>\n    </div>\n  </div>\n\n  <div class=\"customizer\" [formGroup]=\"configRegistrationForm\">\n    <div class=\"p-fluid p-formgrid row\">\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"datetimeFormat\"\n          >Date & Time Format\n          <span class=\"requiredfield text-danger\">*</span>\n        </label>\n        <p-dropdown\n          styleClass=\"w-100\"\n          [options]=\"datetimeFomatList\"\n          placeholder=\"Select Date & Time Format\"\n          id=\"datetimeFormat\"\n          optionLabel=\"lookupvalue\"\n          optionValue=\"lookupkey\"\n          formControlName=\"datetimeformat\">\n        </p-dropdown>\n        <div\n          *ngIf=\"\n            tabErrorShow\n              ? configRegistrationForm.controls['datetimeformat'].invalid\n              : configRegistrationForm.controls['datetimeformat'].errors &&\n                configRegistrationForm.controls['datetimeformat'].touched\n          \">\n          <div class=\"p-error block mt-1\">Date & Time Format is required </div>\n        </div>\n      </div>\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"timezone\"\n          >Time Zone\n          <span class=\"requiredfield text-danger\">*</span>\n        </label>\n        <p-dropdown\n          styleClass=\"w-100\"\n          [options]=\"timezoneList\"\n          placeholder=\"Select Time Zone\"\n          id=\"timezone\"\n          optionLabel=\"lookupvalue\"\n          optionValue=\"lookupvalue\"\n          formControlName=\"timezone\">\n        </p-dropdown>\n        <div\n          *ngIf=\"\n            tabErrorShow\n              ? configRegistrationForm.controls['timezone'].invalid\n              : configRegistrationForm.controls['timezone'].errors &&\n                configRegistrationForm.controls['timezone'].touched\n          \">\n          <div class=\"p-error block mt-1\">Timezone is required </div>\n        </div>\n      </div>\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"isIdleMonitorEnabled\">Idle Monitor</label>\n        <div class=\"d-flex align-items-center mt-2\">\n          <p-inputSwitch\n            inputId=\"isIdleMonitorEnabled\"\n            formControlName=\"isIdleMonitorEnabled\">\n          </p-inputSwitch>\n          <label class=\"mb-0 ml-2\" for=\"isIdleMonitorEnabled\">\n            {{ configRegistrationForm.get('isIdleMonitorEnabled')?.value ? 'On' : 'Off' }}\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"p-fluid p-formgrid row\" *ngIf=\"configRegistrationForm.get('isIdleMonitorEnabled')?.value\">\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"idleTimeout\"\n          >Idle Timeout (minutes)\n          <span class=\"requiredfield text-danger\">*</span>\n        </label>\n        <p-inputNumber\n          inputId=\"idleTimeout\"\n          styleClass=\"w-100\"\n          [min]=\"1\"\n          [max]=\"maxIdleTimeout\"\n          [maxFractionDigits]=\"0\"\n          [useGrouping]=\"false\"\n          [showButtons]=\"false\"\n          formControlName=\"idleTimeout\"\n          placeholder=\"Minutes\">\n        </p-inputNumber>\n        <div\n          *ngIf=\"\n            tabErrorShow\n              ? configRegistrationForm.controls['idleTimeout'].invalid\n              : configRegistrationForm.controls['idleTimeout'].errors &&\n                configRegistrationForm.controls['idleTimeout'].touched\n          \">\n          <div class=\"p-error block mt-1\">Idle Timeout is required and must be between 1 and {{ maxIdleTimeout }} minutes </div>\n        </div>\n      </div>\n      <div class=\"p-field col-lg-4 col-sm-4 col-md-12 col-12\">\n        <label class=\"intake-form-labels\" for=\"idleWarning\"\n          >Idle Warning (seconds)\n          <span class=\"requiredfield text-danger\">*</span>\n        </label>\n        <p-inputNumber\n          inputId=\"idleWarning\"\n          styleClass=\"w-100\"\n          [min]=\"1\"\n          [max]=\"maxIdleWarning\"\n          [maxFractionDigits]=\"0\"\n          [useGrouping]=\"false\"\n          [showButtons]=\"false\"\n          formControlName=\"idleWarning\"\n          placeholder=\"Seconds\">\n        </p-inputNumber>\n        <div\n          *ngIf=\"\n            tabErrorShow\n              ? configRegistrationForm.controls['idleWarning'].invalid\n              : configRegistrationForm.controls['idleWarning'].errors &&\n                configRegistrationForm.controls['idleWarning'].touched\n          \">\n          <div class=\"p-error block mt-1\">Idle Warning is required and must be between 1 and {{ maxIdleWarning }} seconds </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"text-md-right mt-2\">\n    <button\n      type=\"button\"\n      class=\"btn bg-white text-primary btncancel\"\n      *ngIf=\"configRegistrationForm.invalid\"\n      (click)=\"getConfigById()\">\n      Cancel\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"saveConfig()\">\n      {{ updateButton ? 'Update' : 'Submit' }}\n    </button>\n  </div>\n</p-card>\n", styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-15);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-14);color:var(--text-dark)}.customizer p{font-size:var(--base-font-size);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_ALERT]
@@ -955,20 +955,20 @@ class SettingsShellComponent {
         this.activeItem = this.items.find(item => item.visible);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SettingsShellComponent, deps: [{ token: SETTINGS_PERMISSIONS }, { token: SETTINGS_ALERT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: SettingsShellComponent, isStandalone: false, selector: "pics-settings-shell", ngImport: i0, template: `<div class="rbac-tab" [attr.data-subcategory]="'Config Settings'">
-    <p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>
-  </div>
-  <router-outlet></router-outlet>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: SettingsShellComponent, isStandalone: false, selector: "pics-settings-shell", ngImport: i0, template: `<div class="rbac-tab" [attr.data-subcategory]="'Config Settings'">
+    <p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>
+  </div>
+  <router-outlet></router-outlet>
   <ng-container *ngComponentOutlet="alertComponent"></ng-container>`, isInline: true, dependencies: [{ kind: "directive", type: i7.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i3.TabMenu, selector: "p-tabMenu", inputs: ["model", "activeItem", "scrollable", "popup", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["activeItemChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SettingsShellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'pics-settings-shell',
-                    template: `<div class="rbac-tab" [attr.data-subcategory]="'Config Settings'">
-    <p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>
-  </div>
-  <router-outlet></router-outlet>
+                    template: `<div class="rbac-tab" [attr.data-subcategory]="'Config Settings'">
+    <p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>
+  </div>
+  <router-outlet></router-outlet>
   <ng-container *ngComponentOutlet="alertComponent"></ng-container>`,
                     standalone: false
                 }]
@@ -1728,11 +1728,11 @@ class AlertComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AlertComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AlertComponent, isStandalone: false, selector: "app-alert", ngImport: i0, template: "<div class=\"alert-container\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @for (alert of alerts; track alert) {\r\n    <div\r\n      class=\"alert-animate {{ cssClass(alert) }} alert-dismissable\"\r\n      [attr.role]=\"isAssertiveAlert(alert) ? 'alert' : 'status'\"\r\n    >\r\n      {{ alert.message }}\r\n      <button\r\n        type=\"button\"\r\n        class=\"close\"\r\n        aria-label=\"Close alert\"\r\n        (click)=\"removeAlert(alert)\"\r\n      >\r\n        <span aria-hidden=\"true\">&times;</span>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".alert-animate{position:fixed;top:10px;left:auto;right:10px;z-index:999999;min-width:400px;text-transform:capitalize;margin:0 auto;-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.alert-animate .close{padding:3px;border-radius:2px;color:#fff;opacity:1;text-align:center;line-height:17px;font-size:24px;background:transparent;border:none;cursor:pointer}.alert-animate .close:focus-visible{outline:2px solid #fff;outline-offset:2px}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}to{-webkit-transform:translateY(0);transform:translateY(0)}}.alert-animate.alert-success{background:#04844b;color:#fff;border-color:#04844b}.alert-danger{background:#b92b28;border-color:#b92b28;color:#fff}.alert-info{color:#fff;background:#0f3164;border-color:#0f3164}.alert-animate.alert-warning .close span{color:#000!important}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AlertComponent, isStandalone: false, selector: "app-alert", ngImport: i0, template: "<div class=\"alert-container\" aria-live=\"polite\" aria-atomic=\"true\">\n  @for (alert of alerts; track alert) {\n    <div\n      class=\"alert-animate {{ cssClass(alert) }} alert-dismissable\"\n      [attr.role]=\"isAssertiveAlert(alert) ? 'alert' : 'status'\"\n    >\n      {{ alert.message }}\n      <button\n        type=\"button\"\n        class=\"close\"\n        aria-label=\"Close alert\"\n        (click)=\"removeAlert(alert)\"\n      >\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [".alert-animate{position:fixed;top:10px;left:auto;right:10px;z-index:999999;min-width:400px;text-transform:capitalize;margin:0 auto;-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.alert-animate .close{padding:3px;border-radius:2px;color:#fff;opacity:1;text-align:center;line-height:17px;font-size:24px;background:transparent;border:none;cursor:pointer}.alert-animate .close:focus-visible{outline:2px solid #fff;outline-offset:2px}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}to{-webkit-transform:translateY(0);transform:translateY(0)}}.alert-animate.alert-success{background:#04844b;color:#fff;border-color:#04844b}.alert-danger{background:#b92b28;border-color:#b92b28;color:#fff}.alert-info{color:#fff;background:#0f3164;border-color:#0f3164}.alert-animate.alert-warning .close span{color:#000!important}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-alert', standalone: false, template: "<div class=\"alert-container\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @for (alert of alerts; track alert) {\r\n    <div\r\n      class=\"alert-animate {{ cssClass(alert) }} alert-dismissable\"\r\n      [attr.role]=\"isAssertiveAlert(alert) ? 'alert' : 'status'\"\r\n    >\r\n      {{ alert.message }}\r\n      <button\r\n        type=\"button\"\r\n        class=\"close\"\r\n        aria-label=\"Close alert\"\r\n        (click)=\"removeAlert(alert)\"\r\n      >\r\n        <span aria-hidden=\"true\">&times;</span>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".alert-animate{position:fixed;top:10px;left:auto;right:10px;z-index:999999;min-width:400px;text-transform:capitalize;margin:0 auto;-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.alert-animate .close{padding:3px;border-radius:2px;color:#fff;opacity:1;text-align:center;line-height:17px;font-size:24px;background:transparent;border:none;cursor:pointer}.alert-animate .close:focus-visible{outline:2px solid #fff;outline-offset:2px}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}to{-webkit-transform:translateY(0);transform:translateY(0)}}.alert-animate.alert-success{background:#04844b;color:#fff;border-color:#04844b}.alert-danger{background:#b92b28;border-color:#b92b28;color:#fff}.alert-info{color:#fff;background:#0f3164;border-color:#0f3164}.alert-animate.alert-warning .close span{color:#000!important}\n"] }]
+            args: [{ selector: 'app-alert', standalone: false, template: "<div class=\"alert-container\" aria-live=\"polite\" aria-atomic=\"true\">\n  @for (alert of alerts; track alert) {\n    <div\n      class=\"alert-animate {{ cssClass(alert) }} alert-dismissable\"\n      [attr.role]=\"isAssertiveAlert(alert) ? 'alert' : 'status'\"\n    >\n      {{ alert.message }}\n      <button\n        type=\"button\"\n        class=\"close\"\n        aria-label=\"Close alert\"\n        (click)=\"removeAlert(alert)\"\n      >\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [".alert-animate{position:fixed;top:10px;left:auto;right:10px;z-index:999999;min-width:400px;text-transform:capitalize;margin:0 auto;-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.alert-animate .close{padding:3px;border-radius:2px;color:#fff;opacity:1;text-align:center;line-height:17px;font-size:24px;background:transparent;border:none;cursor:pointer}.alert-animate .close:focus-visible{outline:2px solid #fff;outline-offset:2px}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}to{-webkit-transform:translateY(0);transform:translateY(0)}}.alert-animate.alert-success{background:#04844b;color:#fff;border-color:#04844b}.alert-danger{background:#b92b28;border-color:#b92b28;color:#fff}.alert-info{color:#fff;background:#0f3164;border-color:#0f3164}.alert-animate.alert-warning .close span{color:#000!important}\n"] }]
         }], ctorParameters: () => [{ type: AlertService }] });
 
 class ConfigLoginPreviewComponent {
@@ -1790,11 +1790,11 @@ class ConfigLoginPreviewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfigLoginPreviewComponent, deps: [{ token: DataStoreService }, { token: i0.ChangeDetectorRef }, { token: PICS_CORE_SESSION_STORAGE }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ConfigLoginPreviewComponent, isStandalone: false, selector: "lib-config-login-preview", inputs: { previewData: "previewData", i18n: "i18n" }, usesOnChanges: true, ngImport: i0, template: "<app-alert></app-alert>\r\n\r\n<!-- login-form-right -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateRight' : false) {\r\n  <div class=\"row login login-right\" id=\"back\">\r\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-2 mx-auto rightLoginSet\">\r\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"email\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <!-- <label>Captcha:</label> -->\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                    <!-- @if (captchaError) { <div class=\"text-danger mt-1\">Invalid Captcha</div> } -->\r\n\r\n                                                                </div>\r\n\r\n\r\n\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n\r\n                          <!-- <div class=\"form-group clearfix mb-30 clsMin-23 pt-10\">\r\n\r\n                          </div> -->\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ LOGININFO?.['LOGIN_BUTTON_LABEL'] || translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          [label]=\"LOGININFO?.['LOGIN_BUTTON_LABEL'] || translate('Login')\" class=\"loginbutton w-100\"\r\n                                          tabindex=\"0\">\r\n                                      </p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\" style=\"top: 85%;\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\">{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</p>\r\n                              <!-- <p class=\"f-right\"><span>{{ LOGININFO['POWERED_BY']}}</span> @ <span>{{ LOGININFO['YEAR'] | date: 'yyyy'\r\n                                      }}</span></p> -->\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                              </p>\r\n\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span>{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\r\n                                      <span> &copy; {{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop version-footer-logo\"\r\n                                          alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-right -->\r\n\r\n<!-- login-form-left -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateLeft' : false) {\r\n  <div class=\"row login login-left\" id=\"back\">\r\n      <div class=\"d-flex col-lg-5 shadow align-items-center p2 mx-auto rightLoginSet\">\r\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar mb-2\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                                                    @if (LOGININFO['REGISTER_PREFIX_LABEL']) {\r\n                                                          <span class=\"signup-label\">\r\n                                                                                          {{ LOGININFO['REGISTER_PREFIX_LABEL'] }}\r\n                                                                                      </span>\r\n                                                        }\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\" style=\"top: 85%;\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\">{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</p>\r\n                              <!-- <p class=\"f-right\"><span>{{ LOGININFO['POWERED_BY']}}</span> @ <span>{{ LOGININFO['YEAR'] | date: 'yyyy'\r\n                                      }}</span></p> -->\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span>{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\r\n                                      <span> &copy; {{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-left -->\r\n\r\n<!-- login-form-center -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateCenter' : false) {\r\n  <div class=\" login_3 login-center\" id=\"back\">\r\n      <div class=\"d-lg-flex flex-column p-lg-0 banner-sec\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"align-items-center p-4 rightLoginSet\">\r\n          <div class=\"current-design mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <!-- <label>Captcha:</label> -->\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary registrationtext\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span> {{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\r\n                                      <span>&copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-center -->\r\n\r\n<!-- login-form-bottom -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateBottom' : false) {\r\n  <div class=\"row login form-bottom\" id=\"back\">\r\n      <div class=\"d-none d-lg-flex flex-column col-lg-12 align-i p-0 banner-sec justify-content-center container-image\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-4 mx-auto rightLoginSet\">\r\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\" style=\"top: 85%;\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\r\n                                      <span> &copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-bottom -->\r\n\r\n<!-- login-form-curve -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateCurve' : false) {\r\n  <div class=\"row login login-curve\" id=\"back\">\r\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-4 mx-auto rightLoginSet\">\r\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary registrationtext\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\r\n                                      <span>&copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-curve -->\r\n\r\n<!-- login-form-left -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateHideShow' : false) {\r\n  <div class=\"row login_3 login_hide\" id=\"back\">\r\n      <div class=\"d-lg-flex flex-column p-lg-0 banner-sec\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"overlay\"></div>\r\n      <div class=\"align-items-center p-4 rightLoginSet\">\r\n          <div class=\"current-design mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                                  <span class=\"newLoginBtn clearfix\">\r\n                                      <i class=\"fa fa-arrow-right\"></i>\r\n                                  </span>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" #showhideinput type=\"password\" placeholder=\"{{ translate('Password') }}\"\r\n                                      name=\"password\" id=\"password\" tabindex=\"0\" required></input-empower>\r\n                                  <span class=\"newLoginBtn clearfix\">\r\n                                      <button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\" tabindex=\"0\">\r\n                                          <i class=\"fa fa-sign-out\"></i></button>\r\n                                  </span>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                              <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                                  <div class=\"row ml-0 mr-0\">\r\n                                      <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                                  @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                            <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                        styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                        class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                                  </p-button>\r\n                                          }\r\n                                      </div>\r\n                                  </div>\r\n\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                                <div class=\"mar-btm-20 picslogin\">\r\n                                                                <span>{{ translate('Or') }}</span>\r\n                                                            </div>\r\n                              }\r\n                                                          @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                                <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                                <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                                    styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                    class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                            </div>\r\n                              }\r\n                                                          @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                                <div class=\"clearfix text-center mt-10\">\r\n                                                                <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\r\n                                                                    LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                            </div>\r\n                              }\r\n                          </div>\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\r\n                                      <span> &copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-left -->", styles: ["body{height:100%;overflow:hidden;width:100%!important;box-sizing:border-box;position:relative}.logo-img{width:200px;margin:5px auto}.logo-img img{width:100%;height:100%}.login .banner-sec{background:#3e397e;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:0;height:100%;position:relative}.login .logo-img{width:200px;margin:5px auto}.login .logo-img img{width:100%;height:100%}.login .goto-register{border-bottom:1px solid #146A5D}.login#back{margin:auto;width:100%;position:relative;overflow:hidden;height:100vh}.login .h2,.login h2{font-size:20px;color:var(--text-dark);font-family:Roboto,sans-serif!important;font-weight:700;padding-top:8px}.login .login-content h2,.login .login-content h4{font-weight:700;color:#333!important;font-size:26px;margin:10px 0 30px}.login .login-content .btn-login{background-color:var(--btn);padding:10px;border:0}.login .mar-btm-40{margin-bottom:40px}.login .mar-btm-20{margin-bottom:20px}.login .form-group{position:relative;padding:0 18px}.login .form-group .fa-eye{position:absolute;right:25px;top:13px;color:var(--primary);font-size:15px;cursor:pointer}.login .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login .form-group ::ng-deep input{padding:0 10px;color:var(--text-dark)!important;background:var(--bg-light)!important;border:1px solid var(--table-border)!important;border-radius:5px}.login .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login .form-group .password{padding-right:40px}.login .form-control,.login ::ng-deep input:focus,.login ::ng-deep input:hover{border:1px solid var(--table-border)!important;box-shadow:none}.login .login-content ::ng-deep input.form-control{padding:8px 12px 8px 0;background:transparent}.login .topWarmingContent{width:100%;padding-top:10px}.login .warmingIMg{width:75px;display:block}.login .warningContentP{width:100%;padding-top:10px;padding-right:20px}.login .warningContentP p{font-size:14px;padding:10px 0 0;color:var(--text-dark);line-height:1.6;margin:0}.login .loginBottomSet{padding-top:0}.login .login-content{width:100%;margin:0 auto}.login .btn-link{font-size:var(--font-13);font-weight:500;color:var(--text-dark);text-decoration:none;margin-top:3px;padding:0}.login .LogIn{margin-top:5px}.login .login-content h4{margin-bottom:10px}.login ::ng-deep .Inputs{outline:none;padding:5px 10px;background-color:var(--bg-light);width:100%;height:36px;margin-bottom:8px;box-shadow:none;border:none}.login .btn-secondary{background-color:var(--btncancel);border:1px solid var(--primary);color:var(--primary);padding:8px 25px}.login .logo-group .logo-title{color:var(--text-dark);font-size:15px}.login .logo-group .logo-subtitle{color:var(--text-dark);font-size:13px;font-weight:400;letter-spacing:1.7px}.login .cfaLogoTop{display:block}.login .cfaLogoLeft{width:100%}.login .checkbox{float:left}.login .checkbox label{color:var(--text-dark);cursor:pointer}.login .clsPowered{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;text-align:center}.login label{font-size:var(--font-15);font-weight:500!important}.login .clsMin-23{min-height:23px}.login .clsTopLogo{position:absolute;top:30px;left:0;right:0;margin:0 auto;text-align:center}.login .clsTopLogo h2{font-weight:700;color:#333!important;font-size:26px;margin:20px 0}.login .hero-gallery-inner{display:flex;flex-wrap:wrap}.login .fa-eye:before{content:\"\\f06e\";color:var(--primary);position:absolute;margin-top:27px;margin-left:-24px}.login .forget{font-size:var(--font-13);color:var(--text-dark);text-decoration:none}.login .checklabel{padding-left:10px;font-size:var(--font-13);margin-bottom:0}.login .Cardinality_logo{margin-top:-5px}.login h4#modal-basic-title{font-size:15px}.login .rightLoginSet{background:var(--bg-light)}.login .rightLoginSet .intake-form-labels{color:var(--text-dark)}.login_3{width:100%;position:relative;overflow:hidden;height:100vh;font-size:20px}.login_3.login_hide .form-group{position:relative;padding:0 18px}.login_3.login_hide .form-group .fa-eye{position:absolute;right:58px;top:22px;color:var(--primary);font-size:15px;cursor:pointer}.login_3.login_hide .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login_3.login_hide .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login_3.login_hide .form-group ::ng-deep input{padding:3px 10px;border-radius:999px!important;box-shadow:0 4px 25px #00000040;border:1px solid #EFEFEF!important;background:linear-gradient(120.37deg,#efefef0c,#ffffff02)!important;font-weight:400;background-color:#fff!important;height:40px!important}.login_3.login_hide .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login_3.login_hide .form-group .password{padding-right:40px}.login_3.login_hide .rightLoginSet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent!important;border:none!important;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:25px;width:38%;z-index:2}.login_3 .banner-sec{background:#3e397e;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:0;height:100%;flex:0 0 100%!important;max-width:100%!important;position:relative}.login_3 .goto-register{border-bottom:1px solid #146A5D;color:var(--white)!important}.login_3 .h2,.login_3 h2{font-size:20px;color:var(--text-dark);font-family:Roboto,sans-serif!important;font-weight:700;padding-top:8px}.login_3 .login-content h2,.login_3 .login-content h4{font-weight:700;color:#333!important;font-size:26px;margin:10px 0 30px}.login_3 .login-content .btn-login{background-color:var(--btn);padding:10px;border:0}.login_3 .mar-btm-40{margin-bottom:40px}.login_3 .mar-btm-20{margin-bottom:20px}.login_3 .form-group{position:relative;padding:0 18px}.login_3 .form-group .fa-eye{position:absolute;right:25px;top:13px;color:var(--primary);font-size:15px;cursor:pointer}.login_3 .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login_3 .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login_3 .form-group ::ng-deep input{padding:3px 10px;border-radius:8px;box-shadow:0 4px 25px #00000040;border:1px solid #EFEFEF!important;background:linear-gradient(120.37deg,#efefef0c,#ffffff02)!important;font-weight:400;background-color:#fff!important}.login_3 .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login_3 .form-group .password{padding-right:40px}.login_3 .form-control,.login_3 ::ng-deep input:focus,.login_3 ::ng-deep input:hover{border:1px solid var(--table-border)!important;box-shadow:none}.login_3 .login-content ::ng-deep input.form-control{padding:8px 12px 8px 0;background:transparent}.login_3 .topWarmingContent{width:100%;padding-top:10px}.login_3 .warmingIMg{width:75px;display:block}.login_3 .warningContentP{width:100%;padding-top:10px;padding-right:20px}.login_3 .warningContentP p{font-size:14px;padding:10px 0 0;color:var(--text-dark);line-height:1.6;margin:0}.login_3 .loginBottomSet{padding-top:0}.login_3 .login-content{width:100%;margin:0 auto}.login_3 .btn-link{font-size:var(--font-13);font-weight:500;color:var(--text-dark);text-decoration:none;margin-top:3px;padding:0}.login_3 .LogIn{margin-top:5px}.login_3 .login-content h4{margin-bottom:10px}.login_3 ::ng-deep .Inputs{outline:none;padding:5px 10px;background-color:var(--bg-light);width:100%;height:36px;margin-bottom:8px;box-shadow:none;border:none}.login_3 .btn-secondary{background-color:var(--btncancel);border:1px solid var(--primary);color:var(--primary);padding:8px 25px}.login_3 .logo-group .logo-title{color:var(--text-dark);font-size:15px}.login_3 .logo-group .logo-subtitle{color:var(--text-dark);font-size:13px;font-weight:400;letter-spacing:1.7px}.login_3 .cfaLogoTop{display:block}.login_3 .cfaLogoLeft{width:100%}.login_3 .checkbox{float:left}.login_3 .checkbox label{color:var(--white);cursor:pointer}.login_3 .checkbox label a{color:var(--white)!important;font-weight:700}.login_3 .clsPowered{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;text-align:center}.login_3 label{font-size:var(--font-15);font-weight:500!important}.login_3 .clsMin-23{min-height:23px}.login_3 .clsTopLogo{position:absolute;top:30px;left:0;right:0;margin:0 auto;text-align:center}.login_3 .clsTopLogo h2{font-weight:700;color:#333!important;font-size:26px;margin:20px 0}.login_3 .hero-gallery-inner{display:flex;flex-wrap:wrap}.login_3 .fa-eye:before{content:\"\\f06e\";color:var(--primary);position:absolute;margin-top:27px;margin-left:-24px}.login_3 .forget{font-size:var(--font-13);color:var(--white);text-decoration:none}.login_3 .checklabel{padding-left:10px;font-size:var(--font-13);margin-bottom:0}.login_3 .Cardinality_logo{margin-top:-5px}.login_3 h4#modal-basic-title{font-size:15px}.login_3 .rightLoginSet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(120.37deg,#efefef4d,#ffffff0d);border:1px solid #EFEFEF;-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px);border-radius:25px;width:38%}.login_3 .rightLoginSet .current-design{width:100%}.login_3 .rightLoginSet .current-design .logo-img{width:200px!important}.login_3 .rightLoginSet .current-design .clsLoginTitle{font-weight:700;color:var(--white);font-size:20px}.login_3 .rightLoginSet .current-design .loginBottomSet .p-button,.login_3 .rightLoginSet .current-design .p-button{color:var(--primary)!important;background-color:var(--white)!important}.login_3 .rightLoginSet .intake-form-labels{color:var(--white)}.login_3 .powered{position:absolute;bottom:0;left:0;right:0}.login_3 .powered p,.login_3 .powered span{color:var(--white)}.login.form-bottom{position:relative}.login.form-bottom .rightLoginSet{position:absolute;z-index:999;right:78px;bottom:10px;border-radius:25px 25px 0 0}.login-curve{background-color:#fff!important}.login-curve .banner-sec{border-radius:0 100px 100px 0!important}.login-curve .shadow{box-shadow:none!important}.powered{position:absolute;bottom:0;left:0;right:0}.powered p,.powered span{color:var(--text-dark)}@media screen and (min-width: 991px) and (max-width: 1024px){.login .rightLoginSet{padding:0!important}}@media screen and (max-width: 1281px){.carousel-item{max-width:65%!important}}.picslogin{border-bottom:solid 1px #ccc;margin-top:25px}.picslogin span{position:absolute;text-align:center;margin-top:-13px;left:43%;background:#fff;padding:0 10px;font-size:14px}.modal-header{display:block!important;position:relative}.modal-header .close{outline:none;position:absolute;right:7px;top:7px}.versionSection{position:absolute;bottom:0;padding:10px;width:100%;z-index:9999;left:0;background:#afd9fb}.versionSection p{font-size:13px;font-weight:500;margin-bottom:0}.captcha .captcha-box{display:flex;align-items:center;gap:10px;margin-bottom:10px}.captcha .captcha-box .refresh{background:#006098;padding:7px;border:none;color:#fff;border-radius:7px}.captcha .captcha-text{font-weight:700;font-size:20px;letter-spacing:3px;background-color:#f0f0f0;padding:5px 10px;border:1px dashed #ccc;-webkit-user-select:none;user-select:none}.newLoginBtn{position:absolute;background-color:var(--primary);border-radius:50%;width:30px;height:30px;text-align:center;top:41px;right:29px;cursor:pointer;border:none;color:#fff}.newLoginBtn i{font-size:18px}.newLoginBtn button{background:transparent;border:none;box-shadow:none;color:#fff}.newLoginBtn button i{font-size:18px}.overlay{position:absolute;inset:0;background-color:#0009;z-index:1}.login-right .banner-sec{position:relative}.login-right .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:10px;left:17%;max-width:700px}.login-left .banner-sec{position:relative}.login-left .banner-sec .clsBannerTitle{z-index:999;font-weight:600;font-size:20px;position:absolute;top:0%;left:17%;max-width:700px;text-align:center}.login-center .banner-sec{position:relative}.login-center .banner-sec .clsBannerTitle{z-index:999999;position:absolute;top:0;left:2%;font-size:25px;font-weight:700;color:#101010;max-width:500px}.form-bottom .banner-sec{position:relative}.form-bottom .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:0%;left:6%;max-width:700px;text-align:center}.login-curve .banner-sec{position:relative}.login-curve .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:5%;left:3%;max-width:700px;text-align:center}.login-curve .powered{position:absolute;bottom:25px;left:0;right:0}.login_hide .banner-sec{position:relative}.login_hide .banner-sec .clsBannerTitle{position:absolute;z-index:9999;font-size:20px;font-weight:700;color:#fff;left:3%;top:0%;max-width:700px;text-align:center}.versionfootervalue{color:#000;font-weight:700!important}.version-footer-center{display:flex;justify-content:center;gap:5px}.version-footer-center span{color:#000;font-weight:700!important}.contentWrapper .p-dialog{width:100vw!important;height:100vh!important}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AlertComponent, selector: "app-alert" }, { kind: "component", type: i15.InputEmpowerComponent, selector: "input-empower", inputs: ["id", "type", "placeholder", "aria-label", "aria-describedby", "aria-labelledby", "aria-invalid", "aria-required", "readonly", "class", "ngClass", "ngStyle", "style", "mask", "showMaskTyped", "hiddenInput", "autocomplete", "aria-hidden", "aria-valuetext", "min", "max", "step", "inputMode", "tabindex", "name", "value", "checked", "accept", "multiple", "maxLength", "minLength", "errorIcon", "disabled", "hasError"], outputs: ["click", "enterKey", "focus", "blur"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ConfigLoginPreviewComponent, isStandalone: false, selector: "lib-config-login-preview", inputs: { previewData: "previewData", i18n: "i18n" }, usesOnChanges: true, ngImport: i0, template: "<app-alert></app-alert>\n\n<!-- login-form-right -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateRight' : false) {\n  <div class=\"row login login-right\" id=\"back\">\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-2 mx-auto rightLoginSet\">\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"email\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <!-- <label>Captcha:</label> -->\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                    <!-- @if (captchaError) { <div class=\"text-danger mt-1\">Invalid Captcha</div> } -->\n\n                                                                </div>\n\n\n\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n\n                          <!-- <div class=\"form-group clearfix mb-30 clsMin-23 pt-10\">\n\n                          </div> -->\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ LOGININFO?.['LOGIN_BUTTON_LABEL'] || translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          [label]=\"LOGININFO?.['LOGIN_BUTTON_LABEL'] || translate('Login')\" class=\"loginbutton w-100\"\n                                          tabindex=\"0\">\n                                      </p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\" style=\"top: 85%;\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\">{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</p>\n                              <!-- <p class=\"f-right\"><span>{{ LOGININFO['POWERED_BY']}}</span> @ <span>{{ LOGININFO['YEAR'] | date: 'yyyy'\n                                      }}</span></p> -->\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                              </p>\n\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span>{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\n                                      <span> &copy; {{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop version-footer-logo\"\n                                          alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-right -->\n\n<!-- login-form-left -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateLeft' : false) {\n  <div class=\"row login login-left\" id=\"back\">\n      <div class=\"d-flex col-lg-5 shadow align-items-center p2 mx-auto rightLoginSet\">\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar mb-2\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                                                    @if (LOGININFO['REGISTER_PREFIX_LABEL']) {\n                                                          <span class=\"signup-label\">\n                                                                                          {{ LOGININFO['REGISTER_PREFIX_LABEL'] }}\n                                                                                      </span>\n                                                        }\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\" style=\"top: 85%;\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\">{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</p>\n                              <!-- <p class=\"f-right\"><span>{{ LOGININFO['POWERED_BY']}}</span> @ <span>{{ LOGININFO['YEAR'] | date: 'yyyy'\n                                      }}</span></p> -->\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span>{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\n                                      <span> &copy; {{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-left -->\n\n<!-- login-form-center -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateCenter' : false) {\n  <div class=\" login_3 login-center\" id=\"back\">\n      <div class=\"d-lg-flex flex-column p-lg-0 banner-sec\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"align-items-center p-4 rightLoginSet\">\n          <div class=\"current-design mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <!-- <label>Captcha:</label> -->\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary registrationtext\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span> {{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\n                                      <span>&copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-center -->\n\n<!-- login-form-bottom -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateBottom' : false) {\n  <div class=\"row login form-bottom\" id=\"back\">\n      <div class=\"d-none d-lg-flex flex-column col-lg-12 align-i p-0 banner-sec justify-content-center container-image\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-4 mx-auto rightLoginSet\">\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\" style=\"top: 85%;\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\n                                      <span> &copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-bottom -->\n\n<!-- login-form-curve -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateCurve' : false) {\n  <div class=\"row login login-curve\" id=\"back\">\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-4 mx-auto rightLoginSet\">\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary registrationtext\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\n                                      <span>&copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-curve -->\n\n<!-- login-form-left -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateHideShow' : false) {\n  <div class=\"row login_3 login_hide\" id=\"back\">\n      <div class=\"d-lg-flex flex-column p-lg-0 banner-sec\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"overlay\"></div>\n      <div class=\"align-items-center p-4 rightLoginSet\">\n          <div class=\"current-design mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}</label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                                  <span class=\"newLoginBtn clearfix\">\n                                      <i class=\"fa fa-arrow-right\"></i>\n                                  </span>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" #showhideinput type=\"password\" placeholder=\"{{ translate('Password') }}\"\n                                      name=\"password\" id=\"password\" tabindex=\"0\" required></input-empower>\n                                  <span class=\"newLoginBtn clearfix\">\n                                      <button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\" tabindex=\"0\">\n                                          <i class=\"fa fa-sign-out\"></i></button>\n                                  </span>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                              <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                                  <div class=\"row ml-0 mr-0\">\n                                      <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                                  @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                            <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                        styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                        class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                                  </p-button>\n                                          }\n                                      </div>\n                                  </div>\n\n                              </div>\n                                                          @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                                <div class=\"mar-btm-20 picslogin\">\n                                                                <span>{{ translate('Or') }}</span>\n                                                            </div>\n                              }\n                                                          @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                                <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                                <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                                    styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                    class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                            </div>\n                              }\n                                                          @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                                <div class=\"clearfix text-center mt-10\">\n                                                                <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\n                                                                    LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                            </div>\n                              }\n                          </div>\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\n                                      <span> &copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-left -->", styles: ["body{height:100%;overflow:hidden;width:100%!important;box-sizing:border-box;position:relative}.logo-img{width:200px;margin:5px auto}.logo-img img{width:100%;height:100%}.login .banner-sec{background:#3e397e;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:0;height:100%;position:relative}.login .logo-img{width:200px;margin:5px auto}.login .logo-img img{width:100%;height:100%}.login .goto-register{border-bottom:1px solid #146A5D}.login#back{margin:auto;width:100%;position:relative;overflow:hidden;height:100vh}.login .h2,.login h2{font-size:20px;color:var(--text-dark);font-family:Roboto,sans-serif!important;font-weight:700;padding-top:8px}.login .login-content h2,.login .login-content h4{font-weight:700;color:#333!important;font-size:26px;margin:10px 0 30px}.login .login-content .btn-login{background-color:var(--btn);padding:10px;border:0}.login .mar-btm-40{margin-bottom:40px}.login .mar-btm-20{margin-bottom:20px}.login .form-group{position:relative;padding:0 18px}.login .form-group .fa-eye{position:absolute;right:25px;top:13px;color:var(--primary);font-size:15px;cursor:pointer}.login .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login .form-group ::ng-deep input{padding:0 10px;color:var(--text-dark)!important;background:var(--bg-light)!important;border:1px solid var(--table-border)!important;border-radius:5px}.login .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login .form-group .password{padding-right:40px}.login .form-control,.login ::ng-deep input:focus,.login ::ng-deep input:hover{border:1px solid var(--table-border)!important;box-shadow:none}.login .login-content ::ng-deep input.form-control{padding:8px 12px 8px 0;background:transparent}.login .topWarmingContent{width:100%;padding-top:10px}.login .warmingIMg{width:75px;display:block}.login .warningContentP{width:100%;padding-top:10px;padding-right:20px}.login .warningContentP p{font-size:14px;padding:10px 0 0;color:var(--text-dark);line-height:1.6;margin:0}.login .loginBottomSet{padding-top:0}.login .login-content{width:100%;margin:0 auto}.login .btn-link{font-size:var(--font-13);font-weight:500;color:var(--text-dark);text-decoration:none;margin-top:3px;padding:0}.login .LogIn{margin-top:5px}.login .login-content h4{margin-bottom:10px}.login ::ng-deep .Inputs{outline:none;padding:5px 10px;background-color:var(--bg-light);width:100%;height:36px;margin-bottom:8px;box-shadow:none;border:none}.login .btn-secondary{background-color:var(--btncancel);border:1px solid var(--primary);color:var(--primary);padding:8px 25px}.login .logo-group .logo-title{color:var(--text-dark);font-size:15px}.login .logo-group .logo-subtitle{color:var(--text-dark);font-size:13px;font-weight:400;letter-spacing:1.7px}.login .cfaLogoTop{display:block}.login .cfaLogoLeft{width:100%}.login .checkbox{float:left}.login .checkbox label{color:var(--text-dark);cursor:pointer}.login .clsPowered{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;text-align:center}.login label{font-size:var(--font-15);font-weight:500!important}.login .clsMin-23{min-height:23px}.login .clsTopLogo{position:absolute;top:30px;left:0;right:0;margin:0 auto;text-align:center}.login .clsTopLogo h2{font-weight:700;color:#333!important;font-size:26px;margin:20px 0}.login .hero-gallery-inner{display:flex;flex-wrap:wrap}.login .fa-eye:before{content:\"\\f06e\";color:var(--primary);position:absolute;margin-top:27px;margin-left:-24px}.login .forget{font-size:var(--font-13);color:var(--text-dark);text-decoration:none}.login .checklabel{padding-left:10px;font-size:var(--font-13);margin-bottom:0}.login .Cardinality_logo{margin-top:-5px}.login h4#modal-basic-title{font-size:15px}.login .rightLoginSet{background:var(--bg-light)}.login .rightLoginSet .intake-form-labels{color:var(--text-dark)}.login_3{width:100%;position:relative;overflow:hidden;height:100vh;font-size:20px}.login_3.login_hide .form-group{position:relative;padding:0 18px}.login_3.login_hide .form-group .fa-eye{position:absolute;right:58px;top:22px;color:var(--primary);font-size:15px;cursor:pointer}.login_3.login_hide .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login_3.login_hide .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login_3.login_hide .form-group ::ng-deep input{padding:3px 10px;border-radius:999px!important;box-shadow:0 4px 25px #00000040;border:1px solid #EFEFEF!important;background:linear-gradient(120.37deg,#efefef0c,#ffffff02)!important;font-weight:400;background-color:#fff!important;height:40px!important}.login_3.login_hide .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login_3.login_hide .form-group .password{padding-right:40px}.login_3.login_hide .rightLoginSet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent!important;border:none!important;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:25px;width:38%;z-index:2}.login_3 .banner-sec{background:#3e397e;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:0;height:100%;flex:0 0 100%!important;max-width:100%!important;position:relative}.login_3 .goto-register{border-bottom:1px solid #146A5D;color:var(--white)!important}.login_3 .h2,.login_3 h2{font-size:20px;color:var(--text-dark);font-family:Roboto,sans-serif!important;font-weight:700;padding-top:8px}.login_3 .login-content h2,.login_3 .login-content h4{font-weight:700;color:#333!important;font-size:26px;margin:10px 0 30px}.login_3 .login-content .btn-login{background-color:var(--btn);padding:10px;border:0}.login_3 .mar-btm-40{margin-bottom:40px}.login_3 .mar-btm-20{margin-bottom:20px}.login_3 .form-group{position:relative;padding:0 18px}.login_3 .form-group .fa-eye{position:absolute;right:25px;top:13px;color:var(--primary);font-size:15px;cursor:pointer}.login_3 .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login_3 .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login_3 .form-group ::ng-deep input{padding:3px 10px;border-radius:8px;box-shadow:0 4px 25px #00000040;border:1px solid #EFEFEF!important;background:linear-gradient(120.37deg,#efefef0c,#ffffff02)!important;font-weight:400;background-color:#fff!important}.login_3 .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login_3 .form-group .password{padding-right:40px}.login_3 .form-control,.login_3 ::ng-deep input:focus,.login_3 ::ng-deep input:hover{border:1px solid var(--table-border)!important;box-shadow:none}.login_3 .login-content ::ng-deep input.form-control{padding:8px 12px 8px 0;background:transparent}.login_3 .topWarmingContent{width:100%;padding-top:10px}.login_3 .warmingIMg{width:75px;display:block}.login_3 .warningContentP{width:100%;padding-top:10px;padding-right:20px}.login_3 .warningContentP p{font-size:14px;padding:10px 0 0;color:var(--text-dark);line-height:1.6;margin:0}.login_3 .loginBottomSet{padding-top:0}.login_3 .login-content{width:100%;margin:0 auto}.login_3 .btn-link{font-size:var(--font-13);font-weight:500;color:var(--text-dark);text-decoration:none;margin-top:3px;padding:0}.login_3 .LogIn{margin-top:5px}.login_3 .login-content h4{margin-bottom:10px}.login_3 ::ng-deep .Inputs{outline:none;padding:5px 10px;background-color:var(--bg-light);width:100%;height:36px;margin-bottom:8px;box-shadow:none;border:none}.login_3 .btn-secondary{background-color:var(--btncancel);border:1px solid var(--primary);color:var(--primary);padding:8px 25px}.login_3 .logo-group .logo-title{color:var(--text-dark);font-size:15px}.login_3 .logo-group .logo-subtitle{color:var(--text-dark);font-size:13px;font-weight:400;letter-spacing:1.7px}.login_3 .cfaLogoTop{display:block}.login_3 .cfaLogoLeft{width:100%}.login_3 .checkbox{float:left}.login_3 .checkbox label{color:var(--white);cursor:pointer}.login_3 .checkbox label a{color:var(--white)!important;font-weight:700}.login_3 .clsPowered{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;text-align:center}.login_3 label{font-size:var(--font-15);font-weight:500!important}.login_3 .clsMin-23{min-height:23px}.login_3 .clsTopLogo{position:absolute;top:30px;left:0;right:0;margin:0 auto;text-align:center}.login_3 .clsTopLogo h2{font-weight:700;color:#333!important;font-size:26px;margin:20px 0}.login_3 .hero-gallery-inner{display:flex;flex-wrap:wrap}.login_3 .fa-eye:before{content:\"\\f06e\";color:var(--primary);position:absolute;margin-top:27px;margin-left:-24px}.login_3 .forget{font-size:var(--font-13);color:var(--white);text-decoration:none}.login_3 .checklabel{padding-left:10px;font-size:var(--font-13);margin-bottom:0}.login_3 .Cardinality_logo{margin-top:-5px}.login_3 h4#modal-basic-title{font-size:15px}.login_3 .rightLoginSet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(120.37deg,#efefef4d,#ffffff0d);border:1px solid #EFEFEF;-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px);border-radius:25px;width:38%}.login_3 .rightLoginSet .current-design{width:100%}.login_3 .rightLoginSet .current-design .logo-img{width:200px!important}.login_3 .rightLoginSet .current-design .clsLoginTitle{font-weight:700;color:var(--white);font-size:20px}.login_3 .rightLoginSet .current-design .loginBottomSet .p-button,.login_3 .rightLoginSet .current-design .p-button{color:var(--primary)!important;background-color:var(--white)!important}.login_3 .rightLoginSet .intake-form-labels{color:var(--white)}.login_3 .powered{position:absolute;bottom:0;left:0;right:0}.login_3 .powered p,.login_3 .powered span{color:var(--white)}.login.form-bottom{position:relative}.login.form-bottom .rightLoginSet{position:absolute;z-index:999;right:78px;bottom:10px;border-radius:25px 25px 0 0}.login-curve{background-color:#fff!important}.login-curve .banner-sec{border-radius:0 100px 100px 0!important}.login-curve .shadow{box-shadow:none!important}.powered{position:absolute;bottom:0;left:0;right:0}.powered p,.powered span{color:var(--text-dark)}@media screen and (min-width: 991px) and (max-width: 1024px){.login .rightLoginSet{padding:0!important}}@media screen and (max-width: 1281px){.carousel-item{max-width:65%!important}}.picslogin{border-bottom:solid 1px #ccc;margin-top:25px}.picslogin span{position:absolute;text-align:center;margin-top:-13px;left:43%;background:#fff;padding:0 10px;font-size:14px}.modal-header{display:block!important;position:relative}.modal-header .close{outline:none;position:absolute;right:7px;top:7px}.versionSection{position:absolute;bottom:0;padding:10px;width:100%;z-index:9999;left:0;background:#afd9fb}.versionSection p{font-size:13px;font-weight:500;margin-bottom:0}.captcha .captcha-box{display:flex;align-items:center;gap:10px;margin-bottom:10px}.captcha .captcha-box .refresh{background:#006098;padding:7px;border:none;color:#fff;border-radius:7px}.captcha .captcha-text{font-weight:700;font-size:20px;letter-spacing:3px;background-color:#f0f0f0;padding:5px 10px;border:1px dashed #ccc;-webkit-user-select:none;user-select:none}.newLoginBtn{position:absolute;background-color:var(--primary);border-radius:50%;width:30px;height:30px;text-align:center;top:41px;right:29px;cursor:pointer;border:none;color:#fff}.newLoginBtn i{font-size:18px}.newLoginBtn button{background:transparent;border:none;box-shadow:none;color:#fff}.newLoginBtn button i{font-size:18px}.overlay{position:absolute;inset:0;background-color:#0009;z-index:1}.login-right .banner-sec{position:relative}.login-right .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:10px;left:17%;max-width:700px}.login-left .banner-sec{position:relative}.login-left .banner-sec .clsBannerTitle{z-index:999;font-weight:600;font-size:20px;position:absolute;top:0%;left:17%;max-width:700px;text-align:center}.login-center .banner-sec{position:relative}.login-center .banner-sec .clsBannerTitle{z-index:999999;position:absolute;top:0;left:2%;font-size:25px;font-weight:700;color:#101010;max-width:500px}.form-bottom .banner-sec{position:relative}.form-bottom .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:0%;left:6%;max-width:700px;text-align:center}.login-curve .banner-sec{position:relative}.login-curve .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:5%;left:3%;max-width:700px;text-align:center}.login-curve .powered{position:absolute;bottom:25px;left:0;right:0}.login_hide .banner-sec{position:relative}.login_hide .banner-sec .clsBannerTitle{position:absolute;z-index:9999;font-size:20px;font-weight:700;color:#fff;left:3%;top:0%;max-width:700px;text-align:center}.versionfootervalue{color:#000;font-weight:700!important}.version-footer-center{display:flex;justify-content:center;gap:5px}.version-footer-center span{color:#000;font-weight:700!important}.contentWrapper .p-dialog{width:100vw!important;height:100vh!important}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AlertComponent, selector: "app-alert" }, { kind: "component", type: i15.InputEmpowerComponent, selector: "input-empower", inputs: ["id", "type", "placeholder", "aria-label", "aria-describedby", "aria-labelledby", "aria-invalid", "aria-required", "readonly", "class", "ngClass", "ngStyle", "style", "mask", "showMaskTyped", "hiddenInput", "autocomplete", "aria-hidden", "aria-valuetext", "min", "max", "step", "inputMode", "tabindex", "name", "value", "checked", "accept", "multiple", "maxLength", "minLength", "errorIcon", "disabled", "hasError"], outputs: ["click", "enterKey", "focus", "blur"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfigLoginPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-login-preview', standalone: false, template: "<app-alert></app-alert>\r\n\r\n<!-- login-form-right -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateRight' : false) {\r\n  <div class=\"row login login-right\" id=\"back\">\r\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-2 mx-auto rightLoginSet\">\r\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"email\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <!-- <label>Captcha:</label> -->\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                    <!-- @if (captchaError) { <div class=\"text-danger mt-1\">Invalid Captcha</div> } -->\r\n\r\n                                                                </div>\r\n\r\n\r\n\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n\r\n                          <!-- <div class=\"form-group clearfix mb-30 clsMin-23 pt-10\">\r\n\r\n                          </div> -->\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ LOGININFO?.['LOGIN_BUTTON_LABEL'] || translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          [label]=\"LOGININFO?.['LOGIN_BUTTON_LABEL'] || translate('Login')\" class=\"loginbutton w-100\"\r\n                                          tabindex=\"0\">\r\n                                      </p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\" style=\"top: 85%;\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\">{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</p>\r\n                              <!-- <p class=\"f-right\"><span>{{ LOGININFO['POWERED_BY']}}</span> @ <span>{{ LOGININFO['YEAR'] | date: 'yyyy'\r\n                                      }}</span></p> -->\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                              </p>\r\n\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span>{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\r\n                                      <span> &copy; {{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop version-footer-logo\"\r\n                                          alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-right -->\r\n\r\n<!-- login-form-left -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateLeft' : false) {\r\n  <div class=\"row login login-left\" id=\"back\">\r\n      <div class=\"d-flex col-lg-5 shadow align-items-center p2 mx-auto rightLoginSet\">\r\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar mb-2\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                                                    @if (LOGININFO['REGISTER_PREFIX_LABEL']) {\r\n                                                          <span class=\"signup-label\">\r\n                                                                                          {{ LOGININFO['REGISTER_PREFIX_LABEL'] }}\r\n                                                                                      </span>\r\n                                                        }\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\" style=\"top: 85%;\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\">{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</p>\r\n                              <!-- <p class=\"f-right\"><span>{{ LOGININFO['POWERED_BY']}}</span> @ <span>{{ LOGININFO['YEAR'] | date: 'yyyy'\r\n                                      }}</span></p> -->\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span>{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\r\n                                      <span> &copy; {{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-left -->\r\n\r\n<!-- login-form-center -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateCenter' : false) {\r\n  <div class=\" login_3 login-center\" id=\"back\">\r\n      <div class=\"d-lg-flex flex-column p-lg-0 banner-sec\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"align-items-center p-4 rightLoginSet\">\r\n          <div class=\"current-design mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <!-- <label>Captcha:</label> -->\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary registrationtext\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span> {{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\r\n                                      <span>&copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-center -->\r\n\r\n<!-- login-form-bottom -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateBottom' : false) {\r\n  <div class=\"row login form-bottom\" id=\"back\">\r\n      <div class=\"d-none d-lg-flex flex-column col-lg-12 align-i p-0 banner-sec justify-content-center container-image\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-4 mx-auto rightLoginSet\">\r\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\" style=\"top: 85%;\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\r\n                                      <span> &copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-bottom -->\r\n\r\n<!-- login-form-curve -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateCurve' : false) {\r\n  <div class=\"row login login-curve\" id=\"back\">\r\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-4 mx-auto rightLoginSet\">\r\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}\r\n                                  </label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\r\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                              <div class=\"row ml-0 mr-0\">\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\r\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\r\n                                  </div>\r\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                            </p-button>\r\n                                      }\r\n                                  </div>\r\n                              </div>\r\n                          </div>\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"mar-btm-20 picslogin\">\r\n                                                        <span>{{ translate('Or') }}</span>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                    </div>\r\n                          }\r\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                            <div class=\"clearfix text-center mt-10\">\r\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary registrationtext\">{{\r\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                    </div>\r\n                          }\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\r\n                                      <span>&copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-curve -->\r\n\r\n<!-- login-form-left -->\r\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateHideShow' : false) {\r\n  <div class=\"row login_3 login_hide\" id=\"back\">\r\n      <div class=\"d-lg-flex flex-column p-lg-0 banner-sec\"\r\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\r\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n          </div>\r\n      </div>\r\n      <div class=\"overlay\"></div>\r\n      <div class=\"align-items-center p-4 rightLoginSet\">\r\n          <div class=\"current-design mx-auto\">\r\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\r\n                  <div class=\"form-group mb-0\">\r\n                      <div class=\"logo-group text-center\">\r\n                          <div class=\"logo-img\">\r\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                          </div>\r\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\r\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\r\n                  <div class=\"login-content\">\r\n                      <form novalidate>\r\n                          <div class=\"clearfix\">\r\n                              <div class=\"form-group\">\r\n                                  <label for=\"username\" class=\"intake-form-labels\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['USER_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\r\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\r\n                                  <span class=\"newLoginBtn clearfix\">\r\n                                      <i class=\"fa fa-arrow-right\"></i>\r\n                                  </span>\r\n                              </div>\r\n                              <div class=\"form-group no-mar\">\r\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\r\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\r\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\r\n                                  <input-empower class=\"Inputs password\" #showhideinput type=\"password\" placeholder=\"{{ translate('Password') }}\"\r\n                                      name=\"password\" id=\"password\" tabindex=\"0\" required></input-empower>\r\n                                  <span class=\"newLoginBtn clearfix\">\r\n                                      <button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\" tabindex=\"0\">\r\n                                          <i class=\"fa fa-sign-out\"></i></button>\r\n                                  </span>\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\r\n                                <div class=\"captcha clearfix\">\r\n                                                                <div class=\"form-group\">\r\n                                                                    <div class=\"captcha-box d-flex\">\r\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\r\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\r\n                                                                                aria-hidden=\"true\"></i></button>\r\n                                                                        <span class=\"captcha-text\">ABCDi</span>\r\n                                                                    </div>\r\n\r\n                                                                </div>\r\n                                                            </div>\r\n                              }\r\n                              <div class=\"clearfix termsForget form-group\">\r\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\r\n                                    <div class=\"checkbox\">\r\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\r\n                                                                            aria-checked=\"false\">\r\n                                                                        </p-checkbox>\r\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\r\n                                                                    </div>\r\n                                  }\r\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\r\n                                    <div class=\"text-right\">\r\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\r\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\r\n                                                                            {{ translate('Forgot Password?') }}</a>\r\n                                                                    </div>\r\n                                  }\r\n                              </div>\r\n                              <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\r\n                                  <div class=\"row ml-0 mr-0\">\r\n                                      <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\r\n                                                                                  @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\r\n                                            <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\r\n                                                                                        styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                                        class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\r\n                                                                                  </p-button>\r\n                                          }\r\n                                      </div>\r\n                                  </div>\r\n\r\n                              </div>\r\n                                                          @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                                <div class=\"mar-btm-20 picslogin\">\r\n                                                                <span>{{ translate('Or') }}</span>\r\n                                                            </div>\r\n                              }\r\n                                                          @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\r\n                                <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\r\n                                                                <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\r\n                                                                    styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\r\n                                                                    class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\r\n                                                            </div>\r\n                              }\r\n                                                          @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\r\n                                <div class=\"clearfix text-center mt-10\">\r\n                                                                <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\r\n                                                                    LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\r\n                                                            </div>\r\n                              }\r\n                          </div>\r\n                          <br />\r\n                      </form>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n\r\n          <div class=\"powered\">\r\n              <p class=\"clsInfo-text mt-0 text-center\">\r\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\r\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\r\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\r\n                          width=\"120\" />\r\n                  </a>\r\n              </p>\r\n          </div>\r\n\r\n      </div>\r\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\r\n        <div class=\"footerVersion\">\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\r\n                              <p class=\"f-right versionfootervalue\">\r\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\r\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                              </p>\r\n                          </div>\r\n                }\r\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\r\n                  <div class=\"versionSection clearfix\">\r\n                              <div class=\"text-center clearfix\">\r\n                                  <p class=\"text-center version-footer-center\">\r\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\r\n                                      <span> &copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\r\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\r\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\r\n                                  </p>\r\n                              </div>\r\n                          </div>\r\n                }\r\n            </div>\r\n      }\r\n  </div>\r\n}\r\n<!-- login-form-left -->", styles: ["body{height:100%;overflow:hidden;width:100%!important;box-sizing:border-box;position:relative}.logo-img{width:200px;margin:5px auto}.logo-img img{width:100%;height:100%}.login .banner-sec{background:#3e397e;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:0;height:100%;position:relative}.login .logo-img{width:200px;margin:5px auto}.login .logo-img img{width:100%;height:100%}.login .goto-register{border-bottom:1px solid #146A5D}.login#back{margin:auto;width:100%;position:relative;overflow:hidden;height:100vh}.login .h2,.login h2{font-size:20px;color:var(--text-dark);font-family:Roboto,sans-serif!important;font-weight:700;padding-top:8px}.login .login-content h2,.login .login-content h4{font-weight:700;color:#333!important;font-size:26px;margin:10px 0 30px}.login .login-content .btn-login{background-color:var(--btn);padding:10px;border:0}.login .mar-btm-40{margin-bottom:40px}.login .mar-btm-20{margin-bottom:20px}.login .form-group{position:relative;padding:0 18px}.login .form-group .fa-eye{position:absolute;right:25px;top:13px;color:var(--primary);font-size:15px;cursor:pointer}.login .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login .form-group ::ng-deep input{padding:0 10px;color:var(--text-dark)!important;background:var(--bg-light)!important;border:1px solid var(--table-border)!important;border-radius:5px}.login .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login .form-group .password{padding-right:40px}.login .form-control,.login ::ng-deep input:focus,.login ::ng-deep input:hover{border:1px solid var(--table-border)!important;box-shadow:none}.login .login-content ::ng-deep input.form-control{padding:8px 12px 8px 0;background:transparent}.login .topWarmingContent{width:100%;padding-top:10px}.login .warmingIMg{width:75px;display:block}.login .warningContentP{width:100%;padding-top:10px;padding-right:20px}.login .warningContentP p{font-size:14px;padding:10px 0 0;color:var(--text-dark);line-height:1.6;margin:0}.login .loginBottomSet{padding-top:0}.login .login-content{width:100%;margin:0 auto}.login .btn-link{font-size:var(--font-13);font-weight:500;color:var(--text-dark);text-decoration:none;margin-top:3px;padding:0}.login .LogIn{margin-top:5px}.login .login-content h4{margin-bottom:10px}.login ::ng-deep .Inputs{outline:none;padding:5px 10px;background-color:var(--bg-light);width:100%;height:36px;margin-bottom:8px;box-shadow:none;border:none}.login .btn-secondary{background-color:var(--btncancel);border:1px solid var(--primary);color:var(--primary);padding:8px 25px}.login .logo-group .logo-title{color:var(--text-dark);font-size:15px}.login .logo-group .logo-subtitle{color:var(--text-dark);font-size:13px;font-weight:400;letter-spacing:1.7px}.login .cfaLogoTop{display:block}.login .cfaLogoLeft{width:100%}.login .checkbox{float:left}.login .checkbox label{color:var(--text-dark);cursor:pointer}.login .clsPowered{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;text-align:center}.login label{font-size:var(--font-15);font-weight:500!important}.login .clsMin-23{min-height:23px}.login .clsTopLogo{position:absolute;top:30px;left:0;right:0;margin:0 auto;text-align:center}.login .clsTopLogo h2{font-weight:700;color:#333!important;font-size:26px;margin:20px 0}.login .hero-gallery-inner{display:flex;flex-wrap:wrap}.login .fa-eye:before{content:\"\\f06e\";color:var(--primary);position:absolute;margin-top:27px;margin-left:-24px}.login .forget{font-size:var(--font-13);color:var(--text-dark);text-decoration:none}.login .checklabel{padding-left:10px;font-size:var(--font-13);margin-bottom:0}.login .Cardinality_logo{margin-top:-5px}.login h4#modal-basic-title{font-size:15px}.login .rightLoginSet{background:var(--bg-light)}.login .rightLoginSet .intake-form-labels{color:var(--text-dark)}.login_3{width:100%;position:relative;overflow:hidden;height:100vh;font-size:20px}.login_3.login_hide .form-group{position:relative;padding:0 18px}.login_3.login_hide .form-group .fa-eye{position:absolute;right:58px;top:22px;color:var(--primary);font-size:15px;cursor:pointer}.login_3.login_hide .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login_3.login_hide .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login_3.login_hide .form-group ::ng-deep input{padding:3px 10px;border-radius:999px!important;box-shadow:0 4px 25px #00000040;border:1px solid #EFEFEF!important;background:linear-gradient(120.37deg,#efefef0c,#ffffff02)!important;font-weight:400;background-color:#fff!important;height:40px!important}.login_3.login_hide .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login_3.login_hide .form-group .password{padding-right:40px}.login_3.login_hide .rightLoginSet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent!important;border:none!important;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:25px;width:38%;z-index:2}.login_3 .banner-sec{background:#3e397e;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:0;height:100%;flex:0 0 100%!important;max-width:100%!important;position:relative}.login_3 .goto-register{border-bottom:1px solid #146A5D;color:var(--white)!important}.login_3 .h2,.login_3 h2{font-size:20px;color:var(--text-dark);font-family:Roboto,sans-serif!important;font-weight:700;padding-top:8px}.login_3 .login-content h2,.login_3 .login-content h4{font-weight:700;color:#333!important;font-size:26px;margin:10px 0 30px}.login_3 .login-content .btn-login{background-color:var(--btn);padding:10px;border:0}.login_3 .mar-btm-40{margin-bottom:40px}.login_3 .mar-btm-20{margin-bottom:20px}.login_3 .form-group{position:relative;padding:0 18px}.login_3 .form-group .fa-eye{position:absolute;right:25px;top:13px;color:var(--primary);font-size:15px;cursor:pointer}.login_3 .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login_3 .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login_3 .form-group ::ng-deep input{padding:3px 10px;border-radius:8px;box-shadow:0 4px 25px #00000040;border:1px solid #EFEFEF!important;background:linear-gradient(120.37deg,#efefef0c,#ffffff02)!important;font-weight:400;background-color:#fff!important}.login_3 .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login_3 .form-group .password{padding-right:40px}.login_3 .form-control,.login_3 ::ng-deep input:focus,.login_3 ::ng-deep input:hover{border:1px solid var(--table-border)!important;box-shadow:none}.login_3 .login-content ::ng-deep input.form-control{padding:8px 12px 8px 0;background:transparent}.login_3 .topWarmingContent{width:100%;padding-top:10px}.login_3 .warmingIMg{width:75px;display:block}.login_3 .warningContentP{width:100%;padding-top:10px;padding-right:20px}.login_3 .warningContentP p{font-size:14px;padding:10px 0 0;color:var(--text-dark);line-height:1.6;margin:0}.login_3 .loginBottomSet{padding-top:0}.login_3 .login-content{width:100%;margin:0 auto}.login_3 .btn-link{font-size:var(--font-13);font-weight:500;color:var(--text-dark);text-decoration:none;margin-top:3px;padding:0}.login_3 .LogIn{margin-top:5px}.login_3 .login-content h4{margin-bottom:10px}.login_3 ::ng-deep .Inputs{outline:none;padding:5px 10px;background-color:var(--bg-light);width:100%;height:36px;margin-bottom:8px;box-shadow:none;border:none}.login_3 .btn-secondary{background-color:var(--btncancel);border:1px solid var(--primary);color:var(--primary);padding:8px 25px}.login_3 .logo-group .logo-title{color:var(--text-dark);font-size:15px}.login_3 .logo-group .logo-subtitle{color:var(--text-dark);font-size:13px;font-weight:400;letter-spacing:1.7px}.login_3 .cfaLogoTop{display:block}.login_3 .cfaLogoLeft{width:100%}.login_3 .checkbox{float:left}.login_3 .checkbox label{color:var(--white);cursor:pointer}.login_3 .checkbox label a{color:var(--white)!important;font-weight:700}.login_3 .clsPowered{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;text-align:center}.login_3 label{font-size:var(--font-15);font-weight:500!important}.login_3 .clsMin-23{min-height:23px}.login_3 .clsTopLogo{position:absolute;top:30px;left:0;right:0;margin:0 auto;text-align:center}.login_3 .clsTopLogo h2{font-weight:700;color:#333!important;font-size:26px;margin:20px 0}.login_3 .hero-gallery-inner{display:flex;flex-wrap:wrap}.login_3 .fa-eye:before{content:\"\\f06e\";color:var(--primary);position:absolute;margin-top:27px;margin-left:-24px}.login_3 .forget{font-size:var(--font-13);color:var(--white);text-decoration:none}.login_3 .checklabel{padding-left:10px;font-size:var(--font-13);margin-bottom:0}.login_3 .Cardinality_logo{margin-top:-5px}.login_3 h4#modal-basic-title{font-size:15px}.login_3 .rightLoginSet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(120.37deg,#efefef4d,#ffffff0d);border:1px solid #EFEFEF;-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px);border-radius:25px;width:38%}.login_3 .rightLoginSet .current-design{width:100%}.login_3 .rightLoginSet .current-design .logo-img{width:200px!important}.login_3 .rightLoginSet .current-design .clsLoginTitle{font-weight:700;color:var(--white);font-size:20px}.login_3 .rightLoginSet .current-design .loginBottomSet .p-button,.login_3 .rightLoginSet .current-design .p-button{color:var(--primary)!important;background-color:var(--white)!important}.login_3 .rightLoginSet .intake-form-labels{color:var(--white)}.login_3 .powered{position:absolute;bottom:0;left:0;right:0}.login_3 .powered p,.login_3 .powered span{color:var(--white)}.login.form-bottom{position:relative}.login.form-bottom .rightLoginSet{position:absolute;z-index:999;right:78px;bottom:10px;border-radius:25px 25px 0 0}.login-curve{background-color:#fff!important}.login-curve .banner-sec{border-radius:0 100px 100px 0!important}.login-curve .shadow{box-shadow:none!important}.powered{position:absolute;bottom:0;left:0;right:0}.powered p,.powered span{color:var(--text-dark)}@media screen and (min-width: 991px) and (max-width: 1024px){.login .rightLoginSet{padding:0!important}}@media screen and (max-width: 1281px){.carousel-item{max-width:65%!important}}.picslogin{border-bottom:solid 1px #ccc;margin-top:25px}.picslogin span{position:absolute;text-align:center;margin-top:-13px;left:43%;background:#fff;padding:0 10px;font-size:14px}.modal-header{display:block!important;position:relative}.modal-header .close{outline:none;position:absolute;right:7px;top:7px}.versionSection{position:absolute;bottom:0;padding:10px;width:100%;z-index:9999;left:0;background:#afd9fb}.versionSection p{font-size:13px;font-weight:500;margin-bottom:0}.captcha .captcha-box{display:flex;align-items:center;gap:10px;margin-bottom:10px}.captcha .captcha-box .refresh{background:#006098;padding:7px;border:none;color:#fff;border-radius:7px}.captcha .captcha-text{font-weight:700;font-size:20px;letter-spacing:3px;background-color:#f0f0f0;padding:5px 10px;border:1px dashed #ccc;-webkit-user-select:none;user-select:none}.newLoginBtn{position:absolute;background-color:var(--primary);border-radius:50%;width:30px;height:30px;text-align:center;top:41px;right:29px;cursor:pointer;border:none;color:#fff}.newLoginBtn i{font-size:18px}.newLoginBtn button{background:transparent;border:none;box-shadow:none;color:#fff}.newLoginBtn button i{font-size:18px}.overlay{position:absolute;inset:0;background-color:#0009;z-index:1}.login-right .banner-sec{position:relative}.login-right .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:10px;left:17%;max-width:700px}.login-left .banner-sec{position:relative}.login-left .banner-sec .clsBannerTitle{z-index:999;font-weight:600;font-size:20px;position:absolute;top:0%;left:17%;max-width:700px;text-align:center}.login-center .banner-sec{position:relative}.login-center .banner-sec .clsBannerTitle{z-index:999999;position:absolute;top:0;left:2%;font-size:25px;font-weight:700;color:#101010;max-width:500px}.form-bottom .banner-sec{position:relative}.form-bottom .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:0%;left:6%;max-width:700px;text-align:center}.login-curve .banner-sec{position:relative}.login-curve .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:5%;left:3%;max-width:700px;text-align:center}.login-curve .powered{position:absolute;bottom:25px;left:0;right:0}.login_hide .banner-sec{position:relative}.login_hide .banner-sec .clsBannerTitle{position:absolute;z-index:9999;font-size:20px;font-weight:700;color:#fff;left:3%;top:0%;max-width:700px;text-align:center}.versionfootervalue{color:#000;font-weight:700!important}.version-footer-center{display:flex;justify-content:center;gap:5px}.version-footer-center span{color:#000;font-weight:700!important}.contentWrapper .p-dialog{width:100vw!important;height:100vh!important}\n"] }]
+            args: [{ selector: 'lib-config-login-preview', standalone: false, template: "<app-alert></app-alert>\n\n<!-- login-form-right -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateRight' : false) {\n  <div class=\"row login login-right\" id=\"back\">\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-2 mx-auto rightLoginSet\">\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"email\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <!-- <label>Captcha:</label> -->\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                    <!-- @if (captchaError) { <div class=\"text-danger mt-1\">Invalid Captcha</div> } -->\n\n                                                                </div>\n\n\n\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n\n                          <!-- <div class=\"form-group clearfix mb-30 clsMin-23 pt-10\">\n\n                          </div> -->\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ LOGININFO?.['LOGIN_BUTTON_LABEL'] || translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          [label]=\"LOGININFO?.['LOGIN_BUTTON_LABEL'] || translate('Login')\" class=\"loginbutton w-100\"\n                                          tabindex=\"0\">\n                                      </p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\" style=\"top: 85%;\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\">{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</p>\n                              <!-- <p class=\"f-right\"><span>{{ LOGININFO['POWERED_BY']}}</span> @ <span>{{ LOGININFO['YEAR'] | date: 'yyyy'\n                                      }}</span></p> -->\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                              </p>\n\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span>{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\n                                      <span> &copy; {{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop version-footer-logo\"\n                                          alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-right -->\n\n<!-- login-form-left -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateLeft' : false) {\n  <div class=\"row login login-left\" id=\"back\">\n      <div class=\"d-flex col-lg-5 shadow align-items-center p2 mx-auto rightLoginSet\">\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar mb-2\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                                                    @if (LOGININFO['REGISTER_PREFIX_LABEL']) {\n                                                          <span class=\"signup-label\">\n                                                                                          {{ LOGININFO['REGISTER_PREFIX_LABEL'] }}\n                                                                                      </span>\n                                                        }\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\" style=\"top: 85%;\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\">{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</p>\n                              <!-- <p class=\"f-right\"><span>{{ LOGININFO['POWERED_BY']}}</span> @ <span>{{ LOGININFO['YEAR'] | date: 'yyyy'\n                                      }}</span></p> -->\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span>{{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\n                                      <span> &copy; {{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-left -->\n\n<!-- login-form-center -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateCenter' : false) {\n  <div class=\" login_3 login-center\" id=\"back\">\n      <div class=\"d-lg-flex flex-column p-lg-0 banner-sec\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"align-items-center p-4 rightLoginSet\">\n          <div class=\"current-design mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <!-- <label>Captcha:</label> -->\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary registrationtext\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span> {{ translate('Stable') }} {{ LOGININFO['VERSION']}}</span>\n                                      <span>&copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-center -->\n\n<!-- login-form-bottom -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateBottom' : false) {\n  <div class=\"row login form-bottom\" id=\"back\">\n      <div class=\"d-none d-lg-flex flex-column col-lg-12 align-i p-0 banner-sec justify-content-center container-image\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-4 mx-auto rightLoginSet\">\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\" style=\"top: 85%;\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\n                                      <span> &copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-bottom -->\n\n<!-- login-form-curve -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateCurve' : false) {\n  <div class=\"row login login-curve\" id=\"back\">\n      <div class=\"d-none d-lg-flex flex-column col-lg-7 align-i p-0 banner-sec justify-content-center container-image\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"d-flex col-lg-5 shadow align-items-center p-4 mx-auto rightLoginSet\">\n          <div class=\"col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}\n                                  </label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" type=\"password\" placeholder=\"{{ translate('Password') }}\" name=\"password\"\n                                      id=\"password\" tabindex=\"0\" required></input-empower>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                          </div>\n                          <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                              <div class=\"row ml-0 mr-0\">\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                      <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\"\n                                          styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                          class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login') }}</p-button>\n                                  </div>\n                                  <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                          @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                        <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                            </p-button>\n                                      }\n                                  </div>\n                              </div>\n                          </div>\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"mar-btm-20 picslogin\">\n                                                        <span>{{ translate('Or') }}</span>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                            <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                        <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                            styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                            class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                    </div>\n                          }\n                                                  @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                            <div class=\"clearfix text-center mt-10\">\n                                                        <a href=\"javascript:void;\" class=\"goto-register text-primary registrationtext\">{{\n                                                            LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                    </div>\n                          }\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\n                                      <span>&copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-curve -->\n\n<!-- login-form-left -->\n@if (LOGININFO?.ENABLE_LOGIN_TEMPLATE ? LOGININFO?.ENABLE_LOGIN_TEMPLATE == 'loginTemplateHideShow' : false) {\n  <div class=\"row login_3 login_hide\" id=\"back\">\n      <div class=\"d-lg-flex flex-column p-lg-0 banner-sec\"\n          [style.background-image]=\"'url(' + (LOGININFO['BACKGROUND_IMAGE']) + ')'\">\n          <div class=\"clsBannerTitle\" [innerHtml]=\"LOGININFO['BANNER_TITLE']\" [style.color]=\"LOGININFO['LABEL_COLOR']\">\n          </div>\n      </div>\n      <div class=\"overlay\"></div>\n      <div class=\"align-items-center p-4 rightLoginSet\">\n          <div class=\"current-design mx-auto\">\n              <div class=\"col-md-12 text-left logo-group lg-mb-50\">\n                  <div class=\"form-group mb-0\">\n                      <div class=\"logo-group text-center\">\n                          <div class=\"logo-img\">\n                              <img [attr.src]=\"LOGININFO['BANNER']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                          </div>\n                          <h5 class=\"clsLoginTitle\" [innerHtml]=\"LOGININFO['TITLE']\"\n                              [style.color]=\"LOGININFO['LABEL_COLOR']\"></h5>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-md-12 loginBottomSet clearfix pl-0 pr-0\">\n                  <div class=\"login-content\">\n                      <form novalidate>\n                          <div class=\"clearfix\">\n                              <div class=\"form-group\">\n                                  <label for=\"username\" class=\"intake-form-labels\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['USER_LABEL']}}</label>\n                                  <input-empower class=\"Inputs\" type=\"mail\" placeholder=\"{{ translate('Email') }}\" name=\"email\"\n                                      id=\"username\" tabindex=\"0\" required></input-empower>\n                                  <span class=\"newLoginBtn clearfix\">\n                                      <i class=\"fa fa-arrow-right\"></i>\n                                  </span>\n                              </div>\n                              <div class=\"form-group no-mar\">\n                                  <label for=\"password\" class=\"intake-form-labels w-100\"\n                                      [style.color]=\"LOGININFO['LABEL_COLOR']\">{{\n                                      LOGININFO['PASSWORD_LABEL']}}</label>\n                                  <input-empower class=\"Inputs password\" #showhideinput type=\"password\" placeholder=\"{{ translate('Password') }}\"\n                                      name=\"password\" id=\"password\" tabindex=\"0\" required></input-empower>\n                                  <span class=\"newLoginBtn clearfix\">\n                                      <button role=\"button\" type=\"submit\" title=\"{{ translate('Login') }}\" tabindex=\"0\">\n                                          <i class=\"fa fa-sign-out\"></i></button>\n                                  </span>\n                              </div>\n                                                          @if (LOGININFO['ENABLE_CAPTCHA'] ? LOGININFO['ENABLE_CAPTCHA'] : false) {\n                                <div class=\"captcha clearfix\">\n                                                                <div class=\"form-group\">\n                                                                    <div class=\"captcha-box d-flex\">\n                                                                        <input-empower type=\"text\" class=\"form-control\" placeholder=\"{{ translate('Enter captcha') }}\"></input-empower>\n                                                                        <button type=\"button\" class=\"refresh\" [attr.aria-label]=\"translate('Refresh Captcha')\"><i class=\"fa fa-refresh\"\n                                                                                aria-hidden=\"true\"></i></button>\n                                                                        <span class=\"captcha-text\">ABCDi</span>\n                                                                    </div>\n\n                                                                </div>\n                                                            </div>\n                              }\n                              <div class=\"clearfix termsForget form-group\">\n                                                                  @if (LOGININFO['ENABLE_TERMSANDCONDITION'] ? LOGININFO['ENABLE_TERMSANDCONDITION'] : false) {\n                                    <div class=\"checkbox\">\n                                                                        <p-checkbox class=\"checklabelbox\" name=\"conditions\" value=\"yes\" inputId=\"ch\"\n                                                                            aria-checked=\"false\">\n                                                                        </p-checkbox>\n                                                                        <label class=\"checklabel\" for=\"ch\">{{ translate('I accept the') }} <a href=\"javascript:void(0)\">{{ translate('terms & conditions') }}</a></label>\n                                                                    </div>\n                                  }\n                                                                  @if (LOGININFO['ENABLE_FORGOTPASSWORD'] ? LOGININFO['ENABLE_FORGOTPASSWORD'] : false) {\n                                    <div class=\"text-right\">\n                                                                        <a href=\"javascript:void(0)\" class=\"btn-link forget\"\n                                                                            [style.color]=\"LOGININFO['LABEL_COLOR']\">\n                                                                            {{ translate('Forgot Password?') }}</a>\n                                                                    </div>\n                                  }\n                              </div>\n                              <div class=\"clearfix text-center col-md-12 col-12 mt-4\">\n                                  <div class=\"row ml-0 mr-0\">\n                                      <div class=\"clearfix text-center col-md-12 col-12 mt-2 pr-0 pl-0\">\n                                                                                  @if (LOGININFO['ENABLE_GOOGLE'] ? LOGININFO['ENABLE_GOOGLE'] : false) {\n                                            <p-button role=\"button\" type=\"submit\" title=\"{{ translate('Login with Google') }}\"\n                                                                                        styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                                        class=\"loginbutton btn-hover w-100\" tabindex=\"0\">{{ translate('Login with Google') }}\n                                                                                  </p-button>\n                                          }\n                                      </div>\n                                  </div>\n\n                              </div>\n                                                          @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                                <div class=\"mar-btm-20 picslogin\">\n                                                                <span>{{ translate('Or') }}</span>\n                                                            </div>\n                              }\n                                                          @if (LOGININFO['ENABLE_LOGINWITHAZURE'] ? LOGININFO['ENABLE_LOGINWITHAZURE'] : false) {\n                                <div class=\"clearfix text-center col-md-12 col-12 mt-2\">\n                                                                <p-button role=\"button\" type=\"button\" title=\"{{ translate('Login with Azure') }}\"\n                                                                    styleClass=\"w-100 align-items-center justify-content-center d-block mb-2\"\n                                                                    class=\"loginbutton w-100\" tabindex=\"0\">{{ translate('Login with Azure') }}</p-button>\n                                                            </div>\n                              }\n                                                          @if (LOGININFO['ENABLE_REGISTARTION'] ? LOGININFO['ENABLE_REGISTARTION'] : false) {\n                                <div class=\"clearfix text-center mt-10\">\n                                                                <a href=\"javascript:void;\" class=\"goto-register text-primary\">{{\n                                                                    LOGININFO?.['REGISTER_BUTTON_LABEL'] || translate('Register') }}</a>\n                                                            </div>\n                              }\n                          </div>\n                          <br />\n                      </form>\n                  </div>\n              </div>\n          </div>\n\n          <div class=\"powered\">\n              <p class=\"clsInfo-text mt-0 text-center\">\n                  <span style=\"font-size: 13px\"> {{ translate('Powered by') }} </span>\n                  <a href=\"https://www.cardinality.ai/\" rel=\"noopener\" role=\"link\" target=\"_blank\" tabindex=\"0\">\n                      <img alt=\"{{ translate('cardinality') }}\" class=\"Cardinality_logo\" src=\"assets/images/cardinality-logo_text.svg\"\n                          width=\"120\" />\n                  </a>\n              </p>\n          </div>\n\n      </div>\n          @if (LOGININFO['ENABLE_FOOTER'] && (LOGININFO['ENABLE_SELECTION'] === 'loginOnly' || LOGININFO['ENABLE_SELECTION'] === 'both')) {\n        <div class=\"footerVersion\">\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateRight' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <p class=\"f-left versionfootervalue\"> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</p>\n                              <p class=\"f-right versionfootervalue\">\n                                  <span> &copy; </span>{{ LOGININFO['YEAR'] | date: 'yyyy' }} <span>{{ LOGININFO['POWERED_BY'] }}</span>\n                                  <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                              </p>\n                          </div>\n                }\n                        @if (LOGININFO['ENABLE_FOOTER'] ? LOGININFO['ENABLE_FOOTER']=='versionTemplateCenter' : false) {\n                  <div class=\"versionSection clearfix\">\n                              <div class=\"text-center clearfix\">\n                                  <p class=\"text-center version-footer-center\">\n                                      <span> {{ translate('Stable') }}{{ LOGININFO['VERSION']}}</span>\n                                      <span> &copy;{{ LOGININFO['YEAR'] | date: 'yyyy' }}</span>\n                                      <span>{{ LOGININFO['POWERED_BY']}}</span>\n                                      <img [attr.src]=\"LOGININFO['POWERED_BY_LOGO']\" class=\"cfaLogoTop\" alt=\"{{ translate('Oregon Provider Logo') }}\" />\n                                  </p>\n                              </div>\n                          </div>\n                }\n            </div>\n      }\n  </div>\n}\n<!-- login-form-left -->", styles: ["body{height:100%;overflow:hidden;width:100%!important;box-sizing:border-box;position:relative}.logo-img{width:200px;margin:5px auto}.logo-img img{width:100%;height:100%}.login .banner-sec{background:#3e397e;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:0;height:100%;position:relative}.login .logo-img{width:200px;margin:5px auto}.login .logo-img img{width:100%;height:100%}.login .goto-register{border-bottom:1px solid #146A5D}.login#back{margin:auto;width:100%;position:relative;overflow:hidden;height:100vh}.login .h2,.login h2{font-size:20px;color:var(--text-dark);font-family:Roboto,sans-serif!important;font-weight:700;padding-top:8px}.login .login-content h2,.login .login-content h4{font-weight:700;color:#333!important;font-size:26px;margin:10px 0 30px}.login .login-content .btn-login{background-color:var(--btn);padding:10px;border:0}.login .mar-btm-40{margin-bottom:40px}.login .mar-btm-20{margin-bottom:20px}.login .form-group{position:relative;padding:0 18px}.login .form-group .fa-eye{position:absolute;right:25px;top:13px;color:var(--primary);font-size:15px;cursor:pointer}.login .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login .form-group ::ng-deep input{padding:0 10px;color:var(--text-dark)!important;background:var(--bg-light)!important;border:1px solid var(--table-border)!important;border-radius:5px}.login .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login .form-group .password{padding-right:40px}.login .form-control,.login ::ng-deep input:focus,.login ::ng-deep input:hover{border:1px solid var(--table-border)!important;box-shadow:none}.login .login-content ::ng-deep input.form-control{padding:8px 12px 8px 0;background:transparent}.login .topWarmingContent{width:100%;padding-top:10px}.login .warmingIMg{width:75px;display:block}.login .warningContentP{width:100%;padding-top:10px;padding-right:20px}.login .warningContentP p{font-size:14px;padding:10px 0 0;color:var(--text-dark);line-height:1.6;margin:0}.login .loginBottomSet{padding-top:0}.login .login-content{width:100%;margin:0 auto}.login .btn-link{font-size:var(--font-13);font-weight:500;color:var(--text-dark);text-decoration:none;margin-top:3px;padding:0}.login .LogIn{margin-top:5px}.login .login-content h4{margin-bottom:10px}.login ::ng-deep .Inputs{outline:none;padding:5px 10px;background-color:var(--bg-light);width:100%;height:36px;margin-bottom:8px;box-shadow:none;border:none}.login .btn-secondary{background-color:var(--btncancel);border:1px solid var(--primary);color:var(--primary);padding:8px 25px}.login .logo-group .logo-title{color:var(--text-dark);font-size:15px}.login .logo-group .logo-subtitle{color:var(--text-dark);font-size:13px;font-weight:400;letter-spacing:1.7px}.login .cfaLogoTop{display:block}.login .cfaLogoLeft{width:100%}.login .checkbox{float:left}.login .checkbox label{color:var(--text-dark);cursor:pointer}.login .clsPowered{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;text-align:center}.login label{font-size:var(--font-15);font-weight:500!important}.login .clsMin-23{min-height:23px}.login .clsTopLogo{position:absolute;top:30px;left:0;right:0;margin:0 auto;text-align:center}.login .clsTopLogo h2{font-weight:700;color:#333!important;font-size:26px;margin:20px 0}.login .hero-gallery-inner{display:flex;flex-wrap:wrap}.login .fa-eye:before{content:\"\\f06e\";color:var(--primary);position:absolute;margin-top:27px;margin-left:-24px}.login .forget{font-size:var(--font-13);color:var(--text-dark);text-decoration:none}.login .checklabel{padding-left:10px;font-size:var(--font-13);margin-bottom:0}.login .Cardinality_logo{margin-top:-5px}.login h4#modal-basic-title{font-size:15px}.login .rightLoginSet{background:var(--bg-light)}.login .rightLoginSet .intake-form-labels{color:var(--text-dark)}.login_3{width:100%;position:relative;overflow:hidden;height:100vh;font-size:20px}.login_3.login_hide .form-group{position:relative;padding:0 18px}.login_3.login_hide .form-group .fa-eye{position:absolute;right:58px;top:22px;color:var(--primary);font-size:15px;cursor:pointer}.login_3.login_hide .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login_3.login_hide .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login_3.login_hide .form-group ::ng-deep input{padding:3px 10px;border-radius:999px!important;box-shadow:0 4px 25px #00000040;border:1px solid #EFEFEF!important;background:linear-gradient(120.37deg,#efefef0c,#ffffff02)!important;font-weight:400;background-color:#fff!important;height:40px!important}.login_3.login_hide .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login_3.login_hide .form-group .password{padding-right:40px}.login_3.login_hide .rightLoginSet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent!important;border:none!important;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:25px;width:38%;z-index:2}.login_3 .banner-sec{background:#3e397e;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:0;height:100%;flex:0 0 100%!important;max-width:100%!important;position:relative}.login_3 .goto-register{border-bottom:1px solid #146A5D;color:var(--white)!important}.login_3 .h2,.login_3 h2{font-size:20px;color:var(--text-dark);font-family:Roboto,sans-serif!important;font-weight:700;padding-top:8px}.login_3 .login-content h2,.login_3 .login-content h4{font-weight:700;color:#333!important;font-size:26px;margin:10px 0 30px}.login_3 .login-content .btn-login{background-color:var(--btn);padding:10px;border:0}.login_3 .mar-btm-40{margin-bottom:40px}.login_3 .mar-btm-20{margin-bottom:20px}.login_3 .form-group{position:relative;padding:0 18px}.login_3 .form-group .fa-eye{position:absolute;right:25px;top:13px;color:var(--primary);font-size:15px;cursor:pointer}.login_3 .form-group ::ng-deep input[type=text]+.fa-eye:before{content:\"\\f070\"}.login_3 .form-group .leftIcon{position:absolute;top:12px;left:12px;font-size:15px;color:#666}.login_3 .form-group ::ng-deep input{padding:3px 10px;border-radius:8px;box-shadow:0 4px 25px #00000040;border:1px solid #EFEFEF!important;background:linear-gradient(120.37deg,#efefef0c,#ffffff02)!important;font-weight:400;background-color:#fff!important}.login_3 .form-group ::ng-deep input:focus{border:1px solid var(--table-border)!important}.login_3 .form-group .password{padding-right:40px}.login_3 .form-control,.login_3 ::ng-deep input:focus,.login_3 ::ng-deep input:hover{border:1px solid var(--table-border)!important;box-shadow:none}.login_3 .login-content ::ng-deep input.form-control{padding:8px 12px 8px 0;background:transparent}.login_3 .topWarmingContent{width:100%;padding-top:10px}.login_3 .warmingIMg{width:75px;display:block}.login_3 .warningContentP{width:100%;padding-top:10px;padding-right:20px}.login_3 .warningContentP p{font-size:14px;padding:10px 0 0;color:var(--text-dark);line-height:1.6;margin:0}.login_3 .loginBottomSet{padding-top:0}.login_3 .login-content{width:100%;margin:0 auto}.login_3 .btn-link{font-size:var(--font-13);font-weight:500;color:var(--text-dark);text-decoration:none;margin-top:3px;padding:0}.login_3 .LogIn{margin-top:5px}.login_3 .login-content h4{margin-bottom:10px}.login_3 ::ng-deep .Inputs{outline:none;padding:5px 10px;background-color:var(--bg-light);width:100%;height:36px;margin-bottom:8px;box-shadow:none;border:none}.login_3 .btn-secondary{background-color:var(--btncancel);border:1px solid var(--primary);color:var(--primary);padding:8px 25px}.login_3 .logo-group .logo-title{color:var(--text-dark);font-size:15px}.login_3 .logo-group .logo-subtitle{color:var(--text-dark);font-size:13px;font-weight:400;letter-spacing:1.7px}.login_3 .cfaLogoTop{display:block}.login_3 .cfaLogoLeft{width:100%}.login_3 .checkbox{float:left}.login_3 .checkbox label{color:var(--white);cursor:pointer}.login_3 .checkbox label a{color:var(--white)!important;font-weight:700}.login_3 .clsPowered{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;text-align:center}.login_3 label{font-size:var(--font-15);font-weight:500!important}.login_3 .clsMin-23{min-height:23px}.login_3 .clsTopLogo{position:absolute;top:30px;left:0;right:0;margin:0 auto;text-align:center}.login_3 .clsTopLogo h2{font-weight:700;color:#333!important;font-size:26px;margin:20px 0}.login_3 .hero-gallery-inner{display:flex;flex-wrap:wrap}.login_3 .fa-eye:before{content:\"\\f06e\";color:var(--primary);position:absolute;margin-top:27px;margin-left:-24px}.login_3 .forget{font-size:var(--font-13);color:var(--white);text-decoration:none}.login_3 .checklabel{padding-left:10px;font-size:var(--font-13);margin-bottom:0}.login_3 .Cardinality_logo{margin-top:-5px}.login_3 h4#modal-basic-title{font-size:15px}.login_3 .rightLoginSet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(120.37deg,#efefef4d,#ffffff0d);border:1px solid #EFEFEF;-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px);border-radius:25px;width:38%}.login_3 .rightLoginSet .current-design{width:100%}.login_3 .rightLoginSet .current-design .logo-img{width:200px!important}.login_3 .rightLoginSet .current-design .clsLoginTitle{font-weight:700;color:var(--white);font-size:20px}.login_3 .rightLoginSet .current-design .loginBottomSet .p-button,.login_3 .rightLoginSet .current-design .p-button{color:var(--primary)!important;background-color:var(--white)!important}.login_3 .rightLoginSet .intake-form-labels{color:var(--white)}.login_3 .powered{position:absolute;bottom:0;left:0;right:0}.login_3 .powered p,.login_3 .powered span{color:var(--white)}.login.form-bottom{position:relative}.login.form-bottom .rightLoginSet{position:absolute;z-index:999;right:78px;bottom:10px;border-radius:25px 25px 0 0}.login-curve{background-color:#fff!important}.login-curve .banner-sec{border-radius:0 100px 100px 0!important}.login-curve .shadow{box-shadow:none!important}.powered{position:absolute;bottom:0;left:0;right:0}.powered p,.powered span{color:var(--text-dark)}@media screen and (min-width: 991px) and (max-width: 1024px){.login .rightLoginSet{padding:0!important}}@media screen and (max-width: 1281px){.carousel-item{max-width:65%!important}}.picslogin{border-bottom:solid 1px #ccc;margin-top:25px}.picslogin span{position:absolute;text-align:center;margin-top:-13px;left:43%;background:#fff;padding:0 10px;font-size:14px}.modal-header{display:block!important;position:relative}.modal-header .close{outline:none;position:absolute;right:7px;top:7px}.versionSection{position:absolute;bottom:0;padding:10px;width:100%;z-index:9999;left:0;background:#afd9fb}.versionSection p{font-size:13px;font-weight:500;margin-bottom:0}.captcha .captcha-box{display:flex;align-items:center;gap:10px;margin-bottom:10px}.captcha .captcha-box .refresh{background:#006098;padding:7px;border:none;color:#fff;border-radius:7px}.captcha .captcha-text{font-weight:700;font-size:20px;letter-spacing:3px;background-color:#f0f0f0;padding:5px 10px;border:1px dashed #ccc;-webkit-user-select:none;user-select:none}.newLoginBtn{position:absolute;background-color:var(--primary);border-radius:50%;width:30px;height:30px;text-align:center;top:41px;right:29px;cursor:pointer;border:none;color:#fff}.newLoginBtn i{font-size:18px}.newLoginBtn button{background:transparent;border:none;box-shadow:none;color:#fff}.newLoginBtn button i{font-size:18px}.overlay{position:absolute;inset:0;background-color:#0009;z-index:1}.login-right .banner-sec{position:relative}.login-right .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:10px;left:17%;max-width:700px}.login-left .banner-sec{position:relative}.login-left .banner-sec .clsBannerTitle{z-index:999;font-weight:600;font-size:20px;position:absolute;top:0%;left:17%;max-width:700px;text-align:center}.login-center .banner-sec{position:relative}.login-center .banner-sec .clsBannerTitle{z-index:999999;position:absolute;top:0;left:2%;font-size:25px;font-weight:700;color:#101010;max-width:500px}.form-bottom .banner-sec{position:relative}.form-bottom .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:0%;left:6%;max-width:700px;text-align:center}.login-curve .banner-sec{position:relative}.login-curve .banner-sec .clsBannerTitle{z-index:999;font-size:20px;font-weight:700;position:absolute;top:5%;left:3%;max-width:700px;text-align:center}.login-curve .powered{position:absolute;bottom:25px;left:0;right:0}.login_hide .banner-sec{position:relative}.login_hide .banner-sec .clsBannerTitle{position:absolute;z-index:9999;font-size:20px;font-weight:700;color:#fff;left:3%;top:0%;max-width:700px;text-align:center}.versionfootervalue{color:#000;font-weight:700!important}.version-footer-center{display:flex;justify-content:center;gap:5px}.version-footer-center span{color:#000;font-weight:700!important}.contentWrapper .p-dialog{width:100vw!important;height:100vh!important}\n"] }]
         }], ctorParameters: () => [{ type: DataStoreService }, { type: i0.ChangeDetectorRef }, { type: i3$1.SessionStorageService, decorators: [{
                     type: Inject,
                     args: [PICS_CORE_SESSION_STORAGE]
@@ -2821,11 +2821,11 @@ let ConfigLoginSettingsComponent$1 = class ConfigLoginSettingsComponent {
         this.activeTab = tab;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfigLoginSettingsComponent, deps: [{ token: AlertService }, { token: AttachmentsService }, { token: HttpService }, { token: i1.FormBuilder }, { token: ConfigurationSettingsService }, { token: DataStoreService }, { token: i0.ChangeDetectorRef }, { token: PICS_CORE_SESSION_STORAGE }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ConfigLoginSettingsComponent, isStandalone: false, selector: "lib-config-login-settings", viewQueries: [{ propertyName: "scrollBox", first: true, predicate: ["scrollBox"], descendants: true }, { propertyName: "loginScrollBox", first: true, predicate: ["loginScrollBox"], descendants: true }], ngImport: i0, template: "<app-alert></app-alert>\r\n<div class=\"tabSection clearfix\">\r\n  <ul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\">\r\n    <li class=\"nav-item\" role=\"presentation\">\r\n      <button type=\"button\" class=\"nav-link active\" id=\"home-tab\" role=\"tab\"\r\n        aria-controls=\"home\" aria-selected=\"true\"\r\n        (click)=\"setActiveTab('home')\">{{ translate('Login Configuration') }}</button>\r\n    </li>\r\n  </ul>\r\n\r\n\r\n  <!-- Tab panes -->\r\n  <div class=\"tab-content\" id=\"myTabContent\" [formGroup]=\"configRegistrationForm\">\r\n    <div class=\"tab-pane fade show active p-3 border border-top-0\" id=\"home\" role=\"tabpanel\" aria-labelledby=\"home-tab\">\r\n      <div class=\"clearfix\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\"></path>\r\n              <path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\"></path>\r\n              <path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\"></path>\r\n              <path d=\"M10 6h4\"></path>\r\n              <path d=\"M10 10h4\"></path>\r\n              <path d=\"M10 14h4\"></path>\r\n              <path d=\"M10 18h4\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Organization Information') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Basic details about your organization') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row\" *ngIf=\"showOrgDropdown\">\r\n            <div class=\"col-md-6 col-12 mb-3\">\r\n              <label class=\"referral-form-labels\" for=\"organizationConfig\">{{ translate('Organization') }}\r\n                <span class=\"required\" aria-hidden=\"true\">*</span>\r\n              </label>\r\n              <p-dropdown\r\n                styleClass=\"w-100\"\r\n                [options]=\"configOptions\"\r\n                [placeholder]=\"translate('Select Organization')\"\r\n                inputId=\"organizationConfig\"\r\n                optionLabel=\"organization_title\"\r\n                optionValue=\"id\"\r\n                [(ngModel)]=\"selectedConfigId\"\r\n                [ngModelOptions]=\"{standalone: true}\"\r\n                (onChange)=\"onConfigSelectionChange($event.value)\"\r\n                [filter]=\"true\"\r\n                filterBy=\"organization_title\">\r\n              </p-dropdown>\r\n            </div>\r\n          </div>\r\n          <div class=\"row\">\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"narrative-textarea\">\r\n                <label class=\"referral-form-labels\" for=\"organization_title\">{{ translate('Organization Title') }}\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                </label>\r\n                <div class=\"position-relative\">\r\n                  @if (!isEditingOrganization) {\r\n                    <textarea id=\"organization_title\" class=\"form-control\" [value]=\"getOrganizationPlainText()\"\r\n                      (input)=\"updateOrganizationTitle($event)\" [placeholder]=\"translate('Enter Organization Title')\"\r\n                      aria-required=\"true\"\r\n                      style=\"padding-right: 35px; resize: vertical;\"></textarea>\r\n                    <i class=\"pi pi-pencil edit-field-icon\" role=\"button\" tabindex=\"0\"\r\n                      [attr.aria-label]=\"translate('Edit Organization Title')\"\r\n                      (click)=\"toggleEdit('organization')\"\r\n                      (keydown.enter)=\"toggleEdit('organization')\"\r\n                      (keydown.space)=\"$event.preventDefault(); toggleEdit('organization')\"></i>\r\n                  } @else {\r\n                    <quill-editor [modules]=\"quillModules\" formControlName=\"organization_title\"\r\n                      [styles]=\"{'min-height':'60px'}\" (onBlur)=\"toggleEdit('organization')\">\r\n                    </quill-editor>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"narrative-textarea\">\r\n                <label class=\"referral-form-labels\" for=\"banner_title\">{{ translate('Banner Title') }}\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                </label>\r\n                <div class=\"position-relative\">\r\n                  @if (!isEditingBanner) {\r\n                    <textarea id=\"banner_title\" class=\"form-control\" [value]=\"getBannerPlainText()\"\r\n                      (input)=\"updateBannerTitle($event)\" [placeholder]=\"translate('Enter banner display text')\"\r\n                      aria-required=\"true\"\r\n                      style=\"padding-right: 35px; resize: vertical;\"></textarea>\r\n                    <i class=\"pi pi-pencil edit-field-icon\" role=\"button\" tabindex=\"0\"\r\n                      [attr.aria-label]=\"translate('Edit Banner Title')\"\r\n                      (click)=\"toggleEdit('banner')\"\r\n                      (keydown.enter)=\"toggleEdit('banner')\"\r\n                      (keydown.space)=\"$event.preventDefault(); toggleEdit('banner')\"></i>\r\n                  } @else {\r\n                    <quill-editor [modules]=\"quillModules\" formControlName=\"banner_title\" [styles]=\"{'min-height':'60px'}\"\r\n                      (onBlur)=\"toggleEdit('banner')\">\r\n                    </quill-editor>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"></rect>\r\n              <circle cx=\"9\" cy=\"9\" r=\"2\"></circle>\r\n              <path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Brand Assets') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Upload your brand images and logos') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row\">\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"referral-form-labels\" for=\"upload_banner\">{{ translate('Banner Image') }}\r\n                <span class=\"required\" aria-hidden=\"true\">*</span>\r\n              </label>\r\n              <div class=\"clsUploadBannerCard clsBrandAssetsCards\">\r\n                <div class=\"clsBannerImgSec\">\r\n                  <div class=\"clsBannerImg\">\r\n                    <img [src]=\"thumbnailBanner || 'assets/images/sample-banner.png'\"\r\n                      [attr.alt]=\"translate('Banner image preview')\" />\r\n                  </div>\r\n\r\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\r\n                    [attr.aria-label]=\"translate('Preview Banner')\" (click)=\"showUploadedBanner()\"\r\n                    (keydown.enter)=\"showUploadedBanner()\"\r\n                    (keydown.space)=\"$event.preventDefault(); showUploadedBanner()\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n\r\n                  <p-dialog [header]=\"translate('Banner Preview')\" [(visible)]=\"bannerVisible\" [modal]=\"true\">\r\n                    <div class=\"text-center\">\r\n                      <img class=\"img-fluid\" [attr.src]=\"thumbnailBanner || 'assets/images/sample-banner.png'\"\r\n                        [attr.alt]=\"translate('Banner Preview')\" />\r\n                    </div>\r\n                  </p-dialog>\r\n\r\n                  <div class=\"clsUploadBtnIcon\">\r\n                    <label for=\"upload_banner\" class=\"clsUploadIcon cursor-pointer mb-0\">\r\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\r\n                      <span class=\"sr-only\">{{ translate('Upload Banner') }}</span>\r\n                    </label>\r\n                    <input type=\"file\" id=\"upload_banner\" style=\"display: none\"\r\n                      (change)=\"handleFileInputBanner($event)\" />\r\n                  </div>\r\n                </div>\r\n                <div class=\"clsUploadBtnSec text-center\">\r\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('upload_banner')\">\r\n                    {{ translate('Replace Banner') }}\r\n                  </button>\r\n                  <p class=\"mb-0 mt-1\"><small>{{ translate('Image size max 1MB (1600 x 900 px)') }}</small></p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"referral-form-labels\" for=\"upload_logo\">{{ translate('Company Logo') }}\r\n                <span class=\"required\" aria-hidden=\"true\">*</span>\r\n              </label>\r\n              <div class=\"clsUploadLogoCard clsBrandAssetsCards\">\r\n                <div class=\"clsLogoImgSec\">\r\n                  <div class=\"clsLogoImg\">\r\n                    <img [attr.src]=\"thumbnailLogo || 'assets/images/logo_home.png'\"\r\n                      [attr.alt]=\"translate('Company logo preview')\" />\r\n                  </div>\r\n\r\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\r\n                    [attr.aria-label]=\"translate('Preview Logo')\" (click)=\"showUploadedLogo()\"\r\n                    (keydown.enter)=\"showUploadedLogo()\"\r\n                    (keydown.space)=\"$event.preventDefault(); showUploadedLogo()\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n\r\n                  <p-dialog [header]=\"translate('Logo Preview')\" [(visible)]=\"visible\" [modal]=\"true\" [style]=\"{ width: '600px' }\">\r\n                    <div class=\"text-center\">\r\n                      <img class=\"img-fluid\" [src]=\"thumbnailLogo || 'assets/images/logo_home.png'\"\r\n                        [attr.alt]=\"translate('Logo Preview')\" />\r\n                    </div>\r\n                  </p-dialog>\r\n\r\n                  <div class=\"clsUploadBtnIcon\">\r\n                    <label for=\"upload_logo\" class=\"clsUploadIcon cursor-pointer mb-0\">\r\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\r\n                      <span class=\"sr-only\">{{ translate('Upload Logo') }}</span>\r\n                    </label>\r\n                    <input type=\"file\" id=\"upload_logo\" style=\"display: none\"\r\n                      (change)=\"handleFileInput($event)\" />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"clsUploadBtnSec text-center\">\r\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('upload_logo')\">\r\n                    {{ translate('Replace Logo') }}\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label for=\"labelColor\" class=\"referral-form-labels\">{{ translate('Pick Label Color') }}\r\n                <span class=\"required\" aria-hidden=\"true\">*</span>\r\n              </label>\r\n              <div class=\"clsColorPickCard clsBrandAssetsCards\">\r\n                <div class=\"clearfix\">\r\n                  <label class=\"intake-form-labels\" for=\"userLabel\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Label - Username/Email') }}\r\n                  </label>\r\n                  <input-empower id=\"userLabel\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Label Name')\" formControlName=\"userLabel\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"emailPlaceholder\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Label Placeholder - Email') }}\r\n                  </label>\r\n                  <input-empower id=\"emailPlaceholder\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Email Placeholder')\" formControlName=\"emailPlaceholder\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"passwordLabel\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Label - Password') }}\r\n                  </label>\r\n                  <input-empower id=\"passwordLabel\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Password Label')\"\r\n                    formControlName=\"passwordLabel\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"passwordPlaceholder\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Label Placeholder Password') }}\r\n                  </label>\r\n                  <input-empower id=\"passwordPlaceholder\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Password Placeholder')\"\r\n                    formControlName=\"passwordPlaceholder\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"loginButtonLabel\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Button Label Name') }}\r\n                  </label>\r\n                  <input-empower id=\"loginButtonLabel\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Login Button Label')\"\r\n                    formControlName=\"loginButtonLabel\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"registerButtonPrefix\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Register Button Prefix') }}\r\n                  </label>\r\n                  <input-empower id=\"registerButtonPrefix\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Register Prefix')\"\r\n                    formControlName=\"registerButtonPrefix\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"registerButtonLabel\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Register Button Label Name') }}\r\n                  </label>\r\n                  <input-empower id=\"registerButtonLabel\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Register Button Label')\"\r\n                    formControlName=\"registerButtonLabel\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-2\">\r\n                  <input type=\"color\" id=\"labelColor\" formControlName=\"labelColor\"\r\n                    [attr.aria-label]=\"translate('Pick Label Color')\" class=\"form-control w-100px h-30px p-0\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect>\r\n              <path d=\"M3 9h18\"></path>\r\n              <path d=\"M9 21V9\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Login Page Templates') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Choose your preferred login page layout') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"clsScrollWrapper\">\r\n            <button class=\"clsScrollBtn clsScrollBtnLeft\" [attr.aria-label]=\"translate('Scroll tabs left')\"\r\n              (click)=\"scrollTabs('login', loginScrollBox, -200)\"\r\n              [disabled]=\"isAtStart['login']\">\r\n              <span class=\"material-symbols-outlined\" aria-hidden=\"true\">chevron_left</span>\r\n            </button>\r\n\r\n            <!-- Scrollable Template Section -->\r\n            <div class=\"clsScrollContainer\" #loginScrollBox>\r\n              <div class=\"clsScrollTemplatesLists row m-0\">\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateRight')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateRight')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateRight')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-right.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-right.png\" alt=\"Login Right\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Right') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the right side') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateLeft')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateLeft')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateLeft')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-left.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-left.png\" alt=\"Login Left\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Left') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the left side') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateCenter')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateCenter')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateCenter')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-center.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-center.png\" alt=\"Login Center\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Center') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form centered on the page') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateBottom')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateBottom')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateBottom')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-bottom.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-bottom.png\" alt=\"Login Bottom\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Bottom') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the Bottom side') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateCurve')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateCurve')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateCurve')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-curve.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-curve.png\" alt=\"Login Radius\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Radius') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Banner on the left side, curve') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateHideShow')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateHideShow')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateHideShow')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-hide-ui.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-hide-ui.png\"\r\n                        alt=\"Login form hide & Show\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login form hide & Show') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form on the hide & Show') }}</p>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <button class=\"clsScrollBtn clsScrollBtnRight\" [attr.aria-label]=\"translate('Scroll tabs right')\"\r\n              (click)=\"scrollTabs('login', loginScrollBox, 200)\"\r\n              [disabled]=\"isAtEnd['login']\">\r\n              <span class=\"material-symbols-outlined\" aria-hidden=\"true\">chevron_right</span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"></rect>\r\n              <line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"></line>\r\n              <line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"></line>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Footer Templates') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Footer layout options') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"clsScrollTemplatesLists row\">\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                [class.active]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight'\"\r\n                [attr.aria-pressed]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight'\"\r\n                (click)=\"selectFooterTemplate('versionTemplateRight')\"\r\n                (keydown.enter)=\"selectFooterTemplate('versionTemplateRight')\"\r\n                (keydown.space)=\"$event.preventDefault(); selectFooterTemplate('versionTemplateRight')\">\r\n                <div class=\"clsTemplatesImg align-items-center d-flex justify-content-center h-70px\"\r\n                  (click)=\"openPreview('../../../../assets/images/base-product/footer-left.png'); $event.stopPropagation()\">\r\n                  <div class=\"d-flex justify-content-between p-10 w-100\">\r\n                    <strong class=\"text-12\">{{ translate('Stable') }} Version 2.5</strong>\r\n                    <strong class=\"text-12\">\r\n                      &copy; {{ currentYear }} {{ translate('Powered by') }}\r\n                      <span class=\"w-100px d-inline-block\">\r\n                        <img src=\"assets/images/cardinality-logo_text.svg\" alt=\"cardy\">\r\n                      </span>\r\n                    </strong>\r\n                  </div>\r\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h4 class=\"clsTextLine1 mb-0\">{{ translate('Footer Left & Right') }}</h4>\r\n                  @if (configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight') {\r\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                  }\r\n                </div>\r\n                <p class=\"clsTextLine2 mb-0\"> {{ translate('Version left, copyright and powered by text right') }} </p>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                [class.active]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter'\"\r\n                [attr.aria-pressed]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter'\"\r\n                (click)=\"selectFooterTemplate('versionTemplateCenter')\"\r\n                (keydown.enter)=\"selectFooterTemplate('versionTemplateCenter')\"\r\n                (keydown.space)=\"$event.preventDefault(); selectFooterTemplate('versionTemplateCenter')\">\r\n                <div class=\"clsTemplatesImg align-items-center d-flex justify-content-center h-70px\"\r\n                  (click)=\"openPreview('../../../../assets/images/base-product/footer-center.png'); $event.stopPropagation()\">\r\n                  <div class=\"d-flex justify-content-center p-10 w-100 gap-2\">\r\n                    <strong class=\"text-12\">{{ translate('Stable') }} Version 2.5</strong>\r\n                    <strong class=\"text-12\">&copy; {{ currentYear }}</strong>\r\n                    <strong class=\"text-12\">\r\n                      {{ translate('Powered by') }}\r\n                      <span class=\"w-100px d-inline-block ms-1\">\r\n                        <img src=\"assets/images/cardinality-logo_text.svg\" alt=\"cardy\">\r\n                      </span>\r\n                    </strong>\r\n                  </div>\r\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h4 class=\"clsTextLine1 mb-0\">{{ translate('Footer Center') }}</h4>\r\n                  @if (configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter') {\r\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                  }\r\n                </div>\r\n                <p class=\"clsTextLine2 mb-0\"> {{ translate('All footer text centered in single line') }} </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"row row-gap-15 pt-15\">\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"organizationName\">{{ translate('Right') }}</label>\r\n              <input-empower class=\"form-control\" type=\"text\" [placeholder]=\"translate('Version')\" id=\"organizationName\" autocomplete=\"off\"\r\n                formControlName=\"version\"></input-empower>\r\n            </div>\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"content\">{{ translate('Left') }}</label>\r\n              <input-empower class=\"form-control\" type=\"text\" [placeholder]=\"translate('Content')\" id=\"content\" autocomplete=\"off\"\r\n                formControlName=\"content\"></input-empower>\r\n            </div>\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <fieldset class=\"border-0 p-0 m-0\">\r\n                <legend class=\"intake-form-labels mb-1\" id=\"show_footer_legend\">{{ translate('Show Footer') }}</legend>\r\n                <div class=\"d-flex gap-15\" role=\"group\" aria-labelledby=\"show_footer_legend\">\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"loginOnly\"\r\n                      inputId=\"loginOnly\"></p-radioButton>\r\n                    <label for=\"loginOnly\" class=\"ml-2 mb-0\">{{ translate('Login Only') }}</label>\r\n                  </div>\r\n\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"pageOnly\"\r\n                      inputId=\"pageOnly\"></p-radioButton>\r\n                    <label for=\"pageOnly\" class=\"ml-2 mb-0\">{{ translate('Page Only') }}</label>\r\n                  </div>\r\n\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"both\"\r\n                      inputId=\"both\"></p-radioButton>\r\n                    <label for=\"both\" class=\"ml-2 mb-0\">{{ translate('Both') }}</label>\r\n                  </div>\r\n                </div>\r\n              </fieldset>\r\n            </div>\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <label class=\"referral-form-labels\" for=\"uploadPoweredBy\">{{ translate('Powered by Footer Logo') }}</label>\r\n              <div class=\"clsUploadLogoCard clsBrandAssetsCards\">\r\n                <div class=\"clsLogoImgSec\">\r\n                  <div class=\"clsLogoImg\">\r\n                    <img [attr.src]=\"thumbnailPoweredLogo || 'assets/images/logo_home.png'\"\r\n                      [attr.alt]=\"translate('Powered by footer logo preview')\" />\r\n                  </div>\r\n\r\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\r\n                    [attr.aria-label]=\"translate('Preview Footer Logo')\" (click)=\"showUploadedFooterLogo()\"\r\n                    (keydown.enter)=\"showUploadedFooterLogo()\"\r\n                    (keydown.space)=\"$event.preventDefault(); showUploadedFooterLogo()\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n\r\n                  <p-dialog [header]=\"translate('Logo Preview')\" [(visible)]=\"logoFooterVisible\" [modal]=\"true\"\r\n                    [style]=\"{ width: '600px' }\">\r\n                    <div class=\"text-center\">\r\n                      <img class=\"img-fluid\" [src]=\"thumbnailPoweredLogo || 'assets/images/logo_home.png'\"\r\n                        [attr.alt]=\"translate('Powered by footer logo preview')\" />\r\n                    </div>\r\n                  </p-dialog>\r\n\r\n                  <div class=\"clsUploadBtnIcon\">\r\n                    <label for=\"uploadPoweredBy\" class=\"clsUploadIcon cursor-pointer mb-0\">\r\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\r\n                      <span class=\"sr-only\">{{ translate('Upload Powered By Logo') }}</span>\r\n                    </label>\r\n                    <input type=\"file\" id=\"uploadPoweredBy\" style=\"display: none\"\r\n                      (change)=\"handleFileFooterInput($event)\" />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"clsUploadBtnSec text-center\">\r\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('uploadPoweredBy')\">\r\n                    {{ translate('Replace Logo') }}\r\n                  </button>\r\n                  <p class=\"mb-0 mt-1\"><small>{{ translate('Image size max 120kb (400 x 60 px)') }}</small></p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <path\r\n                d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\r\n              </path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">Server Maintenance Templates</h4>\r\n            <p class=\"clsSubHeaderTitle\">Maintenance page layouts</p>\r\n          </div>\r\n        </div> -->\r\n\r\n        <!-- <div class=\"p-25 border rounded-16\">\r\n          <div class=\"clsScrollTemplatesLists row\">\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                [class.active]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne'\"\r\n                [attr.aria-pressed]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne'\"\r\n                (click)=\"selectServerTemplate('serverTemplateOne')\"\r\n                (keydown.enter)=\"selectServerTemplate('serverTemplateOne')\"\r\n                (keydown.space)=\"$event.preventDefault(); selectServerTemplate('serverTemplateOne')\">\r\n                <div class=\"clsTemplatesImg\"\r\n                  (click)=\"openPreview('../../../../assets/images/base-product/server-1.png'); $event.stopPropagation()\">\r\n                  <img src=\"../../../../assets/images/base-product/server-1.png\" alt=\"Server Maintenance\" />\r\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h4 class=\"clsTextLine1 mb-0\">Server Maintenance</h4>\r\n                  @if (configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne') {\r\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                [class.active]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo'\"\r\n                [attr.aria-pressed]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo'\"\r\n                (click)=\"selectServerTemplate('serverTemplateTwo')\"\r\n                (keydown.enter)=\"selectServerTemplate('serverTemplateTwo')\"\r\n                (keydown.space)=\"$event.preventDefault(); selectServerTemplate('serverTemplateTwo')\">\r\n                <div class=\"clsTemplatesImg\"\r\n                  (click)=\"openPreview('../../../../assets/images/base-product/server-2.png'); $event.stopPropagation()\">\r\n                  <img src=\"../../../../assets/images/base-product/server-2.png\" alt=\"Scheduled Maintenance\">\r\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h4 class=\"clsTextLine1 mb-0\">Scheduled Maintenance</h4>\r\n                  @if (configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo') {\r\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <path d=\"M20 7h-9\"></path>\r\n              <path d=\"M14 17H5\"></path>\r\n              <circle cx=\"17\" cy=\"17\" r=\"3\"></circle>\r\n              <circle cx=\"7\" cy=\"7\" r=\"3\"></circle>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Login Preferences') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Configure available authentication features') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row clsPreferencesList row-gap-15\">\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"fp\">{{ translate('Forgot Password') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('forgotPassword')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('forgotPassword')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('forgotPassword')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"fp\" formControlName=\"forgotPassword\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"tac\">{{ translate('Terms & conditions') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('termsAndCondition')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('termsAndCondition')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('termsAndCondition')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"tac\" formControlName=\"termsAndCondition\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enableReg\">{{ translate('Enable Registration') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enableRegistration')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enableRegistration')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enableRegistration')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enableReg\" formControlName=\"enableRegistration\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_mfaId\">{{ translate('Enable Multifactor Authentication') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enable_mfa')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_mfa')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enable_mfa')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enable_mfaId\" formControlName=\"enable_mfa\" (onChange)=\"onMfaValidation()\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_captchaId\">Enable Captcha</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enable_captcha')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_captcha')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enable_captcha')?.value ? 'Enabled' : 'Disabled' }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enable_captchaId\" formControlName=\"enable_captcha\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div> -->\r\n\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_footerId\">{{ translate('Enable Footer') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enable_footer')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_footer')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enable_footer')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enable_footerId\" formControlName=\"enable_footer\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"google_translateId\">Enable Google Translate</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enable_google_translate')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_google_translate')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enable_google_translate')?.value ? 'Enabled' : 'Disabled' }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"google_translateId\" formControlName=\"enable_google_translate\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"></path>\r\n              <path d=\"M14 2v4a2 2 0 0 0 2 2h4\"></path>\r\n              <path d=\"M10 9H8\"></path>\r\n              <path d=\"M16 13H8\"></path>\r\n              <path d=\"M16 17H8\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Terms & conditions') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Legal agreements and compliance text') }} </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"narrative-textarea \">\r\n            <span class=\"referral-form-labels\" id=\"terms_condition_template-label\">{{ translate('Legal Description') }}\r\n              <span class=\"required\" aria-hidden=\"true\">*</span>\r\n            </span>\r\n            <div role=\"group\" [attr.aria-labelledby]=\"'terms_condition_template-label'\">\r\n              <quill-editor [modules]=\"quillModules\" [styles]=\"{'height':'100px'}\"\r\n                formControlName=\"terms_condition_template\"\r\n                [attr.aria-label]=\"translate('Legal Description')\"\r\n                [attr.aria-required]=\"true\">\r\n              </quill-editor>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn iconBgColor_8\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"></path>\r\n              <path d=\"M2 12h20\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Advanced Configuration') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\"> {{ translate('System-level authentication settings') }} </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row row-gap-15\">\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"multifactor_template\">\r\n                {{ translate('Multifactor Authentication Channel') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <p-select-empower class=\"w-100\" id=\"multifactor_template\" optionLabel=\"name\" optionValue=\"value\"\r\n                [options]=\"multifactorTemplates\"\r\n                [placeholder]=\"translate('Select MFA channel')\" formControlName=\"multifactor_template\"\r\n                [required]=\"!!configRegistrationForm.get('enable_mfa')?.value\"\r\n                [aria-describedby]=\"configRegistrationForm.get('multifactor_template')?.invalid && configRegistrationForm.get('multifactor_template')?.touched ? 'multifactor_template-errors' : null\">\r\n              </p-select-empower>\r\n              @if (configRegistrationForm.get('multifactor_template')?.invalid && configRegistrationForm.get('multifactor_template')?.touched) {\r\n                <small id=\"multifactor_template-errors\" class=\"text-danger\" role=\"alert\">\r\n                  {{ translate('Multifactor Authentication Channel is required.') }}\r\n                </small>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"otp_digits\">\r\n                {{ translate('OTP Verification Digits') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <inputnumber-empower min=\"4\" max=\"6\" class=\"form-control\" id=\"otp_digits\" formControlName=\"otp_digits\"\r\n                [placeholder]=\"translate('Enter OTP Verification Digits')\"\r\n                [aria-describedby]=\"otpControl.invalid && otpControl.touched ? 'otp_digits-errors' : null\"\r\n                [class.is-invalid]=\"otpControl.invalid && (otpControl.dirty || otpControl.touched)\"></inputnumber-empower>\r\n              @if (otpControl.invalid && otpControl.touched) {\r\n                <div id=\"otp_digits-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                  @if (otpControl.errors?.['required']) {\r\n                    <span>{{ translate('OTP Verification Digits is required.') }}</span>\r\n                  }\r\n                  @if (otpControl.errors?.min || otpControl.errors?.max) {\r\n                    <span>{{ translate('Enter a valid number of digits between 4 and 6.') }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"otp_expire_time\">\r\n                {{ translate('OTP Expire Time (In Minutes)') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <inputnumber-empower class=\"form-control\" id=\"otp_expire_time\" formControlName=\"otp_expire_time\"\r\n                [placeholder]=\"translate('Enter OTP Expire Time')\"\r\n                [aria-describedby]=\"otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched) ? 'otp_expire_time-errors' : null\"\r\n                [class.is-invalid]=\"otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched)\"></inputnumber-empower>\r\n              @if (otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched)) {\r\n                <div id=\"otp_expire_time-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                  @if (otpExpireControl.errors?.['required']) {\r\n                    <span>{{ translate('OTP Expire Time is required.') }}</span>\r\n                  }\r\n                  @if (otpExpireControl.errors?.min || otpExpireControl.errors?.max) {\r\n                    <span>{{ translate('Enter a valid OTP expire time between 1 and 30 minutes.') }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"resend_otp_delay\">\r\n                {{ translate('Resend OTP Delay (In Minutes)') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <inputnumber-empower min=\"0.5\" max=\"10\" step=\"0.1\" class=\"form-control\" id=\"resend_otp_delay\" formControlName=\"resend_otp_delay\"\r\n                [placeholder]=\"translate('Enter Resend OTP Delay')\"\r\n                [aria-describedby]=\"resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched) ? 'resend_otp_delay-errors' : null\"\r\n                [class.is-invalid]=\"resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched)\"></inputnumber-empower>\r\n              @if (resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched)) {\r\n                <div id=\"resend_otp_delay-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                  @if (resendDelayControl.errors?.['required']) {\r\n                    <span>{{ translate('Resend OTP Delay is required.') }}</span>\r\n                  }\r\n                  @if (resendDelayControl.errors?.min || resendDelayControl.errors?.max) {\r\n                    <span>{{ translate('Enter a valid resend delay between 0.5 and 10 minutes.') }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"forget_config\">\r\n                {{ translate('Forget Password Config') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <p-select-empower class=\"w-100\" id=\"forget_config\" optionLabel=\"name\" formControlName=\"forget_config\" optionValue=\"value\"\r\n                [options]=\"forgetPasswordConfig\" [placeholder]=\"translate('Select Forget Password Config')\"\r\n                [required]=\"!!configRegistrationForm.get('enable_mfa')?.value\"\r\n                [aria-describedby]=\"configRegistrationForm.get('forget_config')?.invalid && configRegistrationForm.get('forget_config')?.touched ? 'forget_config-errors' : null\">\r\n              </p-select-empower>\r\n              @if (configRegistrationForm.get('forget_config')?.invalid && configRegistrationForm.get('forget_config')?.touched) {\r\n                <small id=\"forget_config-errors\" class=\"text-danger\" role=\"alert\">\r\n                  {{ translate('Forget Password Config is required.') }}\r\n                </small>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"forgot_email_expire_time\">\r\n                {{ translate('Forgot Email Expire Time(In Minutes)') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <inputnumber-empower min=\"1\" max=\"60\" class=\"form-control\" id=\"forgot_email_expire_time\" formControlName=\"forget_expire_time\"\r\n                [placeholder]=\"translate('Enter Forgot Email Expire Time')\"\r\n                [aria-describedby]=\"forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched) ? 'forgot_email_expire_time-errors' : null\"\r\n                [class.is-invalid]=\"forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched)\"></inputnumber-empower>\r\n              @if (forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched)) {\r\n                <div id=\"forgot_email_expire_time-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                  @if (forgetExpireControl.errors?.['required']) {\r\n                    <span>{{ translate('Forgot Email Expire Time is required.') }}</span>\r\n                  }\r\n                  @if (forgetExpireControl.errors?.min || forgetExpireControl.errors?.max) {\r\n                    <span>{{ translate('Enter a valid forgot email expire time between 1 and 60 minutes.') }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n              <polyline points=\"12 6 12 12 16 14\"></polyline>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">Account Lockout Settings</h4>\r\n            <p class=\"clsSubHeaderTitle\">Configure login attempt limits and account lockout settings</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row row-gap-15\">\r\n            <div class=\"col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enableLoginAttemptThrottling\">Enable Time-Based Login Attempt Limits</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enableLoginAttemptThrottling')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enableLoginAttemptThrottling')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enableLoginAttemptThrottling')?.value ? 'Enabled' : 'Disabled' }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enableLoginAttemptThrottling\" formControlName=\"enableLoginAttemptThrottling\"  (onChange)=\"onLoginAttemptThrottlingChange()\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            @if (configRegistrationForm.get('enableLoginAttemptThrottling')?.value) {\r\n              <div class=\"col-lg-6 col-md-6 col-12\">\r\n                <label class=\"intake-form-labels\" for=\"lockoutWindowMinutes\">{{ translate('Failed Login Attempt Window (minutes)') }}\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                </label>\r\n                <inputnumber-empower class=\"form-control\" id=\"lockoutWindowMinutes\" formControlName=\"lockoutWindowMinutes\"\r\n                  [placeholder]=\"translate('Enter lock window duration in minutes')\"\r\n                  [aria-describedby]=\"lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched) ? 'lockoutWindowMinutes-errors' : null\"\r\n                  [class.is-invalid]=\"lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched)\"></inputnumber-empower>\r\n                @if (lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched)) {\r\n                  <div id=\"lockoutWindowMinutes-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                    @if (lockoutWindowControl?.errors?.['required']) {\r\n                      <span>{{ translate('Failed Login Attempt Window is required.') }}</span>\r\n                    }\r\n                    @if (lockoutWindowControl?.errors?.['min']) {\r\n                      <span>{{ translate('Enter a valid Login Attempt Window (Minutes).') }}</span>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (configRegistrationForm.get('enableLoginAttemptThrottling')?.value) {\r\n              <div class=\"col-lg-6 col-md-6 col-12\">\r\n                <label class=\"intake-form-labels\" for=\"lockoutDurationMinutes\">{{ translate('Account Lockout Duration (minutes)') }}\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                </label>\r\n                <inputnumber-empower class=\"form-control\" id=\"lockoutDurationMinutes\" formControlName=\"lockoutDurationMinutes\"\r\n                  [placeholder]=\"translate('Enter lock duration in minutes')\"\r\n                  [aria-describedby]=\"lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched) ? 'lockoutDurationMinutes-errors' : null\"\r\n                  [class.is-invalid]=\"lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched)\"></inputnumber-empower>\r\n                @if (lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched)) {\r\n                  <div id=\"lockoutDurationMinutes-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                    @if (lockoutDurationControl?.errors?.['required']) {\r\n                      <span>{{ translate('Account Lockout Duration is required.') }}</span>\r\n                    }\r\n                    @if (lockoutDurationControl?.errors?.['min']) {\r\n                      <span>{{ translate('Enter a valid lock duration.') }}</span>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <p-card styleClass=\" w-100 mt-3\">\r\n    <div class=\"customizer\" [formGroup]=\"configRegistrationForm\">\r\n      <div class=\"text-md-right mt-2 mb-4 previewsumbitBtn\">\r\n        @if (showFormErrors && configRegistrationForm.invalid) {\r\n          <div class=\"text-danger text-left mb-2\" role=\"alert\">\r\n            <p class=\"mb-1\">{{ translate('Please fix the following:') }}</p>\r\n            <ul class=\"mb-0\">\r\n              @for (msg of getInvalidFieldMessages(); track msg) {\r\n                <li>{{ msg }}</li>\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n        @if (activeTab === 'home' || activeTab === 'kms-sub1' || activeTab === 'profile') {\r\n          <button-empower type=\"button\" class=\"btn btn-primary\" (click)=\"previewLogin()\">\r\n            {{ translate('Preview') }}\r\n          </button-empower>\r\n        }\r\n        <button-empower type=\"button\" class=\"btn btn-primary\" (click)=\"saveConfig()\">\r\n          {{ updateButton ? translate('Update') : translate('Submit') }}\r\n        </button-empower>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n\r\n  <!-- Preview Modal -->\r\n  <p-dialog [(visible)]=\"showPreviewModal\" [modal]=\"true\" [style]=\"{ width: '100vw', height: '100vh' }\"\r\n    [header]=\"translate('Login Preview')\" [closable]=\"true\" class=\"loginpreviewdialog\">\r\n    <!-- create preview only after previewLoginInfo is set -->\r\n    @if (showPreviewModal && previewLoginInfo) {\r\n      <lib-config-login-preview [previewData]=\"previewLoginInfo\" [i18n]=\"i18n\"></lib-config-login-preview>\r\n    }\r\n  </p-dialog>\r\n\r\n  <p-dialog [header]=\"translate('Template Preview')\" [(visible)]=\"previewVisible\" [modal]=\"true\" [closable]=\"true\">\r\n    <img class=\"img-fluid\" [src]=\"previewImageUrl || 'assets/images/base-product/footer-left.png'\"\r\n      alt=\"Preview\" />\r\n  </p-dialog>", styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-14);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-13);color:var(--text-dark)}.customizer p{font-size:var(--font-13);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}.mt-10{margin-top:10px}.previewsumbitBtn{margin-bottom:5%!important;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}:host ::ng-deep .previewsumbitBtn .btn:focus-visible,:host ::ng-deep .previewsumbitBtn button:focus-visible,:host ::ng-deep .clsUploadBtn:focus-visible,:host ::ng-deep .clsScrollBtn:focus-visible{outline:2px solid #0d3178!important;outline-offset:2px;box-shadow:0 0 0 2px #0d317833}.required{color:#d93c2c}.edit-field-icon{position:absolute;right:12px;top:12px;color:#747474;font-size:14px;cursor:pointer}.edit-field-icon:focus-visible{outline:2px solid #0d3178;outline-offset:2px}.clsImgOverlay:focus-visible{outline:2px solid #fff;outline-offset:-2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}fieldset legend.intake-form-labels{float:none;width:auto;font-size:inherit;line-height:inherit}:host ::ng-deep .p-dialog-mask{z-index:9999!important}.tabSection .nav-tabs .nav-item.show .nav-link,.tabSection .nav-tabs .nav-link.active{background-color:var(--primary);color:var(--white)}.tabSection .nav-tabs .nav-link{border:none;background:transparent;cursor:pointer}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mr-2{margin-right:.5rem}.mb-4{margin-bottom:1.5rem}.rounded-16{border-radius:16px}.p-25{padding:25px}.gap-12{gap:12px}.mt-25{margin-top:25px}.text-12{font-size:12px;line-height:20px}.w-100px{width:100px!important}.row-gap-15{row-gap:15px!important}.d-inline-block{display:inline-block!important}.clsHeaderGrp .clsIconBtn{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:#0b0b0b}.clsHeaderGrp .clsHeaderTitle{font-size:20px;line-height:28px;color:#000;margin:0}.clsHeaderGrp .clsSubHeaderTitle{font-size:14px;line-height:20px;color:#666;margin:0}.clsBrandAssetsCards{border-radius:16px;border:solid 2px var(--border-color);overflow:hidden}.clsBrandAssetsCards:hover{border:solid 2px var(--primary)}.clsBrandAssetsCards.clsUploadBannerCard:hover .clsBannerImgSec .clsImgOverlay{opacity:1}.clsBrandAssetsCards.clsUploadBannerCard:hover .clsBannerImgSec .clsUploadBtnIcon{visibility:visible}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec{position:relative}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsBannerImg{width:100%;height:150px;position:relative;transition:all .03s linear 0s}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsBannerImg img{width:100%;height:100%;object-fit:cover}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay:focus-visible{opacity:1}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsUploadBtnIcon{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#2e5bfe,#aa37f1);position:absolute;top:15px;right:15px;visibility:hidden;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec{padding:15px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec .clsUploadBtn{font-size:14px;line-height:20px;padding:7px 12px;text-align:center;border:solid 1px var(--border-color);background-color:#fff;border-radius:999px;margin:0;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec .clsUploadBtn:hover{background-color:#f4f4f5}.clsBrandAssetsCards.clsUploadLogoCard:hover .clsLogoImgSec .clsImgOverlay{opacity:1}.clsBrandAssetsCards.clsUploadLogoCard:hover .clsLogoImgSec .clsUploadBtnIcon{visibility:visible}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec{position:relative;padding:30px;background:#f3f7fa;height:150px;display:flex;align-items:center;justify-content:center}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsLogoImg{margin:0 auto;cursor:pointer;position:relative;transition:all .03s linear 0s}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsLogoImg img{width:100%;height:100%}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay:focus-visible{opacity:1}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsUploadBtnIcon{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#2e5bfe,#aa37f1);position:absolute;top:15px;right:15px;visibility:hidden;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec{padding:15px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec .clsUploadBtn{font-size:14px;line-height:20px;padding:7px 12px;text-align:center;border:solid 1px var(--border-color);background-color:#fff;border-radius:999px;margin:0;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec .clsUploadBtn:hover{background-color:#f4f4f5}.clsBrandAssetsCards.clsColorPickCard{padding:32px 20px}.clsScrollWrapper{position:relative;display:flex;align-items:center}.clsScrollWrapper .clsScrollContainer{overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-behavior:smooth;width:100%;-ms-overflow-style:none;scrollbar-width:none}.clsScrollWrapper .clsScrollContainer::-webkit-scrollbar{display:none}.clsScrollWrapper .clsScrollBtn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ccc;border-radius:999px;width:35px;height:35px;display:inline-flex;flex:0 0 35px;align-items:center;justify-content:center;text-align:center;cursor:pointer;z-index:10;box-shadow:0 2px 6px #0003}.clsScrollWrapper .clsScrollBtn.clsScrollBtnLeft{left:-25px}.clsScrollWrapper .clsScrollBtn.clsScrollBtnRight{right:-25px}.clsScrollWrapper .clsScrollBtn:disabled{cursor:not-allowed}.clsScrollTemplatesLists{flex-wrap:nowrap}.clsScrollTemplatesLists .clsScrollTemplatesItem{border-radius:16px;border:solid 2px var(--border-color);padding:20px;background-color:#fff;transition:transform .3s linear;cursor:pointer;display:flex;flex-direction:column;height:100%}.clsScrollTemplatesLists .clsScrollTemplatesItem:hover{transform:scale(1.01)}.clsScrollTemplatesLists .clsScrollTemplatesItem:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.clsScrollTemplatesLists .clsScrollTemplatesItem.active{border:solid 2px var(--primary);background-color:var(--primary-light);transform:scale(1.01)}.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsTextLine1,.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsTextLine2,.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsCheckIcon{color:#fff}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg{position:relative;border-radius:12px;width:100%;height:90px;overflow:hidden;background-color:#afd9fb;margin-bottom:15px}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg:hover .clsImgOverlay{opacity:1}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay:focus-visible{opacity:1}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTextLine1{font-size:14px;line-height:20px;font-weight:600;color:#000}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTextLine2{font-size:12px;line-height:16px;font-weight:400;color:#333;margin-top:5px;white-space:normal}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsCheckIcon{color:var(--primary);font-size:20px}.clsPreferencesList .clsPreferencesListItem{padding:15px;border:solid 1px var(--border-color);border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;height:100%}.clsPreferencesList .clsPreferencesListItem .clsStatusDot{width:8px;height:8px;border-radius:50%}.clsPreferencesList .clsPreferencesListItem .clsStatusDot.clsEnabledDot{background-color:#28a745}.clsPreferencesList .clsPreferencesListItem .clsStatusDot.clsDisabledDot{background-color:#ccc}.clsPreferencesList .clsPreferencesListItem .clsStatusTxt{font-size:12px;line-height:16px;color:#6c757d}.popup-body{display:flex;flex-direction:column;gap:12px;padding-top:10px}.popup-card{border:1px solid #dee2e6;border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .2s ease-in-out}.popup-card:hover{background-color:#f8f9fa;transform:translateY(-2px)}.popup-label{font-weight:500;color:#333}.upload-container{display:flex;flex-direction:column;gap:2rem}.upload-container{max-width:100%}.upload-box{border:2px dashed #cbd5e0!important;border-radius:12px!important;padding:20px!important;text-align:center!important;transition:border-color .3s!important}.upload-box:hover{border-color:#667eea!important}.upload-icon{color:#667eea;margin-bottom:10px}.upload-title{font-size:18px;font-weight:600}.upload-subtitle{font-size:14px;color:#718096;margin-bottom:15px}.upload-button{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer}.upload-button:hover{background:#5a67d8}.files-preview{margin-top:15px;text-align:left}.preview-header{display:flex;justify-content:space-between;align-items:center}.file-item{display:flex;align-items:center;margin-top:10px;position:relative}.preview-img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:2px solid #e2e8f0}.remove-btn{margin-left:10px;color:#e53e3e;cursor:pointer}.p-10{padding:10px}button.btn:disabled,button.btn[disabled]{background-color:#ccc!important;border-color:#ccc!important;color:#666!important;cursor:not-allowed;opacity:.8}.popup-header{padding-top:20px;background:var(--primary) 0% 0% no-repeat padding-box;border-bottom:1px solid var(--table-border);opacity:1;height:70px}.popuo-title{margin-top:15px;line-height:1.5;text-align:left;font-family:Inter,sans-serif!important;font-size:var(--font-16);letter-spacing:0px;color:var(--hover-text);opacity:1}.disabled-overlay{pointer-events:none;opacity:.6}.surveyheading{color:#fff;font-size:15px}.survey-header{background-color:var(--primary);padding:10px 12px;border-radius:6px}.survey-section{border:1px solid #ccc;border-radius:6px;padding:0;background-color:#fff}.survey-title-group{margin-top:10px}.survey-title-group .form-label{margin-bottom:4px;margin-top:20px;font-weight:500}.survey-name{width:100%;height:auto;overflow:hidden;border:1px solid #ddd;border-radius:10px}.sur-name-header{background-color:var(--primary);padding:10px 12px;border-radius:6px}.custom-back-btn{border:2px solid var(--primary)!important;color:var(--primary)!important;background-color:#f8f9fa!important;font-weight:500!important;border-radius:6px!important;transition:all .2s ease!important}.custom-back-btn:hover{background-color:#fff;color:var(--primary);border-color:var(--primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i7$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: i12.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: AlertComponent, selector: "app-alert" }, { kind: "component", type: i14.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: i15.EmpowerButtonComponent, selector: "button-empower", inputs: ["fieldKey", "id", "data-dismiss", "class", "ngClass", "ngStyle", "style", "label", "title", "tabindex", "type", "disabled", "loading", "aria-label", "aria-describedby", "aria-controls", "aria-expanded", "aria-selected", "aria-current", "aria-haspopup", "role", "aria-required", "aria-labelledby", "aria-pressed", "aria-activedescendant"], outputs: ["click", "focus", "blur"] }, { kind: "component", type: i15.InputEmpowerComponent, selector: "input-empower", inputs: ["id", "type", "placeholder", "aria-label", "aria-describedby", "aria-labelledby", "aria-invalid", "aria-required", "readonly", "class", "ngClass", "ngStyle", "style", "mask", "showMaskTyped", "hiddenInput", "autocomplete", "aria-hidden", "aria-valuetext", "min", "max", "step", "inputMode", "tabindex", "name", "value", "checked", "accept", "multiple", "maxLength", "minLength", "errorIcon", "disabled", "hasError"], outputs: ["click", "enterKey", "focus", "blur"] }, { kind: "component", type: i15.InputnumberEmpowerComponent, selector: "inputnumber-empower", inputs: ["id", "placeholder", "aria-label", "aria-describedby", "aria-labelledby", "aria-invalid", "aria-required", "readonly", "class", "ngClass", "ngStyle", "style", "autocomplete", "aria-hidden", "min", "max", "step", "inputMode", "tabindex", "errorIcon", "disabled", "hasError"], outputs: ["click", "focus"] }, { kind: "component", type: i15.PSelectEmpowerComponent, selector: "p-select-empower", inputs: ["dataKey", "group", "optionGroupLabel", "optionGroupChildren", "filterBy", "panelStyle", "panelClass", "panelPosition", "appendTo", "optionLabel", "optionValue", "optionDisabled", "resetFilterOnHide"] }, { kind: "component", type: ConfigLoginPreviewComponent, selector: "lib-config-login-preview", inputs: ["previewData", "i18n"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ConfigLoginSettingsComponent, isStandalone: false, selector: "lib-config-login-settings", viewQueries: [{ propertyName: "scrollBox", first: true, predicate: ["scrollBox"], descendants: true }, { propertyName: "loginScrollBox", first: true, predicate: ["loginScrollBox"], descendants: true }], ngImport: i0, template: "<app-alert></app-alert>\n<div class=\"tabSection clearfix\">\n  <ul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\">\n    <li class=\"nav-item\" role=\"presentation\">\n      <button type=\"button\" class=\"nav-link active\" id=\"home-tab\" role=\"tab\"\n        aria-controls=\"home\" aria-selected=\"true\"\n        (click)=\"setActiveTab('home')\">{{ translate('Login Configuration') }}</button>\n    </li>\n  </ul>\n\n\n  <!-- Tab panes -->\n  <div class=\"tab-content\" id=\"myTabContent\" [formGroup]=\"configRegistrationForm\">\n    <div class=\"tab-pane fade show active p-3 border border-top-0\" id=\"home\" role=\"tabpanel\" aria-labelledby=\"home-tab\">\n      <div class=\"clearfix\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\"></path>\n              <path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\"></path>\n              <path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\"></path>\n              <path d=\"M10 6h4\"></path>\n              <path d=\"M10 10h4\"></path>\n              <path d=\"M10 14h4\"></path>\n              <path d=\"M10 18h4\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Organization Information') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Basic details about your organization') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row\" *ngIf=\"showOrgDropdown\">\n            <div class=\"col-md-6 col-12 mb-3\">\n              <label class=\"referral-form-labels\" for=\"organizationConfig\">{{ translate('Organization') }}\n                <span class=\"required\" aria-hidden=\"true\">*</span>\n              </label>\n              <p-dropdown\n                styleClass=\"w-100\"\n                [options]=\"configOptions\"\n                [placeholder]=\"translate('Select Organization')\"\n                inputId=\"organizationConfig\"\n                optionLabel=\"organization_title\"\n                optionValue=\"id\"\n                [(ngModel)]=\"selectedConfigId\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (onChange)=\"onConfigSelectionChange($event.value)\"\n                [filter]=\"true\"\n                filterBy=\"organization_title\">\n              </p-dropdown>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-6 col-12\">\n              <div class=\"narrative-textarea\">\n                <label class=\"referral-form-labels\" for=\"organization_title\">{{ translate('Organization Title') }}\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                </label>\n                <div class=\"position-relative\">\n                  @if (!isEditingOrganization) {\n                    <textarea id=\"organization_title\" class=\"form-control\" [value]=\"getOrganizationPlainText()\"\n                      (input)=\"updateOrganizationTitle($event)\" [placeholder]=\"translate('Enter Organization Title')\"\n                      aria-required=\"true\"\n                      style=\"padding-right: 35px; resize: vertical;\"></textarea>\n                    <i class=\"pi pi-pencil edit-field-icon\" role=\"button\" tabindex=\"0\"\n                      [attr.aria-label]=\"translate('Edit Organization Title')\"\n                      (click)=\"toggleEdit('organization')\"\n                      (keydown.enter)=\"toggleEdit('organization')\"\n                      (keydown.space)=\"$event.preventDefault(); toggleEdit('organization')\"></i>\n                  } @else {\n                    <quill-editor [modules]=\"quillModules\" formControlName=\"organization_title\"\n                      [styles]=\"{'min-height':'60px'}\" (onBlur)=\"toggleEdit('organization')\">\n                    </quill-editor>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-6 col-12\">\n              <div class=\"narrative-textarea\">\n                <label class=\"referral-form-labels\" for=\"banner_title\">{{ translate('Banner Title') }}\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                </label>\n                <div class=\"position-relative\">\n                  @if (!isEditingBanner) {\n                    <textarea id=\"banner_title\" class=\"form-control\" [value]=\"getBannerPlainText()\"\n                      (input)=\"updateBannerTitle($event)\" [placeholder]=\"translate('Enter banner display text')\"\n                      aria-required=\"true\"\n                      style=\"padding-right: 35px; resize: vertical;\"></textarea>\n                    <i class=\"pi pi-pencil edit-field-icon\" role=\"button\" tabindex=\"0\"\n                      [attr.aria-label]=\"translate('Edit Banner Title')\"\n                      (click)=\"toggleEdit('banner')\"\n                      (keydown.enter)=\"toggleEdit('banner')\"\n                      (keydown.space)=\"$event.preventDefault(); toggleEdit('banner')\"></i>\n                  } @else {\n                    <quill-editor [modules]=\"quillModules\" formControlName=\"banner_title\" [styles]=\"{'min-height':'60px'}\"\n                      (onBlur)=\"toggleEdit('banner')\">\n                    </quill-editor>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"></rect>\n              <circle cx=\"9\" cy=\"9\" r=\"2\"></circle>\n              <path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Brand Assets') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Upload your brand images and logos') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row\">\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"referral-form-labels\" for=\"upload_banner\">{{ translate('Banner Image') }}\n                <span class=\"required\" aria-hidden=\"true\">*</span>\n              </label>\n              <div class=\"clsUploadBannerCard clsBrandAssetsCards\">\n                <div class=\"clsBannerImgSec\">\n                  <div class=\"clsBannerImg\">\n                    <img [src]=\"thumbnailBanner || 'assets/images/sample-banner.png'\"\n                      [attr.alt]=\"translate('Banner image preview')\" />\n                  </div>\n\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\n                    [attr.aria-label]=\"translate('Preview Banner')\" (click)=\"showUploadedBanner()\"\n                    (keydown.enter)=\"showUploadedBanner()\"\n                    (keydown.space)=\"$event.preventDefault(); showUploadedBanner()\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n\n                  <p-dialog [header]=\"translate('Banner Preview')\" [(visible)]=\"bannerVisible\" [modal]=\"true\">\n                    <div class=\"text-center\">\n                      <img class=\"img-fluid\" [attr.src]=\"thumbnailBanner || 'assets/images/sample-banner.png'\"\n                        [attr.alt]=\"translate('Banner Preview')\" />\n                    </div>\n                  </p-dialog>\n\n                  <div class=\"clsUploadBtnIcon\">\n                    <label for=\"upload_banner\" class=\"clsUploadIcon cursor-pointer mb-0\">\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\n                      <span class=\"sr-only\">{{ translate('Upload Banner') }}</span>\n                    </label>\n                    <input type=\"file\" id=\"upload_banner\" style=\"display: none\"\n                      (change)=\"handleFileInputBanner($event)\" />\n                  </div>\n                </div>\n                <div class=\"clsUploadBtnSec text-center\">\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('upload_banner')\">\n                    {{ translate('Replace Banner') }}\n                  </button>\n                  <p class=\"mb-0 mt-1\"><small>{{ translate('Image size max 1MB (1600 x 900 px)') }}</small></p>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"referral-form-labels\" for=\"upload_logo\">{{ translate('Company Logo') }}\n                <span class=\"required\" aria-hidden=\"true\">*</span>\n              </label>\n              <div class=\"clsUploadLogoCard clsBrandAssetsCards\">\n                <div class=\"clsLogoImgSec\">\n                  <div class=\"clsLogoImg\">\n                    <img [attr.src]=\"thumbnailLogo || 'assets/images/logo_home.png'\"\n                      [attr.alt]=\"translate('Company logo preview')\" />\n                  </div>\n\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\n                    [attr.aria-label]=\"translate('Preview Logo')\" (click)=\"showUploadedLogo()\"\n                    (keydown.enter)=\"showUploadedLogo()\"\n                    (keydown.space)=\"$event.preventDefault(); showUploadedLogo()\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n\n                  <p-dialog [header]=\"translate('Logo Preview')\" [(visible)]=\"visible\" [modal]=\"true\" [style]=\"{ width: '600px' }\">\n                    <div class=\"text-center\">\n                      <img class=\"img-fluid\" [src]=\"thumbnailLogo || 'assets/images/logo_home.png'\"\n                        [attr.alt]=\"translate('Logo Preview')\" />\n                    </div>\n                  </p-dialog>\n\n                  <div class=\"clsUploadBtnIcon\">\n                    <label for=\"upload_logo\" class=\"clsUploadIcon cursor-pointer mb-0\">\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\n                      <span class=\"sr-only\">{{ translate('Upload Logo') }}</span>\n                    </label>\n                    <input type=\"file\" id=\"upload_logo\" style=\"display: none\"\n                      (change)=\"handleFileInput($event)\" />\n                  </div>\n                </div>\n\n                <div class=\"clsUploadBtnSec text-center\">\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('upload_logo')\">\n                    {{ translate('Replace Logo') }}\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label for=\"labelColor\" class=\"referral-form-labels\">{{ translate('Pick Label Color') }}\n                <span class=\"required\" aria-hidden=\"true\">*</span>\n              </label>\n              <div class=\"clsColorPickCard clsBrandAssetsCards\">\n                <div class=\"clearfix\">\n                  <label class=\"intake-form-labels\" for=\"userLabel\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Label - Username/Email') }}\n                  </label>\n                  <input-empower id=\"userLabel\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Label Name')\" formControlName=\"userLabel\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"emailPlaceholder\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Label Placeholder - Email') }}\n                  </label>\n                  <input-empower id=\"emailPlaceholder\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Email Placeholder')\" formControlName=\"emailPlaceholder\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"passwordLabel\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Label - Password') }}\n                  </label>\n                  <input-empower id=\"passwordLabel\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Password Label')\"\n                    formControlName=\"passwordLabel\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"passwordPlaceholder\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Label Placeholder Password') }}\n                  </label>\n                  <input-empower id=\"passwordPlaceholder\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Password Placeholder')\"\n                    formControlName=\"passwordPlaceholder\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"loginButtonLabel\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Button Label Name') }}\n                  </label>\n                  <input-empower id=\"loginButtonLabel\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Login Button Label')\"\n                    formControlName=\"loginButtonLabel\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"registerButtonPrefix\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Register Button Prefix') }}\n                  </label>\n                  <input-empower id=\"registerButtonPrefix\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Register Prefix')\"\n                    formControlName=\"registerButtonPrefix\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"registerButtonLabel\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Register Button Label Name') }}\n                  </label>\n                  <input-empower id=\"registerButtonLabel\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Register Button Label')\"\n                    formControlName=\"registerButtonLabel\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-2\">\n                  <input type=\"color\" id=\"labelColor\" formControlName=\"labelColor\"\n                    [attr.aria-label]=\"translate('Pick Label Color')\" class=\"form-control w-100px h-30px p-0\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect>\n              <path d=\"M3 9h18\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Login Page Templates') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Choose your preferred login page layout') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"clsScrollWrapper\">\n            <button class=\"clsScrollBtn clsScrollBtnLeft\" [attr.aria-label]=\"translate('Scroll tabs left')\"\n              (click)=\"scrollTabs('login', loginScrollBox, -200)\"\n              [disabled]=\"isAtStart['login']\">\n              <span class=\"material-symbols-outlined\" aria-hidden=\"true\">chevron_left</span>\n            </button>\n\n            <!-- Scrollable Template Section -->\n            <div class=\"clsScrollContainer\" #loginScrollBox>\n              <div class=\"clsScrollTemplatesLists row m-0\">\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight'\"\n                    (click)=\"selectLoginTemplate('loginTemplateRight')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateRight')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateRight')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-right.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-right.png\" alt=\"Login Right\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between align-items-center\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Right') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the right side') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft'\"\n                    (click)=\"selectLoginTemplate('loginTemplateLeft')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateLeft')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateLeft')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-left.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-left.png\" alt=\"Login Left\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Left') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the left side') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter'\"\n                    (click)=\"selectLoginTemplate('loginTemplateCenter')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateCenter')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateCenter')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-center.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-center.png\" alt=\"Login Center\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Center') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form centered on the page') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom'\"\n                    (click)=\"selectLoginTemplate('loginTemplateBottom')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateBottom')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateBottom')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-bottom.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-bottom.png\" alt=\"Login Bottom\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Bottom') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the Bottom side') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve'\"\n                    (click)=\"selectLoginTemplate('loginTemplateCurve')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateCurve')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateCurve')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-curve.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-curve.png\" alt=\"Login Radius\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Radius') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Banner on the left side, curve') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow'\"\n                    (click)=\"selectLoginTemplate('loginTemplateHideShow')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateHideShow')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateHideShow')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-hide-ui.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-hide-ui.png\"\n                        alt=\"Login form hide & Show\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login form hide & Show') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form on the hide & Show') }}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <button class=\"clsScrollBtn clsScrollBtnRight\" [attr.aria-label]=\"translate('Scroll tabs right')\"\n              (click)=\"scrollTabs('login', loginScrollBox, 200)\"\n              [disabled]=\"isAtEnd['login']\">\n              <span class=\"material-symbols-outlined\" aria-hidden=\"true\">chevron_right</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"></rect>\n              <line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"></line>\n              <line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"></line>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Footer Templates') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Footer layout options') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"clsScrollTemplatesLists row\">\n            <div class=\"col-md-6 col-12\">\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                [class.active]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight'\"\n                [attr.aria-pressed]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight'\"\n                (click)=\"selectFooterTemplate('versionTemplateRight')\"\n                (keydown.enter)=\"selectFooterTemplate('versionTemplateRight')\"\n                (keydown.space)=\"$event.preventDefault(); selectFooterTemplate('versionTemplateRight')\">\n                <div class=\"clsTemplatesImg align-items-center d-flex justify-content-center h-70px\"\n                  (click)=\"openPreview('../../../../assets/images/base-product/footer-left.png'); $event.stopPropagation()\">\n                  <div class=\"d-flex justify-content-between p-10 w-100\">\n                    <strong class=\"text-12\">{{ translate('Stable') }} Version 2.5</strong>\n                    <strong class=\"text-12\">\n                      &copy; {{ currentYear }} {{ translate('Powered by') }}\n                      <span class=\"w-100px d-inline-block\">\n                        <img src=\"assets/images/cardinality-logo_text.svg\" alt=\"cardy\">\n                      </span>\n                    </strong>\n                  </div>\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n                </div>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <h4 class=\"clsTextLine1 mb-0\">{{ translate('Footer Left & Right') }}</h4>\n                  @if (configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight') {\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                  }\n                </div>\n                <p class=\"clsTextLine2 mb-0\"> {{ translate('Version left, copyright and powered by text right') }} </p>\n              </div>\n            </div>\n\n            <div class=\"col-md-6 col-12\">\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                [class.active]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter'\"\n                [attr.aria-pressed]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter'\"\n                (click)=\"selectFooterTemplate('versionTemplateCenter')\"\n                (keydown.enter)=\"selectFooterTemplate('versionTemplateCenter')\"\n                (keydown.space)=\"$event.preventDefault(); selectFooterTemplate('versionTemplateCenter')\">\n                <div class=\"clsTemplatesImg align-items-center d-flex justify-content-center h-70px\"\n                  (click)=\"openPreview('../../../../assets/images/base-product/footer-center.png'); $event.stopPropagation()\">\n                  <div class=\"d-flex justify-content-center p-10 w-100 gap-2\">\n                    <strong class=\"text-12\">{{ translate('Stable') }} Version 2.5</strong>\n                    <strong class=\"text-12\">&copy; {{ currentYear }}</strong>\n                    <strong class=\"text-12\">\n                      {{ translate('Powered by') }}\n                      <span class=\"w-100px d-inline-block ms-1\">\n                        <img src=\"assets/images/cardinality-logo_text.svg\" alt=\"cardy\">\n                      </span>\n                    </strong>\n                  </div>\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n                </div>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <h4 class=\"clsTextLine1 mb-0\">{{ translate('Footer Center') }}</h4>\n                  @if (configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter') {\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                  }\n                </div>\n                <p class=\"clsTextLine2 mb-0\"> {{ translate('All footer text centered in single line') }} </p>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"row row-gap-15 pt-15\">\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"organizationName\">{{ translate('Right') }}</label>\n              <input-empower class=\"form-control\" type=\"text\" [placeholder]=\"translate('Version')\" id=\"organizationName\" autocomplete=\"off\"\n                formControlName=\"version\"></input-empower>\n            </div>\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"content\">{{ translate('Left') }}</label>\n              <input-empower class=\"form-control\" type=\"text\" [placeholder]=\"translate('Content')\" id=\"content\" autocomplete=\"off\"\n                formControlName=\"content\"></input-empower>\n            </div>\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <fieldset class=\"border-0 p-0 m-0\">\n                <legend class=\"intake-form-labels mb-1\" id=\"show_footer_legend\">{{ translate('Show Footer') }}</legend>\n                <div class=\"d-flex gap-15\" role=\"group\" aria-labelledby=\"show_footer_legend\">\n                  <div class=\"d-flex align-items-center\">\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"loginOnly\"\n                      inputId=\"loginOnly\"></p-radioButton>\n                    <label for=\"loginOnly\" class=\"ml-2 mb-0\">{{ translate('Login Only') }}</label>\n                  </div>\n\n                  <div class=\"d-flex align-items-center\">\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"pageOnly\"\n                      inputId=\"pageOnly\"></p-radioButton>\n                    <label for=\"pageOnly\" class=\"ml-2 mb-0\">{{ translate('Page Only') }}</label>\n                  </div>\n\n                  <div class=\"d-flex align-items-center\">\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"both\"\n                      inputId=\"both\"></p-radioButton>\n                    <label for=\"both\" class=\"ml-2 mb-0\">{{ translate('Both') }}</label>\n                  </div>\n                </div>\n              </fieldset>\n            </div>\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <label class=\"referral-form-labels\" for=\"uploadPoweredBy\">{{ translate('Powered by Footer Logo') }}</label>\n              <div class=\"clsUploadLogoCard clsBrandAssetsCards\">\n                <div class=\"clsLogoImgSec\">\n                  <div class=\"clsLogoImg\">\n                    <img [attr.src]=\"thumbnailPoweredLogo || 'assets/images/logo_home.png'\"\n                      [attr.alt]=\"translate('Powered by footer logo preview')\" />\n                  </div>\n\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\n                    [attr.aria-label]=\"translate('Preview Footer Logo')\" (click)=\"showUploadedFooterLogo()\"\n                    (keydown.enter)=\"showUploadedFooterLogo()\"\n                    (keydown.space)=\"$event.preventDefault(); showUploadedFooterLogo()\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n\n                  <p-dialog [header]=\"translate('Logo Preview')\" [(visible)]=\"logoFooterVisible\" [modal]=\"true\"\n                    [style]=\"{ width: '600px' }\">\n                    <div class=\"text-center\">\n                      <img class=\"img-fluid\" [src]=\"thumbnailPoweredLogo || 'assets/images/logo_home.png'\"\n                        [attr.alt]=\"translate('Powered by footer logo preview')\" />\n                    </div>\n                  </p-dialog>\n\n                  <div class=\"clsUploadBtnIcon\">\n                    <label for=\"uploadPoweredBy\" class=\"clsUploadIcon cursor-pointer mb-0\">\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\n                      <span class=\"sr-only\">{{ translate('Upload Powered By Logo') }}</span>\n                    </label>\n                    <input type=\"file\" id=\"uploadPoweredBy\" style=\"display: none\"\n                      (change)=\"handleFileFooterInput($event)\" />\n                  </div>\n                </div>\n\n                <div class=\"clsUploadBtnSec text-center\">\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('uploadPoweredBy')\">\n                    {{ translate('Replace Logo') }}\n                  </button>\n                  <p class=\"mb-0 mt-1\"><small>{{ translate('Image size max 120kb (400 x 60 px)') }}</small></p>\n                </div>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n      <!-- <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <path\n                d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">Server Maintenance Templates</h4>\n            <p class=\"clsSubHeaderTitle\">Maintenance page layouts</p>\n          </div>\n        </div> -->\n\n        <!-- <div class=\"p-25 border rounded-16\">\n          <div class=\"clsScrollTemplatesLists row\">\n            <div class=\"col-md-6 col-12\">\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                [class.active]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne'\"\n                [attr.aria-pressed]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne'\"\n                (click)=\"selectServerTemplate('serverTemplateOne')\"\n                (keydown.enter)=\"selectServerTemplate('serverTemplateOne')\"\n                (keydown.space)=\"$event.preventDefault(); selectServerTemplate('serverTemplateOne')\">\n                <div class=\"clsTemplatesImg\"\n                  (click)=\"openPreview('../../../../assets/images/base-product/server-1.png'); $event.stopPropagation()\">\n                  <img src=\"../../../../assets/images/base-product/server-1.png\" alt=\"Server Maintenance\" />\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n                </div>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <h4 class=\"clsTextLine1 mb-0\">Server Maintenance</h4>\n                  @if (configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne') {\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-6 col-12\">\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                [class.active]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo'\"\n                [attr.aria-pressed]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo'\"\n                (click)=\"selectServerTemplate('serverTemplateTwo')\"\n                (keydown.enter)=\"selectServerTemplate('serverTemplateTwo')\"\n                (keydown.space)=\"$event.preventDefault(); selectServerTemplate('serverTemplateTwo')\">\n                <div class=\"clsTemplatesImg\"\n                  (click)=\"openPreview('../../../../assets/images/base-product/server-2.png'); $event.stopPropagation()\">\n                  <img src=\"../../../../assets/images/base-product/server-2.png\" alt=\"Scheduled Maintenance\">\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n                </div>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <h4 class=\"clsTextLine1 mb-0\">Scheduled Maintenance</h4>\n                  @if (configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo') {\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </div> -->\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <path d=\"M20 7h-9\"></path>\n              <path d=\"M14 17H5\"></path>\n              <circle cx=\"17\" cy=\"17\" r=\"3\"></circle>\n              <circle cx=\"7\" cy=\"7\" r=\"3\"></circle>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Login Preferences') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Configure available authentication features') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row clsPreferencesList row-gap-15\">\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"fp\">{{ translate('Forgot Password') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('forgotPassword')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('forgotPassword')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('forgotPassword')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"fp\" formControlName=\"forgotPassword\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"tac\">{{ translate('Terms & conditions') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('termsAndCondition')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('termsAndCondition')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('termsAndCondition')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"tac\" formControlName=\"termsAndCondition\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enableReg\">{{ translate('Enable Registration') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enableRegistration')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enableRegistration')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enableRegistration')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enableReg\" formControlName=\"enableRegistration\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_mfaId\">{{ translate('Enable Multifactor Authentication') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enable_mfa')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_mfa')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enable_mfa')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enable_mfaId\" formControlName=\"enable_mfa\" (onChange)=\"onMfaValidation()\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <!-- <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_captchaId\">Enable Captcha</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enable_captcha')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_captcha')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enable_captcha')?.value ? 'Enabled' : 'Disabled' }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enable_captchaId\" formControlName=\"enable_captcha\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div> -->\n\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_footerId\">{{ translate('Enable Footer') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enable_footer')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_footer')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enable_footer')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enable_footerId\" formControlName=\"enable_footer\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <!-- <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"google_translateId\">Enable Google Translate</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enable_google_translate')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_google_translate')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enable_google_translate')?.value ? 'Enabled' : 'Disabled' }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"google_translateId\" formControlName=\"enable_google_translate\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div> -->\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"></path>\n              <path d=\"M14 2v4a2 2 0 0 0 2 2h4\"></path>\n              <path d=\"M10 9H8\"></path>\n              <path d=\"M16 13H8\"></path>\n              <path d=\"M16 17H8\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Terms & conditions') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Legal agreements and compliance text') }} </p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"narrative-textarea \">\n            <span class=\"referral-form-labels\" id=\"terms_condition_template-label\">{{ translate('Legal Description') }}\n              <span class=\"required\" aria-hidden=\"true\">*</span>\n            </span>\n            <div role=\"group\" [attr.aria-labelledby]=\"'terms_condition_template-label'\">\n              <quill-editor [modules]=\"quillModules\" [styles]=\"{'height':'100px'}\"\n                formControlName=\"terms_condition_template\"\n                [attr.aria-label]=\"translate('Legal Description')\"\n                [attr.aria-required]=\"true\">\n              </quill-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn iconBgColor_8\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"></path>\n              <path d=\"M2 12h20\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Advanced Configuration') }}</h4>\n            <p class=\"clsSubHeaderTitle\"> {{ translate('System-level authentication settings') }} </p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row row-gap-15\">\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"multifactor_template\">\n                {{ translate('Multifactor Authentication Channel') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <p-select-empower class=\"w-100\" id=\"multifactor_template\" optionLabel=\"name\" optionValue=\"value\"\n                [options]=\"multifactorTemplates\"\n                [placeholder]=\"translate('Select MFA channel')\" formControlName=\"multifactor_template\"\n                [required]=\"!!configRegistrationForm.get('enable_mfa')?.value\"\n                [aria-describedby]=\"configRegistrationForm.get('multifactor_template')?.invalid && configRegistrationForm.get('multifactor_template')?.touched ? 'multifactor_template-errors' : null\">\n              </p-select-empower>\n              @if (configRegistrationForm.get('multifactor_template')?.invalid && configRegistrationForm.get('multifactor_template')?.touched) {\n                <small id=\"multifactor_template-errors\" class=\"text-danger\" role=\"alert\">\n                  {{ translate('Multifactor Authentication Channel is required.') }}\n                </small>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"otp_digits\">\n                {{ translate('OTP Verification Digits') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <inputnumber-empower min=\"4\" max=\"6\" class=\"form-control\" id=\"otp_digits\" formControlName=\"otp_digits\"\n                [placeholder]=\"translate('Enter OTP Verification Digits')\"\n                [aria-describedby]=\"otpControl.invalid && otpControl.touched ? 'otp_digits-errors' : null\"\n                [class.is-invalid]=\"otpControl.invalid && (otpControl.dirty || otpControl.touched)\"></inputnumber-empower>\n              @if (otpControl.invalid && otpControl.touched) {\n                <div id=\"otp_digits-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                  @if (otpControl.errors?.['required']) {\n                    <span>{{ translate('OTP Verification Digits is required.') }}</span>\n                  }\n                  @if (otpControl.errors?.min || otpControl.errors?.max) {\n                    <span>{{ translate('Enter a valid number of digits between 4 and 6.') }}</span>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"otp_expire_time\">\n                {{ translate('OTP Expire Time (In Minutes)') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <inputnumber-empower class=\"form-control\" id=\"otp_expire_time\" formControlName=\"otp_expire_time\"\n                [placeholder]=\"translate('Enter OTP Expire Time')\"\n                [aria-describedby]=\"otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched) ? 'otp_expire_time-errors' : null\"\n                [class.is-invalid]=\"otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched)\"></inputnumber-empower>\n              @if (otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched)) {\n                <div id=\"otp_expire_time-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                  @if (otpExpireControl.errors?.['required']) {\n                    <span>{{ translate('OTP Expire Time is required.') }}</span>\n                  }\n                  @if (otpExpireControl.errors?.min || otpExpireControl.errors?.max) {\n                    <span>{{ translate('Enter a valid OTP expire time between 1 and 30 minutes.') }}</span>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"resend_otp_delay\">\n                {{ translate('Resend OTP Delay (In Minutes)') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <inputnumber-empower min=\"0.5\" max=\"10\" step=\"0.1\" class=\"form-control\" id=\"resend_otp_delay\" formControlName=\"resend_otp_delay\"\n                [placeholder]=\"translate('Enter Resend OTP Delay')\"\n                [aria-describedby]=\"resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched) ? 'resend_otp_delay-errors' : null\"\n                [class.is-invalid]=\"resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched)\"></inputnumber-empower>\n              @if (resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched)) {\n                <div id=\"resend_otp_delay-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                  @if (resendDelayControl.errors?.['required']) {\n                    <span>{{ translate('Resend OTP Delay is required.') }}</span>\n                  }\n                  @if (resendDelayControl.errors?.min || resendDelayControl.errors?.max) {\n                    <span>{{ translate('Enter a valid resend delay between 0.5 and 10 minutes.') }}</span>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"forget_config\">\n                {{ translate('Forget Password Config') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <p-select-empower class=\"w-100\" id=\"forget_config\" optionLabel=\"name\" formControlName=\"forget_config\" optionValue=\"value\"\n                [options]=\"forgetPasswordConfig\" [placeholder]=\"translate('Select Forget Password Config')\"\n                [required]=\"!!configRegistrationForm.get('enable_mfa')?.value\"\n                [aria-describedby]=\"configRegistrationForm.get('forget_config')?.invalid && configRegistrationForm.get('forget_config')?.touched ? 'forget_config-errors' : null\">\n              </p-select-empower>\n              @if (configRegistrationForm.get('forget_config')?.invalid && configRegistrationForm.get('forget_config')?.touched) {\n                <small id=\"forget_config-errors\" class=\"text-danger\" role=\"alert\">\n                  {{ translate('Forget Password Config is required.') }}\n                </small>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"forgot_email_expire_time\">\n                {{ translate('Forgot Email Expire Time(In Minutes)') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <inputnumber-empower min=\"1\" max=\"60\" class=\"form-control\" id=\"forgot_email_expire_time\" formControlName=\"forget_expire_time\"\n                [placeholder]=\"translate('Enter Forgot Email Expire Time')\"\n                [aria-describedby]=\"forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched) ? 'forgot_email_expire_time-errors' : null\"\n                [class.is-invalid]=\"forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched)\"></inputnumber-empower>\n              @if (forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched)) {\n                <div id=\"forgot_email_expire_time-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                  @if (forgetExpireControl.errors?.['required']) {\n                    <span>{{ translate('Forgot Email Expire Time is required.') }}</span>\n                  }\n                  @if (forgetExpireControl.errors?.min || forgetExpireControl.errors?.max) {\n                    <span>{{ translate('Enter a valid forgot email expire time between 1 and 60 minutes.') }}</span>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <polyline points=\"12 6 12 12 16 14\"></polyline>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">Account Lockout Settings</h4>\n            <p class=\"clsSubHeaderTitle\">Configure login attempt limits and account lockout settings</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row row-gap-15\">\n            <div class=\"col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enableLoginAttemptThrottling\">Enable Time-Based Login Attempt Limits</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enableLoginAttemptThrottling')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enableLoginAttemptThrottling')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enableLoginAttemptThrottling')?.value ? 'Enabled' : 'Disabled' }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enableLoginAttemptThrottling\" formControlName=\"enableLoginAttemptThrottling\"  (onChange)=\"onLoginAttemptThrottlingChange()\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            @if (configRegistrationForm.get('enableLoginAttemptThrottling')?.value) {\n              <div class=\"col-lg-6 col-md-6 col-12\">\n                <label class=\"intake-form-labels\" for=\"lockoutWindowMinutes\">{{ translate('Failed Login Attempt Window (minutes)') }}\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                </label>\n                <inputnumber-empower class=\"form-control\" id=\"lockoutWindowMinutes\" formControlName=\"lockoutWindowMinutes\"\n                  [placeholder]=\"translate('Enter lock window duration in minutes')\"\n                  [aria-describedby]=\"lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched) ? 'lockoutWindowMinutes-errors' : null\"\n                  [class.is-invalid]=\"lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched)\"></inputnumber-empower>\n                @if (lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched)) {\n                  <div id=\"lockoutWindowMinutes-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                    @if (lockoutWindowControl?.errors?.['required']) {\n                      <span>{{ translate('Failed Login Attempt Window is required.') }}</span>\n                    }\n                    @if (lockoutWindowControl?.errors?.['min']) {\n                      <span>{{ translate('Enter a valid Login Attempt Window (Minutes).') }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            @if (configRegistrationForm.get('enableLoginAttemptThrottling')?.value) {\n              <div class=\"col-lg-6 col-md-6 col-12\">\n                <label class=\"intake-form-labels\" for=\"lockoutDurationMinutes\">{{ translate('Account Lockout Duration (minutes)') }}\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                </label>\n                <inputnumber-empower class=\"form-control\" id=\"lockoutDurationMinutes\" formControlName=\"lockoutDurationMinutes\"\n                  [placeholder]=\"translate('Enter lock duration in minutes')\"\n                  [aria-describedby]=\"lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched) ? 'lockoutDurationMinutes-errors' : null\"\n                  [class.is-invalid]=\"lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched)\"></inputnumber-empower>\n                @if (lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched)) {\n                  <div id=\"lockoutDurationMinutes-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                    @if (lockoutDurationControl?.errors?.['required']) {\n                      <span>{{ translate('Account Lockout Duration is required.') }}</span>\n                    }\n                    @if (lockoutDurationControl?.errors?.['min']) {\n                      <span>{{ translate('Enter a valid lock duration.') }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <p-card styleClass=\" w-100 mt-3\">\n    <div class=\"customizer\" [formGroup]=\"configRegistrationForm\">\n      <div class=\"text-md-right mt-2 mb-4 previewsumbitBtn\">\n        @if (showFormErrors && configRegistrationForm.invalid) {\n          <div class=\"text-danger text-left mb-2\" role=\"alert\">\n            <p class=\"mb-1\">{{ translate('Please fix the following:') }}</p>\n            <ul class=\"mb-0\">\n              @for (msg of getInvalidFieldMessages(); track msg) {\n                <li>{{ msg }}</li>\n              }\n            </ul>\n          </div>\n        }\n        @if (activeTab === 'home' || activeTab === 'kms-sub1' || activeTab === 'profile') {\n          <button-empower type=\"button\" class=\"btn btn-primary\" (click)=\"previewLogin()\">\n            {{ translate('Preview') }}\n          </button-empower>\n        }\n        <button-empower type=\"button\" class=\"btn btn-primary\" (click)=\"saveConfig()\">\n          {{ updateButton ? translate('Update') : translate('Submit') }}\n        </button-empower>\n      </div>\n    </div>\n  </p-card>\n\n  <!-- Preview Modal -->\n  <p-dialog [(visible)]=\"showPreviewModal\" [modal]=\"true\" [style]=\"{ width: '100vw', height: '100vh' }\"\n    [header]=\"translate('Login Preview')\" [closable]=\"true\" class=\"loginpreviewdialog\">\n    <!-- create preview only after previewLoginInfo is set -->\n    @if (showPreviewModal && previewLoginInfo) {\n      <lib-config-login-preview [previewData]=\"previewLoginInfo\" [i18n]=\"i18n\"></lib-config-login-preview>\n    }\n  </p-dialog>\n\n  <p-dialog [header]=\"translate('Template Preview')\" [(visible)]=\"previewVisible\" [modal]=\"true\" [closable]=\"true\">\n    <img class=\"img-fluid\" [src]=\"previewImageUrl || 'assets/images/base-product/footer-left.png'\"\n      alt=\"Preview\" />\n  </p-dialog>", styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-14);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-13);color:var(--text-dark)}.customizer p{font-size:var(--font-13);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}.mt-10{margin-top:10px}.previewsumbitBtn{margin-bottom:5%!important;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}:host ::ng-deep .previewsumbitBtn .btn:focus-visible,:host ::ng-deep .previewsumbitBtn button:focus-visible,:host ::ng-deep .clsUploadBtn:focus-visible,:host ::ng-deep .clsScrollBtn:focus-visible{outline:2px solid #0d3178!important;outline-offset:2px;box-shadow:0 0 0 2px #0d317833}.required{color:#d93c2c}.edit-field-icon{position:absolute;right:12px;top:12px;color:#747474;font-size:14px;cursor:pointer}.edit-field-icon:focus-visible{outline:2px solid #0d3178;outline-offset:2px}.clsImgOverlay:focus-visible{outline:2px solid #fff;outline-offset:-2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}fieldset legend.intake-form-labels{float:none;width:auto;font-size:inherit;line-height:inherit}:host ::ng-deep .p-dialog-mask{z-index:9999!important}.tabSection .nav-tabs .nav-item.show .nav-link,.tabSection .nav-tabs .nav-link.active{background-color:var(--primary);color:var(--white)}.tabSection .nav-tabs .nav-link{border:none;background:transparent;cursor:pointer}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mr-2{margin-right:.5rem}.mb-4{margin-bottom:1.5rem}.rounded-16{border-radius:16px}.p-25{padding:25px}.gap-12{gap:12px}.mt-25{margin-top:25px}.text-12{font-size:12px;line-height:20px}.w-100px{width:100px!important}.row-gap-15{row-gap:15px!important}.d-inline-block{display:inline-block!important}.clsHeaderGrp .clsIconBtn{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:#0b0b0b}.clsHeaderGrp .clsHeaderTitle{font-size:20px;line-height:28px;color:#000;margin:0}.clsHeaderGrp .clsSubHeaderTitle{font-size:14px;line-height:20px;color:#666;margin:0}.clsBrandAssetsCards{border-radius:16px;border:solid 2px var(--border-color);overflow:hidden}.clsBrandAssetsCards:hover{border:solid 2px var(--primary)}.clsBrandAssetsCards.clsUploadBannerCard:hover .clsBannerImgSec .clsImgOverlay{opacity:1}.clsBrandAssetsCards.clsUploadBannerCard:hover .clsBannerImgSec .clsUploadBtnIcon{visibility:visible}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec{position:relative}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsBannerImg{width:100%;height:150px;position:relative;transition:all .03s linear 0s}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsBannerImg img{width:100%;height:100%;object-fit:cover}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay:focus-visible{opacity:1}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsUploadBtnIcon{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#2e5bfe,#aa37f1);position:absolute;top:15px;right:15px;visibility:hidden;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec{padding:15px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec .clsUploadBtn{font-size:14px;line-height:20px;padding:7px 12px;text-align:center;border:solid 1px var(--border-color);background-color:#fff;border-radius:999px;margin:0;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec .clsUploadBtn:hover{background-color:#f4f4f5}.clsBrandAssetsCards.clsUploadLogoCard:hover .clsLogoImgSec .clsImgOverlay{opacity:1}.clsBrandAssetsCards.clsUploadLogoCard:hover .clsLogoImgSec .clsUploadBtnIcon{visibility:visible}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec{position:relative;padding:30px;background:#f3f7fa;height:150px;display:flex;align-items:center;justify-content:center}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsLogoImg{margin:0 auto;cursor:pointer;position:relative;transition:all .03s linear 0s}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsLogoImg img{width:100%;height:100%}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay:focus-visible{opacity:1}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsUploadBtnIcon{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#2e5bfe,#aa37f1);position:absolute;top:15px;right:15px;visibility:hidden;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec{padding:15px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec .clsUploadBtn{font-size:14px;line-height:20px;padding:7px 12px;text-align:center;border:solid 1px var(--border-color);background-color:#fff;border-radius:999px;margin:0;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec .clsUploadBtn:hover{background-color:#f4f4f5}.clsBrandAssetsCards.clsColorPickCard{padding:32px 20px}.clsScrollWrapper{position:relative;display:flex;align-items:center}.clsScrollWrapper .clsScrollContainer{overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-behavior:smooth;width:100%;-ms-overflow-style:none;scrollbar-width:none}.clsScrollWrapper .clsScrollContainer::-webkit-scrollbar{display:none}.clsScrollWrapper .clsScrollBtn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ccc;border-radius:999px;width:35px;height:35px;display:inline-flex;flex:0 0 35px;align-items:center;justify-content:center;text-align:center;cursor:pointer;z-index:10;box-shadow:0 2px 6px #0003}.clsScrollWrapper .clsScrollBtn.clsScrollBtnLeft{left:-25px}.clsScrollWrapper .clsScrollBtn.clsScrollBtnRight{right:-25px}.clsScrollWrapper .clsScrollBtn:disabled{cursor:not-allowed}.clsScrollTemplatesLists{flex-wrap:nowrap}.clsScrollTemplatesLists .clsScrollTemplatesItem{border-radius:16px;border:solid 2px var(--border-color);padding:20px;background-color:#fff;transition:transform .3s linear;cursor:pointer;display:flex;flex-direction:column;height:100%}.clsScrollTemplatesLists .clsScrollTemplatesItem:hover{transform:scale(1.01)}.clsScrollTemplatesLists .clsScrollTemplatesItem:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.clsScrollTemplatesLists .clsScrollTemplatesItem.active{border:solid 2px var(--primary);background-color:var(--primary-light);transform:scale(1.01)}.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsTextLine1,.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsTextLine2,.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsCheckIcon{color:#fff}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg{position:relative;border-radius:12px;width:100%;height:90px;overflow:hidden;background-color:#afd9fb;margin-bottom:15px}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg:hover .clsImgOverlay{opacity:1}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay:focus-visible{opacity:1}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTextLine1{font-size:14px;line-height:20px;font-weight:600;color:#000}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTextLine2{font-size:12px;line-height:16px;font-weight:400;color:#333;margin-top:5px;white-space:normal}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsCheckIcon{color:var(--primary);font-size:20px}.clsPreferencesList .clsPreferencesListItem{padding:15px;border:solid 1px var(--border-color);border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;height:100%}.clsPreferencesList .clsPreferencesListItem .clsStatusDot{width:8px;height:8px;border-radius:50%}.clsPreferencesList .clsPreferencesListItem .clsStatusDot.clsEnabledDot{background-color:#28a745}.clsPreferencesList .clsPreferencesListItem .clsStatusDot.clsDisabledDot{background-color:#ccc}.clsPreferencesList .clsPreferencesListItem .clsStatusTxt{font-size:12px;line-height:16px;color:#6c757d}.popup-body{display:flex;flex-direction:column;gap:12px;padding-top:10px}.popup-card{border:1px solid #dee2e6;border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .2s ease-in-out}.popup-card:hover{background-color:#f8f9fa;transform:translateY(-2px)}.popup-label{font-weight:500;color:#333}.upload-container{display:flex;flex-direction:column;gap:2rem}.upload-container{max-width:100%}.upload-box{border:2px dashed #cbd5e0!important;border-radius:12px!important;padding:20px!important;text-align:center!important;transition:border-color .3s!important}.upload-box:hover{border-color:#667eea!important}.upload-icon{color:#667eea;margin-bottom:10px}.upload-title{font-size:18px;font-weight:600}.upload-subtitle{font-size:14px;color:#718096;margin-bottom:15px}.upload-button{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer}.upload-button:hover{background:#5a67d8}.files-preview{margin-top:15px;text-align:left}.preview-header{display:flex;justify-content:space-between;align-items:center}.file-item{display:flex;align-items:center;margin-top:10px;position:relative}.preview-img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:2px solid #e2e8f0}.remove-btn{margin-left:10px;color:#e53e3e;cursor:pointer}.p-10{padding:10px}button.btn:disabled,button.btn[disabled]{background-color:#ccc!important;border-color:#ccc!important;color:#666!important;cursor:not-allowed;opacity:.8}.popup-header{padding-top:20px;background:var(--primary) 0% 0% no-repeat padding-box;border-bottom:1px solid var(--table-border);opacity:1;height:70px}.popuo-title{margin-top:15px;line-height:1.5;text-align:left;font-family:Inter,sans-serif!important;font-size:var(--font-16);letter-spacing:0px;color:var(--hover-text);opacity:1}.disabled-overlay{pointer-events:none;opacity:.6}.surveyheading{color:#fff;font-size:15px}.survey-header{background-color:var(--primary);padding:10px 12px;border-radius:6px}.survey-section{border:1px solid #ccc;border-radius:6px;padding:0;background-color:#fff}.survey-title-group{margin-top:10px}.survey-title-group .form-label{margin-bottom:4px;margin-top:20px;font-weight:500}.survey-name{width:100%;height:auto;overflow:hidden;border:1px solid #ddd;border-radius:10px}.sur-name-header{background-color:var(--primary);padding:10px 12px;border-radius:6px}.custom-back-btn{border:2px solid var(--primary)!important;color:var(--primary)!important;background-color:#f8f9fa!important;font-weight:500!important;border-radius:6px!important;transition:all .2s ease!important}.custom-back-btn:hover{background-color:#fff;color:var(--primary);border-color:var(--primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i7$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: i12.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: AlertComponent, selector: "app-alert" }, { kind: "component", type: i14.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: i15.EmpowerButtonComponent, selector: "button-empower", inputs: ["fieldKey", "id", "data-dismiss", "class", "ngClass", "ngStyle", "style", "label", "title", "tabindex", "type", "disabled", "ariaDisabled", "loading", "aria-label", "aria-describedby", "aria-controls", "aria-expanded", "aria-selected", "aria-current", "aria-haspopup", "role", "aria-required", "aria-labelledby", "aria-pressed", "aria-activedescendant"], outputs: ["click", "focus", "blur"] }, { kind: "component", type: i15.InputEmpowerComponent, selector: "input-empower", inputs: ["id", "type", "placeholder", "aria-label", "aria-describedby", "aria-labelledby", "aria-invalid", "aria-required", "readonly", "class", "ngClass", "ngStyle", "style", "mask", "showMaskTyped", "hiddenInput", "autocomplete", "aria-hidden", "aria-valuetext", "min", "max", "step", "inputMode", "tabindex", "name", "value", "checked", "accept", "multiple", "maxLength", "minLength", "errorIcon", "disabled", "hasError"], outputs: ["click", "enterKey", "focus", "blur"] }, { kind: "component", type: i15.InputnumberEmpowerComponent, selector: "inputnumber-empower", inputs: ["id", "placeholder", "aria-label", "aria-describedby", "aria-labelledby", "aria-invalid", "aria-required", "readonly", "class", "ngClass", "ngStyle", "style", "autocomplete", "aria-hidden", "min", "max", "step", "inputMode", "tabindex", "errorIcon", "disabled", "hasError"], outputs: ["click", "focus"] }, { kind: "component", type: i15.PSelectEmpowerComponent, selector: "p-select-empower", inputs: ["dataKey", "group", "optionGroupLabel", "optionGroupChildren", "filterBy", "panelStyle", "panelClass", "panelPosition", "appendTo", "optionLabel", "optionValue", "optionDisabled", "resetFilterOnHide"] }, { kind: "component", type: ConfigLoginPreviewComponent, selector: "lib-config-login-preview", inputs: ["previewData", "i18n"] }] });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfigLoginSettingsComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-login-settings', standalone: false, template: "<app-alert></app-alert>\r\n<div class=\"tabSection clearfix\">\r\n  <ul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\">\r\n    <li class=\"nav-item\" role=\"presentation\">\r\n      <button type=\"button\" class=\"nav-link active\" id=\"home-tab\" role=\"tab\"\r\n        aria-controls=\"home\" aria-selected=\"true\"\r\n        (click)=\"setActiveTab('home')\">{{ translate('Login Configuration') }}</button>\r\n    </li>\r\n  </ul>\r\n\r\n\r\n  <!-- Tab panes -->\r\n  <div class=\"tab-content\" id=\"myTabContent\" [formGroup]=\"configRegistrationForm\">\r\n    <div class=\"tab-pane fade show active p-3 border border-top-0\" id=\"home\" role=\"tabpanel\" aria-labelledby=\"home-tab\">\r\n      <div class=\"clearfix\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\"></path>\r\n              <path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\"></path>\r\n              <path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\"></path>\r\n              <path d=\"M10 6h4\"></path>\r\n              <path d=\"M10 10h4\"></path>\r\n              <path d=\"M10 14h4\"></path>\r\n              <path d=\"M10 18h4\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Organization Information') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Basic details about your organization') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row\" *ngIf=\"showOrgDropdown\">\r\n            <div class=\"col-md-6 col-12 mb-3\">\r\n              <label class=\"referral-form-labels\" for=\"organizationConfig\">{{ translate('Organization') }}\r\n                <span class=\"required\" aria-hidden=\"true\">*</span>\r\n              </label>\r\n              <p-dropdown\r\n                styleClass=\"w-100\"\r\n                [options]=\"configOptions\"\r\n                [placeholder]=\"translate('Select Organization')\"\r\n                inputId=\"organizationConfig\"\r\n                optionLabel=\"organization_title\"\r\n                optionValue=\"id\"\r\n                [(ngModel)]=\"selectedConfigId\"\r\n                [ngModelOptions]=\"{standalone: true}\"\r\n                (onChange)=\"onConfigSelectionChange($event.value)\"\r\n                [filter]=\"true\"\r\n                filterBy=\"organization_title\">\r\n              </p-dropdown>\r\n            </div>\r\n          </div>\r\n          <div class=\"row\">\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"narrative-textarea\">\r\n                <label class=\"referral-form-labels\" for=\"organization_title\">{{ translate('Organization Title') }}\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                </label>\r\n                <div class=\"position-relative\">\r\n                  @if (!isEditingOrganization) {\r\n                    <textarea id=\"organization_title\" class=\"form-control\" [value]=\"getOrganizationPlainText()\"\r\n                      (input)=\"updateOrganizationTitle($event)\" [placeholder]=\"translate('Enter Organization Title')\"\r\n                      aria-required=\"true\"\r\n                      style=\"padding-right: 35px; resize: vertical;\"></textarea>\r\n                    <i class=\"pi pi-pencil edit-field-icon\" role=\"button\" tabindex=\"0\"\r\n                      [attr.aria-label]=\"translate('Edit Organization Title')\"\r\n                      (click)=\"toggleEdit('organization')\"\r\n                      (keydown.enter)=\"toggleEdit('organization')\"\r\n                      (keydown.space)=\"$event.preventDefault(); toggleEdit('organization')\"></i>\r\n                  } @else {\r\n                    <quill-editor [modules]=\"quillModules\" formControlName=\"organization_title\"\r\n                      [styles]=\"{'min-height':'60px'}\" (onBlur)=\"toggleEdit('organization')\">\r\n                    </quill-editor>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"narrative-textarea\">\r\n                <label class=\"referral-form-labels\" for=\"banner_title\">{{ translate('Banner Title') }}\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                </label>\r\n                <div class=\"position-relative\">\r\n                  @if (!isEditingBanner) {\r\n                    <textarea id=\"banner_title\" class=\"form-control\" [value]=\"getBannerPlainText()\"\r\n                      (input)=\"updateBannerTitle($event)\" [placeholder]=\"translate('Enter banner display text')\"\r\n                      aria-required=\"true\"\r\n                      style=\"padding-right: 35px; resize: vertical;\"></textarea>\r\n                    <i class=\"pi pi-pencil edit-field-icon\" role=\"button\" tabindex=\"0\"\r\n                      [attr.aria-label]=\"translate('Edit Banner Title')\"\r\n                      (click)=\"toggleEdit('banner')\"\r\n                      (keydown.enter)=\"toggleEdit('banner')\"\r\n                      (keydown.space)=\"$event.preventDefault(); toggleEdit('banner')\"></i>\r\n                  } @else {\r\n                    <quill-editor [modules]=\"quillModules\" formControlName=\"banner_title\" [styles]=\"{'min-height':'60px'}\"\r\n                      (onBlur)=\"toggleEdit('banner')\">\r\n                    </quill-editor>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"></rect>\r\n              <circle cx=\"9\" cy=\"9\" r=\"2\"></circle>\r\n              <path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Brand Assets') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Upload your brand images and logos') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row\">\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"referral-form-labels\" for=\"upload_banner\">{{ translate('Banner Image') }}\r\n                <span class=\"required\" aria-hidden=\"true\">*</span>\r\n              </label>\r\n              <div class=\"clsUploadBannerCard clsBrandAssetsCards\">\r\n                <div class=\"clsBannerImgSec\">\r\n                  <div class=\"clsBannerImg\">\r\n                    <img [src]=\"thumbnailBanner || 'assets/images/sample-banner.png'\"\r\n                      [attr.alt]=\"translate('Banner image preview')\" />\r\n                  </div>\r\n\r\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\r\n                    [attr.aria-label]=\"translate('Preview Banner')\" (click)=\"showUploadedBanner()\"\r\n                    (keydown.enter)=\"showUploadedBanner()\"\r\n                    (keydown.space)=\"$event.preventDefault(); showUploadedBanner()\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n\r\n                  <p-dialog [header]=\"translate('Banner Preview')\" [(visible)]=\"bannerVisible\" [modal]=\"true\">\r\n                    <div class=\"text-center\">\r\n                      <img class=\"img-fluid\" [attr.src]=\"thumbnailBanner || 'assets/images/sample-banner.png'\"\r\n                        [attr.alt]=\"translate('Banner Preview')\" />\r\n                    </div>\r\n                  </p-dialog>\r\n\r\n                  <div class=\"clsUploadBtnIcon\">\r\n                    <label for=\"upload_banner\" class=\"clsUploadIcon cursor-pointer mb-0\">\r\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\r\n                      <span class=\"sr-only\">{{ translate('Upload Banner') }}</span>\r\n                    </label>\r\n                    <input type=\"file\" id=\"upload_banner\" style=\"display: none\"\r\n                      (change)=\"handleFileInputBanner($event)\" />\r\n                  </div>\r\n                </div>\r\n                <div class=\"clsUploadBtnSec text-center\">\r\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('upload_banner')\">\r\n                    {{ translate('Replace Banner') }}\r\n                  </button>\r\n                  <p class=\"mb-0 mt-1\"><small>{{ translate('Image size max 1MB (1600 x 900 px)') }}</small></p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"referral-form-labels\" for=\"upload_logo\">{{ translate('Company Logo') }}\r\n                <span class=\"required\" aria-hidden=\"true\">*</span>\r\n              </label>\r\n              <div class=\"clsUploadLogoCard clsBrandAssetsCards\">\r\n                <div class=\"clsLogoImgSec\">\r\n                  <div class=\"clsLogoImg\">\r\n                    <img [attr.src]=\"thumbnailLogo || 'assets/images/logo_home.png'\"\r\n                      [attr.alt]=\"translate('Company logo preview')\" />\r\n                  </div>\r\n\r\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\r\n                    [attr.aria-label]=\"translate('Preview Logo')\" (click)=\"showUploadedLogo()\"\r\n                    (keydown.enter)=\"showUploadedLogo()\"\r\n                    (keydown.space)=\"$event.preventDefault(); showUploadedLogo()\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n\r\n                  <p-dialog [header]=\"translate('Logo Preview')\" [(visible)]=\"visible\" [modal]=\"true\" [style]=\"{ width: '600px' }\">\r\n                    <div class=\"text-center\">\r\n                      <img class=\"img-fluid\" [src]=\"thumbnailLogo || 'assets/images/logo_home.png'\"\r\n                        [attr.alt]=\"translate('Logo Preview')\" />\r\n                    </div>\r\n                  </p-dialog>\r\n\r\n                  <div class=\"clsUploadBtnIcon\">\r\n                    <label for=\"upload_logo\" class=\"clsUploadIcon cursor-pointer mb-0\">\r\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\r\n                      <span class=\"sr-only\">{{ translate('Upload Logo') }}</span>\r\n                    </label>\r\n                    <input type=\"file\" id=\"upload_logo\" style=\"display: none\"\r\n                      (change)=\"handleFileInput($event)\" />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"clsUploadBtnSec text-center\">\r\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('upload_logo')\">\r\n                    {{ translate('Replace Logo') }}\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label for=\"labelColor\" class=\"referral-form-labels\">{{ translate('Pick Label Color') }}\r\n                <span class=\"required\" aria-hidden=\"true\">*</span>\r\n              </label>\r\n              <div class=\"clsColorPickCard clsBrandAssetsCards\">\r\n                <div class=\"clearfix\">\r\n                  <label class=\"intake-form-labels\" for=\"userLabel\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Label - Username/Email') }}\r\n                  </label>\r\n                  <input-empower id=\"userLabel\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Label Name')\" formControlName=\"userLabel\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"emailPlaceholder\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Label Placeholder - Email') }}\r\n                  </label>\r\n                  <input-empower id=\"emailPlaceholder\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Email Placeholder')\" formControlName=\"emailPlaceholder\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"passwordLabel\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Label - Password') }}\r\n                  </label>\r\n                  <input-empower id=\"passwordLabel\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Password Label')\"\r\n                    formControlName=\"passwordLabel\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"passwordPlaceholder\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Label Placeholder Password') }}\r\n                  </label>\r\n                  <input-empower id=\"passwordPlaceholder\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Password Placeholder')\"\r\n                    formControlName=\"passwordPlaceholder\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"loginButtonLabel\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Login Button Label Name') }}\r\n                  </label>\r\n                  <input-empower id=\"loginButtonLabel\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Login Button Label')\"\r\n                    formControlName=\"loginButtonLabel\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"registerButtonPrefix\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Register Button Prefix') }}\r\n                  </label>\r\n                  <input-empower id=\"registerButtonPrefix\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Register Prefix')\"\r\n                    formControlName=\"registerButtonPrefix\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-10\">\r\n                  <label class=\"intake-form-labels\" for=\"registerButtonLabel\"\r\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\r\n                    {{ translate('Register Button Label Name') }}\r\n                  </label>\r\n                  <input-empower id=\"registerButtonLabel\" class=\"form-control\" type=\"text\"\r\n                    [placeholder]=\"translate('Enter Register Button Label')\"\r\n                    formControlName=\"registerButtonLabel\"></input-empower>\r\n                </div>\r\n                <div class=\"clearfix mt-2\">\r\n                  <input type=\"color\" id=\"labelColor\" formControlName=\"labelColor\"\r\n                    [attr.aria-label]=\"translate('Pick Label Color')\" class=\"form-control w-100px h-30px p-0\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect>\r\n              <path d=\"M3 9h18\"></path>\r\n              <path d=\"M9 21V9\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Login Page Templates') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Choose your preferred login page layout') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"clsScrollWrapper\">\r\n            <button class=\"clsScrollBtn clsScrollBtnLeft\" [attr.aria-label]=\"translate('Scroll tabs left')\"\r\n              (click)=\"scrollTabs('login', loginScrollBox, -200)\"\r\n              [disabled]=\"isAtStart['login']\">\r\n              <span class=\"material-symbols-outlined\" aria-hidden=\"true\">chevron_left</span>\r\n            </button>\r\n\r\n            <!-- Scrollable Template Section -->\r\n            <div class=\"clsScrollContainer\" #loginScrollBox>\r\n              <div class=\"clsScrollTemplatesLists row m-0\">\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateRight')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateRight')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateRight')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-right.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-right.png\" alt=\"Login Right\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Right') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the right side') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateLeft')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateLeft')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateLeft')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-left.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-left.png\" alt=\"Login Left\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Left') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the left side') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateCenter')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateCenter')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateCenter')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-center.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-center.png\" alt=\"Login Center\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Center') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form centered on the page') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateBottom')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateBottom')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateBottom')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-bottom.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-bottom.png\" alt=\"Login Bottom\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Bottom') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the Bottom side') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateCurve')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateCurve')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateCurve')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-curve.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-curve.png\" alt=\"Login Radius\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Radius') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Banner on the left side, curve') }}</p>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\r\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow'\"\r\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow'\"\r\n                    (click)=\"selectLoginTemplate('loginTemplateHideShow')\"\r\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateHideShow')\"\r\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateHideShow')\">\r\n                    <div class=\"clsTemplatesImg\"\r\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-hide-ui.png'); $event.stopPropagation()\">\r\n                      <img src=\"../../../../assets/images/base-product/login-hide-ui.png\"\r\n                        alt=\"Login form hide & Show\" />\r\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login form hide & Show') }}</h4>\r\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow') {\r\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                      }\r\n                    </div>\r\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form on the hide & Show') }}</p>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <button class=\"clsScrollBtn clsScrollBtnRight\" [attr.aria-label]=\"translate('Scroll tabs right')\"\r\n              (click)=\"scrollTabs('login', loginScrollBox, 200)\"\r\n              [disabled]=\"isAtEnd['login']\">\r\n              <span class=\"material-symbols-outlined\" aria-hidden=\"true\">chevron_right</span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"></rect>\r\n              <line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"></line>\r\n              <line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"></line>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Footer Templates') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Footer layout options') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"clsScrollTemplatesLists row\">\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                [class.active]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight'\"\r\n                [attr.aria-pressed]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight'\"\r\n                (click)=\"selectFooterTemplate('versionTemplateRight')\"\r\n                (keydown.enter)=\"selectFooterTemplate('versionTemplateRight')\"\r\n                (keydown.space)=\"$event.preventDefault(); selectFooterTemplate('versionTemplateRight')\">\r\n                <div class=\"clsTemplatesImg align-items-center d-flex justify-content-center h-70px\"\r\n                  (click)=\"openPreview('../../../../assets/images/base-product/footer-left.png'); $event.stopPropagation()\">\r\n                  <div class=\"d-flex justify-content-between p-10 w-100\">\r\n                    <strong class=\"text-12\">{{ translate('Stable') }} Version 2.5</strong>\r\n                    <strong class=\"text-12\">\r\n                      &copy; {{ currentYear }} {{ translate('Powered by') }}\r\n                      <span class=\"w-100px d-inline-block\">\r\n                        <img src=\"assets/images/cardinality-logo_text.svg\" alt=\"cardy\">\r\n                      </span>\r\n                    </strong>\r\n                  </div>\r\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h4 class=\"clsTextLine1 mb-0\">{{ translate('Footer Left & Right') }}</h4>\r\n                  @if (configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight') {\r\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                  }\r\n                </div>\r\n                <p class=\"clsTextLine2 mb-0\"> {{ translate('Version left, copyright and powered by text right') }} </p>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                [class.active]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter'\"\r\n                [attr.aria-pressed]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter'\"\r\n                (click)=\"selectFooterTemplate('versionTemplateCenter')\"\r\n                (keydown.enter)=\"selectFooterTemplate('versionTemplateCenter')\"\r\n                (keydown.space)=\"$event.preventDefault(); selectFooterTemplate('versionTemplateCenter')\">\r\n                <div class=\"clsTemplatesImg align-items-center d-flex justify-content-center h-70px\"\r\n                  (click)=\"openPreview('../../../../assets/images/base-product/footer-center.png'); $event.stopPropagation()\">\r\n                  <div class=\"d-flex justify-content-center p-10 w-100 gap-2\">\r\n                    <strong class=\"text-12\">{{ translate('Stable') }} Version 2.5</strong>\r\n                    <strong class=\"text-12\">&copy; {{ currentYear }}</strong>\r\n                    <strong class=\"text-12\">\r\n                      {{ translate('Powered by') }}\r\n                      <span class=\"w-100px d-inline-block ms-1\">\r\n                        <img src=\"assets/images/cardinality-logo_text.svg\" alt=\"cardy\">\r\n                      </span>\r\n                    </strong>\r\n                  </div>\r\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h4 class=\"clsTextLine1 mb-0\">{{ translate('Footer Center') }}</h4>\r\n                  @if (configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter') {\r\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                  }\r\n                </div>\r\n                <p class=\"clsTextLine2 mb-0\"> {{ translate('All footer text centered in single line') }} </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"row row-gap-15 pt-15\">\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"organizationName\">{{ translate('Right') }}</label>\r\n              <input-empower class=\"form-control\" type=\"text\" [placeholder]=\"translate('Version')\" id=\"organizationName\" autocomplete=\"off\"\r\n                formControlName=\"version\"></input-empower>\r\n            </div>\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"content\">{{ translate('Left') }}</label>\r\n              <input-empower class=\"form-control\" type=\"text\" [placeholder]=\"translate('Content')\" id=\"content\" autocomplete=\"off\"\r\n                formControlName=\"content\"></input-empower>\r\n            </div>\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <fieldset class=\"border-0 p-0 m-0\">\r\n                <legend class=\"intake-form-labels mb-1\" id=\"show_footer_legend\">{{ translate('Show Footer') }}</legend>\r\n                <div class=\"d-flex gap-15\" role=\"group\" aria-labelledby=\"show_footer_legend\">\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"loginOnly\"\r\n                      inputId=\"loginOnly\"></p-radioButton>\r\n                    <label for=\"loginOnly\" class=\"ml-2 mb-0\">{{ translate('Login Only') }}</label>\r\n                  </div>\r\n\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"pageOnly\"\r\n                      inputId=\"pageOnly\"></p-radioButton>\r\n                    <label for=\"pageOnly\" class=\"ml-2 mb-0\">{{ translate('Page Only') }}</label>\r\n                  </div>\r\n\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"both\"\r\n                      inputId=\"both\"></p-radioButton>\r\n                    <label for=\"both\" class=\"ml-2 mb-0\">{{ translate('Both') }}</label>\r\n                  </div>\r\n                </div>\r\n              </fieldset>\r\n            </div>\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <label class=\"referral-form-labels\" for=\"uploadPoweredBy\">{{ translate('Powered by Footer Logo') }}</label>\r\n              <div class=\"clsUploadLogoCard clsBrandAssetsCards\">\r\n                <div class=\"clsLogoImgSec\">\r\n                  <div class=\"clsLogoImg\">\r\n                    <img [attr.src]=\"thumbnailPoweredLogo || 'assets/images/logo_home.png'\"\r\n                      [attr.alt]=\"translate('Powered by footer logo preview')\" />\r\n                  </div>\r\n\r\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\r\n                    [attr.aria-label]=\"translate('Preview Footer Logo')\" (click)=\"showUploadedFooterLogo()\"\r\n                    (keydown.enter)=\"showUploadedFooterLogo()\"\r\n                    (keydown.space)=\"$event.preventDefault(); showUploadedFooterLogo()\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n\r\n                  <p-dialog [header]=\"translate('Logo Preview')\" [(visible)]=\"logoFooterVisible\" [modal]=\"true\"\r\n                    [style]=\"{ width: '600px' }\">\r\n                    <div class=\"text-center\">\r\n                      <img class=\"img-fluid\" [src]=\"thumbnailPoweredLogo || 'assets/images/logo_home.png'\"\r\n                        [attr.alt]=\"translate('Powered by footer logo preview')\" />\r\n                    </div>\r\n                  </p-dialog>\r\n\r\n                  <div class=\"clsUploadBtnIcon\">\r\n                    <label for=\"uploadPoweredBy\" class=\"clsUploadIcon cursor-pointer mb-0\">\r\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\r\n                      <span class=\"sr-only\">{{ translate('Upload Powered By Logo') }}</span>\r\n                    </label>\r\n                    <input type=\"file\" id=\"uploadPoweredBy\" style=\"display: none\"\r\n                      (change)=\"handleFileFooterInput($event)\" />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"clsUploadBtnSec text-center\">\r\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('uploadPoweredBy')\">\r\n                    {{ translate('Replace Logo') }}\r\n                  </button>\r\n                  <p class=\"mb-0 mt-1\"><small>{{ translate('Image size max 120kb (400 x 60 px)') }}</small></p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <path\r\n                d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\r\n              </path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">Server Maintenance Templates</h4>\r\n            <p class=\"clsSubHeaderTitle\">Maintenance page layouts</p>\r\n          </div>\r\n        </div> -->\r\n\r\n        <!-- <div class=\"p-25 border rounded-16\">\r\n          <div class=\"clsScrollTemplatesLists row\">\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                [class.active]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne'\"\r\n                [attr.aria-pressed]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne'\"\r\n                (click)=\"selectServerTemplate('serverTemplateOne')\"\r\n                (keydown.enter)=\"selectServerTemplate('serverTemplateOne')\"\r\n                (keydown.space)=\"$event.preventDefault(); selectServerTemplate('serverTemplateOne')\">\r\n                <div class=\"clsTemplatesImg\"\r\n                  (click)=\"openPreview('../../../../assets/images/base-product/server-1.png'); $event.stopPropagation()\">\r\n                  <img src=\"../../../../assets/images/base-product/server-1.png\" alt=\"Server Maintenance\" />\r\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h4 class=\"clsTextLine1 mb-0\">Server Maintenance</h4>\r\n                  @if (configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne') {\r\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6 col-12\">\r\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\r\n                [class.active]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo'\"\r\n                [attr.aria-pressed]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo'\"\r\n                (click)=\"selectServerTemplate('serverTemplateTwo')\"\r\n                (keydown.enter)=\"selectServerTemplate('serverTemplateTwo')\"\r\n                (keydown.space)=\"$event.preventDefault(); selectServerTemplate('serverTemplateTwo')\">\r\n                <div class=\"clsTemplatesImg\"\r\n                  (click)=\"openPreview('../../../../assets/images/base-product/server-2.png'); $event.stopPropagation()\">\r\n                  <img src=\"../../../../assets/images/base-product/server-2.png\" alt=\"Scheduled Maintenance\">\r\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\r\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h4 class=\"clsTextLine1 mb-0\">Scheduled Maintenance</h4>\r\n                  @if (configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo') {\r\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <path d=\"M20 7h-9\"></path>\r\n              <path d=\"M14 17H5\"></path>\r\n              <circle cx=\"17\" cy=\"17\" r=\"3\"></circle>\r\n              <circle cx=\"7\" cy=\"7\" r=\"3\"></circle>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Login Preferences') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Configure available authentication features') }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row clsPreferencesList row-gap-15\">\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"fp\">{{ translate('Forgot Password') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('forgotPassword')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('forgotPassword')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('forgotPassword')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"fp\" formControlName=\"forgotPassword\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"tac\">{{ translate('Terms & conditions') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('termsAndCondition')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('termsAndCondition')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('termsAndCondition')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"tac\" formControlName=\"termsAndCondition\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enableReg\">{{ translate('Enable Registration') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enableRegistration')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enableRegistration')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enableRegistration')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enableReg\" formControlName=\"enableRegistration\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_mfaId\">{{ translate('Enable Multifactor Authentication') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enable_mfa')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_mfa')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enable_mfa')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enable_mfaId\" formControlName=\"enable_mfa\" (onChange)=\"onMfaValidation()\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_captchaId\">Enable Captcha</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enable_captcha')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_captcha')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enable_captcha')?.value ? 'Enabled' : 'Disabled' }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enable_captchaId\" formControlName=\"enable_captcha\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div> -->\r\n\r\n            <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_footerId\">{{ translate('Enable Footer') }}</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enable_footer')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_footer')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enable_footer')?.value ? translate('Enabled') : translate('Disabled') }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enable_footerId\" formControlName=\"enable_footer\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"col-lg-4 col-sm-6 col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"google_translateId\">Enable Google Translate</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enable_google_translate')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_google_translate')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enable_google_translate')?.value ? 'Enabled' : 'Disabled' }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"google_translateId\" formControlName=\"enable_google_translate\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"></path>\r\n              <path d=\"M14 2v4a2 2 0 0 0 2 2h4\"></path>\r\n              <path d=\"M10 9H8\"></path>\r\n              <path d=\"M16 13H8\"></path>\r\n              <path d=\"M16 17H8\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Terms & conditions') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\">{{ translate('Legal agreements and compliance text') }} </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"narrative-textarea \">\r\n            <span class=\"referral-form-labels\" id=\"terms_condition_template-label\">{{ translate('Legal Description') }}\r\n              <span class=\"required\" aria-hidden=\"true\">*</span>\r\n            </span>\r\n            <div role=\"group\" [attr.aria-labelledby]=\"'terms_condition_template-label'\">\r\n              <quill-editor [modules]=\"quillModules\" [styles]=\"{'height':'100px'}\"\r\n                formControlName=\"terms_condition_template\"\r\n                [attr.aria-label]=\"translate('Legal Description')\"\r\n                [attr.aria-required]=\"true\">\r\n              </quill-editor>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn iconBgColor_8\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"></path>\r\n              <path d=\"M2 12h20\"></path>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">{{ translate('Advanced Configuration') }}</h4>\r\n            <p class=\"clsSubHeaderTitle\"> {{ translate('System-level authentication settings') }} </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row row-gap-15\">\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"multifactor_template\">\r\n                {{ translate('Multifactor Authentication Channel') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <p-select-empower class=\"w-100\" id=\"multifactor_template\" optionLabel=\"name\" optionValue=\"value\"\r\n                [options]=\"multifactorTemplates\"\r\n                [placeholder]=\"translate('Select MFA channel')\" formControlName=\"multifactor_template\"\r\n                [required]=\"!!configRegistrationForm.get('enable_mfa')?.value\"\r\n                [aria-describedby]=\"configRegistrationForm.get('multifactor_template')?.invalid && configRegistrationForm.get('multifactor_template')?.touched ? 'multifactor_template-errors' : null\">\r\n              </p-select-empower>\r\n              @if (configRegistrationForm.get('multifactor_template')?.invalid && configRegistrationForm.get('multifactor_template')?.touched) {\r\n                <small id=\"multifactor_template-errors\" class=\"text-danger\" role=\"alert\">\r\n                  {{ translate('Multifactor Authentication Channel is required.') }}\r\n                </small>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"otp_digits\">\r\n                {{ translate('OTP Verification Digits') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <inputnumber-empower min=\"4\" max=\"6\" class=\"form-control\" id=\"otp_digits\" formControlName=\"otp_digits\"\r\n                [placeholder]=\"translate('Enter OTP Verification Digits')\"\r\n                [aria-describedby]=\"otpControl.invalid && otpControl.touched ? 'otp_digits-errors' : null\"\r\n                [class.is-invalid]=\"otpControl.invalid && (otpControl.dirty || otpControl.touched)\"></inputnumber-empower>\r\n              @if (otpControl.invalid && otpControl.touched) {\r\n                <div id=\"otp_digits-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                  @if (otpControl.errors?.['required']) {\r\n                    <span>{{ translate('OTP Verification Digits is required.') }}</span>\r\n                  }\r\n                  @if (otpControl.errors?.min || otpControl.errors?.max) {\r\n                    <span>{{ translate('Enter a valid number of digits between 4 and 6.') }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"otp_expire_time\">\r\n                {{ translate('OTP Expire Time (In Minutes)') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <inputnumber-empower class=\"form-control\" id=\"otp_expire_time\" formControlName=\"otp_expire_time\"\r\n                [placeholder]=\"translate('Enter OTP Expire Time')\"\r\n                [aria-describedby]=\"otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched) ? 'otp_expire_time-errors' : null\"\r\n                [class.is-invalid]=\"otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched)\"></inputnumber-empower>\r\n              @if (otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched)) {\r\n                <div id=\"otp_expire_time-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                  @if (otpExpireControl.errors?.['required']) {\r\n                    <span>{{ translate('OTP Expire Time is required.') }}</span>\r\n                  }\r\n                  @if (otpExpireControl.errors?.min || otpExpireControl.errors?.max) {\r\n                    <span>{{ translate('Enter a valid OTP expire time between 1 and 30 minutes.') }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"resend_otp_delay\">\r\n                {{ translate('Resend OTP Delay (In Minutes)') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <inputnumber-empower min=\"0.5\" max=\"10\" step=\"0.1\" class=\"form-control\" id=\"resend_otp_delay\" formControlName=\"resend_otp_delay\"\r\n                [placeholder]=\"translate('Enter Resend OTP Delay')\"\r\n                [aria-describedby]=\"resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched) ? 'resend_otp_delay-errors' : null\"\r\n                [class.is-invalid]=\"resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched)\"></inputnumber-empower>\r\n              @if (resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched)) {\r\n                <div id=\"resend_otp_delay-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                  @if (resendDelayControl.errors?.['required']) {\r\n                    <span>{{ translate('Resend OTP Delay is required.') }}</span>\r\n                  }\r\n                  @if (resendDelayControl.errors?.min || resendDelayControl.errors?.max) {\r\n                    <span>{{ translate('Enter a valid resend delay between 0.5 and 10 minutes.') }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"forget_config\">\r\n                {{ translate('Forget Password Config') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <p-select-empower class=\"w-100\" id=\"forget_config\" optionLabel=\"name\" formControlName=\"forget_config\" optionValue=\"value\"\r\n                [options]=\"forgetPasswordConfig\" [placeholder]=\"translate('Select Forget Password Config')\"\r\n                [required]=\"!!configRegistrationForm.get('enable_mfa')?.value\"\r\n                [aria-describedby]=\"configRegistrationForm.get('forget_config')?.invalid && configRegistrationForm.get('forget_config')?.touched ? 'forget_config-errors' : null\">\r\n              </p-select-empower>\r\n              @if (configRegistrationForm.get('forget_config')?.invalid && configRegistrationForm.get('forget_config')?.touched) {\r\n                <small id=\"forget_config-errors\" class=\"text-danger\" role=\"alert\">\r\n                  {{ translate('Forget Password Config is required.') }}\r\n                </small>\r\n              }\r\n            </div>\r\n            <div class=\"col-lg-4 col-md-6 col-12\">\r\n              <label class=\"intake-form-labels\" for=\"forgot_email_expire_time\">\r\n                {{ translate('Forgot Email Expire Time(In Minutes)') }}\r\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                }\r\n              </label>\r\n              <inputnumber-empower min=\"1\" max=\"60\" class=\"form-control\" id=\"forgot_email_expire_time\" formControlName=\"forget_expire_time\"\r\n                [placeholder]=\"translate('Enter Forgot Email Expire Time')\"\r\n                [aria-describedby]=\"forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched) ? 'forgot_email_expire_time-errors' : null\"\r\n                [class.is-invalid]=\"forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched)\"></inputnumber-empower>\r\n              @if (forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched)) {\r\n                <div id=\"forgot_email_expire_time-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                  @if (forgetExpireControl.errors?.['required']) {\r\n                    <span>{{ translate('Forgot Email Expire Time is required.') }}</span>\r\n                  }\r\n                  @if (forgetExpireControl.errors?.min || forgetExpireControl.errors?.max) {\r\n                    <span>{{ translate('Enter a valid forgot email expire time between 1 and 60 minutes.') }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"clearfix mt-25\">\r\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\r\n          <div class=\"clsIconBtn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n              <polyline points=\"12 6 12 12 16 14\"></polyline>\r\n            </svg>\r\n          </div>\r\n          <div class=\"clearfix\">\r\n            <h4 class=\"clsHeaderTitle\">Account Lockout Settings</h4>\r\n            <p class=\"clsSubHeaderTitle\">Configure login attempt limits and account lockout settings</p>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"p-25 border rounded-16\">\r\n          <div class=\"row row-gap-15\">\r\n            <div class=\"col-12\">\r\n              <div class=\"clsPreferencesListItem\">\r\n                <div class=\"flex-fill\">\r\n                  <label class=\"mb-0 cursor-pointer\" for=\"enableLoginAttemptThrottling\">Enable Time-Based Login Attempt Limits</label>\r\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\r\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\r\n                                            'clsEnabledDot': configRegistrationForm.get('enableLoginAttemptThrottling')?.value,\r\n                                            'clsDisabledDot': !configRegistrationForm.get('enableLoginAttemptThrottling')?.value\r\n                                          }\">\r\n                    </div>\r\n                    <span class=\"clsStatusTxt\">\r\n                      {{ configRegistrationForm.get('enableLoginAttemptThrottling')?.value ? 'Enabled' : 'Disabled' }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"clearfix\">\r\n                  <p-inputSwitch inputId=\"enableLoginAttemptThrottling\" formControlName=\"enableLoginAttemptThrottling\"  (onChange)=\"onLoginAttemptThrottlingChange()\">\r\n                  </p-inputSwitch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            @if (configRegistrationForm.get('enableLoginAttemptThrottling')?.value) {\r\n              <div class=\"col-lg-6 col-md-6 col-12\">\r\n                <label class=\"intake-form-labels\" for=\"lockoutWindowMinutes\">{{ translate('Failed Login Attempt Window (minutes)') }}\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                </label>\r\n                <inputnumber-empower class=\"form-control\" id=\"lockoutWindowMinutes\" formControlName=\"lockoutWindowMinutes\"\r\n                  [placeholder]=\"translate('Enter lock window duration in minutes')\"\r\n                  [aria-describedby]=\"lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched) ? 'lockoutWindowMinutes-errors' : null\"\r\n                  [class.is-invalid]=\"lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched)\"></inputnumber-empower>\r\n                @if (lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched)) {\r\n                  <div id=\"lockoutWindowMinutes-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                    @if (lockoutWindowControl?.errors?.['required']) {\r\n                      <span>{{ translate('Failed Login Attempt Window is required.') }}</span>\r\n                    }\r\n                    @if (lockoutWindowControl?.errors?.['min']) {\r\n                      <span>{{ translate('Enter a valid Login Attempt Window (Minutes).') }}</span>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (configRegistrationForm.get('enableLoginAttemptThrottling')?.value) {\r\n              <div class=\"col-lg-6 col-md-6 col-12\">\r\n                <label class=\"intake-form-labels\" for=\"lockoutDurationMinutes\">{{ translate('Account Lockout Duration (minutes)') }}\r\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\r\n                </label>\r\n                <inputnumber-empower class=\"form-control\" id=\"lockoutDurationMinutes\" formControlName=\"lockoutDurationMinutes\"\r\n                  [placeholder]=\"translate('Enter lock duration in minutes')\"\r\n                  [aria-describedby]=\"lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched) ? 'lockoutDurationMinutes-errors' : null\"\r\n                  [class.is-invalid]=\"lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched)\"></inputnumber-empower>\r\n                @if (lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched)) {\r\n                  <div id=\"lockoutDurationMinutes-errors\" class=\"text-danger small mt-1\" role=\"alert\">\r\n                    @if (lockoutDurationControl?.errors?.['required']) {\r\n                      <span>{{ translate('Account Lockout Duration is required.') }}</span>\r\n                    }\r\n                    @if (lockoutDurationControl?.errors?.['min']) {\r\n                      <span>{{ translate('Enter a valid lock duration.') }}</span>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <p-card styleClass=\" w-100 mt-3\">\r\n    <div class=\"customizer\" [formGroup]=\"configRegistrationForm\">\r\n      <div class=\"text-md-right mt-2 mb-4 previewsumbitBtn\">\r\n        @if (showFormErrors && configRegistrationForm.invalid) {\r\n          <div class=\"text-danger text-left mb-2\" role=\"alert\">\r\n            <p class=\"mb-1\">{{ translate('Please fix the following:') }}</p>\r\n            <ul class=\"mb-0\">\r\n              @for (msg of getInvalidFieldMessages(); track msg) {\r\n                <li>{{ msg }}</li>\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n        @if (activeTab === 'home' || activeTab === 'kms-sub1' || activeTab === 'profile') {\r\n          <button-empower type=\"button\" class=\"btn btn-primary\" (click)=\"previewLogin()\">\r\n            {{ translate('Preview') }}\r\n          </button-empower>\r\n        }\r\n        <button-empower type=\"button\" class=\"btn btn-primary\" (click)=\"saveConfig()\">\r\n          {{ updateButton ? translate('Update') : translate('Submit') }}\r\n        </button-empower>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n\r\n  <!-- Preview Modal -->\r\n  <p-dialog [(visible)]=\"showPreviewModal\" [modal]=\"true\" [style]=\"{ width: '100vw', height: '100vh' }\"\r\n    [header]=\"translate('Login Preview')\" [closable]=\"true\" class=\"loginpreviewdialog\">\r\n    <!-- create preview only after previewLoginInfo is set -->\r\n    @if (showPreviewModal && previewLoginInfo) {\r\n      <lib-config-login-preview [previewData]=\"previewLoginInfo\" [i18n]=\"i18n\"></lib-config-login-preview>\r\n    }\r\n  </p-dialog>\r\n\r\n  <p-dialog [header]=\"translate('Template Preview')\" [(visible)]=\"previewVisible\" [modal]=\"true\" [closable]=\"true\">\r\n    <img class=\"img-fluid\" [src]=\"previewImageUrl || 'assets/images/base-product/footer-left.png'\"\r\n      alt=\"Preview\" />\r\n  </p-dialog>", styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-14);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-13);color:var(--text-dark)}.customizer p{font-size:var(--font-13);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}.mt-10{margin-top:10px}.previewsumbitBtn{margin-bottom:5%!important;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}:host ::ng-deep .previewsumbitBtn .btn:focus-visible,:host ::ng-deep .previewsumbitBtn button:focus-visible,:host ::ng-deep .clsUploadBtn:focus-visible,:host ::ng-deep .clsScrollBtn:focus-visible{outline:2px solid #0d3178!important;outline-offset:2px;box-shadow:0 0 0 2px #0d317833}.required{color:#d93c2c}.edit-field-icon{position:absolute;right:12px;top:12px;color:#747474;font-size:14px;cursor:pointer}.edit-field-icon:focus-visible{outline:2px solid #0d3178;outline-offset:2px}.clsImgOverlay:focus-visible{outline:2px solid #fff;outline-offset:-2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}fieldset legend.intake-form-labels{float:none;width:auto;font-size:inherit;line-height:inherit}:host ::ng-deep .p-dialog-mask{z-index:9999!important}.tabSection .nav-tabs .nav-item.show .nav-link,.tabSection .nav-tabs .nav-link.active{background-color:var(--primary);color:var(--white)}.tabSection .nav-tabs .nav-link{border:none;background:transparent;cursor:pointer}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mr-2{margin-right:.5rem}.mb-4{margin-bottom:1.5rem}.rounded-16{border-radius:16px}.p-25{padding:25px}.gap-12{gap:12px}.mt-25{margin-top:25px}.text-12{font-size:12px;line-height:20px}.w-100px{width:100px!important}.row-gap-15{row-gap:15px!important}.d-inline-block{display:inline-block!important}.clsHeaderGrp .clsIconBtn{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:#0b0b0b}.clsHeaderGrp .clsHeaderTitle{font-size:20px;line-height:28px;color:#000;margin:0}.clsHeaderGrp .clsSubHeaderTitle{font-size:14px;line-height:20px;color:#666;margin:0}.clsBrandAssetsCards{border-radius:16px;border:solid 2px var(--border-color);overflow:hidden}.clsBrandAssetsCards:hover{border:solid 2px var(--primary)}.clsBrandAssetsCards.clsUploadBannerCard:hover .clsBannerImgSec .clsImgOverlay{opacity:1}.clsBrandAssetsCards.clsUploadBannerCard:hover .clsBannerImgSec .clsUploadBtnIcon{visibility:visible}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec{position:relative}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsBannerImg{width:100%;height:150px;position:relative;transition:all .03s linear 0s}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsBannerImg img{width:100%;height:100%;object-fit:cover}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay:focus-visible{opacity:1}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsUploadBtnIcon{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#2e5bfe,#aa37f1);position:absolute;top:15px;right:15px;visibility:hidden;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec{padding:15px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec .clsUploadBtn{font-size:14px;line-height:20px;padding:7px 12px;text-align:center;border:solid 1px var(--border-color);background-color:#fff;border-radius:999px;margin:0;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec .clsUploadBtn:hover{background-color:#f4f4f5}.clsBrandAssetsCards.clsUploadLogoCard:hover .clsLogoImgSec .clsImgOverlay{opacity:1}.clsBrandAssetsCards.clsUploadLogoCard:hover .clsLogoImgSec .clsUploadBtnIcon{visibility:visible}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec{position:relative;padding:30px;background:#f3f7fa;height:150px;display:flex;align-items:center;justify-content:center}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsLogoImg{margin:0 auto;cursor:pointer;position:relative;transition:all .03s linear 0s}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsLogoImg img{width:100%;height:100%}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay:focus-visible{opacity:1}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsUploadBtnIcon{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#2e5bfe,#aa37f1);position:absolute;top:15px;right:15px;visibility:hidden;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec{padding:15px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec .clsUploadBtn{font-size:14px;line-height:20px;padding:7px 12px;text-align:center;border:solid 1px var(--border-color);background-color:#fff;border-radius:999px;margin:0;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec .clsUploadBtn:hover{background-color:#f4f4f5}.clsBrandAssetsCards.clsColorPickCard{padding:32px 20px}.clsScrollWrapper{position:relative;display:flex;align-items:center}.clsScrollWrapper .clsScrollContainer{overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-behavior:smooth;width:100%;-ms-overflow-style:none;scrollbar-width:none}.clsScrollWrapper .clsScrollContainer::-webkit-scrollbar{display:none}.clsScrollWrapper .clsScrollBtn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ccc;border-radius:999px;width:35px;height:35px;display:inline-flex;flex:0 0 35px;align-items:center;justify-content:center;text-align:center;cursor:pointer;z-index:10;box-shadow:0 2px 6px #0003}.clsScrollWrapper .clsScrollBtn.clsScrollBtnLeft{left:-25px}.clsScrollWrapper .clsScrollBtn.clsScrollBtnRight{right:-25px}.clsScrollWrapper .clsScrollBtn:disabled{cursor:not-allowed}.clsScrollTemplatesLists{flex-wrap:nowrap}.clsScrollTemplatesLists .clsScrollTemplatesItem{border-radius:16px;border:solid 2px var(--border-color);padding:20px;background-color:#fff;transition:transform .3s linear;cursor:pointer;display:flex;flex-direction:column;height:100%}.clsScrollTemplatesLists .clsScrollTemplatesItem:hover{transform:scale(1.01)}.clsScrollTemplatesLists .clsScrollTemplatesItem:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.clsScrollTemplatesLists .clsScrollTemplatesItem.active{border:solid 2px var(--primary);background-color:var(--primary-light);transform:scale(1.01)}.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsTextLine1,.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsTextLine2,.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsCheckIcon{color:#fff}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg{position:relative;border-radius:12px;width:100%;height:90px;overflow:hidden;background-color:#afd9fb;margin-bottom:15px}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg:hover .clsImgOverlay{opacity:1}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay:focus-visible{opacity:1}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTextLine1{font-size:14px;line-height:20px;font-weight:600;color:#000}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTextLine2{font-size:12px;line-height:16px;font-weight:400;color:#333;margin-top:5px;white-space:normal}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsCheckIcon{color:var(--primary);font-size:20px}.clsPreferencesList .clsPreferencesListItem{padding:15px;border:solid 1px var(--border-color);border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;height:100%}.clsPreferencesList .clsPreferencesListItem .clsStatusDot{width:8px;height:8px;border-radius:50%}.clsPreferencesList .clsPreferencesListItem .clsStatusDot.clsEnabledDot{background-color:#28a745}.clsPreferencesList .clsPreferencesListItem .clsStatusDot.clsDisabledDot{background-color:#ccc}.clsPreferencesList .clsPreferencesListItem .clsStatusTxt{font-size:12px;line-height:16px;color:#6c757d}.popup-body{display:flex;flex-direction:column;gap:12px;padding-top:10px}.popup-card{border:1px solid #dee2e6;border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .2s ease-in-out}.popup-card:hover{background-color:#f8f9fa;transform:translateY(-2px)}.popup-label{font-weight:500;color:#333}.upload-container{display:flex;flex-direction:column;gap:2rem}.upload-container{max-width:100%}.upload-box{border:2px dashed #cbd5e0!important;border-radius:12px!important;padding:20px!important;text-align:center!important;transition:border-color .3s!important}.upload-box:hover{border-color:#667eea!important}.upload-icon{color:#667eea;margin-bottom:10px}.upload-title{font-size:18px;font-weight:600}.upload-subtitle{font-size:14px;color:#718096;margin-bottom:15px}.upload-button{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer}.upload-button:hover{background:#5a67d8}.files-preview{margin-top:15px;text-align:left}.preview-header{display:flex;justify-content:space-between;align-items:center}.file-item{display:flex;align-items:center;margin-top:10px;position:relative}.preview-img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:2px solid #e2e8f0}.remove-btn{margin-left:10px;color:#e53e3e;cursor:pointer}.p-10{padding:10px}button.btn:disabled,button.btn[disabled]{background-color:#ccc!important;border-color:#ccc!important;color:#666!important;cursor:not-allowed;opacity:.8}.popup-header{padding-top:20px;background:var(--primary) 0% 0% no-repeat padding-box;border-bottom:1px solid var(--table-border);opacity:1;height:70px}.popuo-title{margin-top:15px;line-height:1.5;text-align:left;font-family:Inter,sans-serif!important;font-size:var(--font-16);letter-spacing:0px;color:var(--hover-text);opacity:1}.disabled-overlay{pointer-events:none;opacity:.6}.surveyheading{color:#fff;font-size:15px}.survey-header{background-color:var(--primary);padding:10px 12px;border-radius:6px}.survey-section{border:1px solid #ccc;border-radius:6px;padding:0;background-color:#fff}.survey-title-group{margin-top:10px}.survey-title-group .form-label{margin-bottom:4px;margin-top:20px;font-weight:500}.survey-name{width:100%;height:auto;overflow:hidden;border:1px solid #ddd;border-radius:10px}.sur-name-header{background-color:var(--primary);padding:10px 12px;border-radius:6px}.custom-back-btn{border:2px solid var(--primary)!important;color:var(--primary)!important;background-color:#f8f9fa!important;font-weight:500!important;border-radius:6px!important;transition:all .2s ease!important}.custom-back-btn:hover{background-color:#fff;color:var(--primary);border-color:var(--primary)}\n"] }]
+            args: [{ selector: 'lib-config-login-settings', standalone: false, template: "<app-alert></app-alert>\n<div class=\"tabSection clearfix\">\n  <ul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\">\n    <li class=\"nav-item\" role=\"presentation\">\n      <button type=\"button\" class=\"nav-link active\" id=\"home-tab\" role=\"tab\"\n        aria-controls=\"home\" aria-selected=\"true\"\n        (click)=\"setActiveTab('home')\">{{ translate('Login Configuration') }}</button>\n    </li>\n  </ul>\n\n\n  <!-- Tab panes -->\n  <div class=\"tab-content\" id=\"myTabContent\" [formGroup]=\"configRegistrationForm\">\n    <div class=\"tab-pane fade show active p-3 border border-top-0\" id=\"home\" role=\"tabpanel\" aria-labelledby=\"home-tab\">\n      <div class=\"clearfix\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\"></path>\n              <path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\"></path>\n              <path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\"></path>\n              <path d=\"M10 6h4\"></path>\n              <path d=\"M10 10h4\"></path>\n              <path d=\"M10 14h4\"></path>\n              <path d=\"M10 18h4\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Organization Information') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Basic details about your organization') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row\" *ngIf=\"showOrgDropdown\">\n            <div class=\"col-md-6 col-12 mb-3\">\n              <label class=\"referral-form-labels\" for=\"organizationConfig\">{{ translate('Organization') }}\n                <span class=\"required\" aria-hidden=\"true\">*</span>\n              </label>\n              <p-dropdown\n                styleClass=\"w-100\"\n                [options]=\"configOptions\"\n                [placeholder]=\"translate('Select Organization')\"\n                inputId=\"organizationConfig\"\n                optionLabel=\"organization_title\"\n                optionValue=\"id\"\n                [(ngModel)]=\"selectedConfigId\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (onChange)=\"onConfigSelectionChange($event.value)\"\n                [filter]=\"true\"\n                filterBy=\"organization_title\">\n              </p-dropdown>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-6 col-12\">\n              <div class=\"narrative-textarea\">\n                <label class=\"referral-form-labels\" for=\"organization_title\">{{ translate('Organization Title') }}\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                </label>\n                <div class=\"position-relative\">\n                  @if (!isEditingOrganization) {\n                    <textarea id=\"organization_title\" class=\"form-control\" [value]=\"getOrganizationPlainText()\"\n                      (input)=\"updateOrganizationTitle($event)\" [placeholder]=\"translate('Enter Organization Title')\"\n                      aria-required=\"true\"\n                      style=\"padding-right: 35px; resize: vertical;\"></textarea>\n                    <i class=\"pi pi-pencil edit-field-icon\" role=\"button\" tabindex=\"0\"\n                      [attr.aria-label]=\"translate('Edit Organization Title')\"\n                      (click)=\"toggleEdit('organization')\"\n                      (keydown.enter)=\"toggleEdit('organization')\"\n                      (keydown.space)=\"$event.preventDefault(); toggleEdit('organization')\"></i>\n                  } @else {\n                    <quill-editor [modules]=\"quillModules\" formControlName=\"organization_title\"\n                      [styles]=\"{'min-height':'60px'}\" (onBlur)=\"toggleEdit('organization')\">\n                    </quill-editor>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-6 col-12\">\n              <div class=\"narrative-textarea\">\n                <label class=\"referral-form-labels\" for=\"banner_title\">{{ translate('Banner Title') }}\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                </label>\n                <div class=\"position-relative\">\n                  @if (!isEditingBanner) {\n                    <textarea id=\"banner_title\" class=\"form-control\" [value]=\"getBannerPlainText()\"\n                      (input)=\"updateBannerTitle($event)\" [placeholder]=\"translate('Enter banner display text')\"\n                      aria-required=\"true\"\n                      style=\"padding-right: 35px; resize: vertical;\"></textarea>\n                    <i class=\"pi pi-pencil edit-field-icon\" role=\"button\" tabindex=\"0\"\n                      [attr.aria-label]=\"translate('Edit Banner Title')\"\n                      (click)=\"toggleEdit('banner')\"\n                      (keydown.enter)=\"toggleEdit('banner')\"\n                      (keydown.space)=\"$event.preventDefault(); toggleEdit('banner')\"></i>\n                  } @else {\n                    <quill-editor [modules]=\"quillModules\" formControlName=\"banner_title\" [styles]=\"{'min-height':'60px'}\"\n                      (onBlur)=\"toggleEdit('banner')\">\n                    </quill-editor>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"></rect>\n              <circle cx=\"9\" cy=\"9\" r=\"2\"></circle>\n              <path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Brand Assets') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Upload your brand images and logos') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row\">\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"referral-form-labels\" for=\"upload_banner\">{{ translate('Banner Image') }}\n                <span class=\"required\" aria-hidden=\"true\">*</span>\n              </label>\n              <div class=\"clsUploadBannerCard clsBrandAssetsCards\">\n                <div class=\"clsBannerImgSec\">\n                  <div class=\"clsBannerImg\">\n                    <img [src]=\"thumbnailBanner || 'assets/images/sample-banner.png'\"\n                      [attr.alt]=\"translate('Banner image preview')\" />\n                  </div>\n\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\n                    [attr.aria-label]=\"translate('Preview Banner')\" (click)=\"showUploadedBanner()\"\n                    (keydown.enter)=\"showUploadedBanner()\"\n                    (keydown.space)=\"$event.preventDefault(); showUploadedBanner()\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n\n                  <p-dialog [header]=\"translate('Banner Preview')\" [(visible)]=\"bannerVisible\" [modal]=\"true\">\n                    <div class=\"text-center\">\n                      <img class=\"img-fluid\" [attr.src]=\"thumbnailBanner || 'assets/images/sample-banner.png'\"\n                        [attr.alt]=\"translate('Banner Preview')\" />\n                    </div>\n                  </p-dialog>\n\n                  <div class=\"clsUploadBtnIcon\">\n                    <label for=\"upload_banner\" class=\"clsUploadIcon cursor-pointer mb-0\">\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\n                      <span class=\"sr-only\">{{ translate('Upload Banner') }}</span>\n                    </label>\n                    <input type=\"file\" id=\"upload_banner\" style=\"display: none\"\n                      (change)=\"handleFileInputBanner($event)\" />\n                  </div>\n                </div>\n                <div class=\"clsUploadBtnSec text-center\">\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('upload_banner')\">\n                    {{ translate('Replace Banner') }}\n                  </button>\n                  <p class=\"mb-0 mt-1\"><small>{{ translate('Image size max 1MB (1600 x 900 px)') }}</small></p>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"referral-form-labels\" for=\"upload_logo\">{{ translate('Company Logo') }}\n                <span class=\"required\" aria-hidden=\"true\">*</span>\n              </label>\n              <div class=\"clsUploadLogoCard clsBrandAssetsCards\">\n                <div class=\"clsLogoImgSec\">\n                  <div class=\"clsLogoImg\">\n                    <img [attr.src]=\"thumbnailLogo || 'assets/images/logo_home.png'\"\n                      [attr.alt]=\"translate('Company logo preview')\" />\n                  </div>\n\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\n                    [attr.aria-label]=\"translate('Preview Logo')\" (click)=\"showUploadedLogo()\"\n                    (keydown.enter)=\"showUploadedLogo()\"\n                    (keydown.space)=\"$event.preventDefault(); showUploadedLogo()\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n\n                  <p-dialog [header]=\"translate('Logo Preview')\" [(visible)]=\"visible\" [modal]=\"true\" [style]=\"{ width: '600px' }\">\n                    <div class=\"text-center\">\n                      <img class=\"img-fluid\" [src]=\"thumbnailLogo || 'assets/images/logo_home.png'\"\n                        [attr.alt]=\"translate('Logo Preview')\" />\n                    </div>\n                  </p-dialog>\n\n                  <div class=\"clsUploadBtnIcon\">\n                    <label for=\"upload_logo\" class=\"clsUploadIcon cursor-pointer mb-0\">\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\n                      <span class=\"sr-only\">{{ translate('Upload Logo') }}</span>\n                    </label>\n                    <input type=\"file\" id=\"upload_logo\" style=\"display: none\"\n                      (change)=\"handleFileInput($event)\" />\n                  </div>\n                </div>\n\n                <div class=\"clsUploadBtnSec text-center\">\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('upload_logo')\">\n                    {{ translate('Replace Logo') }}\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label for=\"labelColor\" class=\"referral-form-labels\">{{ translate('Pick Label Color') }}\n                <span class=\"required\" aria-hidden=\"true\">*</span>\n              </label>\n              <div class=\"clsColorPickCard clsBrandAssetsCards\">\n                <div class=\"clearfix\">\n                  <label class=\"intake-form-labels\" for=\"userLabel\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Label - Username/Email') }}\n                  </label>\n                  <input-empower id=\"userLabel\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Label Name')\" formControlName=\"userLabel\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"emailPlaceholder\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Label Placeholder - Email') }}\n                  </label>\n                  <input-empower id=\"emailPlaceholder\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Email Placeholder')\" formControlName=\"emailPlaceholder\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"passwordLabel\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Label - Password') }}\n                  </label>\n                  <input-empower id=\"passwordLabel\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Password Label')\"\n                    formControlName=\"passwordLabel\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"passwordPlaceholder\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Label Placeholder Password') }}\n                  </label>\n                  <input-empower id=\"passwordPlaceholder\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Password Placeholder')\"\n                    formControlName=\"passwordPlaceholder\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"loginButtonLabel\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Login Button Label Name') }}\n                  </label>\n                  <input-empower id=\"loginButtonLabel\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Login Button Label')\"\n                    formControlName=\"loginButtonLabel\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"registerButtonPrefix\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Register Button Prefix') }}\n                  </label>\n                  <input-empower id=\"registerButtonPrefix\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Register Prefix')\"\n                    formControlName=\"registerButtonPrefix\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-10\">\n                  <label class=\"intake-form-labels\" for=\"registerButtonLabel\"\n                    [style.color]=\"configRegistrationForm.get('labelColor')?.value\">\n                    {{ translate('Register Button Label Name') }}\n                  </label>\n                  <input-empower id=\"registerButtonLabel\" class=\"form-control\" type=\"text\"\n                    [placeholder]=\"translate('Enter Register Button Label')\"\n                    formControlName=\"registerButtonLabel\"></input-empower>\n                </div>\n                <div class=\"clearfix mt-2\">\n                  <input type=\"color\" id=\"labelColor\" formControlName=\"labelColor\"\n                    [attr.aria-label]=\"translate('Pick Label Color')\" class=\"form-control w-100px h-30px p-0\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect>\n              <path d=\"M3 9h18\"></path>\n              <path d=\"M9 21V9\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Login Page Templates') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Choose your preferred login page layout') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"clsScrollWrapper\">\n            <button class=\"clsScrollBtn clsScrollBtnLeft\" [attr.aria-label]=\"translate('Scroll tabs left')\"\n              (click)=\"scrollTabs('login', loginScrollBox, -200)\"\n              [disabled]=\"isAtStart['login']\">\n              <span class=\"material-symbols-outlined\" aria-hidden=\"true\">chevron_left</span>\n            </button>\n\n            <!-- Scrollable Template Section -->\n            <div class=\"clsScrollContainer\" #loginScrollBox>\n              <div class=\"clsScrollTemplatesLists row m-0\">\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight'\"\n                    (click)=\"selectLoginTemplate('loginTemplateRight')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateRight')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateRight')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-right.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-right.png\" alt=\"Login Right\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between align-items-center\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Right') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateRight') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the right side') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft'\"\n                    (click)=\"selectLoginTemplate('loginTemplateLeft')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateLeft')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateLeft')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-left.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-left.png\" alt=\"Login Left\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Left') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateLeft') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the left side') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter'\"\n                    (click)=\"selectLoginTemplate('loginTemplateCenter')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateCenter')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateCenter')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-center.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-center.png\" alt=\"Login Center\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Center') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCenter') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form centered on the page') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom'\"\n                    (click)=\"selectLoginTemplate('loginTemplateBottom')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateBottom')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateBottom')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-bottom.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-bottom.png\" alt=\"Login Bottom\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Bottom') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateBottom') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form positioned on the Bottom side') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve'\"\n                    (click)=\"selectLoginTemplate('loginTemplateCurve')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateCurve')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateCurve')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-curve.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-curve.png\" alt=\"Login Radius\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login Radius') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateCurve') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Banner on the left side, curve') }}</p>\n                  </div>\n                </div>\n                <div class=\"col-lg-3 col-md-4 col-sm-6 col-12 px-2\">\n                  <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                    [class.active]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow'\"\n                    [attr.aria-pressed]=\"configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow'\"\n                    (click)=\"selectLoginTemplate('loginTemplateHideShow')\"\n                    (keydown.enter)=\"selectLoginTemplate('loginTemplateHideShow')\"\n                    (keydown.space)=\"$event.preventDefault(); selectLoginTemplate('loginTemplateHideShow')\">\n                    <div class=\"clsTemplatesImg\"\n                      (click)=\"openPreview('../../../../assets/images/base-product/login-hide-ui.png'); $event.stopPropagation()\">\n                      <img src=\"../../../../assets/images/base-product/login-hide-ui.png\"\n                        alt=\"Login form hide & Show\" />\n                      <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                        <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                      </div>\n                    </div>\n                    <div class=\"d-flex justify-content-between\">\n                      <h4 class=\"clsTextLine1 mb-0\">{{ translate('Login form hide & Show') }}</h4>\n                      @if (configRegistrationForm.get('loginTemplate')?.value === 'loginTemplateHideShow') {\n                        <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                      }\n                    </div>\n                    <p class=\"clsTextLine2 mb-0\">{{ translate('Form on the hide & Show') }}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <button class=\"clsScrollBtn clsScrollBtnRight\" [attr.aria-label]=\"translate('Scroll tabs right')\"\n              (click)=\"scrollTabs('login', loginScrollBox, 200)\"\n              [disabled]=\"isAtEnd['login']\">\n              <span class=\"material-symbols-outlined\" aria-hidden=\"true\">chevron_right</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"></rect>\n              <line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"></line>\n              <line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"></line>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Footer Templates') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Footer layout options') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"clsScrollTemplatesLists row\">\n            <div class=\"col-md-6 col-12\">\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                [class.active]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight'\"\n                [attr.aria-pressed]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight'\"\n                (click)=\"selectFooterTemplate('versionTemplateRight')\"\n                (keydown.enter)=\"selectFooterTemplate('versionTemplateRight')\"\n                (keydown.space)=\"$event.preventDefault(); selectFooterTemplate('versionTemplateRight')\">\n                <div class=\"clsTemplatesImg align-items-center d-flex justify-content-center h-70px\"\n                  (click)=\"openPreview('../../../../assets/images/base-product/footer-left.png'); $event.stopPropagation()\">\n                  <div class=\"d-flex justify-content-between p-10 w-100\">\n                    <strong class=\"text-12\">{{ translate('Stable') }} Version 2.5</strong>\n                    <strong class=\"text-12\">\n                      &copy; {{ currentYear }} {{ translate('Powered by') }}\n                      <span class=\"w-100px d-inline-block\">\n                        <img src=\"assets/images/cardinality-logo_text.svg\" alt=\"cardy\">\n                      </span>\n                    </strong>\n                  </div>\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n                </div>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <h4 class=\"clsTextLine1 mb-0\">{{ translate('Footer Left & Right') }}</h4>\n                  @if (configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateRight') {\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                  }\n                </div>\n                <p class=\"clsTextLine2 mb-0\"> {{ translate('Version left, copyright and powered by text right') }} </p>\n              </div>\n            </div>\n\n            <div class=\"col-md-6 col-12\">\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                [class.active]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter'\"\n                [attr.aria-pressed]=\"configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter'\"\n                (click)=\"selectFooterTemplate('versionTemplateCenter')\"\n                (keydown.enter)=\"selectFooterTemplate('versionTemplateCenter')\"\n                (keydown.space)=\"$event.preventDefault(); selectFooterTemplate('versionTemplateCenter')\">\n                <div class=\"clsTemplatesImg align-items-center d-flex justify-content-center h-70px\"\n                  (click)=\"openPreview('../../../../assets/images/base-product/footer-center.png'); $event.stopPropagation()\">\n                  <div class=\"d-flex justify-content-center p-10 w-100 gap-2\">\n                    <strong class=\"text-12\">{{ translate('Stable') }} Version 2.5</strong>\n                    <strong class=\"text-12\">&copy; {{ currentYear }}</strong>\n                    <strong class=\"text-12\">\n                      {{ translate('Powered by') }}\n                      <span class=\"w-100px d-inline-block ms-1\">\n                        <img src=\"assets/images/cardinality-logo_text.svg\" alt=\"cardy\">\n                      </span>\n                    </strong>\n                  </div>\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n                </div>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <h4 class=\"clsTextLine1 mb-0\">{{ translate('Footer Center') }}</h4>\n                  @if (configRegistrationForm.get('footer_version_template')?.value === 'versionTemplateCenter') {\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                  }\n                </div>\n                <p class=\"clsTextLine2 mb-0\"> {{ translate('All footer text centered in single line') }} </p>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"row row-gap-15 pt-15\">\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"organizationName\">{{ translate('Right') }}</label>\n              <input-empower class=\"form-control\" type=\"text\" [placeholder]=\"translate('Version')\" id=\"organizationName\" autocomplete=\"off\"\n                formControlName=\"version\"></input-empower>\n            </div>\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"content\">{{ translate('Left') }}</label>\n              <input-empower class=\"form-control\" type=\"text\" [placeholder]=\"translate('Content')\" id=\"content\" autocomplete=\"off\"\n                formControlName=\"content\"></input-empower>\n            </div>\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <fieldset class=\"border-0 p-0 m-0\">\n                <legend class=\"intake-form-labels mb-1\" id=\"show_footer_legend\">{{ translate('Show Footer') }}</legend>\n                <div class=\"d-flex gap-15\" role=\"group\" aria-labelledby=\"show_footer_legend\">\n                  <div class=\"d-flex align-items-center\">\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"loginOnly\"\n                      inputId=\"loginOnly\"></p-radioButton>\n                    <label for=\"loginOnly\" class=\"ml-2 mb-0\">{{ translate('Login Only') }}</label>\n                  </div>\n\n                  <div class=\"d-flex align-items-center\">\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"pageOnly\"\n                      inputId=\"pageOnly\"></p-radioButton>\n                    <label for=\"pageOnly\" class=\"ml-2 mb-0\">{{ translate('Page Only') }}</label>\n                  </div>\n\n                  <div class=\"d-flex align-items-center\">\n                    <p-radioButton name=\"showFooterWhere\" formControlName=\"showFooterWhere\" value=\"both\"\n                      inputId=\"both\"></p-radioButton>\n                    <label for=\"both\" class=\"ml-2 mb-0\">{{ translate('Both') }}</label>\n                  </div>\n                </div>\n              </fieldset>\n            </div>\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <label class=\"referral-form-labels\" for=\"uploadPoweredBy\">{{ translate('Powered by Footer Logo') }}</label>\n              <div class=\"clsUploadLogoCard clsBrandAssetsCards\">\n                <div class=\"clsLogoImgSec\">\n                  <div class=\"clsLogoImg\">\n                    <img [attr.src]=\"thumbnailPoweredLogo || 'assets/images/logo_home.png'\"\n                      [attr.alt]=\"translate('Powered by footer logo preview')\" />\n                  </div>\n\n                  <div class=\"clsImgOverlay\" role=\"button\" tabindex=\"0\"\n                    [attr.aria-label]=\"translate('Preview Footer Logo')\" (click)=\"showUploadedFooterLogo()\"\n                    (keydown.enter)=\"showUploadedFooterLogo()\"\n                    (keydown.space)=\"$event.preventDefault(); showUploadedFooterLogo()\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n\n                  <p-dialog [header]=\"translate('Logo Preview')\" [(visible)]=\"logoFooterVisible\" [modal]=\"true\"\n                    [style]=\"{ width: '600px' }\">\n                    <div class=\"text-center\">\n                      <img class=\"img-fluid\" [src]=\"thumbnailPoweredLogo || 'assets/images/logo_home.png'\"\n                        [attr.alt]=\"translate('Powered by footer logo preview')\" />\n                    </div>\n                  </p-dialog>\n\n                  <div class=\"clsUploadBtnIcon\">\n                    <label for=\"uploadPoweredBy\" class=\"clsUploadIcon cursor-pointer mb-0\">\n                      <i class=\"pi pi-upload\" aria-hidden=\"true\"></i>\n                      <span class=\"sr-only\">{{ translate('Upload Powered By Logo') }}</span>\n                    </label>\n                    <input type=\"file\" id=\"uploadPoweredBy\" style=\"display: none\"\n                      (change)=\"handleFileFooterInput($event)\" />\n                  </div>\n                </div>\n\n                <div class=\"clsUploadBtnSec text-center\">\n                  <button type=\"button\" class=\"clsUploadBtn mb-0\" (click)=\"triggerUpload('uploadPoweredBy')\">\n                    {{ translate('Replace Logo') }}\n                  </button>\n                  <p class=\"mb-0 mt-1\"><small>{{ translate('Image size max 120kb (400 x 60 px)') }}</small></p>\n                </div>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n      <!-- <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <path\n                d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\">\n              </path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">Server Maintenance Templates</h4>\n            <p class=\"clsSubHeaderTitle\">Maintenance page layouts</p>\n          </div>\n        </div> -->\n\n        <!-- <div class=\"p-25 border rounded-16\">\n          <div class=\"clsScrollTemplatesLists row\">\n            <div class=\"col-md-6 col-12\">\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                [class.active]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne'\"\n                [attr.aria-pressed]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne'\"\n                (click)=\"selectServerTemplate('serverTemplateOne')\"\n                (keydown.enter)=\"selectServerTemplate('serverTemplateOne')\"\n                (keydown.space)=\"$event.preventDefault(); selectServerTemplate('serverTemplateOne')\">\n                <div class=\"clsTemplatesImg\"\n                  (click)=\"openPreview('../../../../assets/images/base-product/server-1.png'); $event.stopPropagation()\">\n                  <img src=\"../../../../assets/images/base-product/server-1.png\" alt=\"Server Maintenance\" />\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n                </div>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <h4 class=\"clsTextLine1 mb-0\">Server Maintenance</h4>\n                  @if (configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateOne') {\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-6 col-12\">\n              <div class=\"clsScrollTemplatesItem\" role=\"button\" tabindex=\"0\"\n                [class.active]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo'\"\n                [attr.aria-pressed]=\"configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo'\"\n                (click)=\"selectServerTemplate('serverTemplateTwo')\"\n                (keydown.enter)=\"selectServerTemplate('serverTemplateTwo')\"\n                (keydown.space)=\"$event.preventDefault(); selectServerTemplate('serverTemplateTwo')\">\n                <div class=\"clsTemplatesImg\"\n                  (click)=\"openPreview('../../../../assets/images/base-product/server-2.png'); $event.stopPropagation()\">\n                  <img src=\"../../../../assets/images/base-product/server-2.png\" alt=\"Scheduled Maintenance\">\n                  <div class=\"clsImgOverlay\" aria-hidden=\"true\">\n                    <span class=\"material-symbols-outlined zoomIcon\" aria-hidden=\"true\">zoom_in</span>\n                  </div>\n                </div>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <h4 class=\"clsTextLine1 mb-0\">Scheduled Maintenance</h4>\n                  @if (configRegistrationForm.get('enable_server_maintenance')?.value === 'serverTemplateTwo') {\n                    <span class=\"material-symbols-outlined clsCheckIcon\" aria-hidden=\"true\">check_circle</span>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </div> -->\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <path d=\"M20 7h-9\"></path>\n              <path d=\"M14 17H5\"></path>\n              <circle cx=\"17\" cy=\"17\" r=\"3\"></circle>\n              <circle cx=\"7\" cy=\"7\" r=\"3\"></circle>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Login Preferences') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Configure available authentication features') }}</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row clsPreferencesList row-gap-15\">\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"fp\">{{ translate('Forgot Password') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('forgotPassword')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('forgotPassword')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('forgotPassword')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"fp\" formControlName=\"forgotPassword\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"tac\">{{ translate('Terms & conditions') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('termsAndCondition')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('termsAndCondition')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('termsAndCondition')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"tac\" formControlName=\"termsAndCondition\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enableReg\">{{ translate('Enable Registration') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enableRegistration')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enableRegistration')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enableRegistration')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enableReg\" formControlName=\"enableRegistration\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_mfaId\">{{ translate('Enable Multifactor Authentication') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enable_mfa')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_mfa')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enable_mfa')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enable_mfaId\" formControlName=\"enable_mfa\" (onChange)=\"onMfaValidation()\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <!-- <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_captchaId\">Enable Captcha</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enable_captcha')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_captcha')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enable_captcha')?.value ? 'Enabled' : 'Disabled' }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enable_captchaId\" formControlName=\"enable_captcha\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div> -->\n\n            <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enable_footerId\">{{ translate('Enable Footer') }}</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enable_footer')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_footer')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enable_footer')?.value ? translate('Enabled') : translate('Disabled') }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enable_footerId\" formControlName=\"enable_footer\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            <!-- <div class=\"col-lg-4 col-sm-6 col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"google_translateId\">Enable Google Translate</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enable_google_translate')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enable_google_translate')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enable_google_translate')?.value ? 'Enabled' : 'Disabled' }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"google_translateId\" formControlName=\"enable_google_translate\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div> -->\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"></path>\n              <path d=\"M14 2v4a2 2 0 0 0 2 2h4\"></path>\n              <path d=\"M10 9H8\"></path>\n              <path d=\"M16 13H8\"></path>\n              <path d=\"M16 17H8\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Terms & conditions') }}</h4>\n            <p class=\"clsSubHeaderTitle\">{{ translate('Legal agreements and compliance text') }} </p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"narrative-textarea \">\n            <span class=\"referral-form-labels\" id=\"terms_condition_template-label\">{{ translate('Legal Description') }}\n              <span class=\"required\" aria-hidden=\"true\">*</span>\n            </span>\n            <div role=\"group\" [attr.aria-labelledby]=\"'terms_condition_template-label'\">\n              <quill-editor [modules]=\"quillModules\" [styles]=\"{'height':'100px'}\"\n                formControlName=\"terms_condition_template\"\n                [attr.aria-label]=\"translate('Legal Description')\"\n                [attr.aria-required]=\"true\">\n              </quill-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn iconBgColor_8\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"></path>\n              <path d=\"M2 12h20\"></path>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">{{ translate('Advanced Configuration') }}</h4>\n            <p class=\"clsSubHeaderTitle\"> {{ translate('System-level authentication settings') }} </p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row row-gap-15\">\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"multifactor_template\">\n                {{ translate('Multifactor Authentication Channel') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <p-select-empower class=\"w-100\" id=\"multifactor_template\" optionLabel=\"name\" optionValue=\"value\"\n                [options]=\"multifactorTemplates\"\n                [placeholder]=\"translate('Select MFA channel')\" formControlName=\"multifactor_template\"\n                [required]=\"!!configRegistrationForm.get('enable_mfa')?.value\"\n                [aria-describedby]=\"configRegistrationForm.get('multifactor_template')?.invalid && configRegistrationForm.get('multifactor_template')?.touched ? 'multifactor_template-errors' : null\">\n              </p-select-empower>\n              @if (configRegistrationForm.get('multifactor_template')?.invalid && configRegistrationForm.get('multifactor_template')?.touched) {\n                <small id=\"multifactor_template-errors\" class=\"text-danger\" role=\"alert\">\n                  {{ translate('Multifactor Authentication Channel is required.') }}\n                </small>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"otp_digits\">\n                {{ translate('OTP Verification Digits') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <inputnumber-empower min=\"4\" max=\"6\" class=\"form-control\" id=\"otp_digits\" formControlName=\"otp_digits\"\n                [placeholder]=\"translate('Enter OTP Verification Digits')\"\n                [aria-describedby]=\"otpControl.invalid && otpControl.touched ? 'otp_digits-errors' : null\"\n                [class.is-invalid]=\"otpControl.invalid && (otpControl.dirty || otpControl.touched)\"></inputnumber-empower>\n              @if (otpControl.invalid && otpControl.touched) {\n                <div id=\"otp_digits-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                  @if (otpControl.errors?.['required']) {\n                    <span>{{ translate('OTP Verification Digits is required.') }}</span>\n                  }\n                  @if (otpControl.errors?.min || otpControl.errors?.max) {\n                    <span>{{ translate('Enter a valid number of digits between 4 and 6.') }}</span>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"otp_expire_time\">\n                {{ translate('OTP Expire Time (In Minutes)') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <inputnumber-empower class=\"form-control\" id=\"otp_expire_time\" formControlName=\"otp_expire_time\"\n                [placeholder]=\"translate('Enter OTP Expire Time')\"\n                [aria-describedby]=\"otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched) ? 'otp_expire_time-errors' : null\"\n                [class.is-invalid]=\"otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched)\"></inputnumber-empower>\n              @if (otpExpireControl.invalid && (otpExpireControl.dirty || otpExpireControl.touched)) {\n                <div id=\"otp_expire_time-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                  @if (otpExpireControl.errors?.['required']) {\n                    <span>{{ translate('OTP Expire Time is required.') }}</span>\n                  }\n                  @if (otpExpireControl.errors?.min || otpExpireControl.errors?.max) {\n                    <span>{{ translate('Enter a valid OTP expire time between 1 and 30 minutes.') }}</span>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"resend_otp_delay\">\n                {{ translate('Resend OTP Delay (In Minutes)') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <inputnumber-empower min=\"0.5\" max=\"10\" step=\"0.1\" class=\"form-control\" id=\"resend_otp_delay\" formControlName=\"resend_otp_delay\"\n                [placeholder]=\"translate('Enter Resend OTP Delay')\"\n                [aria-describedby]=\"resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched) ? 'resend_otp_delay-errors' : null\"\n                [class.is-invalid]=\"resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched)\"></inputnumber-empower>\n              @if (resendDelayControl.invalid && (resendDelayControl.dirty || resendDelayControl.touched)) {\n                <div id=\"resend_otp_delay-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                  @if (resendDelayControl.errors?.['required']) {\n                    <span>{{ translate('Resend OTP Delay is required.') }}</span>\n                  }\n                  @if (resendDelayControl.errors?.min || resendDelayControl.errors?.max) {\n                    <span>{{ translate('Enter a valid resend delay between 0.5 and 10 minutes.') }}</span>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"forget_config\">\n                {{ translate('Forget Password Config') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <p-select-empower class=\"w-100\" id=\"forget_config\" optionLabel=\"name\" formControlName=\"forget_config\" optionValue=\"value\"\n                [options]=\"forgetPasswordConfig\" [placeholder]=\"translate('Select Forget Password Config')\"\n                [required]=\"!!configRegistrationForm.get('enable_mfa')?.value\"\n                [aria-describedby]=\"configRegistrationForm.get('forget_config')?.invalid && configRegistrationForm.get('forget_config')?.touched ? 'forget_config-errors' : null\">\n              </p-select-empower>\n              @if (configRegistrationForm.get('forget_config')?.invalid && configRegistrationForm.get('forget_config')?.touched) {\n                <small id=\"forget_config-errors\" class=\"text-danger\" role=\"alert\">\n                  {{ translate('Forget Password Config is required.') }}\n                </small>\n              }\n            </div>\n            <div class=\"col-lg-4 col-md-6 col-12\">\n              <label class=\"intake-form-labels\" for=\"forgot_email_expire_time\">\n                {{ translate('Forgot Email Expire Time(In Minutes)') }}\n                @if (configRegistrationForm.get('enable_mfa')?.value) {\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                }\n              </label>\n              <inputnumber-empower min=\"1\" max=\"60\" class=\"form-control\" id=\"forgot_email_expire_time\" formControlName=\"forget_expire_time\"\n                [placeholder]=\"translate('Enter Forgot Email Expire Time')\"\n                [aria-describedby]=\"forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched) ? 'forgot_email_expire_time-errors' : null\"\n                [class.is-invalid]=\"forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched)\"></inputnumber-empower>\n              @if (forgetExpireControl.invalid && (forgetExpireControl.dirty || forgetExpireControl.touched)) {\n                <div id=\"forgot_email_expire_time-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                  @if (forgetExpireControl.errors?.['required']) {\n                    <span>{{ translate('Forgot Email Expire Time is required.') }}</span>\n                  }\n                  @if (forgetExpireControl.errors?.min || forgetExpireControl.errors?.max) {\n                    <span>{{ translate('Enter a valid forgot email expire time between 1 and 60 minutes.') }}</span>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"clearfix mt-25\">\n        <div class=\"clsHeaderGrp d-flex align-items-center gap-12 mb-4\">\n          <div class=\"clsIconBtn\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"w-20px h-20px\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <polyline points=\"12 6 12 12 16 14\"></polyline>\n            </svg>\n          </div>\n          <div class=\"clearfix\">\n            <h4 class=\"clsHeaderTitle\">Account Lockout Settings</h4>\n            <p class=\"clsSubHeaderTitle\">Configure login attempt limits and account lockout settings</p>\n          </div>\n        </div>\n\n        <div class=\"p-25 border rounded-16\">\n          <div class=\"row row-gap-15\">\n            <div class=\"col-12\">\n              <div class=\"clsPreferencesListItem\">\n                <div class=\"flex-fill\">\n                  <label class=\"mb-0 cursor-pointer\" for=\"enableLoginAttemptThrottling\">Enable Time-Based Login Attempt Limits</label>\n                  <div class=\"mt-1 d-flex align-items-center gap-5\">\n                    <div class=\"clsStatusDot\" [ngClass]=\"{\n                                            'clsEnabledDot': configRegistrationForm.get('enableLoginAttemptThrottling')?.value,\n                                            'clsDisabledDot': !configRegistrationForm.get('enableLoginAttemptThrottling')?.value\n                                          }\">\n                    </div>\n                    <span class=\"clsStatusTxt\">\n                      {{ configRegistrationForm.get('enableLoginAttemptThrottling')?.value ? 'Enabled' : 'Disabled' }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"clearfix\">\n                  <p-inputSwitch inputId=\"enableLoginAttemptThrottling\" formControlName=\"enableLoginAttemptThrottling\"  (onChange)=\"onLoginAttemptThrottlingChange()\">\n                  </p-inputSwitch>\n                </div>\n              </div>\n            </div>\n\n            @if (configRegistrationForm.get('enableLoginAttemptThrottling')?.value) {\n              <div class=\"col-lg-6 col-md-6 col-12\">\n                <label class=\"intake-form-labels\" for=\"lockoutWindowMinutes\">{{ translate('Failed Login Attempt Window (minutes)') }}\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                </label>\n                <inputnumber-empower class=\"form-control\" id=\"lockoutWindowMinutes\" formControlName=\"lockoutWindowMinutes\"\n                  [placeholder]=\"translate('Enter lock window duration in minutes')\"\n                  [aria-describedby]=\"lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched) ? 'lockoutWindowMinutes-errors' : null\"\n                  [class.is-invalid]=\"lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched)\"></inputnumber-empower>\n                @if (lockoutWindowControl?.invalid && (lockoutWindowControl?.dirty || lockoutWindowControl?.touched)) {\n                  <div id=\"lockoutWindowMinutes-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                    @if (lockoutWindowControl?.errors?.['required']) {\n                      <span>{{ translate('Failed Login Attempt Window is required.') }}</span>\n                    }\n                    @if (lockoutWindowControl?.errors?.['min']) {\n                      <span>{{ translate('Enter a valid Login Attempt Window (Minutes).') }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            @if (configRegistrationForm.get('enableLoginAttemptThrottling')?.value) {\n              <div class=\"col-lg-6 col-md-6 col-12\">\n                <label class=\"intake-form-labels\" for=\"lockoutDurationMinutes\">{{ translate('Account Lockout Duration (minutes)') }}\n                  <span class=\"required\" aria-hidden=\"true\">*</span>\n                </label>\n                <inputnumber-empower class=\"form-control\" id=\"lockoutDurationMinutes\" formControlName=\"lockoutDurationMinutes\"\n                  [placeholder]=\"translate('Enter lock duration in minutes')\"\n                  [aria-describedby]=\"lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched) ? 'lockoutDurationMinutes-errors' : null\"\n                  [class.is-invalid]=\"lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched)\"></inputnumber-empower>\n                @if (lockoutDurationControl?.invalid && (lockoutDurationControl?.dirty || lockoutDurationControl?.touched)) {\n                  <div id=\"lockoutDurationMinutes-errors\" class=\"text-danger small mt-1\" role=\"alert\">\n                    @if (lockoutDurationControl?.errors?.['required']) {\n                      <span>{{ translate('Account Lockout Duration is required.') }}</span>\n                    }\n                    @if (lockoutDurationControl?.errors?.['min']) {\n                      <span>{{ translate('Enter a valid lock duration.') }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <p-card styleClass=\" w-100 mt-3\">\n    <div class=\"customizer\" [formGroup]=\"configRegistrationForm\">\n      <div class=\"text-md-right mt-2 mb-4 previewsumbitBtn\">\n        @if (showFormErrors && configRegistrationForm.invalid) {\n          <div class=\"text-danger text-left mb-2\" role=\"alert\">\n            <p class=\"mb-1\">{{ translate('Please fix the following:') }}</p>\n            <ul class=\"mb-0\">\n              @for (msg of getInvalidFieldMessages(); track msg) {\n                <li>{{ msg }}</li>\n              }\n            </ul>\n          </div>\n        }\n        @if (activeTab === 'home' || activeTab === 'kms-sub1' || activeTab === 'profile') {\n          <button-empower type=\"button\" class=\"btn btn-primary\" (click)=\"previewLogin()\">\n            {{ translate('Preview') }}\n          </button-empower>\n        }\n        <button-empower type=\"button\" class=\"btn btn-primary\" (click)=\"saveConfig()\">\n          {{ updateButton ? translate('Update') : translate('Submit') }}\n        </button-empower>\n      </div>\n    </div>\n  </p-card>\n\n  <!-- Preview Modal -->\n  <p-dialog [(visible)]=\"showPreviewModal\" [modal]=\"true\" [style]=\"{ width: '100vw', height: '100vh' }\"\n    [header]=\"translate('Login Preview')\" [closable]=\"true\" class=\"loginpreviewdialog\">\n    <!-- create preview only after previewLoginInfo is set -->\n    @if (showPreviewModal && previewLoginInfo) {\n      <lib-config-login-preview [previewData]=\"previewLoginInfo\" [i18n]=\"i18n\"></lib-config-login-preview>\n    }\n  </p-dialog>\n\n  <p-dialog [header]=\"translate('Template Preview')\" [(visible)]=\"previewVisible\" [modal]=\"true\" [closable]=\"true\">\n    <img class=\"img-fluid\" [src]=\"previewImageUrl || 'assets/images/base-product/footer-left.png'\"\n      alt=\"Preview\" />\n  </p-dialog>", styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-14);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-13);color:var(--text-dark)}.customizer p{font-size:var(--font-13);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}.mt-10{margin-top:10px}.previewsumbitBtn{margin-bottom:5%!important;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}:host ::ng-deep .previewsumbitBtn .btn:focus-visible,:host ::ng-deep .previewsumbitBtn button:focus-visible,:host ::ng-deep .clsUploadBtn:focus-visible,:host ::ng-deep .clsScrollBtn:focus-visible{outline:2px solid #0d3178!important;outline-offset:2px;box-shadow:0 0 0 2px #0d317833}.required{color:#d93c2c}.edit-field-icon{position:absolute;right:12px;top:12px;color:#747474;font-size:14px;cursor:pointer}.edit-field-icon:focus-visible{outline:2px solid #0d3178;outline-offset:2px}.clsImgOverlay:focus-visible{outline:2px solid #fff;outline-offset:-2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}fieldset legend.intake-form-labels{float:none;width:auto;font-size:inherit;line-height:inherit}:host ::ng-deep .p-dialog-mask{z-index:9999!important}.tabSection .nav-tabs .nav-item.show .nav-link,.tabSection .nav-tabs .nav-link.active{background-color:var(--primary);color:var(--white)}.tabSection .nav-tabs .nav-link{border:none;background:transparent;cursor:pointer}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mr-2{margin-right:.5rem}.mb-4{margin-bottom:1.5rem}.rounded-16{border-radius:16px}.p-25{padding:25px}.gap-12{gap:12px}.mt-25{margin-top:25px}.text-12{font-size:12px;line-height:20px}.w-100px{width:100px!important}.row-gap-15{row-gap:15px!important}.d-inline-block{display:inline-block!important}.clsHeaderGrp .clsIconBtn{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:#0b0b0b}.clsHeaderGrp .clsHeaderTitle{font-size:20px;line-height:28px;color:#000;margin:0}.clsHeaderGrp .clsSubHeaderTitle{font-size:14px;line-height:20px;color:#666;margin:0}.clsBrandAssetsCards{border-radius:16px;border:solid 2px var(--border-color);overflow:hidden}.clsBrandAssetsCards:hover{border:solid 2px var(--primary)}.clsBrandAssetsCards.clsUploadBannerCard:hover .clsBannerImgSec .clsImgOverlay{opacity:1}.clsBrandAssetsCards.clsUploadBannerCard:hover .clsBannerImgSec .clsUploadBtnIcon{visibility:visible}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec{position:relative}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsBannerImg{width:100%;height:150px;position:relative;transition:all .03s linear 0s}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsBannerImg img{width:100%;height:100%;object-fit:cover}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay:focus-visible{opacity:1}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsBrandAssetsCards.clsUploadBannerCard .clsBannerImgSec .clsUploadBtnIcon{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#2e5bfe,#aa37f1);position:absolute;top:15px;right:15px;visibility:hidden;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec{padding:15px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec .clsUploadBtn{font-size:14px;line-height:20px;padding:7px 12px;text-align:center;border:solid 1px var(--border-color);background-color:#fff;border-radius:999px;margin:0;cursor:pointer}.clsBrandAssetsCards.clsUploadBannerCard .clsUploadBtnSec .clsUploadBtn:hover{background-color:#f4f4f5}.clsBrandAssetsCards.clsUploadLogoCard:hover .clsLogoImgSec .clsImgOverlay{opacity:1}.clsBrandAssetsCards.clsUploadLogoCard:hover .clsLogoImgSec .clsUploadBtnIcon{visibility:visible}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec{position:relative;padding:30px;background:#f3f7fa;height:150px;display:flex;align-items:center;justify-content:center}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsLogoImg{margin:0 auto;cursor:pointer;position:relative;transition:all .03s linear 0s}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsLogoImg img{width:100%;height:100%}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay:focus-visible{opacity:1}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsBrandAssetsCards.clsUploadLogoCard .clsLogoImgSec .clsUploadBtnIcon{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#2e5bfe,#aa37f1);position:absolute;top:15px;right:15px;visibility:hidden;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec{padding:15px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec .clsUploadBtn{font-size:14px;line-height:20px;padding:7px 12px;text-align:center;border:solid 1px var(--border-color);background-color:#fff;border-radius:999px;margin:0;cursor:pointer}.clsBrandAssetsCards.clsUploadLogoCard .clsUploadBtnSec .clsUploadBtn:hover{background-color:#f4f4f5}.clsBrandAssetsCards.clsColorPickCard{padding:32px 20px}.clsScrollWrapper{position:relative;display:flex;align-items:center}.clsScrollWrapper .clsScrollContainer{overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-behavior:smooth;width:100%;-ms-overflow-style:none;scrollbar-width:none}.clsScrollWrapper .clsScrollContainer::-webkit-scrollbar{display:none}.clsScrollWrapper .clsScrollBtn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ccc;border-radius:999px;width:35px;height:35px;display:inline-flex;flex:0 0 35px;align-items:center;justify-content:center;text-align:center;cursor:pointer;z-index:10;box-shadow:0 2px 6px #0003}.clsScrollWrapper .clsScrollBtn.clsScrollBtnLeft{left:-25px}.clsScrollWrapper .clsScrollBtn.clsScrollBtnRight{right:-25px}.clsScrollWrapper .clsScrollBtn:disabled{cursor:not-allowed}.clsScrollTemplatesLists{flex-wrap:nowrap}.clsScrollTemplatesLists .clsScrollTemplatesItem{border-radius:16px;border:solid 2px var(--border-color);padding:20px;background-color:#fff;transition:transform .3s linear;cursor:pointer;display:flex;flex-direction:column;height:100%}.clsScrollTemplatesLists .clsScrollTemplatesItem:hover{transform:scale(1.01)}.clsScrollTemplatesLists .clsScrollTemplatesItem:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.clsScrollTemplatesLists .clsScrollTemplatesItem.active{border:solid 2px var(--primary);background-color:var(--primary-light);transform:scale(1.01)}.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsTextLine1,.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsTextLine2,.clsScrollTemplatesLists .clsScrollTemplatesItem.active .clsCheckIcon{color:#fff}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg{position:relative;border-radius:12px;width:100%;height:90px;overflow:hidden;background-color:#afd9fb;margin-bottom:15px}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg:hover .clsImgOverlay{opacity:1}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay{position:absolute;inset:0;width:100%;height:100%;background-color:#0006;transition:all .03s linear 0s;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;cursor:pointer}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay:focus-visible{opacity:1}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTemplatesImg .clsImgOverlay .zoomIcon{font-size:24px;color:#fff}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTextLine1{font-size:14px;line-height:20px;font-weight:600;color:#000}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsTextLine2{font-size:12px;line-height:16px;font-weight:400;color:#333;margin-top:5px;white-space:normal}.clsScrollTemplatesLists .clsScrollTemplatesItem .clsCheckIcon{color:var(--primary);font-size:20px}.clsPreferencesList .clsPreferencesListItem{padding:15px;border:solid 1px var(--border-color);border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;height:100%}.clsPreferencesList .clsPreferencesListItem .clsStatusDot{width:8px;height:8px;border-radius:50%}.clsPreferencesList .clsPreferencesListItem .clsStatusDot.clsEnabledDot{background-color:#28a745}.clsPreferencesList .clsPreferencesListItem .clsStatusDot.clsDisabledDot{background-color:#ccc}.clsPreferencesList .clsPreferencesListItem .clsStatusTxt{font-size:12px;line-height:16px;color:#6c757d}.popup-body{display:flex;flex-direction:column;gap:12px;padding-top:10px}.popup-card{border:1px solid #dee2e6;border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .2s ease-in-out}.popup-card:hover{background-color:#f8f9fa;transform:translateY(-2px)}.popup-label{font-weight:500;color:#333}.upload-container{display:flex;flex-direction:column;gap:2rem}.upload-container{max-width:100%}.upload-box{border:2px dashed #cbd5e0!important;border-radius:12px!important;padding:20px!important;text-align:center!important;transition:border-color .3s!important}.upload-box:hover{border-color:#667eea!important}.upload-icon{color:#667eea;margin-bottom:10px}.upload-title{font-size:18px;font-weight:600}.upload-subtitle{font-size:14px;color:#718096;margin-bottom:15px}.upload-button{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer}.upload-button:hover{background:#5a67d8}.files-preview{margin-top:15px;text-align:left}.preview-header{display:flex;justify-content:space-between;align-items:center}.file-item{display:flex;align-items:center;margin-top:10px;position:relative}.preview-img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:2px solid #e2e8f0}.remove-btn{margin-left:10px;color:#e53e3e;cursor:pointer}.p-10{padding:10px}button.btn:disabled,button.btn[disabled]{background-color:#ccc!important;border-color:#ccc!important;color:#666!important;cursor:not-allowed;opacity:.8}.popup-header{padding-top:20px;background:var(--primary) 0% 0% no-repeat padding-box;border-bottom:1px solid var(--table-border);opacity:1;height:70px}.popuo-title{margin-top:15px;line-height:1.5;text-align:left;font-family:Inter,sans-serif!important;font-size:var(--font-16);letter-spacing:0px;color:var(--hover-text);opacity:1}.disabled-overlay{pointer-events:none;opacity:.6}.surveyheading{color:#fff;font-size:15px}.survey-header{background-color:var(--primary);padding:10px 12px;border-radius:6px}.survey-section{border:1px solid #ccc;border-radius:6px;padding:0;background-color:#fff}.survey-title-group{margin-top:10px}.survey-title-group .form-label{margin-bottom:4px;margin-top:20px;font-weight:500}.survey-name{width:100%;height:auto;overflow:hidden;border:1px solid #ddd;border-radius:10px}.sur-name-header{background-color:var(--primary);padding:10px 12px;border-radius:6px}.custom-back-btn{border:2px solid var(--primary)!important;color:var(--primary)!important;background-color:#f8f9fa!important;font-weight:500!important;border-radius:6px!important;transition:all .2s ease!important}.custom-back-btn:hover{background-color:#fff;color:var(--primary);border-color:var(--primary)}\n"] }]
         }], ctorParameters: () => [{ type: AlertService }, { type: AttachmentsService }, { type: HttpService }, { type: i1.FormBuilder }, { type: ConfigurationSettingsService }, { type: DataStoreService }, { type: i0.ChangeDetectorRef }, { type: i3$1.SessionStorageService, decorators: [{
                     type: Inject,
                     args: [PICS_CORE_SESSION_STORAGE]
@@ -2875,14 +2875,14 @@ class ConfigLoginSettingsComponent {
         this.configureSubscription?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfigLoginSettingsComponent, deps: [{ token: PermissionStore }, { token: DataStoreService }, { token: i3$1.I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ConfigLoginSettingsComponent, isStandalone: false, selector: "config-login-settings", inputs: { RBACORG: "RBACORG", PERMISSION: "PERMISSION", configureEvent: "configureEvent" }, ngImport: i0, template: `
-    <lib-config-login-settings></lib-config-login-settings>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ConfigLoginSettingsComponent, isStandalone: false, selector: "config-login-settings", inputs: { RBACORG: "RBACORG", PERMISSION: "PERMISSION", configureEvent: "configureEvent" }, ngImport: i0, template: `
+    <lib-config-login-settings></lib-config-login-settings>
   `, isInline: true, dependencies: [{ kind: "component", type: ConfigLoginSettingsComponent$1, selector: "lib-config-login-settings" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfigLoginSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'config-login-settings', template: `
-    <lib-config-login-settings></lib-config-login-settings>
+            args: [{ selector: 'config-login-settings', template: `
+    <lib-config-login-settings></lib-config-login-settings>
   `, standalone: false }]
         }], ctorParameters: () => [{ type: PermissionStore }, { type: DataStoreService }, { type: i3$1.I18nService }], propDecorators: { RBACORG: [{
                 type: Input
@@ -4395,18 +4395,18 @@ class ConfigLoginSettingsHostComponent {
         this.configureEvent$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfigLoginSettingsHostComponent, deps: [{ token: CONFIG_LOGIN_HOST }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ConfigLoginSettingsHostComponent, isStandalone: false, selector: "pics-config-login-settings-host", ngImport: i0, template: `<config-login-settings
-    [RBACORG]="rbacOrg"
-    [PERMISSION]="permission"
-    [configureEvent]="configureEvent$">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ConfigLoginSettingsHostComponent, isStandalone: false, selector: "pics-config-login-settings-host", ngImport: i0, template: `<config-login-settings
+    [RBACORG]="rbacOrg"
+    [PERMISSION]="permission"
+    [configureEvent]="configureEvent$">
   </config-login-settings>`, isInline: true, styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-15);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-14);color:var(--text-dark)}.customizer p{font-size:var(--base-font-size);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}\n"], dependencies: [{ kind: "component", type: ConfigLoginSettingsComponent, selector: "config-login-settings", inputs: ["RBACORG", "PERMISSION", "configureEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfigLoginSettingsHostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pics-config-login-settings-host', template: `<config-login-settings
-    [RBACORG]="rbacOrg"
-    [PERMISSION]="permission"
-    [configureEvent]="configureEvent$">
+            args: [{ selector: 'pics-config-login-settings-host', template: `<config-login-settings
+    [RBACORG]="rbacOrg"
+    [PERMISSION]="permission"
+    [configureEvent]="configureEvent$">
   </config-login-settings>`, standalone: false, styles: [":host ::ng-deep .p-card .p-card-body .p-card-content{padding:0}.customizer .custom-checkbox.custom-control,.customizer .custom-radio.custom-control{padding-left:0rem}.customizer .custom-checkbox.custom-control .theme-select,.customizer .custom-radio.custom-control .theme-select{border:2px solid #ddd;border-radius:7px}.customizer .custom-checkbox.custom-control .active .theme-select,.customizer .custom-radio.custom-control .active .theme-select{border-color:var(--primary)}.customizer .custom-checkbox .custom-control-input:checked~.custom-control-label:before,.customizer .custom-radio .custom-control-input:checked~.custom-control-label:before{content:\"\\f00c\";font-family:FontAwesome,sans-serif;color:var(--hover-text);background-color:var(--btn);border-color:var(--btn);font-size:10px;display:flex;align-items:center;padding:2px}.customizer .custom-checkbox label,.customizer .custom-radio label{cursor:pointer}.customizer .custom-checkbox .font-box,.customizer .custom-radio .font-box{display:flex;justify-content:center;align-items:center;width:150px;height:120px;color:var(--text-dark)}.customizer .custom-checkbox .custom-control-label,.customizer .custom-radio .custom-control-label{position:relative;vertical-align:middle;font-size:var(--base-font-size);line-height:normal;color:var(--text-dark);cursor:pointer;padding-left:25px}.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:after{border-color:var(--btn)}.customizer .custom-checkbox .custom-control-label:before,.customizer .custom-checkbox .custom-control-label:after,.customizer .custom-radio .custom-control-label:before,.customizer .custom-radio .custom-control-label:after{background-image:none;width:16px;height:16px;left:0;box-shadow:none;top:0}.customizer hr{border-color:var(--table-border)}.customizer .customizer-header{background:var(--background-color);color:var(--text-dark)}.customizer .customizer-header .customizer-close{position:absolute;right:.6rem;top:.6rem;padding:7px;width:auto;z-index:10;color:var(--text-dark);cursor:pointer}.customizer .customizer-header .customizer-close .material-icon{font-size:1.5rem}.customizer .customizer-header .customizer-close:hover{color:var(--btn)}.customizer h4{font-size:var(--font-15);font-weight:600;color:var(--text-dark)}.customizer h6{font-size:var(--font-14);color:var(--text-dark)}.customizer p{font-size:var(--base-font-size);font-weight:400;color:var(--text-dark)}.customizer .customizer-toggle{background:var(--btn);color:var(--hover-text);box-shadow:-3px 0 8px #22292f1a;border-top-left-radius:6px;border-bottom-left-radius:6px;position:absolute;top:50%;width:38px;height:38px;left:-39px;text-align:center;line-height:40px;border-left:1px solid var(--checkbox-border);cursor:pointer}.customizer .customizer-toggle .fa-cog{font-size:var(--font-15)}.customizer .customizer-toggle:hover{text-decoration:none}.customizer .customizer-styling-skin.skin .custom-control .custom-control-label{position:relative;padding-left:25px}.customizer .custom-control:first-child .font-box{font-size:var(--font-21);font-weight:400}.customizer .custom-control:last-child .font-box{font-size:var(--font-26);font-weight:600}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,