buildingproduct-library 3.1.0 → 4.0.0

package/fesm2022/buildingproduct-library.mjs

@@ -243,7 +243,7 @@ const Validate_Order_Date_time = {
 const GET_Checkout_Details_URL = (cartId) => {
     return {
         url: apiEndpointURL +
-            `checkout/getDeliveryPickupInfo?cartId=${cartId}&fields=deliveryMinLeadTime,pickUpMinLeadTime,message,pointOfService(FULL)`,
+            `checkout/getDeliveryPickupInfo?cartId=${cartId}&fields=deliveryMinLeadTime,pickUpMinLeadTime,message,pointOfService(FULL),orderPurposeType`,
     };
 };
 const GET_Delivery_Modes_URL = (cartId) => {
@@ -1877,13 +1877,12 @@ class CustomUserAccountComponent {
     }
     logout(content) {
         //this.auth.logout({ returnTo: this.UIsiteURl + '/' });
-        this.auth.logout({
-            logoutParams: {
-                returnTo: this.UIsiteURl + '/'
-            }
-        });
+        this.auth.logout();
         localStorage.clear();
         sessionStorage.clear();
+        setTimeout(() => {
+            window.location.href = this.UIsiteURl + '/';
+        }, 1500);
         // this.fiUserAccountDetailsService.getUserAccount().subscribe((data: any) => {
         //   if (data)
         //     this.emailId = data.uid;
@@ -9135,6 +9134,7 @@ class CustomCheckoutComponent {
         this.deliveryModes = [];
         this.confirmedNewAddress = '';
         this.showWaitCursor = new BehaviorSubject(false);
+        this.selectedPurpose = null;
         this.isDisabled = (date) => {
             const day = new Date(date.year, date.month - 1, date.day)?.getDay();
             if (this.weekDayOpeningList[day - 1]?.closed)
@@ -9157,6 +9157,7 @@ class CustomCheckoutComponent {
         this.checkoutFormData.deliveryPickUpDate = undefined;
         this.checkoutFormData.deliveryPickUpToTime = undefined;
         this.checkoutFormData.deliveryPickUpFromTime = undefined;
+        this.checkoutFormData.orderPurposeType = null;
         const checkoutData = sessionStorage.getItem('checkoutData');
         if (checkoutData != null) {
             this.checkoutFormData = JSON.parse(checkoutData);
@@ -9165,6 +9166,7 @@ class CustomCheckoutComponent {
         var locAddress = localStorage.getItem('branchDetails');
         this.branchAddress = JSON.parse(locAddress);
         this.branchDisplayName = this.branchAddress?.displayName;
+        this.cd.markForCheck();
         this.checkoutService.getDeliveryModes(this.cartId).subscribe((data) => {
             if (data) {
                 this.deliveryModes = data.deliveryModes;
@@ -9372,6 +9374,9 @@ class CustomCheckoutComponent {
             this.checkoutFormData.deliveryPickUpToTime != undefined &&
             this.checkoutFormData.deliveryPickUpDate.day != undefined &&
             this.checkoutFormData.deliveryPickUpFromTime != undefined) {
+            if (this.checkoutFormData.orderPurposeType == null && this.responseData?.orderPurposeType && this.responseData?.orderPurposeType?.length > 0) {
+                return;
+            }
             if (this.isDeliveryBox && this.selectedRecentAddress?.id == '') {
                 return;
             }
@@ -9475,11 +9480,11 @@ class CustomCheckoutComponent {
         this.getDetailResponse();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CustomCheckoutComponent, deps: [{ token: CustomCheckoutService }, { token: i1.CmsService }, { token: i0.ChangeDetectorRef }, { token: i3$2.NgbCalendar }, { token: i3$3.ActiveCartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: CustomCheckoutComponent, isStandalone: false, selector: "app-custom-checkout", viewQueries: [{ propertyName: "checkoutForm", first: true, predicate: ["checkoutForm"], descendants: true }, { propertyName: "checkoutToTime", first: true, predicate: ["checkoutToTime"], descendants: true }, { propertyName: "collectTimeObj", first: true, predicate: ["collectTimeObj"], descendants: true }, { propertyName: "mapViewEl", first: true, predicate: ["mapViewNode"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n<app-custom-breadcrum [customCrumbData]=\"breadcrumbData\" class=\"products-breadcums\"></app-custom-breadcrum>\r\n<div class=\"container mb-120\">\r\n    <div class=\"top-checkout col-sm-9\">\r\n        <h1 class=\"pageTitle\">{{pageTitle}}</h1>\r\n        <!-- <p class=\"checkout-header-paragraph\">{{checkoutHeaderContent}}</p> -->\r\n            <cx-page-slot class=\"checkout-header-paragraph\" position=\"CheckoutParagraphContextSlot-checkoutPage\"></cx-page-slot>\r\n    </div>\r\n    <div class=\"row content-row\">\r\n        <div class=\"col-sm-12 col-lg-7 offset-lg-3\">\r\n            <form #checkoutForm=\"ngForm\">\r\n                <mat-card-header class=\"line-step-navigation first-step\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 1 </span> Choose Your Delivery Method</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"card-container d-sm-inline-flex d-md-flex align-content-center justify-content-between \">\r\n                            <mat-card class=\"matlft\">\r\n                                <mat-card-content class=\"box-container\">\r\n                                    <div (click)=\"isDeliveryBox = true; changeDeliveryOptions()\" class=\"delivery-box d-sm-inline-flex align-items-sm-center justify-content-sm-around\" [ngClass]=\"isDeliveryBox ? ACTIVE_ITEM : ''\">\r\n                                        <img class=\"delivery-img\" src=\"../../../../assets/images/delivery.svg\" />\r\n                                        <ng-template [ngIf]=\"isDeliveryBox\">\r\n                                            <img class=\"check-square-del\" src=\"../../../../assets/images/check-square.svg\" />\r\n                                        </ng-template>\r\n                                    </div>\r\n                                    <div class=\"delivery-heading-text\">\r\n                                        <mat-card-title>{{deliveryModes[0]?.name || 'Delivery'}} </mat-card-title>\r\n                                        <mat-card-subtitle> {{deliveryModes[0]?.description || 'We deliver right to your door.'}} </mat-card-subtitle>\r\n                                    </div>\r\n                                </mat-card-content>\r\n                            </mat-card>\r\n\r\n                            <mat-card class=\"matright\">\r\n                                <mat-card-content class=\"box-container\">\r\n                                    <div (click)=\"isDeliveryBox = false ;hasTimeSpecificRequest = false; changeDeliveryOptions()\" class=\"collect-box d-sm-inline-flex align-items-sm-center justify-content-sm-around\" [ngClass]=\"isDeliveryBox ? '' : ACTIVE_ITEM\">                                        <img class=\"pickup-img\" src=\"../../../../assets/images/pickup.svg\" />\r\n                                        <ng-template [ngIf]=\"!isDeliveryBox\">\r\n                                            <img class=\"check-square-cc\" src=\"../../../../assets/images/check-square.svg\" />\r\n                                        </ng-template>\r\n                                    </div>\r\n                                    <div class=\"delivery-heading-text\">\r\n                                        <mat-card-title> {{deliveryModes[1]?.name || 'Click & Collect'}}</mat-card-title>\r\n                                        <mat-card-subtitle> {{deliveryModes[1]?.description || 'Collect from your nearest branch.' }}</mat-card-subtitle>\r\n                                    </div>\r\n                                </mat-card-content>\r\n                            </mat-card>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 2 </span> Purchase Order Number</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\">\r\n                            <label class=\"form-label\">Purchase Order Number  <span class=\"marker\">*</span></label>\r\n                            <input #poNumber=\"ngModel\" name=\"poNumber\" id=\"poNumber\" type=\"text\" maxlength=\"15\" [(ngModel)]=\"checkoutFormData.poNumber\" class=\"form-control joborder-input\" required>\r\n                        </div>\r\n                        <p *ngIf=\"isSubmitted\" [hidden]=\"poNumber.valid\" class=\"error-message\">\r\n                            Purchase Order Number is required\r\n                        </p>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n\r\n                <mat-card-header class=\"line-step-navigation\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 3 </span> {{isDeliveryBox ? 'Delivery': 'Pickup '}} Date and Time</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\">\r\n                            <label for=\"date\" class=\"form-label\">Date <span class=\"marker\">*</span></label>\r\n                            <form class=\"ngb-date-form\">\r\n                                <div class=\"form-group\">\r\n                                    <div class=\"input-group\">\r\n                                        <input [firstDayOfWeek]=\"7\" #deliveryPickUpDate=\"ngModel\" class=\"form-control cus-width date-input\" [(ngModel)]=\"checkoutFormData.deliveryPickUpDate\" id=\"date\" name=\"txtDate\" tabindex=\"-1\" onkeydown=\"return false\" placeholder=\"DD-MM-YYYY\" ngbDatepicker #ngDate=\"ngbDatepicker\"\r\n                                            [minDate]=\"ngbMinDate\" (dateSelect)=\"datechange($event)\" container=\"body\" required [markDisabled]=\"isDisabled\" />\r\n                                        <div class=\"input-group-append custom-date-button\">\r\n                                            <button class=\"btn btn-outline-secondary calendar\" (click)=\"ngDate.toggle()\" type=\"button\"></button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                        <p *ngIf=\"isSubmitted && !checkoutFormData.deliveryPickUpDate\" class=\"error-message\">\r\n                            Date is required\r\n                        </p>\r\n                        <mat-radio-group [(ngModel)]=\"hasTimeSpecificRequest\" class=\"d-flex align-items-center\" *ngIf=\"isDeliveryBox\">\r\n                            <mat-radio-button [value]=\"true\" [checked]=\"hasTimeSpecificRequest\" (click)=\"timeRequestChange()\">I have a time specific delivery request</mat-radio-button>\r\n                        </mat-radio-group>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\" [ngClass]=\"{'d-none': !hasTimeSpecificRequest || !isDeliveryBox}\">                            <label for=\"time\" class=\"form-label pt-4\">Time <span class=\"marker\">*</span></label>\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <form class=\"form-job\">\r\n                                    <div class=\"selectdiv\">\r\n                                        <label class=\"jobinput\">\r\n                                            <div ngbDropdown class=\"d-block\">\r\n                                                <button class=\"btn btn-outline-primary\" id=\"dropdownBasic1\" ngbDropdownToggle >\r\n                                                    {{ Initialtime }}\r\n                                                    <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                                                </button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" id=\"dropdownMenu\">\r\n                                                    <button ngbDropdownItem class=\"dropdownItem\" *ngFor=\"let time of timeOptions\" #collectTimeObj (click)=\"onFromTimeChanged(time); checkoutFormData.deliveryPickUpFromTime=time\">\r\n                                                        {{ time }}\r\n                                                    </button>\r\n                                                </div>\r\n                                            </div>\r\n                                         </label>\r\n                                    </div>\r\n                                    <p [ngClass]=\"{'d-none': !hasTimeSpecificRequest || !isDeliveryBox}\">*Your time specific delivery request will be confirmed by the Dimond Customer Services team when your order is confirmed.</p>\r\n                                </form>\r\n                                \r\n                            </div>\r\n                        </div>\r\n                        <!-- <p *ngIf=\"isSubmitted\" [hidden]=\"checkoutFormData.deliveryPickUpFromTime != undefined\" class=\"error-message\">\r\n                            From time is required\r\n                        </p>\r\n                        <p *ngIf=\"isSubmitted\" [hidden]=\"checkoutFormData.deliveryPickUpToTime != undefined\" class=\"error-message\">\r\n                            To time is required\r\n                        </p> -->\r\n                    </mat-card-content>\r\n                </mat-card>\r\n\r\n                <mat-card-header class=\"line-step-navigation\" *ngIf=\"!isDeliveryBox\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 4 </span> Pickup Location</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card *ngIf=\"!isDeliveryBox\" class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"branch-container\">\r\n                            <mat-card-title class='address-title'>\r\n                                {{branchDisplayName}}</mat-card-title>\r\n                            <mat-card-subtitle> {{branchAddress?.formattedAddress}}</mat-card-subtitle>\r\n                            <mat-card-subtitle> <span class=\"form-label\">Phone: </span> {{branchAddress?.phone}}</mat-card-subtitle>\r\n                            <div class=\"branch-hour-container\">\r\n                                <mat-card-title class='address-title'>Opening Hours</mat-card-title>\r\n                                <mat-card-subtitle *ngFor=\"let data of tempBranchListData\">\r\n                                    <span class=\"hour-label-left\">{{ data?.weekDay }}</span>\r\n                                    <span *ngIf=\"data?.openingTime?.formattedHour || data?.closingTime?.formattedHour\">{{data?.openingTime?.formattedHour}}\r\n                                    - {{data?.closingTime?.formattedHour}}</span>\r\n                                    <span class=\"error-message\" *ngIf=\"!data?.openingTime?.formattedHour && !data?.closingTime?.formattedHour\">Closed</span>\r\n                                </mat-card-subtitle>\r\n                            </div>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation\" *ngIf=\"isDeliveryBox\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 4 </span> {{isDeliveryBox ? 'Select your Delivery Address Preference': 'Pickup Location '}}\r\n\r\n                        </mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card [hidden]=\"!isDeliveryBox\" class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"d-flex mat-inner-container radio-btn-container\">\r\n                            <mat-radio-group aria-label=\"Select an option\">\r\n                                <mat-radio-button *ngIf=\"defaultAccountAddress?.formattedAddress || (deliveryAddresses && deliveryAddresses.length > 0)\" [checked]=\"selectedAddress == 'accountAddress'\" (change)=\"selectedAddress = 'accountAddress';selectedRecentAddress= deliveryAddresses[0]\"\r\n                                    [value]=\"'accountAddress'\" class=\"pl-0 pr-md-4\">Account Address</mat-radio-button>\r\n                                <mat-radio-button *ngIf=\"deliveryAddresses && recentAddress.length> 0\" [checked]=\"selectedAddress == 'recentAddress'\" (change)=\"selectedAddress = 'recentAddress'; selectedRecentAddress= recentAddress[0]\" [value]=\"'recentAddress'\" class=\"pl-0 pr-md-4\">Recent Address</mat-radio-button>\r\n                                <mat-radio-button [checked]=\"selectedAddress == 'addNewAddress'\" (change)=\"addNewAddress()\" [value]=\"'addNewAddress'\">Add New Address</mat-radio-button>\r\n                            </mat-radio-group>\r\n                        </div>\r\n                        <div class=\"py-2 address-inner-container\" *ngIf=\"selectedAddress == 'accountAddress' && deliveryAddresses.length > 0 \">\r\n                            <label *ngIf=\"!showMoreAddresses\" class=\"form-label\">Confirmed Delivery Address </label>\r\n\r\n                            <div *ngIf=\"!showMoreAddresses\" class=\"form-container\">\r\n                                <div class=\"map-selected-address\" id=\"address\" required #isAddrSelectedOrNot>\r\n                                    {{defaultAccountAddress?.formattedAddress}}</div>\r\n                            </div>\r\n                            <div *ngIf=\"showMoreAddresses\">\r\n                                <mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group radio-btn-size\">\r\n                                    <mat-radio-button class=\"py-1\" [checked]=\"selectedRecentAddress?.id == address.id\" *ngFor=\"let address of deliveryAddresses\" [value]=\"address.id\" (change)=\"selectedRecentAddress=address\">\r\n                                        {{address.formattedAddress}}\r\n                                    </mat-radio-button>\r\n                                </mat-radio-group>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"py-2 address-inner-container\" *ngIf=\"selectedAddress == 'recentAddress' && recentAddress.length > 0\">\r\n                            <mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group radio-btn-size\">\r\n                                <mat-radio-button class=\"py-1\" [checked]=\"selectedRecentAddress?.id == address.id\" *ngFor=\"let address of recentAddress \" [value]=\"address.id\" (change)=\"selectedRecentAddress=address\">\r\n                                    {{address.formattedAddress}}\r\n                                </mat-radio-button>\r\n                            </mat-radio-group>\r\n                        </div>\r\n                        <div *ngIf=\"selectedAddress == 'addNewAddress'\">\r\n                            <!-- Map Div -->\r\n                            <app-add-new-address [confirmedAddress]=\"confirmedNewAddress\" (updateNewAddress)=\"getNewAddress($event)\"></app-add-new-address>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation last-step\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title>\r\n                            <span class=\"card-number\"> 5 </span> {{isDeliveryBox ? 'Site Delivery Requirements': 'Comments '}}\r\n                            <span class=\"info-icon pl-2\" appTooltip tooltipTitle=\"{{isDeliveryBox ? siteDeliveryRequirements : clickandCollectComments}}\" placement=\"bottom\"></span>\r\n                        </mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <textarea class=\"form-control\" [(ngModel)]=\"checkoutFormData.deliveryPickUpNotes\" rows=\"3\" name=\"Instructions\" id=\"Instructions\" [placeholder]=\"isDeliveryBox ? 'Provide any specific delivery instructions':'Provide any specific pickup instructions'\" maxlength=\"250\"></textarea>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n            </form>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"cart-page-footer\">\r\n    <div class=\"container\">\r\n        <div class=\"sticky-footer row\">\r\n            <div class=\"col-sm-12\">\r\n                <p class=\" float-md-right m-0 checkout-footer-btns\">\r\n                    <a title=\"Back to Cart\" href=\"/cart\" class=\"mr-3 font-weight-bold\">\r\n                        <img src=\"../../../../assets/images/ionic-arrow-back.svg\" alt=\"back-arrow\" class=\"mr-2\" /> BACK\r\n                    </a>\r\n                    <button type=\"button\" (click)=\"reviewOrder()\" class=\"btn primary-button\">Review And Order</button>\r\n                </p>\r\n            </div>\r\n            <div class=\" col-sm-12 alert alert-danger alert-danger-custom justify-content-start mt-3\" role=\"alert\" *ngIf=\"errorInd$ | async\">\r\n                <img class=\"mr-3\" src=\"../../../../assets/images/erroricon.svg\" alt=\"alert\"> {{infoMessage}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.ttf) format(\"ttf\"),url(/assets/fonts/icomoon.woff) format(\"woff\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Arial Regular;src:url(/assets/fonts/arial-webfont.woff) format(\"woff\"),url(/assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Arial Bold;src:url(/assets/fonts/Arial-BoldMT.eot);src:url(/assets/fonts/Arial-BoldMT.eot?#iefix) format(\"embedded-opentype\"),url(/assets/fonts/Arial-BoldMT.woff2) format(\"woff2\"),url(/assets/fonts/Arial-BoldMT.woff) format(\"woff\"),url(/assets/fonts/Arial-BoldMT.ttf) format(\"truetype\"),url(/assets/fonts/Arial-BoldMT.svg#Arial-BoldMT) format(\"svg\");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Arial Black;src:url(/assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(/assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Reqular;src:url(/assets/fonts/helveticaneue.woff) format(\"woff\"),url(/assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Thin;src:url(/assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(/assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Medium;src:url(/assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(/assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(/assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(/assets/images/icon-flashing-black.svg)}.icon-ridge{position:relative;display:inline-block;height:32px;text-align:center;width:65px}.icon-ridge:before,.mainnav-link-level-2.show .navTagChild .icon-ridge:before{content:url(/projects/buildingproduct_library/assets/images/icon-ridge-white.svg);height:24px;width:65px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-ridge:before{content:url(/projects/buildingproduct_library/assets/images/icon-ridge-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:Arial Regular,sans-serif}header{background-color:#1d1d1b!important;background:#1d1d1b!important;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0rem}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:baseline;justify-content:space-between;padding-top:2px;padding-bottom:8px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0;font-weight:400}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:Arial Bold,sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:Helvetica Neue Regular,sans-serif;font-size:var(--fontsize54);color:#1d1d1b;padding-top:2rem}[aria-label=Close]{cursor:pointer}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828!important}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .miniCartStyle cx-paragraph{display:block!important}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:0;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:324px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:40px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px;z-index:7}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%;height:auto}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%;align-items:flex-start}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}.detail{font-weight:400;display:flex!important;align-items:center}.detail a{min-height:0px}.hamburger-inner{background-color:#fff!important}.hamburger-inner:before,.hamburger-inner:after{background-color:#fff!important}#navbarDropdownMenuLink{padding:.3rem 0rem}a{min-height:auto!important;min-width:auto}}.mb-120{margin-bottom:120px}::ng-deep .OrderCheckoutTemplate header{display:none!important}::ng-deep .OrderCheckoutTemplate .ngb-date-form .form-control.date-input{height:auto}::ng-deep .UserDetailCheckout{z-index:4}::ng-deep .UserDetailCheckout .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}::ng-deep cx-storefront.stop-navigating:before,::ng-deep cx-storefront.stop-navigating:after{height:0}.custom-arrow{position:absolute;right:15px;top:18px;z-index:1}.esri-view,#mapViewNode{padding:0;margin:0;height:100%;width:100%}::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#b61828!important}::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background:#b61828!important}::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__outer-circle{border-color:#b61828!important}::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:#d3d6db!important}::ng-deep ejs-timepicker .e-input-group{padding:8px}#dropdownMenu{margin-top:0!important;width:calc(100% - 30px);border:1px solid rgba(0,0,0,.15);background-color:#fff;font-size:var(--fontsize14);font-family:Arial,sans-serif}#dropdownMenu.show{display:block;width:100%}#dropdownBasic1{font-size:var(--fontsize14);font-family:Arial,sans-serif;text-align:left;background-color:#f6f6f6;border:1px solid #f1f1f1;color:#1d1d1b;box-shadow:none;border-radius:0;margin-right:30px;width:100%}#dropdownBasic1 .custom-arrow-down{float:right}.dropdown-toggle:after{display:none}.e-input-group.e-control-wrapper.e-time-wrapper.e-lib.e-keyboard.e-valid-input.e-non-edit{font-size:var(--fontsize16);margin-right:1rem}button.calendar,button.calendar:active{opacity:1;display:block;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"35\" height=\"22\" viewBox=\"0 0 35 22\">%0D%0A  <defs>%0D%0A    <clipPath id=\"clip-path\">%0D%0A      <path id=\"Mask\" d=\"M17.569,22H2.215a2.143,2.143,0,0,1-1.571-.644A2.147,2.147,0,0,1,0,19.785V4.431A2.147,2.147,0,0,1,.644,2.859a2.147,2.147,0,0,1,1.571-.644H3.3V0H5.513V2.215h8.759V0h2.215V2.215h1.082A2.2,2.2,0,0,1,19.784,4.43V19.785A2.2,2.2,0,0,1,17.569,22ZM2.215,7.728V19.785H17.569V7.728ZM15.4,17.621H9.893V12.108h5.513v5.513Z\" fill=\"%231d1d1b\"/>%0D%0A    </clipPath>%0D%0A  </defs>%0D%0A  <g id=\"Group_30\" data-name=\"Group 30\" transform=\"translate(-3093 1352)\">%0D%0A    <rect id=\"Rectangle_14\" data-name=\"Rectangle 14\" width=\"35\" height=\"22\" transform=\"translate(3093 -1352)\" fill=\"none\"/>%0D%0A    <g id=\"Group\" transform=\"translate(3093 -1352)\">%0D%0A      <path id=\"Mask-2\" data-name=\"Mask\" d=\"M17.569,22H2.215a2.143,2.143,0,0,1-1.571-.644A2.147,2.147,0,0,1,0,19.785V4.431A2.147,2.147,0,0,1,.644,2.859a2.147,2.147,0,0,1,1.571-.644H3.3V0H5.513V2.215h8.759V0h2.215V2.215h1.082A2.2,2.2,0,0,1,19.784,4.43V19.785A2.2,2.2,0,0,1,17.569,22ZM2.215,7.728V19.785H17.569V7.728ZM15.4,17.621H9.893V12.108h5.513v5.513Z\" fill=\"%231d1d1b\"/>%0D%0A      <g id=\"Group-2\" data-name=\"Group\" clip-path=\"url(%23clip-path)\">%0D%0A        <g id=\"_icon-color\" data-name=\"\\21b3\\1f3a8icon-color\" transform=\"translate(-49.463 -47.247)\">%0D%0A          <rect id=\"Icon-Shade\" width=\"118.71\" height=\"118.71\" fill=\"%231d1d1b\"/>%0D%0A        </g>%0D%0A      </g>%0D%0A    </g>%0D%0A  </g>%0D%0A</svg>%0D%0A') no-repeat;background-size:35px 22px;background-position:12px 12px;border-width:thin;align-items:center;position:relative;text-align:center;justify-content:center;padding:0;border-radius:0;border:1px solid #d3d6db;border-left-width:0px}.form-label{font-size:var(--fontsize16);font-family:Arial Bold,sans-serif}.mat-card:not([class*=mat-elevation-z]){padding:1.5rem}.delivery-box,.collect-box{border:1px solid #A6A6A5;border-radius:10px;opacity:1;align-items:center;justify-content:center;background-color:#eee3;display:inline-flex;padding:36px;height:160px;width:219px;cursor:pointer;position:relative}.delivery-box .delivery-img,.collect-box .delivery-img{width:6.25em;height:3.688em}.delivery-box .pickup-img,.collect-box .pickup-img{width:5em;height:5em}.delivery-box.active-box,.collect-box.active-box{background-color:#eee3;border:2px solid #B61828;opacity:1}.delivery-box .mat-checkbox.active-checkbox,.collect-box .mat-checkbox.active-checkbox{right:25px;position:absolute;top:10%}.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#b61828}.box-container .mat-card-title,.box-container .mat-mdc-card-title{text-align:center;font-family:Arial Bold,sans-serif;opacity:1;margin:0;font-size:var(--fontsize16)}.box-container .mat-card-title{margin:5px!important}.box-container .mat-card-subtitle{opacity:1;font-size:var(--fontsize16);margin-bottom:0;color:#1d1d1b}.marker{color:#973937;font-family:Arial Bold,sans-serif}.branch-container .mat-card-subtitle{margin-bottom:6px;font-size:var(--fontsize16);color:#1d1d1b}.branch-container .mat-card-subtitle .branch-hour-container span:not(.error-message):last-child{text-transform:uppercase}.branch-container .mat-card-title,.branch-container .mat-mdc-card-title{font-family:Arial Bold,sans-serif;margin-bottom:4px;font-size:var(--fontsize16)}.branch-container .branch-link{font-size:var(--fontsize18)}.branch-container .hour-label-left{width:15%;position:relative;display:inline-block}input[type=time]::-webkit-calendar-picker-indicator{background:none}.check-square-del,.check-square-cc{position:absolute;top:-1px;right:0}.selectdiv{position:relative}.selectdiv select{height:50px;width:100%;line-height:35px;border:1px solid #d3d6db;font-size:var(--fontsize16);color:#1d1d1b;padding-left:13px;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1}::ng-deep .OrderCheckoutTemplate .mat-card-header-text{margin:0!important}::ng-deep .OrderCheckoutTemplate mat-radio-button{padding-left:10px}::ng-deep .OrderCheckoutTemplate mat-radio-button .mat-radio-label{white-space:pre-line}::ng-deep .OrderCheckoutTemplate .card-number{background-color:#1d1d1b;border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-family:Arial Bold,sans-serif;margin-right:1rem}::ng-deep .OrderCheckoutTemplate .mat-card-content .mat-inner-container .mat-radio-label-content{font-family:Arial Bold,sans-serif;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .mat-card-content .mat-radio-label-content{font-family:Arial Regular,sans-serif;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .form-control{color:#1d1d1b;font-family:Arial Regular,sans-serif}::ng-deep .OrderCheckoutTemplate #Instructions{resize:none}::ng-deep .OrderCheckoutTemplate #Instructions::placeholder{font-family:Arial Regular,sans-serif;font-size:var(--fontsize16);color:#c6c6c6}::ng-deep .OrderCheckoutTemplate .info-icon{position:relative;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">%0D%0A  <path id=\"Icon_metro-info\" data-name=\"Icon metro-info\" d=\"M9.571,6.678a.752.752,0,0,1,.75-.75h.5a.752.752,0,0,1,.75.75v.5a.752.752,0,0,1-.75.75h-.5a.752.752,0,0,1-.75-.75Zm3,7.25h-4v-1h1v-3h-1v-1h3v4h1Zm-2-12a8,8,0,1,0,8,8,8,8,0,0,0-8-8Zm0,14.5a6.5,6.5,0,1,1,6.5-6.5A6.5,6.5,0,0,1,10.571,16.428Z\" transform=\"translate(-2.571 -1.928)\" fill=\"%23c6c6c6\"/>%0D%0A</svg>%0D%0A') no-repeat center;width:16px;height:16px;display:inline-block;top:1px;left:15px}::ng-deep .OrderCheckoutTemplate .cart-page-footer{background-color:#fff;border-top:1px solid #E0E0E0;padding:10px 0;position:fixed;bottom:0;left:0;right:0;width:100%;z-index:9;transition:transform .3s ease-in-out}::ng-deep .OrderCheckoutTemplate .error-message{color:#da1e28}::ng-deep .OrderCheckoutTemplate .example-radio-group .mat-radio-button{display:block}::ng-deep .OrderCheckoutTemplate .content-row{margin-bottom:3rem}::ng-deep .OrderCheckoutTemplate mat-card.line-step-navigation{box-shadow:none;border:1px solid #E0E0E0}::ng-deep .OrderCheckoutTemplate .card-container mat-card{box-shadow:none}::ng-deep .OrderCheckoutTemplate .line-step-navigation{position:relative}::ng-deep .OrderCheckoutTemplate .line-step-navigation:before{display:inline-block;content:\"\";position:absolute;top:0;left:-35px;width:10px;height:100%;border-left:2px dashed #C6C6C6}::ng-deep .OrderCheckoutTemplate .line-step-navigation:last-child:before{border-left:none}::ng-deep .OrderCheckoutTemplate .line-step-navigation .cus-title-margin-card{position:relative;left:-50px;margin-bottom:0}::ng-deep .OrderCheckoutTemplate .line-step-navigation.last-step:before{height:75%}::ng-deep .OrderCheckoutTemplate .line-step-navigation.first-step:before{height:75%;top:32%}::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-mdc-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-mdc-card-title{margin:1rem 0;font-size:1.5rem;display:inline-flex;align-items:center}::ng-deep .OrderCheckoutTemplate .map-selected-address{background-color:#e8e8e8;border:1px solid #d3d6db;padding:.75rem;align-self:flex-start;width:100%;min-height:50px;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .box-container{text-align:center}@media (max-width: 992px){::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group{display:inline-flex;flex-direction:row;align-items:flex-start}::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group .mat-radio-button .mat-radio-label,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group .mat-radio-button .mat-radio-label{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group .mat-radio-button .mat-radio-label .mat-radio-label-content,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group .mat-radio-button .mat-radio-label .mat-radio-label-content{margin-top:5px}::ng-deep .OrderCheckoutTemplate .line-step-navigation{background:transparent;box-shadow:none!important;border:none!important}::ng-deep .OrderCheckoutTemplate .line-step-navigation:before{left:15px}::ng-deep .OrderCheckoutTemplate .line-step-navigation .cus-title-margin-card{left:0}::ng-deep .OrderCheckoutTemplate .card-container mat-card{background:transparent;box-shadow:none!important}::ng-deep .OrderCheckoutTemplate .checkout-footer-btns{display:flex;justify-content:space-around;align-items:center}::ng-deep .OrderCheckoutTemplate .mat-card:not([class*=mat-elevation-z]){padding:1rem .25rem 1rem 1.5rem}::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-mdc-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-mdc-card-title{font-size:1.25rem;align-items:center;margin:0}::ng-deep .OrderCheckoutTemplate .mat-card-content.box-container,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content.box-container{display:flex}::ng-deep .OrderCheckoutTemplate .mat-card-content mat-card .mat-card,::ng-deep .OrderCheckoutTemplate .mat-card-content mat-card .mat-mdc-card,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content mat-card .mat-card,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content mat-card .mat-mdc-card{align-items:center;justify-content:center}::ng-deep .OrderCheckoutTemplate .delivery-box,::ng-deep .OrderCheckoutTemplate .collect-box{height:102px;width:140px}::ng-deep .OrderCheckoutTemplate .box-container{text-align:left}::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text{padding-left:1rem}::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text .mat-card-title,::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text .mat-mdc-card-title{text-align:left;margin-left:0!important}::ng-deep .OrderCheckoutTemplate .address-inner-container{padding-left:15px}::ng-deep .OrderCheckoutTemplate input#date::placeholder{color:#d3d6db}}::ng-deep .OrderCheckoutTemplate .mdc-radio{height:auto!important;width:auto}@media screen and (max-width: 576px){.mat-mdc-card-header{display:flex;padding:16px 0 0}.mat-mdc-card:not([class*=mat-elevation-z]){padding:0 0 0 .5rem}.card-number{flex-shrink:0}}@media screen and (min-width: 1024px){.mat-mdc-card-header{padding:0}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PageSlotComponent, selector: "cx-page-slot,[cx-page-slot]", inputs: ["position", "class", "isPageFold", "hasComponents"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { kind: "directive", type: i3$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i3$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i3$2.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["tooltipTitle", "placement"] }, { kind: "component", type: AddNewAddressComponent, selector: "app-add-new-address", inputs: ["confirmedAddress"], outputs: ["updateNewAddress"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: CustomCheckoutComponent, isStandalone: false, selector: "app-custom-checkout", viewQueries: [{ propertyName: "checkoutForm", first: true, predicate: ["checkoutForm"], descendants: true }, { propertyName: "checkoutToTime", first: true, predicate: ["checkoutToTime"], descendants: true }, { propertyName: "collectTimeObj", first: true, predicate: ["collectTimeObj"], descendants: true }, { propertyName: "mapViewEl", first: true, predicate: ["mapViewNode"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n<app-custom-breadcrum [customCrumbData]=\"breadcrumbData\" class=\"products-breadcums\"></app-custom-breadcrum>\r\n<div class=\"container mb-120\">\r\n    <div class=\"top-checkout col-sm-9\">\r\n        <h1 class=\"pageTitle\">{{pageTitle}}</h1>\r\n        <!-- <p class=\"checkout-header-paragraph\">{{checkoutHeaderContent}}</p> -->\r\n            <cx-page-slot class=\"checkout-header-paragraph\" position=\"CheckoutParagraphContextSlot-checkoutPage\"></cx-page-slot>\r\n    </div>\r\n    <div class=\"row content-row\">\r\n        <div class=\"col-sm-12 col-lg-7 offset-lg-3\">\r\n            <form #checkoutForm=\"ngForm\">\r\n                <mat-card-header class=\"line-step-navigation first-step\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 1 </span> Choose Your Delivery Method</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"card-container d-sm-inline-flex d-md-flex align-content-center justify-content-between \">\r\n                            <mat-card class=\"matlft\">\r\n                                <mat-card-content class=\"box-container\">\r\n                                    <div (click)=\"isDeliveryBox = true; changeDeliveryOptions()\" class=\"delivery-box d-sm-inline-flex align-items-sm-center justify-content-sm-around\" [ngClass]=\"isDeliveryBox ? ACTIVE_ITEM : ''\">\r\n                                        <img class=\"delivery-img\" src=\"../../../../assets/images/delivery.svg\" />\r\n                                        <ng-template [ngIf]=\"isDeliveryBox\">\r\n                                            <img class=\"check-square-del\" src=\"../../../../assets/images/check-square.svg\" />\r\n                                        </ng-template>\r\n                                    </div>\r\n                                    <div class=\"delivery-heading-text\">\r\n                                        <mat-card-title>{{deliveryModes[0]?.name || 'Delivery'}} </mat-card-title>\r\n                                        <mat-card-subtitle> {{deliveryModes[0]?.description || 'We deliver right to your door.'}} </mat-card-subtitle>\r\n                                    </div>\r\n                                </mat-card-content>\r\n                            </mat-card>\r\n\r\n                            <mat-card class=\"matright\">\r\n                                <mat-card-content class=\"box-container\">\r\n                                    <div (click)=\"isDeliveryBox = false ;hasTimeSpecificRequest = false; changeDeliveryOptions()\" class=\"collect-box d-sm-inline-flex align-items-sm-center justify-content-sm-around\" [ngClass]=\"isDeliveryBox ? '' : ACTIVE_ITEM\">                                        <img class=\"pickup-img\" src=\"../../../../assets/images/pickup.svg\" />\r\n                                        <ng-template [ngIf]=\"!isDeliveryBox\">\r\n                                            <img class=\"check-square-cc\" src=\"../../../../assets/images/check-square.svg\" />\r\n                                        </ng-template>\r\n                                    </div>\r\n                                    <div class=\"delivery-heading-text\">\r\n                                        <mat-card-title> {{deliveryModes[1]?.name || 'Click & Collect'}}</mat-card-title>\r\n                                        <mat-card-subtitle> {{deliveryModes[1]?.description || 'Collect from your nearest branch.' }}</mat-card-subtitle>\r\n                                    </div>\r\n                                </mat-card-content>\r\n                            </mat-card>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 2 </span> Purchase Order Number</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"row\">\r\n                            <div class=\"form-container for-mob col-sm-6\">\r\n                                <label class=\"form-label\">Purchase Order Number  <span class=\"marker\">*</span></label>\r\n                                <input #poNumber=\"ngModel\" name=\"poNumber\" id=\"poNumber\" type=\"text\" maxlength=\"15\" [(ngModel)]=\"checkoutFormData.poNumber\" class=\"form-control joborder-input\" required>\r\n                                <p *ngIf=\"isSubmitted\" [hidden]=\"poNumber.valid\" class=\"error-message\">\r\n                                    Purchase Order Number is required\r\n                                </p>\r\n                            </div>                            \r\n                            <div *ngIf=\"responseData?.orderPurposeType && responseData?.orderPurposeType?.length > 0\" class=\"form-container for-mob col-sm-6\">\r\n                                <div class=\"form-group\">\r\n                                    <label class=\"form-label\" for=\"orderPurposeType\">Order Purpose/Work Type  <span class=\"marker\">*</span></label>\r\n                                    <select #orderPurposeType=\"ngModel\" name=\"orderPurposeType\"  required [(ngModel)]=\"checkoutFormData.orderPurposeType\"  id=\"orderPurposeType\" class=\"form-control\" >\r\n                                        <option  [ngValue]=\"null\"  selected disabled>Select</option>\r\n                                        <option *ngFor=\"let purposeType of responseData.orderPurposeType\" [value]=\"purposeType?.key\"> {{purposeType?.value}} </option>\r\n                                        \r\n                                    </select>\r\n                                </div> \r\n                                <p *ngIf=\"isSubmitted\" [hidden]=\"orderPurposeType.valid\" class=\"error-message\">\r\n                                    Order Purpose/Work Type is required\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n\r\n                <mat-card-header class=\"line-step-navigation\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 3 </span> {{isDeliveryBox ? 'Delivery': 'Pickup '}} Date and Time</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\">\r\n                            <label for=\"date\" class=\"form-label\">Date <span class=\"marker\">*</span></label>\r\n                            <form class=\"ngb-date-form\">\r\n                                <div class=\"form-group\">\r\n                                    <div class=\"input-group\">\r\n                                        <input [firstDayOfWeek]=\"7\" #deliveryPickUpDate=\"ngModel\" class=\"form-control cus-width date-input\" [(ngModel)]=\"checkoutFormData.deliveryPickUpDate\" id=\"date\" name=\"txtDate\" tabindex=\"-1\" onkeydown=\"return false\" placeholder=\"DD-MM-YYYY\" ngbDatepicker #ngDate=\"ngbDatepicker\"\r\n                                            [minDate]=\"ngbMinDate\" (dateSelect)=\"datechange($event)\" container=\"body\" required [markDisabled]=\"isDisabled\" />\r\n                                        <div class=\"input-group-append custom-date-button\">\r\n                                            <button class=\"btn btn-outline-secondary calendar\" (click)=\"ngDate.toggle()\" type=\"button\"></button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                        <p *ngIf=\"isSubmitted && !checkoutFormData.deliveryPickUpDate\" class=\"error-message\">\r\n                            Date is required\r\n                        </p>\r\n                        <mat-radio-group [(ngModel)]=\"hasTimeSpecificRequest\" class=\"d-flex align-items-center\" *ngIf=\"isDeliveryBox\">\r\n                            <mat-radio-button [value]=\"true\" [checked]=\"hasTimeSpecificRequest\" (click)=\"timeRequestChange()\">I have a time specific delivery request</mat-radio-button>\r\n                        </mat-radio-group>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\" [ngClass]=\"{'d-none': !hasTimeSpecificRequest || !isDeliveryBox}\">                            <label for=\"time\" class=\"form-label pt-4\">Time <span class=\"marker\">*</span></label>\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <form class=\"form-job\">\r\n                                    <div class=\"selectdiv\">\r\n                                        <label class=\"jobinput\">\r\n                                            <div ngbDropdown class=\"d-block\">\r\n                                                <button class=\"btn btn-outline-primary\" id=\"dropdownBasic1\" ngbDropdownToggle >\r\n                                                    {{ Initialtime }}\r\n                                                    <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                                                </button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" id=\"dropdownMenu\">\r\n                                                    <button ngbDropdownItem class=\"dropdownItem\" *ngFor=\"let time of timeOptions\" #collectTimeObj (click)=\"onFromTimeChanged(time); checkoutFormData.deliveryPickUpFromTime=time\">\r\n                                                        {{ time }}\r\n                                                    </button>\r\n                                                </div>\r\n                                            </div>\r\n                                         </label>\r\n                                    </div>\r\n                                    <p [ngClass]=\"{'d-none': !hasTimeSpecificRequest || !isDeliveryBox}\">*Your time specific delivery request will be confirmed by the Dimond Customer Services team when your order is confirmed.</p>\r\n                                </form>\r\n                                \r\n                            </div>\r\n                        </div>\r\n                        <!-- <p *ngIf=\"isSubmitted\" [hidden]=\"checkoutFormData.deliveryPickUpFromTime != undefined\" class=\"error-message\">\r\n                            From time is required\r\n                        </p>\r\n                        <p *ngIf=\"isSubmitted\" [hidden]=\"checkoutFormData.deliveryPickUpToTime != undefined\" class=\"error-message\">\r\n                            To time is required\r\n                        </p> -->\r\n                    </mat-card-content>\r\n                </mat-card>\r\n\r\n                <mat-card-header class=\"line-step-navigation\" *ngIf=\"!isDeliveryBox\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 4 </span> Pickup Location</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card *ngIf=\"!isDeliveryBox\" class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"branch-container\">\r\n                            <mat-card-title class='address-title'>\r\n                                {{branchDisplayName}}</mat-card-title>\r\n                            <mat-card-subtitle> {{branchAddress?.formattedAddress}}</mat-card-subtitle>\r\n                            <mat-card-subtitle> <span class=\"form-label\">Phone: </span> {{branchAddress?.phone}}</mat-card-subtitle>\r\n                            <div class=\"branch-hour-container\">\r\n                                <mat-card-title class='address-title'>Opening Hours</mat-card-title>\r\n                                <mat-card-subtitle *ngFor=\"let data of tempBranchListData\">\r\n                                    <span class=\"hour-label-left\">{{ data?.weekDay }}</span>\r\n                                    <span *ngIf=\"data?.openingTime?.formattedHour || data?.closingTime?.formattedHour\">{{data?.openingTime?.formattedHour}}\r\n                                    - {{data?.closingTime?.formattedHour}}</span>\r\n                                    <span class=\"error-message\" *ngIf=\"!data?.openingTime?.formattedHour && !data?.closingTime?.formattedHour\">Closed</span>\r\n                                </mat-card-subtitle>\r\n                            </div>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation\" *ngIf=\"isDeliveryBox\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 4 </span> {{isDeliveryBox ? 'Select your Delivery Address Preference': 'Pickup Location '}}\r\n\r\n                        </mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card [hidden]=\"!isDeliveryBox\" class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"d-flex mat-inner-container radio-btn-container\">\r\n                            <mat-radio-group aria-label=\"Select an option\">\r\n                                <mat-radio-button *ngIf=\"defaultAccountAddress?.formattedAddress || (deliveryAddresses && deliveryAddresses.length > 0)\" [checked]=\"selectedAddress == 'accountAddress'\" (change)=\"selectedAddress = 'accountAddress';selectedRecentAddress= deliveryAddresses[0]\"\r\n                                    [value]=\"'accountAddress'\" class=\"pl-0 pr-md-4\">Account Address</mat-radio-button>\r\n                                <mat-radio-button *ngIf=\"deliveryAddresses && recentAddress.length> 0\" [checked]=\"selectedAddress == 'recentAddress'\" (change)=\"selectedAddress = 'recentAddress'; selectedRecentAddress= recentAddress[0]\" [value]=\"'recentAddress'\" class=\"pl-0 pr-md-4\">Recent Address</mat-radio-button>\r\n                                <mat-radio-button [checked]=\"selectedAddress == 'addNewAddress'\" (change)=\"addNewAddress()\" [value]=\"'addNewAddress'\">Add New Address</mat-radio-button>\r\n                            </mat-radio-group>\r\n                        </div>\r\n                        <div class=\"py-2 address-inner-container\" *ngIf=\"selectedAddress == 'accountAddress' && deliveryAddresses.length > 0 \">\r\n                            <label *ngIf=\"!showMoreAddresses\" class=\"form-label\">Confirmed Delivery Address </label>\r\n\r\n                            <div *ngIf=\"!showMoreAddresses\" class=\"form-container\">\r\n                                <div class=\"map-selected-address\" id=\"address\" required #isAddrSelectedOrNot>\r\n                                    {{defaultAccountAddress?.formattedAddress}}</div>\r\n                            </div>\r\n                            <div *ngIf=\"showMoreAddresses\">\r\n                                <mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group radio-btn-size\">\r\n                                    <mat-radio-button class=\"py-1\" [checked]=\"selectedRecentAddress?.id == address.id\" *ngFor=\"let address of deliveryAddresses\" [value]=\"address.id\" (change)=\"selectedRecentAddress=address\">\r\n                                        {{address.formattedAddress}}\r\n                                    </mat-radio-button>\r\n                                </mat-radio-group>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"py-2 address-inner-container\" *ngIf=\"selectedAddress == 'recentAddress' && recentAddress.length > 0\">\r\n                            <mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group radio-btn-size\">\r\n                                <mat-radio-button class=\"py-1\" [checked]=\"selectedRecentAddress?.id == address.id\" *ngFor=\"let address of recentAddress \" [value]=\"address.id\" (change)=\"selectedRecentAddress=address\">\r\n                                    {{address.formattedAddress}}\r\n                                </mat-radio-button>\r\n                            </mat-radio-group>\r\n                        </div>\r\n                        <div *ngIf=\"selectedAddress == 'addNewAddress'\">\r\n                            <!-- Map Div -->\r\n                            <app-add-new-address [confirmedAddress]=\"confirmedNewAddress\" (updateNewAddress)=\"getNewAddress($event)\"></app-add-new-address>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation last-step\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title>\r\n                            <span class=\"card-number\"> 5 </span> {{isDeliveryBox ? 'Site Delivery Requirements': 'Comments '}}\r\n                            <span class=\"info-icon pl-2\" appTooltip tooltipTitle=\"{{isDeliveryBox ? siteDeliveryRequirements : clickandCollectComments}}\" placement=\"bottom\"></span>\r\n                        </mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <textarea class=\"form-control\" [(ngModel)]=\"checkoutFormData.deliveryPickUpNotes\" rows=\"3\" name=\"Instructions\" id=\"Instructions\" [placeholder]=\"isDeliveryBox ? 'Provide any specific delivery instructions':'Provide any specific pickup instructions'\" maxlength=\"250\"></textarea>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n            </form>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"cart-page-footer\">\r\n    <div class=\"container\">\r\n        <div class=\"sticky-footer row\">\r\n            <div class=\"col-sm-12\">\r\n                <p class=\" float-md-right m-0 checkout-footer-btns\">\r\n                    <a title=\"Back to Cart\" href=\"/cart\" class=\"mr-3 font-weight-bold\">\r\n                        <img src=\"../../../../assets/images/ionic-arrow-back.svg\" alt=\"back-arrow\" class=\"mr-2\" /> BACK\r\n                    </a>\r\n                    <button type=\"button\" (click)=\"reviewOrder()\" class=\"btn primary-button\">Review And Order</button>\r\n                </p>\r\n            </div>\r\n            <div class=\" col-sm-12 alert alert-danger alert-danger-custom justify-content-start mt-3\" role=\"alert\" *ngIf=\"errorInd$ | async\">\r\n                <img class=\"mr-3\" src=\"../../../../assets/images/erroricon.svg\" alt=\"alert\"> {{infoMessage}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.ttf) format(\"ttf\"),url(/assets/fonts/icomoon.woff) format(\"woff\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Arial Regular;src:url(/assets/fonts/arial-webfont.woff) format(\"woff\"),url(/assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Arial Bold;src:url(/assets/fonts/Arial-BoldMT.eot);src:url(/assets/fonts/Arial-BoldMT.eot?#iefix) format(\"embedded-opentype\"),url(/assets/fonts/Arial-BoldMT.woff2) format(\"woff2\"),url(/assets/fonts/Arial-BoldMT.woff) format(\"woff\"),url(/assets/fonts/Arial-BoldMT.ttf) format(\"truetype\"),url(/assets/fonts/Arial-BoldMT.svg#Arial-BoldMT) format(\"svg\");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Arial Black;src:url(/assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(/assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Reqular;src:url(/assets/fonts/helveticaneue.woff) format(\"woff\"),url(/assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Thin;src:url(/assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(/assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Medium;src:url(/assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(/assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(/assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(/assets/images/icon-flashing-black.svg)}.icon-ridge{position:relative;display:inline-block;height:32px;text-align:center;width:65px}.icon-ridge:before,.mainnav-link-level-2.show .navTagChild .icon-ridge:before{content:url(/projects/buildingproduct_library/assets/images/icon-ridge-white.svg);height:24px;width:65px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-ridge:before{content:url(/projects/buildingproduct_library/assets/images/icon-ridge-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:Arial Regular,sans-serif}header{background-color:#1d1d1b!important;background:#1d1d1b!important;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0rem}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:baseline;justify-content:space-between;padding-top:2px;padding-bottom:8px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0;font-weight:400}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:Arial Bold,sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:Helvetica Neue Regular,sans-serif;font-size:var(--fontsize54);color:#1d1d1b;padding-top:2rem}[aria-label=Close]{cursor:pointer}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828!important}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .miniCartStyle cx-paragraph{display:block!important}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:0;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:324px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:40px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px;z-index:7}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%;height:auto}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%;align-items:flex-start}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}.detail{font-weight:400;display:flex!important;align-items:center}.detail a{min-height:0px}.hamburger-inner{background-color:#fff!important}.hamburger-inner:before,.hamburger-inner:after{background-color:#fff!important}#navbarDropdownMenuLink{padding:.3rem 0rem}a{min-height:auto!important;min-width:auto}}.mb-120{margin-bottom:120px}::ng-deep .OrderCheckoutTemplate header{display:none!important}::ng-deep .OrderCheckoutTemplate .ngb-date-form .form-control.date-input{height:auto}::ng-deep .UserDetailCheckout{z-index:4}::ng-deep .UserDetailCheckout .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}::ng-deep cx-storefront.stop-navigating:before,::ng-deep cx-storefront.stop-navigating:after{height:0}.custom-arrow{position:absolute;right:15px;top:18px;z-index:1}.esri-view,#mapViewNode{padding:0;margin:0;height:100%;width:100%}::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#b61828!important}::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background:#b61828!important}::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__outer-circle{border-color:#b61828!important}::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:#d3d6db!important}::ng-deep ejs-timepicker .e-input-group{padding:8px}#dropdownMenu{margin-top:0!important;width:calc(100% - 30px);border:1px solid rgba(0,0,0,.15);background-color:#fff;font-size:var(--fontsize14);font-family:Arial,sans-serif}#dropdownMenu.show{display:block;width:100%}#dropdownBasic1{font-size:var(--fontsize14);font-family:Arial,sans-serif;text-align:left;background-color:#f6f6f6;border:1px solid #f1f1f1;color:#1d1d1b;box-shadow:none;border-radius:0;margin-right:30px;width:100%}#dropdownBasic1 .custom-arrow-down{float:right}.dropdown-toggle:after{display:none}.e-input-group.e-control-wrapper.e-time-wrapper.e-lib.e-keyboard.e-valid-input.e-non-edit{font-size:var(--fontsize16);margin-right:1rem}button.calendar,button.calendar:active{opacity:1;display:block;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"35\" height=\"22\" viewBox=\"0 0 35 22\">%0D%0A  <defs>%0D%0A    <clipPath id=\"clip-path\">%0D%0A      <path id=\"Mask\" d=\"M17.569,22H2.215a2.143,2.143,0,0,1-1.571-.644A2.147,2.147,0,0,1,0,19.785V4.431A2.147,2.147,0,0,1,.644,2.859a2.147,2.147,0,0,1,1.571-.644H3.3V0H5.513V2.215h8.759V0h2.215V2.215h1.082A2.2,2.2,0,0,1,19.784,4.43V19.785A2.2,2.2,0,0,1,17.569,22ZM2.215,7.728V19.785H17.569V7.728ZM15.4,17.621H9.893V12.108h5.513v5.513Z\" fill=\"%231d1d1b\"/>%0D%0A    </clipPath>%0D%0A  </defs>%0D%0A  <g id=\"Group_30\" data-name=\"Group 30\" transform=\"translate(-3093 1352)\">%0D%0A    <rect id=\"Rectangle_14\" data-name=\"Rectangle 14\" width=\"35\" height=\"22\" transform=\"translate(3093 -1352)\" fill=\"none\"/>%0D%0A    <g id=\"Group\" transform=\"translate(3093 -1352)\">%0D%0A      <path id=\"Mask-2\" data-name=\"Mask\" d=\"M17.569,22H2.215a2.143,2.143,0,0,1-1.571-.644A2.147,2.147,0,0,1,0,19.785V4.431A2.147,2.147,0,0,1,.644,2.859a2.147,2.147,0,0,1,1.571-.644H3.3V0H5.513V2.215h8.759V0h2.215V2.215h1.082A2.2,2.2,0,0,1,19.784,4.43V19.785A2.2,2.2,0,0,1,17.569,22ZM2.215,7.728V19.785H17.569V7.728ZM15.4,17.621H9.893V12.108h5.513v5.513Z\" fill=\"%231d1d1b\"/>%0D%0A      <g id=\"Group-2\" data-name=\"Group\" clip-path=\"url(%23clip-path)\">%0D%0A        <g id=\"_icon-color\" data-name=\"\\21b3\\1f3a8icon-color\" transform=\"translate(-49.463 -47.247)\">%0D%0A          <rect id=\"Icon-Shade\" width=\"118.71\" height=\"118.71\" fill=\"%231d1d1b\"/>%0D%0A        </g>%0D%0A      </g>%0D%0A    </g>%0D%0A  </g>%0D%0A</svg>%0D%0A') no-repeat;background-size:35px 22px;background-position:12px 12px;border-width:thin;align-items:center;position:relative;text-align:center;justify-content:center;padding:0;border-radius:0;border:1px solid #d3d6db;border-left-width:0px}.form-label{font-size:var(--fontsize16);font-family:Arial Bold,sans-serif}.mat-card:not([class*=mat-elevation-z]){padding:1.5rem}.delivery-box,.collect-box{border:1px solid #A6A6A5;border-radius:10px;opacity:1;align-items:center;justify-content:center;background-color:#eee3;display:inline-flex;padding:36px;height:160px;width:219px;cursor:pointer;position:relative}.delivery-box .delivery-img,.collect-box .delivery-img{width:6.25em;height:3.688em}.delivery-box .pickup-img,.collect-box .pickup-img{width:5em;height:5em}.delivery-box.active-box,.collect-box.active-box{background-color:#eee3;border:2px solid #B61828;opacity:1}.delivery-box .mat-checkbox.active-checkbox,.collect-box .mat-checkbox.active-checkbox{right:25px;position:absolute;top:10%}.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#b61828}.box-container .mat-card-title,.box-container .mat-mdc-card-title{text-align:center;font-family:Arial Bold,sans-serif;opacity:1;margin:0;font-size:var(--fontsize16)}.box-container .mat-card-title{margin:5px!important}.box-container .mat-card-subtitle{opacity:1;font-size:var(--fontsize16);margin-bottom:0;color:#1d1d1b}.marker{color:#973937;font-family:Arial Bold,sans-serif}.branch-container .mat-card-subtitle{margin-bottom:6px;font-size:var(--fontsize16);color:#1d1d1b}.branch-container .mat-card-subtitle .branch-hour-container span:not(.error-message):last-child{text-transform:uppercase}.branch-container .mat-card-title,.branch-container .mat-mdc-card-title{font-family:Arial Bold,sans-serif;margin-bottom:4px;font-size:var(--fontsize16)}.branch-container .branch-link{font-size:var(--fontsize18)}.branch-container .hour-label-left{width:15%;position:relative;display:inline-block}input[type=time]::-webkit-calendar-picker-indicator{background:none}.check-square-del,.check-square-cc{position:absolute;top:-1px;right:0}.selectdiv{position:relative}.selectdiv select{height:50px;width:100%;line-height:35px;border:1px solid #d3d6db;font-size:var(--fontsize16);color:#1d1d1b;padding-left:13px;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1}::ng-deep .OrderCheckoutTemplate .mat-card-header-text{margin:0!important}::ng-deep .OrderCheckoutTemplate mat-radio-button{padding-left:10px}::ng-deep .OrderCheckoutTemplate mat-radio-button .mat-radio-label{white-space:pre-line}::ng-deep .OrderCheckoutTemplate .card-number{background-color:#1d1d1b;border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-family:Arial Bold,sans-serif;margin-right:1rem}::ng-deep .OrderCheckoutTemplate .mat-card-content .mat-inner-container .mat-radio-label-content{font-family:Arial Bold,sans-serif;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .mat-card-content .mat-radio-label-content{font-family:Arial Regular,sans-serif;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .form-control{color:#1d1d1b;font-family:Arial Regular,sans-serif}::ng-deep .OrderCheckoutTemplate #Instructions{resize:none}::ng-deep .OrderCheckoutTemplate #Instructions::placeholder{font-family:Arial Regular,sans-serif;font-size:var(--fontsize16);color:#c6c6c6}::ng-deep .OrderCheckoutTemplate .info-icon{position:relative;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">%0D%0A  <path id=\"Icon_metro-info\" data-name=\"Icon metro-info\" d=\"M9.571,6.678a.752.752,0,0,1,.75-.75h.5a.752.752,0,0,1,.75.75v.5a.752.752,0,0,1-.75.75h-.5a.752.752,0,0,1-.75-.75Zm3,7.25h-4v-1h1v-3h-1v-1h3v4h1Zm-2-12a8,8,0,1,0,8,8,8,8,0,0,0-8-8Zm0,14.5a6.5,6.5,0,1,1,6.5-6.5A6.5,6.5,0,0,1,10.571,16.428Z\" transform=\"translate(-2.571 -1.928)\" fill=\"%23c6c6c6\"/>%0D%0A</svg>%0D%0A') no-repeat center;width:16px;height:16px;display:inline-block;top:1px;left:15px}::ng-deep .OrderCheckoutTemplate .cart-page-footer{background-color:#fff;border-top:1px solid #E0E0E0;padding:10px 0;position:fixed;bottom:0;left:0;right:0;width:100%;z-index:9;transition:transform .3s ease-in-out}::ng-deep .OrderCheckoutTemplate .error-message{color:#da1e28}::ng-deep .OrderCheckoutTemplate .example-radio-group .mat-radio-button{display:block}::ng-deep .OrderCheckoutTemplate .content-row{margin-bottom:3rem}::ng-deep .OrderCheckoutTemplate mat-card.line-step-navigation{box-shadow:none;border:1px solid #E0E0E0}::ng-deep .OrderCheckoutTemplate .card-container mat-card{box-shadow:none}::ng-deep .OrderCheckoutTemplate .line-step-navigation{position:relative}::ng-deep .OrderCheckoutTemplate .line-step-navigation:before{display:inline-block;content:\"\";position:absolute;top:0;left:-35px;width:10px;height:100%;border-left:2px dashed #C6C6C6}::ng-deep .OrderCheckoutTemplate .line-step-navigation:last-child:before{border-left:none}::ng-deep .OrderCheckoutTemplate .line-step-navigation .cus-title-margin-card{position:relative;left:-50px;margin-bottom:0}::ng-deep .OrderCheckoutTemplate .line-step-navigation.last-step:before{height:75%}::ng-deep .OrderCheckoutTemplate .line-step-navigation.first-step:before{height:75%;top:32%}::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-mdc-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-mdc-card-title{margin:1rem 0;font-size:1.5rem;display:inline-flex;align-items:center}::ng-deep .OrderCheckoutTemplate .map-selected-address{background-color:#e8e8e8;border:1px solid #d3d6db;padding:.75rem;align-self:flex-start;width:100%;min-height:50px;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .box-container{text-align:center}@media (max-width: 992px){::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group{display:inline-flex;flex-direction:row;align-items:flex-start}::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group .mat-radio-button .mat-radio-label,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group .mat-radio-button .mat-radio-label{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group .mat-radio-button .mat-radio-label .mat-radio-label-content,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group .mat-radio-button .mat-radio-label .mat-radio-label-content{margin-top:5px}::ng-deep .OrderCheckoutTemplate .line-step-navigation{background:transparent;box-shadow:none!important;border:none!important}::ng-deep .OrderCheckoutTemplate .line-step-navigation:before{left:15px}::ng-deep .OrderCheckoutTemplate .line-step-navigation .cus-title-margin-card{left:0}::ng-deep .OrderCheckoutTemplate .card-container mat-card{background:transparent;box-shadow:none!important}::ng-deep .OrderCheckoutTemplate .checkout-footer-btns{display:flex;justify-content:space-around;align-items:center}::ng-deep .OrderCheckoutTemplate .mat-card:not([class*=mat-elevation-z]){padding:1rem .25rem 1rem 1.5rem}::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-mdc-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-mdc-card-title{font-size:1.25rem;align-items:center;margin:0}::ng-deep .OrderCheckoutTemplate .mat-card-content.box-container,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content.box-container{display:flex}::ng-deep .OrderCheckoutTemplate .mat-card-content mat-card .mat-card,::ng-deep .OrderCheckoutTemplate .mat-card-content mat-card .mat-mdc-card,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content mat-card .mat-card,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content mat-card .mat-mdc-card{align-items:center;justify-content:center}::ng-deep .OrderCheckoutTemplate .delivery-box,::ng-deep .OrderCheckoutTemplate .collect-box{height:102px;width:140px}::ng-deep .OrderCheckoutTemplate .box-container{text-align:left}::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text{padding-left:1rem}::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text .mat-card-title,::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text .mat-mdc-card-title{text-align:left;margin-left:0!important}::ng-deep .OrderCheckoutTemplate .address-inner-container{padding-left:15px}::ng-deep .OrderCheckoutTemplate input#date::placeholder{color:#d3d6db}}::ng-deep .OrderCheckoutTemplate .mdc-radio{height:auto!important;width:auto}@media screen and (max-width: 576px){.mat-mdc-card-header{display:flex;padding:16px 0 0}.mat-mdc-card:not([class*=mat-elevation-z]){padding:0 0 0 .5rem}.card-number{flex-shrink:0}}@media screen and (min-width: 1024px){.mat-mdc-card-header{padding:0}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PageSlotComponent, selector: "cx-page-slot,[cx-page-slot]", inputs: ["position", "class", "isPageFold", "hasComponents"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { kind: "directive", type: i3$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i3$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i3$2.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["tooltipTitle", "placement"] }, { kind: "component", type: AddNewAddressComponent, selector: "app-add-new-address", inputs: ["confirmedAddress"], outputs: ["updateNewAddress"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CustomCheckoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-checkout', standalone: false, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n<app-custom-breadcrum [customCrumbData]=\"breadcrumbData\" class=\"products-breadcums\"></app-custom-breadcrum>\r\n<div class=\"container mb-120\">\r\n    <div class=\"top-checkout col-sm-9\">\r\n        <h1 class=\"pageTitle\">{{pageTitle}}</h1>\r\n        <!-- <p class=\"checkout-header-paragraph\">{{checkoutHeaderContent}}</p> -->\r\n            <cx-page-slot class=\"checkout-header-paragraph\" position=\"CheckoutParagraphContextSlot-checkoutPage\"></cx-page-slot>\r\n    </div>\r\n    <div class=\"row content-row\">\r\n        <div class=\"col-sm-12 col-lg-7 offset-lg-3\">\r\n            <form #checkoutForm=\"ngForm\">\r\n                <mat-card-header class=\"line-step-navigation first-step\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 1 </span> Choose Your Delivery Method</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"card-container d-sm-inline-flex d-md-flex align-content-center justify-content-between \">\r\n                            <mat-card class=\"matlft\">\r\n                                <mat-card-content class=\"box-container\">\r\n                                    <div (click)=\"isDeliveryBox = true; changeDeliveryOptions()\" class=\"delivery-box d-sm-inline-flex align-items-sm-center justify-content-sm-around\" [ngClass]=\"isDeliveryBox ? ACTIVE_ITEM : ''\">\r\n                                        <img class=\"delivery-img\" src=\"../../../../assets/images/delivery.svg\" />\r\n                                        <ng-template [ngIf]=\"isDeliveryBox\">\r\n                                            <img class=\"check-square-del\" src=\"../../../../assets/images/check-square.svg\" />\r\n                                        </ng-template>\r\n                                    </div>\r\n                                    <div class=\"delivery-heading-text\">\r\n                                        <mat-card-title>{{deliveryModes[0]?.name || 'Delivery'}} </mat-card-title>\r\n                                        <mat-card-subtitle> {{deliveryModes[0]?.description || 'We deliver right to your door.'}} </mat-card-subtitle>\r\n                                    </div>\r\n                                </mat-card-content>\r\n                            </mat-card>\r\n\r\n                            <mat-card class=\"matright\">\r\n                                <mat-card-content class=\"box-container\">\r\n                                    <div (click)=\"isDeliveryBox = false ;hasTimeSpecificRequest = false; changeDeliveryOptions()\" class=\"collect-box d-sm-inline-flex align-items-sm-center justify-content-sm-around\" [ngClass]=\"isDeliveryBox ? '' : ACTIVE_ITEM\">                                        <img class=\"pickup-img\" src=\"../../../../assets/images/pickup.svg\" />\r\n                                        <ng-template [ngIf]=\"!isDeliveryBox\">\r\n                                            <img class=\"check-square-cc\" src=\"../../../../assets/images/check-square.svg\" />\r\n                                        </ng-template>\r\n                                    </div>\r\n                                    <div class=\"delivery-heading-text\">\r\n                                        <mat-card-title> {{deliveryModes[1]?.name || 'Click & Collect'}}</mat-card-title>\r\n                                        <mat-card-subtitle> {{deliveryModes[1]?.description || 'Collect from your nearest branch.' }}</mat-card-subtitle>\r\n                                    </div>\r\n                                </mat-card-content>\r\n                            </mat-card>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 2 </span> Purchase Order Number</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\">\r\n                            <label class=\"form-label\">Purchase Order Number  <span class=\"marker\">*</span></label>\r\n                            <input #poNumber=\"ngModel\" name=\"poNumber\" id=\"poNumber\" type=\"text\" maxlength=\"15\" [(ngModel)]=\"checkoutFormData.poNumber\" class=\"form-control joborder-input\" required>\r\n                        </div>\r\n                        <p *ngIf=\"isSubmitted\" [hidden]=\"poNumber.valid\" class=\"error-message\">\r\n                            Purchase Order Number is required\r\n                        </p>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n\r\n                <mat-card-header class=\"line-step-navigation\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 3 </span> {{isDeliveryBox ? 'Delivery': 'Pickup '}} Date and Time</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\">\r\n                            <label for=\"date\" class=\"form-label\">Date <span class=\"marker\">*</span></label>\r\n                            <form class=\"ngb-date-form\">\r\n                                <div class=\"form-group\">\r\n                                    <div class=\"input-group\">\r\n                                        <input [firstDayOfWeek]=\"7\" #deliveryPickUpDate=\"ngModel\" class=\"form-control cus-width date-input\" [(ngModel)]=\"checkoutFormData.deliveryPickUpDate\" id=\"date\" name=\"txtDate\" tabindex=\"-1\" onkeydown=\"return false\" placeholder=\"DD-MM-YYYY\" ngbDatepicker #ngDate=\"ngbDatepicker\"\r\n                                            [minDate]=\"ngbMinDate\" (dateSelect)=\"datechange($event)\" container=\"body\" required [markDisabled]=\"isDisabled\" />\r\n                                        <div class=\"input-group-append custom-date-button\">\r\n                                            <button class=\"btn btn-outline-secondary calendar\" (click)=\"ngDate.toggle()\" type=\"button\"></button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                        <p *ngIf=\"isSubmitted && !checkoutFormData.deliveryPickUpDate\" class=\"error-message\">\r\n                            Date is required\r\n                        </p>\r\n                        <mat-radio-group [(ngModel)]=\"hasTimeSpecificRequest\" class=\"d-flex align-items-center\" *ngIf=\"isDeliveryBox\">\r\n                            <mat-radio-button [value]=\"true\" [checked]=\"hasTimeSpecificRequest\" (click)=\"timeRequestChange()\">I have a time specific delivery request</mat-radio-button>\r\n                        </mat-radio-group>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\" [ngClass]=\"{'d-none': !hasTimeSpecificRequest || !isDeliveryBox}\">                            <label for=\"time\" class=\"form-label pt-4\">Time <span class=\"marker\">*</span></label>\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <form class=\"form-job\">\r\n                                    <div class=\"selectdiv\">\r\n                                        <label class=\"jobinput\">\r\n                                            <div ngbDropdown class=\"d-block\">\r\n                                                <button class=\"btn btn-outline-primary\" id=\"dropdownBasic1\" ngbDropdownToggle >\r\n                                                    {{ Initialtime }}\r\n                                                    <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                                                </button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" id=\"dropdownMenu\">\r\n                                                    <button ngbDropdownItem class=\"dropdownItem\" *ngFor=\"let time of timeOptions\" #collectTimeObj (click)=\"onFromTimeChanged(time); checkoutFormData.deliveryPickUpFromTime=time\">\r\n                                                        {{ time }}\r\n                                                    </button>\r\n                                                </div>\r\n                                            </div>\r\n                                         </label>\r\n                                    </div>\r\n                                    <p [ngClass]=\"{'d-none': !hasTimeSpecificRequest || !isDeliveryBox}\">*Your time specific delivery request will be confirmed by the Dimond Customer Services team when your order is confirmed.</p>\r\n                                </form>\r\n                                \r\n                            </div>\r\n                        </div>\r\n                        <!-- <p *ngIf=\"isSubmitted\" [hidden]=\"checkoutFormData.deliveryPickUpFromTime != undefined\" class=\"error-message\">\r\n                            From time is required\r\n                        </p>\r\n                        <p *ngIf=\"isSubmitted\" [hidden]=\"checkoutFormData.deliveryPickUpToTime != undefined\" class=\"error-message\">\r\n                            To time is required\r\n                        </p> -->\r\n                    </mat-card-content>\r\n                </mat-card>\r\n\r\n                <mat-card-header class=\"line-step-navigation\" *ngIf=\"!isDeliveryBox\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 4 </span> Pickup Location</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card *ngIf=\"!isDeliveryBox\" class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"branch-container\">\r\n                            <mat-card-title class='address-title'>\r\n                                {{branchDisplayName}}</mat-card-title>\r\n                            <mat-card-subtitle> {{branchAddress?.formattedAddress}}</mat-card-subtitle>\r\n                            <mat-card-subtitle> <span class=\"form-label\">Phone: </span> {{branchAddress?.phone}}</mat-card-subtitle>\r\n                            <div class=\"branch-hour-container\">\r\n                                <mat-card-title class='address-title'>Opening Hours</mat-card-title>\r\n                                <mat-card-subtitle *ngFor=\"let data of tempBranchListData\">\r\n                                    <span class=\"hour-label-left\">{{ data?.weekDay }}</span>\r\n                                    <span *ngIf=\"data?.openingTime?.formattedHour || data?.closingTime?.formattedHour\">{{data?.openingTime?.formattedHour}}\r\n                                    - {{data?.closingTime?.formattedHour}}</span>\r\n                                    <span class=\"error-message\" *ngIf=\"!data?.openingTime?.formattedHour && !data?.closingTime?.formattedHour\">Closed</span>\r\n                                </mat-card-subtitle>\r\n                            </div>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation\" *ngIf=\"isDeliveryBox\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 4 </span> {{isDeliveryBox ? 'Select your Delivery Address Preference': 'Pickup Location '}}\r\n\r\n                        </mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card [hidden]=\"!isDeliveryBox\" class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"d-flex mat-inner-container radio-btn-container\">\r\n                            <mat-radio-group aria-label=\"Select an option\">\r\n                                <mat-radio-button *ngIf=\"defaultAccountAddress?.formattedAddress || (deliveryAddresses && deliveryAddresses.length > 0)\" [checked]=\"selectedAddress == 'accountAddress'\" (change)=\"selectedAddress = 'accountAddress';selectedRecentAddress= deliveryAddresses[0]\"\r\n                                    [value]=\"'accountAddress'\" class=\"pl-0 pr-md-4\">Account Address</mat-radio-button>\r\n                                <mat-radio-button *ngIf=\"deliveryAddresses && recentAddress.length> 0\" [checked]=\"selectedAddress == 'recentAddress'\" (change)=\"selectedAddress = 'recentAddress'; selectedRecentAddress= recentAddress[0]\" [value]=\"'recentAddress'\" class=\"pl-0 pr-md-4\">Recent Address</mat-radio-button>\r\n                                <mat-radio-button [checked]=\"selectedAddress == 'addNewAddress'\" (change)=\"addNewAddress()\" [value]=\"'addNewAddress'\">Add New Address</mat-radio-button>\r\n                            </mat-radio-group>\r\n                        </div>\r\n                        <div class=\"py-2 address-inner-container\" *ngIf=\"selectedAddress == 'accountAddress' && deliveryAddresses.length > 0 \">\r\n                            <label *ngIf=\"!showMoreAddresses\" class=\"form-label\">Confirmed Delivery Address </label>\r\n\r\n                            <div *ngIf=\"!showMoreAddresses\" class=\"form-container\">\r\n                                <div class=\"map-selected-address\" id=\"address\" required #isAddrSelectedOrNot>\r\n                                    {{defaultAccountAddress?.formattedAddress}}</div>\r\n                            </div>\r\n                            <div *ngIf=\"showMoreAddresses\">\r\n                                <mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group radio-btn-size\">\r\n                                    <mat-radio-button class=\"py-1\" [checked]=\"selectedRecentAddress?.id == address.id\" *ngFor=\"let address of deliveryAddresses\" [value]=\"address.id\" (change)=\"selectedRecentAddress=address\">\r\n                                        {{address.formattedAddress}}\r\n                                    </mat-radio-button>\r\n                                </mat-radio-group>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"py-2 address-inner-container\" *ngIf=\"selectedAddress == 'recentAddress' && recentAddress.length > 0\">\r\n                            <mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group radio-btn-size\">\r\n                                <mat-radio-button class=\"py-1\" [checked]=\"selectedRecentAddress?.id == address.id\" *ngFor=\"let address of recentAddress \" [value]=\"address.id\" (change)=\"selectedRecentAddress=address\">\r\n                                    {{address.formattedAddress}}\r\n                                </mat-radio-button>\r\n                            </mat-radio-group>\r\n                        </div>\r\n                        <div *ngIf=\"selectedAddress == 'addNewAddress'\">\r\n                            <!-- Map Div -->\r\n                            <app-add-new-address [confirmedAddress]=\"confirmedNewAddress\" (updateNewAddress)=\"getNewAddress($event)\"></app-add-new-address>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation last-step\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title>\r\n                            <span class=\"card-number\"> 5 </span> {{isDeliveryBox ? 'Site Delivery Requirements': 'Comments '}}\r\n                            <span class=\"info-icon pl-2\" appTooltip tooltipTitle=\"{{isDeliveryBox ? siteDeliveryRequirements : clickandCollectComments}}\" placement=\"bottom\"></span>\r\n                        </mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <textarea class=\"form-control\" [(ngModel)]=\"checkoutFormData.deliveryPickUpNotes\" rows=\"3\" name=\"Instructions\" id=\"Instructions\" [placeholder]=\"isDeliveryBox ? 'Provide any specific delivery instructions':'Provide any specific pickup instructions'\" maxlength=\"250\"></textarea>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n            </form>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"cart-page-footer\">\r\n    <div class=\"container\">\r\n        <div class=\"sticky-footer row\">\r\n            <div class=\"col-sm-12\">\r\n                <p class=\" float-md-right m-0 checkout-footer-btns\">\r\n                    <a title=\"Back to Cart\" href=\"/cart\" class=\"mr-3 font-weight-bold\">\r\n                        <img src=\"../../../../assets/images/ionic-arrow-back.svg\" alt=\"back-arrow\" class=\"mr-2\" /> BACK\r\n                    </a>\r\n                    <button type=\"button\" (click)=\"reviewOrder()\" class=\"btn primary-button\">Review And Order</button>\r\n                </p>\r\n            </div>\r\n            <div class=\" col-sm-12 alert alert-danger alert-danger-custom justify-content-start mt-3\" role=\"alert\" *ngIf=\"errorInd$ | async\">\r\n                <img class=\"mr-3\" src=\"../../../../assets/images/erroricon.svg\" alt=\"alert\"> {{infoMessage}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.ttf) format(\"ttf\"),url(/assets/fonts/icomoon.woff) format(\"woff\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Arial Regular;src:url(/assets/fonts/arial-webfont.woff) format(\"woff\"),url(/assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Arial Bold;src:url(/assets/fonts/Arial-BoldMT.eot);src:url(/assets/fonts/Arial-BoldMT.eot?#iefix) format(\"embedded-opentype\"),url(/assets/fonts/Arial-BoldMT.woff2) format(\"woff2\"),url(/assets/fonts/Arial-BoldMT.woff) format(\"woff\"),url(/assets/fonts/Arial-BoldMT.ttf) format(\"truetype\"),url(/assets/fonts/Arial-BoldMT.svg#Arial-BoldMT) format(\"svg\");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Arial Black;src:url(/assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(/assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Reqular;src:url(/assets/fonts/helveticaneue.woff) format(\"woff\"),url(/assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Thin;src:url(/assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(/assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Medium;src:url(/assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(/assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(/assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(/assets/images/icon-flashing-black.svg)}.icon-ridge{position:relative;display:inline-block;height:32px;text-align:center;width:65px}.icon-ridge:before,.mainnav-link-level-2.show .navTagChild .icon-ridge:before{content:url(/projects/buildingproduct_library/assets/images/icon-ridge-white.svg);height:24px;width:65px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-ridge:before{content:url(/projects/buildingproduct_library/assets/images/icon-ridge-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:Arial Regular,sans-serif}header{background-color:#1d1d1b!important;background:#1d1d1b!important;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0rem}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:baseline;justify-content:space-between;padding-top:2px;padding-bottom:8px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0;font-weight:400}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:Arial Bold,sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:Helvetica Neue Regular,sans-serif;font-size:var(--fontsize54);color:#1d1d1b;padding-top:2rem}[aria-label=Close]{cursor:pointer}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828!important}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .miniCartStyle cx-paragraph{display:block!important}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:0;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:324px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:40px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px;z-index:7}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%;height:auto}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%;align-items:flex-start}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}.detail{font-weight:400;display:flex!important;align-items:center}.detail a{min-height:0px}.hamburger-inner{background-color:#fff!important}.hamburger-inner:before,.hamburger-inner:after{background-color:#fff!important}#navbarDropdownMenuLink{padding:.3rem 0rem}a{min-height:auto!important;min-width:auto}}.mb-120{margin-bottom:120px}::ng-deep .OrderCheckoutTemplate header{display:none!important}::ng-deep .OrderCheckoutTemplate .ngb-date-form .form-control.date-input{height:auto}::ng-deep .UserDetailCheckout{z-index:4}::ng-deep .UserDetailCheckout .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}::ng-deep cx-storefront.stop-navigating:before,::ng-deep cx-storefront.stop-navigating:after{height:0}.custom-arrow{position:absolute;right:15px;top:18px;z-index:1}.esri-view,#mapViewNode{padding:0;margin:0;height:100%;width:100%}::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#b61828!important}::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background:#b61828!important}::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__outer-circle{border-color:#b61828!important}::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:#d3d6db!important}::ng-deep ejs-timepicker .e-input-group{padding:8px}#dropdownMenu{margin-top:0!important;width:calc(100% - 30px);border:1px solid rgba(0,0,0,.15);background-color:#fff;font-size:var(--fontsize14);font-family:Arial,sans-serif}#dropdownMenu.show{display:block;width:100%}#dropdownBasic1{font-size:var(--fontsize14);font-family:Arial,sans-serif;text-align:left;background-color:#f6f6f6;border:1px solid #f1f1f1;color:#1d1d1b;box-shadow:none;border-radius:0;margin-right:30px;width:100%}#dropdownBasic1 .custom-arrow-down{float:right}.dropdown-toggle:after{display:none}.e-input-group.e-control-wrapper.e-time-wrapper.e-lib.e-keyboard.e-valid-input.e-non-edit{font-size:var(--fontsize16);margin-right:1rem}button.calendar,button.calendar:active{opacity:1;display:block;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"35\" height=\"22\" viewBox=\"0 0 35 22\">%0D%0A  <defs>%0D%0A    <clipPath id=\"clip-path\">%0D%0A      <path id=\"Mask\" d=\"M17.569,22H2.215a2.143,2.143,0,0,1-1.571-.644A2.147,2.147,0,0,1,0,19.785V4.431A2.147,2.147,0,0,1,.644,2.859a2.147,2.147,0,0,1,1.571-.644H3.3V0H5.513V2.215h8.759V0h2.215V2.215h1.082A2.2,2.2,0,0,1,19.784,4.43V19.785A2.2,2.2,0,0,1,17.569,22ZM2.215,7.728V19.785H17.569V7.728ZM15.4,17.621H9.893V12.108h5.513v5.513Z\" fill=\"%231d1d1b\"/>%0D%0A    </clipPath>%0D%0A  </defs>%0D%0A  <g id=\"Group_30\" data-name=\"Group 30\" transform=\"translate(-3093 1352)\">%0D%0A    <rect id=\"Rectangle_14\" data-name=\"Rectangle 14\" width=\"35\" height=\"22\" transform=\"translate(3093 -1352)\" fill=\"none\"/>%0D%0A    <g id=\"Group\" transform=\"translate(3093 -1352)\">%0D%0A      <path id=\"Mask-2\" data-name=\"Mask\" d=\"M17.569,22H2.215a2.143,2.143,0,0,1-1.571-.644A2.147,2.147,0,0,1,0,19.785V4.431A2.147,2.147,0,0,1,.644,2.859a2.147,2.147,0,0,1,1.571-.644H3.3V0H5.513V2.215h8.759V0h2.215V2.215h1.082A2.2,2.2,0,0,1,19.784,4.43V19.785A2.2,2.2,0,0,1,17.569,22ZM2.215,7.728V19.785H17.569V7.728ZM15.4,17.621H9.893V12.108h5.513v5.513Z\" fill=\"%231d1d1b\"/>%0D%0A      <g id=\"Group-2\" data-name=\"Group\" clip-path=\"url(%23clip-path)\">%0D%0A        <g id=\"_icon-color\" data-name=\"\\21b3\\1f3a8icon-color\" transform=\"translate(-49.463 -47.247)\">%0D%0A          <rect id=\"Icon-Shade\" width=\"118.71\" height=\"118.71\" fill=\"%231d1d1b\"/>%0D%0A        </g>%0D%0A      </g>%0D%0A    </g>%0D%0A  </g>%0D%0A</svg>%0D%0A') no-repeat;background-size:35px 22px;background-position:12px 12px;border-width:thin;align-items:center;position:relative;text-align:center;justify-content:center;padding:0;border-radius:0;border:1px solid #d3d6db;border-left-width:0px}.form-label{font-size:var(--fontsize16);font-family:Arial Bold,sans-serif}.mat-card:not([class*=mat-elevation-z]){padding:1.5rem}.delivery-box,.collect-box{border:1px solid #A6A6A5;border-radius:10px;opacity:1;align-items:center;justify-content:center;background-color:#eee3;display:inline-flex;padding:36px;height:160px;width:219px;cursor:pointer;position:relative}.delivery-box .delivery-img,.collect-box .delivery-img{width:6.25em;height:3.688em}.delivery-box .pickup-img,.collect-box .pickup-img{width:5em;height:5em}.delivery-box.active-box,.collect-box.active-box{background-color:#eee3;border:2px solid #B61828;opacity:1}.delivery-box .mat-checkbox.active-checkbox,.collect-box .mat-checkbox.active-checkbox{right:25px;position:absolute;top:10%}.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#b61828}.box-container .mat-card-title,.box-container .mat-mdc-card-title{text-align:center;font-family:Arial Bold,sans-serif;opacity:1;margin:0;font-size:var(--fontsize16)}.box-container .mat-card-title{margin:5px!important}.box-container .mat-card-subtitle{opacity:1;font-size:var(--fontsize16);margin-bottom:0;color:#1d1d1b}.marker{color:#973937;font-family:Arial Bold,sans-serif}.branch-container .mat-card-subtitle{margin-bottom:6px;font-size:var(--fontsize16);color:#1d1d1b}.branch-container .mat-card-subtitle .branch-hour-container span:not(.error-message):last-child{text-transform:uppercase}.branch-container .mat-card-title,.branch-container .mat-mdc-card-title{font-family:Arial Bold,sans-serif;margin-bottom:4px;font-size:var(--fontsize16)}.branch-container .branch-link{font-size:var(--fontsize18)}.branch-container .hour-label-left{width:15%;position:relative;display:inline-block}input[type=time]::-webkit-calendar-picker-indicator{background:none}.check-square-del,.check-square-cc{position:absolute;top:-1px;right:0}.selectdiv{position:relative}.selectdiv select{height:50px;width:100%;line-height:35px;border:1px solid #d3d6db;font-size:var(--fontsize16);color:#1d1d1b;padding-left:13px;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1}::ng-deep .OrderCheckoutTemplate .mat-card-header-text{margin:0!important}::ng-deep .OrderCheckoutTemplate mat-radio-button{padding-left:10px}::ng-deep .OrderCheckoutTemplate mat-radio-button .mat-radio-label{white-space:pre-line}::ng-deep .OrderCheckoutTemplate .card-number{background-color:#1d1d1b;border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-family:Arial Bold,sans-serif;margin-right:1rem}::ng-deep .OrderCheckoutTemplate .mat-card-content .mat-inner-container .mat-radio-label-content{font-family:Arial Bold,sans-serif;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .mat-card-content .mat-radio-label-content{font-family:Arial Regular,sans-serif;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .form-control{color:#1d1d1b;font-family:Arial Regular,sans-serif}::ng-deep .OrderCheckoutTemplate #Instructions{resize:none}::ng-deep .OrderCheckoutTemplate #Instructions::placeholder{font-family:Arial Regular,sans-serif;font-size:var(--fontsize16);color:#c6c6c6}::ng-deep .OrderCheckoutTemplate .info-icon{position:relative;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">%0D%0A  <path id=\"Icon_metro-info\" data-name=\"Icon metro-info\" d=\"M9.571,6.678a.752.752,0,0,1,.75-.75h.5a.752.752,0,0,1,.75.75v.5a.752.752,0,0,1-.75.75h-.5a.752.752,0,0,1-.75-.75Zm3,7.25h-4v-1h1v-3h-1v-1h3v4h1Zm-2-12a8,8,0,1,0,8,8,8,8,0,0,0-8-8Zm0,14.5a6.5,6.5,0,1,1,6.5-6.5A6.5,6.5,0,0,1,10.571,16.428Z\" transform=\"translate(-2.571 -1.928)\" fill=\"%23c6c6c6\"/>%0D%0A</svg>%0D%0A') no-repeat center;width:16px;height:16px;display:inline-block;top:1px;left:15px}::ng-deep .OrderCheckoutTemplate .cart-page-footer{background-color:#fff;border-top:1px solid #E0E0E0;padding:10px 0;position:fixed;bottom:0;left:0;right:0;width:100%;z-index:9;transition:transform .3s ease-in-out}::ng-deep .OrderCheckoutTemplate .error-message{color:#da1e28}::ng-deep .OrderCheckoutTemplate .example-radio-group .mat-radio-button{display:block}::ng-deep .OrderCheckoutTemplate .content-row{margin-bottom:3rem}::ng-deep .OrderCheckoutTemplate mat-card.line-step-navigation{box-shadow:none;border:1px solid #E0E0E0}::ng-deep .OrderCheckoutTemplate .card-container mat-card{box-shadow:none}::ng-deep .OrderCheckoutTemplate .line-step-navigation{position:relative}::ng-deep .OrderCheckoutTemplate .line-step-navigation:before{display:inline-block;content:\"\";position:absolute;top:0;left:-35px;width:10px;height:100%;border-left:2px dashed #C6C6C6}::ng-deep .OrderCheckoutTemplate .line-step-navigation:last-child:before{border-left:none}::ng-deep .OrderCheckoutTemplate .line-step-navigation .cus-title-margin-card{position:relative;left:-50px;margin-bottom:0}::ng-deep .OrderCheckoutTemplate .line-step-navigation.last-step:before{height:75%}::ng-deep .OrderCheckoutTemplate .line-step-navigation.first-step:before{height:75%;top:32%}::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-mdc-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-mdc-card-title{margin:1rem 0;font-size:1.5rem;display:inline-flex;align-items:center}::ng-deep .OrderCheckoutTemplate .map-selected-address{background-color:#e8e8e8;border:1px solid #d3d6db;padding:.75rem;align-self:flex-start;width:100%;min-height:50px;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .box-container{text-align:center}@media (max-width: 992px){::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group{display:inline-flex;flex-direction:row;align-items:flex-start}::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group .mat-radio-button .mat-radio-label,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group .mat-radio-button .mat-radio-label{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group .mat-radio-button .mat-radio-label .mat-radio-label-content,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group .mat-radio-button .mat-radio-label .mat-radio-label-content{margin-top:5px}::ng-deep .OrderCheckoutTemplate .line-step-navigation{background:transparent;box-shadow:none!important;border:none!important}::ng-deep .OrderCheckoutTemplate .line-step-navigation:before{left:15px}::ng-deep .OrderCheckoutTemplate .line-step-navigation .cus-title-margin-card{left:0}::ng-deep .OrderCheckoutTemplate .card-container mat-card{background:transparent;box-shadow:none!important}::ng-deep .OrderCheckoutTemplate .checkout-footer-btns{display:flex;justify-content:space-around;align-items:center}::ng-deep .OrderCheckoutTemplate .mat-card:not([class*=mat-elevation-z]){padding:1rem .25rem 1rem 1.5rem}::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-mdc-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-mdc-card-title{font-size:1.25rem;align-items:center;margin:0}::ng-deep .OrderCheckoutTemplate .mat-card-content.box-container,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content.box-container{display:flex}::ng-deep .OrderCheckoutTemplate .mat-card-content mat-card .mat-card,::ng-deep .OrderCheckoutTemplate .mat-card-content mat-card .mat-mdc-card,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content mat-card .mat-card,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content mat-card .mat-mdc-card{align-items:center;justify-content:center}::ng-deep .OrderCheckoutTemplate .delivery-box,::ng-deep .OrderCheckoutTemplate .collect-box{height:102px;width:140px}::ng-deep .OrderCheckoutTemplate .box-container{text-align:left}::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text{padding-left:1rem}::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text .mat-card-title,::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text .mat-mdc-card-title{text-align:left;margin-left:0!important}::ng-deep .OrderCheckoutTemplate .address-inner-container{padding-left:15px}::ng-deep .OrderCheckoutTemplate input#date::placeholder{color:#d3d6db}}::ng-deep .OrderCheckoutTemplate .mdc-radio{height:auto!important;width:auto}@media screen and (max-width: 576px){.mat-mdc-card-header{display:flex;padding:16px 0 0}.mat-mdc-card:not([class*=mat-elevation-z]){padding:0 0 0 .5rem}.card-number{flex-shrink:0}}@media screen and (min-width: 1024px){.mat-mdc-card-header{padding:0}}\n"] }]
+            args: [{ selector: 'app-custom-checkout', standalone: false, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n<app-custom-breadcrum [customCrumbData]=\"breadcrumbData\" class=\"products-breadcums\"></app-custom-breadcrum>\r\n<div class=\"container mb-120\">\r\n    <div class=\"top-checkout col-sm-9\">\r\n        <h1 class=\"pageTitle\">{{pageTitle}}</h1>\r\n        <!-- <p class=\"checkout-header-paragraph\">{{checkoutHeaderContent}}</p> -->\r\n            <cx-page-slot class=\"checkout-header-paragraph\" position=\"CheckoutParagraphContextSlot-checkoutPage\"></cx-page-slot>\r\n    </div>\r\n    <div class=\"row content-row\">\r\n        <div class=\"col-sm-12 col-lg-7 offset-lg-3\">\r\n            <form #checkoutForm=\"ngForm\">\r\n                <mat-card-header class=\"line-step-navigation first-step\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 1 </span> Choose Your Delivery Method</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"card-container d-sm-inline-flex d-md-flex align-content-center justify-content-between \">\r\n                            <mat-card class=\"matlft\">\r\n                                <mat-card-content class=\"box-container\">\r\n                                    <div (click)=\"isDeliveryBox = true; changeDeliveryOptions()\" class=\"delivery-box d-sm-inline-flex align-items-sm-center justify-content-sm-around\" [ngClass]=\"isDeliveryBox ? ACTIVE_ITEM : ''\">\r\n                                        <img class=\"delivery-img\" src=\"../../../../assets/images/delivery.svg\" />\r\n                                        <ng-template [ngIf]=\"isDeliveryBox\">\r\n                                            <img class=\"check-square-del\" src=\"../../../../assets/images/check-square.svg\" />\r\n                                        </ng-template>\r\n                                    </div>\r\n                                    <div class=\"delivery-heading-text\">\r\n                                        <mat-card-title>{{deliveryModes[0]?.name || 'Delivery'}} </mat-card-title>\r\n                                        <mat-card-subtitle> {{deliveryModes[0]?.description || 'We deliver right to your door.'}} </mat-card-subtitle>\r\n                                    </div>\r\n                                </mat-card-content>\r\n                            </mat-card>\r\n\r\n                            <mat-card class=\"matright\">\r\n                                <mat-card-content class=\"box-container\">\r\n                                    <div (click)=\"isDeliveryBox = false ;hasTimeSpecificRequest = false; changeDeliveryOptions()\" class=\"collect-box d-sm-inline-flex align-items-sm-center justify-content-sm-around\" [ngClass]=\"isDeliveryBox ? '' : ACTIVE_ITEM\">                                        <img class=\"pickup-img\" src=\"../../../../assets/images/pickup.svg\" />\r\n                                        <ng-template [ngIf]=\"!isDeliveryBox\">\r\n                                            <img class=\"check-square-cc\" src=\"../../../../assets/images/check-square.svg\" />\r\n                                        </ng-template>\r\n                                    </div>\r\n                                    <div class=\"delivery-heading-text\">\r\n                                        <mat-card-title> {{deliveryModes[1]?.name || 'Click & Collect'}}</mat-card-title>\r\n                                        <mat-card-subtitle> {{deliveryModes[1]?.description || 'Collect from your nearest branch.' }}</mat-card-subtitle>\r\n                                    </div>\r\n                                </mat-card-content>\r\n                            </mat-card>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 2 </span> Purchase Order Number</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"row\">\r\n                            <div class=\"form-container for-mob col-sm-6\">\r\n                                <label class=\"form-label\">Purchase Order Number  <span class=\"marker\">*</span></label>\r\n                                <input #poNumber=\"ngModel\" name=\"poNumber\" id=\"poNumber\" type=\"text\" maxlength=\"15\" [(ngModel)]=\"checkoutFormData.poNumber\" class=\"form-control joborder-input\" required>\r\n                                <p *ngIf=\"isSubmitted\" [hidden]=\"poNumber.valid\" class=\"error-message\">\r\n                                    Purchase Order Number is required\r\n                                </p>\r\n                            </div>                            \r\n                            <div *ngIf=\"responseData?.orderPurposeType && responseData?.orderPurposeType?.length > 0\" class=\"form-container for-mob col-sm-6\">\r\n                                <div class=\"form-group\">\r\n                                    <label class=\"form-label\" for=\"orderPurposeType\">Order Purpose/Work Type  <span class=\"marker\">*</span></label>\r\n                                    <select #orderPurposeType=\"ngModel\" name=\"orderPurposeType\"  required [(ngModel)]=\"checkoutFormData.orderPurposeType\"  id=\"orderPurposeType\" class=\"form-control\" >\r\n                                        <option  [ngValue]=\"null\"  selected disabled>Select</option>\r\n                                        <option *ngFor=\"let purposeType of responseData.orderPurposeType\" [value]=\"purposeType?.key\"> {{purposeType?.value}} </option>\r\n                                        \r\n                                    </select>\r\n                                </div> \r\n                                <p *ngIf=\"isSubmitted\" [hidden]=\"orderPurposeType.valid\" class=\"error-message\">\r\n                                    Order Purpose/Work Type is required\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n\r\n                <mat-card-header class=\"line-step-navigation\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 3 </span> {{isDeliveryBox ? 'Delivery': 'Pickup '}} Date and Time</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\">\r\n                            <label for=\"date\" class=\"form-label\">Date <span class=\"marker\">*</span></label>\r\n                            <form class=\"ngb-date-form\">\r\n                                <div class=\"form-group\">\r\n                                    <div class=\"input-group\">\r\n                                        <input [firstDayOfWeek]=\"7\" #deliveryPickUpDate=\"ngModel\" class=\"form-control cus-width date-input\" [(ngModel)]=\"checkoutFormData.deliveryPickUpDate\" id=\"date\" name=\"txtDate\" tabindex=\"-1\" onkeydown=\"return false\" placeholder=\"DD-MM-YYYY\" ngbDatepicker #ngDate=\"ngbDatepicker\"\r\n                                            [minDate]=\"ngbMinDate\" (dateSelect)=\"datechange($event)\" container=\"body\" required [markDisabled]=\"isDisabled\" />\r\n                                        <div class=\"input-group-append custom-date-button\">\r\n                                            <button class=\"btn btn-outline-secondary calendar\" (click)=\"ngDate.toggle()\" type=\"button\"></button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                        <p *ngIf=\"isSubmitted && !checkoutFormData.deliveryPickUpDate\" class=\"error-message\">\r\n                            Date is required\r\n                        </p>\r\n                        <mat-radio-group [(ngModel)]=\"hasTimeSpecificRequest\" class=\"d-flex align-items-center\" *ngIf=\"isDeliveryBox\">\r\n                            <mat-radio-button [value]=\"true\" [checked]=\"hasTimeSpecificRequest\" (click)=\"timeRequestChange()\">I have a time specific delivery request</mat-radio-button>\r\n                        </mat-radio-group>\r\n                        <div class=\"form-container for-mob col-sm-6 pl-0\" [ngClass]=\"{'d-none': !hasTimeSpecificRequest || !isDeliveryBox}\">                            <label for=\"time\" class=\"form-label pt-4\">Time <span class=\"marker\">*</span></label>\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <form class=\"form-job\">\r\n                                    <div class=\"selectdiv\">\r\n                                        <label class=\"jobinput\">\r\n                                            <div ngbDropdown class=\"d-block\">\r\n                                                <button class=\"btn btn-outline-primary\" id=\"dropdownBasic1\" ngbDropdownToggle >\r\n                                                    {{ Initialtime }}\r\n                                                    <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                                                </button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" id=\"dropdownMenu\">\r\n                                                    <button ngbDropdownItem class=\"dropdownItem\" *ngFor=\"let time of timeOptions\" #collectTimeObj (click)=\"onFromTimeChanged(time); checkoutFormData.deliveryPickUpFromTime=time\">\r\n                                                        {{ time }}\r\n                                                    </button>\r\n                                                </div>\r\n                                            </div>\r\n                                         </label>\r\n                                    </div>\r\n                                    <p [ngClass]=\"{'d-none': !hasTimeSpecificRequest || !isDeliveryBox}\">*Your time specific delivery request will be confirmed by the Dimond Customer Services team when your order is confirmed.</p>\r\n                                </form>\r\n                                \r\n                            </div>\r\n                        </div>\r\n                        <!-- <p *ngIf=\"isSubmitted\" [hidden]=\"checkoutFormData.deliveryPickUpFromTime != undefined\" class=\"error-message\">\r\n                            From time is required\r\n                        </p>\r\n                        <p *ngIf=\"isSubmitted\" [hidden]=\"checkoutFormData.deliveryPickUpToTime != undefined\" class=\"error-message\">\r\n                            To time is required\r\n                        </p> -->\r\n                    </mat-card-content>\r\n                </mat-card>\r\n\r\n                <mat-card-header class=\"line-step-navigation\" *ngIf=\"!isDeliveryBox\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 4 </span> Pickup Location</mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card *ngIf=\"!isDeliveryBox\" class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"branch-container\">\r\n                            <mat-card-title class='address-title'>\r\n                                {{branchDisplayName}}</mat-card-title>\r\n                            <mat-card-subtitle> {{branchAddress?.formattedAddress}}</mat-card-subtitle>\r\n                            <mat-card-subtitle> <span class=\"form-label\">Phone: </span> {{branchAddress?.phone}}</mat-card-subtitle>\r\n                            <div class=\"branch-hour-container\">\r\n                                <mat-card-title class='address-title'>Opening Hours</mat-card-title>\r\n                                <mat-card-subtitle *ngFor=\"let data of tempBranchListData\">\r\n                                    <span class=\"hour-label-left\">{{ data?.weekDay }}</span>\r\n                                    <span *ngIf=\"data?.openingTime?.formattedHour || data?.closingTime?.formattedHour\">{{data?.openingTime?.formattedHour}}\r\n                                    - {{data?.closingTime?.formattedHour}}</span>\r\n                                    <span class=\"error-message\" *ngIf=\"!data?.openingTime?.formattedHour && !data?.closingTime?.formattedHour\">Closed</span>\r\n                                </mat-card-subtitle>\r\n                            </div>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation\" *ngIf=\"isDeliveryBox\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title class=\"font-bold\"> <span class=\"card-number\"> 4 </span> {{isDeliveryBox ? 'Select your Delivery Address Preference': 'Pickup Location '}}\r\n\r\n                        </mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card [hidden]=\"!isDeliveryBox\" class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <div class=\"d-flex mat-inner-container radio-btn-container\">\r\n                            <mat-radio-group aria-label=\"Select an option\">\r\n                                <mat-radio-button *ngIf=\"defaultAccountAddress?.formattedAddress || (deliveryAddresses && deliveryAddresses.length > 0)\" [checked]=\"selectedAddress == 'accountAddress'\" (change)=\"selectedAddress = 'accountAddress';selectedRecentAddress= deliveryAddresses[0]\"\r\n                                    [value]=\"'accountAddress'\" class=\"pl-0 pr-md-4\">Account Address</mat-radio-button>\r\n                                <mat-radio-button *ngIf=\"deliveryAddresses && recentAddress.length> 0\" [checked]=\"selectedAddress == 'recentAddress'\" (change)=\"selectedAddress = 'recentAddress'; selectedRecentAddress= recentAddress[0]\" [value]=\"'recentAddress'\" class=\"pl-0 pr-md-4\">Recent Address</mat-radio-button>\r\n                                <mat-radio-button [checked]=\"selectedAddress == 'addNewAddress'\" (change)=\"addNewAddress()\" [value]=\"'addNewAddress'\">Add New Address</mat-radio-button>\r\n                            </mat-radio-group>\r\n                        </div>\r\n                        <div class=\"py-2 address-inner-container\" *ngIf=\"selectedAddress == 'accountAddress' && deliveryAddresses.length > 0 \">\r\n                            <label *ngIf=\"!showMoreAddresses\" class=\"form-label\">Confirmed Delivery Address </label>\r\n\r\n                            <div *ngIf=\"!showMoreAddresses\" class=\"form-container\">\r\n                                <div class=\"map-selected-address\" id=\"address\" required #isAddrSelectedOrNot>\r\n                                    {{defaultAccountAddress?.formattedAddress}}</div>\r\n                            </div>\r\n                            <div *ngIf=\"showMoreAddresses\">\r\n                                <mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group radio-btn-size\">\r\n                                    <mat-radio-button class=\"py-1\" [checked]=\"selectedRecentAddress?.id == address.id\" *ngFor=\"let address of deliveryAddresses\" [value]=\"address.id\" (change)=\"selectedRecentAddress=address\">\r\n                                        {{address.formattedAddress}}\r\n                                    </mat-radio-button>\r\n                                </mat-radio-group>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"py-2 address-inner-container\" *ngIf=\"selectedAddress == 'recentAddress' && recentAddress.length > 0\">\r\n                            <mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group radio-btn-size\">\r\n                                <mat-radio-button class=\"py-1\" [checked]=\"selectedRecentAddress?.id == address.id\" *ngFor=\"let address of recentAddress \" [value]=\"address.id\" (change)=\"selectedRecentAddress=address\">\r\n                                    {{address.formattedAddress}}\r\n                                </mat-radio-button>\r\n                            </mat-radio-group>\r\n                        </div>\r\n                        <div *ngIf=\"selectedAddress == 'addNewAddress'\">\r\n                            <!-- Map Div -->\r\n                            <app-add-new-address [confirmedAddress]=\"confirmedNewAddress\" (updateNewAddress)=\"getNewAddress($event)\"></app-add-new-address>\r\n                        </div>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n                <mat-card-header class=\"line-step-navigation last-step\">\r\n                    <div class=\"card-title cus-title-margin-card\">\r\n                        <mat-card-title>\r\n                            <span class=\"card-number\"> 5 </span> {{isDeliveryBox ? 'Site Delivery Requirements': 'Comments '}}\r\n                            <span class=\"info-icon pl-2\" appTooltip tooltipTitle=\"{{isDeliveryBox ? siteDeliveryRequirements : clickandCollectComments}}\" placement=\"bottom\"></span>\r\n                        </mat-card-title>\r\n                    </div>\r\n                </mat-card-header>\r\n                <mat-card class=\"custom-mat-card line-step-navigation\">\r\n                    <mat-card-content>\r\n                        <textarea class=\"form-control\" [(ngModel)]=\"checkoutFormData.deliveryPickUpNotes\" rows=\"3\" name=\"Instructions\" id=\"Instructions\" [placeholder]=\"isDeliveryBox ? 'Provide any specific delivery instructions':'Provide any specific pickup instructions'\" maxlength=\"250\"></textarea>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n            </form>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"cart-page-footer\">\r\n    <div class=\"container\">\r\n        <div class=\"sticky-footer row\">\r\n            <div class=\"col-sm-12\">\r\n                <p class=\" float-md-right m-0 checkout-footer-btns\">\r\n                    <a title=\"Back to Cart\" href=\"/cart\" class=\"mr-3 font-weight-bold\">\r\n                        <img src=\"../../../../assets/images/ionic-arrow-back.svg\" alt=\"back-arrow\" class=\"mr-2\" /> BACK\r\n                    </a>\r\n                    <button type=\"button\" (click)=\"reviewOrder()\" class=\"btn primary-button\">Review And Order</button>\r\n                </p>\r\n            </div>\r\n            <div class=\" col-sm-12 alert alert-danger alert-danger-custom justify-content-start mt-3\" role=\"alert\" *ngIf=\"errorInd$ | async\">\r\n                <img class=\"mr-3\" src=\"../../../../assets/images/erroricon.svg\" alt=\"alert\"> {{infoMessage}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.ttf) format(\"ttf\"),url(/assets/fonts/icomoon.woff) format(\"woff\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Arial Regular;src:url(/assets/fonts/arial-webfont.woff) format(\"woff\"),url(/assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Arial Bold;src:url(/assets/fonts/Arial-BoldMT.eot);src:url(/assets/fonts/Arial-BoldMT.eot?#iefix) format(\"embedded-opentype\"),url(/assets/fonts/Arial-BoldMT.woff2) format(\"woff2\"),url(/assets/fonts/Arial-BoldMT.woff) format(\"woff\"),url(/assets/fonts/Arial-BoldMT.ttf) format(\"truetype\"),url(/assets/fonts/Arial-BoldMT.svg#Arial-BoldMT) format(\"svg\");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Arial Black;src:url(/assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(/assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Reqular;src:url(/assets/fonts/helveticaneue.woff) format(\"woff\"),url(/assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Thin;src:url(/assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(/assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue Medium;src:url(/assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(/assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(/assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(/assets/images/icon-flashing-black.svg)}.icon-ridge{position:relative;display:inline-block;height:32px;text-align:center;width:65px}.icon-ridge:before,.mainnav-link-level-2.show .navTagChild .icon-ridge:before{content:url(/projects/buildingproduct_library/assets/images/icon-ridge-white.svg);height:24px;width:65px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-ridge:before{content:url(/projects/buildingproduct_library/assets/images/icon-ridge-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:Arial Regular,sans-serif}header{background-color:#1d1d1b!important;background:#1d1d1b!important;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0rem}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:baseline;justify-content:space-between;padding-top:2px;padding-bottom:8px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0;font-weight:400}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:Arial Bold,sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:Helvetica Neue Regular,sans-serif;font-size:var(--fontsize54);color:#1d1d1b;padding-top:2rem}[aria-label=Close]{cursor:pointer}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828!important}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .miniCartStyle cx-paragraph{display:block!important}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:0;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:324px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:40px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px;z-index:7}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%;height:auto}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%;align-items:flex-start}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}.detail{font-weight:400;display:flex!important;align-items:center}.detail a{min-height:0px}.hamburger-inner{background-color:#fff!important}.hamburger-inner:before,.hamburger-inner:after{background-color:#fff!important}#navbarDropdownMenuLink{padding:.3rem 0rem}a{min-height:auto!important;min-width:auto}}.mb-120{margin-bottom:120px}::ng-deep .OrderCheckoutTemplate header{display:none!important}::ng-deep .OrderCheckoutTemplate .ngb-date-form .form-control.date-input{height:auto}::ng-deep .UserDetailCheckout{z-index:4}::ng-deep .UserDetailCheckout .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}::ng-deep cx-storefront.stop-navigating:before,::ng-deep cx-storefront.stop-navigating:after{height:0}.custom-arrow{position:absolute;right:15px;top:18px;z-index:1}.esri-view,#mapViewNode{padding:0;margin:0;height:100%;width:100%}::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#b61828!important}::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background:#b61828!important}::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__outer-circle{border-color:#b61828!important}::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:#d3d6db!important}::ng-deep ejs-timepicker .e-input-group{padding:8px}#dropdownMenu{margin-top:0!important;width:calc(100% - 30px);border:1px solid rgba(0,0,0,.15);background-color:#fff;font-size:var(--fontsize14);font-family:Arial,sans-serif}#dropdownMenu.show{display:block;width:100%}#dropdownBasic1{font-size:var(--fontsize14);font-family:Arial,sans-serif;text-align:left;background-color:#f6f6f6;border:1px solid #f1f1f1;color:#1d1d1b;box-shadow:none;border-radius:0;margin-right:30px;width:100%}#dropdownBasic1 .custom-arrow-down{float:right}.dropdown-toggle:after{display:none}.e-input-group.e-control-wrapper.e-time-wrapper.e-lib.e-keyboard.e-valid-input.e-non-edit{font-size:var(--fontsize16);margin-right:1rem}button.calendar,button.calendar:active{opacity:1;display:block;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"35\" height=\"22\" viewBox=\"0 0 35 22\">%0D%0A  <defs>%0D%0A    <clipPath id=\"clip-path\">%0D%0A      <path id=\"Mask\" d=\"M17.569,22H2.215a2.143,2.143,0,0,1-1.571-.644A2.147,2.147,0,0,1,0,19.785V4.431A2.147,2.147,0,0,1,.644,2.859a2.147,2.147,0,0,1,1.571-.644H3.3V0H5.513V2.215h8.759V0h2.215V2.215h1.082A2.2,2.2,0,0,1,19.784,4.43V19.785A2.2,2.2,0,0,1,17.569,22ZM2.215,7.728V19.785H17.569V7.728ZM15.4,17.621H9.893V12.108h5.513v5.513Z\" fill=\"%231d1d1b\"/>%0D%0A    </clipPath>%0D%0A  </defs>%0D%0A  <g id=\"Group_30\" data-name=\"Group 30\" transform=\"translate(-3093 1352)\">%0D%0A    <rect id=\"Rectangle_14\" data-name=\"Rectangle 14\" width=\"35\" height=\"22\" transform=\"translate(3093 -1352)\" fill=\"none\"/>%0D%0A    <g id=\"Group\" transform=\"translate(3093 -1352)\">%0D%0A      <path id=\"Mask-2\" data-name=\"Mask\" d=\"M17.569,22H2.215a2.143,2.143,0,0,1-1.571-.644A2.147,2.147,0,0,1,0,19.785V4.431A2.147,2.147,0,0,1,.644,2.859a2.147,2.147,0,0,1,1.571-.644H3.3V0H5.513V2.215h8.759V0h2.215V2.215h1.082A2.2,2.2,0,0,1,19.784,4.43V19.785A2.2,2.2,0,0,1,17.569,22ZM2.215,7.728V19.785H17.569V7.728ZM15.4,17.621H9.893V12.108h5.513v5.513Z\" fill=\"%231d1d1b\"/>%0D%0A      <g id=\"Group-2\" data-name=\"Group\" clip-path=\"url(%23clip-path)\">%0D%0A        <g id=\"_icon-color\" data-name=\"\\21b3\\1f3a8icon-color\" transform=\"translate(-49.463 -47.247)\">%0D%0A          <rect id=\"Icon-Shade\" width=\"118.71\" height=\"118.71\" fill=\"%231d1d1b\"/>%0D%0A        </g>%0D%0A      </g>%0D%0A    </g>%0D%0A  </g>%0D%0A</svg>%0D%0A') no-repeat;background-size:35px 22px;background-position:12px 12px;border-width:thin;align-items:center;position:relative;text-align:center;justify-content:center;padding:0;border-radius:0;border:1px solid #d3d6db;border-left-width:0px}.form-label{font-size:var(--fontsize16);font-family:Arial Bold,sans-serif}.mat-card:not([class*=mat-elevation-z]){padding:1.5rem}.delivery-box,.collect-box{border:1px solid #A6A6A5;border-radius:10px;opacity:1;align-items:center;justify-content:center;background-color:#eee3;display:inline-flex;padding:36px;height:160px;width:219px;cursor:pointer;position:relative}.delivery-box .delivery-img,.collect-box .delivery-img{width:6.25em;height:3.688em}.delivery-box .pickup-img,.collect-box .pickup-img{width:5em;height:5em}.delivery-box.active-box,.collect-box.active-box{background-color:#eee3;border:2px solid #B61828;opacity:1}.delivery-box .mat-checkbox.active-checkbox,.collect-box .mat-checkbox.active-checkbox{right:25px;position:absolute;top:10%}.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#b61828}.box-container .mat-card-title,.box-container .mat-mdc-card-title{text-align:center;font-family:Arial Bold,sans-serif;opacity:1;margin:0;font-size:var(--fontsize16)}.box-container .mat-card-title{margin:5px!important}.box-container .mat-card-subtitle{opacity:1;font-size:var(--fontsize16);margin-bottom:0;color:#1d1d1b}.marker{color:#973937;font-family:Arial Bold,sans-serif}.branch-container .mat-card-subtitle{margin-bottom:6px;font-size:var(--fontsize16);color:#1d1d1b}.branch-container .mat-card-subtitle .branch-hour-container span:not(.error-message):last-child{text-transform:uppercase}.branch-container .mat-card-title,.branch-container .mat-mdc-card-title{font-family:Arial Bold,sans-serif;margin-bottom:4px;font-size:var(--fontsize16)}.branch-container .branch-link{font-size:var(--fontsize18)}.branch-container .hour-label-left{width:15%;position:relative;display:inline-block}input[type=time]::-webkit-calendar-picker-indicator{background:none}.check-square-del,.check-square-cc{position:absolute;top:-1px;right:0}.selectdiv{position:relative}.selectdiv select{height:50px;width:100%;line-height:35px;border:1px solid #d3d6db;font-size:var(--fontsize16);color:#1d1d1b;padding-left:13px;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1}::ng-deep .OrderCheckoutTemplate .mat-card-header-text{margin:0!important}::ng-deep .OrderCheckoutTemplate mat-radio-button{padding-left:10px}::ng-deep .OrderCheckoutTemplate mat-radio-button .mat-radio-label{white-space:pre-line}::ng-deep .OrderCheckoutTemplate .card-number{background-color:#1d1d1b;border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-family:Arial Bold,sans-serif;margin-right:1rem}::ng-deep .OrderCheckoutTemplate .mat-card-content .mat-inner-container .mat-radio-label-content{font-family:Arial Bold,sans-serif;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .mat-card-content .mat-radio-label-content{font-family:Arial Regular,sans-serif;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .form-control{color:#1d1d1b;font-family:Arial Regular,sans-serif}::ng-deep .OrderCheckoutTemplate #Instructions{resize:none}::ng-deep .OrderCheckoutTemplate #Instructions::placeholder{font-family:Arial Regular,sans-serif;font-size:var(--fontsize16);color:#c6c6c6}::ng-deep .OrderCheckoutTemplate .info-icon{position:relative;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">%0D%0A  <path id=\"Icon_metro-info\" data-name=\"Icon metro-info\" d=\"M9.571,6.678a.752.752,0,0,1,.75-.75h.5a.752.752,0,0,1,.75.75v.5a.752.752,0,0,1-.75.75h-.5a.752.752,0,0,1-.75-.75Zm3,7.25h-4v-1h1v-3h-1v-1h3v4h1Zm-2-12a8,8,0,1,0,8,8,8,8,0,0,0-8-8Zm0,14.5a6.5,6.5,0,1,1,6.5-6.5A6.5,6.5,0,0,1,10.571,16.428Z\" transform=\"translate(-2.571 -1.928)\" fill=\"%23c6c6c6\"/>%0D%0A</svg>%0D%0A') no-repeat center;width:16px;height:16px;display:inline-block;top:1px;left:15px}::ng-deep .OrderCheckoutTemplate .cart-page-footer{background-color:#fff;border-top:1px solid #E0E0E0;padding:10px 0;position:fixed;bottom:0;left:0;right:0;width:100%;z-index:9;transition:transform .3s ease-in-out}::ng-deep .OrderCheckoutTemplate .error-message{color:#da1e28}::ng-deep .OrderCheckoutTemplate .example-radio-group .mat-radio-button{display:block}::ng-deep .OrderCheckoutTemplate .content-row{margin-bottom:3rem}::ng-deep .OrderCheckoutTemplate mat-card.line-step-navigation{box-shadow:none;border:1px solid #E0E0E0}::ng-deep .OrderCheckoutTemplate .card-container mat-card{box-shadow:none}::ng-deep .OrderCheckoutTemplate .line-step-navigation{position:relative}::ng-deep .OrderCheckoutTemplate .line-step-navigation:before{display:inline-block;content:\"\";position:absolute;top:0;left:-35px;width:10px;height:100%;border-left:2px dashed #C6C6C6}::ng-deep .OrderCheckoutTemplate .line-step-navigation:last-child:before{border-left:none}::ng-deep .OrderCheckoutTemplate .line-step-navigation .cus-title-margin-card{position:relative;left:-50px;margin-bottom:0}::ng-deep .OrderCheckoutTemplate .line-step-navigation.last-step:before{height:75%}::ng-deep .OrderCheckoutTemplate .line-step-navigation.first-step:before{height:75%;top:32%}::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-mdc-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-mdc-card-title{margin:1rem 0;font-size:1.5rem;display:inline-flex;align-items:center}::ng-deep .OrderCheckoutTemplate .map-selected-address{background-color:#e8e8e8;border:1px solid #d3d6db;padding:.75rem;align-self:flex-start;width:100%;min-height:50px;font-size:var(--fontsize16)}::ng-deep .OrderCheckoutTemplate .box-container{text-align:center}@media (max-width: 992px){::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group{display:inline-flex;flex-direction:row;align-items:flex-start}::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group .mat-radio-button .mat-radio-label,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group .mat-radio-button .mat-radio-label{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-radio-group .mat-radio-button .mat-radio-label .mat-radio-label-content,::ng-deep .OrderCheckoutTemplate .radio-btn-container .mat-mdc-radio-group .mat-radio-button .mat-radio-label .mat-radio-label-content{margin-top:5px}::ng-deep .OrderCheckoutTemplate .line-step-navigation{background:transparent;box-shadow:none!important;border:none!important}::ng-deep .OrderCheckoutTemplate .line-step-navigation:before{left:15px}::ng-deep .OrderCheckoutTemplate .line-step-navigation .cus-title-margin-card{left:0}::ng-deep .OrderCheckoutTemplate .card-container mat-card{background:transparent;box-shadow:none!important}::ng-deep .OrderCheckoutTemplate .checkout-footer-btns{display:flex;justify-content:space-around;align-items:center}::ng-deep .OrderCheckoutTemplate .mat-card:not([class*=mat-elevation-z]){padding:1rem .25rem 1rem 1.5rem}::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-card-header .card-title .mat-mdc-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-card-title,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-header .card-title .mat-mdc-card-title{font-size:1.25rem;align-items:center;margin:0}::ng-deep .OrderCheckoutTemplate .mat-card-content.box-container,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content.box-container{display:flex}::ng-deep .OrderCheckoutTemplate .mat-card-content mat-card .mat-card,::ng-deep .OrderCheckoutTemplate .mat-card-content mat-card .mat-mdc-card,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content mat-card .mat-card,::ng-deep .OrderCheckoutTemplate .mat-mdc-card-content mat-card .mat-mdc-card{align-items:center;justify-content:center}::ng-deep .OrderCheckoutTemplate .delivery-box,::ng-deep .OrderCheckoutTemplate .collect-box{height:102px;width:140px}::ng-deep .OrderCheckoutTemplate .box-container{text-align:left}::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text{padding-left:1rem}::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text .mat-card-title,::ng-deep .OrderCheckoutTemplate .box-container .delivery-heading-text .mat-mdc-card-title{text-align:left;margin-left:0!important}::ng-deep .OrderCheckoutTemplate .address-inner-container{padding-left:15px}::ng-deep .OrderCheckoutTemplate input#date::placeholder{color:#d3d6db}}::ng-deep .OrderCheckoutTemplate .mdc-radio{height:auto!important;width:auto}@media screen and (max-width: 576px){.mat-mdc-card-header{display:flex;padding:16px 0 0}.mat-mdc-card:not([class*=mat-elevation-z]){padding:0 0 0 .5rem}.card-number{flex-shrink:0}}@media screen and (min-width: 1024px){.mat-mdc-card-header{padding:0}}\n"] }]
         }], ctorParameters: () => [{ type: CustomCheckoutService }, { type: i1.CmsService }, { type: i0.ChangeDetectorRef }, { type: i3$2.NgbCalendar }, { type: i3$3.ActiveCartService }], propDecorators: { checkoutForm: [{
                 type: ViewChild,
                 args: ['checkoutForm']