cats-ui-lib 2.2.16 → 2.2.17

package/fesm2022/cats-ui-lib.mjs

@@ -4303,19 +4303,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 class HeaderComponent {
     headerConfig;
     dropdownItems = [];
+    selectedDropdownItem;
     onDropdownSelection = new EventEmitter();
     profileOpen = false;
     dropdownOpen = false;
     selectedItem;
-    ngOnInit() {
-        if (this.dropdownItems.length) {
+    ngOnChanges(changes) {
+        if (changes['selectedDropdownItem']?.currentValue) {
+            this.selectedItem = changes['selectedDropdownItem'].currentValue;
+        }
+        else if (!this.selectedItem && this.dropdownItems.length) {
             this.selectedItem = this.dropdownItems[0];
         }
     }
     onSelect(item) {
         this.selectedItem = item;
         this.dropdownOpen = false;
-        this.onDropdownSelection.emit(this.selectedItem);
+        this.onDropdownSelection.emit(item);
     }
     toggleMenu() {
         this.profileOpen = !this.profileOpen;
@@ -4327,7 +4331,7 @@ class HeaderComponent {
         this.profileOpen = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: HeaderComponent, isStandalone: true, selector: "cats-ui-header", inputs: { headerConfig: "headerConfig", dropdownItems: "dropdownItems" }, outputs: { onDropdownSelection: "onDropdownSelection" }, ngImport: i0, template: "<header class=\"app-header\">\r\n  <!-- Left Section -->\r\n  <div class=\"header-left\">\r\n    <!-- <button class=\"app-launcher\" aria-label=\"App Launcher\">\r\n      <span class=\"grid-icon\"></span>\r\n    </button> -->\r\n    <img src=\"images/Waffle.svg\" alt=\"\" />\r\n    <img [src]=\"headerConfig.brandLogo\" alt=\"Brand Logo\" class=\"brand-logo\" />\r\n\r\n    <img\r\n      [src]=\"headerConfig.productLogo\"\r\n      alt=\"Product Logo\"\r\n      class=\"product-logo\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Right Section -->\r\n  <div class=\"header-right\">\r\n    @if (headerConfig.showGlobalIcon) {\r\n      <img src=\"images/global-logo.svg\" alt=\"\" />\r\n    }\r\n\r\n    <img src=\"images/nodification.svg\" alt=\"\" class=\"icon-btn notification\" />\r\n    @if (headerConfig.showDropdown && dropdownItems.length) {\r\n      <div class=\"dropdown control-panel\">\r\n        <div class=\"dropdown-trigger\" (click)=\"toggleDropdown()\">\r\n          <span>{{ selectedItem.label }}</span>\r\n          <span>\r\n            <img src=\"images/chevron-down-white.svg\" alt=\"\" />\r\n          </span>\r\n        </div>\r\n        @if (dropdownOpen) {\r\n          <div class=\"dropdown-panel\">\r\n            <ul>\r\n              @for (item of dropdownItems; track item) {\r\n                <li (click)=\"onSelect(item)\">{{ item.label }}</li>\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @if (headerConfig.showAiAgent) {\r\n      <div class=\"ai-agent\">\r\n        <img src=\"images/star-yellow.svg\" alt=\"\" />\r\n        <span class=\"ai-agent-btn\"> AI Agent</span>\r\n      </div>\r\n    }\r\n    <div class=\"profile\">\r\n      <div class=\"profile-wrapper\" (click)=\"toggleMenu()\">\r\n        <img src=\"images/user-image.svg\" alt=\"User\" />\r\n        <div class=\"profile-info\">\r\n          <span class=\"name textTruncate\">Maximillian Thomas Broadwater</span>\r\n          <span class=\"role textTruncate\">Super Admin User</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (profileOpen) {\r\n        <div class=\"loggedin-profile-list\">\r\n          <!-- profile start -->\r\n\r\n          <div class=\"profile-box\">\r\n            <div class=\"for-edit-icon\">\r\n              <img src=\"images/user-image.svg\" class=\"profile-img\" />\r\n              <img src=\"images/edit.svg\" alt=\"edit\" class=\"on-hover\" />\r\n            </div>\r\n\r\n            <div>\r\n              <div class=\"profile-heading textTruncate\">John Doe</div>\r\n              <div class=\"profile-txt textTruncate\">Admin</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"switch-box\">\r\n            <div class=\"switch-role\">\r\n              <img src=\"images/users-01.svg\" class=\"edit-img\" />\r\n              <div class=\"switch-txt\">Switch Role</div>\r\n\r\n              <!-- drop down -->\r\n              <div class=\"switching-role-dropdown\">\r\n                <div class=\"text-title\">Switch Role</div>\r\n\r\n                <div class=\"item-list active\">\r\n                  <input\r\n                    class=\"radio-input\"\r\n                    checked\r\n                    type=\"radio\"\r\n                    name=\"tracking\"\r\n                  />\r\n                  <span class=\"text\">Admin</span>\r\n                </div>\r\n\r\n                <div class=\"item-list\">\r\n                  <input class=\"radio-input\" type=\"radio\" name=\"tracking\" />\r\n                  <span class=\"text\">User</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"right-side-arrow\">\r\n              <img src=\"images/chevron-right-blue.svg\" alt=\"chevron-right\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"switch-box\">\r\n            <div class=\"switch-role\">\r\n              <img src=\"images/building-07.svg\" class=\"edit-img\" />\r\n              <div class=\"switch-txt\">Switch Environment</div>\r\n            </div>\r\n\r\n            <div class=\"right-side-arrow\">\r\n              <img src=\"images/chevron-right-blue.svg\" alt=\"chevron-right\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"preference-txt\">Identity & Access</div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img class=\"fix-img-size\" src=\"images/user.svg\" alt=\"user\" />\r\n              <div class=\"txt-align\">My Profile</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/key-01.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Change Password</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"preference-txt\">Account & Preferences</div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/shield.svg\" alt=\"bell\" />\r\n              <div class=\"txt-align\">Account & Security</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box preference-dropdown-txt\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/settings-04.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Preference</div>\r\n\r\n              <!-- dropdown -->\r\n              <div class=\"preference-section\">\r\n                <div class=\"preference-dropdown\">\r\n                  <!-- Language -->\r\n                  <div class=\"language-dropdown\">\r\n                    <div class=\"preference-dropdown-item\">\r\n                      <div class=\"text\">Languages</div>\r\n                      <img src=\"images/chevron-right.svg\" alt=\"chevron-right\" />\r\n                    </div>\r\n\r\n                    <div class=\"language-section-wrapper\">\r\n                      <div class=\"language-heading\">\r\n                        <span>Change Language</span>\r\n                      </div>\r\n                      <div class=\"input-search-wrapper\">\r\n                        <div class=\"input-search\">\r\n                          <img src=\"images/search.svg\" alt=\"\" />\r\n                          <input type=\"text\" placeholder=\"Enter or Search\" />\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"language-section\">\r\n                        <div class=\"language-item\">\r\n                          <img src=\"images/spanish-flag.svg\" alt=\"\" />\r\n                          <span>English</span>\r\n                        </div>\r\n                        <div class=\"language-item\">\r\n                          <img src=\"images/spanish-flag.svg\" alt=\"\" />\r\n                          <span>English</span>\r\n                        </div>\r\n                        <div class=\"language-item\">\r\n                          <img src=\"images/spanish-flag.svg\" alt=\"\" />\r\n                          <span>English</span>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"language-footer\">\r\n                        <button class=\"reset\">Reset</button>\r\n                        <button class=\"apply\">Apply</button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <!-- Timezone -->\r\n                  <div class=\"timezone-dropdown\">\r\n                    <div class=\"preference-dropdown-item\">\r\n                      <div class=\"text\">Timezone</div>\r\n                      <img src=\"images/chevron-right.svg\" alt=\"chevron-right\" />\r\n                    </div>\r\n\r\n                    <div class=\"timezone-section-wrapper\">\r\n                      <div class=\"timezone-heading\">\r\n                        <span>Change Timezone</span>\r\n                      </div>\r\n                      <div class=\"input-search-wrapper\">\r\n                        <div class=\"input-search\">\r\n                          <img src=\"images/search.svg\" alt=\"\" />\r\n                          <input type=\"text\" placeholder=\"Enter or Search\" />\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"timezone-section\">\r\n                        <div class=\"timezone-dropdown-item\">\r\n                          <input type=\"radio\" name=\"timezone\" />\r\n                          <span class=\"bold-text\">\r\n                            Nouakchott\r\n                            <span class=\"light-text\">(GMT+00:00)</span>\r\n                          </span>\r\n                        </div>\r\n\r\n                        <div class=\"timezone-dropdown-item\">\r\n                          <input type=\"radio\" name=\"timezone\" />\r\n                          <span class=\"bold-text\">\r\n                            Beirut <span class=\"light-text\">(GMT+02:00)</span>\r\n                          </span>\r\n                        </div>\r\n\r\n                        <div class=\"timezone-dropdown-item\">\r\n                          <input type=\"radio\" name=\"timezone\" />\r\n                          <span class=\"bold-text\">\r\n                            Kuwait, Riyadh\r\n                            <span class=\"light-text\">(GMT+03:00)</span>\r\n                          </span>\r\n                        </div>\r\n\r\n                        <div class=\"timezone-dropdown-item\">\r\n                          <input type=\"radio\" name=\"timezone\" checked />\r\n                          <span class=\"bold-text\">\r\n                            Kolkata, India\r\n                            <span class=\"light-text\">(GMT+05:30)</span>\r\n                          </span>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"timezone-footer\">\r\n                        <button class=\"reset\">Reset</button>\r\n                        <button class=\"apply\">Apply</button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <img src=\"images/chevron-right.svg\" alt=\"chevron-right\" />\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/bell.svg\" alt=\"bell\" />\r\n              <div class=\"txt-align\">Notification Settings</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"preference-txt\">Help & Support</div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/file-check-02.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Knowledge Base</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/help-circle.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Help/Support Center</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/info.svg\" alt=\"info\" />\r\n              <div class=\"txt-align\">Report Issue</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/message-smile-square.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Feedback</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"preference-txt\">System</div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/settings.svg\" alt=\"settings\" />\r\n              <div class=\"txt-align\">Settings</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/clock-refresh.svg\" alt=\"info\" />\r\n              <div class=\"txt-align\">\r\n                About <span class=\"light-grey\">(Version 2.14.3)</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/log-out-04.svg\" alt=\"log-out\" class=\"red\" />\r\n              <div class=\"txt-align red\">Sign Out</div>\r\n            </div>\r\n\r\n            <div class=\"right-side-arrow\">\r\n              <img src=\"images/chevron-right-red.svg\" alt=\"chevron-right\" />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- profile end  -->\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [":root{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-top:0;border-left:0}.cats-badge-wrapper{width:fit-content;height:auto;max-width:calc(20.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-primary);padding:calc(.25rem / var(--scale)) calc(.5833333333rem / var(--scale));transition:all ease .15s}.cats-badge-wrapper.green{border-color:var(--border-semantics-green);background-color:var(--surface-contextual-green);color:var(--semantics-success-strong)}.cats-badge-wrapper.yellow{border-color:var(--border-semantics-yellow);background-color:var(--surface-contextual-yellow);color:var(--semantics-warning-strong)}.cats-badge-wrapper.red{border-color:var(--border-decorative-amber-brown);background-color:var(--surface-contextual-red);color:var(--semantics-error-strong)}.cats-badge-wrapper.blue{border-color:var(--text-link-muted);background-color:var(--blue-100);color:var(--text-link-hover)}.cats-badge-wrapper.strong-grey{border-color:var(--border-core-default);background-color:var(--surface-background-default);color:var(--text-body-primary)}.cats-badge-wrapper.orange{border-color:var(--border-decorative-orange);background-color:var(--surface-decorative-orange);color:var(--accent-orange-strong)}.cats-badge-wrapper.purple{border-color:var(--border-decorative-purple);background-color:var(--surface-decorative-purple);color:var(--accent-purple-strong)}.cats-badge-wrapper.teal{border-color:var(--border-decorative-teal);background-color:var(--surface-decorative-teal);color:var(--accent-teal-strong)}.cats-badge-wrapper.amber-brown{border-color:var(--border-decorative-amber-brown);background-color:var(--surface-decorative-amber-brown);color:var(--accent-amber-brown-strong)}.cats-badge-wrapper.sage-green{border-color:var(--border-decorative-sage-green);background-color:var(--surface-decorative-sage-green);color:var(--accent-sage-green-dark)}.cats-badge-wrapper.muted{border-color:var(--border-core-muted);background-color:var(--surface-background-default);color:var(--text-body-muted)}.cats-badge-wrapper.small{font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:400;padding:calc(.1666666667rem / var(--scale)) calc(.5833333333rem / var(--scale))}.cats-badge-wrapper.cats-rounded{border-radius:calc(3rem / var(--scale))}.cats-badge-wrapper.filled{border-color:transparent;color:var(--text-body-inversed);background-color:var(--text-heading-secondary)}.cats-badge-wrapper.filled.green{background-color:var(--semantics-success-default)}.cats-badge-wrapper.filled.yellow{background-color:var(--semantics-warning-strong)}.cats-badge-wrapper.filled.red{background-color:var(--semantics-error-strong)}.cats-badge-wrapper.filled.blue{background-color:var(--surface-action-default)}.cats-badge-wrapper.filled.strong-grey{background-color:var(--text-body-muted)}.cats-badge-wrapper.filled.orange{background-color:var(--accent-orange-strong)}.cats-badge-wrapper.filled.purple{background-color:var(--accent-purple-strong)}.cats-badge-wrapper.filled.teal{background-color:var(--accent-teal-strong)}.cats-badge-wrapper.filled.amber-brown{background-color:var(--accent-amber-brown-strong)}.cats-badge-wrapper.filled.sage-green{background-color:var(--accent-sage-green-dark)}.cats-badge-wrapper.filled.muted{background-color:var(--surface-background-default);color:var(--text-body-muted)}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.app-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding-right:calc(1.3333333333rem / var(--scale));height:calc(5.3333333333rem / var(--scale));background-color:var(--text-heading-primary)}.app-header .header-left{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0}.app-header .header-left .brand-logo,.app-header .header-left .product-logo{max-width:calc(12.6666666667rem / var(--scale))}.app-header .header-right{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.app-header .dropdown.control-panel{position:relative}.app-header .dropdown.control-panel .dropdown-trigger{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));min-width:calc(12.5rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--text-body-primary);border-radius:calc(.6666666667rem / var(--scale));background-color:#ffffff1a;color:var(--text-heading-inverse);cursor:pointer;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.app-header .dropdown.control-panel .dropdown-trigger:hover{background-color:var(--text-heading-secondary)}.app-header .dropdown.control-panel .dropdown-panel{position:absolute;width:100%;z-index:2;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));max-height:calc(10rem / var(--scale));overflow:auto;top:calc(5.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.app-header .dropdown.control-panel .dropdown-panel li{height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .ai-agent{width:calc(9.6666666667rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--text-heading-secondary);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:#ffffff1a;cursor:pointer}.app-header .ai-agent .ai-agent-btn{color:var(--semantics-warning-default);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .ai-agent:hover{background-color:var(--text-heading-secondary)}.app-header .profile{position:relative}.app-header .profile:has(.loggedin-profile-list) .profile-wrapper{border-color:var(--border-interaction-default)}.app-header .profile .profile-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale));cursor:pointer;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-inverted);border-radius:calc(.6666666667rem / var(--scale));background-color:#ffffff14}.app-header .profile .profile-wrapper:hover{background-color:var(--text-heading-secondary)}.app-header .profile .profile-wrapper img{width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));border-radius:50%}.app-header .profile .profile-wrapper .profile-info{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.app-header .profile .profile-wrapper .profile-info .name{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-inverse);max-width:calc(10rem / var(--scale))}.app-header .profile .profile-wrapper .profile-info .role{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:400;color:var(--border-interaction-default);max-width:calc(10rem / var(--scale))}.app-header .profile .loggedin-profile-list{position:absolute;right:calc(-1.3333333333rem / var(--scale));top:calc(5.3333333333rem / var(--scale));width:calc(30.9166666667rem / var(--scale));height:calc(70rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);display:flex;flex-direction:column;justify-content:center;align-items:\"\";flex-wrap:nowrap;gap:\"\";z-index:10}.app-header .profile .loggedin-profile-list .profile-box{padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .profile-box .for-edit-icon{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.app-header .profile .loggedin-profile-list .profile-box .for-edit-icon .profile-img{width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));border-radius:50%}.app-header .profile .loggedin-profile-list .profile-box .for-edit-icon .on-hover{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));position:absolute;display:none}.app-header .profile .loggedin-profile-list .profile-box .for-edit-icon:hover .on-hover{display:block}.app-header .profile .loggedin-profile-list .profile-box .profile-heading{color:var(--text-heading-primary);font-size:var(--fs-18);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;max-width:calc(23.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .profile-box .profile-txt{color:var(--text-body-secondary);font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:400;max-width:calc(23.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .for-border{margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:92%;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.app-header .profile .loggedin-profile-list .switch-box{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0}.app-header .profile .loggedin-profile-list .switch-box .switch-role{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));position:relative}.app-header .profile .loggedin-profile-list .switch-box .switch-role .edit-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switch-txt{color:var(--text-link-hover);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown{position:absolute;width:calc(20rem / var(--scale));max-height:calc(16.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);right:calc(9.6666666667rem / var(--scale));top:calc(-1.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:0;display:none}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .text-title{height:calc(3rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .item-list{height:calc(3rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .item-list .text{color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .item-list.active{background-color:var(--surface-background-blue)}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .item-list.active .text{color:var(--text-link-default)}.app-header .profile .loggedin-profile-list .switch-box .right-side-arrow img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .switch-box:hover{background-color:var(--surface-background-blue)}.app-header .profile .loggedin-profile-list .switch-box:hover .switch-role .switching-role-dropdown{display:flex}.app-header .profile .loggedin-profile-list .preference-txt{color:var(--text-body-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .txt-box{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;position:relative}.app-header .profile .loggedin-profile-list .txt-box:hover{background-color:var(--surface-background-blue)}.app-header .profile .loggedin-profile-list .txt-box .fix-space{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));position:relative}.app-header .profile .loggedin-profile-list .txt-box .fix-space .fix-img-size,.app-header .profile .loggedin-profile-list .txt-box .fix-space img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .txt-box .fix-space img.red{color:var(--semantics-error-strong)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .txt-align{color:var(--text-heading-primary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .profile .loggedin-profile-list .txt-box .fix-space .txt-align.red{color:var(--semantics-error-strong)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .txt-align .light-grey{color:var(--text-body-secondary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section{position:relative}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown{position:absolute;width:calc(14.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);right:calc(10rem / var(--scale));top:0;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:0;display:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .preference-dropdown-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));position:relative;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .preference-dropdown-item .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .preference-dropdown-item:hover{background-color:var(--surface-background-blue)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown{position:relative}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown:hover .language-section-wrapper{display:block}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper{position:absolute;z-index:10;padding:calc(.6666666667rem / var(--scale)) 0;width:calc(30.9166666667rem / var(--scale));background-color:var(--surface-background-canvas);top:calc(0rem / var(--scale));right:calc(14.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);display:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-heading{width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .input-search-wrapper{width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));padding-top:0}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .input-search-wrapper .input-search{width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .input-search-wrapper .input-search img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .input-search-wrapper .input-search input{background-color:transparent;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;border:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-section{max-height:calc(14rem / var(--scale));overflow-y:auto}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-section .language-item{width:100%;height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-footer{width:100%;height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-footer button{width:calc(7.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-footer button.reset{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong);border-radius:calc(.3333333333rem / var(--scale));background-color:transparent}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-footer button.apply{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-action-default);color:var(--text-heading-inverse)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown{position:relative}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown:hover .timezone-section-wrapper{display:block}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper{position:absolute;z-index:10;padding:calc(.6666666667rem / var(--scale)) 0;width:calc(30.9166666667rem / var(--scale));background-color:var(--surface-background-canvas);top:-100%;right:calc(14.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);display:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-heading{width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .input-search-wrapper{width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));padding-top:0}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .input-search-wrapper .input-search{width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .input-search-wrapper .input-search img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .input-search-wrapper .input-search input{background-color:transparent;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;border:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-section{max-height:calc(14rem / var(--scale));overflow-y:auto}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-section .timezone-dropdown-item{width:100%;height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-section .timezone-dropdown-item .bold-text .light-text{color:var(--text-body-secondary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-footer{width:100%;height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-footer button{width:calc(7.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-footer button.reset{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong);border-radius:calc(.3333333333rem / var(--scale));background-color:transparent}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-footer button.apply{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-action-default);color:var(--text-heading-inverse)}.app-header .profile .loggedin-profile-list .txt-box.preference-dropdown-txt:hover .preference-section .preference-dropdown{display:block}.app-header .profile .loggedin-profile-list .txt-box img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: HeaderComponent, isStandalone: true, selector: "cats-ui-header", inputs: { headerConfig: "headerConfig", dropdownItems: "dropdownItems", selectedDropdownItem: "selectedDropdownItem" }, outputs: { onDropdownSelection: "onDropdownSelection" }, usesOnChanges: true, ngImport: i0, template: "<header class=\"app-header\">\r\n  <!-- Left Section -->\r\n  <div class=\"header-left\">\r\n    <!-- <button class=\"app-launcher\" aria-label=\"App Launcher\">\r\n      <span class=\"grid-icon\"></span>\r\n    </button> -->\r\n    <img src=\"images/Waffle.svg\" alt=\"\" />\r\n    <img [src]=\"headerConfig.brandLogo\" alt=\"Brand Logo\" class=\"brand-logo\" />\r\n\r\n    <img\r\n      [src]=\"headerConfig.productLogo\"\r\n      alt=\"Product Logo\"\r\n      class=\"product-logo\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Right Section -->\r\n  <div class=\"header-right\">\r\n    @if (headerConfig.showGlobalIcon) {\r\n      <img src=\"images/global-logo.svg\" alt=\"\" />\r\n    }\r\n\r\n    <img src=\"images/nodification.svg\" alt=\"\" class=\"icon-btn notification\" />\r\n    @if (headerConfig.showDropdown && dropdownItems.length) {\r\n      <div class=\"dropdown control-panel\">\r\n        <div class=\"dropdown-trigger\" (click)=\"toggleDropdown()\">\r\n          <span>{{ selectedItem.label }}</span>\r\n          <span>\r\n            <img src=\"images/chevron-down-white.svg\" alt=\"\" />\r\n          </span>\r\n        </div>\r\n        @if (dropdownOpen) {\r\n          <div class=\"dropdown-panel\">\r\n            <ul>\r\n              @for (item of dropdownItems; track item) {\r\n                <li (click)=\"onSelect(item)\">{{ item.label }}</li>\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @if (headerConfig.showAiAgent) {\r\n      <div class=\"ai-agent\">\r\n        <img src=\"images/star-yellow.svg\" alt=\"\" />\r\n        <span class=\"ai-agent-btn\"> AI Agent</span>\r\n      </div>\r\n    }\r\n    <div class=\"profile\">\r\n      <div class=\"profile-wrapper\" (click)=\"toggleMenu()\">\r\n        <img src=\"images/user-image.svg\" alt=\"User\" />\r\n        <div class=\"profile-info\">\r\n          <span class=\"name textTruncate\">Maximillian Thomas Broadwater</span>\r\n          <span class=\"role textTruncate\">Super Admin User</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (profileOpen) {\r\n        <div class=\"loggedin-profile-list\">\r\n          <!-- profile start -->\r\n\r\n          <div class=\"profile-box\">\r\n            <div class=\"for-edit-icon\">\r\n              <img src=\"images/user-image.svg\" class=\"profile-img\" />\r\n              <img src=\"images/edit.svg\" alt=\"edit\" class=\"on-hover\" />\r\n            </div>\r\n\r\n            <div>\r\n              <div class=\"profile-heading textTruncate\">John Doe</div>\r\n              <div class=\"profile-txt textTruncate\">Admin</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"switch-box\">\r\n            <div class=\"switch-role\">\r\n              <img src=\"images/users-01.svg\" class=\"edit-img\" />\r\n              <div class=\"switch-txt\">Switch Role</div>\r\n\r\n              <!-- drop down -->\r\n              <div class=\"switching-role-dropdown\">\r\n                <div class=\"text-title\">Switch Role</div>\r\n\r\n                <div class=\"item-list active\">\r\n                  <input\r\n                    class=\"radio-input\"\r\n                    checked\r\n                    type=\"radio\"\r\n                    name=\"tracking\"\r\n                  />\r\n                  <span class=\"text\">Admin</span>\r\n                </div>\r\n\r\n                <div class=\"item-list\">\r\n                  <input class=\"radio-input\" type=\"radio\" name=\"tracking\" />\r\n                  <span class=\"text\">User</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"right-side-arrow\">\r\n              <img src=\"images/chevron-right-blue.svg\" alt=\"chevron-right\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"switch-box\">\r\n            <div class=\"switch-role\">\r\n              <img src=\"images/building-07.svg\" class=\"edit-img\" />\r\n              <div class=\"switch-txt\">Switch Environment</div>\r\n            </div>\r\n\r\n            <div class=\"right-side-arrow\">\r\n              <img src=\"images/chevron-right-blue.svg\" alt=\"chevron-right\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"preference-txt\">Identity & Access</div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img class=\"fix-img-size\" src=\"images/user.svg\" alt=\"user\" />\r\n              <div class=\"txt-align\">My Profile</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/key-01.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Change Password</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"preference-txt\">Account & Preferences</div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/shield.svg\" alt=\"bell\" />\r\n              <div class=\"txt-align\">Account & Security</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box preference-dropdown-txt\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/settings-04.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Preference</div>\r\n\r\n              <!-- dropdown -->\r\n              <div class=\"preference-section\">\r\n                <div class=\"preference-dropdown\">\r\n                  <!-- Language -->\r\n                  <div class=\"language-dropdown\">\r\n                    <div class=\"preference-dropdown-item\">\r\n                      <div class=\"text\">Languages</div>\r\n                      <img src=\"images/chevron-right.svg\" alt=\"chevron-right\" />\r\n                    </div>\r\n\r\n                    <div class=\"language-section-wrapper\">\r\n                      <div class=\"language-heading\">\r\n                        <span>Change Language</span>\r\n                      </div>\r\n                      <div class=\"input-search-wrapper\">\r\n                        <div class=\"input-search\">\r\n                          <img src=\"images/search.svg\" alt=\"\" />\r\n                          <input type=\"text\" placeholder=\"Enter or Search\" />\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"language-section\">\r\n                        <div class=\"language-item\">\r\n                          <img src=\"images/spanish-flag.svg\" alt=\"\" />\r\n                          <span>English</span>\r\n                        </div>\r\n                        <div class=\"language-item\">\r\n                          <img src=\"images/spanish-flag.svg\" alt=\"\" />\r\n                          <span>English</span>\r\n                        </div>\r\n                        <div class=\"language-item\">\r\n                          <img src=\"images/spanish-flag.svg\" alt=\"\" />\r\n                          <span>English</span>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"language-footer\">\r\n                        <button class=\"reset\">Reset</button>\r\n                        <button class=\"apply\">Apply</button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <!-- Timezone -->\r\n                  <div class=\"timezone-dropdown\">\r\n                    <div class=\"preference-dropdown-item\">\r\n                      <div class=\"text\">Timezone</div>\r\n                      <img src=\"images/chevron-right.svg\" alt=\"chevron-right\" />\r\n                    </div>\r\n\r\n                    <div class=\"timezone-section-wrapper\">\r\n                      <div class=\"timezone-heading\">\r\n                        <span>Change Timezone</span>\r\n                      </div>\r\n                      <div class=\"input-search-wrapper\">\r\n                        <div class=\"input-search\">\r\n                          <img src=\"images/search.svg\" alt=\"\" />\r\n                          <input type=\"text\" placeholder=\"Enter or Search\" />\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"timezone-section\">\r\n                        <div class=\"timezone-dropdown-item\">\r\n                          <input type=\"radio\" name=\"timezone\" />\r\n                          <span class=\"bold-text\">\r\n                            Nouakchott\r\n                            <span class=\"light-text\">(GMT+00:00)</span>\r\n                          </span>\r\n                        </div>\r\n\r\n                        <div class=\"timezone-dropdown-item\">\r\n                          <input type=\"radio\" name=\"timezone\" />\r\n                          <span class=\"bold-text\">\r\n                            Beirut <span class=\"light-text\">(GMT+02:00)</span>\r\n                          </span>\r\n                        </div>\r\n\r\n                        <div class=\"timezone-dropdown-item\">\r\n                          <input type=\"radio\" name=\"timezone\" />\r\n                          <span class=\"bold-text\">\r\n                            Kuwait, Riyadh\r\n                            <span class=\"light-text\">(GMT+03:00)</span>\r\n                          </span>\r\n                        </div>\r\n\r\n                        <div class=\"timezone-dropdown-item\">\r\n                          <input type=\"radio\" name=\"timezone\" checked />\r\n                          <span class=\"bold-text\">\r\n                            Kolkata, India\r\n                            <span class=\"light-text\">(GMT+05:30)</span>\r\n                          </span>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"timezone-footer\">\r\n                        <button class=\"reset\">Reset</button>\r\n                        <button class=\"apply\">Apply</button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <img src=\"images/chevron-right.svg\" alt=\"chevron-right\" />\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/bell.svg\" alt=\"bell\" />\r\n              <div class=\"txt-align\">Notification Settings</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"preference-txt\">Help & Support</div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/file-check-02.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Knowledge Base</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/help-circle.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Help/Support Center</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/info.svg\" alt=\"info\" />\r\n              <div class=\"txt-align\">Report Issue</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/message-smile-square.svg\" class=\"fix-img-size\" />\r\n              <div class=\"txt-align\">Feedback</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"preference-txt\">System</div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/settings.svg\" alt=\"settings\" />\r\n              <div class=\"txt-align\">Settings</div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/clock-refresh.svg\" alt=\"info\" />\r\n              <div class=\"txt-align\">\r\n                About <span class=\"light-grey\">(Version 2.14.3)</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"for-border\"></div>\r\n\r\n          <div class=\"txt-box\">\r\n            <div class=\"fix-space\">\r\n              <img src=\"images/log-out-04.svg\" alt=\"log-out\" class=\"red\" />\r\n              <div class=\"txt-align red\">Sign Out</div>\r\n            </div>\r\n\r\n            <div class=\"right-side-arrow\">\r\n              <img src=\"images/chevron-right-red.svg\" alt=\"chevron-right\" />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- profile end  -->\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [":root{--blue-100: #eaf3fd;--box-shadow: #0a0d1208;--box-shadow-200: #0a0d1214;--canvas-shadow: #00000014;--chunk-shadow: #0a0d120d;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}.pointer{cursor:pointer}.d-none{display:none}.textTruncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.cats-btn{border:calc(.0833333333rem / var(--scale)) solid transparent;padding:calc(1.0833333333rem / var(--scale)) calc(1.25rem / var(--scale));height:calc(4rem / var(--scale));min-width:calc(9rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer;transition:all .5s ease}button.cats-btn.only-icon{min-width:calc(4rem / var(--scale));padding:calc(.9166666667rem / var(--scale))}button.cats-btn img.btn-icon{width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}button.cats-btn.small{height:calc(2.6666666667rem / var(--scale));padding:calc(.4166666667rem / var(--scale)) calc(1.25rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}button.cats-btn.small img.btn-icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}button.cats-btn.primary-btn{background-color:var(--surface-action-default);color:var(--surface-background-canvas);border-color:var(--border-interaction-focus)}button.cats-btn.primary-btn:hover{background-color:var(--surface-action-hover);border-color:var(--surface-action-hover)}button.cats-btn.primary-btn:focus-visible,button.cats-btn.primary-btn:focus,button.cats-btn.primary-btn:focus-within{outline:calc(.1666666667rem / var(--scale)) solid var(--text-link-muted);border:0}button.cats-btn.secondary-btn{background-color:var(--surface-background-canvas);color:var(--text-body-primary);border-color:var(--border-core-strong)}button.cats-btn.secondary-btn:hover{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.secondary-btn:focus-visible,button.cats-btn.secondary-btn:focus,button.cats-btn.secondary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--border-core-muted);outline:0;border-color:var(--border-core-strong)}button.cats-btn.tertiary-btn{background-color:var(--surface-background-blue);border-color:var(--border-interaction-focus);color:var(--text-link-default)}button.cats-btn.tertiary-btn:hover{background-color:var(--blue-100)}button.cats-btn.tertiary-btn:focus-visible,button.cats-btn.tertiary-btn:focus,button.cats-btn.tertiary-btn:focus-within{box-shadow:0 0 0 calc(.1666666667rem / var(--scale)) var(--text-link-muted);outline:0;border-color:var(--border-interaction-focus)}button.cats-btn.link-btn{background-color:var(--surface-background-canvas);color:var(--text-link-default)}button.cats-btn.link-btn:hover{color:var(--text-link-hover)}button.cats-btn.link-btn:focus-visible,button.cats-btn.link-btn:focus,button.cats-btn.link-btn:focus-within{outline:0;border-color:0;background-color:var(--surface-background-blue)}button.cats-btn.link-btn.disable,button.cats-btn.link-btn:disabled{pointer-events:none;background:var(--surface-background-canvas);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid transparent}button.cats-btn.disable,button.cats-btn:disabled{pointer-events:none;background:var(--surface-background-default);color:var(--text-body-muted);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong)}button.cats-btn.disable img.btn-icon,button.cats-btn:disabled img.btn-icon{opacity:.2}.default-tooltip-class{position:relative;display:inline-block;padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));background:var(--surface-background-canvas);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-body-primary);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(1.25rem / var(--scale)) #00000026}.default-tooltip-class:before{content:\"\";position:absolute;top:calc(-.8333333333rem / var(--scale));left:50%;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas);transform:rotate(-135deg);box-shadow:calc(.3333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) #0000001a;border-radius:calc(.1666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-top:0;border-left:0}.cats-badge-wrapper{width:fit-content;height:auto;max-width:calc(20.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-primary);padding:calc(.25rem / var(--scale)) calc(.5833333333rem / var(--scale));transition:all ease .15s}.cats-badge-wrapper.green{border-color:var(--border-semantics-green);background-color:var(--surface-contextual-green);color:var(--semantics-success-strong)}.cats-badge-wrapper.yellow{border-color:var(--border-semantics-yellow);background-color:var(--surface-contextual-yellow);color:var(--semantics-warning-strong)}.cats-badge-wrapper.red{border-color:var(--border-decorative-amber-brown);background-color:var(--surface-contextual-red);color:var(--semantics-error-strong)}.cats-badge-wrapper.blue{border-color:var(--text-link-muted);background-color:var(--blue-100);color:var(--text-link-hover)}.cats-badge-wrapper.strong-grey{border-color:var(--border-core-default);background-color:var(--surface-background-default);color:var(--text-body-primary)}.cats-badge-wrapper.orange{border-color:var(--border-decorative-orange);background-color:var(--surface-decorative-orange);color:var(--accent-orange-strong)}.cats-badge-wrapper.purple{border-color:var(--border-decorative-purple);background-color:var(--surface-decorative-purple);color:var(--accent-purple-strong)}.cats-badge-wrapper.teal{border-color:var(--border-decorative-teal);background-color:var(--surface-decorative-teal);color:var(--accent-teal-strong)}.cats-badge-wrapper.amber-brown{border-color:var(--border-decorative-amber-brown);background-color:var(--surface-decorative-amber-brown);color:var(--accent-amber-brown-strong)}.cats-badge-wrapper.sage-green{border-color:var(--border-decorative-sage-green);background-color:var(--surface-decorative-sage-green);color:var(--accent-sage-green-dark)}.cats-badge-wrapper.muted{border-color:var(--border-core-muted);background-color:var(--surface-background-default);color:var(--text-body-muted)}.cats-badge-wrapper.small{font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:400;padding:calc(.1666666667rem / var(--scale)) calc(.5833333333rem / var(--scale))}.cats-badge-wrapper.cats-rounded{border-radius:calc(3rem / var(--scale))}.cats-badge-wrapper.filled{border-color:transparent;color:var(--text-body-inversed);background-color:var(--text-heading-secondary)}.cats-badge-wrapper.filled.green{background-color:var(--semantics-success-default)}.cats-badge-wrapper.filled.yellow{background-color:var(--semantics-warning-strong)}.cats-badge-wrapper.filled.red{background-color:var(--semantics-error-strong)}.cats-badge-wrapper.filled.blue{background-color:var(--surface-action-default)}.cats-badge-wrapper.filled.strong-grey{background-color:var(--text-body-muted)}.cats-badge-wrapper.filled.orange{background-color:var(--accent-orange-strong)}.cats-badge-wrapper.filled.purple{background-color:var(--accent-purple-strong)}.cats-badge-wrapper.filled.teal{background-color:var(--accent-teal-strong)}.cats-badge-wrapper.filled.amber-brown{background-color:var(--accent-amber-brown-strong)}.cats-badge-wrapper.filled.sage-green{background-color:var(--accent-sage-green-dark)}.cats-badge-wrapper.filled.muted{background-color:var(--surface-background-default);color:var(--text-body-muted)}.display-large{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:500}.display-large-emphasized{font-size:calc(4.6666666667rem / var(--scale));line-height:calc(6.6666666667rem / var(--scale));font-weight:600}.display-medium{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:500}.display-medium-emphasized{font-size:calc(4rem / var(--scale));line-height:calc(4.6666666667rem / var(--scale));font-weight:600}.heading-extra-large{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:500}.heading-extra-large-emphasized{font-size:calc(3rem / var(--scale));line-height:calc(3.3333333333rem / var(--scale));font-weight:600}.heading-large{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:500}.heading-large-emphasized{font-size:calc(2rem / var(--scale));line-height:calc(2.6666666667rem / var(--scale));font-weight:600}.heading-medium{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-medium-emphasized{font-size:calc(1.6666666667rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.heading-small{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:500}.heading-small-emphasized{font-size:calc(1.5rem / var(--scale));line-height:calc(2.3333333333rem / var(--scale));font-weight:600}.body-large{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:400}.body-large-emphasized{font-size:calc(1.3333333333rem / var(--scale));line-height:calc(2rem / var(--scale));font-weight:500}.body-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.body-medium-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.body-small{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:400}.meta-regular{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.meta-regular-emphasized{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.interaction-medium{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.interaction-small{font-size:calc(1rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.system-utility-regular{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:500}.system-utility-regular-emphasized{font-size:calc(1rem / var(--scale));line-height:calc(1.5rem / var(--scale));font-weight:600}.system-utility-small{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:500}.font-weight-regular{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.sp-0{padding:calc(0rem / var(--scale))}.sp-2{padding:calc(.1666666667rem / var(--scale))}.sp-4{padding:calc(.3333333333rem / var(--scale))}.sp-8{padding:calc(.6666666667rem / var(--scale))}.sp-12{padding:calc(1rem / var(--scale))}.sp-16{padding:calc(1.3333333333rem / var(--scale))}.sp-24{padding:calc(2rem / var(--scale))}.sp-36{padding:calc(3rem / var(--scale))}.sp-40{padding:calc(3.3333333333rem / var(--scale))}.sm-0{margin:calc(0rem / var(--scale))}.sm-2{margin:calc(.1666666667rem / var(--scale))}.sm-4{margin:calc(.3333333333rem / var(--scale))}.sm-8{margin:calc(.6666666667rem / var(--scale))}.sm-12{margin:calc(1rem / var(--scale))}.sm-16{margin:calc(1.3333333333rem / var(--scale))}.sm-24{margin:calc(2rem / var(--scale))}.sm-36{margin:calc(3rem / var(--scale))}.sm-40{margin:calc(3.3333333333rem / var(--scale))}.sp-t-0{padding-top:calc(0rem / var(--scale))}.sp-t-2{padding-top:calc(.1666666667rem / var(--scale))}.sp-t-4{padding-top:calc(.3333333333rem / var(--scale))}.sp-t-8{padding-top:calc(.6666666667rem / var(--scale))}.sp-t-12{padding-top:calc(1rem / var(--scale))}.sp-t-16{padding-top:calc(1.3333333333rem / var(--scale))}.sp-t-24{padding-top:calc(2rem / var(--scale))}.sp-t-36{padding-top:calc(3rem / var(--scale))}.sp-t-40{padding-top:calc(3.3333333333rem / var(--scale))}.sp-b-0{padding-bottom:calc(0rem / var(--scale))}.sp-b-2{padding-bottom:calc(.1666666667rem / var(--scale))}.sp-b-4{padding-bottom:calc(.3333333333rem / var(--scale))}.sp-b-8{padding-bottom:calc(.6666666667rem / var(--scale))}.sp-b-12{padding-bottom:calc(1rem / var(--scale))}.sp-b-16{padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-b-24{padding-bottom:calc(2rem / var(--scale))}.sp-b-36{padding-bottom:calc(3rem / var(--scale))}.sp-b-40{padding-bottom:calc(3.3333333333rem / var(--scale))}.sp-l-0{padding-left:calc(0rem / var(--scale))}.sp-l-2{padding-left:calc(.1666666667rem / var(--scale))}.sp-l-4{padding-left:calc(.3333333333rem / var(--scale))}.sp-l-8{padding-left:calc(.6666666667rem / var(--scale))}.sp-l-12{padding-left:calc(1rem / var(--scale))}.sp-l-16{padding-left:calc(1.3333333333rem / var(--scale))}.sp-l-24{padding-left:calc(2rem / var(--scale))}.sp-l-36{padding-left:calc(3rem / var(--scale))}.sp-l-40{padding-left:calc(3.3333333333rem / var(--scale))}.sp-r-0{padding-right:calc(0rem / var(--scale))}.sp-r-2{padding-right:calc(.1666666667rem / var(--scale))}.sp-r-4{padding-right:calc(.3333333333rem / var(--scale))}.sp-r-8{padding-right:calc(.6666666667rem / var(--scale))}.sp-r-12{padding-right:calc(1rem / var(--scale))}.sp-r-16{padding-right:calc(1.3333333333rem / var(--scale))}.sp-r-24{padding-right:calc(2rem / var(--scale))}.sp-r-36{padding-right:calc(3rem / var(--scale))}.sp-r-40{padding-right:calc(3.3333333333rem / var(--scale))}.sm-t-0{margin-top:calc(0rem / var(--scale))}.sm-t-2{margin-top:calc(.1666666667rem / var(--scale))}.sm-t-4{margin-top:calc(.3333333333rem / var(--scale))}.sm-t-8{margin-top:calc(.6666666667rem / var(--scale))}.sm-t-12{margin-top:calc(1rem / var(--scale))}.sm-t-16{margin-top:calc(1.3333333333rem / var(--scale))}.sm-t-24{margin-top:calc(2rem / var(--scale))}.sm-t-36{margin-top:calc(3rem / var(--scale))}.sm-t-40{margin-top:calc(3.3333333333rem / var(--scale))}.sm-b-0{margin-bottom:calc(0rem / var(--scale))}.sm-b-2{margin-bottom:calc(.1666666667rem / var(--scale))}.sm-b-4{margin-bottom:calc(.3333333333rem / var(--scale))}.sm-b-8{margin-bottom:calc(.6666666667rem / var(--scale))}.sm-b-12{margin-bottom:calc(1rem / var(--scale))}.sm-b-16{margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-b-24{margin-bottom:calc(2rem / var(--scale))}.sm-b-36{margin-bottom:calc(3rem / var(--scale))}.sm-b-40{margin-bottom:calc(3.3333333333rem / var(--scale))}.sm-l-0{margin-left:calc(0rem / var(--scale))}.sm-l-2{margin-left:calc(.1666666667rem / var(--scale))}.sm-l-4{margin-left:calc(.3333333333rem / var(--scale))}.sm-l-8{margin-left:calc(.6666666667rem / var(--scale))}.sm-l-12{margin-left:calc(1rem / var(--scale))}.sm-l-16{margin-left:calc(1.3333333333rem / var(--scale))}.sm-l-24{margin-left:calc(2rem / var(--scale))}.sm-l-36{margin-left:calc(3rem / var(--scale))}.sm-l-40{margin-left:calc(3.3333333333rem / var(--scale))}.sm-r-0{margin-right:calc(0rem / var(--scale))}.sm-r-2{margin-right:calc(.1666666667rem / var(--scale))}.sm-r-4{margin-right:calc(.3333333333rem / var(--scale))}.sm-r-8{margin-right:calc(.6666666667rem / var(--scale))}.sm-r-12{margin-right:calc(1rem / var(--scale))}.sm-r-16{margin-right:calc(1.3333333333rem / var(--scale))}.sm-r-24{margin-right:calc(2rem / var(--scale))}.sm-r-36{margin-right:calc(3rem / var(--scale))}.sm-r-40{margin-right:calc(3.3333333333rem / var(--scale))}.sp-x-0{padding-left:calc(0rem / var(--scale));padding-right:calc(0rem / var(--scale))}.sp-x-2{padding-left:calc(.1666666667rem / var(--scale));padding-right:calc(.1666666667rem / var(--scale))}.sp-x-4{padding-left:calc(.3333333333rem / var(--scale));padding-right:calc(.3333333333rem / var(--scale))}.sp-x-8{padding-left:calc(.6666666667rem / var(--scale));padding-right:calc(.6666666667rem / var(--scale))}.sp-x-12{padding-left:calc(1rem / var(--scale));padding-right:calc(1rem / var(--scale))}.sp-x-16{padding-left:calc(1.3333333333rem / var(--scale));padding-right:calc(1.3333333333rem / var(--scale))}.sp-x-24{padding-left:calc(2rem / var(--scale));padding-right:calc(2rem / var(--scale))}.sp-x-36{padding-left:calc(3rem / var(--scale));padding-right:calc(3rem / var(--scale))}.sp-x-40{padding-left:calc(3.3333333333rem / var(--scale));padding-right:calc(3.3333333333rem / var(--scale))}.sp-y-0{padding-top:calc(0rem / var(--scale));padding-bottom:calc(0rem / var(--scale))}.sp-y-2{padding-top:calc(.1666666667rem / var(--scale));padding-bottom:calc(.1666666667rem / var(--scale))}.sp-y-4{padding-top:calc(.3333333333rem / var(--scale));padding-bottom:calc(.3333333333rem / var(--scale))}.sp-y-8{padding-top:calc(.6666666667rem / var(--scale));padding-bottom:calc(.6666666667rem / var(--scale))}.sp-y-12{padding-top:calc(1rem / var(--scale));padding-bottom:calc(1rem / var(--scale))}.sp-y-16{padding-top:calc(1.3333333333rem / var(--scale));padding-bottom:calc(1.3333333333rem / var(--scale))}.sp-y-24{padding-top:calc(2rem / var(--scale));padding-bottom:calc(2rem / var(--scale))}.sp-y-36{padding-top:calc(3rem / var(--scale));padding-bottom:calc(3rem / var(--scale))}.sp-y-40{padding-top:calc(3.3333333333rem / var(--scale));padding-bottom:calc(3.3333333333rem / var(--scale))}.sm-x-0{margin-left:calc(0rem / var(--scale));margin-right:calc(0rem / var(--scale))}.sm-x-2{margin-left:calc(.1666666667rem / var(--scale));margin-right:calc(.1666666667rem / var(--scale))}.sm-x-4{margin-left:calc(.3333333333rem / var(--scale));margin-right:calc(.3333333333rem / var(--scale))}.sm-x-8{margin-left:calc(.6666666667rem / var(--scale));margin-right:calc(.6666666667rem / var(--scale))}.sm-x-12{margin-left:calc(1rem / var(--scale));margin-right:calc(1rem / var(--scale))}.sm-x-16{margin-left:calc(1.3333333333rem / var(--scale));margin-right:calc(1.3333333333rem / var(--scale))}.sm-x-24{margin-left:calc(2rem / var(--scale));margin-right:calc(2rem / var(--scale))}.sm-x-36{margin-left:calc(3rem / var(--scale));margin-right:calc(3rem / var(--scale))}.sm-x-40{margin-left:calc(3.3333333333rem / var(--scale));margin-right:calc(3.3333333333rem / var(--scale))}.sm-y-0{margin-top:calc(0rem / var(--scale));margin-bottom:calc(0rem / var(--scale))}.sm-y-2{margin-top:calc(.1666666667rem / var(--scale));margin-bottom:calc(.1666666667rem / var(--scale))}.sm-y-4{margin-top:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.sm-y-8{margin-top:calc(.6666666667rem / var(--scale));margin-bottom:calc(.6666666667rem / var(--scale))}.sm-y-12{margin-top:calc(1rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.sm-y-16{margin-top:calc(1.3333333333rem / var(--scale));margin-bottom:calc(1.3333333333rem / var(--scale))}.sm-y-24{margin-top:calc(2rem / var(--scale));margin-bottom:calc(2rem / var(--scale))}.sm-y-36{margin-top:calc(3rem / var(--scale));margin-bottom:calc(3rem / var(--scale))}.sm-y-40{margin-top:calc(3.3333333333rem / var(--scale));margin-bottom:calc(3.3333333333rem / var(--scale))}.br-0{border-radius:calc(0rem / var(--scale))}.br-4{border-radius:calc(.3333333333rem / var(--scale))}.br-8{border-radius:calc(.6666666667rem / var(--scale))}.br-16{border-radius:calc(1.3333333333rem / var(--scale))}.br-24{border-radius:calc(2rem / var(--scale))}.br-36{border-radius:calc(3rem / var(--scale))}.br-200{border-radius:calc(16.6666666667rem / var(--scale))}.cats-checkbox-container,.cats-item,.cats-multiitem{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;margin-bottom:calc(.6666666667rem / var(--scale));color:var(--text-heading-primary)}.cats-checkbox-container.disabled-option,.cats-item.disabled-option,.cats-multiitem.disabled-option{color:var(--text-body-muted);pointer-events:none}.cats-checkbox-container.disabled-option input[type=checkbox]:checked,.cats-item.disabled-option input[type=checkbox]:checked,.cats-multiitem.disabled-option input[type=checkbox]:checked{background-color:var(--surface-background-subtle);border-color:var(--border-core-default)}.cats-checkbox-container.disabled-option input[type=checkbox]:checked:after,.cats-item.disabled-option input[type=checkbox]:checked:after,.cats-multiitem.disabled-option input[type=checkbox]:checked:after{background-image:url(/images/check-disabled.svg)}.cats-checkbox-container.disabled-option::selection,.cats-item.disabled-option::selection,.cats-multiitem.disabled-option::selection{background-color:transparent}.cats-checkbox-container input[type=checkbox],.cats-item input[type=checkbox],.cats-multiitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox-container input[type=checkbox]:after,.cats-item input[type=checkbox]:after,.cats-multiitem input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox-container input[type=checkbox]:checked,.cats-item input[type=checkbox]:checked,.cats-multiitem input[type=checkbox]:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox-container input[type=checkbox]:checked:after,.cats-item input[type=checkbox]:checked:after,.cats-multiitem input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:indeterminate,.cats-item input[type=checkbox]:indeterminate,.cats-multiitem input[type=checkbox]:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox-container input[type=checkbox]:indeterminate:after,.cats-item input[type=checkbox]:indeterminate:after,.cats-multiitem input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.cats-checkbox-container input[type=checkbox]:disabled,.cats-item input[type=checkbox]:disabled,.cats-multiitem input[type=checkbox]:disabled{cursor:default;background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:disabled+span,.cats-item input[type=checkbox]:disabled+span,.cats-multiitem input[type=checkbox]:disabled+span{color:var(--text-body-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled,.cats-item input[type=checkbox]:checked:disabled,.cats-multiitem input[type=checkbox]:checked:disabled{background-color:var(--surface-background-default);border-color:var(--border-core-muted)}.cats-checkbox-container input[type=checkbox]:checked:disabled:after,.cats-item input[type=checkbox]:checked:disabled:after,.cats-multiitem input[type=checkbox]:checked:disabled:after{display:block;background-image:url(/images/check-disabled.svg)}:root{--fs-6: 6px;--fs-8: 8px;--fs-10: 10px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-8: calc(8px / var(--scale));--fs-10: calc(10px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border-core-default);border-radius:8px}input,select,textarea{outline:none;box-shadow:none}.app-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding-right:calc(1.3333333333rem / var(--scale));height:calc(5.3333333333rem / var(--scale));background-color:var(--text-heading-primary)}.app-header .header-left{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0}.app-header .header-left .brand-logo,.app-header .header-left .product-logo{max-width:calc(12.6666666667rem / var(--scale))}.app-header .header-right{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale))}.app-header .dropdown.control-panel{position:relative}.app-header .dropdown.control-panel .dropdown-trigger{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));min-width:calc(12.5rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--text-body-primary);border-radius:calc(.6666666667rem / var(--scale));background-color:#ffffff1a;color:var(--text-heading-inverse);cursor:pointer;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.app-header .dropdown.control-panel .dropdown-trigger:hover{background-color:var(--text-heading-secondary)}.app-header .dropdown.control-panel .dropdown-panel{position:absolute;width:100%;z-index:2;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));max-height:calc(10rem / var(--scale));overflow:auto;top:calc(5.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.app-header .dropdown.control-panel .dropdown-panel li{height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .ai-agent{width:calc(9.6666666667rem / var(--scale));height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--text-heading-secondary);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:#ffffff1a;cursor:pointer}.app-header .ai-agent .ai-agent-btn{color:var(--semantics-warning-default);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .ai-agent:hover{background-color:var(--text-heading-secondary)}.app-header .profile{position:relative}.app-header .profile:has(.loggedin-profile-list) .profile-wrapper{border-color:var(--border-interaction-default)}.app-header .profile .profile-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale));cursor:pointer;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-inverted);border-radius:calc(.6666666667rem / var(--scale));background-color:#ffffff14}.app-header .profile .profile-wrapper:hover{background-color:var(--text-heading-secondary)}.app-header .profile .profile-wrapper img{width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));border-radius:50%}.app-header .profile .profile-wrapper .profile-info{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0}.app-header .profile .profile-wrapper .profile-info .name{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-inverse);max-width:calc(10rem / var(--scale))}.app-header .profile .profile-wrapper .profile-info .role{font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:400;color:var(--border-interaction-default);max-width:calc(10rem / var(--scale))}.app-header .profile .loggedin-profile-list{position:absolute;right:calc(-1.3333333333rem / var(--scale));top:calc(5.3333333333rem / var(--scale));width:calc(30.9166666667rem / var(--scale));height:calc(70rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);display:flex;flex-direction:column;justify-content:center;align-items:\"\";flex-wrap:nowrap;gap:\"\";z-index:10}.app-header .profile .loggedin-profile-list .profile-box{padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .profile-box .for-edit-icon{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.app-header .profile .loggedin-profile-list .profile-box .for-edit-icon .profile-img{width:calc(4rem / var(--scale));height:calc(4rem / var(--scale));border-radius:50%}.app-header .profile .loggedin-profile-list .profile-box .for-edit-icon .on-hover{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));position:absolute;display:none}.app-header .profile .loggedin-profile-list .profile-box .for-edit-icon:hover .on-hover{display:block}.app-header .profile .loggedin-profile-list .profile-box .profile-heading{color:var(--text-heading-primary);font-size:var(--fs-18);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;max-width:calc(23.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .profile-box .profile-txt{color:var(--text-body-secondary);font-size:calc(.8333333333rem / var(--scale));line-height:calc(1rem / var(--scale));font-weight:400;max-width:calc(23.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .for-border{margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:92%;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.app-header .profile .loggedin-profile-list .switch-box{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0}.app-header .profile .loggedin-profile-list .switch-box .switch-role{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));position:relative}.app-header .profile .loggedin-profile-list .switch-box .switch-role .edit-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switch-txt{color:var(--text-link-hover);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown{position:absolute;width:calc(20rem / var(--scale));max-height:calc(16.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);right:calc(9.6666666667rem / var(--scale));top:calc(-1.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:0;display:none}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .text-title{height:calc(3rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .item-list{height:calc(3rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .item-list .text{color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .item-list.active{background-color:var(--surface-background-blue)}.app-header .profile .loggedin-profile-list .switch-box .switch-role .switching-role-dropdown .item-list.active .text{color:var(--text-link-default)}.app-header .profile .loggedin-profile-list .switch-box .right-side-arrow img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .switch-box:hover{background-color:var(--surface-background-blue)}.app-header .profile .loggedin-profile-list .switch-box:hover .switch-role .switching-role-dropdown{display:flex}.app-header .profile .loggedin-profile-list .preference-txt{color:var(--text-body-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .txt-box{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;position:relative}.app-header .profile .loggedin-profile-list .txt-box:hover{background-color:var(--surface-background-blue)}.app-header .profile .loggedin-profile-list .txt-box .fix-space{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));position:relative}.app-header .profile .loggedin-profile-list .txt-box .fix-space .fix-img-size,.app-header .profile .loggedin-profile-list .txt-box .fix-space img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .txt-box .fix-space img.red{color:var(--semantics-error-strong)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .txt-align{color:var(--text-heading-primary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.app-header .profile .loggedin-profile-list .txt-box .fix-space .txt-align.red{color:var(--semantics-error-strong)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .txt-align .light-grey{color:var(--text-body-secondary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section{position:relative}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown{position:absolute;width:calc(14.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);right:calc(10rem / var(--scale));top:0;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:0;display:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .preference-dropdown-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));height:calc(3.3333333333rem / var(--scale));position:relative;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .preference-dropdown-item .text{font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .preference-dropdown-item:hover{background-color:var(--surface-background-blue)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown{position:relative}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown:hover .language-section-wrapper{display:block}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper{position:absolute;z-index:10;padding:calc(.6666666667rem / var(--scale)) 0;width:calc(30.9166666667rem / var(--scale));background-color:var(--surface-background-canvas);top:calc(0rem / var(--scale));right:calc(14.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);display:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-heading{width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .input-search-wrapper{width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));padding-top:0}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .input-search-wrapper .input-search{width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .input-search-wrapper .input-search img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .input-search-wrapper .input-search input{background-color:transparent;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;border:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-section{max-height:calc(14rem / var(--scale));overflow-y:auto}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-section .language-item{width:100%;height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-footer{width:100%;height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-footer button{width:calc(7.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-footer button.reset{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong);border-radius:calc(.3333333333rem / var(--scale));background-color:transparent}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .language-dropdown .language-section-wrapper .language-footer button.apply{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-action-default);color:var(--text-heading-inverse)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown{position:relative}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown:hover .timezone-section-wrapper{display:block}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper{position:absolute;z-index:10;padding:calc(.6666666667rem / var(--scale)) 0;width:calc(30.9166666667rem / var(--scale));background-color:var(--surface-background-canvas);top:-100%;right:calc(14.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow-200);display:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-heading{width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-body-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .input-search-wrapper{width:100%;height:calc(3.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));padding-top:0}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .input-search-wrapper .input-search{width:100%;height:calc(2.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.1666666667rem / var(--scale)) 0 var(--chunk-shadow)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .input-search-wrapper .input-search img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .input-search-wrapper .input-search input{background-color:transparent;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;border:none}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-section{max-height:calc(14rem / var(--scale));overflow-y:auto}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-section .timezone-dropdown-item{width:100%;height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:500;color:var(--text-heading-primary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-section .timezone-dropdown-item .bold-text .light-text{color:var(--text-body-secondary)}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-footer{width:100%;height:calc(4rem / var(--scale));display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-footer button{width:calc(7.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;cursor:pointer}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-footer button.reset{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-strong);border-radius:calc(.3333333333rem / var(--scale));background-color:transparent}.app-header .profile .loggedin-profile-list .txt-box .fix-space .preference-section .preference-dropdown .timezone-dropdown .timezone-section-wrapper .timezone-footer button.apply{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-action-default);color:var(--text-heading-inverse)}.app-header .profile .loggedin-profile-list .txt-box.preference-dropdown-txt:hover .preference-section .preference-dropdown{display:block}.app-header .profile .loggedin-profile-list .txt-box img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -4336,6 +4340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }], dropdownItems: [{
                 type: Input
+            }], selectedDropdownItem: [{
+                type: Input
             }], onDropdownSelection: [{
                 type: Output
             }] } });