npm - @softheon/armature - Versions diffs - 10.33.2 → 10.34.2 - Mend

@softheon/armature 10.33.2 → 10.34.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/bundles/softheon-armature.umd.js CHANGED Viewed

@@ -1374,7 +1374,7 @@
                                         configSnapShot = this.configService.config;
                                         configSnapShot.theme = theme;
                                         this.configService.config = configSnapShot;
-                                        this.translateService.setTranslation(this.translateService.currentLang, _.merge(baseLang, overrideLang));
+                                        this.translateService.setTranslation(this.translateService.currentLang, _.mergeWith(baseLang, overrideLang, this.mergeCustomizer));
                                         this.themeService.initPalette(theme);
                                         return [3 /*break*/, 4];
                                     case 3:
@@ -4112,27 +4112,6 @@
                 childNode.visited = true;
             }
         };
-        /** Initializes the basic nav settings */
-        ArmatureNavigationComponent.prototype.initBasicSettings = function () {
-            this.settings.fontAwesomeMenuIcon = this.settings.fontAwesomeMenuIcon || 'fas fa-angle-double-left';
-            this.settings.fontAwesomeMenuIconClosed = this.settings.fontAwesomeMenuIconClosed || 'fas fa-angle-double-right';
-            this.settings.allowNavToggle = this.settings.allowNavToggle == null ? true : this.settings.allowNavToggle;
-            this.settings.mainMenuText ? this.mainMenuText = this.settings.mainMenuText : this.mainMenuText = 'Main Menu';
-            this.settings.headerHeight = this.settings.headerHeight || 60;
-            this.settings.menuButtonSRText = this.settings.menuButtonSRText || 'Menu Button';
-            this.settings.menuStyle = this.settings.menuStyle || 'static';
-            this.settings.displayNumbers = this.settings.displayNumbers == null ? true : this.settings.displayNumbers;
-            this.settings.progressSectionCompleteIcon = this.settings.progressSectionCompleteIcon || 'fas fa-check-circle';
-            this.settings.progressSectionFutureIcon = this.settings.progressSectionFutureIcon || 'far fa-circle';
-            this.settings.progressSectionCurrentIcon = this.settings.progressSectionCurrentIcon || 'fas fa-circle';
-            this.settings.progressMenuCompleteIcon = this.settings.progressMenuCompleteIcon || 'far fa-check';
-            this.settings.showProgressBar = this.settings.showProgressBar == null ? true : this.settings.showProgressBar;
-            this.settings.sideNavWidthDesktop = this.settings.sideNavWidthDesktop || '350';
-            this.settings.sideNavWidthMobile = this.settings.sideNavWidthMobile || '350';
-            this.settings.overrideNavigation = this.settings.overrideNavigation || false;
-            this.settings.progressMenuWidth = this.settings.progressMenuWidth || '280';
-            this.settings.useCustomMobileFooter = this.settings.useCustomMobileFooter != null ? this.settings.useCustomMobileFooter : false;
-        };
         /**
          * Closes the expansion panel and navigates to the given node
          * @param el The mat expansion panel
@@ -4142,29 +4121,35 @@
             el.close();
             this.navigate(this.navigationData[index].route);
         };
-        /** Initializes the advanced nav settings */
-        ArmatureNavigationComponent.prototype.initAdvancedSettings = function () {
-            this.advancedSettings.topGapDesktop = this.advancedSettings.topGapDesktop || 0;
-            this.advancedSettings.topGapMobile = this.advancedSettings.topGapMobile || this.settings.headerHeight;
-            this.advancedSettings.marginTopDesktop = this.advancedSettings.marginTopDesktop || 0;
-            this.advancedSettings.marginTopMobile = this.advancedSettings.marginTopMobile || 0;
+        /**
+        * Hides the message
+        */
+        ArmatureNavigationComponent.prototype.hide = function () {
+            this.showMessage = false;
         };
-        /** Initializes the nav theme settings */
-        ArmatureNavigationComponent.prototype.initThemeSettings = function () {
-            this.themeSettings.contentBgColor ? this.setThemeColor('content-bg-color', this.themeSettings.contentBgColor) : undefined;
-            this.themeSettings.fontColor ? this.setThemeColor('font-color', this.themeSettings.fontColor) : undefined;
-            this.themeSettings.fontColor = this.themeSettings.fontColor || '#000';
-            this.themeSettings.mobileBgColor = this.themeSettings.mobileBgColor || '#ffffff';
-            this.themeSettings.bgGradientColor1 ? this.setThemeColor('bg-gradient-color-1', this.themeSettings.bgGradientColor1) : undefined;
-            this.themeSettings.bgGradientColor2 ? this.setThemeColor('bg-gradient-color-2', this.themeSettings.bgGradientColor2) : undefined;
-            this.themeSettings.borderRightColor ? this.setThemeColor('border-right-color', this.themeSettings.borderRightColor) : undefined;
-            this.themeSettings.listBorderColor ? this.setThemeColor('list-border-color', this.themeSettings.listBorderColor) : undefined;
-            this.themeSettings.highlightGradient1 ? this.setThemeColor('highlight-gradient-1', this.themeSettings.highlightGradient1) : undefined;
-            this.themeSettings.highlightGradient2 ? this.setThemeColor('highlight-gradient-2', this.themeSettings.highlightGradient2) : undefined;
-            this.themeSettings.subHighlightBorderColor ?
-                this.setThemeColor('sub-highlight-border-color', this.themeSettings.subHighlightBorderColor) : undefined;
-            this.themeSettings.subHighlightBgColor ?
-                this.setThemeColor('sub-highlight-bg-color', this.themeSettings.subHighlightBgColor) : undefined;
+        /**
+         * Logs out once user is authorized
+         * */
+        ArmatureNavigationComponent.prototype.logOut = function () {
+            this.authorizationService.authorizeUser();
+        };
+        /**
+         * Closes mobile navigation after selection.
+         */
+        ArmatureNavigationComponent.prototype.closeNavigationForMobile = function () {
+            if (this.mobileQuery.matches) {
+                this.sidenav.close();
+            }
+        };
+        /**
+         * Is the navigation selected
+         */
+        ArmatureNavigationComponent.prototype.isNavSelected = function (node) {
+            return this.router.isActive(node.route, true);
+        };
+        /** Sets the width for the side nav */
+        ArmatureNavigationComponent.prototype.setNavWidth = function (width) {
+            return width.includes('%') || width.includes('px') ? width : width + 'px';
         };
         /** Binds the stepper to the router */
         ArmatureNavigationComponent.prototype.bindStepperToRoutes = function () {
@@ -4207,34 +4192,57 @@
                 }
             }));
         };
