1<!DOCTYPE html><html lang="en" data-beasties-container><head> 2 <meta charset="utf-8"> 3 <title>Start your Smart Save journey | LookSee</title> 4 <base href="/"> 5 <meta content="width=device-width, initial-scale=1" name="viewport"> 6 <link href="static/looksee/assets/images/favicon.ico" rel="icon" type="image/x-icon"> 7 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> 8 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 9 <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"> 10 11 <link crossorigin href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w=="> 12
12<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
12 13 <link href="https://unpkg.com/[email protected]/dist/search.css" rel="stylesheet"> 14 15
15<script src="https://unpkg.com/[email protected]/dist/search.umd.js"></script>
15 16
16<script src="https://unpkg.com/leaflet.gridlayer.googlemutant@latest/dist/Leaflet.GoogleMutant.js"></script>
16 17 18 <!-- Riskscape Map JS --> 19
19<script src="https://unpkg.com/[email protected]/dist/map.umd.js"></script>
19 20
20<script> 21 const deviceCheck = /Mobile/i.test(navigator.userAgent) 22 ? "Mobile" 23 : "Desktop"; 24 window.dataLayer = { 25 ecommerce: { 26 purchaseID: "", 27 state: "", 28 product: [ 29 { 30 category: "", 31 quantity: "", 32 price: "", 33 sku: "", 34 currencyCode: "", 35 }, 36 ], 37 }, 38 search: { 39 filter: "", 40 }, 41 numSearchResults: "", 42 searchTerm: "", 43 loginStatus: "", 44 userLoginSuccess: "", 45 userRegistrationSuccess: "", 46 userID: "", 47 deviceType: deviceCheck, 48 formisSubmitted: false, 49 formName: "", 50 formStatus: "", 51 leadStatus: "", 52 leadID: "", 53 application: { 54 applicationProduct: "", 55 applicationMethod: "", 56 applicationID: "", 57 applicationName: "", 58 applicationStep: "", 59 applicationStart: false, 60 applicationComplete: false, 61 }, 62 userInteraction: "", 63 interactionIntent: "", 64 siteBusinessUnit: "PBBSA", 65 siteErrorCode: "", 66 siteCountry: "South Africa", 67 siteLanguage: "English", 68 websiteName: "LookSee", 69 websiteNameCode: "LS", 70 pageCategory: "", 71 pageName: "", 72 pageSubSection1: "", 73 pageSubSection2: "", 74 pageSubSection3: "", 75 pageSubSection4: "", 76 }; 77 </script>
77 78 <link rel="stylesheet" href="/static/looksee/styles-BJSB3KWH.css"><style ng-app-id="ng"> 79nav[_ngcontent-ng-c2751292306] { 80 display: flex; 81 align-items: center; 82} 83.nav-tab[_ngcontent-ng-c2751292306] { 84 background-color: inherit; 85 cursor: pointer; 86 margin: 0 2%; 87} 88.mat-typography[_ngcontent-ng-c2751292306] p[_ngcontent-ng-c2751292306] { 89 margin: 0; 90} 91.mat-body-1[_ngcontent-ng-c2751292306] { 92 margin: 0; 93} 94.top-container[_ngcontent-ng-c2751292306] { 95 height: 45px; 96} 97.contact-us[_ngcontent-ng-c2751292306] { 98 color: var(--medium-grey); 99} 100.contact-us[_ngcontent-ng-c2751292306]:hover { 101 text-decoration: underline; 102} 103.top-navbar[_ngcontent-ng-c2751292306] { 104 align-items: center; 105 background: var(--looksee-dark-blue); 106 color: #ffffff; 107 display: flex; 108 height: 45px; 109 justify-content: center; 110 width: 75px; 111 font-size: 13px; 112} 113.navbar[_ngcontent-ng-c2751292306] { 114 background: var(--nav-gradient); 115 color: white; 116 height: 85px; 117} 118@media screen and (max-width: 640px) { 119 .navbar[_ngcontent-ng-c2751292306] { 120 padding-left: 3%; 121 height: 65px; 122 } 123} 124.container[_ngcontent-ng-c2751292306] { 125 align-items: center; 126 display: flex; 127 flex-grow: 1; 128} 129.container[_ngcontent-ng-c2751292306] a[_ngcontent-ng-c2751292306] { 130 color: white; 131 text-decoration: none; 132} 133.container[_ngcontent-ng-c2751292306] .spacer[_ngcontent-ng-c2751292306] { 134 flex-grow: 1; 135} 136.mat-mdc-menu-panel[_ngcontent-ng-c2751292306] { 137 border-radius: 0 !important; 138 box-shadow: none !important; 139 height: 60vh !important; 140 left: 0 !important; 141 margin-top: 2% !important; 142 max-width: 100% !important; 143 overflow: hidden !important; 144 position: fixed !important; 145 width: 100%; 146 z-index: 1000 !important; 147} 148.mat-mdc-menu-content[_ngcontent-ng-c2751292306] { 149 padding-left: 120px !important; 150} 151.login-icon[_ngcontent-ng-c2751292306] { 152 margin-right: 3%; 153 padding-right: 2%; 154} 155.logo[_ngcontent-ng-c2751292306] { 156 width: 200px; 157} 158@media screen and (max-width: 960px) { 159 .logo[_ngcontent-ng-c2751292306] { 160 width: 100px; 161 } 162} 163.icon-display[_ngcontent-ng-c2751292306] { 164 color: white; 165 transform: scale(1.5); 166 font-weight: normal; 167} 168.mobile-nav[_ngcontent-ng-c2751292306] .mobile-menu-content[_ngcontent-ng-c2751292306] { 169 height: 91%; 170 left: 0; 171 width: 100%; 172 z-index: 1000; 173 top: 60px; 174 background-color: white; 175 max-width: 100%; 176 overflow: scroll; 177 position: fixed; 178} 179.drop-btn[_ngcontent-ng-c2751292306] { 180 border: none; 181 cursor: pointer; 182 font-size: 16px; 183} 184.nav-item[_ngcontent-ng-c2751292306] { 185 cursor: pointer; 186 height: 85px; 187} 188.nav-item[_ngcontent-ng-c2751292306]:hover { 189 border-bottom: white solid 4px; 190} 191.dropdown[_ngcontent-ng-c2751292306] { 192 position: relative; 193} 194.dropdown-content[_ngcontent-ng-c2751292306] { 195 background-color: white; 196 border-color: var(--border-grey); 197 border-radius: 0; 198 border-width: 1px; 199 box-shadow: none; 200 left: 0; 201 max-width: 100%; 202 overflow: scroll; 203 position: fixed; 204 width: 100%; 205 z-index: 1000; 206 -ms-overflow-style: none; 207 scrollbar-width: none; 208} 209.dropdown-content[_ngcontent-ng-c2751292306]::-webkit-scrollbar {
210 display: none; 211} 212.category-panel[_ngcontent-ng-c2751292306] { 213 background-color: var(--background-grey); 214} 215.category-panel[_ngcontent-ng-c2751292306] a[_ngcontent-ng-c2751292306] { 216 color: black; 217 text-decoration: none; 218} 219.category-panel-container[_ngcontent-ng-c2751292306] { 220 border-bottom-left-radius: 12px; 221 border-top-left-radius: 12px; 222 cursor: pointer; 223 height: 80px; 224 margin: 0; 225 padding: 17px 20px 17px 120px; 226 width: 290px; 227 background-color: var(--background-grey); 228} 229.category-panel-container[_ngcontent-ng-c2751292306]:hover { 230 background-color: white; 231} 232.selected[_ngcontent-ng-c2751292306] { 233 background-color: white; 234} 235.product-panel[_ngcontent-ng-c2751292306] { 236 color: black; 237 padding: 40px 0 0 80px; 238} 239.product-panel[_ngcontent-ng-c2751292306] a[_ngcontent-ng-c2751292306] { 240 color: var(--primary-blue); 241 padding: 5px 0; 242 width: 100%; 243} 244.view-all[_ngcontent-ng-c2751292306] { 245 color: var(--primary-blue); 246} 247.view-all[_ngcontent-ng-c2751292306] a[_ngcontent-ng-c2751292306] { 248 font-size: 16px; 249 font-weight: 500; 250 margin: 0; 251 padding-top: 10px; 252 width: fit-content; 253} 254ul[_ngcontent-ng-c2751292306] li[_ngcontent-ng-c2751292306] { 255 margin-left: 23px; 256} 257ul[_ngcontent-ng-c2751292306] li[_ngcontent-ng-c2751292306]::before { 258 border-color: transparent transparent var(--primary-blue); 259 border-style: solid; 260 border-width: 0 5px 8px 5px; 261 content: ""; 262 display: block; 263 height: 0; 264 left: -23px; 265 position: relative; 266 top: 12px; 267 width: 0; 268} 269.sub-nav[_ngcontent-ng-c2751292306] { 270 background-color: var(--solid-dark-blue); 271 height: 50px; 272} 273.mobile-menu-content[_ngcontent-ng-c2751292306] .login[_ngcontent-ng-c2751292306] { 274 background-color: var(--sign-in-blue); 275 width: 80px; 276 height: inherit; 277 padding-left: 5%; 278} 279.mobile-menu-content[_ngcontent-ng-c2751292306] .menu-item[_ngcontent-ng-c2751292306] { 280 min-height: 50px; 281 border-bottom: 1px solid rgba(133, 141, 157, 0.25); 282 display: flex; 283 flex-direction: row; 284 justify-content: flex-start; 285 align-items: center; 286} 287.mobile-menu-content[_ngcontent-ng-c2751292306] .menu-item[_ngcontent-ng-c2751292306] a[_ngcontent-ng-c2751292306] { 288 position: relative; 289 display: inline-block; 290 top: 0; 291 color: var(--solid-dark-blue); 292 flex-grow: 1; 293 padding-top: 10px; 294 padding-bottom: 10px; 295} 296.bold[_ngcontent-ng-c2751292306] { 297 font-weight: 800; 298} 299.mobile-menu-content[_ngcontent-ng-c2751292306] .menu-item[_ngcontent-ng-c2751292306] .product[_ngcontent-ng-c2751292306] { 300 font-size: 14px; 301 font-weight: 600; 302 text-transform: capitalize; 303} 304.dropdown-nav[_ngcontent-ng-c2751292306] { 305 font-weight: normal; 306} 307.chev-left[_ngcontent-ng-c2751292306] { 308 transform: rotate(180deg); 309} 310.chev-up[_ngcontent-ng-c2751292306] { 311 transform: rotate(-90deg); 312} 313.fix-top[_ngcontent-ng-c2751292306] { 314 display: flex; 315 flex-direction: column; 316 position: fixed; 317 z-index: 2; 318 width: 100%; 319 background-color: white; 320}</style><style ng-app-id="ng"> 321.first-half-footer[_ngcontent-ng-c3447975459] { 322 background: 323 linear-gradient( 324 113deg, 325 #03a 3.64%, 326 #0062e1 95.93%); 327 color: white; 328} 329.mat-headline-5[_ngcontent-ng-c3447975459] { 330 padding-bottom: 15px; 331} 332a.mat-body-1[_ngcontent-ng-c3447975459] { 333 color: var(--primary-blue); 334 font-style: normal; 335 font-weight: 700; 336 line-height: 16px; 337 text-decoration: none; 338 display: flex; 339 align-items: center; 340 font-size: 14px; 341} 342.grid-item[_ngcontent-ng-c3447975459] { 343 overflow-wrap: anywhere; 344} 345.mat-toolbar[_ngcontent-ng-c3447975459] { 346 bottom: 0; 347 height: fit-content; 348 width: 100%; 349 padding-top: 5%; 350 background-color: var(--background-grey); 351}</style><style ng-app-id="ng">mat-menu { 352 display: none; 353} 354 355.mat-mdc-menu-content { 356 margin: 0; 357 padding: 8px 0; 358 outline: 0; 359} 360.mat-mdc-menu-content, 361.mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text { 362 -moz-osx-font-smoothing: grayscale; 363 -webkit-font-smoothing: antialiased; 364 flex: 1; 365 white-space: normal; 366 font-family: var(--mat-menu-item-label-text-font, var(--mat-sys-label-large-font)); 367 line-height: var(--mat-menu-item-label-text-line-height, var(--mat-sys-label-large-line-height)); 368 font-size: var(--mat-menu-item-label-text-size, var(--mat-sys-label-large-size)); 369 letter-spacing: var(--mat-menu-item-label-text-tracking, var(--mat-sys-label-large-tracking)); 370 font-weight: var(--mat-menu-item-label-text-weight, var(--mat-sys-label-large-weight)); 371} 372 373@keyframes _mat-menu-enter { 374 from { 375 opacity: 0; 376 transform: scale(0.8); 377 } 378 to { 379 opacity: 1; 380 transform: none; 381 } 382} 383@keyframes _mat-menu-exit { 384 from { 385 opacity: 1; 386 } 387 to { 388 opacity: 0; 389 } 390} 391.mat-mdc-menu-panel { 392 min-width: 112px; 393 max-width: 280px; 394 overflow: auto; 395 box-sizing: border-box; 396 outline: 0; 397 animation: _mat-menu-enter 120ms cubic-bezier(0, 0, 0.2, 1); 398 border-radius: var(--mat-menu-container-shape, var(--mat-sys-corner-extra-small)); 399 background-color: var(--mat-menu-container-color, var(--mat-sys-surface-container)); 400 box-shadow: var(--mat-menu-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)); 401 will-change: transform, opacity; 402} 403.mat-mdc-menu-panel.mat-menu-panel-exit-animation { 404 animation: _mat-menu-exit 100ms 25ms linear forwards; 405} 406.mat-mdc-menu-panel.mat-menu-panel-animations-disabled { 407 animation: none; 408} 409.mat-mdc-menu-panel.mat-menu-panel-animating { 410 pointer-events: none; 411} 412.mat-mdc-menu-panel.mat-menu-panel-animating:has(.mat-mdc-menu-content:empty) { 413 display: none; 414} 415@media (forced-colors: active) { 416 .mat-mdc-menu-panel { 417 outline: solid 1px; 418 } 419} 420.mat-mdc-menu-panel .mat-divider { 421 border-top-color: var(--mat-menu-divider-color, var(--mat-sys-surface-variant));
422 margin-bottom: var(--mat-menu-divider-bottom-spacing, 8px); 423 margin-top: var(--mat-menu-divider-top-spacing, 8px); 424} 425 426.mat-mdc-menu-item { 427 display: flex; 428 position: relative; 429 align-items: center; 430 justify-content: flex-start; 431 overflow: hidden; 432 padding: 0; 433 cursor: pointer; 434 width: 100%; 435 text-align: left; 436 box-sizing: border-box; 437 color: inherit; 438 font-size: inherit; 439 background: none; 440 text-decoration: none; 441 margin: 0; 442 min-height: 48px; 443 padding-left: var(--mat-menu-item-leading-spacing, 12px); 444 padding-right: var(--mat-menu-item-trailing-spacing, 12px); 445 -webkit-user-select: none; 446 user-select: none; 447 cursor: pointer; 448 outline: none; 449 border: none; 450 -webkit-tap-highlight-color: transparent; 451} 452.mat-mdc-menu-item::-moz-focus-inner { 453 border: 0; 454} 455[dir=rtl] .mat-mdc-menu-item { 456 padding-left: var(--mat-menu-item-trailing-spacing, 12px); 457 padding-right: var(--mat-menu-item-leading-spacing, 12px); 458} 459.mat-mdc-menu-item:has(.material-icons, mat-icon, [matButtonIcon]) { 460 padding-left: var(--mat-menu-item-with-icon-leading-spacing, 12px); 461 padding-right: var(--mat-menu-item-with-icon-trailing-spacing, 12px); 462} 463[dir=rtl] .mat-mdc-menu-item:has(.material-icons, mat-icon, [matButtonIcon]) { 464 padding-left: var(--mat-menu-item-with-icon-trailing-spacing, 12px); 465 padding-right: var(--mat-menu-item-with-icon-leading-spacing, 12px); 466} 467.mat-mdc-menu-item, .mat-mdc-menu-item:visited, .mat-mdc-menu-item:link { 468 color: var(--mat-menu-item-label-text-color, var(--mat-sys-on-surface)); 469} 470.mat-mdc-menu-item .mat-icon-no-color, 471.mat-mdc-menu-item .mat-mdc-menu-submenu-icon { 472 color: var(--mat-menu-item-icon-color, var(--mat-sys-on-surface-variant)); 473} 474.mat-mdc-menu-item[disabled] { 475 cursor: default; 476 opacity: 0.38; 477} 478.mat-mdc-menu-item[disabled]::after { 479 display: block; 480 position: absolute; 481 content: ""; 482 top: 0; 483 left: 0; 484 bottom: 0; 485 right: 0; 486} 487.mat-mdc-menu-item:focus { 488 outline: 0; 489} 490.mat-mdc-menu-item .mat-icon { 491 flex-shrink: 0; 492 margin-right: var(--mat-menu-item-spacing, 12px); 493 height: var(--mat-menu-item-icon-size, 24px); 494 width: var(--mat-menu-item-icon-size, 24px); 495} 496[dir=rtl] .mat-mdc-menu-item { 497 text-align: right; 498} 499[dir=rtl] .mat-mdc-menu-item .mat-icon { 500 margin-right: 0; 501 margin-left: var(--mat-menu-item-spacing, 12px); 502} 503.mat-mdc-menu-item:not([disabled]):hover { 504 background-color: var(--mat-menu-item-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent)); 505} 506.mat-mdc-menu-item:not([disabled]).cdk-program-focused, .mat-mdc-menu-item:not([disabled]).cdk-keyboard-focused, .mat-mdc-menu-item:not([disabled]).mat-mdc-menu-item-highlighted { 507 background-color: var(--mat-menu-item-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent)); 508} 509@media (forced-colors: active) { 510 .mat-mdc-menu-item {
511 margin-top: 1px; 512 } 513} 514 515.mat-mdc-menu-submenu-icon { 516 width: var(--mat-menu-item-icon-size, 24px); 517 height: 10px; 518 fill: currentColor; 519 padding-left: var(--mat-menu-item-spacing, 12px); 520} 521[dir=rtl] .mat-mdc-menu-submenu-icon { 522 padding-right: var(--mat-menu-item-spacing, 12px); 523 padding-left: 0; 524} 525[dir=rtl] .mat-mdc-menu-submenu-icon polygon { 526 transform: scaleX(-1); 527 transform-origin: center; 528} 529@media (forced-colors: active) { 530 .mat-mdc-menu-submenu-icon { 531 fill: CanvasText; 532 } 533} 534 535.mat-mdc-menu-item .mat-mdc-menu-ripple { 536 top: 0; 537 left: 0; 538 right: 0; 539 bottom: 0; 540 position: absolute; 541 pointer-events: none; 542} 543</style><style ng-app-id="ng">.mat-focus-indicator { 544 position: relative; 545} 546.mat-focus-indicator::before { 547 top: 0; 548 left: 0; 549 right: 0; 550 bottom: 0; 551 position: absolute; 552 box-sizing: border-box; 553 pointer-events: none; 554 display: var(--mat-focus-indicator-display, none); 555 border-width: var(--mat-focus-indicator-border-width, 3px); 556 border-style: var(--mat-focus-indicator-border-style, solid); 557 border-color: var(--mat-focus-indicator-border-color, transparent); 558 border-radius: var(--mat-focus-indicator-border-radius, 4px); 559} 560.mat-focus-indicator:focus-visible::before { 561 content: ""; 562} 563 564@media (forced-colors: active) { 565 html { 566 --mat-focus-indicator-display: block; 567 } 568} 569</style><style ng-app-id="ng">.mat-ripple { 570 overflow: hidden; 571 position: relative; 572} 573.mat-ripple:not(:empty) { 574 transform: translateZ(0); 575} 576 577.mat-ripple.mat-ripple-unbounded { 578 overflow: visible; 579} 580 581.mat-ripple-element { 582 position: absolute; 583 border-radius: 50%; 584 pointer-events: none; 585 transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1); 586 transform: scale3d(0, 0, 0); 587 background-color: var(--mat-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent)); 588} 589@media (forced-colors: active) { 590 .mat-ripple-element { 591 display: none; 592 } 593} 594.cdk-drag-preview .mat-ripple-element, .cdk-drag-placeholder .mat-ripple-element { 595 display: none; 596} 597</style><style ng-app-id="ng">mat-icon, mat-icon.mat-primary, mat-icon.mat-accent, mat-icon.mat-warn { 598 color: var(--mat-icon-color, inherit); 599} 600 601.mat-icon { 602 -webkit-user-select: none; 603 user-select: none; 604 background-repeat: no-repeat; 605 display: inline-block; 606 fill: currentColor; 607 height: 24px; 608 width: 24px; 609 overflow: hidden; 610} 611.mat-icon.mat-icon-inline { 612 font-size: inherit; 613 height: inherit; 614 line-height: inherit; 615 width: inherit; 616} 617.mat-icon.mat-ligature-font[fontIcon]::before { 618 content: attr(fontIcon); 619} 620 621[dir=rtl] .mat-icon-rtl-mirror { 622 transform: scale(-1, 1); 623} 624 625.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon, 626.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon { 627 display: block; 628} 629.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon, 630.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon { 631 margin: auto; 632} 633</style>
633<script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-domain-script="d8eb6dc9-3db1-4ea8-8889-e21d7060ae2a" data-dlayer-name="gtmDataLayer"></script>
633<script src="//assets.adobedtm.com/45b28ee1a4af/48ef7a1324af/launch-8e5a9575c141.min.js" async></script>
633<style ng-app-id="ng"> 634.page-container[_ngcontent-ng-c4258730666] { 635 background-color: var(--background-grey); 636}</style><style ng-app-id="ng"> 637.breadcrumb[_ngcontent-ng-c3810003537] { 638 display: flex; 639 list-style-type: none; 640 padding-left: 0; 641 margin-left: 0; 642} 643.breadcrumb[_ngcontent-ng-c3810003537] a[_ngcontent-ng-c3810003537] { 644 color: var(--primary-blue); 645} 646.breadcrumb[_ngcontent-ng-c3810003537] li[_ngcontent-ng-c3810003537] { 647 margin-right: 8px; 648 text-decoration: none; 649} 650.breadcrumb[_ngcontent-ng-c3810003537] img[_ngcontent-ng-c3810003537] { 651 margin-left: 8px; 652}</style><style ng-app-id="ng">/* src/app/pages/smart-save/smart-save-home-page/smart-save-home-page.component.scss */ 653.mat-horizontal-content-container { 654 display: none !important; 655} 656</style><meta name="description" content="Get started on your Smart Save journey. Enter your home address and see how you can start saving money on your monthly electricity costs."><style ng-app-id="ng"> 657#search-plugin[_ngcontent-ng-c728828513] { 658 width: 100%; 659} 660#map-plugin[_ngcontent-ng-c728828513] { 661 z-index: 1; 662} 663h2[_ngcontent-ng-c728828513] { 664 font-weight: 700; 665 font-size: 1.5rem; 666 line-height: 2rem; 667 color: var(--medium-grey); 668} 669.rounded-lg[_ngcontent-ng-c728828513] { 670 border: 1px solid var(--border-grey); 671 height: 40px; 672 width: 100% !important; 673}</style><style ng-app-id="ng">.cdk-visually-hidden { 674 border: 0; 675 clip: rect(0 0 0 0); 676 height: 1px; 677 margin: -1px; 678 overflow: hidden; 679 padding: 0; 680 position: absolute; 681 width: 1px; 682 white-space: nowrap; 683 outline: 0; 684 -webkit-appearance: none; 685 -moz-appearance: none; 686 left: 0; 687} 688[dir=rtl] .cdk-visually-hidden { 689 left: auto; 690 right: 0; 691} 692</style><style ng-app-id="ng">.mat-stepper-vertical, 693.mat-stepper-horizontal { 694 display: block; 695 font-family: var(--mat-stepper-container-text-font, var(--mat-sys-body-medium-font)); 696 background: var(--mat-stepper-container-color, var(--mat-sys-surface)); 697} 698 699.mat-horizontal-stepper-header-wrapper { 700 align-items: center; 701 display: flex; 702} 703 704.mat-horizontal-stepper-header-container { 705 white-space: nowrap; 706 display: flex; 707 align-items: center; 708 flex-grow: 1; 709} 710.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container { 711 align-items: flex-start; 712} 713.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container { 714 order: 1; 715} 716 717.mat-stepper-horizontal-line { 718 border-top-width: 1px; 719 border-top-style: solid; 720 flex: auto; 721 height: 0; 722 margin: 0 -16px; 723 min-width: 32px; 724 border-top-color: var(--mat-stepper-line-color, var(--mat-sys-outline)); 725} 726.mat-stepper-label-position-bottom .mat-stepper-horizontal-line { 727 margin: 0; 728 min-width: 0; 729 position: relative; 730 top: calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px); 731} 732 733.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after { 734 border-top-width: 1px; 735 border-top-style: solid; 736 content: ""; 737 display: inline-block; 738 height: 0; 739 position: absolute; 740 width: calc(50% - 20px); 741} 742 743.mat-horizontal-stepper-header { 744 display: flex; 745 overflow: hidden; 746 align-items: center; 747 padding: 0 24px; 748 height: var(--mat-stepper-header-height, 72px); 749} 750.mat-horizontal-stepper-header .mat-step-icon { 751 margin-right: 8px; 752 flex: none; 753} 754[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon { 755 margin-right: 0; 756 margin-left: 8px; 757} 758.mat-horizontal-stepper-header.mat-step-header-empty-label .mat-step-icon { 759 margin: 0; 760} 761.mat-horizontal-stepper-header::before, .mat-horizontal-stepper-header::after { 762 border-top-color: var(--mat-stepper-line-color, var(--mat-sys-outline)); 763} 764.mat-stepper-label-position-bottom .mat-horizontal-stepper-header { 765 padding: calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px; 766} 767.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after { 768 top: calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px); 769} 770.mat-stepper-label-position-bottom .mat-horizontal-stepper-header { 771 box-sizing: border-box; 772 flex-direction: column; 773 height: auto; 774} 775.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after { 776 right: 0; 777} 778.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before { 779 left: 0; 780} 781[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after { 782 display: none; 783} 784.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon { 785 margin-right: 0; 786 margin-left: 0; 787} 788.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label { 789 padding: 16px 0 0 0; 790 text-align: center; 791 width: 100%; 792} 793 794.mat-vertical-stepper-header { 795 display: flex; 796 align-items: center; 797 height: 24px; 798 padding: calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px; 799} 800.mat-vertical-stepper-header .mat-step-icon { 801 margin-right: 12px; 802} 803[dir=rtl] .mat-vertical-stepper-header .mat-step-icon { 804 margin-right: 0; 805 margin-left: 12px; 806} 807 808.mat-horizontal-stepper-wrapper { 809 display: flex; 810 flex-direction: column; 811} 812 813.mat-horizontal-stepper-content { 814 visibility: hidden; 815 overflow: hidden; 816 outline: 0; 817 height: 0; 818} 819.mat-stepper-animations-enabled .mat-horizontal-stepper-content { 820 transition: transform var(--mat-stepper-animation-duration, 0) cubic-bezier(0.35, 0, 0.25, 1); 821} 822.mat-horizontal-stepper-content.mat-horizontal-stepper-content-previous { 823 transform: translate3d(-100%, 0, 0); 824} 825.mat-horizontal-stepper-content.mat-horizontal-stepper-content-next { 826 transform: translate3d(100%, 0, 0); 827} 828.mat-horizontal-stepper-content.mat-horizontal-stepper-content-current { 829 visibility: visible; 830 transform: none; 831 height: auto; 832} 833.mat-stepper-horizontal:not(.mat-stepper-animating) .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current { 834 overflow: visible; 835} 836 837.mat-horizontal-content-container { 838 overflow: hidden; 839 padding: 0 24px 24px 24px; 840} 841@media (forced-colors: active) { 842 .mat-horizontal-content-container { 843 outline: solid 1px; 844 } 845} 846.mat-stepper-header-position-bottom .mat-horizontal-content-container { 847 padding: 24px 24px 0 24px; 848} 849 850.mat-vertical-content-container { 851 display: grid; 852 grid-template-rows: 0fr; 853 grid-template-columns: 100%; 854 margin-left: 36px; 855 border: 0; 856 position: relative; 857} 858.mat-stepper-animations-enabled .mat-vertical-content-container { 859 transition: grid-template-rows var(--mat-stepper-animation-duration, 0) cubic-bezier(0.4, 0, 0.2, 1); 860} 861.mat-vertical-content-container.mat-vertical-content-container-active { 862 grid-template-rows: 1fr; 863} 864.mat-step:last-child .mat-vertical-content-container { 865 border: none; 866} 867@media (forced-colors: active) { 868 .mat-vertical-content-container { 869 outline: solid 1px; 870 } 871} 872[dir=rtl] .mat-vertical-content-container { 873 margin-left: 0; 874 margin-right: 36px; 875} 876@supports not (grid-template-rows: 0fr) { 877 .mat-vertical-content-container { 878 height: 0; 879 } 880 .mat-vertical-content-container.mat-vertical-content-container-active { 881 height: auto; 882 } 883} 884 885.mat-stepper-vertical-line::before { 886 content: ""; 887 position: absolute; 888 left: 0; 889 border-left-width: 1px; 890 border-left-style: solid; 891 border-left-color: var(--mat-stepper-line-color, var(--mat-sys-outline)); 892 top: calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2)); 893 bottom: calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2)); 894} 895[dir=rtl] .mat-stepper-vertical-line::before { 896 left: auto; 897 right: 0; 898} 899 900.mat-vertical-stepper-content { 901 overflow: hidden; 902 outline: 0; 903 visibility: hidden; 904} 905.mat-stepper-animations-enabled .mat-vertical-stepper-content { 906 transition: visibility var(--mat-stepper-animation-duration, 0) linear; 907} 908.mat-vertical-content-container-active > .mat-vertical-stepper-content { 909 visibility: visible; 910} 911 912.mat-vertical-content { 913 padding: 0 24px 24px 24px; 914} 915</style><style ng-app-id="ng">.mat-step-header { 916 overflow: hidden; 917 outline: none; 918 cursor: pointer; 919 position: relative; 920 box-sizing: content-box; 921 -webkit-tap-highlight-color: transparent; 922} 923.mat-step-header:focus-visible .mat-focus-indicator::before { 924 content: ""; 925} 926.mat-step-header:hover[aria-disabled=true] { 927 cursor: default; 928} 929.mat-step-header:hover:not([aria-disabled]), .mat-step-header:hover[aria-disabled=false] { 930 background-color: var(--mat-stepper-header-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent)); 931 border-radius: var(--mat-stepper-header-hover-state-layer-shape, var(--mat-sys-corner-medium)); 932} 933.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused { 934 background-color: var(--mat-stepper-header-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent)); 935 border-radius: var(--mat-stepper-header-focus-state-layer-shape, var(--mat-sys-corner-medium)); 936} 937@media (hover: none) { 938 .mat-step-header:hover { 939 background: none; 940 } 941} 942@media (forced-colors: active) { 943 .mat-step-header { 944 outline: solid 1px; 945 } 946 .mat-step-header[aria-selected=true] .mat-step-label { 947 text-decoration: underline; 948 } 949 .mat-step-header[aria-disabled=true] { 950 outline-color: GrayText; 951 } 952 .mat-step-header[aria-disabled=true] .mat-step-label, 953 .mat-step-header[aria-disabled=true] .mat-step-icon, 954 .mat-step-header[aria-disabled=true] .mat-step-optional { 955 color: GrayText; 956 } 957} 958 959.mat-step-optional { 960 font-size: 12px; 961 color: var(--mat-stepper-header-optional-label-text-color, var(--mat-sys-on-surface-variant)); 962} 963 964.mat-step-sub-label-error { 965 font-size: 12px; 966 font-weight: normal; 967} 968 969.mat-step-icon { 970 border-radius: 50%; 971 height: 24px; 972 width: 24px; 973 flex-shrink: 0; 974 position: relative; 975 color: var(--mat-stepper-header-icon-foreground-color, var(--mat-sys-surface)); 976 background-color: var(--mat-stepper-header-icon-background-color, var(--mat-sys-on-surface-variant)); 977} 978 979.mat-step-icon-content { 980 position: absolute; 981 top: 50%; 982 left: 50%; 983 transform: translate(-50%, -50%); 984 display: flex; 985} 986 987.mat-step-icon .mat-icon { 988 font-size: 16px; 989 height: 16px; 990 width: 16px; 991} 992 993.mat-step-icon-state-error { 994 background-color: var(--mat-stepper-header-error-state-icon-background-color, transparent); 995 color: var(--mat-stepper-header-error-state-icon-foreground-color, var(--mat-sys-error)); 996} 997.mat-step-icon-state-error .mat-icon { 998 font-size: 24px; 999 height: 24px; 1000 width: 24px; 1001} 1002 1003.mat-step-label { 1004 display: inline-block; 1005 white-space: nowrap; 1006 overflow: hidden; 1007 text-overflow: ellipsis; 1008 min-width: 50px; 1009 vertical-align: middle; 1010 font-family: var(--mat-stepper-header-label-text-font, var(--mat-sys-title-small-font)); 1011 font-size: var(--mat-stepper-header-label-text-size, var(--mat-sys-title-small-size)); 1012 font-weight: var(--mat-stepper-header-label-text-weight, var(--mat-sys-title-small-weight)); 1013 color: var(--mat-stepper-header-label-text-color, var(--mat-sys-on-surface-variant)); 1014} 1015.mat-step-label.mat-step-label-active { 1016 color: var(--mat-stepper-header-selected-state-label-text-color, var(--mat-sys-on-surface-variant)); 1017} 1018.mat-step-label.mat-step-label-error { 1019 color: var(--mat-stepper-header-error-state-label-text-color, var(--mat-sys-error)); 1020 font-size: var(--mat-stepper-header-error-state-label-text-size, var(--mat-sys-title-small-size)); 1021} 1022.mat-step-label.mat-step-label-selected { 1023 font-size: var(--mat-stepper-header-selected-state-label-text-size, var(--mat-sys-title-small-size)); 1024 font-weight: var(--mat-stepper-header-selected-state-label-text-weight, var(--mat-sys-title-small-weight)); 1025} 1026.mat-step-header-empty-label .mat-step-label { 1027 min-width: 0; 1028} 1029 1030.mat-step-text-label { 1031 text-overflow: ellipsis; 1032 overflow: hidden; 1033} 1034 1035.mat-step-header .mat-step-header-ripple { 1036 top: 0; 1037 left: 0; 1038 right: 0; 1039 bottom: 0; 1040 position: absolute; 1041 pointer-events: none; 1042} 1043 1044.mat-step-icon-selected { 1045 background-color: var(--mat-stepper-header-selected-state-icon-background-color, var(--mat-sys-primary)); 1046 color: var(--mat-stepper-header-selected-state-icon-foreground-color, var(--mat-sys-on-primary)); 1047} 1048 1049.mat-step-icon-state-done { 1050 background-color: var(--mat-stepper-header-done-state-icon-background-color, var(--mat-sys-primary)); 1051 color: var(--mat-stepper-header-done-state-icon-foreground-color, var(--mat-sys-on-primary)); 1052} 1053 1054.mat-step-icon-state-edit { 1055 background-color: var(--mat-stepper-header-edit-state-icon-background-color, var(--mat-sys-primary)); 1056 color: var(--mat-stepper-header-edit-state-icon-foreground-color, var(--mat-sys-on-primary)); 1057} 1058</style><style ng-app-id="ng">.mat-mdc-button-base { 1059 text-decoration: none; 1060} 1061.mat-mdc-button-base .mat-icon { 1062 min-height: fit-content; 1063 flex-shrink: 0; 1064} 1065@media (hover: none) { 1066 .mat-mdc-button-base:hover > span.mat-mdc-button-persistent-ripple::before { 1067 opacity: 0; 1068 } 1069} 1070 1071.mdc-button { 1072 -webkit-user-select: none; 1073 user-select: none; 1074 position: relative; 1075 display: inline-flex; 1076 align-items: center; 1077 justify-content: center; 1078 box-sizing: border-box; 1079 min-width: 64px; 1080 border: none; 1081 outline: none; 1082 line-height: inherit; 1083 -webkit-appearance: none; 1084 overflow: visible; 1085 vertical-align: middle; 1086 background: transparent; 1087 padding: 0 8px; 1088} 1089.mdc-button::-moz-focus-inner { 1090 padding: 0; 1091 border: 0; 1092} 1093.mdc-button:active { 1094 outline: none; 1095} 1096.mdc-button:hover {
1097 cursor: pointer; 1098} 1099.mdc-button:disabled { 1100 cursor: default; 1101 pointer-events: none; 1102} 1103.mdc-button[hidden] { 1104 display: none; 1105} 1106.mdc-button .mdc-button__label { 1107 position: relative; 1108} 1109 1110.mat-mdc-button { 1111 padding: 0 var(--mat-button-text-horizontal-padding, 12px); 1112 height: var(--mat-button-text-container-height, 40px); 1113 font-family: var(--mat-button-text-label-text-font, var(--mat-sys-label-large-font)); 1114 font-size: var(--mat-button-text-label-text-size, var(--mat-sys-label-large-size)); 1115 letter-spacing: var(--mat-button-text-label-text-tracking, var(--mat-sys-label-large-tracking)); 1116 text-transform: var(--mat-button-text-label-text-transform); 1117 font-weight: var(--mat-button-text-label-text-weight, var(--mat-sys-label-large-weight)); 1118} 1119.mat-mdc-button, .mat-mdc-button .mdc-button__ripple { 1120 border-radius: var(--mat-button-text-container-shape, var(--mat-sys-corner-full)); 1121} 1122.mat-mdc-button:not(:disabled) { 1123 color: var(--mat-button-text-label-text-color, var(--mat-sys-primary)); 1124} 1125.mat-mdc-button[disabled], .mat-mdc-button.mat-mdc-button-disabled { 1126 cursor: default; 1127 pointer-events: none; 1128 color: var(--mat-button-text-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)); 1129} 1130.mat-mdc-button.mat-mdc-button-disabled-interactive { 1131 pointer-events: auto; 1132} 1133.mat-mdc-button:has(.material-icons, mat-icon, [matButtonIcon]) { 1134 padding: 0 var(--mat-button-text-with-icon-horizontal-padding, 16px); 1135} 1136.mat-mdc-button > .mat-icon { 1137 margin-right: var(--mat-button-text-icon-spacing, 8px); 1138 margin-left: var(--mat-button-text-icon-offset, -4px); 1139} 1140[dir=rtl] .mat-mdc-button > .mat-icon { 1141 margin-right: var(--mat-button-text-icon-offset, -4px); 1142 margin-left: var(--mat-button-text-icon-spacing, 8px); 1143} 1144.mat-mdc-button .mdc-button__label + .mat-icon { 1145 margin-right: var(--mat-button-text-icon-offset, -4px); 1146 margin-left: var(--mat-button-text-icon-spacing, 8px); 1147} 1148[dir=rtl] .mat-mdc-button .mdc-button__label + .mat-icon { 1149 margin-right: var(--mat-button-text-icon-spacing, 8px); 1150 margin-left: var(--mat-button-text-icon-offset, -4px); 1151} 1152.mat-mdc-button .mat-ripple-element { 1153 background-color: var(--mat-button-text-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)); 1154} 1155.mat-mdc-button .mat-mdc-button-persistent-ripple::before { 1156 background-color: var(--mat-button-text-state-layer-color, var(--mat-sys-primary)); 1157} 1158.mat-mdc-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before { 1159 background-color: var(--mat-button-text-disabled-state-layer-color, var(--mat-sys-on-surface-variant)); 1160} 1161.mat-mdc-button:hover > .mat-mdc-button-persistent-ripple::before { 1162 opacity: var(--mat-button-text-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity)); 1163} 1164.mat-mdc-button.cdk-program-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-button.cdk-keyboard-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-button.mat-mdc-button-disabled-interactive:focus > .mat-mdc-button-persistent-ripple::before { 1165 opacity: var(--mat-button-text-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity)); 1166} 1167.mat-mdc-button:active > .mat-mdc-button-persistent-ripple::before { 1168 opacity: var(--mat-button-text-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity)); 1169} 1170.mat-mdc-button .mat-mdc-button-touch-target { 1171 position: absolute; 1172 top: 50%; 1173 height: var(--mat-button-text-touch-target-size, 48px); 1174 display: var(--mat-button-text-touch-target-display, block); 1175 left: 0; 1176 right: 0; 1177 transform: translateY(-50%); 1178} 1179 1180.mat-mdc-unelevated-button { 1181 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); 1182 height: var(--mat-button-filled-container-height, 40px); 1183 font-family: var(--mat-button-filled-label-text-font, var(--mat-sys-label-large-font)); 1184 font-size: var(--mat-button-filled-label-text-size, var(--mat-sys-label-large-size)); 1185 letter-spacing: var(--mat-button-filled-label-text-tracking, var(--mat-sys-label-large-tracking)); 1186 text-transform: var(--mat-button-filled-label-text-transform); 1187 font-weight: var(--mat-button-filled-label-text-weight, var(--mat-sys-label-large-weight)); 1188 padding: 0 var(--mat-button-filled-horizontal-padding, 24px); 1189} 1190.mat-mdc-unelevated-button > .mat-icon { 1191 margin-right: var(--mat-button-filled-icon-spacing, 8px); 1192 margin-left: var(--mat-button-filled-icon-offset, -8px); 1193} 1194[dir=rtl] .mat-mdc-unelevated-button > .mat-icon { 1195 margin-right: var(--mat-button-filled-icon-offset, -8px); 1196 margin-left: var(--mat-button-filled-icon-spacing, 8px); 1197} 1198.mat-mdc-unelevated-button .mdc-button__label + .mat-icon { 1199 margin-right: var(--mat-button-filled-icon-offset, -8px); 1200 margin-left: var(--mat-button-filled-icon-spacing, 8px); 1201} 1202[dir=rtl] .mat-mdc-unelevated-button .mdc-button__label + .mat-icon { 1203 margin-right: var(--mat-button-filled-icon-spacing, 8px); 1204 margin-left: var(--mat-button-filled-icon-offset, -8px); 1205} 1206.mat-mdc-unelevated-button .mat-ripple-element { 1207 background-color: var(--mat-button-filled-ripple-color, color-mix(in srgb, var(--mat-sys-on-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)); 1208} 1209.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before { 1210 background-color: var(--mat-button-filled-state-layer-color, var(--mat-sys-on-primary)); 1211} 1212.mat-mdc-unelevated-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before { 1213 background-color: var(--mat-button-filled-disabled-state-layer-color, var(--mat-sys-on-surface-variant)); 1214} 1215.mat-mdc-unelevated-button:hover > .mat-mdc-button-persistent-ripple::before { 1216 opacity: var(--mat-button-filled-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity)); 1217} 1218.mat-mdc-unelevated-button.cdk-program-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-unelevated-button.cdk-keyboard-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-unelevated-button.mat-mdc-button-disabled-interactive:focus > .mat-mdc-button-persistent-ripple::before { 1219 opacity: var(--mat-button-filled-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity)); 1220} 1221.mat-mdc-unelevated-button:active > .mat-mdc-button-persistent-ripple::before { 1222 opacity: var(--mat-button-filled-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity)); 1223} 1224.mat-mdc-unelevated-button .mat-mdc-button-touch-target { 1225 position: absolute; 1226 top: 50%; 1227 height: var(--mat-button-filled-touch-target-size, 48px); 1228 display: var(--mat-button-filled-touch-target-display, block); 1229 left: 0; 1230 right: 0; 1231 transform: translateY(-50%); 1232} 1233.mat-mdc-unelevated-button:not(:disabled) { 1234 color: var(--mat-button-filled-label-text-color, var(--mat-sys-on-primary)); 1235 background-color: var(--mat-button-filled-container-color, var(--mat-sys-primary)); 1236} 1237.mat-mdc-unelevated-button, .mat-mdc-unelevated-button .mdc-button__ripple { 1238 border-radius: var(--mat-button-filled-container-shape, var(--mat-sys-corner-full)); 1239} 1240.mat-mdc-unelevated-button[disabled], .mat-mdc-unelevated-button.mat-mdc-button-disabled { 1241 cursor: default; 1242 pointer-events: none; 1243 color: var(--mat-button-filled-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)); 1244 background-color: var(--mat-button-filled-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)); 1245} 1246.mat-mdc-unelevated-button.mat-mdc-button-disabled-interactive { 1247 pointer-events: auto; 1248} 1249 1250.mat-mdc-raised-button { 1251 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); 1252 box-shadow: var(--mat-button-protected-container-elevation-shadow, var(--mat-sys-level1)); 1253 height: var(--mat-button-protected-container-height, 40px); 1254 font-family: var(--mat-button-protected-label-text-font, var(--mat-sys-label-large-font)); 1255 font-size: var(--mat-button-protected-label-text-size, var(--mat-sys-label-large-size)); 1256 letter-spacing: var(--mat-button-protected-label-text-tracking, var(--mat-sys-label-large-tracking)); 1257 text-transform: var(--mat-button-protected-label-text-transform); 1258 font-weight: var(--mat-button-protected-label-text-weight, var(--mat-sys-label-large-weight)); 1259 padding: 0 var(--mat-button-protected-horizontal-padding, 24px); 1260} 1261.mat-mdc-raised-button > .mat-icon { 1262 margin-right: var(--mat-button-protected-icon-spacing, 8px); 1263 margin-left: var(--mat-button-protected-icon-offset, -8px); 1264} 1265[dir=rtl] .mat-mdc-raised-button > .mat-icon { 1266 margin-right: var(--mat-button-protected-icon-offset, -8px); 1267 margin-left: var(--mat-button-protected-icon-spacing, 8px); 1268} 1269.mat-mdc-raised-button .mdc-button__label + .mat-icon { 1270 margin-right: var(--mat-button-protected-icon-offset, -8px); 1271 margin-left: var(--mat-button-protected-icon-spacing, 8px); 1272} 1273[dir=rtl] .mat-mdc-raised-button .mdc-button__label + .mat-icon { 1274 margin-right: var(--mat-button-protected-icon-spacing, 8px); 1275 margin-left: var(--mat-button-protected-icon-offset, -8px); 1276} 1277.mat-mdc-raised-button .mat-ripple-element { 1278 background-color: var(--mat-button-protected-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)); 1279} 1280.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before { 1281 background-color: var(--mat-button-protected-state-layer-color, var(--mat-sys-primary)); 1282} 1283.mat-mdc-raised-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before { 1284 background-color: var(--mat-button-protected-disabled-state-layer-color, var(--mat-sys-on-surface-variant)); 1285} 1286.mat-mdc-raised-button:hover > .mat-mdc-button-persistent-ripple::before { 1287 opacity: var(--mat-button-protected-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity)); 1288} 1289.mat-mdc-raised-button.cdk-program-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-raised-button.cdk-keyboard-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-raised-button.mat-mdc-button-disabled-interactive:focus > .mat-mdc-button-persistent-ripple::before { 1290 opacity: var(--mat-button-protected-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity)); 1291} 1292.mat-mdc-raised-button:active > .mat-mdc-button-persistent-ripple::before { 1293 opacity: var(--mat-button-protected-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity)); 1294} 1295.mat-mdc-raised-button .mat-mdc-button-touch-target { 1296 position: absolute; 1297 top: 50%; 1298 height: var(--mat-button-protected-touch-target-size, 48px); 1299 display: var(--mat-button-protected-touch-target-display, block); 1300 left: 0; 1301 right: 0; 1302 transform: translateY(-50%); 1303} 1304.mat-mdc-raised-button:not(:disabled) { 1305 color: var(--mat-button-protected-label-text-color, var(--mat-sys-primary)); 1306 background-color: var(--mat-button-protected-container-color, var(--mat-sys-surface)); 1307} 1308.mat-mdc-raised-button, .mat-mdc-raised-button .mdc-button__ripple { 1309 border-radius: var(--mat-button-protected-container-shape, var(--mat-sys-corner-full)); 1310} 1311@media (hover: hover) { 1312 .mat-mdc-raised-button:hover { 1313 box-shadow: var(--mat-button-protected-hover-container-elevation-shadow, var(--mat-sys-level2)); 1314 } 1315} 1316.mat-mdc-raised-button:focus { 1317 box-shadow: var(--mat-button-protected-focus-container-elevation-shadow, var(--mat-sys-level1)); 1318} 1319.mat-mdc-raised-button:active, .mat-mdc-raised-button:focus:active { 1320 box-shadow: var(--mat-button-protected-pressed-container-elevation-shadow, var(--mat-sys-level1)); 1321} 1322.mat-mdc-raised-button[disabled], .mat-mdc-raised-button.mat-mdc-button-disabled { 1323 cursor: default; 1324 pointer-events: none; 1325 color: var(--mat-button-protected-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)); 1326 background-color: var(--mat-button-protected-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)); 1327} 1328.mat-mdc-raised-button[disabled].mat-mdc-button-disabled, .mat-mdc-raised-button.mat-mdc-button-disabled.mat-mdc-button-disabled { 1329 box-shadow: var(--mat-button-protected-disabled-container-elevation-shadow, var(--mat-sys-level0)); 1330} 1331.mat-mdc-raised-button.mat-mdc-button-disabled-interactive { 1332 pointer-events: auto; 1333} 1334 1335.mat-mdc-outlined-button { 1336 border-style: solid; 1337 transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1); 1338 height: var(--mat-button-outlined-container-height, 40px); 1339 font-family: var(--mat-button-outlined-label-text-font, var(--mat-sys-label-large-font)); 1340 font-size: var(--mat-button-outlined-label-text-size, var(--mat-sys-label-large-size)); 1341 letter-spacing: var(--mat-button-outlined-label-text-tracking, var(--mat-sys-label-large-tracking)); 1342 text-transform: var(--mat-button-outlined-label-text-transform); 1343 font-weight: var(--mat-button-outlined-label-text-weight, var(--mat-sys-label-large-weight)); 1344 border-radius: var(--mat-button-outlined-container-shape, var(--mat-sys-corner-full)); 1345 border-width: var(--mat-button-outlined-outline-width, 1px); 1346 padding: 0 var(--mat-button-outlined-horizontal-padding, 24px); 1347} 1348.mat-mdc-outlined-button > .mat-icon { 1349 margin-right: var(--mat-button-outlined-icon-spacing, 8px); 1350 margin-left: var(--mat-button-outlined-icon-offset, -8px); 1351} 1352[dir=rtl] .mat-mdc-outlined-button > .mat-icon { 1353 margin-right: var(--mat-button-outlined-icon-offset, -8px); 1354 margin-left: var(--mat-button-outlined-icon-spacing, 8px); 1355} 1356.mat-mdc-outlined-button .mdc-button__label + .mat-icon { 1357 margin-right: var(--mat-button-outlined-icon-offset, -8px); 1358 margin-left: var(--mat-button-outlined-icon-spacing, 8px); 1359} 1360[dir=rtl] .mat-mdc-outlined-button .mdc-button__label + .mat-icon { 1361 margin-right: var(--mat-button-outlined-icon-spacing, 8px); 1362 margin-left: var(--mat-button-outlined-icon-offset, -8px); 1363} 1364.mat-mdc-outlined-button .mat-ripple-element { 1365 background-color: var(--mat-button-outlined-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)); 1366} 1367.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before { 1368 background-color: var(--mat-button-outlined-state-layer-color, var(--mat-sys-primary)); 1369} 1370.mat-mdc-outlined-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before { 1371 background-color: var(--mat-button-outlined-disabled-state-layer-color, var(--mat-sys-on-surface-variant)); 1372} 1373.mat-mdc-outlined-button:hover > .mat-mdc-button-persistent-ripple::before { 1374 opacity: var(--mat-button-outlined-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity)); 1375} 1376.mat-mdc-outlined-button.cdk-program-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-outlined-button.cdk-keyboard-focused > .mat-mdc-button-persistent-ripple::before, .mat-mdc-outlined-button.mat-mdc-button-disabled-interactive:focus > .mat-mdc-button-persistent-ripple::before { 1377 opacity: var(--mat-button-outlined-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity)); 1378} 1379.mat-mdc-outlined-button:active > .mat-mdc-button-persistent-ripple::before { 1380 opacity: var(--mat-button-outlined-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity)); 1381} 1382.mat-mdc-outlined-button .mat-mdc-button-touch-target { 1383 position: absolute; 1384 top: 50%; 1385 height: var(--mat-button-outlined-touch-target-size, 48px); 1386 display: var(--mat-button-outlined-touch-target-display, block); 1387 left: 0; 1388 right: 0; 1389 transform: translateY(-50%); 1390} 1391.mat-mdc-outlined-button:not(:disabled) { 1392 color: var(--mat-button-outlined-label-text-color, var(--mat-sys-primary)); 1393 border-color: var(--mat-button-outlined-outline-color, var(--mat-sys-outline)); 1394} 1395.mat-mdc-outlined-button[disabled], .mat-mdc-outlined-button.mat-mdc-button-disabled { 1396 cursor: default; 1397 pointer-events: none; 1398 color: var(--mat-button-outlined-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)); 1399 border-color: var(--mat-button-outlined-disabled-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)); 1400} 1401.mat-mdc-outlined-button.mat-mdc-button-disabled-interactive { 1402 pointer-events: auto; 1403} 1404 1405.mat-tonal-button { 1406 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); 1407 height: var(--mat-button-tonal-container-height, 40px); 1408 font-family: var(--mat-button-tonal-label-text-font, var(--mat-sys-label-large-font)); 1409 font-size: var(--mat-button-tonal-label-text-size, var(--mat-sys-label-large-size)); 1410 lette
1410r-spacing: var(--mat-button-tonal-label-text-tracking, var(--mat-sys-label-large-tracking)); 1411 text-transform: var(--mat-button-tonal-label-text-transform); 1412 font-weight: var(--mat-button-tonal-label-text-weight, var(--mat-sys-label-large-weight)); 1413 padding: 0 var(--mat-button-tonal-horizontal-padding, 24px); 1414} 1415.mat-tonal-button:not(:disabled) { 1416 color: var(--mat-button-tonal-label-text-color, var(--mat-sys-on-secondary-container)); 1417 background-color: var(--mat-button-tonal-container-color, var(--mat-sys-secondary-container)); 1418} 1419.mat-tonal-button, .mat-tonal-button .mdc-button__ripple { 1420 border-radius: var(--mat-button-tonal-container-shape, var(--mat-sys-corner-full)); 1421} 1422.mat-tonal-button[disabled], .mat-tonal-button.mat-mdc-button-disabled { 1423 cursor: default; 1424 pointer-events: none; 1425 color: var(--mat-button-tonal-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)); 1426 background-color: var(--mat-button-tonal-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)); 1427} 1428.mat-tonal-button.mat-mdc-button-disabled-interactive { 1429 pointer-events: auto; 1430} 1431.mat-tonal-button > .mat-icon { 1432 margin-right: var(--mat-button-tonal-icon-spacing, 8px); 1433 margin-left: var(--mat-button-tonal-icon-offset, -8px); 1434} 1435[dir=rtl] .mat-tonal-button > .mat-icon { 1436 margin-right: var(--mat-button-tonal-icon-offset, -8px); 1437 margin-left: var(--mat-button-tonal-icon-spacing, 8px); 1438} 1439.mat-tonal-button .mdc-button__label + .mat-icon { 1440 margin-right: var(--mat-button-tonal-icon-offset, -8px); 1441 margin-left: var(--mat-button-tonal-icon-spacing, 8px); 1442} 1443[dir=rtl] .mat-tonal-button .mdc-button__label + .mat-icon { 1444 margin-right: var(--mat-button-tonal-icon-spacing, 8px); 1445 margin-left: var(--mat-button-tonal-icon-offset, -8px); 1446} 1447.mat-tonal-button .mat-ripple-element { 1448 background-color: var(--mat-button-tonal-ripple-color, color-mix(in srgb, var(--mat-sys-on-secondary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)); 1449} 1450.mat-tonal-button .mat-mdc-button-persistent-ripple::before { 1451 background-color: var(--mat-button-tonal-state-layer-color, var(--mat-sys-on-secondary-container)); 1452} 1453.mat-tonal-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before { 1454 background-color: var(--mat-button-tonal-disabled-state-layer-color, var(--mat-sys-on-surface-variant)); 1455} 1456.mat-tonal-button:hover > .mat-mdc-button-persistent-ripple::before { 1457 opacity: var(--mat-button-tonal-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity)); 1458} 1459.mat-tonal-button.cdk-program-focused > .mat-mdc-button-persistent-ripple::before, .mat-tonal-button.cdk-keyboard-focused > .mat-mdc-button-persistent-ripple::before, .mat-tonal-button.mat-mdc-button-disabled-interactive:focus > .mat-mdc-button-persistent-ripple::before { 1460 opacity: var(--mat-button-tonal-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity)); 1461} 1462.mat-tonal-button:active > .mat-mdc-button-persistent-ripple::before { 1463 opacity: var(--mat-button-tonal-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity)); 1464} 1465.mat-tonal-button .mat-mdc-button-touch-target { 1466 position: absolute; 1467 top: 50%; 1468 height: var(--mat-button-tonal-touch-target-size, 48px); 1469 display: var(--mat-button-tonal-touch-target-display, block); 1470 left: 0; 1471 right: 0; 1472 transform: translateY(-50%); 1473} 1474 1475.mat-mdc-button, 1476.mat-mdc-unelevated-button, 1477.mat-mdc-raised-button, 1478.mat-mdc-outlined-button, 1479.mat-tonal-button { 1480 -webkit-tap-highlight-color: transparent; 1481} 1482.mat-mdc-button .mat-mdc-button-ripple, 1483.mat-mdc-button .mat-mdc-button-persistent-ripple, 1484.mat-mdc-button .mat-mdc-button-persistent-ripple::before, 1485.mat-mdc-unelevated-button .mat-mdc-button-ripple, 1486.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple, 1487.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before, 1488.mat-mdc-raised-button .mat-mdc-button-ripple, 1489.mat-mdc-raised-button .mat-mdc-button-persistent-ripple, 1490.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before, 1491.mat-mdc-outlined-button .mat-mdc-button-ripple, 1492.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple, 1493.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before, 1494.mat-tonal-button .mat-mdc-button-ripple, 1495.mat-tonal-button .mat-mdc-button-persistent-ripple, 1496.mat-tonal-button .mat-mdc-button-persistent-ripple::before { 1497 top: 0; 1498 left: 0; 1499 right: 0; 1500 bottom: 0; 1501 position: absolute; 1502 pointer-events: none; 1503 border-radius: inherit; 1504} 1505.mat-mdc-button .mat-mdc-button-ripple, 1506.mat-mdc-unelevated-button .mat-mdc-button-ripple, 1507.mat-mdc-raised-button .mat-mdc-button-ripple, 1508.mat-mdc-outlined-button .mat-mdc-button-ripple, 1509.mat-tonal-button .mat-mdc-button-ripple { 1510 overflow: hidden; 1511} 1512.mat-mdc-button .mat-mdc-button-persistent-ripple::before, 1513.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before, 1514.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before, 1515.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before, 1516.mat-tonal-button .mat-mdc-button-persistent-ripple::before { 1517 content: ""; 1518 opacity: 0; 1519} 1520.mat-mdc-button .mdc-button__label, 1521.mat-mdc-button .mat-icon, 1522.mat-mdc-unelevated-button .mdc-button__label, 1523.mat-mdc-unelevated-button .mat-icon, 1524.mat-mdc-raised-button .mdc-button__label, 1525.mat-mdc-raised-button .mat-icon, 1526.mat-mdc-outlined-button .mdc-button__label, 1527.mat-mdc-outlined-button .mat-icon, 1528.mat-tonal-button .mdc-button__label, 1529.mat-tonal-button .mat-icon { 1530 z-index: 1; 1531 position: relative; 1532} 1533.mat-mdc-button .mat-focus-indicator, 1534.mat-mdc-unelevated-button .mat-focus-indicator, 1535.mat-mdc-raised-button .mat-focus-indicator, 1536.mat-mdc-outlined-button .mat-focus-indicator, 1537.mat-tonal-button .mat-focus-indicator { 1538 top: 0; 1539 left: 0; 1540 right: 0; 1541 bottom: 0; 1542 position: absolute; 1543 border-radius: inherit; 1544} 1545.mat-mdc-button:focus-visible > .mat-focus-indicator::before, 1546.mat-mdc-unelevated-button:focus-visible > .mat-focus-indicator::before, 1547.mat-mdc-raised-button:focus-visible > .mat-focus-indicator::before, 1548.mat-mdc-outlined-button:focus-visible > .mat-focus-indicator::before, 1549.mat-tonal-button:focus-visible > .mat-focus-indicator::before { 1550 content: ""; 1551 border-radius: inherit; 1552} 1553.mat-mdc-button._mat-animation-noopable, 1554.mat-mdc-unelevated-button._mat-animation-noopable, 1555.mat-mdc-raised-button._mat-animation-noopable, 1556.mat-mdc-outlined-button._mat-animation-noopable, 1557.mat-tonal-button._mat-animation-noopable { 1558 transition: none !important; 1559 animation: none !important; 1560} 1561.mat-mdc-button > .mat-icon, 1562.mat-mdc-unelevated-button > .mat-icon, 1563.mat-mdc-raised-button > .mat-icon, 1564.mat-mdc-outlined-button > .mat-icon, 1565.mat-tonal-button > .mat-icon { 1566 display: inline-block; 1567 position: relative; 1568 vertical-align: top; 1569 font-size: 1.125rem; 1570 height: 1.125rem; 1571 width: 1.125rem; 1572} 1573 1574.mat-mdc-outlined-button .mat-mdc-button-ripple, 1575.mat-mdc-outlined-button .mdc-button__ripple { 1576 top: -1px; 1577 left: -1px; 1578 bottom: -1px; 1579 right: -1px; 1580} 1581 1582.mat-mdc-unelevated-button .mat-focus-indicator::before, 1583.mat-tonal-button .mat-focus-indicator::before, 1584.mat-mdc-raised-button .mat-focus-indicator::before { 1585 margin: calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px) * -1); 1586} 1587 1588.mat-mdc-outlined-button .mat-focus-indicator::before { 1589 margin: calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px) * -1); 1590} 1591</style><style ng-app-id="ng">@media (forced-colors: active) { 1592 .mat-mdc-button:not(.mdc-button--outlined), 1593 .mat-mdc-unelevated-button:not(.mdc-button--outlined), 1594 .mat-mdc-raised-button:not(.mdc-button--outlined), 1595 .mat-mdc-outlined-button:not(.mdc-button--outlined), 1596 .mat-mdc-button-base.mat-tonal-button, 1597 .mat-mdc-icon-button.mat-mdc-icon-button, 1598 .mat-mdc-outlined-button .mdc-button__ripple { 1599 outline: solid 1px; 1600 } 1601} 1602</style></head> 1603 <body class="mat-typography"><!--nghm--> 1604 <app-root ng-version="21.2.14" ngh="16" ng-server-context="ssr"><app-navbar _nghost-ng-c2751292306 ngh="1"><div _ngcontent-ng-c2751292306><div _ngcontent-ng-c2751292306><!----><nav _ngcontent-ng-c2751292306 class="navbar pr-[5%] pl-[13%] sm:px-2 md:pl-[8%] md:pr-[5%] w-full"><div _ngcontent-ng-c2751292306 class="flex items-center w-full gap-4 justify-between sm:justify-start">
1604<a _ngcontent-ng-c2751292306 class="mr-2 md:mr-6" href="https://www.looksee.com/looksee/home"><img _ngcontent-ng-c2751292306 alt="looksee logo" class="logo min-w-10" src="/static/looksee/assets/images/lookSee-logo.svg"></a><!----><!----></div><!----></nav></div></div><mat-menu _ngcontent-ng-c2751292306 class ngh="0"><!----></mat-menu></app-navbar><!----><app-loadingspinner ngh="2"><!----></app-loadingspinner><router-outlet></router-outlet><app-page _nghost-ng-c4258730666 ngh="15"><div _ngcontent-ng-c4258730666 class="page-container flex flex-col items-center"><div _ngcontent-ng-c4258730666 class="flex flex-col justify-center items-center"><div _ngcontent-ng-c4258730666 class="pt-3 sm:pt-10 sm:pb-7 w-full"><app-breadcrumb _ngcontent-ng-c4258730666 _nghost-ng-c3810003537 ngh="3"><nav _ngcontent-ng-c3810003537 aria-label="breadcrumb" class="flex justify-center"><ul _ngcontent-ng-c3810003537 class="breadcrumb"><li _ngcontent-ng-c3810003537 class="flex"><!----><!----><a _ngcontent-ng-c3810003537 style="text-decoration: none; color: #0062e1;" href="https://www.looksee.co.za/looksee/home"> Home </a><!----><!----><!----><!----><img _ngcontent-ng-c3810003537 alt="chevron-right" height="16" width="16" src="/static/looksee/assets/images/right-chevron.svg"><!----><!----></li><li _ngcontent-ng-c3810003537 class="flex"><!----><!----><a _ngcontent-ng-c3810003537 style="text-decoration: none; color: #0062e1;" href="https://www.looksee.co.za/looksee/home/products-services"> Products and Services </a><!----><!----><!----><!----><img _ngcontent-ng-c3810003537 alt="chevron-right" height="16" width="16" src="/static/looksee/assets/images/right-chevron.svg"><!----><!----></li><li _ngcontent-ng-c3810003537 class="flex"><!----><!----><a _ngcontent-ng-c3810003537 style="text-decoration: none; color: #0062e1;" href="https://www.looksee.co.za/looksee/home/products-services/smart-save"> Smart Save </a><!----><!----><!----><!----><img _ngcontent-ng-c3810003537 alt="chevron-right" height="16" width="16" src="/static/looksee/assets/images/right-chevron.svg"><!----><!----></li><li _ngcontent-ng-c3810003537 class="flex">Start your Smart Save journey<!----><!----><!----><!----></li><!----></ul><!----><!----></nav><!----></app-breadcrumb></div></div><div _ngcontent-ng-c4258730666 class="px-4 w-full md:p-0 md:w-10/12"><router-outlet _ngcontent-ng-c4258730666></router-outlet><app-smart-safe-home-page ngh="14"><div class="mb-4"><!----><mat-stepper color="primary" linear class="flex items-center card-border mat-stepper-horizontal mat-stepper-label-position-end" style="--mat-stepper-animation-duration: 0ms;" ngh="9"><mat-step hidden editable ngh="10"><!----></mat-step><!----><mat-step hidden editable ngh="10"><!----></mat-step><!----><mat-step hidden editable ngh="10"><!----></mat-step><!----><mat-step hidden editable ngh="10"><!----></mat-step><!----><mat-step hidden editable ngh="10"><!----></mat-step><!----><!----><div class="mat-horizontal-stepper-wrapper"><!----><div aria-orientation="horizontal" role="tablist" class="mat-horizontal-stepper-header-container"><mat-step-header role="tab" class="mat-step-header mat-horizontal-stepper-header mat-primary" tabindex="0" id="cdk-stepper-5309-label-0" aria-posinset="1" aria-setsize="5" aria-selected="true" aria-controls="cdk-stepper-5309-content-0" ngh="4"><div matripple class="mat-ripple mat-step-header-ripple mat-focus-indicator"></div><div class="mat-step-icon mat-step-icon-state-number mat-step-icon-selected"><div class="mat-step-icon-content"><!----><span aria-hidden="true">1</span><!----><!----><!----></div></div><div class="mat-step-label mat-step-label-active mat-step-label-selected"><div class="mat-step-text-label"> Home address <!----></div><!----><!----><!----><!----></div></mat-step-header><!----><div class="mat-stepper-horizontal-line"></div><!----><mat-step-header role="tab" class="mat-step-header mat-horizontal-stepper-header mat-primary" tabindex="-1" id="cdk-stepper-5309-label-1" aria-posinset="2" aria-setsize="5" aria-selected="false" aria-controls="cdk-stepper-5309-content-1" aria-disabled="true" ngh="5"><div matripple class="mat-ripple mat-step-header-ripple mat-focus-indicator"></div><div class="mat-step-icon mat-step-icon-state-number"><div class="mat-step-icon-content"><!----><span aria-hidden="true">2</span><!----><!----><!----></div></div><div class="mat-step-label"><div class="mat-step-text-label"> Floor area <!----></div><!----><!----><!----><!----></div></mat-step-header><!----><div class="mat-stepper-horizontal-line"></div><!----><mat-step-header role="tab" class="mat-step-header mat-horizontal-stepper-header mat-primary" tabindex="-1" id="cdk-stepper-5309-label-2" aria-posinset="3" aria-setsize="5" aria-selected="false" aria-controls="cdk-stepper-5309-content-2" aria-disabled="true" ngh="6"><div matripple class="mat-ripple mat-step-header-ripple mat-focus-indicator"></div><div class="mat-step-icon mat-step-icon-state-number"><div class="mat-step-icon-content"><!----><span aria-hidden="true">3</span><!----><!----><!----></div></div><div class="mat-step-label"><div class="mat-step-text-label"> Electricity supply <!----></div><!----><!----><!----><!----></div></mat-step-header><!----><div class="mat-stepper-horizontal-line"></div><!----><mat-step-header role="tab" class="mat-step-header mat-horizontal-stepper-header mat-primary" tabindex="-1" id="cdk-stepper-5309-label-3" aria-posinset="4" aria-setsize="5" aria-selected="false" aria-controls="cdk-stepper-5309-content-3" aria-disabled="true" ngh="7"><div matripple class="mat-ripple mat-step-header-ripple mat-focus-indicator"></div><div class="mat-step-icon mat-step-icon-state-number"><div class="mat-step-icon-content"><!----><span aria-hidden="true">4</span><!----><!----><!----></div></div><div class="mat-step-label"><div class="mat-step-text-label"> Monthly spend <!----></div><!----><!----><!----><!----></div></mat-step-header><!----><div class="mat-stepper-horizontal-line"></div><!----><mat-step-header role="tab" class="mat-step-header mat-horizontal-stepper-header mat-primary" tabindex="-1" id="cdk-stepper-5309-label-4" aria-posinset="5" aria-setsize="5" aria-selected="false" aria-controls="cdk-stepper-5309-content-4" aria-disabled="true" ngh="8"><div matripple class="mat-ripple mat-step-header-ripple mat-focus-indicator"></div><div class="mat-step-icon mat-step-icon-state-number"><div class="mat-step-icon-content"><!----><span aria-hidden="true">5</span><!----><!----><!----></div></div><div class="mat-step-label"><div class="mat-step-text-label"> Solar production <!----></div><!----><!----><!----><!----></div></mat-step-header><!----><!----><!----></div><!----><!----><div class="mat-horizontal-content-container"><div role="tabpanel" class="mat-horizontal-stepper-content mat-horizontal-stepper-content-current" id="cdk-stepper-5309-content-0" aria-labelledby="cdk-stepper-5309-label-0"><!----><!----><!----></div><div role="tabpanel" class="mat-horizontal-stepper-content mat-horizontal-stepper-content-next" id="cdk-stepper-5309-content-1" aria-labelledby="cdk-stepper-5309-label-1" inert><!----><!----><!----></div><div role="tabpanel" class="mat-horizontal-stepper-content mat-horizontal-stepper-content-next" id="cdk-stepper-5309-content-2" aria-labelledby="cdk-stepper-5309-label-2" inert><!----><!----><!----></div><div role="tabpanel" class="mat-horizontal-stepper-content mat-horizontal-stepper-content-next" id="cdk-stepper-5309-content-3" aria-labelledby="cdk-stepper-5309-label-3" inert><!----><!----><!----></div><div role="tabpanel" class="mat-horizontal-stepper-content mat-horizontal-stepper-content-next" id="cdk-stepper-5309-content-4" aria-labelledby="cdk-stepper-5309-label-4" inert><!----><!----><!----></div><!----></div></div><!----><!----><!----><!----></mat-stepper><!----><!----><!----><!----></div><router-outlet></router-outlet><app-smart-save-address _nghost-ng-c728828513 ngh="13"><div _ngcontent-ng-c728828513 class="card-border flex flex-col md:flex-row w-full overflow-hidden md:h-[680px]"><div _ngcontent-ng-c728828513 class="w-full md:w-1/2 relative"><div _ngcontent-ng-c728828513 id="map-plugin" class="h-[300px] md:h-full"></div></div><div _ngcontent-ng-c728828513 class="w-full md:w-1/2 bg-white p-8 flex justify-center"><div _ngcontent-ng-c728828513 data-frmcontainer="smart save | home address" class="w-full p-6 flex flex-col justify-center lg:p-14"><h2 _ngcontent-ng-c728828513 class="mb-2.5"> Home address <mat-icon _ngcontent-ng-c728828513 role="img" color="primary" class="mat-icon notranslate mat-mdc-tooltip-trigger mr-4 align-middle material-icons mat-ligature-font mat-primary" aria-hidden="true" data-mat-icon-type="font" ngh="11"> info_outlined </mat-icon><!----></h2><div _ngcontent-ng-c728828513 class="mb-6"><p _ngcontent-ng-c728828513 class="text-base text-gray-500">
1604 Let's get started. Please enter your home address. </p></div><div _ngcontent-ng-c728828513 class="control-container mb-4"><label _ngcontent-ng-c728828513>Home Address</label><input _ngcontent-ng-c728828513 id="search-plugin" matinput placeholder="Enter your home address" type="text" class="mat-mdc-input-element mat-input-server ng-untouched ng-pristine ng-invalid" value required aria-required="true"></div><div _ngcontent-ng-c728828513 class="flex flex-col-reverse w-full items-center gap-4 md:flex-row md:justify-end relative"><button _ngcontent-ng-c728828513 color="primary" mat-flat-button data-intent="navigational" data-scope="button" data-id="link_content" data-text="home address | next button click" class="mdc-button mat-mdc-button-base reactive w-full md:w-5/12 mdc-button--unelevated mat-mdc-unelevated-button mat-primary mat-mdc-button-disabled _mat-animation-noopable" mat-ripple-loader-uninitialized mat-ripple-loader-class-name="mat-mdc-button-ripple" mat-ripple-loader-disabled disabled="true" ngh="12"><span class="mat-mdc-button-persistent-ripple mdc-button__ripple"></span><span class="mdc-button__label"> Next </span><span class="mat-focus-indicator"></span><span class="mat-mdc-button-touch-target"></span></button><!----><!----></div></div></div></div></app-smart-save-address><!----></app-smart-safe-home-page><!----></div></div></app-page><!----><app-footer _nghost-ng-c3447975459 ngh="11"><div _ngcontent-ng-c3447975459 class="mat-toolbar"><div _ngcontent-ng-c3447975459 class="w-full grid grid-rows-1 md:grid-cols-2"><div _ngcontent-ng-c3447975459 class="first-half-footer md:h-[288px]"><div _ngcontent-ng-c3447975459 class="w-full min-[1200px]:w-[600px] py-6 px-3 md:pt-12 md:pb-4 md:px-6 md:justify-self-end"><p _ngcontent-ng-c3447975459 class="mat-headline-5 !text-[20px] md:!text-[28px]">Get in touch</p><div _ngcontent-ng-c3447975459 class="flex flex-col sm:grid sm:grid-cols-[150px_1fr] gap-2"><div _ngcontent-ng-c3447975459 class="grid-item text-[12px] sm:self-end"> LookSee Customer Care </div><div _ngcontent-ng-c3447975459 class="grid-item md:text-base"><a _ngcontent-ng-c3447975459 href="tel: 086 0748 886" class="no-underline text-white hover:underline md:text-[20px]">086 074 8886</a></div><div _ngcontent-ng-c3447975459 class="grid-item text-[12px] sm:self-end">WhatsApp us on</div><div _ngcontent-ng-c3447975459 class="grid-item md:text-base"><a _ngcontent-ng-c3447975459 href="tel: 073 243 0182" class="no-underline text-white hover:underline md:text-[20px]">073 243 0182</a></div><div _ngcontent-ng-c3447975459 class="grid-item text-[12px] sm:self-end">EMAIL</div><div _ngcontent-ng-c3447975459 class="grid-item text-base md:text-[20px]"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0fcdfdfdbe3d5d5f0c3c4d1ded4d1c2d4d2d1dedb9ed3df9ecad1">[email protected]</a> </div></div></div></div><div _ngcontent-ng-c3447975459 class="py-6 px-3 md:pt-12 md:pb-4 md:px-6 bg-white"><p _ngcontent-ng-c3447975459 class="mat-headline-5 !text-[20px] md:!text-[28px]"> Products and Services </p><a _ngcontent-ng-c3447975459 data-id="link_content" data-intent="navigational" data-scope="link" data-text="footer | SMART SAVE link click" class="mat-body-1" href>Smart save <mat-icon _ngcontent-ng-c3447975459 role="img" fonticon="chevron_right" class="mat-icon notranslate max-md:!hidden material-icons mat-ligature-font mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font" data-mat-icon-name="chevron_right" ngh="11"></mat-icon></a><a _ngcontent-ng-c3447975459 data-id="link_content" data-intent="navigational" data-scope="link" data-text="footer | SOLAR JOURNEY link click" class="mat-body-1" href>Home solar solutions <mat-icon _ngcontent-ng-c3447975459 role="img" fonticon="chevron_right" class="mat-icon notranslate max-md:!hidden material-icons mat-ligature-font mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font" data-mat-icon-name="chevron_right" ngh="11"></mat-icon></a><a _ngcontent-ng-c3447975459 data-id="link_content" data-intent="navigational" data-scope="link" data-text="footer | SOLAR JOURNEY link click" class="mat-body-1" href>Water heating solutions <mat-icon _ngcontent-ng-c3447975459 role="img" fonticon="chevron_right" class="mat-icon notranslate max-md:!hidden material-icons mat-ligature-font mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font" data-mat-icon-name="chevron_right" ngh="11"></mat-icon></a><a _ngcontent-ng-c3447975459 data-id="link_content" data-intent="navigational" data-scope="link" data-text="footer | FINANCE SOLUTIONS link click" class="mat-body-1" href>Finance solutions <mat-icon _ngcontent-ng-c3447975459 role="img" fonticon="chevron_right" class="mat-icon notranslate max-md:!hidden material-icons mat-ligature-font mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font" data-mat-icon-name="chevron_right" ngh="11"></mat-icon></a></div><div _ngcontent-ng-c3447975459 class="bg-solid-dark-blue md:col-start-1 md:col-end-3 text-white text-sm"><div _ngcontent-ng-c3447975459 class="grid md:grid-cols-[8fr_4fr] max-w-[1200px] mx-auto pt-7 pb-6 gap-5 px-3 min-[1200px]:px-0 md:h-[141px]"><div _ngcontent-ng-c3447975459 class="flex justify-between items-center md:row-start-1 md:col-start-2 md:row-end-3 md:gap-4 md:justify-end"><div _ngcontent-ng-c3447975459>
1604<a _ngcontent-ng-c3447975459 target="_blank" href="https://www.linkedin.com/company/standard-bank-south-africa/"><img _ngcontent-ng-c3447975459 src="/static/looksee/assets/images/linkedIn-icon.svg"></a></div><div _ngcontent-ng-c3447975459><a _ngcontent-ng-c3447975459 target="_blank" href="https://www.youtube.com/channel/UC_oz5no5MIucu45I4PO9nCQ"><img _ngcontent-ng-c3447975459 src="/static/looksee/assets/images/youtube-icon.svg"></a></div><div _ngcontent-ng-c3447975459><a _ngcontent-ng-c3447975459 target="_blank" href="https://www.facebook.com/StandardBankSA"><img _ngcontent-ng-c3447975459 src="/static/looksee/assets/images/facebook-icon.svg"></a></div><div _ngcontent-ng-c3447975459><a _ngcontent-ng-c3447975459 target="_blank" href="https://x.com/standardbankza"><img _ngcontent-ng-c3447975459 src="/static/looksee/assets/images/twitter-icon.svg"></a></div></div><div _ngcontent-ng-c3447975459 class="flex flex-col gap-4 sm:flex-row sm:gap-6 justify-between md:justify-start"><div _ngcontent-ng-c3447975459><a _ngcontent-ng-c3447975459 target="_blank" data-id="link_content" data-intent="navigational" data-scope="link" data-text="footer | PLATFORM TERMS AND CONDITIONS link" class="no-underline !text-white" href> Terms and Conditions </a></div><div _ngcontent-ng-c3447975459><a _ngcontent-ng-c3447975459 target="_blank" data-id="link_content" data-intent="navigational" data-scope="link" data-text="footer | PRIVACY POLICY link click" class="no-underline !text-white" href> Privacy Policy </a></div><div _ngcontent-ng-c3447975459><a _ngcontent-ng-c3447975459 target="_blank" data-id="link_content" data-intent="navigational" data-scope="link" data-text="footer | MANAGE COOKIES link click" class="no-underline !text-white" href> Manage Cookies </a></div><div _ngcontent-ng-c3447975459><a _ngcontent-ng-c3447975459 target="_blank" data-id="link_content" data-intent="navigational" data-scope="link" data-text="footer | CODE OF CONDUCT link click" class="no-underline !text-white" href> Code of Conduct </a></div></div><div _ngcontent-ng-c3447975459 class="text-[13px] md:text-[15px]"> Standard Bank is a licensed financial services provider in terms of the Financial Advisory and Intermediary Services Act and a registered credit provider in terms of the National Credit Act, registration number NCRCP15 </div></div></div></div></div></app-footer></app-root> 1605 <link rel="modulepreload" href="/static/looksee/chunk-MKCTS5I4.js"><link rel="modulepreload" href="/static/looksee/chunk-XQN3OU4T.js">
vendor: 108 bytes, line 1605
1605<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1605<script src="/static/looksee/polyfills-ED6LRYKL.js" type="module"></script>
1605<script src="/static/looksee/main-43ZX3XIC.js" type="module"></script>
1605 1606
1607<script id="ng-state" type="application/json">{"__nghData__":[{"t":{"0":"t4"},"c":{"0":[]}},{"t":{"2":"t0","8":"t1","9":"t2","10":"t3"},"c":{"2":[],"8":[],"9":[],"10":[]},"d":[13,14,15,16,17,18]},{"t":{"0":"t6"},"c":{"0":[]}},{"t":{"1":"t7","2":"t8","3":"t9"},"c":{"1":[{"i":"t7","r":1,"t":{"2":"t10"},"c":{"2":[{"i":"t10","r":1,"t":{"1":"t11","2":"t12","3":"t18"},"c":{"1":[],"2":[{"i":"t12","r":7,"t":{"0":"t13","1":"t14","2":"t16"},"c":{"0":[],"1":[{"i":"t14","r":3,"t":{"0":"t15"},"c":{"0":[{"i":"t16","r":2,"t":{"0":"t17"},"c":{"0":[{"i":"t17","r":1}]}}]}}],"2":[]}}],"3":[]},"x":3},{"i":"t10","r":1,"t":{"1":"t11","2":"t12","3":"t18"},"c":{"1":[{"i":"t11","r":2,"t":{"0":"t19"},"c":{"0":[{"i":"t18","r":1}]}}],"2":[],"3":[]}}]}}],"2":[],"3":[]}},{"t":{"3":"t49","4":"t51","6":"t52","7":"t54","8":"t55","9":"t56"},"c":{"3":[],"4":[{"i":"t51","r":3,"t":{"0":"t58","1":"t59"},"c":{"0":[{"i":"t58","r":1}],"1":[]}}],"6":[{"i":"t52","r":1,"c":{"1":[{"i":"t75","r":1}]}}],"7":[],"8":[],"9":[]}},{"t":{"3":"t49","4":"t51","6":"t52","7":"t54","8":"t55","9":"t56"},"c":{"3":[],"4":[{"i":"t51","r":3,"t":{"0":"t58","1":"t59"},"c":{"0":[{"i":"t58","r":1}],"1":[]}}],"6":[{"i":"t52","r":1,"c":{"1":[{"i":"t76","r":1}]}}],"7":[],"8":[],"9":[]}},{"t":{"3":"t49","4":"t51","6":"t52","7":"t54","8":"t55","9":"t56"},"c":{"3":[],"4":[{"i":"t51","r":3,"t":{"0":"t58","1":"t59"},"c":{"0":[{"i":"t58","r":1}],"1":[]}}],"6":[{"i":"t52","r":1,"c":{"1":[{"i":"t77","r":1}]}}],"7":[],"8":[],"9":[]}},{"t":{"3":"t49","4":"t51","6":"t52","7":"t54","8":"t55","9":"t56"},"c":{"3":[],"4":[{"i":"t51","r":3,"t":{"0":"t58","1":"t59"},"c":{"0":[{"i":"t58","r":1}],"1":[]}}],"6":[{"i":"t52","r":1,"c":{"1":[{"i":"t78","r":1}]}}],"7":[],"8":[],"9":[]}},{"t":{"3":"t49","4":"t51","6":"t52","7":"t54","8":"t55","9":"t56"},"c":{"3":[],"4":[{"i":"t51","r":3,"t":{"0":"t58","1":"t59"},"c":{"0":[{"i":"t58","r":1}],"1":[]}}],"6":[{"i":"t52","r":1,"c":{"1":[{"i":"t79","r":1}]}}],"7":[],"8":[],"9":[]}},{"t":{"0":"t42","1":"t43","2":"t65","3":"t48","5":"t46"},"c":{"0":[{"i":"t42","r":10}],"1":[{"i":"t43","r":1,"t":{"1":"t44","2":"t45","5":"t62"},"c":{"1":[],"2":[{"i":"t45","r":2,"c":{"0":[{"i":"t46","r":1,"t":{"2":"t47"},"c":{"2":[{"i":"t47","r":4,"c":{"0":[{"i":"t48","r":1}],"1":[{"i":"t57","r":1}]},"t":{"1":"t57"},"x":4},{"i":"t47","r":3,"c":{"0":[{"i":"t48","r":1}],"1":[]},"t":{"1":"t57"}}]}}]}}],"5":[{"i":"t62","r":1,"c":{"2":[{"i":"t63","r":2,"n":{"1":"hn11fn4f2n"},"t":{"1":"t64"},"c":{"1":[]}}]}},{"i":"t62","r":1,"c":{"2":[{"i":"t63","r":2,"n":{"1":"hn9fn4fnfn"},"t":{"1":"t64"},"c":{"1":[]}}]}},{"i":"t62","r":1,"c":{"2":[{"i":"t63","r":2,"n":{"1":"hn7fn4fn2fn"},"t":{"1":"t64"},"c":{"1":[]}}]}},{"i":"t62","r":1,"c":{"2":[{"i":"t63","r":2,"n":{"1":"hn5fn4fn3fn"},"t":{"1":"t64"},"c":{"1":[]}}]}},{"i":"t62","r":1,"c":{"2":[{"i":"t63","r":2,"n":{"1":"hn3fn4fn4fn"},"t":{"1":"t64"},"c":{"1":[]}}]}}]}}],"2":[],"3":[],"5":[]}},{"t":{"0":"t63"},"c":{"0":[]}},{},{"n":{"2":"hfn","5":"hfn2"}},{"n":{"8":"7f"},"c":{"7":[],"17":[{"i":"t81","r":1,"n":{"1":"0fnf"}}],"18":[]},"t":{"17":"t81","18":"t82"}},{"t":{"1":"t71","2":"t72","3":"t80","5":"t74"},"c":{"1":[],"2":[{"i":"t72","r":2,"t":{"0":"t73"},"c":{"0":[{"i":"t74","r":1,"n":{"1":"0f","2":"1n11fn4f2","4":"3n9fn4fnf","6":"5n7fn4fn2f","8":"7n5fn4fn3f","10":"9n3fn4fn4f"},"c":{"1":[],"2":[],"3":[],"4":[],"5":[],"6":[],"7":[],"8":[],"9":[],"10":[]},"t":{"2":"t75","4":"t76","6":"t77","8":"t78","10":"t79"}}]}}],"3":[],"5":[],"7":[{"i":"c728828513","r":1}]}},{"c":{"5":[{"i":"c3475357835","r":1}]}},{"t":{"1":"t5"},"c":{"1":[],"3":[{"i":"c4258730666","r":1}]}}]}</script>
1607</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.