carriera-intern 1.1.137 → 1.1.138

package/fesm2022/carriera-intern.mjs

@@ -180,6 +180,68 @@ const PDFJS_ASSET_BASE = new InjectionToken('PDFJS_ASSET_BASE', {
     factory: () => '/assets/pdfjs/',
 });
 
+// Non-breaking space, so a grouped number never wraps across lines.
+const NON_BREAKING_SPACE = ' ';
+const NUMBER_FORMAT_SEPARATORS = {
+    DecimalPointCommaThousands: { thousands: ',', decimal: '.' },
+    DecimalCommaSpaceThousands: { thousands: NON_BREAKING_SPACE, decimal: ',' },
+    DecimalCommaPeriodThousands: { thousands: '.', decimal: ',' },
+    DecimalPointSpaceThousands: { thousands: NON_BREAKING_SPACE, decimal: '.' },
+};
+const DEFAULT_NUMBER_FORMAT = 'DecimalPointCommaThousands';
+
+// Placeholders double as moment tokens, so a pattern joins into a moment format.
+const DATE_PART_PLACEHOLDERS = {
+    month: 'MM',
+    day: 'DD',
+    year: 'YYYY',
+    shortYear: 'YY',
+};
+const DATE_FORMAT_PATTERNS = {
+    MmDdYyyy: { parts: ['month', 'day', 'year'], separator: '/' },
+    DdMmYyyy: { parts: ['day', 'month', 'year'], separator: '/' },
+    YyyyMmDd: { parts: ['year', 'month', 'day'], separator: '-' },
+    DdMmYyyyDot: { parts: ['day', 'month', 'year'], separator: '.' },
+};
+// Shown when no date format is set: the month-first date with a two digit year.
+const DEFAULT_DATE_FORMAT_PATTERN = {
+    parts: ['month', 'day', 'shortYear'],
+    separator: '/',
+};
+const getDateFormatPattern = (dateFormat) => dateFormat ? DATE_FORMAT_PATTERNS[dateFormat] : DEFAULT_DATE_FORMAT_PATTERN;
+
+// Moment formats of the time shown in the input.
+const TIME_FORMAT_PATTERNS = {
+    TwelveHour: 'hh:mm A',
+    TwentyFourHour: 'HH:mm',
+};
+const DEFAULT_TIME_FORMAT = 'TwelveHour';
+
+// National format, used when a phone input is not international.
+const PHONE_MASK = '(000) 000-0000';
+// Dial code prepended to a pasted number without a country code.
+const DEFAULT_PHONE_DIAL_CODE = '1';
+// Longest number allowed by E.164, country code included.
+const PHONE_MAX_DIGITS = 15;
+// Starter set. A dial code that is not listed gets the default format:
+// country code, a space, then the national number in groups of three.
+const PHONE_COUNTRIES = [
+    { dialCode: '1', mask: '+0 (000) 000-0000' }, // US, Canada
+    { dialCode: '44', mask: '+00 0000 000000' }, // United Kingdom
+    { dialCode: '52', mask: '+00 00 0000 0000' }, // Mexico
+    { dialCode: '381', mask: '+000 00 000 0000' }, // Serbia
+];
+// Dial codes are prefix-free: a number starting with 1 or 7 has a one-digit
+// code, one starting with any of these has a two-digit code, and every other
+// code is three digits. That is enough to split off a code that is not listed.
+// prettier-ignore
+const PHONE_TWO_DIGIT_DIAL_CODES = [
+    '20', '27', '30', '31', '32', '33', '34', '36', '39', '40', '41', '43',
+    '44', '45', '46', '47', '48', '49', '51', '52', '53', '54', '55', '56',
+    '57', '58', '60', '61', '62', '63', '64', '65', '66', '81', '82', '84',
+    '86', '90', '91', '92', '93', '94', '95', '98',
+];
+
 class DocumentThumbnailHelper {
     static previewTargetWidth() {
         const ratio = Math.min(globalThis.devicePixelRatio || 1, 2);
@@ -260,6 +322,22 @@ const DropdownTypes = [
     'accident-truck',
     'accident-trailer',
 ];
+const NumberFormats = [
+    'DecimalPointCommaThousands', // 1,234.56
+    'DecimalCommaSpaceThousands', // 1 234,56
+    'DecimalCommaPeriodThousands', // 1.234,56
+    'DecimalPointSpaceThousands', // 1 234.56
+];
+const DateFormats = [
+    'MmDdYyyy', // 10/02/2026
+    'DdMmYyyy', // 02/10/2026
+    'YyyyMmDd', // 2026-10-02
+    'DdMmYyyyDot', // 02.10.2026
+];
+const TimeFormats = [
+    'TwelveHour', // 08:05 PM
+    'TwentyFourHour', // 20:05
+];
 const sizes = [
     22, 26,
     // 34 For later versions when applicant is done
@@ -633,23 +711,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
         }] });
 
 class NumberFormatPipe {
-    transform(value) {
+    transform(value, numberFormat = DEFAULT_NUMBER_FORMAT) {
         if (!value)
             return '';
+        const { thousands, decimal } = NUMBER_FORMAT_SEPARATORS[numberFormat];
         if (value.includes('.')) {
             const [integerPart, decimalPart] = value.split('.');
             // Cap decimal places to maximum 2
             const cappedDecimalPart = decimalPart ? decimalPart.substring(0, 2) : '';
-            // Format the integer part with commas
-            const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            // Format the integer part with thousands separators
+            const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousands);
             // If there's a decimal part, show it (capped at 2 places)
             if (decimalPart !== undefined) {
-                return `${formattedInteger}.${cappedDecimalPart}`;
+                return `${formattedInteger}${decimal}${cappedDecimalPart}`;
             }
             // If user just typed a decimal point, show it
-            return `${formattedInteger}.`;
+            return `${formattedInteger}${decimal}`;
         }
-        return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        return value.replace(/\B(?=(\d{3})+(?!\d))/g, thousands);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NumberFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: NumberFormatPipe, isStandalone: true, name: "numberFormat" });
@@ -663,8 +742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
 
 class ErrorMessagePipe {
     numberFormatPipe = new NumberFormatPipe();
-    transform(errors, customErrors // custom error messages to be displayed in the input
-    ) {
+    transform(errors, customErrors, // custom error messages to be displayed in the input
+    numberFormat) {
         if (!errors)
             return [];
         // Create a map of custom errors for quick lookup
@@ -678,8 +757,8 @@ class ErrorMessagePipe {
             required: () => 'Required',
             minlength: (value) => `${value.requiredLength} Characters Min`,
             maxlength: (value) => `${value.requiredLength} Characters Max`,
-            min: (value) => `Min ${this.numberFormatPipe.transform(String(value.min))}`,
-            max: (value) => `Max ${this.numberFormatPipe.transform(String(value.max))}`,
+            min: (value) => `Min ${this.numberFormatPipe.transform(String(value.min), numberFormat)}`,
+            max: (value) => `Max ${this.numberFormatPipe.transform(String(value.max), numberFormat)}`,
             hasUppercase: () => 'Must contain at least one uppercase letter',
             hasNumber: () => 'Must contain at least one number',
             hasSymbol: () => 'Must contain at least one symbol',
@@ -2141,6 +2220,78 @@ class MaskHelper {
     }
 }
 
+class PhoneHelper {
+    static extractDigits(value) {
+        return value.replace(/\D/g, '');
+    }
+    /**
+     * Finds the country whose dial code the digits start with. Dial codes are
+     * prefix-free, so at most one of the leading 1, 2 or 3 digits can match.
+     */
+    static findCountry(digits, countries) {
+        for (let length = 1; length <= 3; length++) {
+            const dialCode = digits.slice(0, length);
+            const country = countries.find((c) => c.dialCode === dialCode);
+            if (country)
+                return country;
+        }
+        return undefined;
+    }
+    /**
+     * Length of the dial code the digits start with, for codes that are not
+     * in the lookup table.
+     */
+    static dialCodeLength(digits) {
+        if (digits[0] === '1' || digits[0] === '7')
+            return 1;
+        return PHONE_TWO_DIGIT_DIAL_CODES.includes(digits.slice(0, 2)) ? 2 : 3;
+    }
+    /**
+     * Picks the mask for the given digits.
+     * @param digits The digits entered so far, country code included.
+     * @param isInternational Whether the input takes a country code.
+     * @param countries The dial code lookup table.
+     * @returns The mask pattern to apply.
+     */
+    static resolveMask(digits, isInternational, countries) {
+        if (!isInternational)
+            return PHONE_MASK;
+        const country = this.findCountry(digits, countries);
+        if (country)
+            return country.mask;
+        const dialCodeLength = this.dialCodeLength(digits);
+        const national = '0'
+            .repeat(PHONE_MAX_DIGITS - dialCodeLength)
+            .match(/.{1,3}/g)
+            .join(' ');
+        return `+${'0'.repeat(dialCodeLength)} ${national}`;
+    }
+    /**
+     * Prepares a pasted number for the mask. Typed input never needs this:
+     * the mask supplies the `+`, so it is always international.
+     * @param value The raw text, before the mask strips it.
+     * @param isInternational Whether the input takes a country code.
+     * @param defaultDialCode Dial code for a number that has none.
+     * @returns The digits to format.
+     */
+    static normalize(value, isInternational, defaultDialCode) {
+        const raw = (value || '').trim();
+        const digits = this.extractDigits(raw);
+        if (!isInternational) {
+            // A national number written with its country code, ex. +1 (202) 555-0123
+            const hasDialCode = digits.startsWith(defaultDialCode) &&
+                (raw.startsWith('+') || digits.length === defaultDialCode.length + 10);
+            return hasDialCode ? digits.slice(defaultDialCode.length) : digits;
+        }
+        if (!digits || raw.startsWith('+'))
+            return digits;
+        if (raw.startsWith('00'))
+            return digits.slice(2);
+        // No country code: drop the trunk prefix and assume the default country
+        return defaultDialCode + digits.replace(/^0+/, '');
+    }
+}
+
 class PasswordDirective {
     el;
     /**
@@ -2476,6 +2627,11 @@ class NumberFormatDirective {
     disableDecimals = input(false, ...(ngDevMode ? [{ debugName: "disableDecimals" }] : []));
     prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
     clampToMax = input(false, ...(ngDevMode ? [{ debugName: "clampToMax" }] : []));
+    /**
+     * Thousands and decimal separators used to display and parse the value.
+     * The real value always keeps '.' as its decimal separator.
+     */
+    numberFormat = input(...(ngDevMode ? [undefined, { debugName: "numberFormat" }] : []));
     /**
      * Stores the unformatted, "real" numeric value of the input.
      * This is the value that should be used for calculations or form submissions,
@@ -2484,6 +2640,19 @@ class NumberFormatDirective {
     realValue = '';
     constructor(el) {
         this.el = el;
+        // Re-render the current value when the separators change
+        effect(() => {
+            this.numberFormat();
+            if (this.appNumberFormat() && this.realValue !== '') {
+                this.updateDisplayValue();
+            }
+        });
+    }
+    get resolvedNumberFormat() {
+        return this.numberFormat() ?? DEFAULT_NUMBER_FORMAT;
+    }
+    get decimalSeparator() {
+        return NUMBER_FORMAT_SEPARATORS[this.resolvedNumberFormat].decimal;
     }
     /**
      * Lifecycle hook that is called after Angular has initialized all data-bound
@@ -2522,7 +2691,7 @@ class NumberFormatDirective {
         const oldValue = input.value;
         const oldRealValue = this.realValue;
         const maxValue = this.max();
-        this.realValue = this.extractNumericValue(oldValue);
+        this.realValue = this.extractDisplayedValue(oldValue);
         if (maxValue !== undefined && maxValue !== null) {
             const numericValue = Number(this.realValue);
             if (!Number.isNaN(numericValue) && numericValue > maxValue) {
@@ -2561,11 +2730,11 @@ class NumberFormatDirective {
             // If there's a selection
             event.preventDefault(); // Prevent default cut
             const cutText = input.value.slice(start, end);
-            event.clipboardData?.setData('text', this.extractNumericValue(cutText)); // Put numeric part on clipboard
+            event.clipboardData?.setData('text', this.toClipboardValue(cutText)); // Put numeric part on clipboard
             // Reconstruct value without the cut part
             const oldValue = input.value;
             const valueAfterCut = input.value.slice(0, start) + input.value.slice(end);
-            this.realValue = this.extractNumericValue(valueAfterCut);
+            this.realValue = this.extractDisplayedValue(valueAfterCut);
             this.updateDisplayValue();
             const newValue = input.value;
             const newCursorPos = this.calculateCursorPosition(start, oldValue, newValue);
@@ -2591,7 +2760,7 @@ class NumberFormatDirective {
             event.preventDefault(); // Prevent default copy
             const selectedText = input.value.slice(start, end);
             // Copy the underlying numeric value of the selection
-            event.clipboardData?.setData('text', this.extractNumericValue(selectedText));
+            event.clipboardData?.setData('text', this.toClipboardValue(selectedText));
         }
     }
     /**
@@ -2624,8 +2793,8 @@ class NumberFormatDirective {
             event.altKey) {
             return; // Don't prevent default for these
         }
-        // Allow a single decimal point if not already present in the realValue
-        if (event.key === '.' &&
+        // Allow a single decimal separator if not already present in the realValue
+        if (event.key === this.decimalSeparator &&
             !this.realValue.includes('.') &&
             !this.disableDecimals()) {
             // If the input is empty or realValue is empty, prepend '0' before the decimal
@@ -2650,7 +2819,7 @@ class NumberFormatDirective {
             const afterSelection = currentValue.slice(end);
             const simulatedValue = beforeSelection + event.key + afterSelection;
             // Extract numeric value from simulated result
-            const simulatedNumericValue = this.extractNumericValue(simulatedValue);
+            const simulatedNumericValue = this.extractDisplayedValue(simulatedValue);
             const simulatedNumber = Number(simulatedNumericValue);
             // Prevent if it would exceed max
             if (!Number.isNaN(simulatedNumber) && simulatedNumber > maxValue) {
@@ -2692,6 +2861,32 @@ class NumberFormatDirective {
         }
         return cleanValue;
     }
+    /**
+     * Extracts a clean numeric string from text shown in the input, where the
+     * decimal separator is the one of the current number format.
+     * @param value - The displayed text to clean.
+     * @returns A string representing the extracted numeric value.
+     */
+    extractDisplayedValue(value) {
+        const decimal = this.decimalSeparator;
+        if (decimal === '.')
+            return this.extractNumericValue(value);
+        const normalized = value
+            .split('')
+            .filter((char) => /\d/.test(char) || char === decimal)
+            .join('')
+            .split(decimal)
+            .join('.');
+        return this.extractNumericValue(normalized);
+    }
+    /**
+     * Numeric part of a displayed selection for the clipboard: no thousands
+     * separators or prefix, decimal separator of the current number format so
+     * it can be pasted back.
+     */
+    toClipboardValue(value) {
+        return this.extractDisplayedValue(value).replace('.', this.decimalSeparator);
+    }
     /**
      * Updates the input element's display value with the formatted version
      * of the current `realValue`.
@@ -2705,6 +2900,7 @@ class NumberFormatDirective {
             return;
         }
         let [integerPart, decimalPart] = this.realValue.split('.');
+        const decimal = this.decimalSeparator;
         if (integerPart.length > 1) {
             integerPart = integerPart.replace(/^0+/, '') || '0';
         }
@@ -2713,20 +2909,20 @@ class NumberFormatDirective {
             formattedValue = integerPart;
             // Still add decimal part if it exists and formatting is not disabled
             if (this.realValue.endsWith('.')) {
-                formattedValue = formattedValue + '.';
+                formattedValue = formattedValue + decimal;
             }
             else if (decimalPart !== undefined) {
-                formattedValue = formattedValue + '.' + decimalPart;
+                formattedValue = formattedValue + decimal + decimalPart;
             }
         }
         else {
             // Use full formatting with NumberFormatPipe
-            const formattedInteger = new NumberFormatPipe().transform(integerPart);
+            const formattedInteger = new NumberFormatPipe().transform(integerPart, this.resolvedNumberFormat);
             if (this.realValue.endsWith('.')) {
-                formattedValue = formattedInteger + '.';
+                formattedValue = formattedInteger + decimal;
             }
             else if (decimalPart !== undefined) {
-                formattedValue = formattedInteger + '.' + decimalPart;
+                formattedValue = formattedInteger + decimal + decimalPart;
             }
             else {
                 formattedValue = formattedInteger;
@@ -2769,12 +2965,15 @@ class NumberFormatDirective {
             adjustedOldCursorPos = 0;
         // Count digits before cursor in old value (excluding prefix)
         const beforeCursor = oldValueWithoutPrefix.substring(0, adjustedOldCursorPos);
-        const digitsBeforeCursor = (beforeCursor.match(/[\d.]/g) || []).length;
+        const decimal = this.decimalSeparator;
+        const isSignificant = (char) => /\d/.test(char) || char === decimal;
+        const digitsBeforeCursor = beforeCursor.split('').filter(isSignificant)
+            .length;
         // Find position in new value where we have the same number of digits
         let digitCount = 0;
         let newCursorPos = prefixLength;
         for (let i = 0; i < newValueWithoutPrefix.length; i++) {
-            if (/[\d.]/.test(newValueWithoutPrefix[i])) {
+            if (isSignificant(newValueWithoutPrefix[i])) {
                 digitCount++;
                 if (digitCount >= digitsBeforeCursor) {
                     newCursorPos = prefixLength + i + 1;
@@ -2825,7 +3024,7 @@ class NumberFormatDirective {
         this.updateDisplayValue();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NumberFormatDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.33", 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.33", 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 }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", 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.33", ngImport: i0, type: NumberFormatDirective, decorators: [{
             type: Directive,
@@ -2833,7 +3032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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 }] }], clampToMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "clampToMax", 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 }] }], numberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFormat", required: false }] }], onInput: [{
                 type: HostListener,
                 args: ['input', ['$event']]
             }], onCut: [{
@@ -2860,11 +3059,29 @@ class MaskDirective {
     appMask = input('', ...(ngDevMode ? [{ debugName: "appMask" }] : []));
     reveal = input(0, ...(ngDevMode ? [{ debugName: "reveal" }] : []));
     hide = input(0, ...(ngDevMode ? [{ debugName: "hide" }] : []));
+    /**
+     * Whether the input is a phone number. The mask is then picked from the
+     * digits entered instead of `appMask`.
+     */
+    phone = input(false, ...(ngDevMode ? [{ debugName: "phone" }] : []));
+    /**
+     * Whether a phone input takes a country code and is formatted by country.
+     * Otherwise it is a national number, ex. (000) 000-0000.
+     */
+    isInternational = input(false, ...(ngDevMode ? [{ debugName: "isInternational" }] : []));
+    phoneCountries = input(undefined, ...(ngDevMode ? [{ debugName: "phoneCountries" }] : []));
+    defaultDialCode = input(undefined, ...(ngDevMode ? [{ debugName: "defaultDialCode" }] : []));
     /**
      * Stores the unmasked, "real" value of the input, containing only
      * the characters entered by the user that fit the mask placeholders.
      */
     realValue = '';
+    /**
+     * Text of a paste that replaces the whole phone value, kept until the
+     * 'input' event that follows so its country code can be read before the
+     * mask strips it.
+     */
+    pastedPhone = null;
     constructor(el) {
         this.el = el;
     }
@@ -2875,8 +3092,23 @@ class MaskDirective {
     isHandledByPassword() {
         return this.reveal() !== 0 || this.hide() !== 0;
     }
+    isMasked() {
+        return !!this.appMask() || this.phone();
+    }
+    /**
+     * The mask for the given user input. Phone inputs resolve it from the
+     * digits, so the format follows the country code as it is entered.
+     */
+    resolveMask(realValue) {
+        if (!this.phone())
+            return this.appMask();
+        return PhoneHelper.resolveMask(realValue, this.isInternational(), this.phoneCountries() ?? PHONE_COUNTRIES);
+    }
+    normalizePhone(value) {
+        return PhoneHelper.normalize(value, this.isInternational(), this.defaultDialCode() ?? DEFAULT_PHONE_DIAL_CODE);
+    }
     ngOnInit() {
-        if (this.appMask() && this.el.nativeElement.value) {
+        if (this.isMasked() && this.el.nativeElement.value) {
             this.formatValue(this.el.nativeElement.value);
             this.setCursorToEnd();
         }
@@ -2886,9 +3118,15 @@ class MaskDirective {
      * formatting the value as the user types or pastes.
      */
     onInput(event) {
-        if (!this.appMask() || this.isHandledByPassword())
+        if (!this.isMasked() || this.isHandledByPassword())
             return;
         const input = this.el.nativeElement;
+        if (this.pastedPhone !== null) {
+            this.formatValue(this.normalizePhone(this.pastedPhone));
+            this.pastedPhone = null;
+            this.setCursorToEnd();
+            return;
+        }
         const cursorPosition = input.selectionStart || 0;
         const oldValue = input.value;
         this.formatValue(input.value);
@@ -2901,8 +3139,18 @@ class MaskDirective {
      * cleans it, and integrates it into the masked value.
      */
     onPaste(event) {
-        if (!this.appMask())
+        if (!this.isMasked())
             return;
+        if (this.phone()) {
+            const input = this.el.nativeElement;
+            const replacesValue = (input.selectionStart || 0) === 0 &&
+                (input.selectionEnd || 0) === input.value.length;
+            if (replacesValue) {
+                this.pastedPhone = event.clipboardData?.getData('text') ?? null;
+                // Dropped if the paste is cancelled and no 'input' event follows
+                setTimeout(() => (this.pastedPhone = null));
+            }
+        }
         //event.preventDefault();
         //const pastedData = event.clipboardData?.getData('text') || '';
         //this.formatValue(this.realValue + pastedData);
@@ -2913,7 +3161,7 @@ class MaskDirective {
      * from the input copies the unmasked, "real" value.
      */
     onCopy(event) {
-        if (!this.appMask() || this.isHandledByPassword())
+        if (!this.isMasked() || this.isHandledByPassword())
             return;
         const selection = this.el.nativeElement.value.substring(this.el.nativeElement.selectionStart || 0, this.el.nativeElement.selectionEnd || 0);
         if (selection) {
@@ -2928,7 +3176,7 @@ class MaskDirective {
      * the corresponding part from the real value and reformats the input.
      */
     onCut(event) {
-        if (!this.appMask() || this.isHandledByPassword())
+        if (!this.isMasked() || this.isHandledByPassword())
             return;
         const input = this.el.nativeElement;
         const start = input.selectionStart || 0;
@@ -2953,8 +3201,7 @@ class MaskDirective {
      * the mask pattern, preventing invalid characters from being entered.
      */
     onKeydown(event) {
-        const mask = this.appMask();
-        if (!mask)
+        if (!this.isMasked())
             return;
         const controlKeys = [
             'Backspace',
@@ -2970,6 +3217,8 @@ class MaskDirective {
         if (controlKeys.includes(event.key) || event.metaKey || event.ctrlKey) {
             return;
         }
+        // A phone mask can change with the digit being typed
+        const mask = this.resolveMask(/^\d$/.test(event.key) ? this.realValue + event.key : this.realValue);
         const placeholders = mask.replace(/[^0a*]/g, '');
         const selectionStart = this.el.nativeElement.selectionStart || 0;
         const selectionEnd = this.el.nativeElement.selectionEnd || 0;
@@ -3002,10 +3251,12 @@ class MaskDirective {
      * @param value The current value from the input field.
      */
     formatValue(value) {
-        const mask = this.appMask();
-        if (!mask)
+        if (!this.isMasked())
             return;
-        const extractedValue = MaskHelper.extractUserInput(value);
+        const extractedValue = this.phone()
+            ? PhoneHelper.extractDigits(value)
+            : MaskHelper.extractUserInput(value);
+        const mask = this.resolveMask(extractedValue);
         const { formattedValue, finalRealValue } = MaskHelper.applyMask(extractedValue, mask);
         this.realValue = finalRealValue;
         this.el.nativeElement.value = formattedValue;
@@ -3066,7 +3317,7 @@ class MaskDirective {
      * @param value The new value to set.
      */
     setRealValue(value) {
-        if (this.appMask()) {
+        if (this.isMasked()) {
             this.formatValue(value || '');
             this.setCursorToEnd();
         }
@@ -3075,14 +3326,14 @@ class MaskDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: MaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.33", type: MaskDirective, isStandalone: true, selector: "[appMask]", inputs: { appMask: { classPropertyName: "appMask", publicName: "appMask", isSignal: true, isRequired: false, transformFunction: null }, reveal: { classPropertyName: "reveal", publicName: "reveal", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "paste": "onPaste($event)", "copy": "onCopy($event)", "cut": "onCut($event)", "keydown": "onKeydown($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.33", type: MaskDirective, isStandalone: true, selector: "[appMask]", inputs: { appMask: { classPropertyName: "appMask", publicName: "appMask", isSignal: true, isRequired: false, transformFunction: null }, reveal: { classPropertyName: "reveal", publicName: "reveal", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null }, phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null }, isInternational: { classPropertyName: "isInternational", publicName: "isInternational", isSignal: true, isRequired: false, transformFunction: null }, phoneCountries: { classPropertyName: "phoneCountries", publicName: "phoneCountries", isSignal: true, isRequired: false, transformFunction: null }, defaultDialCode: { classPropertyName: "defaultDialCode", publicName: "defaultDialCode", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "paste": "onPaste($event)", "copy": "onCopy($event)", "cut": "onCut($event)", "keydown": "onKeydown($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: MaskDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appMask]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { appMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "appMask", required: false }] }], reveal: [{ type: i0.Input, args: [{ isSignal: true, alias: "reveal", required: false }] }], hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }], onInput: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { appMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "appMask", required: false }] }], reveal: [{ type: i0.Input, args: [{ isSignal: true, alias: "reveal", required: false }] }], hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }], phone: [{ type: i0.Input, args: [{ isSignal: true, alias: "phone", required: false }] }], isInternational: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInternational", required: false }] }], phoneCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneCountries", required: false }] }], defaultDialCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDialCode", required: false }] }], onInput: [{
                 type: HostListener,
                 args: ['input', ['$event']]
             }], onPaste: [{
@@ -3821,7 +4072,8 @@ class InputComponent {
     onRealValueChange(event) {
         this.value.set(event.detail);
         this.searchValue.set(event.detail);
-        if (this.config().type === 'number') {
+        // An empty number input stays empty (null) instead of becoming 0
+        if (this.config().type === 'number' && event.detail !== '') {
             this.dispatchOnChange(Number(event.detail));
             return;
         }
@@ -3996,7 +4248,8 @@ class InputComponent {
         if (!this.inputRef || !this.inputRef.nativeElement) {
             return;
         }
-        let type = !!this.config().mask && !this.isPartiallyMasked()
+        let type = (!!this.config().mask || this.config().type === 'phone') &&
+            !this.isPartiallyMasked()
             ? 'masked'
             : this.config().type;
         if ((type === 'password' || type === 'account') &&
@@ -4543,9 +4796,9 @@ class InputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", 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', 'top']\"\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  @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 && !isPartiallyMasked()\n        ? visible()\n          ? 'text'\n          : 'password'\n        : '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    [appNumberRangeList]=\"config().numberRangeList || false\"\n    [reveal]=\"config().reveal || 0\"\n    [hide]=\"config().hide || 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      <!-- Accident -->\n      @else if (dropdownType === \"accident-driver\") {\n        <p class=\"accident-name app-input-name\">{{ name }}</p>\n        <p class=\"accident-dob app-input-name\">DOB</p>\n        <p class=\"accident-cdl-number app-input-name\">CDL No.</p>\n        <p class=\"accident-state app-input-name\">CDL State</p>\n      } @else if (\n        dropdownType === \"accident-truck\" || dropdownType === \"accident-trailer\"\n      ) {\n        <p class=\"accident-unit app-input-name\">{{ name }}</p>\n        <p class=\"accident-vin app-input-name\">VIN</p>\n        <p class=\"accident-plate app-input-name\">Lic. Plate No.</p>\n        <p class=\"accident-state app-input-name\">Lic. State</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      (mousedown)=\"$event.preventDefault()\"\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            (click)=\"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 === \"driver-owner\" ||\n      dropdownType === \"truck-owner\" ||\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      dropdownType === \"accident-driver\" ||\n      dropdownType === \"accident-truck\" ||\n      dropdownType === \"accident-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 (\"driver-owner\") {\n      <ng-container *ngTemplateOutlet=\"driverOwnerRef\"></ng-container>\n    }\n    @case (\"truck-owner\") {\n      <ng-container *ngTemplateOutlet=\"truckOwnerRef\"></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 (\"accident-driver\") {\n      <ng-container *ngTemplateOutlet=\"accidentDriverRef\"></ng-container>\n    }\n    @case (\"accident-truck\") {\n      <ng-container *ngTemplateOutlet=\"accidentTruckRef\"></ng-container>\n    }\n    @case (\"accident-trailer\") {\n      <ng-container *ngTemplateOutlet=\"accidentTrailerRef\"></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 (\"driver-owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedDriverOwnerRef\"></ng-container>\n    }\n    @case (\"truck-owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedTruckOwnerRef\"></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    @case (\"accident-driver\") {\n      <ng-container\n        *ngTemplateOutlet=\"selectedAccidentDriverRef\"\n      ></ng-container>\n    }\n    @case (\"accident-truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedAccidentTruckRef\"></ng-container>\n    }\n    @case (\"accident-trailer\") {\n      <ng-container\n        *ngTemplateOutlet=\"selectedAccidentTrailerRef\"\n      ></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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"\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=\"fraud-icon\"\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 split-option\"\n        id=\"contact-{{ contact.id }}\"\n        (click)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"text-truncate\"\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 class=\"text-truncate\">{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p class=\"text-truncate\">\n              {{ contactOption.phone }}\n              {{\n                contactOption.extensionPhone\n                  ? \"x\" + contactOption.extensionPhone\n                  : \"\"\n              }}\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        (click)=\"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        (click)=\"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<!-- Accident driver dropdown -->\n<ng-template #accidentDriverRef>\n  @if (dropdownOptions().length) {\n    @for (driver of dropdownOptions(); track $index; let index = $index) {\n      @let driverOption = cast(driver, \"accidentDriver\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-driver-{{ driverOption.id }}\"\n        (click)=\"handleOption(driverOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentDriver')?.id === driverOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-name\">\n          <cai-avatar\n            [driver]=\"driverOption\"\n            [size]=\"18\"\n            [inverse]=\"true\"\n            [hover]=\"false\"\n          ></cai-avatar>\n          <p\n            [innerHTML]=\"\n              driverOption.firstName + ' ' + driverOption.lastName\n                | highlightSearch: value()\n            \"\n          ></p>\n        </div>\n        <p class=\"accident-dob\">\n          {{ driverOption.dateOfBirth | date: \"MM/dd/yy\" }}\n        </p>\n        <p\n          class=\"accident-cdl-number\"\n          [innerHTML]=\"driverOption.cdlNumber || '' | highlightSearch: value()\"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              driverOption.cdlState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            driverOption.cdlState?.countryType?.name &&\n            driverOption.cdlState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                driverOption.cdlState?.countryType?.name?.toLowerCase() +\n                '-' +\n                driverOption.cdlState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Accident truck dropdown -->\n<ng-template #accidentTruckRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let truckOption = cast(truck, \"accidentTruck\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-truck-{{ truckOption.id }}\"\n        (click)=\"handleOption(truckOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentTruck')?.id === truckOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-unit\">\n          @if (truckOption.truckType?.logoName) {\n            <svg-icon\n              class=\"truck-icon truck-trailer-icon-colors\"\n              [class]=\"truckOption.truckType!.logoName.slice(0, -4)\"\n              [name]=\"truckOption.truckType!.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\n          ></p>\n        </div>\n        <p\n          class=\"accident-vin\"\n          [innerHTML]=\"truckOption.vin || '' | highlightSearch: value()\"\n        ></p>\n        <p\n          class=\"accident-plate\"\n          [innerHTML]=\"\n            truckOption.licensePlateNumber || '' | highlightSearch: value()\n          \"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              truckOption.licenseState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            truckOption.licenseState?.countryType?.name &&\n            truckOption.licenseState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                truckOption.licenseState?.countryType?.name?.toLowerCase() +\n                '-' +\n                truckOption.licenseState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Accident trailer dropdown -->\n<ng-template #accidentTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (trailer of dropdownOptions(); track $index; let index = $index) {\n      @let trailerOption = cast(trailer, \"accidentTrailer\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-trailer-{{ trailerOption.id }}\"\n        (click)=\"handleOption(trailerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentTrailer')?.id === trailerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-unit\">\n          @if (trailerOption.trailerType?.logoName) {\n            <svg-icon\n              class=\"trailer-icon truck-trailer-icon-colors\"\n              [class]=\"trailerOption.trailerType!.logoName.slice(0, -4)\"\n              [name]=\"trailerOption.trailerType!.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            [innerHTML]=\"trailerOption.trailerNumber | highlightSearch: value()\"\n          ></p>\n        </div>\n        <p\n          class=\"accident-vin\"\n          [innerHTML]=\"trailerOption.vin || '' | highlightSearch: value()\"\n        ></p>\n        <p\n          class=\"accident-plate\"\n          [innerHTML]=\"\n            trailerOption.licensePlateNumber || '' | highlightSearch: value()\n          \"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              trailerOption.licenseState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            trailerOption.licenseState?.countryType?.name &&\n            trailerOption.licenseState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                trailerOption.licenseState?.countryType?.name?.toLowerCase() +\n                '-' +\n                trailerOption.licenseState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\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 split-option\"\n        id=\"shipper-{{ shipperOption.id }}\"\n        (click)=\"handleOption(shipperOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"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=\"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      (click)=\"resetSelection()\"\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            (click)=\"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              (click)=\"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            (click)=\"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              (click)=\"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                  @let dispatchStatus = dispatch.status | dispatchStatus;\n                  @if (dispatchStatus) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"dispatchStatus.statusClass\"\n                    >\n                      @if (dispatchStatus.badge) {\n                        <p\n                          class=\"status-block\"\n                          [class]=\"dispatchStatus.badge.color\"\n                        >\n                          {{ dispatchStatus.badge.text }}\n                        </p>\n                      }\n                      {{ dispatchStatus.label }}\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                    {{ dispatch?.pendingLoadCount }}\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        (click)=\"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          (click)=\"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 | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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        (click)=\"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          (click)=\"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 = truckOption.dispatchStatus | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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        (click)=\"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          (click)=\"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 | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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          (click)=\"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        (click)=\"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<!-- Driver Owner dropdown -->\n\n<ng-template #driverOwnerRef>\n  @if (dropdownOptions().length) {\n    @for (driverOwner of dropdownOptions(); track $index; let index = $index) {\n      @let driverOwnerOption = cast(driverOwner, \"driverOwner\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ driverOwnerOption.id }}\"\n        (click)=\"handleOption(driverOwnerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'driverOwner')?.id === driverOwnerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <cai-avatar\n          [driver]=\"{\n            id: driverOwnerOption?.id || 0,\n            firstName: (driverOwnerOption?.fullName || ' ').split(' ')[0] || '',\n            lastName: (driverOwnerOption?.fullName || ' ').split(' ')[1] || '',\n            avatarFile: driverOwnerOption?.avatarFile,\n            colorFlag: driverOwnerOption?.colorFlag,\n            owner: driverOwnerOption?.driverType === 'OwnerOperator',\n            driverType: {\n              id: 0,\n              name: (driverOwnerOption?.driverType | driverTypeLabel),\n            },\n          }\"\n          [rounded]=\"false\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (driverOwnerOption.fullName || '' | highlightSearch: value())\n              : driverOwnerOption.fullName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <p class=\"driver-type\">\n            {{ driverOwnerOption.driverType | driverTypeLabel }}\n          </p>\n        </div>\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<!-- Truck Owner dropdown -->\n\n<ng-template #truckOwnerRef>\n  @if (dropdownOptions().length) {\n    @for (truckOwner of dropdownOptions(); track $index; let index = $index) {\n      @let truckOwnerOption = cast(truckOwner, \"truckOwner\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ truckOwnerOption.id }}\"\n        (click)=\"handleOption(truckOwnerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'truckOwner')?.id === truckOwnerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem truck-owner-unit\">\n          @if (truckOwnerOption.truckType?.logoName) {\n            <svg-icon\n              class=\"truck-icon truck-trailer-icon-colors\"\n              [class]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n              [name]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            class=\"dropdown-content\"\n            [innerHTML]=\"\n              search\n                ? (truckOwnerOption.truckNumber || ''\n                  | highlightSearch: value())\n                : truckOwnerOption.truckNumber\n            \"\n          ></p>\n          @if (truckOwnerOption.model) {\n            <p class=\"truck-owner-bullet\">\u2022</p>\n            <p\n              class=\"dropdown-content\"\n              [innerHTML]=\"\n                search\n                  ? (truckOwnerOption.model | highlightSearch: value())\n                  : truckOwnerOption.model\n              \"\n            ></p>\n          }\n        </div>\n        <div class=\"dropdown-subitem-end\">\n          <p class=\"driver-type\">\n            {{ truckOwnerOption.driverType | truckOwnershipLabel }}\n          </p>\n        </div>\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 #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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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            (click)=\"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                  (click)=\"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          (click)=\"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!.fraudCheck) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"fraud-icon\"></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>\n          {{ contactOption?.phone }}\n          {{\n            contactOption?.extensionPhone\n              ? \"x\" + contactOption?.extensionPhone\n              : \"\"\n          }}\n        </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 selected-end-item-truncate\">\n        <p class=\"text-truncate\">{{ 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 #selectedDriverOwnerRef>\n  @let driverOwnerOption = cast(selectedOption(), \"driverOwner\");\n  @if (driverOwnerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: driverOwnerOption?.id || 0,\n          firstName: (driverOwnerOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (driverOwnerOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: driverOwnerOption?.avatarFile,\n          colorFlag: driverOwnerOption?.colorFlag,\n          owner: driverOwnerOption?.driverType === 'OwnerOperator',\n          driverType: {\n            id: 0,\n            name: (driverOwnerOption?.driverType | driverTypeLabel),\n          },\n        }\"\n        [rounded]=\"false\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ driverOwnerOption?.fullName }}</p>\n      <p class=\"selected-end-item driver-type\">\n        {{ driverOwnerOption?.driverType | driverTypeLabel }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckOwnerRef>\n  @let truckOwnerOption = cast(selectedOption(), \"truckOwner\");\n  @if (truckOwnerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (truckOwnerOption.truckType?.logoName) {\n        <svg-icon\n          class=\"truck-icon option-icon\"\n          [name]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n        ></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">\n        {{ truckOwnerOption.truckNumber }}\n        @if (truckOwnerOption.model) {\n          <span class=\"truck-owner-bullet\">\u2022</span>\n          {{ truckOwnerOption.model }}\n        }\n      </p>\n      <p class=\"selected-end-item driver-type\">\n        {{ truckOwnerOption.driverType | truckOwnershipLabel }}\n      </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 #selectedAccidentDriverRef>\n  @let accidentDriverOption = cast(selectedOption(), \"accidentDriver\");\n  @if (accidentDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-name\">\n        <cai-avatar\n          [driver]=\"accidentDriverOption!\"\n          [size]=\"18\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p>\n          {{\n            accidentDriverOption!.firstName +\n              \" \" +\n              accidentDriverOption!.lastName\n          }}\n        </p>\n      </div>\n      <p class=\"accident-dob\">\n        {{ accidentDriverOption!.dateOfBirth | date: \"MM/dd/yy\" }}\n      </p>\n      <p class=\"accident-cdl-number\">\n        {{ accidentDriverOption!.cdlNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentDriverOption!.cdlState?.stateShortName }}</p>\n        @if (\n          accidentDriverOption!.cdlState?.countryType?.name &&\n          accidentDriverOption!.cdlState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentDriverOption!.cdlState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentDriverOption!.cdlState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedAccidentTruckRef>\n  @let accidentTruckOption = cast(selectedOption(), \"accidentTruck\");\n  @if (accidentTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-unit\">\n        @if (accidentTruckOption!.truckType?.logoName) {\n          <svg-icon\n            class=\"truck-icon option-icon\"\n            [name]=\"accidentTruckOption!.truckType!.logoName.slice(0, -4)\"\n          ></svg-icon>\n        }\n        <p>{{ accidentTruckOption!.truckNumber }}</p>\n      </div>\n      <p class=\"accident-vin\">{{ accidentTruckOption!.vin }}</p>\n      <p class=\"accident-plate\">\n        {{ accidentTruckOption!.licensePlateNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentTruckOption!.licenseState?.stateShortName }}</p>\n        @if (\n          accidentTruckOption!.licenseState?.countryType?.name &&\n          accidentTruckOption!.licenseState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentTruckOption!.licenseState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentTruckOption!.licenseState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedAccidentTrailerRef>\n  @let accidentTrailerOption = cast(selectedOption(), \"accidentTrailer\");\n  @if (accidentTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-unit\">\n        @if (accidentTrailerOption!.trailerType?.logoName) {\n          <svg-icon\n            class=\"trailer-icon option-icon\"\n            [name]=\"accidentTrailerOption!.trailerType!.logoName.slice(0, -4)\"\n          ></svg-icon>\n        }\n        <p>{{ accidentTrailerOption!.trailerNumber }}</p>\n      </div>\n      <p class=\"accident-vin\">{{ accidentTrailerOption!.vin }}</p>\n      <p class=\"accident-plate\">\n        {{ accidentTrailerOption!.licensePlateNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentTrailerOption!.licenseState?.stateShortName }}</p>\n        @if (\n          accidentTrailerOption!.licenseState?.countryType?.name &&\n          accidentTrailerOption!.licenseState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentTrailerOption!.licenseState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentTrailerOption!.licenseState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\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.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .app-input-label .accident-state{margin-right:44px}@media(hover:hover){.app-input-container:hover{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container:hover:not(:has(.app-input:disabled)) .app-input-label .accident-state{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)}@media(hover:hover){.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,.app-input-container:has(.app-input:focus-visible) .app-input-label .accident-state{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).hovered{background-color:var(--color-surface-disable)}@media(hover:hover){.app-input-container:has(.app-input:disabled):hover{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;pointer-events:none!important}.app-input-container:has(.app-input:disabled) .dropdown-selected:has(.selected-end-item){width:100%}.app-input-container:has(.app-input:disabled) .driver-type{color:#919191}.app-input-container:has(.app-input:disabled) .icon-container{pointer-events:none!important}.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)}@media(hover:hover){.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}}@media(hover:hover){.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.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)}@media(pointer:coarse){.app-input{font-size:16px;transform:scale(.875);transform-origin:left center;height:26px}}.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:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}@media(hover:hover){.app-input-container.has-error:hover: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.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}@media(hover:hover){.app-input-container.has-error:hover{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.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)}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.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:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}@media(hover:hover){.app-input-container.has-valid:hover: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).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.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).hovered .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.hovered .button-icon{opacity:1;pointer-events:auto}.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).hovered .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)}@media(hover:hover){.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover{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-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .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-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .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}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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)}@media(hover:hover){.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}.is-plan.has-selected .app-input,.is-plan.has-selected .dropdown-selected-content,.is-plan.has-selected .selected-text{font-weight:700}.is-plan.has-selected:not(:has(.app-input:focus-visible)) .app-input,.is-plan.has-selected:not(:has(.app-input:focus-visible)) .dropdown-selected-content,.is-plan.has-selected:not(:has(.app-input:focus-visible)) .selected-text{color:#3b73ed}@media(hover:hover){.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .app-input,.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .dropdown-selected-content,.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .selected-text{color:#0b49d1}}.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:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}@media(hover:hover){.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .icon-container .icon,.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .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:has(.app-input:focus-visible):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:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}@media(hover:hover){.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):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-dropdown:hover:not(:has(.app-input:disabled)):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}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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)}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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.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}@media(hover:hover){.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}@media(hover:hover){.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}.fraud-icon{color:#fab15c!important;height:18px;width:18px}.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:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}@media(hover:hover){.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}}.has-right .app-input{text-align:right}@media(pointer:coarse){.has-right .app-input{transform-origin:right center}}.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}@media(hover:hover){.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).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:not(:has(.app-input:disabled)).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(.app-input:disabled)):not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)):not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)):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(.app-input:disabled)):not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .icon-container .icon,.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .icon-container .icon-sm{opacity:0!important}}@media(hover:hover){.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)):not(:has(.app-input:disabled)).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}@media(hover:hover){.has-right.has-number.app-input-container:hover:not(:has(.app-input:disabled)) .number-container{width:60px}.has-right.has-number.app-input-container:hover:not(:has(.app-input:disabled)) .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)}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}}.is-adding:has(.app-input:focus-visible){padding-right:48px!important}@media(hover:hover){.is-adding:hover{padding-right:48px!important}}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}@media(hover:hover){.is-adding.has-right.has-right:hover{padding-left:40px}}.is-adding .app-input-icon{right:4px}@media(hover:hover){.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)}@media(hover:hover){.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-arrivedpickup,.dispatch-status.status-checkedinpickup,.dispatch-status.status-checkedin,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arriveddelivery,.dispatch-status.status-checkedindelivery,.dispatch-status.status-offloading,.dispatch-status.status-offloaded,.dispatch-status.status-empty{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-off,.dispatch-status.status-deadheading,.dispatch-status.status-break,.dispatch-status.status-split{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair,.dispatch-status.status-dispatchedrepair,.dispatch-status.status-loadedrepair{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),.app-input-label:has(.accident-state){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{max-width:170px;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}@media(hover:hover){.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}.accident-name,.accident-unit,.accident-dob,.accident-cdl-number,.accident-vin,.accident-plate{flex-shrink:0}.accident-name>p,.accident-unit>p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accident-name{width:218px}.accident-unit{width:170px}.accident-dob,.accident-cdl-number,.accident-vin,.accident-plate{text-align:right;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accident-dob{width:134px}.accident-cdl-number{width:140px}.accident-vin{width:182px}.accident-plate{width:140px}.accident-state{margin-left:auto;justify-content:flex-end;text-align:right}.app-input-label .accident-state{margin-right:22px;white-space:nowrap;transition:margin .1s ease-in-out}.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%}@media(hover:hover){.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.unfolded .counter{color:#fff}@media(hover:hover){.dropdown-group .group-item:hover .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.active{background-color:#424242}@media(hover:hover){.dropdown-group.active .group-item:hover{background-color:#424242}}.dropdown-group.active .dropdown-item{background-color:#424242}@media(hover:hover){.dropdown-group:hover:not(.no-items){background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .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}@media(hover:hover){.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{padding-top:2px;padding-bottom:2px;padding-left:4px}@media(pointer:coarse){.size-22 .app-input{height:22px}}.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}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.split-option>p{max-width:calc(50% - 2px)}.split-option .dropdown-subitem-end{width:calc(50% - 2px)}.split-option .end-item-base,.split-option .end-item-hover{max-width:100%}.selected-end-item-truncate{max-width:50%}.truck-owner-unit{min-width:0}.truck-owner-unit .dropdown-content{max-width:none;min-width:0}.truck-owner-bullet{flex-shrink:0;color:#919191}\n"], dependencies: [{ kind: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", 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', 'top']\"\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  @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 && !isPartiallyMasked()\n        ? visible()\n          ? 'text'\n          : 'password'\n        : '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    [phone]=\"config().type === 'phone'\"\n    [isInternational]=\"config().isInternational || false\"\n    [phoneCountries]=\"config().phoneCountries\"\n    [defaultDialCode]=\"config().defaultDialCode\"\n    [attr.inputmode]=\"config().type === 'phone' ? 'tel' : null\"\n    [appNumberRangeList]=\"config().numberRangeList || false\"\n    [reveal]=\"config().reveal || 0\"\n    [hide]=\"config().hide || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [numberFormat]=\"config().numberFormat\"\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      <!-- Accident -->\n      @else if (dropdownType === \"accident-driver\") {\n        <p class=\"accident-name app-input-name\">{{ name }}</p>\n        <p class=\"accident-dob app-input-name\">DOB</p>\n        <p class=\"accident-cdl-number app-input-name\">CDL No.</p>\n        <p class=\"accident-state app-input-name\">CDL State</p>\n      } @else if (\n        dropdownType === \"accident-truck\" || dropdownType === \"accident-trailer\"\n      ) {\n        <p class=\"accident-unit app-input-name\">{{ name }}</p>\n        <p class=\"accident-vin app-input-name\">VIN</p>\n        <p class=\"accident-plate app-input-name\">Lic. Plate No.</p>\n        <p class=\"accident-state app-input-name\">Lic. State</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 : config().numberFormat)[0] &&\n    !(config().inTable && config().placeholderBehavior !== \"static\")\n  ) {\n    <div class=\"app-input-error\">\n      {{ (ngControl?.errors | errorMessage: config().customErrors : config().numberFormat)[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      (mousedown)=\"$event.preventDefault()\"\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            (click)=\"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 === \"driver-owner\" ||\n      dropdownType === \"truck-owner\" ||\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      dropdownType === \"accident-driver\" ||\n      dropdownType === \"accident-truck\" ||\n      dropdownType === \"accident-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 (\"driver-owner\") {\n      <ng-container *ngTemplateOutlet=\"driverOwnerRef\"></ng-container>\n    }\n    @case (\"truck-owner\") {\n      <ng-container *ngTemplateOutlet=\"truckOwnerRef\"></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 (\"accident-driver\") {\n      <ng-container *ngTemplateOutlet=\"accidentDriverRef\"></ng-container>\n    }\n    @case (\"accident-truck\") {\n      <ng-container *ngTemplateOutlet=\"accidentTruckRef\"></ng-container>\n    }\n    @case (\"accident-trailer\") {\n      <ng-container *ngTemplateOutlet=\"accidentTrailerRef\"></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 (\"driver-owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedDriverOwnerRef\"></ng-container>\n    }\n    @case (\"truck-owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedTruckOwnerRef\"></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    @case (\"accident-driver\") {\n      <ng-container\n        *ngTemplateOutlet=\"selectedAccidentDriverRef\"\n      ></ng-container>\n    }\n    @case (\"accident-truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedAccidentTruckRef\"></ng-container>\n    }\n    @case (\"accident-trailer\") {\n      <ng-container\n        *ngTemplateOutlet=\"selectedAccidentTrailerRef\"\n      ></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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"\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=\"fraud-icon\"\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 split-option\"\n        id=\"contact-{{ contact.id }}\"\n        (click)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"text-truncate\"\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 class=\"text-truncate\">{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p class=\"text-truncate\">\n              {{ contactOption.phone }}\n              {{\n                contactOption.extensionPhone\n                  ? \"x\" + contactOption.extensionPhone\n                  : \"\"\n              }}\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        (click)=\"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        (click)=\"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<!-- Accident driver dropdown -->\n<ng-template #accidentDriverRef>\n  @if (dropdownOptions().length) {\n    @for (driver of dropdownOptions(); track $index; let index = $index) {\n      @let driverOption = cast(driver, \"accidentDriver\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-driver-{{ driverOption.id }}\"\n        (click)=\"handleOption(driverOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentDriver')?.id === driverOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-name\">\n          <cai-avatar\n            [driver]=\"driverOption\"\n            [size]=\"18\"\n            [inverse]=\"true\"\n            [hover]=\"false\"\n          ></cai-avatar>\n          <p\n            [innerHTML]=\"\n              driverOption.firstName + ' ' + driverOption.lastName\n                | highlightSearch: value()\n            \"\n          ></p>\n        </div>\n        <p class=\"accident-dob\">\n          {{ driverOption.dateOfBirth | date: \"MM/dd/yy\" }}\n        </p>\n        <p\n          class=\"accident-cdl-number\"\n          [innerHTML]=\"driverOption.cdlNumber || '' | highlightSearch: value()\"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              driverOption.cdlState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            driverOption.cdlState?.countryType?.name &&\n            driverOption.cdlState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                driverOption.cdlState?.countryType?.name?.toLowerCase() +\n                '-' +\n                driverOption.cdlState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Accident truck dropdown -->\n<ng-template #accidentTruckRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let truckOption = cast(truck, \"accidentTruck\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-truck-{{ truckOption.id }}\"\n        (click)=\"handleOption(truckOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentTruck')?.id === truckOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-unit\">\n          @if (truckOption.truckType?.logoName) {\n            <svg-icon\n              class=\"truck-icon truck-trailer-icon-colors\"\n              [class]=\"truckOption.truckType!.logoName.slice(0, -4)\"\n              [name]=\"truckOption.truckType!.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\n          ></p>\n        </div>\n        <p\n          class=\"accident-vin\"\n          [innerHTML]=\"truckOption.vin || '' | highlightSearch: value()\"\n        ></p>\n        <p\n          class=\"accident-plate\"\n          [innerHTML]=\"\n            truckOption.licensePlateNumber || '' | highlightSearch: value()\n          \"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              truckOption.licenseState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            truckOption.licenseState?.countryType?.name &&\n            truckOption.licenseState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                truckOption.licenseState?.countryType?.name?.toLowerCase() +\n                '-' +\n                truckOption.licenseState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Accident trailer dropdown -->\n<ng-template #accidentTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (trailer of dropdownOptions(); track $index; let index = $index) {\n      @let trailerOption = cast(trailer, \"accidentTrailer\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-trailer-{{ trailerOption.id }}\"\n        (click)=\"handleOption(trailerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentTrailer')?.id === trailerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-unit\">\n          @if (trailerOption.trailerType?.logoName) {\n            <svg-icon\n              class=\"trailer-icon truck-trailer-icon-colors\"\n              [class]=\"trailerOption.trailerType!.logoName.slice(0, -4)\"\n              [name]=\"trailerOption.trailerType!.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            [innerHTML]=\"trailerOption.trailerNumber | highlightSearch: value()\"\n          ></p>\n        </div>\n        <p\n          class=\"accident-vin\"\n          [innerHTML]=\"trailerOption.vin || '' | highlightSearch: value()\"\n        ></p>\n        <p\n          class=\"accident-plate\"\n          [innerHTML]=\"\n            trailerOption.licensePlateNumber || '' | highlightSearch: value()\n          \"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              trailerOption.licenseState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            trailerOption.licenseState?.countryType?.name &&\n            trailerOption.licenseState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                trailerOption.licenseState?.countryType?.name?.toLowerCase() +\n                '-' +\n                trailerOption.licenseState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\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 split-option\"\n        id=\"shipper-{{ shipperOption.id }}\"\n        (click)=\"handleOption(shipperOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"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=\"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      (click)=\"resetSelection()\"\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            (click)=\"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              (click)=\"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            (click)=\"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              (click)=\"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                  @let dispatchStatus = dispatch.status | dispatchStatus;\n                  @if (dispatchStatus) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"dispatchStatus.statusClass\"\n                    >\n                      @if (dispatchStatus.badge) {\n                        <p\n                          class=\"status-block\"\n                          [class]=\"dispatchStatus.badge.color\"\n                        >\n                          {{ dispatchStatus.badge.text }}\n                        </p>\n                      }\n                      {{ dispatchStatus.label }}\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                    {{ dispatch?.pendingLoadCount }}\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        (click)=\"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          (click)=\"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 | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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        (click)=\"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          (click)=\"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 = truckOption.dispatchStatus | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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        (click)=\"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          (click)=\"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 | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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          (click)=\"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        (click)=\"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<!-- Driver Owner dropdown -->\n\n<ng-template #driverOwnerRef>\n  @if (dropdownOptions().length) {\n    @for (driverOwner of dropdownOptions(); track $index; let index = $index) {\n      @let driverOwnerOption = cast(driverOwner, \"driverOwner\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ driverOwnerOption.id }}\"\n        (click)=\"handleOption(driverOwnerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'driverOwner')?.id === driverOwnerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <cai-avatar\n          [driver]=\"{\n            id: driverOwnerOption?.id || 0,\n            firstName: (driverOwnerOption?.fullName || ' ').split(' ')[0] || '',\n            lastName: (driverOwnerOption?.fullName || ' ').split(' ')[1] || '',\n            avatarFile: driverOwnerOption?.avatarFile,\n            colorFlag: driverOwnerOption?.colorFlag,\n            owner: driverOwnerOption?.driverType === 'OwnerOperator',\n            driverType: {\n              id: 0,\n              name: (driverOwnerOption?.driverType | driverTypeLabel),\n            },\n          }\"\n          [rounded]=\"false\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (driverOwnerOption.fullName || '' | highlightSearch: value())\n              : driverOwnerOption.fullName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <p class=\"driver-type\">\n            {{ driverOwnerOption.driverType | driverTypeLabel }}\n          </p>\n        </div>\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<!-- Truck Owner dropdown -->\n\n<ng-template #truckOwnerRef>\n  @if (dropdownOptions().length) {\n    @for (truckOwner of dropdownOptions(); track $index; let index = $index) {\n      @let truckOwnerOption = cast(truckOwner, \"truckOwner\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ truckOwnerOption.id }}\"\n        (click)=\"handleOption(truckOwnerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'truckOwner')?.id === truckOwnerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem truck-owner-unit\">\n          @if (truckOwnerOption.truckType?.logoName) {\n            <svg-icon\n              class=\"truck-icon truck-trailer-icon-colors\"\n              [class]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n              [name]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            class=\"dropdown-content\"\n            [innerHTML]=\"\n              search\n                ? (truckOwnerOption.truckNumber || ''\n                  | highlightSearch: value())\n                : truckOwnerOption.truckNumber\n            \"\n          ></p>\n          @if (truckOwnerOption.model) {\n            <p class=\"truck-owner-bullet\">\u2022</p>\n            <p\n              class=\"dropdown-content\"\n              [innerHTML]=\"\n                search\n                  ? (truckOwnerOption.model | highlightSearch: value())\n                  : truckOwnerOption.model\n              \"\n            ></p>\n          }\n        </div>\n        <div class=\"dropdown-subitem-end\">\n          <p class=\"driver-type\">\n            {{ truckOwnerOption.driverType | truckOwnershipLabel }}\n          </p>\n        </div>\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 #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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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            (click)=\"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                  (click)=\"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          (click)=\"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!.fraudCheck) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"fraud-icon\"></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>\n          {{ contactOption?.phone }}\n          {{\n            contactOption?.extensionPhone\n              ? \"x\" + contactOption?.extensionPhone\n              : \"\"\n          }}\n        </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 selected-end-item-truncate\">\n        <p class=\"text-truncate\">{{ 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 #selectedDriverOwnerRef>\n  @let driverOwnerOption = cast(selectedOption(), \"driverOwner\");\n  @if (driverOwnerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: driverOwnerOption?.id || 0,\n          firstName: (driverOwnerOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (driverOwnerOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: driverOwnerOption?.avatarFile,\n          colorFlag: driverOwnerOption?.colorFlag,\n          owner: driverOwnerOption?.driverType === 'OwnerOperator',\n          driverType: {\n            id: 0,\n            name: (driverOwnerOption?.driverType | driverTypeLabel),\n          },\n        }\"\n        [rounded]=\"false\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ driverOwnerOption?.fullName }}</p>\n      <p class=\"selected-end-item driver-type\">\n        {{ driverOwnerOption?.driverType | driverTypeLabel }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckOwnerRef>\n  @let truckOwnerOption = cast(selectedOption(), \"truckOwner\");\n  @if (truckOwnerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (truckOwnerOption.truckType?.logoName) {\n        <svg-icon\n          class=\"truck-icon option-icon\"\n          [name]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n        ></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">\n        {{ truckOwnerOption.truckNumber }}\n        @if (truckOwnerOption.model) {\n          <span class=\"truck-owner-bullet\">\u2022</span>\n          {{ truckOwnerOption.model }}\n        }\n      </p>\n      <p class=\"selected-end-item driver-type\">\n        {{ truckOwnerOption.driverType | truckOwnershipLabel }}\n      </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 #selectedAccidentDriverRef>\n  @let accidentDriverOption = cast(selectedOption(), \"accidentDriver\");\n  @if (accidentDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-name\">\n        <cai-avatar\n          [driver]=\"accidentDriverOption!\"\n          [size]=\"18\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p>\n          {{\n            accidentDriverOption!.firstName +\n              \" \" +\n              accidentDriverOption!.lastName\n          }}\n        </p>\n      </div>\n      <p class=\"accident-dob\">\n        {{ accidentDriverOption!.dateOfBirth | date: \"MM/dd/yy\" }}\n      </p>\n      <p class=\"accident-cdl-number\">\n        {{ accidentDriverOption!.cdlNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentDriverOption!.cdlState?.stateShortName }}</p>\n        @if (\n          accidentDriverOption!.cdlState?.countryType?.name &&\n          accidentDriverOption!.cdlState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentDriverOption!.cdlState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentDriverOption!.cdlState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedAccidentTruckRef>\n  @let accidentTruckOption = cast(selectedOption(), \"accidentTruck\");\n  @if (accidentTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-unit\">\n        @if (accidentTruckOption!.truckType?.logoName) {\n          <svg-icon\n            class=\"truck-icon option-icon\"\n            [name]=\"accidentTruckOption!.truckType!.logoName.slice(0, -4)\"\n          ></svg-icon>\n        }\n        <p>{{ accidentTruckOption!.truckNumber }}</p>\n      </div>\n      <p class=\"accident-vin\">{{ accidentTruckOption!.vin }}</p>\n      <p class=\"accident-plate\">\n        {{ accidentTruckOption!.licensePlateNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentTruckOption!.licenseState?.stateShortName }}</p>\n        @if (\n          accidentTruckOption!.licenseState?.countryType?.name &&\n          accidentTruckOption!.licenseState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentTruckOption!.licenseState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentTruckOption!.licenseState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedAccidentTrailerRef>\n  @let accidentTrailerOption = cast(selectedOption(), \"accidentTrailer\");\n  @if (accidentTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-unit\">\n        @if (accidentTrailerOption!.trailerType?.logoName) {\n          <svg-icon\n            class=\"trailer-icon option-icon\"\n            [name]=\"accidentTrailerOption!.trailerType!.logoName.slice(0, -4)\"\n          ></svg-icon>\n        }\n        <p>{{ accidentTrailerOption!.trailerNumber }}</p>\n      </div>\n      <p class=\"accident-vin\">{{ accidentTrailerOption!.vin }}</p>\n      <p class=\"accident-plate\">\n        {{ accidentTrailerOption!.licensePlateNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentTrailerOption!.licenseState?.stateShortName }}</p>\n        @if (\n          accidentTrailerOption!.licenseState?.countryType?.name &&\n          accidentTrailerOption!.licenseState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentTrailerOption!.licenseState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentTrailerOption!.licenseState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\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 : config().numberFormat)[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.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .app-input-label .accident-state{margin-right:44px}@media(hover:hover){.app-input-container:hover{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container:hover:not(:has(.app-input:disabled)) .app-input-label .accident-state{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)}@media(hover:hover){.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,.app-input-container:has(.app-input:focus-visible) .app-input-label .accident-state{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).hovered{background-color:var(--color-surface-disable)}@media(hover:hover){.app-input-container:has(.app-input:disabled):hover{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;pointer-events:none!important}.app-input-container:has(.app-input:disabled) .dropdown-selected:has(.selected-end-item){width:100%}.app-input-container:has(.app-input:disabled) .driver-type{color:#919191}.app-input-container:has(.app-input:disabled) .icon-container{pointer-events:none!important}.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)}@media(hover:hover){.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}}@media(hover:hover){.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.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)}@media(pointer:coarse){.app-input{font-size:16px;transform:scale(.875);transform-origin:left center;height:26px}}.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:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}@media(hover:hover){.app-input-container.has-error:hover: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.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}@media(hover:hover){.app-input-container.has-error:hover{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.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)}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.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:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}@media(hover:hover){.app-input-container.has-valid:hover: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).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.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).hovered .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.hovered .button-icon{opacity:1;pointer-events:auto}.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).hovered .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)}@media(hover:hover){.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover{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-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .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-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .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}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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)}@media(hover:hover){.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}.is-plan.has-selected .app-input,.is-plan.has-selected .dropdown-selected-content,.is-plan.has-selected .selected-text{font-weight:700}.is-plan.has-selected:not(:has(.app-input:focus-visible)) .app-input,.is-plan.has-selected:not(:has(.app-input:focus-visible)) .dropdown-selected-content,.is-plan.has-selected:not(:has(.app-input:focus-visible)) .selected-text{color:#3b73ed}@media(hover:hover){.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .app-input,.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .dropdown-selected-content,.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .selected-text{color:#0b49d1}}.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:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}@media(hover:hover){.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .icon-container .icon,.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .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:has(.app-input:focus-visible):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:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}@media(hover:hover){.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):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-dropdown:hover:not(:has(.app-input:disabled)):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}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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)}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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.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}@media(hover:hover){.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}@media(hover:hover){.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}.fraud-icon{color:#fab15c!important;height:18px;width:18px}.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:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}@media(hover:hover){.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}}.has-right .app-input{text-align:right}@media(pointer:coarse){.has-right .app-input{transform-origin:right center}}.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}@media(hover:hover){.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).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:not(:has(.app-input:disabled)).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(.app-input:disabled)):not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)):not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)):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(.app-input:disabled)):not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .icon-container .icon,.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .icon-container .icon-sm{opacity:0!important}}@media(hover:hover){.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)):not(:has(.app-input:disabled)).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}@media(hover:hover){.has-right.has-number.app-input-container:hover:not(:has(.app-input:disabled)) .number-container{width:60px}.has-right.has-number.app-input-container:hover:not(:has(.app-input:disabled)) .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)}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}}.is-adding:has(.app-input:focus-visible){padding-right:48px!important}@media(hover:hover){.is-adding:hover{padding-right:48px!important}}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}@media(hover:hover){.is-adding.has-right.has-right:hover{padding-left:40px}}.is-adding .app-input-icon{right:4px}@media(hover:hover){.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)}@media(hover:hover){.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-arrivedpickup,.dispatch-status.status-checkedinpickup,.dispatch-status.status-checkedin,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arriveddelivery,.dispatch-status.status-checkedindelivery,.dispatch-status.status-offloading,.dispatch-status.status-offloaded,.dispatch-status.status-empty{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-off,.dispatch-status.status-deadheading,.dispatch-status.status-break,.dispatch-status.status-split{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair,.dispatch-status.status-dispatchedrepair,.dispatch-status.status-loadedrepair{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),.app-input-label:has(.accident-state){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{max-width:170px;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}@media(hover:hover){.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}.accident-name,.accident-unit,.accident-dob,.accident-cdl-number,.accident-vin,.accident-plate{flex-shrink:0}.accident-name>p,.accident-unit>p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accident-name{width:218px}.accident-unit{width:170px}.accident-dob,.accident-cdl-number,.accident-vin,.accident-plate{text-align:right;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accident-dob{width:134px}.accident-cdl-number{width:140px}.accident-vin{width:182px}.accident-plate{width:140px}.accident-state{margin-left:auto;justify-content:flex-end;text-align:right}.app-input-label .accident-state{margin-right:22px;white-space:nowrap;transition:margin .1s ease-in-out}.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%}@media(hover:hover){.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.unfolded .counter{color:#fff}@media(hover:hover){.dropdown-group .group-item:hover .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.active{background-color:#424242}@media(hover:hover){.dropdown-group.active .group-item:hover{background-color:#424242}}.dropdown-group.active .dropdown-item{background-color:#424242}@media(hover:hover){.dropdown-group:hover:not(.no-items){background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .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}@media(hover:hover){.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{padding-top:2px;padding-bottom:2px;padding-left:4px}@media(pointer:coarse){.size-22 .app-input{height:22px}}.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}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.split-option>p{max-width:calc(50% - 2px)}.split-option .dropdown-subitem-end{width:calc(50% - 2px)}.split-option .end-item-base,.split-option .end-item-hover{max-width:100%}.selected-end-item-truncate{max-width:50%}.truck-owner-unit{min-width:0}.truck-owner-unit .dropdown-content{max-width:none;min-width:0}.truck-owner-bullet{flex-shrink:0;color:#919191}\n"], dependencies: [{ kind: "directive", type: 
                 // Directives
-                PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal", "hide", "appMask", "max"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "disableDecimals", "prefix", "clampToMax"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal", "hide"] }, { kind: "directive", type: NumberRangeListDirective, selector: "[appNumberRangeList]", inputs: ["appNumberRangeList"] }, { 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", "hide", "appMask", "max"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "disableDecimals", "prefix", "clampToMax", "numberFormat"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal", "hide", "phone", "isInternational", "phoneCountries", "defaultDialCode"] }, { kind: "directive", type: NumberRangeListDirective, selector: "[appNumberRangeList]", inputs: ["appNumberRangeList"] }, { 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
@@ -4582,7 +4835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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', 'top']\"\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  @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 && !isPartiallyMasked()\n        ? visible()\n          ? 'text'\n          : 'password'\n        : '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    [appNumberRangeList]=\"config().numberRangeList || false\"\n    [reveal]=\"config().reveal || 0\"\n    [hide]=\"config().hide || 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      <!-- Accident -->\n      @else if (dropdownType === \"accident-driver\") {\n        <p class=\"accident-name app-input-name\">{{ name }}</p>\n        <p class=\"accident-dob app-input-name\">DOB</p>\n        <p class=\"accident-cdl-number app-input-name\">CDL No.</p>\n        <p class=\"accident-state app-input-name\">CDL State</p>\n      } @else if (\n        dropdownType === \"accident-truck\" || dropdownType === \"accident-trailer\"\n      ) {\n        <p class=\"accident-unit app-input-name\">{{ name }}</p>\n        <p class=\"accident-vin app-input-name\">VIN</p>\n        <p class=\"accident-plate app-input-name\">Lic. Plate No.</p>\n        <p class=\"accident-state app-input-name\">Lic. State</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      (mousedown)=\"$event.preventDefault()\"\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            (click)=\"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 === \"driver-owner\" ||\n      dropdownType === \"truck-owner\" ||\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      dropdownType === \"accident-driver\" ||\n      dropdownType === \"accident-truck\" ||\n      dropdownType === \"accident-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 (\"driver-owner\") {\n      <ng-container *ngTemplateOutlet=\"driverOwnerRef\"></ng-container>\n    }\n    @case (\"truck-owner\") {\n      <ng-container *ngTemplateOutlet=\"truckOwnerRef\"></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 (\"accident-driver\") {\n      <ng-container *ngTemplateOutlet=\"accidentDriverRef\"></ng-container>\n    }\n    @case (\"accident-truck\") {\n      <ng-container *ngTemplateOutlet=\"accidentTruckRef\"></ng-container>\n    }\n    @case (\"accident-trailer\") {\n      <ng-container *ngTemplateOutlet=\"accidentTrailerRef\"></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 (\"driver-owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedDriverOwnerRef\"></ng-container>\n    }\n    @case (\"truck-owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedTruckOwnerRef\"></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    @case (\"accident-driver\") {\n      <ng-container\n        *ngTemplateOutlet=\"selectedAccidentDriverRef\"\n      ></ng-container>\n    }\n    @case (\"accident-truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedAccidentTruckRef\"></ng-container>\n    }\n    @case (\"accident-trailer\") {\n      <ng-container\n        *ngTemplateOutlet=\"selectedAccidentTrailerRef\"\n      ></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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"\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=\"fraud-icon\"\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 split-option\"\n        id=\"contact-{{ contact.id }}\"\n        (click)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"text-truncate\"\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 class=\"text-truncate\">{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p class=\"text-truncate\">\n              {{ contactOption.phone }}\n              {{\n                contactOption.extensionPhone\n                  ? \"x\" + contactOption.extensionPhone\n                  : \"\"\n              }}\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        (click)=\"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        (click)=\"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<!-- Accident driver dropdown -->\n<ng-template #accidentDriverRef>\n  @if (dropdownOptions().length) {\n    @for (driver of dropdownOptions(); track $index; let index = $index) {\n      @let driverOption = cast(driver, \"accidentDriver\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-driver-{{ driverOption.id }}\"\n        (click)=\"handleOption(driverOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentDriver')?.id === driverOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-name\">\n          <cai-avatar\n            [driver]=\"driverOption\"\n            [size]=\"18\"\n            [inverse]=\"true\"\n            [hover]=\"false\"\n          ></cai-avatar>\n          <p\n            [innerHTML]=\"\n              driverOption.firstName + ' ' + driverOption.lastName\n                | highlightSearch: value()\n            \"\n          ></p>\n        </div>\n        <p class=\"accident-dob\">\n          {{ driverOption.dateOfBirth | date: \"MM/dd/yy\" }}\n        </p>\n        <p\n          class=\"accident-cdl-number\"\n          [innerHTML]=\"driverOption.cdlNumber || '' | highlightSearch: value()\"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              driverOption.cdlState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            driverOption.cdlState?.countryType?.name &&\n            driverOption.cdlState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                driverOption.cdlState?.countryType?.name?.toLowerCase() +\n                '-' +\n                driverOption.cdlState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Accident truck dropdown -->\n<ng-template #accidentTruckRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let truckOption = cast(truck, \"accidentTruck\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-truck-{{ truckOption.id }}\"\n        (click)=\"handleOption(truckOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentTruck')?.id === truckOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-unit\">\n          @if (truckOption.truckType?.logoName) {\n            <svg-icon\n              class=\"truck-icon truck-trailer-icon-colors\"\n              [class]=\"truckOption.truckType!.logoName.slice(0, -4)\"\n              [name]=\"truckOption.truckType!.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\n          ></p>\n        </div>\n        <p\n          class=\"accident-vin\"\n          [innerHTML]=\"truckOption.vin || '' | highlightSearch: value()\"\n        ></p>\n        <p\n          class=\"accident-plate\"\n          [innerHTML]=\"\n            truckOption.licensePlateNumber || '' | highlightSearch: value()\n          \"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              truckOption.licenseState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            truckOption.licenseState?.countryType?.name &&\n            truckOption.licenseState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                truckOption.licenseState?.countryType?.name?.toLowerCase() +\n                '-' +\n                truckOption.licenseState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Accident trailer dropdown -->\n<ng-template #accidentTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (trailer of dropdownOptions(); track $index; let index = $index) {\n      @let trailerOption = cast(trailer, \"accidentTrailer\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-trailer-{{ trailerOption.id }}\"\n        (click)=\"handleOption(trailerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentTrailer')?.id === trailerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-unit\">\n          @if (trailerOption.trailerType?.logoName) {\n            <svg-icon\n              class=\"trailer-icon truck-trailer-icon-colors\"\n              [class]=\"trailerOption.trailerType!.logoName.slice(0, -4)\"\n              [name]=\"trailerOption.trailerType!.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            [innerHTML]=\"trailerOption.trailerNumber | highlightSearch: value()\"\n          ></p>\n        </div>\n        <p\n          class=\"accident-vin\"\n          [innerHTML]=\"trailerOption.vin || '' | highlightSearch: value()\"\n        ></p>\n        <p\n          class=\"accident-plate\"\n          [innerHTML]=\"\n            trailerOption.licensePlateNumber || '' | highlightSearch: value()\n          \"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              trailerOption.licenseState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            trailerOption.licenseState?.countryType?.name &&\n            trailerOption.licenseState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                trailerOption.licenseState?.countryType?.name?.toLowerCase() +\n                '-' +\n                trailerOption.licenseState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\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 split-option\"\n        id=\"shipper-{{ shipperOption.id }}\"\n        (click)=\"handleOption(shipperOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"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=\"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      (click)=\"resetSelection()\"\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            (click)=\"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              (click)=\"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            (click)=\"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              (click)=\"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                  @let dispatchStatus = dispatch.status | dispatchStatus;\n                  @if (dispatchStatus) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"dispatchStatus.statusClass\"\n                    >\n                      @if (dispatchStatus.badge) {\n                        <p\n                          class=\"status-block\"\n                          [class]=\"dispatchStatus.badge.color\"\n                        >\n                          {{ dispatchStatus.badge.text }}\n                        </p>\n                      }\n                      {{ dispatchStatus.label }}\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                    {{ dispatch?.pendingLoadCount }}\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        (click)=\"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          (click)=\"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 | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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        (click)=\"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          (click)=\"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 = truckOption.dispatchStatus | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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        (click)=\"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          (click)=\"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 | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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          (click)=\"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        (click)=\"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<!-- Driver Owner dropdown -->\n\n<ng-template #driverOwnerRef>\n  @if (dropdownOptions().length) {\n    @for (driverOwner of dropdownOptions(); track $index; let index = $index) {\n      @let driverOwnerOption = cast(driverOwner, \"driverOwner\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ driverOwnerOption.id }}\"\n        (click)=\"handleOption(driverOwnerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'driverOwner')?.id === driverOwnerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <cai-avatar\n          [driver]=\"{\n            id: driverOwnerOption?.id || 0,\n            firstName: (driverOwnerOption?.fullName || ' ').split(' ')[0] || '',\n            lastName: (driverOwnerOption?.fullName || ' ').split(' ')[1] || '',\n            avatarFile: driverOwnerOption?.avatarFile,\n            colorFlag: driverOwnerOption?.colorFlag,\n            owner: driverOwnerOption?.driverType === 'OwnerOperator',\n            driverType: {\n              id: 0,\n              name: (driverOwnerOption?.driverType | driverTypeLabel),\n            },\n          }\"\n          [rounded]=\"false\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (driverOwnerOption.fullName || '' | highlightSearch: value())\n              : driverOwnerOption.fullName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <p class=\"driver-type\">\n            {{ driverOwnerOption.driverType | driverTypeLabel }}\n          </p>\n        </div>\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<!-- Truck Owner dropdown -->\n\n<ng-template #truckOwnerRef>\n  @if (dropdownOptions().length) {\n    @for (truckOwner of dropdownOptions(); track $index; let index = $index) {\n      @let truckOwnerOption = cast(truckOwner, \"truckOwner\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ truckOwnerOption.id }}\"\n        (click)=\"handleOption(truckOwnerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'truckOwner')?.id === truckOwnerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem truck-owner-unit\">\n          @if (truckOwnerOption.truckType?.logoName) {\n            <svg-icon\n              class=\"truck-icon truck-trailer-icon-colors\"\n              [class]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n              [name]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            class=\"dropdown-content\"\n            [innerHTML]=\"\n              search\n                ? (truckOwnerOption.truckNumber || ''\n                  | highlightSearch: value())\n                : truckOwnerOption.truckNumber\n            \"\n          ></p>\n          @if (truckOwnerOption.model) {\n            <p class=\"truck-owner-bullet\">\u2022</p>\n            <p\n              class=\"dropdown-content\"\n              [innerHTML]=\"\n                search\n                  ? (truckOwnerOption.model | highlightSearch: value())\n                  : truckOwnerOption.model\n              \"\n            ></p>\n          }\n        </div>\n        <div class=\"dropdown-subitem-end\">\n          <p class=\"driver-type\">\n            {{ truckOwnerOption.driverType | truckOwnershipLabel }}\n          </p>\n        </div>\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 #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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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            (click)=\"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                  (click)=\"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          (click)=\"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!.fraudCheck) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"fraud-icon\"></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>\n          {{ contactOption?.phone }}\n          {{\n            contactOption?.extensionPhone\n              ? \"x\" + contactOption?.extensionPhone\n              : \"\"\n          }}\n        </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 selected-end-item-truncate\">\n        <p class=\"text-truncate\">{{ 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 #selectedDriverOwnerRef>\n  @let driverOwnerOption = cast(selectedOption(), \"driverOwner\");\n  @if (driverOwnerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: driverOwnerOption?.id || 0,\n          firstName: (driverOwnerOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (driverOwnerOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: driverOwnerOption?.avatarFile,\n          colorFlag: driverOwnerOption?.colorFlag,\n          owner: driverOwnerOption?.driverType === 'OwnerOperator',\n          driverType: {\n            id: 0,\n            name: (driverOwnerOption?.driverType | driverTypeLabel),\n          },\n        }\"\n        [rounded]=\"false\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ driverOwnerOption?.fullName }}</p>\n      <p class=\"selected-end-item driver-type\">\n        {{ driverOwnerOption?.driverType | driverTypeLabel }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckOwnerRef>\n  @let truckOwnerOption = cast(selectedOption(), \"truckOwner\");\n  @if (truckOwnerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (truckOwnerOption.truckType?.logoName) {\n        <svg-icon\n          class=\"truck-icon option-icon\"\n          [name]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n        ></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">\n        {{ truckOwnerOption.truckNumber }}\n        @if (truckOwnerOption.model) {\n          <span class=\"truck-owner-bullet\">\u2022</span>\n          {{ truckOwnerOption.model }}\n        }\n      </p>\n      <p class=\"selected-end-item driver-type\">\n        {{ truckOwnerOption.driverType | truckOwnershipLabel }}\n      </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 #selectedAccidentDriverRef>\n  @let accidentDriverOption = cast(selectedOption(), \"accidentDriver\");\n  @if (accidentDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-name\">\n        <cai-avatar\n          [driver]=\"accidentDriverOption!\"\n          [size]=\"18\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p>\n          {{\n            accidentDriverOption!.firstName +\n              \" \" +\n              accidentDriverOption!.lastName\n          }}\n        </p>\n      </div>\n      <p class=\"accident-dob\">\n        {{ accidentDriverOption!.dateOfBirth | date: \"MM/dd/yy\" }}\n      </p>\n      <p class=\"accident-cdl-number\">\n        {{ accidentDriverOption!.cdlNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentDriverOption!.cdlState?.stateShortName }}</p>\n        @if (\n          accidentDriverOption!.cdlState?.countryType?.name &&\n          accidentDriverOption!.cdlState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentDriverOption!.cdlState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentDriverOption!.cdlState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedAccidentTruckRef>\n  @let accidentTruckOption = cast(selectedOption(), \"accidentTruck\");\n  @if (accidentTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-unit\">\n        @if (accidentTruckOption!.truckType?.logoName) {\n          <svg-icon\n            class=\"truck-icon option-icon\"\n            [name]=\"accidentTruckOption!.truckType!.logoName.slice(0, -4)\"\n          ></svg-icon>\n        }\n        <p>{{ accidentTruckOption!.truckNumber }}</p>\n      </div>\n      <p class=\"accident-vin\">{{ accidentTruckOption!.vin }}</p>\n      <p class=\"accident-plate\">\n        {{ accidentTruckOption!.licensePlateNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentTruckOption!.licenseState?.stateShortName }}</p>\n        @if (\n          accidentTruckOption!.licenseState?.countryType?.name &&\n          accidentTruckOption!.licenseState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentTruckOption!.licenseState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentTruckOption!.licenseState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedAccidentTrailerRef>\n  @let accidentTrailerOption = cast(selectedOption(), \"accidentTrailer\");\n  @if (accidentTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-unit\">\n        @if (accidentTrailerOption!.trailerType?.logoName) {\n          <svg-icon\n            class=\"trailer-icon option-icon\"\n            [name]=\"accidentTrailerOption!.trailerType!.logoName.slice(0, -4)\"\n          ></svg-icon>\n        }\n        <p>{{ accidentTrailerOption!.trailerNumber }}</p>\n      </div>\n      <p class=\"accident-vin\">{{ accidentTrailerOption!.vin }}</p>\n      <p class=\"accident-plate\">\n        {{ accidentTrailerOption!.licensePlateNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentTrailerOption!.licenseState?.stateShortName }}</p>\n        @if (\n          accidentTrailerOption!.licenseState?.countryType?.name &&\n          accidentTrailerOption!.licenseState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentTrailerOption!.licenseState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentTrailerOption!.licenseState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\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.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .app-input-label .accident-state{margin-right:44px}@media(hover:hover){.app-input-container:hover{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container:hover:not(:has(.app-input:disabled)) .app-input-label .accident-state{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)}@media(hover:hover){.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,.app-input-container:has(.app-input:focus-visible) .app-input-label .accident-state{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).hovered{background-color:var(--color-surface-disable)}@media(hover:hover){.app-input-container:has(.app-input:disabled):hover{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;pointer-events:none!important}.app-input-container:has(.app-input:disabled) .dropdown-selected:has(.selected-end-item){width:100%}.app-input-container:has(.app-input:disabled) .driver-type{color:#919191}.app-input-container:has(.app-input:disabled) .icon-container{pointer-events:none!important}.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)}@media(hover:hover){.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}}@media(hover:hover){.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.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)}@media(pointer:coarse){.app-input{font-size:16px;transform:scale(.875);transform-origin:left center;height:26px}}.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:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}@media(hover:hover){.app-input-container.has-error:hover: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.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}@media(hover:hover){.app-input-container.has-error:hover{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.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)}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.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:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}@media(hover:hover){.app-input-container.has-valid:hover: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).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.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).hovered .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.hovered .button-icon{opacity:1;pointer-events:auto}.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).hovered .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)}@media(hover:hover){.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover{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-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .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-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .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}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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)}@media(hover:hover){.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}.is-plan.has-selected .app-input,.is-plan.has-selected .dropdown-selected-content,.is-plan.has-selected .selected-text{font-weight:700}.is-plan.has-selected:not(:has(.app-input:focus-visible)) .app-input,.is-plan.has-selected:not(:has(.app-input:focus-visible)) .dropdown-selected-content,.is-plan.has-selected:not(:has(.app-input:focus-visible)) .selected-text{color:#3b73ed}@media(hover:hover){.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .app-input,.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .dropdown-selected-content,.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .selected-text{color:#0b49d1}}.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:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}@media(hover:hover){.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .icon-container .icon,.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .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:has(.app-input:focus-visible):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:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}@media(hover:hover){.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):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-dropdown:hover:not(:has(.app-input:disabled)):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}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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)}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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.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}@media(hover:hover){.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}@media(hover:hover){.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}.fraud-icon{color:#fab15c!important;height:18px;width:18px}.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:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}@media(hover:hover){.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}}.has-right .app-input{text-align:right}@media(pointer:coarse){.has-right .app-input{transform-origin:right center}}.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}@media(hover:hover){.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).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:not(:has(.app-input:disabled)).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(.app-input:disabled)):not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)):not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)):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(.app-input:disabled)):not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .icon-container .icon,.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .icon-container .icon-sm{opacity:0!important}}@media(hover:hover){.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)):not(:has(.app-input:disabled)).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}@media(hover:hover){.has-right.has-number.app-input-container:hover:not(:has(.app-input:disabled)) .number-container{width:60px}.has-right.has-number.app-input-container:hover:not(:has(.app-input:disabled)) .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)}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}}.is-adding:has(.app-input:focus-visible){padding-right:48px!important}@media(hover:hover){.is-adding:hover{padding-right:48px!important}}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}@media(hover:hover){.is-adding.has-right.has-right:hover{padding-left:40px}}.is-adding .app-input-icon{right:4px}@media(hover:hover){.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)}@media(hover:hover){.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-arrivedpickup,.dispatch-status.status-checkedinpickup,.dispatch-status.status-checkedin,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arriveddelivery,.dispatch-status.status-checkedindelivery,.dispatch-status.status-offloading,.dispatch-status.status-offloaded,.dispatch-status.status-empty{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-off,.dispatch-status.status-deadheading,.dispatch-status.status-break,.dispatch-status.status-split{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair,.dispatch-status.status-dispatchedrepair,.dispatch-status.status-loadedrepair{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),.app-input-label:has(.accident-state){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{max-width:170px;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}@media(hover:hover){.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}.accident-name,.accident-unit,.accident-dob,.accident-cdl-number,.accident-vin,.accident-plate{flex-shrink:0}.accident-name>p,.accident-unit>p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accident-name{width:218px}.accident-unit{width:170px}.accident-dob,.accident-cdl-number,.accident-vin,.accident-plate{text-align:right;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accident-dob{width:134px}.accident-cdl-number{width:140px}.accident-vin{width:182px}.accident-plate{width:140px}.accident-state{margin-left:auto;justify-content:flex-end;text-align:right}.app-input-label .accident-state{margin-right:22px;white-space:nowrap;transition:margin .1s ease-in-out}.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%}@media(hover:hover){.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.unfolded .counter{color:#fff}@media(hover:hover){.dropdown-group .group-item:hover .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.active{background-color:#424242}@media(hover:hover){.dropdown-group.active .group-item:hover{background-color:#424242}}.dropdown-group.active .dropdown-item{background-color:#424242}@media(hover:hover){.dropdown-group:hover:not(.no-items){background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .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}@media(hover:hover){.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{padding-top:2px;padding-bottom:2px;padding-left:4px}@media(pointer:coarse){.size-22 .app-input{height:22px}}.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}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.split-option>p{max-width:calc(50% - 2px)}.split-option .dropdown-subitem-end{width:calc(50% - 2px)}.split-option .end-item-base,.split-option .end-item-hover{max-width:100%}.selected-end-item-truncate{max-width:50%}.truck-owner-unit{min-width:0}.truck-owner-unit .dropdown-content{max-width:none;min-width:0}.truck-owner-bullet{flex-shrink:0;color:#919191}\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', 'top']\"\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  @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 && !isPartiallyMasked()\n        ? visible()\n          ? 'text'\n          : 'password'\n        : '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    [phone]=\"config().type === 'phone'\"\n    [isInternational]=\"config().isInternational || false\"\n    [phoneCountries]=\"config().phoneCountries\"\n    [defaultDialCode]=\"config().defaultDialCode\"\n    [attr.inputmode]=\"config().type === 'phone' ? 'tel' : null\"\n    [appNumberRangeList]=\"config().numberRangeList || false\"\n    [reveal]=\"config().reveal || 0\"\n    [hide]=\"config().hide || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [numberFormat]=\"config().numberFormat\"\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      <!-- Accident -->\n      @else if (dropdownType === \"accident-driver\") {\n        <p class=\"accident-name app-input-name\">{{ name }}</p>\n        <p class=\"accident-dob app-input-name\">DOB</p>\n        <p class=\"accident-cdl-number app-input-name\">CDL No.</p>\n        <p class=\"accident-state app-input-name\">CDL State</p>\n      } @else if (\n        dropdownType === \"accident-truck\" || dropdownType === \"accident-trailer\"\n      ) {\n        <p class=\"accident-unit app-input-name\">{{ name }}</p>\n        <p class=\"accident-vin app-input-name\">VIN</p>\n        <p class=\"accident-plate app-input-name\">Lic. Plate No.</p>\n        <p class=\"accident-state app-input-name\">Lic. State</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 : config().numberFormat)[0] &&\n    !(config().inTable && config().placeholderBehavior !== \"static\")\n  ) {\n    <div class=\"app-input-error\">\n      {{ (ngControl?.errors | errorMessage: config().customErrors : config().numberFormat)[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      (mousedown)=\"$event.preventDefault()\"\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            (click)=\"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 === \"driver-owner\" ||\n      dropdownType === \"truck-owner\" ||\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      dropdownType === \"accident-driver\" ||\n      dropdownType === \"accident-truck\" ||\n      dropdownType === \"accident-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 (\"driver-owner\") {\n      <ng-container *ngTemplateOutlet=\"driverOwnerRef\"></ng-container>\n    }\n    @case (\"truck-owner\") {\n      <ng-container *ngTemplateOutlet=\"truckOwnerRef\"></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 (\"accident-driver\") {\n      <ng-container *ngTemplateOutlet=\"accidentDriverRef\"></ng-container>\n    }\n    @case (\"accident-truck\") {\n      <ng-container *ngTemplateOutlet=\"accidentTruckRef\"></ng-container>\n    }\n    @case (\"accident-trailer\") {\n      <ng-container *ngTemplateOutlet=\"accidentTrailerRef\"></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 (\"driver-owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedDriverOwnerRef\"></ng-container>\n    }\n    @case (\"truck-owner\") {\n      <ng-container *ngTemplateOutlet=\"selectedTruckOwnerRef\"></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    @case (\"accident-driver\") {\n      <ng-container\n        *ngTemplateOutlet=\"selectedAccidentDriverRef\"\n      ></ng-container>\n    }\n    @case (\"accident-truck\") {\n      <ng-container *ngTemplateOutlet=\"selectedAccidentTruckRef\"></ng-container>\n    }\n    @case (\"accident-trailer\") {\n      <ng-container\n        *ngTemplateOutlet=\"selectedAccidentTrailerRef\"\n      ></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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"\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=\"fraud-icon\"\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 split-option\"\n        id=\"contact-{{ contact.id }}\"\n        (click)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"text-truncate\"\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 class=\"text-truncate\">{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p class=\"text-truncate\">\n              {{ contactOption.phone }}\n              {{\n                contactOption.extensionPhone\n                  ? \"x\" + contactOption.extensionPhone\n                  : \"\"\n              }}\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        (click)=\"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        (click)=\"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<!-- Accident driver dropdown -->\n<ng-template #accidentDriverRef>\n  @if (dropdownOptions().length) {\n    @for (driver of dropdownOptions(); track $index; let index = $index) {\n      @let driverOption = cast(driver, \"accidentDriver\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-driver-{{ driverOption.id }}\"\n        (click)=\"handleOption(driverOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentDriver')?.id === driverOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-name\">\n          <cai-avatar\n            [driver]=\"driverOption\"\n            [size]=\"18\"\n            [inverse]=\"true\"\n            [hover]=\"false\"\n          ></cai-avatar>\n          <p\n            [innerHTML]=\"\n              driverOption.firstName + ' ' + driverOption.lastName\n                | highlightSearch: value()\n            \"\n          ></p>\n        </div>\n        <p class=\"accident-dob\">\n          {{ driverOption.dateOfBirth | date: \"MM/dd/yy\" }}\n        </p>\n        <p\n          class=\"accident-cdl-number\"\n          [innerHTML]=\"driverOption.cdlNumber || '' | highlightSearch: value()\"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              driverOption.cdlState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            driverOption.cdlState?.countryType?.name &&\n            driverOption.cdlState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                driverOption.cdlState?.countryType?.name?.toLowerCase() +\n                '-' +\n                driverOption.cdlState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Accident truck dropdown -->\n<ng-template #accidentTruckRef>\n  @if (dropdownOptions().length) {\n    @for (truck of dropdownOptions(); track $index; let index = $index) {\n      @let truckOption = cast(truck, \"accidentTruck\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-truck-{{ truckOption.id }}\"\n        (click)=\"handleOption(truckOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentTruck')?.id === truckOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-unit\">\n          @if (truckOption.truckType?.logoName) {\n            <svg-icon\n              class=\"truck-icon truck-trailer-icon-colors\"\n              [class]=\"truckOption.truckType!.logoName.slice(0, -4)\"\n              [name]=\"truckOption.truckType!.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\n          ></p>\n        </div>\n        <p\n          class=\"accident-vin\"\n          [innerHTML]=\"truckOption.vin || '' | highlightSearch: value()\"\n        ></p>\n        <p\n          class=\"accident-plate\"\n          [innerHTML]=\"\n            truckOption.licensePlateNumber || '' | highlightSearch: value()\n          \"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              truckOption.licenseState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            truckOption.licenseState?.countryType?.name &&\n            truckOption.licenseState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                truckOption.licenseState?.countryType?.name?.toLowerCase() +\n                '-' +\n                truckOption.licenseState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Accident trailer dropdown -->\n<ng-template #accidentTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (trailer of dropdownOptions(); track $index; let index = $index) {\n      @let trailerOption = cast(trailer, \"accidentTrailer\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"accident-trailer-{{ trailerOption.id }}\"\n        (click)=\"handleOption(trailerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'accidentTrailer')?.id === trailerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem accident-unit\">\n          @if (trailerOption.trailerType?.logoName) {\n            <svg-icon\n              class=\"trailer-icon truck-trailer-icon-colors\"\n              [class]=\"trailerOption.trailerType!.logoName.slice(0, -4)\"\n              [name]=\"trailerOption.trailerType!.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            [innerHTML]=\"trailerOption.trailerNumber | highlightSearch: value()\"\n          ></p>\n        </div>\n        <p\n          class=\"accident-vin\"\n          [innerHTML]=\"trailerOption.vin || '' | highlightSearch: value()\"\n        ></p>\n        <p\n          class=\"accident-plate\"\n          [innerHTML]=\"\n            trailerOption.licensePlateNumber || '' | highlightSearch: value()\n          \"\n        ></p>\n        <div class=\"dropdown-subitem accident-state\">\n          <p\n            [innerHTML]=\"\n              trailerOption.licenseState?.stateShortName || ''\n                | highlightSearch: value()\n            \"\n          ></p>\n          @if (\n            trailerOption.licenseState?.countryType?.name &&\n            trailerOption.licenseState?.stateShortName\n          ) {\n            <svg-icon\n              class=\"icon\"\n              [name]=\"\n                'cai-' +\n                trailerOption.licenseState?.countryType?.name?.toLowerCase() +\n                '-' +\n                trailerOption.licenseState?.stateShortName?.toLowerCase()\n              \"\n            ></svg-icon>\n          }\n        </div>\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 split-option\"\n        id=\"shipper-{{ shipperOption.id }}\"\n        (click)=\"handleOption(shipperOption, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          class=\"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=\"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      (click)=\"resetSelection()\"\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            (click)=\"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              (click)=\"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            (click)=\"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              (click)=\"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                  @let dispatchStatus = dispatch.status | dispatchStatus;\n                  @if (dispatchStatus) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"dispatchStatus.statusClass\"\n                    >\n                      @if (dispatchStatus.badge) {\n                        <p\n                          class=\"status-block\"\n                          [class]=\"dispatchStatus.badge.color\"\n                        >\n                          {{ dispatchStatus.badge.text }}\n                        </p>\n                      }\n                      {{ dispatchStatus.label }}\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                    {{ dispatch?.pendingLoadCount }}\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        (click)=\"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          (click)=\"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 | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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        (click)=\"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          (click)=\"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 = truckOption.dispatchStatus | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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        (click)=\"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          (click)=\"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 | dispatchStatus;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"dispatchStatus.statusClass\"\n                >\n                  @if (dispatchStatus.badge) {\n                    <p\n                      class=\"status-block\"\n                      [class]=\"dispatchStatus.badge.color\"\n                    >\n                      {{ dispatchStatus.badge.text }}\n                    </p>\n                  }\n                  {{ dispatchStatus.label }}\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          (click)=\"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        (click)=\"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<!-- Driver Owner dropdown -->\n\n<ng-template #driverOwnerRef>\n  @if (dropdownOptions().length) {\n    @for (driverOwner of dropdownOptions(); track $index; let index = $index) {\n      @let driverOwnerOption = cast(driverOwner, \"driverOwner\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ driverOwnerOption.id }}\"\n        (click)=\"handleOption(driverOwnerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'driverOwner')?.id === driverOwnerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <cai-avatar\n          [driver]=\"{\n            id: driverOwnerOption?.id || 0,\n            firstName: (driverOwnerOption?.fullName || ' ').split(' ')[0] || '',\n            lastName: (driverOwnerOption?.fullName || ' ').split(' ')[1] || '',\n            avatarFile: driverOwnerOption?.avatarFile,\n            colorFlag: driverOwnerOption?.colorFlag,\n            owner: driverOwnerOption?.driverType === 'OwnerOperator',\n            driverType: {\n              id: 0,\n              name: (driverOwnerOption?.driverType | driverTypeLabel),\n            },\n          }\"\n          [rounded]=\"false\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (driverOwnerOption.fullName || '' | highlightSearch: value())\n              : driverOwnerOption.fullName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <p class=\"driver-type\">\n            {{ driverOwnerOption.driverType | driverTypeLabel }}\n          </p>\n        </div>\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<!-- Truck Owner dropdown -->\n\n<ng-template #truckOwnerRef>\n  @if (dropdownOptions().length) {\n    @for (truckOwner of dropdownOptions(); track $index; let index = $index) {\n      @let truckOwnerOption = cast(truckOwner, \"truckOwner\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"option-{{ truckOwnerOption.id }}\"\n        (click)=\"handleOption(truckOwnerOption, $event)\"\n        [class]=\"{\n          selected:\n            cast(selectedOption(), 'truckOwner')?.id === truckOwnerOption.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <div class=\"dropdown-subitem truck-owner-unit\">\n          @if (truckOwnerOption.truckType?.logoName) {\n            <svg-icon\n              class=\"truck-icon truck-trailer-icon-colors\"\n              [class]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n              [name]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n            ></svg-icon>\n          }\n          <p\n            class=\"dropdown-content\"\n            [innerHTML]=\"\n              search\n                ? (truckOwnerOption.truckNumber || ''\n                  | highlightSearch: value())\n                : truckOwnerOption.truckNumber\n            \"\n          ></p>\n          @if (truckOwnerOption.model) {\n            <p class=\"truck-owner-bullet\">\u2022</p>\n            <p\n              class=\"dropdown-content\"\n              [innerHTML]=\"\n                search\n                  ? (truckOwnerOption.model | highlightSearch: value())\n                  : truckOwnerOption.model\n              \"\n            ></p>\n          }\n        </div>\n        <div class=\"dropdown-subitem-end\">\n          <p class=\"driver-type\">\n            {{ truckOwnerOption.driverType | truckOwnershipLabel }}\n          </p>\n        </div>\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 #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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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        (click)=\"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            (click)=\"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                  (click)=\"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          (click)=\"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!.fraudCheck) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"fraud-icon\"></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>\n          {{ contactOption?.phone }}\n          {{\n            contactOption?.extensionPhone\n              ? \"x\" + contactOption?.extensionPhone\n              : \"\"\n          }}\n        </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 selected-end-item-truncate\">\n        <p class=\"text-truncate\">{{ 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 #selectedDriverOwnerRef>\n  @let driverOwnerOption = cast(selectedOption(), \"driverOwner\");\n  @if (driverOwnerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: driverOwnerOption?.id || 0,\n          firstName: (driverOwnerOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (driverOwnerOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: driverOwnerOption?.avatarFile,\n          colorFlag: driverOwnerOption?.colorFlag,\n          owner: driverOwnerOption?.driverType === 'OwnerOperator',\n          driverType: {\n            id: 0,\n            name: (driverOwnerOption?.driverType | driverTypeLabel),\n          },\n        }\"\n        [rounded]=\"false\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ driverOwnerOption?.fullName }}</p>\n      <p class=\"selected-end-item driver-type\">\n        {{ driverOwnerOption?.driverType | driverTypeLabel }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckOwnerRef>\n  @let truckOwnerOption = cast(selectedOption(), \"truckOwner\");\n  @if (truckOwnerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (truckOwnerOption.truckType?.logoName) {\n        <svg-icon\n          class=\"truck-icon option-icon\"\n          [name]=\"truckOwnerOption.truckType.logoName.slice(0, -4)\"\n        ></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">\n        {{ truckOwnerOption.truckNumber }}\n        @if (truckOwnerOption.model) {\n          <span class=\"truck-owner-bullet\">\u2022</span>\n          {{ truckOwnerOption.model }}\n        }\n      </p>\n      <p class=\"selected-end-item driver-type\">\n        {{ truckOwnerOption.driverType | truckOwnershipLabel }}\n      </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 #selectedAccidentDriverRef>\n  @let accidentDriverOption = cast(selectedOption(), \"accidentDriver\");\n  @if (accidentDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-name\">\n        <cai-avatar\n          [driver]=\"accidentDriverOption!\"\n          [size]=\"18\"\n          [hover]=\"false\"\n        ></cai-avatar>\n        <p>\n          {{\n            accidentDriverOption!.firstName +\n              \" \" +\n              accidentDriverOption!.lastName\n          }}\n        </p>\n      </div>\n      <p class=\"accident-dob\">\n        {{ accidentDriverOption!.dateOfBirth | date: \"MM/dd/yy\" }}\n      </p>\n      <p class=\"accident-cdl-number\">\n        {{ accidentDriverOption!.cdlNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentDriverOption!.cdlState?.stateShortName }}</p>\n        @if (\n          accidentDriverOption!.cdlState?.countryType?.name &&\n          accidentDriverOption!.cdlState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentDriverOption!.cdlState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentDriverOption!.cdlState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedAccidentTruckRef>\n  @let accidentTruckOption = cast(selectedOption(), \"accidentTruck\");\n  @if (accidentTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-unit\">\n        @if (accidentTruckOption!.truckType?.logoName) {\n          <svg-icon\n            class=\"truck-icon option-icon\"\n            [name]=\"accidentTruckOption!.truckType!.logoName.slice(0, -4)\"\n          ></svg-icon>\n        }\n        <p>{{ accidentTruckOption!.truckNumber }}</p>\n      </div>\n      <p class=\"accident-vin\">{{ accidentTruckOption!.vin }}</p>\n      <p class=\"accident-plate\">\n        {{ accidentTruckOption!.licensePlateNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentTruckOption!.licenseState?.stateShortName }}</p>\n        @if (\n          accidentTruckOption!.licenseState?.countryType?.name &&\n          accidentTruckOption!.licenseState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentTruckOption!.licenseState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentTruckOption!.licenseState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedAccidentTrailerRef>\n  @let accidentTrailerOption = cast(selectedOption(), \"accidentTrailer\");\n  @if (accidentTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-subitem accident-unit\">\n        @if (accidentTrailerOption!.trailerType?.logoName) {\n          <svg-icon\n            class=\"trailer-icon option-icon\"\n            [name]=\"accidentTrailerOption!.trailerType!.logoName.slice(0, -4)\"\n          ></svg-icon>\n        }\n        <p>{{ accidentTrailerOption!.trailerNumber }}</p>\n      </div>\n      <p class=\"accident-vin\">{{ accidentTrailerOption!.vin }}</p>\n      <p class=\"accident-plate\">\n        {{ accidentTrailerOption!.licensePlateNumber }}\n      </p>\n      <div class=\"dropdown-subitem accident-state\">\n        <p>{{ accidentTrailerOption!.licenseState?.stateShortName }}</p>\n        @if (\n          accidentTrailerOption!.licenseState?.countryType?.name &&\n          accidentTrailerOption!.licenseState?.stateShortName\n        ) {\n          <svg-icon\n            class=\"icon option-icon\"\n            [name]=\"\n              'cai-' +\n              accidentTrailerOption!.licenseState?.countryType?.name?.toLowerCase() +\n              '-' +\n              accidentTrailerOption!.licenseState?.stateShortName?.toLowerCase()\n            \"\n          ></svg-icon>\n        }\n      </div>\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 : config().numberFormat)[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.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .app-input-label .accident-state{margin-right:44px}@media(hover:hover){.app-input-container:hover{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container:hover:not(:has(.app-input:disabled)) .app-input-label .accident-state{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)}@media(hover:hover){.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,.app-input-container:has(.app-input:focus-visible) .app-input-label .accident-state{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).hovered{background-color:var(--color-surface-disable)}@media(hover:hover){.app-input-container:has(.app-input:disabled):hover{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;pointer-events:none!important}.app-input-container:has(.app-input:disabled) .dropdown-selected:has(.selected-end-item){width:100%}.app-input-container:has(.app-input:disabled) .driver-type{color:#919191}.app-input-container:has(.app-input:disabled) .icon-container{pointer-events:none!important}.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)}@media(hover:hover){.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}}@media(hover:hover){.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.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)}@media(pointer:coarse){.app-input{font-size:16px;transform:scale(.875);transform-origin:left center;height:26px}}.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:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}@media(hover:hover){.app-input-container.has-error:hover: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.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}@media(hover:hover){.app-input-container.has-error:hover{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.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)}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}}@media(hover:hover){.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.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:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}@media(hover:hover){.app-input-container.has-valid:hover: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).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.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).hovered .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.hovered .button-icon{opacity:1;pointer-events:auto}.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).hovered .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)}@media(hover:hover){.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover{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-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .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-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .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}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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)}@media(hover:hover){.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}.is-plan.has-selected .app-input,.is-plan.has-selected .dropdown-selected-content,.is-plan.has-selected .selected-text{font-weight:700}.is-plan.has-selected:not(:has(.app-input:focus-visible)) .app-input,.is-plan.has-selected:not(:has(.app-input:focus-visible)) .dropdown-selected-content,.is-plan.has-selected:not(:has(.app-input:focus-visible)) .selected-text{color:#3b73ed}@media(hover:hover){.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .app-input,.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .dropdown-selected-content,.is-plan.has-selected:not(:has(.app-input:focus-visible)):hover .selected-text{color:#0b49d1}}.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:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}@media(hover:hover){.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .icon-container .icon,.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:not(:has(.app-input:disabled)):hover .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:has(.app-input:focus-visible):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:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}@media(hover:hover){.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):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-dropdown:hover:not(:has(.app-input:disabled)):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}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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)}@media(hover:hover){.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}@media(hover:hover){.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}@media(hover:hover){.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.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}@media(hover:hover){.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}@media(hover:hover){.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}.fraud-icon{color:#fab15c!important;height:18px;width:18px}.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:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}@media(hover:hover){.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}}.has-right .app-input{text-align:right}@media(pointer:coarse){.has-right .app-input{transform-origin:right center}}.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}@media(hover:hover){.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).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:not(:has(.app-input:disabled)).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(.app-input:disabled)):not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)):not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)):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(.app-input:disabled)):not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)).has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .icon-container .icon,.has-right.static-placeholder.removable:hover:not(:has(.app-input:disabled)) .icon-container .icon-sm{opacity:0!important}}@media(hover:hover){.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)):not(:has(.app-input:disabled)).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}@media(hover:hover){.has-right.has-number.app-input-container:hover:not(:has(.app-input:disabled)) .number-container{width:60px}.has-right.has-number.app-input-container:hover:not(:has(.app-input:disabled)) .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)}@media(hover:hover){.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}}@media(hover:hover){.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}}@media(hover:hover){.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}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}}@media(hover:hover){.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}}.is-adding:has(.app-input:focus-visible){padding-right:48px!important}@media(hover:hover){.is-adding:hover{padding-right:48px!important}}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}@media(hover:hover){.is-adding.has-right.has-right:hover{padding-left:40px}}.is-adding .app-input-icon{right:4px}@media(hover:hover){.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)}@media(hover:hover){.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-arrivedpickup,.dispatch-status.status-checkedinpickup,.dispatch-status.status-checkedin,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arriveddelivery,.dispatch-status.status-checkedindelivery,.dispatch-status.status-offloading,.dispatch-status.status-offloaded,.dispatch-status.status-empty{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-off,.dispatch-status.status-deadheading,.dispatch-status.status-break,.dispatch-status.status-split{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair,.dispatch-status.status-dispatchedrepair,.dispatch-status.status-loadedrepair{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),.app-input-label:has(.accident-state){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{max-width:170px;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}@media(hover:hover){.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}.accident-name,.accident-unit,.accident-dob,.accident-cdl-number,.accident-vin,.accident-plate{flex-shrink:0}.accident-name>p,.accident-unit>p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accident-name{width:218px}.accident-unit{width:170px}.accident-dob,.accident-cdl-number,.accident-vin,.accident-plate{text-align:right;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accident-dob{width:134px}.accident-cdl-number{width:140px}.accident-vin{width:182px}.accident-plate{width:140px}.accident-state{margin-left:auto;justify-content:flex-end;text-align:right}.app-input-label .accident-state{margin-right:22px;white-space:nowrap;transition:margin .1s ease-in-out}.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%}@media(hover:hover){.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.unfolded .counter{color:#fff}@media(hover:hover){.dropdown-group .group-item:hover .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.active{background-color:#424242}@media(hover:hover){.dropdown-group.active .group-item:hover{background-color:#424242}}.dropdown-group.active .dropdown-item{background-color:#424242}@media(hover:hover){.dropdown-group:hover:not(.no-items){background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .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}@media(hover:hover){.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{padding-top:2px;padding-bottom:2px;padding-left:4px}@media(pointer:coarse){.size-22 .app-input{height:22px}}.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}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.split-option>p{max-width:calc(50% - 2px)}.split-option .dropdown-subitem-end{width:calc(50% - 2px)}.split-option .end-item-base,.split-option .end-item-hover{max-width:100%}.selected-end-item-truncate{max-width:50%}.truck-owner-unit{min-width:0}.truck-owner-unit .dropdown-content{max-width:none;min-width:0}.truck-owner-bullet{flex-shrink:0;color:#919191}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -6901,6 +7154,7 @@ class CustomDatetimePickersConstants {
         12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
         11,
     ];
+    static hourTimesTwentyFour = Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, '0'));
     static defaultScrollTypes = {
         pmAmScroll: 0,
         minutesScroll: 0,
@@ -7477,7 +7731,9 @@ class CaCustomDatetimePickersComponent {
     set dateTime(value) {
         this._dateTime = value;
         // Update time value when dateTime changes
-        if (this.hourScroll && this.minutesScroll && this.pmAmScroll) {
+        if (this.hourScroll &&
+            this.minutesScroll &&
+            (this.pmAmScroll || this.isTwentyFourHour)) {
             this.setTimeValue();
         }
     }
@@ -7494,6 +7750,10 @@ class CaCustomDatetimePickersComponent {
             this.timeMinutes = CustomDatetimePickersConstants.timeMinutesGapFive;
         else
             this.timeMinutes = CustomDatetimePickersConstants.timeMinutes;
+        this.isTwentyFourHour = this._inputConfig.timeFormat === 'TwentyFourHour';
+        this.hourTimes = this.isTwentyFourHour
+            ? CustomDatetimePickersConstants.hourTimesTwentyFour
+            : CustomDatetimePickersConstants.hourTimes;
     }
     closePopover = new EventEmitter();
     dateCalendar;
@@ -7522,6 +7782,7 @@ class CaCustomDatetimePickersComponent {
     isInputFocus;
     monthNames = CustomDatetimePickersConstants.monthNames;
     hourTimes = CustomDatetimePickersConstants.hourTimes;
+    isTwentyFourHour = false;
     scrollTypes = CustomDatetimePickersConstants.defaultScrollTypes;
     selectedTime = CustomDatetimePickersConstants.defaultSelectedTime;
     timeOfDay = CustomDatetimePickersConstants.timeOfDay;
@@ -7561,7 +7822,8 @@ class CaCustomDatetimePickersComponent {
         const dateInputArray = moment(this.dateTime).format('h/mm/A').split('/');
         // console.log(dateInputArray, 'this.inputConfig');
         setTimeout(() => {
-            this.scrollTypes.hourScroll = this.hourTimes.indexOf(parseInt(dateInputArray[0]));
+            // The hour list holds one entry per hour of the day, AM then PM.
+            this.scrollTypes.hourScroll = this.dateTime.getHours();
             this.scrollTypes.minutesScroll = this.timeMinutes.indexOf(dateInputArray[1]);
             this.scrollTypes.pmAmScroll = dateInputArray[2] === 'AM' ? 0 : 1;
             // Update scroll positions if elements exist
@@ -7604,8 +7866,10 @@ class CaCustomDatetimePickersComponent {
                     this.scrollTypes.hourScroll * 22;
                 this.minutesScroll.nativeElement.scrollTop =
                     this.scrollTypes.minutesScroll * 22;
-                this.pmAmScroll.nativeElement.scrollTop =
-                    this.scrollTypes.pmAmScroll * 22;
+                if (this.pmAmScroll) {
+                    this.pmAmScroll.nativeElement.scrollTop =
+                        this.scrollTypes.pmAmScroll * 22;
+                }
             });
         }
         else {
@@ -7615,6 +7879,12 @@ class CaCustomDatetimePickersComponent {
     }
     setTime(event) {
         event?.stopPropagation();
+        if (this.isTwentyFourHour) {
+            const selectedTime = new Date();
+            selectedTime.setHours(this.scrollTypes.hourScroll, Number(this.timeMinutes[this.scrollTypes.minutesScroll]), 0, 0);
+            this.closePopover.emit(selectedTime);
+            return;
+        }
         this.outputType[0] = this.hourTimes[this.scrollTypes.hourScroll];
         this.outputType[2] = this.timeMinutes[this.scrollTypes.minutesScroll];
         this.outputType[4] = this.timeOfDay[this.scrollTypes.pmAmScroll];
@@ -7687,15 +7957,18 @@ class CaCustomDatetimePickersComponent {
                 }
             }
         }
-        this.selectedTime = this.timeMinutes[this.scrollTypes.minutesScroll]
-            ? `${this.hourTimes[this.scrollTypes.hourScroll]}:${this.timeMinutes[this.scrollTypes.minutesScroll]} ${this.timeOfDay[this.scrollTypes.pmAmScroll]}`
-            : '';
+        const selectedTime = `${this.hourTimes[this.scrollTypes.hourScroll]}:${this.timeMinutes[this.scrollTypes.minutesScroll]}`;
+        this.selectedTime = !this.timeMinutes[this.scrollTypes.minutesScroll]
+            ? ''
+            : this.isTwentyFourHour
+                ? selectedTime
+                : `${selectedTime} ${this.timeOfDay[this.scrollTypes.pmAmScroll]}`;
     }
     ngOnDestroy() {
         this.listPreview = CalendarListPreviewStringEnum.FULL_LIST;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: CaCustomDatetimePickersComponent, deps: [{ token: CalendarDateTimePickerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: CaCustomDatetimePickersComponent, isStandalone: true, selector: "cai-custom-datetime-pickers", inputs: { dateTime: "dateTime", inputConfig: "inputConfig", calendarType: "calendarType", placeholder: "placeholder" }, outputs: { closePopover: "closePopover", onRefocusInput: "onRefocusInput" }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, read: ViewContainerRef }, { propertyName: "dateCalendar", first: true, predicate: CaCustomDateTimePickersDateCalendarsComponent, descendants: true }, { propertyName: "pmAmScroll", first: true, predicate: ["pmAmScroll"], descendants: true }, { propertyName: "minutesScroll", first: true, predicate: ["minutesScroll"], descendants: true }, { propertyName: "hourScroll", first: true, predicate: ["hourScroll"], descendants: true }], ngImport: i0, template: "<div\n  class=\"temp_inp_holder\"\n  (pointerdown)=\"refocusInput($event)\"\n  (mousedown)=\"$event.preventDefault()\"\n>\n  <div>\n    <div class=\"pickers_holder dark_picker\">\n      @if (calendarMainType === \"date\") {\n        <div class=\"date_picker\">\n          <cai-custom-datetime-pickers-date-calendars\n            [listPreview]=\"listPreview\"\n            [dateTime]=\"dateTime\"\n            [isMonthAndYearOnly]=\"_inputConfig.name === 'datepickerBankCard'\"\n            (setListPreviewValue)=\"setListPreview($event)\"\n            (onRefocusInput)=\"refocusInput($event)\"\n          ></cai-custom-datetime-pickers-date-calendars>\n        </div>\n      }\n      @if (calendarMainType === \"time\") {\n        <div class=\"time_picker\">\n          <div class=\"time_picker_head d-flex\">\n            <div class=\"selected_time ta-font-bold\">\n              {{ selectedTime || (dateTime | date: \"hh:mm aa\") }}\n            </div>\n            <div class=\"sel_now ta-font-bold\" (click)=\"setDefaultTime($event)\">\n              Default\n            </div>\n          </div>\n          <div class=\"time_picker_body\">\n            <div class=\"picker_body_head\">\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'hours'\"\n              >\n                Hour\n              </div>\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'minutes'\"\n              >\n                Minute\n              </div>\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'times'\"\n              >\n                AM/PM\n              </div>\n            </div>\n            <div class=\"picker_body\">\n              <div\n                #hourScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'hours'\"\n                (scroll)=\"onScroll($event, 'hourScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (hour of hourTimes; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.hourScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'hourScroll', indx)\"\n                  >\n                    {{ hour }}\n                  </div>\n                }\n              </div>\n              <div\n                #minutesScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'minutes'\"\n                (scroll)=\"onScroll($event, 'minutesScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (minutes of timeMinutes; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.minutesScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'minutesScroll', indx)\"\n                  >\n                    {{ minutes }}\n                  </div>\n                }\n              </div>\n              <div\n                #pmAmScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'times'\"\n                (scroll)=\"onScroll($event, 'pmAmScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (when of timeOfDay; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.pmAmScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'pmAmScroll', indx)\"\n                  >\n                    {{ when }}\n                  </div>\n                }\n              </div>\n              <div class=\"picker_line\">\n                <span class=\"border_line\"></span>\n                <span class=\"border_line line_2\"></span>\n              </div>\n            </div>\n            <div class=\"picker_buttons\">\n              <div\n                (click)=\"closePopup($event)\"\n                class=\"pick_button ta-font-bold\"\n              >\n                Cancel\n              </div>\n              <div\n                (click)=\"setTime($event)\"\n                class=\"pick_button set_button ta-font-bold\"\n              >\n                Set\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CaCustomDateTimePickersDateCalendarsComponent, selector: "cai-custom-datetime-pickers-date-calendars", inputs: ["listPreview", "dateTime", "isMonthAndYearOnly"], outputs: ["setListPreviewValue", "onRefocusInput"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: CaCustomDatetimePickersComponent, isStandalone: true, selector: "cai-custom-datetime-pickers", inputs: { dateTime: "dateTime", inputConfig: "inputConfig", calendarType: "calendarType", placeholder: "placeholder" }, outputs: { closePopover: "closePopover", onRefocusInput: "onRefocusInput" }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, read: ViewContainerRef }, { propertyName: "dateCalendar", first: true, predicate: CaCustomDateTimePickersDateCalendarsComponent, descendants: true }, { propertyName: "pmAmScroll", first: true, predicate: ["pmAmScroll"], descendants: true }, { propertyName: "minutesScroll", first: true, predicate: ["minutesScroll"], descendants: true }, { propertyName: "hourScroll", first: true, predicate: ["hourScroll"], descendants: true }], ngImport: i0, template: "<div\n  class=\"temp_inp_holder\"\n  (pointerdown)=\"refocusInput($event)\"\n  (mousedown)=\"$event.preventDefault()\"\n>\n  <div>\n    <div class=\"pickers_holder dark_picker\">\n      @if (calendarMainType === \"date\") {\n        <div class=\"date_picker\">\n          <cai-custom-datetime-pickers-date-calendars\n            [listPreview]=\"listPreview\"\n            [dateTime]=\"dateTime\"\n            [isMonthAndYearOnly]=\"_inputConfig.name === 'datepickerBankCard'\"\n            (setListPreviewValue)=\"setListPreview($event)\"\n            (onRefocusInput)=\"refocusInput($event)\"\n          ></cai-custom-datetime-pickers-date-calendars>\n        </div>\n      }\n      @if (calendarMainType === \"time\") {\n        <div class=\"time_picker\" [class.time_picker_24h]=\"isTwentyFourHour\">\n          <div class=\"time_picker_head d-flex\">\n            <div class=\"selected_time ta-font-bold\">\n              {{\n                selectedTime ||\n                  (dateTime | date: (isTwentyFourHour ? \"HH:mm\" : \"hh:mm aa\"))\n              }}\n            </div>\n            <div class=\"sel_now ta-font-bold\" (click)=\"setDefaultTime($event)\">\n              Default\n            </div>\n          </div>\n          <div class=\"time_picker_body\">\n            <div class=\"picker_body_head\">\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'hours'\"\n              >\n                Hour\n              </div>\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'minutes'\"\n              >\n                Minute\n              </div>\n              @if (!isTwentyFourHour) {\n                <div\n                  class=\"ta-font-bold\"\n                  [class.active]=\"hoveredItem === 'times'\"\n                >\n                  AM/PM\n                </div>\n              }\n            </div>\n            <div class=\"picker_body\">\n              <div\n                #hourScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'hours'\"\n                (scroll)=\"onScroll($event, 'hourScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (hour of hourTimes; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.hourScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'hourScroll', indx)\"\n                  >\n                    {{ hour }}\n                  </div>\n                }\n              </div>\n              <div\n                #minutesScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'minutes'\"\n                (scroll)=\"onScroll($event, 'minutesScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (minutes of timeMinutes; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.minutesScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'minutesScroll', indx)\"\n                  >\n                    {{ minutes }}\n                  </div>\n                }\n              </div>\n              @if (!isTwentyFourHour) {\n                <div\n                  #pmAmScroll\n                  (mouseout)=\"hoveredItem = null\"\n                  (mouseover)=\"hoveredItem = 'times'\"\n                  (scroll)=\"onScroll($event, 'pmAmScroll')\"\n                  class=\"scroll_pickers\"\n                  [tabindex]=\"-1\"\n                >\n                  @for (when of timeOfDay; let indx = $index; track indx) {\n                    <div\n                      class=\"scroll_item ta-font-medium\"\n                      [ngClass]=\"{\n                        'active_item ta-font-bold':\n                          scrollTypes.pmAmScroll === indx,\n                      }\"\n                      (click)=\"onScroll($event, 'pmAmScroll', indx)\"\n                    >\n                      {{ when }}\n                    </div>\n                  }\n                </div>\n              }\n              <div class=\"picker_line\">\n                <span class=\"border_line\"></span>\n                @if (!isTwentyFourHour) {\n                  <span class=\"border_line line_2\"></span>\n                }\n              </div>\n            </div>\n            <div class=\"picker_buttons\">\n              <div\n                (click)=\"closePopup($event)\"\n                class=\"pick_button ta-font-bold\"\n              >\n                Cancel\n              </div>\n              <div\n                (click)=\"setTime($event)\"\n                class=\"pick_button set_button ta-font-bold\"\n              >\n                Set\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CaCustomDateTimePickersDateCalendarsComponent, selector: "cai-custom-datetime-pickers-date-calendars", inputs: ["listPreview", "dateTime", "isMonthAndYearOnly"], outputs: ["setListPreviewValue", "onRefocusInput"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: CaCustomDatetimePickersComponent, decorators: [{
             type: Component,
@@ -7703,7 +7976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         CommonModule,
                         FormsModule,
                         CaCustomDateTimePickersDateCalendarsComponent,
-                    ], template: "<div\n  class=\"temp_inp_holder\"\n  (pointerdown)=\"refocusInput($event)\"\n  (mousedown)=\"$event.preventDefault()\"\n>\n  <div>\n    <div class=\"pickers_holder dark_picker\">\n      @if (calendarMainType === \"date\") {\n        <div class=\"date_picker\">\n          <cai-custom-datetime-pickers-date-calendars\n            [listPreview]=\"listPreview\"\n            [dateTime]=\"dateTime\"\n            [isMonthAndYearOnly]=\"_inputConfig.name === 'datepickerBankCard'\"\n            (setListPreviewValue)=\"setListPreview($event)\"\n            (onRefocusInput)=\"refocusInput($event)\"\n          ></cai-custom-datetime-pickers-date-calendars>\n        </div>\n      }\n      @if (calendarMainType === \"time\") {\n        <div class=\"time_picker\">\n          <div class=\"time_picker_head d-flex\">\n            <div class=\"selected_time ta-font-bold\">\n              {{ selectedTime || (dateTime | date: \"hh:mm aa\") }}\n            </div>\n            <div class=\"sel_now ta-font-bold\" (click)=\"setDefaultTime($event)\">\n              Default\n            </div>\n          </div>\n          <div class=\"time_picker_body\">\n            <div class=\"picker_body_head\">\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'hours'\"\n              >\n                Hour\n              </div>\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'minutes'\"\n              >\n                Minute\n              </div>\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'times'\"\n              >\n                AM/PM\n              </div>\n            </div>\n            <div class=\"picker_body\">\n              <div\n                #hourScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'hours'\"\n                (scroll)=\"onScroll($event, 'hourScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (hour of hourTimes; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.hourScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'hourScroll', indx)\"\n                  >\n                    {{ hour }}\n                  </div>\n                }\n              </div>\n              <div\n                #minutesScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'minutes'\"\n                (scroll)=\"onScroll($event, 'minutesScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (minutes of timeMinutes; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.minutesScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'minutesScroll', indx)\"\n                  >\n                    {{ minutes }}\n                  </div>\n                }\n              </div>\n              <div\n                #pmAmScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'times'\"\n                (scroll)=\"onScroll($event, 'pmAmScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (when of timeOfDay; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.pmAmScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'pmAmScroll', indx)\"\n                  >\n                    {{ when }}\n                  </div>\n                }\n              </div>\n              <div class=\"picker_line\">\n                <span class=\"border_line\"></span>\n                <span class=\"border_line line_2\"></span>\n              </div>\n            </div>\n            <div class=\"picker_buttons\">\n              <div\n                (click)=\"closePopup($event)\"\n                class=\"pick_button ta-font-bold\"\n              >\n                Cancel\n              </div>\n              <div\n                (click)=\"setTime($event)\"\n                class=\"pick_button set_button ta-font-bold\"\n              >\n                Set\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"temp_inp_holder\"\n  (pointerdown)=\"refocusInput($event)\"\n  (mousedown)=\"$event.preventDefault()\"\n>\n  <div>\n    <div class=\"pickers_holder dark_picker\">\n      @if (calendarMainType === \"date\") {\n        <div class=\"date_picker\">\n          <cai-custom-datetime-pickers-date-calendars\n            [listPreview]=\"listPreview\"\n            [dateTime]=\"dateTime\"\n            [isMonthAndYearOnly]=\"_inputConfig.name === 'datepickerBankCard'\"\n            (setListPreviewValue)=\"setListPreview($event)\"\n            (onRefocusInput)=\"refocusInput($event)\"\n          ></cai-custom-datetime-pickers-date-calendars>\n        </div>\n      }\n      @if (calendarMainType === \"time\") {\n        <div class=\"time_picker\" [class.time_picker_24h]=\"isTwentyFourHour\">\n          <div class=\"time_picker_head d-flex\">\n            <div class=\"selected_time ta-font-bold\">\n              {{\n                selectedTime ||\n                  (dateTime | date: (isTwentyFourHour ? \"HH:mm\" : \"hh:mm aa\"))\n              }}\n            </div>\n            <div class=\"sel_now ta-font-bold\" (click)=\"setDefaultTime($event)\">\n              Default\n            </div>\n          </div>\n          <div class=\"time_picker_body\">\n            <div class=\"picker_body_head\">\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'hours'\"\n              >\n                Hour\n              </div>\n              <div\n                class=\"ta-font-bold\"\n                [class.active]=\"hoveredItem === 'minutes'\"\n              >\n                Minute\n              </div>\n              @if (!isTwentyFourHour) {\n                <div\n                  class=\"ta-font-bold\"\n                  [class.active]=\"hoveredItem === 'times'\"\n                >\n                  AM/PM\n                </div>\n              }\n            </div>\n            <div class=\"picker_body\">\n              <div\n                #hourScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'hours'\"\n                (scroll)=\"onScroll($event, 'hourScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (hour of hourTimes; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.hourScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'hourScroll', indx)\"\n                  >\n                    {{ hour }}\n                  </div>\n                }\n              </div>\n              <div\n                #minutesScroll\n                (mouseout)=\"hoveredItem = null\"\n                (mouseover)=\"hoveredItem = 'minutes'\"\n                (scroll)=\"onScroll($event, 'minutesScroll')\"\n                class=\"scroll_pickers\"\n                [tabindex]=\"-1\"\n              >\n                @for (minutes of timeMinutes; let indx = $index; track indx) {\n                  <div\n                    class=\"scroll_item ta-font-medium\"\n                    [ngClass]=\"{\n                      'active_item ta-font-bold':\n                        scrollTypes.minutesScroll === indx,\n                    }\"\n                    (click)=\"onScroll($event, 'minutesScroll', indx)\"\n                  >\n                    {{ minutes }}\n                  </div>\n                }\n              </div>\n              @if (!isTwentyFourHour) {\n                <div\n                  #pmAmScroll\n                  (mouseout)=\"hoveredItem = null\"\n                  (mouseover)=\"hoveredItem = 'times'\"\n                  (scroll)=\"onScroll($event, 'pmAmScroll')\"\n                  class=\"scroll_pickers\"\n                  [tabindex]=\"-1\"\n                >\n                  @for (when of timeOfDay; let indx = $index; track indx) {\n                    <div\n                      class=\"scroll_item ta-font-medium\"\n                      [ngClass]=\"{\n                        'active_item ta-font-bold':\n                          scrollTypes.pmAmScroll === indx,\n                      }\"\n                      (click)=\"onScroll($event, 'pmAmScroll', indx)\"\n                    >\n                      {{ when }}\n                    </div>\n                  }\n                </div>\n              }\n              <div class=\"picker_line\">\n                <span class=\"border_line\"></span>\n                @if (!isTwentyFourHour) {\n                  <span class=\"border_line line_2\"></span>\n                }\n              </div>\n            </div>\n            <div class=\"picker_buttons\">\n              <div\n                (click)=\"closePopup($event)\"\n                class=\"pick_button ta-font-bold\"\n              >\n                Cancel\n              </div>\n              <div\n                (click)=\"setTime($event)\"\n                class=\"pick_button set_button ta-font-bold\"\n              >\n                Set\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CalendarDateTimePickerService }], propDecorators: { dateTime: [{
                 type: Input
             }], ref: [{
@@ -7743,94 +8016,101 @@ var InputConfigNameStringEnum;
 })(InputConfigNameStringEnum || (InputConfigNameStringEnum = {}));
 
 class InputDatetimeDateInputHelper {
-    static DATE_PLACEHOLDERS = ['MM', 'DD', 'YY'];
-    static DATE_PART_LENGTHS = [2, 2, 2];
+    static getPlaceholders(format) {
+        return [
+            DATE_PART_PLACEHOLDERS[format.parts[0]],
+            DATE_PART_PLACEHOLDERS[format.parts[1]],
+            DATE_PART_PLACEHOLDERS[format.parts[2]],
+        ];
+    }
     static isValidDatePartIndex(highlightedPart) {
         return (highlightedPart === 0 || highlightedPart === 1 || highlightedPart === 2);
     }
-    static getNormalizedDatePart(part, index) {
-        const placeholder = this.DATE_PLACEHOLDERS[index];
-        const maxLength = this.DATE_PART_LENGTHS[index];
+    static getNormalizedDatePart(part, placeholder) {
         if (!part)
             return placeholder;
-        const trimmed = part.slice(0, maxLength);
+        const trimmed = part.slice(0, placeholder.length);
         return trimmed + placeholder.slice(trimmed.length);
     }
-    static parseDateParts(currentValue) {
+    static parseDateParts(currentValue, format) {
+        const placeholders = this.getPlaceholders(format);
         if (!currentValue) {
-            return [...this.DATE_PLACEHOLDERS];
+            return placeholders;
         }
-        const [month, day, year] = currentValue.split('/');
+        const parts = currentValue.split(format.separator);
         return [
-            this.getNormalizedDatePart(month, 0),
-            this.getNormalizedDatePart(day, 1),
-            this.getNormalizedDatePart(year, 2),
+            this.getNormalizedDatePart(parts[0], placeholders[0]),
+            this.getNormalizedDatePart(parts[1], placeholders[1]),
+            this.getNormalizedDatePart(parts[2], placeholders[2]),
         ];
     }
-    static composeDateValue(parts) {
-        return `${parts[0]}/${parts[1]}/${parts[2]}`;
-    }
-    static finalizeDatePart(part, partIndex) {
+    static finalizeDatePart(part, partIndex, format) {
+        const partType = format.parts[partIndex];
+        const placeholder = DATE_PART_PLACEHOLDERS[partType];
         const digits = part.replace(/\D/g, '');
         if (!digits) {
-            return this.DATE_PLACEHOLDERS[partIndex];
+            return placeholder;
         }
-        if (partIndex === 0) {
+        if (partType === 'month') {
             if (digits === '0') {
-                return this.getNormalizedDatePart(part, partIndex);
+                return this.getNormalizedDatePart(part, placeholder);
             }
             const clampedMonth = Math.min(Math.max(Number(digits), 1), 12);
             return String(clampedMonth).padStart(2, '0');
         }
-        if (partIndex === 1) {
+        if (partType === 'day') {
             if (digits === '0') {
-                return this.getNormalizedDatePart(part, partIndex);
+                return this.getNormalizedDatePart(part, placeholder);
             }
             const clampedDay = Math.min(Math.max(Number(digits), 1), 31);
             return String(clampedDay).padStart(2, '0');
         }
-        return digits.slice(-2).padStart(2, '0');
+        if (partType === 'shortYear') {
+            return digits.slice(-2).padStart(2, '0');
+        }
+        // A one or two digit year is taken as a year of the current century.
+        return digits.length <= 2
+            ? String(2000 + Number(digits))
+            : this.getNormalizedDatePart(part, placeholder);
     }
-    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 normalizeEmptyDateValue(parts, format) {
+        const placeholders = this.getPlaceholders(format);
+        const isCompletelyEmpty = parts.every((part, index) => part === placeholders[index]);
+        return isCompletelyEmpty ? null : parts.join(format.separator);
     }
-    static formatDatePartOnNavigation(currentValue, highlightedPart) {
+    static formatDatePartOnNavigation(currentValue, highlightedPart, dateFormat) {
         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];
-        const slicedDigits = digits.slice(0, maxLength);
-        if (slicedDigits.length === maxLength) {
-            if (partIndex === 0) {
+        const format = getDateFormatPattern(dateFormat);
+        const nextValueParts = this.parseDateParts(currentValue, format);
+        nextValueParts[highlightedPart] = this.finalizeDatePart(nextValueParts[highlightedPart], highlightedPart, format);
+        this.enforceDayLimitByMonth(nextValueParts, format);
+        return this.normalizeEmptyDateValue(nextValueParts, format);
+    }
+    static buildDatePartFromDigits(digits, partIndex, format) {
+        const partType = format.parts[partIndex];
+        const placeholder = DATE_PART_PLACEHOLDERS[partType];
+        const slicedDigits = digits.slice(0, placeholder.length);
+        if (slicedDigits.length === placeholder.length) {
+            if (partType === 'month') {
                 const clampedMonth = Math.min(Number(slicedDigits), 12);
                 return String(clampedMonth).padStart(2, '0');
             }
-            if (partIndex === 1) {
+            if (partType === 'day') {
                 const clampedDay = Math.min(Number(slicedDigits), 31);
                 return String(clampedDay).padStart(2, '0');
             }
         }
         return slicedDigits + placeholder.slice(slicedDigits.length);
     }
-    static isDatePartFull(part, partIndex) {
-        return (part.length === this.DATE_PART_LENGTHS[partIndex] && /^\d+$/.test(part));
+    static isDatePartFull(part) {
+        return /^\d+$/.test(part);
     }
-    static getDatePartEnteredLength(part, partIndex) {
-        const placeholder = this.DATE_PLACEHOLDERS[partIndex];
-        const maxLength = this.DATE_PART_LENGTHS[partIndex];
-        const normalizedPart = this.getNormalizedDatePart(part, partIndex);
+    static getDatePartEnteredLength(part, placeholder) {
+        const normalizedPart = this.getNormalizedDatePart(part, placeholder);
         let enteredLength = 0;
-        for (let i = 0; i < maxLength; i += 1) {
+        for (let i = 0; i < placeholder.length; i += 1) {
             if (normalizedPart[i] === placeholder[i])
                 break;
             enteredLength += 1;
@@ -7859,25 +8139,26 @@ class InputDatetimeDateInputHelper {
                 return 31;
         }
     }
-    static enforceDayLimitByMonth(parts) {
-        const monthPart = parts[0];
-        const dayPart = parts[1];
-        const yearPart = parts[2];
-        if (!this.isDatePartFull(monthPart, 0) ||
-            !this.isDatePartFull(dayPart, 1)) {
+    static enforceDayLimitByMonth(parts, format) {
+        const dayIndex = format.parts.indexOf('day');
+        const monthPart = parts[format.parts.indexOf('month')];
+        const dayPart = parts[dayIndex];
+        const isShortYear = format.parts.includes('shortYear');
+        const yearPart = parts[format.parts.indexOf(isShortYear ? 'shortYear' : 'year')];
+        if (!this.isDatePartFull(monthPart) || !this.isDatePartFull(dayPart)) {
             return;
         }
         const month = Number(monthPart);
         const day = Number(dayPart);
-        const resolvedYear = this.isDatePartFull(yearPart, 2)
-            ? 2000 + Number(yearPart)
+        const resolvedYear = this.isDatePartFull(yearPart)
+            ? Number(yearPart) + (isShortYear ? 2000 : 0)
             : undefined;
         const monthMaxDay = this.getMonthMaxDay(month, resolvedYear);
         if (day > monthMaxDay) {
-            parts[1] = String(monthMaxDay).padStart(2, '0');
+            parts[dayIndex] = String(monthMaxDay).padStart(2, '0');
         }
     }
-    static handleDateDigitInput(currentValue, nextValueParts, highlightedPart, insertedCharacter) {
+    static handleDateDigitInput(currentValue, nextValueParts, highlightedPart, insertedCharacter, format) {
         const isSingleDigit = /^\d$/.test(insertedCharacter);
         if (!isSingleDigit) {
             return {
@@ -7885,31 +8166,32 @@ class InputDatetimeDateInputHelper {
                 nextHighlightedPart: highlightedPart,
             };
         }
-        const isPartAlreadyFull = this.isDatePartFull(nextValueParts[highlightedPart], highlightedPart);
+        const isPartAlreadyFull = this.isDatePartFull(nextValueParts[highlightedPart]);
         if (isPartAlreadyFull) {
-            nextValueParts[highlightedPart] = this.buildDatePartFromDigits(insertedCharacter, highlightedPart);
-            this.enforceDayLimitByMonth(nextValueParts);
+            nextValueParts[highlightedPart] = this.buildDatePartFromDigits(insertedCharacter, highlightedPart, format);
+            this.enforceDayLimitByMonth(nextValueParts, format);
             return {
-                nextValue: this.normalizeEmptyDateValue(nextValueParts),
+                nextValue: this.normalizeEmptyDateValue(nextValueParts, format),
                 nextHighlightedPart: highlightedPart,
             };
         }
         const existingDigits = nextValueParts[highlightedPart].replace(/\D/g, '');
         const nextDigits = `${existingDigits}${insertedCharacter}`;
-        nextValueParts[highlightedPart] = this.buildDatePartFromDigits(nextDigits, highlightedPart);
-        this.enforceDayLimitByMonth(nextValueParts);
-        const didFillCurrentPart = nextDigits.length >= this.DATE_PART_LENGTHS[highlightedPart];
+        nextValueParts[highlightedPart] = this.buildDatePartFromDigits(nextDigits, highlightedPart, format);
+        this.enforceDayLimitByMonth(nextValueParts, format);
+        const didFillCurrentPart = nextDigits.length >=
+            DATE_PART_PLACEHOLDERS[format.parts[highlightedPart]].length;
         const nextHighlightedPart = didFillCurrentPart
             ? highlightedPart === 2
                 ? null
                 : highlightedPart + 1
             : highlightedPart;
         return {
-            nextValue: this.normalizeEmptyDateValue(nextValueParts),
+            nextValue: this.normalizeEmptyDateValue(nextValueParts, format),
             nextHighlightedPart,
         };
     }
-    static handleDateInput(currentValue, event, highlightedPart) {
+    static handleDateInput(currentValue, event, highlightedPart, dateFormat) {
         const inputEvent = event;
         const inputType = inputEvent.inputType ?? '';
         const insertedCharacter = inputEvent.data ?? '';
@@ -7948,39 +8230,41 @@ class InputDatetimeDateInputHelper {
                 nextHighlightedPart: effectiveHighlightedPart,
             };
         }
-        const nextValueParts = this.parseDateParts(currentValue);
+        const format = getDateFormatPattern(dateFormat);
+        const placeholders = this.getPlaceholders(format);
+        const nextValueParts = this.parseDateParts(currentValue, format);
         if (isWordBackwardDelete) {
-            const currentEnteredLength = this.getDatePartEnteredLength(nextValueParts[effectiveHighlightedPart], effectiveHighlightedPart);
+            const currentEnteredLength = this.getDatePartEnteredLength(nextValueParts[effectiveHighlightedPart], placeholders[effectiveHighlightedPart]);
             const targetPart = currentEnteredLength === 0 && effectiveHighlightedPart > 0
                 ? (effectiveHighlightedPart - 1)
                 : effectiveHighlightedPart;
-            nextValueParts[targetPart] = this.DATE_PLACEHOLDERS[targetPart];
+            nextValueParts[targetPart] = placeholders[targetPart];
             return {
-                nextValue: this.normalizeEmptyDateValue(nextValueParts),
+                nextValue: this.normalizeEmptyDateValue(nextValueParts, format),
                 nextHighlightedPart: targetPart,
             };
         }
         if (isBackwardContentDelete) {
             const currentPart = nextValueParts[effectiveHighlightedPart];
-            const enteredLength = this.getDatePartEnteredLength(currentPart, effectiveHighlightedPart);
+            const enteredLength = this.getDatePartEnteredLength(currentPart, placeholders[effectiveHighlightedPart]);
             if (enteredLength > 0) {
                 const nextDigits = currentPart.slice(0, enteredLength - 1);
-                nextValueParts[effectiveHighlightedPart] = this.buildDatePartFromDigits(nextDigits, effectiveHighlightedPart);
+                nextValueParts[effectiveHighlightedPart] = this.buildDatePartFromDigits(nextDigits, effectiveHighlightedPart, format);
                 return {
-                    nextValue: this.normalizeEmptyDateValue(nextValueParts),
+                    nextValue: this.normalizeEmptyDateValue(nextValueParts, format),
                     // Keep focus on current part even when deleting its final digit.
                     // A second backspace (when empty) will move focus backward.
                     nextHighlightedPart: effectiveHighlightedPart,
                 };
             }
             return {
-                nextValue: this.normalizeEmptyDateValue(nextValueParts),
+                nextValue: this.normalizeEmptyDateValue(nextValueParts, format),
                 nextHighlightedPart: effectiveHighlightedPart > 0
                     ? (effectiveHighlightedPart - 1)
                     : 0,
             };
         }
-        return this.handleDateDigitInput(currentValue, nextValueParts, effectiveHighlightedPart, insertedCharacter);
+        return this.handleDateDigitInput(currentValue, nextValueParts, effectiveHighlightedPart, insertedCharacter, format);
     }
 }
 
@@ -8010,14 +8294,23 @@ class InputDatetimeTimeInputHelper {
             this.getNormalizedTimePart(ampmPart, 2),
         ];
     }
-    static composeTimeValue(parts) {
-        return `${parts[0]}:${parts[1]} ${parts[2]}`;
+    // The 24-hour clock has no AM/PM part, so its last part is the minutes.
+    static getLastTimePartIndex(timeFormat) {
+        return timeFormat === 'TwentyFourHour' ? 1 : 2;
+    }
+    static composeTimeValue(parts, timeFormat) {
+        return timeFormat === 'TwentyFourHour'
+            ? `${parts[0]}:${parts[1]}`
+            : `${parts[0]}:${parts[1]} ${parts[2]}`;
     }
-    static normalizeEmptyTimeValue(parts) {
+    static normalizeEmptyTimeValue(parts, timeFormat) {
         const isCompletelyEmpty = parts[0] === this.TIME_PLACEHOLDERS[0] &&
             parts[1] === this.TIME_PLACEHOLDERS[1] &&
-            parts[2] === this.TIME_PLACEHOLDERS[2];
-        return isCompletelyEmpty ? null : this.composeTimeValue(parts);
+            (timeFormat === 'TwentyFourHour' ||
+                parts[2] === this.TIME_PLACEHOLDERS[2]);
+        return isCompletelyEmpty
+            ? null
+            : this.composeTimeValue(parts, timeFormat);
     }
     static buildTimePartFromInput(input, partIndex) {
         const maxLength = this.TIME_PART_LENGTHS[partIndex];
@@ -8057,7 +8350,7 @@ class InputDatetimeTimeInputHelper {
         }
         return { hour12: String(normalizedHour).padStart(2, '0'), meridiem: 'AM' };
     }
-    static handleTimeDigitInput(currentValue, nextValueParts, highlightedPart, insertedCharacter) {
+    static handleTimeDigitInput(currentValue, nextValueParts, highlightedPart, insertedCharacter, timeFormat) {
         const isSingleDigit = /^\d$/.test(insertedCharacter);
         if (!isSingleDigit) {
             return {
@@ -8082,34 +8375,39 @@ class InputDatetimeTimeInputHelper {
             if (nextDigits.length < this.TIME_PART_LENGTHS[0]) {
                 nextValueParts[0] = this.buildTimePartFromInput(nextDigits, 0);
                 return {
-                    nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                    nextValue: this.normalizeEmptyTimeValue(nextValueParts, timeFormat),
                     nextHighlightedPart: 0,
                 };
             }
             const clampedHour = this.clamp(Number(nextDigits), 0, 23);
-            const { hour12, meridiem } = this.to12HourAndMeridiem(clampedHour, nextValueParts[2]);
-            nextValueParts[0] = hour12;
-            nextValueParts[2] = meridiem;
+            if (timeFormat === 'TwentyFourHour') {
+                nextValueParts[0] = String(clampedHour).padStart(2, '0');
+            }
+            else {
+                const { hour12, meridiem } = this.to12HourAndMeridiem(clampedHour, nextValueParts[2]);
+                nextValueParts[0] = hour12;
+                nextValueParts[2] = meridiem;
+            }
             return {
-                nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                nextValue: this.normalizeEmptyTimeValue(nextValueParts, timeFormat),
                 nextHighlightedPart: 1,
             };
         }
         if (nextDigits.length < this.TIME_PART_LENGTHS[1]) {
             nextValueParts[1] = this.buildTimePartFromInput(nextDigits, 1);
             return {
-                nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                nextValue: this.normalizeEmptyTimeValue(nextValueParts, timeFormat),
                 nextHighlightedPart: 1,
             };
         }
         const clampedMinute = this.clamp(Number(nextDigits), 0, 59);
         nextValueParts[1] = String(clampedMinute).padStart(2, '0');
         return {
-            nextValue: this.normalizeEmptyTimeValue(nextValueParts),
-            nextHighlightedPart: 2,
+            nextValue: this.normalizeEmptyTimeValue(nextValueParts, timeFormat),
+            nextHighlightedPart: timeFormat === 'TwentyFourHour' ? null : 2,
         };
     }
-    static handleTimeInput(currentValue, event, highlightedPart) {
+    static handleTimeInput(currentValue, event, highlightedPart, timeFormat = DEFAULT_TIME_FORMAT) {
         const inputEvent = event;
         const inputType = inputEvent.inputType ?? '';
         const insertedCharacter = inputEvent.data ?? '';
@@ -8134,7 +8432,7 @@ class InputDatetimeTimeInputHelper {
             effectiveHighlightedPart === null) {
             return {
                 nextValue: currentValue,
-                nextHighlightedPart: 2,
+                nextHighlightedPart: this.getLastTimePartIndex(timeFormat),
             };
         }
         if (!this.isValidTimePartIndex(effectiveHighlightedPart)) {
@@ -8151,7 +8449,7 @@ class InputDatetimeTimeInputHelper {
                 : effectiveHighlightedPart;
             nextValueParts[targetPart] = this.TIME_PLACEHOLDERS[targetPart];
             return {
-                nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                nextValue: this.normalizeEmptyTimeValue(nextValueParts, timeFormat),
                 nextHighlightedPart: targetPart,
             };
         }
@@ -8162,14 +8460,14 @@ class InputDatetimeTimeInputHelper {
                 const nextInput = currentPart.slice(0, enteredLength - 1);
                 nextValueParts[effectiveHighlightedPart] = this.buildTimePartFromInput(nextInput, effectiveHighlightedPart);
                 return {
-                    nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                    nextValue: this.normalizeEmptyTimeValue(nextValueParts, timeFormat),
                     // Keep focus on current part when deleting its final character.
                     // A second backspace (while empty) then moves focus backward.
                     nextHighlightedPart: effectiveHighlightedPart,
                 };
             }
             return {
-                nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                nextValue: this.normalizeEmptyTimeValue(nextValueParts, timeFormat),
                 nextHighlightedPart: effectiveHighlightedPart > 0
                     ? (effectiveHighlightedPart - 1)
                     : 0,
@@ -8180,7 +8478,7 @@ class InputDatetimeTimeInputHelper {
             if (uppercaseCharacter === 'A' || uppercaseCharacter === 'P') {
                 nextValueParts[2] = uppercaseCharacter === 'A' ? 'AM' : 'PM';
                 return {
-                    nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                    nextValue: this.normalizeEmptyTimeValue(nextValueParts, timeFormat),
                     nextHighlightedPart: null,
                 };
             }
@@ -8189,15 +8487,19 @@ class InputDatetimeTimeInputHelper {
                 nextHighlightedPart: effectiveHighlightedPart,
             };
         }
-        return this.handleTimeDigitInput(currentValue, nextValueParts, effectiveHighlightedPart, insertedCharacter);
+        return this.handleTimeDigitInput(currentValue, nextValueParts, effectiveHighlightedPart, insertedCharacter, timeFormat);
     }
 }
 
 class InputDatetimeFormatHelper {
     static MIN_VALID_YEAR = 1900;
-    static isDateControlValueValid(value) {
-        const parsedDate = this.toDate(value, true);
-        return !!parsedDate && parsedDate.getFullYear() >= this.MIN_VALID_YEAR;
+    static getDateMomentFormat(dateFormat) {
+        const { parts, separator } = getDateFormatPattern(dateFormat);
+        return parts.map((part) => DATE_PART_PLACEHOLDERS[part]).join(separator);
+    }
+    static isDateControlValueValid(value, dateFormat) {
+        return (typeof value === 'string' &&
+            this.parseDateControlValue(value, dateFormat) !== null);
     }
     static isTimeControlValueValid(value) {
         if (typeof value !== 'string') {
@@ -8205,7 +8507,13 @@ class InputDatetimeFormatHelper {
         }
         return this.parseTimeControlValue(value) !== null;
     }
-    static parseDateControlValue(value) {
+    static parseDateControlValue(value, dateFormat) {
+        const parsedDate = moment(value.trim(), this.getDateMomentFormat(dateFormat), true);
+        return parsedDate.isValid() && parsedDate.year() >= this.MIN_VALID_YEAR
+            ? this.buildLocalDate(parsedDate)
+            : null;
+    }
+    static parseDateFormValue(value) {
         const dateFormats = [
             'MM/DD/YY',
             'M/D/YY',
@@ -8237,14 +8545,15 @@ class InputDatetimeFormatHelper {
         normalizedDate.setHours(12, 0, 0, 0);
         return normalizedDate;
     }
-    static handleInput(currentValue, event, highlightedPart, isDatePicker) {
+    static handleInput(currentValue, event, highlightedPart, isDatePicker, dateFormat, timeFormat = DEFAULT_TIME_FORMAT) {
         if (isDatePicker) {
-            return InputDatetimeDateInputHelper.handleDateInput(currentValue, event, highlightedPart);
+            return InputDatetimeDateInputHelper.handleDateInput(currentValue, event, highlightedPart, dateFormat);
         }
         else {
-            return InputDatetimeTimeInputHelper.handleTimeInput(currentValue, event, highlightedPart);
+            return InputDatetimeTimeInputHelper.handleTimeInput(currentValue, event, highlightedPart, timeFormat);
         }
     }
+    // Parses a form value (canonical formats), not the text shown in the input.
     static toDate(value, isDatePicker) {
         if (value instanceof Date && !Number.isNaN(value.getTime())) {
             return value;
@@ -8256,58 +8565,65 @@ class InputDatetimeFormatHelper {
         }
         if (typeof value === 'string') {
             const parsedDate = isDatePicker
-                ? this.parseDateControlValue(value)
+                ? this.parseDateFormValue(value)
                 : this.parseTimeControlValue(value);
             if (parsedDate)
                 return parsedDate;
         }
         return null;
     }
-    static isControlValueValid(value, isDatePicker) {
+    // Parses the text shown in the input, which follows the date format.
+    static parseControlValue(value, isDatePicker, dateFormat) {
+        if (!value)
+            return null;
+        return isDatePicker
+            ? this.parseDateControlValue(value, dateFormat)
+            : this.parseTimeControlValue(value);
+    }
+    static isControlValueValid(value, isDatePicker, dateFormat) {
         if (value === null || value === undefined || value === '') {
             return true;
         }
         return isDatePicker
-            ? this.isDateControlValueValid(value)
+            ? this.isDateControlValueValid(value, dateFormat)
             : this.isTimeControlValueValid(value);
     }
-    static toControlValue(date, isDatePicker) {
+    static toControlValue(date, isDatePicker, dateFormat, timeFormat = DEFAULT_TIME_FORMAT) {
         return isDatePicker
-            ? moment(date).format('MM/DD/YY')
-            : moment(date).format('hh:mm A');
+            ? moment(date).format(this.getDateMomentFormat(dateFormat))
+            : moment(date).format(TIME_FORMAT_PATTERNS[timeFormat]);
     }
     static toFormValue(date, isDatePicker) {
         return isDatePicker
             ? moment(date).format('MM/DD/YY')
             : moment(date).format('HH:mm');
     }
-    static toCurrentValue(value, isDatePicker) {
+    static toCurrentValue(value, isDatePicker, dateFormat, timeFormat = DEFAULT_TIME_FORMAT) {
         const dateValue = this.toDate(value, isDatePicker);
         if (!dateValue)
             return null;
-        return this.toControlValue(dateValue, isDatePicker);
+        return this.toControlValue(dateValue, isDatePicker, dateFormat, timeFormat);
+    }
+    // Date parts in the order of the date format, each padded with its placeholder.
+    static getDisplayedDateParts(value, dateFormat) {
+        const format = getDateFormatPattern(dateFormat);
+        return InputDatetimeDateInputHelper.parseDateParts(value, format).map((part, index) => ({
+            type: format.parts[index],
+            value: part,
+            placeholder: DATE_PART_PLACEHOLDERS[format.parts[index]],
+        }));
     }
-    static getDisplayedValues(value, isDatePicker) {
+    static getDisplayedValues(value) {
         let displayedValues = {
-            month: 'MM',
-            day: 'DD',
-            year: 'YY',
             minute: 'MM',
             hour: 'HH',
             ampm: 'AM',
         };
         if (!value)
             return displayedValues;
-        if (isDatePicker) {
-            displayedValues.month = value?.slice(0, 2) ?? 'MM';
-            displayedValues.day = value?.slice(3, 5) ?? 'DD';
-            displayedValues.year = value?.slice(6, 8) ?? 'YY';
-        }
-        else {
-            displayedValues.hour = value?.slice(0, 2) ?? 'HH';
-            displayedValues.minute = value?.slice(3, 5) ?? 'MM';
-            displayedValues.ampm = value?.slice(6, 8) ?? 'AM';
-        }
+        displayedValues.hour = value?.slice(0, 2) ?? 'HH';
+        displayedValues.minute = value?.slice(3, 5) ?? 'MM';
+        displayedValues.ampm = value?.slice(6, 8) ?? 'AM';
         return displayedValues;
     }
 }
@@ -8320,31 +8636,42 @@ class InputDatetimePasteHelper {
         normalizedDate.setHours(12, 0, 0, 0);
         return normalizedDate;
     }
-    static parseDateInput(rawValue) {
+    static parseDateInput(rawValue, dateFormat) {
         const normalizedValue = rawValue.trim();
         if (!normalizedValue)
             return null;
+        // Ambiguous dates (02/10/2026) are read in the order of the date format.
+        const { parts } = getDateFormatPattern(dateFormat);
+        const isDayFirst = parts.indexOf('day') < parts.indexOf('month');
+        const [padded, unpadded] = isDayFirst
+            ? [
+                ['DD', 'MM'],
+                ['D', 'M'],
+            ]
+            : [
+                ['MM', 'DD'],
+                ['M', 'D'],
+            ];
+        const compactFormat = `${padded.join('')}YYYY`;
         const compactDigits = normalizedValue.replace(/\D/g, '');
         const dateFormats = [
-            'MM/DD/YYYY',
-            'M/D/YYYY',
-            'MM-DD-YYYY',
-            'M-D-YYYY',
-            'MM.DD.YYYY',
-            'M.D.YYYY',
+            ...['/', '-', '.'].flatMap((separator) => [
+                `${padded.join(separator)}${separator}YYYY`,
+                `${unpadded.join(separator)}${separator}YYYY`,
+            ]),
             'YYYY-MM-DD',
             'YYYY/M/D',
             'YYYY.MM.DD',
-            'MM/DD/YY',
-            'M/D/YY',
+            `${padded.join('/')}/YY`,
+            `${unpadded.join('/')}/YY`,
             'YYYYMMDD',
-            'MMDDYYYY',
+            compactFormat,
         ];
         const candidates = [];
         candidates.push(moment(normalizedValue, dateFormats, true));
         if (/^\d{8}$/.test(compactDigits)) {
             candidates.push(moment(compactDigits, 'YYYYMMDD', true));
-            candidates.push(moment(compactDigits, 'MMDDYYYY', true));
+            candidates.push(moment(compactDigits, compactFormat, true));
         }
         candidates.push(moment(normalizedValue, moment.ISO_8601, true));
         const validCandidate = candidates.find((candidate) => candidate.isValid() && candidate.year() >= this.MIN_VALID_YEAR);
@@ -8380,9 +8707,9 @@ class InputDatetimePasteHelper {
         const now = new Date();
         return new Date(now.getFullYear(), now.getMonth(), now.getDate(), validCandidate.hour(), validCandidate.minute(), 0, 0);
     }
-    static parsePastedValue(rawValue, isDatePicker) {
+    static parsePastedValue(rawValue, isDatePicker, dateFormat) {
         return isDatePicker
-            ? this.parseDateInput(rawValue)
+            ? this.parseDateInput(rawValue, dateFormat)
             : this.parseTimeInput(rawValue);
     }
 }
@@ -8413,21 +8740,30 @@ class CaiInputDatetimePickerComponent {
     currentValue = signal(null, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
     isFocusedThroughPopoverToggle = signal(false, ...(ngDevMode ? [{ debugName: "isFocusedThroughPopoverToggle" }] : []));
     isInputSelected = signal(false, ...(ngDevMode ? [{ debugName: "isInputSelected" }] : []));
+    dateFormat = signal(undefined, ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
+    timeFormat = signal(DEFAULT_TIME_FORMAT, ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
+    isTwentyFourHour = computed(() => this.timeFormat() === 'TwentyFourHour', ...(ngDevMode ? [{ debugName: "isTwentyFourHour" }] : []));
+    // The 24-hour clock has no AM/PM part.
+    lastPartIndex = computed(() => !this.isDatePicker() && this.isTwentyFourHour() ? 1 : 2, ...(ngDevMode ? [{ debugName: "lastPartIndex" }] : []));
     displayedValues = computed(() => {
-        return (InputDatetimeFormatHelper.getDisplayedValues(this.currentValue(), this.isDatePicker()) ?? []);
+        return (InputDatetimeFormatHelper.getDisplayedValues(this.currentValue()) ?? []);
     }, ...(ngDevMode ? [{ debugName: "displayedValues" }] : []));
+    displayedDateParts = computed(() => InputDatetimeFormatHelper.getDisplayedDateParts(this.currentValue(), this.dateFormat()), ...(ngDevMode ? [{ debugName: "displayedDateParts" }] : []));
+    dateSeparator = computed(() => getDateFormatPattern(this.dateFormat()).separator, ...(ngDevMode ? [{ debugName: "dateSeparator" }] : []));
     hasDate = computed(() => {
         const currentValue = this.currentValue();
         if (!currentValue)
             return false;
         return this.isDatePicker()
-            ? /^\d{2}\/\d{2}\/\d{2}$/.test(currentValue)
-            : /^\d{2}:\d{2}\s(?:AM|PM)$/.test(currentValue);
+            ? this.displayedDateParts().every((part) => /^\d+$/.test(part.value))
+            : (this.isTwentyFourHour()
+                ? /^\d{2}:\d{2}$/
+                : /^\d{2}:\d{2}\s(?:AM|PM)$/).test(currentValue);
     }, ...(ngDevMode ? [{ debugName: "hasDate" }] : []));
     hasInternalValidationError = computed(() => {
         const currentValue = this.currentValue();
         return Boolean(currentValue &&
-            !InputDatetimeFormatHelper.isControlValueValid(currentValue, this.isDatePicker()));
+            !InputDatetimeFormatHelper.isControlValueValid(currentValue, this.isDatePicker(), this.dateFormat()));
     }, ...(ngDevMode ? [{ debugName: "hasInternalValidationError" }] : []));
     shouldShowInternalValidationError = computed(() => {
         const control = this.getSuperControl;
@@ -8448,6 +8784,20 @@ class CaiInputDatetimePickerComponent {
     constructor() {
         this.initializeDateChangedListener();
     }
+    ngOnChanges(changes) {
+        if (!changes['inputConfig'])
+            return;
+        const dateFormat = this.inputConfig?.dateFormat;
+        const timeFormat = this.inputConfig?.timeFormat ?? DEFAULT_TIME_FORMAT;
+        if (dateFormat === this.dateFormat() && timeFormat === this.timeFormat()) {
+            return;
+        }
+        // The displayed text follows the format, so it is rebuilt from the date.
+        const parsedDate = this.parseControlValue(this.currentValue());
+        this.dateFormat.set(dateFormat);
+        this.timeFormat.set(timeFormat);
+        this.currentValue.set(parsedDate ? this.toControlValue(parsedDate) : null);
+    }
     ngOnInit() {
         this.superControl = this.injector.get(NgControl, null);
         if (this.superControl) {
@@ -8456,10 +8806,8 @@ class CaiInputDatetimePickerComponent {
     }
     registerDateChange(date) {
         this.dateTime.set(date);
-        const isDatePicker = this.isDatePicker();
-        const nextCurrentValue = InputDatetimeFormatHelper.toControlValue(date, isDatePicker);
-        this.currentValue.set(nextCurrentValue);
-        this.onChange(InputDatetimeFormatHelper.toFormValue(date, isDatePicker));
+        this.currentValue.set(this.toControlValue(date));
+        this.onChange(InputDatetimeFormatHelper.toFormValue(date, this.isDatePicker()));
     }
     initializeDateChangedListener() {
         // Date-picker changes (day/month/year selection) come from calendarService.dateChanged.
@@ -8478,13 +8826,17 @@ class CaiInputDatetimePickerComponent {
     toDate(value) {
         return InputDatetimeFormatHelper.toDate(value, this.isDatePicker());
     }
+    parseControlValue(value) {
+        return InputDatetimeFormatHelper.parseControlValue(value, this.isDatePicker(), this.dateFormat());
+    }
+    toControlValue(date) {
+        return InputDatetimeFormatHelper.toControlValue(date, this.isDatePicker(), this.dateFormat(), this.timeFormat());
+    }
     moveHighlightedPartRight() {
         if (this.isDatePicker()) {
-            const nextCurrentValue = InputDatetimeDateInputHelper.formatDatePartOnNavigation(this.currentValue(), this.highlightedPart());
+            const nextCurrentValue = InputDatetimeDateInputHelper.formatDatePartOnNavigation(this.currentValue(), this.highlightedPart(), this.dateFormat());
             this.currentValue.set(nextCurrentValue);
-            const parsedDate = nextCurrentValue
-                ? this.toDate(nextCurrentValue)
-                : null;
+            const parsedDate = this.parseControlValue(nextCurrentValue);
             if (parsedDate) {
                 this.dateTime.set(parsedDate);
                 this.onChange(InputDatetimeFormatHelper.toFormValue(parsedDate, true));
@@ -8497,7 +8849,7 @@ class CaiInputDatetimePickerComponent {
             this.highlightedPart.set(0);
             return;
         }
-        if (this.highlightedPart() === 2) {
+        if (this.highlightedPart() === this.lastPartIndex()) {
             this.highlightedPart.set(0);
             return;
         }
@@ -8509,7 +8861,7 @@ class CaiInputDatetimePickerComponent {
             return;
         }
         if (this.highlightedPart() === 0) {
-            this.highlightedPart.set(2);
+            this.highlightedPart.set(this.lastPartIndex());
             return;
         }
         this.highlightedPart.set((this.highlightedPart() ?? 2) - 1);
@@ -8553,9 +8905,7 @@ class CaiInputDatetimePickerComponent {
     }
     writeValue(value) {
         const parsedDate = this.toDate(value);
-        this.currentValue.set(parsedDate
-            ? InputDatetimeFormatHelper.toControlValue(parsedDate, this.isDatePicker())
-            : null);
+        this.currentValue.set(parsedDate ? this.toControlValue(parsedDate) : null);
         this.dateTime.set(parsedDate ?? new Date());
     }
     clearInput(event) {
@@ -8632,9 +8982,9 @@ class CaiInputDatetimePickerComponent {
             this.isInputSelected.set(false);
             this.highlightedPart.set(0);
         }
-        const { nextValue, nextHighlightedPart } = InputDatetimeFormatHelper.handleInput(this.currentValue(), event, this.highlightedPart() ?? null, this.isDatePicker());
+        const { nextValue, nextHighlightedPart } = InputDatetimeFormatHelper.handleInput(this.currentValue(), event, this.highlightedPart() ?? null, this.isDatePicker(), this.dateFormat(), this.timeFormat());
         this.currentValue.set(nextValue);
-        const parsedDate = nextValue ? this.toDate(nextValue) : null;
+        const parsedDate = this.parseControlValue(nextValue);
         if (parsedDate) {
             this.dateTime.set(parsedDate);
         }
@@ -8663,12 +9013,12 @@ class CaiInputDatetimePickerComponent {
         event.stopPropagation();
         const pastedText = event.clipboardData?.getData('text') ?? '';
         const isDatePicker = this.isDatePicker();
-        const parsedDate = InputDatetimePasteHelper.parsePastedValue(pastedText, isDatePicker);
+        const parsedDate = InputDatetimePasteHelper.parsePastedValue(pastedText, isDatePicker, this.dateFormat());
         if (!parsedDate) {
             return;
         }
         this.dateTime.set(parsedDate);
-        this.currentValue.set(InputDatetimeFormatHelper.toControlValue(parsedDate, isDatePicker));
+        this.currentValue.set(this.toControlValue(parsedDate));
         this.highlightedPart.set(null);
         this.mainPopover.close();
         requestAnimationFrame(() => {
@@ -8758,7 +9108,7 @@ class CaiInputDatetimePickerComponent {
         this.clearButtonTooltip.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: CaiInputDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", 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  (mousedown)=\"$event.preventDefault()\"\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;touch-action:manipulation;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;font-size:16px}.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.33", 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 }], usesOnChanges: true, 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  (mousedown)=\"$event.preventDefault()\"\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      @for (part of displayedDateParts(); track part.type; let index = $index) {\n        @if (index > 0) {\n          <span class=\"datetime-input-separator\">{{ dateSeparator() }}</span>\n        }\n        <span\n          class=\"datetime-input-part\"\n          [class.highlighted]=\"highlightedPart() === index\"\n          [class.filled]=\"part.value !== part.placeholder\"\n          (pointerdown)=\"highlightPart($event, index)\"\n          >{{ part.value }}</span\n        >\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      @if (!isTwentyFourHour()) {\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    }\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;touch-action:manipulation;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;font-size:16px}.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
@@ -8779,7 +9129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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  (mousedown)=\"$event.preventDefault()\"\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;touch-action:manipulation;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;font-size:16px}.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  (mousedown)=\"$event.preventDefault()\"\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      @for (part of displayedDateParts(); track part.type; let index = $index) {\n        @if (index > 0) {\n          <span class=\"datetime-input-separator\">{{ dateSeparator() }}</span>\n        }\n        <span\n          class=\"datetime-input-part\"\n          [class.highlighted]=\"highlightedPart() === index\"\n          [class.filled]=\"part.value !== part.placeholder\"\n          (pointerdown)=\"highlightPart($event, index)\"\n          >{{ part.value }}</span\n        >\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      @if (!isTwentyFourHour()) {\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    }\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;touch-action:manipulation;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;font-size:16px}.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']
@@ -12865,5 +13215,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, CaScrollableComponent, CaiInputDatetimePickerComponent, CopyComponent, CounterComponent, DEFAULT_CROP_ZOOM, DEFAULT_DUAL_DROP_ZONES, DOCS_OR_MEDIA_VARIANTS, DROP_ZONE_CARD_SLIDER, DROP_ZONE_CARD_SLIDER_ITEM_WITH_GAP_PX, DROP_ZONE_NARROW_BREAKPOINT_PX, DUAL_DROP_TARGETS, DispatchDropdownComponent, DispatchLocationComponent, DispatchStatus, DocumentThumbnailHelper, DropZoneComponent, DropdownTypes, FILE_PROCESSING_CONCURRENCY, IMAGE_PREVIEW_CSS_WIDTH, IMAGE_PREVIEW_VARIANTS, IMAGE_RESIZE_THRESHOLD_BYTES, INPUT_CHARACTER_SETS, InputAddressComponent, InputComponent, IntervalDropdownComponent, ListContactDropdownComponent, PDFJS_ASSET_BASE, PmComponent, RatingReviewComponent, ReviewModalComponent, SelectedBusinessFieldComponent, SignatureComponent, StickyScrollbarComponent, THUMBNAIL_MIME, THUMBNAIL_QUALITY, THUMBNAIL_WIDTH, TabOptionDropdownComponent, TextAreaComponent, VIDEO_THUMBNAIL_TIMEOUT_MS, eScrollState, ignoreWhenAutofilled, sizes };
+export { AvatarComponent, CaScrollableComponent, CaiInputDatetimePickerComponent, CopyComponent, CounterComponent, DATE_FORMAT_PATTERNS, DATE_PART_PLACEHOLDERS, DEFAULT_CROP_ZOOM, DEFAULT_DATE_FORMAT_PATTERN, DEFAULT_DUAL_DROP_ZONES, DEFAULT_NUMBER_FORMAT, DEFAULT_PHONE_DIAL_CODE, DEFAULT_TIME_FORMAT, DOCS_OR_MEDIA_VARIANTS, DROP_ZONE_CARD_SLIDER, DROP_ZONE_CARD_SLIDER_ITEM_WITH_GAP_PX, DROP_ZONE_NARROW_BREAKPOINT_PX, DUAL_DROP_TARGETS, DateFormats, DispatchDropdownComponent, DispatchLocationComponent, DispatchStatus, DocumentThumbnailHelper, DropZoneComponent, DropdownTypes, FILE_PROCESSING_CONCURRENCY, IMAGE_PREVIEW_CSS_WIDTH, IMAGE_PREVIEW_VARIANTS, IMAGE_RESIZE_THRESHOLD_BYTES, INPUT_CHARACTER_SETS, InputAddressComponent, InputComponent, IntervalDropdownComponent, ListContactDropdownComponent, NUMBER_FORMAT_SEPARATORS, NumberFormats, PDFJS_ASSET_BASE, PHONE_COUNTRIES, PHONE_MASK, PHONE_MAX_DIGITS, PHONE_TWO_DIGIT_DIAL_CODES, PmComponent, RatingReviewComponent, ReviewModalComponent, SelectedBusinessFieldComponent, SignatureComponent, StickyScrollbarComponent, THUMBNAIL_MIME, THUMBNAIL_QUALITY, THUMBNAIL_WIDTH, TIME_FORMAT_PATTERNS, TabOptionDropdownComponent, TextAreaComponent, TimeFormats, VIDEO_THUMBNAIL_TIMEOUT_MS, eScrollState, getDateFormatPattern, ignoreWhenAutofilled, sizes };
 //# sourceMappingURL=carriera-intern.mjs.map