-        /**
-        * Hides the message
-        */
-        ArmatureNavigationComponent.prototype.hide = function () {
-            this.showMessage = false;
-        };
-        /**
-         * Logs out once user is authorized
-         * */
-        ArmatureNavigationComponent.prototype.logOut = function () {
-            this.authorizationService.authorizeUser();
+        /** Initializes the advanced nav settings */
+        ArmatureNavigationComponent.prototype.initAdvancedSettings = function () {
+            this.advancedSettings.topGapDesktop = this.advancedSettings.topGapDesktop || 0;
+            this.advancedSettings.topGapMobile = this.advancedSettings.topGapMobile || this.settings.headerHeight;
+            this.advancedSettings.marginTopDesktop = this.advancedSettings.marginTopDesktop || 0;
+            this.advancedSettings.marginTopMobile = this.advancedSettings.marginTopMobile || 0;
         };
-        /**
-         * Is the navigation selected
-         */
-        ArmatureNavigationComponent.prototype.isNavSelected = function (node) {
-            return this.router.isActive(node.route, true);
+        /** Initializes the nav theme settings */
+        ArmatureNavigationComponent.prototype.initThemeSettings = function () {
+            this.themeSettings.contentBgColor ? this.setThemeColor('content-bg-color', this.themeSettings.contentBgColor) : undefined;
+            this.themeSettings.fontColor ? this.setThemeColor('font-color', this.themeSettings.fontColor) : undefined;
+            this.themeSettings.fontColor = this.themeSettings.fontColor || '#000';
+            this.themeSettings.mobileBgColor = this.themeSettings.mobileBgColor || '#ffffff';
+            this.themeSettings.bgGradientColor1 ? this.setThemeColor('bg-gradient-color-1', this.themeSettings.bgGradientColor1) : undefined;
+            this.themeSettings.bgGradientColor2 ? this.setThemeColor('bg-gradient-color-2', this.themeSettings.bgGradientColor2) : undefined;
+            this.themeSettings.borderRightColor ? this.setThemeColor('border-right-color', this.themeSettings.borderRightColor) : undefined;
+            this.themeSettings.listBorderColor ? this.setThemeColor('list-border-color', this.themeSettings.listBorderColor) : undefined;
+            this.themeSettings.highlightGradient1 ? this.setThemeColor('highlight-gradient-1', this.themeSettings.highlightGradient1) : undefined;
+            this.themeSettings.highlightGradient2 ? this.setThemeColor('highlight-gradient-2', this.themeSettings.highlightGradient2) : undefined;
+            this.themeSettings.subHighlightBorderColor ?
+                this.setThemeColor('sub-highlight-border-color', this.themeSettings.subHighlightBorderColor) : undefined;
+            this.themeSettings.subHighlightBgColor ?
+                this.setThemeColor('sub-highlight-bg-color', this.themeSettings.subHighlightBgColor) : undefined;
         };
-        /** Sets the width for the side nav */
-        ArmatureNavigationComponent.prototype.setNavWidth = function (width) {
-            return width.includes('%') || width.includes('px') ? width : width + 'px';
+        /** Initializes the basic nav settings */
+        ArmatureNavigationComponent.prototype.initBasicSettings = function () {
+            this.settings.fontAwesomeMenuIcon = this.settings.fontAwesomeMenuIcon || 'fas fa-angle-double-left';
+            this.settings.fontAwesomeMenuIconClosed = this.settings.fontAwesomeMenuIconClosed || 'fas fa-angle-double-right';
+            this.settings.allowNavToggle = this.settings.allowNavToggle == null ? true : this.settings.allowNavToggle;
+            this.settings.mainMenuText ? this.mainMenuText = this.settings.mainMenuText : this.mainMenuText = 'Main Menu';
+            this.settings.headerHeight = this.settings.headerHeight || 60;
+            this.settings.menuButtonSRText = this.settings.menuButtonSRText || 'Menu Button';
+            this.settings.menuStyle = this.settings.menuStyle || 'static';
+            this.settings.displayNumbers = this.settings.displayNumbers == null ? true : this.settings.displayNumbers;
+            this.settings.progressSectionCompleteIcon = this.settings.progressSectionCompleteIcon || 'fas fa-check-circle';
+            this.settings.progressSectionFutureIcon = this.settings.progressSectionFutureIcon || 'far fa-circle';
+            this.settings.progressSectionCurrentIcon = this.settings.progressSectionCurrentIcon || 'fas fa-circle';
+            this.settings.progressMenuCompleteIcon = this.settings.progressMenuCompleteIcon || 'far fa-check';
+            this.settings.showProgressBar = this.settings.showProgressBar == null ? true : this.settings.showProgressBar;
+            this.settings.sideNavWidthDesktop = this.settings.sideNavWidthDesktop || '350';
+            this.settings.sideNavWidthMobile = this.settings.sideNavWidthMobile || '350';
+            this.settings.overrideNavigation = this.settings.overrideNavigation || false;
+            this.settings.progressMenuWidth = this.settings.progressMenuWidth || '280';
+            this.settings.useCustomMobileFooter = this.settings.useCustomMobileFooter != null ? this.settings.useCustomMobileFooter : false;
         };
         return ArmatureNavigationComponent;
     }());
     ArmatureNavigationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sof-ar-navigation',
-                    template: "<div class=\"sof-ar-nav-container\"\r\n     [style.top]=\"mobileQuery.matches && advancedSettings.topGapMobile ? advancedSettings.topGapMobile + 'px' : settings.headerHeight + 'px'\"\r\n     [class.sof-ar-nav-mobile]=\"mobileQuery.matches\">\r\n  <div *ngIf=\"showMessage\" m-a-0 fxLayout=\"row\" fxLayoutAlign=\"space-between center\" sws-alert--secondary role=\"alert\">\r\n    <div fxLayout=\"row\" aria-hidden=\"true\">\r\n      <i *ngIf=\"showCheckMark\" m-r-5 m-l-5 class=\"fas fa-check-circle icon-container\"></i>\r\n      <p class=\"message-container\" m-r-5 m-l-5 [innerHtml]=\"message | translate\"></p>\r\n    </div>\r\n    <div fxLayout=\"column\">\r\n      <button id=\"btnClose\" (click)=\"hide()\" mat-icon-button [attr.aria-label]=\"'common.close' | translate\">\r\n        <span aria-hidden=\"true\">\r\n          <i class=\"fal fa-times fa-lg\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <button id=\"sof-ar-nav-btn-menu\" aria-label=\"Menu Button\" mat-icon-button [disableRipple]=\"true\"\r\n          (click)=\"snav.toggle()\" class=\"sof-ar-nav-menu-btn\"\r\n          [class.hidden]=\"!(mobileQuery.matches || settings.allowNavToggle) || settings.hideNavigation\">\r\n    <span *ngIf=\"isNavOpen; else closedIcon\" aria-hidden=\"true\" class=\"sof-ar-nav-menu-icon\">\r\n      <i class=\"{{settings.fontAwesomeMenuIcon}} menu-icon\"></i>\r\n    </span>\r\n    <ng-template #closedIcon>\r\n      <span aria-hidden=\"true\" class=\"sof-ar-nav-menu-icon\">\r\n        <i class=\"{{settings.fontAwesomeMenuIconClosed}} menu-icon\"></i>\r\n      </span>\r\n    </ng-template>\r\n    <span class=\"sr-only\">{{settings.menuButtonSRText | translate}}</span>\r\n  </button>\r\n\r\n  <mat-sidenav-container autosize class=\"sof-ar-nav-sidenav-container\" [style.marginTop.px]=\"\r\n      mobileQuery.matches ? advancedSettings.marginTopMobile : advancedSettings.marginTopDesktop\">\r\n    <mat-sidenav [disableClose]=\"!mobileQuery.matches\" class=\"sof-ar-nav-sidenav\" #snav [mode]=\"mobileQuery.matches ? 'over' : 'side'\"\r\n                 [fixedInViewport]=\"mobileQuery.matches\" [fixedTopGap]=\"mobileQuery.matches ? advancedSettings.topGapMobile : advancedSettings.topGapDesktop\"\r\n                 [opened]=\"!mobileQuery.matches && !settings.hideNavigation && settings.menuStyle!='progress' \"\r\n                 [style.width]=\"mobileQuery.matches ? setNavWidth(settings.sideNavWidthMobile) : setNavWidth(settings.sideNavWidthDesktop)\"\r\n                 [ngStyle]=\"{background:mobileQuery.matches ? themeSettings?.mobileBgColor : undefined}\">\r\n      <ng-container *ngIf=\"mobileQuery.matches && userName && !settings.customUserName\">\r\n        <span class=\"user-name\">\r\n          {{userName}}\r\n        </span>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"mobileQuery.matches && settings.customUserName\">\r\n        <span class=\"user-name\">\r\n          {{settings.customUserName | translate}}\r\n        </span>\r\n      </ng-container>\r\n      <!-- Nav Header Content -->\r\n      <ng-content select=\"[sof-ar-nav-header]\"> </ng-content>\r\n\r\n      <!-- Static Navigation -->\r\n      <div class=\"nav-content-item sidenav-background\" *ngIf=\"settings.menuStyle === 'static'\" [ngStyle]=\"{'padding-bottom.px': (footerItemCount*64)+128}\">\r\n        <ng-container *ngIf=\"settings.menuStyle === 'static'\">\r\n          <ng-container *ngFor=\"let nav of navigationData\">\r\n            <ng-container *ngIf=\"nav?.subNodes?.length && !nav.hidden\">\r\n              <mat-accordion>\r\n                <mat-expansion-panel [expanded]=\"nav.expanded\">\r\n                  <mat-expansion-panel-header [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(nav) }\">\r\n                    <!-- Desktop Nav -->\r\n                    <ng-container>\r\n                      <!-- If there is a route -->\r\n                      <ng-container *ngIf=\"nav?.route\">\r\n                        <mat-nav-list [disableRipple]=\"true\">\r\n                          <a class=\"nav-item\" mat-list-item [routerLink]=\"nav?.route\"\r\n                             [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                            <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                              <span aria-hidden=\"true\" class=\"icon-styling\">\r\n                                <i class=\"{{nav?.fontAwesomeIcon}}\"></i>\r\n                              </span>\r\n                            </ng-container>\r\n                            <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                          </a>\r\n                        </mat-nav-list>\r\n                      </ng-container>\r\n                      <!-- If there is not a route -->\r\n                      <ng-container *ngIf=\"!nav?.route\">\r\n                        <mat-nav-list [disableRipple]=\"true\">\r\n                          <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                                  [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                            <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                              <span aria-hidden=\"true\" class=\"icon-styling\">\r\n                                <i class=\"{{nav?.fontAwesomeIcon}}\"></i>\r\n                              </span>\r\n                            </ng-container>\r\n                            <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                          </button>\r\n                        </mat-nav-list>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </mat-expansion-panel-header>\r\n                  <!-- Desktop SubNav -->\r\n                  <ng-container>\r\n                    <mat-nav-list [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(subnav) }\" class=\"subnav-content\"\r\n                                  [disableRipple]=\"true\" *ngFor=\"let subnav of nav?.subNodes\">\r\n                      <a mat-list-item [routerLinkActive]=\"['sof-ar-nav-sub-active-route']\" [routerLink]=\"subnav.route\">\r\n                        {{subnav.text | translate}}\r\n                      </a>\r\n                    </mat-nav-list>\r\n                  </ng-container>\r\n                </mat-expansion-panel>\r\n              </mat-accordion>\r\n            </ng-container>\r\n            <!-- If subnodes are not there -->\r\n            <ng-container>\r\n              <!-- Desktop Nav -->\r\n              <ng-container *ngIf=\"!nav?.subNodes?.length && !nav?.hidden\">\r\n                <!-- If there is a route -->\r\n                <ng-container *ngIf=\"nav?.route\">\r\n                  <mat-nav-list \r\n                                [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(nav) }\" class=\"nav-header\"\r\n                                [disableRipple]=\"true\">\r\n                    <a class=\"nav-item nav-item-margin\" mat-list-item [routerLink]=\"nav?.route\"\r\n                       [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                    </a>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n                <!-- If there is not a route -->\r\n                <ng-container *ngIf=\"!nav?.route\">\r\n                  <mat-nav-list [disableRipple]=\"true\">\r\n                    <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                            [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                    </button>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Stepper -->\r\n      <mat-vertical-stepper *ngIf=\"settings.menuStyle === 'stepper'\" [selectedIndex]=\"selectedParentIndex\" #vertStepper\r\n                            [linear]=\"false\" class=\"sidenav-background\">\r\n        <!-- Alternate step states for nav, icaons should always be white only worked with styles -->\r\n        <ng-template matStepperIcon=\"create\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"edit\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"active\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"done\">\r\n          <span>\r\n            <i class=\"fas fa-check\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n\r\n        <!-- nav steps -->\r\n        <ng-container *ngFor=\"let nav of navigationData; let i = index\">\r\n          <mat-step *ngIf=\"!nav?.hidden\" state=\"{{ determineStepState(i, -1) }}\">\r\n            <ng-template matStepLabel *ngIf=\"!nav.hidden\">\r\n              <div id=\"divStep{{ i }}\" style=\"height: 72px\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\r\n                   matTooltip=\"{{ nav.text | translate }}\" [matTooltipPosition]=\"'after'\" fxFlex=\"100%\">\r\n                <a id=\"step{{ i }}\" fxFlex=\"100%\" class=\"mat-button step-link\" [routerLink]=\"nav.route\"\r\n                   [ngStyle]=\"{ color: themeSettings?.fontColor }\" [routerLinkActive]=\"['step-active']\">\r\n                  {{ nav.text | translate }}\r\n                </a>\r\n              </div>\r\n            </ng-template>\r\n            <p [innerHTML]=\"nav.stepContent | translate\"></p>\r\n            <!-- sub nav -->\r\n            <mat-vertical-stepper *ngIf=\"nav?.subNodes\" [selectedIndex]=\"selectedChildIndexes[i]\" [linear]=\"false\"\r\n                                  #vertStepperInner>\r\n              <!-- Alternate step states for sub nav, icons should always be white only worked with styles -->\r\n              <ng-template matStepperIcon=\"create\">\r\n                <span>\r\n                  <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"edit\">\r\n                <span>\r\n                  <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"done\">\r\n                <span>\r\n                  <i class=\"fas fa-check\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"active\">\r\n                <span>\r\n                  <i class=\"fas fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"none\">\r\n                <span></span>\r\n              </ng-template>\r\n              <!-- sub nav steps -->\r\n              <ng-container *ngFor=\"let subnav of nav?.subNodes; let j = index\">\r\n                <mat-step state=\"{{ determineStepState(i, j) }}\" *ngIf=\"!subnav.hidden\" >\r\n                  <ng-template matStepLabel>\r\n                    <div id=\"divSubStep{{ i }}-{{ j }}\" style=\"height: 72px\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\r\n                         matTooltip=\"{{ subnav.text | translate }}\" [matTooltipPosition]=\"'after'\" fxFlex=\"100%\">\r\n                      <a id=\"subStep{{ i }}-{{ j }}\" class=\"mat-button step-link\"\r\n                         [ngStyle]=\"{ color: themeSettings?.fontColor }\" [routerLink]=\"subnav.route\"\r\n                         [routerLinkActive]=\"['step-active']\">{{ subnav.text | translate }}</a>\r\n                    </div>\r\n                  </ng-template>\r\n                  <p [innerHTML]=\"subnav.stepContent | translate\"></p>\r\n                </mat-step>\r\n              </ng-container>\r\n              \r\n            </mat-vertical-stepper>\r\n          </mat-step>\r\n        </ng-container>\r\n        \r\n      </mat-vertical-stepper>\r\n\r\n      <!-- Nav Footer -->\r\n      <div class=\"nav-footer-item\">\r\n        <ng-container *ngIf=\"settings.menuStyle === 'static'\">\r\n          <ng-container *ngFor=\"let nav of footerNavigationData\">\r\n            <ng-container>\r\n              <!-- Desktop Nav -->\r\n              <ng-container *ngIf=\"!nav?.subNodes?.length\">\r\n                <!-- If there is a route -->\r\n                <ng-container *ngIf=\"nav?.route\">\r\n                  <mat-nav-list  class=\"nav-header\" [disableRipple]=\"true\">\r\n                    <a class=\"nav-item\" mat-list-item [routerLink]=\"nav?.route\"\r\n                       [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      {{nav.text | translate}}\r\n                    </a>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n                <!-- If there is not a route -->\r\n                <ng-container *ngIf=\"!nav?.route\">\r\n                  <mat-nav-list>\r\n                    <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                            [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      {{nav.text | translate}}\r\n                    </button>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-template [ngTemplateOutlet]=\"navigationFooter\">\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- the mobile progress menu-->\r\n      <ng-container *ngIf=\"settings?.menuStyle === 'progress'\">\r\n        <div class=\"sidenav-background\" [ngStyle]=\"{'padding-bottom.px': (footerItemCount*64)+128}\">\r\n          <mat-accordion>\r\n            <div *ngFor=\"let step of navigationData; let i = index\">\r\n              <ng-container *ngIf=\"step.subNodes && step.subNodes.length > 0 && !step.hidden\">\r\n                <mat-expansion-panel hideToggle class=\"progress-mobile-expansion-panel\"\r\n                                     [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" (opened)=\"panelOpenState = true\"\r\n                                     (closed)=\"panelOpenState = false\">\r\n                  <mat-expansion-panel-header>\r\n                    <mat-panel-title class=\"progress-mobile-panel-title\">\r\n                      <div style=\"width: -webkit-fill-available;\"\r\n                           [ngClass]=\"{'disabled':(!step.visited || step.isDisabled) && !settings.overrideNavigation && !step.complete,'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                        <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                        </ng-template>\r\n                        <span *ngIf=\"settings?.displayNumbers\">\r\n                          {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \" }}\r\n                        </span>\r\n                        <span class=\"nav-btn-text\">\r\n                          {{ step.text | translate }}\r\n                        </span>\r\n                        <span *ngIf=\"!panelOpenState\">\r\n                          <i class=\"fas fa-chevron-down panel-icon\"></i>\r\n                        </span>\r\n                        <span *ngIf=\"panelOpenState\">\r\n                          <i class=\"fas fa-chevron-up panel-icon\"></i>\r\n                        </span>\r\n                      </div>\r\n                    </mat-panel-title>\r\n                    <mat-panel-description>\r\n                    </mat-panel-description>\r\n                  </mat-expansion-panel-header>\r\n                  <!-- mobile sub menu -->\r\n                  <div class=\"progress-nav-menu\" *ngFor=\"let subNode of step.subNodes; let idx = index;\" [hidden]=\"step.subNodes[idx].hidden\">\r\n                    <button id=\"mobileMenu{{ idx }}\" mat-button class=\"step-link progress-menu-mobile-btn\"\r\n                            [ngClass]=\"{'color-primary':subNode.complete && subNode!=activeSubNode}\"\r\n                            [routerLinkActive]=\"['progress-menu-active']\" [ngStyle]=\"{ ' color': themeSettings?.fontColor }\"\r\n                            [routerLink]=\"subNode.route\" [disabled]=\"!subNode.visited && !settings.overrideNavigation\">\r\n                      <ng-template [ngTemplateOutlet]=\"progressSubNodeIcons\"\r\n                                   [ngTemplateOutletContext]=\"{subNode:subNode}\">\r\n                      </ng-template>\r\n                      <span class=\"nav-menu-btn-text\" [ngClass]=\"{'disabled':(!subNode.visited) && !settings.overrideNavigation && !subNode.complete,'color-primary':subNode.complete,'progress-menu-active':subNode===activeSubNode}\">{{ subNode.text | translate }}</span>\r\n                    </button>\r\n                  </div>\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n              <!-- if there are no subNodes -->\r\n              <ng-container *ngIf=\"(!step.subNodes || step.subNodes.length==0) && !step.hidden\">\r\n                <mat-expansion-panel #panel hideToggle (opened)=\"disablePanel(panel,i)\" class=\"progress-mobile-expansion-panel\"\r\n                                     [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\">\r\n                  <mat-expansion-panel-header>\r\n                    <mat-panel-title class=\"progress-mobile-panel-title\">\r\n                      <div [ngClass]=\"{'disabled':(!step.visited || step.isDisabled) && !settings.overrideNavigation && !step.complete,'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                        <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                        </ng-template>\r\n                        <span *ngIf=\"settings?.displayNumbers\">\r\n                          {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \" }}\r\n                        </span>\r\n                        <span class=\"nav-btn-text\">\r\n                          {{ step.text | translate }}\r\n                        </span>\r\n                      </div>\r\n                    </mat-panel-title>\r\n                    <mat-panel-description>\r\n                    </mat-panel-description>\r\n                  </mat-expansion-panel-header>\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n            </div>\r\n          </mat-accordion>\r\n        </div>\r\n\r\n        <!-- the progress menu language and logout buttons-->\r\n        <div class=\"nav-footer-item progress-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"navigationFooter\">\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- Horizontal Progress -->\r\n      <ng-container *ngIf=\"settings?.menuStyle === 'progress'\">\r\n        <mat-progress-bar *ngIf=\"settings?.showProgressBar\" mode=\"determinate\" [value]=\"navProgressCount\"\r\n                          style=\"height: 9px\" color=\"accent\">\r\n        </mat-progress-bar>\r\n        <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" style=\"justify-content:center !important\" [class.hidden]=\"settings.hideNavigation\">\r\n          <div *ngFor=\"let step of navigationData; let i = index\" class=\"horizontal-progress-div\">\r\n            <ng-container *ngIf=\"!step.subNodes?.length && !step.hidden\">\r\n              <button mat-button [routerLink]=\"step.route\"\r\n                      [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" class=\"progress-menu-btn\"\r\n                      [ngClass]=\"{'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                </ng-template>\r\n                <span *ngIf=\"settings?.displayNumbers\">\r\n                  {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \"}}\r\n                </span>\r\n                <span class=\"nav-btn-text\">{{ step.text | translate }}</span>\r\n              </button>\r\n            </ng-container>\r\n            <!-- if there are subnodes create menus for each step -->\r\n            <ng-container *ngIf=\"step.subNodes && step.subNodes.length && !step.hidden\">\r\n              <button [ngClass]=\"{'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\"\r\n                      mat-button [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" class=\"progress-menu-btn\"\r\n                      [matMenuTriggerFor]=\"menu\">\r\n                <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                </ng-template>\r\n                <span *ngIf=\"settings?.displayNumbers\">\r\n                  {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \"}}\r\n                </span>\r\n                <span class=\"nav-btn-text\">{{ step.text | translate }}</span>\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\" class=\"sof-ar-mat-menu progress-menu-panel\">\r\n                <div class=\"progress-nav-menu\" *ngFor=\"let subNode of step.subNodes; let idx = index;\" [ngStyle]=\"{width:settings.progressMenuWidth+'px'}\" [hidden]=\"step.subNodes[idx].hidden\">\r\n                  <button id=\"submenu{{ idx }}\" mat-button class=\"step-link progress-menu-btn\"\r\n                          [ngClass]=\"{'color-primary':subNode.complete && subNode!=activeSubNode,'disabled':!subNode.visited && !settings.overrideNavigation}\"\r\n                          [routerLinkActive]=\"['progress-menu-active']\" [ngStyle]=\"{ ' color': themeSettings?.fontColor }\"\r\n                          [routerLink]=\"subNode.route\" [disabled]=\"!subNode.visited && !settings.overrideNavigation\">\r\n                    <ng-template [ngTemplateOutlet]=\"progressSubNodeIcons\"\r\n                                 [ngTemplateOutletContext]=\"{subNode:subNode}\">\r\n                    </ng-template>\r\n                    <span class=\"nav-menu-btn-text\">{{ subNode.text |translate }}</span>\r\n                  </button>\r\n                </div>\r\n              </mat-menu>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"mobile-progress-container\" fxHide.gt-sm>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-content sof-ar-nav-content></ng-content>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n  <!-- The progress menu parent node icon template-->\r\n  <ng-template #progressParentNodeIcons let-step='step'>\r\n    <span *ngIf=\"step.complete && step != activeParentNode\">\r\n      <i class=\"{{ settings.progressSectionCompleteIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"step === activeParentNode\">\r\n      <i class=\"{{ settings.progressSectionCurrentIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"!step.complete && step != activeParentNode\" [ngClass]=\"{'disabled':!step.visited && !settings.overrideNavigation}\">\r\n      <i class=\"{{ settings.progressSectionFutureIcon }} progress-nav-icon\"></i>\r\n    </span>\r\n  </ng-template>\r\n  <!-- The progress menu sub node icon template-->\r\n  <ng-template #progressSubNodeIcons let-subNode='subNode'>\r\n    <span *ngIf=\"subNode.complete &&activeSubNode !=subNode\">\r\n      <i class=\"{{settings.progressMenuCompleteIcon}} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"activeSubNode ===subNode\">\r\n      <i class=\"{{ settings.progressSectionCurrentIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"!subNode.complete &&activeSubNode !=subNode\" [ngClass]=\"{'disabled':!subNode.visited && !settings.overrideNavigation}\">\r\n      <i class=\"{{ settings.progressSectionFutureIcon }} progress-nav-icon\"></i>\r\n    </span>\r\n  </ng-template>\r\n  <!-- The navigation footer template for language and logout buttons -->\r\n  <ng-template #navigationFooter>\r\n    <ng-content select=\"[sof-ar-nav-mobile-footer]\"> </ng-content>\r\n    <ng-container *ngIf=\"!settings.useCustomMobileFooter\">\r\n    <!-- The language button -->\r\n    <ng-container *ngIf=\"languageSettings?.displayLanguageOptions && languageSettings?.languages.length > 2 && mobileQuery.matches\">\r\n      <button id=\"sof-ar-nav-lang-dropdown\" mat-stroked-button\r\n              class=\"faded-button-50 language-button navigationFooter\" [matMenuTriggerFor]=\"headerLanguageMenu\"\r\n              [attr.aria-label]=\"languageSettings.buttonText | translate\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n        </span>\r\n        {{languageSettings.buttonText | translate}}\r\n      </button>\r\n      <mat-menu #headerLanguageMenu=\"matMenu\" class=\"sof-ar-mat-menu\">\r\n        <button mat-menu-item *ngFor=\"let lang of languageSettings.languages\" (click)=\"setLanguage$.emit(lang)\"\r\n                id=\"apply-lang-btn-{{lang}}\">\r\n          <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\">\r\n            <div fxFlex=\"auto\">\r\n              {{ lang | translate }}\r\n            </div>\r\n            <div fxFlex=\"auto\" fxLayoutAlign=\"end end\">\r\n              <i *ngIf=\"currentLang === lang\" class=\"fad fa-check selected-language-icon\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"languageSettings?.displayLanguageOptions && languageSettings?.languages.length === 2 && mobileQuery.matches\">\r\n      <button *ngIf=\"languageSettings?.languages.length === 2\" id=\"sof-ar-nav-lang-button\" mat-stroked-button\r\n              class=\"faded-button-50 language-button navigationFooter\"\r\n              [attr.aria-label]=\"languageSettings.buttonText | translate\" (click)=\"setLanguage$.emit()\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n        </span>\r\n        {{otherLangText | translate}}\r\n      </button>\r\n    </ng-container>\r\n    <!-- The logout button-->\r\n    <ng-container *ngIf=\"mobileQuery.matches && userName\">\r\n      <button id=\"sof-ar-header-lang-button\" mat-stroked-button class=\"navigationFooter\" (click)=\"logOut()\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"fas fa-sign-out-alt\"></i>\r\n        </span>\r\n        {{logOutText | translate}}\r\n      </button>\r\n    </ng-container>\r\n  </ng-container>\r\n  </ng-template>\r\n</div>\r\n",
+                    template: "<div class=\"sof-ar-nav-container\"\r\n     [style.top]=\"mobileQuery.matches && advancedSettings.topGapMobile ? advancedSettings.topGapMobile + 'px' : settings.headerHeight + 'px'\"\r\n     [class.sof-ar-nav-mobile]=\"mobileQuery.matches\">\r\n  <div *ngIf=\"showMessage\" m-a-0 fxLayout=\"row\" fxLayoutAlign=\"space-between center\" sws-alert--secondary role=\"alert\">\r\n    <div fxLayout=\"row\" aria-hidden=\"true\">\r\n      <i *ngIf=\"showCheckMark\" m-r-5 m-l-5 class=\"fas fa-check-circle icon-container\"></i>\r\n      <p class=\"message-container\" m-r-5 m-l-5 [innerHtml]=\"message | translate\"></p>\r\n    </div>\r\n    <div fxLayout=\"column\">\r\n      <button id=\"btnClose\" (click)=\"hide()\" mat-icon-button [attr.aria-label]=\"'common.close' | translate\">\r\n        <span aria-hidden=\"true\">\r\n          <i class=\"fal fa-times fa-lg\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <button id=\"sof-ar-nav-btn-menu\" aria-label=\"Menu Button\" mat-icon-button [disableRipple]=\"true\"\r\n          (click)=\"snav.toggle()\" class=\"sof-ar-nav-menu-btn\"\r\n          [class.hidden]=\"!(mobileQuery.matches || settings.allowNavToggle) || settings.hideNavigation\">\r\n    <span *ngIf=\"isNavOpen; else closedIcon\" aria-hidden=\"true\" class=\"sof-ar-nav-menu-icon\">\r\n      <i class=\"{{settings.fontAwesomeMenuIcon}} menu-icon\"></i>\r\n    </span>\r\n    <ng-template #closedIcon>\r\n      <span aria-hidden=\"true\" class=\"sof-ar-nav-menu-icon\">\r\n        <i class=\"{{settings.fontAwesomeMenuIconClosed}} menu-icon\"></i>\r\n      </span>\r\n    </ng-template>\r\n    <span class=\"sr-only\">{{settings.menuButtonSRText | translate}}</span>\r\n  </button>\r\n\r\n  <mat-sidenav-container autosize class=\"sof-ar-nav-sidenav-container\" [style.marginTop.px]=\"\r\n      mobileQuery.matches ? advancedSettings.marginTopMobile : advancedSettings.marginTopDesktop\">\r\n    <mat-sidenav [disableClose]=\"!mobileQuery.matches\" class=\"sof-ar-nav-sidenav\" #snav [mode]=\"mobileQuery.matches ? 'over' : 'side'\"\r\n                 [fixedInViewport]=\"mobileQuery.matches\" [fixedTopGap]=\"mobileQuery.matches ? advancedSettings.topGapMobile : advancedSettings.topGapDesktop\"\r\n                 [opened]=\"!mobileQuery.matches && !settings.hideNavigation && settings.menuStyle!='progress' \"\r\n                 [style.width]=\"mobileQuery.matches ? setNavWidth(settings.sideNavWidthMobile) : setNavWidth(settings.sideNavWidthDesktop)\"\r\n                 [ngStyle]=\"{background:mobileQuery.matches ? themeSettings?.mobileBgColor : undefined}\">\r\n      <ng-container *ngIf=\"mobileQuery.matches && userName && !settings.customUserName\">\r\n        <span class=\"user-name\">\r\n          {{userName}}\r\n        </span>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"mobileQuery.matches && settings.customUserName\">\r\n        <span class=\"user-name\">\r\n          {{settings.customUserName | translate}}\r\n        </span>\r\n      </ng-container>\r\n      <!-- Nav Header Content -->\r\n      <ng-content select=\"[sof-ar-nav-header]\"> </ng-content>\r\n\r\n      <!-- Static Navigation -->\r\n      <div class=\"nav-content-item sidenav-background\" *ngIf=\"settings.menuStyle === 'static'\" [ngStyle]=\"{'padding-bottom.px': (footerItemCount*64)+128}\">\r\n        <ng-container *ngIf=\"settings.menuStyle === 'static'\">\r\n          <ng-container *ngFor=\"let nav of navigationData\">\r\n            <ng-container *ngIf=\"nav?.subNodes?.length && !nav.hidden\">\r\n              <mat-accordion>\r\n                <mat-expansion-panel [expanded]=\"nav.expanded\">\r\n                  <mat-expansion-panel-header [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(nav) }\">\r\n                    <!-- Navigation -->\r\n                    <ng-container>\r\n                      <!-- If there is a route -->\r\n                      <ng-container *ngIf=\"nav?.route\">\r\n                        <mat-nav-list [disableRipple]=\"true\">\r\n                          <a class=\"nav-item\" mat-list-item [routerLink]=\"nav?.route\"\r\n                             [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                            <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                              <span aria-hidden=\"true\" class=\"icon-styling\">\r\n                                <i class=\"{{nav?.fontAwesomeIcon}}\"></i>\r\n                              </span>\r\n                            </ng-container>\r\n                            <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                          </a>\r\n                        </mat-nav-list>\r\n                      </ng-container>\r\n                      <!-- If there is not a route -->\r\n                      <ng-container *ngIf=\"!nav?.route\">\r\n                        <mat-nav-list [disableRipple]=\"true\">\r\n                          <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                                  [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                            <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                              <span aria-hidden=\"true\" class=\"icon-styling\">\r\n                                <i class=\"{{nav?.fontAwesomeIcon}}\"></i>\r\n                              </span>\r\n                            </ng-container>\r\n                            <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                          </button>\r\n                        </mat-nav-list>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </mat-expansion-panel-header>\r\n                  <!-- SubNav -->\r\n                  <ng-container>\r\n                    <mat-nav-list [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(subnav) }\" class=\"subnav-content\"\r\n                                  [disableRipple]=\"true\" *ngFor=\"let subnav of nav?.subNodes\" (click)=\"closeNavigationForMobile()\">\r\n                      <a mat-list-item [routerLinkActive]=\"['sof-ar-nav-sub-active-route']\" [routerLink]=\"subnav.route\">\r\n                        {{subnav.text | translate}}\r\n                      </a>\r\n                    </mat-nav-list>\r\n                  </ng-container>\r\n                </mat-expansion-panel>\r\n              </mat-accordion>\r\n            </ng-container>\r\n            <!-- If subnodes are not there -->\r\n            <ng-container>\r\n              <ng-container *ngIf=\"!nav?.subNodes?.length && !nav?.hidden\">\r\n                <!-- If there is a route -->\r\n                <ng-container *ngIf=\"nav?.route\">\r\n                  <mat-nav-list [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(nav) }\" class=\"nav-header\"\r\n                                [disableRipple]=\"true\" (click)=\"closeNavigationForMobile()\">\r\n                    <a class=\"nav-item nav-item-margin\" mat-list-item [routerLink]=\"nav?.route\"\r\n                       [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                    </a>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n                <!-- If there is not a route -->\r\n                <ng-container *ngIf=\"!nav?.route\">\r\n                  <mat-nav-list [disableRipple]=\"true\">\r\n                    <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                            [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                    </button>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Stepper -->\r\n      <mat-vertical-stepper *ngIf=\"settings.menuStyle === 'stepper'\" [selectedIndex]=\"selectedParentIndex\" #vertStepper\r\n                            [linear]=\"false\" class=\"sidenav-background\">\r\n        <!-- Alternate step states for nav, icaons should always be white only worked with styles -->\r\n        <ng-template matStepperIcon=\"create\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"edit\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"active\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"done\">\r\n          <span>\r\n            <i class=\"fas fa-check\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n\r\n        <!-- nav steps -->\r\n        <ng-container *ngFor=\"let nav of navigationData; let i = index\">\r\n          <mat-step *ngIf=\"!nav?.hidden\" state=\"{{ determineStepState(i, -1) }}\">\r\n            <ng-template matStepLabel *ngIf=\"!nav.hidden\">\r\n              <div id=\"divStep{{ i }}\" style=\"height: 72px\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\r\n                   matTooltip=\"{{ nav.text | translate }}\" [matTooltipPosition]=\"'after'\" fxFlex=\"100%\">\r\n                <a id=\"step{{ i }}\" fxFlex=\"100%\" class=\"mat-button step-link\" [routerLink]=\"nav.route\"\r\n                   [ngStyle]=\"{ color: themeSettings?.fontColor }\" [routerLinkActive]=\"['step-active']\">\r\n                  {{ nav.text | translate }}\r\n                </a>\r\n              </div>\r\n            </ng-template>\r\n            <p [innerHTML]=\"nav.stepContent | translate\"></p>\r\n            <!-- sub nav -->\r\n            <mat-vertical-stepper *ngIf=\"nav?.subNodes\" [selectedIndex]=\"selectedChildIndexes[i]\" [linear]=\"false\"\r\n                                  #vertStepperInner>\r\n              <!-- Alternate step states for sub nav, icons should always be white only worked with styles -->\r\n              <ng-template matStepperIcon=\"create\">\r\n                <span>\r\n                  <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"edit\">\r\n                <span>\r\n                  <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"done\">\r\n                <span>\r\n                  <i class=\"fas fa-check\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"active\">\r\n                <span>\r\n                  <i class=\"fas fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"none\">\r\n                <span></span>\r\n              </ng-template>\r\n              <!-- sub nav steps -->\r\n              <ng-container *ngFor=\"let subnav of nav?.subNodes; let j = index\">\r\n                <mat-step state=\"{{ determineStepState(i, j) }}\" *ngIf=\"!subnav.hidden\">\r\n                  <ng-template matStepLabel>\r\n                    <div id=\"divSubStep{{ i }}-{{ j }}\" style=\"height: 72px\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\r\n                         matTooltip=\"{{ subnav.text | translate }}\" [matTooltipPosition]=\"'after'\" fxFlex=\"100%\">\r\n                      <a id=\"subStep{{ i }}-{{ j }}\" class=\"mat-button step-link\"\r\n                         [ngStyle]=\"{ color: themeSettings?.fontColor }\" [routerLink]=\"subnav.route\"\r\n                         [routerLinkActive]=\"['step-active']\">{{ subnav.text | translate }}</a>\r\n                    </div>\r\n                  </ng-template>\r\n                  <p [innerHTML]=\"subnav.stepContent | translate\"></p>\r\n                </mat-step>\r\n              </ng-container>\r\n\r\n            </mat-vertical-stepper>\r\n          </mat-step>\r\n        </ng-container>\r\n\r\n      </mat-vertical-stepper>\r\n\r\n      <!-- Nav Footer -->\r\n      <div class=\"nav-footer-item\">\r\n        <ng-container *ngIf=\"settings.menuStyle === 'static'\">\r\n          <ng-container *ngFor=\"let nav of footerNavigationData\">\r\n            <ng-container>\r\n              <!-- Desktop Nav -->\r\n              <ng-container *ngIf=\"!nav?.subNodes?.length\">\r\n                <!-- If there is a route -->\r\n                <ng-container *ngIf=\"nav?.route\">\r\n                  <mat-nav-list class=\"nav-header\" [disableRipple]=\"true\">\r\n                    <a class=\"nav-item\" mat-list-item [routerLink]=\"nav?.route\"\r\n                       [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      {{nav.text | translate}}\r\n                    </a>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n                <!-- If there is not a route -->\r\n                <ng-container *ngIf=\"!nav?.route\">\r\n                  <mat-nav-list>\r\n                    <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                            [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      {{nav.text | translate}}\r\n                    </button>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-template [ngTemplateOutlet]=\"navigationFooter\">\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- the mobile progress menu-->\r\n      <ng-container *ngIf=\"settings?.menuStyle === 'progress'\">\r\n        <div class=\"sidenav-background\" [ngStyle]=\"{'padding-bottom.px': (footerItemCount*64)+128}\">\r\n          <mat-accordion>\r\n            <div *ngFor=\"let step of navigationData; let i = index\">\r\n              <ng-container *ngIf=\"step.subNodes && step.subNodes.length > 0 && !step.hidden\">\r\n                <mat-expansion-panel hideToggle class=\"progress-mobile-expansion-panel\"\r\n                                     [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" (opened)=\"panelOpenState = true\"\r\n                                     (closed)=\"panelOpenState = false\">\r\n                  <mat-expansion-panel-header>\r\n                    <mat-panel-title class=\"progress-mobile-panel-title\">\r\n                      <div style=\"width: -webkit-fill-available;\"\r\n                           [ngClass]=\"{'disabled':(!step.visited || step.isDisabled) && !settings.overrideNavigation && !step.complete,'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                        <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                        </ng-template>\r\n                        <span *ngIf=\"settings?.displayNumbers\">\r\n                          {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \" }}\r\n                        </span>\r\n                        <span class=\"nav-btn-text\">\r\n                          {{ step.text | translate }}\r\n                        </span>\r\n                        <span *ngIf=\"!panelOpenState\">\r\n                          <i class=\"fas fa-chevron-down panel-icon\"></i>\r\n                        </span>\r\n                        <span *ngIf=\"panelOpenState\">\r\n                          <i class=\"fas fa-chevron-up panel-icon\"></i>\r\n                        </span>\r\n                      </div>\r\n                    </mat-panel-title>\r\n                    <mat-panel-description>\r\n                    </mat-panel-description>\r\n                  </mat-expansion-panel-header>\r\n                  <!-- mobile sub menu -->\r\n                  <div class=\"progress-nav-menu\" *ngFor=\"let subNode of step.subNodes; let idx = index;\" [hidden]=\"step.subNodes[idx].hidden\">\r\n                    <button id=\"mobileMenu{{ idx }}\" mat-button class=\"step-link progress-menu-mobile-btn\"\r\n                            [ngClass]=\"{'color-primary':subNode.complete && subNode!=activeSubNode}\"\r\n                            [routerLinkActive]=\"['progress-menu-active']\" [ngStyle]=\"{ ' color': themeSettings?.fontColor }\"\r\n                            [routerLink]=\"subNode.route\" [disabled]=\"!subNode.visited && !settings.overrideNavigation\">\r\n                      <ng-template [ngTemplateOutlet]=\"progressSubNodeIcons\"\r\n                                   [ngTemplateOutletContext]=\"{subNode:subNode}\">\r\n                      </ng-template>\r\n                      <span class=\"nav-menu-btn-text\" [ngClass]=\"{'disabled':(!subNode.visited) && !settings.overrideNavigation && !subNode.complete,'color-primary':subNode.complete,'progress-menu-active':subNode===activeSubNode}\">{{ subNode.text | translate }}</span>\r\n                    </button>\r\n                  </div>\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n              <!-- if there are no subNodes -->\r\n              <ng-container *ngIf=\"(!step.subNodes || step.subNodes.length==0) && !step.hidden\">\r\n                <mat-expansion-panel #panel hideToggle (opened)=\"disablePanel(panel,i)\" class=\"progress-mobile-expansion-panel\"\r\n                                     [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\">\r\n                  <mat-expansion-panel-header>\r\n                    <mat-panel-title class=\"progress-mobile-panel-title\">\r\n                      <div [ngClass]=\"{'disabled':(!step.visited || step.isDisabled) && !settings.overrideNavigation && !step.complete,'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                        <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                        </ng-template>\r\n                        <span *ngIf=\"settings?.displayNumbers\">\r\n                          {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \" }}\r\n                        </span>\r\n                        <span class=\"nav-btn-text\">\r\n                          {{ step.text | translate }}\r\n                        </span>\r\n                      </div>\r\n                    </mat-panel-title>\r\n                    <mat-panel-description>\r\n                    </mat-panel-description>\r\n                  </mat-expansion-panel-header>\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n            </div>\r\n          </mat-accordion>\r\n        </div>\r\n\r\n        <!-- the progress menu language and logout buttons-->\r\n        <div class=\"nav-footer-item progress-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"navigationFooter\">\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- Horizontal Progress -->\r\n      <ng-container *ngIf=\"settings?.menuStyle === 'progress'\">\r\n        <mat-progress-bar *ngIf=\"settings?.showProgressBar\" mode=\"determinate\" [value]=\"navProgressCount\"\r\n                          style=\"height: 9px\" color=\"accent\">\r\n        </mat-progress-bar>\r\n        <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" style=\"justify-content:center !important\" [class.hidden]=\"settings.hideNavigation\">\r\n          <div *ngFor=\"let step of navigationData; let i = index\" class=\"horizontal-progress-div\">\r\n            <ng-container *ngIf=\"!step.subNodes?.length && !step.hidden\">\r\n              <button mat-button [routerLink]=\"step.route\"\r\n                      [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" class=\"progress-menu-btn\"\r\n                      [ngClass]=\"{'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                </ng-template>\r\n                <span *ngIf=\"settings?.displayNumbers\">\r\n                  {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \"}}\r\n                </span>\r\n                <span class=\"nav-btn-text\">{{ step.text | translate }}</span>\r\n              </button>\r\n            </ng-container>\r\n            <!-- if there are subnodes create menus for each step -->\r\n            <ng-container *ngIf=\"step.subNodes && step.subNodes.length && !step.hidden\">\r\n              <button [ngClass]=\"{'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\"\r\n                      mat-button [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" class=\"progress-menu-btn\"\r\n                      [matMenuTriggerFor]=\"menu\">\r\n                <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                </ng-template>\r\n                <span *ngIf=\"settings?.displayNumbers\">\r\n                  {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \"}}\r\n                </span>\r\n                <span class=\"nav-btn-text\">{{ step.text | translate }}</span>\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\" class=\"sof-ar-mat-menu progress-menu-panel\">\r\n                <div class=\"progress-nav-menu\" *ngFor=\"let subNode of step.subNodes; let idx = index;\" [ngStyle]=\"{width:settings.progressMenuWidth+'px'}\" [hidden]=\"step.subNodes[idx].hidden\">\r\n                  <button id=\"submenu{{ idx }}\" mat-button class=\"step-link progress-menu-btn\"\r\n                          [ngClass]=\"{'color-primary':subNode.complete && subNode!=activeSubNode,'disabled':!subNode.visited && !settings.overrideNavigation}\"\r\n                          [routerLinkActive]=\"['progress-menu-active']\" [ngStyle]=\"{ ' color': themeSettings?.fontColor }\"\r\n                          [routerLink]=\"subNode.route\" [disabled]=\"!subNode.visited && !settings.overrideNavigation\">\r\n                    <ng-template [ngTemplateOutlet]=\"progressSubNodeIcons\"\r\n                                 [ngTemplateOutletContext]=\"{subNode:subNode}\">\r\n                    </ng-template>\r\n                    <span class=\"nav-menu-btn-text\">{{ subNode.text |translate }}</span>\r\n                  </button>\r\n                </div>\r\n              </mat-menu>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"mobile-progress-container\" fxHide.gt-sm>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-content sof-ar-nav-content></ng-content>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n  <!-- The progress menu parent node icon template-->\r\n  <ng-template #progressParentNodeIcons let-step='step'>\r\n    <span *ngIf=\"step.complete && step != activeParentNode\">\r\n      <i class=\"{{ settings.progressSectionCompleteIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"step === activeParentNode\">\r\n      <i class=\"{{ settings.progressSectionCurrentIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"!step.complete && step != activeParentNode\" [ngClass]=\"{'disabled':!step.visited && !settings.overrideNavigation}\">\r\n      <i class=\"{{ settings.progressSectionFutureIcon }} progress-nav-icon\"></i>\r\n    </span>\r\n  </ng-template>\r\n  <!-- The progress menu sub node icon template-->\r\n  <ng-template #progressSubNodeIcons let-subNode='subNode'>\r\n    <span *ngIf=\"subNode.complete &&activeSubNode !=subNode\">\r\n      <i class=\"{{settings.progressMenuCompleteIcon}} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"activeSubNode ===subNode\">\r\n      <i class=\"{{ settings.progressSectionCurrentIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"!subNode.complete &&activeSubNode !=subNode\" [ngClass]=\"{'disabled':!subNode.visited && !settings.overrideNavigation}\">\r\n      <i class=\"{{ settings.progressSectionFutureIcon }} progress-nav-icon\"></i>\r\n    </span>\r\n  </ng-template>\r\n  <!-- The navigation footer template for language and logout buttons -->\r\n  <ng-template #navigationFooter>\r\n    <ng-content select=\"[sof-ar-nav-mobile-footer]\"> </ng-content>\r\n    <ng-container *ngIf=\"!settings.useCustomMobileFooter\">\r\n      <!-- The language button -->\r\n      <ng-container *ngIf=\"languageSettings?.displayLanguageOptions && languageSettings?.languages.length > 2 && mobileQuery.matches\">\r\n        <button id=\"sof-ar-nav-lang-dropdown\" mat-stroked-button\r\n                class=\"faded-button-50 language-button navigationFooter\" [matMenuTriggerFor]=\"headerLanguageMenu\"\r\n                [attr.aria-label]=\"languageSettings.buttonText | translate\">\r\n          <span aria-hidden=\"true\" class=\"icon-styling\">\r\n            <i class=\"far fa-globe language-globe\"></i>\r\n          </span>\r\n          {{languageSettings.buttonText | translate}}\r\n        </button>\r\n        <mat-menu #headerLanguageMenu=\"matMenu\" class=\"sof-ar-mat-menu\">\r\n          <button mat-menu-item *ngFor=\"let lang of languageSettings.languages\" (click)=\"setLanguage$.emit(lang)\"\r\n                  id=\"apply-lang-btn-{{lang}}\">\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\">\r\n              <div fxFlex=\"auto\">\r\n                {{ lang | translate }}\r\n              </div>\r\n              <div fxFlex=\"auto\" fxLayoutAlign=\"end end\">\r\n                <i *ngIf=\"currentLang === lang\" class=\"fad fa-check selected-language-icon\"></i>\r\n              </div>\r\n            </div>\r\n          </button>\r\n        </mat-menu>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"languageSettings?.displayLanguageOptions && languageSettings?.languages.length === 2 && mobileQuery.matches\">\r\n        <button *ngIf=\"languageSettings?.languages.length === 2\" id=\"sof-ar-nav-lang-button\" mat-stroked-button\r\n                class=\"faded-button-50 language-button navigationFooter\"\r\n                [attr.aria-label]=\"languageSettings.buttonText | translate\" (click)=\"setLanguage$.emit()\">\r\n          <span aria-hidden=\"true\" class=\"icon-styling\">\r\n            <i class=\"far fa-globe language-globe\"></i>\r\n          </span>\r\n          {{otherLangText | translate}}\r\n        </button>\r\n      </ng-container>\r\n      <!-- The logout button-->\r\n      <ng-container *ngIf=\"mobileQuery.matches && userName\">\r\n        <button id=\"sof-ar-header-lang-button\" mat-stroked-button class=\"navigationFooter\" (click)=\"logOut()\">\r\n          <span aria-hidden=\"true\" class=\"icon-styling\">\r\n            <i class=\"fas fa-sign-out-alt\"></i>\r\n          </span>\r\n          {{logOutText | translate}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n",
                     providers: [{
                             provide: stepper.STEPPER_GLOBAL_OPTIONS,
                             useValue: ɵ0
@@ -4462,8 +4470,8 @@
         { type: i0.Component, args: [{
                     selector: 'sof-progress-bar',
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    template: "<ng-container *ngIf=\"progressBarType =='slider'\">\r\n  <div class=\"shopping-navbar\"\r\n    [ngStyle]=\"{'background': 'linear-gradient(to right, #407BFF ' \r\n      + (stepActive + 1) / navbarStepKeys.length * 100 + '%, #f0f0f0 ' + (stepActive + 1) / navbarStepKeys.length * 100 + '%)'}\">\r\n  </div>\r\n  <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" fxLayoutAlign=\"center\" fxLayoutGap=\"12%\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"3px\" *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n      [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\">\r\n      <div class=\"step-title\"\r\n        [ngClass]=\"{ 'step-title-active': i == stepActive, 'step-title-done': i < stepActive, 'step-title-not-reached': i > stepActive}\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div fxHide.gt-sm>\r\n    <mat-select class=\"step-titles-mobile\" disableOptionCentering panelClass=\"step-option\"\r\n      [value]=\"navbarStepKeys[stepActive]\">\r\n      <mat-option *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n        [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\" [disabled]=\"i > stepActive\"\r\n        [value]=\"step\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"progressBarType =='dot'\">\r\n  <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" fxLayoutAlign=\"center\" fxLayoutGap=\"5%\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"3px\" *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n      [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\">\r\n      <div class=\"dot\" [ngClass]=\"{ 'dot-active': i == stepActive, 'dot-done': i < stepActive}\"></div>\r\n      <div class=\"step-title\"\r\n        [ngClass]=\"{ 'step-title-active': i == stepActive, 'step-title-done': i < stepActive, 'step-title-not-reached': i > stepActive}\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div fxHide.gt-sm fxLayout=\"row\">\r\n    <div class=\"dot-mobile\"></div>\r\n    <mat-select class=\"sof-stepper step-titles-mobile\" disableOptionCentering panelClass=\"step-option\"\r\n      [value]=\"navbarStepKeys[stepActive]\">\r\n      <mat-option fxHide.gt-sm *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n        [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\" [disabled]=\"i > stepActive\"\r\n        [value]=\"step\">\r\n        <div class=\"dot\" [ngClass]=\"{ 'dot-active': i == stepActive, 'dot-done': i < stepActive}\"></div>\r\n        {{ navbarTitles[i] | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </div>\r\n</ng-container>",
-                    styles: ["@charset \"UTF-8\";:root{--accent-color-100-parts:#b2dfdb;--accent-color-100-parts-rgb:178,223,219;--accent-color-200-parts:#80cbc4;--accent-color-200-parts-rgb:128,203,196;--accent-color-300-parts:#4db6ac;--accent-color-300-parts-rgb:77,182,172;--accent-color-400-parts:#26a69a;--accent-color-400-parts-rgb:38,166,154;--accent-color-50-parts:#e0f2f1;--accent-color-50-parts-rgb:224,242,241;--accent-color-500-parts:#009688;--accent-color-500-parts-rgb:0,150,136;--accent-color-600-parts:#00897b;--accent-color-600-parts-rgb:0,137,123;--accent-color-700-parts:#00796b;--accent-color-700-parts-rgb:0,121,107;--accent-color-800-parts:#00695c;--accent-color-800-parts-rgb:0,105,92;--accent-color-900-parts:#004d40;--accent-color-900-parts-rgb:0,77,64;--accent-color-A100-parts:#a7ffeb;--accent-color-A100-parts-rgb:167,255,235;--accent-color-A200-parts:#64ffda;--accent-color-A200-parts-rgb:100,255,218;--accent-color-A400-parts:#1de9b6;--accent-color-A400-parts-rgb:29,233,182;--accent-color-A700-parts:#00bfa5;--accent-color-A700-parts-rgb:0,191,165;--accent-color-contrast-100-parts:#000;--accent-color-contrast-200-parts:#000;--accent-color-contrast-300-parts:#000;--accent-color-contrast-400-parts:#000;--accent-color-contrast-50-parts:#000;--accent-color-contrast-500-parts:#fff;--accent-color-contrast-600-parts:#fff;--accent-color-contrast-700-parts:#fff;--accent-color-contrast-800-parts:#fff;--accent-color-contrast-900-parts:#fff;--accent-color-contrast-A100-parts:#000;--accent-color-contrast-A200-parts:#000;--accent-color-contrast-A400-parts:#000;--accent-color-contrast-A700-parts:#000;--error-color-100-parts:#f8c9c5;--error-color-100-parts-rgb:248,201,197;--error-color-200-parts:#f3a69e;--error-color-200-parts-rgb:248,201,197;--error-color-300-parts:#ee8277;--error-color-300-parts-rgb:238,130,119;--error-color-400-parts:#eb6759;--error-color-400-parts-rgb:235,103,89;--error-color-50-parts:#fceae8;--error-color-50-parts-rgb:252,234,232;--error-color-500-parts:#e74c3c;--error-color-500-parts-rgb:231,76,60;--error-color-600-parts:#e44536;--error-color-600-parts-rgb:228,69,54;--error-color-700-parts:#e03c2e;--error-color-700-parts-rgb:224,60,46;--error-color-800-parts:#dd3327;--error-color-800-parts-rgb:221,51,39;--error-color-900-parts:#d7241a;--error-color-900-parts-rgb:215,36,26;--error-color-A100-parts:#fff;--error-color-A100-parts-rgb:255,255,255;--error-color-A200-parts:#ffd9d7;--error-color-A200-parts-rgb:255,217,215;--error-color-A400-parts:#ffa8a4;--error-color-A400-parts-rgb:255,168,164;--error-color-A700-parts:#ff8f8b;--error-color-A700-parts-rgb:255,143,139;--error-color-contrast-100-parts:rgba(0,0,0,0.87);--error-color-contrast-200-parts:rgba(0,0,0,0.87);--error-color-contrast-300-parts:rgba(0,0,0,0.87);--error-color-contrast-400-parts:rgba(0,0,0,0.87);--error-color-contrast-50-parts:rgba(0,0,0,0.87);--error-color-contrast-500-parts:#fff;--error-color-contrast-600-parts:#fff;--error-color-contrast-700-parts:#fff;--error-color-contrast-800-parts:#fff;--error-color-contrast-900-parts:#fff;--error-color-contrast-A100-parts:rgba(0,0,0,0.87);--error-color-contrast-A200-parts:rgba(0,0,0,0.87);--error-color-contrast-A400-parts:rgba(0,0,0,0.87);--error-color-contrast-A700-parts:rgba(0,0,0,0.87);--info-color-100-parts:#c2e0f4;--info-color-100-parts-rgb:194,224,244;--info-color-200-parts:#9acced;--info-color-200-parts-rgb:154,204,237;--info-color-300-parts:#71b7e6;--info-color-300-parts-rgb:113,183,230;--info-color-400-parts:#52a7e0;--info-color-400-parts-rgb:82,167,224;--info-color-50-parts:#e7f3fb;--info-color-50-parts-rgb:231,243,251;--info-color-500-parts:#3498db;--info-color-500-parts-rgb:52,152,219;--info-color-600-parts:#2f90d7;--info-color-600-parts-rgb:47,144,215;--info-color-700-parts:#2785d2;--info-color-700-parts-rgb:39,133,210;--info-color-800-parts:#217bcd;--info-color-800-parts-rgb:33,123,205;--info-color-900-parts:#156ac4;--info-color-900-parts-rgb:21,106,196;--info-color-A100-parts:#f5f9ff;--info-color-A100-parts-rgb:245,249,255;--info-color-A200-parts:#c2ddff;--info-color-A200-parts-rgb:194,221,255;--info-color-A400-parts:#8fc1ff;--info-color-A400-parts-rgb:143,193,255;--info-color-A700-parts:#75b3ff;--info-color-A700-parts-rgb:117,179,255;--info-color-contrast-100-parts:rgba(0,0,0,0.87);--info-color-contrast-200-parts:rgba(0,0,0,0.87);--info-color-contrast-300-parts:rgba(0,0,0,0.87);--info-color-contrast-400-parts:#fff;--info-color-contrast-50-parts:rgba(0,0,0,0.87);--info-color-contrast-500-parts:#fff;--info-color-contrast-600-parts:#fff;--info-color-contrast-700-parts:#fff;--info-color-contrast-800-parts:#fff;--info-color-contrast-900-parts:#fff;--info-color-contrast-A100-parts:rgba(0,0,0,0.87);--info-color-contrast-A200-parts:rgba(0,0,0,0.87);--info-color-contrast-A400-parts:rgba(0,0,0,0.87);--info-color-contrast-A700-parts:rgba(0,0,0,0.87);--neutral-color-100-parts:#f5f5f5;--neutral-color-100-parts-rgb:245,245,245;--neutral-color-200-parts:#eee;--neutral-color-200-parts-rgb:238,238,238;--neutral-color-300-parts:#e0e0e0;--neutral-color-300-parts-rgb:224,224,224;--neutral-color-400-parts:#bdbdbd;--neutral-color-400-parts-rgb:189,189,189;--neutral-color-50-parts:#fafafa;--neutral-color-50-parts-rgb:250,250,250;--neutral-color-500-parts:#9e9e9e;--neutral-color-500-parts-rgb:158,158,158;--neutral-color-600-parts:#757575;--neutral-color-600-parts-rgb:117,117,117;--neutral-color-700-parts:#616161;--neutral-color-700-parts-rgb:97,97,97;--neutral-color-800-parts:#424242;--neutral-color-800-parts-rgb:66,66,66;--neutral-color-900-parts:#212121;--neutral-color-900-parts-rgb:33,33,33;--neutral-color-A100-parts:#fff;--neutral-color-A100-parts-rgb:255,255,255;--neutral-color-A200-parts:#fff;--neutral-color-A200-parts-rgb:255,255,255;--neutral-color-A400-parts:#fff;--neutral-color-A400-parts-rgb:255,255,255;--neutral-color-A700-parts:#fff;--neutral-color-A700-parts-rgb:255,255,255;--neutral-color-contrast-100-parts:rgba(0,0,0,0.87);--neutral-color-contrast-200-parts:rgba(0,0,0,0.87);--neutral-color-contrast-300-parts:rgba(0,0,0,0.87);--neutral-color-contrast-400-parts:rgba(0,0,0,0.87);--neutral-color-contrast-50-parts:rgba(0,0,0,0.87);--neutral-color-contrast-500-parts:#fff;--neutral-color-contrast-600-parts:#fff;--neutral-color-contrast-700-parts:#fff;--neutral-color-contrast-800-parts:#fff;--neutral-color-contrast-900-parts:#fff;--neutral-color-contrast-A100-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A200-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A400-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A700-parts:rgba(0,0,0,0.87);--primary-color-100-parts:#b9d4fc;--primary-color-100-parts-rgb:185,212,252;--primary-color-200-parts:#8ab7fb;--primary-color-200-parts-rgb:138,183,251;--primary-color-300-parts:#5b9af9;--primary-color-300-parts-rgb:91,154,249;--primary-color-400-parts:#3784f7;--primary-color-400-parts-rgb:55,132,247;--primary-color-50-parts:#edf4ff;--primary-color-50-parts-rgb:237,244,255;--primary-color-500-parts:#146ef6;--primary-color-500-parts-rgb:20,110,246;--primary-color-600-parts:#1266f5;--primary-color-600-parts-rgb:18,102,245;--primary-color-700-parts:#0e5bf3;--primary-color-700-parts-rgb:14,91,243;--primary-color-800-parts:#0b51f2;--primary-color-800-parts-rgb:11,81,242;--primary-color-900-parts:#063fef;--primary-color-900-parts-rgb:6,63,239;--primary-color-A100-parts:#fff;--primary-color-A100-parts-rgb:255,255,255;--primary-color-A200-parts:#e4e9ff;--primary-color-A200-parts-rgb:228,233,255;--primary-color-A400-parts:#b1c0ff;--primary-color-A400-parts-rgb:177,192,255;--primary-color-A700-parts:#97acff;--primary-color-A700-parts-rgb:151,172,255;--primary-color-contrast-100-parts:rgba(0,0,0,0.87);--primary-color-contrast-200-parts:rgba(0,0,0,0.87);--primary-color-contrast-300-parts:rgba(0,0,0,0.87);--primary-color-contrast-400-parts:#fff;--primary-color-contrast-50-parts:rgba(0,0,0,0.87);--primary-color-contrast-500-parts:#fff;--primary-color-contrast-600-parts:#fff;--primary-color-contrast-700-parts:#fff;--primary-color-contrast-800-parts:#fff;--primary-color-contrast-900-parts:#fff;--primary-color-contrast-A100-parts:rgba(0,0,0,0.87);--primary-color-contrast-A200-parts:rgba(0,0,0,0.87);--primary-color-contrast-A400-parts:rgba(0,0,0,0.87);--primary-color-contrast-A700-parts:rgba(0,0,0,0.87);--success-color-100-parts:#d1e6ce;--success-color-100-parts-rgb:209,230,206;--success-color-200-parts:#b3d6ae;--success-color-200-parts-rgb:179,214,174;--success-color-300-parts:#95c58d;--success-color-300-parts-rgb:149,197,141;--success-color-400-parts:#7eb874;--success-color-400-parts-rgb:126,184,116;--success-color-50-parts:#edf5eb;--success-color-50-parts-rgb:237,245,235;--success-color-500-parts:#67ac5c;--success-color-500-parts-rgb:103,172,92;--success-color-600-parts:#5fa554;--success-color-600-parts-rgb:95,165,84;--success-color-700-parts:#549b4a;--success-color-700-parts-rgb:84,155,74;--success-color-800-parts:#4a9241;--success-color-800-parts-rgb:74,146,65;--success-color-900-parts:#398230;--success-color-900-parts-rgb:57,130,48;--success-color-A100-parts:#d0ffcb;--success-color-A100-parts-rgb:208,255,203;--success-color-A200-parts:#a2ff98;--success-color-A200-parts-rgb:162,255,152;--success-color-A400-parts:#74ff65;--success-color-A400-parts-rgb:116,255,101;--success-color-A700-parts:#5dff4c;--success-color-A700-parts-rgb:93,255,76;--success-color-contrast-100-parts:rgba(0,0,0,0.87);--success-color-contrast-200-parts:rgba(0,0,0,0.87);--success-color-contrast-300-parts:rgba(0,0,0,0.87);--success-color-contrast-400-parts:rgba(0,0,0,0.87);--success-color-contrast-50-parts:rgba(0,0,0,0.87);--success-color-contrast-500-parts:rgba(0,0,0,0.87);--success-color-contrast-600-parts:rgba(0,0,0,0.87);--success-color-contrast-700-parts:#fff;--success-color-contrast-800-parts:#fff;--success-color-contrast-900-parts:#fff;--success-color-contrast-A100-parts:rgba(0,0,0,0.87);--success-color-contrast-A200-parts:rgba(0,0,0,0.87);--success-color-contrast-A400-parts:rgba(0,0,0,0.87);--success-color-contrast-A700-parts:rgba(0,0,0,0.87);--warn-color-100-parts:#fbe1c3;--warn-color-100-parts-rgb:251,225,195;--warn-color-200-parts:#f9ce9c;--warn-color-200-parts-rgb:249,206,156;--warn-color-300-parts:#f6ba74;--warn-color-300-parts-rgb:246,186,116;--warn-color-400-parts:#f4ab56;--warn-color-400-parts-rgb:244,171,86;--warn-color-50-parts:#fdf3e7;--warn-color-50-parts-rgb:253,243,231;--warn-color-500-parts:#f29c38;--warn-color-500-parts-rgb:242,156,56;--warn-color-600-parts:#f09432;--warn-color-600-parts-rgb:240,148,50;--warn-color-700-parts:#ee8a2b;--warn-color-700-parts-rgb:238,138,43;--warn-color-800-parts:#ec8024;--warn-color-800-parts-rgb:236,128,36;--warn-color-900-parts:#e86e17;--warn-color-900-parts-rgb:232,110,23;--warn-color-A100-parts:#fff;--warn-color-A100-parts-rgb:255,255,255;--warn-color-A200-parts:#fff0e6;--warn-color-A200-parts-rgb:255,240,230;--warn-color-A400-parts:#ffd0b3;--warn-color-A400-parts-rgb:255,208,179;--warn-color-A700-parts:#ffc19a;--warn-color-A700-parts-rgb:255,193,154;--warn-color-contrast-100-parts:rgba(0,0,0,0.87);--warn-color-contrast-200-parts:rgba(0,0,0,0.87);--warn-color-contrast-300-parts:rgba(0,0,0,0.87);--warn-color-contrast-400-parts:rgba(0,0,0,0.87);--warn-color-contrast-50-parts:rgba(0,0,0,0.87);--warn-color-contrast-500-parts:rgba(0,0,0,0.87);--warn-color-contrast-600-parts:rgba(0,0,0,0.87);--warn-color-contrast-700-parts:rgba(0,0,0,0.87);--warn-color-contrast-800-parts:rgba(0,0,0,0.87);--warn-color-contrast-900-parts:rgba(0,0,0,0.87);--warn-color-contrast-A100-parts:rgba(0,0,0,0.87);--warn-color-contrast-A200-parts:rgba(0,0,0,0.87);--warn-color-contrast-A400-parts:rgba(0,0,0,0.87);--warn-color-contrast-A700-parts:rgba(0,0,0,0.87)}.mat-badge-content{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;font-weight:600}.mat-badge-small .mat-badge-content{font-size:9px}.mat-badge-large .mat-badge-content{font-size:24px}.mat-h1,.mat-headline,.mat-typography h1{font:400 24px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h2,.mat-title,.mat-typography h2{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h3,.mat-subheading-2,.mat-typography h3{font:400 16px/28px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h4,.mat-subheading-1,.mat-typography h4{font:400 15px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h5,.mat-typography h5{font:400 11.62px/20px Roboto,Helvetica Neue,sans-serif;margin:0 0 12px}.mat-h6,.mat-typography h6{font:400 9.38px/20px Roboto,Helvetica Neue,sans-serif;margin:0 0 12px}.mat-body-2,.mat-body-strong{font:500 14px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-body,.mat-body-1,.mat-typography{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-body-1 p,.mat-body p,.mat-typography p{margin:0 0 12px}.mat-caption,.mat-small{font:400 12px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-display-4,.mat-typography .mat-display-4{font:300 112px/112px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.05em;margin:0 0 56px}.mat-display-3,.mat-typography .mat-display-3{font:400 56px/56px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.02em;margin:0 0 64px}.mat-display-2,.mat-typography .mat-display-2{font:400 45px/48px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.005em;margin:0 0 64px}.mat-display-1,.mat-typography .mat-display-1{font:400 34px/40px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 64px}.mat-bottom-sheet-container{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button,.mat-stroked-button{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:500}.mat-button-toggle,.mat-card{font-family:Roboto,Helvetica Neue,sans-serif}.mat-card-title{font-size:24px;font-weight:500}.mat-card-header .mat-card-title{font-size:20px}.mat-card-content,.mat-card-subtitle{font-size:14px}.mat-checkbox{font-family:Roboto,Helvetica Neue,sans-serif}.mat-checkbox-layout .mat-checkbox-label{line-height:24px}.mat-chip{font-size:14px;font-weight:500}.mat-chip .mat-chip-remove.mat-icon,.mat-chip .mat-chip-trailing-icon.mat-icon{font-size:18px}.mat-table{font-family:Roboto,Helvetica Neue,sans-serif}.mat-header-cell{font-size:12px;font-weight:500}.mat-cell,.mat-footer-cell{font-size:14px}.mat-calendar{font-family:Roboto,Helvetica Neue,sans-serif}.mat-calendar-body{font-size:13px}.mat-calendar-body-label,.mat-calendar-period-button{font-size:14px;font-weight:500}.mat-calendar-table-header th{font-size:11px;font-weight:400}.mat-dialog-title{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-expansion-panel-header{font-family:Roboto,Helvetica Neue,sans-serif;font-size:15px;font-weight:400}.mat-expansion-panel-content{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-form-field{font-family:Roboto,Helvetica Neue,sans-serif;font-size:inherit;font-weight:400;letter-spacing:normal;line-height:1.125}.mat-form-field-wrapper{padding-bottom:1.34375em}.mat-form-field-prefix .mat-icon,.mat-form-field-suffix .mat-icon{font-size:150%;line-height:1.125}.mat-form-field-prefix .mat-icon-button,.mat-form-field-suffix .mat-icon-button{height:1.5em;width:1.5em}.mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field-suffix .mat-icon-button .mat-icon{height:1.125em;line-height:1.125}.mat-form-field-infix{border-top:.84375em solid transparent;padding:.5em 0}.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34375em) scale(.75);width:133.3333333333%}.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34374em) scale(.75);width:133.3333433333%}.mat-form-field-label-wrapper{padding-top:.84375em;top:-.84375em}.mat-form-field-label{top:1.34375em}.mat-form-field-underline{bottom:1.34375em}.mat-form-field-subscript-wrapper{font-size:75%;margin-top:.6666666667em;top:calc(100% - 1.79167em)}.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-infix{padding:.4375em 0}.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28125em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);width:133.3333333333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28124em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00101px);width:133.3333433333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28123em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00102px);width:133.3333533333%}.mat-form-field-appearance-legacy .mat-form-field-label{top:1.28125em}.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper{margin-top:.5416666667em;top:calc(100% - 1.66667em)}@media print{.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28122em) scale(.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28121em) scale(.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.2812em) scale(.75)}}.mat-form-field-appearance-fill .mat-form-field-infix{padding:.25em 0 .75em}.mat-form-field-appearance-fill .mat-form-field-label{margin-top:-.5em;top:1.09375em}.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-.59375em) scale(.75);width:133.3333333333%}.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-.59374em) scale(.75);width:133.3333433333%}.mat-form-field-appearance-outline .mat-form-field-infix{padding:1em 0}.mat-form-field-appearance-outline .mat-form-field-label{margin-top:-.25em;top:1.84375em}.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59375em) scale(.75);width:133.3333333333%}.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59374em) scale(.75);width:133.3333433333%}.mat-grid-tile-footer,.mat-grid-tile-header{font-size:14px}.mat-grid-tile-footer .mat-line,.mat-grid-tile-header .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-grid-tile-footer .mat-line:nth-child(n+2),.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:12px}input.mat-input-element{margin-top:-.0625em}.mat-menu-item{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.mat-paginator,.mat-paginator-page-size .mat-select-trigger{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px}.mat-radio-button,.mat-select{font-family:Roboto,Helvetica Neue,sans-serif}.mat-select-trigger{height:1.125em}.mat-slide-toggle-content,.mat-slider-thumb-label-text{font-family:Roboto,Helvetica Neue,sans-serif}.mat-slider-thumb-label-text{font-size:12px;font-weight:500}.mat-stepper-horizontal,.mat-stepper-vertical{font-family:Roboto,Helvetica Neue,sans-serif}.mat-step-label{font-size:14px;font-weight:400}.mat-step-sub-label-error{font-weight:400}.mat-step-label-error{font-size:14px}.mat-step-label-selected{font-size:14px;font-weight:500}.mat-tab-group,.mat-tab-label,.mat-tab-link{font-family:Roboto,Helvetica Neue,sans-serif}.mat-tab-label,.mat-tab-link{font-size:14px;font-weight:500}.mat-toolbar,.mat-toolbar h1,.mat-toolbar h2,.mat-toolbar h3,.mat-toolbar h4,.mat-toolbar h5,.mat-toolbar h6{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0}.mat-tooltip{font-family:Roboto,Helvetica Neue,sans-serif;font-size:10px;padding-bottom:6px;padding-top:6px}.mat-tooltip-handset{font-size:14px;padding-bottom:8px;padding-top:8px}.mat-list-item,.mat-list-option{font-family:Roboto,Helvetica Neue,sans-serif}.mat-list-base .mat-list-item{font-size:16px}.mat-list-base .mat-list-item .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base .mat-list-item .mat-line:nth-child(n+2){font-size:14px}.mat-list-base .mat-list-option{font-size:16px}.mat-list-base .mat-list-option .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base .mat-list-option .mat-line:nth-child(n+2){font-size:14px}.mat-list-base .mat-subheader{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:500}.mat-list-base[dense] .mat-list-item{font-size:12px}.mat-list-base[dense] .mat-list-item .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2),.mat-list-base[dense] .mat-list-option{font-size:12px}.mat-list-base[dense] .mat-list-option .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2){font-size:12px}.mat-list-base[dense] .mat-subheader{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;font-weight:500}.mat-option{font-family:Roboto,Helvetica Neue,sans-serif;font-size:16px}.mat-optgroup-label{font:500 14px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-simple-snackbar{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px}.mat-simple-snackbar-action{font-family:inherit;font-size:inherit;font-weight:500;line-height:1}.mat-tree{font-family:Roboto,Helvetica Neue,sans-serif}.mat-nested-tree-node,.mat-tree-node{font-size:14px;font-weight:400}.mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{border-radius:50%;pointer-events:none;position:absolute;transform:scale(0);transition:opacity,transform 0ms cubic-bezier(0,0,.2,1)}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-visually-hidden{-moz-appearance:none;-webkit-appearance:none;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;outline:0;overflow:hidden;padding:0;position:absolute;width:1px}.cdk-global-overlay-wrapper,.cdk-overlay-container{height:100%;left:0;pointer-events:none;top:0;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{box-sizing:border-box;max-height:100%;max-width:100%;pointer-events:auto}.cdk-overlay-backdrop{-webkit-tap-highlight-color:transparent;bottom:0;left:0;opacity:0;pointer-events:auto;position:absolute;right:0;top:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1);z-index:1000}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}@media screen and (-ms-high-contrast:active){.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{display:flex;flex-direction:column;min-height:1px;min-width:1px;position:absolute;z-index:1000}.cdk-global-scrollblock{overflow-y:scroll;position:fixed;width:100%}@-webkit-keyframes cdk-text-field-autofill-start{\n  /*!*/}@keyframes cdk-text-field-autofill-start{\n  /*!*/}@-webkit-keyframes cdk-text-field-autofill-end{\n  /*!*/}@keyframes cdk-text-field-autofill-end{\n  /*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-start 0s 1ms;animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){-webkit-animation:cdk-text-field-autofill-end 0s 1ms;animation:cdk-text-field-autofill-end 0s 1ms}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{box-sizing:content-box!important;height:auto!important;overflow:hidden!important;padding:2px 0!important}textarea.cdk-textarea-autosize-measuring-firefox{box-sizing:content-box!important;height:0!important;padding:2px 0!important}.mat-focus-indicator,.mat-mdc-focus-indicator{position:relative}@media not screen and (max-width:959px){.shopping-navbar{height:8px}}.step-titles{font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important;margin-left:16px!important;padding-bottom:20px;padding-top:20px}.step-titles-mobile{background-color:var(--primary-color-50-parts);height:48px!important;padding-bottom:10px;padding-top:10px}.step-titles-mobile ::ng-deep .mat-select-trigger{font-weight:700;padding-left:50px;padding-right:20px}.step-active,.step-done{font-weight:700}.step-done{color:#000;cursor:pointer}::ng-deep .cdk-overlay-container .cdk-overlay-pane{transform:none!important}::ng-deep .cdk-overlay-container .cdk-overlay-pane .step-option{background:#edf4ff!important;margin-top:58px!important}::ng-deep .cdk-overlay-container .cdk-overlay-pane .step-option .mat-option-disabled{color:#000;opacity:1%}::ng-deep mat-select.sof-stepper div.mat-select-value span.mat-select-value-text{color:rgba(0,0,0,.87)!important;font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important}::ng-deep mat-select.sof-stepper div.mat-select-value{padding-top:12px!important}.dot{align-self:center;background-color:#fff;border:2px solid #979797;border-radius:50%;display:inline-block;height:6px;width:6px}@media only screen and (max-width:959px){.dot{margin-right:20px}}.dot-mobile{border:none;border-radius:50%;display:inline-block;margin-left:17px;margin-top:30px;position:absolute}.dot-active,.dot-mobile{background-color:var(--primary-color-500-parts);height:8px;width:8px}.dot-active,.dot-done{align-self:center;border:none}.dot-done{background-color:var(--primary-color-500-parts);color:#fff;font-size:12px;font-weight:900;height:16px;line-height:16px;margin-left:3px;position:relative;text-align:center;vertical-align:top;width:16px}.dot-done:before{content:\"\uF00C\";display:none;font:var(--fa-font-solid)}.dot-done:after{content:\"\";z-index:-1}@media only screen and (max-width:959px){.dot-done{background-color:var(--primary-color-500-parts);border:none;height:10px;width:10px}.dot-done:before{content:\"\"}.dot-done:after{content:\"\";z-index:-1}}.step-title{font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important;margin-left:16px!important}.step-title-active{color:rgba(0,0,0,.87)!important}.step-title-not-reached{color:rgba(0,0,0,.6)!important}.step-title-done{color:var(--primary-color-500-parts)!important}"]
+                    template: "<ng-container *ngIf=\"progressBarType =='slider'\">\r\n  <div class=\"shopping-navbar\"\r\n    [ngStyle]=\"{'background': 'linear-gradient(to right, #407BFF ' \r\n      + (stepActive + 1) / navbarStepKeys.length * 100 + '%, #f0f0f0 ' + (stepActive + 1) / navbarStepKeys.length * 100 + '%)'}\">\r\n  </div>\r\n  <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" fxLayoutAlign=\"center\" fxLayoutGap=\"12%\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"3px\" *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n      [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\">\r\n      <div class=\"step-title\"\r\n        [ngClass]=\"{ 'step-title-active': i == stepActive, 'step-title-done': i < stepActive, 'step-title-not-reached': i > stepActive}\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div fxHide.gt-sm>\r\n    <mat-select class=\"step-titles-mobile\" disableOptionCentering panelClass=\"step-option\"\r\n      [value]=\"navbarStepKeys[stepActive]\">\r\n      <mat-option *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n        [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\" [disabled]=\"i > stepActive\"\r\n        [value]=\"step\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"progressBarType =='dot'\">\r\n  <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" fxLayoutAlign=\"center\" fxLayoutGap=\"5%\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"3px\" *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n      [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\">\r\n      <div>\r\n        <span *ngIf=\"i >= stepActive\" class=\"dot\" [ngClass]=\"{ 'dot-active': i == stepActive }\"></span>\r\n        <span *ngIf=\"i < stepActive\"><i class=\"fas fa-check-circle dot-done\" color=\"primary\"></i></span>\r\n      </div>\r\n      <div class=\"step-title\"\r\n        [ngClass]=\"{ 'step-title-active': i == stepActive, 'step-title-done': i < stepActive, 'step-title-not-reached': i > stepActive}\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div fxHide.gt-sm fxLayout=\"row\">\r\n    <div class=\"dot-mobile\"></div>\r\n    <mat-select class=\"sof-stepper step-titles-mobile\" disableOptionCentering panelClass=\"step-option\"\r\n      [value]=\"navbarStepKeys[stepActive]\">\r\n      <mat-option fxHide.gt-sm *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n        [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\" [disabled]=\"i > stepActive\"\r\n        [value]=\"step\">\r\n        <div class=\"dot\" [ngClass]=\"{ 'dot-active': i == stepActive, 'dot-done': i < stepActive}\"></div>\r\n        {{ navbarTitles[i] | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </div>\r\n</ng-container>",
+                    styles: [":root{--accent-color-100-parts:#b2dfdb;--accent-color-100-parts-rgb:178,223,219;--accent-color-200-parts:#80cbc4;--accent-color-200-parts-rgb:128,203,196;--accent-color-300-parts:#4db6ac;--accent-color-300-parts-rgb:77,182,172;--accent-color-400-parts:#26a69a;--accent-color-400-parts-rgb:38,166,154;--accent-color-50-parts:#e0f2f1;--accent-color-50-parts-rgb:224,242,241;--accent-color-500-parts:#009688;--accent-color-500-parts-rgb:0,150,136;--accent-color-600-parts:#00897b;--accent-color-600-parts-rgb:0,137,123;--accent-color-700-parts:#00796b;--accent-color-700-parts-rgb:0,121,107;--accent-color-800-parts:#00695c;--accent-color-800-parts-rgb:0,105,92;--accent-color-900-parts:#004d40;--accent-color-900-parts-rgb:0,77,64;--accent-color-A100-parts:#a7ffeb;--accent-color-A100-parts-rgb:167,255,235;--accent-color-A200-parts:#64ffda;--accent-color-A200-parts-rgb:100,255,218;--accent-color-A400-parts:#1de9b6;--accent-color-A400-parts-rgb:29,233,182;--accent-color-A700-parts:#00bfa5;--accent-color-A700-parts-rgb:0,191,165;--accent-color-contrast-100-parts:#000;--accent-color-contrast-200-parts:#000;--accent-color-contrast-300-parts:#000;--accent-color-contrast-400-parts:#000;--accent-color-contrast-50-parts:#000;--accent-color-contrast-500-parts:#fff;--accent-color-contrast-600-parts:#fff;--accent-color-contrast-700-parts:#fff;--accent-color-contrast-800-parts:#fff;--accent-color-contrast-900-parts:#fff;--accent-color-contrast-A100-parts:#000;--accent-color-contrast-A200-parts:#000;--accent-color-contrast-A400-parts:#000;--accent-color-contrast-A700-parts:#000;--error-color-100-parts:#f8c9c5;--error-color-100-parts-rgb:248,201,197;--error-color-200-parts:#f3a69e;--error-color-200-parts-rgb:248,201,197;--error-color-300-parts:#ee8277;--error-color-300-parts-rgb:238,130,119;--error-color-400-parts:#eb6759;--error-color-400-parts-rgb:235,103,89;--error-color-50-parts:#fceae8;--error-color-50-parts-rgb:252,234,232;--error-color-500-parts:#e74c3c;--error-color-500-parts-rgb:231,76,60;--error-color-600-parts:#e44536;--error-color-600-parts-rgb:228,69,54;--error-color-700-parts:#e03c2e;--error-color-700-parts-rgb:224,60,46;--error-color-800-parts:#dd3327;--error-color-800-parts-rgb:221,51,39;--error-color-900-parts:#d7241a;--error-color-900-parts-rgb:215,36,26;--error-color-A100-parts:#fff;--error-color-A100-parts-rgb:255,255,255;--error-color-A200-parts:#ffd9d7;--error-color-A200-parts-rgb:255,217,215;--error-color-A400-parts:#ffa8a4;--error-color-A400-parts-rgb:255,168,164;--error-color-A700-parts:#ff8f8b;--error-color-A700-parts-rgb:255,143,139;--error-color-contrast-100-parts:rgba(0,0,0,0.87);--error-color-contrast-200-parts:rgba(0,0,0,0.87);--error-color-contrast-300-parts:rgba(0,0,0,0.87);--error-color-contrast-400-parts:rgba(0,0,0,0.87);--error-color-contrast-50-parts:rgba(0,0,0,0.87);--error-color-contrast-500-parts:#fff;--error-color-contrast-600-parts:#fff;--error-color-contrast-700-parts:#fff;--error-color-contrast-800-parts:#fff;--error-color-contrast-900-parts:#fff;--error-color-contrast-A100-parts:rgba(0,0,0,0.87);--error-color-contrast-A200-parts:rgba(0,0,0,0.87);--error-color-contrast-A400-parts:rgba(0,0,0,0.87);--error-color-contrast-A700-parts:rgba(0,0,0,0.87);--info-color-100-parts:#c2e0f4;--info-color-100-parts-rgb:194,224,244;--info-color-200-parts:#9acced;--info-color-200-parts-rgb:154,204,237;--info-color-300-parts:#71b7e6;--info-color-300-parts-rgb:113,183,230;--info-color-400-parts:#52a7e0;--info-color-400-parts-rgb:82,167,224;--info-color-50-parts:#e7f3fb;--info-color-50-parts-rgb:231,243,251;--info-color-500-parts:#3498db;--info-color-500-parts-rgb:52,152,219;--info-color-600-parts:#2f90d7;--info-color-600-parts-rgb:47,144,215;--info-color-700-parts:#2785d2;--info-color-700-parts-rgb:39,133,210;--info-color-800-parts:#217bcd;--info-color-800-parts-rgb:33,123,205;--info-color-900-parts:#156ac4;--info-color-900-parts-rgb:21,106,196;--info-color-A100-parts:#f5f9ff;--info-color-A100-parts-rgb:245,249,255;--info-color-A200-parts:#c2ddff;--info-color-A200-parts-rgb:194,221,255;--info-color-A400-parts:#8fc1ff;--info-color-A400-parts-rgb:143,193,255;--info-color-A700-parts:#75b3ff;--info-color-A700-parts-rgb:117,179,255;--info-color-contrast-100-parts:rgba(0,0,0,0.87);--info-color-contrast-200-parts:rgba(0,0,0,0.87);--info-color-contrast-300-parts:rgba(0,0,0,0.87);--info-color-contrast-400-parts:#fff;--info-color-contrast-50-parts:rgba(0,0,0,0.87);--info-color-contrast-500-parts:#fff;--info-color-contrast-600-parts:#fff;--info-color-contrast-700-parts:#fff;--info-color-contrast-800-parts:#fff;--info-color-contrast-900-parts:#fff;--info-color-contrast-A100-parts:rgba(0,0,0,0.87);--info-color-contrast-A200-parts:rgba(0,0,0,0.87);--info-color-contrast-A400-parts:rgba(0,0,0,0.87);--info-color-contrast-A700-parts:rgba(0,0,0,0.87);--neutral-color-100-parts:#f5f5f5;--neutral-color-100-parts-rgb:245,245,245;--neutral-color-200-parts:#eee;--neutral-color-200-parts-rgb:238,238,238;--neutral-color-300-parts:#e0e0e0;--neutral-color-300-parts-rgb:224,224,224;--neutral-color-400-parts:#bdbdbd;--neutral-color-400-parts-rgb:189,189,189;--neutral-color-50-parts:#fafafa;--neutral-color-50-parts-rgb:250,250,250;--neutral-color-500-parts:#9e9e9e;--neutral-color-500-parts-rgb:158,158,158;--neutral-color-600-parts:#757575;--neutral-color-600-parts-rgb:117,117,117;--neutral-color-700-parts:#616161;--neutral-color-700-parts-rgb:97,97,97;--neutral-color-800-parts:#424242;--neutral-color-800-parts-rgb:66,66,66;--neutral-color-900-parts:#212121;--neutral-color-900-parts-rgb:33,33,33;--neutral-color-A100-parts:#fff;--neutral-color-A100-parts-rgb:255,255,255;--neutral-color-A200-parts:#fff;--neutral-color-A200-parts-rgb:255,255,255;--neutral-color-A400-parts:#fff;--neutral-color-A400-parts-rgb:255,255,255;--neutral-color-A700-parts:#fff;--neutral-color-A700-parts-rgb:255,255,255;--neutral-color-contrast-100-parts:rgba(0,0,0,0.87);--neutral-color-contrast-200-parts:rgba(0,0,0,0.87);--neutral-color-contrast-300-parts:rgba(0,0,0,0.87);--neutral-color-contrast-400-parts:rgba(0,0,0,0.87);--neutral-color-contrast-50-parts:rgba(0,0,0,0.87);--neutral-color-contrast-500-parts:#fff;--neutral-color-contrast-600-parts:#fff;--neutral-color-contrast-700-parts:#fff;--neutral-color-contrast-800-parts:#fff;--neutral-color-contrast-900-parts:#fff;--neutral-color-contrast-A100-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A200-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A400-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A700-parts:rgba(0,0,0,0.87);--primary-color-100-parts:#b9d4fc;--primary-color-100-parts-rgb:185,212,252;--primary-color-200-parts:#8ab7fb;--primary-color-200-parts-rgb:138,183,251;--primary-color-300-parts:#5b9af9;--primary-color-300-parts-rgb:91,154,249;--primary-color-400-parts:#3784f7;--primary-color-400-parts-rgb:55,132,247;--primary-color-50-parts:#edf4ff;--primary-color-50-parts-rgb:237,244,255;--primary-color-500-parts:#146ef6;--primary-color-500-parts-rgb:20,110,246;--primary-color-600-parts:#1266f5;--primary-color-600-parts-rgb:18,102,245;--primary-color-700-parts:#0e5bf3;--primary-color-700-parts-rgb:14,91,243;--primary-color-800-parts:#0b51f2;--primary-color-800-parts-rgb:11,81,242;--primary-color-900-parts:#063fef;--primary-color-900-parts-rgb:6,63,239;--primary-color-A100-parts:#fff;--primary-color-A100-parts-rgb:255,255,255;--primary-color-A200-parts:#e4e9ff;--primary-color-A200-parts-rgb:228,233,255;--primary-color-A400-parts:#b1c0ff;--primary-color-A400-parts-rgb:177,192,255;--primary-color-A700-parts:#97acff;--primary-color-A700-parts-rgb:151,172,255;--primary-color-contrast-100-parts:rgba(0,0,0,0.87);--primary-color-contrast-200-parts:rgba(0,0,0,0.87);--primary-color-contrast-300-parts:rgba(0,0,0,0.87);--primary-color-contrast-400-parts:#fff;--primary-color-contrast-50-parts:rgba(0,0,0,0.87);--primary-color-contrast-500-parts:#fff;--primary-color-contrast-600-parts:#fff;--primary-color-contrast-700-parts:#fff;--primary-color-contrast-800-parts:#fff;--primary-color-contrast-900-parts:#fff;--primary-color-contrast-A100-parts:rgba(0,0,0,0.87);--primary-color-contrast-A200-parts:rgba(0,0,0,0.87);--primary-color-contrast-A400-parts:rgba(0,0,0,0.87);--primary-color-contrast-A700-parts:rgba(0,0,0,0.87);--success-color-100-parts:#d1e6ce;--success-color-100-parts-rgb:209,230,206;--success-color-200-parts:#b3d6ae;--success-color-200-parts-rgb:179,214,174;--success-color-300-parts:#95c58d;--success-color-300-parts-rgb:149,197,141;--success-color-400-parts:#7eb874;--success-color-400-parts-rgb:126,184,116;--success-color-50-parts:#edf5eb;--success-color-50-parts-rgb:237,245,235;--success-color-500-parts:#67ac5c;--success-color-500-parts-rgb:103,172,92;--success-color-600-parts:#5fa554;--success-color-600-parts-rgb:95,165,84;--success-color-700-parts:#549b4a;--success-color-700-parts-rgb:84,155,74;--success-color-800-parts:#4a9241;--success-color-800-parts-rgb:74,146,65;--success-color-900-parts:#398230;--success-color-900-parts-rgb:57,130,48;--success-color-A100-parts:#d0ffcb;--success-color-A100-parts-rgb:208,255,203;--success-color-A200-parts:#a2ff98;--success-color-A200-parts-rgb:162,255,152;--success-color-A400-parts:#74ff65;--success-color-A400-parts-rgb:116,255,101;--success-color-A700-parts:#5dff4c;--success-color-A700-parts-rgb:93,255,76;--success-color-contrast-100-parts:rgba(0,0,0,0.87);--success-color-contrast-200-parts:rgba(0,0,0,0.87);--success-color-contrast-300-parts:rgba(0,0,0,0.87);--success-color-contrast-400-parts:rgba(0,0,0,0.87);--success-color-contrast-50-parts:rgba(0,0,0,0.87);--success-color-contrast-500-parts:rgba(0,0,0,0.87);--success-color-contrast-600-parts:rgba(0,0,0,0.87);--success-color-contrast-700-parts:#fff;--success-color-contrast-800-parts:#fff;--success-color-contrast-900-parts:#fff;--success-color-contrast-A100-parts:rgba(0,0,0,0.87);--success-color-contrast-A200-parts:rgba(0,0,0,0.87);--success-color-contrast-A400-parts:rgba(0,0,0,0.87);--success-color-contrast-A700-parts:rgba(0,0,0,0.87);--warn-color-100-parts:#fbe1c3;--warn-color-100-parts-rgb:251,225,195;--warn-color-200-parts:#f9ce9c;--warn-color-200-parts-rgb:249,206,156;--warn-color-300-parts:#f6ba74;--warn-color-300-parts-rgb:246,186,116;--warn-color-400-parts:#f4ab56;--warn-color-400-parts-rgb:244,171,86;--warn-color-50-parts:#fdf3e7;--warn-color-50-parts-rgb:253,243,231;--warn-color-500-parts:#f29c38;--warn-color-500-parts-rgb:242,156,56;--warn-color-600-parts:#f09432;--warn-color-600-parts-rgb:240,148,50;--warn-color-700-parts:#ee8a2b;--warn-color-700-parts-rgb:238,138,43;--warn-color-800-parts:#ec8024;--warn-color-800-parts-rgb:236,128,36;--warn-color-900-parts:#e86e17;--warn-color-900-parts-rgb:232,110,23;--warn-color-A100-parts:#fff;--warn-color-A100-parts-rgb:255,255,255;--warn-color-A200-parts:#fff0e6;--warn-color-A200-parts-rgb:255,240,230;--warn-color-A400-parts:#ffd0b3;--warn-color-A400-parts-rgb:255,208,179;--warn-color-A700-parts:#ffc19a;--warn-color-A700-parts-rgb:255,193,154;--warn-color-contrast-100-parts:rgba(0,0,0,0.87);--warn-color-contrast-200-parts:rgba(0,0,0,0.87);--warn-color-contrast-300-parts:rgba(0,0,0,0.87);--warn-color-contrast-400-parts:rgba(0,0,0,0.87);--warn-color-contrast-50-parts:rgba(0,0,0,0.87);--warn-color-contrast-500-parts:rgba(0,0,0,0.87);--warn-color-contrast-600-parts:rgba(0,0,0,0.87);--warn-color-contrast-700-parts:rgba(0,0,0,0.87);--warn-color-contrast-800-parts:rgba(0,0,0,0.87);--warn-color-contrast-900-parts:rgba(0,0,0,0.87);--warn-color-contrast-A100-parts:rgba(0,0,0,0.87);--warn-color-contrast-A200-parts:rgba(0,0,0,0.87);--warn-color-contrast-A400-parts:rgba(0,0,0,0.87);--warn-color-contrast-A700-parts:rgba(0,0,0,0.87)}.mat-badge-content{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;font-weight:600}.mat-badge-small .mat-badge-content{font-size:9px}.mat-badge-large .mat-badge-content{font-size:24px}.mat-h1,.mat-headline,.mat-typography h1{font:400 24px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h2,.mat-title,.mat-typography h2{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h3,.mat-subheading-2,.mat-typography h3{font:400 16px/28px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h4,.mat-subheading-1,.mat-typography h4{font:400 15px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h5,.mat-typography h5{font:400 11.62px/20px Roboto,Helvetica Neue,sans-serif;margin:0 0 12px}.mat-h6,.mat-typography h6{font:400 9.38px/20px Roboto,Helvetica Neue,sans-serif;margin:0 0 12px}.mat-body-2,.mat-body-strong{font:500 14px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-body,.mat-body-1,.mat-typography{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-body-1 p,.mat-body p,.mat-typography p{margin:0 0 12px}.mat-caption,.mat-small{font:400 12px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-display-4,.mat-typography .mat-display-4{font:300 112px/112px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.05em;margin:0 0 56px}.mat-display-3,.mat-typography .mat-display-3{font:400 56px/56px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.02em;margin:0 0 64px}.mat-display-2,.mat-typography .mat-display-2{font:400 45px/48px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.005em;margin:0 0 64px}.mat-display-1,.mat-typography .mat-display-1{font:400 34px/40px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 64px}.mat-bottom-sheet-container{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button,.mat-stroked-button{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:500}.mat-button-toggle,.mat-card{font-family:Roboto,Helvetica Neue,sans-serif}.mat-card-title{font-size:24px;font-weight:500}.mat-card-header .mat-card-title{font-size:20px}.mat-card-content,.mat-card-subtitle{font-size:14px}.mat-checkbox{font-family:Roboto,Helvetica Neue,sans-serif}.mat-checkbox-layout .mat-checkbox-label{line-height:24px}.mat-chip{font-size:14px;font-weight:500}.mat-chip .mat-chip-remove.mat-icon,.mat-chip .mat-chip-trailing-icon.mat-icon{font-size:18px}.mat-table{font-family:Roboto,Helvetica Neue,sans-serif}.mat-header-cell{font-size:12px;font-weight:500}.mat-cell,.mat-footer-cell{font-size:14px}.mat-calendar{font-family:Roboto,Helvetica Neue,sans-serif}.mat-calendar-body{font-size:13px}.mat-calendar-body-label,.mat-calendar-period-button{font-size:14px;font-weight:500}.mat-calendar-table-header th{font-size:11px;font-weight:400}.mat-dialog-title{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-expansion-panel-header{font-family:Roboto,Helvetica Neue,sans-serif;font-size:15px;font-weight:400}.mat-expansion-panel-content{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-form-field{font-family:Roboto,Helvetica Neue,sans-serif;font-size:inherit;font-weight:400;letter-spacing:normal;line-height:1.125}.mat-form-field-wrapper{padding-bottom:1.34375em}.mat-form-field-prefix .mat-icon,.mat-form-field-suffix .mat-icon{font-size:150%;line-height:1.125}.mat-form-field-prefix .mat-icon-button,.mat-form-field-suffix .mat-icon-button{height:1.5em;width:1.5em}.mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field-suffix .mat-icon-button .mat-icon{height:1.125em;line-height:1.125}.mat-form-field-infix{border-top:.84375em solid transparent;padding:.5em 0}.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34375em) scale(.75);width:133.3333333333%}.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34374em) scale(.75);width:133.3333433333%}.mat-form-field-label-wrapper{padding-top:.84375em;top:-.84375em}.mat-form-field-label{top:1.34375em}.mat-form-field-underline{bottom:1.34375em}.mat-form-field-subscript-wrapper{font-size:75%;margin-top:.6666666667em;top:calc(100% - 1.79167em)}.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-infix{padding:.4375em 0}.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28125em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);width:133.3333333333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28124em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00101px);width:133.3333433333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28123em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00102px);width:133.3333533333%}.mat-form-field-appearance-legacy .mat-form-field-label{top:1.28125em}.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper{margin-top:.5416666667em;top:calc(100% - 1.66667em)}@media print{.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28122em) scale(.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28121em) scale(.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.2812em) scale(.75)}}.mat-form-field-appearance-fill .mat-form-field-infix{padding:.25em 0 .75em}.mat-form-field-appearance-fill .mat-form-field-label{margin-top:-.5em;top:1.09375em}.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-.59375em) scale(.75);width:133.3333333333%}.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-.59374em) scale(.75);width:133.3333433333%}.mat-form-field-appearance-outline .mat-form-field-infix{padding:1em 0}.mat-form-field-appearance-outline .mat-form-field-label{margin-top:-.25em;top:1.84375em}.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59375em) scale(.75);width:133.3333333333%}.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59374em) scale(.75);width:133.3333433333%}.mat-grid-tile-footer,.mat-grid-tile-header{font-size:14px}.mat-grid-tile-footer .mat-line,.mat-grid-tile-header .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-grid-tile-footer .mat-line:nth-child(n+2),.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:12px}input.mat-input-element{margin-top:-.0625em}.mat-menu-item{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.mat-paginator,.mat-paginator-page-size .mat-select-trigger{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px}.mat-radio-button,.mat-select{font-family:Roboto,Helvetica Neue,sans-serif}.mat-select-trigger{height:1.125em}.mat-slide-toggle-content,.mat-slider-thumb-label-text{font-family:Roboto,Helvetica Neue,sans-serif}.mat-slider-thumb-label-text{font-size:12px;font-weight:500}.mat-stepper-horizontal,.mat-stepper-vertical{font-family:Roboto,Helvetica Neue,sans-serif}.mat-step-label{font-size:14px;font-weight:400}.mat-step-sub-label-error{font-weight:400}.mat-step-label-error{font-size:14px}.mat-step-label-selected{font-size:14px;font-weight:500}.mat-tab-group,.mat-tab-label,.mat-tab-link{font-family:Roboto,Helvetica Neue,sans-serif}.mat-tab-label,.mat-tab-link{font-size:14px;font-weight:500}.mat-toolbar,.mat-toolbar h1,.mat-toolbar h2,.mat-toolbar h3,.mat-toolbar h4,.mat-toolbar h5,.mat-toolbar h6{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0}.mat-tooltip{font-family:Roboto,Helvetica Neue,sans-serif;font-size:10px;padding-bottom:6px;padding-top:6px}.mat-tooltip-handset{font-size:14px;padding-bottom:8px;padding-top:8px}.mat-list-item,.mat-list-option{font-family:Roboto,Helvetica Neue,sans-serif}.mat-list-base .mat-list-item{font-size:16px}.mat-list-base .mat-list-item .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base .mat-list-item .mat-line:nth-child(n+2){font-size:14px}.mat-list-base .mat-list-option{font-size:16px}.mat-list-base .mat-list-option .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base .mat-list-option .mat-line:nth-child(n+2){font-size:14px}.mat-list-base .mat-subheader{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:500}.mat-list-base[dense] .mat-list-item{font-size:12px}.mat-list-base[dense] .mat-list-item .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2),.mat-list-base[dense] .mat-list-option{font-size:12px}.mat-list-base[dense] .mat-list-option .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2){font-size:12px}.mat-list-base[dense] .mat-subheader{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;font-weight:500}.mat-option{font-family:Roboto,Helvetica Neue,sans-serif;font-size:16px}.mat-optgroup-label{font:500 14px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-simple-snackbar{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px}.mat-simple-snackbar-action{font-family:inherit;font-size:inherit;font-weight:500;line-height:1}.mat-tree{font-family:Roboto,Helvetica Neue,sans-serif}.mat-nested-tree-node,.mat-tree-node{font-size:14px;font-weight:400}.mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{border-radius:50%;pointer-events:none;position:absolute;transform:scale(0);transition:opacity,transform 0ms cubic-bezier(0,0,.2,1)}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-visually-hidden{-moz-appearance:none;-webkit-appearance:none;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;outline:0;overflow:hidden;padding:0;position:absolute;width:1px}.cdk-global-overlay-wrapper,.cdk-overlay-container{height:100%;left:0;pointer-events:none;top:0;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{box-sizing:border-box;max-height:100%;max-width:100%;pointer-events:auto}.cdk-overlay-backdrop{-webkit-tap-highlight-color:transparent;bottom:0;left:0;opacity:0;pointer-events:auto;position:absolute;right:0;top:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1);z-index:1000}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}@media screen and (-ms-high-contrast:active){.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{display:flex;flex-direction:column;min-height:1px;min-width:1px;position:absolute;z-index:1000}.cdk-global-scrollblock{overflow-y:scroll;position:fixed;width:100%}@-webkit-keyframes cdk-text-field-autofill-start{\n  /*!*/}@keyframes cdk-text-field-autofill-start{\n  /*!*/}@-webkit-keyframes cdk-text-field-autofill-end{\n  /*!*/}@keyframes cdk-text-field-autofill-end{\n  /*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-start 0s 1ms;animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){-webkit-animation:cdk-text-field-autofill-end 0s 1ms;animation:cdk-text-field-autofill-end 0s 1ms}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{box-sizing:content-box!important;height:auto!important;overflow:hidden!important;padding:2px 0!important}textarea.cdk-textarea-autosize-measuring-firefox{box-sizing:content-box!important;height:0!important;padding:2px 0!important}.mat-focus-indicator,.mat-mdc-focus-indicator{position:relative}@media not screen and (max-width:959px){.shopping-navbar{height:8px}}.step-titles{font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important;margin-left:16px!important;padding-bottom:20px;padding-top:20px}.step-titles-mobile{background-color:var(--primary-color-50-parts);height:48px!important;padding-bottom:10px;padding-top:10px}.step-titles-mobile ::ng-deep .mat-select-trigger{font-weight:700;padding-left:50px;padding-right:20px}.step-active,.step-done{font-weight:700}.step-done{color:#000;cursor:pointer}::ng-deep .cdk-overlay-container .cdk-overlay-pane{transform:none!important}::ng-deep .cdk-overlay-container .cdk-overlay-pane .step-option{background:#edf4ff!important;margin-top:58px!important}::ng-deep .cdk-overlay-container .cdk-overlay-pane .step-option .mat-option-disabled{color:#000;opacity:1%}::ng-deep mat-select.sof-stepper div.mat-select-value span.mat-select-value-text{color:rgba(0,0,0,.87)!important;font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important}::ng-deep mat-select.sof-stepper div.mat-select-value{padding-top:12px!important}.dot{align-self:center;background-color:#fff;border:2px solid #979797;border-radius:50%;display:inline-block;height:6px;width:6px}@media only screen and (max-width:959px){.dot{margin-right:20px}}.dot-mobile{border:none;border-radius:50%;display:inline-block;margin-left:17px;margin-top:30px;position:absolute}.dot-active,.dot-mobile{background-color:var(--primary-color-500-parts);height:8px;width:8px}.dot-active,.dot-done{align-self:center;border:none}.dot-done{color:var(--primary-color-500-parts);font-size:12px;font-weight:900;height:16px;line-height:16px;margin-left:3px;position:relative;text-align:center;width:16px}@media only screen and (max-width:959px){.dot-done{background-color:var(--primary-color-500-parts);border:none;height:10px;vertical-align:baseline;width:10px}.dot-done:before{content:\"\"}.dot-done:after{content:\"\";z-index:-1}}.step-title{font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important;margin-left:16px!important}.step-title-active{color:rgba(0,0,0,.87)!important}.step-title-not-reached{color:rgba(0,0,0,.6)!important}.step-title-done{color:var(--primary-color-500-parts)!important}"]
                 },] }
     ];
     SofProgressBarComponent.ctorParameters = function () { return [