buildingproduct-library 2.0.53 → 2.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/{buildingproduct-library-2.0.53.tgz → buildingproduct-library-2.0.54.tgz} +0 -0
  2. package/esm2022/lib/checkout/custom-checkout/custom-checkout.component.mjs +2 -2
  3. package/esm2022/lib/custom-mini-cart/custom-mini-cart.component.mjs +3 -3
  4. package/esm2022/lib/custom-saved-cart/custom-saved-cart.component.mjs +7 -3
  5. package/esm2022/lib/my-team/my-team.component.mjs +2 -2
  6. package/fesm2022/buildingproduct-library.mjs +12 -8
  7. package/fesm2022/buildingproduct-library.mjs.map +1 -1
  8. package/lib/custom-saved-cart/custom-saved-cart.component.d.ts +1 -0
  9. package/package.json +1 -1
package/esm2022/lib/checkout/custom-checkout/custom-checkout.component.mjs CHANGED
@@ -395,11 +395,11 @@ export class CustomCheckoutComponent {
395
395
  this.getDetailResponse();
396
396
  }
397
397
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomCheckoutComponent, deps: [{ token: i1.CustomCheckoutService }, { token: i2.CmsService }, { token: i0.ChangeDetectorRef }, { token: i3.NgbCalendar }, { token: i4.ActiveCartService }], target: i0.ɵɵFactoryTarget.Component }); }
398
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomCheckoutComponent, 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\" (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:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}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 .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 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}}@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}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.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: i10.CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { kind: "directive", type: i3.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i3.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i3.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: i11.TooltipDirective, selector: "[appTooltip]", inputs: ["tooltipTitle", "placement"] }, { kind: "component", type: i12.AddNewAddressComponent, selector: "app-add-new-address", inputs: ["confirmedAddress"], outputs: ["updateNewAddress"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
398
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomCheckoutComponent, 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\" (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:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}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 .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 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}}@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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.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: i10.CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { kind: "directive", type: i3.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i3.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i3.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: i11.TooltipDirective, selector: "[appTooltip]", inputs: ["tooltipTitle", "placement"] }, { kind: "component", type: i12.AddNewAddressComponent, selector: "app-add-new-address", inputs: ["confirmedAddress"], outputs: ["updateNewAddress"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
399
399
  }
400
400
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomCheckoutComponent, decorators: [{
401
401
  type: Component,
402
- args: [{ selector: 'app-custom-checkout', 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\" (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:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}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 .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 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}}@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}}\n"] }]
402
+ args: [{ selector: 'app-custom-checkout', 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\" (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:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}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 .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 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}}@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"] }]
403
403
  }], ctorParameters: () => [{ type: i1.CustomCheckoutService }, { type: i2.CmsService }, { type: i0.ChangeDetectorRef }, { type: i3.NgbCalendar }, { type: i4.ActiveCartService }], propDecorators: { checkoutForm: [{
404
404
  type: ViewChild,
405
405
  args: ['checkoutForm']