carriera-intern 1.1.99 → 1.1.100

package/fesm2022/carriera-intern.mjs

@@ -659,7 +659,7 @@ class InputClassPipe {
             return {};
         }
         const { isInvalid, isValid, isHovered, hasText, hideValidation, config, isPasswordVisible, isAdding, selectedOption, } = context;
-        const { isEdit, icon, type, withButtons, alignment, inverse, inTable, dropdownAutocomplete, add, placeholderBehavior, errorBehavior, removable, isRemovableWhenDisabled, textColor, subcontent, isAddress, size, strikethrough, hasNoClearButton, } = config;
+        const { isEdit, icon, type, withButtons, alignment, inverse, inTable, dropdownAutocomplete, add, placeholderBehavior, errorBehavior, removable, isRemovableWhenDisabled, textColor, subcontent, isAddress, size, strikethrough, hasNoClearButton, canceled, } = config;
         const dropdownType = config.dropdown;
         const isPassword = type === 'password' || type === 'account';
         const number = type === 'number';
@@ -702,6 +702,7 @@ class InputClassPipe {
             'size-22': size === 22,
             strikethrough: !!strikethrough,
             'no-clear': !!hasNoClearButton,
+            canceled: !!canceled,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InputClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -1044,6 +1045,7 @@ class NumberFormatDirective {
      */
     disableDecimals = input(false, ...(ngDevMode ? [{ debugName: "disableDecimals" }] : []));
     prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
+    clampToMax = input(false, ...(ngDevMode ? [{ debugName: "clampToMax" }] : []));
     /**
      * Stores the unformatted, "real" numeric value of the input.
      * This is the value that should be used for calculations or form submissions,
@@ -1088,13 +1090,19 @@ class NumberFormatDirective {
         const input = this.el.nativeElement;
         const cursorPosition = input.selectionStart || 0;
         const oldValue = input.value;
+        const oldRealValue = this.realValue;
+        const maxValue = this.max();
         this.realValue = this.extractNumericValue(oldValue);
-        if (this.max()) {
+        if (maxValue !== undefined && maxValue !== null) {
             const numericValue = Number(this.realValue);
-            const maxValue = this.max() || 0;
-            if (numericValue > maxValue) {
-                // Cap the value at max instead of just removing last character
-                this.realValue = maxValue.toString();
+            if (!Number.isNaN(numericValue) && numericValue > maxValue) {
+                if (this.clampToMax()) {
+                    this.realValue = maxValue.toString();
+                }
+                else {
+                    // Keep previous valid value when clamping is disabled.
+                    this.realValue = oldRealValue;
+                }
             }
         }
         if (this.disableDecimals()) {
@@ -1201,7 +1209,8 @@ class NumberFormatDirective {
             return;
         }
         // Check if typing a digit would exceed max
-        if (/^\d$/.test(event.key) && this.max()) {
+        const maxValue = this.max();
+        if (/^\d$/.test(event.key) && maxValue !== undefined && maxValue !== null) {
             const input = this.el.nativeElement;
             const start = input.selectionStart || 0;
             const end = input.selectionEnd || 0;
@@ -1214,7 +1223,9 @@ class NumberFormatDirective {
             const simulatedNumericValue = this.extractNumericValue(simulatedValue);
             const simulatedNumber = Number(simulatedNumericValue);
             // Prevent if it would exceed max
-            if (simulatedNumber > (this.max() || 0)) {
+            if (!Number.isNaN(simulatedNumber) && simulatedNumber > maxValue) {
+                if (this.clampToMax())
+                    return;
                 event.preventDefault();
                 return;
             }
@@ -1382,7 +1393,7 @@ class NumberFormatDirective {
         this.updateDisplayValue();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NumberFormatDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: NumberFormatDirective, isStandalone: true, selector: "[appNumberFormat]", inputs: { appNumberFormat: { classPropertyName: "appNumberFormat", publicName: "appNumberFormat", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isNumberFormattingDisabled: { classPropertyName: "isNumberFormattingDisabled", publicName: "isNumberFormattingDisabled", isSignal: true, isRequired: false, transformFunction: null }, disableDecimals: { classPropertyName: "disableDecimals", publicName: "disableDecimals", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "cut": "onCut($event)", "copy": "onCopy($event)", "keydown": "onKeydown($event)" } }, providers: [NumberFormatPipe], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: NumberFormatDirective, isStandalone: true, selector: "[appNumberFormat]", inputs: { appNumberFormat: { classPropertyName: "appNumberFormat", publicName: "appNumberFormat", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isNumberFormattingDisabled: { classPropertyName: "isNumberFormattingDisabled", publicName: "isNumberFormattingDisabled", isSignal: true, isRequired: false, transformFunction: null }, disableDecimals: { classPropertyName: "disableDecimals", publicName: "disableDecimals", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, clampToMax: { classPropertyName: "clampToMax", publicName: "clampToMax", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "cut": "onCut($event)", "copy": "onCopy($event)", "keydown": "onKeydown($event)" } }, providers: [NumberFormatPipe], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NumberFormatDirective, decorators: [{
             type: Directive,
@@ -1390,7 +1401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     selector: '[appNumberFormat]',
                     providers: [NumberFormatPipe],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { appNumberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "appNumberFormat", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isNumberFormattingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNumberFormattingDisabled", required: false }] }], disableDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableDecimals", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], onInput: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { appNumberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "appNumberFormat", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isNumberFormattingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNumberFormattingDisabled", required: false }] }], disableDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableDecimals", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], clampToMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "clampToMax", required: false }] }], onInput: [{
                 type: HostListener,
                 args: ['input', ['$event']]
             }], onCut: [{
@@ -4027,9 +4038,9 @@ class InputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InputComponent, isStandalone: true, selector: "cai-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, preselectedOptions: { classPropertyName: "preselectedOptions", publicName: "preselectedOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hideValidation: { classPropertyName: "hideValidation", publicName: "hideValidation", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, preselectedUnit: { classPropertyName: "preselectedUnit", publicName: "preselectedUnit", isSignal: true, isRequired: false, transformFunction: null }, unassignedCount: { classPropertyName: "unassignedCount", publicName: "unassignedCount", isSignal: true, isRequired: false, transformFunction: null }, forceInvalidStyling: { classPropertyName: "forceInvalidStyling", publicName: "forceInvalidStyling", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocused: "onFocused", onReset: "onReset", onValueChange: "onValueChange", onOptionAdded: "onOptionAdded", onAdd: "onAdd", onSelectionChange: "onSelectionChange", onSelectedObject: "onSelectedObject", onSelectedGroup: "onSelectedGroup", onClear: "onClear", onAutofill: "onAutofill", onScrolledToBottom: "onScrolledToBottom", onScrolledToBottomGroup: "onScrolledToBottomGroup", onSearch: "onSearch", onValueAdded: "onValueAdded", onRemove: "onRemove", onHoverRemove: "onHoverRemove" }, host: { listeners: { "realValueChange": "onRealValueChange($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }, { propertyName: "PasswordDirective", first: true, predicate: PasswordDirective, descendants: true }, { propertyName: "NumberFormatDirective", first: true, predicate: NumberFormatDirective, descendants: true }, { propertyName: "MaskDirective", first: true, predicate: MaskDirective, descendants: true }], ngImport: i0, template: "<!-- #region Variables -->\n@let valid =\n  ngControl?.valid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let invalid =\n  ngControl?.invalid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let subcontent =\n  config().subcontent ||\n  (config().dropdown === \"subcontent\" &&\n    selectedOption() &&\n    cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\n\n@let name = config().name;\n@let password = config().type === \"password\" || config().type === \"account\";\n\n@let optionLabel = this.config().optionLabel || \"label\";\n@let dropdownType = this.config().dropdown;\n\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\n\n@let tooltipClass =\n  config().inverse\n    ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n    : \"tooltip input-tooltip\";\n\n<!-- #region Multiple selection -->\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\n  <div\n    (pointerdown)=\"focus($event)\"\n    (mouseenter)=\"toggleHovered(true)\"\n    (mouseleave)=\"toggleHovered(false)\"\n    class=\"multiple-container\"\n    [class]=\"{\n      focused: focused(),\n      hovered: hovered(),\n    }\"\n  >\n    <label class=\"multiple-label\">{{ name }}</label>\n\n    @for (option of multipleSelectedOptions(); track $index) {\n      <div class=\"multiple-selected\">\n        <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\n        <button\n          type=\"button\"\n          class=\"\"\n          (pointerdown)=\"handleOption(option, $event)\"\n          [tabIndex]=\"-1\"\n          ngbTooltip=\"Clear\"\n          [placement]=\"'top'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          #closeTooltip=\"ngbTooltip\"\n          [container]=\"'body'\"\n        >\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"multiple-remove-button multiple-remove-icon bg-icon\"\n          ></svg-icon>\n        </button>\n      </div>\n    }\n  </div>\n}\n<!-- #endregion -->\n\n@let hasFloatingError =\n  invalid &&\n  (config().errorBehavior === \"floating\" ||\n    (!!config().inTable && config().placeholderBehavior !== \"static\"));\n\n<div\n  class=\"app-input-container\"\n  [class]=\"\n    {\n      config: config(),\n      hideValidation: hideValidation(),\n      isPasswordVisible: visible(),\n      isInvalid: !!invalid || forceInvalidStyling(),\n      isValid: !!valid && !forceInvalidStyling(),\n      isHovered: hovered(),\n      hasText: hasText(),\n      isAdding: isAdding(),\n      selectedOption: selectedOption(),\n    } | inputClass\n  \"\n  ngbDropdown\n  [autoClose]=\"false\"\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  #containerRef\n  [ngbTooltip]=\"errorTooltip\"\n  [disableTooltip]=\"!hasFloatingError\"\n  [container]=\"'body'\"\n  [placement]=\"['bottom']\"\n  tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n  (pointerdown)=\"focus($event)\"\n  (mouseenter)=\"dropdownType === 'multiple' && toggleHovered(true)\"\n  (mouseleave)=\"dropdownType === 'multiple' && toggleHovered(false)\"\n>\n  <!-- \n  [popperOptions]=\"dropdownPopperOptions\"\n  -->\n  @if (config().icon && !password && !config().withButtons) {\n    <div\n      class=\"icon-container\"\n      (pointerdown)=\"focus($event)\"\n      [class]=\"{\n        'colored-icon': config().iconColor,\n      }\"\n      [style.--icon-color]=\"config().iconColor || ''\"\n    >\n      <svg-icon class=\"icon\" [name]=\"config().icon || ''\"></svg-icon>\n      @if (!config().noSeparator) {\n        <div class=\"separator\"></div>\n      }\n    </div>\n  }\n  @if (password) {\n    <div class=\"icon-container\" (pointerdown)=\"toggleVisibility($event)\">\n      <div\n        class=\"password-icons\"\n        [ngbTooltip]=\"passwordTooltip\"\n        [container]=\"'body'\"\n        [tooltipClass]=\"tooltipClass\"\n        [autoClose]=\"true\"\n        [placement]=\"'top'\"\n        [openDelay]=\"600\"\n      >\n        <svg-icon\n          class=\"icon password-key hover-icon\"\n          name=\"cai-password-key\"\n        ></svg-icon>\n        <svg-icon\n          class=\"icon password-shown hover-icon\"\n          name=\"cai-password-shown\"\n        ></svg-icon>\n        <svg-icon\n          class=\"icon password-hidden hover-icon\"\n          name=\"cai-password-hidden\"\n        ></svg-icon>\n      </div>\n      <div class=\"separator\"></div>\n    </div>\n  }\n\n  <input\n    class=\"app-input\"\n    [tabindex]=\"isDisabled() ? '-1' : '0'\"\n    [type]=\"\n      password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\n    \"\n    [required]=\"config().required\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"dispatchOnBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"config().label\"\n    [attr.name]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    [placeholder]=\"config()?.placeholder || ''\"\n    [autocomplete]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    #inputRef\n    [appPassword]=\"password\"\n    [appMask]=\"config().mask || ''\"\n    [reveal]=\"config().reveal || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [disableDecimals]=\"config().disableDecimals || false\"\n    [prefix]=\"config().prefix || ''\"\n    [max]=\"config().max\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"onFocus($event)\"\n  />\n  @if (\n    !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\n    config().placeholderBehavior !== \"hidden\"\n  ) {\n    <label\n      class=\"app-input-label\"\n      [class.placeholder-color]=\"this.config().placeholderColor\"\n      [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\n      (click)=\"focus($event)\"\n    >\n      <!-- Truck Trailer Driver Dropdown label -->\n      @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\n        <p class=\"truck-item app-input-name\">Truck</p>\n        <p class=\"trailer-item\">Trailer</p>\n        <p>Driver</p>\n        <p class=\"sub-label\">Rate</p>\n      }\n      <!-- Split Load -->\n      @else if (dropdownType === \"split-driver\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Rate</p>\n      } @else if (\n        dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\n      ) {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Location</p>\n      }\n      <!-- Dropdown variants -->\n      @else if (dropdownType === \"broker\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Credit</p>\n      } @else if (dropdownType === \"contact\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Phone</p>\n      } @else if (dropdownType === \"shipper\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Address</p>\n      } @else if (dropdownType === \"owner\") {\n        <p class=\"owner-ein app-input-name\">EIN</p>\n        <p class=\"app-input-name\">Company Name</p>\n      } @else if (dropdownType === \"fuelcard\") {\n        <p class=\"fuelcard-number app-input-name\">Card No.</p>\n        <p class=\"fuelcard-brand app-input-name\">Provider</p>\n        <p class=\"app-input-name\">Nickname</p>\n      }\n      <!-- Default Dropdown label -->\n      @else {\n        <span class=\"app-input-name\">{{ name }}</span>\n      }\n    </label>\n  }\n  @if (config().type === \"number\" && config().withButtons) {\n    <div class=\"number-container\">\n      <div class=\"number-buttons\">\n        <div class=\"separator\"></div>\n        <div\n          class=\"plus-button-container\"\n          ngbTooltip=\"Add\"\n          [tooltipClass]=\"tooltipClass\"\n          [container]=\"'body'\"\n          [autoClose]=\"true\"\n          [openDelay]=\"600\"\n          [placement]=\"'top'\"\n          (pointerdown)=\"increment($event)\"\n        >\n          <svg-icon name=\"cai-plus\" class=\"bg-icon plus-icon\"></svg-icon>\n        </div>\n        <div\n          class=\"minus-button-container\"\n          ngbTooltip=\"Remove\"\n          [placement]=\"'top'\"\n          [container]=\"'body'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          [openDelay]=\"600\"\n          (pointerdown)=\"decrement($event)\"\n        >\n          <svg-icon name=\"cai-minus\" class=\"bg-icon minus-icon\"></svg-icon>\n        </div>\n      </div>\n    </div>\n  }\n  @if (!config().inTable) {\n    @if (!dropdownType) {\n      <svg-icon\n        name=\"cai-checkmark\"\n        class=\"app-input-icon positive-icon\"\n      ></svg-icon>\n      <svg-icon\n        name=\"cai-status-warning\"\n        class=\"app-input-icon warning-icon\"\n      ></svg-icon>\n    }\n  }\n\n  @if (\n    invalid &&\n    config().errorBehavior !== \"hidden\" &&\n    (ngControl?.errors | errorMessage: config().customErrors)[0] &&\n    !(config().inTable && config().placeholderBehavior !== \"static\")\n  ) {\n    <div class=\"app-input-error\">\n      {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\n    </div>\n  }\n\n  <!-- Accept button -->\n  @if ((config().add && isAdding()) || config().isEdit) {\n    <button\n      type=\"button\"\n      class=\"app-input-icon button-icon accept-button\"\n      (pointerdown)=\"addOption()\"\n      [tabIndex]=\"-1\"\n      ngbTooltip=\"Confirm\"\n      [openDelay]=\"600\"\n      [placement]=\"'top'\"\n      [tooltipClass]=\"tooltipClass\"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n    >\n      <svg-icon class=\"bg-icon\" name=\"cai-checkmark\"></svg-icon>\n    </button>\n  }\n\n  <!-- Cancel button -->\n  <button\n    type=\"button\"\n    class=\"app-input-icon button-icon cancel-button\"\n    (pointerdown)=\"reset($event)\"\n    (mouseenter)=\"onClearHover(true)\"\n    (mouseleave)=\"onClearHover(false)\"\n    [tabIndex]=\"-1\"\n    ngbTooltip=\"{{\n      hasText()\n        | clearTooltip\n          : isAdding()\n          : config().isEdit || false\n          : config().placeholderBehavior || 'dynamic'\n          : dropdownType === 'multiple'\n          : config().hasResetButton\n          : canTooltipBeVisible()\n    }}\"\n    [openDelay]=\"600\"\n    [tooltipClass]=\"tooltipClass\"\n    [placement]=\"'top'\"\n    [container]=\"'body'\"\n    [autoClose]=\"true\"\n    #closeTooltip=\"ngbTooltip\"\n  >\n    @let iconName =\n      config().hasResetButton\n        ? \"cai-reset\"\n        : config().removable\n          ? \"cai-delete\"\n          : \"cai-cancel\";\n    <svg-icon class=\"bg-icon\" [name]=\"iconName\"></svg-icon>\n  </button>\n\n  <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\n  <!-- Dropdown menu -->\n\n  @let hasLoader = isLoading() !== undefined;\n\n  @if (hasLoader) {\n    <div class=\"loader\" [class.loading]=\"isLoading()\">\n      <svg-icon name=\"cai-loader\" class=\"loader-icon\"></svg-icon>\n    </div>\n  }\n\n  @if (dropdownType) {\n    @let maxHeight =\n      ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +\n        (config().add ? 1 : 0)) *\n        30 +\n      4;\n\n    @let animateDropdown =\n      dropdownType !== \"toll\" &&\n      dropdownType !== \"fuel-stop-transaction\" &&\n      dropdownType !== \"dispatch\" &&\n      dropdownType !== \"ftl-dispatch\" &&\n      dropdownType !== \"split-driver\" &&\n      dropdownType !== \"split-truck\" &&\n      dropdownType !== \"split-trailer\";\n\n    @let unfilteredHeight =\n      dropdownType === \"contact\" || !animateDropdown\n        ? 244\n        : ((options()?.length || (showNoResults() ? 1 : 0)) +\n            (config().add ? 1 : 0)) *\n            30 +\n          4;\n\n    <div\n      ngbDropdownMenu\n      class=\"dropdown-menu input-dropdown-menu\"\n      [class]=\"{\n        'hide-dropdown':\n          config().dropdownAutocomplete &&\n          !dropdownOptions()?.length &&\n          !(showNoResults() && value()),\n        'animate-dropdown': animateDropdown,\n        'size-22': config().size === 22,\n        'has-stroke': config().hasStroke,\n      }\"\n      [class.closing]=\"closing()\"\n      [style.--unfiltered-height]=\"\n        unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'\n      \"\n      [style.--max-height]=\"maxHeight > 244 ? '244px' : maxHeight + 'px'\"\n      [style.width.px]=\"containerWidth()\"\n      [tabindex]=\"-1\"\n      (pointerdown)=\"onDropdownBackgroundClick($event)\"\n      (pointerup)=\"stopEventPropagation($event)\"\n      (mouseup)=\"stopEventPropagation($event)\"\n      (click)=\"stopEventPropagation($event)\"\n    >\n      <div\n        class=\"dropdown-menu-content\"\n        [tabindex]=\"-1\"\n        caiInfiniteScroll\n        [scrollThreshold]=\"50\"\n        (scrolledToBottom)=\"onDropdownScrolledToBottom()\"\n      >\n        @if (config().add) {\n          <button\n            class=\"dropdown-item add-new\"\n            [class.focused]=\"\n              focusedOptionIndex === -1 ||\n              groupedNavigationState?.groupIndex === -1\n            \"\n            (pointerdown)=\"handleAddingOption($event)\"\n          >\n            <p>ADD NEW</p>\n            <svg-icon name=\"cai-plus\" class=\"dropdown-item-icon\"></svg-icon>\n          </button>\n        }\n        <ng-container *ngTemplateOutlet=\"dropdownMenuRef\"></ng-container>\n      </div>\n    </div>\n\n    @if (!config().dropdownAutocomplete) {\n      <div\n        class=\"dropdown-icon-container\"\n        [class.open]=\"dropdown.isOpen() && !closing()\"\n        (pointerdown)=\"onDropdownIconClick($event)\"\n      >\n        <svg-icon\n          name=\"cai-arrow-secondary-down\"\n          class=\"dropdown-icon icon\"\n        ></svg-icon>\n      </div>\n    }\n    @let specialDropdown =\n      dropdownType === \"dispatch\" ||\n      dropdownType === \"ftl-dispatch\" ||\n      dropdownType === \"broker\" ||\n      dropdownType === \"contact\" ||\n      dropdownType === \"shipper\" ||\n      dropdownType === \"bank\" ||\n      dropdownType === \"dispatcher\" ||\n      dropdownType === \"truck\" ||\n      dropdownType === \"trailer\" ||\n      dropdownType === \"hazardous\" ||\n      dropdownType === \"state\" ||\n      dropdownType === \"owner\" ||\n      dropdownType === \"fuelcard\" ||\n      dropdownType === \"pm\" ||\n      dropdownType === \"color\" ||\n      dropdownType === \"make\" ||\n      dropdownType === \"toll\" ||\n      dropdownType === \"provider\" ||\n      dropdownType === \"split-driver\" ||\n      dropdownType === \"split-truck\" ||\n      dropdownType === \"split-trailer\";\n    <!-- Placeholder -->\n    @if (specialDropdown) {\n      <ng-container *ngTemplateOutlet=\"selectedOptionRef\"></ng-container>\n    } @else if (\n      (config().add || config().search) &&\n      !inputRef.value &&\n      !this.isAdding() &&\n      dropdownType !== \"subcontent\"\n    ) {\n      <div class=\"dropdown-selected\">\n        @if (config().placeholderBehavior === \"static\") {\n          <p class=\"selected-label-hidden\">\n            {{ name + (config().required ? \" *\" : \"\") }}\n          </p>\n          <p class=\"selected-text\">\n            {{\n              selectedOption() &&\n                cast(selectedOption(), \"dropdownOption\")![\n                  optionLabel || \"label\"\n                ]\n            }}\n          </p>\n        } @else {\n          @if (\n            selectedOption() &&\n            cast(selectedOption(), \"dropdownOption\")![\n              optionLabel || \"label\"\n            ] === \"Hazardous\"\n          ) {\n            <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\n            <p class=\"dropdown-selected-content\">\n              {{\n                selectedOption() &&\n                  cast(selectedOption(), \"dropdownOption\")![\n                    optionLabel || \"label\"\n                  ]\n              }}\n            </p>\n          } @else {\n            <p class=\"dropdown-selected-content\">\n              {{\n                selectedOption() &&\n                  cast(selectedOption(), \"dropdownOption\")![\n                    optionLabel || \"label\"\n                  ]\n              }}\n            </p>\n          }\n        }\n      </div>\n    }\n  } @else if (config().isEdit && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ name }}</p>\n    </div>\n  }\n  @if (config().passwordRequirements) {\n    <div\n      class=\"dropdown-menu password-requirement\"\n      ngbDropdownMenu\n      [style.width.px]=\"containerWidth()\"\n      [class.closing]=\"closing()\"\n      (pointerup)=\"stopEventPropagation($event)\"\n      (mouseup)=\"stopEventPropagation($event)\"\n      (click)=\"stopEventPropagation($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"passwordRequirementsRef\"></ng-container>\n    </div>\n  }\n  @if (subcontent) {\n    <p class=\"subcontent\">\n      @if (!(config().alignment === \"right\")) {\n        <span class=\"subcontent-hide\"\n          >{{\n            config().search\n              ? selectedOption() &&\n                cast(selectedOption(), \"dropdownOption\")![\n                  optionLabel || \"label\"\n                ]\n              : inputRef.value\n          }}\n        </span>\n      }\n      {{ subcontent }}\n    </p>\n  }\n</div>\n\n<!-- #region Templates -->\n\n<!-- #region Password requirements -->\n<ng-template #passwordRequirementsRef>\n  @let isMinLengthValid =\n    !this.ngControl?.errors?.[\"minlength\"] && this.value();\n  @let isHasNumberValid =\n    !this.ngControl?.errors?.[\"hasNumber\"] && this.value();\n  @let isHasSymbolValid =\n    !this.ngControl?.errors?.[\"hasSymbol\"] && this.value();\n  @let isHasUppercaseValid =\n    !this.ngControl?.errors?.[\"hasUppercase\"] && this.value();\n\n  <p>Strong Password Requirement</p>\n  <ul>\n    <li [class.valid]=\"isMinLengthValid\">\n      <svg-icon\n        [name]=\"isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isMinLengthValid ? 'checkmark' : 'cancel'\"\n        class=\"icon\"\n      ></svg-icon\n      ><span>Minimum 8 characters</span>\n    </li>\n    <li [class.valid]=\"isHasNumberValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasNumberValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One number</span>\n    </li>\n    <li [class.valid]=\"isHasSymbolValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasSymbolValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One symbol</span>\n    </li>\n    <li [class.valid]=\"isHasUppercaseValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasUppercaseValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One upper-case letter</span>\n    </li>\n  </ul>\n</ng-template>\n<!-- #endregion -->\n@let search = config().search;\n\n<ng-template #dropdownMenuRef>\n  @switch (dropdownType) {\n    @case (\"dispatch\") {\n      <ng-container *ngTemplateOutlet=\"dispatchesRef\"></ng-container>\n    }\n    @case (\"ftl-dispatch\") {\n      <ng-container *ngTemplateOutlet=\"ftlDispatchRef\"></ng-container>\n    }\n    @case (\"broker\") {\n      <ng-container *ngTemplateOutlet=\"brokerRef\"></ng-container>\n    }\n    @case (\"contact\") {\n      <ng-container *ngTemplateOutlet=\"contactRef\"></ng-container>\n    }\n    @case (\"shipper\") {\n      <ng-container *ngTemplateOutlet=\"shipperRef\"></ng-container>\n    }\n    @case (\"bank\") {\n      <ng-container *ngTemplateOutlet=\"bankRef\"></ng-container>\n    }\n    @case (\"dispatcher\") {\n      <ng-container *ngTemplateOutlet=\"dispatcherRef\"></ng-container>\n    }\n    @case (\"trailer\") {\n      <ng-container *ngTemplateOutlet=\"trailerRef\"></ng-container>\n    }\n    @case (\"truck\") {\n      <ng-container *ngTemplateOutlet=\"truckRef\"></ng-container>\n    }\n    @case (\"hazardous\") {\n      <ng-container *ngTemplateOutlet=\"hazardousRef\"></ng-container>\n    }\n    @case (\"state\") {\n      <ng-container *ngTemplateOutlet=\"stateRef\"></ng-container>\n    }\n    @case (\"owner\") {\n      <ng-container *ngTemplateOutlet=\"ownerRef\"></ng-container>\n    }\n    @case (\"fuelcard\") {\n      <ng-container *ngTemplateOutlet=\"fuelcardRef\"></ng-container>\n    }\n    @case (\"pm\") {\n      <ng-container *ngTemplateOutlet=\"pmRef\"></ng-container>\n    }\n    @case (\"multiple\") {\n      <ng-container *ngTemplateOutlet=\"multipleRef\"></ng-container>\n    }\n    @case (\"make\") {\n      <ng-container *ngTemplateOutlet=\"makeRef\"></ng-container>\n    }\n    @case (\"toll\") {\n      <ng-container *ngTemplateOutlet=\"tollRef\"></ng-container>\n    }\n    @case (\"color\") {\n      <ng-container *ngTemplateOutlet=\"colorRef\"></ng-container>\n    }\n    @case (\"fuel-stop-transaction\") {\n      <ng-container *ngTemplateOutlet=\"fuelStopTransactionRef\"></ng-container>\n    }\n    @case (\"provider\") {\n      <ng-container *ngTemplateOutlet=\"providerRef\"></ng-container>\n    }\n    @case (\"split-driver\") {\n      <ng-container *ngTemplateOutlet=\"splitDriverRef\"></ng-container>\n    }\n    @case (\"split-truck\") {\n      <ng-container *ngTemplateOutlet=\"splitTruckRef\"></ng-container>\n    }\n    @case (\"split-trailer\") {\n      <ng-container *ngTemplateOutlet=\"splitTrailerRef\"></ng-container>\n    }\n    @case (\"subcontent\") {\n      <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\n    }\n    @default {\n      <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #selectedOptionRef>\n  @switch (dropdownType) {\n    @case (\"dispatch\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\n    }\n    @case (\"ftl-dispatch\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\n    }\n    @case (\"broker\") {\n      <ng-container *ngTemplateOutlet=\"selectedBrokerRef\"></ng-container>\n    }\n    @case (\"contact\") {\n      <ng-container *ngTemplateOutlet=\"selectedContactRef\"></ng-container>\n    }\n    @case (\"shipper\") {\n      <ng-container *ngTemplateOutlet=\"selectedShipperRef\"></ng-container>\n    }\n    @case (\"bank\") {\n      <ng-container *ngTemplateOutlet=\"selectedBankRef\"></ng-container>\n    }\n    @case (\"dispatcher\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatcherRef\"></ng-container>\n    }\n    @case (\"trailer\") {\n      <ng-container *ngTemplateOutlet=\"selectedTrailerRef\"></ng-container>\n    }\n    @case (\"truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedTruckRef\"></ng-container>\n    }\n    @case (\"hazardous\") {\n      <ng-container *ngTemplateOutlet=\"selectedHazardousRef\"></ng-container>\n    }\n    @case (\"state\") {\n      <ng-container *ngTemplateOutlet=\"selectedStateRef\"></ng-container>\n    }\n    @case (\"owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedOwnerRef\"></ng-container>\n    }\n    @case (\"fuelcard\") {\n      <ng-container *ngTemplateOutlet=\"selectedFuelcardRef\"></ng-container>\n    }\n    @case (\"pm\") {\n      <ng-container *ngTemplateOutlet=\"selectedPmRef\"></ng-container>\n    }\n    @case (\"make\") {\n      <ng-container *ngTemplateOutlet=\"selectedMakeRef\"></ng-container>\n    }\n    @case (\"toll\") {\n      <ng-container *ngTemplateOutlet=\"selectedTollRef\"></ng-container>\n    }\n    @case (\"color\") {\n      <ng-container *ngTemplateOutlet=\"selectedColorRef\"></ng-container>\n    }\n    @case (\"provider\") {\n      <ng-container *ngTemplateOutlet=\"selectedProviderRef\"></ng-container>\n    }\n    @case (\"split-driver\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitDriverRef\"></ng-container>\n    }\n    @case (\"split-truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitTruckRef\"></ng-container>\n    }\n    @case (\"split-trailer\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitTrailerRef\"></ng-container>\n    }\n  }\n</ng-template>\n\n<!-- Standard dropdown -->\n<ng-template #dropdownOptionsRef>\n  @if (dropdownOptions().length) {\n    @for (option of dropdownOptions(); track $index; let index = $index) {\n      @let dropdownOption = cast(option, \"dropdownOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dropdownOption.id }}\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n        (pointerdown)=\"handleOption(dropdownOption, $event)\"\n      >\n        @if (dropdownOption[optionLabel] === \"Hazardous\") {\n          <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\n        }\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (dropdownOption[optionLabel] | highlightSearch: value())\n              : dropdownOption[optionLabel]\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #multipleRef>\n  @if (dropdownOptions().length) {\n    @for (option of dropdownOptions(); track $index; let index = $index) {\n      @let dropdownOption = cast(option, \"dropdownOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dropdownOption.id }}\"\n        (pointerdown)=\"handleOption(dropdownOption, $event)\"\n        [class]=\"{\n          selected: isSelectedOption(dropdownOption),\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (dropdownOption[optionLabel] | highlightSearch: value())\n              : dropdownOption[optionLabel]\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #bankRef>\n  @if (dropdownOptions().length) {\n    @for (bank of dropdownOptions(); track $index; let index = $index) {\n      @let bankOption = cast(bank, \"bank\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ bankOption.id }}\"\n        (pointerdown)=\"handleOption(bankOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'bank')?.id === bankOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        @if (bankOption.logoName) {\n          <svg-icon\n            class=\"full-icon\"\n            [name]=\"bankOption.logoName.slice(0, -4)\"\n          ></svg-icon>\n        } @else {\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (bankOption.name || '' | highlightSearch: value())\n                : bankOption.name\n            \"\n          ></p>\n        }\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #makeRef>\n  @if (dropdownOptions().length) {\n    @for (make of dropdownOptions(); track $index; let index = $index) {\n      @let makeOption = cast(make, \"make\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ makeOption.id }}\"\n        (pointerdown)=\"handleOption(makeOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'make')?.id === makeOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        @if (makeOption.logoName) {\n          <svg-icon\n            class=\"full-icon\"\n            [name]=\"makeOption.logoName.slice(0, -4)\"\n          ></svg-icon>\n        } @else {\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (makeOption.name || '' | highlightSearch: value())\n                : makeOption.name\n            \"\n          ></p>\n        }\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Broker -->\n<ng-template #brokerRef>\n  @if (dropdownOptions().length) {\n    @for (broker of dropdownOptions(); track $index; let index = $index) {\n      @let brokerOption = cast(broker, \"broker\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"broker-{{ brokerOption.id }}\"\n        (pointerdown)=\"\n          !(brokerOption.dnu || brokerOption.ban) &&\n            handleOption(brokerOption, $event)\n        \"\n        [class]=\"{\n          selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,\n          focused: focusedOptionIndex === index,\n          banned: brokerOption.dnu || brokerOption.ban,\n          dnu: brokerOption.dnu,\n        }\"\n      >\n        @if (brokerOption?.dnu || brokerOption?.ban) {\n          <svg-icon name=\"cai-minus\" class=\"round-icon\"></svg-icon>\n        } @else if (brokerOption?.fraudCheck) {\n          <svg-icon\n            name=\"cai-status-warning-lite\"\n            class=\"icon fraud\"\n          ></svg-icon>\n        }\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (brokerOption.businessName || '' | highlightSearch: value())\n              : brokerOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            @if (!brokerOption.creditLimit) {\n              <p>Unlimited</p>\n            } @else {\n              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\n              <div\n                class=\"progress-bar\"\n                [style.--progress]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).activePercentageOfPaid + '%'\n                \"\n                [class]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).status\n                \"\n              ></div>\n            }\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ brokerOption.loadsCount }} |\n              {{ brokerOption.availableCredit || 0 | currency }}\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Contact dropdown -->\n<ng-template #contactRef>\n  @if (dropdownOptions().length) {\n    @for (contact of dropdownOptions(); track $index; let index = $index) {\n      @let contactOption = cast(contact, \"contact\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"contact-{{ contact.id }}\"\n        (pointerdown)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          [innerHTML]=\"\n            search\n              ? (contactOption.contactName || '' | highlightSearch: value())\n              : contactOption.contactName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p>{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ contactOption.phone }}\n            </p>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Owner dropdown -->\n<ng-template #ownerRef>\n  @if (dropdownOptions().length) {\n    @for (owner of dropdownOptions(); track $index; let index = $index) {\n      @let ownerOption = cast(owner, \"owner\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"owner-{{ ownerOption?.id }}\"\n        (pointerdown)=\"handleOption(ownerOption!, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"owner-ein\"\n          [innerHTML]=\"\n            search\n              ? (ownerOption?.ein || '' | highlightSearch: value())\n              : ownerOption?.ein\n          \"\n        ></p>\n        <p\n          [innerHTML]=\"\n            search\n              ? (ownerOption?.name || '' | highlightSearch: value())\n              : ownerOption?.name\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Fuelcard dropdown -->\n<ng-template #fuelcardRef>\n  @if (dropdownOptions().length) {\n    @for (fuelcard of dropdownOptions(); track $index; let index = $index) {\n      @let fuelcardOption = cast(fuelcard, \"fuelCard\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"fuelcard-{{ fuelcardOption?.id }}\"\n        (pointerdown)=\"handleOption(fuelcardOption!, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"fuelcard-number\"\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.number || '' | highlightSearch: value())\n              : fuelcardOption?.number\n          \"\n        ></p>\n        <p\n          class=\"fuelcard-brand\"\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.brand || '' | highlightSearch: value())\n              : fuelcardOption?.brand\n          \"\n        ></p>\n        <p\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.account || '' | highlightSearch: value())\n              : fuelcardOption?.account\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Shipper dropdown -->\n<ng-template #shipperRef>\n  @if (dropdownOptions().length) {\n    @for (shipper of dropdownOptions(); track $index; let index = $index) {\n      @let shipperOption = cast(shipper, \"shipper\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"shipper-{{ shipperOption.id }}\"\n        (pointerdown)=\"handleOption(shipperOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"max-w-280 text-truncate\"\n          [innerHTML]=\"\n            search\n              ? (shipperOption.businessName || '' | highlightSearch: value())\n              : shipperOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p\n              class=\"max-w-280 text-truncate\"\n              [innerHTML]=\"\n                search\n                  ? (shipperOption.address?.address || ''\n                    | highlightSearch: value())\n                  : shipperOption.address?.address\n              \"\n            ></p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ shipperOption.pickupCount }} Pickup |\n              {{ shipperOption.deliveryCount }} Delivery\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatch dropdown -->\n<ng-template #dispatchesRef>\n  @if (dropdownOptions().length) {\n    <button\n      tabindex=\"-1\"\n      class=\"dropdown-item\"\n      (pointerdown)=\"reset()\"\n      [class]=\"{\n        selected: !selectedOption(),\n      }\"\n    >\n      <p>Unassigned</p>\n      <div class=\"unassigned-ltl\">\n        <p>{{ unassignedCount() }}</p>\n        <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\n      </div>\n    </button>\n    @for (\n      dispatchBoard of dropdownOptions();\n      track dispatchBoard.id;\n      let groupIndex = $index\n    ) {\n      <!-- Temporary variant since BE doesn't support boards -->\n      @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\n\n      @let isNoBoardsVariant =\n        dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\n      @if (dispatchBoardOption.count > 0) {\n        @if (!isNoBoardsVariant) {\n          @let isGroupFocused =\n            groupedNavigationState?.groupIndex === groupIndex &&\n            groupedNavigationState?.optionIndex === 0;\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\n            [class]=\"{\n              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p>\n              {{\n                dispatchBoardOption.teamBoard\n                  ? \"Team Board\"\n                  : dispatchBoardOption.dispatcher\n              }}\n            </p>\n            <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n        }\n        @if (\n          dispatchBoardOption.dispatches &&\n          dispatchBoardOption.dispatches.length > 0\n        ) {\n          @for (\n            dispatch of dispatchBoardOption.dispatches;\n            track dispatch.id;\n            let optionIndex = $index\n          ) {\n            @let isOptionFocused =\n              groupedNavigationState?.groupIndex === groupIndex &&\n              groupedNavigationState?.optionIndex === optionIndex + 1;\n            <!-- +1 since optionIndex is 0 for the group item header -->\n            <button\n              tabindex=\"-1\"\n              class=\"dropdown-item\"\n              (pointerdown)=\"handleOption(dispatch, $event)\"\n              [class]=\"{\n                selected:\n                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,\n                focused: isOptionFocused,\n              }\"\n            >\n              <div class=\"dropdown-subitem truck-item\">\n                <svg-icon\n                  class=\"truck-icon truck-trailer-icon-colors\"\n                  [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                  [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                ></svg-icon>\n                <p\n                  class=\"truck-number\"\n                  [innerHTML]=\"\n                    dispatch.truck.truckNumber | highlightSearch: value()\n                  \"\n                ></p>\n              </div>\n              <div class=\"dropdown-subitem trailer-item\">\n                @if (dispatch.trailer) {\n                  <svg-icon\n                    class=\"trailer-icon truck-trailer-icon-colors\"\n                    [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                    [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                  ></svg-icon>\n                  <p\n                    class=\"trailer-number\"\n                    [innerHTML]=\"\n                      dispatch.trailer.trailerNumber | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem\">\n                @if (dispatch.coDriver) {\n                  <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName +\n                        ' & ' +\n                        dispatch.coDriver.firstName | highlightSearch: value()\n                    \"\n                  ></p>\n                } @else {\n                  <cai-avatar\n                    [driver]=\"dispatch.driver\"\n                    [size]=\"18\"\n                    [inverse]=\"true\"\n                    [hover]=\"false\"\n                  ></cai-avatar>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem-end\">\n                <div class=\"end-item-hover\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base dispatch-ltl\">\n                  <p>{{ dispatch.numberOfSingleLtlLoads }}</p>\n                  <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- ftl dispatch dropdown -->\n<ng-template #ftlDispatchRef>\n  @if (dropdownOptions().length) {\n    @for (\n      dispatchBoard of dropdownOptions();\n      track dispatchBoard.id;\n      let groupIndex = $index\n    ) {\n      @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      @let isNoBoardsVariant =\n        dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\n      @if (dispatchBoardOption.count > 0) {\n        @if (!isNoBoardsVariant) {\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\n            [class]=\"{\n              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p>\n              {{\n                dispatchBoardOption.teamBoard\n                  ? \"Team Board\"\n                  : dispatchBoardOption.dispatcher\n              }}\n            </p>\n            <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n        }\n        @if (\n          dispatchBoardOption.dispatches &&\n          dispatchBoardOption.dispatches.length > 0\n        ) {\n          @for (\n            dispatch of dispatchBoardOption.dispatches;\n            track dispatch.id;\n            let optionIndex = $index\n          ) {\n            @let isOptionFocused =\n              groupedNavigationState?.groupIndex === groupIndex &&\n              groupedNavigationState?.optionIndex === optionIndex + 1;\n            <!-- +1 since optionIndex is 0 for the group item header -->\n            <button\n              class=\"dropdown-item\"\n              (pointerdown)=\"handleOption(dispatch, $event)\"\n              [class]=\"{\n                selected:\n                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,\n                focused: isOptionFocused,\n              }\"\n            >\n              <div class=\"dropdown-subitem truck-item\">\n                <svg-icon\n                  class=\"truck-icon truck-trailer-icon-colors\"\n                  [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                  [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                ></svg-icon>\n                <p\n                  class=\"truck-number\"\n                  [innerHTML]=\"\n                    dispatch.truck.truckNumber | highlightSearch: value()\n                  \"\n                ></p>\n              </div>\n              <div class=\"dropdown-subitem trailer-item\">\n                @if (dispatch.trailer) {\n                  <svg-icon\n                    class=\"trailer-icon truck-trailer-icon-colors\"\n                    [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                    [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                  ></svg-icon>\n                  <p\n                    class=\"trailer-number\"\n                    [innerHTML]=\"\n                      dispatch.trailer.trailerNumber | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem\">\n                @if (dispatch.coDriver) {\n                  <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName +\n                        ' & ' +\n                        dispatch.coDriver.firstName | highlightSearch: value()\n                    \"\n                  ></p>\n                } @else {\n                  <cai-avatar\n                    [driver]=\"dispatch.driver\"\n                    [size]=\"18\"\n                    [inverse]=\"true\"\n                    [hover]=\"false\"\n                  ></cai-avatar>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem-end\">\n                <div class=\"end-item-hover\">\n                  <!-- Load Status -->\n                  @if (dispatch.status?.statusString) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"\n                        'status-' +\n                        dispatch.status?.statusString\n                          ?.toLowerCase()\n                          ?.replaceAll(' ', '')\n                          ?.replaceAll('.', '')\n                      \"\n                    >\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block blue\">D</p>\n                        <p class=\"status-block green\">L</p>\n                      }\n                      {{ dispatch.status?.statusString }}\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block green\">P</p>\n                        <p class=\"status-block orange\">D</p>\n                      }\n                      @if (dispatch.status?.statusCheckInNumber) {\n                        <p class=\"status-block\">\n                          {{ dispatch.status?.statusCheckInNumber }}\n                        </p>\n                      }\n                    </div>\n                    <p class=\"dispatch-separator\">|</p>\n                  }\n                  <p class=\"dispatch-load-count\">\n                    <!-- Pending Load Count -->\n                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\n                    0\n                  </p>\n                  <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitDriverRef>\n  @if (dropdownOptions().length) {\n    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\n      @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(driverBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (driverBoard.drivers?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            driverBoard.isTeamBoard ? \"Team Board\" : driverBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ driverBoard.drivers?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (driver of driverBoard.drivers || []; track driver.id) {\n        @let driverOption = cast(driver, \"splitDriver\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(driverOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitDriver')?.id === driverOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem\">\n            <div class=\"dropdown-avatar\">\n              <cai-avatar\n                [driver]=\"driverOption\"\n                [size]=\"18\"\n                [inverse]=\"true\"\n                [hover]=\"false\"\n              ></cai-avatar>\n            </div>\n            <p\n              class=\"driver-name\"\n              [innerHTML]=\"\n                driverOption.firstName + ' ' + driverOption.lastName\n                  | highlightSearch: value()\n              \"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                driverOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ driverOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              <p>{{ driverOption.payTypeValue }}</p>\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTruckRef>\n  @if (dropdownOptions().length) {\n    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\n      @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(truckBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (truckBoard.trucks?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            truckBoard.isTeamBoard ? \"Team Board\" : truckBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ truckBoard.trucks?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (truck of truckBoard.trucks || []; track truck.id) {\n        @let truckOption = cast(truck, \"splitTruck\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(truckOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitTruck')?.id === truckOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem truck-item\">\n            <svg-icon\n              class=\"truck-icon\"\n              [style.--truck-color]=\"truckOption.color?.code || ''\"\n              [name]=\"truckOption.truckType.logoName.slice(0, -4)\"\n            ></svg-icon>\n            <p\n              class=\"truck-number\"\n              [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                truckOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ truckOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                truckOption.location?.city &&\n                truckOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ truckOption.location?.city }},\n                  {{ truckOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\n      @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(trailerBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (trailerBoard.trailers?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            trailerBoard.isTeamBoard\n              ? \"Team Board\"\n              : trailerBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ trailerBoard.trailers?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (trailer of trailerBoard.trailers || []; track trailer.id) {\n        @let trailerOption = cast(trailer, \"splitTrailer\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(trailerOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem trailer-item\">\n            <svg-icon\n              class=\"trailer-icon\"\n              [style.--trailer-color]=\"trailerOption.color?.code || ''\"\n              [name]=\"trailerOption.trailerType.logoName.slice(0, -4)\"\n            ></svg-icon>\n            <p\n              class=\"trailer-number\"\n              [innerHTML]=\"\n                trailerOption.trailerNumber | highlightSearch: value()\n              \"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                trailerOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ trailerOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                trailerOption.location?.city &&\n                trailerOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ trailerOption.location?.city }},\n                  {{ trailerOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #tollRef>\n  @if (dropdownOptions().length) {\n    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\n      @let tollOption = cast(toll, \"tollOption\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item pe-none\"\n        [class]=\"{\n          unfolded: tollOption.tollTransponders?.length || 0 > 0,\n          focused: isGroupFocused,\n        }\"\n      >\n        <p>\n          {{ tollOption.groupName }}\n        </p>\n      </button>\n      @let tollTransponders = tollOption.tollTransponders || [];\n      @for (\n        tollTransponder of tollTransponders;\n        track tollTransponder.id;\n        let optionIndex = $index\n      ) {\n        @let isOptionFocused =\n          groupedNavigationState?.groupIndex === groupIndex &&\n          groupedNavigationState?.optionIndex === optionIndex + 1;\n        <!-- +1 since optionIndex is 0 for the group item header -->\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(tollTransponder, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'tollTransponderOption')?.id ===\n              tollTransponder.id,\n            focused: isOptionFocused,\n          }\"\n        >\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (tollTransponder.name || '' | highlightSearch: value())\n                : tollTransponder.name\n            \"\n          ></p>\n          <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatcher dropdown -->\n\n<ng-template #dispatcherRef>\n  @if (dropdownOptions().length) {\n    @for (dispatcher of dropdownOptions(); track $index; let index = $index) {\n      @let dispatcherOption = cast(dispatcher, \"dispatcher\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dispatcherOption.id }}\"\n        (pointerdown)=\"handleOption(dispatcherOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <cai-avatar\n          [driver]=\"{\n            id: dispatcherOption?.id || 0,\n            firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n            lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n            avatarFile: dispatcherOption?.avatarFile,\n            colorFlag: dispatcherOption?.colorFlag,\n          }\"\n          [rounded]=\"!config().squareAvatar\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p\n          class=\"dropdown-content-hazardous\"\n          [innerHTML]=\"\n            search\n              ? (dispatcherOption.fullName || '' | highlightSearch: value())\n              : dispatcherOption.fullName\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #truckRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let truckOption = cast(truck, \"truckOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ truckOption.id }}\"\n        (pointerdown)=\"handleOption(truckOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'truckOption')?.id === truckOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (truckOption.name || '' | highlightSearch: value())\n              : truckOption.name\n          \"\n        ></p>\n        <svg-icon\n          class=\"truck-trailer-option truck-trailer-icon-colors\"\n          [class]=\"truckOption.logoName.slice(0, -4)\"\n          [name]=\"truckOption.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <svg-icon\n          name=\"cai-checkmark\"\n          class=\"dropdown-item-icon no-margin\"\n        ></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #trailerRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let trailerOption = cast(truck, \"trailerOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ trailerOption.id }}\"\n        (pointerdown)=\"handleOption(trailerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (trailerOption.name || '' | highlightSearch: value())\n              : trailerOption.name\n          \"\n        ></p>\n\n        <svg-icon\n          class=\"truck-trailer-option truck-trailer-icon-colors\"\n          [class]=\"trailerOption.logoName.slice(0, -4)\"\n          [name]=\"trailerOption.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <svg-icon\n          name=\"cai-checkmark\"\n          class=\"dropdown-item-icon no-margin\"\n        ></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #providerRef>\n  @if (dropdownOptions().length) {\n    @for (provider of dropdownOptions(); track $index; let index = $index) {\n      @let providerOption = cast(provider, \"provider\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ providerOption?.id }}\"\n        (pointerdown)=\"handleOption(providerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'provider')?.id === providerOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"full-icon\"\n          [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n        ></svg-icon>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Hazardous dropdown -->\n<ng-template #hazardousRef>\n  @if (dropdownOptions().length) {\n    @for (hazardous of dropdownOptions(); track $index; let index = $index) {\n      @let hazardousOption = cast(hazardous, \"hazardous\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ hazardousOption.id }}\"\n        (pointerdown)=\"handleOption(hazardousOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon [name]=\"hazardousOption.logoName?.slice(0, -4)\"></svg-icon>\n        <p\n          class=\"dropdown-content-hazardous\"\n          [innerHTML]=\"\n            search\n              ? (hazardousOption.description || '' | highlightSearch: value())\n              : hazardousOption.description\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #pmRef>\n  @if (dropdownOptions().length) {\n    @for (pm of dropdownOptions(); track $index; let index = $index) {\n      @let pmOption = cast(pm, \"pmOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ pmOption.id }}\"\n        (pointerdown)=\"handleOption(pmOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon\"\n          [name]=\"pmOption.title | remapPmIcons\"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (pmOption.title || '' | highlightSearch: value())\n              : pmOption.title\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #colorRef>\n  @if (dropdownOptions().length) {\n    @for (color of dropdownOptions(); track $index; let index = $index) {\n      @let colorOption = cast(color, \"colorOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item color-item\"\n        id=\"option-{{ colorOption.id }}\"\n        (pointerdown)=\"handleOption(colorOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'colorOption')?.id === colorOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon cai-color\"\n          [name]=\"'cai-color'\"\n          [style.--color]=\"colorOption?.code\"\n          [style.--hover-color]=\"colorOption?.hoverCode\"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (colorOption.name || '' | highlightSearch: value())\n              : colorOption.name\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #stateRef>\n  @if (dropdownOptions().length) {\n    @for (state of dropdownOptions(); track $index; let index = $index) {\n      @let stateOption = cast(state, \"state\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ stateOption.id }}\"\n        (pointerdown)=\"handleOption(stateOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'state')?.id === stateOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon\"\n          [name]=\"\n            'cai-' +\n            stateOption?.countryType?.name?.toLowerCase() +\n            '-' +\n            stateOption?.stateShortName?.toLowerCase()\n          \"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (stateOption.stateShortName +\n                  ' ' +\n                  (config().fullState\n                    ? ' (' + stateOption?.stateName + ')'\n                    : '') || '' | highlightSearch: value())\n              : stateOption.stateShortName +\n                ' ' +\n                (config().fullState ? ' (' + stateOption?.stateName + ')' : '')\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #fuelStopTransactionRef>\n  @if (dropdownOptions().length) {\n    @for (\n      franchise of dropdownOptions();\n      track franchise.id;\n      let groupIndex = $index\n    ) {\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      @let franchiseOption = cast(franchise, \"franchise\")!;\n      @if (franchiseOption?.count !== null) {\n        <div\n          class=\"dropdown-group\"\n          [class.no-items]=\"!franchiseOption?.count\"\n          [class]=\"{\n            active: openGroup() === franchiseOption.id,\n          }\"\n          [style.--max-height]=\"\n            openGroup() === franchiseOption.id\n              ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'\n              : '26px'\n          \"\n        >\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(franchiseOption.id, $event, franchiseOption)\"\n            [class]=\"{\n              unfolded: openGroup() === franchiseOption.id,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p\n              [innerHTML]=\"\n                franchiseOption?.businessName || '' | highlightSearch: value()\n              \"\n            ></p>\n            <p class=\"counter\">{{ franchiseOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n          @if (openGroup() === franchiseOption.id) {\n            @if (franchiseOption.fuelStopStores?.length || 0 > 0) {\n              @for (\n                fuelStopStore of franchiseOption.fuelStopStores;\n                track fuelStopStore.id\n              ) {\n                @let isOptionFocused =\n                  groupedNavigationState?.groupIndex === groupIndex &&\n                  groupedNavigationState?.optionIndex === $index + 1;\n                <!-- +1 since optionIndex is 0 for the group item header -->\n                <button\n                  tabindex=\"-1\"\n                  class=\"dropdown-item fuel-stop-transaction-store\"\n                  [class]=\"{\n                    focused: isOptionFocused,\n                  }\"\n                  (pointerdown)=\"handleOption(fuelStopStore, $event)\"\n                >\n                  <p\n                    [innerHTML]=\"\n                      fuelStopStore?.store ?? '' | highlightSearch: value()\n                    \"\n                  ></p>\n                  @let city = fuelStopStore?.address?.city ?? \"\";\n                  @let state = fuelStopStore?.address?.stateShortName ?? \"\";\n                  @let zip = fuelStopStore?.address?.zipCode ?? \"\";\n                  <p\n                    class=\"fuel-stop-transaction-store-address\"\n                    [innerHTML]=\"\n                      city + (state || zip ? ', ' : '') + state + ' ' + zip\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n\n                  @if (fuelStopStore?.[\"favourite\"]) {\n                    <svg-icon\n                      name=\"cai-favorite\"\n                      class=\"favorite-icon\"\n                    ></svg-icon>\n                  }\n                </button>\n              }\n              <!-- Infinite scroll trigger - emits event when item comes into view -->\n              <div\n                class=\"dropdown-infinite-scroll-item\"\n                caiIntersectionObserver\n                [threshold]=\"0.1\"\n                (inView)=\"onDropdownScrolledToBottom(true)\"\n              ></div>\n            } @else {\n              <p class=\"dropdown-item no-results\">No results</p>\n            }\n          }\n        </div>\n      } @else {\n        <button\n          tabindex=\"-1\"\n          class=\"dropdown-item\"\n          [class.focused]=\"\n            groupedNavigationState?.groupIndex === groupIndex &&\n            groupedNavigationState?.optionIndex === 0\n          \"\n          (pointerdown)=\"handleOption(franchiseOption, $event)\"\n        >\n          <p\n            class=\"fuel-stop-transaction-nostore\"\n            [innerHTML]=\"\n              franchiseOption?.businessName || '' | highlightSearch: value()\n            \"\n          ></p>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- #endregion -->\n\n<!-- #region Selected options -->\n\n<!-- selected dispatch -->\n<ng-template #selectedDispatchRef>\n  @let dispatchOption = cast(selectedOption(), \"dispatch\");\n  @if (dispatchOption && !inputRef.value && !isAdding()) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem truck-item\">\n        <svg-icon\n          class=\"truck-icon\"\n          [name]=\"dispatchOption!.truck.truckType.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <p class=\"truck-number\">\n          {{ dispatchOption!.truck.truckNumber }}\n        </p>\n      </div>\n      <div class=\"dropdown-subitem trailer-item\">\n        @if (dispatchOption!.trailer) {\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"\n              cast(\n                selectedOption(),\n                'dispatch'\n              )!.trailer?.trailerType?.logoName?.slice(0, -4)\n            \"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ dispatchOption!.trailer?.trailerNumber }}\n          </p>\n        }\n      </div>\n      <div class=\"dropdown-subitem\">\n        @if (dispatchOption!.coDriver) {\n          <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n          <p class=\"driver-name\">\n            {{\n              dispatchOption!.driver.firstName +\n                \" & \" +\n                dispatchOption!.coDriver?.firstName\n            }}\n          </p>\n        } @else {\n          <cai-avatar\n            [driver]=\"dispatchOption!.driver\"\n            [size]=\"18\"\n            [hover]=\"false\"\n          ></cai-avatar>\n          <p class=\"driver-name\">\n            {{\n              dispatchOption!.driver.firstName +\n                \" \" +\n                dispatchOption!.driver.lastName\n            }}\n          </p>\n        }\n      </div>\n      <p class=\"selected-end-item\">\n        {{ dispatchOption!.payType }}\n      </p>\n    </div>\n  } @else {\n    @if (!inputRef.value && this.config().dropdown == \"dispatch\") {\n      <p class=\"dropdown-selected\">Unassigned</p>\n    }\n  }\n</ng-template>\n\n<!-- selected broker -->\n<ng-template #selectedBrokerRef>\n  @let brokerOption = cast(selectedOption(), \"broker\");\n  @if (brokerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if ((brokerOption!.availableCredit || 0) < 0) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\n      <div class=\"selected-end-item\">\n        @if (!brokerOption!.creditLimit) {\n          <p>Unlimited</p>\n        } @else {\n          <p>\n            {{ brokerOption!.availableCredit || 0 | currency }}\n          </p>\n          <div\n            class=\"progress-bar\"\n            [style.--progress]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).activePercentageOfPaid + '%'\n            \"\n            [class]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).status\n            \"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedContactRef>\n  @let contactOption = cast(selectedOption(), \"contact\");\n  @if (contactOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ contactOption?.phone }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedShipperRef>\n  @let shipperOption = cast(selectedOption(), \"shipper\");\n  @if (shipperOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ shipperOption?.address?.address }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedOwnerRef>\n  @let ownerOption = cast(selectedOption(), \"owner\");\n  @if (ownerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\n      <p class=\"\">{{ ownerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedFuelcardRef>\n  @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\n  @if (fuelcardOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"fuelcard-number\">\n        {{ fuelcardOption?.number }}\n      </p>\n      <p class=\"fuelcard-brand\">\n        {{ fuelcardOption?.brand }}\n      </p>\n      <p class=\"\">\n        {{ fuelcardOption?.account }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedBankRef>\n  @let bankOption = cast(selectedOption(), \"bank\");\n  @if (bankOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (bankOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedProviderRef>\n  @let providerOption = cast(selectedOption(), \"provider\");\n  @if (providerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon full-size\"\n        [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n      ></svg-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedMakeRef>\n  @let makeOption = cast(selectedOption(), \"make\");\n  @if (makeOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (makeOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedStateRef>\n  @let stateOption = cast(selectedOption(), \"state\");\n  @if (stateOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"\n          'cai-' +\n          stateOption?.countryType?.name?.toLowerCase() +\n          '-' +\n          stateOption?.stateShortName?.toLowerCase()\n        \"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ stateOption?.stateShortName }}\n        {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedDispatcherRef>\n  @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\n  @if (dispatcherOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: dispatcherOption?.id || 0,\n          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: dispatcherOption?.avatarFile,\n          colorFlag: dispatcherOption?.colorFlag,\n        }\"\n        [rounded]=\"!config().squareAvatar\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckRef>\n  @let truckOption = cast(selectedOption(), \"truckOption\");\n  @if (truckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"truckOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTrailerRef>\n  @let trailerOption = cast(selectedOption(), \"trailerOption\");\n  @if (trailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"trailerOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedHazardousRef>\n  @let hazardousOption = cast(selectedOption(), \"hazardous\");\n  @if (hazardousOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"hazard-icon\"\n        [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\n        {{ hazardousOption?.description }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedPmRef>\n  @let pmOption = cast(selectedOption(), \"pmOption\");\n  @if (pmOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"pmOption?.title | remapPmIcons\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ pmOption?.title }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedColorRef>\n  @let colorOption = cast(selectedOption(), \"colorOption\");\n  @if (colorOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon cai-color\"\n        [name]=\"'cai-color'\"\n        [style.--color]=\"colorOption?.code\"\n        [style.--hover-color]=\"colorOption?.hoverCode\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ colorOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTollRef>\n  @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\n  @if (tollOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">\n        {{ tollOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitDriverRef>\n  @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\n  @if (splitDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem\">\n          <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\n          <p class=\"driver-name\">\n            {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\n          </p>\n        </div>\n      </div>\n\n      <p class=\"selected-end-item\">\n        {{ splitDriverOption.payTypeValue }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTruckRef>\n  @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\n  @if (splitTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem trailer-item\">\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ splitTruckOption!.truckNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTruckOption!.location?.city &&\n          splitTruckOption!.location?.stateShortName\n        ) {\n          {{ splitTruckOption!.location?.city }},\n          {{ splitTruckOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTrailerRef>\n  @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\n  @if (splitTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem truck-item\">\n          <svg-icon\n            class=\"truck-icon\"\n            [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"truck-number\">\n            {{ splitTrailerOption!.trailerNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTrailerOption!.location?.city &&\n          splitTrailerOption!.location?.stateShortName\n        ) {\n          {{ splitTrailerOption!.location?.city }},\n          {{ splitTrailerOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #passwordTooltip>\n  {{ visible() ? \"Hide\" : \"Show\" }}\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (\n    (config().errorBehavior === \"floating\" ||\n      (config().errorBehavior === \"static\" && hasText()) ||\n      config().inTable) &&\n    invalid &&\n    !dropdown.isOpen()\n  ) {\n    {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\n  }\n</ng-template>\n\n<!-- #endregion -->\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon,.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon,.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse.has-text:has(.app-input:disabled) .app-input-label{color:#424242!important}.app-input-container:hover,.app-input-container.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label{margin-right:44px}.app-input-container.has-text .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container.has-text.fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container.has-text .subcontent{opacity:1!important}.app-input-container.has-text.static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text)}.app-input-container.has-text.is-address:hover .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:hover .bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral-hover)}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .subcontent{opacity:1!important;color:#ffffffb2;left:unset!important;right:4px!important}.app-input-container:has(.app-input:focus-visible).has-text .subcontent{right:26px!important}.app-input-container:has(.app-input:focus-visible) .sub-label{margin-right:44px}.app-input-container:has(.app-input:focus-visible).fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container:has(.app-input:focus-visible).static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text-inverse)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover,.app-input-container:has(.app-input:disabled).hovered{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:disabled) .dropdown-icon-container{opacity:0}.app-input-container:has(.app-input:disabled):not(.disabled-removable) .cancel-button{display:none!important}.app-input-container:has(.app-input:required):not(:has(.app-input:disabled)) .app-input-name:after{content:\" *\";color:var(--color-text-negative)}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.subcontent{pointer-events:none;position:absolute;left:6px;color:#919191;-webkit-user-select:none;user-select:none;top:50%;transform:translateY(-50%);transition:right .1s ease-in-out,left .1s ease-in-out,transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);opacity:0;font-family:Montserrat;font-weight:400;font-style:Regular;font-size:14px;line-height:18px;letter-spacing:0%;height:18px;overflow:hidden}.subcontent .subcontent-hide{opacity:0!important}.app-input-label{position:absolute;display:flex;gap:4px;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.app-input-label.placeholder-color{color:var(--placeholder-color)!important}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error:hover:not(.has-right) .app-input,.app-input-container.has-error:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-error:hover,.app-input-container.has-error.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon,.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.has-text .bg-icon,.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible).has-text .button-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible).has-text .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:focus-visible).is-empty,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .app-input-error,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .bg-icon,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .bg-icon{color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error.is-empty:has(.app-input:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:#ffffff4d}.app-input-container.has-error .icon-container .separator,.app-input-container.has-error .dropdown-icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon,.app-input-container.has-error .icon-container .icon-sm,.app-input-container.has-error .dropdown-icon-container .icon,.app-input-container.has-error .dropdown-icon-container .icon-sm{color:var(--color-icon-negative)}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.has-valid:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid:hover:not(.has-right) .app-input,.app-input-container.has-valid:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.in-table),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.in-table),.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.in-table){background-color:var(--color-surface-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .button-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .bg-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid.has-text:not(.has-dropdown) .app-input::selection,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .app-input::selection,.app-input-container.has-valid.has-multiple-dropdown.has-text .app-input::selection{background-color:#ffffff4d}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .separator,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon-sm{color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .password-key{opacity:0;pointer-events:none}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.in-table,.in-table.has-error,.in-table.has-valid.has-text{background-color:transparent}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)) .app-input{color:var(--color-text-negative)}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)):not(.static-placeholder) .app-input-label{color:var(--color-text-negative)}.in-table .dropdown-icon-container{opacity:0}.in-table:hover .dropdown-icon-container{opacity:1}.in-table:has(.app-input:focus-visible) .dropdown-icon-container{opacity:1}.app-input-icon{position:absolute;right:4px;top:4px;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.button-icon{opacity:0;pointer-events:none}.button-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.bg-icon:hover{transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.round-icon{background-color:#919191;color:#2f2f2f;border-radius:50%;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) .app-input{color:#3b73ed}.floating-error .app-input-error{opacity:0!important}.static-error .app-input-error{pointer-events:none!important;transform:translateY(calc(-100% - 4px))!important;transition:margin .1s ease-in-out,opacity .1s ease-in-out}.static-error.has-icon .app-input-error{margin-right:26px!important}.static-error:has(.app-input:not(:focus-visible)) .app-input-error{opacity:1}.static-error.has-text .app-input-error{opacity:0!important}.static-placeholder .app-input-label{position:relative;white-space:nowrap;font-size:11px;font-weight:600}.static-placeholder .dropdown-selected{overflow:hidden;display:flex!important;justify-content:left!important}.static-placeholder .dropdown-selected .selected-label-hidden{width:max-content;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.static-placeholder .dropdown-selected .selected-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}.static-placeholder .app-input{padding-left:0!important}.static-placeholder.has-dropdown .cancel-button{display:none}.static-placeholder.has-dropdown .dropdown-icon-container .dropdown-icon{opacity:0;pointer-events:none}.static-placeholder.has-dropdown:hover .icon-container .icon,.static-placeholder.has-dropdown:hover .icon-container .icon-sm,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:hover .dropdown-icon-container,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:hover .dropdown-icon-container .dropdown-icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}.static-placeholder.has-dropdown .dropdown-icon-container{right:4px!important;left:auto!important}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm{color:var(--color-icon-inverse)!important}.app-input-container.has-icon.colored-icon .icon-container .icon,.app-input-container.has-icon.colored-icon .icon-container .icon-sm,.app-input-container.has-password.colored-icon .icon-container .icon,.app-input-container.has-password.colored-icon .icon-container .icon-sm,.app-input-container.has-dropdown.colored-icon .icon-container .icon,.app-input-container.has-dropdown.colored-icon .icon-container .icon-sm{color:var(--icon-color)}.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm{color:var(--color-icon-disable)!important}.app-input-container.has-icon .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-dropdown .warning-icon{display:none!important}.app-input-container.has-icon .icon,.app-input-container.has-icon .icon-sm,.app-input-container.has-password .icon,.app-input-container.has-password .icon-sm,.app-input-container.has-dropdown .icon,.app-input-container.has-dropdown .icon-sm{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);opacity:1}.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-icon:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}.icon-sm{height:14px;width:14px}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .subcontent,.app-input-container.has-password .subcontent{left:32px}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:27px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon,.has-password .password-icons .icon-sm{position:absolute;opacity:0}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-icons{pointer-events:none}.has-password:has(.app-input:disabled) .password-icons{pointer-events:none}.has-password.has-text .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password.has-text .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible.has-text .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible.has-text .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible.has-text .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important;pointer-events:none}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .button-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-number:has(.app-input:focus-visible) .subcontent{right:52px!important}.has-number:has(.app-input:focus-visible).has-text .subcontent{right:52px!important}.colored-icon .icon,.colored-icon .icon-sm{color:var(--icon-color)!important}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.dropdown-infinite-scroll-item{width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;height:0}.dropdown-menu{min-width:0px!important;width:100%;border:0;margin-top:4px;top:30px;height:var(--unfiltered-height);min-height:var(--unfiltered-height);padding:0!important;overflow:hidden;border-radius:0!important;background:transparent!important}.dropdown-menu.has-stroke .dropdown-menu-content{outline:1px solid #6c6c6c;outline-offset:-1px}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;background-color:#2f2f2f;border-radius:3px;padding:4px 0 4px 4px;max-height:244px;z-index:1100!important;overflow-y:scroll;margin-top:auto!important;scroll-padding:6px 0}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:4px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{width:4px;background:#2f2f2f;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:4px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.option-icon{color:#6c6c6c;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.option-icon.full-size{width:max-content;min-width:100%;height:18px!important;min-height:18px;flex-shrink:0;overflow:hidden}.option-icon.full-size svg{height:18px;width:max-content}.cai-color{color:var(--color)!important;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.color-item:hover .cai-color{color:var(--hover-color)!important}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;scroll-margin:6px 0;outline:1px solid transparent;outline-offset:-1px;display:flex;align-items:center;justify-content:left;gap:4px;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),outline .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item.focused{outline:1px solid #6c6c6c!important}.dropdown-item.focused .end-item-base{opacity:0}.dropdown-item.focused .end-item-hover{opacity:1}.dropdown-item.focused .full-icon{color:#ffffffb2}.dropdown-item.focused .truck-trailer-option{opacity:1}.dropdown-item .icon,.dropdown-item .icon-sm{color:#919191}.dropdown-item .dropdown-content-with-icon{max-width:calc(100% - 22px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content-hazardous{max-width:calc(100% - 40px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content{max-width:70%;overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover:not(.no-hover){background-color:#424242}.dropdown-item:hover:not(.no-hover) .end-item-base{opacity:0}.dropdown-item:hover:not(.no-hover) .end-item-hover{opacity:1}.dropdown-item:hover:not(.no-hover) .full-icon{color:#ffffffb2}.dropdown-item:hover:not(.no-hover) .truck-trailer-option{opacity:1}.dropdown-item.no-hover{cursor:default;pointer-events:none}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item:not(:first-child){margin-top:4px}.dropdown-item.banned{color:#919191;cursor:default}.dropdown-item.banned:hover{color:#919191;background-color:#2f2f2f}.dropdown-item.banned:hover .end-item-base{opacity:0}.dropdown-item.banned:hover .end-item-hover{opacity:1}.dropdown-item.dnu .round-icon{background-color:#e66767}.dropdown-item .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}.dropdown-avatar:hover{z-index:20}.no-results{color:#919191;font-weight:700;cursor:default;pointer-events:none}.add-new{color:#92b1f5!important;font-weight:700;font-size:11px}.add-new .dropdown-item-icon{opacity:1}.add-new:hover{background-color:#3b73ed66!important;color:#fff!important}.selected{font-weight:700}.selected .dropdown-item-icon{opacity:1}.selected .dropdown-item-count{color:#fff;background-color:#3b73ed}.selected .full-icon{color:#fff}.selected .end-item-base,.selected .end-item-hover{font-weight:700;color:#92b1f5}.selected .end-item-base .icon,.selected .end-item-base .icon-sm,.selected .end-item-hover .icon,.selected .end-item-hover .icon-sm{color:#92b1f5}.dropdown-item-icon{opacity:0;color:#92b1f5;width:14px;height:14px;margin-left:auto}.dropdown-item-icon.no-margin{margin-left:0}.dropdown-item-count{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:10px;background-color:#424242;color:#ffffffb2;min-width:18px;line-height:14px;font-weight:600;font-size:11px;text-align:center}.dropdown-icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-icon-container.open .dropdown-icon{transform:rotateX(180deg)}.dropdown-icon{transition:transform .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)!important;transform:rotateX(0);cursor:pointer}.has-dropdown .app-input-icon{right:26px}.has-dropdown:has(.app-input:focus-visible) .subcontent{right:26px!important}.has-dropdown:has(.app-input:focus-visible).has-text .subcontent,.has-dropdown:has(.app-input:focus-visible).has-selected .subcontent{right:48px!important}.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input,.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .cancel-button{z-index:1}.has-right.has-number .plus-button-container{order:2}.has-right.has-number .minus-button-container{order:1}.has-right.static-placeholder .app-input-icon{right:4px!important;left:auto!important;opacity:0!important}.has-right.static-placeholder:has(.app-input:focus-visible) .cancel-button{opacity:0!important;pointer-events:none!important}.has-right.static-placeholder.removable .cancel-button .bg-icon{background-color:transparent!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover .icon-container .icon,.has-right.static-placeholder.removable:hover .icon-container .icon-sm{opacity:0!important}.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button{opacity:1!important}.has-right .app-input{order:1}.has-right.has-subcontent .app-input{flex:1;min-width:0;word-break:none}.has-right .dropdown-selected{margin-left:0!important;text-align:right!important;right:0!important;left:0!important;justify-content:flex-end!important;width:100%!important}.has-right .subcontent{position:relative!important;order:1;display:grid;place-items:center;padding-right:4px;height:unset!important;transform:translateY(0)!important;left:0!important;right:unset!important}.has-right .subcontent .subcontent-hide{display:none!important}.has-right.has-text .subcontent{left:0!important;right:unset!important}.has-right:has(.app-input:focus-visible) .subcontent{left:0!important;right:unset!important}.has-right.has-icon .subcontent,.has-right.has-password .subcontent{padding-right:0!important;padding-left:4px}.has-right.has-icon .dropdown-selected,.has-right.has-password .dropdown-selected{width:calc(100% - 24px)!important}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon.fade-placeholder .app-input-label,.has-right.has-password.fade-placeholder .app-input-label{left:auto!important;right:24px!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-icon .icon-container .icon-sm,.has-right.has-password .icon-container .icon,.has-right.has-password .icon-container .icon-sm{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .dropdown-icon-container{left:4px}.has-right .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right.has-number.app-input-container:has(.app-input:focus-visible) .app-input{padding-left:4px}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}.has-right.fade-placeholder .app-input-label{right:0!important;left:auto!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:after{content:none!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:before{content:\"* \";color:var(--color-text-negative)}.removable:has(.cancel-button:hover).in-table{background-color:transparent!important}.removable:has(.cancel-button:hover).in-table .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):not(.in-table){background-color:var(--color-surface-negative-hover)!important}.removable:has(.cancel-button:hover):not(.in-table) .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.no-clear .cancel-button{display:none!important}.is-adding{padding-right:20px}.is-adding .dropdown-icon{opacity:0!important}.is-adding .accept-button{pointer-events:none;opacity:0!important}.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.is-adding:hover,.is-adding:has(.app-input:focus-visible){padding-right:48px!important}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:hover,.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}.is-adding .app-input-icon{right:4px}.is-adding.has-text:hover .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:hover .accept-button{pointer-events:auto;opacity:1!important}.is-adding.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:has(.app-input:focus-visible) .accept-button{pointer-events:auto;opacity:1!important}.is-adding .cancel-button{opacity:1!important;pointer-events:auto}.is-adding .dropdown-icon-container{pointer-events:none}.is-adding .accept-button{right:26px;pointer-events:auto}.dropdown-selected{-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%);left:0;width:calc(100% - 22px);pointer-events:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:break-all;padding:.25rem 6px;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),width .1s ease-in-out;color:var(--color-text);display:flex;gap:4px}.dropdown-selected .dropdown-selected-content{overflow:hidden;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.dropdown-selected .dropdown-selected-hazardous{max-width:calc(100% - 22px)}p.dropdown-selected{-webkit-user-select:none;user-select:none;display:block}.app-input-container:has(.app-input:focus-visible) .dropdown-selected{color:#fff;opacity:.7}.app-input-container:has(.app-input:focus-visible) .dropdown-selected .option-icon{color:#fff!important}.has-icon .positive-icon,.has-icon .warning-icon{display:none}.has-icon .dropdown-selected{left:27px;width:calc(100% - 49px)}.has-icon:hover .dropdown-selected{width:calc(100% - 71px)}.has-icon.app-input-container:has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 71px)}.hazard-icon{height:18px;width:max-content}.has-dispatch .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.dispatch-load-count{color:#dadada;font-weight:700}.dispatch-separator{color:#919191;font-weight:400}.dispatch-status{font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:14px;letter-spacing:0%;text-transform:uppercase;color:#ffffffb2;border-radius:2px;padding:2px 4px;display:flex;justify-content:center;align-items:center;gap:4px}.dispatch-status.status-available{background-color:#50ac2533}.dispatch-status.status-dispatched{background-color:#3b73ed33}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label){width:100%}.has-selected .sub-label{opacity:1}.dispatch-icon,.trailer-icon,.truck-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.truck-icon,.trailer-icon{width:42px}.truck-number{width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trailer-number{width:90px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.driver-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dropdown-subitem-end{margin-left:auto;position:relative;height:26px;width:auto;display:flex;justify-content:right;align-items:center;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;vertical-align:bottom}.end-item-base{position:absolute;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);text-align:right}.dispatch-ltl{font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.unassigned-ltl{margin-left:auto;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.end-item-hover{position:absolute;display:flex;justify-content:right;align-items:center;gap:4px;width:max-content;opacity:0;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.selected-end-item{margin-left:auto;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;display:flex;justify-content:right;align-items:center;gap:4px}.group-item{font-family:Montserrat;font-weight:700!important;font-size:11px!important;line-height:18px;letter-spacing:0%;vertical-align:middle;text-transform:uppercase;background-color:#2f2f2f;color:#aaa!important}.group-item:not(:first-child){border-top:1px solid #424242}.group-item .group-icon{margin-left:auto;transform:rotate(180deg);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.group-item.unfolded{color:#fff!important}.group-item.unfolded .group-icon{transform:rotate(0)}.counter{background-color:#424242;padding:1px 4px;border-radius:60px;font-family:Montserrat;font-weight:600;font-size:11px;min-width:18px;line-height:14px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#ffffffb2;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.password-requirement{padding:6px;background-color:#fffffff2!important;box-shadow:0 0 4px #0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:hidden}.password-requirement p{font-family:Montserrat;font-weight:600;font-size:11px;line-height:14px;letter-spacing:0%;vertical-align:middle;color:#6c6c6c;font-style:italic}.password-requirement .icon,.password-requirement .icon-sm{width:14px!important;height:14px!important}.password-requirement .icon.checkmark,.password-requirement .checkmark.icon-sm{color:#ccc}.password-requirement .icon.cancel,.password-requirement .cancel.icon-sm{color:#e66767}.password-requirement ul{list-style-type:none;margin:6px 0 0;padding:0}.password-requirement ul li{color:#424242;font-size:11px;font-style:italic;font-weight:500;line-height:14px;display:flex;gap:4px}.password-requirement ul li.valid{color:#919191!important}.password-requirement ul li:not(:first-child){margin-top:6px}.has-end-item:not(:has(.app-input:disabled)):hover .dropdown-selected{width:calc(100% - 44px)}.has-end-item:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 44px)}.progress-bar{width:24px;height:8px;border-radius:2px;position:relative;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar:after{content:\"\";position:absolute;top:0;width:var(--progress);height:100%;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar.low{background-color:#df3c3c33}.progress-bar.low:after{background-color:#e66767}.progress-bar.medium{background-color:#f89b2e33}.progress-bar.medium:after{background-color:#fab15c}.progress-bar.high{background-color:#56b4ac33}.progress-bar.high:after{background-color:#56b4ac}.progress-bar.disable{background-color:#91919133}.progress-bar.disable:after{display:none}.app-input-container:has(.app-input:focus-visible) .selected-end-item .progress-bar{background-color:#fff!important}.full-icon{color:#919191}.fuelcard-number{width:216px}.fuelcard-brand{width:132px}.owner-ein{width:118px}.has-multiple-dropdown.has-text{border-top-left-radius:0!important;border-top-right-radius:0!important}.multiple-container{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-top-left-radius:2px;border-top-right-radius:2px;position:relative;transition:background-color .1s ease-in-out;background-color:#e9effd}.multiple-container.hovered{background-color:#bed0f9}.multiple-container.hovered .multiple-selected{background-color:#e9effd}.multiple-container.focused{background-color:#0b49d1}.multiple-container.focused .multiple-selected{background-color:#3b73ed;color:#fff}.multiple-selected{background-color:#bed0f9;color:#2f2f2f;transition:background-color .1s ease-in-out,color .1s ease-in-out;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:2px 4px;-webkit-user-select:none;user-select:none;font-family:Montserrat;font-size:14px;font-weight:400;line-height:18px;width:209px;height:22px;border-radius:1px}.multiple-selected p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.multiple-selected:hover{color:#2f2f2f!important;background-color:#fff!important}.multiple-selected:hover .multiple-remove-button{opacity:1}.multiple-selected .multiple-remove-button{opacity:0;background-color:#6692f1;color:#fff;width:14px;height:14px}.multiple-selected .multiple-remove-button .multiple-remove-icon{width:12px;height:12px}.multiple-label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:0;left:6px;transform:translateY(-14px)}.dropdown-group{border-radius:2px;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;margin-top:4px;max-height:var(--max-height);height:var(--max-height);overflow:hidden}.dropdown-group.no-items{cursor:default;pointer-events:none}.dropdown-group .group-item{outline:none;color:#fff!important;font-weight:400!important;font-size:14px!important;display:flex;transition:font-weight .1s ease-in-out,background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);padding-left:6px;padding-right:6px}.dropdown-group .group-item:hover .counter,.dropdown-group .group-item.unfolded .counter{color:#fff}.dropdown-group .group-item.unfolded{font-weight:700!important}.dropdown-group .group-item .counter{margin-left:auto}.dropdown-group .group-item .group-icon{margin-left:0}.dropdown-group:hover:not(.no-items),.dropdown-group.active{background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover,.dropdown-group.active .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .dropdown-item,.dropdown-group.active .dropdown-item{background-color:#424242}.dropdown-group.active{padding:4px;padding-top:0!important}.dropdown-group.active .group-item{position:relative!important;padding-left:2px!important;padding-right:2px!important}.dropdown-group .dropdown-item:not(.group-item):hover{background-color:#6c6c6c!important}.fuel-stop-transaction-store{display:flex;gap:4px}.fuel-stop-transaction-store .fuel-stop-transaction-store-address{font-size:11px;color:#ccc;margin-left:auto}.fuel-stop-transaction-store .favorite-icon{color:#92b1f5;width:14px;height:14px}.fuel-stop-transaction-nostore{padding-left:2px;padding-right:2px}.hide-dropdown{opacity:0;pointer-events:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown) .dropdown-menu-content{transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown).animate-dropdown .dropdown-menu-content{max-height:var(--max-height);height:var(--max-height)}.closing:not(.hide-dropdown) .dropdown-menu-content{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:244px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:244px;opacity:1}to{max-height:0;opacity:0}}.app-input-container:has(.app-input:focus-visible).has-dropdown .loader.loading,.app-input-container:has(.app-input:focus-visible).has-text .loader.loading{opacity:1!important}.app-input-container:has(.app-input:focus-visible).has-dropdown.has-text .loader{transform:translate(-48px)}.loader{position:absolute;top:4px;right:0;transform:translate(-26px);pointer-events:none;z-index:1000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:opacity .1s ease-in-out,transform .1s ease-in-out;opacity:0}.loader-icon{width:14px;height:14px;animation:spin .8s ease-in-out infinite;transform-origin:center;display:flex;align-items:center;justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-22{height:22px}.size-22 .icon,.size-22 .icon-sm{height:14px!important;width:14px!important}.size-22 .bg-icon{height:14px!important;width:14px!important;padding:2px!important}.size-22 .icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.size-22 .app-input,.size-22 .app-input-label{padding-top:2px;padding-bottom:2px;padding-left:4px}.size-22.has-icon .app-input-label{padding-left:0!important}.size-22 .app-input-icon{height:14px!important;width:14px!important}.size-22.has-text .app-input-label,.size-22:has(.app-input:focus-visible) .app-input-label{transform:translateY(-18px)}.size-22 .loader{top:2px;transform:translate(-22px)!important}.strikethrough .app-input,.strikethrough .dropdown-selected-content{text-decoration:line-through}.max-w-280{max-width:280px}\n"], dependencies: [{ kind: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InputComponent, isStandalone: true, selector: "cai-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, preselectedOptions: { classPropertyName: "preselectedOptions", publicName: "preselectedOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hideValidation: { classPropertyName: "hideValidation", publicName: "hideValidation", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, preselectedUnit: { classPropertyName: "preselectedUnit", publicName: "preselectedUnit", isSignal: true, isRequired: false, transformFunction: null }, unassignedCount: { classPropertyName: "unassignedCount", publicName: "unassignedCount", isSignal: true, isRequired: false, transformFunction: null }, forceInvalidStyling: { classPropertyName: "forceInvalidStyling", publicName: "forceInvalidStyling", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocused: "onFocused", onReset: "onReset", onValueChange: "onValueChange", onOptionAdded: "onOptionAdded", onAdd: "onAdd", onSelectionChange: "onSelectionChange", onSelectedObject: "onSelectedObject", onSelectedGroup: "onSelectedGroup", onClear: "onClear", onAutofill: "onAutofill", onScrolledToBottom: "onScrolledToBottom", onScrolledToBottomGroup: "onScrolledToBottomGroup", onSearch: "onSearch", onValueAdded: "onValueAdded", onRemove: "onRemove", onHoverRemove: "onHoverRemove" }, host: { listeners: { "realValueChange": "onRealValueChange($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }, { propertyName: "PasswordDirective", first: true, predicate: PasswordDirective, descendants: true }, { propertyName: "NumberFormatDirective", first: true, predicate: NumberFormatDirective, descendants: true }, { propertyName: "MaskDirective", first: true, predicate: MaskDirective, descendants: true }], ngImport: i0, template: "<!-- #region Variables -->\n@let valid =\n  ngControl?.valid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let invalid =\n  ngControl?.invalid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let subcontent =\n  config().subcontent ||\n  (config().dropdown === \"subcontent\" &&\n    selectedOption() &&\n    cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\n\n@let name = config().name;\n@let password = config().type === \"password\" || config().type === \"account\";\n\n@let optionLabel = this.config().optionLabel || \"label\";\n@let dropdownType = this.config().dropdown;\n\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\n\n@let tooltipClass =\n  config().inverse\n    ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n    : \"tooltip input-tooltip\";\n\n<!-- #region Multiple selection -->\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\n  <div\n    (pointerdown)=\"focus($event)\"\n    (mouseenter)=\"toggleHovered(true)\"\n    (mouseleave)=\"toggleHovered(false)\"\n    class=\"multiple-container\"\n    [class]=\"{\n      focused: focused(),\n      hovered: hovered(),\n    }\"\n  >\n    <label class=\"multiple-label\">{{ name }}</label>\n\n    @for (option of multipleSelectedOptions(); track $index) {\n      <div class=\"multiple-selected\">\n        <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\n        <button\n          type=\"button\"\n          class=\"\"\n          (pointerdown)=\"handleOption(option, $event)\"\n          [tabIndex]=\"-1\"\n          ngbTooltip=\"Clear\"\n          [placement]=\"'top'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          #closeTooltip=\"ngbTooltip\"\n          [container]=\"'body'\"\n        >\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"multiple-remove-button multiple-remove-icon bg-icon\"\n          ></svg-icon>\n        </button>\n      </div>\n    }\n  </div>\n}\n<!-- #endregion -->\n\n@let hasFloatingError =\n  invalid &&\n  (config().errorBehavior === \"floating\" ||\n    (!!config().inTable && config().placeholderBehavior !== \"static\"));\n\n<div\n  class=\"app-input-container\"\n  [class]=\"\n    {\n      config: config(),\n      hideValidation: hideValidation(),\n      isPasswordVisible: visible(),\n      isInvalid: !!invalid || forceInvalidStyling(),\n      isValid: !!valid && !forceInvalidStyling(),\n      isHovered: hovered(),\n      hasText: hasText(),\n      isAdding: isAdding(),\n      selectedOption: selectedOption(),\n    } | inputClass\n  \"\n  ngbDropdown\n  [autoClose]=\"false\"\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  #containerRef\n  [ngbTooltip]=\"errorTooltip\"\n  [disableTooltip]=\"!hasFloatingError\"\n  [container]=\"'body'\"\n  [placement]=\"['bottom']\"\n  tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n  (pointerdown)=\"focus($event)\"\n  (mouseenter)=\"dropdownType === 'multiple' && toggleHovered(true)\"\n  (mouseleave)=\"dropdownType === 'multiple' && toggleHovered(false)\"\n>\n  <!-- \n  [popperOptions]=\"dropdownPopperOptions\"\n  -->\n  @if (config().icon && !password && !config().withButtons) {\n    <div\n      class=\"icon-container\"\n      (pointerdown)=\"focus($event)\"\n      [class]=\"{\n        'colored-icon': config().iconColor,\n      }\"\n      [style.--icon-color]=\"config().iconColor || ''\"\n    >\n      <svg-icon class=\"icon\" [name]=\"config().icon || ''\"></svg-icon>\n      @if (!config().noSeparator) {\n        <div class=\"separator\"></div>\n      }\n    </div>\n  }\n  @if (password) {\n    <div class=\"icon-container\" (pointerdown)=\"toggleVisibility($event)\">\n      <div\n        class=\"password-icons\"\n        [ngbTooltip]=\"passwordTooltip\"\n        [container]=\"'body'\"\n        [tooltipClass]=\"tooltipClass\"\n        [autoClose]=\"true\"\n        [placement]=\"'top'\"\n        [openDelay]=\"600\"\n      >\n        <svg-icon\n          class=\"icon password-key hover-icon\"\n          name=\"cai-password-key\"\n        ></svg-icon>\n        <svg-icon\n          class=\"icon password-shown hover-icon\"\n          name=\"cai-password-shown\"\n        ></svg-icon>\n        <svg-icon\n          class=\"icon password-hidden hover-icon\"\n          name=\"cai-password-hidden\"\n        ></svg-icon>\n      </div>\n      <div class=\"separator\"></div>\n    </div>\n  }\n\n  <input\n    class=\"app-input\"\n    [tabindex]=\"isDisabled() ? '-1' : '0'\"\n    [type]=\"\n      password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\n    \"\n    [required]=\"config().required\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"dispatchOnBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"config().label\"\n    [attr.name]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    [placeholder]=\"config()?.placeholder || ''\"\n    [autocomplete]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    #inputRef\n    [appPassword]=\"password\"\n    [appMask]=\"config().mask || ''\"\n    [reveal]=\"config().reveal || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [disableDecimals]=\"config().disableDecimals || false\"\n    [prefix]=\"config().prefix || ''\"\n    [max]=\"config().max\"\n    [clampToMax]=\"config().clampToMax || false\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"onFocus($event)\"\n  />\n  @if (\n    !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\n    config().placeholderBehavior !== \"hidden\"\n  ) {\n    <label\n      class=\"app-input-label\"\n      [class.placeholder-color]=\"this.config().placeholderColor\"\n      [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\n      (click)=\"focus($event)\"\n    >\n      <!-- Truck Trailer Driver Dropdown label -->\n      @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\n        <p class=\"truck-item app-input-name\">Truck</p>\n        <p class=\"trailer-item\">Trailer</p>\n        <p>Driver</p>\n        <p class=\"sub-label\">Rate</p>\n      }\n      <!-- Split Load -->\n      @else if (dropdownType === \"split-driver\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Rate</p>\n      } @else if (\n        dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\n      ) {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Location</p>\n      }\n      <!-- Dropdown variants -->\n      @else if (dropdownType === \"broker\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Credit</p>\n      } @else if (dropdownType === \"contact\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Phone</p>\n      } @else if (dropdownType === \"shipper\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Address</p>\n      } @else if (dropdownType === \"owner\") {\n        <p class=\"owner-ein app-input-name\">EIN</p>\n        <p class=\"app-input-name\">Company Name</p>\n      } @else if (dropdownType === \"fuelcard\") {\n        <p class=\"fuelcard-number app-input-name\">Card No.</p>\n        <p class=\"fuelcard-brand app-input-name\">Provider</p>\n        <p class=\"app-input-name\">Nickname</p>\n      }\n      <!-- Default Dropdown label -->\n      @else {\n        <span class=\"app-input-name\">{{ name }}</span>\n      }\n    </label>\n  }\n  @if (config().type === \"number\" && config().withButtons) {\n    <div class=\"number-container\">\n      <div class=\"number-buttons\">\n        <div class=\"separator\"></div>\n        <div\n          class=\"plus-button-container\"\n          ngbTooltip=\"Add\"\n          [tooltipClass]=\"tooltipClass\"\n          [container]=\"'body'\"\n          [autoClose]=\"true\"\n          [openDelay]=\"600\"\n          [placement]=\"'top'\"\n          (pointerdown)=\"increment($event)\"\n        >\n          <svg-icon name=\"cai-plus\" class=\"bg-icon plus-icon\"></svg-icon>\n        </div>\n        <div\n          class=\"minus-button-container\"\n          ngbTooltip=\"Remove\"\n          [placement]=\"'top'\"\n          [container]=\"'body'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          [openDelay]=\"600\"\n          (pointerdown)=\"decrement($event)\"\n        >\n          <svg-icon name=\"cai-minus\" class=\"bg-icon minus-icon\"></svg-icon>\n        </div>\n      </div>\n    </div>\n  }\n  @if (!config().inTable) {\n    @if (!dropdownType) {\n      <svg-icon\n        name=\"cai-checkmark\"\n        class=\"app-input-icon positive-icon\"\n      ></svg-icon>\n      <svg-icon\n        name=\"cai-status-warning\"\n        class=\"app-input-icon warning-icon\"\n      ></svg-icon>\n    }\n  }\n\n  @if (\n    invalid &&\n    config().errorBehavior !== \"hidden\" &&\n    (ngControl?.errors | errorMessage: config().customErrors)[0] &&\n    !(config().inTable && config().placeholderBehavior !== \"static\")\n  ) {\n    <div class=\"app-input-error\">\n      {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\n    </div>\n  }\n\n  <!-- Accept button -->\n  @if ((config().add && isAdding()) || config().isEdit) {\n    <button\n      type=\"button\"\n      class=\"app-input-icon button-icon accept-button\"\n      (pointerdown)=\"addOption()\"\n      [tabIndex]=\"-1\"\n      ngbTooltip=\"Confirm\"\n      [openDelay]=\"600\"\n      [placement]=\"'top'\"\n      [tooltipClass]=\"tooltipClass\"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n    >\n      <svg-icon class=\"bg-icon\" name=\"cai-checkmark\"></svg-icon>\n    </button>\n  }\n\n  <!-- Cancel button -->\n  <button\n    type=\"button\"\n    class=\"app-input-icon button-icon cancel-button\"\n    (pointerdown)=\"reset($event)\"\n    (mouseenter)=\"onClearHover(true)\"\n    (mouseleave)=\"onClearHover(false)\"\n    [tabIndex]=\"-1\"\n    ngbTooltip=\"{{\n      hasText()\n        | clearTooltip\n          : isAdding()\n          : config().isEdit || false\n          : config().placeholderBehavior || 'dynamic'\n          : dropdownType === 'multiple'\n          : config().hasResetButton\n          : canTooltipBeVisible()\n    }}\"\n    [openDelay]=\"600\"\n    [tooltipClass]=\"tooltipClass\"\n    [placement]=\"'top'\"\n    [container]=\"'body'\"\n    [autoClose]=\"true\"\n    #closeTooltip=\"ngbTooltip\"\n  >\n    @let iconName =\n      config().hasResetButton\n        ? \"cai-reset\"\n        : config().removable\n          ? \"cai-delete\"\n          : \"cai-cancel\";\n    <svg-icon class=\"bg-icon\" [name]=\"iconName\"></svg-icon>\n  </button>\n\n  <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\n  <!-- Dropdown menu -->\n\n  @let hasLoader = isLoading() !== undefined;\n\n  @if (hasLoader) {\n    <div class=\"loader\" [class.loading]=\"isLoading()\">\n      <svg-icon name=\"cai-loader\" class=\"loader-icon\"></svg-icon>\n    </div>\n  }\n\n  @if (dropdownType) {\n    @let maxHeight =\n      ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +\n        (config().add ? 1 : 0)) *\n        30 +\n      4;\n\n    @let animateDropdown =\n      dropdownType !== \"toll\" &&\n      dropdownType !== \"fuel-stop-transaction\" &&\n      dropdownType !== \"dispatch\" &&\n      dropdownType !== \"ftl-dispatch\" &&\n      dropdownType !== \"split-driver\" &&\n      dropdownType !== \"split-truck\" &&\n      dropdownType !== \"split-trailer\";\n\n    @let unfilteredHeight =\n      dropdownType === \"contact\" || !animateDropdown\n        ? 244\n        : ((options()?.length || (showNoResults() ? 1 : 0)) +\n            (config().add ? 1 : 0)) *\n            30 +\n          4;\n\n    <div\n      ngbDropdownMenu\n      class=\"dropdown-menu input-dropdown-menu\"\n      [class]=\"{\n        'hide-dropdown':\n          config().dropdownAutocomplete &&\n          !dropdownOptions()?.length &&\n          !(showNoResults() && value()),\n        'animate-dropdown': animateDropdown,\n        'size-22': config().size === 22,\n        'has-stroke': config().hasStroke,\n      }\"\n      [class.closing]=\"closing()\"\n      [style.--unfiltered-height]=\"\n        unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'\n      \"\n      [style.--max-height]=\"maxHeight > 244 ? '244px' : maxHeight + 'px'\"\n      [style.width.px]=\"containerWidth()\"\n      [tabindex]=\"-1\"\n      (pointerdown)=\"onDropdownBackgroundClick($event)\"\n      (pointerup)=\"stopEventPropagation($event)\"\n      (mouseup)=\"stopEventPropagation($event)\"\n      (click)=\"stopEventPropagation($event)\"\n    >\n      <div\n        class=\"dropdown-menu-content\"\n        [tabindex]=\"-1\"\n        caiInfiniteScroll\n        [scrollThreshold]=\"50\"\n        (scrolledToBottom)=\"onDropdownScrolledToBottom()\"\n      >\n        @if (config().add) {\n          <button\n            class=\"dropdown-item add-new\"\n            [class.focused]=\"\n              focusedOptionIndex === -1 ||\n              groupedNavigationState?.groupIndex === -1\n            \"\n            (pointerdown)=\"handleAddingOption($event)\"\n          >\n            <p>ADD NEW</p>\n            <svg-icon name=\"cai-plus\" class=\"dropdown-item-icon\"></svg-icon>\n          </button>\n        }\n        <ng-container *ngTemplateOutlet=\"dropdownMenuRef\"></ng-container>\n      </div>\n    </div>\n\n    @if (!config().dropdownAutocomplete) {\n      <div\n        class=\"dropdown-icon-container\"\n        [class.open]=\"dropdown.isOpen() && !closing()\"\n        (pointerdown)=\"onDropdownIconClick($event)\"\n      >\n        <svg-icon\n          name=\"cai-arrow-secondary-down\"\n          class=\"dropdown-icon icon\"\n        ></svg-icon>\n      </div>\n    }\n    @let specialDropdown =\n      dropdownType === \"dispatch\" ||\n      dropdownType === \"ftl-dispatch\" ||\n      dropdownType === \"broker\" ||\n      dropdownType === \"contact\" ||\n      dropdownType === \"shipper\" ||\n      dropdownType === \"bank\" ||\n      dropdownType === \"dispatcher\" ||\n      dropdownType === \"truck\" ||\n      dropdownType === \"trailer\" ||\n      dropdownType === \"hazardous\" ||\n      dropdownType === \"state\" ||\n      dropdownType === \"owner\" ||\n      dropdownType === \"fuelcard\" ||\n      dropdownType === \"pm\" ||\n      dropdownType === \"color\" ||\n      dropdownType === \"make\" ||\n      dropdownType === \"toll\" ||\n      dropdownType === \"provider\" ||\n      dropdownType === \"split-driver\" ||\n      dropdownType === \"split-truck\" ||\n      dropdownType === \"split-trailer\";\n    <!-- Placeholder -->\n    @if (specialDropdown) {\n      <ng-container *ngTemplateOutlet=\"selectedOptionRef\"></ng-container>\n    } @else if (\n      (config().add || config().search) &&\n      !inputRef.value &&\n      !this.isAdding() &&\n      dropdownType !== \"subcontent\"\n    ) {\n      <div class=\"dropdown-selected\">\n        @if (config().placeholderBehavior === \"static\") {\n          <p class=\"selected-label-hidden\">\n            {{ name + (config().required ? \" *\" : \"\") }}\n          </p>\n          <p class=\"selected-text\">\n            {{\n              selectedOption() &&\n                cast(selectedOption(), \"dropdownOption\")![\n                  optionLabel || \"label\"\n                ]\n            }}\n          </p>\n        } @else {\n          @if (\n            selectedOption() &&\n            cast(selectedOption(), \"dropdownOption\")![\n              optionLabel || \"label\"\n            ] === \"Hazardous\"\n          ) {\n            <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\n            <p class=\"dropdown-selected-content\">\n              {{\n                selectedOption() &&\n                  cast(selectedOption(), \"dropdownOption\")![\n                    optionLabel || \"label\"\n                  ]\n              }}\n            </p>\n          } @else {\n            <p class=\"dropdown-selected-content\">\n              {{\n                selectedOption() &&\n                  cast(selectedOption(), \"dropdownOption\")![\n                    optionLabel || \"label\"\n                  ]\n              }}\n            </p>\n          }\n        }\n      </div>\n    }\n  } @else if (config().isEdit && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ name }}</p>\n    </div>\n  }\n  @if (config().passwordRequirements) {\n    <div\n      class=\"dropdown-menu password-requirement\"\n      ngbDropdownMenu\n      [style.width.px]=\"containerWidth()\"\n      [class.closing]=\"closing()\"\n      (pointerup)=\"stopEventPropagation($event)\"\n      (mouseup)=\"stopEventPropagation($event)\"\n      (click)=\"stopEventPropagation($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"passwordRequirementsRef\"></ng-container>\n    </div>\n  }\n  @if (subcontent) {\n    <p class=\"subcontent\">\n      @if (!(config().alignment === \"right\")) {\n        <span class=\"subcontent-hide\"\n          >{{\n            config().search\n              ? selectedOption() &&\n                cast(selectedOption(), \"dropdownOption\")![\n                  optionLabel || \"label\"\n                ]\n              : inputRef.value\n          }}\n        </span>\n      }\n      {{ subcontent }}\n    </p>\n  }\n</div>\n\n<!-- #region Templates -->\n\n<!-- #region Password requirements -->\n<ng-template #passwordRequirementsRef>\n  @let isMinLengthValid =\n    !this.ngControl?.errors?.[\"minlength\"] && this.value();\n  @let isHasNumberValid =\n    !this.ngControl?.errors?.[\"hasNumber\"] && this.value();\n  @let isHasSymbolValid =\n    !this.ngControl?.errors?.[\"hasSymbol\"] && this.value();\n  @let isHasUppercaseValid =\n    !this.ngControl?.errors?.[\"hasUppercase\"] && this.value();\n\n  <p>Strong Password Requirement</p>\n  <ul>\n    <li [class.valid]=\"isMinLengthValid\">\n      <svg-icon\n        [name]=\"isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isMinLengthValid ? 'checkmark' : 'cancel'\"\n        class=\"icon\"\n      ></svg-icon\n      ><span>Minimum 8 characters</span>\n    </li>\n    <li [class.valid]=\"isHasNumberValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasNumberValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One number</span>\n    </li>\n    <li [class.valid]=\"isHasSymbolValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasSymbolValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One symbol</span>\n    </li>\n    <li [class.valid]=\"isHasUppercaseValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasUppercaseValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One upper-case letter</span>\n    </li>\n  </ul>\n</ng-template>\n<!-- #endregion -->\n@let search = config().search;\n\n<ng-template #dropdownMenuRef>\n  @switch (dropdownType) {\n    @case (\"dispatch\") {\n      <ng-container *ngTemplateOutlet=\"dispatchesRef\"></ng-container>\n    }\n    @case (\"ftl-dispatch\") {\n      <ng-container *ngTemplateOutlet=\"ftlDispatchRef\"></ng-container>\n    }\n    @case (\"broker\") {\n      <ng-container *ngTemplateOutlet=\"brokerRef\"></ng-container>\n    }\n    @case (\"contact\") {\n      <ng-container *ngTemplateOutlet=\"contactRef\"></ng-container>\n    }\n    @case (\"shipper\") {\n      <ng-container *ngTemplateOutlet=\"shipperRef\"></ng-container>\n    }\n    @case (\"bank\") {\n      <ng-container *ngTemplateOutlet=\"bankRef\"></ng-container>\n    }\n    @case (\"dispatcher\") {\n      <ng-container *ngTemplateOutlet=\"dispatcherRef\"></ng-container>\n    }\n    @case (\"trailer\") {\n      <ng-container *ngTemplateOutlet=\"trailerRef\"></ng-container>\n    }\n    @case (\"truck\") {\n      <ng-container *ngTemplateOutlet=\"truckRef\"></ng-container>\n    }\n    @case (\"hazardous\") {\n      <ng-container *ngTemplateOutlet=\"hazardousRef\"></ng-container>\n    }\n    @case (\"state\") {\n      <ng-container *ngTemplateOutlet=\"stateRef\"></ng-container>\n    }\n    @case (\"owner\") {\n      <ng-container *ngTemplateOutlet=\"ownerRef\"></ng-container>\n    }\n    @case (\"fuelcard\") {\n      <ng-container *ngTemplateOutlet=\"fuelcardRef\"></ng-container>\n    }\n    @case (\"pm\") {\n      <ng-container *ngTemplateOutlet=\"pmRef\"></ng-container>\n    }\n    @case (\"multiple\") {\n      <ng-container *ngTemplateOutlet=\"multipleRef\"></ng-container>\n    }\n    @case (\"make\") {\n      <ng-container *ngTemplateOutlet=\"makeRef\"></ng-container>\n    }\n    @case (\"toll\") {\n      <ng-container *ngTemplateOutlet=\"tollRef\"></ng-container>\n    }\n    @case (\"color\") {\n      <ng-container *ngTemplateOutlet=\"colorRef\"></ng-container>\n    }\n    @case (\"fuel-stop-transaction\") {\n      <ng-container *ngTemplateOutlet=\"fuelStopTransactionRef\"></ng-container>\n    }\n    @case (\"provider\") {\n      <ng-container *ngTemplateOutlet=\"providerRef\"></ng-container>\n    }\n    @case (\"split-driver\") {\n      <ng-container *ngTemplateOutlet=\"splitDriverRef\"></ng-container>\n    }\n    @case (\"split-truck\") {\n      <ng-container *ngTemplateOutlet=\"splitTruckRef\"></ng-container>\n    }\n    @case (\"split-trailer\") {\n      <ng-container *ngTemplateOutlet=\"splitTrailerRef\"></ng-container>\n    }\n    @case (\"subcontent\") {\n      <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\n    }\n    @default {\n      <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #selectedOptionRef>\n  @switch (dropdownType) {\n    @case (\"dispatch\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\n    }\n    @case (\"ftl-dispatch\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\n    }\n    @case (\"broker\") {\n      <ng-container *ngTemplateOutlet=\"selectedBrokerRef\"></ng-container>\n    }\n    @case (\"contact\") {\n      <ng-container *ngTemplateOutlet=\"selectedContactRef\"></ng-container>\n    }\n    @case (\"shipper\") {\n      <ng-container *ngTemplateOutlet=\"selectedShipperRef\"></ng-container>\n    }\n    @case (\"bank\") {\n      <ng-container *ngTemplateOutlet=\"selectedBankRef\"></ng-container>\n    }\n    @case (\"dispatcher\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatcherRef\"></ng-container>\n    }\n    @case (\"trailer\") {\n      <ng-container *ngTemplateOutlet=\"selectedTrailerRef\"></ng-container>\n    }\n    @case (\"truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedTruckRef\"></ng-container>\n    }\n    @case (\"hazardous\") {\n      <ng-container *ngTemplateOutlet=\"selectedHazardousRef\"></ng-container>\n    }\n    @case (\"state\") {\n      <ng-container *ngTemplateOutlet=\"selectedStateRef\"></ng-container>\n    }\n    @case (\"owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedOwnerRef\"></ng-container>\n    }\n    @case (\"fuelcard\") {\n      <ng-container *ngTemplateOutlet=\"selectedFuelcardRef\"></ng-container>\n    }\n    @case (\"pm\") {\n      <ng-container *ngTemplateOutlet=\"selectedPmRef\"></ng-container>\n    }\n    @case (\"make\") {\n      <ng-container *ngTemplateOutlet=\"selectedMakeRef\"></ng-container>\n    }\n    @case (\"toll\") {\n      <ng-container *ngTemplateOutlet=\"selectedTollRef\"></ng-container>\n    }\n    @case (\"color\") {\n      <ng-container *ngTemplateOutlet=\"selectedColorRef\"></ng-container>\n    }\n    @case (\"provider\") {\n      <ng-container *ngTemplateOutlet=\"selectedProviderRef\"></ng-container>\n    }\n    @case (\"split-driver\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitDriverRef\"></ng-container>\n    }\n    @case (\"split-truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitTruckRef\"></ng-container>\n    }\n    @case (\"split-trailer\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitTrailerRef\"></ng-container>\n    }\n  }\n</ng-template>\n\n<!-- Standard dropdown -->\n<ng-template #dropdownOptionsRef>\n  @if (dropdownOptions().length) {\n    @for (option of dropdownOptions(); track $index; let index = $index) {\n      @let dropdownOption = cast(option, \"dropdownOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dropdownOption.id }}\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n        (pointerdown)=\"handleOption(dropdownOption, $event)\"\n      >\n        @if (dropdownOption[optionLabel] === \"Hazardous\") {\n          <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\n        }\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (dropdownOption[optionLabel] | highlightSearch: value())\n              : dropdownOption[optionLabel]\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #multipleRef>\n  @if (dropdownOptions().length) {\n    @for (option of dropdownOptions(); track $index; let index = $index) {\n      @let dropdownOption = cast(option, \"dropdownOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dropdownOption.id }}\"\n        (pointerdown)=\"handleOption(dropdownOption, $event)\"\n        [class]=\"{\n          selected: isSelectedOption(dropdownOption),\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (dropdownOption[optionLabel] | highlightSearch: value())\n              : dropdownOption[optionLabel]\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #bankRef>\n  @if (dropdownOptions().length) {\n    @for (bank of dropdownOptions(); track $index; let index = $index) {\n      @let bankOption = cast(bank, \"bank\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ bankOption.id }}\"\n        (pointerdown)=\"handleOption(bankOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'bank')?.id === bankOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        @if (bankOption.logoName) {\n          <svg-icon\n            class=\"full-icon\"\n            [name]=\"bankOption.logoName.slice(0, -4)\"\n          ></svg-icon>\n        } @else {\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (bankOption.name || '' | highlightSearch: value())\n                : bankOption.name\n            \"\n          ></p>\n        }\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #makeRef>\n  @if (dropdownOptions().length) {\n    @for (make of dropdownOptions(); track $index; let index = $index) {\n      @let makeOption = cast(make, \"make\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ makeOption.id }}\"\n        (pointerdown)=\"handleOption(makeOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'make')?.id === makeOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        @if (makeOption.logoName) {\n          <svg-icon\n            class=\"full-icon\"\n            [name]=\"makeOption.logoName.slice(0, -4)\"\n          ></svg-icon>\n        } @else {\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (makeOption.name || '' | highlightSearch: value())\n                : makeOption.name\n            \"\n          ></p>\n        }\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Broker -->\n<ng-template #brokerRef>\n  @if (dropdownOptions().length) {\n    @for (broker of dropdownOptions(); track $index; let index = $index) {\n      @let brokerOption = cast(broker, \"broker\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"broker-{{ brokerOption.id }}\"\n        (pointerdown)=\"\n          !(brokerOption.dnu || brokerOption.ban) &&\n            handleOption(brokerOption, $event)\n        \"\n        [class]=\"{\n          selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,\n          focused: focusedOptionIndex === index,\n          banned: brokerOption.dnu || brokerOption.ban,\n          dnu: brokerOption.dnu,\n        }\"\n      >\n        @if (brokerOption?.dnu || brokerOption?.ban) {\n          <svg-icon name=\"cai-minus\" class=\"round-icon\"></svg-icon>\n        } @else if (brokerOption?.fraudCheck) {\n          <svg-icon\n            name=\"cai-status-warning-lite\"\n            class=\"icon fraud\"\n          ></svg-icon>\n        }\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (brokerOption.businessName || '' | highlightSearch: value())\n              : brokerOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            @if (!brokerOption.creditLimit) {\n              <p>Unlimited</p>\n            } @else {\n              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\n              <div\n                class=\"progress-bar\"\n                [style.--progress]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).activePercentageOfPaid + '%'\n                \"\n                [class]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).status\n                \"\n              ></div>\n            }\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ brokerOption.loadsCount }} |\n              {{ brokerOption.availableCredit || 0 | currency }}\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Contact dropdown -->\n<ng-template #contactRef>\n  @if (dropdownOptions().length) {\n    @for (contact of dropdownOptions(); track $index; let index = $index) {\n      @let contactOption = cast(contact, \"contact\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"contact-{{ contact.id }}\"\n        (pointerdown)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          [innerHTML]=\"\n            search\n              ? (contactOption.contactName || '' | highlightSearch: value())\n              : contactOption.contactName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p>{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ contactOption.phone }}\n            </p>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Owner dropdown -->\n<ng-template #ownerRef>\n  @if (dropdownOptions().length) {\n    @for (owner of dropdownOptions(); track $index; let index = $index) {\n      @let ownerOption = cast(owner, \"owner\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"owner-{{ ownerOption?.id }}\"\n        (pointerdown)=\"handleOption(ownerOption!, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"owner-ein\"\n          [innerHTML]=\"\n            search\n              ? (ownerOption?.ein || '' | highlightSearch: value())\n              : ownerOption?.ein\n          \"\n        ></p>\n        <p\n          [innerHTML]=\"\n            search\n              ? (ownerOption?.name || '' | highlightSearch: value())\n              : ownerOption?.name\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Fuelcard dropdown -->\n<ng-template #fuelcardRef>\n  @if (dropdownOptions().length) {\n    @for (fuelcard of dropdownOptions(); track $index; let index = $index) {\n      @let fuelcardOption = cast(fuelcard, \"fuelCard\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"fuelcard-{{ fuelcardOption?.id }}\"\n        (pointerdown)=\"handleOption(fuelcardOption!, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"fuelcard-number\"\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.number || '' | highlightSearch: value())\n              : fuelcardOption?.number\n          \"\n        ></p>\n        <p\n          class=\"fuelcard-brand\"\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.brand || '' | highlightSearch: value())\n              : fuelcardOption?.brand\n          \"\n        ></p>\n        <p\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.account || '' | highlightSearch: value())\n              : fuelcardOption?.account\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Shipper dropdown -->\n<ng-template #shipperRef>\n  @if (dropdownOptions().length) {\n    @for (shipper of dropdownOptions(); track $index; let index = $index) {\n      @let shipperOption = cast(shipper, \"shipper\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"shipper-{{ shipperOption.id }}\"\n        (pointerdown)=\"handleOption(shipperOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"max-w-280 text-truncate\"\n          [innerHTML]=\"\n            search\n              ? (shipperOption.businessName || '' | highlightSearch: value())\n              : shipperOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p\n              class=\"max-w-280 text-truncate\"\n              [innerHTML]=\"\n                search\n                  ? (shipperOption.address?.address || ''\n                    | highlightSearch: value())\n                  : shipperOption.address?.address\n              \"\n            ></p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ shipperOption.pickupCount }} Pickup |\n              {{ shipperOption.deliveryCount }} Delivery\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatch dropdown -->\n<ng-template #dispatchesRef>\n  @if (dropdownOptions().length) {\n    <button\n      tabindex=\"-1\"\n      class=\"dropdown-item\"\n      (pointerdown)=\"reset()\"\n      [class]=\"{\n        selected: !selectedOption(),\n      }\"\n    >\n      <p>Unassigned</p>\n      <div class=\"unassigned-ltl\">\n        <p>{{ unassignedCount() }}</p>\n        <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\n      </div>\n    </button>\n    @for (\n      dispatchBoard of dropdownOptions();\n      track dispatchBoard.id;\n      let groupIndex = $index\n    ) {\n      <!-- Temporary variant since BE doesn't support boards -->\n      @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\n\n      @let isNoBoardsVariant =\n        dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\n      @if (dispatchBoardOption.count > 0) {\n        @if (!isNoBoardsVariant) {\n          @let isGroupFocused =\n            groupedNavigationState?.groupIndex === groupIndex &&\n            groupedNavigationState?.optionIndex === 0;\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\n            [class]=\"{\n              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p>\n              {{\n                dispatchBoardOption.teamBoard\n                  ? \"Team Board\"\n                  : dispatchBoardOption.dispatcher\n              }}\n            </p>\n            <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n        }\n        @if (\n          dispatchBoardOption.dispatches &&\n          dispatchBoardOption.dispatches.length > 0\n        ) {\n          @for (\n            dispatch of dispatchBoardOption.dispatches;\n            track dispatch.id;\n            let optionIndex = $index\n          ) {\n            @let isOptionFocused =\n              groupedNavigationState?.groupIndex === groupIndex &&\n              groupedNavigationState?.optionIndex === optionIndex + 1;\n            <!-- +1 since optionIndex is 0 for the group item header -->\n            <button\n              tabindex=\"-1\"\n              class=\"dropdown-item\"\n              (pointerdown)=\"handleOption(dispatch, $event)\"\n              [class]=\"{\n                selected:\n                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,\n                focused: isOptionFocused,\n              }\"\n            >\n              <div class=\"dropdown-subitem truck-item\">\n                <svg-icon\n                  class=\"truck-icon truck-trailer-icon-colors\"\n                  [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                  [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                ></svg-icon>\n                <p\n                  class=\"truck-number\"\n                  [innerHTML]=\"\n                    dispatch.truck.truckNumber | highlightSearch: value()\n                  \"\n                ></p>\n              </div>\n              <div class=\"dropdown-subitem trailer-item\">\n                @if (dispatch.trailer) {\n                  <svg-icon\n                    class=\"trailer-icon truck-trailer-icon-colors\"\n                    [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                    [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                  ></svg-icon>\n                  <p\n                    class=\"trailer-number\"\n                    [innerHTML]=\"\n                      dispatch.trailer.trailerNumber | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem\">\n                @if (dispatch.coDriver) {\n                  <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName +\n                        ' & ' +\n                        dispatch.coDriver.firstName | highlightSearch: value()\n                    \"\n                  ></p>\n                } @else {\n                  <cai-avatar\n                    [driver]=\"dispatch.driver\"\n                    [size]=\"18\"\n                    [inverse]=\"true\"\n                    [hover]=\"false\"\n                  ></cai-avatar>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem-end\">\n                <div class=\"end-item-hover\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base dispatch-ltl\">\n                  <p>{{ dispatch.numberOfSingleLtlLoads }}</p>\n                  <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- ftl dispatch dropdown -->\n<ng-template #ftlDispatchRef>\n  @if (dropdownOptions().length) {\n    @for (\n      dispatchBoard of dropdownOptions();\n      track dispatchBoard.id;\n      let groupIndex = $index\n    ) {\n      @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      @let isNoBoardsVariant =\n        dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\n      @if (dispatchBoardOption.count > 0) {\n        @if (!isNoBoardsVariant) {\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\n            [class]=\"{\n              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p>\n              {{\n                dispatchBoardOption.teamBoard\n                  ? \"Team Board\"\n                  : dispatchBoardOption.dispatcher\n              }}\n            </p>\n            <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n        }\n        @if (\n          dispatchBoardOption.dispatches &&\n          dispatchBoardOption.dispatches.length > 0\n        ) {\n          @for (\n            dispatch of dispatchBoardOption.dispatches;\n            track dispatch.id;\n            let optionIndex = $index\n          ) {\n            @let isOptionFocused =\n              groupedNavigationState?.groupIndex === groupIndex &&\n              groupedNavigationState?.optionIndex === optionIndex + 1;\n            <!-- +1 since optionIndex is 0 for the group item header -->\n            <button\n              class=\"dropdown-item\"\n              (pointerdown)=\"handleOption(dispatch, $event)\"\n              [class]=\"{\n                selected:\n                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,\n                focused: isOptionFocused,\n              }\"\n            >\n              <div class=\"dropdown-subitem truck-item\">\n                <svg-icon\n                  class=\"truck-icon truck-trailer-icon-colors\"\n                  [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                  [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                ></svg-icon>\n                <p\n                  class=\"truck-number\"\n                  [innerHTML]=\"\n                    dispatch.truck.truckNumber | highlightSearch: value()\n                  \"\n                ></p>\n              </div>\n              <div class=\"dropdown-subitem trailer-item\">\n                @if (dispatch.trailer) {\n                  <svg-icon\n                    class=\"trailer-icon truck-trailer-icon-colors\"\n                    [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                    [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                  ></svg-icon>\n                  <p\n                    class=\"trailer-number\"\n                    [innerHTML]=\"\n                      dispatch.trailer.trailerNumber | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem\">\n                @if (dispatch.coDriver) {\n                  <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName +\n                        ' & ' +\n                        dispatch.coDriver.firstName | highlightSearch: value()\n                    \"\n                  ></p>\n                } @else {\n                  <cai-avatar\n                    [driver]=\"dispatch.driver\"\n                    [size]=\"18\"\n                    [inverse]=\"true\"\n                    [hover]=\"false\"\n                  ></cai-avatar>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem-end\">\n                <div class=\"end-item-hover\">\n                  <!-- Load Status -->\n                  @if (dispatch.status?.statusString) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"\n                        'status-' +\n                        dispatch.status?.statusString\n                          ?.toLowerCase()\n                          ?.replaceAll(' ', '')\n                          ?.replaceAll('.', '')\n                      \"\n                    >\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block blue\">D</p>\n                        <p class=\"status-block green\">L</p>\n                      }\n                      {{ dispatch.status?.statusString }}\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block green\">P</p>\n                        <p class=\"status-block orange\">D</p>\n                      }\n                      @if (dispatch.status?.statusCheckInNumber) {\n                        <p class=\"status-block\">\n                          {{ dispatch.status?.statusCheckInNumber }}\n                        </p>\n                      }\n                    </div>\n                    <p class=\"dispatch-separator\">|</p>\n                  }\n                  <p class=\"dispatch-load-count\">\n                    <!-- Pending Load Count -->\n                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\n                    0\n                  </p>\n                  <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitDriverRef>\n  @if (dropdownOptions().length) {\n    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\n      @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(driverBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (driverBoard.drivers?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            driverBoard.isTeamBoard ? \"Team Board\" : driverBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ driverBoard.drivers?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (driver of driverBoard.drivers || []; track driver.id) {\n        @let driverOption = cast(driver, \"splitDriver\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(driverOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitDriver')?.id === driverOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem\">\n            <div class=\"dropdown-avatar\">\n              <cai-avatar\n                [driver]=\"driverOption\"\n                [size]=\"18\"\n                [inverse]=\"true\"\n                [hover]=\"false\"\n              ></cai-avatar>\n            </div>\n            <p\n              class=\"driver-name\"\n              [innerHTML]=\"\n                driverOption.firstName + ' ' + driverOption.lastName\n                  | highlightSearch: value()\n              \"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                driverOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ driverOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              <p>{{ driverOption.payTypeValue }}</p>\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTruckRef>\n  @if (dropdownOptions().length) {\n    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\n      @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(truckBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (truckBoard.trucks?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            truckBoard.isTeamBoard ? \"Team Board\" : truckBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ truckBoard.trucks?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (truck of truckBoard.trucks || []; track truck.id) {\n        @let truckOption = cast(truck, \"splitTruck\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(truckOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitTruck')?.id === truckOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem truck-item\">\n            <svg-icon\n              class=\"truck-icon\"\n              [style.--truck-color]=\"truckOption.color?.code || ''\"\n              [name]=\"truckOption.truckType.logoName.slice(0, -4)\"\n            ></svg-icon>\n            <p\n              class=\"truck-number\"\n              [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                truckOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ truckOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                truckOption.location?.city &&\n                truckOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ truckOption.location?.city }},\n                  {{ truckOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\n      @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(trailerBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (trailerBoard.trailers?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            trailerBoard.isTeamBoard\n              ? \"Team Board\"\n              : trailerBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ trailerBoard.trailers?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (trailer of trailerBoard.trailers || []; track trailer.id) {\n        @let trailerOption = cast(trailer, \"splitTrailer\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(trailerOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem trailer-item\">\n            <svg-icon\n              class=\"trailer-icon\"\n              [style.--trailer-color]=\"trailerOption.color?.code || ''\"\n              [name]=\"trailerOption.trailerType.logoName.slice(0, -4)\"\n            ></svg-icon>\n            <p\n              class=\"trailer-number\"\n              [innerHTML]=\"\n                trailerOption.trailerNumber | highlightSearch: value()\n              \"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                trailerOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ trailerOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                trailerOption.location?.city &&\n                trailerOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ trailerOption.location?.city }},\n                  {{ trailerOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #tollRef>\n  @if (dropdownOptions().length) {\n    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\n      @let tollOption = cast(toll, \"tollOption\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item pe-none\"\n        [class]=\"{\n          unfolded: tollOption.tollTransponders?.length || 0 > 0,\n          focused: isGroupFocused,\n        }\"\n      >\n        <p>\n          {{ tollOption.groupName }}\n        </p>\n      </button>\n      @let tollTransponders = tollOption.tollTransponders || [];\n      @for (\n        tollTransponder of tollTransponders;\n        track tollTransponder.id;\n        let optionIndex = $index\n      ) {\n        @let isOptionFocused =\n          groupedNavigationState?.groupIndex === groupIndex &&\n          groupedNavigationState?.optionIndex === optionIndex + 1;\n        <!-- +1 since optionIndex is 0 for the group item header -->\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(tollTransponder, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'tollTransponderOption')?.id ===\n              tollTransponder.id,\n            focused: isOptionFocused,\n          }\"\n        >\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (tollTransponder.name || '' | highlightSearch: value())\n                : tollTransponder.name\n            \"\n          ></p>\n          <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatcher dropdown -->\n\n<ng-template #dispatcherRef>\n  @if (dropdownOptions().length) {\n    @for (dispatcher of dropdownOptions(); track $index; let index = $index) {\n      @let dispatcherOption = cast(dispatcher, \"dispatcher\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dispatcherOption.id }}\"\n        (pointerdown)=\"handleOption(dispatcherOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <cai-avatar\n          [driver]=\"{\n            id: dispatcherOption?.id || 0,\n            firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n            lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n            avatarFile: dispatcherOption?.avatarFile,\n            colorFlag: dispatcherOption?.colorFlag,\n          }\"\n          [rounded]=\"!config().squareAvatar\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p\n          class=\"dropdown-content-hazardous\"\n          [innerHTML]=\"\n            search\n              ? (dispatcherOption.fullName || '' | highlightSearch: value())\n              : dispatcherOption.fullName\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #truckRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let truckOption = cast(truck, \"truckOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ truckOption.id }}\"\n        (pointerdown)=\"handleOption(truckOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'truckOption')?.id === truckOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (truckOption.name || '' | highlightSearch: value())\n              : truckOption.name\n          \"\n        ></p>\n        <svg-icon\n          class=\"truck-trailer-option truck-trailer-icon-colors\"\n          [class]=\"truckOption.logoName.slice(0, -4)\"\n          [name]=\"truckOption.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <svg-icon\n          name=\"cai-checkmark\"\n          class=\"dropdown-item-icon no-margin\"\n        ></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #trailerRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let trailerOption = cast(truck, \"trailerOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ trailerOption.id }}\"\n        (pointerdown)=\"handleOption(trailerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (trailerOption.name || '' | highlightSearch: value())\n              : trailerOption.name\n          \"\n        ></p>\n\n        <svg-icon\n          class=\"truck-trailer-option truck-trailer-icon-colors\"\n          [class]=\"trailerOption.logoName.slice(0, -4)\"\n          [name]=\"trailerOption.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <svg-icon\n          name=\"cai-checkmark\"\n          class=\"dropdown-item-icon no-margin\"\n        ></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #providerRef>\n  @if (dropdownOptions().length) {\n    @for (provider of dropdownOptions(); track $index; let index = $index) {\n      @let providerOption = cast(provider, \"provider\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ providerOption?.id }}\"\n        (pointerdown)=\"handleOption(providerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'provider')?.id === providerOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"full-icon\"\n          [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n        ></svg-icon>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Hazardous dropdown -->\n<ng-template #hazardousRef>\n  @if (dropdownOptions().length) {\n    @for (hazardous of dropdownOptions(); track $index; let index = $index) {\n      @let hazardousOption = cast(hazardous, \"hazardous\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ hazardousOption.id }}\"\n        (pointerdown)=\"handleOption(hazardousOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon [name]=\"hazardousOption.logoName?.slice(0, -4)\"></svg-icon>\n        <p\n          class=\"dropdown-content-hazardous\"\n          [innerHTML]=\"\n            search\n              ? (hazardousOption.description || '' | highlightSearch: value())\n              : hazardousOption.description\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #pmRef>\n  @if (dropdownOptions().length) {\n    @for (pm of dropdownOptions(); track $index; let index = $index) {\n      @let pmOption = cast(pm, \"pmOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ pmOption.id }}\"\n        (pointerdown)=\"handleOption(pmOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon\"\n          [name]=\"pmOption.title | remapPmIcons\"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (pmOption.title || '' | highlightSearch: value())\n              : pmOption.title\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #colorRef>\n  @if (dropdownOptions().length) {\n    @for (color of dropdownOptions(); track $index; let index = $index) {\n      @let colorOption = cast(color, \"colorOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item color-item\"\n        id=\"option-{{ colorOption.id }}\"\n        (pointerdown)=\"handleOption(colorOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'colorOption')?.id === colorOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon cai-color\"\n          [name]=\"'cai-color'\"\n          [style.--color]=\"colorOption?.code\"\n          [style.--hover-color]=\"colorOption?.hoverCode\"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (colorOption.name || '' | highlightSearch: value())\n              : colorOption.name\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #stateRef>\n  @if (dropdownOptions().length) {\n    @for (state of dropdownOptions(); track $index; let index = $index) {\n      @let stateOption = cast(state, \"state\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ stateOption.id }}\"\n        (pointerdown)=\"handleOption(stateOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'state')?.id === stateOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon\"\n          [name]=\"\n            'cai-' +\n            stateOption?.countryType?.name?.toLowerCase() +\n            '-' +\n            stateOption?.stateShortName?.toLowerCase()\n          \"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (stateOption.stateShortName +\n                  ' ' +\n                  (config().fullState\n                    ? ' (' + stateOption?.stateName + ')'\n                    : '') || '' | highlightSearch: value())\n              : stateOption.stateShortName +\n                ' ' +\n                (config().fullState ? ' (' + stateOption?.stateName + ')' : '')\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #fuelStopTransactionRef>\n  @if (dropdownOptions().length) {\n    @for (\n      franchise of dropdownOptions();\n      track franchise.id;\n      let groupIndex = $index\n    ) {\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      @let franchiseOption = cast(franchise, \"franchise\")!;\n      @if (franchiseOption?.count !== null) {\n        <div\n          class=\"dropdown-group\"\n          [class.no-items]=\"!franchiseOption?.count\"\n          [class]=\"{\n            active: openGroup() === franchiseOption.id,\n          }\"\n          [style.--max-height]=\"\n            openGroup() === franchiseOption.id\n              ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'\n              : '26px'\n          \"\n        >\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(franchiseOption.id, $event, franchiseOption)\"\n            [class]=\"{\n              unfolded: openGroup() === franchiseOption.id,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p\n              [innerHTML]=\"\n                franchiseOption?.businessName || '' | highlightSearch: value()\n              \"\n            ></p>\n            <p class=\"counter\">{{ franchiseOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n          @if (openGroup() === franchiseOption.id) {\n            @if (franchiseOption.fuelStopStores?.length || 0 > 0) {\n              @for (\n                fuelStopStore of franchiseOption.fuelStopStores;\n                track fuelStopStore.id\n              ) {\n                @let isOptionFocused =\n                  groupedNavigationState?.groupIndex === groupIndex &&\n                  groupedNavigationState?.optionIndex === $index + 1;\n                <!-- +1 since optionIndex is 0 for the group item header -->\n                <button\n                  tabindex=\"-1\"\n                  class=\"dropdown-item fuel-stop-transaction-store\"\n                  [class]=\"{\n                    focused: isOptionFocused,\n                  }\"\n                  (pointerdown)=\"handleOption(fuelStopStore, $event)\"\n                >\n                  <p\n                    [innerHTML]=\"\n                      fuelStopStore?.store ?? '' | highlightSearch: value()\n                    \"\n                  ></p>\n                  @let city = fuelStopStore?.address?.city ?? \"\";\n                  @let state = fuelStopStore?.address?.stateShortName ?? \"\";\n                  @let zip = fuelStopStore?.address?.zipCode ?? \"\";\n                  <p\n                    class=\"fuel-stop-transaction-store-address\"\n                    [innerHTML]=\"\n                      city + (state || zip ? ', ' : '') + state + ' ' + zip\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n\n                  @if (fuelStopStore?.[\"favourite\"]) {\n                    <svg-icon\n                      name=\"cai-favorite\"\n                      class=\"favorite-icon\"\n                    ></svg-icon>\n                  }\n                </button>\n              }\n              <!-- Infinite scroll trigger - emits event when item comes into view -->\n              <div\n                class=\"dropdown-infinite-scroll-item\"\n                caiIntersectionObserver\n                [threshold]=\"0.1\"\n                (inView)=\"onDropdownScrolledToBottom(true)\"\n              ></div>\n            } @else {\n              <p class=\"dropdown-item no-results\">No results</p>\n            }\n          }\n        </div>\n      } @else {\n        <button\n          tabindex=\"-1\"\n          class=\"dropdown-item\"\n          [class.focused]=\"\n            groupedNavigationState?.groupIndex === groupIndex &&\n            groupedNavigationState?.optionIndex === 0\n          \"\n          (pointerdown)=\"handleOption(franchiseOption, $event)\"\n        >\n          <p\n            class=\"fuel-stop-transaction-nostore\"\n            [innerHTML]=\"\n              franchiseOption?.businessName || '' | highlightSearch: value()\n            \"\n          ></p>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- #endregion -->\n\n<!-- #region Selected options -->\n\n<!-- selected dispatch -->\n<ng-template #selectedDispatchRef>\n  @let dispatchOption = cast(selectedOption(), \"dispatch\");\n  @if (dispatchOption && !inputRef.value && !isAdding()) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem truck-item\">\n        <svg-icon\n          class=\"truck-icon\"\n          [name]=\"dispatchOption!.truck.truckType.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <p class=\"truck-number\">\n          {{ dispatchOption!.truck.truckNumber }}\n        </p>\n      </div>\n      <div class=\"dropdown-subitem trailer-item\">\n        @if (dispatchOption!.trailer) {\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"\n              cast(\n                selectedOption(),\n                'dispatch'\n              )!.trailer?.trailerType?.logoName?.slice(0, -4)\n            \"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ dispatchOption!.trailer?.trailerNumber }}\n          </p>\n        }\n      </div>\n      <div class=\"dropdown-subitem\">\n        @if (dispatchOption!.coDriver) {\n          <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n          <p class=\"driver-name\">\n            {{\n              dispatchOption!.driver.firstName +\n                \" & \" +\n                dispatchOption!.coDriver?.firstName\n            }}\n          </p>\n        } @else {\n          <cai-avatar\n            [driver]=\"dispatchOption!.driver\"\n            [size]=\"18\"\n            [hover]=\"false\"\n          ></cai-avatar>\n          <p class=\"driver-name\">\n            {{\n              dispatchOption!.driver.firstName +\n                \" \" +\n                dispatchOption!.driver.lastName\n            }}\n          </p>\n        }\n      </div>\n      <p class=\"selected-end-item\">\n        {{ dispatchOption!.payType }}\n      </p>\n    </div>\n  } @else {\n    @if (!inputRef.value && this.config().dropdown == \"dispatch\") {\n      <p class=\"dropdown-selected\">Unassigned</p>\n    }\n  }\n</ng-template>\n\n<!-- selected broker -->\n<ng-template #selectedBrokerRef>\n  @let brokerOption = cast(selectedOption(), \"broker\");\n  @if (brokerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if ((brokerOption!.availableCredit || 0) < 0) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\n      <div class=\"selected-end-item\">\n        @if (!brokerOption!.creditLimit) {\n          <p>Unlimited</p>\n        } @else {\n          <p>\n            {{ brokerOption!.availableCredit || 0 | currency }}\n          </p>\n          <div\n            class=\"progress-bar\"\n            [style.--progress]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).activePercentageOfPaid + '%'\n            \"\n            [class]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).status\n            \"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedContactRef>\n  @let contactOption = cast(selectedOption(), \"contact\");\n  @if (contactOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ contactOption?.phone }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedShipperRef>\n  @let shipperOption = cast(selectedOption(), \"shipper\");\n  @if (shipperOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ shipperOption?.address?.address }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedOwnerRef>\n  @let ownerOption = cast(selectedOption(), \"owner\");\n  @if (ownerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\n      <p class=\"\">{{ ownerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedFuelcardRef>\n  @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\n  @if (fuelcardOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"fuelcard-number\">\n        {{ fuelcardOption?.number }}\n      </p>\n      <p class=\"fuelcard-brand\">\n        {{ fuelcardOption?.brand }}\n      </p>\n      <p class=\"\">\n        {{ fuelcardOption?.account }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedBankRef>\n  @let bankOption = cast(selectedOption(), \"bank\");\n  @if (bankOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (bankOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedProviderRef>\n  @let providerOption = cast(selectedOption(), \"provider\");\n  @if (providerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon full-size\"\n        [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n      ></svg-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedMakeRef>\n  @let makeOption = cast(selectedOption(), \"make\");\n  @if (makeOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (makeOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedStateRef>\n  @let stateOption = cast(selectedOption(), \"state\");\n  @if (stateOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"\n          'cai-' +\n          stateOption?.countryType?.name?.toLowerCase() +\n          '-' +\n          stateOption?.stateShortName?.toLowerCase()\n        \"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ stateOption?.stateShortName }}\n        {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedDispatcherRef>\n  @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\n  @if (dispatcherOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: dispatcherOption?.id || 0,\n          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: dispatcherOption?.avatarFile,\n          colorFlag: dispatcherOption?.colorFlag,\n        }\"\n        [rounded]=\"!config().squareAvatar\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckRef>\n  @let truckOption = cast(selectedOption(), \"truckOption\");\n  @if (truckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"truckOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTrailerRef>\n  @let trailerOption = cast(selectedOption(), \"trailerOption\");\n  @if (trailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"trailerOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedHazardousRef>\n  @let hazardousOption = cast(selectedOption(), \"hazardous\");\n  @if (hazardousOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"hazard-icon\"\n        [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\n        {{ hazardousOption?.description }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedPmRef>\n  @let pmOption = cast(selectedOption(), \"pmOption\");\n  @if (pmOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"pmOption?.title | remapPmIcons\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ pmOption?.title }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedColorRef>\n  @let colorOption = cast(selectedOption(), \"colorOption\");\n  @if (colorOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon cai-color\"\n        [name]=\"'cai-color'\"\n        [style.--color]=\"colorOption?.code\"\n        [style.--hover-color]=\"colorOption?.hoverCode\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ colorOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTollRef>\n  @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\n  @if (tollOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">\n        {{ tollOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitDriverRef>\n  @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\n  @if (splitDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem\">\n          <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\n          <p class=\"driver-name\">\n            {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\n          </p>\n        </div>\n      </div>\n\n      <p class=\"selected-end-item\">\n        {{ splitDriverOption.payTypeValue }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTruckRef>\n  @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\n  @if (splitTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem trailer-item\">\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ splitTruckOption!.truckNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTruckOption!.location?.city &&\n          splitTruckOption!.location?.stateShortName\n        ) {\n          {{ splitTruckOption!.location?.city }},\n          {{ splitTruckOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTrailerRef>\n  @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\n  @if (splitTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem truck-item\">\n          <svg-icon\n            class=\"truck-icon\"\n            [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"truck-number\">\n            {{ splitTrailerOption!.trailerNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTrailerOption!.location?.city &&\n          splitTrailerOption!.location?.stateShortName\n        ) {\n          {{ splitTrailerOption!.location?.city }},\n          {{ splitTrailerOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #passwordTooltip>\n  {{ visible() ? \"Hide\" : \"Show\" }}\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (\n    (config().errorBehavior === \"floating\" ||\n      (config().errorBehavior === \"static\" && hasText()) ||\n      config().inTable) &&\n    invalid &&\n    !dropdown.isOpen()\n  ) {\n    {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\n  }\n</ng-template>\n\n<!-- #endregion -->\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon,.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon,.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse.has-text:has(.app-input:disabled) .app-input-label{color:#424242!important}.app-input-container:hover,.app-input-container.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label{margin-right:44px}.app-input-container.has-text .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container.has-text.fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container.has-text .subcontent{opacity:1!important}.app-input-container.has-text.static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text)}.app-input-container.has-text.is-address:hover .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:hover .bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral-hover)}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .subcontent{opacity:1!important;color:#ffffffb2;left:unset!important;right:4px!important}.app-input-container:has(.app-input:focus-visible).has-text .subcontent{right:26px!important}.app-input-container:has(.app-input:focus-visible) .sub-label{margin-right:44px}.app-input-container:has(.app-input:focus-visible).fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container:has(.app-input:focus-visible).static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text-inverse)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover,.app-input-container:has(.app-input:disabled).hovered{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:disabled) .dropdown-icon-container{opacity:0}.app-input-container:has(.app-input:disabled):not(.disabled-removable) .cancel-button{display:none!important}.app-input-container:has(.app-input:required):not(:has(.app-input:disabled)) .app-input-name:after{content:\" *\";color:var(--color-text-negative)}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.canceled .app-input-label,.app-input-container.canceled .app-input{color:var(--color-text-subtle)!important}.app-input-container.canceled .icon-container .icon,.app-input-container.canceled .icon-container .icon-sm{color:var(--color-icon-disable)!important}.subcontent{pointer-events:none;position:absolute;left:6px;color:#919191;-webkit-user-select:none;user-select:none;top:50%;transform:translateY(-50%);transition:right .1s ease-in-out,left .1s ease-in-out,transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);opacity:0;font-family:Montserrat;font-weight:400;font-style:Regular;font-size:14px;line-height:18px;letter-spacing:0%;height:18px;overflow:hidden}.subcontent .subcontent-hide{opacity:0!important}.app-input-label{position:absolute;display:flex;gap:4px;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.app-input-label.placeholder-color{color:var(--placeholder-color)!important}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error:hover:not(.has-right) .app-input,.app-input-container.has-error:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-error:hover,.app-input-container.has-error.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon,.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.has-text .bg-icon,.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible).has-text .button-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible).has-text .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:focus-visible).is-empty,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .app-input-error,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .bg-icon,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .bg-icon{color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error.is-empty:has(.app-input:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:#ffffff4d}.app-input-container.has-error .icon-container .separator,.app-input-container.has-error .dropdown-icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon,.app-input-container.has-error .icon-container .icon-sm,.app-input-container.has-error .dropdown-icon-container .icon,.app-input-container.has-error .dropdown-icon-container .icon-sm{color:var(--color-icon-negative)}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.has-valid:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid:hover:not(.has-right) .app-input,.app-input-container.has-valid:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.in-table),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.in-table),.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.in-table){background-color:var(--color-surface-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .button-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .bg-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid.has-text:not(.has-dropdown) .app-input::selection,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .app-input::selection,.app-input-container.has-valid.has-multiple-dropdown.has-text .app-input::selection{background-color:#ffffff4d}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .separator,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon-sm{color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .password-key{opacity:0;pointer-events:none}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.in-table,.in-table.has-error,.in-table.has-valid.has-text{background-color:transparent}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)) .app-input{color:var(--color-text-negative)}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)):not(.static-placeholder) .app-input-label{color:var(--color-text-negative)}.in-table .dropdown-icon-container{opacity:0}.in-table:hover .dropdown-icon-container{opacity:1}.in-table:has(.app-input:focus-visible) .dropdown-icon-container{opacity:1}.app-input-icon{position:absolute;right:4px;top:4px;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.button-icon{opacity:0;pointer-events:none}.button-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.bg-icon:hover{transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.round-icon{background-color:#919191;color:#2f2f2f;border-radius:50%;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) .app-input{color:#3b73ed}.floating-error .app-input-error{opacity:0!important}.static-error .app-input-error{pointer-events:none!important;transform:translateY(calc(-100% - 4px))!important;transition:margin .1s ease-in-out,opacity .1s ease-in-out}.static-error.has-icon .app-input-error{margin-right:26px!important}.static-error:has(.app-input:not(:focus-visible)) .app-input-error{opacity:1}.static-error.has-text .app-input-error{opacity:0!important}.static-placeholder .app-input-label{position:relative;white-space:nowrap;font-size:11px;font-weight:600}.static-placeholder .dropdown-selected{overflow:hidden;display:flex!important;justify-content:left!important}.static-placeholder .dropdown-selected .selected-label-hidden{width:max-content;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.static-placeholder .dropdown-selected .selected-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}.static-placeholder .app-input{padding-left:0!important}.static-placeholder.has-dropdown .cancel-button{display:none}.static-placeholder.has-dropdown .dropdown-icon-container .dropdown-icon{opacity:0;pointer-events:none}.static-placeholder.has-dropdown:hover .icon-container .icon,.static-placeholder.has-dropdown:hover .icon-container .icon-sm,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:hover .dropdown-icon-container,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:hover .dropdown-icon-container .dropdown-icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}.static-placeholder.has-dropdown .dropdown-icon-container{right:4px!important;left:auto!important}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm{color:var(--color-icon-inverse)!important}.app-input-container.has-icon.colored-icon .icon-container .icon,.app-input-container.has-icon.colored-icon .icon-container .icon-sm,.app-input-container.has-password.colored-icon .icon-container .icon,.app-input-container.has-password.colored-icon .icon-container .icon-sm,.app-input-container.has-dropdown.colored-icon .icon-container .icon,.app-input-container.has-dropdown.colored-icon .icon-container .icon-sm{color:var(--icon-color)}.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm{color:var(--color-icon-disable)!important}.app-input-container.has-icon .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-dropdown .warning-icon{display:none!important}.app-input-container.has-icon .icon,.app-input-container.has-icon .icon-sm,.app-input-container.has-password .icon,.app-input-container.has-password .icon-sm,.app-input-container.has-dropdown .icon,.app-input-container.has-dropdown .icon-sm{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);opacity:1}.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-icon:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}.icon-sm{height:14px;width:14px}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .subcontent,.app-input-container.has-password .subcontent{left:32px}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:27px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon,.has-password .password-icons .icon-sm{position:absolute;opacity:0}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-icons{pointer-events:none}.has-password:has(.app-input:disabled) .password-icons{pointer-events:none}.has-password.has-text .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password.has-text .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible.has-text .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible.has-text .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible.has-text .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important;pointer-events:none}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .button-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-number:has(.app-input:focus-visible) .subcontent{right:52px!important}.has-number:has(.app-input:focus-visible).has-text .subcontent{right:52px!important}.colored-icon .icon,.colored-icon .icon-sm{color:var(--icon-color)!important}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.dropdown-infinite-scroll-item{width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;height:0}.dropdown-menu{min-width:0px!important;width:100%;border:0;margin-top:4px;top:30px;height:var(--unfiltered-height);min-height:var(--unfiltered-height);padding:0!important;overflow:hidden;border-radius:0!important;background:transparent!important}.dropdown-menu.has-stroke .dropdown-menu-content{outline:1px solid #6c6c6c;outline-offset:-1px}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;background-color:#2f2f2f;border-radius:3px;padding:4px 0 4px 4px;max-height:244px;z-index:1100!important;overflow-y:scroll;margin-top:auto!important;scroll-padding:6px 0}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:4px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{width:4px;background:#2f2f2f;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:4px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.option-icon{color:#6c6c6c;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.option-icon.full-size{width:max-content;min-width:100%;height:18px!important;min-height:18px;flex-shrink:0;overflow:hidden}.option-icon.full-size svg{height:18px;width:max-content}.cai-color{color:var(--color)!important;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.color-item:hover .cai-color{color:var(--hover-color)!important}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;scroll-margin:6px 0;outline:1px solid transparent;outline-offset:-1px;display:flex;align-items:center;justify-content:left;gap:4px;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),outline .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item.focused{outline:1px solid #6c6c6c!important}.dropdown-item.focused .end-item-base{opacity:0}.dropdown-item.focused .end-item-hover{opacity:1}.dropdown-item.focused .full-icon{color:#ffffffb2}.dropdown-item.focused .truck-trailer-option{opacity:1}.dropdown-item .icon,.dropdown-item .icon-sm{color:#919191}.dropdown-item .dropdown-content-with-icon{max-width:calc(100% - 22px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content-hazardous{max-width:calc(100% - 40px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content{max-width:70%;overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover:not(.no-hover){background-color:#424242}.dropdown-item:hover:not(.no-hover) .end-item-base{opacity:0}.dropdown-item:hover:not(.no-hover) .end-item-hover{opacity:1}.dropdown-item:hover:not(.no-hover) .full-icon{color:#ffffffb2}.dropdown-item:hover:not(.no-hover) .truck-trailer-option{opacity:1}.dropdown-item.no-hover{cursor:default;pointer-events:none}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item:not(:first-child){margin-top:4px}.dropdown-item.banned{color:#919191;cursor:default}.dropdown-item.banned:hover{color:#919191;background-color:#2f2f2f}.dropdown-item.banned:hover .end-item-base{opacity:0}.dropdown-item.banned:hover .end-item-hover{opacity:1}.dropdown-item.dnu .round-icon{background-color:#e66767}.dropdown-item .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}.dropdown-avatar:hover{z-index:20}.no-results{color:#919191;font-weight:700;cursor:default;pointer-events:none}.add-new{color:#92b1f5!important;font-weight:700;font-size:11px}.add-new .dropdown-item-icon{opacity:1}.add-new:hover{background-color:#3b73ed66!important;color:#fff!important}.selected{font-weight:700}.selected .dropdown-item-icon{opacity:1}.selected .dropdown-item-count{color:#fff;background-color:#3b73ed}.selected .full-icon{color:#fff}.selected .end-item-base,.selected .end-item-hover{font-weight:700;color:#92b1f5}.selected .end-item-base .icon,.selected .end-item-base .icon-sm,.selected .end-item-hover .icon,.selected .end-item-hover .icon-sm{color:#92b1f5}.dropdown-item-icon{opacity:0;color:#92b1f5;width:14px;height:14px;margin-left:auto}.dropdown-item-icon.no-margin{margin-left:0}.dropdown-item-count{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:10px;background-color:#424242;color:#ffffffb2;min-width:18px;line-height:14px;font-weight:600;font-size:11px;text-align:center}.dropdown-icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-icon-container.open .dropdown-icon{transform:rotateX(180deg)}.dropdown-icon{transition:transform .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)!important;transform:rotateX(0);cursor:pointer}.has-dropdown .app-input-icon{right:26px}.has-dropdown:has(.app-input:focus-visible) .subcontent{right:26px!important}.has-dropdown:has(.app-input:focus-visible).has-text .subcontent,.has-dropdown:has(.app-input:focus-visible).has-selected .subcontent{right:48px!important}.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input,.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .cancel-button{z-index:1}.has-right.has-number .plus-button-container{order:2}.has-right.has-number .minus-button-container{order:1}.has-right.static-placeholder .app-input-icon{right:4px!important;left:auto!important;opacity:0!important}.has-right.static-placeholder:has(.app-input:focus-visible) .cancel-button{opacity:0!important;pointer-events:none!important}.has-right.static-placeholder.removable .cancel-button .bg-icon{background-color:transparent!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover .icon-container .icon,.has-right.static-placeholder.removable:hover .icon-container .icon-sm{opacity:0!important}.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button{opacity:1!important}.has-right .app-input{order:1}.has-right.has-subcontent .app-input{flex:1;min-width:0;word-break:none}.has-right .dropdown-selected{margin-left:0!important;text-align:right!important;right:0!important;left:0!important;justify-content:flex-end!important;width:100%!important}.has-right .subcontent{position:relative!important;order:1;display:grid;place-items:center;padding-right:4px;height:unset!important;transform:translateY(0)!important;left:0!important;right:unset!important}.has-right .subcontent .subcontent-hide{display:none!important}.has-right.has-text .subcontent{left:0!important;right:unset!important}.has-right:has(.app-input:focus-visible) .subcontent{left:0!important;right:unset!important}.has-right.has-icon .subcontent,.has-right.has-password .subcontent{padding-right:0!important;padding-left:4px}.has-right.has-icon .dropdown-selected,.has-right.has-password .dropdown-selected{width:calc(100% - 24px)!important}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon.fade-placeholder .app-input-label,.has-right.has-password.fade-placeholder .app-input-label{left:auto!important;right:24px!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-icon .icon-container .icon-sm,.has-right.has-password .icon-container .icon,.has-right.has-password .icon-container .icon-sm{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .dropdown-icon-container{left:4px}.has-right .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right.has-number.app-input-container:has(.app-input:focus-visible) .app-input{padding-left:4px}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}.has-right.fade-placeholder .app-input-label{right:0!important;left:auto!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:after{content:none!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:before{content:\"* \";color:var(--color-text-negative)}.removable:has(.cancel-button:hover).in-table{background-color:transparent!important}.removable:has(.cancel-button:hover).in-table .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):not(.in-table){background-color:var(--color-surface-negative-hover)!important}.removable:has(.cancel-button:hover):not(.in-table) .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.no-clear .cancel-button{display:none!important}.is-adding{padding-right:20px}.is-adding .dropdown-icon{opacity:0!important}.is-adding .accept-button{pointer-events:none;opacity:0!important}.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.is-adding:hover,.is-adding:has(.app-input:focus-visible){padding-right:48px!important}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:hover,.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}.is-adding .app-input-icon{right:4px}.is-adding.has-text:hover .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:hover .accept-button{pointer-events:auto;opacity:1!important}.is-adding.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:has(.app-input:focus-visible) .accept-button{pointer-events:auto;opacity:1!important}.is-adding .cancel-button{opacity:1!important;pointer-events:auto}.is-adding .dropdown-icon-container{pointer-events:none}.is-adding .accept-button{right:26px;pointer-events:auto}.dropdown-selected{-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%);left:0;width:calc(100% - 22px);pointer-events:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:break-all;padding:.25rem 6px;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),width .1s ease-in-out;color:var(--color-text);display:flex;gap:4px}.dropdown-selected .dropdown-selected-content{overflow:hidden;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.dropdown-selected .dropdown-selected-hazardous{max-width:calc(100% - 22px)}p.dropdown-selected{-webkit-user-select:none;user-select:none;display:block}.app-input-container:has(.app-input:focus-visible) .dropdown-selected{color:#fff;opacity:.7}.app-input-container:has(.app-input:focus-visible) .dropdown-selected .option-icon{color:#fff!important}.has-icon .positive-icon,.has-icon .warning-icon{display:none}.has-icon .dropdown-selected{left:27px;width:calc(100% - 49px)}.has-icon:hover .dropdown-selected{width:calc(100% - 71px)}.has-icon.app-input-container:has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 71px)}.hazard-icon{height:18px;width:max-content}.has-dispatch .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.dispatch-load-count{color:#dadada;font-weight:700}.dispatch-separator{color:#919191;font-weight:400}.dispatch-status{font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:14px;letter-spacing:0%;text-transform:uppercase;color:#ffffffb2;border-radius:2px;padding:2px 4px;display:flex;justify-content:center;align-items:center;gap:4px}.dispatch-status.status-available{background-color:#50ac2533}.dispatch-status.status-dispatched{background-color:#3b73ed33}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label){width:100%}.has-selected .sub-label{opacity:1}.dispatch-icon,.trailer-icon,.truck-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.truck-icon,.trailer-icon{width:42px}.truck-number{width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trailer-number{width:90px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.driver-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dropdown-subitem-end{margin-left:auto;position:relative;height:26px;width:auto;display:flex;justify-content:right;align-items:center;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;vertical-align:bottom}.end-item-base{position:absolute;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);text-align:right}.dispatch-ltl{font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.unassigned-ltl{margin-left:auto;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.end-item-hover{position:absolute;display:flex;justify-content:right;align-items:center;gap:4px;width:max-content;opacity:0;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.selected-end-item{margin-left:auto;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;display:flex;justify-content:right;align-items:center;gap:4px}.group-item{font-family:Montserrat;font-weight:700!important;font-size:11px!important;line-height:18px;letter-spacing:0%;vertical-align:middle;text-transform:uppercase;background-color:#2f2f2f;color:#aaa!important}.group-item:not(:first-child){border-top:1px solid #424242}.group-item .group-icon{margin-left:auto;transform:rotate(180deg);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.group-item.unfolded{color:#fff!important}.group-item.unfolded .group-icon{transform:rotate(0)}.counter{background-color:#424242;padding:1px 4px;border-radius:60px;font-family:Montserrat;font-weight:600;font-size:11px;min-width:18px;line-height:14px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#ffffffb2;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.password-requirement{padding:6px;background-color:#fffffff2!important;box-shadow:0 0 4px #0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:hidden}.password-requirement p{font-family:Montserrat;font-weight:600;font-size:11px;line-height:14px;letter-spacing:0%;vertical-align:middle;color:#6c6c6c;font-style:italic}.password-requirement .icon,.password-requirement .icon-sm{width:14px!important;height:14px!important}.password-requirement .icon.checkmark,.password-requirement .checkmark.icon-sm{color:#ccc}.password-requirement .icon.cancel,.password-requirement .cancel.icon-sm{color:#e66767}.password-requirement ul{list-style-type:none;margin:6px 0 0;padding:0}.password-requirement ul li{color:#424242;font-size:11px;font-style:italic;font-weight:500;line-height:14px;display:flex;gap:4px}.password-requirement ul li.valid{color:#919191!important}.password-requirement ul li:not(:first-child){margin-top:6px}.has-end-item:not(:has(.app-input:disabled)):hover .dropdown-selected{width:calc(100% - 44px)}.has-end-item:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 44px)}.progress-bar{width:24px;height:8px;border-radius:2px;position:relative;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar:after{content:\"\";position:absolute;top:0;width:var(--progress);height:100%;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar.low{background-color:#df3c3c33}.progress-bar.low:after{background-color:#e66767}.progress-bar.medium{background-color:#f89b2e33}.progress-bar.medium:after{background-color:#fab15c}.progress-bar.high{background-color:#56b4ac33}.progress-bar.high:after{background-color:#56b4ac}.progress-bar.disable{background-color:#91919133}.progress-bar.disable:after{display:none}.app-input-container:has(.app-input:focus-visible) .selected-end-item .progress-bar{background-color:#fff!important}.full-icon{color:#919191}.fuelcard-number{width:216px}.fuelcard-brand{width:132px}.owner-ein{width:118px}.has-multiple-dropdown.has-text{border-top-left-radius:0!important;border-top-right-radius:0!important}.multiple-container{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-top-left-radius:2px;border-top-right-radius:2px;position:relative;transition:background-color .1s ease-in-out;background-color:#e9effd}.multiple-container.hovered{background-color:#bed0f9}.multiple-container.hovered .multiple-selected{background-color:#e9effd}.multiple-container.focused{background-color:#0b49d1}.multiple-container.focused .multiple-selected{background-color:#3b73ed;color:#fff}.multiple-selected{background-color:#bed0f9;color:#2f2f2f;transition:background-color .1s ease-in-out,color .1s ease-in-out;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:2px 4px;-webkit-user-select:none;user-select:none;font-family:Montserrat;font-size:14px;font-weight:400;line-height:18px;width:209px;height:22px;border-radius:1px}.multiple-selected p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.multiple-selected:hover{color:#2f2f2f!important;background-color:#fff!important}.multiple-selected:hover .multiple-remove-button{opacity:1}.multiple-selected .multiple-remove-button{opacity:0;background-color:#6692f1;color:#fff;width:14px;height:14px}.multiple-selected .multiple-remove-button .multiple-remove-icon{width:12px;height:12px}.multiple-label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:0;left:6px;transform:translateY(-14px)}.dropdown-group{border-radius:2px;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;margin-top:4px;max-height:var(--max-height);height:var(--max-height);overflow:hidden}.dropdown-group.no-items{cursor:default;pointer-events:none}.dropdown-group .group-item{outline:none;color:#fff!important;font-weight:400!important;font-size:14px!important;display:flex;transition:font-weight .1s ease-in-out,background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);padding-left:6px;padding-right:6px}.dropdown-group .group-item:hover .counter,.dropdown-group .group-item.unfolded .counter{color:#fff}.dropdown-group .group-item.unfolded{font-weight:700!important}.dropdown-group .group-item .counter{margin-left:auto}.dropdown-group .group-item .group-icon{margin-left:0}.dropdown-group:hover:not(.no-items),.dropdown-group.active{background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover,.dropdown-group.active .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .dropdown-item,.dropdown-group.active .dropdown-item{background-color:#424242}.dropdown-group.active{padding:4px;padding-top:0!important}.dropdown-group.active .group-item{position:relative!important;padding-left:2px!important;padding-right:2px!important}.dropdown-group .dropdown-item:not(.group-item):hover{background-color:#6c6c6c!important}.fuel-stop-transaction-store{display:flex;gap:4px}.fuel-stop-transaction-store .fuel-stop-transaction-store-address{font-size:11px;color:#ccc;margin-left:auto}.fuel-stop-transaction-store .favorite-icon{color:#92b1f5;width:14px;height:14px}.fuel-stop-transaction-nostore{padding-left:2px;padding-right:2px}.hide-dropdown{opacity:0;pointer-events:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown) .dropdown-menu-content{transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown).animate-dropdown .dropdown-menu-content{max-height:var(--max-height);height:var(--max-height)}.closing:not(.hide-dropdown) .dropdown-menu-content{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:244px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:244px;opacity:1}to{max-height:0;opacity:0}}.app-input-container:has(.app-input:focus-visible).has-dropdown .loader.loading,.app-input-container:has(.app-input:focus-visible).has-text .loader.loading{opacity:1!important}.app-input-container:has(.app-input:focus-visible).has-dropdown.has-text .loader{transform:translate(-48px)}.loader{position:absolute;top:4px;right:0;transform:translate(-26px);pointer-events:none;z-index:1000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:opacity .1s ease-in-out,transform .1s ease-in-out;opacity:0}.loader-icon{width:14px;height:14px;animation:spin .8s ease-in-out infinite;transform-origin:center;display:flex;align-items:center;justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-22{height:22px}.size-22 .icon,.size-22 .icon-sm{height:14px!important;width:14px!important}.size-22 .bg-icon{height:14px!important;width:14px!important;padding:2px!important}.size-22 .icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.size-22 .app-input,.size-22 .app-input-label{padding-top:2px;padding-bottom:2px;padding-left:4px}.size-22.has-icon .app-input-label{padding-left:0!important}.size-22 .app-input-icon{height:14px!important;width:14px!important}.size-22.has-text .app-input-label,.size-22:has(.app-input:focus-visible) .app-input-label{transform:translateY(-18px)}.size-22 .loader{top:2px;transform:translate(-22px)!important}.strikethrough .app-input,.strikethrough .dropdown-selected-content{text-decoration:line-through}.max-w-280{max-width:280px}\n"], dependencies: [{ kind: "directive", type: 
                 // Directives
-                PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal", "appMask", "max"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "disableDecimals", "prefix"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[caiInfiniteScroll]", inputs: ["scrollThreshold", "debounceTime"], outputs: ["scrolledToBottom"] }, { kind: "directive", type: IntersectionObserverDirective, selector: "[caiIntersectionObserver]", inputs: ["threshold", "rootMargin"], outputs: ["inView"] }, { kind: "ngmodule", type: 
+                PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal", "appMask", "max"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "disableDecimals", "prefix", "clampToMax"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[caiInfiniteScroll]", inputs: ["scrollThreshold", "debounceTime"], outputs: ["scrolledToBottom"] }, { kind: "directive", type: IntersectionObserverDirective, selector: "[caiIntersectionObserver]", inputs: ["threshold", "rootMargin"], outputs: ["inView"] }, { kind: "ngmodule", type: 
                 // Bootstrap
                 NgbDropdownModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownAnchor, selector: "[ngbDropdownAnchor]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // Components
@@ -4061,7 +4072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         // Components
                         SvgIconComponent,
                         AvatarComponent,
-                    ], template: "<!-- #region Variables -->\n@let valid =\n  ngControl?.valid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let invalid =\n  ngControl?.invalid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let subcontent =\n  config().subcontent ||\n  (config().dropdown === \"subcontent\" &&\n    selectedOption() &&\n    cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\n\n@let name = config().name;\n@let password = config().type === \"password\" || config().type === \"account\";\n\n@let optionLabel = this.config().optionLabel || \"label\";\n@let dropdownType = this.config().dropdown;\n\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\n\n@let tooltipClass =\n  config().inverse\n    ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n    : \"tooltip input-tooltip\";\n\n<!-- #region Multiple selection -->\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\n  <div\n    (pointerdown)=\"focus($event)\"\n    (mouseenter)=\"toggleHovered(true)\"\n    (mouseleave)=\"toggleHovered(false)\"\n    class=\"multiple-container\"\n    [class]=\"{\n      focused: focused(),\n      hovered: hovered(),\n    }\"\n  >\n    <label class=\"multiple-label\">{{ name }}</label>\n\n    @for (option of multipleSelectedOptions(); track $index) {\n      <div class=\"multiple-selected\">\n        <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\n        <button\n          type=\"button\"\n          class=\"\"\n          (pointerdown)=\"handleOption(option, $event)\"\n          [tabIndex]=\"-1\"\n          ngbTooltip=\"Clear\"\n          [placement]=\"'top'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          #closeTooltip=\"ngbTooltip\"\n          [container]=\"'body'\"\n        >\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"multiple-remove-button multiple-remove-icon bg-icon\"\n          ></svg-icon>\n        </button>\n      </div>\n    }\n  </div>\n}\n<!-- #endregion -->\n\n@let hasFloatingError =\n  invalid &&\n  (config().errorBehavior === \"floating\" ||\n    (!!config().inTable && config().placeholderBehavior !== \"static\"));\n\n<div\n  class=\"app-input-container\"\n  [class]=\"\n    {\n      config: config(),\n      hideValidation: hideValidation(),\n      isPasswordVisible: visible(),\n      isInvalid: !!invalid || forceInvalidStyling(),\n      isValid: !!valid && !forceInvalidStyling(),\n      isHovered: hovered(),\n      hasText: hasText(),\n      isAdding: isAdding(),\n      selectedOption: selectedOption(),\n    } | inputClass\n  \"\n  ngbDropdown\n  [autoClose]=\"false\"\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  #containerRef\n  [ngbTooltip]=\"errorTooltip\"\n  [disableTooltip]=\"!hasFloatingError\"\n  [container]=\"'body'\"\n  [placement]=\"['bottom']\"\n  tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n  (pointerdown)=\"focus($event)\"\n  (mouseenter)=\"dropdownType === 'multiple' && toggleHovered(true)\"\n  (mouseleave)=\"dropdownType === 'multiple' && toggleHovered(false)\"\n>\n  <!-- \n  [popperOptions]=\"dropdownPopperOptions\"\n  -->\n  @if (config().icon && !password && !config().withButtons) {\n    <div\n      class=\"icon-container\"\n      (pointerdown)=\"focus($event)\"\n      [class]=\"{\n        'colored-icon': config().iconColor,\n      }\"\n      [style.--icon-color]=\"config().iconColor || ''\"\n    >\n      <svg-icon class=\"icon\" [name]=\"config().icon || ''\"></svg-icon>\n      @if (!config().noSeparator) {\n        <div class=\"separator\"></div>\n      }\n    </div>\n  }\n  @if (password) {\n    <div class=\"icon-container\" (pointerdown)=\"toggleVisibility($event)\">\n      <div\n        class=\"password-icons\"\n        [ngbTooltip]=\"passwordTooltip\"\n        [container]=\"'body'\"\n        [tooltipClass]=\"tooltipClass\"\n        [autoClose]=\"true\"\n        [placement]=\"'top'\"\n        [openDelay]=\"600\"\n      >\n        <svg-icon\n          class=\"icon password-key hover-icon\"\n          name=\"cai-password-key\"\n        ></svg-icon>\n        <svg-icon\n          class=\"icon password-shown hover-icon\"\n          name=\"cai-password-shown\"\n        ></svg-icon>\n        <svg-icon\n          class=\"icon password-hidden hover-icon\"\n          name=\"cai-password-hidden\"\n        ></svg-icon>\n      </div>\n      <div class=\"separator\"></div>\n    </div>\n  }\n\n  <input\n    class=\"app-input\"\n    [tabindex]=\"isDisabled() ? '-1' : '0'\"\n    [type]=\"\n      password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\n    \"\n    [required]=\"config().required\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"dispatchOnBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"config().label\"\n    [attr.name]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    [placeholder]=\"config()?.placeholder || ''\"\n    [autocomplete]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    #inputRef\n    [appPassword]=\"password\"\n    [appMask]=\"config().mask || ''\"\n    [reveal]=\"config().reveal || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [disableDecimals]=\"config().disableDecimals || false\"\n    [prefix]=\"config().prefix || ''\"\n    [max]=\"config().max\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"onFocus($event)\"\n  />\n  @if (\n    !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\n    config().placeholderBehavior !== \"hidden\"\n  ) {\n    <label\n      class=\"app-input-label\"\n      [class.placeholder-color]=\"this.config().placeholderColor\"\n      [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\n      (click)=\"focus($event)\"\n    >\n      <!-- Truck Trailer Driver Dropdown label -->\n      @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\n        <p class=\"truck-item app-input-name\">Truck</p>\n        <p class=\"trailer-item\">Trailer</p>\n        <p>Driver</p>\n        <p class=\"sub-label\">Rate</p>\n      }\n      <!-- Split Load -->\n      @else if (dropdownType === \"split-driver\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Rate</p>\n      } @else if (\n        dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\n      ) {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Location</p>\n      }\n      <!-- Dropdown variants -->\n      @else if (dropdownType === \"broker\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Credit</p>\n      } @else if (dropdownType === \"contact\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Phone</p>\n      } @else if (dropdownType === \"shipper\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Address</p>\n      } @else if (dropdownType === \"owner\") {\n        <p class=\"owner-ein app-input-name\">EIN</p>\n        <p class=\"app-input-name\">Company Name</p>\n      } @else if (dropdownType === \"fuelcard\") {\n        <p class=\"fuelcard-number app-input-name\">Card No.</p>\n        <p class=\"fuelcard-brand app-input-name\">Provider</p>\n        <p class=\"app-input-name\">Nickname</p>\n      }\n      <!-- Default Dropdown label -->\n      @else {\n        <span class=\"app-input-name\">{{ name }}</span>\n      }\n    </label>\n  }\n  @if (config().type === \"number\" && config().withButtons) {\n    <div class=\"number-container\">\n      <div class=\"number-buttons\">\n        <div class=\"separator\"></div>\n        <div\n          class=\"plus-button-container\"\n          ngbTooltip=\"Add\"\n          [tooltipClass]=\"tooltipClass\"\n          [container]=\"'body'\"\n          [autoClose]=\"true\"\n          [openDelay]=\"600\"\n          [placement]=\"'top'\"\n          (pointerdown)=\"increment($event)\"\n        >\n          <svg-icon name=\"cai-plus\" class=\"bg-icon plus-icon\"></svg-icon>\n        </div>\n        <div\n          class=\"minus-button-container\"\n          ngbTooltip=\"Remove\"\n          [placement]=\"'top'\"\n          [container]=\"'body'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          [openDelay]=\"600\"\n          (pointerdown)=\"decrement($event)\"\n        >\n          <svg-icon name=\"cai-minus\" class=\"bg-icon minus-icon\"></svg-icon>\n        </div>\n      </div>\n    </div>\n  }\n  @if (!config().inTable) {\n    @if (!dropdownType) {\n      <svg-icon\n        name=\"cai-checkmark\"\n        class=\"app-input-icon positive-icon\"\n      ></svg-icon>\n      <svg-icon\n        name=\"cai-status-warning\"\n        class=\"app-input-icon warning-icon\"\n      ></svg-icon>\n    }\n  }\n\n  @if (\n    invalid &&\n    config().errorBehavior !== \"hidden\" &&\n    (ngControl?.errors | errorMessage: config().customErrors)[0] &&\n    !(config().inTable && config().placeholderBehavior !== \"static\")\n  ) {\n    <div class=\"app-input-error\">\n      {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\n    </div>\n  }\n\n  <!-- Accept button -->\n  @if ((config().add && isAdding()) || config().isEdit) {\n    <button\n      type=\"button\"\n      class=\"app-input-icon button-icon accept-button\"\n      (pointerdown)=\"addOption()\"\n      [tabIndex]=\"-1\"\n      ngbTooltip=\"Confirm\"\n      [openDelay]=\"600\"\n      [placement]=\"'top'\"\n      [tooltipClass]=\"tooltipClass\"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n    >\n      <svg-icon class=\"bg-icon\" name=\"cai-checkmark\"></svg-icon>\n    </button>\n  }\n\n  <!-- Cancel button -->\n  <button\n    type=\"button\"\n    class=\"app-input-icon button-icon cancel-button\"\n    (pointerdown)=\"reset($event)\"\n    (mouseenter)=\"onClearHover(true)\"\n    (mouseleave)=\"onClearHover(false)\"\n    [tabIndex]=\"-1\"\n    ngbTooltip=\"{{\n      hasText()\n        | clearTooltip\n          : isAdding()\n          : config().isEdit || false\n          : config().placeholderBehavior || 'dynamic'\n          : dropdownType === 'multiple'\n          : config().hasResetButton\n          : canTooltipBeVisible()\n    }}\"\n    [openDelay]=\"600\"\n    [tooltipClass]=\"tooltipClass\"\n    [placement]=\"'top'\"\n    [container]=\"'body'\"\n    [autoClose]=\"true\"\n    #closeTooltip=\"ngbTooltip\"\n  >\n    @let iconName =\n      config().hasResetButton\n        ? \"cai-reset\"\n        : config().removable\n          ? \"cai-delete\"\n          : \"cai-cancel\";\n    <svg-icon class=\"bg-icon\" [name]=\"iconName\"></svg-icon>\n  </button>\n\n  <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\n  <!-- Dropdown menu -->\n\n  @let hasLoader = isLoading() !== undefined;\n\n  @if (hasLoader) {\n    <div class=\"loader\" [class.loading]=\"isLoading()\">\n      <svg-icon name=\"cai-loader\" class=\"loader-icon\"></svg-icon>\n    </div>\n  }\n\n  @if (dropdownType) {\n    @let maxHeight =\n      ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +\n        (config().add ? 1 : 0)) *\n        30 +\n      4;\n\n    @let animateDropdown =\n      dropdownType !== \"toll\" &&\n      dropdownType !== \"fuel-stop-transaction\" &&\n      dropdownType !== \"dispatch\" &&\n      dropdownType !== \"ftl-dispatch\" &&\n      dropdownType !== \"split-driver\" &&\n      dropdownType !== \"split-truck\" &&\n      dropdownType !== \"split-trailer\";\n\n    @let unfilteredHeight =\n      dropdownType === \"contact\" || !animateDropdown\n        ? 244\n        : ((options()?.length || (showNoResults() ? 1 : 0)) +\n            (config().add ? 1 : 0)) *\n            30 +\n          4;\n\n    <div\n      ngbDropdownMenu\n      class=\"dropdown-menu input-dropdown-menu\"\n      [class]=\"{\n        'hide-dropdown':\n          config().dropdownAutocomplete &&\n          !dropdownOptions()?.length &&\n          !(showNoResults() && value()),\n        'animate-dropdown': animateDropdown,\n        'size-22': config().size === 22,\n        'has-stroke': config().hasStroke,\n      }\"\n      [class.closing]=\"closing()\"\n      [style.--unfiltered-height]=\"\n        unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'\n      \"\n      [style.--max-height]=\"maxHeight > 244 ? '244px' : maxHeight + 'px'\"\n      [style.width.px]=\"containerWidth()\"\n      [tabindex]=\"-1\"\n      (pointerdown)=\"onDropdownBackgroundClick($event)\"\n      (pointerup)=\"stopEventPropagation($event)\"\n      (mouseup)=\"stopEventPropagation($event)\"\n      (click)=\"stopEventPropagation($event)\"\n    >\n      <div\n        class=\"dropdown-menu-content\"\n        [tabindex]=\"-1\"\n        caiInfiniteScroll\n        [scrollThreshold]=\"50\"\n        (scrolledToBottom)=\"onDropdownScrolledToBottom()\"\n      >\n        @if (config().add) {\n          <button\n            class=\"dropdown-item add-new\"\n            [class.focused]=\"\n              focusedOptionIndex === -1 ||\n              groupedNavigationState?.groupIndex === -1\n            \"\n            (pointerdown)=\"handleAddingOption($event)\"\n          >\n            <p>ADD NEW</p>\n            <svg-icon name=\"cai-plus\" class=\"dropdown-item-icon\"></svg-icon>\n          </button>\n        }\n        <ng-container *ngTemplateOutlet=\"dropdownMenuRef\"></ng-container>\n      </div>\n    </div>\n\n    @if (!config().dropdownAutocomplete) {\n      <div\n        class=\"dropdown-icon-container\"\n        [class.open]=\"dropdown.isOpen() && !closing()\"\n        (pointerdown)=\"onDropdownIconClick($event)\"\n      >\n        <svg-icon\n          name=\"cai-arrow-secondary-down\"\n          class=\"dropdown-icon icon\"\n        ></svg-icon>\n      </div>\n    }\n    @let specialDropdown =\n      dropdownType === \"dispatch\" ||\n      dropdownType === \"ftl-dispatch\" ||\n      dropdownType === \"broker\" ||\n      dropdownType === \"contact\" ||\n      dropdownType === \"shipper\" ||\n      dropdownType === \"bank\" ||\n      dropdownType === \"dispatcher\" ||\n      dropdownType === \"truck\" ||\n      dropdownType === \"trailer\" ||\n      dropdownType === \"hazardous\" ||\n      dropdownType === \"state\" ||\n      dropdownType === \"owner\" ||\n      dropdownType === \"fuelcard\" ||\n      dropdownType === \"pm\" ||\n      dropdownType === \"color\" ||\n      dropdownType === \"make\" ||\n      dropdownType === \"toll\" ||\n      dropdownType === \"provider\" ||\n      dropdownType === \"split-driver\" ||\n      dropdownType === \"split-truck\" ||\n      dropdownType === \"split-trailer\";\n    <!-- Placeholder -->\n    @if (specialDropdown) {\n      <ng-container *ngTemplateOutlet=\"selectedOptionRef\"></ng-container>\n    } @else if (\n      (config().add || config().search) &&\n      !inputRef.value &&\n      !this.isAdding() &&\n      dropdownType !== \"subcontent\"\n    ) {\n      <div class=\"dropdown-selected\">\n        @if (config().placeholderBehavior === \"static\") {\n          <p class=\"selected-label-hidden\">\n            {{ name + (config().required ? \" *\" : \"\") }}\n          </p>\n          <p class=\"selected-text\">\n            {{\n              selectedOption() &&\n                cast(selectedOption(), \"dropdownOption\")![\n                  optionLabel || \"label\"\n                ]\n            }}\n          </p>\n        } @else {\n          @if (\n            selectedOption() &&\n            cast(selectedOption(), \"dropdownOption\")![\n              optionLabel || \"label\"\n            ] === \"Hazardous\"\n          ) {\n            <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\n            <p class=\"dropdown-selected-content\">\n              {{\n                selectedOption() &&\n                  cast(selectedOption(), \"dropdownOption\")![\n                    optionLabel || \"label\"\n                  ]\n              }}\n            </p>\n          } @else {\n            <p class=\"dropdown-selected-content\">\n              {{\n                selectedOption() &&\n                  cast(selectedOption(), \"dropdownOption\")![\n                    optionLabel || \"label\"\n                  ]\n              }}\n            </p>\n          }\n        }\n      </div>\n    }\n  } @else if (config().isEdit && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ name }}</p>\n    </div>\n  }\n  @if (config().passwordRequirements) {\n    <div\n      class=\"dropdown-menu password-requirement\"\n      ngbDropdownMenu\n      [style.width.px]=\"containerWidth()\"\n      [class.closing]=\"closing()\"\n      (pointerup)=\"stopEventPropagation($event)\"\n      (mouseup)=\"stopEventPropagation($event)\"\n      (click)=\"stopEventPropagation($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"passwordRequirementsRef\"></ng-container>\n    </div>\n  }\n  @if (subcontent) {\n    <p class=\"subcontent\">\n      @if (!(config().alignment === \"right\")) {\n        <span class=\"subcontent-hide\"\n          >{{\n            config().search\n              ? selectedOption() &&\n                cast(selectedOption(), \"dropdownOption\")![\n                  optionLabel || \"label\"\n                ]\n              : inputRef.value\n          }}\n        </span>\n      }\n      {{ subcontent }}\n    </p>\n  }\n</div>\n\n<!-- #region Templates -->\n\n<!-- #region Password requirements -->\n<ng-template #passwordRequirementsRef>\n  @let isMinLengthValid =\n    !this.ngControl?.errors?.[\"minlength\"] && this.value();\n  @let isHasNumberValid =\n    !this.ngControl?.errors?.[\"hasNumber\"] && this.value();\n  @let isHasSymbolValid =\n    !this.ngControl?.errors?.[\"hasSymbol\"] && this.value();\n  @let isHasUppercaseValid =\n    !this.ngControl?.errors?.[\"hasUppercase\"] && this.value();\n\n  <p>Strong Password Requirement</p>\n  <ul>\n    <li [class.valid]=\"isMinLengthValid\">\n      <svg-icon\n        [name]=\"isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isMinLengthValid ? 'checkmark' : 'cancel'\"\n        class=\"icon\"\n      ></svg-icon\n      ><span>Minimum 8 characters</span>\n    </li>\n    <li [class.valid]=\"isHasNumberValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasNumberValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One number</span>\n    </li>\n    <li [class.valid]=\"isHasSymbolValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasSymbolValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One symbol</span>\n    </li>\n    <li [class.valid]=\"isHasUppercaseValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasUppercaseValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One upper-case letter</span>\n    </li>\n  </ul>\n</ng-template>\n<!-- #endregion -->\n@let search = config().search;\n\n<ng-template #dropdownMenuRef>\n  @switch (dropdownType) {\n    @case (\"dispatch\") {\n      <ng-container *ngTemplateOutlet=\"dispatchesRef\"></ng-container>\n    }\n    @case (\"ftl-dispatch\") {\n      <ng-container *ngTemplateOutlet=\"ftlDispatchRef\"></ng-container>\n    }\n    @case (\"broker\") {\n      <ng-container *ngTemplateOutlet=\"brokerRef\"></ng-container>\n    }\n    @case (\"contact\") {\n      <ng-container *ngTemplateOutlet=\"contactRef\"></ng-container>\n    }\n    @case (\"shipper\") {\n      <ng-container *ngTemplateOutlet=\"shipperRef\"></ng-container>\n    }\n    @case (\"bank\") {\n      <ng-container *ngTemplateOutlet=\"bankRef\"></ng-container>\n    }\n    @case (\"dispatcher\") {\n      <ng-container *ngTemplateOutlet=\"dispatcherRef\"></ng-container>\n    }\n    @case (\"trailer\") {\n      <ng-container *ngTemplateOutlet=\"trailerRef\"></ng-container>\n    }\n    @case (\"truck\") {\n      <ng-container *ngTemplateOutlet=\"truckRef\"></ng-container>\n    }\n    @case (\"hazardous\") {\n      <ng-container *ngTemplateOutlet=\"hazardousRef\"></ng-container>\n    }\n    @case (\"state\") {\n      <ng-container *ngTemplateOutlet=\"stateRef\"></ng-container>\n    }\n    @case (\"owner\") {\n      <ng-container *ngTemplateOutlet=\"ownerRef\"></ng-container>\n    }\n    @case (\"fuelcard\") {\n      <ng-container *ngTemplateOutlet=\"fuelcardRef\"></ng-container>\n    }\n    @case (\"pm\") {\n      <ng-container *ngTemplateOutlet=\"pmRef\"></ng-container>\n    }\n    @case (\"multiple\") {\n      <ng-container *ngTemplateOutlet=\"multipleRef\"></ng-container>\n    }\n    @case (\"make\") {\n      <ng-container *ngTemplateOutlet=\"makeRef\"></ng-container>\n    }\n    @case (\"toll\") {\n      <ng-container *ngTemplateOutlet=\"tollRef\"></ng-container>\n    }\n    @case (\"color\") {\n      <ng-container *ngTemplateOutlet=\"colorRef\"></ng-container>\n    }\n    @case (\"fuel-stop-transaction\") {\n      <ng-container *ngTemplateOutlet=\"fuelStopTransactionRef\"></ng-container>\n    }\n    @case (\"provider\") {\n      <ng-container *ngTemplateOutlet=\"providerRef\"></ng-container>\n    }\n    @case (\"split-driver\") {\n      <ng-container *ngTemplateOutlet=\"splitDriverRef\"></ng-container>\n    }\n    @case (\"split-truck\") {\n      <ng-container *ngTemplateOutlet=\"splitTruckRef\"></ng-container>\n    }\n    @case (\"split-trailer\") {\n      <ng-container *ngTemplateOutlet=\"splitTrailerRef\"></ng-container>\n    }\n    @case (\"subcontent\") {\n      <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\n    }\n    @default {\n      <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #selectedOptionRef>\n  @switch (dropdownType) {\n    @case (\"dispatch\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\n    }\n    @case (\"ftl-dispatch\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\n    }\n    @case (\"broker\") {\n      <ng-container *ngTemplateOutlet=\"selectedBrokerRef\"></ng-container>\n    }\n    @case (\"contact\") {\n      <ng-container *ngTemplateOutlet=\"selectedContactRef\"></ng-container>\n    }\n    @case (\"shipper\") {\n      <ng-container *ngTemplateOutlet=\"selectedShipperRef\"></ng-container>\n    }\n    @case (\"bank\") {\n      <ng-container *ngTemplateOutlet=\"selectedBankRef\"></ng-container>\n    }\n    @case (\"dispatcher\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatcherRef\"></ng-container>\n    }\n    @case (\"trailer\") {\n      <ng-container *ngTemplateOutlet=\"selectedTrailerRef\"></ng-container>\n    }\n    @case (\"truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedTruckRef\"></ng-container>\n    }\n    @case (\"hazardous\") {\n      <ng-container *ngTemplateOutlet=\"selectedHazardousRef\"></ng-container>\n    }\n    @case (\"state\") {\n      <ng-container *ngTemplateOutlet=\"selectedStateRef\"></ng-container>\n    }\n    @case (\"owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedOwnerRef\"></ng-container>\n    }\n    @case (\"fuelcard\") {\n      <ng-container *ngTemplateOutlet=\"selectedFuelcardRef\"></ng-container>\n    }\n    @case (\"pm\") {\n      <ng-container *ngTemplateOutlet=\"selectedPmRef\"></ng-container>\n    }\n    @case (\"make\") {\n      <ng-container *ngTemplateOutlet=\"selectedMakeRef\"></ng-container>\n    }\n    @case (\"toll\") {\n      <ng-container *ngTemplateOutlet=\"selectedTollRef\"></ng-container>\n    }\n    @case (\"color\") {\n      <ng-container *ngTemplateOutlet=\"selectedColorRef\"></ng-container>\n    }\n    @case (\"provider\") {\n      <ng-container *ngTemplateOutlet=\"selectedProviderRef\"></ng-container>\n    }\n    @case (\"split-driver\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitDriverRef\"></ng-container>\n    }\n    @case (\"split-truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitTruckRef\"></ng-container>\n    }\n    @case (\"split-trailer\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitTrailerRef\"></ng-container>\n    }\n  }\n</ng-template>\n\n<!-- Standard dropdown -->\n<ng-template #dropdownOptionsRef>\n  @if (dropdownOptions().length) {\n    @for (option of dropdownOptions(); track $index; let index = $index) {\n      @let dropdownOption = cast(option, \"dropdownOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dropdownOption.id }}\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n        (pointerdown)=\"handleOption(dropdownOption, $event)\"\n      >\n        @if (dropdownOption[optionLabel] === \"Hazardous\") {\n          <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\n        }\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (dropdownOption[optionLabel] | highlightSearch: value())\n              : dropdownOption[optionLabel]\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #multipleRef>\n  @if (dropdownOptions().length) {\n    @for (option of dropdownOptions(); track $index; let index = $index) {\n      @let dropdownOption = cast(option, \"dropdownOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dropdownOption.id }}\"\n        (pointerdown)=\"handleOption(dropdownOption, $event)\"\n        [class]=\"{\n          selected: isSelectedOption(dropdownOption),\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (dropdownOption[optionLabel] | highlightSearch: value())\n              : dropdownOption[optionLabel]\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #bankRef>\n  @if (dropdownOptions().length) {\n    @for (bank of dropdownOptions(); track $index; let index = $index) {\n      @let bankOption = cast(bank, \"bank\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ bankOption.id }}\"\n        (pointerdown)=\"handleOption(bankOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'bank')?.id === bankOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        @if (bankOption.logoName) {\n          <svg-icon\n            class=\"full-icon\"\n            [name]=\"bankOption.logoName.slice(0, -4)\"\n          ></svg-icon>\n        } @else {\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (bankOption.name || '' | highlightSearch: value())\n                : bankOption.name\n            \"\n          ></p>\n        }\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #makeRef>\n  @if (dropdownOptions().length) {\n    @for (make of dropdownOptions(); track $index; let index = $index) {\n      @let makeOption = cast(make, \"make\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ makeOption.id }}\"\n        (pointerdown)=\"handleOption(makeOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'make')?.id === makeOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        @if (makeOption.logoName) {\n          <svg-icon\n            class=\"full-icon\"\n            [name]=\"makeOption.logoName.slice(0, -4)\"\n          ></svg-icon>\n        } @else {\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (makeOption.name || '' | highlightSearch: value())\n                : makeOption.name\n            \"\n          ></p>\n        }\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Broker -->\n<ng-template #brokerRef>\n  @if (dropdownOptions().length) {\n    @for (broker of dropdownOptions(); track $index; let index = $index) {\n      @let brokerOption = cast(broker, \"broker\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"broker-{{ brokerOption.id }}\"\n        (pointerdown)=\"\n          !(brokerOption.dnu || brokerOption.ban) &&\n            handleOption(brokerOption, $event)\n        \"\n        [class]=\"{\n          selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,\n          focused: focusedOptionIndex === index,\n          banned: brokerOption.dnu || brokerOption.ban,\n          dnu: brokerOption.dnu,\n        }\"\n      >\n        @if (brokerOption?.dnu || brokerOption?.ban) {\n          <svg-icon name=\"cai-minus\" class=\"round-icon\"></svg-icon>\n        } @else if (brokerOption?.fraudCheck) {\n          <svg-icon\n            name=\"cai-status-warning-lite\"\n            class=\"icon fraud\"\n          ></svg-icon>\n        }\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (brokerOption.businessName || '' | highlightSearch: value())\n              : brokerOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            @if (!brokerOption.creditLimit) {\n              <p>Unlimited</p>\n            } @else {\n              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\n              <div\n                class=\"progress-bar\"\n                [style.--progress]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).activePercentageOfPaid + '%'\n                \"\n                [class]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).status\n                \"\n              ></div>\n            }\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ brokerOption.loadsCount }} |\n              {{ brokerOption.availableCredit || 0 | currency }}\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Contact dropdown -->\n<ng-template #contactRef>\n  @if (dropdownOptions().length) {\n    @for (contact of dropdownOptions(); track $index; let index = $index) {\n      @let contactOption = cast(contact, \"contact\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"contact-{{ contact.id }}\"\n        (pointerdown)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          [innerHTML]=\"\n            search\n              ? (contactOption.contactName || '' | highlightSearch: value())\n              : contactOption.contactName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p>{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ contactOption.phone }}\n            </p>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Owner dropdown -->\n<ng-template #ownerRef>\n  @if (dropdownOptions().length) {\n    @for (owner of dropdownOptions(); track $index; let index = $index) {\n      @let ownerOption = cast(owner, \"owner\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"owner-{{ ownerOption?.id }}\"\n        (pointerdown)=\"handleOption(ownerOption!, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"owner-ein\"\n          [innerHTML]=\"\n            search\n              ? (ownerOption?.ein || '' | highlightSearch: value())\n              : ownerOption?.ein\n          \"\n        ></p>\n        <p\n          [innerHTML]=\"\n            search\n              ? (ownerOption?.name || '' | highlightSearch: value())\n              : ownerOption?.name\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Fuelcard dropdown -->\n<ng-template #fuelcardRef>\n  @if (dropdownOptions().length) {\n    @for (fuelcard of dropdownOptions(); track $index; let index = $index) {\n      @let fuelcardOption = cast(fuelcard, \"fuelCard\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"fuelcard-{{ fuelcardOption?.id }}\"\n        (pointerdown)=\"handleOption(fuelcardOption!, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"fuelcard-number\"\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.number || '' | highlightSearch: value())\n              : fuelcardOption?.number\n          \"\n        ></p>\n        <p\n          class=\"fuelcard-brand\"\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.brand || '' | highlightSearch: value())\n              : fuelcardOption?.brand\n          \"\n        ></p>\n        <p\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.account || '' | highlightSearch: value())\n              : fuelcardOption?.account\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Shipper dropdown -->\n<ng-template #shipperRef>\n  @if (dropdownOptions().length) {\n    @for (shipper of dropdownOptions(); track $index; let index = $index) {\n      @let shipperOption = cast(shipper, \"shipper\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"shipper-{{ shipperOption.id }}\"\n        (pointerdown)=\"handleOption(shipperOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"max-w-280 text-truncate\"\n          [innerHTML]=\"\n            search\n              ? (shipperOption.businessName || '' | highlightSearch: value())\n              : shipperOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p\n              class=\"max-w-280 text-truncate\"\n              [innerHTML]=\"\n                search\n                  ? (shipperOption.address?.address || ''\n                    | highlightSearch: value())\n                  : shipperOption.address?.address\n              \"\n            ></p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ shipperOption.pickupCount }} Pickup |\n              {{ shipperOption.deliveryCount }} Delivery\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatch dropdown -->\n<ng-template #dispatchesRef>\n  @if (dropdownOptions().length) {\n    <button\n      tabindex=\"-1\"\n      class=\"dropdown-item\"\n      (pointerdown)=\"reset()\"\n      [class]=\"{\n        selected: !selectedOption(),\n      }\"\n    >\n      <p>Unassigned</p>\n      <div class=\"unassigned-ltl\">\n        <p>{{ unassignedCount() }}</p>\n        <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\n      </div>\n    </button>\n    @for (\n      dispatchBoard of dropdownOptions();\n      track dispatchBoard.id;\n      let groupIndex = $index\n    ) {\n      <!-- Temporary variant since BE doesn't support boards -->\n      @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\n\n      @let isNoBoardsVariant =\n        dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\n      @if (dispatchBoardOption.count > 0) {\n        @if (!isNoBoardsVariant) {\n          @let isGroupFocused =\n            groupedNavigationState?.groupIndex === groupIndex &&\n            groupedNavigationState?.optionIndex === 0;\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\n            [class]=\"{\n              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p>\n              {{\n                dispatchBoardOption.teamBoard\n                  ? \"Team Board\"\n                  : dispatchBoardOption.dispatcher\n              }}\n            </p>\n            <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n        }\n        @if (\n          dispatchBoardOption.dispatches &&\n          dispatchBoardOption.dispatches.length > 0\n        ) {\n          @for (\n            dispatch of dispatchBoardOption.dispatches;\n            track dispatch.id;\n            let optionIndex = $index\n          ) {\n            @let isOptionFocused =\n              groupedNavigationState?.groupIndex === groupIndex &&\n              groupedNavigationState?.optionIndex === optionIndex + 1;\n            <!-- +1 since optionIndex is 0 for the group item header -->\n            <button\n              tabindex=\"-1\"\n              class=\"dropdown-item\"\n              (pointerdown)=\"handleOption(dispatch, $event)\"\n              [class]=\"{\n                selected:\n                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,\n                focused: isOptionFocused,\n              }\"\n            >\n              <div class=\"dropdown-subitem truck-item\">\n                <svg-icon\n                  class=\"truck-icon truck-trailer-icon-colors\"\n                  [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                  [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                ></svg-icon>\n                <p\n                  class=\"truck-number\"\n                  [innerHTML]=\"\n                    dispatch.truck.truckNumber | highlightSearch: value()\n                  \"\n                ></p>\n              </div>\n              <div class=\"dropdown-subitem trailer-item\">\n                @if (dispatch.trailer) {\n                  <svg-icon\n                    class=\"trailer-icon truck-trailer-icon-colors\"\n                    [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                    [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                  ></svg-icon>\n                  <p\n                    class=\"trailer-number\"\n                    [innerHTML]=\"\n                      dispatch.trailer.trailerNumber | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem\">\n                @if (dispatch.coDriver) {\n                  <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName +\n                        ' & ' +\n                        dispatch.coDriver.firstName | highlightSearch: value()\n                    \"\n                  ></p>\n                } @else {\n                  <cai-avatar\n                    [driver]=\"dispatch.driver\"\n                    [size]=\"18\"\n                    [inverse]=\"true\"\n                    [hover]=\"false\"\n                  ></cai-avatar>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem-end\">\n                <div class=\"end-item-hover\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base dispatch-ltl\">\n                  <p>{{ dispatch.numberOfSingleLtlLoads }}</p>\n                  <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- ftl dispatch dropdown -->\n<ng-template #ftlDispatchRef>\n  @if (dropdownOptions().length) {\n    @for (\n      dispatchBoard of dropdownOptions();\n      track dispatchBoard.id;\n      let groupIndex = $index\n    ) {\n      @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      @let isNoBoardsVariant =\n        dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\n      @if (dispatchBoardOption.count > 0) {\n        @if (!isNoBoardsVariant) {\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\n            [class]=\"{\n              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p>\n              {{\n                dispatchBoardOption.teamBoard\n                  ? \"Team Board\"\n                  : dispatchBoardOption.dispatcher\n              }}\n            </p>\n            <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n        }\n        @if (\n          dispatchBoardOption.dispatches &&\n          dispatchBoardOption.dispatches.length > 0\n        ) {\n          @for (\n            dispatch of dispatchBoardOption.dispatches;\n            track dispatch.id;\n            let optionIndex = $index\n          ) {\n            @let isOptionFocused =\n              groupedNavigationState?.groupIndex === groupIndex &&\n              groupedNavigationState?.optionIndex === optionIndex + 1;\n            <!-- +1 since optionIndex is 0 for the group item header -->\n            <button\n              class=\"dropdown-item\"\n              (pointerdown)=\"handleOption(dispatch, $event)\"\n              [class]=\"{\n                selected:\n                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,\n                focused: isOptionFocused,\n              }\"\n            >\n              <div class=\"dropdown-subitem truck-item\">\n                <svg-icon\n                  class=\"truck-icon truck-trailer-icon-colors\"\n                  [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                  [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                ></svg-icon>\n                <p\n                  class=\"truck-number\"\n                  [innerHTML]=\"\n                    dispatch.truck.truckNumber | highlightSearch: value()\n                  \"\n                ></p>\n              </div>\n              <div class=\"dropdown-subitem trailer-item\">\n                @if (dispatch.trailer) {\n                  <svg-icon\n                    class=\"trailer-icon truck-trailer-icon-colors\"\n                    [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                    [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                  ></svg-icon>\n                  <p\n                    class=\"trailer-number\"\n                    [innerHTML]=\"\n                      dispatch.trailer.trailerNumber | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem\">\n                @if (dispatch.coDriver) {\n                  <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName +\n                        ' & ' +\n                        dispatch.coDriver.firstName | highlightSearch: value()\n                    \"\n                  ></p>\n                } @else {\n                  <cai-avatar\n                    [driver]=\"dispatch.driver\"\n                    [size]=\"18\"\n                    [inverse]=\"true\"\n                    [hover]=\"false\"\n                  ></cai-avatar>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem-end\">\n                <div class=\"end-item-hover\">\n                  <!-- Load Status -->\n                  @if (dispatch.status?.statusString) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"\n                        'status-' +\n                        dispatch.status?.statusString\n                          ?.toLowerCase()\n                          ?.replaceAll(' ', '')\n                          ?.replaceAll('.', '')\n                      \"\n                    >\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block blue\">D</p>\n                        <p class=\"status-block green\">L</p>\n                      }\n                      {{ dispatch.status?.statusString }}\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block green\">P</p>\n                        <p class=\"status-block orange\">D</p>\n                      }\n                      @if (dispatch.status?.statusCheckInNumber) {\n                        <p class=\"status-block\">\n                          {{ dispatch.status?.statusCheckInNumber }}\n                        </p>\n                      }\n                    </div>\n                    <p class=\"dispatch-separator\">|</p>\n                  }\n                  <p class=\"dispatch-load-count\">\n                    <!-- Pending Load Count -->\n                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\n                    0\n                  </p>\n                  <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitDriverRef>\n  @if (dropdownOptions().length) {\n    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\n      @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(driverBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (driverBoard.drivers?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            driverBoard.isTeamBoard ? \"Team Board\" : driverBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ driverBoard.drivers?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (driver of driverBoard.drivers || []; track driver.id) {\n        @let driverOption = cast(driver, \"splitDriver\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(driverOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitDriver')?.id === driverOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem\">\n            <div class=\"dropdown-avatar\">\n              <cai-avatar\n                [driver]=\"driverOption\"\n                [size]=\"18\"\n                [inverse]=\"true\"\n                [hover]=\"false\"\n              ></cai-avatar>\n            </div>\n            <p\n              class=\"driver-name\"\n              [innerHTML]=\"\n                driverOption.firstName + ' ' + driverOption.lastName\n                  | highlightSearch: value()\n              \"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                driverOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ driverOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              <p>{{ driverOption.payTypeValue }}</p>\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTruckRef>\n  @if (dropdownOptions().length) {\n    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\n      @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(truckBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (truckBoard.trucks?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            truckBoard.isTeamBoard ? \"Team Board\" : truckBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ truckBoard.trucks?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (truck of truckBoard.trucks || []; track truck.id) {\n        @let truckOption = cast(truck, \"splitTruck\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(truckOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitTruck')?.id === truckOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem truck-item\">\n            <svg-icon\n              class=\"truck-icon\"\n              [style.--truck-color]=\"truckOption.color?.code || ''\"\n              [name]=\"truckOption.truckType.logoName.slice(0, -4)\"\n            ></svg-icon>\n            <p\n              class=\"truck-number\"\n              [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                truckOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ truckOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                truckOption.location?.city &&\n                truckOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ truckOption.location?.city }},\n                  {{ truckOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\n      @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(trailerBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (trailerBoard.trailers?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            trailerBoard.isTeamBoard\n              ? \"Team Board\"\n              : trailerBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ trailerBoard.trailers?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (trailer of trailerBoard.trailers || []; track trailer.id) {\n        @let trailerOption = cast(trailer, \"splitTrailer\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(trailerOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem trailer-item\">\n            <svg-icon\n              class=\"trailer-icon\"\n              [style.--trailer-color]=\"trailerOption.color?.code || ''\"\n              [name]=\"trailerOption.trailerType.logoName.slice(0, -4)\"\n            ></svg-icon>\n            <p\n              class=\"trailer-number\"\n              [innerHTML]=\"\n                trailerOption.trailerNumber | highlightSearch: value()\n              \"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                trailerOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ trailerOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                trailerOption.location?.city &&\n                trailerOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ trailerOption.location?.city }},\n                  {{ trailerOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #tollRef>\n  @if (dropdownOptions().length) {\n    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\n      @let tollOption = cast(toll, \"tollOption\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item pe-none\"\n        [class]=\"{\n          unfolded: tollOption.tollTransponders?.length || 0 > 0,\n          focused: isGroupFocused,\n        }\"\n      >\n        <p>\n          {{ tollOption.groupName }}\n        </p>\n      </button>\n      @let tollTransponders = tollOption.tollTransponders || [];\n      @for (\n        tollTransponder of tollTransponders;\n        track tollTransponder.id;\n        let optionIndex = $index\n      ) {\n        @let isOptionFocused =\n          groupedNavigationState?.groupIndex === groupIndex &&\n          groupedNavigationState?.optionIndex === optionIndex + 1;\n        <!-- +1 since optionIndex is 0 for the group item header -->\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(tollTransponder, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'tollTransponderOption')?.id ===\n              tollTransponder.id,\n            focused: isOptionFocused,\n          }\"\n        >\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (tollTransponder.name || '' | highlightSearch: value())\n                : tollTransponder.name\n            \"\n          ></p>\n          <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatcher dropdown -->\n\n<ng-template #dispatcherRef>\n  @if (dropdownOptions().length) {\n    @for (dispatcher of dropdownOptions(); track $index; let index = $index) {\n      @let dispatcherOption = cast(dispatcher, \"dispatcher\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dispatcherOption.id }}\"\n        (pointerdown)=\"handleOption(dispatcherOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <cai-avatar\n          [driver]=\"{\n            id: dispatcherOption?.id || 0,\n            firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n            lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n            avatarFile: dispatcherOption?.avatarFile,\n            colorFlag: dispatcherOption?.colorFlag,\n          }\"\n          [rounded]=\"!config().squareAvatar\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p\n          class=\"dropdown-content-hazardous\"\n          [innerHTML]=\"\n            search\n              ? (dispatcherOption.fullName || '' | highlightSearch: value())\n              : dispatcherOption.fullName\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #truckRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let truckOption = cast(truck, \"truckOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ truckOption.id }}\"\n        (pointerdown)=\"handleOption(truckOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'truckOption')?.id === truckOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (truckOption.name || '' | highlightSearch: value())\n              : truckOption.name\n          \"\n        ></p>\n        <svg-icon\n          class=\"truck-trailer-option truck-trailer-icon-colors\"\n          [class]=\"truckOption.logoName.slice(0, -4)\"\n          [name]=\"truckOption.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <svg-icon\n          name=\"cai-checkmark\"\n          class=\"dropdown-item-icon no-margin\"\n        ></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #trailerRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let trailerOption = cast(truck, \"trailerOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ trailerOption.id }}\"\n        (pointerdown)=\"handleOption(trailerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (trailerOption.name || '' | highlightSearch: value())\n              : trailerOption.name\n          \"\n        ></p>\n\n        <svg-icon\n          class=\"truck-trailer-option truck-trailer-icon-colors\"\n          [class]=\"trailerOption.logoName.slice(0, -4)\"\n          [name]=\"trailerOption.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <svg-icon\n          name=\"cai-checkmark\"\n          class=\"dropdown-item-icon no-margin\"\n        ></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #providerRef>\n  @if (dropdownOptions().length) {\n    @for (provider of dropdownOptions(); track $index; let index = $index) {\n      @let providerOption = cast(provider, \"provider\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ providerOption?.id }}\"\n        (pointerdown)=\"handleOption(providerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'provider')?.id === providerOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"full-icon\"\n          [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n        ></svg-icon>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Hazardous dropdown -->\n<ng-template #hazardousRef>\n  @if (dropdownOptions().length) {\n    @for (hazardous of dropdownOptions(); track $index; let index = $index) {\n      @let hazardousOption = cast(hazardous, \"hazardous\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ hazardousOption.id }}\"\n        (pointerdown)=\"handleOption(hazardousOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon [name]=\"hazardousOption.logoName?.slice(0, -4)\"></svg-icon>\n        <p\n          class=\"dropdown-content-hazardous\"\n          [innerHTML]=\"\n            search\n              ? (hazardousOption.description || '' | highlightSearch: value())\n              : hazardousOption.description\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #pmRef>\n  @if (dropdownOptions().length) {\n    @for (pm of dropdownOptions(); track $index; let index = $index) {\n      @let pmOption = cast(pm, \"pmOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ pmOption.id }}\"\n        (pointerdown)=\"handleOption(pmOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon\"\n          [name]=\"pmOption.title | remapPmIcons\"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (pmOption.title || '' | highlightSearch: value())\n              : pmOption.title\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #colorRef>\n  @if (dropdownOptions().length) {\n    @for (color of dropdownOptions(); track $index; let index = $index) {\n      @let colorOption = cast(color, \"colorOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item color-item\"\n        id=\"option-{{ colorOption.id }}\"\n        (pointerdown)=\"handleOption(colorOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'colorOption')?.id === colorOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon cai-color\"\n          [name]=\"'cai-color'\"\n          [style.--color]=\"colorOption?.code\"\n          [style.--hover-color]=\"colorOption?.hoverCode\"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (colorOption.name || '' | highlightSearch: value())\n              : colorOption.name\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #stateRef>\n  @if (dropdownOptions().length) {\n    @for (state of dropdownOptions(); track $index; let index = $index) {\n      @let stateOption = cast(state, \"state\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ stateOption.id }}\"\n        (pointerdown)=\"handleOption(stateOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'state')?.id === stateOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon\"\n          [name]=\"\n            'cai-' +\n            stateOption?.countryType?.name?.toLowerCase() +\n            '-' +\n            stateOption?.stateShortName?.toLowerCase()\n          \"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (stateOption.stateShortName +\n                  ' ' +\n                  (config().fullState\n                    ? ' (' + stateOption?.stateName + ')'\n                    : '') || '' | highlightSearch: value())\n              : stateOption.stateShortName +\n                ' ' +\n                (config().fullState ? ' (' + stateOption?.stateName + ')' : '')\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #fuelStopTransactionRef>\n  @if (dropdownOptions().length) {\n    @for (\n      franchise of dropdownOptions();\n      track franchise.id;\n      let groupIndex = $index\n    ) {\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      @let franchiseOption = cast(franchise, \"franchise\")!;\n      @if (franchiseOption?.count !== null) {\n        <div\n          class=\"dropdown-group\"\n          [class.no-items]=\"!franchiseOption?.count\"\n          [class]=\"{\n            active: openGroup() === franchiseOption.id,\n          }\"\n          [style.--max-height]=\"\n            openGroup() === franchiseOption.id\n              ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'\n              : '26px'\n          \"\n        >\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(franchiseOption.id, $event, franchiseOption)\"\n            [class]=\"{\n              unfolded: openGroup() === franchiseOption.id,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p\n              [innerHTML]=\"\n                franchiseOption?.businessName || '' | highlightSearch: value()\n              \"\n            ></p>\n            <p class=\"counter\">{{ franchiseOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n          @if (openGroup() === franchiseOption.id) {\n            @if (franchiseOption.fuelStopStores?.length || 0 > 0) {\n              @for (\n                fuelStopStore of franchiseOption.fuelStopStores;\n                track fuelStopStore.id\n              ) {\n                @let isOptionFocused =\n                  groupedNavigationState?.groupIndex === groupIndex &&\n                  groupedNavigationState?.optionIndex === $index + 1;\n                <!-- +1 since optionIndex is 0 for the group item header -->\n                <button\n                  tabindex=\"-1\"\n                  class=\"dropdown-item fuel-stop-transaction-store\"\n                  [class]=\"{\n                    focused: isOptionFocused,\n                  }\"\n                  (pointerdown)=\"handleOption(fuelStopStore, $event)\"\n                >\n                  <p\n                    [innerHTML]=\"\n                      fuelStopStore?.store ?? '' | highlightSearch: value()\n                    \"\n                  ></p>\n                  @let city = fuelStopStore?.address?.city ?? \"\";\n                  @let state = fuelStopStore?.address?.stateShortName ?? \"\";\n                  @let zip = fuelStopStore?.address?.zipCode ?? \"\";\n                  <p\n                    class=\"fuel-stop-transaction-store-address\"\n                    [innerHTML]=\"\n                      city + (state || zip ? ', ' : '') + state + ' ' + zip\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n\n                  @if (fuelStopStore?.[\"favourite\"]) {\n                    <svg-icon\n                      name=\"cai-favorite\"\n                      class=\"favorite-icon\"\n                    ></svg-icon>\n                  }\n                </button>\n              }\n              <!-- Infinite scroll trigger - emits event when item comes into view -->\n              <div\n                class=\"dropdown-infinite-scroll-item\"\n                caiIntersectionObserver\n                [threshold]=\"0.1\"\n                (inView)=\"onDropdownScrolledToBottom(true)\"\n              ></div>\n            } @else {\n              <p class=\"dropdown-item no-results\">No results</p>\n            }\n          }\n        </div>\n      } @else {\n        <button\n          tabindex=\"-1\"\n          class=\"dropdown-item\"\n          [class.focused]=\"\n            groupedNavigationState?.groupIndex === groupIndex &&\n            groupedNavigationState?.optionIndex === 0\n          \"\n          (pointerdown)=\"handleOption(franchiseOption, $event)\"\n        >\n          <p\n            class=\"fuel-stop-transaction-nostore\"\n            [innerHTML]=\"\n              franchiseOption?.businessName || '' | highlightSearch: value()\n            \"\n          ></p>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- #endregion -->\n\n<!-- #region Selected options -->\n\n<!-- selected dispatch -->\n<ng-template #selectedDispatchRef>\n  @let dispatchOption = cast(selectedOption(), \"dispatch\");\n  @if (dispatchOption && !inputRef.value && !isAdding()) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem truck-item\">\n        <svg-icon\n          class=\"truck-icon\"\n          [name]=\"dispatchOption!.truck.truckType.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <p class=\"truck-number\">\n          {{ dispatchOption!.truck.truckNumber }}\n        </p>\n      </div>\n      <div class=\"dropdown-subitem trailer-item\">\n        @if (dispatchOption!.trailer) {\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"\n              cast(\n                selectedOption(),\n                'dispatch'\n              )!.trailer?.trailerType?.logoName?.slice(0, -4)\n            \"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ dispatchOption!.trailer?.trailerNumber }}\n          </p>\n        }\n      </div>\n      <div class=\"dropdown-subitem\">\n        @if (dispatchOption!.coDriver) {\n          <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n          <p class=\"driver-name\">\n            {{\n              dispatchOption!.driver.firstName +\n                \" & \" +\n                dispatchOption!.coDriver?.firstName\n            }}\n          </p>\n        } @else {\n          <cai-avatar\n            [driver]=\"dispatchOption!.driver\"\n            [size]=\"18\"\n            [hover]=\"false\"\n          ></cai-avatar>\n          <p class=\"driver-name\">\n            {{\n              dispatchOption!.driver.firstName +\n                \" \" +\n                dispatchOption!.driver.lastName\n            }}\n          </p>\n        }\n      </div>\n      <p class=\"selected-end-item\">\n        {{ dispatchOption!.payType }}\n      </p>\n    </div>\n  } @else {\n    @if (!inputRef.value && this.config().dropdown == \"dispatch\") {\n      <p class=\"dropdown-selected\">Unassigned</p>\n    }\n  }\n</ng-template>\n\n<!-- selected broker -->\n<ng-template #selectedBrokerRef>\n  @let brokerOption = cast(selectedOption(), \"broker\");\n  @if (brokerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if ((brokerOption!.availableCredit || 0) < 0) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\n      <div class=\"selected-end-item\">\n        @if (!brokerOption!.creditLimit) {\n          <p>Unlimited</p>\n        } @else {\n          <p>\n            {{ brokerOption!.availableCredit || 0 | currency }}\n          </p>\n          <div\n            class=\"progress-bar\"\n            [style.--progress]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).activePercentageOfPaid + '%'\n            \"\n            [class]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).status\n            \"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedContactRef>\n  @let contactOption = cast(selectedOption(), \"contact\");\n  @if (contactOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ contactOption?.phone }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedShipperRef>\n  @let shipperOption = cast(selectedOption(), \"shipper\");\n  @if (shipperOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ shipperOption?.address?.address }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedOwnerRef>\n  @let ownerOption = cast(selectedOption(), \"owner\");\n  @if (ownerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\n      <p class=\"\">{{ ownerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedFuelcardRef>\n  @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\n  @if (fuelcardOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"fuelcard-number\">\n        {{ fuelcardOption?.number }}\n      </p>\n      <p class=\"fuelcard-brand\">\n        {{ fuelcardOption?.brand }}\n      </p>\n      <p class=\"\">\n        {{ fuelcardOption?.account }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedBankRef>\n  @let bankOption = cast(selectedOption(), \"bank\");\n  @if (bankOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (bankOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedProviderRef>\n  @let providerOption = cast(selectedOption(), \"provider\");\n  @if (providerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon full-size\"\n        [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n      ></svg-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedMakeRef>\n  @let makeOption = cast(selectedOption(), \"make\");\n  @if (makeOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (makeOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedStateRef>\n  @let stateOption = cast(selectedOption(), \"state\");\n  @if (stateOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"\n          'cai-' +\n          stateOption?.countryType?.name?.toLowerCase() +\n          '-' +\n          stateOption?.stateShortName?.toLowerCase()\n        \"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ stateOption?.stateShortName }}\n        {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedDispatcherRef>\n  @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\n  @if (dispatcherOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: dispatcherOption?.id || 0,\n          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: dispatcherOption?.avatarFile,\n          colorFlag: dispatcherOption?.colorFlag,\n        }\"\n        [rounded]=\"!config().squareAvatar\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckRef>\n  @let truckOption = cast(selectedOption(), \"truckOption\");\n  @if (truckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"truckOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTrailerRef>\n  @let trailerOption = cast(selectedOption(), \"trailerOption\");\n  @if (trailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"trailerOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedHazardousRef>\n  @let hazardousOption = cast(selectedOption(), \"hazardous\");\n  @if (hazardousOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"hazard-icon\"\n        [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\n        {{ hazardousOption?.description }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedPmRef>\n  @let pmOption = cast(selectedOption(), \"pmOption\");\n  @if (pmOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"pmOption?.title | remapPmIcons\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ pmOption?.title }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedColorRef>\n  @let colorOption = cast(selectedOption(), \"colorOption\");\n  @if (colorOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon cai-color\"\n        [name]=\"'cai-color'\"\n        [style.--color]=\"colorOption?.code\"\n        [style.--hover-color]=\"colorOption?.hoverCode\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ colorOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTollRef>\n  @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\n  @if (tollOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">\n        {{ tollOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitDriverRef>\n  @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\n  @if (splitDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem\">\n          <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\n          <p class=\"driver-name\">\n            {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\n          </p>\n        </div>\n      </div>\n\n      <p class=\"selected-end-item\">\n        {{ splitDriverOption.payTypeValue }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTruckRef>\n  @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\n  @if (splitTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem trailer-item\">\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ splitTruckOption!.truckNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTruckOption!.location?.city &&\n          splitTruckOption!.location?.stateShortName\n        ) {\n          {{ splitTruckOption!.location?.city }},\n          {{ splitTruckOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTrailerRef>\n  @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\n  @if (splitTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem truck-item\">\n          <svg-icon\n            class=\"truck-icon\"\n            [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"truck-number\">\n            {{ splitTrailerOption!.trailerNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTrailerOption!.location?.city &&\n          splitTrailerOption!.location?.stateShortName\n        ) {\n          {{ splitTrailerOption!.location?.city }},\n          {{ splitTrailerOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #passwordTooltip>\n  {{ visible() ? \"Hide\" : \"Show\" }}\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (\n    (config().errorBehavior === \"floating\" ||\n      (config().errorBehavior === \"static\" && hasText()) ||\n      config().inTable) &&\n    invalid &&\n    !dropdown.isOpen()\n  ) {\n    {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\n  }\n</ng-template>\n\n<!-- #endregion -->\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon,.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon,.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse.has-text:has(.app-input:disabled) .app-input-label{color:#424242!important}.app-input-container:hover,.app-input-container.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label{margin-right:44px}.app-input-container.has-text .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container.has-text.fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container.has-text .subcontent{opacity:1!important}.app-input-container.has-text.static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text)}.app-input-container.has-text.is-address:hover .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:hover .bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral-hover)}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .subcontent{opacity:1!important;color:#ffffffb2;left:unset!important;right:4px!important}.app-input-container:has(.app-input:focus-visible).has-text .subcontent{right:26px!important}.app-input-container:has(.app-input:focus-visible) .sub-label{margin-right:44px}.app-input-container:has(.app-input:focus-visible).fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container:has(.app-input:focus-visible).static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text-inverse)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover,.app-input-container:has(.app-input:disabled).hovered{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:disabled) .dropdown-icon-container{opacity:0}.app-input-container:has(.app-input:disabled):not(.disabled-removable) .cancel-button{display:none!important}.app-input-container:has(.app-input:required):not(:has(.app-input:disabled)) .app-input-name:after{content:\" *\";color:var(--color-text-negative)}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.subcontent{pointer-events:none;position:absolute;left:6px;color:#919191;-webkit-user-select:none;user-select:none;top:50%;transform:translateY(-50%);transition:right .1s ease-in-out,left .1s ease-in-out,transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);opacity:0;font-family:Montserrat;font-weight:400;font-style:Regular;font-size:14px;line-height:18px;letter-spacing:0%;height:18px;overflow:hidden}.subcontent .subcontent-hide{opacity:0!important}.app-input-label{position:absolute;display:flex;gap:4px;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.app-input-label.placeholder-color{color:var(--placeholder-color)!important}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error:hover:not(.has-right) .app-input,.app-input-container.has-error:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-error:hover,.app-input-container.has-error.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon,.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.has-text .bg-icon,.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible).has-text .button-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible).has-text .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:focus-visible).is-empty,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .app-input-error,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .bg-icon,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .bg-icon{color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error.is-empty:has(.app-input:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:#ffffff4d}.app-input-container.has-error .icon-container .separator,.app-input-container.has-error .dropdown-icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon,.app-input-container.has-error .icon-container .icon-sm,.app-input-container.has-error .dropdown-icon-container .icon,.app-input-container.has-error .dropdown-icon-container .icon-sm{color:var(--color-icon-negative)}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.has-valid:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid:hover:not(.has-right) .app-input,.app-input-container.has-valid:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.in-table),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.in-table),.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.in-table){background-color:var(--color-surface-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .button-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .bg-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid.has-text:not(.has-dropdown) .app-input::selection,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .app-input::selection,.app-input-container.has-valid.has-multiple-dropdown.has-text .app-input::selection{background-color:#ffffff4d}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .separator,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon-sm{color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .password-key{opacity:0;pointer-events:none}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.in-table,.in-table.has-error,.in-table.has-valid.has-text{background-color:transparent}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)) .app-input{color:var(--color-text-negative)}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)):not(.static-placeholder) .app-input-label{color:var(--color-text-negative)}.in-table .dropdown-icon-container{opacity:0}.in-table:hover .dropdown-icon-container{opacity:1}.in-table:has(.app-input:focus-visible) .dropdown-icon-container{opacity:1}.app-input-icon{position:absolute;right:4px;top:4px;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.button-icon{opacity:0;pointer-events:none}.button-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.bg-icon:hover{transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.round-icon{background-color:#919191;color:#2f2f2f;border-radius:50%;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) .app-input{color:#3b73ed}.floating-error .app-input-error{opacity:0!important}.static-error .app-input-error{pointer-events:none!important;transform:translateY(calc(-100% - 4px))!important;transition:margin .1s ease-in-out,opacity .1s ease-in-out}.static-error.has-icon .app-input-error{margin-right:26px!important}.static-error:has(.app-input:not(:focus-visible)) .app-input-error{opacity:1}.static-error.has-text .app-input-error{opacity:0!important}.static-placeholder .app-input-label{position:relative;white-space:nowrap;font-size:11px;font-weight:600}.static-placeholder .dropdown-selected{overflow:hidden;display:flex!important;justify-content:left!important}.static-placeholder .dropdown-selected .selected-label-hidden{width:max-content;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.static-placeholder .dropdown-selected .selected-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}.static-placeholder .app-input{padding-left:0!important}.static-placeholder.has-dropdown .cancel-button{display:none}.static-placeholder.has-dropdown .dropdown-icon-container .dropdown-icon{opacity:0;pointer-events:none}.static-placeholder.has-dropdown:hover .icon-container .icon,.static-placeholder.has-dropdown:hover .icon-container .icon-sm,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:hover .dropdown-icon-container,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:hover .dropdown-icon-container .dropdown-icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}.static-placeholder.has-dropdown .dropdown-icon-container{right:4px!important;left:auto!important}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm{color:var(--color-icon-inverse)!important}.app-input-container.has-icon.colored-icon .icon-container .icon,.app-input-container.has-icon.colored-icon .icon-container .icon-sm,.app-input-container.has-password.colored-icon .icon-container .icon,.app-input-container.has-password.colored-icon .icon-container .icon-sm,.app-input-container.has-dropdown.colored-icon .icon-container .icon,.app-input-container.has-dropdown.colored-icon .icon-container .icon-sm{color:var(--icon-color)}.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm{color:var(--color-icon-disable)!important}.app-input-container.has-icon .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-dropdown .warning-icon{display:none!important}.app-input-container.has-icon .icon,.app-input-container.has-icon .icon-sm,.app-input-container.has-password .icon,.app-input-container.has-password .icon-sm,.app-input-container.has-dropdown .icon,.app-input-container.has-dropdown .icon-sm{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);opacity:1}.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-icon:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}.icon-sm{height:14px;width:14px}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .subcontent,.app-input-container.has-password .subcontent{left:32px}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:27px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon,.has-password .password-icons .icon-sm{position:absolute;opacity:0}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-icons{pointer-events:none}.has-password:has(.app-input:disabled) .password-icons{pointer-events:none}.has-password.has-text .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password.has-text .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible.has-text .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible.has-text .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible.has-text .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important;pointer-events:none}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .button-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-number:has(.app-input:focus-visible) .subcontent{right:52px!important}.has-number:has(.app-input:focus-visible).has-text .subcontent{right:52px!important}.colored-icon .icon,.colored-icon .icon-sm{color:var(--icon-color)!important}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.dropdown-infinite-scroll-item{width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;height:0}.dropdown-menu{min-width:0px!important;width:100%;border:0;margin-top:4px;top:30px;height:var(--unfiltered-height);min-height:var(--unfiltered-height);padding:0!important;overflow:hidden;border-radius:0!important;background:transparent!important}.dropdown-menu.has-stroke .dropdown-menu-content{outline:1px solid #6c6c6c;outline-offset:-1px}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;background-color:#2f2f2f;border-radius:3px;padding:4px 0 4px 4px;max-height:244px;z-index:1100!important;overflow-y:scroll;margin-top:auto!important;scroll-padding:6px 0}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:4px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{width:4px;background:#2f2f2f;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:4px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.option-icon{color:#6c6c6c;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.option-icon.full-size{width:max-content;min-width:100%;height:18px!important;min-height:18px;flex-shrink:0;overflow:hidden}.option-icon.full-size svg{height:18px;width:max-content}.cai-color{color:var(--color)!important;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.color-item:hover .cai-color{color:var(--hover-color)!important}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;scroll-margin:6px 0;outline:1px solid transparent;outline-offset:-1px;display:flex;align-items:center;justify-content:left;gap:4px;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),outline .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item.focused{outline:1px solid #6c6c6c!important}.dropdown-item.focused .end-item-base{opacity:0}.dropdown-item.focused .end-item-hover{opacity:1}.dropdown-item.focused .full-icon{color:#ffffffb2}.dropdown-item.focused .truck-trailer-option{opacity:1}.dropdown-item .icon,.dropdown-item .icon-sm{color:#919191}.dropdown-item .dropdown-content-with-icon{max-width:calc(100% - 22px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content-hazardous{max-width:calc(100% - 40px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content{max-width:70%;overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover:not(.no-hover){background-color:#424242}.dropdown-item:hover:not(.no-hover) .end-item-base{opacity:0}.dropdown-item:hover:not(.no-hover) .end-item-hover{opacity:1}.dropdown-item:hover:not(.no-hover) .full-icon{color:#ffffffb2}.dropdown-item:hover:not(.no-hover) .truck-trailer-option{opacity:1}.dropdown-item.no-hover{cursor:default;pointer-events:none}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item:not(:first-child){margin-top:4px}.dropdown-item.banned{color:#919191;cursor:default}.dropdown-item.banned:hover{color:#919191;background-color:#2f2f2f}.dropdown-item.banned:hover .end-item-base{opacity:0}.dropdown-item.banned:hover .end-item-hover{opacity:1}.dropdown-item.dnu .round-icon{background-color:#e66767}.dropdown-item .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}.dropdown-avatar:hover{z-index:20}.no-results{color:#919191;font-weight:700;cursor:default;pointer-events:none}.add-new{color:#92b1f5!important;font-weight:700;font-size:11px}.add-new .dropdown-item-icon{opacity:1}.add-new:hover{background-color:#3b73ed66!important;color:#fff!important}.selected{font-weight:700}.selected .dropdown-item-icon{opacity:1}.selected .dropdown-item-count{color:#fff;background-color:#3b73ed}.selected .full-icon{color:#fff}.selected .end-item-base,.selected .end-item-hover{font-weight:700;color:#92b1f5}.selected .end-item-base .icon,.selected .end-item-base .icon-sm,.selected .end-item-hover .icon,.selected .end-item-hover .icon-sm{color:#92b1f5}.dropdown-item-icon{opacity:0;color:#92b1f5;width:14px;height:14px;margin-left:auto}.dropdown-item-icon.no-margin{margin-left:0}.dropdown-item-count{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:10px;background-color:#424242;color:#ffffffb2;min-width:18px;line-height:14px;font-weight:600;font-size:11px;text-align:center}.dropdown-icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-icon-container.open .dropdown-icon{transform:rotateX(180deg)}.dropdown-icon{transition:transform .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)!important;transform:rotateX(0);cursor:pointer}.has-dropdown .app-input-icon{right:26px}.has-dropdown:has(.app-input:focus-visible) .subcontent{right:26px!important}.has-dropdown:has(.app-input:focus-visible).has-text .subcontent,.has-dropdown:has(.app-input:focus-visible).has-selected .subcontent{right:48px!important}.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input,.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .cancel-button{z-index:1}.has-right.has-number .plus-button-container{order:2}.has-right.has-number .minus-button-container{order:1}.has-right.static-placeholder .app-input-icon{right:4px!important;left:auto!important;opacity:0!important}.has-right.static-placeholder:has(.app-input:focus-visible) .cancel-button{opacity:0!important;pointer-events:none!important}.has-right.static-placeholder.removable .cancel-button .bg-icon{background-color:transparent!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover .icon-container .icon,.has-right.static-placeholder.removable:hover .icon-container .icon-sm{opacity:0!important}.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button{opacity:1!important}.has-right .app-input{order:1}.has-right.has-subcontent .app-input{flex:1;min-width:0;word-break:none}.has-right .dropdown-selected{margin-left:0!important;text-align:right!important;right:0!important;left:0!important;justify-content:flex-end!important;width:100%!important}.has-right .subcontent{position:relative!important;order:1;display:grid;place-items:center;padding-right:4px;height:unset!important;transform:translateY(0)!important;left:0!important;right:unset!important}.has-right .subcontent .subcontent-hide{display:none!important}.has-right.has-text .subcontent{left:0!important;right:unset!important}.has-right:has(.app-input:focus-visible) .subcontent{left:0!important;right:unset!important}.has-right.has-icon .subcontent,.has-right.has-password .subcontent{padding-right:0!important;padding-left:4px}.has-right.has-icon .dropdown-selected,.has-right.has-password .dropdown-selected{width:calc(100% - 24px)!important}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon.fade-placeholder .app-input-label,.has-right.has-password.fade-placeholder .app-input-label{left:auto!important;right:24px!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-icon .icon-container .icon-sm,.has-right.has-password .icon-container .icon,.has-right.has-password .icon-container .icon-sm{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .dropdown-icon-container{left:4px}.has-right .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right.has-number.app-input-container:has(.app-input:focus-visible) .app-input{padding-left:4px}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}.has-right.fade-placeholder .app-input-label{right:0!important;left:auto!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:after{content:none!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:before{content:\"* \";color:var(--color-text-negative)}.removable:has(.cancel-button:hover).in-table{background-color:transparent!important}.removable:has(.cancel-button:hover).in-table .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):not(.in-table){background-color:var(--color-surface-negative-hover)!important}.removable:has(.cancel-button:hover):not(.in-table) .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.no-clear .cancel-button{display:none!important}.is-adding{padding-right:20px}.is-adding .dropdown-icon{opacity:0!important}.is-adding .accept-button{pointer-events:none;opacity:0!important}.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.is-adding:hover,.is-adding:has(.app-input:focus-visible){padding-right:48px!important}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:hover,.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}.is-adding .app-input-icon{right:4px}.is-adding.has-text:hover .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:hover .accept-button{pointer-events:auto;opacity:1!important}.is-adding.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:has(.app-input:focus-visible) .accept-button{pointer-events:auto;opacity:1!important}.is-adding .cancel-button{opacity:1!important;pointer-events:auto}.is-adding .dropdown-icon-container{pointer-events:none}.is-adding .accept-button{right:26px;pointer-events:auto}.dropdown-selected{-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%);left:0;width:calc(100% - 22px);pointer-events:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:break-all;padding:.25rem 6px;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),width .1s ease-in-out;color:var(--color-text);display:flex;gap:4px}.dropdown-selected .dropdown-selected-content{overflow:hidden;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.dropdown-selected .dropdown-selected-hazardous{max-width:calc(100% - 22px)}p.dropdown-selected{-webkit-user-select:none;user-select:none;display:block}.app-input-container:has(.app-input:focus-visible) .dropdown-selected{color:#fff;opacity:.7}.app-input-container:has(.app-input:focus-visible) .dropdown-selected .option-icon{color:#fff!important}.has-icon .positive-icon,.has-icon .warning-icon{display:none}.has-icon .dropdown-selected{left:27px;width:calc(100% - 49px)}.has-icon:hover .dropdown-selected{width:calc(100% - 71px)}.has-icon.app-input-container:has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 71px)}.hazard-icon{height:18px;width:max-content}.has-dispatch .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.dispatch-load-count{color:#dadada;font-weight:700}.dispatch-separator{color:#919191;font-weight:400}.dispatch-status{font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:14px;letter-spacing:0%;text-transform:uppercase;color:#ffffffb2;border-radius:2px;padding:2px 4px;display:flex;justify-content:center;align-items:center;gap:4px}.dispatch-status.status-available{background-color:#50ac2533}.dispatch-status.status-dispatched{background-color:#3b73ed33}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label){width:100%}.has-selected .sub-label{opacity:1}.dispatch-icon,.trailer-icon,.truck-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.truck-icon,.trailer-icon{width:42px}.truck-number{width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trailer-number{width:90px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.driver-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dropdown-subitem-end{margin-left:auto;position:relative;height:26px;width:auto;display:flex;justify-content:right;align-items:center;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;vertical-align:bottom}.end-item-base{position:absolute;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);text-align:right}.dispatch-ltl{font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.unassigned-ltl{margin-left:auto;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.end-item-hover{position:absolute;display:flex;justify-content:right;align-items:center;gap:4px;width:max-content;opacity:0;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.selected-end-item{margin-left:auto;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;display:flex;justify-content:right;align-items:center;gap:4px}.group-item{font-family:Montserrat;font-weight:700!important;font-size:11px!important;line-height:18px;letter-spacing:0%;vertical-align:middle;text-transform:uppercase;background-color:#2f2f2f;color:#aaa!important}.group-item:not(:first-child){border-top:1px solid #424242}.group-item .group-icon{margin-left:auto;transform:rotate(180deg);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.group-item.unfolded{color:#fff!important}.group-item.unfolded .group-icon{transform:rotate(0)}.counter{background-color:#424242;padding:1px 4px;border-radius:60px;font-family:Montserrat;font-weight:600;font-size:11px;min-width:18px;line-height:14px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#ffffffb2;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.password-requirement{padding:6px;background-color:#fffffff2!important;box-shadow:0 0 4px #0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:hidden}.password-requirement p{font-family:Montserrat;font-weight:600;font-size:11px;line-height:14px;letter-spacing:0%;vertical-align:middle;color:#6c6c6c;font-style:italic}.password-requirement .icon,.password-requirement .icon-sm{width:14px!important;height:14px!important}.password-requirement .icon.checkmark,.password-requirement .checkmark.icon-sm{color:#ccc}.password-requirement .icon.cancel,.password-requirement .cancel.icon-sm{color:#e66767}.password-requirement ul{list-style-type:none;margin:6px 0 0;padding:0}.password-requirement ul li{color:#424242;font-size:11px;font-style:italic;font-weight:500;line-height:14px;display:flex;gap:4px}.password-requirement ul li.valid{color:#919191!important}.password-requirement ul li:not(:first-child){margin-top:6px}.has-end-item:not(:has(.app-input:disabled)):hover .dropdown-selected{width:calc(100% - 44px)}.has-end-item:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 44px)}.progress-bar{width:24px;height:8px;border-radius:2px;position:relative;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar:after{content:\"\";position:absolute;top:0;width:var(--progress);height:100%;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar.low{background-color:#df3c3c33}.progress-bar.low:after{background-color:#e66767}.progress-bar.medium{background-color:#f89b2e33}.progress-bar.medium:after{background-color:#fab15c}.progress-bar.high{background-color:#56b4ac33}.progress-bar.high:after{background-color:#56b4ac}.progress-bar.disable{background-color:#91919133}.progress-bar.disable:after{display:none}.app-input-container:has(.app-input:focus-visible) .selected-end-item .progress-bar{background-color:#fff!important}.full-icon{color:#919191}.fuelcard-number{width:216px}.fuelcard-brand{width:132px}.owner-ein{width:118px}.has-multiple-dropdown.has-text{border-top-left-radius:0!important;border-top-right-radius:0!important}.multiple-container{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-top-left-radius:2px;border-top-right-radius:2px;position:relative;transition:background-color .1s ease-in-out;background-color:#e9effd}.multiple-container.hovered{background-color:#bed0f9}.multiple-container.hovered .multiple-selected{background-color:#e9effd}.multiple-container.focused{background-color:#0b49d1}.multiple-container.focused .multiple-selected{background-color:#3b73ed;color:#fff}.multiple-selected{background-color:#bed0f9;color:#2f2f2f;transition:background-color .1s ease-in-out,color .1s ease-in-out;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:2px 4px;-webkit-user-select:none;user-select:none;font-family:Montserrat;font-size:14px;font-weight:400;line-height:18px;width:209px;height:22px;border-radius:1px}.multiple-selected p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.multiple-selected:hover{color:#2f2f2f!important;background-color:#fff!important}.multiple-selected:hover .multiple-remove-button{opacity:1}.multiple-selected .multiple-remove-button{opacity:0;background-color:#6692f1;color:#fff;width:14px;height:14px}.multiple-selected .multiple-remove-button .multiple-remove-icon{width:12px;height:12px}.multiple-label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:0;left:6px;transform:translateY(-14px)}.dropdown-group{border-radius:2px;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;margin-top:4px;max-height:var(--max-height);height:var(--max-height);overflow:hidden}.dropdown-group.no-items{cursor:default;pointer-events:none}.dropdown-group .group-item{outline:none;color:#fff!important;font-weight:400!important;font-size:14px!important;display:flex;transition:font-weight .1s ease-in-out,background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);padding-left:6px;padding-right:6px}.dropdown-group .group-item:hover .counter,.dropdown-group .group-item.unfolded .counter{color:#fff}.dropdown-group .group-item.unfolded{font-weight:700!important}.dropdown-group .group-item .counter{margin-left:auto}.dropdown-group .group-item .group-icon{margin-left:0}.dropdown-group:hover:not(.no-items),.dropdown-group.active{background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover,.dropdown-group.active .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .dropdown-item,.dropdown-group.active .dropdown-item{background-color:#424242}.dropdown-group.active{padding:4px;padding-top:0!important}.dropdown-group.active .group-item{position:relative!important;padding-left:2px!important;padding-right:2px!important}.dropdown-group .dropdown-item:not(.group-item):hover{background-color:#6c6c6c!important}.fuel-stop-transaction-store{display:flex;gap:4px}.fuel-stop-transaction-store .fuel-stop-transaction-store-address{font-size:11px;color:#ccc;margin-left:auto}.fuel-stop-transaction-store .favorite-icon{color:#92b1f5;width:14px;height:14px}.fuel-stop-transaction-nostore{padding-left:2px;padding-right:2px}.hide-dropdown{opacity:0;pointer-events:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown) .dropdown-menu-content{transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown).animate-dropdown .dropdown-menu-content{max-height:var(--max-height);height:var(--max-height)}.closing:not(.hide-dropdown) .dropdown-menu-content{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:244px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:244px;opacity:1}to{max-height:0;opacity:0}}.app-input-container:has(.app-input:focus-visible).has-dropdown .loader.loading,.app-input-container:has(.app-input:focus-visible).has-text .loader.loading{opacity:1!important}.app-input-container:has(.app-input:focus-visible).has-dropdown.has-text .loader{transform:translate(-48px)}.loader{position:absolute;top:4px;right:0;transform:translate(-26px);pointer-events:none;z-index:1000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:opacity .1s ease-in-out,transform .1s ease-in-out;opacity:0}.loader-icon{width:14px;height:14px;animation:spin .8s ease-in-out infinite;transform-origin:center;display:flex;align-items:center;justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-22{height:22px}.size-22 .icon,.size-22 .icon-sm{height:14px!important;width:14px!important}.size-22 .bg-icon{height:14px!important;width:14px!important;padding:2px!important}.size-22 .icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.size-22 .app-input,.size-22 .app-input-label{padding-top:2px;padding-bottom:2px;padding-left:4px}.size-22.has-icon .app-input-label{padding-left:0!important}.size-22 .app-input-icon{height:14px!important;width:14px!important}.size-22.has-text .app-input-label,.size-22:has(.app-input:focus-visible) .app-input-label{transform:translateY(-18px)}.size-22 .loader{top:2px;transform:translate(-22px)!important}.strikethrough .app-input,.strikethrough .dropdown-selected-content{text-decoration:line-through}.max-w-280{max-width:280px}\n"] }]
+                    ], template: "<!-- #region Variables -->\n@let valid =\n  ngControl?.valid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let invalid =\n  ngControl?.invalid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let subcontent =\n  config().subcontent ||\n  (config().dropdown === \"subcontent\" &&\n    selectedOption() &&\n    cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\n\n@let name = config().name;\n@let password = config().type === \"password\" || config().type === \"account\";\n\n@let optionLabel = this.config().optionLabel || \"label\";\n@let dropdownType = this.config().dropdown;\n\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\n\n@let tooltipClass =\n  config().inverse\n    ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n    : \"tooltip input-tooltip\";\n\n<!-- #region Multiple selection -->\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\n  <div\n    (pointerdown)=\"focus($event)\"\n    (mouseenter)=\"toggleHovered(true)\"\n    (mouseleave)=\"toggleHovered(false)\"\n    class=\"multiple-container\"\n    [class]=\"{\n      focused: focused(),\n      hovered: hovered(),\n    }\"\n  >\n    <label class=\"multiple-label\">{{ name }}</label>\n\n    @for (option of multipleSelectedOptions(); track $index) {\n      <div class=\"multiple-selected\">\n        <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\n        <button\n          type=\"button\"\n          class=\"\"\n          (pointerdown)=\"handleOption(option, $event)\"\n          [tabIndex]=\"-1\"\n          ngbTooltip=\"Clear\"\n          [placement]=\"'top'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          #closeTooltip=\"ngbTooltip\"\n          [container]=\"'body'\"\n        >\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"multiple-remove-button multiple-remove-icon bg-icon\"\n          ></svg-icon>\n        </button>\n      </div>\n    }\n  </div>\n}\n<!-- #endregion -->\n\n@let hasFloatingError =\n  invalid &&\n  (config().errorBehavior === \"floating\" ||\n    (!!config().inTable && config().placeholderBehavior !== \"static\"));\n\n<div\n  class=\"app-input-container\"\n  [class]=\"\n    {\n      config: config(),\n      hideValidation: hideValidation(),\n      isPasswordVisible: visible(),\n      isInvalid: !!invalid || forceInvalidStyling(),\n      isValid: !!valid && !forceInvalidStyling(),\n      isHovered: hovered(),\n      hasText: hasText(),\n      isAdding: isAdding(),\n      selectedOption: selectedOption(),\n    } | inputClass\n  \"\n  ngbDropdown\n  [autoClose]=\"false\"\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  #containerRef\n  [ngbTooltip]=\"errorTooltip\"\n  [disableTooltip]=\"!hasFloatingError\"\n  [container]=\"'body'\"\n  [placement]=\"['bottom']\"\n  tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n  (pointerdown)=\"focus($event)\"\n  (mouseenter)=\"dropdownType === 'multiple' && toggleHovered(true)\"\n  (mouseleave)=\"dropdownType === 'multiple' && toggleHovered(false)\"\n>\n  <!-- \n  [popperOptions]=\"dropdownPopperOptions\"\n  -->\n  @if (config().icon && !password && !config().withButtons) {\n    <div\n      class=\"icon-container\"\n      (pointerdown)=\"focus($event)\"\n      [class]=\"{\n        'colored-icon': config().iconColor,\n      }\"\n      [style.--icon-color]=\"config().iconColor || ''\"\n    >\n      <svg-icon class=\"icon\" [name]=\"config().icon || ''\"></svg-icon>\n      @if (!config().noSeparator) {\n        <div class=\"separator\"></div>\n      }\n    </div>\n  }\n  @if (password) {\n    <div class=\"icon-container\" (pointerdown)=\"toggleVisibility($event)\">\n      <div\n        class=\"password-icons\"\n        [ngbTooltip]=\"passwordTooltip\"\n        [container]=\"'body'\"\n        [tooltipClass]=\"tooltipClass\"\n        [autoClose]=\"true\"\n        [placement]=\"'top'\"\n        [openDelay]=\"600\"\n      >\n        <svg-icon\n          class=\"icon password-key hover-icon\"\n          name=\"cai-password-key\"\n        ></svg-icon>\n        <svg-icon\n          class=\"icon password-shown hover-icon\"\n          name=\"cai-password-shown\"\n        ></svg-icon>\n        <svg-icon\n          class=\"icon password-hidden hover-icon\"\n          name=\"cai-password-hidden\"\n        ></svg-icon>\n      </div>\n      <div class=\"separator\"></div>\n    </div>\n  }\n\n  <input\n    class=\"app-input\"\n    [tabindex]=\"isDisabled() ? '-1' : '0'\"\n    [type]=\"\n      password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\n    \"\n    [required]=\"config().required\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"dispatchOnBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"config().label\"\n    [attr.name]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    [placeholder]=\"config()?.placeholder || ''\"\n    [autocomplete]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    #inputRef\n    [appPassword]=\"password\"\n    [appMask]=\"config().mask || ''\"\n    [reveal]=\"config().reveal || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [disableDecimals]=\"config().disableDecimals || false\"\n    [prefix]=\"config().prefix || ''\"\n    [max]=\"config().max\"\n    [clampToMax]=\"config().clampToMax || false\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"onFocus($event)\"\n  />\n  @if (\n    !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\n    config().placeholderBehavior !== \"hidden\"\n  ) {\n    <label\n      class=\"app-input-label\"\n      [class.placeholder-color]=\"this.config().placeholderColor\"\n      [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\n      (click)=\"focus($event)\"\n    >\n      <!-- Truck Trailer Driver Dropdown label -->\n      @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\n        <p class=\"truck-item app-input-name\">Truck</p>\n        <p class=\"trailer-item\">Trailer</p>\n        <p>Driver</p>\n        <p class=\"sub-label\">Rate</p>\n      }\n      <!-- Split Load -->\n      @else if (dropdownType === \"split-driver\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Rate</p>\n      } @else if (\n        dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\n      ) {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Location</p>\n      }\n      <!-- Dropdown variants -->\n      @else if (dropdownType === \"broker\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Credit</p>\n      } @else if (dropdownType === \"contact\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Phone</p>\n      } @else if (dropdownType === \"shipper\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Address</p>\n      } @else if (dropdownType === \"owner\") {\n        <p class=\"owner-ein app-input-name\">EIN</p>\n        <p class=\"app-input-name\">Company Name</p>\n      } @else if (dropdownType === \"fuelcard\") {\n        <p class=\"fuelcard-number app-input-name\">Card No.</p>\n        <p class=\"fuelcard-brand app-input-name\">Provider</p>\n        <p class=\"app-input-name\">Nickname</p>\n      }\n      <!-- Default Dropdown label -->\n      @else {\n        <span class=\"app-input-name\">{{ name }}</span>\n      }\n    </label>\n  }\n  @if (config().type === \"number\" && config().withButtons) {\n    <div class=\"number-container\">\n      <div class=\"number-buttons\">\n        <div class=\"separator\"></div>\n        <div\n          class=\"plus-button-container\"\n          ngbTooltip=\"Add\"\n          [tooltipClass]=\"tooltipClass\"\n          [container]=\"'body'\"\n          [autoClose]=\"true\"\n          [openDelay]=\"600\"\n          [placement]=\"'top'\"\n          (pointerdown)=\"increment($event)\"\n        >\n          <svg-icon name=\"cai-plus\" class=\"bg-icon plus-icon\"></svg-icon>\n        </div>\n        <div\n          class=\"minus-button-container\"\n          ngbTooltip=\"Remove\"\n          [placement]=\"'top'\"\n          [container]=\"'body'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          [openDelay]=\"600\"\n          (pointerdown)=\"decrement($event)\"\n        >\n          <svg-icon name=\"cai-minus\" class=\"bg-icon minus-icon\"></svg-icon>\n        </div>\n      </div>\n    </div>\n  }\n  @if (!config().inTable) {\n    @if (!dropdownType) {\n      <svg-icon\n        name=\"cai-checkmark\"\n        class=\"app-input-icon positive-icon\"\n      ></svg-icon>\n      <svg-icon\n        name=\"cai-status-warning\"\n        class=\"app-input-icon warning-icon\"\n      ></svg-icon>\n    }\n  }\n\n  @if (\n    invalid &&\n    config().errorBehavior !== \"hidden\" &&\n    (ngControl?.errors | errorMessage: config().customErrors)[0] &&\n    !(config().inTable && config().placeholderBehavior !== \"static\")\n  ) {\n    <div class=\"app-input-error\">\n      {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\n    </div>\n  }\n\n  <!-- Accept button -->\n  @if ((config().add && isAdding()) || config().isEdit) {\n    <button\n      type=\"button\"\n      class=\"app-input-icon button-icon accept-button\"\n      (pointerdown)=\"addOption()\"\n      [tabIndex]=\"-1\"\n      ngbTooltip=\"Confirm\"\n      [openDelay]=\"600\"\n      [placement]=\"'top'\"\n      [tooltipClass]=\"tooltipClass\"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n    >\n      <svg-icon class=\"bg-icon\" name=\"cai-checkmark\"></svg-icon>\n    </button>\n  }\n\n  <!-- Cancel button -->\n  <button\n    type=\"button\"\n    class=\"app-input-icon button-icon cancel-button\"\n    (pointerdown)=\"reset($event)\"\n    (mouseenter)=\"onClearHover(true)\"\n    (mouseleave)=\"onClearHover(false)\"\n    [tabIndex]=\"-1\"\n    ngbTooltip=\"{{\n      hasText()\n        | clearTooltip\n          : isAdding()\n          : config().isEdit || false\n          : config().placeholderBehavior || 'dynamic'\n          : dropdownType === 'multiple'\n          : config().hasResetButton\n          : canTooltipBeVisible()\n    }}\"\n    [openDelay]=\"600\"\n    [tooltipClass]=\"tooltipClass\"\n    [placement]=\"'top'\"\n    [container]=\"'body'\"\n    [autoClose]=\"true\"\n    #closeTooltip=\"ngbTooltip\"\n  >\n    @let iconName =\n      config().hasResetButton\n        ? \"cai-reset\"\n        : config().removable\n          ? \"cai-delete\"\n          : \"cai-cancel\";\n    <svg-icon class=\"bg-icon\" [name]=\"iconName\"></svg-icon>\n  </button>\n\n  <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\n  <!-- Dropdown menu -->\n\n  @let hasLoader = isLoading() !== undefined;\n\n  @if (hasLoader) {\n    <div class=\"loader\" [class.loading]=\"isLoading()\">\n      <svg-icon name=\"cai-loader\" class=\"loader-icon\"></svg-icon>\n    </div>\n  }\n\n  @if (dropdownType) {\n    @let maxHeight =\n      ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +\n        (config().add ? 1 : 0)) *\n        30 +\n      4;\n\n    @let animateDropdown =\n      dropdownType !== \"toll\" &&\n      dropdownType !== \"fuel-stop-transaction\" &&\n      dropdownType !== \"dispatch\" &&\n      dropdownType !== \"ftl-dispatch\" &&\n      dropdownType !== \"split-driver\" &&\n      dropdownType !== \"split-truck\" &&\n      dropdownType !== \"split-trailer\";\n\n    @let unfilteredHeight =\n      dropdownType === \"contact\" || !animateDropdown\n        ? 244\n        : ((options()?.length || (showNoResults() ? 1 : 0)) +\n            (config().add ? 1 : 0)) *\n            30 +\n          4;\n\n    <div\n      ngbDropdownMenu\n      class=\"dropdown-menu input-dropdown-menu\"\n      [class]=\"{\n        'hide-dropdown':\n          config().dropdownAutocomplete &&\n          !dropdownOptions()?.length &&\n          !(showNoResults() && value()),\n        'animate-dropdown': animateDropdown,\n        'size-22': config().size === 22,\n        'has-stroke': config().hasStroke,\n      }\"\n      [class.closing]=\"closing()\"\n      [style.--unfiltered-height]=\"\n        unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'\n      \"\n      [style.--max-height]=\"maxHeight > 244 ? '244px' : maxHeight + 'px'\"\n      [style.width.px]=\"containerWidth()\"\n      [tabindex]=\"-1\"\n      (pointerdown)=\"onDropdownBackgroundClick($event)\"\n      (pointerup)=\"stopEventPropagation($event)\"\n      (mouseup)=\"stopEventPropagation($event)\"\n      (click)=\"stopEventPropagation($event)\"\n    >\n      <div\n        class=\"dropdown-menu-content\"\n        [tabindex]=\"-1\"\n        caiInfiniteScroll\n        [scrollThreshold]=\"50\"\n        (scrolledToBottom)=\"onDropdownScrolledToBottom()\"\n      >\n        @if (config().add) {\n          <button\n            class=\"dropdown-item add-new\"\n            [class.focused]=\"\n              focusedOptionIndex === -1 ||\n              groupedNavigationState?.groupIndex === -1\n            \"\n            (pointerdown)=\"handleAddingOption($event)\"\n          >\n            <p>ADD NEW</p>\n            <svg-icon name=\"cai-plus\" class=\"dropdown-item-icon\"></svg-icon>\n          </button>\n        }\n        <ng-container *ngTemplateOutlet=\"dropdownMenuRef\"></ng-container>\n      </div>\n    </div>\n\n    @if (!config().dropdownAutocomplete) {\n      <div\n        class=\"dropdown-icon-container\"\n        [class.open]=\"dropdown.isOpen() && !closing()\"\n        (pointerdown)=\"onDropdownIconClick($event)\"\n      >\n        <svg-icon\n          name=\"cai-arrow-secondary-down\"\n          class=\"dropdown-icon icon\"\n        ></svg-icon>\n      </div>\n    }\n    @let specialDropdown =\n      dropdownType === \"dispatch\" ||\n      dropdownType === \"ftl-dispatch\" ||\n      dropdownType === \"broker\" ||\n      dropdownType === \"contact\" ||\n      dropdownType === \"shipper\" ||\n      dropdownType === \"bank\" ||\n      dropdownType === \"dispatcher\" ||\n      dropdownType === \"truck\" ||\n      dropdownType === \"trailer\" ||\n      dropdownType === \"hazardous\" ||\n      dropdownType === \"state\" ||\n      dropdownType === \"owner\" ||\n      dropdownType === \"fuelcard\" ||\n      dropdownType === \"pm\" ||\n      dropdownType === \"color\" ||\n      dropdownType === \"make\" ||\n      dropdownType === \"toll\" ||\n      dropdownType === \"provider\" ||\n      dropdownType === \"split-driver\" ||\n      dropdownType === \"split-truck\" ||\n      dropdownType === \"split-trailer\";\n    <!-- Placeholder -->\n    @if (specialDropdown) {\n      <ng-container *ngTemplateOutlet=\"selectedOptionRef\"></ng-container>\n    } @else if (\n      (config().add || config().search) &&\n      !inputRef.value &&\n      !this.isAdding() &&\n      dropdownType !== \"subcontent\"\n    ) {\n      <div class=\"dropdown-selected\">\n        @if (config().placeholderBehavior === \"static\") {\n          <p class=\"selected-label-hidden\">\n            {{ name + (config().required ? \" *\" : \"\") }}\n          </p>\n          <p class=\"selected-text\">\n            {{\n              selectedOption() &&\n                cast(selectedOption(), \"dropdownOption\")![\n                  optionLabel || \"label\"\n                ]\n            }}\n          </p>\n        } @else {\n          @if (\n            selectedOption() &&\n            cast(selectedOption(), \"dropdownOption\")![\n              optionLabel || \"label\"\n            ] === \"Hazardous\"\n          ) {\n            <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\n            <p class=\"dropdown-selected-content\">\n              {{\n                selectedOption() &&\n                  cast(selectedOption(), \"dropdownOption\")![\n                    optionLabel || \"label\"\n                  ]\n              }}\n            </p>\n          } @else {\n            <p class=\"dropdown-selected-content\">\n              {{\n                selectedOption() &&\n                  cast(selectedOption(), \"dropdownOption\")![\n                    optionLabel || \"label\"\n                  ]\n              }}\n            </p>\n          }\n        }\n      </div>\n    }\n  } @else if (config().isEdit && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ name }}</p>\n    </div>\n  }\n  @if (config().passwordRequirements) {\n    <div\n      class=\"dropdown-menu password-requirement\"\n      ngbDropdownMenu\n      [style.width.px]=\"containerWidth()\"\n      [class.closing]=\"closing()\"\n      (pointerup)=\"stopEventPropagation($event)\"\n      (mouseup)=\"stopEventPropagation($event)\"\n      (click)=\"stopEventPropagation($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"passwordRequirementsRef\"></ng-container>\n    </div>\n  }\n  @if (subcontent) {\n    <p class=\"subcontent\">\n      @if (!(config().alignment === \"right\")) {\n        <span class=\"subcontent-hide\"\n          >{{\n            config().search\n              ? selectedOption() &&\n                cast(selectedOption(), \"dropdownOption\")![\n                  optionLabel || \"label\"\n                ]\n              : inputRef.value\n          }}\n        </span>\n      }\n      {{ subcontent }}\n    </p>\n  }\n</div>\n\n<!-- #region Templates -->\n\n<!-- #region Password requirements -->\n<ng-template #passwordRequirementsRef>\n  @let isMinLengthValid =\n    !this.ngControl?.errors?.[\"minlength\"] && this.value();\n  @let isHasNumberValid =\n    !this.ngControl?.errors?.[\"hasNumber\"] && this.value();\n  @let isHasSymbolValid =\n    !this.ngControl?.errors?.[\"hasSymbol\"] && this.value();\n  @let isHasUppercaseValid =\n    !this.ngControl?.errors?.[\"hasUppercase\"] && this.value();\n\n  <p>Strong Password Requirement</p>\n  <ul>\n    <li [class.valid]=\"isMinLengthValid\">\n      <svg-icon\n        [name]=\"isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isMinLengthValid ? 'checkmark' : 'cancel'\"\n        class=\"icon\"\n      ></svg-icon\n      ><span>Minimum 8 characters</span>\n    </li>\n    <li [class.valid]=\"isHasNumberValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasNumberValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One number</span>\n    </li>\n    <li [class.valid]=\"isHasSymbolValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasSymbolValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One symbol</span>\n    </li>\n    <li [class.valid]=\"isHasUppercaseValid\">\n      <svg-icon\n        class=\"icon\"\n        [name]=\"isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'\"\n        [class]=\"isHasUppercaseValid ? 'checkmark' : 'cancel'\"\n      ></svg-icon\n      ><span>One upper-case letter</span>\n    </li>\n  </ul>\n</ng-template>\n<!-- #endregion -->\n@let search = config().search;\n\n<ng-template #dropdownMenuRef>\n  @switch (dropdownType) {\n    @case (\"dispatch\") {\n      <ng-container *ngTemplateOutlet=\"dispatchesRef\"></ng-container>\n    }\n    @case (\"ftl-dispatch\") {\n      <ng-container *ngTemplateOutlet=\"ftlDispatchRef\"></ng-container>\n    }\n    @case (\"broker\") {\n      <ng-container *ngTemplateOutlet=\"brokerRef\"></ng-container>\n    }\n    @case (\"contact\") {\n      <ng-container *ngTemplateOutlet=\"contactRef\"></ng-container>\n    }\n    @case (\"shipper\") {\n      <ng-container *ngTemplateOutlet=\"shipperRef\"></ng-container>\n    }\n    @case (\"bank\") {\n      <ng-container *ngTemplateOutlet=\"bankRef\"></ng-container>\n    }\n    @case (\"dispatcher\") {\n      <ng-container *ngTemplateOutlet=\"dispatcherRef\"></ng-container>\n    }\n    @case (\"trailer\") {\n      <ng-container *ngTemplateOutlet=\"trailerRef\"></ng-container>\n    }\n    @case (\"truck\") {\n      <ng-container *ngTemplateOutlet=\"truckRef\"></ng-container>\n    }\n    @case (\"hazardous\") {\n      <ng-container *ngTemplateOutlet=\"hazardousRef\"></ng-container>\n    }\n    @case (\"state\") {\n      <ng-container *ngTemplateOutlet=\"stateRef\"></ng-container>\n    }\n    @case (\"owner\") {\n      <ng-container *ngTemplateOutlet=\"ownerRef\"></ng-container>\n    }\n    @case (\"fuelcard\") {\n      <ng-container *ngTemplateOutlet=\"fuelcardRef\"></ng-container>\n    }\n    @case (\"pm\") {\n      <ng-container *ngTemplateOutlet=\"pmRef\"></ng-container>\n    }\n    @case (\"multiple\") {\n      <ng-container *ngTemplateOutlet=\"multipleRef\"></ng-container>\n    }\n    @case (\"make\") {\n      <ng-container *ngTemplateOutlet=\"makeRef\"></ng-container>\n    }\n    @case (\"toll\") {\n      <ng-container *ngTemplateOutlet=\"tollRef\"></ng-container>\n    }\n    @case (\"color\") {\n      <ng-container *ngTemplateOutlet=\"colorRef\"></ng-container>\n    }\n    @case (\"fuel-stop-transaction\") {\n      <ng-container *ngTemplateOutlet=\"fuelStopTransactionRef\"></ng-container>\n    }\n    @case (\"provider\") {\n      <ng-container *ngTemplateOutlet=\"providerRef\"></ng-container>\n    }\n    @case (\"split-driver\") {\n      <ng-container *ngTemplateOutlet=\"splitDriverRef\"></ng-container>\n    }\n    @case (\"split-truck\") {\n      <ng-container *ngTemplateOutlet=\"splitTruckRef\"></ng-container>\n    }\n    @case (\"split-trailer\") {\n      <ng-container *ngTemplateOutlet=\"splitTrailerRef\"></ng-container>\n    }\n    @case (\"subcontent\") {\n      <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\n    }\n    @default {\n      <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #selectedOptionRef>\n  @switch (dropdownType) {\n    @case (\"dispatch\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\n    }\n    @case (\"ftl-dispatch\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\n    }\n    @case (\"broker\") {\n      <ng-container *ngTemplateOutlet=\"selectedBrokerRef\"></ng-container>\n    }\n    @case (\"contact\") {\n      <ng-container *ngTemplateOutlet=\"selectedContactRef\"></ng-container>\n    }\n    @case (\"shipper\") {\n      <ng-container *ngTemplateOutlet=\"selectedShipperRef\"></ng-container>\n    }\n    @case (\"bank\") {\n      <ng-container *ngTemplateOutlet=\"selectedBankRef\"></ng-container>\n    }\n    @case (\"dispatcher\") {\n      <ng-container *ngTemplateOutlet=\"selectedDispatcherRef\"></ng-container>\n    }\n    @case (\"trailer\") {\n      <ng-container *ngTemplateOutlet=\"selectedTrailerRef\"></ng-container>\n    }\n    @case (\"truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedTruckRef\"></ng-container>\n    }\n    @case (\"hazardous\") {\n      <ng-container *ngTemplateOutlet=\"selectedHazardousRef\"></ng-container>\n    }\n    @case (\"state\") {\n      <ng-container *ngTemplateOutlet=\"selectedStateRef\"></ng-container>\n    }\n    @case (\"owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedOwnerRef\"></ng-container>\n    }\n    @case (\"fuelcard\") {\n      <ng-container *ngTemplateOutlet=\"selectedFuelcardRef\"></ng-container>\n    }\n    @case (\"pm\") {\n      <ng-container *ngTemplateOutlet=\"selectedPmRef\"></ng-container>\n    }\n    @case (\"make\") {\n      <ng-container *ngTemplateOutlet=\"selectedMakeRef\"></ng-container>\n    }\n    @case (\"toll\") {\n      <ng-container *ngTemplateOutlet=\"selectedTollRef\"></ng-container>\n    }\n    @case (\"color\") {\n      <ng-container *ngTemplateOutlet=\"selectedColorRef\"></ng-container>\n    }\n    @case (\"provider\") {\n      <ng-container *ngTemplateOutlet=\"selectedProviderRef\"></ng-container>\n    }\n    @case (\"split-driver\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitDriverRef\"></ng-container>\n    }\n    @case (\"split-truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitTruckRef\"></ng-container>\n    }\n    @case (\"split-trailer\") {\n      <ng-container *ngTemplateOutlet=\"selectedSplitTrailerRef\"></ng-container>\n    }\n  }\n</ng-template>\n\n<!-- Standard dropdown -->\n<ng-template #dropdownOptionsRef>\n  @if (dropdownOptions().length) {\n    @for (option of dropdownOptions(); track $index; let index = $index) {\n      @let dropdownOption = cast(option, \"dropdownOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dropdownOption.id }}\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n        (pointerdown)=\"handleOption(dropdownOption, $event)\"\n      >\n        @if (dropdownOption[optionLabel] === \"Hazardous\") {\n          <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\n        }\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (dropdownOption[optionLabel] | highlightSearch: value())\n              : dropdownOption[optionLabel]\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #multipleRef>\n  @if (dropdownOptions().length) {\n    @for (option of dropdownOptions(); track $index; let index = $index) {\n      @let dropdownOption = cast(option, \"dropdownOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dropdownOption.id }}\"\n        (pointerdown)=\"handleOption(dropdownOption, $event)\"\n        [class]=\"{\n          selected: isSelectedOption(dropdownOption),\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (dropdownOption[optionLabel] | highlightSearch: value())\n              : dropdownOption[optionLabel]\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #bankRef>\n  @if (dropdownOptions().length) {\n    @for (bank of dropdownOptions(); track $index; let index = $index) {\n      @let bankOption = cast(bank, \"bank\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ bankOption.id }}\"\n        (pointerdown)=\"handleOption(bankOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'bank')?.id === bankOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        @if (bankOption.logoName) {\n          <svg-icon\n            class=\"full-icon\"\n            [name]=\"bankOption.logoName.slice(0, -4)\"\n          ></svg-icon>\n        } @else {\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (bankOption.name || '' | highlightSearch: value())\n                : bankOption.name\n            \"\n          ></p>\n        }\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #makeRef>\n  @if (dropdownOptions().length) {\n    @for (make of dropdownOptions(); track $index; let index = $index) {\n      @let makeOption = cast(make, \"make\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ makeOption.id }}\"\n        (pointerdown)=\"handleOption(makeOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'make')?.id === makeOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        @if (makeOption.logoName) {\n          <svg-icon\n            class=\"full-icon\"\n            [name]=\"makeOption.logoName.slice(0, -4)\"\n          ></svg-icon>\n        } @else {\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (makeOption.name || '' | highlightSearch: value())\n                : makeOption.name\n            \"\n          ></p>\n        }\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Broker -->\n<ng-template #brokerRef>\n  @if (dropdownOptions().length) {\n    @for (broker of dropdownOptions(); track $index; let index = $index) {\n      @let brokerOption = cast(broker, \"broker\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"broker-{{ brokerOption.id }}\"\n        (pointerdown)=\"\n          !(brokerOption.dnu || brokerOption.ban) &&\n            handleOption(brokerOption, $event)\n        \"\n        [class]=\"{\n          selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,\n          focused: focusedOptionIndex === index,\n          banned: brokerOption.dnu || brokerOption.ban,\n          dnu: brokerOption.dnu,\n        }\"\n      >\n        @if (brokerOption?.dnu || brokerOption?.ban) {\n          <svg-icon name=\"cai-minus\" class=\"round-icon\"></svg-icon>\n        } @else if (brokerOption?.fraudCheck) {\n          <svg-icon\n            name=\"cai-status-warning-lite\"\n            class=\"icon fraud\"\n          ></svg-icon>\n        }\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (brokerOption.businessName || '' | highlightSearch: value())\n              : brokerOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            @if (!brokerOption.creditLimit) {\n              <p>Unlimited</p>\n            } @else {\n              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\n              <div\n                class=\"progress-bar\"\n                [style.--progress]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).activePercentageOfPaid + '%'\n                \"\n                [class]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).status\n                \"\n              ></div>\n            }\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ brokerOption.loadsCount }} |\n              {{ brokerOption.availableCredit || 0 | currency }}\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Contact dropdown -->\n<ng-template #contactRef>\n  @if (dropdownOptions().length) {\n    @for (contact of dropdownOptions(); track $index; let index = $index) {\n      @let contactOption = cast(contact, \"contact\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"contact-{{ contact.id }}\"\n        (pointerdown)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          [innerHTML]=\"\n            search\n              ? (contactOption.contactName || '' | highlightSearch: value())\n              : contactOption.contactName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p>{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ contactOption.phone }}\n            </p>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Owner dropdown -->\n<ng-template #ownerRef>\n  @if (dropdownOptions().length) {\n    @for (owner of dropdownOptions(); track $index; let index = $index) {\n      @let ownerOption = cast(owner, \"owner\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"owner-{{ ownerOption?.id }}\"\n        (pointerdown)=\"handleOption(ownerOption!, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"owner-ein\"\n          [innerHTML]=\"\n            search\n              ? (ownerOption?.ein || '' | highlightSearch: value())\n              : ownerOption?.ein\n          \"\n        ></p>\n        <p\n          [innerHTML]=\"\n            search\n              ? (ownerOption?.name || '' | highlightSearch: value())\n              : ownerOption?.name\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Fuelcard dropdown -->\n<ng-template #fuelcardRef>\n  @if (dropdownOptions().length) {\n    @for (fuelcard of dropdownOptions(); track $index; let index = $index) {\n      @let fuelcardOption = cast(fuelcard, \"fuelCard\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"fuelcard-{{ fuelcardOption?.id }}\"\n        (pointerdown)=\"handleOption(fuelcardOption!, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"fuelcard-number\"\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.number || '' | highlightSearch: value())\n              : fuelcardOption?.number\n          \"\n        ></p>\n        <p\n          class=\"fuelcard-brand\"\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.brand || '' | highlightSearch: value())\n              : fuelcardOption?.brand\n          \"\n        ></p>\n        <p\n          [innerHTML]=\"\n            search\n              ? (fuelcardOption?.account || '' | highlightSearch: value())\n              : fuelcardOption?.account\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Shipper dropdown -->\n<ng-template #shipperRef>\n  @if (dropdownOptions().length) {\n    @for (shipper of dropdownOptions(); track $index; let index = $index) {\n      @let shipperOption = cast(shipper, \"shipper\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"shipper-{{ shipperOption.id }}\"\n        (pointerdown)=\"handleOption(shipperOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"max-w-280 text-truncate\"\n          [innerHTML]=\"\n            search\n              ? (shipperOption.businessName || '' | highlightSearch: value())\n              : shipperOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p\n              class=\"max-w-280 text-truncate\"\n              [innerHTML]=\"\n                search\n                  ? (shipperOption.address?.address || ''\n                    | highlightSearch: value())\n                  : shipperOption.address?.address\n              \"\n            ></p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ shipperOption.pickupCount }} Pickup |\n              {{ shipperOption.deliveryCount }} Delivery\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatch dropdown -->\n<ng-template #dispatchesRef>\n  @if (dropdownOptions().length) {\n    <button\n      tabindex=\"-1\"\n      class=\"dropdown-item\"\n      (pointerdown)=\"reset()\"\n      [class]=\"{\n        selected: !selectedOption(),\n      }\"\n    >\n      <p>Unassigned</p>\n      <div class=\"unassigned-ltl\">\n        <p>{{ unassignedCount() }}</p>\n        <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\n      </div>\n    </button>\n    @for (\n      dispatchBoard of dropdownOptions();\n      track dispatchBoard.id;\n      let groupIndex = $index\n    ) {\n      <!-- Temporary variant since BE doesn't support boards -->\n      @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\n\n      @let isNoBoardsVariant =\n        dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\n      @if (dispatchBoardOption.count > 0) {\n        @if (!isNoBoardsVariant) {\n          @let isGroupFocused =\n            groupedNavigationState?.groupIndex === groupIndex &&\n            groupedNavigationState?.optionIndex === 0;\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\n            [class]=\"{\n              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p>\n              {{\n                dispatchBoardOption.teamBoard\n                  ? \"Team Board\"\n                  : dispatchBoardOption.dispatcher\n              }}\n            </p>\n            <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n        }\n        @if (\n          dispatchBoardOption.dispatches &&\n          dispatchBoardOption.dispatches.length > 0\n        ) {\n          @for (\n            dispatch of dispatchBoardOption.dispatches;\n            track dispatch.id;\n            let optionIndex = $index\n          ) {\n            @let isOptionFocused =\n              groupedNavigationState?.groupIndex === groupIndex &&\n              groupedNavigationState?.optionIndex === optionIndex + 1;\n            <!-- +1 since optionIndex is 0 for the group item header -->\n            <button\n              tabindex=\"-1\"\n              class=\"dropdown-item\"\n              (pointerdown)=\"handleOption(dispatch, $event)\"\n              [class]=\"{\n                selected:\n                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,\n                focused: isOptionFocused,\n              }\"\n            >\n              <div class=\"dropdown-subitem truck-item\">\n                <svg-icon\n                  class=\"truck-icon truck-trailer-icon-colors\"\n                  [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                  [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                ></svg-icon>\n                <p\n                  class=\"truck-number\"\n                  [innerHTML]=\"\n                    dispatch.truck.truckNumber | highlightSearch: value()\n                  \"\n                ></p>\n              </div>\n              <div class=\"dropdown-subitem trailer-item\">\n                @if (dispatch.trailer) {\n                  <svg-icon\n                    class=\"trailer-icon truck-trailer-icon-colors\"\n                    [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                    [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                  ></svg-icon>\n                  <p\n                    class=\"trailer-number\"\n                    [innerHTML]=\"\n                      dispatch.trailer.trailerNumber | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem\">\n                @if (dispatch.coDriver) {\n                  <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName +\n                        ' & ' +\n                        dispatch.coDriver.firstName | highlightSearch: value()\n                    \"\n                  ></p>\n                } @else {\n                  <cai-avatar\n                    [driver]=\"dispatch.driver\"\n                    [size]=\"18\"\n                    [inverse]=\"true\"\n                    [hover]=\"false\"\n                  ></cai-avatar>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem-end\">\n                <div class=\"end-item-hover\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base dispatch-ltl\">\n                  <p>{{ dispatch.numberOfSingleLtlLoads }}</p>\n                  <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- ftl dispatch dropdown -->\n<ng-template #ftlDispatchRef>\n  @if (dropdownOptions().length) {\n    @for (\n      dispatchBoard of dropdownOptions();\n      track dispatchBoard.id;\n      let groupIndex = $index\n    ) {\n      @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      @let isNoBoardsVariant =\n        dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\n      @if (dispatchBoardOption.count > 0) {\n        @if (!isNoBoardsVariant) {\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\n            [class]=\"{\n              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p>\n              {{\n                dispatchBoardOption.teamBoard\n                  ? \"Team Board\"\n                  : dispatchBoardOption.dispatcher\n              }}\n            </p>\n            <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n        }\n        @if (\n          dispatchBoardOption.dispatches &&\n          dispatchBoardOption.dispatches.length > 0\n        ) {\n          @for (\n            dispatch of dispatchBoardOption.dispatches;\n            track dispatch.id;\n            let optionIndex = $index\n          ) {\n            @let isOptionFocused =\n              groupedNavigationState?.groupIndex === groupIndex &&\n              groupedNavigationState?.optionIndex === optionIndex + 1;\n            <!-- +1 since optionIndex is 0 for the group item header -->\n            <button\n              class=\"dropdown-item\"\n              (pointerdown)=\"handleOption(dispatch, $event)\"\n              [class]=\"{\n                selected:\n                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,\n                focused: isOptionFocused,\n              }\"\n            >\n              <div class=\"dropdown-subitem truck-item\">\n                <svg-icon\n                  class=\"truck-icon truck-trailer-icon-colors\"\n                  [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                  [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\n                ></svg-icon>\n                <p\n                  class=\"truck-number\"\n                  [innerHTML]=\"\n                    dispatch.truck.truckNumber | highlightSearch: value()\n                  \"\n                ></p>\n              </div>\n              <div class=\"dropdown-subitem trailer-item\">\n                @if (dispatch.trailer) {\n                  <svg-icon\n                    class=\"trailer-icon truck-trailer-icon-colors\"\n                    [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                    [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\n                  ></svg-icon>\n                  <p\n                    class=\"trailer-number\"\n                    [innerHTML]=\"\n                      dispatch.trailer.trailerNumber | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem\">\n                @if (dispatch.coDriver) {\n                  <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName +\n                        ' & ' +\n                        dispatch.coDriver.firstName | highlightSearch: value()\n                    \"\n                  ></p>\n                } @else {\n                  <cai-avatar\n                    [driver]=\"dispatch.driver\"\n                    [size]=\"18\"\n                    [inverse]=\"true\"\n                    [hover]=\"false\"\n                  ></cai-avatar>\n                  <p\n                    class=\"driver-name\"\n                    [innerHTML]=\"\n                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n                }\n              </div>\n              <div class=\"dropdown-subitem-end\">\n                <div class=\"end-item-hover\">\n                  <!-- Load Status -->\n                  @if (dispatch.status?.statusString) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"\n                        'status-' +\n                        dispatch.status?.statusString\n                          ?.toLowerCase()\n                          ?.replaceAll(' ', '')\n                          ?.replaceAll('.', '')\n                      \"\n                    >\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block blue\">D</p>\n                        <p class=\"status-block green\">L</p>\n                      }\n                      {{ dispatch.status?.statusString }}\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block green\">P</p>\n                        <p class=\"status-block orange\">D</p>\n                      }\n                      @if (dispatch.status?.statusCheckInNumber) {\n                        <p class=\"status-block\">\n                          {{ dispatch.status?.statusCheckInNumber }}\n                        </p>\n                      }\n                    </div>\n                    <p class=\"dispatch-separator\">|</p>\n                  }\n                  <p class=\"dispatch-load-count\">\n                    <!-- Pending Load Count -->\n                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\n                    0\n                  </p>\n                  <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitDriverRef>\n  @if (dropdownOptions().length) {\n    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\n      @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(driverBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (driverBoard.drivers?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            driverBoard.isTeamBoard ? \"Team Board\" : driverBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ driverBoard.drivers?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (driver of driverBoard.drivers || []; track driver.id) {\n        @let driverOption = cast(driver, \"splitDriver\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(driverOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitDriver')?.id === driverOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem\">\n            <div class=\"dropdown-avatar\">\n              <cai-avatar\n                [driver]=\"driverOption\"\n                [size]=\"18\"\n                [inverse]=\"true\"\n                [hover]=\"false\"\n              ></cai-avatar>\n            </div>\n            <p\n              class=\"driver-name\"\n              [innerHTML]=\"\n                driverOption.firstName + ' ' + driverOption.lastName\n                  | highlightSearch: value()\n              \"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                driverOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ driverOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              <p>{{ driverOption.payTypeValue }}</p>\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTruckRef>\n  @if (dropdownOptions().length) {\n    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\n      @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(truckBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (truckBoard.trucks?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            truckBoard.isTeamBoard ? \"Team Board\" : truckBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ truckBoard.trucks?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (truck of truckBoard.trucks || []; track truck.id) {\n        @let truckOption = cast(truck, \"splitTruck\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(truckOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitTruck')?.id === truckOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem truck-item\">\n            <svg-icon\n              class=\"truck-icon\"\n              [style.--truck-color]=\"truckOption.color?.code || ''\"\n              [name]=\"truckOption.truckType.logoName.slice(0, -4)\"\n            ></svg-icon>\n            <p\n              class=\"truck-number\"\n              [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                truckOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ truckOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                truckOption.location?.city &&\n                truckOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ truckOption.location?.city }},\n                  {{ truckOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\n      @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (pointerdown)=\"fold(trailerBoard.id, $event)\"\n        [class]=\"{\n          unfolded: (trailerBoard.trailers?.length ?? 0) > 0,\n        }\"\n      >\n        <p>\n          {{\n            trailerBoard.isTeamBoard\n              ? \"Team Board\"\n              : trailerBoard.dispatcherName\n          }}\n        </p>\n        <!-- TODO: Change to count once BE is fixed -->\n        <p class=\"counter\">{{ trailerBoard.trailers?.length || 0 }}</p>\n        <svg-icon\n          name=\"cai-arrow-primary-up\"\n          class=\"group-icon icon\"\n        ></svg-icon>\n      </button>\n      @for (trailer of trailerBoard.trailers || []; track trailer.id) {\n        @let trailerOption = cast(trailer, \"splitTrailer\")!;\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(trailerOption, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,\n          }\"\n        >\n          <div class=\"dropdown-subitem trailer-item\">\n            <svg-icon\n              class=\"trailer-icon\"\n              [style.--trailer-color]=\"trailerOption.color?.code || ''\"\n              [name]=\"trailerOption.trailerType.logoName.slice(0, -4)\"\n            ></svg-icon>\n            <p\n              class=\"trailer-number\"\n              [innerHTML]=\"\n                trailerOption.trailerNumber | highlightSearch: value()\n              \"\n            ></p>\n          </div>\n          <div class=\"dropdown-subitem-end\">\n            <div class=\"end-item-hover\">\n              @let dispatchStatus =\n                trailerOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ trailerOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                trailerOption.location?.city &&\n                trailerOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ trailerOption.location?.city }},\n                  {{ trailerOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #tollRef>\n  @if (dropdownOptions().length) {\n    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\n      @let tollOption = cast(toll, \"tollOption\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item pe-none\"\n        [class]=\"{\n          unfolded: tollOption.tollTransponders?.length || 0 > 0,\n          focused: isGroupFocused,\n        }\"\n      >\n        <p>\n          {{ tollOption.groupName }}\n        </p>\n      </button>\n      @let tollTransponders = tollOption.tollTransponders || [];\n      @for (\n        tollTransponder of tollTransponders;\n        track tollTransponder.id;\n        let optionIndex = $index\n      ) {\n        @let isOptionFocused =\n          groupedNavigationState?.groupIndex === groupIndex &&\n          groupedNavigationState?.optionIndex === optionIndex + 1;\n        <!-- +1 since optionIndex is 0 for the group item header -->\n        <button\n          class=\"dropdown-item\"\n          (pointerdown)=\"handleOption(tollTransponder, $event)\"\n          [class]=\"{\n            selected:\n              cast(selectedOption(), 'tollTransponderOption')?.id ===\n              tollTransponder.id,\n            focused: isOptionFocused,\n          }\"\n        >\n          <p\n            class=\"dropdown-content-with-icon\"\n            [innerHTML]=\"\n              search\n                ? (tollTransponder.name || '' | highlightSearch: value())\n                : tollTransponder.name\n            \"\n          ></p>\n          <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatcher dropdown -->\n\n<ng-template #dispatcherRef>\n  @if (dropdownOptions().length) {\n    @for (dispatcher of dropdownOptions(); track $index; let index = $index) {\n      @let dispatcherOption = cast(dispatcher, \"dispatcher\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ dispatcherOption.id }}\"\n        (pointerdown)=\"handleOption(dispatcherOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <cai-avatar\n          [driver]=\"{\n            id: dispatcherOption?.id || 0,\n            firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n            lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n            avatarFile: dispatcherOption?.avatarFile,\n            colorFlag: dispatcherOption?.colorFlag,\n          }\"\n          [rounded]=\"!config().squareAvatar\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p\n          class=\"dropdown-content-hazardous\"\n          [innerHTML]=\"\n            search\n              ? (dispatcherOption.fullName || '' | highlightSearch: value())\n              : dispatcherOption.fullName\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #truckRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let truckOption = cast(truck, \"truckOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ truckOption.id }}\"\n        (pointerdown)=\"handleOption(truckOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'truckOption')?.id === truckOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (truckOption.name || '' | highlightSearch: value())\n              : truckOption.name\n          \"\n        ></p>\n        <svg-icon\n          class=\"truck-trailer-option truck-trailer-icon-colors\"\n          [class]=\"truckOption.logoName.slice(0, -4)\"\n          [name]=\"truckOption.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <svg-icon\n          name=\"cai-checkmark\"\n          class=\"dropdown-item-icon no-margin\"\n        ></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #trailerRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let trailerOption = cast(truck, \"trailerOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ trailerOption.id }}\"\n        (pointerdown)=\"handleOption(trailerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (trailerOption.name || '' | highlightSearch: value())\n              : trailerOption.name\n          \"\n        ></p>\n\n        <svg-icon\n          class=\"truck-trailer-option truck-trailer-icon-colors\"\n          [class]=\"trailerOption.logoName.slice(0, -4)\"\n          [name]=\"trailerOption.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <svg-icon\n          name=\"cai-checkmark\"\n          class=\"dropdown-item-icon no-margin\"\n        ></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #providerRef>\n  @if (dropdownOptions().length) {\n    @for (provider of dropdownOptions(); track $index; let index = $index) {\n      @let providerOption = cast(provider, \"provider\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ providerOption?.id }}\"\n        (pointerdown)=\"handleOption(providerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'provider')?.id === providerOption?.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"full-icon\"\n          [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n        ></svg-icon>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Hazardous dropdown -->\n<ng-template #hazardousRef>\n  @if (dropdownOptions().length) {\n    @for (hazardous of dropdownOptions(); track $index; let index = $index) {\n      @let hazardousOption = cast(hazardous, \"hazardous\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ hazardousOption.id }}\"\n        (pointerdown)=\"handleOption(hazardousOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon [name]=\"hazardousOption.logoName?.slice(0, -4)\"></svg-icon>\n        <p\n          class=\"dropdown-content-hazardous\"\n          [innerHTML]=\"\n            search\n              ? (hazardousOption.description || '' | highlightSearch: value())\n              : hazardousOption.description\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #pmRef>\n  @if (dropdownOptions().length) {\n    @for (pm of dropdownOptions(); track $index; let index = $index) {\n      @let pmOption = cast(pm, \"pmOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ pmOption.id }}\"\n        (pointerdown)=\"handleOption(pmOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon\"\n          [name]=\"pmOption.title | remapPmIcons\"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (pmOption.title || '' | highlightSearch: value())\n              : pmOption.title\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #colorRef>\n  @if (dropdownOptions().length) {\n    @for (color of dropdownOptions(); track $index; let index = $index) {\n      @let colorOption = cast(color, \"colorOption\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item color-item\"\n        id=\"option-{{ colorOption.id }}\"\n        (pointerdown)=\"handleOption(colorOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'colorOption')?.id === colorOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon cai-color\"\n          [name]=\"'cai-color'\"\n          [style.--color]=\"colorOption?.code\"\n          [style.--hover-color]=\"colorOption?.hoverCode\"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (colorOption.name || '' | highlightSearch: value())\n              : colorOption.name\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #stateRef>\n  @if (dropdownOptions().length) {\n    @for (state of dropdownOptions(); track $index; let index = $index) {\n      @let stateOption = cast(state, \"state\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ stateOption.id }}\"\n        (pointerdown)=\"handleOption(stateOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'state')?.id === stateOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <svg-icon\n          class=\"icon\"\n          [name]=\"\n            'cai-' +\n            stateOption?.countryType?.name?.toLowerCase() +\n            '-' +\n            stateOption?.stateShortName?.toLowerCase()\n          \"\n        ></svg-icon>\n        <p\n          class=\"dropdown-content-with-icon\"\n          [innerHTML]=\"\n            search\n              ? (stateOption.stateShortName +\n                  ' ' +\n                  (config().fullState\n                    ? ' (' + stateOption?.stateName + ')'\n                    : '') || '' | highlightSearch: value())\n              : stateOption.stateShortName +\n                ' ' +\n                (config().fullState ? ' (' + stateOption?.stateName + ')' : '')\n          \"\n        ></p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #fuelStopTransactionRef>\n  @if (dropdownOptions().length) {\n    @for (\n      franchise of dropdownOptions();\n      track franchise.id;\n      let groupIndex = $index\n    ) {\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      @let franchiseOption = cast(franchise, \"franchise\")!;\n      @if (franchiseOption?.count !== null) {\n        <div\n          class=\"dropdown-group\"\n          [class.no-items]=\"!franchiseOption?.count\"\n          [class]=\"{\n            active: openGroup() === franchiseOption.id,\n          }\"\n          [style.--max-height]=\"\n            openGroup() === franchiseOption.id\n              ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'\n              : '26px'\n          \"\n        >\n          <button\n            tabindex=\"-1\"\n            class=\"dropdown-item group-item\"\n            (pointerdown)=\"fold(franchiseOption.id, $event, franchiseOption)\"\n            [class]=\"{\n              unfolded: openGroup() === franchiseOption.id,\n              focused: isGroupFocused,\n            }\"\n          >\n            <p\n              [innerHTML]=\"\n                franchiseOption?.businessName || '' | highlightSearch: value()\n              \"\n            ></p>\n            <p class=\"counter\">{{ franchiseOption.count }}</p>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"group-icon icon\"\n            ></svg-icon>\n          </button>\n          @if (openGroup() === franchiseOption.id) {\n            @if (franchiseOption.fuelStopStores?.length || 0 > 0) {\n              @for (\n                fuelStopStore of franchiseOption.fuelStopStores;\n                track fuelStopStore.id\n              ) {\n                @let isOptionFocused =\n                  groupedNavigationState?.groupIndex === groupIndex &&\n                  groupedNavigationState?.optionIndex === $index + 1;\n                <!-- +1 since optionIndex is 0 for the group item header -->\n                <button\n                  tabindex=\"-1\"\n                  class=\"dropdown-item fuel-stop-transaction-store\"\n                  [class]=\"{\n                    focused: isOptionFocused,\n                  }\"\n                  (pointerdown)=\"handleOption(fuelStopStore, $event)\"\n                >\n                  <p\n                    [innerHTML]=\"\n                      fuelStopStore?.store ?? '' | highlightSearch: value()\n                    \"\n                  ></p>\n                  @let city = fuelStopStore?.address?.city ?? \"\";\n                  @let state = fuelStopStore?.address?.stateShortName ?? \"\";\n                  @let zip = fuelStopStore?.address?.zipCode ?? \"\";\n                  <p\n                    class=\"fuel-stop-transaction-store-address\"\n                    [innerHTML]=\"\n                      city + (state || zip ? ', ' : '') + state + ' ' + zip\n                        | highlightSearch: value()\n                    \"\n                  ></p>\n\n                  @if (fuelStopStore?.[\"favourite\"]) {\n                    <svg-icon\n                      name=\"cai-favorite\"\n                      class=\"favorite-icon\"\n                    ></svg-icon>\n                  }\n                </button>\n              }\n              <!-- Infinite scroll trigger - emits event when item comes into view -->\n              <div\n                class=\"dropdown-infinite-scroll-item\"\n                caiIntersectionObserver\n                [threshold]=\"0.1\"\n                (inView)=\"onDropdownScrolledToBottom(true)\"\n              ></div>\n            } @else {\n              <p class=\"dropdown-item no-results\">No results</p>\n            }\n          }\n        </div>\n      } @else {\n        <button\n          tabindex=\"-1\"\n          class=\"dropdown-item\"\n          [class.focused]=\"\n            groupedNavigationState?.groupIndex === groupIndex &&\n            groupedNavigationState?.optionIndex === 0\n          \"\n          (pointerdown)=\"handleOption(franchiseOption, $event)\"\n        >\n          <p\n            class=\"fuel-stop-transaction-nostore\"\n            [innerHTML]=\"\n              franchiseOption?.businessName || '' | highlightSearch: value()\n            \"\n          ></p>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- #endregion -->\n\n<!-- #region Selected options -->\n\n<!-- selected dispatch -->\n<ng-template #selectedDispatchRef>\n  @let dispatchOption = cast(selectedOption(), \"dispatch\");\n  @if (dispatchOption && !inputRef.value && !isAdding()) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem truck-item\">\n        <svg-icon\n          class=\"truck-icon\"\n          [name]=\"dispatchOption!.truck.truckType.logoName.slice(0, -4)\"\n        ></svg-icon>\n        <p class=\"truck-number\">\n          {{ dispatchOption!.truck.truckNumber }}\n        </p>\n      </div>\n      <div class=\"dropdown-subitem trailer-item\">\n        @if (dispatchOption!.trailer) {\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"\n              cast(\n                selectedOption(),\n                'dispatch'\n              )!.trailer?.trailerType?.logoName?.slice(0, -4)\n            \"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ dispatchOption!.trailer?.trailerNumber }}\n          </p>\n        }\n      </div>\n      <div class=\"dropdown-subitem\">\n        @if (dispatchOption!.coDriver) {\n          <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\n          <p class=\"driver-name\">\n            {{\n              dispatchOption!.driver.firstName +\n                \" & \" +\n                dispatchOption!.coDriver?.firstName\n            }}\n          </p>\n        } @else {\n          <cai-avatar\n            [driver]=\"dispatchOption!.driver\"\n            [size]=\"18\"\n            [hover]=\"false\"\n          ></cai-avatar>\n          <p class=\"driver-name\">\n            {{\n              dispatchOption!.driver.firstName +\n                \" \" +\n                dispatchOption!.driver.lastName\n            }}\n          </p>\n        }\n      </div>\n      <p class=\"selected-end-item\">\n        {{ dispatchOption!.payType }}\n      </p>\n    </div>\n  } @else {\n    @if (!inputRef.value && this.config().dropdown == \"dispatch\") {\n      <p class=\"dropdown-selected\">Unassigned</p>\n    }\n  }\n</ng-template>\n\n<!-- selected broker -->\n<ng-template #selectedBrokerRef>\n  @let brokerOption = cast(selectedOption(), \"broker\");\n  @if (brokerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if ((brokerOption!.availableCredit || 0) < 0) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\n      <div class=\"selected-end-item\">\n        @if (!brokerOption!.creditLimit) {\n          <p>Unlimited</p>\n        } @else {\n          <p>\n            {{ brokerOption!.availableCredit || 0 | currency }}\n          </p>\n          <div\n            class=\"progress-bar\"\n            [style.--progress]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).activePercentageOfPaid + '%'\n            \"\n            [class]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).status\n            \"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedContactRef>\n  @let contactOption = cast(selectedOption(), \"contact\");\n  @if (contactOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ contactOption?.phone }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedShipperRef>\n  @let shipperOption = cast(selectedOption(), \"shipper\");\n  @if (shipperOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ shipperOption?.address?.address }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedOwnerRef>\n  @let ownerOption = cast(selectedOption(), \"owner\");\n  @if (ownerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\n      <p class=\"\">{{ ownerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedFuelcardRef>\n  @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\n  @if (fuelcardOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"fuelcard-number\">\n        {{ fuelcardOption?.number }}\n      </p>\n      <p class=\"fuelcard-brand\">\n        {{ fuelcardOption?.brand }}\n      </p>\n      <p class=\"\">\n        {{ fuelcardOption?.account }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedBankRef>\n  @let bankOption = cast(selectedOption(), \"bank\");\n  @if (bankOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (bankOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedProviderRef>\n  @let providerOption = cast(selectedOption(), \"provider\");\n  @if (providerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon full-size\"\n        [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n      ></svg-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedMakeRef>\n  @let makeOption = cast(selectedOption(), \"make\");\n  @if (makeOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (makeOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedStateRef>\n  @let stateOption = cast(selectedOption(), \"state\");\n  @if (stateOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"\n          'cai-' +\n          stateOption?.countryType?.name?.toLowerCase() +\n          '-' +\n          stateOption?.stateShortName?.toLowerCase()\n        \"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ stateOption?.stateShortName }}\n        {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedDispatcherRef>\n  @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\n  @if (dispatcherOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: dispatcherOption?.id || 0,\n          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: dispatcherOption?.avatarFile,\n          colorFlag: dispatcherOption?.colorFlag,\n        }\"\n        [rounded]=\"!config().squareAvatar\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckRef>\n  @let truckOption = cast(selectedOption(), \"truckOption\");\n  @if (truckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"truckOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTrailerRef>\n  @let trailerOption = cast(selectedOption(), \"trailerOption\");\n  @if (trailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"trailerOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedHazardousRef>\n  @let hazardousOption = cast(selectedOption(), \"hazardous\");\n  @if (hazardousOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"hazard-icon\"\n        [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\n        {{ hazardousOption?.description }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedPmRef>\n  @let pmOption = cast(selectedOption(), \"pmOption\");\n  @if (pmOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"pmOption?.title | remapPmIcons\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ pmOption?.title }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedColorRef>\n  @let colorOption = cast(selectedOption(), \"colorOption\");\n  @if (colorOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon cai-color\"\n        [name]=\"'cai-color'\"\n        [style.--color]=\"colorOption?.code\"\n        [style.--hover-color]=\"colorOption?.hoverCode\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ colorOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTollRef>\n  @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\n  @if (tollOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">\n        {{ tollOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitDriverRef>\n  @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\n  @if (splitDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem\">\n          <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\n          <p class=\"driver-name\">\n            {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\n          </p>\n        </div>\n      </div>\n\n      <p class=\"selected-end-item\">\n        {{ splitDriverOption.payTypeValue }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTruckRef>\n  @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\n  @if (splitTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem trailer-item\">\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ splitTruckOption!.truckNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTruckOption!.location?.city &&\n          splitTruckOption!.location?.stateShortName\n        ) {\n          {{ splitTruckOption!.location?.city }},\n          {{ splitTruckOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTrailerRef>\n  @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\n  @if (splitTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem truck-item\">\n          <svg-icon\n            class=\"truck-icon\"\n            [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"truck-number\">\n            {{ splitTrailerOption!.trailerNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTrailerOption!.location?.city &&\n          splitTrailerOption!.location?.stateShortName\n        ) {\n          {{ splitTrailerOption!.location?.city }},\n          {{ splitTrailerOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #passwordTooltip>\n  {{ visible() ? \"Hide\" : \"Show\" }}\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (\n    (config().errorBehavior === \"floating\" ||\n      (config().errorBehavior === \"static\" && hasText()) ||\n      config().inTable) &&\n    invalid &&\n    !dropdown.isOpen()\n  ) {\n    {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\n  }\n</ng-template>\n\n<!-- #endregion -->\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon,.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon,.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse.has-text:has(.app-input:disabled) .app-input-label{color:#424242!important}.app-input-container:hover,.app-input-container.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label{margin-right:44px}.app-input-container.has-text .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container.has-text.fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container.has-text .subcontent{opacity:1!important}.app-input-container.has-text.static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text)}.app-input-container.has-text.is-address:hover .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:hover .bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral-hover)}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .subcontent{opacity:1!important;color:#ffffffb2;left:unset!important;right:4px!important}.app-input-container:has(.app-input:focus-visible).has-text .subcontent{right:26px!important}.app-input-container:has(.app-input:focus-visible) .sub-label{margin-right:44px}.app-input-container:has(.app-input:focus-visible).fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container:has(.app-input:focus-visible).static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text-inverse)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover,.app-input-container:has(.app-input:disabled).hovered{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:disabled) .dropdown-icon-container{opacity:0}.app-input-container:has(.app-input:disabled):not(.disabled-removable) .cancel-button{display:none!important}.app-input-container:has(.app-input:required):not(:has(.app-input:disabled)) .app-input-name:after{content:\" *\";color:var(--color-text-negative)}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.canceled .app-input-label,.app-input-container.canceled .app-input{color:var(--color-text-subtle)!important}.app-input-container.canceled .icon-container .icon,.app-input-container.canceled .icon-container .icon-sm{color:var(--color-icon-disable)!important}.subcontent{pointer-events:none;position:absolute;left:6px;color:#919191;-webkit-user-select:none;user-select:none;top:50%;transform:translateY(-50%);transition:right .1s ease-in-out,left .1s ease-in-out,transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);opacity:0;font-family:Montserrat;font-weight:400;font-style:Regular;font-size:14px;line-height:18px;letter-spacing:0%;height:18px;overflow:hidden}.subcontent .subcontent-hide{opacity:0!important}.app-input-label{position:absolute;display:flex;gap:4px;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.app-input-label.placeholder-color{color:var(--placeholder-color)!important}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error:hover:not(.has-right) .app-input,.app-input-container.has-error:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-error:hover,.app-input-container.has-error.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon,.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.has-text .bg-icon,.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible).has-text .button-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible).has-text .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:focus-visible).is-empty,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .app-input-error,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .bg-icon,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .bg-icon{color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error.is-empty:has(.app-input:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:#ffffff4d}.app-input-container.has-error .icon-container .separator,.app-input-container.has-error .dropdown-icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon,.app-input-container.has-error .icon-container .icon-sm,.app-input-container.has-error .dropdown-icon-container .icon,.app-input-container.has-error .dropdown-icon-container .icon-sm{color:var(--color-icon-negative)}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.has-valid:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid:hover:not(.has-right) .app-input,.app-input-container.has-valid:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.in-table),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.in-table),.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.in-table){background-color:var(--color-surface-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .button-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .bg-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid.has-text:not(.has-dropdown) .app-input::selection,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .app-input::selection,.app-input-container.has-valid.has-multiple-dropdown.has-text .app-input::selection{background-color:#ffffff4d}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .separator,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon-sm{color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .password-key{opacity:0;pointer-events:none}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.in-table,.in-table.has-error,.in-table.has-valid.has-text{background-color:transparent}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)) .app-input{color:var(--color-text-negative)}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)):not(.static-placeholder) .app-input-label{color:var(--color-text-negative)}.in-table .dropdown-icon-container{opacity:0}.in-table:hover .dropdown-icon-container{opacity:1}.in-table:has(.app-input:focus-visible) .dropdown-icon-container{opacity:1}.app-input-icon{position:absolute;right:4px;top:4px;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.button-icon{opacity:0;pointer-events:none}.button-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.bg-icon:hover{transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.round-icon{background-color:#919191;color:#2f2f2f;border-radius:50%;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) .app-input{color:#3b73ed}.floating-error .app-input-error{opacity:0!important}.static-error .app-input-error{pointer-events:none!important;transform:translateY(calc(-100% - 4px))!important;transition:margin .1s ease-in-out,opacity .1s ease-in-out}.static-error.has-icon .app-input-error{margin-right:26px!important}.static-error:has(.app-input:not(:focus-visible)) .app-input-error{opacity:1}.static-error.has-text .app-input-error{opacity:0!important}.static-placeholder .app-input-label{position:relative;white-space:nowrap;font-size:11px;font-weight:600}.static-placeholder .dropdown-selected{overflow:hidden;display:flex!important;justify-content:left!important}.static-placeholder .dropdown-selected .selected-label-hidden{width:max-content;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.static-placeholder .dropdown-selected .selected-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}.static-placeholder .app-input{padding-left:0!important}.static-placeholder.has-dropdown .cancel-button{display:none}.static-placeholder.has-dropdown .dropdown-icon-container .dropdown-icon{opacity:0;pointer-events:none}.static-placeholder.has-dropdown:hover .icon-container .icon,.static-placeholder.has-dropdown:hover .icon-container .icon-sm,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:hover .dropdown-icon-container,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:hover .dropdown-icon-container .dropdown-icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}.static-placeholder.has-dropdown .dropdown-icon-container{right:4px!important;left:auto!important}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm{color:var(--color-icon-inverse)!important}.app-input-container.has-icon.colored-icon .icon-container .icon,.app-input-container.has-icon.colored-icon .icon-container .icon-sm,.app-input-container.has-password.colored-icon .icon-container .icon,.app-input-container.has-password.colored-icon .icon-container .icon-sm,.app-input-container.has-dropdown.colored-icon .icon-container .icon,.app-input-container.has-dropdown.colored-icon .icon-container .icon-sm{color:var(--icon-color)}.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm{color:var(--color-icon-disable)!important}.app-input-container.has-icon .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-dropdown .warning-icon{display:none!important}.app-input-container.has-icon .icon,.app-input-container.has-icon .icon-sm,.app-input-container.has-password .icon,.app-input-container.has-password .icon-sm,.app-input-container.has-dropdown .icon,.app-input-container.has-dropdown .icon-sm{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);opacity:1}.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-icon:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}.icon-sm{height:14px;width:14px}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .subcontent,.app-input-container.has-password .subcontent{left:32px}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:27px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon,.has-password .password-icons .icon-sm{position:absolute;opacity:0}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-icons{pointer-events:none}.has-password:has(.app-input:disabled) .password-icons{pointer-events:none}.has-password.has-text .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password.has-text .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible.has-text .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible.has-text .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible.has-text .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important;pointer-events:none}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .button-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-number:has(.app-input:focus-visible) .subcontent{right:52px!important}.has-number:has(.app-input:focus-visible).has-text .subcontent{right:52px!important}.colored-icon .icon,.colored-icon .icon-sm{color:var(--icon-color)!important}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.dropdown-infinite-scroll-item{width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;height:0}.dropdown-menu{min-width:0px!important;width:100%;border:0;margin-top:4px;top:30px;height:var(--unfiltered-height);min-height:var(--unfiltered-height);padding:0!important;overflow:hidden;border-radius:0!important;background:transparent!important}.dropdown-menu.has-stroke .dropdown-menu-content{outline:1px solid #6c6c6c;outline-offset:-1px}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;background-color:#2f2f2f;border-radius:3px;padding:4px 0 4px 4px;max-height:244px;z-index:1100!important;overflow-y:scroll;margin-top:auto!important;scroll-padding:6px 0}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:4px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{width:4px;background:#2f2f2f;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:4px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.option-icon{color:#6c6c6c;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.option-icon.full-size{width:max-content;min-width:100%;height:18px!important;min-height:18px;flex-shrink:0;overflow:hidden}.option-icon.full-size svg{height:18px;width:max-content}.cai-color{color:var(--color)!important;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.color-item:hover .cai-color{color:var(--hover-color)!important}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;scroll-margin:6px 0;outline:1px solid transparent;outline-offset:-1px;display:flex;align-items:center;justify-content:left;gap:4px;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),outline .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item.focused{outline:1px solid #6c6c6c!important}.dropdown-item.focused .end-item-base{opacity:0}.dropdown-item.focused .end-item-hover{opacity:1}.dropdown-item.focused .full-icon{color:#ffffffb2}.dropdown-item.focused .truck-trailer-option{opacity:1}.dropdown-item .icon,.dropdown-item .icon-sm{color:#919191}.dropdown-item .dropdown-content-with-icon{max-width:calc(100% - 22px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content-hazardous{max-width:calc(100% - 40px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content{max-width:70%;overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover:not(.no-hover){background-color:#424242}.dropdown-item:hover:not(.no-hover) .end-item-base{opacity:0}.dropdown-item:hover:not(.no-hover) .end-item-hover{opacity:1}.dropdown-item:hover:not(.no-hover) .full-icon{color:#ffffffb2}.dropdown-item:hover:not(.no-hover) .truck-trailer-option{opacity:1}.dropdown-item.no-hover{cursor:default;pointer-events:none}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item:not(:first-child){margin-top:4px}.dropdown-item.banned{color:#919191;cursor:default}.dropdown-item.banned:hover{color:#919191;background-color:#2f2f2f}.dropdown-item.banned:hover .end-item-base{opacity:0}.dropdown-item.banned:hover .end-item-hover{opacity:1}.dropdown-item.dnu .round-icon{background-color:#e66767}.dropdown-item .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}.dropdown-avatar:hover{z-index:20}.no-results{color:#919191;font-weight:700;cursor:default;pointer-events:none}.add-new{color:#92b1f5!important;font-weight:700;font-size:11px}.add-new .dropdown-item-icon{opacity:1}.add-new:hover{background-color:#3b73ed66!important;color:#fff!important}.selected{font-weight:700}.selected .dropdown-item-icon{opacity:1}.selected .dropdown-item-count{color:#fff;background-color:#3b73ed}.selected .full-icon{color:#fff}.selected .end-item-base,.selected .end-item-hover{font-weight:700;color:#92b1f5}.selected .end-item-base .icon,.selected .end-item-base .icon-sm,.selected .end-item-hover .icon,.selected .end-item-hover .icon-sm{color:#92b1f5}.dropdown-item-icon{opacity:0;color:#92b1f5;width:14px;height:14px;margin-left:auto}.dropdown-item-icon.no-margin{margin-left:0}.dropdown-item-count{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:10px;background-color:#424242;color:#ffffffb2;min-width:18px;line-height:14px;font-weight:600;font-size:11px;text-align:center}.dropdown-icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-icon-container.open .dropdown-icon{transform:rotateX(180deg)}.dropdown-icon{transition:transform .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)!important;transform:rotateX(0);cursor:pointer}.has-dropdown .app-input-icon{right:26px}.has-dropdown:has(.app-input:focus-visible) .subcontent{right:26px!important}.has-dropdown:has(.app-input:focus-visible).has-text .subcontent,.has-dropdown:has(.app-input:focus-visible).has-selected .subcontent{right:48px!important}.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input,.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .cancel-button{z-index:1}.has-right.has-number .plus-button-container{order:2}.has-right.has-number .minus-button-container{order:1}.has-right.static-placeholder .app-input-icon{right:4px!important;left:auto!important;opacity:0!important}.has-right.static-placeholder:has(.app-input:focus-visible) .cancel-button{opacity:0!important;pointer-events:none!important}.has-right.static-placeholder.removable .cancel-button .bg-icon{background-color:transparent!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover .icon-container .icon,.has-right.static-placeholder.removable:hover .icon-container .icon-sm{opacity:0!important}.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button{opacity:1!important}.has-right .app-input{order:1}.has-right.has-subcontent .app-input{flex:1;min-width:0;word-break:none}.has-right .dropdown-selected{margin-left:0!important;text-align:right!important;right:0!important;left:0!important;justify-content:flex-end!important;width:100%!important}.has-right .subcontent{position:relative!important;order:1;display:grid;place-items:center;padding-right:4px;height:unset!important;transform:translateY(0)!important;left:0!important;right:unset!important}.has-right .subcontent .subcontent-hide{display:none!important}.has-right.has-text .subcontent{left:0!important;right:unset!important}.has-right:has(.app-input:focus-visible) .subcontent{left:0!important;right:unset!important}.has-right.has-icon .subcontent,.has-right.has-password .subcontent{padding-right:0!important;padding-left:4px}.has-right.has-icon .dropdown-selected,.has-right.has-password .dropdown-selected{width:calc(100% - 24px)!important}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon.fade-placeholder .app-input-label,.has-right.has-password.fade-placeholder .app-input-label{left:auto!important;right:24px!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-icon .icon-container .icon-sm,.has-right.has-password .icon-container .icon,.has-right.has-password .icon-container .icon-sm{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .dropdown-icon-container{left:4px}.has-right .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right.has-number.app-input-container:has(.app-input:focus-visible) .app-input{padding-left:4px}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}.has-right.fade-placeholder .app-input-label{right:0!important;left:auto!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:after{content:none!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:before{content:\"* \";color:var(--color-text-negative)}.removable:has(.cancel-button:hover).in-table{background-color:transparent!important}.removable:has(.cancel-button:hover).in-table .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):not(.in-table){background-color:var(--color-surface-negative-hover)!important}.removable:has(.cancel-button:hover):not(.in-table) .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.no-clear .cancel-button{display:none!important}.is-adding{padding-right:20px}.is-adding .dropdown-icon{opacity:0!important}.is-adding .accept-button{pointer-events:none;opacity:0!important}.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.is-adding:hover,.is-adding:has(.app-input:focus-visible){padding-right:48px!important}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:hover,.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}.is-adding .app-input-icon{right:4px}.is-adding.has-text:hover .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:hover .accept-button{pointer-events:auto;opacity:1!important}.is-adding.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:has(.app-input:focus-visible) .accept-button{pointer-events:auto;opacity:1!important}.is-adding .cancel-button{opacity:1!important;pointer-events:auto}.is-adding .dropdown-icon-container{pointer-events:none}.is-adding .accept-button{right:26px;pointer-events:auto}.dropdown-selected{-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%);left:0;width:calc(100% - 22px);pointer-events:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:break-all;padding:.25rem 6px;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),width .1s ease-in-out;color:var(--color-text);display:flex;gap:4px}.dropdown-selected .dropdown-selected-content{overflow:hidden;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.dropdown-selected .dropdown-selected-hazardous{max-width:calc(100% - 22px)}p.dropdown-selected{-webkit-user-select:none;user-select:none;display:block}.app-input-container:has(.app-input:focus-visible) .dropdown-selected{color:#fff;opacity:.7}.app-input-container:has(.app-input:focus-visible) .dropdown-selected .option-icon{color:#fff!important}.has-icon .positive-icon,.has-icon .warning-icon{display:none}.has-icon .dropdown-selected{left:27px;width:calc(100% - 49px)}.has-icon:hover .dropdown-selected{width:calc(100% - 71px)}.has-icon.app-input-container:has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 71px)}.hazard-icon{height:18px;width:max-content}.has-dispatch .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.dispatch-load-count{color:#dadada;font-weight:700}.dispatch-separator{color:#919191;font-weight:400}.dispatch-status{font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:14px;letter-spacing:0%;text-transform:uppercase;color:#ffffffb2;border-radius:2px;padding:2px 4px;display:flex;justify-content:center;align-items:center;gap:4px}.dispatch-status.status-available{background-color:#50ac2533}.dispatch-status.status-dispatched{background-color:#3b73ed33}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label){width:100%}.has-selected .sub-label{opacity:1}.dispatch-icon,.trailer-icon,.truck-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.truck-icon,.trailer-icon{width:42px}.truck-number{width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trailer-number{width:90px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.driver-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dropdown-subitem-end{margin-left:auto;position:relative;height:26px;width:auto;display:flex;justify-content:right;align-items:center;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;vertical-align:bottom}.end-item-base{position:absolute;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);text-align:right}.dispatch-ltl{font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.unassigned-ltl{margin-left:auto;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.end-item-hover{position:absolute;display:flex;justify-content:right;align-items:center;gap:4px;width:max-content;opacity:0;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.selected-end-item{margin-left:auto;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;display:flex;justify-content:right;align-items:center;gap:4px}.group-item{font-family:Montserrat;font-weight:700!important;font-size:11px!important;line-height:18px;letter-spacing:0%;vertical-align:middle;text-transform:uppercase;background-color:#2f2f2f;color:#aaa!important}.group-item:not(:first-child){border-top:1px solid #424242}.group-item .group-icon{margin-left:auto;transform:rotate(180deg);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.group-item.unfolded{color:#fff!important}.group-item.unfolded .group-icon{transform:rotate(0)}.counter{background-color:#424242;padding:1px 4px;border-radius:60px;font-family:Montserrat;font-weight:600;font-size:11px;min-width:18px;line-height:14px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#ffffffb2;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.password-requirement{padding:6px;background-color:#fffffff2!important;box-shadow:0 0 4px #0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:hidden}.password-requirement p{font-family:Montserrat;font-weight:600;font-size:11px;line-height:14px;letter-spacing:0%;vertical-align:middle;color:#6c6c6c;font-style:italic}.password-requirement .icon,.password-requirement .icon-sm{width:14px!important;height:14px!important}.password-requirement .icon.checkmark,.password-requirement .checkmark.icon-sm{color:#ccc}.password-requirement .icon.cancel,.password-requirement .cancel.icon-sm{color:#e66767}.password-requirement ul{list-style-type:none;margin:6px 0 0;padding:0}.password-requirement ul li{color:#424242;font-size:11px;font-style:italic;font-weight:500;line-height:14px;display:flex;gap:4px}.password-requirement ul li.valid{color:#919191!important}.password-requirement ul li:not(:first-child){margin-top:6px}.has-end-item:not(:has(.app-input:disabled)):hover .dropdown-selected{width:calc(100% - 44px)}.has-end-item:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 44px)}.progress-bar{width:24px;height:8px;border-radius:2px;position:relative;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar:after{content:\"\";position:absolute;top:0;width:var(--progress);height:100%;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar.low{background-color:#df3c3c33}.progress-bar.low:after{background-color:#e66767}.progress-bar.medium{background-color:#f89b2e33}.progress-bar.medium:after{background-color:#fab15c}.progress-bar.high{background-color:#56b4ac33}.progress-bar.high:after{background-color:#56b4ac}.progress-bar.disable{background-color:#91919133}.progress-bar.disable:after{display:none}.app-input-container:has(.app-input:focus-visible) .selected-end-item .progress-bar{background-color:#fff!important}.full-icon{color:#919191}.fuelcard-number{width:216px}.fuelcard-brand{width:132px}.owner-ein{width:118px}.has-multiple-dropdown.has-text{border-top-left-radius:0!important;border-top-right-radius:0!important}.multiple-container{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-top-left-radius:2px;border-top-right-radius:2px;position:relative;transition:background-color .1s ease-in-out;background-color:#e9effd}.multiple-container.hovered{background-color:#bed0f9}.multiple-container.hovered .multiple-selected{background-color:#e9effd}.multiple-container.focused{background-color:#0b49d1}.multiple-container.focused .multiple-selected{background-color:#3b73ed;color:#fff}.multiple-selected{background-color:#bed0f9;color:#2f2f2f;transition:background-color .1s ease-in-out,color .1s ease-in-out;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:2px 4px;-webkit-user-select:none;user-select:none;font-family:Montserrat;font-size:14px;font-weight:400;line-height:18px;width:209px;height:22px;border-radius:1px}.multiple-selected p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.multiple-selected:hover{color:#2f2f2f!important;background-color:#fff!important}.multiple-selected:hover .multiple-remove-button{opacity:1}.multiple-selected .multiple-remove-button{opacity:0;background-color:#6692f1;color:#fff;width:14px;height:14px}.multiple-selected .multiple-remove-button .multiple-remove-icon{width:12px;height:12px}.multiple-label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:0;left:6px;transform:translateY(-14px)}.dropdown-group{border-radius:2px;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;margin-top:4px;max-height:var(--max-height);height:var(--max-height);overflow:hidden}.dropdown-group.no-items{cursor:default;pointer-events:none}.dropdown-group .group-item{outline:none;color:#fff!important;font-weight:400!important;font-size:14px!important;display:flex;transition:font-weight .1s ease-in-out,background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);padding-left:6px;padding-right:6px}.dropdown-group .group-item:hover .counter,.dropdown-group .group-item.unfolded .counter{color:#fff}.dropdown-group .group-item.unfolded{font-weight:700!important}.dropdown-group .group-item .counter{margin-left:auto}.dropdown-group .group-item .group-icon{margin-left:0}.dropdown-group:hover:not(.no-items),.dropdown-group.active{background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover,.dropdown-group.active .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .dropdown-item,.dropdown-group.active .dropdown-item{background-color:#424242}.dropdown-group.active{padding:4px;padding-top:0!important}.dropdown-group.active .group-item{position:relative!important;padding-left:2px!important;padding-right:2px!important}.dropdown-group .dropdown-item:not(.group-item):hover{background-color:#6c6c6c!important}.fuel-stop-transaction-store{display:flex;gap:4px}.fuel-stop-transaction-store .fuel-stop-transaction-store-address{font-size:11px;color:#ccc;margin-left:auto}.fuel-stop-transaction-store .favorite-icon{color:#92b1f5;width:14px;height:14px}.fuel-stop-transaction-nostore{padding-left:2px;padding-right:2px}.hide-dropdown{opacity:0;pointer-events:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown) .dropdown-menu-content{transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown).animate-dropdown .dropdown-menu-content{max-height:var(--max-height);height:var(--max-height)}.closing:not(.hide-dropdown) .dropdown-menu-content{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:244px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:244px;opacity:1}to{max-height:0;opacity:0}}.app-input-container:has(.app-input:focus-visible).has-dropdown .loader.loading,.app-input-container:has(.app-input:focus-visible).has-text .loader.loading{opacity:1!important}.app-input-container:has(.app-input:focus-visible).has-dropdown.has-text .loader{transform:translate(-48px)}.loader{position:absolute;top:4px;right:0;transform:translate(-26px);pointer-events:none;z-index:1000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:opacity .1s ease-in-out,transform .1s ease-in-out;opacity:0}.loader-icon{width:14px;height:14px;animation:spin .8s ease-in-out infinite;transform-origin:center;display:flex;align-items:center;justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-22{height:22px}.size-22 .icon,.size-22 .icon-sm{height:14px!important;width:14px!important}.size-22 .bg-icon{height:14px!important;width:14px!important;padding:2px!important}.size-22 .icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.size-22 .app-input,.size-22 .app-input-label{padding-top:2px;padding-bottom:2px;padding-left:4px}.size-22.has-icon .app-input-label{padding-left:0!important}.size-22 .app-input-icon{height:14px!important;width:14px!important}.size-22.has-text .app-input-label,.size-22:has(.app-input:focus-visible) .app-input-label{transform:translateY(-18px)}.size-22 .loader{top:2px;transform:translate(-22px)!important}.strikethrough .app-input,.strikethrough .dropdown-selected-content{text-decoration:line-through}.max-w-280{max-width:280px}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -6975,12 +6986,42 @@ class InputDatetimeDateInputHelper {
     static composeDateValue(parts) {
         return `${parts[0]}/${parts[1]}/${parts[2]}`;
     }
+    static finalizeDatePart(part, partIndex) {
+        const digits = part.replace(/\D/g, '');
+        if (!digits) {
+            return this.DATE_PLACEHOLDERS[partIndex];
+        }
+        if (partIndex === 0) {
+            if (digits === '0') {
+                return this.getNormalizedDatePart(part, partIndex);
+            }
+            const clampedMonth = Math.min(Math.max(Number(digits), 1), 12);
+            return String(clampedMonth).padStart(2, '0');
+        }
+        if (partIndex === 1) {
+            if (digits === '0') {
+                return this.getNormalizedDatePart(part, partIndex);
+            }
+            const clampedDay = Math.min(Math.max(Number(digits), 1), 31);
+            return String(clampedDay).padStart(2, '0');
+        }
+        return digits.slice(-2).padStart(2, '0');
+    }
     static normalizeEmptyDateValue(parts) {
         const isCompletelyEmpty = parts[0] === this.DATE_PLACEHOLDERS[0] &&
             parts[1] === this.DATE_PLACEHOLDERS[1] &&
             parts[2] === this.DATE_PLACEHOLDERS[2];
         return isCompletelyEmpty ? null : this.composeDateValue(parts);
     }
+    static formatDatePartOnNavigation(currentValue, highlightedPart) {
+        if (!this.isValidDatePartIndex(highlightedPart)) {
+            return currentValue;
+        }
+        const nextValueParts = this.parseDateParts(currentValue);
+        nextValueParts[highlightedPart] = this.finalizeDatePart(nextValueParts[highlightedPart], highlightedPart);
+        this.enforceDayLimitByMonth(nextValueParts);
+        return this.normalizeEmptyDateValue(nextValueParts);
+    }
     static buildDatePartFromDigits(digits, partIndex) {
         const maxLength = this.DATE_PART_LENGTHS[partIndex];
         const placeholder = this.DATE_PLACEHOLDERS[partIndex];
@@ -7654,6 +7695,20 @@ class CaiInputDatetimePickerComponent {
         return InputDatetimeFormatHelper.toDate(value, this.isDatePicker());
     }
     moveHighlightedPartRight() {
+        if (this.isDatePicker()) {
+            const nextCurrentValue = InputDatetimeDateInputHelper.formatDatePartOnNavigation(this.currentValue(), this.highlightedPart());
+            this.currentValue.set(nextCurrentValue);
+            const parsedDate = nextCurrentValue
+                ? this.toDate(nextCurrentValue)
+                : null;
+            if (parsedDate) {
+                this.dateTime.set(parsedDate);
+                this.onChange(InputDatetimeFormatHelper.toFormValue(parsedDate, true));
+            }
+            else {
+                this.onChange(null);
+            }
+        }
         if (this.highlightedPart() === null) {
             this.highlightedPart.set(0);
             return;
@@ -7910,7 +7965,7 @@ class CaiInputDatetimePickerComponent {
         this.clearButtonTooltip.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CaiInputDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker, ca-date-time", inputs: { id: "id", inputConfig: "inputConfig", forceInvalidStyling: "forceInvalidStyling" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", onFocusEmitter: "onFocusEmitter" }, providers: [CalendarDateTimePickerService], viewQueries: [{ propertyName: "inputListener", first: true, predicate: ["inputListener"], descendants: true }, { propertyName: "mainPopover", first: true, predicate: ["mainPopover"], descendants: true }, { propertyName: "clearButtonTooltip", first: true, predicate: ["clearButtonTooltip"], descendants: true }, { propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, read: ElementRef }, { propertyName: "dropdownIcon", first: true, predicate: ["dropdownIcon"], descendants: true, read: ElementRef }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n@let invalid =\n  (getSuperControl?.invalid &&\n    (getSuperControl?.touched || getSuperControl?.dirty)) ||\n  shouldShowInternalValidationError();\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n\n<div\n  [id]=\"id\"\n  class=\"datetime-input-container\"\n  [class]=\"{\n    'datetime-valid': valid && !forceInvalidStyling,\n    'datetime-invalid': invalid || forceInvalidStyling,\n    'datetime-disabled': disabled,\n    'datetime-focus': isInputFocused(),\n    'datetime-has-text': !!currentValue(),\n    'datetime-has-date': hasDate(),\n    'datetime-required': isRequired && !disabled,\n    'datetime-in-table': inTable,\n    'datetime-inverse': inverse,\n    'datetime-billing': isBilling,\n    'datetime-popover-open': mainPopover.isOpen(),\n    'datetime-size-22': size === 22,\n    'datetime-icon-hidden': inputConfig.isIconHidden,\n    'force-invalid': forceInvalidStyling,\n  }\"\n  #mainPopover=\"ngbPopover\"\n  [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n  [placement]=\"['bottom-start', 'top-start']\"\n  [triggers]=\"'manual'\"\n  [popoverClass]=\"'datetimepopovermain'\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  (mouseenter)=\"hasFloatingError && errorTooltipContainer.open()\"\n  (mouseleave)=\"hasFloatingError && errorTooltipContainer.close()\"\n  (pointerdown)=\"focusInput($event)\"\n  (dblclick)=\"onInputSelect($event)\"\n>\n  <div class=\"datetime-label\">\n    {{ inputConfig.label }}\n  </div>\n\n  <input\n    #inputListener\n    [id]=\"id\"\n    [value]=\"currentValue() ?? ''\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInputChange($event)\"\n    (paste)=\"onInputPaste($event)\"\n    class=\"datetime-input-listener\"\n    #errorTooltipContainer=\"ngbTooltip\"\n    [disabled]=\"disabled\"\n    [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n    [container]=\"'body'\"\n    [placement]=\"'bottom'\"\n    [triggers]=\"'manual'\"\n    [disableTooltip]=\"isInputFocused()\"\n    tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n  />\n\n  @if (!inputConfig.isIconHidden) {\n    <div\n      #iconContainer\n      class=\"datetime-icon-container\"\n      (click)=\"togglePopover()\"\n    >\n      <svg-icon\n        class=\"datetime-icon\"\n        [name]=\"\n          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n        \"\n      ></svg-icon>\n      <div class=\"datetime-separator\"></div>\n    </div>\n  }\n\n  <div class=\"datetime-input\" [class.selected]=\"isInputSelected()\">\n    @if (isDatePicker()) {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().month !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().month }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().day !== 'DD'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().day }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        [class.filled]=\"displayedValues().year !== 'YY'\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().year }}</span\n      >\n    } @else {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().hour !== 'HH'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().hour }}</span\n      >\n      <span class=\"datetime-input-separator\">:</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().minute !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().minute }}</span\n      >\n      <span\n        class=\"datetime-input-part time-am-pm\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().ampm }}</span\n      >\n    }\n  </div>\n\n  @if (!disabled) {\n    @let tooltipClass =\n      inverse\n        ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"tooltip input-tooltip\";\n\n    @if (showClear) {\n      <button\n        class=\"datetime-cancel-button\"\n        tabindex=\"-1\"\n        ngbTooltip=\"Clear\"\n        [openDelay]=\"600\"\n        [tooltipClass]=\"tooltipClass\"\n        [placement]=\"'top'\"\n        [container]=\"'body'\"\n        [autoClose]=\"true\"\n        #clearButtonTooltip=\"ngbTooltip\"\n        (click)=\"clearInput($event)\"\n        (pointerdown)=\"closeClearButtonTooltip()\"\n        (mouseleave)=\"closeClearButtonTooltip()\"\n      >\n        <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n      </button>\n    }\n    <svg-icon\n      #dropdownIcon\n      class=\"datetime-icon datetime-dropdown-icon\"\n      (click)=\"togglePopover()\"\n      name=\"cai-arrow-secondary-down\"\n    ></svg-icon>\n  }\n  <!-- Error Message -->\n  @if (!inTable || isBilling) {\n    <div class=\"datetime-error-message\">\n      {{\n        shouldShowInternalValidationError()\n          ? internalValidationErrorMessage()\n          : invalid\n            ? (getSuperControl?.errors\n                | errorMessage: inputConfig.customErrors)[0]\n            : \"\"\n      }}\n    </div>\n  }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n  <div\n    class=\"datetime-dropdown-holder\"\n    [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n  >\n    <cai-custom-datetime-pickers\n      [calendarType]=\"isDatePicker() ? 'date' : 'time'\"\n      [inputConfig]=\"inputConfig\"\n      [placeholder]=\"'MM/DD/YY'\"\n      [dateTime]=\"dateTime()\"\n      (closePopover)=\"onPopoverDateChanged($event)\"\n    ></cai-custom-datetime-pickers>\n  </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (inTable && invalid && !isInputFocused()) {\n    {{\n      shouldShowInternalValidationError()\n        ? internalValidationErrorMessage()\n        : (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0]\n    }}\n  }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:text;width:100%;height:26px}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-bg-icon:hover{background-color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-icon:hover{color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-part{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-separator{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.filled{color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#91919133;color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-separator{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-inverse.datetime-valid .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part{height:18px;color:#ffffffb3}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.filled{color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#ffffff4d;color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-separator{color:#ffffffb3}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto!important}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-error-message{opacity:0}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled .datetime-icon,.datetime-input-container.datetime-disabled .datetime-dropdown-icon{cursor:default}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1;cursor:pointer}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .1s ease-in-out,opacity .1s ease-in-out,transform .15s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0);cursor:pointer}.datetime-size-22{height:22px!important;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .1s ease-in-out,transform .1s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-input-listener{opacity:0;pointer-events:none;position:absolute;inset:0}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto;width:max-content}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}.datetime-input{font-size:14px;line-height:18px;font-weight:400;width:100%;opacity:0;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.datetime-input .datetime-input-separator{background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part{position:relative;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part.time-am-pm{margin-left:4px}.datetime-input .datetime-input-part:after{content:\"\";inset:0 -3px;position:absolute}.datetime-input.selected .datetime-input-part,.datetime-input.selected .datetime-input-separator{background-color:#ffffff4d}.datetime-input.selected .time-am-pm{margin-left:0!important;padding-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker, ca-date-time", inputs: { id: "id", inputConfig: "inputConfig", forceInvalidStyling: "forceInvalidStyling" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", onFocusEmitter: "onFocusEmitter" }, providers: [CalendarDateTimePickerService], viewQueries: [{ propertyName: "inputListener", first: true, predicate: ["inputListener"], descendants: true }, { propertyName: "mainPopover", first: true, predicate: ["mainPopover"], descendants: true }, { propertyName: "clearButtonTooltip", first: true, predicate: ["clearButtonTooltip"], descendants: true }, { propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, read: ElementRef }, { propertyName: "dropdownIcon", first: true, predicate: ["dropdownIcon"], descendants: true, read: ElementRef }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n@let invalid =\n  (getSuperControl?.invalid &&\n    (getSuperControl?.touched || getSuperControl?.dirty)) ||\n  shouldShowInternalValidationError();\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n\n<div\n  [id]=\"id\"\n  class=\"datetime-input-container\"\n  [class]=\"{\n    'datetime-valid': valid && !forceInvalidStyling,\n    'datetime-invalid': invalid || forceInvalidStyling,\n    'datetime-disabled': disabled,\n    'datetime-focus': isInputFocused(),\n    'datetime-has-text': !!currentValue(),\n    'datetime-has-date': hasDate(),\n    'datetime-required': isRequired && !disabled,\n    'datetime-in-table': inTable,\n    'datetime-inverse': inverse,\n    'datetime-billing': isBilling,\n    'datetime-popover-open': mainPopover.isOpen(),\n    'datetime-size-22': size === 22,\n    'datetime-icon-hidden': inputConfig.isIconHidden,\n    'force-invalid': forceInvalidStyling,\n  }\"\n  #mainPopover=\"ngbPopover\"\n  [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n  [placement]=\"['bottom-start', 'top-start']\"\n  [triggers]=\"'manual'\"\n  [popoverClass]=\"'datetimepopovermain'\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  (mouseenter)=\"hasFloatingError && errorTooltipContainer.open()\"\n  (mouseleave)=\"hasFloatingError && errorTooltipContainer.close()\"\n  (pointerdown)=\"focusInput($event)\"\n  (dblclick)=\"onInputSelect($event)\"\n>\n  <div class=\"datetime-label\">\n    {{ inputConfig.label }}\n  </div>\n\n  <input\n    #inputListener\n    [id]=\"id\"\n    [value]=\"currentValue() ?? ''\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInputChange($event)\"\n    (paste)=\"onInputPaste($event)\"\n    class=\"datetime-input-listener\"\n    #errorTooltipContainer=\"ngbTooltip\"\n    [disabled]=\"disabled\"\n    [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n    [container]=\"'body'\"\n    [placement]=\"'bottom'\"\n    [triggers]=\"'manual'\"\n    [disableTooltip]=\"isInputFocused()\"\n    tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n  />\n\n  @if (!inputConfig.isIconHidden) {\n    <div\n      #iconContainer\n      class=\"datetime-icon-container\"\n      (click)=\"togglePopover()\"\n    >\n      <svg-icon\n        class=\"datetime-icon\"\n        [name]=\"\n          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n        \"\n      ></svg-icon>\n      <div class=\"datetime-separator\"></div>\n    </div>\n  }\n\n  <div class=\"datetime-input\" [class.selected]=\"isInputSelected()\">\n    @if (isDatePicker()) {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().month !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().month }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().day !== 'DD'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().day }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        [class.filled]=\"displayedValues().year !== 'YY'\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().year }}</span\n      >\n    } @else {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().hour !== 'HH'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().hour }}</span\n      >\n      <span class=\"datetime-input-separator\">:</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().minute !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().minute }}</span\n      >\n      <span\n        class=\"datetime-input-part time-am-pm\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().ampm }}</span\n      >\n    }\n  </div>\n\n  @if (!disabled) {\n    @let tooltipClass =\n      inverse\n        ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"tooltip input-tooltip\";\n\n    @if (showClear) {\n      <button\n        class=\"datetime-cancel-button\"\n        type=\"button\"\n        tabindex=\"-1\"\n        ngbTooltip=\"Clear\"\n        [openDelay]=\"600\"\n        [tooltipClass]=\"tooltipClass\"\n        [placement]=\"'top'\"\n        [container]=\"'body'\"\n        [autoClose]=\"true\"\n        #clearButtonTooltip=\"ngbTooltip\"\n        (click)=\"clearInput($event)\"\n        (pointerdown)=\"closeClearButtonTooltip()\"\n        (mouseleave)=\"closeClearButtonTooltip()\"\n      >\n        <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n      </button>\n    }\n    <svg-icon\n      #dropdownIcon\n      class=\"datetime-icon datetime-dropdown-icon\"\n      (click)=\"togglePopover()\"\n      name=\"cai-arrow-secondary-down\"\n    ></svg-icon>\n  }\n  <!-- Error Message -->\n  @if (!inTable || isBilling) {\n    <div class=\"datetime-error-message\">\n      {{\n        shouldShowInternalValidationError()\n          ? internalValidationErrorMessage()\n          : invalid\n            ? (getSuperControl?.errors\n                | errorMessage: inputConfig.customErrors)[0]\n            : \"\"\n      }}\n    </div>\n  }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n  <div\n    class=\"datetime-dropdown-holder\"\n    [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n  >\n    <cai-custom-datetime-pickers\n      [calendarType]=\"isDatePicker() ? 'date' : 'time'\"\n      [inputConfig]=\"inputConfig\"\n      [placeholder]=\"'MM/DD/YY'\"\n      [dateTime]=\"dateTime()\"\n      (closePopover)=\"onPopoverDateChanged($event)\"\n    ></cai-custom-datetime-pickers>\n  </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (inTable && invalid && !isInputFocused()) {\n    {{\n      shouldShowInternalValidationError()\n        ? internalValidationErrorMessage()\n        : (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0]\n    }}\n  }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:text;width:100%;height:26px}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-bg-icon:hover{background-color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-icon:hover{color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-part{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-separator{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.filled{color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#91919133;color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-separator{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-inverse.datetime-valid .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part{height:18px;color:#ffffffb3}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.filled{color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#ffffff4d;color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-separator{color:#ffffffb3}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto!important}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-error-message{opacity:0}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled .datetime-icon,.datetime-input-container.datetime-disabled .datetime-dropdown-icon{cursor:default}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-label{color:var(--color-text-neutral)!important}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1;cursor:pointer}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .1s ease-in-out,opacity .1s ease-in-out,transform .15s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0);cursor:pointer}.datetime-size-22{height:22px!important;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .1s ease-in-out,transform .1s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-input-listener{opacity:0;pointer-events:none;position:absolute;inset:0}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto;width:max-content}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}.datetime-input{font-size:14px;line-height:18px;font-weight:400;width:100%;opacity:0;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.datetime-input .datetime-input-separator{background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part{position:relative;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part.time-am-pm{margin-left:4px}.datetime-input .datetime-input-part:after{content:\"\";inset:0 -3px;position:absolute}.datetime-input.selected .datetime-input-part,.datetime-input.selected .datetime-input-separator{background-color:#ffffff4d}.datetime-input.selected .time-am-pm{margin-left:0!important;padding-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Modules
                 CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i1$2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
                 // Components
@@ -7931,7 +7986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         CaCustomDatetimePickersComponent,
                         // Pipes
                         ErrorMessagePipe,
-                    ], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n@let invalid =\n  (getSuperControl?.invalid &&\n    (getSuperControl?.touched || getSuperControl?.dirty)) ||\n  shouldShowInternalValidationError();\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n\n<div\n  [id]=\"id\"\n  class=\"datetime-input-container\"\n  [class]=\"{\n    'datetime-valid': valid && !forceInvalidStyling,\n    'datetime-invalid': invalid || forceInvalidStyling,\n    'datetime-disabled': disabled,\n    'datetime-focus': isInputFocused(),\n    'datetime-has-text': !!currentValue(),\n    'datetime-has-date': hasDate(),\n    'datetime-required': isRequired && !disabled,\n    'datetime-in-table': inTable,\n    'datetime-inverse': inverse,\n    'datetime-billing': isBilling,\n    'datetime-popover-open': mainPopover.isOpen(),\n    'datetime-size-22': size === 22,\n    'datetime-icon-hidden': inputConfig.isIconHidden,\n    'force-invalid': forceInvalidStyling,\n  }\"\n  #mainPopover=\"ngbPopover\"\n  [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n  [placement]=\"['bottom-start', 'top-start']\"\n  [triggers]=\"'manual'\"\n  [popoverClass]=\"'datetimepopovermain'\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  (mouseenter)=\"hasFloatingError && errorTooltipContainer.open()\"\n  (mouseleave)=\"hasFloatingError && errorTooltipContainer.close()\"\n  (pointerdown)=\"focusInput($event)\"\n  (dblclick)=\"onInputSelect($event)\"\n>\n  <div class=\"datetime-label\">\n    {{ inputConfig.label }}\n  </div>\n\n  <input\n    #inputListener\n    [id]=\"id\"\n    [value]=\"currentValue() ?? ''\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInputChange($event)\"\n    (paste)=\"onInputPaste($event)\"\n    class=\"datetime-input-listener\"\n    #errorTooltipContainer=\"ngbTooltip\"\n    [disabled]=\"disabled\"\n    [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n    [container]=\"'body'\"\n    [placement]=\"'bottom'\"\n    [triggers]=\"'manual'\"\n    [disableTooltip]=\"isInputFocused()\"\n    tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n  />\n\n  @if (!inputConfig.isIconHidden) {\n    <div\n      #iconContainer\n      class=\"datetime-icon-container\"\n      (click)=\"togglePopover()\"\n    >\n      <svg-icon\n        class=\"datetime-icon\"\n        [name]=\"\n          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n        \"\n      ></svg-icon>\n      <div class=\"datetime-separator\"></div>\n    </div>\n  }\n\n  <div class=\"datetime-input\" [class.selected]=\"isInputSelected()\">\n    @if (isDatePicker()) {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().month !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().month }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().day !== 'DD'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().day }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        [class.filled]=\"displayedValues().year !== 'YY'\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().year }}</span\n      >\n    } @else {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().hour !== 'HH'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().hour }}</span\n      >\n      <span class=\"datetime-input-separator\">:</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().minute !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().minute }}</span\n      >\n      <span\n        class=\"datetime-input-part time-am-pm\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().ampm }}</span\n      >\n    }\n  </div>\n\n  @if (!disabled) {\n    @let tooltipClass =\n      inverse\n        ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"tooltip input-tooltip\";\n\n    @if (showClear) {\n      <button\n        class=\"datetime-cancel-button\"\n        tabindex=\"-1\"\n        ngbTooltip=\"Clear\"\n        [openDelay]=\"600\"\n        [tooltipClass]=\"tooltipClass\"\n        [placement]=\"'top'\"\n        [container]=\"'body'\"\n        [autoClose]=\"true\"\n        #clearButtonTooltip=\"ngbTooltip\"\n        (click)=\"clearInput($event)\"\n        (pointerdown)=\"closeClearButtonTooltip()\"\n        (mouseleave)=\"closeClearButtonTooltip()\"\n      >\n        <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n      </button>\n    }\n    <svg-icon\n      #dropdownIcon\n      class=\"datetime-icon datetime-dropdown-icon\"\n      (click)=\"togglePopover()\"\n      name=\"cai-arrow-secondary-down\"\n    ></svg-icon>\n  }\n  <!-- Error Message -->\n  @if (!inTable || isBilling) {\n    <div class=\"datetime-error-message\">\n      {{\n        shouldShowInternalValidationError()\n          ? internalValidationErrorMessage()\n          : invalid\n            ? (getSuperControl?.errors\n                | errorMessage: inputConfig.customErrors)[0]\n            : \"\"\n      }}\n    </div>\n  }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n  <div\n    class=\"datetime-dropdown-holder\"\n    [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n  >\n    <cai-custom-datetime-pickers\n      [calendarType]=\"isDatePicker() ? 'date' : 'time'\"\n      [inputConfig]=\"inputConfig\"\n      [placeholder]=\"'MM/DD/YY'\"\n      [dateTime]=\"dateTime()\"\n      (closePopover)=\"onPopoverDateChanged($event)\"\n    ></cai-custom-datetime-pickers>\n  </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (inTable && invalid && !isInputFocused()) {\n    {{\n      shouldShowInternalValidationError()\n        ? internalValidationErrorMessage()\n        : (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0]\n    }}\n  }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:text;width:100%;height:26px}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-bg-icon:hover{background-color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-icon:hover{color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-part{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-separator{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.filled{color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#91919133;color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-separator{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-inverse.datetime-valid .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part{height:18px;color:#ffffffb3}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.filled{color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#ffffff4d;color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-separator{color:#ffffffb3}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto!important}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-error-message{opacity:0}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled .datetime-icon,.datetime-input-container.datetime-disabled .datetime-dropdown-icon{cursor:default}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1;cursor:pointer}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .1s ease-in-out,opacity .1s ease-in-out,transform .15s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0);cursor:pointer}.datetime-size-22{height:22px!important;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .1s ease-in-out,transform .1s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-input-listener{opacity:0;pointer-events:none;position:absolute;inset:0}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto;width:max-content}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}.datetime-input{font-size:14px;line-height:18px;font-weight:400;width:100%;opacity:0;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.datetime-input .datetime-input-separator{background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part{position:relative;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part.time-am-pm{margin-left:4px}.datetime-input .datetime-input-part:after{content:\"\";inset:0 -3px;position:absolute}.datetime-input.selected .datetime-input-part,.datetime-input.selected .datetime-input-separator{background-color:#ffffff4d}.datetime-input.selected .time-am-pm{margin-left:0!important;padding-left:4px!important}\n"] }]
+                    ], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n@let invalid =\n  (getSuperControl?.invalid &&\n    (getSuperControl?.touched || getSuperControl?.dirty)) ||\n  shouldShowInternalValidationError();\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n\n<div\n  [id]=\"id\"\n  class=\"datetime-input-container\"\n  [class]=\"{\n    'datetime-valid': valid && !forceInvalidStyling,\n    'datetime-invalid': invalid || forceInvalidStyling,\n    'datetime-disabled': disabled,\n    'datetime-focus': isInputFocused(),\n    'datetime-has-text': !!currentValue(),\n    'datetime-has-date': hasDate(),\n    'datetime-required': isRequired && !disabled,\n    'datetime-in-table': inTable,\n    'datetime-inverse': inverse,\n    'datetime-billing': isBilling,\n    'datetime-popover-open': mainPopover.isOpen(),\n    'datetime-size-22': size === 22,\n    'datetime-icon-hidden': inputConfig.isIconHidden,\n    'force-invalid': forceInvalidStyling,\n  }\"\n  #mainPopover=\"ngbPopover\"\n  [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n  [placement]=\"['bottom-start', 'top-start']\"\n  [triggers]=\"'manual'\"\n  [popoverClass]=\"'datetimepopovermain'\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  (mouseenter)=\"hasFloatingError && errorTooltipContainer.open()\"\n  (mouseleave)=\"hasFloatingError && errorTooltipContainer.close()\"\n  (pointerdown)=\"focusInput($event)\"\n  (dblclick)=\"onInputSelect($event)\"\n>\n  <div class=\"datetime-label\">\n    {{ inputConfig.label }}\n  </div>\n\n  <input\n    #inputListener\n    [id]=\"id\"\n    [value]=\"currentValue() ?? ''\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInputChange($event)\"\n    (paste)=\"onInputPaste($event)\"\n    class=\"datetime-input-listener\"\n    #errorTooltipContainer=\"ngbTooltip\"\n    [disabled]=\"disabled\"\n    [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n    [container]=\"'body'\"\n    [placement]=\"'bottom'\"\n    [triggers]=\"'manual'\"\n    [disableTooltip]=\"isInputFocused()\"\n    tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n  />\n\n  @if (!inputConfig.isIconHidden) {\n    <div\n      #iconContainer\n      class=\"datetime-icon-container\"\n      (click)=\"togglePopover()\"\n    >\n      <svg-icon\n        class=\"datetime-icon\"\n        [name]=\"\n          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n        \"\n      ></svg-icon>\n      <div class=\"datetime-separator\"></div>\n    </div>\n  }\n\n  <div class=\"datetime-input\" [class.selected]=\"isInputSelected()\">\n    @if (isDatePicker()) {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().month !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().month }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().day !== 'DD'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().day }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        [class.filled]=\"displayedValues().year !== 'YY'\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().year }}</span\n      >\n    } @else {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().hour !== 'HH'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().hour }}</span\n      >\n      <span class=\"datetime-input-separator\">:</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().minute !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().minute }}</span\n      >\n      <span\n        class=\"datetime-input-part time-am-pm\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().ampm }}</span\n      >\n    }\n  </div>\n\n  @if (!disabled) {\n    @let tooltipClass =\n      inverse\n        ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"tooltip input-tooltip\";\n\n    @if (showClear) {\n      <button\n        class=\"datetime-cancel-button\"\n        type=\"button\"\n        tabindex=\"-1\"\n        ngbTooltip=\"Clear\"\n        [openDelay]=\"600\"\n        [tooltipClass]=\"tooltipClass\"\n        [placement]=\"'top'\"\n        [container]=\"'body'\"\n        [autoClose]=\"true\"\n        #clearButtonTooltip=\"ngbTooltip\"\n        (click)=\"clearInput($event)\"\n        (pointerdown)=\"closeClearButtonTooltip()\"\n        (mouseleave)=\"closeClearButtonTooltip()\"\n      >\n        <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n      </button>\n    }\n    <svg-icon\n      #dropdownIcon\n      class=\"datetime-icon datetime-dropdown-icon\"\n      (click)=\"togglePopover()\"\n      name=\"cai-arrow-secondary-down\"\n    ></svg-icon>\n  }\n  <!-- Error Message -->\n  @if (!inTable || isBilling) {\n    <div class=\"datetime-error-message\">\n      {{\n        shouldShowInternalValidationError()\n          ? internalValidationErrorMessage()\n          : invalid\n            ? (getSuperControl?.errors\n                | errorMessage: inputConfig.customErrors)[0]\n            : \"\"\n      }}\n    </div>\n  }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n  <div\n    class=\"datetime-dropdown-holder\"\n    [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n  >\n    <cai-custom-datetime-pickers\n      [calendarType]=\"isDatePicker() ? 'date' : 'time'\"\n      [inputConfig]=\"inputConfig\"\n      [placeholder]=\"'MM/DD/YY'\"\n      [dateTime]=\"dateTime()\"\n      (closePopover)=\"onPopoverDateChanged($event)\"\n    ></cai-custom-datetime-pickers>\n  </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (inTable && invalid && !isInputFocused()) {\n    {{\n      shouldShowInternalValidationError()\n        ? internalValidationErrorMessage()\n        : (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0]\n    }}\n  }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:text;width:100%;height:26px}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-bg-icon:hover{background-color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-icon:hover{color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-part{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-separator{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.filled{color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#91919133;color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-separator{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-inverse.datetime-valid .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part{height:18px;color:#ffffffb3}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.filled{color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#ffffff4d;color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-separator{color:#ffffffb3}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto!important}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-error-message{opacity:0}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled .datetime-icon,.datetime-input-container.datetime-disabled .datetime-dropdown-icon{cursor:default}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-label{color:var(--color-text-neutral)!important}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1;cursor:pointer}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .1s ease-in-out,opacity .1s ease-in-out,transform .15s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0);cursor:pointer}.datetime-size-22{height:22px!important;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .1s ease-in-out,transform .1s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-input-listener{opacity:0;pointer-events:none;position:absolute;inset:0}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto;width:max-content}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}.datetime-input{font-size:14px;line-height:18px;font-weight:400;width:100%;opacity:0;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.datetime-input .datetime-input-separator{background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part{position:relative;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part.time-am-pm{margin-left:4px}.datetime-input .datetime-input-part:after{content:\"\";inset:0 -3px;position:absolute}.datetime-input.selected .datetime-input-part,.datetime-input.selected .datetime-input-separator{background-color:#ffffff4d}.datetime-input.selected .time-am-pm{margin-left:0!important;padding-left:4px!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputListener: [{
                 type: ViewChild,
                 args: ['inputListener']
@@ -9816,11 +9871,35 @@ var eScrollState;
 class StickyScrollbarComponent {
     scrollContainer;
     scrollThumb;
+    leftInternalShadow;
+    rightInternalShadow;
     /**
      * Input to hide the scrollbar thumb with opacity
      * @default false
      */
     hideThumb = false;
+    /**
+     * Shows a transparent drag overlay above projected content while dragging.
+     * Helps suppress hover/mouseover interactions in heavy table cells.
+     * @default false
+     */
+    blockContentInteractionsWhileDragging = false;
+    /**
+     * Renders internal 8px edge shadows and disables output emissions.
+     * Keeps scroll handling fully outside Angular zone for heavy tables.
+     * @default false
+     */
+    set useInternalShadows(value) {
+        const previousValue = this._useInternalShadows;
+        this._useInternalShadows = value;
+        if (this.isInitialized && previousValue !== value) {
+            this.updateScrollbar();
+        }
+    }
+    get useInternalShadows() {
+        return this._useInternalShadows;
+    }
+    _useInternalShadows = false;
     /**
      * Hide the scrollbar track completely
      */
@@ -9887,6 +9966,8 @@ class StickyScrollbarComponent {
     lastTrackVisible;
     lastThumbWidth = -1;
     lastThumbPosition = -1;
+    showLeftInternalShadow = false;
+    showRightInternalShadow = false;
     ngAfterViewInit() {
         this.updateScrollbar();
         this.setupResizeObserver();
@@ -9986,8 +10067,12 @@ class StickyScrollbarComponent {
     }
     updateScrollbar() {
         const container = this.scrollContainer.nativeElement;
+        const containerWidth = container.clientWidth;
+        const contentWidth = container.scrollWidth;
+        const scrollLeft = container.scrollLeft;
+        const newState = this.calculateScrollState();
+        this.updateInternalShadowVisibility(newState);
         if (this.hideTrack) {
-            const newState = this.calculateScrollState();
             this.updateScrollState(newState);
             return;
         }
@@ -9996,9 +10081,6 @@ class StickyScrollbarComponent {
         if (!track) {
             return;
         }
-        const containerWidth = container.clientWidth;
-        const contentWidth = container.scrollWidth;
-        const scrollLeft = container.scrollLeft;
         const thumbWidth = (containerWidth / contentWidth) * containerWidth;
         const maxScroll = Math.max(contentWidth - containerWidth, 1);
         const maxThumbTravel = containerWidth - thumbWidth;
@@ -10017,7 +10099,6 @@ class StickyScrollbarComponent {
             this.lastThumbPosition = thumbPosition;
             this.renderer.setStyle(thumb, 'transform', `translateX(${thumbPosition}px)`);
         }
-        const newState = this.calculateScrollState();
         this.updateScrollState(newState);
     }
     setupResizeObserver() {
@@ -10087,7 +10168,40 @@ class StickyScrollbarComponent {
     updateScrollState(newState) {
         if (this.currentScrollState !== newState) {
             this.currentScrollState = newState;
-            this.scrollStateChange.emit(newState);
+            if (!this.useInternalShadows) {
+                this.scrollStateChange.emit(newState);
+            }
+        }
+    }
+    updateInternalShadowVisibility(scrollState) {
+        if (!this.useInternalShadows) {
+            this.showLeftInternalShadow = false;
+            this.showRightInternalShadow = false;
+            return;
+        }
+        const showLeft = scrollState === eScrollState.SCROLLING || scrollState === eScrollState.END;
+        const showRight = scrollState === eScrollState.SCROLLING || scrollState === eScrollState.START;
+        if (this.showLeftInternalShadow === showLeft &&
+            this.showRightInternalShadow === showRight) {
+            return;
+        }
+        this.showLeftInternalShadow = showLeft;
+        this.showRightInternalShadow = showRight;
+        if (this.leftInternalShadow?.nativeElement) {
+            if (showLeft) {
+                this.renderer.removeClass(this.leftInternalShadow.nativeElement, 'hide-shadow');
+            }
+            else {
+                this.renderer.addClass(this.leftInternalShadow.nativeElement, 'hide-shadow');
+            }
+        }
+        if (this.rightInternalShadow?.nativeElement) {
+            if (showRight) {
+                this.renderer.removeClass(this.rightInternalShadow.nativeElement, 'hide-shadow');
+            }
+            else {
+                this.renderer.addClass(this.rightInternalShadow.nativeElement, 'hide-shadow');
+            }
         }
     }
     calculateScrollState() {
@@ -10126,6 +10240,12 @@ class StickyScrollbarComponent {
     }
     onThumbMouseUp() {
         this.isDragging = false;
+        if (this.useInternalShadows) {
+            // Keep drag-end path zoneless while ensuring drag-bound template state
+            // (thumb class and optional drag overlay) is immediately reconciled.
+            this.cdr.detectChanges();
+            return;
+        }
         // Re-enter zone and trigger change detection for template binding [class.dragging]
         this.ngZone.run(() => this.cdr.markForCheck());
     }
@@ -10150,19 +10270,29 @@ class StickyScrollbarComponent {
         this.updateScrollState(this.calculateScrollState());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StickyScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: StickyScrollbarComponent, isStandalone: true, selector: "ca-sticky-scrollbar", inputs: { hideThumb: "hideThumb", hideTrack: "hideTrack", alwaysVisible: "alwaysVisible", stickyOffset: "stickyOffset" }, outputs: { scrollStateChange: "scrollStateChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "scrollThumb", first: true, predicate: ["scrollThumb"], descendants: true }], ngImport: i0, template: "<div class=\"sticky-scrollbar-wrapper\">\n  <div\n    #scrollContainer\n    class=\"sticky-scrollbar-container\"\n    cdkScrollable\n    tabindex=\"-1\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (alwaysVisible && !isContainerInView()) {\n    <div class=\"sticky-scrollbar-placeholder\"></div>\n  }\n  <div\n    class=\"sticky-scrollbar-track\"\n    [class.hidden]=\"hideTrack\"\n    [class.always-visible]=\"alwaysVisible\"\n    [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\n    [style.bottom.px]=\"stickyOffset\"\n  >\n    <div\n      #scrollThumb\n      class=\"sticky-scrollbar-thumb\"\n      [class.dragging]=\"isDragging\"\n      [class.hidden-thumb]=\"hideThumb\"\n      (mousedown)=\"onThumbMouseDown($event)\"\n      (mouseup)=\"onThumbMouseUp()\"\n    ></div>\n  </div>\n</div>\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overscroll-behavior-x:none}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;contain:layout style paint;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-container:focus-visible{outline:none!important}.sticky-scrollbar-placeholder{height:14px;visibility:hidden;pointer-events:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;height:14px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-track:hover .sticky-scrollbar-thumb{height:6px;background-color:#00000080}.sticky-scrollbar-thumb{position:relative;height:2px;background-color:#0003;border-radius:2px;transition:background-color .1s ease-in-out,opacity .1s ease-in-out,height .1s ease-in-out;min-width:30px;will-change:transform,width,opacity;transform:translateZ(0);opacity:1}@starting-style{.sticky-scrollbar-thumb{opacity:0}}.sticky-scrollbar-thumb.hidden-thumb{opacity:0}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;inset:-6px -4px;pointer-events:auto}.sticky-scrollbar-thumb:hover,.sticky-scrollbar-thumb.dragging{background-color:#00000080;height:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: StickyScrollbarComponent, isStandalone: true, selector: "ca-sticky-scrollbar", inputs: { hideThumb: "hideThumb", blockContentInteractionsWhileDragging: "blockContentInteractionsWhileDragging", useInternalShadows: "useInternalShadows", hideTrack: "hideTrack", alwaysVisible: "alwaysVisible", stickyOffset: "stickyOffset" }, outputs: { scrollStateChange: "scrollStateChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "scrollThumb", first: true, predicate: ["scrollThumb"], descendants: true }, { propertyName: "leftInternalShadow", first: true, predicate: ["leftInternalShadow"], descendants: true }, { propertyName: "rightInternalShadow", first: true, predicate: ["rightInternalShadow"], descendants: true }], ngImport: i0, template: "<div class=\"sticky-scrollbar-wrapper\">\n  <div\n    #scrollContainer\n    class=\"sticky-scrollbar-container\"\n    cdkScrollable\n    tabindex=\"-1\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (useInternalShadows) {\n    <div\n      #leftInternalShadow\n      class=\"sticky-scrollbar-internal-shadow sticky-scrollbar-internal-shadow-left hide-shadow\"\n    ></div>\n    <div\n      #rightInternalShadow\n      class=\"sticky-scrollbar-internal-shadow sticky-scrollbar-internal-shadow-right hide-shadow\"\n    ></div>\n  }\n  @if (blockContentInteractionsWhileDragging && isDragging) {\n    <div class=\"sticky-scrollbar-drag-overlay\"></div>\n  }\n  @if (alwaysVisible && !isContainerInView()) {\n    <div class=\"sticky-scrollbar-placeholder\"></div>\n  }\n  <div\n    class=\"sticky-scrollbar-track\"\n    [class.hidden]=\"hideTrack\"\n    [class.always-visible]=\"alwaysVisible\"\n    [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\n    [style.bottom.px]=\"stickyOffset\"\n  >\n    <div\n      #scrollThumb\n      class=\"sticky-scrollbar-thumb\"\n      [class.dragging]=\"isDragging\"\n      [class.hidden-thumb]=\"hideThumb\"\n      (mousedown)=\"onThumbMouseDown($event)\"\n      (mouseup)=\"onThumbMouseUp()\"\n    ></div>\n  </div>\n</div>\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overscroll-behavior-x:none}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;contain:layout style paint;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-container:focus-visible{outline:none!important}.sticky-scrollbar-placeholder{height:14px;visibility:hidden;pointer-events:none}.sticky-scrollbar-drag-overlay{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9}.sticky-scrollbar-internal-shadow{position:absolute;top:0;bottom:14px;width:8px;opacity:1;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none;z-index:8}.sticky-scrollbar-internal-shadow.hide-shadow{opacity:0}.sticky-scrollbar-internal-shadow-left{left:0;background-image:linear-gradient(to right,#eeeeee,transparent)}.sticky-scrollbar-internal-shadow-right{right:0;background-image:linear-gradient(to left,#eeeeee,transparent)}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;height:14px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-track:hover .sticky-scrollbar-thumb{height:6px;background-color:#00000080}.sticky-scrollbar-thumb{position:relative;height:2px;background-color:#0003;border-radius:2px;transition:background-color .1s ease-in-out,opacity .1s ease-in-out,height .1s ease-in-out;min-width:30px;will-change:transform,width,opacity;transform:translateZ(0);opacity:1}@starting-style{.sticky-scrollbar-thumb{opacity:0}}.sticky-scrollbar-thumb.hidden-thumb{opacity:0}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;inset:-6px -4px;pointer-events:auto}.sticky-scrollbar-thumb:hover,.sticky-scrollbar-thumb.dragging{background-color:#00000080;height:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StickyScrollbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ca-sticky-scrollbar', imports: [CommonModule, CdkScrollable], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sticky-scrollbar-wrapper\">\n  <div\n    #scrollContainer\n    class=\"sticky-scrollbar-container\"\n    cdkScrollable\n    tabindex=\"-1\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (alwaysVisible && !isContainerInView()) {\n    <div class=\"sticky-scrollbar-placeholder\"></div>\n  }\n  <div\n    class=\"sticky-scrollbar-track\"\n    [class.hidden]=\"hideTrack\"\n    [class.always-visible]=\"alwaysVisible\"\n    [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\n    [style.bottom.px]=\"stickyOffset\"\n  >\n    <div\n      #scrollThumb\n      class=\"sticky-scrollbar-thumb\"\n      [class.dragging]=\"isDragging\"\n      [class.hidden-thumb]=\"hideThumb\"\n      (mousedown)=\"onThumbMouseDown($event)\"\n      (mouseup)=\"onThumbMouseUp()\"\n    ></div>\n  </div>\n</div>\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overscroll-behavior-x:none}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;contain:layout style paint;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-container:focus-visible{outline:none!important}.sticky-scrollbar-placeholder{height:14px;visibility:hidden;pointer-events:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;height:14px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-track:hover .sticky-scrollbar-thumb{height:6px;background-color:#00000080}.sticky-scrollbar-thumb{position:relative;height:2px;background-color:#0003;border-radius:2px;transition:background-color .1s ease-in-out,opacity .1s ease-in-out,height .1s ease-in-out;min-width:30px;will-change:transform,width,opacity;transform:translateZ(0);opacity:1}@starting-style{.sticky-scrollbar-thumb{opacity:0}}.sticky-scrollbar-thumb.hidden-thumb{opacity:0}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;inset:-6px -4px;pointer-events:auto}.sticky-scrollbar-thumb:hover,.sticky-scrollbar-thumb.dragging{background-color:#00000080;height:6px}\n"] }]
+            args: [{ selector: 'ca-sticky-scrollbar', imports: [CommonModule, CdkScrollable], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sticky-scrollbar-wrapper\">\n  <div\n    #scrollContainer\n    class=\"sticky-scrollbar-container\"\n    cdkScrollable\n    tabindex=\"-1\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (useInternalShadows) {\n    <div\n      #leftInternalShadow\n      class=\"sticky-scrollbar-internal-shadow sticky-scrollbar-internal-shadow-left hide-shadow\"\n    ></div>\n    <div\n      #rightInternalShadow\n      class=\"sticky-scrollbar-internal-shadow sticky-scrollbar-internal-shadow-right hide-shadow\"\n    ></div>\n  }\n  @if (blockContentInteractionsWhileDragging && isDragging) {\n    <div class=\"sticky-scrollbar-drag-overlay\"></div>\n  }\n  @if (alwaysVisible && !isContainerInView()) {\n    <div class=\"sticky-scrollbar-placeholder\"></div>\n  }\n  <div\n    class=\"sticky-scrollbar-track\"\n    [class.hidden]=\"hideTrack\"\n    [class.always-visible]=\"alwaysVisible\"\n    [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\n    [style.bottom.px]=\"stickyOffset\"\n  >\n    <div\n      #scrollThumb\n      class=\"sticky-scrollbar-thumb\"\n      [class.dragging]=\"isDragging\"\n      [class.hidden-thumb]=\"hideThumb\"\n      (mousedown)=\"onThumbMouseDown($event)\"\n      (mouseup)=\"onThumbMouseUp()\"\n    ></div>\n  </div>\n</div>\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overscroll-behavior-x:none}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;contain:layout style paint;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-container:focus-visible{outline:none!important}.sticky-scrollbar-placeholder{height:14px;visibility:hidden;pointer-events:none}.sticky-scrollbar-drag-overlay{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9}.sticky-scrollbar-internal-shadow{position:absolute;top:0;bottom:14px;width:8px;opacity:1;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none;z-index:8}.sticky-scrollbar-internal-shadow.hide-shadow{opacity:0}.sticky-scrollbar-internal-shadow-left{left:0;background-image:linear-gradient(to right,#eeeeee,transparent)}.sticky-scrollbar-internal-shadow-right{right:0;background-image:linear-gradient(to left,#eeeeee,transparent)}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;height:14px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-track:hover .sticky-scrollbar-thumb{height:6px;background-color:#00000080}.sticky-scrollbar-thumb{position:relative;height:2px;background-color:#0003;border-radius:2px;transition:background-color .1s ease-in-out,opacity .1s ease-in-out,height .1s ease-in-out;min-width:30px;will-change:transform,width,opacity;transform:translateZ(0);opacity:1}@starting-style{.sticky-scrollbar-thumb{opacity:0}}.sticky-scrollbar-thumb.hidden-thumb{opacity:0}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;inset:-6px -4px;pointer-events:auto}.sticky-scrollbar-thumb:hover,.sticky-scrollbar-thumb.dragging{background-color:#00000080;height:6px}\n"] }]
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer', { static: false }]
             }], scrollThumb: [{
                 type: ViewChild,
                 args: ['scrollThumb', { static: false }]
+            }], leftInternalShadow: [{
+                type: ViewChild,
+                args: ['leftInternalShadow', { static: false }]
+            }], rightInternalShadow: [{
+                type: ViewChild,
+                args: ['rightInternalShadow', { static: false }]
             }], hideThumb: [{
                 type: Input
+            }], blockContentInteractionsWhileDragging: [{
+                type: Input
+            }], useInternalShadows: [{
+                type: Input
             }], hideTrack: [{
                 type: Input
             }], alwaysVisible: [{
@@ -10180,6 +10310,21 @@ class CaScrollableComponent {
     verticalTrack;
     verticalThumb;
     isLight = false;
+    get scrollContainerElement() {
+        return this.scrollContainer.nativeElement;
+    }
+    get scrollTop() {
+        return this.scrollContainer.nativeElement.scrollTop;
+    }
+    get scrollLeft() {
+        return this.scrollContainer.nativeElement.scrollLeft;
+    }
+    get scrollPosition() {
+        return {
+            top: this.scrollTop,
+            left: this.scrollLeft,
+        };
+    }
     set hideHorizontalScrollbar(value) {
         this._hideHorizontalScrollbar = value;
         this.refreshScrollbars();