carriera-intern 1.1.113 → 1.1.115

package/fesm2022/carriera-intern.mjs

@@ -3241,28 +3241,6 @@ class InputComponent {
     onValueAdded = output();
     onRemove = output();
     onHoverRemove = output();
-    dropdownPopperOptions = (options = {}) => {
-        const modifiers = options['modifiers'] ?? [];
-        // Filter out the specific flip modifier with options
-        const flipModifier = modifiers.find((m) => m?.name === 'flip' && m?.options === undefined);
-        const otherModifiers = modifiers.filter((m) => m !== flipModifier);
-        const newOptions = {
-            ...options,
-            modifiers: [
-                ...otherModifiers,
-                {
-                    ...flipModifier,
-                    name: 'flip',
-                    options: {
-                        altBoundary: true,
-                        rootBoundary: 'document',
-                        padding: 8,
-                    },
-                },
-            ],
-        };
-        return newOptions;
-    };
     constructor(ngControl, cdr) {
         this.ngControl = ngControl;
         this.cdr = cdr;
@@ -4214,7 +4192,7 @@ class InputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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.27", 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  [popperOptions]=\"dropdownPopperOptions\"\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 && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\n    \"\n    [required]=\"config().required\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"dispatchOnBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"config().label\"\n    [attr.name]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    [placeholder]=\"config()?.placeholder || ''\"\n    [autocomplete]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    #inputRef\n    [appPassword]=\"password\"\n    [appMask]=\"config().mask || ''\"\n    [reveal]=\"config().reveal || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [disableDecimals]=\"config().disableDecimals || false\"\n    [prefix]=\"config().prefix || ''\"\n    [max]=\"config().max\"\n    [clampToMax]=\"config().clampToMax || false\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"onFocus($event)\"\n  />\n  @if (\n    !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\n    config().placeholderBehavior !== \"hidden\"\n  ) {\n    <label\n      class=\"app-input-label\"\n      [class.placeholder-color]=\"this.config().placeholderColor\"\n      [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\n      (click)=\"focus($event)\"\n    >\n      <!-- Truck Trailer Driver Dropdown label -->\n      @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\n        <p class=\"truck-item app-input-name\">Truck</p>\n        <p class=\"trailer-item\">Trailer</p>\n        <p>Driver</p>\n        <p class=\"sub-label\">Rate</p>\n      }\n      <!-- Split Load -->\n      @else if (dropdownType === \"split-driver\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Rate</p>\n      } @else if (\n        dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\n      ) {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Location</p>\n      }\n      <!-- Dropdown variants -->\n      @else if (dropdownType === \"broker\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Credit</p>\n      } @else if (dropdownType === \"contact\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Phone</p>\n      } @else if (dropdownType === \"shipper\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Address</p>\n      } @else if (dropdownType === \"owner\") {\n        <p class=\"owner-ein app-input-name\">EIN</p>\n        <p class=\"app-input-name\">Company Name</p>\n      } @else if (dropdownType === \"fuelcard\") {\n        <p class=\"fuelcard-number app-input-name\">Card No.</p>\n        <p class=\"fuelcard-brand app-input-name\">Provider</p>\n        <p class=\"app-input-name\">Nickname</p>\n      }\n      <!-- 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 === \"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 (\"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 (\"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=\"icon fraud\"\n          ></svg-icon>\n        }\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (brokerOption.businessName || '' | highlightSearch: value())\n              : brokerOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            @if (!brokerOption.creditLimit) {\n              <p>Unlimited</p>\n            } @else {\n              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\n              <div\n                class=\"progress-bar\"\n                [style.--progress]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).activePercentageOfPaid + '%'\n                \"\n                [class]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).status\n                \"\n              ></div>\n            }\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ brokerOption.loadsCount }} |\n              {{ brokerOption.availableCredit || 0 | currency }}\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Contact dropdown -->\n<ng-template #contactRef>\n  @if (dropdownOptions().length) {\n    @for (contact of dropdownOptions(); track $index; let index = $index) {\n      @let contactOption = cast(contact, \"contact\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"contact-{{ contact.id }}\"\n        (click)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          [innerHTML]=\"\n            search\n              ? (contactOption.contactName || '' | highlightSearch: value())\n              : contactOption.contactName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p>{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ contactOption.phone }}\n            </p>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Owner dropdown -->\n<ng-template #ownerRef>\n  @if (dropdownOptions().length) {\n    @for (owner of dropdownOptions(); track $index; let index = $index) {\n      @let ownerOption = cast(owner, \"owner\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"owner-{{ ownerOption?.id }}\"\n        (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\"\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=\"max-w-280 text-truncate\"\n          [innerHTML]=\"\n            search\n              ? (shipperOption.businessName || '' | highlightSearch: value())\n              : shipperOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p\n              class=\"max-w-280 text-truncate\"\n              [innerHTML]=\"\n                search\n                  ? (shipperOption.address?.address || ''\n                    | highlightSearch: value())\n                  : shipperOption.address?.address\n              \"\n            ></p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ shipperOption.pickupCount }} Pickup |\n              {{ shipperOption.deliveryCount }} Delivery\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatch dropdown -->\n<ng-template #dispatchesRef>\n  @if (dropdownOptions().length) {\n    <button\n      tabindex=\"-1\"\n      class=\"dropdown-item\"\n      (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                  @if (dispatch.status?.statusString) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"\n                        'status-' +\n                        dispatch.status?.statusString\n                          ?.toLowerCase()\n                          ?.replaceAll(' ', '')\n                          ?.replaceAll('.', '')\n                      \"\n                    >\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block blue\">D</p>\n                        <p class=\"status-block green\">L</p>\n                      }\n                      {{ dispatch.status?.statusString }}\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block green\">P</p>\n                        <p class=\"status-block orange\">D</p>\n                      }\n                      @if (dispatch.status?.statusCheckInNumber) {\n                        <p class=\"status-block\">\n                          {{ dispatch.status?.statusCheckInNumber }}\n                        </p>\n                      }\n                    </div>\n                    <p class=\"dispatch-separator\">|</p>\n                  }\n                  <p class=\"dispatch-load-count\">\n                    <!-- Pending Load Count -->\n                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\n                    0\n                  </p>\n                  <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitDriverRef>\n  @if (dropdownOptions().length) {\n    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\n      @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ driverOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              <p>{{ driverOption.payTypeValue }}</p>\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTruckRef>\n  @if (dropdownOptions().length) {\n    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\n      @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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 =\n                truckOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ truckOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                truckOption.location?.city &&\n                truckOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ truckOption.location?.city }},\n                  {{ truckOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\n      @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ trailerOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                trailerOption.location?.city &&\n                trailerOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ trailerOption.location?.city }},\n                  {{ trailerOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #tollRef>\n  @if (dropdownOptions().length) {\n    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\n      @let tollOption = cast(toll, \"tollOption\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item pe-none\"\n        [class]=\"{\n          unfolded: tollOption.tollTransponders?.length || 0 > 0,\n          focused: isGroupFocused,\n        }\"\n      >\n        <p>\n          {{ tollOption.groupName }}\n        </p>\n      </button>\n      @let tollTransponders = tollOption.tollTransponders || [];\n      @for (\n        tollTransponder of tollTransponders;\n        track tollTransponder.id;\n        let optionIndex = $index\n      ) {\n        @let isOptionFocused =\n          groupedNavigationState?.groupIndex === groupIndex &&\n          groupedNavigationState?.optionIndex === optionIndex + 1;\n        <!-- +1 since optionIndex is 0 for the group item header -->\n        <button\n          class=\"dropdown-item\"\n          (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<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!.availableCredit || 0) < 0) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\n      <div class=\"selected-end-item\">\n        @if (!brokerOption!.creditLimit) {\n          <p>Unlimited</p>\n        } @else {\n          <p>\n            {{ brokerOption!.availableCredit || 0 | currency }}\n          </p>\n          <div\n            class=\"progress-bar\"\n            [style.--progress]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).activePercentageOfPaid + '%'\n            \"\n            [class]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).status\n            \"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedContactRef>\n  @let contactOption = cast(selectedOption(), \"contact\");\n  @if (contactOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ contactOption?.phone }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedShipperRef>\n  @let shipperOption = cast(selectedOption(), \"shipper\");\n  @if (shipperOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ shipperOption?.address?.address }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedOwnerRef>\n  @let ownerOption = cast(selectedOption(), \"owner\");\n  @if (ownerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\n      <p class=\"\">{{ ownerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedFuelcardRef>\n  @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\n  @if (fuelcardOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"fuelcard-number\">\n        {{ fuelcardOption?.number }}\n      </p>\n      <p class=\"fuelcard-brand\">\n        {{ fuelcardOption?.brand }}\n      </p>\n      <p class=\"\">\n        {{ fuelcardOption?.account }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedBankRef>\n  @let bankOption = cast(selectedOption(), \"bank\");\n  @if (bankOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (bankOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedProviderRef>\n  @let providerOption = cast(selectedOption(), \"provider\");\n  @if (providerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon full-size\"\n        [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n      ></svg-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedMakeRef>\n  @let makeOption = cast(selectedOption(), \"make\");\n  @if (makeOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (makeOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedStateRef>\n  @let stateOption = cast(selectedOption(), \"state\");\n  @if (stateOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"\n          'cai-' +\n          stateOption?.countryType?.name?.toLowerCase() +\n          '-' +\n          stateOption?.stateShortName?.toLowerCase()\n        \"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ stateOption?.stateShortName }}\n        {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedDispatcherRef>\n  @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\n  @if (dispatcherOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: dispatcherOption?.id || 0,\n          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: dispatcherOption?.avatarFile,\n          colorFlag: dispatcherOption?.colorFlag,\n        }\"\n        [rounded]=\"!config().squareAvatar\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckRef>\n  @let truckOption = cast(selectedOption(), \"truckOption\");\n  @if (truckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"truckOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTrailerRef>\n  @let trailerOption = cast(selectedOption(), \"trailerOption\");\n  @if (trailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"trailerOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedHazardousRef>\n  @let hazardousOption = cast(selectedOption(), \"hazardous\");\n  @if (hazardousOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"hazard-icon\"\n        [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\n        {{ hazardousOption?.description }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedPmRef>\n  @let pmOption = cast(selectedOption(), \"pmOption\");\n  @if (pmOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"pmOption?.title | remapPmIcons\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ pmOption?.title }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedColorRef>\n  @let colorOption = cast(selectedOption(), \"colorOption\");\n  @if (colorOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon cai-color\"\n        [name]=\"'cai-color'\"\n        [style.--color]=\"colorOption?.code\"\n        [style.--hover-color]=\"colorOption?.hoverCode\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ colorOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTollRef>\n  @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\n  @if (tollOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">\n        {{ tollOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitDriverRef>\n  @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\n  @if (splitDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem\">\n          <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\n          <p class=\"driver-name\">\n            {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\n          </p>\n        </div>\n      </div>\n\n      <p class=\"selected-end-item\">\n        {{ splitDriverOption.payTypeValue }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTruckRef>\n  @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\n  @if (splitTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem trailer-item\">\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ splitTruckOption!.truckNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTruckOption!.location?.city &&\n          splitTruckOption!.location?.stateShortName\n        ) {\n          {{ splitTruckOption!.location?.city }},\n          {{ splitTruckOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTrailerRef>\n  @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\n  @if (splitTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem truck-item\">\n          <svg-icon\n            class=\"truck-icon\"\n            [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"truck-number\">\n            {{ splitTrailerOption!.trailerNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTrailerOption!.location?.city &&\n          splitTrailerOption!.location?.stateShortName\n        ) {\n          {{ splitTrailerOption!.location?.city }},\n          {{ splitTrailerOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #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) .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 .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}@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}.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}.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-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label),.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}.max-w-280{max-width:280px}\n"], dependencies: [{ kind: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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 && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\n    \"\n    [required]=\"config().required\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"dispatchOnBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"config().label\"\n    [attr.name]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    [placeholder]=\"config()?.placeholder || ''\"\n    [autocomplete]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    #inputRef\n    [appPassword]=\"password\"\n    [appMask]=\"config().mask || ''\"\n    [reveal]=\"config().reveal || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [disableDecimals]=\"config().disableDecimals || false\"\n    [prefix]=\"config().prefix || ''\"\n    [max]=\"config().max\"\n    [clampToMax]=\"config().clampToMax || false\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"onFocus($event)\"\n  />\n  @if (\n    !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\n    config().placeholderBehavior !== \"hidden\"\n  ) {\n    <label\n      class=\"app-input-label\"\n      [class.placeholder-color]=\"this.config().placeholderColor\"\n      [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\n      (click)=\"focus($event)\"\n    >\n      <!-- Truck Trailer Driver Dropdown label -->\n      @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\n        <p class=\"truck-item app-input-name\">Truck</p>\n        <p class=\"trailer-item\">Trailer</p>\n        <p>Driver</p>\n        <p class=\"sub-label\">Rate</p>\n      }\n      <!-- Split Load -->\n      @else if (dropdownType === \"split-driver\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Rate</p>\n      } @else if (\n        dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\n      ) {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Location</p>\n      }\n      <!-- Dropdown variants -->\n      @else if (dropdownType === \"broker\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Credit</p>\n      } @else if (dropdownType === \"contact\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Phone</p>\n      } @else if (dropdownType === \"shipper\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Address</p>\n      } @else if (dropdownType === \"owner\") {\n        <p class=\"owner-ein app-input-name\">EIN</p>\n        <p class=\"app-input-name\">Company Name</p>\n      } @else if (dropdownType === \"fuelcard\") {\n        <p class=\"fuelcard-number app-input-name\">Card No.</p>\n        <p class=\"fuelcard-brand app-input-name\">Provider</p>\n        <p class=\"app-input-name\">Nickname</p>\n      }\n      <!-- 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 === \"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 (\"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 (\"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=\"icon fraud\"\n          ></svg-icon>\n        }\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (brokerOption.businessName || '' | highlightSearch: value())\n              : brokerOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            @if (!brokerOption.creditLimit) {\n              <p>Unlimited</p>\n            } @else {\n              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\n              <div\n                class=\"progress-bar\"\n                [style.--progress]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).activePercentageOfPaid + '%'\n                \"\n                [class]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).status\n                \"\n              ></div>\n            }\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ brokerOption.loadsCount }} |\n              {{ brokerOption.availableCredit || 0 | currency }}\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Contact dropdown -->\n<ng-template #contactRef>\n  @if (dropdownOptions().length) {\n    @for (contact of dropdownOptions(); track $index; let index = $index) {\n      @let contactOption = cast(contact, \"contact\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"contact-{{ contact.id }}\"\n        (click)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          [innerHTML]=\"\n            search\n              ? (contactOption.contactName || '' | highlightSearch: value())\n              : contactOption.contactName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p>{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ contactOption.phone }}\n            </p>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Owner dropdown -->\n<ng-template #ownerRef>\n  @if (dropdownOptions().length) {\n    @for (owner of dropdownOptions(); track $index; let index = $index) {\n      @let ownerOption = cast(owner, \"owner\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"owner-{{ ownerOption?.id }}\"\n        (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\"\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=\"max-w-280 text-truncate\"\n          [innerHTML]=\"\n            search\n              ? (shipperOption.businessName || '' | highlightSearch: value())\n              : shipperOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p\n              class=\"max-w-280 text-truncate\"\n              [innerHTML]=\"\n                search\n                  ? (shipperOption.address?.address || ''\n                    | highlightSearch: value())\n                  : shipperOption.address?.address\n              \"\n            ></p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ shipperOption.pickupCount }} Pickup |\n              {{ shipperOption.deliveryCount }} Delivery\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatch dropdown -->\n<ng-template #dispatchesRef>\n  @if (dropdownOptions().length) {\n    <button\n      tabindex=\"-1\"\n      class=\"dropdown-item\"\n      (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                  @if (dispatch.status?.statusString) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"\n                        'status-' +\n                        dispatch.status?.statusString\n                          ?.toLowerCase()\n                          ?.replaceAll(' ', '')\n                          ?.replaceAll('.', '')\n                      \"\n                    >\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block blue\">D</p>\n                        <p class=\"status-block green\">L</p>\n                      }\n                      {{ dispatch.status?.statusString }}\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block green\">P</p>\n                        <p class=\"status-block orange\">D</p>\n                      }\n                      @if (dispatch.status?.statusCheckInNumber) {\n                        <p class=\"status-block\">\n                          {{ dispatch.status?.statusCheckInNumber }}\n                        </p>\n                      }\n                    </div>\n                    <p class=\"dispatch-separator\">|</p>\n                  }\n                  <p class=\"dispatch-load-count\">\n                    <!-- Pending Load Count -->\n                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\n                    0\n                  </p>\n                  <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitDriverRef>\n  @if (dropdownOptions().length) {\n    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\n      @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ driverOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              <p>{{ driverOption.payTypeValue }}</p>\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTruckRef>\n  @if (dropdownOptions().length) {\n    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\n      @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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 =\n                truckOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ truckOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                truckOption.location?.city &&\n                truckOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ truckOption.location?.city }},\n                  {{ truckOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\n      @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ trailerOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                trailerOption.location?.city &&\n                trailerOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ trailerOption.location?.city }},\n                  {{ trailerOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #tollRef>\n  @if (dropdownOptions().length) {\n    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\n      @let tollOption = cast(toll, \"tollOption\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item pe-none\"\n        [class]=\"{\n          unfolded: tollOption.tollTransponders?.length || 0 > 0,\n          focused: isGroupFocused,\n        }\"\n      >\n        <p>\n          {{ tollOption.groupName }}\n        </p>\n      </button>\n      @let tollTransponders = tollOption.tollTransponders || [];\n      @for (\n        tollTransponder of tollTransponders;\n        track tollTransponder.id;\n        let optionIndex = $index\n      ) {\n        @let isOptionFocused =\n          groupedNavigationState?.groupIndex === groupIndex &&\n          groupedNavigationState?.optionIndex === optionIndex + 1;\n        <!-- +1 since optionIndex is 0 for the group item header -->\n        <button\n          class=\"dropdown-item\"\n          (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<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!.availableCredit || 0) < 0) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\n      <div class=\"selected-end-item\">\n        @if (!brokerOption!.creditLimit) {\n          <p>Unlimited</p>\n        } @else {\n          <p>\n            {{ brokerOption!.availableCredit || 0 | currency }}\n          </p>\n          <div\n            class=\"progress-bar\"\n            [style.--progress]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).activePercentageOfPaid + '%'\n            \"\n            [class]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).status\n            \"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedContactRef>\n  @let contactOption = cast(selectedOption(), \"contact\");\n  @if (contactOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ contactOption?.phone }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedShipperRef>\n  @let shipperOption = cast(selectedOption(), \"shipper\");\n  @if (shipperOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ shipperOption?.address?.address }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedOwnerRef>\n  @let ownerOption = cast(selectedOption(), \"owner\");\n  @if (ownerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\n      <p class=\"\">{{ ownerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedFuelcardRef>\n  @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\n  @if (fuelcardOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"fuelcard-number\">\n        {{ fuelcardOption?.number }}\n      </p>\n      <p class=\"fuelcard-brand\">\n        {{ fuelcardOption?.brand }}\n      </p>\n      <p class=\"\">\n        {{ fuelcardOption?.account }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedBankRef>\n  @let bankOption = cast(selectedOption(), \"bank\");\n  @if (bankOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (bankOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedProviderRef>\n  @let providerOption = cast(selectedOption(), \"provider\");\n  @if (providerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon full-size\"\n        [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n      ></svg-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedMakeRef>\n  @let makeOption = cast(selectedOption(), \"make\");\n  @if (makeOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (makeOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedStateRef>\n  @let stateOption = cast(selectedOption(), \"state\");\n  @if (stateOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"\n          'cai-' +\n          stateOption?.countryType?.name?.toLowerCase() +\n          '-' +\n          stateOption?.stateShortName?.toLowerCase()\n        \"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ stateOption?.stateShortName }}\n        {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedDispatcherRef>\n  @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\n  @if (dispatcherOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: dispatcherOption?.id || 0,\n          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: dispatcherOption?.avatarFile,\n          colorFlag: dispatcherOption?.colorFlag,\n        }\"\n        [rounded]=\"!config().squareAvatar\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckRef>\n  @let truckOption = cast(selectedOption(), \"truckOption\");\n  @if (truckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"truckOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTrailerRef>\n  @let trailerOption = cast(selectedOption(), \"trailerOption\");\n  @if (trailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"trailerOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedHazardousRef>\n  @let hazardousOption = cast(selectedOption(), \"hazardous\");\n  @if (hazardousOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"hazard-icon\"\n        [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\n        {{ hazardousOption?.description }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedPmRef>\n  @let pmOption = cast(selectedOption(), \"pmOption\");\n  @if (pmOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"pmOption?.title | remapPmIcons\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ pmOption?.title }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedColorRef>\n  @let colorOption = cast(selectedOption(), \"colorOption\");\n  @if (colorOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon cai-color\"\n        [name]=\"'cai-color'\"\n        [style.--color]=\"colorOption?.code\"\n        [style.--hover-color]=\"colorOption?.hoverCode\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ colorOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTollRef>\n  @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\n  @if (tollOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">\n        {{ tollOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitDriverRef>\n  @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\n  @if (splitDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem\">\n          <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\n          <p class=\"driver-name\">\n            {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\n          </p>\n        </div>\n      </div>\n\n      <p class=\"selected-end-item\">\n        {{ splitDriverOption.payTypeValue }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTruckRef>\n  @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\n  @if (splitTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem trailer-item\">\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ splitTruckOption!.truckNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTruckOption!.location?.city &&\n          splitTruckOption!.location?.stateShortName\n        ) {\n          {{ splitTruckOption!.location?.city }},\n          {{ splitTruckOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTrailerRef>\n  @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\n  @if (splitTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem truck-item\">\n          <svg-icon\n            class=\"truck-icon\"\n            [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"truck-number\">\n            {{ splitTrailerOption!.trailerNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTrailerOption!.location?.city &&\n          splitTrailerOption!.location?.stateShortName\n        ) {\n          {{ splitTrailerOption!.location?.city }},\n          {{ splitTrailerOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #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) .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 .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}@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}.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}.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-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label),.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}.max-w-280{max-width:280px}\n"], dependencies: [{ kind: "directive", type: 
                 // Directives
                 PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal", "appMask", "max"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "disableDecimals", "prefix", "clampToMax"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[caiInfiniteScroll]", inputs: ["scrollThreshold", "debounceTime"], outputs: ["scrolledToBottom"] }, { kind: "directive", type: IntersectionObserverDirective, selector: "[caiIntersectionObserver]", inputs: ["threshold", "rootMargin"], outputs: ["inView"] }, { kind: "ngmodule", type: 
                 // Bootstrap
@@ -4249,7 +4227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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  [popperOptions]=\"dropdownPopperOptions\"\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 && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\n    \"\n    [required]=\"config().required\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"dispatchOnBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"config().label\"\n    [attr.name]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    [placeholder]=\"config()?.placeholder || ''\"\n    [autocomplete]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    #inputRef\n    [appPassword]=\"password\"\n    [appMask]=\"config().mask || ''\"\n    [reveal]=\"config().reveal || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [disableDecimals]=\"config().disableDecimals || false\"\n    [prefix]=\"config().prefix || ''\"\n    [max]=\"config().max\"\n    [clampToMax]=\"config().clampToMax || false\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"onFocus($event)\"\n  />\n  @if (\n    !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\n    config().placeholderBehavior !== \"hidden\"\n  ) {\n    <label\n      class=\"app-input-label\"\n      [class.placeholder-color]=\"this.config().placeholderColor\"\n      [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\n      (click)=\"focus($event)\"\n    >\n      <!-- Truck Trailer Driver Dropdown label -->\n      @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\n        <p class=\"truck-item app-input-name\">Truck</p>\n        <p class=\"trailer-item\">Trailer</p>\n        <p>Driver</p>\n        <p class=\"sub-label\">Rate</p>\n      }\n      <!-- Split Load -->\n      @else if (dropdownType === \"split-driver\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Rate</p>\n      } @else if (\n        dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\n      ) {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Location</p>\n      }\n      <!-- Dropdown variants -->\n      @else if (dropdownType === \"broker\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Credit</p>\n      } @else if (dropdownType === \"contact\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Phone</p>\n      } @else if (dropdownType === \"shipper\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Address</p>\n      } @else if (dropdownType === \"owner\") {\n        <p class=\"owner-ein app-input-name\">EIN</p>\n        <p class=\"app-input-name\">Company Name</p>\n      } @else if (dropdownType === \"fuelcard\") {\n        <p class=\"fuelcard-number app-input-name\">Card No.</p>\n        <p class=\"fuelcard-brand app-input-name\">Provider</p>\n        <p class=\"app-input-name\">Nickname</p>\n      }\n      <!-- 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 === \"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 (\"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 (\"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=\"icon fraud\"\n          ></svg-icon>\n        }\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (brokerOption.businessName || '' | highlightSearch: value())\n              : brokerOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            @if (!brokerOption.creditLimit) {\n              <p>Unlimited</p>\n            } @else {\n              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\n              <div\n                class=\"progress-bar\"\n                [style.--progress]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).activePercentageOfPaid + '%'\n                \"\n                [class]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).status\n                \"\n              ></div>\n            }\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ brokerOption.loadsCount }} |\n              {{ brokerOption.availableCredit || 0 | currency }}\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Contact dropdown -->\n<ng-template #contactRef>\n  @if (dropdownOptions().length) {\n    @for (contact of dropdownOptions(); track $index; let index = $index) {\n      @let contactOption = cast(contact, \"contact\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"contact-{{ contact.id }}\"\n        (click)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          [innerHTML]=\"\n            search\n              ? (contactOption.contactName || '' | highlightSearch: value())\n              : contactOption.contactName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p>{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ contactOption.phone }}\n            </p>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Owner dropdown -->\n<ng-template #ownerRef>\n  @if (dropdownOptions().length) {\n    @for (owner of dropdownOptions(); track $index; let index = $index) {\n      @let ownerOption = cast(owner, \"owner\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"owner-{{ ownerOption?.id }}\"\n        (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\"\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=\"max-w-280 text-truncate\"\n          [innerHTML]=\"\n            search\n              ? (shipperOption.businessName || '' | highlightSearch: value())\n              : shipperOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p\n              class=\"max-w-280 text-truncate\"\n              [innerHTML]=\"\n                search\n                  ? (shipperOption.address?.address || ''\n                    | highlightSearch: value())\n                  : shipperOption.address?.address\n              \"\n            ></p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ shipperOption.pickupCount }} Pickup |\n              {{ shipperOption.deliveryCount }} Delivery\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatch dropdown -->\n<ng-template #dispatchesRef>\n  @if (dropdownOptions().length) {\n    <button\n      tabindex=\"-1\"\n      class=\"dropdown-item\"\n      (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                  @if (dispatch.status?.statusString) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"\n                        'status-' +\n                        dispatch.status?.statusString\n                          ?.toLowerCase()\n                          ?.replaceAll(' ', '')\n                          ?.replaceAll('.', '')\n                      \"\n                    >\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block blue\">D</p>\n                        <p class=\"status-block green\">L</p>\n                      }\n                      {{ dispatch.status?.statusString }}\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block green\">P</p>\n                        <p class=\"status-block orange\">D</p>\n                      }\n                      @if (dispatch.status?.statusCheckInNumber) {\n                        <p class=\"status-block\">\n                          {{ dispatch.status?.statusCheckInNumber }}\n                        </p>\n                      }\n                    </div>\n                    <p class=\"dispatch-separator\">|</p>\n                  }\n                  <p class=\"dispatch-load-count\">\n                    <!-- Pending Load Count -->\n                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\n                    0\n                  </p>\n                  <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitDriverRef>\n  @if (dropdownOptions().length) {\n    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\n      @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ driverOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              <p>{{ driverOption.payTypeValue }}</p>\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTruckRef>\n  @if (dropdownOptions().length) {\n    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\n      @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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 =\n                truckOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ truckOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                truckOption.location?.city &&\n                truckOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ truckOption.location?.city }},\n                  {{ truckOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\n      @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ trailerOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                trailerOption.location?.city &&\n                trailerOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ trailerOption.location?.city }},\n                  {{ trailerOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #tollRef>\n  @if (dropdownOptions().length) {\n    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\n      @let tollOption = cast(toll, \"tollOption\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item pe-none\"\n        [class]=\"{\n          unfolded: tollOption.tollTransponders?.length || 0 > 0,\n          focused: isGroupFocused,\n        }\"\n      >\n        <p>\n          {{ tollOption.groupName }}\n        </p>\n      </button>\n      @let tollTransponders = tollOption.tollTransponders || [];\n      @for (\n        tollTransponder of tollTransponders;\n        track tollTransponder.id;\n        let optionIndex = $index\n      ) {\n        @let isOptionFocused =\n          groupedNavigationState?.groupIndex === groupIndex &&\n          groupedNavigationState?.optionIndex === optionIndex + 1;\n        <!-- +1 since optionIndex is 0 for the group item header -->\n        <button\n          class=\"dropdown-item\"\n          (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<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!.availableCredit || 0) < 0) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\n      <div class=\"selected-end-item\">\n        @if (!brokerOption!.creditLimit) {\n          <p>Unlimited</p>\n        } @else {\n          <p>\n            {{ brokerOption!.availableCredit || 0 | currency }}\n          </p>\n          <div\n            class=\"progress-bar\"\n            [style.--progress]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).activePercentageOfPaid + '%'\n            \"\n            [class]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).status\n            \"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedContactRef>\n  @let contactOption = cast(selectedOption(), \"contact\");\n  @if (contactOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ contactOption?.phone }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedShipperRef>\n  @let shipperOption = cast(selectedOption(), \"shipper\");\n  @if (shipperOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ shipperOption?.address?.address }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedOwnerRef>\n  @let ownerOption = cast(selectedOption(), \"owner\");\n  @if (ownerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\n      <p class=\"\">{{ ownerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedFuelcardRef>\n  @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\n  @if (fuelcardOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"fuelcard-number\">\n        {{ fuelcardOption?.number }}\n      </p>\n      <p class=\"fuelcard-brand\">\n        {{ fuelcardOption?.brand }}\n      </p>\n      <p class=\"\">\n        {{ fuelcardOption?.account }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedBankRef>\n  @let bankOption = cast(selectedOption(), \"bank\");\n  @if (bankOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (bankOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedProviderRef>\n  @let providerOption = cast(selectedOption(), \"provider\");\n  @if (providerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon full-size\"\n        [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n      ></svg-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedMakeRef>\n  @let makeOption = cast(selectedOption(), \"make\");\n  @if (makeOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (makeOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedStateRef>\n  @let stateOption = cast(selectedOption(), \"state\");\n  @if (stateOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"\n          'cai-' +\n          stateOption?.countryType?.name?.toLowerCase() +\n          '-' +\n          stateOption?.stateShortName?.toLowerCase()\n        \"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ stateOption?.stateShortName }}\n        {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedDispatcherRef>\n  @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\n  @if (dispatcherOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: dispatcherOption?.id || 0,\n          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: dispatcherOption?.avatarFile,\n          colorFlag: dispatcherOption?.colorFlag,\n        }\"\n        [rounded]=\"!config().squareAvatar\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckRef>\n  @let truckOption = cast(selectedOption(), \"truckOption\");\n  @if (truckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"truckOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTrailerRef>\n  @let trailerOption = cast(selectedOption(), \"trailerOption\");\n  @if (trailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"trailerOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedHazardousRef>\n  @let hazardousOption = cast(selectedOption(), \"hazardous\");\n  @if (hazardousOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"hazard-icon\"\n        [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\n        {{ hazardousOption?.description }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedPmRef>\n  @let pmOption = cast(selectedOption(), \"pmOption\");\n  @if (pmOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"pmOption?.title | remapPmIcons\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ pmOption?.title }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedColorRef>\n  @let colorOption = cast(selectedOption(), \"colorOption\");\n  @if (colorOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon cai-color\"\n        [name]=\"'cai-color'\"\n        [style.--color]=\"colorOption?.code\"\n        [style.--hover-color]=\"colorOption?.hoverCode\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ colorOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTollRef>\n  @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\n  @if (tollOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">\n        {{ tollOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitDriverRef>\n  @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\n  @if (splitDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem\">\n          <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\n          <p class=\"driver-name\">\n            {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\n          </p>\n        </div>\n      </div>\n\n      <p class=\"selected-end-item\">\n        {{ splitDriverOption.payTypeValue }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTruckRef>\n  @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\n  @if (splitTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem trailer-item\">\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ splitTruckOption!.truckNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTruckOption!.location?.city &&\n          splitTruckOption!.location?.stateShortName\n        ) {\n          {{ splitTruckOption!.location?.city }},\n          {{ splitTruckOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTrailerRef>\n  @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\n  @if (splitTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem truck-item\">\n          <svg-icon\n            class=\"truck-icon\"\n            [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"truck-number\">\n            {{ splitTrailerOption!.trailerNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTrailerOption!.location?.city &&\n          splitTrailerOption!.location?.stateShortName\n        ) {\n          {{ splitTrailerOption!.location?.city }},\n          {{ splitTrailerOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #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) .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 .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}@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}.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}.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-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label),.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}.max-w-280{max-width:280px}\n"] }]
+                    ], template: "<!-- #region Variables -->\n@let valid =\n  ngControl?.valid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let invalid =\n  ngControl?.invalid &&\n  (ngControl?.touched || ngControl?.dirty) &&\n  !isAdding() &&\n  !isDisabled();\n@let subcontent =\n  config().subcontent ||\n  (config().dropdown === \"subcontent\" &&\n    selectedOption() &&\n    cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\n\n@let name = config().name;\n@let password = config().type === \"password\" || config().type === \"account\";\n\n@let optionLabel = this.config().optionLabel || \"label\";\n@let dropdownType = this.config().dropdown;\n\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\n\n@let tooltipClass =\n  config().inverse\n    ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n    : \"tooltip input-tooltip\";\n\n<!-- #region Multiple selection -->\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\n  <div\n    (pointerdown)=\"focus($event)\"\n    (mouseenter)=\"toggleHovered(true)\"\n    (mouseleave)=\"toggleHovered(false)\"\n    class=\"multiple-container\"\n    [class]=\"{\n      focused: focused(),\n      hovered: hovered(),\n    }\"\n  >\n    <label class=\"multiple-label\">{{ name }}</label>\n\n    @for (option of multipleSelectedOptions(); track $index) {\n      <div class=\"multiple-selected\">\n        <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\n        <button\n          type=\"button\"\n          class=\"\"\n          (pointerdown)=\"handleOption(option, $event)\"\n          [tabIndex]=\"-1\"\n          ngbTooltip=\"Clear\"\n          [placement]=\"'top'\"\n          [tooltipClass]=\"tooltipClass\"\n          [autoClose]=\"true\"\n          #closeTooltip=\"ngbTooltip\"\n          [container]=\"'body'\"\n        >\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"multiple-remove-button multiple-remove-icon bg-icon\"\n          ></svg-icon>\n        </button>\n      </div>\n    }\n  </div>\n}\n<!-- #endregion -->\n\n@let hasFloatingError =\n  invalid &&\n  (config().errorBehavior === \"floating\" ||\n    (!!config().inTable && config().placeholderBehavior !== \"static\"));\n\n<div\n  class=\"app-input-container\"\n  [class]=\"\n    {\n      config: config(),\n      hideValidation: hideValidation(),\n      isPasswordVisible: visible(),\n      isInvalid: !!invalid || forceInvalidStyling(),\n      isValid: !!valid && !forceInvalidStyling(),\n      isHovered: hovered(),\n      hasText: hasText(),\n      isAdding: isAdding(),\n      selectedOption: selectedOption(),\n    } | inputClass\n  \"\n  ngbDropdown\n  [autoClose]=\"false\"\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  #containerRef\n  [ngbTooltip]=\"errorTooltip\"\n  [disableTooltip]=\"!hasFloatingError\"\n  [container]=\"'body'\"\n  [placement]=\"['bottom', '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 && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\n    \"\n    [required]=\"config().required\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"dispatchOnBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"config().label\"\n    [attr.name]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    [placeholder]=\"config()?.placeholder || ''\"\n    [autocomplete]=\"\n      config().autocomplete ? config().autocomplete : randomAutocomplete()\n    \"\n    #inputRef\n    [appPassword]=\"password\"\n    [appMask]=\"config().mask || ''\"\n    [reveal]=\"config().reveal || 0\"\n    [account]=\"config().type === 'account'\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"config().type === 'number'\"\n    [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\n    [disableDecimals]=\"config().disableDecimals || false\"\n    [prefix]=\"config().prefix || ''\"\n    [max]=\"config().max\"\n    [clampToMax]=\"config().clampToMax || false\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"onFocus($event)\"\n  />\n  @if (\n    !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\n    config().placeholderBehavior !== \"hidden\"\n  ) {\n    <label\n      class=\"app-input-label\"\n      [class.placeholder-color]=\"this.config().placeholderColor\"\n      [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\n      (click)=\"focus($event)\"\n    >\n      <!-- Truck Trailer Driver Dropdown label -->\n      @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\n        <p class=\"truck-item app-input-name\">Truck</p>\n        <p class=\"trailer-item\">Trailer</p>\n        <p>Driver</p>\n        <p class=\"sub-label\">Rate</p>\n      }\n      <!-- Split Load -->\n      @else if (dropdownType === \"split-driver\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Rate</p>\n      } @else if (\n        dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\n      ) {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Location</p>\n      }\n      <!-- Dropdown variants -->\n      @else if (dropdownType === \"broker\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Credit</p>\n      } @else if (dropdownType === \"contact\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Phone</p>\n      } @else if (dropdownType === \"shipper\") {\n        <p class=\"app-input-name\">{{ name }}</p>\n        <p class=\"sub-label\">Address</p>\n      } @else if (dropdownType === \"owner\") {\n        <p class=\"owner-ein app-input-name\">EIN</p>\n        <p class=\"app-input-name\">Company Name</p>\n      } @else if (dropdownType === \"fuelcard\") {\n        <p class=\"fuelcard-number app-input-name\">Card No.</p>\n        <p class=\"fuelcard-brand app-input-name\">Provider</p>\n        <p class=\"app-input-name\">Nickname</p>\n      }\n      <!-- 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 === \"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 (\"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 (\"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=\"icon fraud\"\n          ></svg-icon>\n        }\n        <p\n          class=\"dropdown-content\"\n          [innerHTML]=\"\n            search\n              ? (brokerOption.businessName || '' | highlightSearch: value())\n              : brokerOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            @if (!brokerOption.creditLimit) {\n              <p>Unlimited</p>\n            } @else {\n              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\n              <div\n                class=\"progress-bar\"\n                [style.--progress]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).activePercentageOfPaid + '%'\n                \"\n                [class]=\"\n                  (\n                    brokerOption\n                    | brokerProgress: brokerOption.dnu || brokerOption.ban\n                  ).status\n                \"\n              ></div>\n            }\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ brokerOption.loadsCount }} |\n              {{ brokerOption.availableCredit || 0 | currency }}\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Contact dropdown -->\n<ng-template #contactRef>\n  @if (dropdownOptions().length) {\n    @for (contact of dropdownOptions(); track $index; let index = $index) {\n      @let contactOption = cast(contact, \"contact\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"contact-{{ contact.id }}\"\n        (click)=\"handleOption(contact, $event)\"\n        [class]=\"{\n          selected: cast(selectedOption(), 'contact')?.id === contact.id,\n          focused: focusedOptionIndex === index,\n        }\"\n      >\n        <p\n          [innerHTML]=\"\n            search\n              ? (contactOption.contactName || '' | highlightSearch: value())\n              : contactOption.contactName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p>{{ contactOption.department?.name }}</p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ contactOption.phone }}\n            </p>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Owner dropdown -->\n<ng-template #ownerRef>\n  @if (dropdownOptions().length) {\n    @for (owner of dropdownOptions(); track $index; let index = $index) {\n      @let ownerOption = cast(owner, \"owner\");\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item\"\n        id=\"owner-{{ ownerOption?.id }}\"\n        (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\"\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=\"max-w-280 text-truncate\"\n          [innerHTML]=\"\n            search\n              ? (shipperOption.businessName || '' | highlightSearch: value())\n              : shipperOption.businessName\n          \"\n        ></p>\n        <div class=\"dropdown-subitem-end\">\n          <div class=\"end-item-base\">\n            <p\n              class=\"max-w-280 text-truncate\"\n              [innerHTML]=\"\n                search\n                  ? (shipperOption.address?.address || ''\n                    | highlightSearch: value())\n                  : shipperOption.address?.address\n              \"\n            ></p>\n          </div>\n          <div class=\"end-item-hover\">\n            <p>\n              {{ shipperOption.pickupCount }} Pickup |\n              {{ shipperOption.deliveryCount }} Delivery\n            </p>\n            <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\n          </div>\n        </div>\n      </button>\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<!-- Dispatch dropdown -->\n<ng-template #dispatchesRef>\n  @if (dropdownOptions().length) {\n    <button\n      tabindex=\"-1\"\n      class=\"dropdown-item\"\n      (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                  @if (dispatch.status?.statusString) {\n                    <div\n                      class=\"dispatch-status\"\n                      [class]=\"\n                        'status-' +\n                        dispatch.status?.statusString\n                          ?.toLowerCase()\n                          ?.replaceAll(' ', '')\n                          ?.replaceAll('.', '')\n                      \"\n                    >\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block blue\">D</p>\n                        <p class=\"status-block green\">L</p>\n                      }\n                      {{ dispatch.status?.statusString }}\n                      @if (\n                        dispatch.status?.statusString?.toLowerCase() ===\n                        \"repair\"\n                      ) {\n                        <p class=\"status-block green\">P</p>\n                        <p class=\"status-block orange\">D</p>\n                      }\n                      @if (dispatch.status?.statusCheckInNumber) {\n                        <p class=\"status-block\">\n                          {{ dispatch.status?.statusCheckInNumber }}\n                        </p>\n                      }\n                    </div>\n                    <p class=\"dispatch-separator\">|</p>\n                  }\n                  <p class=\"dispatch-load-count\">\n                    <!-- Pending Load Count -->\n                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\n                    0\n                  </p>\n                  <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n                </div>\n                <div class=\"end-item-base\">\n                  <p>{{ dispatch.payType }}</p>\n                  <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\n                </div>\n              </div>\n            </button>\n          }\n        } @else if (isNoBoardsVariant) {\n          <p class=\"dropdown-item no-results\">No results</p>\n        }\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitDriverRef>\n  @if (dropdownOptions().length) {\n    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\n      @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ driverOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              <p>{{ driverOption.payTypeValue }}</p>\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTruckRef>\n  @if (dropdownOptions().length) {\n    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\n      @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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 =\n                truckOption.dispatchStatus?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ truckOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                truckOption.location?.city &&\n                truckOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ truckOption.location?.city }},\n                  {{ truckOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #splitTrailerRef>\n  @if (dropdownOptions().length) {\n    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\n      @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item\"\n        (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?.statusValue?.name;\n              @if (dispatchStatus) {\n                <div\n                  class=\"dispatch-status\"\n                  [class]=\"\n                    'status-' +\n                    dispatchStatus\n                      ?.toLowerCase()\n                      ?.replaceAll(' ', '')\n                      ?.replaceAll('.', '')\n                  \"\n                >\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block blue\">D</p>\n                    <p class=\"status-block green\">L</p>\n                  }\n                  {{ dispatchStatus }}\n                  @if (dispatchStatus?.toLowerCase() === \"repair\") {\n                    <p class=\"status-block green\">P</p>\n                    <p class=\"status-block orange\">D</p>\n                  }\n                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\n                    <p class=\"status-block\">\n                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\n                    </p>\n                  }\n                </div>\n                <p class=\"dispatch-separator\">|</p>\n              }\n              <p class=\"dispatch-load-count\">\n                {{ trailerOption.pendingLoadsCount }}\n              </p>\n              <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\n            </div>\n            <div class=\"end-item-base\">\n              @if (\n                trailerOption.location?.city &&\n                trailerOption.location?.stateShortName\n              ) {\n                <p>\n                  {{ trailerOption.location?.city }},\n                  {{ trailerOption.location?.stateShortName }}\n                </p>\n              }\n            </div>\n          </div>\n        </button>\n      }\n    }\n  } @else {\n    <p class=\"dropdown-item no-results\">No results</p>\n  }\n</ng-template>\n\n<ng-template #tollRef>\n  @if (dropdownOptions().length) {\n    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\n      @let tollOption = cast(toll, \"tollOption\")!;\n      @let isGroupFocused =\n        groupedNavigationState?.groupIndex === groupIndex &&\n        groupedNavigationState?.optionIndex === 0;\n      <button\n        tabindex=\"-1\"\n        class=\"dropdown-item group-item pe-none\"\n        [class]=\"{\n          unfolded: tollOption.tollTransponders?.length || 0 > 0,\n          focused: isGroupFocused,\n        }\"\n      >\n        <p>\n          {{ tollOption.groupName }}\n        </p>\n      </button>\n      @let tollTransponders = tollOption.tollTransponders || [];\n      @for (\n        tollTransponder of tollTransponders;\n        track tollTransponder.id;\n        let optionIndex = $index\n      ) {\n        @let isOptionFocused =\n          groupedNavigationState?.groupIndex === groupIndex &&\n          groupedNavigationState?.optionIndex === optionIndex + 1;\n        <!-- +1 since optionIndex is 0 for the group item header -->\n        <button\n          class=\"dropdown-item\"\n          (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<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!.availableCredit || 0) < 0) {\n        <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\n      }\n      <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\n      <div class=\"selected-end-item\">\n        @if (!brokerOption!.creditLimit) {\n          <p>Unlimited</p>\n        } @else {\n          <p>\n            {{ brokerOption!.availableCredit || 0 | currency }}\n          </p>\n          <div\n            class=\"progress-bar\"\n            [style.--progress]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).activePercentageOfPaid + '%'\n            \"\n            [class]=\"\n              (\n                brokerOption!\n                | brokerProgress: brokerOption!.dnu || brokerOption!.ban\n              ).status\n            \"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedContactRef>\n  @let contactOption = cast(selectedOption(), \"contact\");\n  @if (contactOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ contactOption?.phone }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedShipperRef>\n  @let shipperOption = cast(selectedOption(), \"shipper\");\n  @if (shipperOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\n      <div class=\"selected-end-item\">\n        <p>{{ shipperOption?.address?.address }}</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedOwnerRef>\n  @let ownerOption = cast(selectedOption(), \"owner\");\n  @if (ownerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\n      <p class=\"\">{{ ownerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedFuelcardRef>\n  @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\n  @if (fuelcardOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"fuelcard-number\">\n        {{ fuelcardOption?.number }}\n      </p>\n      <p class=\"fuelcard-brand\">\n        {{ fuelcardOption?.brand }}\n      </p>\n      <p class=\"\">\n        {{ fuelcardOption?.account }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedBankRef>\n  @let bankOption = cast(selectedOption(), \"bank\");\n  @if (bankOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (bankOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedProviderRef>\n  @let providerOption = cast(selectedOption(), \"provider\");\n  @if (providerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon full-size\"\n        [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\n      ></svg-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedMakeRef>\n  @let makeOption = cast(selectedOption(), \"make\");\n  @if (makeOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      @if (makeOption?.logoName) {\n        <svg-icon\n          class=\"option-icon full-size\"\n          [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\n        ></svg-icon>\n      } @else {\n        <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedStateRef>\n  @let stateOption = cast(selectedOption(), \"state\");\n  @if (stateOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"\n          'cai-' +\n          stateOption?.countryType?.name?.toLowerCase() +\n          '-' +\n          stateOption?.stateShortName?.toLowerCase()\n        \"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ stateOption?.stateShortName }}\n        {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedDispatcherRef>\n  @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\n  @if (dispatcherOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <cai-avatar\n        [driver]=\"{\n          id: dispatcherOption?.id || 0,\n          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\n          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\n          avatarFile: dispatcherOption?.avatarFile,\n          colorFlag: dispatcherOption?.colorFlag,\n        }\"\n        [rounded]=\"!config().squareAvatar\"\n      ></cai-avatar>\n      <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTruckRef>\n  @let truckOption = cast(selectedOption(), \"truckOption\");\n  @if (truckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"truckOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTrailerRef>\n  @let trailerOption = cast(selectedOption(), \"trailerOption\");\n  @if (trailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"trailerOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedHazardousRef>\n  @let hazardousOption = cast(selectedOption(), \"hazardous\");\n  @if (hazardousOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"hazard-icon\"\n        [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\n        {{ hazardousOption?.description }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedPmRef>\n  @let pmOption = cast(selectedOption(), \"pmOption\");\n  @if (pmOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon\"\n        [name]=\"pmOption?.title | remapPmIcons\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ pmOption?.title }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedColorRef>\n  @let colorOption = cast(selectedOption(), \"colorOption\");\n  @if (colorOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <svg-icon\n        class=\"option-icon cai-color\"\n        [name]=\"'cai-color'\"\n        [style.--color]=\"colorOption?.code\"\n        [style.--hover-color]=\"colorOption?.hoverCode\"\n      ></svg-icon>\n      <p class=\"dropdown-selected-content\">\n        {{ colorOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedTollRef>\n  @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\n  @if (tollOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <p class=\"dropdown-selected-content\">\n        {{ tollOption?.name }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitDriverRef>\n  @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\n  @if (splitDriverOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem\">\n          <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\n          <p class=\"driver-name\">\n            {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\n          </p>\n        </div>\n      </div>\n\n      <p class=\"selected-end-item\">\n        {{ splitDriverOption.payTypeValue }}\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTruckRef>\n  @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\n  @if (splitTruckOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem trailer-item\">\n          <svg-icon\n            class=\"trailer-icon\"\n            [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"trailer-number\">\n            {{ splitTruckOption!.truckNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTruckOption!.location?.city &&\n          splitTruckOption!.location?.stateShortName\n        ) {\n          {{ splitTruckOption!.location?.city }},\n          {{ splitTruckOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectedSplitTrailerRef>\n  @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\n  @if (splitTrailerOption && !inputRef.value) {\n    <div class=\"dropdown-selected\">\n      <div class=\"dropdown-selected-content\">\n        <div class=\"dropdown-subitem truck-item\">\n          <svg-icon\n            class=\"truck-icon\"\n            [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\n          ></svg-icon>\n          <p class=\"truck-number\">\n            {{ splitTrailerOption!.trailerNumber }}\n          </p>\n        </div>\n      </div>\n      <p class=\"selected-end-item\">\n        @if (\n          splitTrailerOption!.location?.city &&\n          splitTrailerOption!.location?.stateShortName\n        ) {\n          {{ splitTrailerOption!.location?.city }},\n          {{ splitTrailerOption!.location?.stateShortName }}\n        }\n      </p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #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) .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 .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}@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}.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}.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-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label),.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}.max-w-280{max-width:280px}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -4622,6 +4600,14 @@ const DEFAULT_DUAL_DROP_ZONES = {
     },
 };
 
+const DROP_ZONE_CARD_SLIDER = {
+    ITEM_SIZE_PX: 194,
+    GAP_PX: 4,
+    PADDING_Y_PX: 4,
+    MAX_VISIBLE_COUNT: 3,
+};
+const DROP_ZONE_CARD_SLIDER_ITEM_WITH_GAP_PX = DROP_ZONE_CARD_SLIDER.ITEM_SIZE_PX + DROP_ZONE_CARD_SLIDER.GAP_PX;
+
 var DropZoneVariant;
 (function (DropZoneVariant) {
     DropZoneVariant["DOCUMENT"] = "document";
@@ -5174,6 +5160,7 @@ class DropZoneComponent {
         'mov',
         'mp4',
     ], ...(ngDevMode ? [{ debugName: "fileTypes" }] : []));
+    isCardSlider = input(false, ...(ngDevMode ? [{ debugName: "isCardSlider" }] : []));
     isCoverDetails = input(false, ...(ngDevMode ? [{ debugName: "isCoverDetails" }] : []));
     isDetailsSlider = input(false, ...(ngDevMode ? [{ debugName: "isDetailsSlider" }] : []));
     isDocumentsMode = input(false, ...(ngDevMode ? [{ debugName: "isDocumentsMode" }] : []));
@@ -5274,10 +5261,13 @@ class DropZoneComponent {
             return 'translateX(0)';
         if (this.isDetailsSlider())
             return `translateX(${this.carouselIndex() * -100}%)`;
-        if (this.isDrawerMode()) {
-            const cardWidthWithGap = 198; // 194px width + 4px gap
+        if (this.isCardSlider() || this.isDrawerMode()) {
+            const itemSize = DROP_ZONE_CARD_SLIDER.ITEM_SIZE_PX;
+            const gap = DROP_ZONE_CARD_SLIDER.GAP_PX;
+            const cardWidthWithGap = DROP_ZONE_CARD_SLIDER_ITEM_WITH_GAP_PX;
             const containerWidth = this.drawerViewportWidth();
-            const contentWidth = this.docs().length * cardWidthWithGap;
+            const docCount = this.docs().length;
+            const contentWidth = docCount === 0 ? 0 : docCount * itemSize + (docCount - 1) * gap;
             if (containerWidth <= 0 || contentWidth <= containerWidth)
                 return 'translateX(0)';
             const maxTranslate = containerWidth - contentWidth;
@@ -5297,12 +5287,18 @@ class DropZoneComponent {
     carouselVisibleCount = computed(() => {
         if (this.isDetailsSlider())
             return 1;
-        if (this.isDrawerMode()) {
+        if (this.isCardSlider() || this.isDrawerMode()) {
             const width = this.drawerViewportWidth();
-            return width <= 0 ? 1 : Math.max(1, Math.floor((width + 4) / 198));
+            const fitted = width <= 0
+                ? 1
+                : Math.max(1, Math.floor((width + DROP_ZONE_CARD_SLIDER.GAP_PX) / DROP_ZONE_CARD_SLIDER_ITEM_WITH_GAP_PX));
+            return this.isCardSlider()
+                ? Math.min(fitted, DROP_ZONE_CARD_SLIDER.MAX_VISIBLE_COUNT)
+                : fitted;
         }
         return this.size() === '480px' ? 2 : 3;
     }, ...(ngDevMode ? [{ debugName: "carouselVisibleCount" }] : []));
+    hasCarouselOverflow = computed(() => this.docs().length > this.carouselVisibleCount(), ...(ngDevMode ? [{ debugName: "hasCarouselOverflow" }] : []));
     isCarouselAtEnd = computed(() => {
         const maxIndex = Math.max(0, this.docs().length - this.carouselVisibleCount());
         return this.carouselIndex() >= maxIndex;
@@ -5330,7 +5326,9 @@ class DropZoneComponent {
         });
     }
     syncDropZoneSizeLock() {
-        DropZoneSizeLockHelper.watch(this.dropZoneSizeLockState, this.isDrawerMode() ? null : (this.containerRef()?.nativeElement ?? null), (size) => this.dropzoneDimensionsLock.set(size));
+        DropZoneSizeLockHelper.watch(this.dropZoneSizeLockState, this.isDrawerMode() || this.isCardSlider()
+            ? null
+            : (this.containerRef()?.nativeElement ?? null), (size) => this.dropzoneDimensionsLock.set(size));
     }
     clampDrawerIndex() {
         const maxStart = Math.max(0, this.docs().length - this.carouselVisibleCount());
@@ -5338,7 +5336,7 @@ class DropZoneComponent {
             this.carouselIndex.set(maxStart);
     }
     setDrawerRo() {
-        if (!this.isDrawerMode()) {
+        if (!this.isDrawerMode() && !this.isCardSlider()) {
             this.clearDrawerRo();
             this.drawerEl = null;
             return;
@@ -6153,8 +6151,11 @@ class DropZoneComponent {
         if (this.docs().length === 0) {
             this.unsupported.set(false);
         }
+        const inputEl = this.inputRef()?.nativeElement;
         if (this.docs().length < this.maxCountFiles()) {
-            this.inputRef().nativeElement.disabled = false;
+            if (inputEl) {
+                inputEl.disabled = false;
+            }
             this.maxCountReached.set(false);
         }
         if (this.variant() === this.dropZoneVariant.COVER) {
@@ -6167,13 +6168,15 @@ class DropZoneComponent {
         if (this.variant() === this.dropZoneVariant.LOGO) {
             this.logoUrl.set('');
         }
-        this.inputRef().nativeElement.value = '';
+        if (inputEl) {
+            inputEl.value = '';
+        }
     }
     downloadAllFiles() {
         DropZoneDocumentsHelper.onDownloadAllFiles(this.docs());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DropZoneComponent, isStandalone: true, selector: "cai-drop-zone", inputs: { avatarColor: { classPropertyName: "avatarColor", publicName: "avatarColor", isSignal: true, isRequired: false, transformFunction: null }, crop: { classPropertyName: "crop", publicName: "crop", isSignal: true, isRequired: false, transformFunction: null }, deletedFileIds: { classPropertyName: "deletedFileIds", publicName: "deletedFileIds", isSignal: true, isRequired: false, transformFunction: null }, documentsDropZoneOpen: { classPropertyName: "documentsDropZoneOpen", publicName: "documentsDropZoneOpen", isSignal: true, isRequired: false, transformFunction: null }, documentTags: { classPropertyName: "documentTags", publicName: "documentTags", isSignal: true, isRequired: false, transformFunction: null }, dualDropZones: { classPropertyName: "dualDropZones", publicName: "dualDropZones", isSignal: true, isRequired: false, transformFunction: null }, excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null }, isCoverDetails: { classPropertyName: "isCoverDetails", publicName: "isCoverDetails", isSignal: true, isRequired: false, transformFunction: null }, isDetailsSlider: { classPropertyName: "isDetailsSlider", publicName: "isDetailsSlider", isSignal: true, isRequired: false, transformFunction: null }, isDocumentsMode: { classPropertyName: "isDocumentsMode", publicName: "isDocumentsMode", isSignal: true, isRequired: false, transformFunction: null }, isDrawerMode: { classPropertyName: "isDrawerMode", publicName: "isDrawerMode", isSignal: true, isRequired: false, transformFunction: null }, isDualDropZone: { classPropertyName: "isDualDropZone", publicName: "isDualDropZone", isSignal: true, isRequired: false, transformFunction: null }, maxCountFiles: { classPropertyName: "maxCountFiles", publicName: "maxCountFiles", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCropPendingChange: "onCropPendingChange", onDeletedFileIds: "onDeletedFileIds", onDocsChange: "onDocsChange", onDocumentDropZoneOpenChange: "onDocumentDropZoneOpenChange", onDocumentFileNameChange: "onDocumentFileNameChange", onDocumentPreviewClick: "onDocumentPreviewClick", onDualDropChange: "onDualDropChange" }, host: { listeners: { "document:dragenter": "onDocumentDragEnter($event)", "document:dragover": "onDocumentDragOver($event)", "document:dragleave": "onWindowDragLeave($event)", "document:drop": "onDocumentDrop($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }, { propertyName: "cropper", first: true, predicate: ["cropper"], descendants: true, isSignal: true }, { propertyName: "docsViewport", first: true, predicate: ["docsViewport"], descendants: true, isSignal: true }, { propertyName: "dropZoneContainer", first: true, predicate: ["dropZoneContainer"], descendants: true, isSignal: true }, { propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let mediaVariant = variant() === dropZoneVariant.MEDIA;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl() !== \"\";\n@let profilePreview = profileUrl() !== \"\"; @let logoPreview = !!logoUrl();\n@let smallSize = size() === \"480px\";\n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {\n  <div class=\"documents-drag-overlay\"></div>\n}\n\n@if (dragMode() && !isDrawerMode()) {\n  <div\n    class=\"drop-zone-dimensions-lock\"\n    [style.--drag-lock-width.px]=\"dropzoneDimensionsLock().width\"\n    [style.--drag-lock-height.px]=\"dropzoneDimensionsLock().height\"\n  ></div>\n}\n\n<div\n  #containerRef\n  class=\"container\"\n  [class]=\"{\n    'picture-container': profileVariant || coverVariant,\n    smallContainer: smallSize,\n    largeContainer: largeSize,\n    dragMode: dragMode() && !isDocumentsMode(),\n    dragModeDocuments: dragMode() && isDocumentsMode(),\n    'dual-drop-mode': isDualDragActive(),\n    'dual-drop-focus-left':\n      isDualDragActive() && activeDualTarget() === dualDropTarget.LEFT,\n    'dual-drop-focus-right':\n      isDualDragActive() && activeDualTarget() === dualDropTarget.RIGHT,\n    onDragover: onDragover(),\n    logoVar: logoVariant,\n    hasCropper: isCropperReady(),\n    'is-details-slider': isDetailsSlider(),\n    'is-drawer-mode': isDrawerMode(),\n    isCoverDetails: isCoverDetails(),\n    'is-documents-mode': isDocumentsMode(),\n  }\"\n>\n  @if (coverVariant && coverPreview) {\n    <div class=\"cover-container\">\n      <img [src]=\"coverUrl()\" class=\"cover-image\" draggable=\"false\" />\n    </div>\n  }\n  @if (profileVariant) {\n    @if (!profilePreview) {\n      <div class=\"avatar\">\n        <cai-avatar\n          [driver]=\"driver()\"\n          [size]=\"160\"\n          [rounded]=\"rounded()\"\n        ></cai-avatar>\n      </div>\n    } @else {\n      <div class=\"profile-container\">\n        <img\n          [class]=\"rounded() ? 'profile-rounded-image' : 'profile-square-image'\"\n          [src]=\"profileUrl()\"\n          draggable=\"false\"\n        />\n      </div>\n    }\n  }\n  @if (logoVariant && logoPreview) {\n    <div class=\"logo-container\" [class.has-logo]=\"!!logoUrl()\">\n      <img class=\"logo-image\" [src]=\"logoUrl()\" draggable=\"false\" />\n    </div>\n  }\n  <!--Image Cropper-->\n  @if (cropFile && showCrop) {\n    @if (!isCropperReady()) {\n      <div class=\"cropper-loader\">\n        <div class=\"spinner\"></div>\n      </div>\n    }\n    <div class=\"cropper-overlay\">\n      <image-cropper\n        #cropper\n        class=\"img-cropper\"\n        [output]=\"'base64'\"\n        [class.logoBorder]=\"logoVariant\"\n        [class.snapback-animate]=\"isSnapbackAnimating()\"\n        [roundCropper]=\"roundedBorder ? true : false\"\n        [hideResizeSquares]=\"true\"\n        [allowMoveImage]=\"true\"\n        [transform]=\"transform()\"\n        (transformChange)=\"onTransformChange($event)\"\n        format=\"png\"\n        [aspectRatio]=\"cropAspectRatio()\"\n        [resizeToWidth]=\"cropWidth()\"\n        [resizeToHeight]=\"cropHeight()\"\n        [containWithinAspectRatio]=\"true\"\n        [imageChangedEvent]=\"imageChangedEvent()\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded($event)\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      @if (isCropperReady()) {\n        <div class=\"lower-part\">\n          <div class=\"range\">\n            <input\n              #inputRange\n              type=\"range\"\n              class=\"custom-range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"0.1\"\n              [value]=\"zoomValue()\"\n              (input)=\"onZoomChange($event)\"\n            />\n          </div>\n          <div class=\"cropper-buttons\">\n            <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n            <button class=\"submit-button\" (click)=\"submitCrop()\">Crop</button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n  <!-- Drop Zone -->\n  @if (!isDocumentsMode() || documentsDropZoneOpen()) {\n    <div\n      #dropZoneContainer\n      class=\"drop-zone-container\"\n      [class.has-logo]=\"logoVariant && !!logoUrl()\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      [class]=\"{\n        'more-docs': docCount >= 3 && largeSize,\n        'small-more-docs': docCount >= 2 && smallSize,\n        'max-reached-drop-design':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          documentVariant,\n        'max-reached-more-doc':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          documentVariant,\n        'max-reached-more-media':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          mediaVariant,\n        'invalid-file-size': invalidFileSize(),\n        unsupported: unsupported() || invalidFileSize(),\n        smallView: this.smallView() && !dragMode(),\n      }\"\n    >\n      <!-- Drop Zone -->\n      @if (isDualDragActive()) {\n        @for (target of dualTargets; track target) {\n          @let panel = dualDropZones()[target];\n          <div\n            class=\"drop-zone dual-drop-zone-panel\"\n            [class.dual-drop-zone-left]=\"target === dualDropTarget.LEFT\"\n            [class.dual-drop-zone-right]=\"target === dualDropTarget.RIGHT\"\n            [class.active]=\"activeDualTarget() === target\"\n            (drop)=\"onDualDrop($event, target)\"\n          >\n            @if (panel.title) {\n              <div class=\"dual-drop-zone-title\">{{ panel.title }}</div>\n            }\n            <div class=\"drag-icons-container\">\n              @if (isDocumentsMode()) {\n                <svg-icon\n                  name=\"cai-drop-zone-focus\"\n                  class=\"illustration drag-icon-document\"\n                ></svg-icon>\n              } @else {\n                <ng-lottie\n                  [options]=\"{\n                    path:\n                      (target === dualDropTarget.LEFT\n                        ? dropZoneVariant.PROFILE\n                        : variant()\n                      ) | dropZoneAnimation,\n                    loop: false,\n                    autoplay: false,\n                  }\"\n                  (animationCreated)=\"animationCreated($event, target)\"\n                ></ng-lottie>\n              }\n            </div>\n            <div class=\"drop-zone-focus-text\">\n              <div class=\"heading\">\n                {{\n                  activeDualTarget() === target\n                    ? panel.dropLabel\n                    : panel.dragLabel\n                }}\n              </div>\n              <div class=\"description\">{{ panel.description }}</div>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n          @if (dragMode()) {\n            <div class=\"drag-icons-container\">\n              @if (isDocumentsMode()) {\n                <svg-icon\n                  name=\"cai-drop-zone-focus\"\n                  class=\"illustration drag-icon-document\"\n                ></svg-icon>\n              } @else {\n                <!-- Animation -->\n                <ng-lottie\n                  [options]=\"{\n                    path: variant() | dropZoneAnimation,\n                    loop: false,\n                    autoplay: false,\n                  }\"\n                  (animationCreated)=\"animationCreated($event)\"\n                ></ng-lottie>\n              }\n            </div>\n            <div class=\"drop-zone-focus-text\">\n              @if (isDocumentsMode()) {\n                <p class=\"heading\">DRAG FILES HERE</p>\n              } @else if (documentVariant || mediaVariant) {\n                <p class=\"heading\">\n                  {{ onDragover() ? \"DROP FILES HERE\" : \"DRAG FILES HERE\" }}\n                </p>\n              } @else {\n                <p class=\"heading\">\n                  {{ onDragover() ? \"DROP IMAGE HERE\" : \"DRAG IMAGE HERE\" }}\n                </p>\n              }\n            </div>\n          } @else {\n            @let svgIcon = variant() | dropZoneAnimation: true;\n            <svg-icon [name]=\"svgIcon\" class=\"illustration\"></svg-icon>\n            @if (\n              (countFiles <= this.docs().length || maxCountReached()) &&\n              documentVariant\n            ) {\n              <div class=\"drop-zone-text\">\n                <p class=\"heading\">\n                  <span class=\"line\">MAX COUNT</span>\n                  <span class=\"line\">REACHED</span>\n                </p>\n                <p class=\"subtext\">\n                  <span class=\"line\">{{ countFiles }} FILES </span>\n                  <span class=\"line\">IMPORTED</span>\n                </p>\n              </div>\n            } @else {\n              <div class=\"drop-zone-text\">\n                <p class=\"heading\">\n                  @if (documentVariant || mediaVariant) {\n                    DRAG FILES\n                    @if (docCount < 1 || isDocumentsMode()) {\n                      <span>HERE</span>\n                    }\n                  } @else if (profileVariant && roundedBorder) {\n                    DRAG IMAGE\n                  } @else {\n                    DRAG IMAGE HERE\n                  }\n                </p>\n                @if (!coverPreview && !profilePreview) {\n                  <p class=\"subtext\">OR CLICK TO ADD</p>\n                }\n                @if (coverPreview || profilePreview) {\n                  <p class=\"subtext\">OR CLICK TO REPLACE</p>\n                }\n                @if (mediaVariant) {\n                  <p class=\"media-subtext\">\n                    max file size {{ maxFileSize() }}mb\n                  </p>\n                }\n              </div>\n              @if (isDocumentsMode()) {\n                <button\n                  class=\"cancel-button-documents\"\n                  ngbTooltip=\"Cancel\"\n                  [placement]=\"'bottom'\"\n                  container=\"body\"\n                  triggers=\"mouseenter:mouseleave\"\n                  tooltipClass=\"tooltip tooltip-m-b-2\"\n                >\n                  <svg-icon\n                    name=\"cai-cancel\"\n                    class=\"cancel-icon\"\n                    (click)=\"onCancel($event)\"\n                  ></svg-icon>\n                </button>\n              }\n            }\n          }\n        </div>\n      }\n\n      <input\n        type=\"file\"\n        aria-hidden=\"true\"\n        multiple\n        class=\"drop-zone-input\"\n        #inputRef\n        (input)=\"onInput($event)\"\n        (change)=\"fileChangeEvent($event)\"\n      />\n\n      <!-- Drop Zone Error -->\n      <div class=\"drop-zone-error\">\n        @if (invalidFileSize()) {\n          <div class=\"drop-zone-text\">\n            <p class=\"heading invalid\">INVALID FILE SIZE</p>\n            <p class=\"subtext\">MAX {{ maxFileSize() }} MB</p>\n          </div>\n        } @else {\n          <div class=\"drop-zone-text\">\n            <p class=\"heading invalid\">INVALID FILE TYPE</p>\n            <p class=\"subtext\">SUPPORTED FORMATS</p>\n          </div>\n          <div class=\"file-types\">\n            @for (type of supportedFileTypes(); track $index) {\n              <p\n                class=\"badge\"\n                [class]=\"{\n                  pdf: type === 'pdf',\n                  video: ['avi', 'mp4', 'mov'].includes(type),\n                  image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),\n                }\"\n              >\n                {{ type }}\n              </p>\n            }\n          </div>\n        }\n        <button class=\"cancel-button\">\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"cancel-icon\"\n            (click)=\"cancel()\"\n          ></svg-icon>\n        </button>\n      </div>\n    </div>\n  }\n  @if (isLoadingSkeleton() && skeletonCount() > 0) {\n    <ng-container *ngTemplateOutlet=\"skeletonTemplate\"></ng-container>\n  } @else {\n    <!-- Carousel -->\n    @if (docCount > 0 && (documentVariant || mediaVariant)) {\n      <div #docsViewport class=\"docs\">\n        <div\n          class=\"doc-container\"\n          [class.documents-container-grid]=\"isDocumentsMode()\"\n          [style.transform]=\"isDocumentsMode() ? '' : carouselTransform()\"\n          [style.--carousel-index]=\"isDocumentsMode() ? null : carouselIndex()\"\n        >\n          @for (doc of docs(); track doc.uid) {\n            <cai-document-preview\n              [class.doc-visible]=\"\n                isDetailsSlider() && $index === carouselIndex()\n              \"\n              [class.doc-hidden]=\"\n                isDetailsSlider() && $index !== carouselIndex()\n              \"\n              class=\"doc\"\n              [file]=\"doc\"\n              [tags]=\"documentTags()\"\n              [searchText]=\"searchText()\"\n              [cdlDetailsMode]=\"isDetailsSlider()\"\n              [multipleDetailsDocs]=\"isDetailsSlider() && docCount > 1\"\n              [maxAspectRatio]=\"\n                isDetailsSlider() && docCount > 1\n                  ? maxDetailsAspectRatio()\n                  : null\n              \"\n              [drawerMode]=\"isDrawerMode()\"\n              [isCoverDetails]=\"isCoverDetails()\"\n              [viewMode]=\"isDocumentsMode() ? 'large' : 'small'\"\n              (onDelete)=\"handleDelete($event)\"\n              (onDownload)=\"handleDownload($event)\"\n              (onTagChange)=\"handleTagChange($event)\"\n              (onFileNameChange)=\"handleFileNameChange($event)\"\n              (onDocumentPreviewClick)=\"handleDocumentPreviewClick($event)\"\n              (aspectRatioChange)=\"onDocAspectRatioChange($event)\"\n            ></cai-document-preview>\n          }\n        </div>\n        @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n          <button\n            class=\"carousel-button carousel-left\"\n            type=\"button\"\n            (click)=\"carouselLeft()\"\n            [disabled]=\"carouselIndex() === 0\"\n            [style.opacity]=\"carouselIndex() === 0 ? '0' : '1'\"\n          >\n            <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n          </button>\n          <button\n            class=\"carousel-button carousel-right\"\n            type=\"button\"\n            (click)=\"carouselRight()\"\n            [disabled]=\"isCarouselAtEnd()\"\n            [style.opacity]=\"isCarouselAtEnd() ? '0' : '1'\"\n          >\n            <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n          </button>\n        }\n        @if (isDetailsSlider() && docCount > 1) {\n          <div class=\"sliders\">\n            @for (doc of docs(); track $index) {\n              <div\n                class=\"slider-item\"\n                (click)=\"carouselIndex.set($index)\"\n                [class.active]=\"$index === carouselIndex()\"\n              ></div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n<!-- Skeleton Template -->\n\n<ng-template #skeletonTemplate>\n  <div\n    class=\"skeleton-container\"\n    [ngClass]=\"{\n      'documents-container-grid': isDocumentsMode(),\n      'drawer-position': isDrawerMode(),\n    }\"\n  >\n    @for (item of skeletonItems(); track $index) {\n      <div class=\"skeleton-item\">\n        <div class=\"skeleton-bar\"></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".container.is-documents-mode{width:100%!important;max-width:100%!important}.container.is-documents-mode .drop-zone-container .drop-zone{width:100%!important}.documents-drag-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0003;z-index:10}.is-documents-mode{display:flex;flex-direction:column;gap:0!important;width:100%!important;height:100%!important}.is-documents-mode .drop-zone-container{display:flex;margin-bottom:4px;background-color:#f7f7f7;z-index:20}.is-documents-mode .drop-zone-container .drop-zone{width:100%;height:120px!important;background-color:transparent;outline-color:#dadada;transition:background-color .2s ease-in-out}.is-documents-mode .drop-zone-container .drop-zone:hover{background-color:#fff!important}.is-documents-mode .drop-zone-container .drop-zone .illustration{width:80px;height:80px}.is-documents-mode .drop-zone-container .drop-zone .drop-zone-text .heading{padding-bottom:0}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents{z-index:1000;position:absolute;top:4px;right:4px;width:26px;height:26px;background-color:transparent;padding:4px}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents .cancel-icon{width:18px;height:18px;color:#919191}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents:hover .cancel-icon{color:#424242}.is-documents-mode .skeleton-container .skeleton-item{width:100%;height:auto;aspect-ratio:1/1;max-width:100%;min-width:302px;min-height:302px;position:relative;border-radius:3px;background-color:#fff}.is-documents-mode .skeleton-container .skeleton-item .skeleton-bar{position:absolute;bottom:8px;left:8px;right:8px;width:auto;height:26px;background-color:#91919133;animation:skeleton-pulse 1s ease-in-out infinite alternate;border-radius:2px}.is-documents-mode .docs{width:100%!important;position:static!important;overflow:visible!important}.is-documents-mode .docs .doc-container .doc{height:auto!important}.is-documents-mode .docs .carousel-button{display:none}.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:4px;justify-items:stretch;align-items:start}@media(min-width:801px)and (max-width:1001px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(2,minmax(302px,1fr))}}@media(min-width:1002px)and (max-width:1307px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(3,minmax(302px,1fr))}}@media(min-width:1308px)and (max-width:1613px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(4,minmax(302px,1fr))}}@media(min-width:1614px)and (max-width:1920px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(5,minmax(302px,1fr))}}@media(min-width:1921px)and (max-width:2227px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(6,minmax(302px,1fr))}}@media(min-width:2228px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}}@keyframes skeleton-pulse{0%{background-color:#91919133}to{background-color:#91919120}}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:100%}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .img-cropper.snapback-animate ::ng-deep .ngx-ic-source-image{transition:transform .22s cubic-bezier(.22,1,.36,1)}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range{width:100%;height:22px;display:flex;align-items:center}.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .range input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;--range-active-color: #6692f1;--range-progress: 50%;background:transparent;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .cancel-button:hover{background-color:#424242;color:#fff}.cropper-overlay .lower-part .cropper-buttons .cancel-button:active{background-color:#1d1d1d;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .submit-button:hover{background-color:#0b49d1;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button:active{background-color:#00179e;color:#fff}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(145,145,145,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.hasCropper{height:204px!important;position:relative}input[type=range]:hover{--range-active-color: $color-blue-500}input[type=range]:active{--range-active-color: $color-blue-700}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;background-color:#fff;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-image:url(/assets/carriera-intern/icons/interaction/cai-thumb.svg);background-repeat:no-repeat;background-position:center;background-size:14px 18px;border-radius:2px;transition:background-color .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-active-color) 0%,var(--range-active-color) var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%);height:6px;transition:background .3s ease-in-out}input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b73ed 0%,#3b73ed var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:active::-webkit-slider-runnable-track{background:linear-gradient(to right,#0b49d1 0%,#0b49d1 var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:hover::-webkit-slider-thumb{cursor:grab}input[type=range]:active::-webkit-slider-thumb{background-image:url(/assets/carriera-intern/icons/interaction/cai-thumb-active.svg);cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}p{margin-bottom:0}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.illustration{width:100px;height:100px}.container{display:flex;gap:6px;position:relative;padding-left:0!important;padding-right:0!important;margin:0!important}.container.picture-container{gap:8px}.container.smallContainer{width:456px!important}.container.largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.smallContainer .docs .doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.largeContainer .docs{max-width:460px!important}.largeContainer .docs .doc-container{display:flex;gap:8px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;cursor:pointer;transition:background-color .2s ease-in-out}.drop-zone:hover{background-color:#eee}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;padding-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .media-subtext{margin-top:4px;color:#919191;font-size:11px;line-height:14px;font-weight:500}.smallView{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.smallView .drop-zone .drop-zone-text .subtext{line-height:14px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.text-white-50{color:#fff}.text-white-100{color:#f7f7f7}.text-white-200{color:#eee}.text-white-300{color:#e5e5e5}.text-white-500{color:#dadada}.text-white-500\\/20{color:#dadada33}.text-white-500\\/40{color:#dadada66}.text-white-500\\/70{color:#dadadab3}.text-white-700{color:#ccc}.text-black-50{color:#aaa}.text-black-100{color:#919191}.text-black-200{color:#6c6c6c}.text-black-300{color:#424242}.text-black-500{color:#2f2f2f}.text-black-500\\/20{color:#2f2f2f33}.text-black-500\\/40{color:#2f2f2f66}.text-black-500\\/70{color:#2f2f2fb3}.text-black-700{color:#1d1d1d}.text-blue-50{color:#e9effd}.text-blue-100{color:#bed0f9}.text-blue-200{color:#92b1f5}.text-blue-300{color:#6692f1}.text-blue-500{color:#3b73ed}.text-blue-500\\/20{color:#3b73ed33}.text-blue-500\\/40{color:#3b73ed66}.text-blue-500\\/70{color:#3b73edb3}.text-blue-700{color:#0b49d1}.text-blue-900{color:#00179e}.text-red-50{color:#fbe9e9}.text-red-100{color:#f4bebe}.text-red-200{color:#ed9292}.text-red-300{color:#e66767}.text-red-500{color:#df3c3c}.text-red-500\\/20{color:#df3c3c33}.text-red-500\\/40{color:#df3c3c66}.text-red-500\\/70{color:#df3c3cb3}.text-red-700{color:#c20c0c}.text-green-50{color:#e7f4f3}.text-green-100{color:#b6dfdb}.text-green-200{color:#86c9c3}.text-green-300{color:#56b4ac}.text-green-500{color:#259f94}.text-green-500\\/20{color:#259f9433}.text-green-500\\/40{color:#259f9466}.text-green-500\\/70{color:#259f94b3}.text-green-700{color:#007a6e}.text-yellow-50{color:#fef4e8}.text-yellow-100{color:#fddeb9}.text-yellow-200{color:#fbc88b}.text-yellow-300{color:#fab15c}.text-yellow-500{color:#f89b2e}.text-yellow-500\\/20{color:#f89b2e33}.text-yellow-500\\/40{color:#f89b2e66}.text-yellow-500\\/70{color:#f89b2eb3}.text-yellow-700{color:#de7700}.text-purple-50{color:#f4ebfd}.text-purple-100{color:#dfc2f9}.text-purple-200{color:#c999f4}.text-purple-300{color:#b370f0}.text-purple-500{color:#9e47ec}.text-purple-500\\/20{color:#9e47ec33}.text-purple-500\\/40{color:#9e47ec66}.text-purple-500\\/70{color:#9e47ecb3}.text-purple-700{color:#7919d0}.text-orange-50{color:#ffefea}.text-orange-100{color:#ffcfc0}.text-orange-200{color:#ffb097}.text-orange-300{color:#ff906d}.text-orange-500{color:#ff7043}.text-orange-500\\/20{color:#ff704333}.text-orange-500\\/40{color:#ff704366}.text-orange-500\\/70{color:#ff7043b3}.text-orange-700{color:#e54715}.text-azure-50{color:#e5f7fc}.text-azure-100{color:#b2e6f7}.text-azure-200{color:#80d6f1}.text-azure-300{color:#4dc5eb}.text-azure-500{color:#1ab5e6}.text-azure-500\\/20{color:#1ab5e633}.text-azure-500\\/40{color:#1ab5e666}.text-azure-500\\/70{color:#1ab5e6b3}.text-azure-700{color:#0093c9}.text-gold-50{color:#faf3e6}.text-gold-100{color:#efdcb4}.text-gold-200{color:#e4c481}.text-gold-300{color:#daad4f}.text-gold-500{color:#cf961d}.text-gold-500\\/20{color:#cf961d33}.text-gold-500\\/40{color:#cf961d66}.text-gold-500\\/70{color:#cf961db3}.text-gold-700{color:#b07000}.text-brown-50{color:#f1ede9}.text-brown-100{color:#d6c9bd}.text-brown-200{color:#bca691}.text-brown-300{color:#a08266}.text-brown-500{color:#865e3a}.text-brown-500\\/20{color:#865e3a33}.text-brown-500\\/40{color:#865e3a66}.text-brown-500\\/70{color:#865e3ab3}.text-brown-700{color:#5f330a}.text-navy-50{color:#e7e7fa}.text-navy-100{color:#b7b6f1}.text-navy-200{color:#8785e8}.text-navy-300{color:#5755df}.text-navy-500{color:#2724d6}.text-navy-500\\/20{color:#2724d633}.text-navy-500\\/40{color:#2724d666}.text-navy-500\\/70{color:#2724d6b3}.text-navy-700{color:#0000b8}.text-lime-50{color:#ecf6e7}.text-lime-100{color:#c5e3b6}.text-lime-200{color:#9ed186}.text-lime-300{color:#77bf56}.text-lime-500{color:#50ac25}.text-lime-500\\/20{color:#50ac2533}.text-lime-500\\/40{color:#50ac2566}.text-lime-500\\/70{color:#50ac25b3}.text-lime-700{color:#238900}.text-magenta-50{color:#fbe9f1}.text-magenta-100{color:#f4bed6}.text-magenta-200{color:#ed93bb}.text-magenta-300{color:#e668a0}.text-magenta-500{color:#df3d85}.text-magenta-500\\/20{color:#df3d8533}.text-magenta-500\\/40{color:#df3d8566}.text-magenta-500\\/70{color:#df3d85b3}.text-magenta-700{color:#c10d5d}.bg-white-50{background-color:#fff}.bg-white-100{background-color:#f7f7f7}.bg-white-200{background-color:#eee}.bg-white-300{background-color:#e5e5e5}.bg-white-500{background-color:#dadada}.bg-white-500\\/20{background-color:#dadada33}.bg-white-500\\/40{background-color:#dadada66}.bg-white-500\\/70{background-color:#dadadab3}.bg-white-700{background-color:#ccc}.bg-black-50{background-color:#aaa}.bg-black-100{background-color:#919191}.bg-black-200{background-color:#6c6c6c}.bg-black-300{background-color:#424242}.bg-black-500{background-color:#2f2f2f}.bg-black-500\\/20{background-color:#2f2f2f33}.bg-black-500\\/40{background-color:#2f2f2f66}.bg-black-500\\/70{background-color:#2f2f2fb3}.bg-black-700{background-color:#1d1d1d}.bg-blue-50{background-color:#e9effd}.bg-blue-100{background-color:#bed0f9}.bg-blue-200{background-color:#92b1f5}.bg-blue-300{background-color:#6692f1}.bg-blue-500{background-color:#3b73ed}.bg-blue-500\\/20{background-color:#3b73ed33}.bg-blue-500\\/40{background-color:#3b73ed66}.bg-blue-500\\/70{background-color:#3b73edb3}.bg-blue-700{background-color:#0b49d1}.bg-blue-900{background-color:#00179e}.bg-red-50{background-color:#fbe9e9}.bg-red-100{background-color:#f4bebe}.bg-red-200{background-color:#ed9292}.bg-red-300{background-color:#e66767}.bg-red-500{background-color:#df3c3c}.bg-red-500\\/20{background-color:#df3c3c33}.bg-red-500\\/40{background-color:#df3c3c66}.bg-red-500\\/70{background-color:#df3c3cb3}.bg-red-700{background-color:#c20c0c}.bg-green-50{background-color:#e7f4f3}.bg-green-100{background-color:#b6dfdb}.bg-green-200{background-color:#86c9c3}.bg-green-300{background-color:#56b4ac}.bg-green-500{background-color:#259f94}.bg-green-500\\/20{background-color:#259f9433}.bg-green-500\\/40{background-color:#259f9466}.bg-green-500\\/70{background-color:#259f94b3}.bg-green-700{background-color:#007a6e}.bg-yellow-50{background-color:#fef4e8}.bg-yellow-100{background-color:#fddeb9}.bg-yellow-200{background-color:#fbc88b}.bg-yellow-300{background-color:#fab15c}.bg-yellow-500{background-color:#f89b2e}.bg-yellow-500\\/20{background-color:#f89b2e33}.bg-yellow-500\\/40{background-color:#f89b2e66}.bg-yellow-500\\/70{background-color:#f89b2eb3}.bg-yellow-700{background-color:#de7700}.bg-purple-50{background-color:#f4ebfd}.bg-purple-100{background-color:#dfc2f9}.bg-purple-200{background-color:#c999f4}.bg-purple-300{background-color:#b370f0}.bg-purple-500{background-color:#9e47ec}.bg-purple-500\\/20{background-color:#9e47ec33}.bg-purple-500\\/40{background-color:#9e47ec66}.bg-purple-500\\/70{background-color:#9e47ecb3}.bg-purple-700{background-color:#7919d0}.bg-orange-50{background-color:#ffefea}.bg-orange-100{background-color:#ffcfc0}.bg-orange-200{background-color:#ffb097}.bg-orange-300{background-color:#ff906d}.bg-orange-500{background-color:#ff7043}.bg-orange-500\\/20{background-color:#ff704333}.bg-orange-500\\/40{background-color:#ff704366}.bg-orange-500\\/70{background-color:#ff7043b3}.bg-orange-700{background-color:#e54715}.bg-azure-50{background-color:#e5f7fc}.bg-azure-100{background-color:#b2e6f7}.bg-azure-200{background-color:#80d6f1}.bg-azure-300{background-color:#4dc5eb}.bg-azure-500{background-color:#1ab5e6}.bg-azure-500\\/20{background-color:#1ab5e633}.bg-azure-500\\/40{background-color:#1ab5e666}.bg-azure-500\\/70{background-color:#1ab5e6b3}.bg-azure-700{background-color:#0093c9}.bg-gold-50{background-color:#faf3e6}.bg-gold-100{background-color:#efdcb4}.bg-gold-200{background-color:#e4c481}.bg-gold-300{background-color:#daad4f}.bg-gold-500{background-color:#cf961d}.bg-gold-500\\/20{background-color:#cf961d33}.bg-gold-500\\/40{background-color:#cf961d66}.bg-gold-500\\/70{background-color:#cf961db3}.bg-gold-700{background-color:#b07000}.bg-brown-50{background-color:#f1ede9}.bg-brown-100{background-color:#d6c9bd}.bg-brown-200{background-color:#bca691}.bg-brown-300{background-color:#a08266}.bg-brown-500{background-color:#865e3a}.bg-brown-500\\/20{background-color:#865e3a33}.bg-brown-500\\/40{background-color:#865e3a66}.bg-brown-500\\/70{background-color:#865e3ab3}.bg-brown-700{background-color:#5f330a}.bg-navy-50{background-color:#e7e7fa}.bg-navy-100{background-color:#b7b6f1}.bg-navy-200{background-color:#8785e8}.bg-navy-300{background-color:#5755df}.bg-navy-500{background-color:#2724d6}.bg-navy-500\\/20{background-color:#2724d633}.bg-navy-500\\/40{background-color:#2724d666}.bg-navy-500\\/70{background-color:#2724d6b3}.bg-navy-700{background-color:#0000b8}.bg-lime-50{background-color:#ecf6e7}.bg-lime-100{background-color:#c5e3b6}.bg-lime-200{background-color:#9ed186}.bg-lime-300{background-color:#77bf56}.bg-lime-500{background-color:#50ac25}.bg-lime-500\\/20{background-color:#50ac2533}.bg-lime-500\\/40{background-color:#50ac2566}.bg-lime-500\\/70{background-color:#50ac25b3}.bg-lime-700{background-color:#238900}.bg-magenta-50{background-color:#fbe9f1}.bg-magenta-100{background-color:#f4bed6}.bg-magenta-200{background-color:#ed93bb}.bg-magenta-300{background-color:#e668a0}.bg-magenta-500{background-color:#df3d85}.bg-magenta-500\\/20{background-color:#df3d8533}.bg-magenta-500\\/40{background-color:#df3d8566}.bg-magenta-500\\/70{background-color:#df3d85b3}.bg-magenta-700{background-color:#c10d5d}.border-white-50{border-color:#fff}.border-white-100{border-color:#f7f7f7}.border-white-200{border-color:#eee}.border-white-300{border-color:#e5e5e5}.border-white-500{border-color:#dadada}.border-white-500\\/20{border-color:#dadada33}.border-white-500\\/40{border-color:#dadada66}.border-white-500\\/70{border-color:#dadadab3}.border-white-700{border-color:#ccc}.border-black-50{border-color:#aaa}.border-black-100{border-color:#919191}.border-black-200{border-color:#6c6c6c}.border-black-300{border-color:#424242}.border-black-500{border-color:#2f2f2f}.border-black-500\\/20{border-color:#2f2f2f33}.border-black-500\\/40{border-color:#2f2f2f66}.border-black-500\\/70{border-color:#2f2f2fb3}.border-black-700{border-color:#1d1d1d}.border-blue-50{border-color:#e9effd}.border-blue-100{border-color:#bed0f9}.border-blue-200{border-color:#92b1f5}.border-blue-300{border-color:#6692f1}.border-blue-500{border-color:#3b73ed}.border-blue-500\\/20{border-color:#3b73ed33}.border-blue-500\\/40{border-color:#3b73ed66}.border-blue-500\\/70{border-color:#3b73edb3}.border-blue-700{border-color:#0b49d1}.border-blue-900{border-color:#00179e}.border-red-50{border-color:#fbe9e9}.border-red-100{border-color:#f4bebe}.border-red-200{border-color:#ed9292}.border-red-300{border-color:#e66767}.border-red-500{border-color:#df3c3c}.border-red-500\\/20{border-color:#df3c3c33}.border-red-500\\/40{border-color:#df3c3c66}.border-red-500\\/70{border-color:#df3c3cb3}.border-red-700{border-color:#c20c0c}.border-green-50{border-color:#e7f4f3}.border-green-100{border-color:#b6dfdb}.border-green-200{border-color:#86c9c3}.border-green-300{border-color:#56b4ac}.border-green-500{border-color:#259f94}.border-green-500\\/20{border-color:#259f9433}.border-green-500\\/40{border-color:#259f9466}.border-green-500\\/70{border-color:#259f94b3}.border-green-700{border-color:#007a6e}.border-yellow-50{border-color:#fef4e8}.border-yellow-100{border-color:#fddeb9}.border-yellow-200{border-color:#fbc88b}.border-yellow-300{border-color:#fab15c}.border-yellow-500{border-color:#f89b2e}.border-yellow-500\\/20{border-color:#f89b2e33}.border-yellow-500\\/40{border-color:#f89b2e66}.border-yellow-500\\/70{border-color:#f89b2eb3}.border-yellow-700{border-color:#de7700}.border-purple-50{border-color:#f4ebfd}.border-purple-100{border-color:#dfc2f9}.border-purple-200{border-color:#c999f4}.border-purple-300{border-color:#b370f0}.border-purple-500{border-color:#9e47ec}.border-purple-500\\/20{border-color:#9e47ec33}.border-purple-500\\/40{border-color:#9e47ec66}.border-purple-500\\/70{border-color:#9e47ecb3}.border-purple-700{border-color:#7919d0}.border-orange-50{border-color:#ffefea}.border-orange-100{border-color:#ffcfc0}.border-orange-200{border-color:#ffb097}.border-orange-300{border-color:#ff906d}.border-orange-500{border-color:#ff7043}.border-orange-500\\/20{border-color:#ff704333}.border-orange-500\\/40{border-color:#ff704366}.border-orange-500\\/70{border-color:#ff7043b3}.border-orange-700{border-color:#e54715}.border-azure-50{border-color:#e5f7fc}.border-azure-100{border-color:#b2e6f7}.border-azure-200{border-color:#80d6f1}.border-azure-300{border-color:#4dc5eb}.border-azure-500{border-color:#1ab5e6}.border-azure-500\\/20{border-color:#1ab5e633}.border-azure-500\\/40{border-color:#1ab5e666}.border-azure-500\\/70{border-color:#1ab5e6b3}.border-azure-700{border-color:#0093c9}.border-gold-50{border-color:#faf3e6}.border-gold-100{border-color:#efdcb4}.border-gold-200{border-color:#e4c481}.border-gold-300{border-color:#daad4f}.border-gold-500{border-color:#cf961d}.border-gold-500\\/20{border-color:#cf961d33}.border-gold-500\\/40{border-color:#cf961d66}.border-gold-500\\/70{border-color:#cf961db3}.border-gold-700{border-color:#b07000}.border-brown-50{border-color:#f1ede9}.border-brown-100{border-color:#d6c9bd}.border-brown-200{border-color:#bca691}.border-brown-300{border-color:#a08266}.border-brown-500{border-color:#865e3a}.border-brown-500\\/20{border-color:#865e3a33}.border-brown-500\\/40{border-color:#865e3a66}.border-brown-500\\/70{border-color:#865e3ab3}.border-brown-700{border-color:#5f330a}.border-navy-50{border-color:#e7e7fa}.border-navy-100{border-color:#b7b6f1}.border-navy-200{border-color:#8785e8}.border-navy-300{border-color:#5755df}.border-navy-500{border-color:#2724d6}.border-navy-500\\/20{border-color:#2724d633}.border-navy-500\\/40{border-color:#2724d666}.border-navy-500\\/70{border-color:#2724d6b3}.border-navy-700{border-color:#0000b8}.border-lime-50{border-color:#ecf6e7}.border-lime-100{border-color:#c5e3b6}.border-lime-200{border-color:#9ed186}.border-lime-300{border-color:#77bf56}.border-lime-500{border-color:#50ac25}.border-lime-500\\/20{border-color:#50ac2533}.border-lime-500\\/40{border-color:#50ac2566}.border-lime-500\\/70{border-color:#50ac25b3}.border-lime-700{border-color:#238900}.border-magenta-50{border-color:#fbe9f1}.border-magenta-100{border-color:#f4bed6}.border-magenta-200{border-color:#ed93bb}.border-magenta-300{border-color:#e668a0}.border-magenta-500{border-color:#df3d85}.border-magenta-500\\/20{border-color:#df3d8533}.border-magenta-500\\/40{border-color:#df3d8566}.border-magenta-500\\/70{border-color:#df3d85b3}.border-magenta-700{border-color:#c10d5d}.fill-white-50{fill:#fff}.fill-white-100{fill:#f7f7f7}.fill-white-200{fill:#eee}.fill-white-300{fill:#e5e5e5}.fill-white-500{fill:#dadada}.fill-white-500\\/20{fill:#dadada33}.fill-white-500\\/40{fill:#dadada66}.fill-white-500\\/70{fill:#dadadab3}.fill-white-700{fill:#ccc}.fill-black-50{fill:#aaa}.fill-black-100{fill:#919191}.fill-black-200{fill:#6c6c6c}.fill-black-300{fill:#424242}.fill-black-500{fill:#2f2f2f}.fill-black-500\\/20{fill:#2f2f2f33}.fill-black-500\\/40{fill:#2f2f2f66}.fill-black-500\\/70{fill:#2f2f2fb3}.fill-black-700{fill:#1d1d1d}.fill-blue-50{fill:#e9effd}.fill-blue-100{fill:#bed0f9}.fill-blue-200{fill:#92b1f5}.fill-blue-300{fill:#6692f1}.fill-blue-500{fill:#3b73ed}.fill-blue-500\\/20{fill:#3b73ed33}.fill-blue-500\\/40{fill:#3b73ed66}.fill-blue-500\\/70{fill:#3b73edb3}.fill-blue-700{fill:#0b49d1}.fill-blue-900{fill:#00179e}.fill-red-50{fill:#fbe9e9}.fill-red-100{fill:#f4bebe}.fill-red-200{fill:#ed9292}.fill-red-300{fill:#e66767}.fill-red-500{fill:#df3c3c}.fill-red-500\\/20{fill:#df3c3c33}.fill-red-500\\/40{fill:#df3c3c66}.fill-red-500\\/70{fill:#df3c3cb3}.fill-red-700{fill:#c20c0c}.fill-green-50{fill:#e7f4f3}.fill-green-100{fill:#b6dfdb}.fill-green-200{fill:#86c9c3}.fill-green-300{fill:#56b4ac}.fill-green-500{fill:#259f94}.fill-green-500\\/20{fill:#259f9433}.fill-green-500\\/40{fill:#259f9466}.fill-green-500\\/70{fill:#259f94b3}.fill-green-700{fill:#007a6e}.fill-yellow-50{fill:#fef4e8}.fill-yellow-100{fill:#fddeb9}.fill-yellow-200{fill:#fbc88b}.fill-yellow-300{fill:#fab15c}.fill-yellow-500{fill:#f89b2e}.fill-yellow-500\\/20{fill:#f89b2e33}.fill-yellow-500\\/40{fill:#f89b2e66}.fill-yellow-500\\/70{fill:#f89b2eb3}.fill-yellow-700{fill:#de7700}.fill-purple-50{fill:#f4ebfd}.fill-purple-100{fill:#dfc2f9}.fill-purple-200{fill:#c999f4}.fill-purple-300{fill:#b370f0}.fill-purple-500{fill:#9e47ec}.fill-purple-500\\/20{fill:#9e47ec33}.fill-purple-500\\/40{fill:#9e47ec66}.fill-purple-500\\/70{fill:#9e47ecb3}.fill-purple-700{fill:#7919d0}.fill-orange-50{fill:#ffefea}.fill-orange-100{fill:#ffcfc0}.fill-orange-200{fill:#ffb097}.fill-orange-300{fill:#ff906d}.fill-orange-500{fill:#ff7043}.fill-orange-500\\/20{fill:#ff704333}.fill-orange-500\\/40{fill:#ff704366}.fill-orange-500\\/70{fill:#ff7043b3}.fill-orange-700{fill:#e54715}.fill-azure-50{fill:#e5f7fc}.fill-azure-100{fill:#b2e6f7}.fill-azure-200{fill:#80d6f1}.fill-azure-300{fill:#4dc5eb}.fill-azure-500{fill:#1ab5e6}.fill-azure-500\\/20{fill:#1ab5e633}.fill-azure-500\\/40{fill:#1ab5e666}.fill-azure-500\\/70{fill:#1ab5e6b3}.fill-azure-700{fill:#0093c9}.fill-gold-50{fill:#faf3e6}.fill-gold-100{fill:#efdcb4}.fill-gold-200{fill:#e4c481}.fill-gold-300{fill:#daad4f}.fill-gold-500{fill:#cf961d}.fill-gold-500\\/20{fill:#cf961d33}.fill-gold-500\\/40{fill:#cf961d66}.fill-gold-500\\/70{fill:#cf961db3}.fill-gold-700{fill:#b07000}.fill-brown-50{fill:#f1ede9}.fill-brown-100{fill:#d6c9bd}.fill-brown-200{fill:#bca691}.fill-brown-300{fill:#a08266}.fill-brown-500{fill:#865e3a}.fill-brown-500\\/20{fill:#865e3a33}.fill-brown-500\\/40{fill:#865e3a66}.fill-brown-500\\/70{fill:#865e3ab3}.fill-brown-700{fill:#5f330a}.fill-navy-50{fill:#e7e7fa}.fill-navy-100{fill:#b7b6f1}.fill-navy-200{fill:#8785e8}.fill-navy-300{fill:#5755df}.fill-navy-500{fill:#2724d6}.fill-navy-500\\/20{fill:#2724d633}.fill-navy-500\\/40{fill:#2724d666}.fill-navy-500\\/70{fill:#2724d6b3}.fill-navy-700{fill:#0000b8}.fill-lime-50{fill:#ecf6e7}.fill-lime-100{fill:#c5e3b6}.fill-lime-200{fill:#9ed186}.fill-lime-300{fill:#77bf56}.fill-lime-500{fill:#50ac25}.fill-lime-500\\/20{fill:#50ac2533}.fill-lime-500\\/40{fill:#50ac2566}.fill-lime-500\\/70{fill:#50ac25b3}.fill-lime-700{fill:#238900}.fill-magenta-50{fill:#fbe9f1}.fill-magenta-100{fill:#f4bed6}.fill-magenta-200{fill:#ed93bb}.fill-magenta-300{fill:#e668a0}.fill-magenta-500{fill:#df3d85}.fill-magenta-500\\/20{fill:#df3d8533}.fill-magenta-500\\/40{fill:#df3d8566}.fill-magenta-500\\/70{fill:#df3d85b3}.fill-magenta-700{fill:#c10d5d}.stroke-white-50{stroke:#fff}.stroke-white-100{stroke:#f7f7f7}.stroke-white-200{stroke:#eee}.stroke-white-300{stroke:#e5e5e5}.stroke-white-500{stroke:#dadada}.stroke-white-500\\/20{stroke:#dadada33}.stroke-white-500\\/40{stroke:#dadada66}.stroke-white-500\\/70{stroke:#dadadab3}.stroke-white-700{stroke:#ccc}.stroke-black-50{stroke:#aaa}.stroke-black-100{stroke:#919191}.stroke-black-200{stroke:#6c6c6c}.stroke-black-300{stroke:#424242}.stroke-black-500{stroke:#2f2f2f}.stroke-black-500\\/20{stroke:#2f2f2f33}.stroke-black-500\\/40{stroke:#2f2f2f66}.stroke-black-500\\/70{stroke:#2f2f2fb3}.stroke-black-700{stroke:#1d1d1d}.stroke-blue-50{stroke:#e9effd}.stroke-blue-100{stroke:#bed0f9}.stroke-blue-200{stroke:#92b1f5}.stroke-blue-300{stroke:#6692f1}.stroke-blue-500{stroke:#3b73ed}.stroke-blue-500\\/20{stroke:#3b73ed33}.stroke-blue-500\\/40{stroke:#3b73ed66}.stroke-blue-500\\/70{stroke:#3b73edb3}.stroke-blue-700{stroke:#0b49d1}.stroke-blue-900{stroke:#00179e}.stroke-red-50{stroke:#fbe9e9}.stroke-red-100{stroke:#f4bebe}.stroke-red-200{stroke:#ed9292}.stroke-red-300{stroke:#e66767}.stroke-red-500{stroke:#df3c3c}.stroke-red-500\\/20{stroke:#df3c3c33}.stroke-red-500\\/40{stroke:#df3c3c66}.stroke-red-500\\/70{stroke:#df3c3cb3}.stroke-red-700{stroke:#c20c0c}.stroke-green-50{stroke:#e7f4f3}.stroke-green-100{stroke:#b6dfdb}.stroke-green-200{stroke:#86c9c3}.stroke-green-300{stroke:#56b4ac}.stroke-green-500{stroke:#259f94}.stroke-green-500\\/20{stroke:#259f9433}.stroke-green-500\\/40{stroke:#259f9466}.stroke-green-500\\/70{stroke:#259f94b3}.stroke-green-700{stroke:#007a6e}.stroke-yellow-50{stroke:#fef4e8}.stroke-yellow-100{stroke:#fddeb9}.stroke-yellow-200{stroke:#fbc88b}.stroke-yellow-300{stroke:#fab15c}.stroke-yellow-500{stroke:#f89b2e}.stroke-yellow-500\\/20{stroke:#f89b2e33}.stroke-yellow-500\\/40{stroke:#f89b2e66}.stroke-yellow-500\\/70{stroke:#f89b2eb3}.stroke-yellow-700{stroke:#de7700}.stroke-purple-50{stroke:#f4ebfd}.stroke-purple-100{stroke:#dfc2f9}.stroke-purple-200{stroke:#c999f4}.stroke-purple-300{stroke:#b370f0}.stroke-purple-500{stroke:#9e47ec}.stroke-purple-500\\/20{stroke:#9e47ec33}.stroke-purple-500\\/40{stroke:#9e47ec66}.stroke-purple-500\\/70{stroke:#9e47ecb3}.stroke-purple-700{stroke:#7919d0}.stroke-orange-50{stroke:#ffefea}.stroke-orange-100{stroke:#ffcfc0}.stroke-orange-200{stroke:#ffb097}.stroke-orange-300{stroke:#ff906d}.stroke-orange-500{stroke:#ff7043}.stroke-orange-500\\/20{stroke:#ff704333}.stroke-orange-500\\/40{stroke:#ff704366}.stroke-orange-500\\/70{stroke:#ff7043b3}.stroke-orange-700{stroke:#e54715}.stroke-azure-50{stroke:#e5f7fc}.stroke-azure-100{stroke:#b2e6f7}.stroke-azure-200{stroke:#80d6f1}.stroke-azure-300{stroke:#4dc5eb}.stroke-azure-500{stroke:#1ab5e6}.stroke-azure-500\\/20{stroke:#1ab5e633}.stroke-azure-500\\/40{stroke:#1ab5e666}.stroke-azure-500\\/70{stroke:#1ab5e6b3}.stroke-azure-700{stroke:#0093c9}.stroke-gold-50{stroke:#faf3e6}.stroke-gold-100{stroke:#efdcb4}.stroke-gold-200{stroke:#e4c481}.stroke-gold-300{stroke:#daad4f}.stroke-gold-500{stroke:#cf961d}.stroke-gold-500\\/20{stroke:#cf961d33}.stroke-gold-500\\/40{stroke:#cf961d66}.stroke-gold-500\\/70{stroke:#cf961db3}.stroke-gold-700{stroke:#b07000}.stroke-brown-50{stroke:#f1ede9}.stroke-brown-100{stroke:#d6c9bd}.stroke-brown-200{stroke:#bca691}.stroke-brown-300{stroke:#a08266}.stroke-brown-500{stroke:#865e3a}.stroke-brown-500\\/20{stroke:#865e3a33}.stroke-brown-500\\/40{stroke:#865e3a66}.stroke-brown-500\\/70{stroke:#865e3ab3}.stroke-brown-700{stroke:#5f330a}.stroke-navy-50{stroke:#e7e7fa}.stroke-navy-100{stroke:#b7b6f1}.stroke-navy-200{stroke:#8785e8}.stroke-navy-300{stroke:#5755df}.stroke-navy-500{stroke:#2724d6}.stroke-navy-500\\/20{stroke:#2724d633}.stroke-navy-500\\/40{stroke:#2724d666}.stroke-navy-500\\/70{stroke:#2724d6b3}.stroke-navy-700{stroke:#0000b8}.stroke-lime-50{stroke:#ecf6e7}.stroke-lime-100{stroke:#c5e3b6}.stroke-lime-200{stroke:#9ed186}.stroke-lime-300{stroke:#77bf56}.stroke-lime-500{stroke:#50ac25}.stroke-lime-500\\/20{stroke:#50ac2533}.stroke-lime-500\\/40{stroke:#50ac2566}.stroke-lime-500\\/70{stroke:#50ac25b3}.stroke-lime-700{stroke:#238900}.stroke-magenta-50{stroke:#fbe9f1}.stroke-magenta-100{stroke:#f4bed6}.stroke-magenta-200{stroke:#ed93bb}.stroke-magenta-300{stroke:#e668a0}.stroke-magenta-500{stroke:#df3d85}.stroke-magenta-500\\/20{stroke:#df3d8533}.stroke-magenta-500\\/40{stroke:#df3d8566}.stroke-magenta-500\\/70{stroke:#df3d85b3}.stroke-magenta-700{stroke:#c10d5d}.hover\\:text-white-50:hover{color:#fff}.hover\\:text-white-100:hover{color:#f7f7f7}.hover\\:text-white-200:hover{color:#eee}.hover\\:text-white-300:hover{color:#e5e5e5}.hover\\:text-white-500:hover{color:#dadada}.hover\\:text-white-500:hover\\/20{color:#dadada33}.hover\\:text-white-500:hover\\/40{color:#dadada66}.hover\\:text-white-500:hover\\/70{color:#dadadab3}.hover\\:text-white-700:hover{color:#ccc}.hover\\:text-black-50:hover{color:#aaa}.hover\\:text-black-100:hover{color:#919191}.hover\\:text-black-200:hover{color:#6c6c6c}.hover\\:text-black-300:hover{color:#424242}.hover\\:text-black-500:hover{color:#2f2f2f}.hover\\:text-black-500:hover\\/20{color:#2f2f2f33}.hover\\:text-black-500:hover\\/40{color:#2f2f2f66}.hover\\:text-black-500:hover\\/70{color:#2f2f2fb3}.hover\\:text-black-700:hover{color:#1d1d1d}.hover\\:text-blue-50:hover{color:#e9effd}.hover\\:text-blue-100:hover{color:#bed0f9}.hover\\:text-blue-200:hover{color:#92b1f5}.hover\\:text-blue-300:hover{color:#6692f1}.hover\\:text-blue-500:hover{color:#3b73ed}.hover\\:text-blue-500:hover\\/20{color:#3b73ed33}.hover\\:text-blue-500:hover\\/40{color:#3b73ed66}.hover\\:text-blue-500:hover\\/70{color:#3b73edb3}.hover\\:text-blue-700:hover{color:#0b49d1}.hover\\:text-blue-900:hover{color:#00179e}.hover\\:text-red-50:hover{color:#fbe9e9}.hover\\:text-red-100:hover{color:#f4bebe}.hover\\:text-red-200:hover{color:#ed9292}.hover\\:text-red-300:hover{color:#e66767}.hover\\:text-red-500:hover{color:#df3c3c}.hover\\:text-red-500:hover\\/20{color:#df3c3c33}.hover\\:text-red-500:hover\\/40{color:#df3c3c66}.hover\\:text-red-500:hover\\/70{color:#df3c3cb3}.hover\\:text-red-700:hover{color:#c20c0c}.hover\\:text-green-50:hover{color:#e7f4f3}.hover\\:text-green-100:hover{color:#b6dfdb}.hover\\:text-green-200:hover{color:#86c9c3}.hover\\:text-green-300:hover{color:#56b4ac}.hover\\:text-green-500:hover{color:#259f94}.hover\\:text-green-500:hover\\/20{color:#259f9433}.hover\\:text-green-500:hover\\/40{color:#259f9466}.hover\\:text-green-500:hover\\/70{color:#259f94b3}.hover\\:text-green-700:hover{color:#007a6e}.hover\\:text-yellow-50:hover{color:#fef4e8}.hover\\:text-yellow-100:hover{color:#fddeb9}.hover\\:text-yellow-200:hover{color:#fbc88b}.hover\\:text-yellow-300:hover{color:#fab15c}.hover\\:text-yellow-500:hover{color:#f89b2e}.hover\\:text-yellow-500:hover\\/20{color:#f89b2e33}.hover\\:text-yellow-500:hover\\/40{color:#f89b2e66}.hover\\:text-yellow-500:hover\\/70{color:#f89b2eb3}.hover\\:text-yellow-700:hover{color:#de7700}.hover\\:text-purple-50:hover{color:#f4ebfd}.hover\\:text-purple-100:hover{color:#dfc2f9}.hover\\:text-purple-200:hover{color:#c999f4}.hover\\:text-purple-300:hover{color:#b370f0}.hover\\:text-purple-500:hover{color:#9e47ec}.hover\\:text-purple-500:hover\\/20{color:#9e47ec33}.hover\\:text-purple-500:hover\\/40{color:#9e47ec66}.hover\\:text-purple-500:hover\\/70{color:#9e47ecb3}.hover\\:text-purple-700:hover{color:#7919d0}.hover\\:text-orange-50:hover{color:#ffefea}.hover\\:text-orange-100:hover{color:#ffcfc0}.hover\\:text-orange-200:hover{color:#ffb097}.hover\\:text-orange-300:hover{color:#ff906d}.hover\\:text-orange-500:hover{color:#ff7043}.hover\\:text-orange-500:hover\\/20{color:#ff704333}.hover\\:text-orange-500:hover\\/40{color:#ff704366}.hover\\:text-orange-500:hover\\/70{color:#ff7043b3}.hover\\:text-orange-700:hover{color:#e54715}.hover\\:text-azure-50:hover{color:#e5f7fc}.hover\\:text-azure-100:hover{color:#b2e6f7}.hover\\:text-azure-200:hover{color:#80d6f1}.hover\\:text-azure-300:hover{color:#4dc5eb}.hover\\:text-azure-500:hover{color:#1ab5e6}.hover\\:text-azure-500:hover\\/20{color:#1ab5e633}.hover\\:text-azure-500:hover\\/40{color:#1ab5e666}.hover\\:text-azure-500:hover\\/70{color:#1ab5e6b3}.hover\\:text-azure-700:hover{color:#0093c9}.hover\\:text-gold-50:hover{color:#faf3e6}.hover\\:text-gold-100:hover{color:#efdcb4}.hover\\:text-gold-200:hover{color:#e4c481}.hover\\:text-gold-300:hover{color:#daad4f}.hover\\:text-gold-500:hover{color:#cf961d}.hover\\:text-gold-500:hover\\/20{color:#cf961d33}.hover\\:text-gold-500:hover\\/40{color:#cf961d66}.hover\\:text-gold-500:hover\\/70{color:#cf961db3}.hover\\:text-gold-700:hover{color:#b07000}.hover\\:text-brown-50:hover{color:#f1ede9}.hover\\:text-brown-100:hover{color:#d6c9bd}.hover\\:text-brown-200:hover{color:#bca691}.hover\\:text-brown-300:hover{color:#a08266}.hover\\:text-brown-500:hover{color:#865e3a}.hover\\:text-brown-500:hover\\/20{color:#865e3a33}.hover\\:text-brown-500:hover\\/40{color:#865e3a66}.hover\\:text-brown-500:hover\\/70{color:#865e3ab3}.hover\\:text-brown-700:hover{color:#5f330a}.hover\\:text-navy-50:hover{color:#e7e7fa}.hover\\:text-navy-100:hover{color:#b7b6f1}.hover\\:text-navy-200:hover{color:#8785e8}.hover\\:text-navy-300:hover{color:#5755df}.hover\\:text-navy-500:hover{color:#2724d6}.hover\\:text-navy-500:hover\\/20{color:#2724d633}.hover\\:text-navy-500:hover\\/40{color:#2724d666}.hover\\:text-navy-500:hover\\/70{color:#2724d6b3}.hover\\:text-navy-700:hover{color:#0000b8}.hover\\:text-lime-50:hover{color:#ecf6e7}.hover\\:text-lime-100:hover{color:#c5e3b6}.hover\\:text-lime-200:hover{color:#9ed186}.hover\\:text-lime-300:hover{color:#77bf56}.hover\\:text-lime-500:hover{color:#50ac25}.hover\\:text-lime-500:hover\\/20{color:#50ac2533}.hover\\:text-lime-500:hover\\/40{color:#50ac2566}.hover\\:text-lime-500:hover\\/70{color:#50ac25b3}.hover\\:text-lime-700:hover{color:#238900}.hover\\:text-magenta-50:hover{color:#fbe9f1}.hover\\:text-magenta-100:hover{color:#f4bed6}.hover\\:text-magenta-200:hover{color:#ed93bb}.hover\\:text-magenta-300:hover{color:#e668a0}.hover\\:text-magenta-500:hover{color:#df3d85}.hover\\:text-magenta-500:hover\\/20{color:#df3d8533}.hover\\:text-magenta-500:hover\\/40{color:#df3d8566}.hover\\:text-magenta-500:hover\\/70{color:#df3d85b3}.hover\\:text-magenta-700:hover{color:#c10d5d}.hover\\:bg-white-50:hover{background-color:#fff}.hover\\:bg-white-100:hover{background-color:#f7f7f7}.hover\\:bg-white-200:hover{background-color:#eee}.hover\\:bg-white-300:hover{background-color:#e5e5e5}.hover\\:bg-white-500:hover{background-color:#dadada}.hover\\:bg-white-500:hover\\/20{background-color:#dadada33}.hover\\:bg-white-500:hover\\/40{background-color:#dadada66}.hover\\:bg-white-500:hover\\/70{background-color:#dadadab3}.hover\\:bg-white-700:hover{background-color:#ccc}.hover\\:bg-black-50:hover{background-color:#aaa}.hover\\:bg-black-100:hover{background-color:#919191}.hover\\:bg-black-200:hover{background-color:#6c6c6c}.hover\\:bg-black-300:hover{background-color:#424242}.hover\\:bg-black-500:hover{background-color:#2f2f2f}.hover\\:bg-black-500:hover\\/20{background-color:#2f2f2f33}.hover\\:bg-black-500:hover\\/40{background-color:#2f2f2f66}.hover\\:bg-black-500:hover\\/70{background-color:#2f2f2fb3}.hover\\:bg-black-700:hover{background-color:#1d1d1d}.hover\\:bg-blue-50:hover{background-color:#e9effd}.hover\\:bg-blue-100:hover{background-color:#bed0f9}.hover\\:bg-blue-200:hover{background-color:#92b1f5}.hover\\:bg-blue-300:hover{background-color:#6692f1}.hover\\:bg-blue-500:hover{background-color:#3b73ed}.hover\\:bg-blue-500:hover\\/20{background-color:#3b73ed33}.hover\\:bg-blue-500:hover\\/40{background-color:#3b73ed66}.hover\\:bg-blue-500:hover\\/70{background-color:#3b73edb3}.hover\\:bg-blue-700:hover{background-color:#0b49d1}.hover\\:bg-blue-900:hover{background-color:#00179e}.hover\\:bg-red-50:hover{background-color:#fbe9e9}.hover\\:bg-red-100:hover{background-color:#f4bebe}.hover\\:bg-red-200:hover{background-color:#ed9292}.hover\\:bg-red-300:hover{background-color:#e66767}.hover\\:bg-red-500:hover{background-color:#df3c3c}.hover\\:bg-red-500:hover\\/20{background-color:#df3c3c33}.hover\\:bg-red-500:hover\\/40{background-color:#df3c3c66}.hover\\:bg-red-500:hover\\/70{background-color:#df3c3cb3}.hover\\:bg-red-700:hover{background-color:#c20c0c}.hover\\:bg-green-50:hover{background-color:#e7f4f3}.hover\\:bg-green-100:hover{background-color:#b6dfdb}.hover\\:bg-green-200:hover{background-color:#86c9c3}.hover\\:bg-green-300:hover{background-color:#56b4ac}.hover\\:bg-green-500:hover{background-color:#259f94}.hover\\:bg-green-500:hover\\/20{background-color:#259f9433}.hover\\:bg-green-500:hover\\/40{background-color:#259f9466}.hover\\:bg-green-500:hover\\/70{background-color:#259f94b3}.hover\\:bg-green-700:hover{background-color:#007a6e}.hover\\:bg-yellow-50:hover{background-color:#fef4e8}.hover\\:bg-yellow-100:hover{background-color:#fddeb9}.hover\\:bg-yellow-200:hover{background-color:#fbc88b}.hover\\:bg-yellow-300:hover{background-color:#fab15c}.hover\\:bg-yellow-500:hover{background-color:#f89b2e}.hover\\:bg-yellow-500:hover\\/20{background-color:#f89b2e33}.hover\\:bg-yellow-500:hover\\/40{background-color:#f89b2e66}.hover\\:bg-yellow-500:hover\\/70{background-color:#f89b2eb3}.hover\\:bg-yellow-700:hover{background-color:#de7700}.hover\\:bg-purple-50:hover{background-color:#f4ebfd}.hover\\:bg-purple-100:hover{background-color:#dfc2f9}.hover\\:bg-purple-200:hover{background-color:#c999f4}.hover\\:bg-purple-300:hover{background-color:#b370f0}.hover\\:bg-purple-500:hover{background-color:#9e47ec}.hover\\:bg-purple-500:hover\\/20{background-color:#9e47ec33}.hover\\:bg-purple-500:hover\\/40{background-color:#9e47ec66}.hover\\:bg-purple-500:hover\\/70{background-color:#9e47ecb3}.hover\\:bg-purple-700:hover{background-color:#7919d0}.hover\\:bg-orange-50:hover{background-color:#ffefea}.hover\\:bg-orange-100:hover{background-color:#ffcfc0}.hover\\:bg-orange-200:hover{background-color:#ffb097}.hover\\:bg-orange-300:hover{background-color:#ff906d}.hover\\:bg-orange-500:hover{background-color:#ff7043}.hover\\:bg-orange-500:hover\\/20{background-color:#ff704333}.hover\\:bg-orange-500:hover\\/40{background-color:#ff704366}.hover\\:bg-orange-500:hover\\/70{background-color:#ff7043b3}.hover\\:bg-orange-700:hover{background-color:#e54715}.hover\\:bg-azure-50:hover{background-color:#e5f7fc}.hover\\:bg-azure-100:hover{background-color:#b2e6f7}.hover\\:bg-azure-200:hover{background-color:#80d6f1}.hover\\:bg-azure-300:hover{background-color:#4dc5eb}.hover\\:bg-azure-500:hover{background-color:#1ab5e6}.hover\\:bg-azure-500:hover\\/20{background-color:#1ab5e633}.hover\\:bg-azure-500:hover\\/40{background-color:#1ab5e666}.hover\\:bg-azure-500:hover\\/70{background-color:#1ab5e6b3}.hover\\:bg-azure-700:hover{background-color:#0093c9}.hover\\:bg-gold-50:hover{background-color:#faf3e6}.hover\\:bg-gold-100:hover{background-color:#efdcb4}.hover\\:bg-gold-200:hover{background-color:#e4c481}.hover\\:bg-gold-300:hover{background-color:#daad4f}.hover\\:bg-gold-500:hover{background-color:#cf961d}.hover\\:bg-gold-500:hover\\/20{background-color:#cf961d33}.hover\\:bg-gold-500:hover\\/40{background-color:#cf961d66}.hover\\:bg-gold-500:hover\\/70{background-color:#cf961db3}.hover\\:bg-gold-700:hover{background-color:#b07000}.hover\\:bg-brown-50:hover{background-color:#f1ede9}.hover\\:bg-brown-100:hover{background-color:#d6c9bd}.hover\\:bg-brown-200:hover{background-color:#bca691}.hover\\:bg-brown-300:hover{background-color:#a08266}.hover\\:bg-brown-500:hover{background-color:#865e3a}.hover\\:bg-brown-500:hover\\/20{background-color:#865e3a33}.hover\\:bg-brown-500:hover\\/40{background-color:#865e3a66}.hover\\:bg-brown-500:hover\\/70{background-color:#865e3ab3}.hover\\:bg-brown-700:hover{background-color:#5f330a}.hover\\:bg-navy-50:hover{background-color:#e7e7fa}.hover\\:bg-navy-100:hover{background-color:#b7b6f1}.hover\\:bg-navy-200:hover{background-color:#8785e8}.hover\\:bg-navy-300:hover{background-color:#5755df}.hover\\:bg-navy-500:hover{background-color:#2724d6}.hover\\:bg-navy-500:hover\\/20{background-color:#2724d633}.hover\\:bg-navy-500:hover\\/40{background-color:#2724d666}.hover\\:bg-navy-500:hover\\/70{background-color:#2724d6b3}.hover\\:bg-navy-700:hover{background-color:#0000b8}.hover\\:bg-lime-50:hover{background-color:#ecf6e7}.hover\\:bg-lime-100:hover{background-color:#c5e3b6}.hover\\:bg-lime-200:hover{background-color:#9ed186}.hover\\:bg-lime-300:hover{background-color:#77bf56}.hover\\:bg-lime-500:hover{background-color:#50ac25}.hover\\:bg-lime-500:hover\\/20{background-color:#50ac2533}.hover\\:bg-lime-500:hover\\/40{background-color:#50ac2566}.hover\\:bg-lime-500:hover\\/70{background-color:#50ac25b3}.hover\\:bg-lime-700:hover{background-color:#238900}.hover\\:bg-magenta-50:hover{background-color:#fbe9f1}.hover\\:bg-magenta-100:hover{background-color:#f4bed6}.hover\\:bg-magenta-200:hover{background-color:#ed93bb}.hover\\:bg-magenta-300:hover{background-color:#e668a0}.hover\\:bg-magenta-500:hover{background-color:#df3d85}.hover\\:bg-magenta-500:hover\\/20{background-color:#df3d8533}.hover\\:bg-magenta-500:hover\\/40{background-color:#df3d8566}.hover\\:bg-magenta-500:hover\\/70{background-color:#df3d85b3}.hover\\:bg-magenta-700:hover{background-color:#c10d5d}.focus\\:text-white-50:focus-visible{color:#fff}.focus\\:text-white-100:focus-visible{color:#f7f7f7}.focus\\:text-white-200:focus-visible{color:#eee}.focus\\:text-white-300:focus-visible{color:#e5e5e5}.focus\\:text-white-500:focus-visible{color:#dadada}.focus\\:text-white-500:focus-visible\\/20{color:#dadada33}.focus\\:text-white-500:focus-visible\\/40{color:#dadada66}.focus\\:text-white-500:focus-visible\\/70{color:#dadadab3}.focus\\:text-white-700:focus-visible{color:#ccc}.focus\\:text-black-50:focus-visible{color:#aaa}.focus\\:text-black-100:focus-visible{color:#919191}.focus\\:text-black-200:focus-visible{color:#6c6c6c}.focus\\:text-black-300:focus-visible{color:#424242}.focus\\:text-black-500:focus-visible{color:#2f2f2f}.focus\\:text-black-500:focus-visible\\/20{color:#2f2f2f33}.focus\\:text-black-500:focus-visible\\/40{color:#2f2f2f66}.focus\\:text-black-500:focus-visible\\/70{color:#2f2f2fb3}.focus\\:text-black-700:focus-visible{color:#1d1d1d}.focus\\:text-blue-50:focus-visible{color:#e9effd}.focus\\:text-blue-100:focus-visible{color:#bed0f9}.focus\\:text-blue-200:focus-visible{color:#92b1f5}.focus\\:text-blue-300:focus-visible{color:#6692f1}.focus\\:text-blue-500:focus-visible{color:#3b73ed}.focus\\:text-blue-500:focus-visible\\/20{color:#3b73ed33}.focus\\:text-blue-500:focus-visible\\/40{color:#3b73ed66}.focus\\:text-blue-500:focus-visible\\/70{color:#3b73edb3}.focus\\:text-blue-700:focus-visible{color:#0b49d1}.focus\\:text-blue-900:focus-visible{color:#00179e}.focus\\:text-red-50:focus-visible{color:#fbe9e9}.focus\\:text-red-100:focus-visible{color:#f4bebe}.focus\\:text-red-200:focus-visible{color:#ed9292}.focus\\:text-red-300:focus-visible{color:#e66767}.focus\\:text-red-500:focus-visible{color:#df3c3c}.focus\\:text-red-500:focus-visible\\/20{color:#df3c3c33}.focus\\:text-red-500:focus-visible\\/40{color:#df3c3c66}.focus\\:text-red-500:focus-visible\\/70{color:#df3c3cb3}.focus\\:text-red-700:focus-visible{color:#c20c0c}.focus\\:text-green-50:focus-visible{color:#e7f4f3}.focus\\:text-green-100:focus-visible{color:#b6dfdb}.focus\\:text-green-200:focus-visible{color:#86c9c3}.focus\\:text-green-300:focus-visible{color:#56b4ac}.focus\\:text-green-500:focus-visible{color:#259f94}.focus\\:text-green-500:focus-visible\\/20{color:#259f9433}.focus\\:text-green-500:focus-visible\\/40{color:#259f9466}.focus\\:text-green-500:focus-visible\\/70{color:#259f94b3}.focus\\:text-green-700:focus-visible{color:#007a6e}.focus\\:text-yellow-50:focus-visible{color:#fef4e8}.focus\\:text-yellow-100:focus-visible{color:#fddeb9}.focus\\:text-yellow-200:focus-visible{color:#fbc88b}.focus\\:text-yellow-300:focus-visible{color:#fab15c}.focus\\:text-yellow-500:focus-visible{color:#f89b2e}.focus\\:text-yellow-500:focus-visible\\/20{color:#f89b2e33}.focus\\:text-yellow-500:focus-visible\\/40{color:#f89b2e66}.focus\\:text-yellow-500:focus-visible\\/70{color:#f89b2eb3}.focus\\:text-yellow-700:focus-visible{color:#de7700}.focus\\:text-purple-50:focus-visible{color:#f4ebfd}.focus\\:text-purple-100:focus-visible{color:#dfc2f9}.focus\\:text-purple-200:focus-visible{color:#c999f4}.focus\\:text-purple-300:focus-visible{color:#b370f0}.focus\\:text-purple-500:focus-visible{color:#9e47ec}.focus\\:text-purple-500:focus-visible\\/20{color:#9e47ec33}.focus\\:text-purple-500:focus-visible\\/40{color:#9e47ec66}.focus\\:text-purple-500:focus-visible\\/70{color:#9e47ecb3}.focus\\:text-purple-700:focus-visible{color:#7919d0}.focus\\:text-orange-50:focus-visible{color:#ffefea}.focus\\:text-orange-100:focus-visible{color:#ffcfc0}.focus\\:text-orange-200:focus-visible{color:#ffb097}.focus\\:text-orange-300:focus-visible{color:#ff906d}.focus\\:text-orange-500:focus-visible{color:#ff7043}.focus\\:text-orange-500:focus-visible\\/20{color:#ff704333}.focus\\:text-orange-500:focus-visible\\/40{color:#ff704366}.focus\\:text-orange-500:focus-visible\\/70{color:#ff7043b3}.focus\\:text-orange-700:focus-visible{color:#e54715}.focus\\:text-azure-50:focus-visible{color:#e5f7fc}.focus\\:text-azure-100:focus-visible{color:#b2e6f7}.focus\\:text-azure-200:focus-visible{color:#80d6f1}.focus\\:text-azure-300:focus-visible{color:#4dc5eb}.focus\\:text-azure-500:focus-visible{color:#1ab5e6}.focus\\:text-azure-500:focus-visible\\/20{color:#1ab5e633}.focus\\:text-azure-500:focus-visible\\/40{color:#1ab5e666}.focus\\:text-azure-500:focus-visible\\/70{color:#1ab5e6b3}.focus\\:text-azure-700:focus-visible{color:#0093c9}.focus\\:text-gold-50:focus-visible{color:#faf3e6}.focus\\:text-gold-100:focus-visible{color:#efdcb4}.focus\\:text-gold-200:focus-visible{color:#e4c481}.focus\\:text-gold-300:focus-visible{color:#daad4f}.focus\\:text-gold-500:focus-visible{color:#cf961d}.focus\\:text-gold-500:focus-visible\\/20{color:#cf961d33}.focus\\:text-gold-500:focus-visible\\/40{color:#cf961d66}.focus\\:text-gold-500:focus-visible\\/70{color:#cf961db3}.focus\\:text-gold-700:focus-visible{color:#b07000}.focus\\:text-brown-50:focus-visible{color:#f1ede9}.focus\\:text-brown-100:focus-visible{color:#d6c9bd}.focus\\:text-brown-200:focus-visible{color:#bca691}.focus\\:text-brown-300:focus-visible{color:#a08266}.focus\\:text-brown-500:focus-visible{color:#865e3a}.focus\\:text-brown-500:focus-visible\\/20{color:#865e3a33}.focus\\:text-brown-500:focus-visible\\/40{color:#865e3a66}.focus\\:text-brown-500:focus-visible\\/70{color:#865e3ab3}.focus\\:text-brown-700:focus-visible{color:#5f330a}.focus\\:text-navy-50:focus-visible{color:#e7e7fa}.focus\\:text-navy-100:focus-visible{color:#b7b6f1}.focus\\:text-navy-200:focus-visible{color:#8785e8}.focus\\:text-navy-300:focus-visible{color:#5755df}.focus\\:text-navy-500:focus-visible{color:#2724d6}.focus\\:text-navy-500:focus-visible\\/20{color:#2724d633}.focus\\:text-navy-500:focus-visible\\/40{color:#2724d666}.focus\\:text-navy-500:focus-visible\\/70{color:#2724d6b3}.focus\\:text-navy-700:focus-visible{color:#0000b8}.focus\\:text-lime-50:focus-visible{color:#ecf6e7}.focus\\:text-lime-100:focus-visible{color:#c5e3b6}.focus\\:text-lime-200:focus-visible{color:#9ed186}.focus\\:text-lime-300:focus-visible{color:#77bf56}.focus\\:text-lime-500:focus-visible{color:#50ac25}.focus\\:text-lime-500:focus-visible\\/20{color:#50ac2533}.focus\\:text-lime-500:focus-visible\\/40{color:#50ac2566}.focus\\:text-lime-500:focus-visible\\/70{color:#50ac25b3}.focus\\:text-lime-700:focus-visible{color:#238900}.focus\\:text-magenta-50:focus-visible{color:#fbe9f1}.focus\\:text-magenta-100:focus-visible{color:#f4bed6}.focus\\:text-magenta-200:focus-visible{color:#ed93bb}.focus\\:text-magenta-300:focus-visible{color:#e668a0}.focus\\:text-magenta-500:focus-visible{color:#df3d85}.focus\\:text-magenta-500:focus-visible\\/20{color:#df3d8533}.focus\\:text-magenta-500:focus-visible\\/40{color:#df3d8566}.focus\\:text-magenta-500:focus-visible\\/70{color:#df3d85b3}.focus\\:text-magenta-700:focus-visible{color:#c10d5d}.focus\\:bg-white-50:focus-visible{background-color:#fff}.focus\\:bg-white-100:focus-visible{background-color:#f7f7f7}.focus\\:bg-white-200:focus-visible{background-color:#eee}.focus\\:bg-white-300:focus-visible{background-color:#e5e5e5}.focus\\:bg-white-500:focus-visible{background-color:#dadada}.focus\\:bg-white-500:focus-visible\\/20{background-color:#dadada33}.focus\\:bg-white-500:focus-visible\\/40{background-color:#dadada66}.focus\\:bg-white-500:focus-visible\\/70{background-color:#dadadab3}.focus\\:bg-white-700:focus-visible{background-color:#ccc}.focus\\:bg-black-50:focus-visible{background-color:#aaa}.focus\\:bg-black-100:focus-visible{background-color:#919191}.focus\\:bg-black-200:focus-visible{background-color:#6c6c6c}.focus\\:bg-black-300:focus-visible{background-color:#424242}.focus\\:bg-black-500:focus-visible{background-color:#2f2f2f}.focus\\:bg-black-500:focus-visible\\/20{background-color:#2f2f2f33}.focus\\:bg-black-500:focus-visible\\/40{background-color:#2f2f2f66}.focus\\:bg-black-500:focus-visible\\/70{background-color:#2f2f2fb3}.focus\\:bg-black-700:focus-visible{background-color:#1d1d1d}.focus\\:bg-blue-50:focus-visible{background-color:#e9effd}.focus\\:bg-blue-100:focus-visible{background-color:#bed0f9}.focus\\:bg-blue-200:focus-visible{background-color:#92b1f5}.focus\\:bg-blue-300:focus-visible{background-color:#6692f1}.focus\\:bg-blue-500:focus-visible{background-color:#3b73ed}.focus\\:bg-blue-500:focus-visible\\/20{background-color:#3b73ed33}.focus\\:bg-blue-500:focus-visible\\/40{background-color:#3b73ed66}.focus\\:bg-blue-500:focus-visible\\/70{background-color:#3b73edb3}.focus\\:bg-blue-700:focus-visible{background-color:#0b49d1}.focus\\:bg-blue-900:focus-visible{background-color:#00179e}.focus\\:bg-red-50:focus-visible{background-color:#fbe9e9}.focus\\:bg-red-100:focus-visible{background-color:#f4bebe}.focus\\:bg-red-200:focus-visible{background-color:#ed9292}.focus\\:bg-red-300:focus-visible{background-color:#e66767}.focus\\:bg-red-500:focus-visible{background-color:#df3c3c}.focus\\:bg-red-500:focus-visible\\/20{background-color:#df3c3c33}.focus\\:bg-red-500:focus-visible\\/40{background-color:#df3c3c66}.focus\\:bg-red-500:focus-visible\\/70{background-color:#df3c3cb3}.focus\\:bg-red-700:focus-visible{background-color:#c20c0c}.focus\\:bg-green-50:focus-visible{background-color:#e7f4f3}.focus\\:bg-green-100:focus-visible{background-color:#b6dfdb}.focus\\:bg-green-200:focus-visible{background-color:#86c9c3}.focus\\:bg-green-300:focus-visible{background-color:#56b4ac}.focus\\:bg-green-500:focus-visible{background-color:#259f94}.focus\\:bg-green-500:focus-visible\\/20{background-color:#259f9433}.focus\\:bg-green-500:focus-visible\\/40{background-color:#259f9466}.focus\\:bg-green-500:focus-visible\\/70{background-color:#259f94b3}.focus\\:bg-green-700:focus-visible{background-color:#007a6e}.focus\\:bg-yellow-50:focus-visible{background-color:#fef4e8}.focus\\:bg-yellow-100:focus-visible{background-color:#fddeb9}.focus\\:bg-yellow-200:focus-visible{background-color:#fbc88b}.focus\\:bg-yellow-300:focus-visible{background-color:#fab15c}.focus\\:bg-yellow-500:focus-visible{background-color:#f89b2e}.focus\\:bg-yellow-500:focus-visible\\/20{background-color:#f89b2e33}.focus\\:bg-yellow-500:focus-visible\\/40{background-color:#f89b2e66}.focus\\:bg-yellow-500:focus-visible\\/70{background-color:#f89b2eb3}.focus\\:bg-yellow-700:focus-visible{background-color:#de7700}.focus\\:bg-purple-50:focus-visible{background-color:#f4ebfd}.focus\\:bg-purple-100:focus-visible{background-color:#dfc2f9}.focus\\:bg-purple-200:focus-visible{background-color:#c999f4}.focus\\:bg-purple-300:focus-visible{background-color:#b370f0}.focus\\:bg-purple-500:focus-visible{background-color:#9e47ec}.focus\\:bg-purple-500:focus-visible\\/20{background-color:#9e47ec33}.focus\\:bg-purple-500:focus-visible\\/40{background-color:#9e47ec66}.focus\\:bg-purple-500:focus-visible\\/70{background-color:#9e47ecb3}.focus\\:bg-purple-700:focus-visible{background-color:#7919d0}.focus\\:bg-orange-50:focus-visible{background-color:#ffefea}.focus\\:bg-orange-100:focus-visible{background-color:#ffcfc0}.focus\\:bg-orange-200:focus-visible{background-color:#ffb097}.focus\\:bg-orange-300:focus-visible{background-color:#ff906d}.focus\\:bg-orange-500:focus-visible{background-color:#ff7043}.focus\\:bg-orange-500:focus-visible\\/20{background-color:#ff704333}.focus\\:bg-orange-500:focus-visible\\/40{background-color:#ff704366}.focus\\:bg-orange-500:focus-visible\\/70{background-color:#ff7043b3}.focus\\:bg-orange-700:focus-visible{background-color:#e54715}.focus\\:bg-azure-50:focus-visible{background-color:#e5f7fc}.focus\\:bg-azure-100:focus-visible{background-color:#b2e6f7}.focus\\:bg-azure-200:focus-visible{background-color:#80d6f1}.focus\\:bg-azure-300:focus-visible{background-color:#4dc5eb}.focus\\:bg-azure-500:focus-visible{background-color:#1ab5e6}.focus\\:bg-azure-500:focus-visible\\/20{background-color:#1ab5e633}.focus\\:bg-azure-500:focus-visible\\/40{background-color:#1ab5e666}.focus\\:bg-azure-500:focus-visible\\/70{background-color:#1ab5e6b3}.focus\\:bg-azure-700:focus-visible{background-color:#0093c9}.focus\\:bg-gold-50:focus-visible{background-color:#faf3e6}.focus\\:bg-gold-100:focus-visible{background-color:#efdcb4}.focus\\:bg-gold-200:focus-visible{background-color:#e4c481}.focus\\:bg-gold-300:focus-visible{background-color:#daad4f}.focus\\:bg-gold-500:focus-visible{background-color:#cf961d}.focus\\:bg-gold-500:focus-visible\\/20{background-color:#cf961d33}.focus\\:bg-gold-500:focus-visible\\/40{background-color:#cf961d66}.focus\\:bg-gold-500:focus-visible\\/70{background-color:#cf961db3}.focus\\:bg-gold-700:focus-visible{background-color:#b07000}.focus\\:bg-brown-50:focus-visible{background-color:#f1ede9}.focus\\:bg-brown-100:focus-visible{background-color:#d6c9bd}.focus\\:bg-brown-200:focus-visible{background-color:#bca691}.focus\\:bg-brown-300:focus-visible{background-color:#a08266}.focus\\:bg-brown-500:focus-visible{background-color:#865e3a}.focus\\:bg-brown-500:focus-visible\\/20{background-color:#865e3a33}.focus\\:bg-brown-500:focus-visible\\/40{background-color:#865e3a66}.focus\\:bg-brown-500:focus-visible\\/70{background-color:#865e3ab3}.focus\\:bg-brown-700:focus-visible{background-color:#5f330a}.focus\\:bg-navy-50:focus-visible{background-color:#e7e7fa}.focus\\:bg-navy-100:focus-visible{background-color:#b7b6f1}.focus\\:bg-navy-200:focus-visible{background-color:#8785e8}.focus\\:bg-navy-300:focus-visible{background-color:#5755df}.focus\\:bg-navy-500:focus-visible{background-color:#2724d6}.focus\\:bg-navy-500:focus-visible\\/20{background-color:#2724d633}.focus\\:bg-navy-500:focus-visible\\/40{background-color:#2724d666}.focus\\:bg-navy-500:focus-visible\\/70{background-color:#2724d6b3}.focus\\:bg-navy-700:focus-visible{background-color:#0000b8}.focus\\:bg-lime-50:focus-visible{background-color:#ecf6e7}.focus\\:bg-lime-100:focus-visible{background-color:#c5e3b6}.focus\\:bg-lime-200:focus-visible{background-color:#9ed186}.focus\\:bg-lime-300:focus-visible{background-color:#77bf56}.focus\\:bg-lime-500:focus-visible{background-color:#50ac25}.focus\\:bg-lime-500:focus-visible\\/20{background-color:#50ac2533}.focus\\:bg-lime-500:focus-visible\\/40{background-color:#50ac2566}.focus\\:bg-lime-500:focus-visible\\/70{background-color:#50ac25b3}.focus\\:bg-lime-700:focus-visible{background-color:#238900}.focus\\:bg-magenta-50:focus-visible{background-color:#fbe9f1}.focus\\:bg-magenta-100:focus-visible{background-color:#f4bed6}.focus\\:bg-magenta-200:focus-visible{background-color:#ed93bb}.focus\\:bg-magenta-300:focus-visible{background-color:#e668a0}.focus\\:bg-magenta-500:focus-visible{background-color:#df3d85}.focus\\:bg-magenta-500:focus-visible\\/20{background-color:#df3d8533}.focus\\:bg-magenta-500:focus-visible\\/40{background-color:#df3d8566}.focus\\:bg-magenta-500:focus-visible\\/70{background-color:#df3d85b3}.focus\\:bg-magenta-700:focus-visible{background-color:#c10d5d}.active\\:text-white-50:active{color:#fff}.active\\:text-white-100:active{color:#f7f7f7}.active\\:text-white-200:active{color:#eee}.active\\:text-white-300:active{color:#e5e5e5}.active\\:text-white-500:active{color:#dadada}.active\\:text-white-500:active\\/20{color:#dadada33}.active\\:text-white-500:active\\/40{color:#dadada66}.active\\:text-white-500:active\\/70{color:#dadadab3}.active\\:text-white-700:active{color:#ccc}.active\\:text-black-50:active{color:#aaa}.active\\:text-black-100:active{color:#919191}.active\\:text-black-200:active{color:#6c6c6c}.active\\:text-black-300:active{color:#424242}.active\\:text-black-500:active{color:#2f2f2f}.active\\:text-black-500:active\\/20{color:#2f2f2f33}.active\\:text-black-500:active\\/40{color:#2f2f2f66}.active\\:text-black-500:active\\/70{color:#2f2f2fb3}.active\\:text-black-700:active{color:#1d1d1d}.active\\:text-blue-50:active{color:#e9effd}.active\\:text-blue-100:active{color:#bed0f9}.active\\:text-blue-200:active{color:#92b1f5}.active\\:text-blue-300:active{color:#6692f1}.active\\:text-blue-500:active{color:#3b73ed}.active\\:text-blue-500:active\\/20{color:#3b73ed33}.active\\:text-blue-500:active\\/40{color:#3b73ed66}.active\\:text-blue-500:active\\/70{color:#3b73edb3}.active\\:text-blue-700:active{color:#0b49d1}.active\\:text-blue-900:active{color:#00179e}.active\\:text-red-50:active{color:#fbe9e9}.active\\:text-red-100:active{color:#f4bebe}.active\\:text-red-200:active{color:#ed9292}.active\\:text-red-300:active{color:#e66767}.active\\:text-red-500:active{color:#df3c3c}.active\\:text-red-500:active\\/20{color:#df3c3c33}.active\\:text-red-500:active\\/40{color:#df3c3c66}.active\\:text-red-500:active\\/70{color:#df3c3cb3}.active\\:text-red-700:active{color:#c20c0c}.active\\:text-green-50:active{color:#e7f4f3}.active\\:text-green-100:active{color:#b6dfdb}.active\\:text-green-200:active{color:#86c9c3}.active\\:text-green-300:active{color:#56b4ac}.active\\:text-green-500:active{color:#259f94}.active\\:text-green-500:active\\/20{color:#259f9433}.active\\:text-green-500:active\\/40{color:#259f9466}.active\\:text-green-500:active\\/70{color:#259f94b3}.active\\:text-green-700:active{color:#007a6e}.active\\:text-yellow-50:active{color:#fef4e8}.active\\:text-yellow-100:active{color:#fddeb9}.active\\:text-yellow-200:active{color:#fbc88b}.active\\:text-yellow-300:active{color:#fab15c}.active\\:text-yellow-500:active{color:#f89b2e}.active\\:text-yellow-500:active\\/20{color:#f89b2e33}.active\\:text-yellow-500:active\\/40{color:#f89b2e66}.active\\:text-yellow-500:active\\/70{color:#f89b2eb3}.active\\:text-yellow-700:active{color:#de7700}.active\\:text-purple-50:active{color:#f4ebfd}.active\\:text-purple-100:active{color:#dfc2f9}.active\\:text-purple-200:active{color:#c999f4}.active\\:text-purple-300:active{color:#b370f0}.active\\:text-purple-500:active{color:#9e47ec}.active\\:text-purple-500:active\\/20{color:#9e47ec33}.active\\:text-purple-500:active\\/40{color:#9e47ec66}.active\\:text-purple-500:active\\/70{color:#9e47ecb3}.active\\:text-purple-700:active{color:#7919d0}.active\\:text-orange-50:active{color:#ffefea}.active\\:text-orange-100:active{color:#ffcfc0}.active\\:text-orange-200:active{color:#ffb097}.active\\:text-orange-300:active{color:#ff906d}.active\\:text-orange-500:active{color:#ff7043}.active\\:text-orange-500:active\\/20{color:#ff704333}.active\\:text-orange-500:active\\/40{color:#ff704366}.active\\:text-orange-500:active\\/70{color:#ff7043b3}.active\\:text-orange-700:active{color:#e54715}.active\\:text-azure-50:active{color:#e5f7fc}.active\\:text-azure-100:active{color:#b2e6f7}.active\\:text-azure-200:active{color:#80d6f1}.active\\:text-azure-300:active{color:#4dc5eb}.active\\:text-azure-500:active{color:#1ab5e6}.active\\:text-azure-500:active\\/20{color:#1ab5e633}.active\\:text-azure-500:active\\/40{color:#1ab5e666}.active\\:text-azure-500:active\\/70{color:#1ab5e6b3}.active\\:text-azure-700:active{color:#0093c9}.active\\:text-gold-50:active{color:#faf3e6}.active\\:text-gold-100:active{color:#efdcb4}.active\\:text-gold-200:active{color:#e4c481}.active\\:text-gold-300:active{color:#daad4f}.active\\:text-gold-500:active{color:#cf961d}.active\\:text-gold-500:active\\/20{color:#cf961d33}.active\\:text-gold-500:active\\/40{color:#cf961d66}.active\\:text-gold-500:active\\/70{color:#cf961db3}.active\\:text-gold-700:active{color:#b07000}.active\\:text-brown-50:active{color:#f1ede9}.active\\:text-brown-100:active{color:#d6c9bd}.active\\:text-brown-200:active{color:#bca691}.active\\:text-brown-300:active{color:#a08266}.active\\:text-brown-500:active{color:#865e3a}.active\\:text-brown-500:active\\/20{color:#865e3a33}.active\\:text-brown-500:active\\/40{color:#865e3a66}.active\\:text-brown-500:active\\/70{color:#865e3ab3}.active\\:text-brown-700:active{color:#5f330a}.active\\:text-navy-50:active{color:#e7e7fa}.active\\:text-navy-100:active{color:#b7b6f1}.active\\:text-navy-200:active{color:#8785e8}.active\\:text-navy-300:active{color:#5755df}.active\\:text-navy-500:active{color:#2724d6}.active\\:text-navy-500:active\\/20{color:#2724d633}.active\\:text-navy-500:active\\/40{color:#2724d666}.active\\:text-navy-500:active\\/70{color:#2724d6b3}.active\\:text-navy-700:active{color:#0000b8}.active\\:text-lime-50:active{color:#ecf6e7}.active\\:text-lime-100:active{color:#c5e3b6}.active\\:text-lime-200:active{color:#9ed186}.active\\:text-lime-300:active{color:#77bf56}.active\\:text-lime-500:active{color:#50ac25}.active\\:text-lime-500:active\\/20{color:#50ac2533}.active\\:text-lime-500:active\\/40{color:#50ac2566}.active\\:text-lime-500:active\\/70{color:#50ac25b3}.active\\:text-lime-700:active{color:#238900}.active\\:text-magenta-50:active{color:#fbe9f1}.active\\:text-magenta-100:active{color:#f4bed6}.active\\:text-magenta-200:active{color:#ed93bb}.active\\:text-magenta-300:active{color:#e668a0}.active\\:text-magenta-500:active{color:#df3d85}.active\\:text-magenta-500:active\\/20{color:#df3d8533}.active\\:text-magenta-500:active\\/40{color:#df3d8566}.active\\:text-magenta-500:active\\/70{color:#df3d85b3}.active\\:text-magenta-700:active{color:#c10d5d}.active\\:bg-white-50:active{background-color:#fff}.active\\:bg-white-100:active{background-color:#f7f7f7}.active\\:bg-white-200:active{background-color:#eee}.active\\:bg-white-300:active{background-color:#e5e5e5}.active\\:bg-white-500:active{background-color:#dadada}.active\\:bg-white-500:active\\/20{background-color:#dadada33}.active\\:bg-white-500:active\\/40{background-color:#dadada66}.active\\:bg-white-500:active\\/70{background-color:#dadadab3}.active\\:bg-white-700:active{background-color:#ccc}.active\\:bg-black-50:active{background-color:#aaa}.active\\:bg-black-100:active{background-color:#919191}.active\\:bg-black-200:active{background-color:#6c6c6c}.active\\:bg-black-300:active{background-color:#424242}.active\\:bg-black-500:active{background-color:#2f2f2f}.active\\:bg-black-500:active\\/20{background-color:#2f2f2f33}.active\\:bg-black-500:active\\/40{background-color:#2f2f2f66}.active\\:bg-black-500:active\\/70{background-color:#2f2f2fb3}.active\\:bg-black-700:active{background-color:#1d1d1d}.active\\:bg-blue-50:active{background-color:#e9effd}.active\\:bg-blue-100:active{background-color:#bed0f9}.active\\:bg-blue-200:active{background-color:#92b1f5}.active\\:bg-blue-300:active{background-color:#6692f1}.active\\:bg-blue-500:active{background-color:#3b73ed}.active\\:bg-blue-500:active\\/20{background-color:#3b73ed33}.active\\:bg-blue-500:active\\/40{background-color:#3b73ed66}.active\\:bg-blue-500:active\\/70{background-color:#3b73edb3}.active\\:bg-blue-700:active{background-color:#0b49d1}.active\\:bg-blue-900:active{background-color:#00179e}.active\\:bg-red-50:active{background-color:#fbe9e9}.active\\:bg-red-100:active{background-color:#f4bebe}.active\\:bg-red-200:active{background-color:#ed9292}.active\\:bg-red-300:active{background-color:#e66767}.active\\:bg-red-500:active{background-color:#df3c3c}.active\\:bg-red-500:active\\/20{background-color:#df3c3c33}.active\\:bg-red-500:active\\/40{background-color:#df3c3c66}.active\\:bg-red-500:active\\/70{background-color:#df3c3cb3}.active\\:bg-red-700:active{background-color:#c20c0c}.active\\:bg-green-50:active{background-color:#e7f4f3}.active\\:bg-green-100:active{background-color:#b6dfdb}.active\\:bg-green-200:active{background-color:#86c9c3}.active\\:bg-green-300:active{background-color:#56b4ac}.active\\:bg-green-500:active{background-color:#259f94}.active\\:bg-green-500:active\\/20{background-color:#259f9433}.active\\:bg-green-500:active\\/40{background-color:#259f9466}.active\\:bg-green-500:active\\/70{background-color:#259f94b3}.active\\:bg-green-700:active{background-color:#007a6e}.active\\:bg-yellow-50:active{background-color:#fef4e8}.active\\:bg-yellow-100:active{background-color:#fddeb9}.active\\:bg-yellow-200:active{background-color:#fbc88b}.active\\:bg-yellow-300:active{background-color:#fab15c}.active\\:bg-yellow-500:active{background-color:#f89b2e}.active\\:bg-yellow-500:active\\/20{background-color:#f89b2e33}.active\\:bg-yellow-500:active\\/40{background-color:#f89b2e66}.active\\:bg-yellow-500:active\\/70{background-color:#f89b2eb3}.active\\:bg-yellow-700:active{background-color:#de7700}.active\\:bg-purple-50:active{background-color:#f4ebfd}.active\\:bg-purple-100:active{background-color:#dfc2f9}.active\\:bg-purple-200:active{background-color:#c999f4}.active\\:bg-purple-300:active{background-color:#b370f0}.active\\:bg-purple-500:active{background-color:#9e47ec}.active\\:bg-purple-500:active\\/20{background-color:#9e47ec33}.active\\:bg-purple-500:active\\/40{background-color:#9e47ec66}.active\\:bg-purple-500:active\\/70{background-color:#9e47ecb3}.active\\:bg-purple-700:active{background-color:#7919d0}.active\\:bg-orange-50:active{background-color:#ffefea}.active\\:bg-orange-100:active{background-color:#ffcfc0}.active\\:bg-orange-200:active{background-color:#ffb097}.active\\:bg-orange-300:active{background-color:#ff906d}.active\\:bg-orange-500:active{background-color:#ff7043}.active\\:bg-orange-500:active\\/20{background-color:#ff704333}.active\\:bg-orange-500:active\\/40{background-color:#ff704366}.active\\:bg-orange-500:active\\/70{background-color:#ff7043b3}.active\\:bg-orange-700:active{background-color:#e54715}.active\\:bg-azure-50:active{background-color:#e5f7fc}.active\\:bg-azure-100:active{background-color:#b2e6f7}.active\\:bg-azure-200:active{background-color:#80d6f1}.active\\:bg-azure-300:active{background-color:#4dc5eb}.active\\:bg-azure-500:active{background-color:#1ab5e6}.active\\:bg-azure-500:active\\/20{background-color:#1ab5e633}.active\\:bg-azure-500:active\\/40{background-color:#1ab5e666}.active\\:bg-azure-500:active\\/70{background-color:#1ab5e6b3}.active\\:bg-azure-700:active{background-color:#0093c9}.active\\:bg-gold-50:active{background-color:#faf3e6}.active\\:bg-gold-100:active{background-color:#efdcb4}.active\\:bg-gold-200:active{background-color:#e4c481}.active\\:bg-gold-300:active{background-color:#daad4f}.active\\:bg-gold-500:active{background-color:#cf961d}.active\\:bg-gold-500:active\\/20{background-color:#cf961d33}.active\\:bg-gold-500:active\\/40{background-color:#cf961d66}.active\\:bg-gold-500:active\\/70{background-color:#cf961db3}.active\\:bg-gold-700:active{background-color:#b07000}.active\\:bg-brown-50:active{background-color:#f1ede9}.active\\:bg-brown-100:active{background-color:#d6c9bd}.active\\:bg-brown-200:active{background-color:#bca691}.active\\:bg-brown-300:active{background-color:#a08266}.active\\:bg-brown-500:active{background-color:#865e3a}.active\\:bg-brown-500:active\\/20{background-color:#865e3a33}.active\\:bg-brown-500:active\\/40{background-color:#865e3a66}.active\\:bg-brown-500:active\\/70{background-color:#865e3ab3}.active\\:bg-brown-700:active{background-color:#5f330a}.active\\:bg-navy-50:active{background-color:#e7e7fa}.active\\:bg-navy-100:active{background-color:#b7b6f1}.active\\:bg-navy-200:active{background-color:#8785e8}.active\\:bg-navy-300:active{background-color:#5755df}.active\\:bg-navy-500:active{background-color:#2724d6}.active\\:bg-navy-500:active\\/20{background-color:#2724d633}.active\\:bg-navy-500:active\\/40{background-color:#2724d666}.active\\:bg-navy-500:active\\/70{background-color:#2724d6b3}.active\\:bg-navy-700:active{background-color:#0000b8}.active\\:bg-lime-50:active{background-color:#ecf6e7}.active\\:bg-lime-100:active{background-color:#c5e3b6}.active\\:bg-lime-200:active{background-color:#9ed186}.active\\:bg-lime-300:active{background-color:#77bf56}.active\\:bg-lime-500:active{background-color:#50ac25}.active\\:bg-lime-500:active\\/20{background-color:#50ac2533}.active\\:bg-lime-500:active\\/40{background-color:#50ac2566}.active\\:bg-lime-500:active\\/70{background-color:#50ac25b3}.active\\:bg-lime-700:active{background-color:#238900}.active\\:bg-magenta-50:active{background-color:#fbe9f1}.active\\:bg-magenta-100:active{background-color:#f4bed6}.active\\:bg-magenta-200:active{background-color:#ed93bb}.active\\:bg-magenta-300:active{background-color:#e668a0}.active\\:bg-magenta-500:active{background-color:#df3d85}.active\\:bg-magenta-500:active\\/20{background-color:#df3d8533}.active\\:bg-magenta-500:active\\/40{background-color:#df3d8566}.active\\:bg-magenta-500:active\\/70{background-color:#df3d85b3}.active\\:bg-magenta-700:active{background-color:#c10d5d}.transition{transition:all .2s ease-in-out}.disable-selection,.logo-container .logo-image,.cover-container .cover-image,.profile-rounded-image,.profile-square-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.drop-zone-container.has-logo{display:none}.largeContainer{position:relative;min-height:178px}.largeContainer .cropper-overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.logo-container{position:absolute;top:0;left:0;width:616px;height:214px;overflow:hidden}.logo-container .logo-image{width:100%;height:100%;z-index:1000}.logoVar{height:214px}.logoVar.hasCropper{height:240px!important}.logoVar.hasCropper .drop-zone-container{display:none!important}.logoVar .drop-zone-container .drop-zone,.logoVar .drop-zone-container .drop-zone-error{height:204px}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cover-container{width:267px;height:178px}.cover-container .cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.container.dragMode{position:fixed;position-anchor:--modal-body;left:anchor(left);top:anchor(top);height:anchor-size(--modal-body height)!important;width:anchor-size(--modal-body width)!important;display:flex;justify-content:center;align-items:center;gap:0;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .drop-zone-container{position:relative;width:100%;height:100%;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%;outline:none!important;margin:0!important;border:4px dashed #cccccc;border-color:#ccc}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container{position:relative}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document svg{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container ng-lottie{width:200px;height:200px;display:block}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.container.dragMode.onDragover .drop-zone-container .drop-zone{border-color:#ccc}.container.dragMode.dual-drop-mode .drop-zone-container{--dual-drop-border: 4px;--dual-drop-border-overlap: calc(var(--dual-drop-border) / 2);position:relative;display:block;overflow:hidden}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel{position:absolute;top:0;bottom:0;margin:0!important;width:calc(50% + var(--dual-drop-border-overlap));opacity:1;transition:width .25s ease,opacity .25s ease,z-index 0s}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .dual-drop-zone-title{position:absolute;top:10px;left:8px;margin:0;font-weight:800;font-size:18px;line-height:100%;letter-spacing:0}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-left{left:0;z-index:1}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-right{right:0;left:auto;z-index:1}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .drop-zone-focus-text{text-align:center}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .drop-zone-focus-text .description{margin:8px auto 0;max-width:158px;font-weight:400;font-size:11px;line-height:14px;text-align:center}.container.dragMode.dual-drop-mode.dual-drop-focus-left .drop-zone-container .dual-drop-zone-left{width:calc(60% + var(--dual-drop-border-overlap));opacity:1;z-index:2}.container.dragMode.dual-drop-mode.dual-drop-focus-left .drop-zone-container .dual-drop-zone-right{width:calc(40% + var(--dual-drop-border-overlap));opacity:.4;z-index:1}.container.dragMode.dual-drop-mode.dual-drop-focus-right .drop-zone-container .dual-drop-zone-right{width:calc(60% + var(--dual-drop-border-overlap));opacity:1;z-index:2}.container.dragMode.dual-drop-mode.dual-drop-focus-right .drop-zone-container .dual-drop-zone-left{width:calc(40% + var(--dual-drop-border-overlap));opacity:.4;z-index:1}.is-documents-mode .dragMode{height:120px!important}.dragModeDocuments .drop-zone-container .drop-zone{background-color:#fff!important}.dragModeDocuments .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.drop-zone-dimensions-lock{width:var(--drag-lock-width);height:var(--drag-lock-height)}.is-details-slider{width:100%!important;height:100%!important;overflow:hidden}.is-details-slider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important;margin-top:12px!important;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.is-details-slider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;cursor:pointer!important;transition:width .2s ease-in-out,background-color .2s ease-in-out}.is-details-slider .sliders .slider-item.active{width:20px;background-color:#919191}.is-details-slider .drop-zone-container{display:none!important}.is-details-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-details-slider .docs .carousel-button{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-details-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-details-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.is-details-slider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;flex-shrink:0!important;gap:0!important;position:relative!important;transition:transform .3s ease-out}.is-details-slider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;justify-content:center!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.is-details-slider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.is-details-slider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.is-details-slider .carousel-button{position:absolute!important;top:45%!important}.is-details-slider:hover .sliders{opacity:1;pointer-events:auto}.is-drawer-mode{width:100%!important;padding:4px!important;position:absolute!important;max-width:100%!important}.is-drawer-mode .drop-zone-container{display:none!important}.is-drawer-mode .skeleton-container.drawer-position{width:100%!important;position:relative!important;overflow:hidden!important;display:flex;align-items:center;gap:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item{width:194px;height:194px;flex:0 0 194px;border-radius:2px;padding:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item .skeleton-bar{width:100%;height:100%;background-color:#fff}.is-drawer-mode .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-drawer-mode .docs .doc-container{display:flex;width:auto!important;height:auto!important;gap:4px!important;transition:transform .3s ease-out}.is-drawer-mode .docs .doc-container .doc{width:194px!important;height:194px!important;flex:0 0 194px!important;background-color:transparent!important}.is-drawer-mode .carousel-button.carousel-right{right:4px!important;position:absolute!important}.is-drawer-mode .carousel-button.carousel-left{left:4px!important;position:absolute!important}.isCoverDetails{width:100%!important;height:100%!important}.isCoverDetails .drop-zone-container{display:none!important}.isCoverDetails .docs{width:100%!important}.isCoverDetails .docs .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;display:block!important;background-color:transparent!important}.more-docs{width:148px;flex:0 0 148px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs{width:148px!important}.small-more-docs .illustration,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text{padding:0 12px}.unsupported .drop-zone-text .heading.invalid{line-height:18px}.unsupported .drop-zone-text .subtext{line-height:14px;margin-bottom:0}.unsupported .cancel-button .cancel-icon{width:18px!important;height:18px!important}.unsupported .cancel-button-documents{display:none}.max-reached,.max-reached-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-media .drop-zone{padding:13px 0!important;flex-direction:column}.invalid-file-size .drop-zone .illustration{display:none!important}.invalid-file-size .drop-zone .drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:2px;right:2px;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.drop-zone-error .file-types{display:flex;align-items:center;gap:2px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.drop-zone-error .badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;width:35px;border-radius:1px;margin-bottom:0;text-align:center;background-color:#919191}.drop-zone-error .pdf{background-color:#e66767}.drop-zone-error .video{background-color:#b370f0}.drop-zone-error .image{background-color:#fab15c}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DropZoneComponent, isStandalone: true, selector: "cai-drop-zone", inputs: { avatarColor: { classPropertyName: "avatarColor", publicName: "avatarColor", isSignal: true, isRequired: false, transformFunction: null }, crop: { classPropertyName: "crop", publicName: "crop", isSignal: true, isRequired: false, transformFunction: null }, deletedFileIds: { classPropertyName: "deletedFileIds", publicName: "deletedFileIds", isSignal: true, isRequired: false, transformFunction: null }, documentsDropZoneOpen: { classPropertyName: "documentsDropZoneOpen", publicName: "documentsDropZoneOpen", isSignal: true, isRequired: false, transformFunction: null }, documentTags: { classPropertyName: "documentTags", publicName: "documentTags", isSignal: true, isRequired: false, transformFunction: null }, dualDropZones: { classPropertyName: "dualDropZones", publicName: "dualDropZones", isSignal: true, isRequired: false, transformFunction: null }, excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null }, isCardSlider: { classPropertyName: "isCardSlider", publicName: "isCardSlider", isSignal: true, isRequired: false, transformFunction: null }, isCoverDetails: { classPropertyName: "isCoverDetails", publicName: "isCoverDetails", isSignal: true, isRequired: false, transformFunction: null }, isDetailsSlider: { classPropertyName: "isDetailsSlider", publicName: "isDetailsSlider", isSignal: true, isRequired: false, transformFunction: null }, isDocumentsMode: { classPropertyName: "isDocumentsMode", publicName: "isDocumentsMode", isSignal: true, isRequired: false, transformFunction: null }, isDrawerMode: { classPropertyName: "isDrawerMode", publicName: "isDrawerMode", isSignal: true, isRequired: false, transformFunction: null }, isDualDropZone: { classPropertyName: "isDualDropZone", publicName: "isDualDropZone", isSignal: true, isRequired: false, transformFunction: null }, maxCountFiles: { classPropertyName: "maxCountFiles", publicName: "maxCountFiles", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCropPendingChange: "onCropPendingChange", onDeletedFileIds: "onDeletedFileIds", onDocsChange: "onDocsChange", onDocumentDropZoneOpenChange: "onDocumentDropZoneOpenChange", onDocumentFileNameChange: "onDocumentFileNameChange", onDocumentPreviewClick: "onDocumentPreviewClick", onDualDropChange: "onDualDropChange" }, host: { listeners: { "document:dragenter": "onDocumentDragEnter($event)", "document:dragover": "onDocumentDragOver($event)", "document:dragleave": "onWindowDragLeave($event)", "document:drop": "onDocumentDrop($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }, { propertyName: "cropper", first: true, predicate: ["cropper"], descendants: true, isSignal: true }, { propertyName: "docsViewport", first: true, predicate: ["docsViewport"], descendants: true, isSignal: true }, { propertyName: "dropZoneContainer", first: true, predicate: ["dropZoneContainer"], descendants: true, isSignal: true }, { propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let mediaVariant = variant() === dropZoneVariant.MEDIA;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl() !== \"\";\n@let profilePreview = profileUrl() !== \"\"; @let logoPreview = !!logoUrl();\n@let smallSize = size() === \"480px\";\n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {\n  <div class=\"documents-drag-overlay\"></div>\n}\n\n@if (dragMode() && !isDrawerMode() && !isCardSlider()) {\n  <div\n    class=\"drop-zone-dimensions-lock\"\n    [style.--drag-lock-width.px]=\"dropzoneDimensionsLock().width\"\n    [style.--drag-lock-height.px]=\"dropzoneDimensionsLock().height\"\n  ></div>\n}\n\n<div\n  #containerRef\n  class=\"container\"\n  [class]=\"{\n    'picture-container': profileVariant || coverVariant,\n    smallContainer: smallSize,\n    largeContainer: largeSize,\n    dragMode: dragMode() && !isDocumentsMode(),\n    dragModeDocuments: dragMode() && isDocumentsMode(),\n    'dual-drop-mode': isDualDragActive(),\n    'dual-drop-focus-left':\n      isDualDragActive() && activeDualTarget() === dualDropTarget.LEFT,\n    'dual-drop-focus-right':\n      isDualDragActive() && activeDualTarget() === dualDropTarget.RIGHT,\n    onDragover: onDragover(),\n    logoVar: logoVariant,\n    hasCropper: isCropperReady(),\n    'is-details-slider': isDetailsSlider(),\n    'is-card-slider': isCardSlider(),\n    'is-drawer-mode': isDrawerMode(),\n    isCoverDetails: isCoverDetails(),\n    'is-documents-mode': isDocumentsMode(),\n  }\"\n>\n  @if (coverVariant && coverPreview) {\n    <div class=\"cover-container\">\n      <img [src]=\"coverUrl()\" class=\"cover-image\" draggable=\"false\" />\n    </div>\n  }\n  @if (profileVariant) {\n    @if (!profilePreview) {\n      <div class=\"avatar\">\n        <cai-avatar\n          [driver]=\"driver()\"\n          [size]=\"160\"\n          [rounded]=\"rounded()\"\n        ></cai-avatar>\n      </div>\n    } @else {\n      <div class=\"profile-container\">\n        <img\n          [class]=\"rounded() ? 'profile-rounded-image' : 'profile-square-image'\"\n          [src]=\"profileUrl()\"\n          draggable=\"false\"\n        />\n      </div>\n    }\n  }\n  @if (logoVariant && logoPreview) {\n    <div class=\"logo-container\" [class.has-logo]=\"!!logoUrl()\">\n      <img class=\"logo-image\" [src]=\"logoUrl()\" draggable=\"false\" />\n    </div>\n  }\n  <!--Image Cropper-->\n  @if (cropFile && showCrop) {\n    @if (!isCropperReady()) {\n      <div class=\"cropper-loader\">\n        <div class=\"spinner\"></div>\n      </div>\n    }\n    <div class=\"cropper-overlay\">\n      <image-cropper\n        #cropper\n        class=\"img-cropper\"\n        [output]=\"'base64'\"\n        [class.logoBorder]=\"logoVariant\"\n        [class.snapback-animate]=\"isSnapbackAnimating()\"\n        [roundCropper]=\"roundedBorder ? true : false\"\n        [hideResizeSquares]=\"true\"\n        [allowMoveImage]=\"true\"\n        [transform]=\"transform()\"\n        (transformChange)=\"onTransformChange($event)\"\n        format=\"png\"\n        [aspectRatio]=\"cropAspectRatio()\"\n        [resizeToWidth]=\"cropWidth()\"\n        [resizeToHeight]=\"cropHeight()\"\n        [containWithinAspectRatio]=\"true\"\n        [imageChangedEvent]=\"imageChangedEvent()\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded($event)\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      @if (isCropperReady()) {\n        <div class=\"lower-part\">\n          <div class=\"range\">\n            <input\n              #inputRange\n              type=\"range\"\n              class=\"custom-range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"0.1\"\n              [value]=\"zoomValue()\"\n              (input)=\"onZoomChange($event)\"\n            />\n          </div>\n          <div class=\"cropper-buttons\">\n            <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n            <button class=\"submit-button\" (click)=\"submitCrop()\">Crop</button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n  <!-- Drop Zone -->\n  @if (!isDocumentsMode() || documentsDropZoneOpen()) {\n    <div\n      #dropZoneContainer\n      class=\"drop-zone-container\"\n      [class.has-logo]=\"logoVariant && !!logoUrl()\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      [class]=\"{\n        'more-docs': docCount >= 3 && largeSize,\n        'small-more-docs': docCount >= 2 && smallSize,\n        'max-reached-drop-design':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          documentVariant,\n        'max-reached-more-doc':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          documentVariant,\n        'max-reached-more-media':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          mediaVariant,\n        'invalid-file-size': invalidFileSize(),\n        unsupported: unsupported() || invalidFileSize(),\n        smallView: this.smallView() && !dragMode(),\n      }\"\n    >\n      <!-- Drop Zone -->\n      @if (isDualDragActive()) {\n        @for (target of dualTargets; track target) {\n          @let panel = dualDropZones()[target];\n          <div\n            class=\"drop-zone dual-drop-zone-panel\"\n            [class.dual-drop-zone-left]=\"target === dualDropTarget.LEFT\"\n            [class.dual-drop-zone-right]=\"target === dualDropTarget.RIGHT\"\n            [class.active]=\"activeDualTarget() === target\"\n            (drop)=\"onDualDrop($event, target)\"\n          >\n            @if (panel.title) {\n              <div class=\"dual-drop-zone-title\">{{ panel.title }}</div>\n            }\n            <div class=\"drag-icons-container\">\n              @if (isDocumentsMode()) {\n                <svg-icon\n                  name=\"cai-drop-zone-focus\"\n                  class=\"illustration drag-icon-document\"\n                ></svg-icon>\n              } @else {\n                <ng-lottie\n                  [options]=\"{\n                    path:\n                      (target === dualDropTarget.LEFT\n                        ? dropZoneVariant.PROFILE\n                        : variant()\n                      ) | dropZoneAnimation,\n                    loop: false,\n                    autoplay: false,\n                  }\"\n                  (animationCreated)=\"animationCreated($event, target)\"\n                ></ng-lottie>\n              }\n            </div>\n            <div class=\"drop-zone-focus-text\">\n              <div class=\"heading\">\n                {{\n                  activeDualTarget() === target\n                    ? panel.dropLabel\n                    : panel.dragLabel\n                }}\n              </div>\n              <div class=\"description\">{{ panel.description }}</div>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n          @if (dragMode()) {\n            <div class=\"drag-icons-container\">\n              @if (isDocumentsMode()) {\n                <svg-icon\n                  name=\"cai-drop-zone-focus\"\n                  class=\"illustration drag-icon-document\"\n                ></svg-icon>\n              } @else {\n                <!-- Animation -->\n                <ng-lottie\n                  [options]=\"{\n                    path: variant() | dropZoneAnimation,\n                    loop: false,\n                    autoplay: false,\n                  }\"\n                  (animationCreated)=\"animationCreated($event)\"\n                ></ng-lottie>\n              }\n            </div>\n            <div class=\"drop-zone-focus-text\">\n              @if (isDocumentsMode()) {\n                <p class=\"heading\">DRAG FILES HERE</p>\n              } @else if (documentVariant || mediaVariant) {\n                <p class=\"heading\">\n                  {{ onDragover() ? \"DROP FILES HERE\" : \"DRAG FILES HERE\" }}\n                </p>\n              } @else {\n                <p class=\"heading\">\n                  {{ onDragover() ? \"DROP IMAGE HERE\" : \"DRAG IMAGE HERE\" }}\n                </p>\n              }\n            </div>\n          } @else {\n            @let svgIcon = variant() | dropZoneAnimation: true;\n            <svg-icon [name]=\"svgIcon\" class=\"illustration\"></svg-icon>\n            @if (\n              (countFiles <= this.docs().length || maxCountReached()) &&\n              documentVariant\n            ) {\n              <div class=\"drop-zone-text\">\n                <p class=\"heading\">\n                  <span class=\"line\">MAX COUNT</span>\n                  <span class=\"line\">REACHED</span>\n                </p>\n                <p class=\"subtext\">\n                  <span class=\"line\">{{ countFiles }} FILES </span>\n                  <span class=\"line\">IMPORTED</span>\n                </p>\n              </div>\n            } @else {\n              <div class=\"drop-zone-text\">\n                <p class=\"heading\">\n                  @if (documentVariant || mediaVariant) {\n                    DRAG FILES\n                    @if (docCount < 1 || isDocumentsMode()) {\n                      <span>HERE</span>\n                    }\n                  } @else if (profileVariant && roundedBorder) {\n                    DRAG IMAGE\n                  } @else {\n                    DRAG IMAGE HERE\n                  }\n                </p>\n                @if (!coverPreview && !profilePreview) {\n                  <p class=\"subtext\">OR CLICK TO ADD</p>\n                }\n                @if (coverPreview || profilePreview) {\n                  <p class=\"subtext\">OR CLICK TO REPLACE</p>\n                }\n                @if (mediaVariant) {\n                  <p class=\"media-subtext\">\n                    max file size {{ maxFileSize() }}mb\n                  </p>\n                }\n              </div>\n              @if (isDocumentsMode()) {\n                <button\n                  class=\"cancel-button-documents\"\n                  ngbTooltip=\"Cancel\"\n                  [placement]=\"'bottom'\"\n                  container=\"body\"\n                  triggers=\"mouseenter:mouseleave\"\n                  tooltipClass=\"tooltip tooltip-m-b-2\"\n                >\n                  <svg-icon\n                    name=\"cai-cancel\"\n                    class=\"cancel-icon\"\n                    (click)=\"onCancel($event)\"\n                  ></svg-icon>\n                </button>\n              }\n            }\n          }\n        </div>\n      }\n\n      <input\n        type=\"file\"\n        aria-hidden=\"true\"\n        multiple\n        class=\"drop-zone-input\"\n        #inputRef\n        (input)=\"onInput($event)\"\n        (change)=\"fileChangeEvent($event)\"\n      />\n\n      <!-- Drop Zone Error -->\n      <div class=\"drop-zone-error\">\n        @if (invalidFileSize()) {\n          <div class=\"drop-zone-text\">\n            <p class=\"heading invalid\">INVALID FILE SIZE</p>\n            <p class=\"subtext\">MAX {{ maxFileSize() }} MB</p>\n          </div>\n        } @else {\n          <div class=\"drop-zone-text\">\n            <p class=\"heading invalid\">INVALID FILE TYPE</p>\n            <p class=\"subtext\">SUPPORTED FORMATS</p>\n          </div>\n          <div class=\"file-types\">\n            @for (type of supportedFileTypes(); track $index) {\n              <p\n                class=\"badge\"\n                [class]=\"{\n                  pdf: type === 'pdf',\n                  video: ['avi', 'mp4', 'mov'].includes(type),\n                  image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),\n                }\"\n              >\n                {{ type }}\n              </p>\n            }\n          </div>\n        }\n        <button class=\"cancel-button\">\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"cancel-icon\"\n            (click)=\"cancel()\"\n          ></svg-icon>\n        </button>\n      </div>\n    </div>\n  }\n  @if (isLoadingSkeleton() && skeletonCount() > 0) {\n    <ng-container *ngTemplateOutlet=\"skeletonTemplate\"></ng-container>\n  } @else {\n    <!-- Carousel -->\n    @if (docCount > 0 && (documentVariant || mediaVariant)) {\n      <div #docsViewport class=\"docs\">\n        <div\n          class=\"doc-container\"\n          [class.documents-container-grid]=\"isDocumentsMode()\"\n          [style.transform]=\"isDocumentsMode() ? '' : carouselTransform()\"\n          [style.--carousel-index]=\"isDocumentsMode() ? null : carouselIndex()\"\n        >\n          @for (doc of docs(); track doc.uid) {\n            <cai-document-preview\n              [class.doc-visible]=\"\n                isDetailsSlider() && $index === carouselIndex()\n              \"\n              [class.doc-hidden]=\"\n                isDetailsSlider() && $index !== carouselIndex()\n              \"\n              class=\"doc\"\n              [file]=\"doc\"\n              [tags]=\"documentTags()\"\n              [searchText]=\"searchText()\"\n              [cdlDetailsMode]=\"isDetailsSlider()\"\n              [multipleDetailsDocs]=\"isDetailsSlider() && docCount > 1\"\n              [maxAspectRatio]=\"\n                isDetailsSlider() && docCount > 1\n                  ? maxDetailsAspectRatio()\n                  : null\n              \"\n              [drawerMode]=\"isDrawerMode() || isCardSlider()\"\n              [isCoverDetails]=\"isCoverDetails()\"\n              [viewMode]=\"isDocumentsMode() ? 'large' : 'small'\"\n              (onDelete)=\"handleDelete($event)\"\n              (onDownload)=\"handleDownload($event)\"\n              (onTagChange)=\"handleTagChange($event)\"\n              (onFileNameChange)=\"handleFileNameChange($event)\"\n              (onDocumentPreviewClick)=\"handleDocumentPreviewClick($event)\"\n              (aspectRatioChange)=\"onDocAspectRatioChange($event)\"\n            ></cai-document-preview>\n          }\n        </div>\n        @if (\n          isCardSlider() || isDrawerMode()\n            ? hasCarouselOverflow()\n            : docCount >= 3 || (isDetailsSlider() && docCount > 1)\n        ) {\n          <button\n            class=\"carousel-button carousel-left\"\n            type=\"button\"\n            (click)=\"carouselLeft()\"\n            [disabled]=\"carouselIndex() === 0\"\n            [style.opacity]=\"carouselIndex() === 0 ? '0' : '1'\"\n          >\n            <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n          </button>\n          <button\n            class=\"carousel-button carousel-right\"\n            type=\"button\"\n            (click)=\"carouselRight()\"\n            [disabled]=\"isCarouselAtEnd()\"\n            [style.opacity]=\"isCarouselAtEnd() ? '0' : '1'\"\n          >\n            <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n          </button>\n        }\n        @if (isDetailsSlider() && docCount > 1) {\n          <div class=\"sliders\">\n            @for (doc of docs(); track $index) {\n              <div\n                class=\"slider-item\"\n                (click)=\"carouselIndex.set($index)\"\n                [class.active]=\"$index === carouselIndex()\"\n              ></div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n<!-- Skeleton Template -->\n\n<ng-template #skeletonTemplate>\n  <div\n    class=\"skeleton-container\"\n    [ngClass]=\"{\n      'documents-container-grid': isDocumentsMode(),\n      'drawer-position': isDrawerMode(),\n    }\"\n  >\n    @for (item of skeletonItems(); track $index) {\n      <div class=\"skeleton-item\">\n        <div class=\"skeleton-bar\"></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".container.is-documents-mode{width:100%!important;max-width:100%!important}.container.is-documents-mode .drop-zone-container .drop-zone{width:100%!important}.documents-drag-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0003;z-index:10}.is-documents-mode{display:flex;flex-direction:column;gap:0!important;width:100%!important;height:100%!important}.is-documents-mode .drop-zone-container{display:flex;margin-bottom:4px;background-color:#f7f7f7;z-index:20}.is-documents-mode .drop-zone-container .drop-zone{width:100%;height:120px!important;background-color:transparent;outline-color:#dadada;transition:background-color .2s ease-in-out}.is-documents-mode .drop-zone-container .drop-zone:hover{background-color:#fff!important}.is-documents-mode .drop-zone-container .drop-zone .illustration{width:80px;height:80px}.is-documents-mode .drop-zone-container .drop-zone .drop-zone-text .heading{padding-bottom:0}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents{z-index:1000;position:absolute;top:4px;right:4px;width:26px;height:26px;background-color:transparent;padding:4px}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents .cancel-icon{width:18px;height:18px;color:#919191}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents:hover .cancel-icon{color:#424242}.is-documents-mode .skeleton-container .skeleton-item{width:100%;height:auto;aspect-ratio:1/1;max-width:100%;min-width:302px;min-height:302px;position:relative;border-radius:3px;background-color:#fff}.is-documents-mode .skeleton-container .skeleton-item .skeleton-bar{position:absolute;bottom:8px;left:8px;right:8px;width:auto;height:26px;background-color:#91919133;animation:skeleton-pulse 1s ease-in-out infinite alternate;border-radius:2px}.is-documents-mode .docs{width:100%!important;position:static!important;overflow:visible!important}.is-documents-mode .docs .doc-container .doc{height:auto!important}.is-documents-mode .docs .carousel-button{display:none}.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:4px;justify-items:stretch;align-items:start}@media(min-width:801px)and (max-width:1001px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(2,minmax(302px,1fr))}}@media(min-width:1002px)and (max-width:1307px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(3,minmax(302px,1fr))}}@media(min-width:1308px)and (max-width:1613px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(4,minmax(302px,1fr))}}@media(min-width:1614px)and (max-width:1920px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(5,minmax(302px,1fr))}}@media(min-width:1921px)and (max-width:2227px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(6,minmax(302px,1fr))}}@media(min-width:2228px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}}@keyframes skeleton-pulse{0%{background-color:#91919133}to{background-color:#91919120}}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:100%}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .img-cropper.snapback-animate ::ng-deep .ngx-ic-source-image{transition:transform .22s cubic-bezier(.22,1,.36,1)}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range{width:100%;height:22px;display:flex;align-items:center}.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .range input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;--range-active-color: #6692f1;--range-progress: 50%;background:transparent;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .cancel-button:hover{background-color:#424242;color:#fff}.cropper-overlay .lower-part .cropper-buttons .cancel-button:active{background-color:#1d1d1d;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .submit-button:hover{background-color:#0b49d1;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button:active{background-color:#00179e;color:#fff}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(145,145,145,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.hasCropper{height:204px!important;position:relative}input[type=range]:hover{--range-active-color: $color-blue-500}input[type=range]:active{--range-active-color: $color-blue-700}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;background-color:#fff;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-image:url(/assets/carriera-intern/icons/interaction/cai-thumb.svg);background-repeat:no-repeat;background-position:center;background-size:14px 18px;border-radius:2px;transition:background-color .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-active-color) 0%,var(--range-active-color) var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%);height:6px;transition:background .3s ease-in-out}input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b73ed 0%,#3b73ed var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:active::-webkit-slider-runnable-track{background:linear-gradient(to right,#0b49d1 0%,#0b49d1 var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:hover::-webkit-slider-thumb{cursor:grab}input[type=range]:active::-webkit-slider-thumb{background-image:url(/assets/carriera-intern/icons/interaction/cai-thumb-active.svg);cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}p{margin-bottom:0}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.illustration{width:100px;height:100px}.container{display:flex;gap:6px;position:relative;padding-left:0!important;padding-right:0!important;margin:0!important}.container.picture-container{gap:8px}.container.smallContainer{width:456px!important}.container.largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.smallContainer .docs .doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.largeContainer .docs{max-width:460px!important}.largeContainer .docs .doc-container{display:flex;gap:8px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;cursor:pointer;transition:background-color .2s ease-in-out}.drop-zone:hover{background-color:#eee}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;padding-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .media-subtext{margin-top:4px;color:#919191;font-size:11px;line-height:14px;font-weight:500}.smallView{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.smallView .drop-zone .drop-zone-text .subtext{line-height:14px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.text-white-50{color:#fff}.text-white-100{color:#f7f7f7}.text-white-200{color:#eee}.text-white-300{color:#e5e5e5}.text-white-500{color:#dadada}.text-white-500\\/20{color:#dadada33}.text-white-500\\/40{color:#dadada66}.text-white-500\\/70{color:#dadadab3}.text-white-700{color:#ccc}.text-black-50{color:#aaa}.text-black-100{color:#919191}.text-black-200{color:#6c6c6c}.text-black-300{color:#424242}.text-black-500{color:#2f2f2f}.text-black-500\\/20{color:#2f2f2f33}.text-black-500\\/40{color:#2f2f2f66}.text-black-500\\/70{color:#2f2f2fb3}.text-black-700{color:#1d1d1d}.text-blue-50{color:#e9effd}.text-blue-100{color:#bed0f9}.text-blue-200{color:#92b1f5}.text-blue-300{color:#6692f1}.text-blue-500{color:#3b73ed}.text-blue-500\\/20{color:#3b73ed33}.text-blue-500\\/40{color:#3b73ed66}.text-blue-500\\/70{color:#3b73edb3}.text-blue-700{color:#0b49d1}.text-blue-900{color:#00179e}.text-red-50{color:#fbe9e9}.text-red-100{color:#f4bebe}.text-red-200{color:#ed9292}.text-red-300{color:#e66767}.text-red-500{color:#df3c3c}.text-red-500\\/20{color:#df3c3c33}.text-red-500\\/40{color:#df3c3c66}.text-red-500\\/70{color:#df3c3cb3}.text-red-700{color:#c20c0c}.text-green-50{color:#e7f4f3}.text-green-100{color:#b6dfdb}.text-green-200{color:#86c9c3}.text-green-300{color:#56b4ac}.text-green-500{color:#259f94}.text-green-500\\/20{color:#259f9433}.text-green-500\\/40{color:#259f9466}.text-green-500\\/70{color:#259f94b3}.text-green-700{color:#007a6e}.text-yellow-50{color:#fef4e8}.text-yellow-100{color:#fddeb9}.text-yellow-200{color:#fbc88b}.text-yellow-300{color:#fab15c}.text-yellow-500{color:#f89b2e}.text-yellow-500\\/20{color:#f89b2e33}.text-yellow-500\\/40{color:#f89b2e66}.text-yellow-500\\/70{color:#f89b2eb3}.text-yellow-700{color:#de7700}.text-purple-50{color:#f4ebfd}.text-purple-100{color:#dfc2f9}.text-purple-200{color:#c999f4}.text-purple-300{color:#b370f0}.text-purple-500{color:#9e47ec}.text-purple-500\\/20{color:#9e47ec33}.text-purple-500\\/40{color:#9e47ec66}.text-purple-500\\/70{color:#9e47ecb3}.text-purple-700{color:#7919d0}.text-orange-50{color:#ffefea}.text-orange-100{color:#ffcfc0}.text-orange-200{color:#ffb097}.text-orange-300{color:#ff906d}.text-orange-500{color:#ff7043}.text-orange-500\\/20{color:#ff704333}.text-orange-500\\/40{color:#ff704366}.text-orange-500\\/70{color:#ff7043b3}.text-orange-700{color:#e54715}.text-azure-50{color:#e5f7fc}.text-azure-100{color:#b2e6f7}.text-azure-200{color:#80d6f1}.text-azure-300{color:#4dc5eb}.text-azure-500{color:#1ab5e6}.text-azure-500\\/20{color:#1ab5e633}.text-azure-500\\/40{color:#1ab5e666}.text-azure-500\\/70{color:#1ab5e6b3}.text-azure-700{color:#0093c9}.text-gold-50{color:#faf3e6}.text-gold-100{color:#efdcb4}.text-gold-200{color:#e4c481}.text-gold-300{color:#daad4f}.text-gold-500{color:#cf961d}.text-gold-500\\/20{color:#cf961d33}.text-gold-500\\/40{color:#cf961d66}.text-gold-500\\/70{color:#cf961db3}.text-gold-700{color:#b07000}.text-brown-50{color:#f1ede9}.text-brown-100{color:#d6c9bd}.text-brown-200{color:#bca691}.text-brown-300{color:#a08266}.text-brown-500{color:#865e3a}.text-brown-500\\/20{color:#865e3a33}.text-brown-500\\/40{color:#865e3a66}.text-brown-500\\/70{color:#865e3ab3}.text-brown-700{color:#5f330a}.text-navy-50{color:#e7e7fa}.text-navy-100{color:#b7b6f1}.text-navy-200{color:#8785e8}.text-navy-300{color:#5755df}.text-navy-500{color:#2724d6}.text-navy-500\\/20{color:#2724d633}.text-navy-500\\/40{color:#2724d666}.text-navy-500\\/70{color:#2724d6b3}.text-navy-700{color:#0000b8}.text-lime-50{color:#ecf6e7}.text-lime-100{color:#c5e3b6}.text-lime-200{color:#9ed186}.text-lime-300{color:#77bf56}.text-lime-500{color:#50ac25}.text-lime-500\\/20{color:#50ac2533}.text-lime-500\\/40{color:#50ac2566}.text-lime-500\\/70{color:#50ac25b3}.text-lime-700{color:#238900}.text-magenta-50{color:#fbe9f1}.text-magenta-100{color:#f4bed6}.text-magenta-200{color:#ed93bb}.text-magenta-300{color:#e668a0}.text-magenta-500{color:#df3d85}.text-magenta-500\\/20{color:#df3d8533}.text-magenta-500\\/40{color:#df3d8566}.text-magenta-500\\/70{color:#df3d85b3}.text-magenta-700{color:#c10d5d}.bg-white-50{background-color:#fff}.bg-white-100{background-color:#f7f7f7}.bg-white-200{background-color:#eee}.bg-white-300{background-color:#e5e5e5}.bg-white-500{background-color:#dadada}.bg-white-500\\/20{background-color:#dadada33}.bg-white-500\\/40{background-color:#dadada66}.bg-white-500\\/70{background-color:#dadadab3}.bg-white-700{background-color:#ccc}.bg-black-50{background-color:#aaa}.bg-black-100{background-color:#919191}.bg-black-200{background-color:#6c6c6c}.bg-black-300{background-color:#424242}.bg-black-500{background-color:#2f2f2f}.bg-black-500\\/20{background-color:#2f2f2f33}.bg-black-500\\/40{background-color:#2f2f2f66}.bg-black-500\\/70{background-color:#2f2f2fb3}.bg-black-700{background-color:#1d1d1d}.bg-blue-50{background-color:#e9effd}.bg-blue-100{background-color:#bed0f9}.bg-blue-200{background-color:#92b1f5}.bg-blue-300{background-color:#6692f1}.bg-blue-500{background-color:#3b73ed}.bg-blue-500\\/20{background-color:#3b73ed33}.bg-blue-500\\/40{background-color:#3b73ed66}.bg-blue-500\\/70{background-color:#3b73edb3}.bg-blue-700{background-color:#0b49d1}.bg-blue-900{background-color:#00179e}.bg-red-50{background-color:#fbe9e9}.bg-red-100{background-color:#f4bebe}.bg-red-200{background-color:#ed9292}.bg-red-300{background-color:#e66767}.bg-red-500{background-color:#df3c3c}.bg-red-500\\/20{background-color:#df3c3c33}.bg-red-500\\/40{background-color:#df3c3c66}.bg-red-500\\/70{background-color:#df3c3cb3}.bg-red-700{background-color:#c20c0c}.bg-green-50{background-color:#e7f4f3}.bg-green-100{background-color:#b6dfdb}.bg-green-200{background-color:#86c9c3}.bg-green-300{background-color:#56b4ac}.bg-green-500{background-color:#259f94}.bg-green-500\\/20{background-color:#259f9433}.bg-green-500\\/40{background-color:#259f9466}.bg-green-500\\/70{background-color:#259f94b3}.bg-green-700{background-color:#007a6e}.bg-yellow-50{background-color:#fef4e8}.bg-yellow-100{background-color:#fddeb9}.bg-yellow-200{background-color:#fbc88b}.bg-yellow-300{background-color:#fab15c}.bg-yellow-500{background-color:#f89b2e}.bg-yellow-500\\/20{background-color:#f89b2e33}.bg-yellow-500\\/40{background-color:#f89b2e66}.bg-yellow-500\\/70{background-color:#f89b2eb3}.bg-yellow-700{background-color:#de7700}.bg-purple-50{background-color:#f4ebfd}.bg-purple-100{background-color:#dfc2f9}.bg-purple-200{background-color:#c999f4}.bg-purple-300{background-color:#b370f0}.bg-purple-500{background-color:#9e47ec}.bg-purple-500\\/20{background-color:#9e47ec33}.bg-purple-500\\/40{background-color:#9e47ec66}.bg-purple-500\\/70{background-color:#9e47ecb3}.bg-purple-700{background-color:#7919d0}.bg-orange-50{background-color:#ffefea}.bg-orange-100{background-color:#ffcfc0}.bg-orange-200{background-color:#ffb097}.bg-orange-300{background-color:#ff906d}.bg-orange-500{background-color:#ff7043}.bg-orange-500\\/20{background-color:#ff704333}.bg-orange-500\\/40{background-color:#ff704366}.bg-orange-500\\/70{background-color:#ff7043b3}.bg-orange-700{background-color:#e54715}.bg-azure-50{background-color:#e5f7fc}.bg-azure-100{background-color:#b2e6f7}.bg-azure-200{background-color:#80d6f1}.bg-azure-300{background-color:#4dc5eb}.bg-azure-500{background-color:#1ab5e6}.bg-azure-500\\/20{background-color:#1ab5e633}.bg-azure-500\\/40{background-color:#1ab5e666}.bg-azure-500\\/70{background-color:#1ab5e6b3}.bg-azure-700{background-color:#0093c9}.bg-gold-50{background-color:#faf3e6}.bg-gold-100{background-color:#efdcb4}.bg-gold-200{background-color:#e4c481}.bg-gold-300{background-color:#daad4f}.bg-gold-500{background-color:#cf961d}.bg-gold-500\\/20{background-color:#cf961d33}.bg-gold-500\\/40{background-color:#cf961d66}.bg-gold-500\\/70{background-color:#cf961db3}.bg-gold-700{background-color:#b07000}.bg-brown-50{background-color:#f1ede9}.bg-brown-100{background-color:#d6c9bd}.bg-brown-200{background-color:#bca691}.bg-brown-300{background-color:#a08266}.bg-brown-500{background-color:#865e3a}.bg-brown-500\\/20{background-color:#865e3a33}.bg-brown-500\\/40{background-color:#865e3a66}.bg-brown-500\\/70{background-color:#865e3ab3}.bg-brown-700{background-color:#5f330a}.bg-navy-50{background-color:#e7e7fa}.bg-navy-100{background-color:#b7b6f1}.bg-navy-200{background-color:#8785e8}.bg-navy-300{background-color:#5755df}.bg-navy-500{background-color:#2724d6}.bg-navy-500\\/20{background-color:#2724d633}.bg-navy-500\\/40{background-color:#2724d666}.bg-navy-500\\/70{background-color:#2724d6b3}.bg-navy-700{background-color:#0000b8}.bg-lime-50{background-color:#ecf6e7}.bg-lime-100{background-color:#c5e3b6}.bg-lime-200{background-color:#9ed186}.bg-lime-300{background-color:#77bf56}.bg-lime-500{background-color:#50ac25}.bg-lime-500\\/20{background-color:#50ac2533}.bg-lime-500\\/40{background-color:#50ac2566}.bg-lime-500\\/70{background-color:#50ac25b3}.bg-lime-700{background-color:#238900}.bg-magenta-50{background-color:#fbe9f1}.bg-magenta-100{background-color:#f4bed6}.bg-magenta-200{background-color:#ed93bb}.bg-magenta-300{background-color:#e668a0}.bg-magenta-500{background-color:#df3d85}.bg-magenta-500\\/20{background-color:#df3d8533}.bg-magenta-500\\/40{background-color:#df3d8566}.bg-magenta-500\\/70{background-color:#df3d85b3}.bg-magenta-700{background-color:#c10d5d}.border-white-50{border-color:#fff}.border-white-100{border-color:#f7f7f7}.border-white-200{border-color:#eee}.border-white-300{border-color:#e5e5e5}.border-white-500{border-color:#dadada}.border-white-500\\/20{border-color:#dadada33}.border-white-500\\/40{border-color:#dadada66}.border-white-500\\/70{border-color:#dadadab3}.border-white-700{border-color:#ccc}.border-black-50{border-color:#aaa}.border-black-100{border-color:#919191}.border-black-200{border-color:#6c6c6c}.border-black-300{border-color:#424242}.border-black-500{border-color:#2f2f2f}.border-black-500\\/20{border-color:#2f2f2f33}.border-black-500\\/40{border-color:#2f2f2f66}.border-black-500\\/70{border-color:#2f2f2fb3}.border-black-700{border-color:#1d1d1d}.border-blue-50{border-color:#e9effd}.border-blue-100{border-color:#bed0f9}.border-blue-200{border-color:#92b1f5}.border-blue-300{border-color:#6692f1}.border-blue-500{border-color:#3b73ed}.border-blue-500\\/20{border-color:#3b73ed33}.border-blue-500\\/40{border-color:#3b73ed66}.border-blue-500\\/70{border-color:#3b73edb3}.border-blue-700{border-color:#0b49d1}.border-blue-900{border-color:#00179e}.border-red-50{border-color:#fbe9e9}.border-red-100{border-color:#f4bebe}.border-red-200{border-color:#ed9292}.border-red-300{border-color:#e66767}.border-red-500{border-color:#df3c3c}.border-red-500\\/20{border-color:#df3c3c33}.border-red-500\\/40{border-color:#df3c3c66}.border-red-500\\/70{border-color:#df3c3cb3}.border-red-700{border-color:#c20c0c}.border-green-50{border-color:#e7f4f3}.border-green-100{border-color:#b6dfdb}.border-green-200{border-color:#86c9c3}.border-green-300{border-color:#56b4ac}.border-green-500{border-color:#259f94}.border-green-500\\/20{border-color:#259f9433}.border-green-500\\/40{border-color:#259f9466}.border-green-500\\/70{border-color:#259f94b3}.border-green-700{border-color:#007a6e}.border-yellow-50{border-color:#fef4e8}.border-yellow-100{border-color:#fddeb9}.border-yellow-200{border-color:#fbc88b}.border-yellow-300{border-color:#fab15c}.border-yellow-500{border-color:#f89b2e}.border-yellow-500\\/20{border-color:#f89b2e33}.border-yellow-500\\/40{border-color:#f89b2e66}.border-yellow-500\\/70{border-color:#f89b2eb3}.border-yellow-700{border-color:#de7700}.border-purple-50{border-color:#f4ebfd}.border-purple-100{border-color:#dfc2f9}.border-purple-200{border-color:#c999f4}.border-purple-300{border-color:#b370f0}.border-purple-500{border-color:#9e47ec}.border-purple-500\\/20{border-color:#9e47ec33}.border-purple-500\\/40{border-color:#9e47ec66}.border-purple-500\\/70{border-color:#9e47ecb3}.border-purple-700{border-color:#7919d0}.border-orange-50{border-color:#ffefea}.border-orange-100{border-color:#ffcfc0}.border-orange-200{border-color:#ffb097}.border-orange-300{border-color:#ff906d}.border-orange-500{border-color:#ff7043}.border-orange-500\\/20{border-color:#ff704333}.border-orange-500\\/40{border-color:#ff704366}.border-orange-500\\/70{border-color:#ff7043b3}.border-orange-700{border-color:#e54715}.border-azure-50{border-color:#e5f7fc}.border-azure-100{border-color:#b2e6f7}.border-azure-200{border-color:#80d6f1}.border-azure-300{border-color:#4dc5eb}.border-azure-500{border-color:#1ab5e6}.border-azure-500\\/20{border-color:#1ab5e633}.border-azure-500\\/40{border-color:#1ab5e666}.border-azure-500\\/70{border-color:#1ab5e6b3}.border-azure-700{border-color:#0093c9}.border-gold-50{border-color:#faf3e6}.border-gold-100{border-color:#efdcb4}.border-gold-200{border-color:#e4c481}.border-gold-300{border-color:#daad4f}.border-gold-500{border-color:#cf961d}.border-gold-500\\/20{border-color:#cf961d33}.border-gold-500\\/40{border-color:#cf961d66}.border-gold-500\\/70{border-color:#cf961db3}.border-gold-700{border-color:#b07000}.border-brown-50{border-color:#f1ede9}.border-brown-100{border-color:#d6c9bd}.border-brown-200{border-color:#bca691}.border-brown-300{border-color:#a08266}.border-brown-500{border-color:#865e3a}.border-brown-500\\/20{border-color:#865e3a33}.border-brown-500\\/40{border-color:#865e3a66}.border-brown-500\\/70{border-color:#865e3ab3}.border-brown-700{border-color:#5f330a}.border-navy-50{border-color:#e7e7fa}.border-navy-100{border-color:#b7b6f1}.border-navy-200{border-color:#8785e8}.border-navy-300{border-color:#5755df}.border-navy-500{border-color:#2724d6}.border-navy-500\\/20{border-color:#2724d633}.border-navy-500\\/40{border-color:#2724d666}.border-navy-500\\/70{border-color:#2724d6b3}.border-navy-700{border-color:#0000b8}.border-lime-50{border-color:#ecf6e7}.border-lime-100{border-color:#c5e3b6}.border-lime-200{border-color:#9ed186}.border-lime-300{border-color:#77bf56}.border-lime-500{border-color:#50ac25}.border-lime-500\\/20{border-color:#50ac2533}.border-lime-500\\/40{border-color:#50ac2566}.border-lime-500\\/70{border-color:#50ac25b3}.border-lime-700{border-color:#238900}.border-magenta-50{border-color:#fbe9f1}.border-magenta-100{border-color:#f4bed6}.border-magenta-200{border-color:#ed93bb}.border-magenta-300{border-color:#e668a0}.border-magenta-500{border-color:#df3d85}.border-magenta-500\\/20{border-color:#df3d8533}.border-magenta-500\\/40{border-color:#df3d8566}.border-magenta-500\\/70{border-color:#df3d85b3}.border-magenta-700{border-color:#c10d5d}.fill-white-50{fill:#fff}.fill-white-100{fill:#f7f7f7}.fill-white-200{fill:#eee}.fill-white-300{fill:#e5e5e5}.fill-white-500{fill:#dadada}.fill-white-500\\/20{fill:#dadada33}.fill-white-500\\/40{fill:#dadada66}.fill-white-500\\/70{fill:#dadadab3}.fill-white-700{fill:#ccc}.fill-black-50{fill:#aaa}.fill-black-100{fill:#919191}.fill-black-200{fill:#6c6c6c}.fill-black-300{fill:#424242}.fill-black-500{fill:#2f2f2f}.fill-black-500\\/20{fill:#2f2f2f33}.fill-black-500\\/40{fill:#2f2f2f66}.fill-black-500\\/70{fill:#2f2f2fb3}.fill-black-700{fill:#1d1d1d}.fill-blue-50{fill:#e9effd}.fill-blue-100{fill:#bed0f9}.fill-blue-200{fill:#92b1f5}.fill-blue-300{fill:#6692f1}.fill-blue-500{fill:#3b73ed}.fill-blue-500\\/20{fill:#3b73ed33}.fill-blue-500\\/40{fill:#3b73ed66}.fill-blue-500\\/70{fill:#3b73edb3}.fill-blue-700{fill:#0b49d1}.fill-blue-900{fill:#00179e}.fill-red-50{fill:#fbe9e9}.fill-red-100{fill:#f4bebe}.fill-red-200{fill:#ed9292}.fill-red-300{fill:#e66767}.fill-red-500{fill:#df3c3c}.fill-red-500\\/20{fill:#df3c3c33}.fill-red-500\\/40{fill:#df3c3c66}.fill-red-500\\/70{fill:#df3c3cb3}.fill-red-700{fill:#c20c0c}.fill-green-50{fill:#e7f4f3}.fill-green-100{fill:#b6dfdb}.fill-green-200{fill:#86c9c3}.fill-green-300{fill:#56b4ac}.fill-green-500{fill:#259f94}.fill-green-500\\/20{fill:#259f9433}.fill-green-500\\/40{fill:#259f9466}.fill-green-500\\/70{fill:#259f94b3}.fill-green-700{fill:#007a6e}.fill-yellow-50{fill:#fef4e8}.fill-yellow-100{fill:#fddeb9}.fill-yellow-200{fill:#fbc88b}.fill-yellow-300{fill:#fab15c}.fill-yellow-500{fill:#f89b2e}.fill-yellow-500\\/20{fill:#f89b2e33}.fill-yellow-500\\/40{fill:#f89b2e66}.fill-yellow-500\\/70{fill:#f89b2eb3}.fill-yellow-700{fill:#de7700}.fill-purple-50{fill:#f4ebfd}.fill-purple-100{fill:#dfc2f9}.fill-purple-200{fill:#c999f4}.fill-purple-300{fill:#b370f0}.fill-purple-500{fill:#9e47ec}.fill-purple-500\\/20{fill:#9e47ec33}.fill-purple-500\\/40{fill:#9e47ec66}.fill-purple-500\\/70{fill:#9e47ecb3}.fill-purple-700{fill:#7919d0}.fill-orange-50{fill:#ffefea}.fill-orange-100{fill:#ffcfc0}.fill-orange-200{fill:#ffb097}.fill-orange-300{fill:#ff906d}.fill-orange-500{fill:#ff7043}.fill-orange-500\\/20{fill:#ff704333}.fill-orange-500\\/40{fill:#ff704366}.fill-orange-500\\/70{fill:#ff7043b3}.fill-orange-700{fill:#e54715}.fill-azure-50{fill:#e5f7fc}.fill-azure-100{fill:#b2e6f7}.fill-azure-200{fill:#80d6f1}.fill-azure-300{fill:#4dc5eb}.fill-azure-500{fill:#1ab5e6}.fill-azure-500\\/20{fill:#1ab5e633}.fill-azure-500\\/40{fill:#1ab5e666}.fill-azure-500\\/70{fill:#1ab5e6b3}.fill-azure-700{fill:#0093c9}.fill-gold-50{fill:#faf3e6}.fill-gold-100{fill:#efdcb4}.fill-gold-200{fill:#e4c481}.fill-gold-300{fill:#daad4f}.fill-gold-500{fill:#cf961d}.fill-gold-500\\/20{fill:#cf961d33}.fill-gold-500\\/40{fill:#cf961d66}.fill-gold-500\\/70{fill:#cf961db3}.fill-gold-700{fill:#b07000}.fill-brown-50{fill:#f1ede9}.fill-brown-100{fill:#d6c9bd}.fill-brown-200{fill:#bca691}.fill-brown-300{fill:#a08266}.fill-brown-500{fill:#865e3a}.fill-brown-500\\/20{fill:#865e3a33}.fill-brown-500\\/40{fill:#865e3a66}.fill-brown-500\\/70{fill:#865e3ab3}.fill-brown-700{fill:#5f330a}.fill-navy-50{fill:#e7e7fa}.fill-navy-100{fill:#b7b6f1}.fill-navy-200{fill:#8785e8}.fill-navy-300{fill:#5755df}.fill-navy-500{fill:#2724d6}.fill-navy-500\\/20{fill:#2724d633}.fill-navy-500\\/40{fill:#2724d666}.fill-navy-500\\/70{fill:#2724d6b3}.fill-navy-700{fill:#0000b8}.fill-lime-50{fill:#ecf6e7}.fill-lime-100{fill:#c5e3b6}.fill-lime-200{fill:#9ed186}.fill-lime-300{fill:#77bf56}.fill-lime-500{fill:#50ac25}.fill-lime-500\\/20{fill:#50ac2533}.fill-lime-500\\/40{fill:#50ac2566}.fill-lime-500\\/70{fill:#50ac25b3}.fill-lime-700{fill:#238900}.fill-magenta-50{fill:#fbe9f1}.fill-magenta-100{fill:#f4bed6}.fill-magenta-200{fill:#ed93bb}.fill-magenta-300{fill:#e668a0}.fill-magenta-500{fill:#df3d85}.fill-magenta-500\\/20{fill:#df3d8533}.fill-magenta-500\\/40{fill:#df3d8566}.fill-magenta-500\\/70{fill:#df3d85b3}.fill-magenta-700{fill:#c10d5d}.stroke-white-50{stroke:#fff}.stroke-white-100{stroke:#f7f7f7}.stroke-white-200{stroke:#eee}.stroke-white-300{stroke:#e5e5e5}.stroke-white-500{stroke:#dadada}.stroke-white-500\\/20{stroke:#dadada33}.stroke-white-500\\/40{stroke:#dadada66}.stroke-white-500\\/70{stroke:#dadadab3}.stroke-white-700{stroke:#ccc}.stroke-black-50{stroke:#aaa}.stroke-black-100{stroke:#919191}.stroke-black-200{stroke:#6c6c6c}.stroke-black-300{stroke:#424242}.stroke-black-500{stroke:#2f2f2f}.stroke-black-500\\/20{stroke:#2f2f2f33}.stroke-black-500\\/40{stroke:#2f2f2f66}.stroke-black-500\\/70{stroke:#2f2f2fb3}.stroke-black-700{stroke:#1d1d1d}.stroke-blue-50{stroke:#e9effd}.stroke-blue-100{stroke:#bed0f9}.stroke-blue-200{stroke:#92b1f5}.stroke-blue-300{stroke:#6692f1}.stroke-blue-500{stroke:#3b73ed}.stroke-blue-500\\/20{stroke:#3b73ed33}.stroke-blue-500\\/40{stroke:#3b73ed66}.stroke-blue-500\\/70{stroke:#3b73edb3}.stroke-blue-700{stroke:#0b49d1}.stroke-blue-900{stroke:#00179e}.stroke-red-50{stroke:#fbe9e9}.stroke-red-100{stroke:#f4bebe}.stroke-red-200{stroke:#ed9292}.stroke-red-300{stroke:#e66767}.stroke-red-500{stroke:#df3c3c}.stroke-red-500\\/20{stroke:#df3c3c33}.stroke-red-500\\/40{stroke:#df3c3c66}.stroke-red-500\\/70{stroke:#df3c3cb3}.stroke-red-700{stroke:#c20c0c}.stroke-green-50{stroke:#e7f4f3}.stroke-green-100{stroke:#b6dfdb}.stroke-green-200{stroke:#86c9c3}.stroke-green-300{stroke:#56b4ac}.stroke-green-500{stroke:#259f94}.stroke-green-500\\/20{stroke:#259f9433}.stroke-green-500\\/40{stroke:#259f9466}.stroke-green-500\\/70{stroke:#259f94b3}.stroke-green-700{stroke:#007a6e}.stroke-yellow-50{stroke:#fef4e8}.stroke-yellow-100{stroke:#fddeb9}.stroke-yellow-200{stroke:#fbc88b}.stroke-yellow-300{stroke:#fab15c}.stroke-yellow-500{stroke:#f89b2e}.stroke-yellow-500\\/20{stroke:#f89b2e33}.stroke-yellow-500\\/40{stroke:#f89b2e66}.stroke-yellow-500\\/70{stroke:#f89b2eb3}.stroke-yellow-700{stroke:#de7700}.stroke-purple-50{stroke:#f4ebfd}.stroke-purple-100{stroke:#dfc2f9}.stroke-purple-200{stroke:#c999f4}.stroke-purple-300{stroke:#b370f0}.stroke-purple-500{stroke:#9e47ec}.stroke-purple-500\\/20{stroke:#9e47ec33}.stroke-purple-500\\/40{stroke:#9e47ec66}.stroke-purple-500\\/70{stroke:#9e47ecb3}.stroke-purple-700{stroke:#7919d0}.stroke-orange-50{stroke:#ffefea}.stroke-orange-100{stroke:#ffcfc0}.stroke-orange-200{stroke:#ffb097}.stroke-orange-300{stroke:#ff906d}.stroke-orange-500{stroke:#ff7043}.stroke-orange-500\\/20{stroke:#ff704333}.stroke-orange-500\\/40{stroke:#ff704366}.stroke-orange-500\\/70{stroke:#ff7043b3}.stroke-orange-700{stroke:#e54715}.stroke-azure-50{stroke:#e5f7fc}.stroke-azure-100{stroke:#b2e6f7}.stroke-azure-200{stroke:#80d6f1}.stroke-azure-300{stroke:#4dc5eb}.stroke-azure-500{stroke:#1ab5e6}.stroke-azure-500\\/20{stroke:#1ab5e633}.stroke-azure-500\\/40{stroke:#1ab5e666}.stroke-azure-500\\/70{stroke:#1ab5e6b3}.stroke-azure-700{stroke:#0093c9}.stroke-gold-50{stroke:#faf3e6}.stroke-gold-100{stroke:#efdcb4}.stroke-gold-200{stroke:#e4c481}.stroke-gold-300{stroke:#daad4f}.stroke-gold-500{stroke:#cf961d}.stroke-gold-500\\/20{stroke:#cf961d33}.stroke-gold-500\\/40{stroke:#cf961d66}.stroke-gold-500\\/70{stroke:#cf961db3}.stroke-gold-700{stroke:#b07000}.stroke-brown-50{stroke:#f1ede9}.stroke-brown-100{stroke:#d6c9bd}.stroke-brown-200{stroke:#bca691}.stroke-brown-300{stroke:#a08266}.stroke-brown-500{stroke:#865e3a}.stroke-brown-500\\/20{stroke:#865e3a33}.stroke-brown-500\\/40{stroke:#865e3a66}.stroke-brown-500\\/70{stroke:#865e3ab3}.stroke-brown-700{stroke:#5f330a}.stroke-navy-50{stroke:#e7e7fa}.stroke-navy-100{stroke:#b7b6f1}.stroke-navy-200{stroke:#8785e8}.stroke-navy-300{stroke:#5755df}.stroke-navy-500{stroke:#2724d6}.stroke-navy-500\\/20{stroke:#2724d633}.stroke-navy-500\\/40{stroke:#2724d666}.stroke-navy-500\\/70{stroke:#2724d6b3}.stroke-navy-700{stroke:#0000b8}.stroke-lime-50{stroke:#ecf6e7}.stroke-lime-100{stroke:#c5e3b6}.stroke-lime-200{stroke:#9ed186}.stroke-lime-300{stroke:#77bf56}.stroke-lime-500{stroke:#50ac25}.stroke-lime-500\\/20{stroke:#50ac2533}.stroke-lime-500\\/40{stroke:#50ac2566}.stroke-lime-500\\/70{stroke:#50ac25b3}.stroke-lime-700{stroke:#238900}.stroke-magenta-50{stroke:#fbe9f1}.stroke-magenta-100{stroke:#f4bed6}.stroke-magenta-200{stroke:#ed93bb}.stroke-magenta-300{stroke:#e668a0}.stroke-magenta-500{stroke:#df3d85}.stroke-magenta-500\\/20{stroke:#df3d8533}.stroke-magenta-500\\/40{stroke:#df3d8566}.stroke-magenta-500\\/70{stroke:#df3d85b3}.stroke-magenta-700{stroke:#c10d5d}.hover\\:text-white-50:hover{color:#fff}.hover\\:text-white-100:hover{color:#f7f7f7}.hover\\:text-white-200:hover{color:#eee}.hover\\:text-white-300:hover{color:#e5e5e5}.hover\\:text-white-500:hover{color:#dadada}.hover\\:text-white-500:hover\\/20{color:#dadada33}.hover\\:text-white-500:hover\\/40{color:#dadada66}.hover\\:text-white-500:hover\\/70{color:#dadadab3}.hover\\:text-white-700:hover{color:#ccc}.hover\\:text-black-50:hover{color:#aaa}.hover\\:text-black-100:hover{color:#919191}.hover\\:text-black-200:hover{color:#6c6c6c}.hover\\:text-black-300:hover{color:#424242}.hover\\:text-black-500:hover{color:#2f2f2f}.hover\\:text-black-500:hover\\/20{color:#2f2f2f33}.hover\\:text-black-500:hover\\/40{color:#2f2f2f66}.hover\\:text-black-500:hover\\/70{color:#2f2f2fb3}.hover\\:text-black-700:hover{color:#1d1d1d}.hover\\:text-blue-50:hover{color:#e9effd}.hover\\:text-blue-100:hover{color:#bed0f9}.hover\\:text-blue-200:hover{color:#92b1f5}.hover\\:text-blue-300:hover{color:#6692f1}.hover\\:text-blue-500:hover{color:#3b73ed}.hover\\:text-blue-500:hover\\/20{color:#3b73ed33}.hover\\:text-blue-500:hover\\/40{color:#3b73ed66}.hover\\:text-blue-500:hover\\/70{color:#3b73edb3}.hover\\:text-blue-700:hover{color:#0b49d1}.hover\\:text-blue-900:hover{color:#00179e}.hover\\:text-red-50:hover{color:#fbe9e9}.hover\\:text-red-100:hover{color:#f4bebe}.hover\\:text-red-200:hover{color:#ed9292}.hover\\:text-red-300:hover{color:#e66767}.hover\\:text-red-500:hover{color:#df3c3c}.hover\\:text-red-500:hover\\/20{color:#df3c3c33}.hover\\:text-red-500:hover\\/40{color:#df3c3c66}.hover\\:text-red-500:hover\\/70{color:#df3c3cb3}.hover\\:text-red-700:hover{color:#c20c0c}.hover\\:text-green-50:hover{color:#e7f4f3}.hover\\:text-green-100:hover{color:#b6dfdb}.hover\\:text-green-200:hover{color:#86c9c3}.hover\\:text-green-300:hover{color:#56b4ac}.hover\\:text-green-500:hover{color:#259f94}.hover\\:text-green-500:hover\\/20{color:#259f9433}.hover\\:text-green-500:hover\\/40{color:#259f9466}.hover\\:text-green-500:hover\\/70{color:#259f94b3}.hover\\:text-green-700:hover{color:#007a6e}.hover\\:text-yellow-50:hover{color:#fef4e8}.hover\\:text-yellow-100:hover{color:#fddeb9}.hover\\:text-yellow-200:hover{color:#fbc88b}.hover\\:text-yellow-300:hover{color:#fab15c}.hover\\:text-yellow-500:hover{color:#f89b2e}.hover\\:text-yellow-500:hover\\/20{color:#f89b2e33}.hover\\:text-yellow-500:hover\\/40{color:#f89b2e66}.hover\\:text-yellow-500:hover\\/70{color:#f89b2eb3}.hover\\:text-yellow-700:hover{color:#de7700}.hover\\:text-purple-50:hover{color:#f4ebfd}.hover\\:text-purple-100:hover{color:#dfc2f9}.hover\\:text-purple-200:hover{color:#c999f4}.hover\\:text-purple-300:hover{color:#b370f0}.hover\\:text-purple-500:hover{color:#9e47ec}.hover\\:text-purple-500:hover\\/20{color:#9e47ec33}.hover\\:text-purple-500:hover\\/40{color:#9e47ec66}.hover\\:text-purple-500:hover\\/70{color:#9e47ecb3}.hover\\:text-purple-700:hover{color:#7919d0}.hover\\:text-orange-50:hover{color:#ffefea}.hover\\:text-orange-100:hover{color:#ffcfc0}.hover\\:text-orange-200:hover{color:#ffb097}.hover\\:text-orange-300:hover{color:#ff906d}.hover\\:text-orange-500:hover{color:#ff7043}.hover\\:text-orange-500:hover\\/20{color:#ff704333}.hover\\:text-orange-500:hover\\/40{color:#ff704366}.hover\\:text-orange-500:hover\\/70{color:#ff7043b3}.hover\\:text-orange-700:hover{color:#e54715}.hover\\:text-azure-50:hover{color:#e5f7fc}.hover\\:text-azure-100:hover{color:#b2e6f7}.hover\\:text-azure-200:hover{color:#80d6f1}.hover\\:text-azure-300:hover{color:#4dc5eb}.hover\\:text-azure-500:hover{color:#1ab5e6}.hover\\:text-azure-500:hover\\/20{color:#1ab5e633}.hover\\:text-azure-500:hover\\/40{color:#1ab5e666}.hover\\:text-azure-500:hover\\/70{color:#1ab5e6b3}.hover\\:text-azure-700:hover{color:#0093c9}.hover\\:text-gold-50:hover{color:#faf3e6}.hover\\:text-gold-100:hover{color:#efdcb4}.hover\\:text-gold-200:hover{color:#e4c481}.hover\\:text-gold-300:hover{color:#daad4f}.hover\\:text-gold-500:hover{color:#cf961d}.hover\\:text-gold-500:hover\\/20{color:#cf961d33}.hover\\:text-gold-500:hover\\/40{color:#cf961d66}.hover\\:text-gold-500:hover\\/70{color:#cf961db3}.hover\\:text-gold-700:hover{color:#b07000}.hover\\:text-brown-50:hover{color:#f1ede9}.hover\\:text-brown-100:hover{color:#d6c9bd}.hover\\:text-brown-200:hover{color:#bca691}.hover\\:text-brown-300:hover{color:#a08266}.hover\\:text-brown-500:hover{color:#865e3a}.hover\\:text-brown-500:hover\\/20{color:#865e3a33}.hover\\:text-brown-500:hover\\/40{color:#865e3a66}.hover\\:text-brown-500:hover\\/70{color:#865e3ab3}.hover\\:text-brown-700:hover{color:#5f330a}.hover\\:text-navy-50:hover{color:#e7e7fa}.hover\\:text-navy-100:hover{color:#b7b6f1}.hover\\:text-navy-200:hover{color:#8785e8}.hover\\:text-navy-300:hover{color:#5755df}.hover\\:text-navy-500:hover{color:#2724d6}.hover\\:text-navy-500:hover\\/20{color:#2724d633}.hover\\:text-navy-500:hover\\/40{color:#2724d666}.hover\\:text-navy-500:hover\\/70{color:#2724d6b3}.hover\\:text-navy-700:hover{color:#0000b8}.hover\\:text-lime-50:hover{color:#ecf6e7}.hover\\:text-lime-100:hover{color:#c5e3b6}.hover\\:text-lime-200:hover{color:#9ed186}.hover\\:text-lime-300:hover{color:#77bf56}.hover\\:text-lime-500:hover{color:#50ac25}.hover\\:text-lime-500:hover\\/20{color:#50ac2533}.hover\\:text-lime-500:hover\\/40{color:#50ac2566}.hover\\:text-lime-500:hover\\/70{color:#50ac25b3}.hover\\:text-lime-700:hover{color:#238900}.hover\\:text-magenta-50:hover{color:#fbe9f1}.hover\\:text-magenta-100:hover{color:#f4bed6}.hover\\:text-magenta-200:hover{color:#ed93bb}.hover\\:text-magenta-300:hover{color:#e668a0}.hover\\:text-magenta-500:hover{color:#df3d85}.hover\\:text-magenta-500:hover\\/20{color:#df3d8533}.hover\\:text-magenta-500:hover\\/40{color:#df3d8566}.hover\\:text-magenta-500:hover\\/70{color:#df3d85b3}.hover\\:text-magenta-700:hover{color:#c10d5d}.hover\\:bg-white-50:hover{background-color:#fff}.hover\\:bg-white-100:hover{background-color:#f7f7f7}.hover\\:bg-white-200:hover{background-color:#eee}.hover\\:bg-white-300:hover{background-color:#e5e5e5}.hover\\:bg-white-500:hover{background-color:#dadada}.hover\\:bg-white-500:hover\\/20{background-color:#dadada33}.hover\\:bg-white-500:hover\\/40{background-color:#dadada66}.hover\\:bg-white-500:hover\\/70{background-color:#dadadab3}.hover\\:bg-white-700:hover{background-color:#ccc}.hover\\:bg-black-50:hover{background-color:#aaa}.hover\\:bg-black-100:hover{background-color:#919191}.hover\\:bg-black-200:hover{background-color:#6c6c6c}.hover\\:bg-black-300:hover{background-color:#424242}.hover\\:bg-black-500:hover{background-color:#2f2f2f}.hover\\:bg-black-500:hover\\/20{background-color:#2f2f2f33}.hover\\:bg-black-500:hover\\/40{background-color:#2f2f2f66}.hover\\:bg-black-500:hover\\/70{background-color:#2f2f2fb3}.hover\\:bg-black-700:hover{background-color:#1d1d1d}.hover\\:bg-blue-50:hover{background-color:#e9effd}.hover\\:bg-blue-100:hover{background-color:#bed0f9}.hover\\:bg-blue-200:hover{background-color:#92b1f5}.hover\\:bg-blue-300:hover{background-color:#6692f1}.hover\\:bg-blue-500:hover{background-color:#3b73ed}.hover\\:bg-blue-500:hover\\/20{background-color:#3b73ed33}.hover\\:bg-blue-500:hover\\/40{background-color:#3b73ed66}.hover\\:bg-blue-500:hover\\/70{background-color:#3b73edb3}.hover\\:bg-blue-700:hover{background-color:#0b49d1}.hover\\:bg-blue-900:hover{background-color:#00179e}.hover\\:bg-red-50:hover{background-color:#fbe9e9}.hover\\:bg-red-100:hover{background-color:#f4bebe}.hover\\:bg-red-200:hover{background-color:#ed9292}.hover\\:bg-red-300:hover{background-color:#e66767}.hover\\:bg-red-500:hover{background-color:#df3c3c}.hover\\:bg-red-500:hover\\/20{background-color:#df3c3c33}.hover\\:bg-red-500:hover\\/40{background-color:#df3c3c66}.hover\\:bg-red-500:hover\\/70{background-color:#df3c3cb3}.hover\\:bg-red-700:hover{background-color:#c20c0c}.hover\\:bg-green-50:hover{background-color:#e7f4f3}.hover\\:bg-green-100:hover{background-color:#b6dfdb}.hover\\:bg-green-200:hover{background-color:#86c9c3}.hover\\:bg-green-300:hover{background-color:#56b4ac}.hover\\:bg-green-500:hover{background-color:#259f94}.hover\\:bg-green-500:hover\\/20{background-color:#259f9433}.hover\\:bg-green-500:hover\\/40{background-color:#259f9466}.hover\\:bg-green-500:hover\\/70{background-color:#259f94b3}.hover\\:bg-green-700:hover{background-color:#007a6e}.hover\\:bg-yellow-50:hover{background-color:#fef4e8}.hover\\:bg-yellow-100:hover{background-color:#fddeb9}.hover\\:bg-yellow-200:hover{background-color:#fbc88b}.hover\\:bg-yellow-300:hover{background-color:#fab15c}.hover\\:bg-yellow-500:hover{background-color:#f89b2e}.hover\\:bg-yellow-500:hover\\/20{background-color:#f89b2e33}.hover\\:bg-yellow-500:hover\\/40{background-color:#f89b2e66}.hover\\:bg-yellow-500:hover\\/70{background-color:#f89b2eb3}.hover\\:bg-yellow-700:hover{background-color:#de7700}.hover\\:bg-purple-50:hover{background-color:#f4ebfd}.hover\\:bg-purple-100:hover{background-color:#dfc2f9}.hover\\:bg-purple-200:hover{background-color:#c999f4}.hover\\:bg-purple-300:hover{background-color:#b370f0}.hover\\:bg-purple-500:hover{background-color:#9e47ec}.hover\\:bg-purple-500:hover\\/20{background-color:#9e47ec33}.hover\\:bg-purple-500:hover\\/40{background-color:#9e47ec66}.hover\\:bg-purple-500:hover\\/70{background-color:#9e47ecb3}.hover\\:bg-purple-700:hover{background-color:#7919d0}.hover\\:bg-orange-50:hover{background-color:#ffefea}.hover\\:bg-orange-100:hover{background-color:#ffcfc0}.hover\\:bg-orange-200:hover{background-color:#ffb097}.hover\\:bg-orange-300:hover{background-color:#ff906d}.hover\\:bg-orange-500:hover{background-color:#ff7043}.hover\\:bg-orange-500:hover\\/20{background-color:#ff704333}.hover\\:bg-orange-500:hover\\/40{background-color:#ff704366}.hover\\:bg-orange-500:hover\\/70{background-color:#ff7043b3}.hover\\:bg-orange-700:hover{background-color:#e54715}.hover\\:bg-azure-50:hover{background-color:#e5f7fc}.hover\\:bg-azure-100:hover{background-color:#b2e6f7}.hover\\:bg-azure-200:hover{background-color:#80d6f1}.hover\\:bg-azure-300:hover{background-color:#4dc5eb}.hover\\:bg-azure-500:hover{background-color:#1ab5e6}.hover\\:bg-azure-500:hover\\/20{background-color:#1ab5e633}.hover\\:bg-azure-500:hover\\/40{background-color:#1ab5e666}.hover\\:bg-azure-500:hover\\/70{background-color:#1ab5e6b3}.hover\\:bg-azure-700:hover{background-color:#0093c9}.hover\\:bg-gold-50:hover{background-color:#faf3e6}.hover\\:bg-gold-100:hover{background-color:#efdcb4}.hover\\:bg-gold-200:hover{background-color:#e4c481}.hover\\:bg-gold-300:hover{background-color:#daad4f}.hover\\:bg-gold-500:hover{background-color:#cf961d}.hover\\:bg-gold-500:hover\\/20{background-color:#cf961d33}.hover\\:bg-gold-500:hover\\/40{background-color:#cf961d66}.hover\\:bg-gold-500:hover\\/70{background-color:#cf961db3}.hover\\:bg-gold-700:hover{background-color:#b07000}.hover\\:bg-brown-50:hover{background-color:#f1ede9}.hover\\:bg-brown-100:hover{background-color:#d6c9bd}.hover\\:bg-brown-200:hover{background-color:#bca691}.hover\\:bg-brown-300:hover{background-color:#a08266}.hover\\:bg-brown-500:hover{background-color:#865e3a}.hover\\:bg-brown-500:hover\\/20{background-color:#865e3a33}.hover\\:bg-brown-500:hover\\/40{background-color:#865e3a66}.hover\\:bg-brown-500:hover\\/70{background-color:#865e3ab3}.hover\\:bg-brown-700:hover{background-color:#5f330a}.hover\\:bg-navy-50:hover{background-color:#e7e7fa}.hover\\:bg-navy-100:hover{background-color:#b7b6f1}.hover\\:bg-navy-200:hover{background-color:#8785e8}.hover\\:bg-navy-300:hover{background-color:#5755df}.hover\\:bg-navy-500:hover{background-color:#2724d6}.hover\\:bg-navy-500:hover\\/20{background-color:#2724d633}.hover\\:bg-navy-500:hover\\/40{background-color:#2724d666}.hover\\:bg-navy-500:hover\\/70{background-color:#2724d6b3}.hover\\:bg-navy-700:hover{background-color:#0000b8}.hover\\:bg-lime-50:hover{background-color:#ecf6e7}.hover\\:bg-lime-100:hover{background-color:#c5e3b6}.hover\\:bg-lime-200:hover{background-color:#9ed186}.hover\\:bg-lime-300:hover{background-color:#77bf56}.hover\\:bg-lime-500:hover{background-color:#50ac25}.hover\\:bg-lime-500:hover\\/20{background-color:#50ac2533}.hover\\:bg-lime-500:hover\\/40{background-color:#50ac2566}.hover\\:bg-lime-500:hover\\/70{background-color:#50ac25b3}.hover\\:bg-lime-700:hover{background-color:#238900}.hover\\:bg-magenta-50:hover{background-color:#fbe9f1}.hover\\:bg-magenta-100:hover{background-color:#f4bed6}.hover\\:bg-magenta-200:hover{background-color:#ed93bb}.hover\\:bg-magenta-300:hover{background-color:#e668a0}.hover\\:bg-magenta-500:hover{background-color:#df3d85}.hover\\:bg-magenta-500:hover\\/20{background-color:#df3d8533}.hover\\:bg-magenta-500:hover\\/40{background-color:#df3d8566}.hover\\:bg-magenta-500:hover\\/70{background-color:#df3d85b3}.hover\\:bg-magenta-700:hover{background-color:#c10d5d}.focus\\:text-white-50:focus-visible{color:#fff}.focus\\:text-white-100:focus-visible{color:#f7f7f7}.focus\\:text-white-200:focus-visible{color:#eee}.focus\\:text-white-300:focus-visible{color:#e5e5e5}.focus\\:text-white-500:focus-visible{color:#dadada}.focus\\:text-white-500:focus-visible\\/20{color:#dadada33}.focus\\:text-white-500:focus-visible\\/40{color:#dadada66}.focus\\:text-white-500:focus-visible\\/70{color:#dadadab3}.focus\\:text-white-700:focus-visible{color:#ccc}.focus\\:text-black-50:focus-visible{color:#aaa}.focus\\:text-black-100:focus-visible{color:#919191}.focus\\:text-black-200:focus-visible{color:#6c6c6c}.focus\\:text-black-300:focus-visible{color:#424242}.focus\\:text-black-500:focus-visible{color:#2f2f2f}.focus\\:text-black-500:focus-visible\\/20{color:#2f2f2f33}.focus\\:text-black-500:focus-visible\\/40{color:#2f2f2f66}.focus\\:text-black-500:focus-visible\\/70{color:#2f2f2fb3}.focus\\:text-black-700:focus-visible{color:#1d1d1d}.focus\\:text-blue-50:focus-visible{color:#e9effd}.focus\\:text-blue-100:focus-visible{color:#bed0f9}.focus\\:text-blue-200:focus-visible{color:#92b1f5}.focus\\:text-blue-300:focus-visible{color:#6692f1}.focus\\:text-blue-500:focus-visible{color:#3b73ed}.focus\\:text-blue-500:focus-visible\\/20{color:#3b73ed33}.focus\\:text-blue-500:focus-visible\\/40{color:#3b73ed66}.focus\\:text-blue-500:focus-visible\\/70{color:#3b73edb3}.focus\\:text-blue-700:focus-visible{color:#0b49d1}.focus\\:text-blue-900:focus-visible{color:#00179e}.focus\\:text-red-50:focus-visible{color:#fbe9e9}.focus\\:text-red-100:focus-visible{color:#f4bebe}.focus\\:text-red-200:focus-visible{color:#ed9292}.focus\\:text-red-300:focus-visible{color:#e66767}.focus\\:text-red-500:focus-visible{color:#df3c3c}.focus\\:text-red-500:focus-visible\\/20{color:#df3c3c33}.focus\\:text-red-500:focus-visible\\/40{color:#df3c3c66}.focus\\:text-red-500:focus-visible\\/70{color:#df3c3cb3}.focus\\:text-red-700:focus-visible{color:#c20c0c}.focus\\:text-green-50:focus-visible{color:#e7f4f3}.focus\\:text-green-100:focus-visible{color:#b6dfdb}.focus\\:text-green-200:focus-visible{color:#86c9c3}.focus\\:text-green-300:focus-visible{color:#56b4ac}.focus\\:text-green-500:focus-visible{color:#259f94}.focus\\:text-green-500:focus-visible\\/20{color:#259f9433}.focus\\:text-green-500:focus-visible\\/40{color:#259f9466}.focus\\:text-green-500:focus-visible\\/70{color:#259f94b3}.focus\\:text-green-700:focus-visible{color:#007a6e}.focus\\:text-yellow-50:focus-visible{color:#fef4e8}.focus\\:text-yellow-100:focus-visible{color:#fddeb9}.focus\\:text-yellow-200:focus-visible{color:#fbc88b}.focus\\:text-yellow-300:focus-visible{color:#fab15c}.focus\\:text-yellow-500:focus-visible{color:#f89b2e}.focus\\:text-yellow-500:focus-visible\\/20{color:#f89b2e33}.focus\\:text-yellow-500:focus-visible\\/40{color:#f89b2e66}.focus\\:text-yellow-500:focus-visible\\/70{color:#f89b2eb3}.focus\\:text-yellow-700:focus-visible{color:#de7700}.focus\\:text-purple-50:focus-visible{color:#f4ebfd}.focus\\:text-purple-100:focus-visible{color:#dfc2f9}.focus\\:text-purple-200:focus-visible{color:#c999f4}.focus\\:text-purple-300:focus-visible{color:#b370f0}.focus\\:text-purple-500:focus-visible{color:#9e47ec}.focus\\:text-purple-500:focus-visible\\/20{color:#9e47ec33}.focus\\:text-purple-500:focus-visible\\/40{color:#9e47ec66}.focus\\:text-purple-500:focus-visible\\/70{color:#9e47ecb3}.focus\\:text-purple-700:focus-visible{color:#7919d0}.focus\\:text-orange-50:focus-visible{color:#ffefea}.focus\\:text-orange-100:focus-visible{color:#ffcfc0}.focus\\:text-orange-200:focus-visible{color:#ffb097}.focus\\:text-orange-300:focus-visible{color:#ff906d}.focus\\:text-orange-500:focus-visible{color:#ff7043}.focus\\:text-orange-500:focus-visible\\/20{color:#ff704333}.focus\\:text-orange-500:focus-visible\\/40{color:#ff704366}.focus\\:text-orange-500:focus-visible\\/70{color:#ff7043b3}.focus\\:text-orange-700:focus-visible{color:#e54715}.focus\\:text-azure-50:focus-visible{color:#e5f7fc}.focus\\:text-azure-100:focus-visible{color:#b2e6f7}.focus\\:text-azure-200:focus-visible{color:#80d6f1}.focus\\:text-azure-300:focus-visible{color:#4dc5eb}.focus\\:text-azure-500:focus-visible{color:#1ab5e6}.focus\\:text-azure-500:focus-visible\\/20{color:#1ab5e633}.focus\\:text-azure-500:focus-visible\\/40{color:#1ab5e666}.focus\\:text-azure-500:focus-visible\\/70{color:#1ab5e6b3}.focus\\:text-azure-700:focus-visible{color:#0093c9}.focus\\:text-gold-50:focus-visible{color:#faf3e6}.focus\\:text-gold-100:focus-visible{color:#efdcb4}.focus\\:text-gold-200:focus-visible{color:#e4c481}.focus\\:text-gold-300:focus-visible{color:#daad4f}.focus\\:text-gold-500:focus-visible{color:#cf961d}.focus\\:text-gold-500:focus-visible\\/20{color:#cf961d33}.focus\\:text-gold-500:focus-visible\\/40{color:#cf961d66}.focus\\:text-gold-500:focus-visible\\/70{color:#cf961db3}.focus\\:text-gold-700:focus-visible{color:#b07000}.focus\\:text-brown-50:focus-visible{color:#f1ede9}.focus\\:text-brown-100:focus-visible{color:#d6c9bd}.focus\\:text-brown-200:focus-visible{color:#bca691}.focus\\:text-brown-300:focus-visible{color:#a08266}.focus\\:text-brown-500:focus-visible{color:#865e3a}.focus\\:text-brown-500:focus-visible\\/20{color:#865e3a33}.focus\\:text-brown-500:focus-visible\\/40{color:#865e3a66}.focus\\:text-brown-500:focus-visible\\/70{color:#865e3ab3}.focus\\:text-brown-700:focus-visible{color:#5f330a}.focus\\:text-navy-50:focus-visible{color:#e7e7fa}.focus\\:text-navy-100:focus-visible{color:#b7b6f1}.focus\\:text-navy-200:focus-visible{color:#8785e8}.focus\\:text-navy-300:focus-visible{color:#5755df}.focus\\:text-navy-500:focus-visible{color:#2724d6}.focus\\:text-navy-500:focus-visible\\/20{color:#2724d633}.focus\\:text-navy-500:focus-visible\\/40{color:#2724d666}.focus\\:text-navy-500:focus-visible\\/70{color:#2724d6b3}.focus\\:text-navy-700:focus-visible{color:#0000b8}.focus\\:text-lime-50:focus-visible{color:#ecf6e7}.focus\\:text-lime-100:focus-visible{color:#c5e3b6}.focus\\:text-lime-200:focus-visible{color:#9ed186}.focus\\:text-lime-300:focus-visible{color:#77bf56}.focus\\:text-lime-500:focus-visible{color:#50ac25}.focus\\:text-lime-500:focus-visible\\/20{color:#50ac2533}.focus\\:text-lime-500:focus-visible\\/40{color:#50ac2566}.focus\\:text-lime-500:focus-visible\\/70{color:#50ac25b3}.focus\\:text-lime-700:focus-visible{color:#238900}.focus\\:text-magenta-50:focus-visible{color:#fbe9f1}.focus\\:text-magenta-100:focus-visible{color:#f4bed6}.focus\\:text-magenta-200:focus-visible{color:#ed93bb}.focus\\:text-magenta-300:focus-visible{color:#e668a0}.focus\\:text-magenta-500:focus-visible{color:#df3d85}.focus\\:text-magenta-500:focus-visible\\/20{color:#df3d8533}.focus\\:text-magenta-500:focus-visible\\/40{color:#df3d8566}.focus\\:text-magenta-500:focus-visible\\/70{color:#df3d85b3}.focus\\:text-magenta-700:focus-visible{color:#c10d5d}.focus\\:bg-white-50:focus-visible{background-color:#fff}.focus\\:bg-white-100:focus-visible{background-color:#f7f7f7}.focus\\:bg-white-200:focus-visible{background-color:#eee}.focus\\:bg-white-300:focus-visible{background-color:#e5e5e5}.focus\\:bg-white-500:focus-visible{background-color:#dadada}.focus\\:bg-white-500:focus-visible\\/20{background-color:#dadada33}.focus\\:bg-white-500:focus-visible\\/40{background-color:#dadada66}.focus\\:bg-white-500:focus-visible\\/70{background-color:#dadadab3}.focus\\:bg-white-700:focus-visible{background-color:#ccc}.focus\\:bg-black-50:focus-visible{background-color:#aaa}.focus\\:bg-black-100:focus-visible{background-color:#919191}.focus\\:bg-black-200:focus-visible{background-color:#6c6c6c}.focus\\:bg-black-300:focus-visible{background-color:#424242}.focus\\:bg-black-500:focus-visible{background-color:#2f2f2f}.focus\\:bg-black-500:focus-visible\\/20{background-color:#2f2f2f33}.focus\\:bg-black-500:focus-visible\\/40{background-color:#2f2f2f66}.focus\\:bg-black-500:focus-visible\\/70{background-color:#2f2f2fb3}.focus\\:bg-black-700:focus-visible{background-color:#1d1d1d}.focus\\:bg-blue-50:focus-visible{background-color:#e9effd}.focus\\:bg-blue-100:focus-visible{background-color:#bed0f9}.focus\\:bg-blue-200:focus-visible{background-color:#92b1f5}.focus\\:bg-blue-300:focus-visible{background-color:#6692f1}.focus\\:bg-blue-500:focus-visible{background-color:#3b73ed}.focus\\:bg-blue-500:focus-visible\\/20{background-color:#3b73ed33}.focus\\:bg-blue-500:focus-visible\\/40{background-color:#3b73ed66}.focus\\:bg-blue-500:focus-visible\\/70{background-color:#3b73edb3}.focus\\:bg-blue-700:focus-visible{background-color:#0b49d1}.focus\\:bg-blue-900:focus-visible{background-color:#00179e}.focus\\:bg-red-50:focus-visible{background-color:#fbe9e9}.focus\\:bg-red-100:focus-visible{background-color:#f4bebe}.focus\\:bg-red-200:focus-visible{background-color:#ed9292}.focus\\:bg-red-300:focus-visible{background-color:#e66767}.focus\\:bg-red-500:focus-visible{background-color:#df3c3c}.focus\\:bg-red-500:focus-visible\\/20{background-color:#df3c3c33}.focus\\:bg-red-500:focus-visible\\/40{background-color:#df3c3c66}.focus\\:bg-red-500:focus-visible\\/70{background-color:#df3c3cb3}.focus\\:bg-red-700:focus-visible{background-color:#c20c0c}.focus\\:bg-green-50:focus-visible{background-color:#e7f4f3}.focus\\:bg-green-100:focus-visible{background-color:#b6dfdb}.focus\\:bg-green-200:focus-visible{background-color:#86c9c3}.focus\\:bg-green-300:focus-visible{background-color:#56b4ac}.focus\\:bg-green-500:focus-visible{background-color:#259f94}.focus\\:bg-green-500:focus-visible\\/20{background-color:#259f9433}.focus\\:bg-green-500:focus-visible\\/40{background-color:#259f9466}.focus\\:bg-green-500:focus-visible\\/70{background-color:#259f94b3}.focus\\:bg-green-700:focus-visible{background-color:#007a6e}.focus\\:bg-yellow-50:focus-visible{background-color:#fef4e8}.focus\\:bg-yellow-100:focus-visible{background-color:#fddeb9}.focus\\:bg-yellow-200:focus-visible{background-color:#fbc88b}.focus\\:bg-yellow-300:focus-visible{background-color:#fab15c}.focus\\:bg-yellow-500:focus-visible{background-color:#f89b2e}.focus\\:bg-yellow-500:focus-visible\\/20{background-color:#f89b2e33}.focus\\:bg-yellow-500:focus-visible\\/40{background-color:#f89b2e66}.focus\\:bg-yellow-500:focus-visible\\/70{background-color:#f89b2eb3}.focus\\:bg-yellow-700:focus-visible{background-color:#de7700}.focus\\:bg-purple-50:focus-visible{background-color:#f4ebfd}.focus\\:bg-purple-100:focus-visible{background-color:#dfc2f9}.focus\\:bg-purple-200:focus-visible{background-color:#c999f4}.focus\\:bg-purple-300:focus-visible{background-color:#b370f0}.focus\\:bg-purple-500:focus-visible{background-color:#9e47ec}.focus\\:bg-purple-500:focus-visible\\/20{background-color:#9e47ec33}.focus\\:bg-purple-500:focus-visible\\/40{background-color:#9e47ec66}.focus\\:bg-purple-500:focus-visible\\/70{background-color:#9e47ecb3}.focus\\:bg-purple-700:focus-visible{background-color:#7919d0}.focus\\:bg-orange-50:focus-visible{background-color:#ffefea}.focus\\:bg-orange-100:focus-visible{background-color:#ffcfc0}.focus\\:bg-orange-200:focus-visible{background-color:#ffb097}.focus\\:bg-orange-300:focus-visible{background-color:#ff906d}.focus\\:bg-orange-500:focus-visible{background-color:#ff7043}.focus\\:bg-orange-500:focus-visible\\/20{background-color:#ff704333}.focus\\:bg-orange-500:focus-visible\\/40{background-color:#ff704366}.focus\\:bg-orange-500:focus-visible\\/70{background-color:#ff7043b3}.focus\\:bg-orange-700:focus-visible{background-color:#e54715}.focus\\:bg-azure-50:focus-visible{background-color:#e5f7fc}.focus\\:bg-azure-100:focus-visible{background-color:#b2e6f7}.focus\\:bg-azure-200:focus-visible{background-color:#80d6f1}.focus\\:bg-azure-300:focus-visible{background-color:#4dc5eb}.focus\\:bg-azure-500:focus-visible{background-color:#1ab5e6}.focus\\:bg-azure-500:focus-visible\\/20{background-color:#1ab5e633}.focus\\:bg-azure-500:focus-visible\\/40{background-color:#1ab5e666}.focus\\:bg-azure-500:focus-visible\\/70{background-color:#1ab5e6b3}.focus\\:bg-azure-700:focus-visible{background-color:#0093c9}.focus\\:bg-gold-50:focus-visible{background-color:#faf3e6}.focus\\:bg-gold-100:focus-visible{background-color:#efdcb4}.focus\\:bg-gold-200:focus-visible{background-color:#e4c481}.focus\\:bg-gold-300:focus-visible{background-color:#daad4f}.focus\\:bg-gold-500:focus-visible{background-color:#cf961d}.focus\\:bg-gold-500:focus-visible\\/20{background-color:#cf961d33}.focus\\:bg-gold-500:focus-visible\\/40{background-color:#cf961d66}.focus\\:bg-gold-500:focus-visible\\/70{background-color:#cf961db3}.focus\\:bg-gold-700:focus-visible{background-color:#b07000}.focus\\:bg-brown-50:focus-visible{background-color:#f1ede9}.focus\\:bg-brown-100:focus-visible{background-color:#d6c9bd}.focus\\:bg-brown-200:focus-visible{background-color:#bca691}.focus\\:bg-brown-300:focus-visible{background-color:#a08266}.focus\\:bg-brown-500:focus-visible{background-color:#865e3a}.focus\\:bg-brown-500:focus-visible\\/20{background-color:#865e3a33}.focus\\:bg-brown-500:focus-visible\\/40{background-color:#865e3a66}.focus\\:bg-brown-500:focus-visible\\/70{background-color:#865e3ab3}.focus\\:bg-brown-700:focus-visible{background-color:#5f330a}.focus\\:bg-navy-50:focus-visible{background-color:#e7e7fa}.focus\\:bg-navy-100:focus-visible{background-color:#b7b6f1}.focus\\:bg-navy-200:focus-visible{background-color:#8785e8}.focus\\:bg-navy-300:focus-visible{background-color:#5755df}.focus\\:bg-navy-500:focus-visible{background-color:#2724d6}.focus\\:bg-navy-500:focus-visible\\/20{background-color:#2724d633}.focus\\:bg-navy-500:focus-visible\\/40{background-color:#2724d666}.focus\\:bg-navy-500:focus-visible\\/70{background-color:#2724d6b3}.focus\\:bg-navy-700:focus-visible{background-color:#0000b8}.focus\\:bg-lime-50:focus-visible{background-color:#ecf6e7}.focus\\:bg-lime-100:focus-visible{background-color:#c5e3b6}.focus\\:bg-lime-200:focus-visible{background-color:#9ed186}.focus\\:bg-lime-300:focus-visible{background-color:#77bf56}.focus\\:bg-lime-500:focus-visible{background-color:#50ac25}.focus\\:bg-lime-500:focus-visible\\/20{background-color:#50ac2533}.focus\\:bg-lime-500:focus-visible\\/40{background-color:#50ac2566}.focus\\:bg-lime-500:focus-visible\\/70{background-color:#50ac25b3}.focus\\:bg-lime-700:focus-visible{background-color:#238900}.focus\\:bg-magenta-50:focus-visible{background-color:#fbe9f1}.focus\\:bg-magenta-100:focus-visible{background-color:#f4bed6}.focus\\:bg-magenta-200:focus-visible{background-color:#ed93bb}.focus\\:bg-magenta-300:focus-visible{background-color:#e668a0}.focus\\:bg-magenta-500:focus-visible{background-color:#df3d85}.focus\\:bg-magenta-500:focus-visible\\/20{background-color:#df3d8533}.focus\\:bg-magenta-500:focus-visible\\/40{background-color:#df3d8566}.focus\\:bg-magenta-500:focus-visible\\/70{background-color:#df3d85b3}.focus\\:bg-magenta-700:focus-visible{background-color:#c10d5d}.active\\:text-white-50:active{color:#fff}.active\\:text-white-100:active{color:#f7f7f7}.active\\:text-white-200:active{color:#eee}.active\\:text-white-300:active{color:#e5e5e5}.active\\:text-white-500:active{color:#dadada}.active\\:text-white-500:active\\/20{color:#dadada33}.active\\:text-white-500:active\\/40{color:#dadada66}.active\\:text-white-500:active\\/70{color:#dadadab3}.active\\:text-white-700:active{color:#ccc}.active\\:text-black-50:active{color:#aaa}.active\\:text-black-100:active{color:#919191}.active\\:text-black-200:active{color:#6c6c6c}.active\\:text-black-300:active{color:#424242}.active\\:text-black-500:active{color:#2f2f2f}.active\\:text-black-500:active\\/20{color:#2f2f2f33}.active\\:text-black-500:active\\/40{color:#2f2f2f66}.active\\:text-black-500:active\\/70{color:#2f2f2fb3}.active\\:text-black-700:active{color:#1d1d1d}.active\\:text-blue-50:active{color:#e9effd}.active\\:text-blue-100:active{color:#bed0f9}.active\\:text-blue-200:active{color:#92b1f5}.active\\:text-blue-300:active{color:#6692f1}.active\\:text-blue-500:active{color:#3b73ed}.active\\:text-blue-500:active\\/20{color:#3b73ed33}.active\\:text-blue-500:active\\/40{color:#3b73ed66}.active\\:text-blue-500:active\\/70{color:#3b73edb3}.active\\:text-blue-700:active{color:#0b49d1}.active\\:text-blue-900:active{color:#00179e}.active\\:text-red-50:active{color:#fbe9e9}.active\\:text-red-100:active{color:#f4bebe}.active\\:text-red-200:active{color:#ed9292}.active\\:text-red-300:active{color:#e66767}.active\\:text-red-500:active{color:#df3c3c}.active\\:text-red-500:active\\/20{color:#df3c3c33}.active\\:text-red-500:active\\/40{color:#df3c3c66}.active\\:text-red-500:active\\/70{color:#df3c3cb3}.active\\:text-red-700:active{color:#c20c0c}.active\\:text-green-50:active{color:#e7f4f3}.active\\:text-green-100:active{color:#b6dfdb}.active\\:text-green-200:active{color:#86c9c3}.active\\:text-green-300:active{color:#56b4ac}.active\\:text-green-500:active{color:#259f94}.active\\:text-green-500:active\\/20{color:#259f9433}.active\\:text-green-500:active\\/40{color:#259f9466}.active\\:text-green-500:active\\/70{color:#259f94b3}.active\\:text-green-700:active{color:#007a6e}.active\\:text-yellow-50:active{color:#fef4e8}.active\\:text-yellow-100:active{color:#fddeb9}.active\\:text-yellow-200:active{color:#fbc88b}.active\\:text-yellow-300:active{color:#fab15c}.active\\:text-yellow-500:active{color:#f89b2e}.active\\:text-yellow-500:active\\/20{color:#f89b2e33}.active\\:text-yellow-500:active\\/40{color:#f89b2e66}.active\\:text-yellow-500:active\\/70{color:#f89b2eb3}.active\\:text-yellow-700:active{color:#de7700}.active\\:text-purple-50:active{color:#f4ebfd}.active\\:text-purple-100:active{color:#dfc2f9}.active\\:text-purple-200:active{color:#c999f4}.active\\:text-purple-300:active{color:#b370f0}.active\\:text-purple-500:active{color:#9e47ec}.active\\:text-purple-500:active\\/20{color:#9e47ec33}.active\\:text-purple-500:active\\/40{color:#9e47ec66}.active\\:text-purple-500:active\\/70{color:#9e47ecb3}.active\\:text-purple-700:active{color:#7919d0}.active\\:text-orange-50:active{color:#ffefea}.active\\:text-orange-100:active{color:#ffcfc0}.active\\:text-orange-200:active{color:#ffb097}.active\\:text-orange-300:active{color:#ff906d}.active\\:text-orange-500:active{color:#ff7043}.active\\:text-orange-500:active\\/20{color:#ff704333}.active\\:text-orange-500:active\\/40{color:#ff704366}.active\\:text-orange-500:active\\/70{color:#ff7043b3}.active\\:text-orange-700:active{color:#e54715}.active\\:text-azure-50:active{color:#e5f7fc}.active\\:text-azure-100:active{color:#b2e6f7}.active\\:text-azure-200:active{color:#80d6f1}.active\\:text-azure-300:active{color:#4dc5eb}.active\\:text-azure-500:active{color:#1ab5e6}.active\\:text-azure-500:active\\/20{color:#1ab5e633}.active\\:text-azure-500:active\\/40{color:#1ab5e666}.active\\:text-azure-500:active\\/70{color:#1ab5e6b3}.active\\:text-azure-700:active{color:#0093c9}.active\\:text-gold-50:active{color:#faf3e6}.active\\:text-gold-100:active{color:#efdcb4}.active\\:text-gold-200:active{color:#e4c481}.active\\:text-gold-300:active{color:#daad4f}.active\\:text-gold-500:active{color:#cf961d}.active\\:text-gold-500:active\\/20{color:#cf961d33}.active\\:text-gold-500:active\\/40{color:#cf961d66}.active\\:text-gold-500:active\\/70{color:#cf961db3}.active\\:text-gold-700:active{color:#b07000}.active\\:text-brown-50:active{color:#f1ede9}.active\\:text-brown-100:active{color:#d6c9bd}.active\\:text-brown-200:active{color:#bca691}.active\\:text-brown-300:active{color:#a08266}.active\\:text-brown-500:active{color:#865e3a}.active\\:text-brown-500:active\\/20{color:#865e3a33}.active\\:text-brown-500:active\\/40{color:#865e3a66}.active\\:text-brown-500:active\\/70{color:#865e3ab3}.active\\:text-brown-700:active{color:#5f330a}.active\\:text-navy-50:active{color:#e7e7fa}.active\\:text-navy-100:active{color:#b7b6f1}.active\\:text-navy-200:active{color:#8785e8}.active\\:text-navy-300:active{color:#5755df}.active\\:text-navy-500:active{color:#2724d6}.active\\:text-navy-500:active\\/20{color:#2724d633}.active\\:text-navy-500:active\\/40{color:#2724d666}.active\\:text-navy-500:active\\/70{color:#2724d6b3}.active\\:text-navy-700:active{color:#0000b8}.active\\:text-lime-50:active{color:#ecf6e7}.active\\:text-lime-100:active{color:#c5e3b6}.active\\:text-lime-200:active{color:#9ed186}.active\\:text-lime-300:active{color:#77bf56}.active\\:text-lime-500:active{color:#50ac25}.active\\:text-lime-500:active\\/20{color:#50ac2533}.active\\:text-lime-500:active\\/40{color:#50ac2566}.active\\:text-lime-500:active\\/70{color:#50ac25b3}.active\\:text-lime-700:active{color:#238900}.active\\:text-magenta-50:active{color:#fbe9f1}.active\\:text-magenta-100:active{color:#f4bed6}.active\\:text-magenta-200:active{color:#ed93bb}.active\\:text-magenta-300:active{color:#e668a0}.active\\:text-magenta-500:active{color:#df3d85}.active\\:text-magenta-500:active\\/20{color:#df3d8533}.active\\:text-magenta-500:active\\/40{color:#df3d8566}.active\\:text-magenta-500:active\\/70{color:#df3d85b3}.active\\:text-magenta-700:active{color:#c10d5d}.active\\:bg-white-50:active{background-color:#fff}.active\\:bg-white-100:active{background-color:#f7f7f7}.active\\:bg-white-200:active{background-color:#eee}.active\\:bg-white-300:active{background-color:#e5e5e5}.active\\:bg-white-500:active{background-color:#dadada}.active\\:bg-white-500:active\\/20{background-color:#dadada33}.active\\:bg-white-500:active\\/40{background-color:#dadada66}.active\\:bg-white-500:active\\/70{background-color:#dadadab3}.active\\:bg-white-700:active{background-color:#ccc}.active\\:bg-black-50:active{background-color:#aaa}.active\\:bg-black-100:active{background-color:#919191}.active\\:bg-black-200:active{background-color:#6c6c6c}.active\\:bg-black-300:active{background-color:#424242}.active\\:bg-black-500:active{background-color:#2f2f2f}.active\\:bg-black-500:active\\/20{background-color:#2f2f2f33}.active\\:bg-black-500:active\\/40{background-color:#2f2f2f66}.active\\:bg-black-500:active\\/70{background-color:#2f2f2fb3}.active\\:bg-black-700:active{background-color:#1d1d1d}.active\\:bg-blue-50:active{background-color:#e9effd}.active\\:bg-blue-100:active{background-color:#bed0f9}.active\\:bg-blue-200:active{background-color:#92b1f5}.active\\:bg-blue-300:active{background-color:#6692f1}.active\\:bg-blue-500:active{background-color:#3b73ed}.active\\:bg-blue-500:active\\/20{background-color:#3b73ed33}.active\\:bg-blue-500:active\\/40{background-color:#3b73ed66}.active\\:bg-blue-500:active\\/70{background-color:#3b73edb3}.active\\:bg-blue-700:active{background-color:#0b49d1}.active\\:bg-blue-900:active{background-color:#00179e}.active\\:bg-red-50:active{background-color:#fbe9e9}.active\\:bg-red-100:active{background-color:#f4bebe}.active\\:bg-red-200:active{background-color:#ed9292}.active\\:bg-red-300:active{background-color:#e66767}.active\\:bg-red-500:active{background-color:#df3c3c}.active\\:bg-red-500:active\\/20{background-color:#df3c3c33}.active\\:bg-red-500:active\\/40{background-color:#df3c3c66}.active\\:bg-red-500:active\\/70{background-color:#df3c3cb3}.active\\:bg-red-700:active{background-color:#c20c0c}.active\\:bg-green-50:active{background-color:#e7f4f3}.active\\:bg-green-100:active{background-color:#b6dfdb}.active\\:bg-green-200:active{background-color:#86c9c3}.active\\:bg-green-300:active{background-color:#56b4ac}.active\\:bg-green-500:active{background-color:#259f94}.active\\:bg-green-500:active\\/20{background-color:#259f9433}.active\\:bg-green-500:active\\/40{background-color:#259f9466}.active\\:bg-green-500:active\\/70{background-color:#259f94b3}.active\\:bg-green-700:active{background-color:#007a6e}.active\\:bg-yellow-50:active{background-color:#fef4e8}.active\\:bg-yellow-100:active{background-color:#fddeb9}.active\\:bg-yellow-200:active{background-color:#fbc88b}.active\\:bg-yellow-300:active{background-color:#fab15c}.active\\:bg-yellow-500:active{background-color:#f89b2e}.active\\:bg-yellow-500:active\\/20{background-color:#f89b2e33}.active\\:bg-yellow-500:active\\/40{background-color:#f89b2e66}.active\\:bg-yellow-500:active\\/70{background-color:#f89b2eb3}.active\\:bg-yellow-700:active{background-color:#de7700}.active\\:bg-purple-50:active{background-color:#f4ebfd}.active\\:bg-purple-100:active{background-color:#dfc2f9}.active\\:bg-purple-200:active{background-color:#c999f4}.active\\:bg-purple-300:active{background-color:#b370f0}.active\\:bg-purple-500:active{background-color:#9e47ec}.active\\:bg-purple-500:active\\/20{background-color:#9e47ec33}.active\\:bg-purple-500:active\\/40{background-color:#9e47ec66}.active\\:bg-purple-500:active\\/70{background-color:#9e47ecb3}.active\\:bg-purple-700:active{background-color:#7919d0}.active\\:bg-orange-50:active{background-color:#ffefea}.active\\:bg-orange-100:active{background-color:#ffcfc0}.active\\:bg-orange-200:active{background-color:#ffb097}.active\\:bg-orange-300:active{background-color:#ff906d}.active\\:bg-orange-500:active{background-color:#ff7043}.active\\:bg-orange-500:active\\/20{background-color:#ff704333}.active\\:bg-orange-500:active\\/40{background-color:#ff704366}.active\\:bg-orange-500:active\\/70{background-color:#ff7043b3}.active\\:bg-orange-700:active{background-color:#e54715}.active\\:bg-azure-50:active{background-color:#e5f7fc}.active\\:bg-azure-100:active{background-color:#b2e6f7}.active\\:bg-azure-200:active{background-color:#80d6f1}.active\\:bg-azure-300:active{background-color:#4dc5eb}.active\\:bg-azure-500:active{background-color:#1ab5e6}.active\\:bg-azure-500:active\\/20{background-color:#1ab5e633}.active\\:bg-azure-500:active\\/40{background-color:#1ab5e666}.active\\:bg-azure-500:active\\/70{background-color:#1ab5e6b3}.active\\:bg-azure-700:active{background-color:#0093c9}.active\\:bg-gold-50:active{background-color:#faf3e6}.active\\:bg-gold-100:active{background-color:#efdcb4}.active\\:bg-gold-200:active{background-color:#e4c481}.active\\:bg-gold-300:active{background-color:#daad4f}.active\\:bg-gold-500:active{background-color:#cf961d}.active\\:bg-gold-500:active\\/20{background-color:#cf961d33}.active\\:bg-gold-500:active\\/40{background-color:#cf961d66}.active\\:bg-gold-500:active\\/70{background-color:#cf961db3}.active\\:bg-gold-700:active{background-color:#b07000}.active\\:bg-brown-50:active{background-color:#f1ede9}.active\\:bg-brown-100:active{background-color:#d6c9bd}.active\\:bg-brown-200:active{background-color:#bca691}.active\\:bg-brown-300:active{background-color:#a08266}.active\\:bg-brown-500:active{background-color:#865e3a}.active\\:bg-brown-500:active\\/20{background-color:#865e3a33}.active\\:bg-brown-500:active\\/40{background-color:#865e3a66}.active\\:bg-brown-500:active\\/70{background-color:#865e3ab3}.active\\:bg-brown-700:active{background-color:#5f330a}.active\\:bg-navy-50:active{background-color:#e7e7fa}.active\\:bg-navy-100:active{background-color:#b7b6f1}.active\\:bg-navy-200:active{background-color:#8785e8}.active\\:bg-navy-300:active{background-color:#5755df}.active\\:bg-navy-500:active{background-color:#2724d6}.active\\:bg-navy-500:active\\/20{background-color:#2724d633}.active\\:bg-navy-500:active\\/40{background-color:#2724d666}.active\\:bg-navy-500:active\\/70{background-color:#2724d6b3}.active\\:bg-navy-700:active{background-color:#0000b8}.active\\:bg-lime-50:active{background-color:#ecf6e7}.active\\:bg-lime-100:active{background-color:#c5e3b6}.active\\:bg-lime-200:active{background-color:#9ed186}.active\\:bg-lime-300:active{background-color:#77bf56}.active\\:bg-lime-500:active{background-color:#50ac25}.active\\:bg-lime-500:active\\/20{background-color:#50ac2533}.active\\:bg-lime-500:active\\/40{background-color:#50ac2566}.active\\:bg-lime-500:active\\/70{background-color:#50ac25b3}.active\\:bg-lime-700:active{background-color:#238900}.active\\:bg-magenta-50:active{background-color:#fbe9f1}.active\\:bg-magenta-100:active{background-color:#f4bed6}.active\\:bg-magenta-200:active{background-color:#ed93bb}.active\\:bg-magenta-300:active{background-color:#e668a0}.active\\:bg-magenta-500:active{background-color:#df3d85}.active\\:bg-magenta-500:active\\/20{background-color:#df3d8533}.active\\:bg-magenta-500:active\\/40{background-color:#df3d8566}.active\\:bg-magenta-500:active\\/70{background-color:#df3d85b3}.active\\:bg-magenta-700:active{background-color:#c10d5d}.transition{transition:all .2s ease-in-out}.disable-selection,.logo-container .logo-image,.cover-container .cover-image,.profile-rounded-image,.profile-square-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.drop-zone-container.has-logo{display:none}.largeContainer{position:relative;min-height:178px}.largeContainer .cropper-overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.logo-container{position:absolute;top:0;left:0;width:616px;height:214px;overflow:hidden}.logo-container .logo-image{width:100%;height:100%;z-index:1000}.logoVar{height:214px}.logoVar.hasCropper{height:240px!important}.logoVar.hasCropper .drop-zone-container{display:none!important}.logoVar .drop-zone-container .drop-zone,.logoVar .drop-zone-container .drop-zone-error{height:204px}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cover-container{width:267px;height:178px}.cover-container .cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.container.dragMode{position:fixed;position-anchor:--modal-body;left:anchor(left);top:anchor(top);height:anchor-size(--modal-body height)!important;width:anchor-size(--modal-body width)!important;display:flex;justify-content:center;align-items:center;gap:0;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .drop-zone-container{position:relative;width:100%;height:100%;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%;outline:none!important;margin:0!important;border:4px dashed #cccccc;border-color:#ccc}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container{position:relative}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document svg{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container ng-lottie{width:200px;height:200px;display:block}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.container.dragMode.onDragover .drop-zone-container .drop-zone{border-color:#ccc}.container.dragMode.dual-drop-mode .drop-zone-container{--dual-drop-border: 4px;--dual-drop-border-overlap: calc(var(--dual-drop-border) / 2);position:relative;display:block;overflow:hidden}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel{position:absolute;top:0;bottom:0;margin:0!important;width:calc(50% + var(--dual-drop-border-overlap));opacity:1;transition:width .25s ease,opacity .25s ease,z-index 0s}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .dual-drop-zone-title{position:absolute;top:10px;left:8px;margin:0;font-weight:800;font-size:18px;line-height:100%;letter-spacing:0}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-left{left:0;z-index:1}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-right{right:0;left:auto;z-index:1}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .drop-zone-focus-text{text-align:center}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .drop-zone-focus-text .description{margin:8px auto 0;max-width:158px;font-weight:400;font-size:11px;line-height:14px;text-align:center}.container.dragMode.dual-drop-mode.dual-drop-focus-left .drop-zone-container .dual-drop-zone-left{width:calc(60% + var(--dual-drop-border-overlap));opacity:1;z-index:2}.container.dragMode.dual-drop-mode.dual-drop-focus-left .drop-zone-container .dual-drop-zone-right{width:calc(40% + var(--dual-drop-border-overlap));opacity:.4;z-index:1}.container.dragMode.dual-drop-mode.dual-drop-focus-right .drop-zone-container .dual-drop-zone-right{width:calc(60% + var(--dual-drop-border-overlap));opacity:1;z-index:2}.container.dragMode.dual-drop-mode.dual-drop-focus-right .drop-zone-container .dual-drop-zone-left{width:calc(40% + var(--dual-drop-border-overlap));opacity:.4;z-index:1}.is-documents-mode .dragMode{height:120px!important}.dragModeDocuments .drop-zone-container .drop-zone{background-color:#fff!important}.dragModeDocuments .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.drop-zone-dimensions-lock{width:var(--drag-lock-width);height:var(--drag-lock-height)}.is-details-slider{width:100%!important;height:100%!important;overflow:hidden}.is-details-slider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important;margin-top:12px!important;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.is-details-slider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;cursor:pointer!important;transition:width .2s ease-in-out,background-color .2s ease-in-out}.is-details-slider .sliders .slider-item.active{width:20px;background-color:#919191}.is-details-slider .drop-zone-container{display:none!important}.is-details-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-details-slider .docs .carousel-button{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-details-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-details-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.is-details-slider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;flex-shrink:0!important;gap:0!important;position:relative!important;transition:transform .3s ease-out}.is-details-slider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;justify-content:center!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.is-details-slider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.is-details-slider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.is-details-slider .carousel-button{position:absolute!important;top:45%!important}.is-details-slider:hover .sliders{opacity:1;pointer-events:auto}.is-drawer-mode,.is-card-slider{width:100%!important;position:relative!important;max-width:100%!important}.is-drawer-mode .drop-zone-container,.is-card-slider .drop-zone-container{display:none!important}.is-drawer-mode .skeleton-container.drawer-position,.is-card-slider .skeleton-container.drawer-position{width:100%!important;position:relative!important;overflow:hidden!important;display:flex;align-items:center;gap:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item,.is-card-slider .skeleton-container.drawer-position .skeleton-item{width:194px;height:194px;flex:0 0 194px;border-radius:2px;padding:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item .skeleton-bar,.is-card-slider .skeleton-container.drawer-position .skeleton-item .skeleton-bar{width:100%;height:100%;background-color:#fff}.is-drawer-mode .docs,.is-card-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-drawer-mode .docs .doc-container,.is-card-slider .docs .doc-container{display:flex;width:auto!important;height:auto!important;gap:4px!important;transition:transform .3s ease-out}.is-drawer-mode .docs .doc-container .doc,.is-card-slider .docs .doc-container .doc{width:194px!important;height:194px!important;flex:0 0 194px!important;background-color:transparent!important}.is-drawer-mode .carousel-button.carousel-right,.is-card-slider .carousel-button.carousel-right{right:4px!important;position:absolute!important}.is-drawer-mode .carousel-button.carousel-left,.is-card-slider .carousel-button.carousel-left{left:4px!important;position:absolute!important}.is-drawer-mode{padding:4px!important;position:absolute!important}.is-card-slider{padding:4px 0!important;height:auto!important;box-sizing:border-box!important}.is-card-slider .docs{max-width:590px!important;height:194px!important}.is-card-slider .carousel-button{top:50%!important;transform:translateY(-50%)!important;opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-card-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-card-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.isCoverDetails{width:100%!important;height:100%!important}.isCoverDetails .drop-zone-container{display:none!important}.isCoverDetails .docs{width:100%!important}.isCoverDetails .docs .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;display:block!important;background-color:transparent!important}.more-docs{width:148px;flex:0 0 148px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs{width:148px!important}.small-more-docs .illustration,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text{padding:0 12px}.unsupported .drop-zone-text .heading.invalid{line-height:18px}.unsupported .drop-zone-text .subtext{line-height:14px;margin-bottom:0}.unsupported .cancel-button .cancel-icon{width:18px!important;height:18px!important}.unsupported .cancel-button-documents{display:none}.max-reached,.max-reached-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-media .drop-zone{padding:13px 0!important;flex-direction:column}.invalid-file-size .drop-zone .illustration{display:none!important}.invalid-file-size .drop-zone .drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:2px;right:2px;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.drop-zone-error .file-types{display:flex;align-items:center;gap:2px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.drop-zone-error .badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;width:35px;border-radius:1px;margin-bottom:0;text-align:center;background-color:#919191}.drop-zone-error .pdf{background-color:#e66767}.drop-zone-error .video{background-color:#b370f0}.drop-zone-error .image{background-color:#fab15c}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // modules
                 CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbTooltipModule }, { 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
@@ -6200,8 +6203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         LottieComponent,
                         //pipes
                         DragModeAnimationPipe,
-                    ], template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let mediaVariant = variant() === dropZoneVariant.MEDIA;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl() !== \"\";\n@let profilePreview = profileUrl() !== \"\"; @let logoPreview = !!logoUrl();\n@let smallSize = size() === \"480px\";\n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {\n  <div class=\"documents-drag-overlay\"></div>\n}\n\n@if (dragMode() && !isDrawerMode()) {\n  <div\n    class=\"drop-zone-dimensions-lock\"\n    [style.--drag-lock-width.px]=\"dropzoneDimensionsLock().width\"\n    [style.--drag-lock-height.px]=\"dropzoneDimensionsLock().height\"\n  ></div>\n}\n\n<div\n  #containerRef\n  class=\"container\"\n  [class]=\"{\n    'picture-container': profileVariant || coverVariant,\n    smallContainer: smallSize,\n    largeContainer: largeSize,\n    dragMode: dragMode() && !isDocumentsMode(),\n    dragModeDocuments: dragMode() && isDocumentsMode(),\n    'dual-drop-mode': isDualDragActive(),\n    'dual-drop-focus-left':\n      isDualDragActive() && activeDualTarget() === dualDropTarget.LEFT,\n    'dual-drop-focus-right':\n      isDualDragActive() && activeDualTarget() === dualDropTarget.RIGHT,\n    onDragover: onDragover(),\n    logoVar: logoVariant,\n    hasCropper: isCropperReady(),\n    'is-details-slider': isDetailsSlider(),\n    'is-drawer-mode': isDrawerMode(),\n    isCoverDetails: isCoverDetails(),\n    'is-documents-mode': isDocumentsMode(),\n  }\"\n>\n  @if (coverVariant && coverPreview) {\n    <div class=\"cover-container\">\n      <img [src]=\"coverUrl()\" class=\"cover-image\" draggable=\"false\" />\n    </div>\n  }\n  @if (profileVariant) {\n    @if (!profilePreview) {\n      <div class=\"avatar\">\n        <cai-avatar\n          [driver]=\"driver()\"\n          [size]=\"160\"\n          [rounded]=\"rounded()\"\n        ></cai-avatar>\n      </div>\n    } @else {\n      <div class=\"profile-container\">\n        <img\n          [class]=\"rounded() ? 'profile-rounded-image' : 'profile-square-image'\"\n          [src]=\"profileUrl()\"\n          draggable=\"false\"\n        />\n      </div>\n    }\n  }\n  @if (logoVariant && logoPreview) {\n    <div class=\"logo-container\" [class.has-logo]=\"!!logoUrl()\">\n      <img class=\"logo-image\" [src]=\"logoUrl()\" draggable=\"false\" />\n    </div>\n  }\n  <!--Image Cropper-->\n  @if (cropFile && showCrop) {\n    @if (!isCropperReady()) {\n      <div class=\"cropper-loader\">\n        <div class=\"spinner\"></div>\n      </div>\n    }\n    <div class=\"cropper-overlay\">\n      <image-cropper\n        #cropper\n        class=\"img-cropper\"\n        [output]=\"'base64'\"\n        [class.logoBorder]=\"logoVariant\"\n        [class.snapback-animate]=\"isSnapbackAnimating()\"\n        [roundCropper]=\"roundedBorder ? true : false\"\n        [hideResizeSquares]=\"true\"\n        [allowMoveImage]=\"true\"\n        [transform]=\"transform()\"\n        (transformChange)=\"onTransformChange($event)\"\n        format=\"png\"\n        [aspectRatio]=\"cropAspectRatio()\"\n        [resizeToWidth]=\"cropWidth()\"\n        [resizeToHeight]=\"cropHeight()\"\n        [containWithinAspectRatio]=\"true\"\n        [imageChangedEvent]=\"imageChangedEvent()\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded($event)\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      @if (isCropperReady()) {\n        <div class=\"lower-part\">\n          <div class=\"range\">\n            <input\n              #inputRange\n              type=\"range\"\n              class=\"custom-range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"0.1\"\n              [value]=\"zoomValue()\"\n              (input)=\"onZoomChange($event)\"\n            />\n          </div>\n          <div class=\"cropper-buttons\">\n            <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n            <button class=\"submit-button\" (click)=\"submitCrop()\">Crop</button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n  <!-- Drop Zone -->\n  @if (!isDocumentsMode() || documentsDropZoneOpen()) {\n    <div\n      #dropZoneContainer\n      class=\"drop-zone-container\"\n      [class.has-logo]=\"logoVariant && !!logoUrl()\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      [class]=\"{\n        'more-docs': docCount >= 3 && largeSize,\n        'small-more-docs': docCount >= 2 && smallSize,\n        'max-reached-drop-design':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          documentVariant,\n        'max-reached-more-doc':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          documentVariant,\n        'max-reached-more-media':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          mediaVariant,\n        'invalid-file-size': invalidFileSize(),\n        unsupported: unsupported() || invalidFileSize(),\n        smallView: this.smallView() && !dragMode(),\n      }\"\n    >\n      <!-- Drop Zone -->\n      @if (isDualDragActive()) {\n        @for (target of dualTargets; track target) {\n          @let panel = dualDropZones()[target];\n          <div\n            class=\"drop-zone dual-drop-zone-panel\"\n            [class.dual-drop-zone-left]=\"target === dualDropTarget.LEFT\"\n            [class.dual-drop-zone-right]=\"target === dualDropTarget.RIGHT\"\n            [class.active]=\"activeDualTarget() === target\"\n            (drop)=\"onDualDrop($event, target)\"\n          >\n            @if (panel.title) {\n              <div class=\"dual-drop-zone-title\">{{ panel.title }}</div>\n            }\n            <div class=\"drag-icons-container\">\n              @if (isDocumentsMode()) {\n                <svg-icon\n                  name=\"cai-drop-zone-focus\"\n                  class=\"illustration drag-icon-document\"\n                ></svg-icon>\n              } @else {\n                <ng-lottie\n                  [options]=\"{\n                    path:\n                      (target === dualDropTarget.LEFT\n                        ? dropZoneVariant.PROFILE\n                        : variant()\n                      ) | dropZoneAnimation,\n                    loop: false,\n                    autoplay: false,\n                  }\"\n                  (animationCreated)=\"animationCreated($event, target)\"\n                ></ng-lottie>\n              }\n            </div>\n            <div class=\"drop-zone-focus-text\">\n              <div class=\"heading\">\n                {{\n                  activeDualTarget() === target\n                    ? panel.dropLabel\n                    : panel.dragLabel\n                }}\n              </div>\n              <div class=\"description\">{{ panel.description }}</div>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n          @if (dragMode()) {\n            <div class=\"drag-icons-container\">\n              @if (isDocumentsMode()) {\n                <svg-icon\n                  name=\"cai-drop-zone-focus\"\n                  class=\"illustration drag-icon-document\"\n                ></svg-icon>\n              } @else {\n                <!-- Animation -->\n                <ng-lottie\n                  [options]=\"{\n                    path: variant() | dropZoneAnimation,\n                    loop: false,\n                    autoplay: false,\n                  }\"\n                  (animationCreated)=\"animationCreated($event)\"\n                ></ng-lottie>\n              }\n            </div>\n            <div class=\"drop-zone-focus-text\">\n              @if (isDocumentsMode()) {\n                <p class=\"heading\">DRAG FILES HERE</p>\n              } @else if (documentVariant || mediaVariant) {\n                <p class=\"heading\">\n                  {{ onDragover() ? \"DROP FILES HERE\" : \"DRAG FILES HERE\" }}\n                </p>\n              } @else {\n                <p class=\"heading\">\n                  {{ onDragover() ? \"DROP IMAGE HERE\" : \"DRAG IMAGE HERE\" }}\n                </p>\n              }\n            </div>\n          } @else {\n            @let svgIcon = variant() | dropZoneAnimation: true;\n            <svg-icon [name]=\"svgIcon\" class=\"illustration\"></svg-icon>\n            @if (\n              (countFiles <= this.docs().length || maxCountReached()) &&\n              documentVariant\n            ) {\n              <div class=\"drop-zone-text\">\n                <p class=\"heading\">\n                  <span class=\"line\">MAX COUNT</span>\n                  <span class=\"line\">REACHED</span>\n                </p>\n                <p class=\"subtext\">\n                  <span class=\"line\">{{ countFiles }} FILES </span>\n                  <span class=\"line\">IMPORTED</span>\n                </p>\n              </div>\n            } @else {\n              <div class=\"drop-zone-text\">\n                <p class=\"heading\">\n                  @if (documentVariant || mediaVariant) {\n                    DRAG FILES\n                    @if (docCount < 1 || isDocumentsMode()) {\n                      <span>HERE</span>\n                    }\n                  } @else if (profileVariant && roundedBorder) {\n                    DRAG IMAGE\n                  } @else {\n                    DRAG IMAGE HERE\n                  }\n                </p>\n                @if (!coverPreview && !profilePreview) {\n                  <p class=\"subtext\">OR CLICK TO ADD</p>\n                }\n                @if (coverPreview || profilePreview) {\n                  <p class=\"subtext\">OR CLICK TO REPLACE</p>\n                }\n                @if (mediaVariant) {\n                  <p class=\"media-subtext\">\n                    max file size {{ maxFileSize() }}mb\n                  </p>\n                }\n              </div>\n              @if (isDocumentsMode()) {\n                <button\n                  class=\"cancel-button-documents\"\n                  ngbTooltip=\"Cancel\"\n                  [placement]=\"'bottom'\"\n                  container=\"body\"\n                  triggers=\"mouseenter:mouseleave\"\n                  tooltipClass=\"tooltip tooltip-m-b-2\"\n                >\n                  <svg-icon\n                    name=\"cai-cancel\"\n                    class=\"cancel-icon\"\n                    (click)=\"onCancel($event)\"\n                  ></svg-icon>\n                </button>\n              }\n            }\n          }\n        </div>\n      }\n\n      <input\n        type=\"file\"\n        aria-hidden=\"true\"\n        multiple\n        class=\"drop-zone-input\"\n        #inputRef\n        (input)=\"onInput($event)\"\n        (change)=\"fileChangeEvent($event)\"\n      />\n\n      <!-- Drop Zone Error -->\n      <div class=\"drop-zone-error\">\n        @if (invalidFileSize()) {\n          <div class=\"drop-zone-text\">\n            <p class=\"heading invalid\">INVALID FILE SIZE</p>\n            <p class=\"subtext\">MAX {{ maxFileSize() }} MB</p>\n          </div>\n        } @else {\n          <div class=\"drop-zone-text\">\n            <p class=\"heading invalid\">INVALID FILE TYPE</p>\n            <p class=\"subtext\">SUPPORTED FORMATS</p>\n          </div>\n          <div class=\"file-types\">\n            @for (type of supportedFileTypes(); track $index) {\n              <p\n                class=\"badge\"\n                [class]=\"{\n                  pdf: type === 'pdf',\n                  video: ['avi', 'mp4', 'mov'].includes(type),\n                  image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),\n                }\"\n              >\n                {{ type }}\n              </p>\n            }\n          </div>\n        }\n        <button class=\"cancel-button\">\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"cancel-icon\"\n            (click)=\"cancel()\"\n          ></svg-icon>\n        </button>\n      </div>\n    </div>\n  }\n  @if (isLoadingSkeleton() && skeletonCount() > 0) {\n    <ng-container *ngTemplateOutlet=\"skeletonTemplate\"></ng-container>\n  } @else {\n    <!-- Carousel -->\n    @if (docCount > 0 && (documentVariant || mediaVariant)) {\n      <div #docsViewport class=\"docs\">\n        <div\n          class=\"doc-container\"\n          [class.documents-container-grid]=\"isDocumentsMode()\"\n          [style.transform]=\"isDocumentsMode() ? '' : carouselTransform()\"\n          [style.--carousel-index]=\"isDocumentsMode() ? null : carouselIndex()\"\n        >\n          @for (doc of docs(); track doc.uid) {\n            <cai-document-preview\n              [class.doc-visible]=\"\n                isDetailsSlider() && $index === carouselIndex()\n              \"\n              [class.doc-hidden]=\"\n                isDetailsSlider() && $index !== carouselIndex()\n              \"\n              class=\"doc\"\n              [file]=\"doc\"\n              [tags]=\"documentTags()\"\n              [searchText]=\"searchText()\"\n              [cdlDetailsMode]=\"isDetailsSlider()\"\n              [multipleDetailsDocs]=\"isDetailsSlider() && docCount > 1\"\n              [maxAspectRatio]=\"\n                isDetailsSlider() && docCount > 1\n                  ? maxDetailsAspectRatio()\n                  : null\n              \"\n              [drawerMode]=\"isDrawerMode()\"\n              [isCoverDetails]=\"isCoverDetails()\"\n              [viewMode]=\"isDocumentsMode() ? 'large' : 'small'\"\n              (onDelete)=\"handleDelete($event)\"\n              (onDownload)=\"handleDownload($event)\"\n              (onTagChange)=\"handleTagChange($event)\"\n              (onFileNameChange)=\"handleFileNameChange($event)\"\n              (onDocumentPreviewClick)=\"handleDocumentPreviewClick($event)\"\n              (aspectRatioChange)=\"onDocAspectRatioChange($event)\"\n            ></cai-document-preview>\n          }\n        </div>\n        @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n          <button\n            class=\"carousel-button carousel-left\"\n            type=\"button\"\n            (click)=\"carouselLeft()\"\n            [disabled]=\"carouselIndex() === 0\"\n            [style.opacity]=\"carouselIndex() === 0 ? '0' : '1'\"\n          >\n            <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n          </button>\n          <button\n            class=\"carousel-button carousel-right\"\n            type=\"button\"\n            (click)=\"carouselRight()\"\n            [disabled]=\"isCarouselAtEnd()\"\n            [style.opacity]=\"isCarouselAtEnd() ? '0' : '1'\"\n          >\n            <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n          </button>\n        }\n        @if (isDetailsSlider() && docCount > 1) {\n          <div class=\"sliders\">\n            @for (doc of docs(); track $index) {\n              <div\n                class=\"slider-item\"\n                (click)=\"carouselIndex.set($index)\"\n                [class.active]=\"$index === carouselIndex()\"\n              ></div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n<!-- Skeleton Template -->\n\n<ng-template #skeletonTemplate>\n  <div\n    class=\"skeleton-container\"\n    [ngClass]=\"{\n      'documents-container-grid': isDocumentsMode(),\n      'drawer-position': isDrawerMode(),\n    }\"\n  >\n    @for (item of skeletonItems(); track $index) {\n      <div class=\"skeleton-item\">\n        <div class=\"skeleton-bar\"></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".container.is-documents-mode{width:100%!important;max-width:100%!important}.container.is-documents-mode .drop-zone-container .drop-zone{width:100%!important}.documents-drag-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0003;z-index:10}.is-documents-mode{display:flex;flex-direction:column;gap:0!important;width:100%!important;height:100%!important}.is-documents-mode .drop-zone-container{display:flex;margin-bottom:4px;background-color:#f7f7f7;z-index:20}.is-documents-mode .drop-zone-container .drop-zone{width:100%;height:120px!important;background-color:transparent;outline-color:#dadada;transition:background-color .2s ease-in-out}.is-documents-mode .drop-zone-container .drop-zone:hover{background-color:#fff!important}.is-documents-mode .drop-zone-container .drop-zone .illustration{width:80px;height:80px}.is-documents-mode .drop-zone-container .drop-zone .drop-zone-text .heading{padding-bottom:0}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents{z-index:1000;position:absolute;top:4px;right:4px;width:26px;height:26px;background-color:transparent;padding:4px}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents .cancel-icon{width:18px;height:18px;color:#919191}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents:hover .cancel-icon{color:#424242}.is-documents-mode .skeleton-container .skeleton-item{width:100%;height:auto;aspect-ratio:1/1;max-width:100%;min-width:302px;min-height:302px;position:relative;border-radius:3px;background-color:#fff}.is-documents-mode .skeleton-container .skeleton-item .skeleton-bar{position:absolute;bottom:8px;left:8px;right:8px;width:auto;height:26px;background-color:#91919133;animation:skeleton-pulse 1s ease-in-out infinite alternate;border-radius:2px}.is-documents-mode .docs{width:100%!important;position:static!important;overflow:visible!important}.is-documents-mode .docs .doc-container .doc{height:auto!important}.is-documents-mode .docs .carousel-button{display:none}.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:4px;justify-items:stretch;align-items:start}@media(min-width:801px)and (max-width:1001px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(2,minmax(302px,1fr))}}@media(min-width:1002px)and (max-width:1307px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(3,minmax(302px,1fr))}}@media(min-width:1308px)and (max-width:1613px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(4,minmax(302px,1fr))}}@media(min-width:1614px)and (max-width:1920px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(5,minmax(302px,1fr))}}@media(min-width:1921px)and (max-width:2227px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(6,minmax(302px,1fr))}}@media(min-width:2228px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}}@keyframes skeleton-pulse{0%{background-color:#91919133}to{background-color:#91919120}}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:100%}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .img-cropper.snapback-animate ::ng-deep .ngx-ic-source-image{transition:transform .22s cubic-bezier(.22,1,.36,1)}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range{width:100%;height:22px;display:flex;align-items:center}.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .range input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;--range-active-color: #6692f1;--range-progress: 50%;background:transparent;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .cancel-button:hover{background-color:#424242;color:#fff}.cropper-overlay .lower-part .cropper-buttons .cancel-button:active{background-color:#1d1d1d;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .submit-button:hover{background-color:#0b49d1;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button:active{background-color:#00179e;color:#fff}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(145,145,145,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.hasCropper{height:204px!important;position:relative}input[type=range]:hover{--range-active-color: $color-blue-500}input[type=range]:active{--range-active-color: $color-blue-700}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;background-color:#fff;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-image:url(/assets/carriera-intern/icons/interaction/cai-thumb.svg);background-repeat:no-repeat;background-position:center;background-size:14px 18px;border-radius:2px;transition:background-color .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-active-color) 0%,var(--range-active-color) var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%);height:6px;transition:background .3s ease-in-out}input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b73ed 0%,#3b73ed var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:active::-webkit-slider-runnable-track{background:linear-gradient(to right,#0b49d1 0%,#0b49d1 var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:hover::-webkit-slider-thumb{cursor:grab}input[type=range]:active::-webkit-slider-thumb{background-image:url(/assets/carriera-intern/icons/interaction/cai-thumb-active.svg);cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}p{margin-bottom:0}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.illustration{width:100px;height:100px}.container{display:flex;gap:6px;position:relative;padding-left:0!important;padding-right:0!important;margin:0!important}.container.picture-container{gap:8px}.container.smallContainer{width:456px!important}.container.largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.smallContainer .docs .doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.largeContainer .docs{max-width:460px!important}.largeContainer .docs .doc-container{display:flex;gap:8px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;cursor:pointer;transition:background-color .2s ease-in-out}.drop-zone:hover{background-color:#eee}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;padding-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .media-subtext{margin-top:4px;color:#919191;font-size:11px;line-height:14px;font-weight:500}.smallView{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.smallView .drop-zone .drop-zone-text .subtext{line-height:14px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.text-white-50{color:#fff}.text-white-100{color:#f7f7f7}.text-white-200{color:#eee}.text-white-300{color:#e5e5e5}.text-white-500{color:#dadada}.text-white-500\\/20{color:#dadada33}.text-white-500\\/40{color:#dadada66}.text-white-500\\/70{color:#dadadab3}.text-white-700{color:#ccc}.text-black-50{color:#aaa}.text-black-100{color:#919191}.text-black-200{color:#6c6c6c}.text-black-300{color:#424242}.text-black-500{color:#2f2f2f}.text-black-500\\/20{color:#2f2f2f33}.text-black-500\\/40{color:#2f2f2f66}.text-black-500\\/70{color:#2f2f2fb3}.text-black-700{color:#1d1d1d}.text-blue-50{color:#e9effd}.text-blue-100{color:#bed0f9}.text-blue-200{color:#92b1f5}.text-blue-300{color:#6692f1}.text-blue-500{color:#3b73ed}.text-blue-500\\/20{color:#3b73ed33}.text-blue-500\\/40{color:#3b73ed66}.text-blue-500\\/70{color:#3b73edb3}.text-blue-700{color:#0b49d1}.text-blue-900{color:#00179e}.text-red-50{color:#fbe9e9}.text-red-100{color:#f4bebe}.text-red-200{color:#ed9292}.text-red-300{color:#e66767}.text-red-500{color:#df3c3c}.text-red-500\\/20{color:#df3c3c33}.text-red-500\\/40{color:#df3c3c66}.text-red-500\\/70{color:#df3c3cb3}.text-red-700{color:#c20c0c}.text-green-50{color:#e7f4f3}.text-green-100{color:#b6dfdb}.text-green-200{color:#86c9c3}.text-green-300{color:#56b4ac}.text-green-500{color:#259f94}.text-green-500\\/20{color:#259f9433}.text-green-500\\/40{color:#259f9466}.text-green-500\\/70{color:#259f94b3}.text-green-700{color:#007a6e}.text-yellow-50{color:#fef4e8}.text-yellow-100{color:#fddeb9}.text-yellow-200{color:#fbc88b}.text-yellow-300{color:#fab15c}.text-yellow-500{color:#f89b2e}.text-yellow-500\\/20{color:#f89b2e33}.text-yellow-500\\/40{color:#f89b2e66}.text-yellow-500\\/70{color:#f89b2eb3}.text-yellow-700{color:#de7700}.text-purple-50{color:#f4ebfd}.text-purple-100{color:#dfc2f9}.text-purple-200{color:#c999f4}.text-purple-300{color:#b370f0}.text-purple-500{color:#9e47ec}.text-purple-500\\/20{color:#9e47ec33}.text-purple-500\\/40{color:#9e47ec66}.text-purple-500\\/70{color:#9e47ecb3}.text-purple-700{color:#7919d0}.text-orange-50{color:#ffefea}.text-orange-100{color:#ffcfc0}.text-orange-200{color:#ffb097}.text-orange-300{color:#ff906d}.text-orange-500{color:#ff7043}.text-orange-500\\/20{color:#ff704333}.text-orange-500\\/40{color:#ff704366}.text-orange-500\\/70{color:#ff7043b3}.text-orange-700{color:#e54715}.text-azure-50{color:#e5f7fc}.text-azure-100{color:#b2e6f7}.text-azure-200{color:#80d6f1}.text-azure-300{color:#4dc5eb}.text-azure-500{color:#1ab5e6}.text-azure-500\\/20{color:#1ab5e633}.text-azure-500\\/40{color:#1ab5e666}.text-azure-500\\/70{color:#1ab5e6b3}.text-azure-700{color:#0093c9}.text-gold-50{color:#faf3e6}.text-gold-100{color:#efdcb4}.text-gold-200{color:#e4c481}.text-gold-300{color:#daad4f}.text-gold-500{color:#cf961d}.text-gold-500\\/20{color:#cf961d33}.text-gold-500\\/40{color:#cf961d66}.text-gold-500\\/70{color:#cf961db3}.text-gold-700{color:#b07000}.text-brown-50{color:#f1ede9}.text-brown-100{color:#d6c9bd}.text-brown-200{color:#bca691}.text-brown-300{color:#a08266}.text-brown-500{color:#865e3a}.text-brown-500\\/20{color:#865e3a33}.text-brown-500\\/40{color:#865e3a66}.text-brown-500\\/70{color:#865e3ab3}.text-brown-700{color:#5f330a}.text-navy-50{color:#e7e7fa}.text-navy-100{color:#b7b6f1}.text-navy-200{color:#8785e8}.text-navy-300{color:#5755df}.text-navy-500{color:#2724d6}.text-navy-500\\/20{color:#2724d633}.text-navy-500\\/40{color:#2724d666}.text-navy-500\\/70{color:#2724d6b3}.text-navy-700{color:#0000b8}.text-lime-50{color:#ecf6e7}.text-lime-100{color:#c5e3b6}.text-lime-200{color:#9ed186}.text-lime-300{color:#77bf56}.text-lime-500{color:#50ac25}.text-lime-500\\/20{color:#50ac2533}.text-lime-500\\/40{color:#50ac2566}.text-lime-500\\/70{color:#50ac25b3}.text-lime-700{color:#238900}.text-magenta-50{color:#fbe9f1}.text-magenta-100{color:#f4bed6}.text-magenta-200{color:#ed93bb}.text-magenta-300{color:#e668a0}.text-magenta-500{color:#df3d85}.text-magenta-500\\/20{color:#df3d8533}.text-magenta-500\\/40{color:#df3d8566}.text-magenta-500\\/70{color:#df3d85b3}.text-magenta-700{color:#c10d5d}.bg-white-50{background-color:#fff}.bg-white-100{background-color:#f7f7f7}.bg-white-200{background-color:#eee}.bg-white-300{background-color:#e5e5e5}.bg-white-500{background-color:#dadada}.bg-white-500\\/20{background-color:#dadada33}.bg-white-500\\/40{background-color:#dadada66}.bg-white-500\\/70{background-color:#dadadab3}.bg-white-700{background-color:#ccc}.bg-black-50{background-color:#aaa}.bg-black-100{background-color:#919191}.bg-black-200{background-color:#6c6c6c}.bg-black-300{background-color:#424242}.bg-black-500{background-color:#2f2f2f}.bg-black-500\\/20{background-color:#2f2f2f33}.bg-black-500\\/40{background-color:#2f2f2f66}.bg-black-500\\/70{background-color:#2f2f2fb3}.bg-black-700{background-color:#1d1d1d}.bg-blue-50{background-color:#e9effd}.bg-blue-100{background-color:#bed0f9}.bg-blue-200{background-color:#92b1f5}.bg-blue-300{background-color:#6692f1}.bg-blue-500{background-color:#3b73ed}.bg-blue-500\\/20{background-color:#3b73ed33}.bg-blue-500\\/40{background-color:#3b73ed66}.bg-blue-500\\/70{background-color:#3b73edb3}.bg-blue-700{background-color:#0b49d1}.bg-blue-900{background-color:#00179e}.bg-red-50{background-color:#fbe9e9}.bg-red-100{background-color:#f4bebe}.bg-red-200{background-color:#ed9292}.bg-red-300{background-color:#e66767}.bg-red-500{background-color:#df3c3c}.bg-red-500\\/20{background-color:#df3c3c33}.bg-red-500\\/40{background-color:#df3c3c66}.bg-red-500\\/70{background-color:#df3c3cb3}.bg-red-700{background-color:#c20c0c}.bg-green-50{background-color:#e7f4f3}.bg-green-100{background-color:#b6dfdb}.bg-green-200{background-color:#86c9c3}.bg-green-300{background-color:#56b4ac}.bg-green-500{background-color:#259f94}.bg-green-500\\/20{background-color:#259f9433}.bg-green-500\\/40{background-color:#259f9466}.bg-green-500\\/70{background-color:#259f94b3}.bg-green-700{background-color:#007a6e}.bg-yellow-50{background-color:#fef4e8}.bg-yellow-100{background-color:#fddeb9}.bg-yellow-200{background-color:#fbc88b}.bg-yellow-300{background-color:#fab15c}.bg-yellow-500{background-color:#f89b2e}.bg-yellow-500\\/20{background-color:#f89b2e33}.bg-yellow-500\\/40{background-color:#f89b2e66}.bg-yellow-500\\/70{background-color:#f89b2eb3}.bg-yellow-700{background-color:#de7700}.bg-purple-50{background-color:#f4ebfd}.bg-purple-100{background-color:#dfc2f9}.bg-purple-200{background-color:#c999f4}.bg-purple-300{background-color:#b370f0}.bg-purple-500{background-color:#9e47ec}.bg-purple-500\\/20{background-color:#9e47ec33}.bg-purple-500\\/40{background-color:#9e47ec66}.bg-purple-500\\/70{background-color:#9e47ecb3}.bg-purple-700{background-color:#7919d0}.bg-orange-50{background-color:#ffefea}.bg-orange-100{background-color:#ffcfc0}.bg-orange-200{background-color:#ffb097}.bg-orange-300{background-color:#ff906d}.bg-orange-500{background-color:#ff7043}.bg-orange-500\\/20{background-color:#ff704333}.bg-orange-500\\/40{background-color:#ff704366}.bg-orange-500\\/70{background-color:#ff7043b3}.bg-orange-700{background-color:#e54715}.bg-azure-50{background-color:#e5f7fc}.bg-azure-100{background-color:#b2e6f7}.bg-azure-200{background-color:#80d6f1}.bg-azure-300{background-color:#4dc5eb}.bg-azure-500{background-color:#1ab5e6}.bg-azure-500\\/20{background-color:#1ab5e633}.bg-azure-500\\/40{background-color:#1ab5e666}.bg-azure-500\\/70{background-color:#1ab5e6b3}.bg-azure-700{background-color:#0093c9}.bg-gold-50{background-color:#faf3e6}.bg-gold-100{background-color:#efdcb4}.bg-gold-200{background-color:#e4c481}.bg-gold-300{background-color:#daad4f}.bg-gold-500{background-color:#cf961d}.bg-gold-500\\/20{background-color:#cf961d33}.bg-gold-500\\/40{background-color:#cf961d66}.bg-gold-500\\/70{background-color:#cf961db3}.bg-gold-700{background-color:#b07000}.bg-brown-50{background-color:#f1ede9}.bg-brown-100{background-color:#d6c9bd}.bg-brown-200{background-color:#bca691}.bg-brown-300{background-color:#a08266}.bg-brown-500{background-color:#865e3a}.bg-brown-500\\/20{background-color:#865e3a33}.bg-brown-500\\/40{background-color:#865e3a66}.bg-brown-500\\/70{background-color:#865e3ab3}.bg-brown-700{background-color:#5f330a}.bg-navy-50{background-color:#e7e7fa}.bg-navy-100{background-color:#b7b6f1}.bg-navy-200{background-color:#8785e8}.bg-navy-300{background-color:#5755df}.bg-navy-500{background-color:#2724d6}.bg-navy-500\\/20{background-color:#2724d633}.bg-navy-500\\/40{background-color:#2724d666}.bg-navy-500\\/70{background-color:#2724d6b3}.bg-navy-700{background-color:#0000b8}.bg-lime-50{background-color:#ecf6e7}.bg-lime-100{background-color:#c5e3b6}.bg-lime-200{background-color:#9ed186}.bg-lime-300{background-color:#77bf56}.bg-lime-500{background-color:#50ac25}.bg-lime-500\\/20{background-color:#50ac2533}.bg-lime-500\\/40{background-color:#50ac2566}.bg-lime-500\\/70{background-color:#50ac25b3}.bg-lime-700{background-color:#238900}.bg-magenta-50{background-color:#fbe9f1}.bg-magenta-100{background-color:#f4bed6}.bg-magenta-200{background-color:#ed93bb}.bg-magenta-300{background-color:#e668a0}.bg-magenta-500{background-color:#df3d85}.bg-magenta-500\\/20{background-color:#df3d8533}.bg-magenta-500\\/40{background-color:#df3d8566}.bg-magenta-500\\/70{background-color:#df3d85b3}.bg-magenta-700{background-color:#c10d5d}.border-white-50{border-color:#fff}.border-white-100{border-color:#f7f7f7}.border-white-200{border-color:#eee}.border-white-300{border-color:#e5e5e5}.border-white-500{border-color:#dadada}.border-white-500\\/20{border-color:#dadada33}.border-white-500\\/40{border-color:#dadada66}.border-white-500\\/70{border-color:#dadadab3}.border-white-700{border-color:#ccc}.border-black-50{border-color:#aaa}.border-black-100{border-color:#919191}.border-black-200{border-color:#6c6c6c}.border-black-300{border-color:#424242}.border-black-500{border-color:#2f2f2f}.border-black-500\\/20{border-color:#2f2f2f33}.border-black-500\\/40{border-color:#2f2f2f66}.border-black-500\\/70{border-color:#2f2f2fb3}.border-black-700{border-color:#1d1d1d}.border-blue-50{border-color:#e9effd}.border-blue-100{border-color:#bed0f9}.border-blue-200{border-color:#92b1f5}.border-blue-300{border-color:#6692f1}.border-blue-500{border-color:#3b73ed}.border-blue-500\\/20{border-color:#3b73ed33}.border-blue-500\\/40{border-color:#3b73ed66}.border-blue-500\\/70{border-color:#3b73edb3}.border-blue-700{border-color:#0b49d1}.border-blue-900{border-color:#00179e}.border-red-50{border-color:#fbe9e9}.border-red-100{border-color:#f4bebe}.border-red-200{border-color:#ed9292}.border-red-300{border-color:#e66767}.border-red-500{border-color:#df3c3c}.border-red-500\\/20{border-color:#df3c3c33}.border-red-500\\/40{border-color:#df3c3c66}.border-red-500\\/70{border-color:#df3c3cb3}.border-red-700{border-color:#c20c0c}.border-green-50{border-color:#e7f4f3}.border-green-100{border-color:#b6dfdb}.border-green-200{border-color:#86c9c3}.border-green-300{border-color:#56b4ac}.border-green-500{border-color:#259f94}.border-green-500\\/20{border-color:#259f9433}.border-green-500\\/40{border-color:#259f9466}.border-green-500\\/70{border-color:#259f94b3}.border-green-700{border-color:#007a6e}.border-yellow-50{border-color:#fef4e8}.border-yellow-100{border-color:#fddeb9}.border-yellow-200{border-color:#fbc88b}.border-yellow-300{border-color:#fab15c}.border-yellow-500{border-color:#f89b2e}.border-yellow-500\\/20{border-color:#f89b2e33}.border-yellow-500\\/40{border-color:#f89b2e66}.border-yellow-500\\/70{border-color:#f89b2eb3}.border-yellow-700{border-color:#de7700}.border-purple-50{border-color:#f4ebfd}.border-purple-100{border-color:#dfc2f9}.border-purple-200{border-color:#c999f4}.border-purple-300{border-color:#b370f0}.border-purple-500{border-color:#9e47ec}.border-purple-500\\/20{border-color:#9e47ec33}.border-purple-500\\/40{border-color:#9e47ec66}.border-purple-500\\/70{border-color:#9e47ecb3}.border-purple-700{border-color:#7919d0}.border-orange-50{border-color:#ffefea}.border-orange-100{border-color:#ffcfc0}.border-orange-200{border-color:#ffb097}.border-orange-300{border-color:#ff906d}.border-orange-500{border-color:#ff7043}.border-orange-500\\/20{border-color:#ff704333}.border-orange-500\\/40{border-color:#ff704366}.border-orange-500\\/70{border-color:#ff7043b3}.border-orange-700{border-color:#e54715}.border-azure-50{border-color:#e5f7fc}.border-azure-100{border-color:#b2e6f7}.border-azure-200{border-color:#80d6f1}.border-azure-300{border-color:#4dc5eb}.border-azure-500{border-color:#1ab5e6}.border-azure-500\\/20{border-color:#1ab5e633}.border-azure-500\\/40{border-color:#1ab5e666}.border-azure-500\\/70{border-color:#1ab5e6b3}.border-azure-700{border-color:#0093c9}.border-gold-50{border-color:#faf3e6}.border-gold-100{border-color:#efdcb4}.border-gold-200{border-color:#e4c481}.border-gold-300{border-color:#daad4f}.border-gold-500{border-color:#cf961d}.border-gold-500\\/20{border-color:#cf961d33}.border-gold-500\\/40{border-color:#cf961d66}.border-gold-500\\/70{border-color:#cf961db3}.border-gold-700{border-color:#b07000}.border-brown-50{border-color:#f1ede9}.border-brown-100{border-color:#d6c9bd}.border-brown-200{border-color:#bca691}.border-brown-300{border-color:#a08266}.border-brown-500{border-color:#865e3a}.border-brown-500\\/20{border-color:#865e3a33}.border-brown-500\\/40{border-color:#865e3a66}.border-brown-500\\/70{border-color:#865e3ab3}.border-brown-700{border-color:#5f330a}.border-navy-50{border-color:#e7e7fa}.border-navy-100{border-color:#b7b6f1}.border-navy-200{border-color:#8785e8}.border-navy-300{border-color:#5755df}.border-navy-500{border-color:#2724d6}.border-navy-500\\/20{border-color:#2724d633}.border-navy-500\\/40{border-color:#2724d666}.border-navy-500\\/70{border-color:#2724d6b3}.border-navy-700{border-color:#0000b8}.border-lime-50{border-color:#ecf6e7}.border-lime-100{border-color:#c5e3b6}.border-lime-200{border-color:#9ed186}.border-lime-300{border-color:#77bf56}.border-lime-500{border-color:#50ac25}.border-lime-500\\/20{border-color:#50ac2533}.border-lime-500\\/40{border-color:#50ac2566}.border-lime-500\\/70{border-color:#50ac25b3}.border-lime-700{border-color:#238900}.border-magenta-50{border-color:#fbe9f1}.border-magenta-100{border-color:#f4bed6}.border-magenta-200{border-color:#ed93bb}.border-magenta-300{border-color:#e668a0}.border-magenta-500{border-color:#df3d85}.border-magenta-500\\/20{border-color:#df3d8533}.border-magenta-500\\/40{border-color:#df3d8566}.border-magenta-500\\/70{border-color:#df3d85b3}.border-magenta-700{border-color:#c10d5d}.fill-white-50{fill:#fff}.fill-white-100{fill:#f7f7f7}.fill-white-200{fill:#eee}.fill-white-300{fill:#e5e5e5}.fill-white-500{fill:#dadada}.fill-white-500\\/20{fill:#dadada33}.fill-white-500\\/40{fill:#dadada66}.fill-white-500\\/70{fill:#dadadab3}.fill-white-700{fill:#ccc}.fill-black-50{fill:#aaa}.fill-black-100{fill:#919191}.fill-black-200{fill:#6c6c6c}.fill-black-300{fill:#424242}.fill-black-500{fill:#2f2f2f}.fill-black-500\\/20{fill:#2f2f2f33}.fill-black-500\\/40{fill:#2f2f2f66}.fill-black-500\\/70{fill:#2f2f2fb3}.fill-black-700{fill:#1d1d1d}.fill-blue-50{fill:#e9effd}.fill-blue-100{fill:#bed0f9}.fill-blue-200{fill:#92b1f5}.fill-blue-300{fill:#6692f1}.fill-blue-500{fill:#3b73ed}.fill-blue-500\\/20{fill:#3b73ed33}.fill-blue-500\\/40{fill:#3b73ed66}.fill-blue-500\\/70{fill:#3b73edb3}.fill-blue-700{fill:#0b49d1}.fill-blue-900{fill:#00179e}.fill-red-50{fill:#fbe9e9}.fill-red-100{fill:#f4bebe}.fill-red-200{fill:#ed9292}.fill-red-300{fill:#e66767}.fill-red-500{fill:#df3c3c}.fill-red-500\\/20{fill:#df3c3c33}.fill-red-500\\/40{fill:#df3c3c66}.fill-red-500\\/70{fill:#df3c3cb3}.fill-red-700{fill:#c20c0c}.fill-green-50{fill:#e7f4f3}.fill-green-100{fill:#b6dfdb}.fill-green-200{fill:#86c9c3}.fill-green-300{fill:#56b4ac}.fill-green-500{fill:#259f94}.fill-green-500\\/20{fill:#259f9433}.fill-green-500\\/40{fill:#259f9466}.fill-green-500\\/70{fill:#259f94b3}.fill-green-700{fill:#007a6e}.fill-yellow-50{fill:#fef4e8}.fill-yellow-100{fill:#fddeb9}.fill-yellow-200{fill:#fbc88b}.fill-yellow-300{fill:#fab15c}.fill-yellow-500{fill:#f89b2e}.fill-yellow-500\\/20{fill:#f89b2e33}.fill-yellow-500\\/40{fill:#f89b2e66}.fill-yellow-500\\/70{fill:#f89b2eb3}.fill-yellow-700{fill:#de7700}.fill-purple-50{fill:#f4ebfd}.fill-purple-100{fill:#dfc2f9}.fill-purple-200{fill:#c999f4}.fill-purple-300{fill:#b370f0}.fill-purple-500{fill:#9e47ec}.fill-purple-500\\/20{fill:#9e47ec33}.fill-purple-500\\/40{fill:#9e47ec66}.fill-purple-500\\/70{fill:#9e47ecb3}.fill-purple-700{fill:#7919d0}.fill-orange-50{fill:#ffefea}.fill-orange-100{fill:#ffcfc0}.fill-orange-200{fill:#ffb097}.fill-orange-300{fill:#ff906d}.fill-orange-500{fill:#ff7043}.fill-orange-500\\/20{fill:#ff704333}.fill-orange-500\\/40{fill:#ff704366}.fill-orange-500\\/70{fill:#ff7043b3}.fill-orange-700{fill:#e54715}.fill-azure-50{fill:#e5f7fc}.fill-azure-100{fill:#b2e6f7}.fill-azure-200{fill:#80d6f1}.fill-azure-300{fill:#4dc5eb}.fill-azure-500{fill:#1ab5e6}.fill-azure-500\\/20{fill:#1ab5e633}.fill-azure-500\\/40{fill:#1ab5e666}.fill-azure-500\\/70{fill:#1ab5e6b3}.fill-azure-700{fill:#0093c9}.fill-gold-50{fill:#faf3e6}.fill-gold-100{fill:#efdcb4}.fill-gold-200{fill:#e4c481}.fill-gold-300{fill:#daad4f}.fill-gold-500{fill:#cf961d}.fill-gold-500\\/20{fill:#cf961d33}.fill-gold-500\\/40{fill:#cf961d66}.fill-gold-500\\/70{fill:#cf961db3}.fill-gold-700{fill:#b07000}.fill-brown-50{fill:#f1ede9}.fill-brown-100{fill:#d6c9bd}.fill-brown-200{fill:#bca691}.fill-brown-300{fill:#a08266}.fill-brown-500{fill:#865e3a}.fill-brown-500\\/20{fill:#865e3a33}.fill-brown-500\\/40{fill:#865e3a66}.fill-brown-500\\/70{fill:#865e3ab3}.fill-brown-700{fill:#5f330a}.fill-navy-50{fill:#e7e7fa}.fill-navy-100{fill:#b7b6f1}.fill-navy-200{fill:#8785e8}.fill-navy-300{fill:#5755df}.fill-navy-500{fill:#2724d6}.fill-navy-500\\/20{fill:#2724d633}.fill-navy-500\\/40{fill:#2724d666}.fill-navy-500\\/70{fill:#2724d6b3}.fill-navy-700{fill:#0000b8}.fill-lime-50{fill:#ecf6e7}.fill-lime-100{fill:#c5e3b6}.fill-lime-200{fill:#9ed186}.fill-lime-300{fill:#77bf56}.fill-lime-500{fill:#50ac25}.fill-lime-500\\/20{fill:#50ac2533}.fill-lime-500\\/40{fill:#50ac2566}.fill-lime-500\\/70{fill:#50ac25b3}.fill-lime-700{fill:#238900}.fill-magenta-50{fill:#fbe9f1}.fill-magenta-100{fill:#f4bed6}.fill-magenta-200{fill:#ed93bb}.fill-magenta-300{fill:#e668a0}.fill-magenta-500{fill:#df3d85}.fill-magenta-500\\/20{fill:#df3d8533}.fill-magenta-500\\/40{fill:#df3d8566}.fill-magenta-500\\/70{fill:#df3d85b3}.fill-magenta-700{fill:#c10d5d}.stroke-white-50{stroke:#fff}.stroke-white-100{stroke:#f7f7f7}.stroke-white-200{stroke:#eee}.stroke-white-300{stroke:#e5e5e5}.stroke-white-500{stroke:#dadada}.stroke-white-500\\/20{stroke:#dadada33}.stroke-white-500\\/40{stroke:#dadada66}.stroke-white-500\\/70{stroke:#dadadab3}.stroke-white-700{stroke:#ccc}.stroke-black-50{stroke:#aaa}.stroke-black-100{stroke:#919191}.stroke-black-200{stroke:#6c6c6c}.stroke-black-300{stroke:#424242}.stroke-black-500{stroke:#2f2f2f}.stroke-black-500\\/20{stroke:#2f2f2f33}.stroke-black-500\\/40{stroke:#2f2f2f66}.stroke-black-500\\/70{stroke:#2f2f2fb3}.stroke-black-700{stroke:#1d1d1d}.stroke-blue-50{stroke:#e9effd}.stroke-blue-100{stroke:#bed0f9}.stroke-blue-200{stroke:#92b1f5}.stroke-blue-300{stroke:#6692f1}.stroke-blue-500{stroke:#3b73ed}.stroke-blue-500\\/20{stroke:#3b73ed33}.stroke-blue-500\\/40{stroke:#3b73ed66}.stroke-blue-500\\/70{stroke:#3b73edb3}.stroke-blue-700{stroke:#0b49d1}.stroke-blue-900{stroke:#00179e}.stroke-red-50{stroke:#fbe9e9}.stroke-red-100{stroke:#f4bebe}.stroke-red-200{stroke:#ed9292}.stroke-red-300{stroke:#e66767}.stroke-red-500{stroke:#df3c3c}.stroke-red-500\\/20{stroke:#df3c3c33}.stroke-red-500\\/40{stroke:#df3c3c66}.stroke-red-500\\/70{stroke:#df3c3cb3}.stroke-red-700{stroke:#c20c0c}.stroke-green-50{stroke:#e7f4f3}.stroke-green-100{stroke:#b6dfdb}.stroke-green-200{stroke:#86c9c3}.stroke-green-300{stroke:#56b4ac}.stroke-green-500{stroke:#259f94}.stroke-green-500\\/20{stroke:#259f9433}.stroke-green-500\\/40{stroke:#259f9466}.stroke-green-500\\/70{stroke:#259f94b3}.stroke-green-700{stroke:#007a6e}.stroke-yellow-50{stroke:#fef4e8}.stroke-yellow-100{stroke:#fddeb9}.stroke-yellow-200{stroke:#fbc88b}.stroke-yellow-300{stroke:#fab15c}.stroke-yellow-500{stroke:#f89b2e}.stroke-yellow-500\\/20{stroke:#f89b2e33}.stroke-yellow-500\\/40{stroke:#f89b2e66}.stroke-yellow-500\\/70{stroke:#f89b2eb3}.stroke-yellow-700{stroke:#de7700}.stroke-purple-50{stroke:#f4ebfd}.stroke-purple-100{stroke:#dfc2f9}.stroke-purple-200{stroke:#c999f4}.stroke-purple-300{stroke:#b370f0}.stroke-purple-500{stroke:#9e47ec}.stroke-purple-500\\/20{stroke:#9e47ec33}.stroke-purple-500\\/40{stroke:#9e47ec66}.stroke-purple-500\\/70{stroke:#9e47ecb3}.stroke-purple-700{stroke:#7919d0}.stroke-orange-50{stroke:#ffefea}.stroke-orange-100{stroke:#ffcfc0}.stroke-orange-200{stroke:#ffb097}.stroke-orange-300{stroke:#ff906d}.stroke-orange-500{stroke:#ff7043}.stroke-orange-500\\/20{stroke:#ff704333}.stroke-orange-500\\/40{stroke:#ff704366}.stroke-orange-500\\/70{stroke:#ff7043b3}.stroke-orange-700{stroke:#e54715}.stroke-azure-50{stroke:#e5f7fc}.stroke-azure-100{stroke:#b2e6f7}.stroke-azure-200{stroke:#80d6f1}.stroke-azure-300{stroke:#4dc5eb}.stroke-azure-500{stroke:#1ab5e6}.stroke-azure-500\\/20{stroke:#1ab5e633}.stroke-azure-500\\/40{stroke:#1ab5e666}.stroke-azure-500\\/70{stroke:#1ab5e6b3}.stroke-azure-700{stroke:#0093c9}.stroke-gold-50{stroke:#faf3e6}.stroke-gold-100{stroke:#efdcb4}.stroke-gold-200{stroke:#e4c481}.stroke-gold-300{stroke:#daad4f}.stroke-gold-500{stroke:#cf961d}.stroke-gold-500\\/20{stroke:#cf961d33}.stroke-gold-500\\/40{stroke:#cf961d66}.stroke-gold-500\\/70{stroke:#cf961db3}.stroke-gold-700{stroke:#b07000}.stroke-brown-50{stroke:#f1ede9}.stroke-brown-100{stroke:#d6c9bd}.stroke-brown-200{stroke:#bca691}.stroke-brown-300{stroke:#a08266}.stroke-brown-500{stroke:#865e3a}.stroke-brown-500\\/20{stroke:#865e3a33}.stroke-brown-500\\/40{stroke:#865e3a66}.stroke-brown-500\\/70{stroke:#865e3ab3}.stroke-brown-700{stroke:#5f330a}.stroke-navy-50{stroke:#e7e7fa}.stroke-navy-100{stroke:#b7b6f1}.stroke-navy-200{stroke:#8785e8}.stroke-navy-300{stroke:#5755df}.stroke-navy-500{stroke:#2724d6}.stroke-navy-500\\/20{stroke:#2724d633}.stroke-navy-500\\/40{stroke:#2724d666}.stroke-navy-500\\/70{stroke:#2724d6b3}.stroke-navy-700{stroke:#0000b8}.stroke-lime-50{stroke:#ecf6e7}.stroke-lime-100{stroke:#c5e3b6}.stroke-lime-200{stroke:#9ed186}.stroke-lime-300{stroke:#77bf56}.stroke-lime-500{stroke:#50ac25}.stroke-lime-500\\/20{stroke:#50ac2533}.stroke-lime-500\\/40{stroke:#50ac2566}.stroke-lime-500\\/70{stroke:#50ac25b3}.stroke-lime-700{stroke:#238900}.stroke-magenta-50{stroke:#fbe9f1}.stroke-magenta-100{stroke:#f4bed6}.stroke-magenta-200{stroke:#ed93bb}.stroke-magenta-300{stroke:#e668a0}.stroke-magenta-500{stroke:#df3d85}.stroke-magenta-500\\/20{stroke:#df3d8533}.stroke-magenta-500\\/40{stroke:#df3d8566}.stroke-magenta-500\\/70{stroke:#df3d85b3}.stroke-magenta-700{stroke:#c10d5d}.hover\\:text-white-50:hover{color:#fff}.hover\\:text-white-100:hover{color:#f7f7f7}.hover\\:text-white-200:hover{color:#eee}.hover\\:text-white-300:hover{color:#e5e5e5}.hover\\:text-white-500:hover{color:#dadada}.hover\\:text-white-500:hover\\/20{color:#dadada33}.hover\\:text-white-500:hover\\/40{color:#dadada66}.hover\\:text-white-500:hover\\/70{color:#dadadab3}.hover\\:text-white-700:hover{color:#ccc}.hover\\:text-black-50:hover{color:#aaa}.hover\\:text-black-100:hover{color:#919191}.hover\\:text-black-200:hover{color:#6c6c6c}.hover\\:text-black-300:hover{color:#424242}.hover\\:text-black-500:hover{color:#2f2f2f}.hover\\:text-black-500:hover\\/20{color:#2f2f2f33}.hover\\:text-black-500:hover\\/40{color:#2f2f2f66}.hover\\:text-black-500:hover\\/70{color:#2f2f2fb3}.hover\\:text-black-700:hover{color:#1d1d1d}.hover\\:text-blue-50:hover{color:#e9effd}.hover\\:text-blue-100:hover{color:#bed0f9}.hover\\:text-blue-200:hover{color:#92b1f5}.hover\\:text-blue-300:hover{color:#6692f1}.hover\\:text-blue-500:hover{color:#3b73ed}.hover\\:text-blue-500:hover\\/20{color:#3b73ed33}.hover\\:text-blue-500:hover\\/40{color:#3b73ed66}.hover\\:text-blue-500:hover\\/70{color:#3b73edb3}.hover\\:text-blue-700:hover{color:#0b49d1}.hover\\:text-blue-900:hover{color:#00179e}.hover\\:text-red-50:hover{color:#fbe9e9}.hover\\:text-red-100:hover{color:#f4bebe}.hover\\:text-red-200:hover{color:#ed9292}.hover\\:text-red-300:hover{color:#e66767}.hover\\:text-red-500:hover{color:#df3c3c}.hover\\:text-red-500:hover\\/20{color:#df3c3c33}.hover\\:text-red-500:hover\\/40{color:#df3c3c66}.hover\\:text-red-500:hover\\/70{color:#df3c3cb3}.hover\\:text-red-700:hover{color:#c20c0c}.hover\\:text-green-50:hover{color:#e7f4f3}.hover\\:text-green-100:hover{color:#b6dfdb}.hover\\:text-green-200:hover{color:#86c9c3}.hover\\:text-green-300:hover{color:#56b4ac}.hover\\:text-green-500:hover{color:#259f94}.hover\\:text-green-500:hover\\/20{color:#259f9433}.hover\\:text-green-500:hover\\/40{color:#259f9466}.hover\\:text-green-500:hover\\/70{color:#259f94b3}.hover\\:text-green-700:hover{color:#007a6e}.hover\\:text-yellow-50:hover{color:#fef4e8}.hover\\:text-yellow-100:hover{color:#fddeb9}.hover\\:text-yellow-200:hover{color:#fbc88b}.hover\\:text-yellow-300:hover{color:#fab15c}.hover\\:text-yellow-500:hover{color:#f89b2e}.hover\\:text-yellow-500:hover\\/20{color:#f89b2e33}.hover\\:text-yellow-500:hover\\/40{color:#f89b2e66}.hover\\:text-yellow-500:hover\\/70{color:#f89b2eb3}.hover\\:text-yellow-700:hover{color:#de7700}.hover\\:text-purple-50:hover{color:#f4ebfd}.hover\\:text-purple-100:hover{color:#dfc2f9}.hover\\:text-purple-200:hover{color:#c999f4}.hover\\:text-purple-300:hover{color:#b370f0}.hover\\:text-purple-500:hover{color:#9e47ec}.hover\\:text-purple-500:hover\\/20{color:#9e47ec33}.hover\\:text-purple-500:hover\\/40{color:#9e47ec66}.hover\\:text-purple-500:hover\\/70{color:#9e47ecb3}.hover\\:text-purple-700:hover{color:#7919d0}.hover\\:text-orange-50:hover{color:#ffefea}.hover\\:text-orange-100:hover{color:#ffcfc0}.hover\\:text-orange-200:hover{color:#ffb097}.hover\\:text-orange-300:hover{color:#ff906d}.hover\\:text-orange-500:hover{color:#ff7043}.hover\\:text-orange-500:hover\\/20{color:#ff704333}.hover\\:text-orange-500:hover\\/40{color:#ff704366}.hover\\:text-orange-500:hover\\/70{color:#ff7043b3}.hover\\:text-orange-700:hover{color:#e54715}.hover\\:text-azure-50:hover{color:#e5f7fc}.hover\\:text-azure-100:hover{color:#b2e6f7}.hover\\:text-azure-200:hover{color:#80d6f1}.hover\\:text-azure-300:hover{color:#4dc5eb}.hover\\:text-azure-500:hover{color:#1ab5e6}.hover\\:text-azure-500:hover\\/20{color:#1ab5e633}.hover\\:text-azure-500:hover\\/40{color:#1ab5e666}.hover\\:text-azure-500:hover\\/70{color:#1ab5e6b3}.hover\\:text-azure-700:hover{color:#0093c9}.hover\\:text-gold-50:hover{color:#faf3e6}.hover\\:text-gold-100:hover{color:#efdcb4}.hover\\:text-gold-200:hover{color:#e4c481}.hover\\:text-gold-300:hover{color:#daad4f}.hover\\:text-gold-500:hover{color:#cf961d}.hover\\:text-gold-500:hover\\/20{color:#cf961d33}.hover\\:text-gold-500:hover\\/40{color:#cf961d66}.hover\\:text-gold-500:hover\\/70{color:#cf961db3}.hover\\:text-gold-700:hover{color:#b07000}.hover\\:text-brown-50:hover{color:#f1ede9}.hover\\:text-brown-100:hover{color:#d6c9bd}.hover\\:text-brown-200:hover{color:#bca691}.hover\\:text-brown-300:hover{color:#a08266}.hover\\:text-brown-500:hover{color:#865e3a}.hover\\:text-brown-500:hover\\/20{color:#865e3a33}.hover\\:text-brown-500:hover\\/40{color:#865e3a66}.hover\\:text-brown-500:hover\\/70{color:#865e3ab3}.hover\\:text-brown-700:hover{color:#5f330a}.hover\\:text-navy-50:hover{color:#e7e7fa}.hover\\:text-navy-100:hover{color:#b7b6f1}.hover\\:text-navy-200:hover{color:#8785e8}.hover\\:text-navy-300:hover{color:#5755df}.hover\\:text-navy-500:hover{color:#2724d6}.hover\\:text-navy-500:hover\\/20{color:#2724d633}.hover\\:text-navy-500:hover\\/40{color:#2724d666}.hover\\:text-navy-500:hover\\/70{color:#2724d6b3}.hover\\:text-navy-700:hover{color:#0000b8}.hover\\:text-lime-50:hover{color:#ecf6e7}.hover\\:text-lime-100:hover{color:#c5e3b6}.hover\\:text-lime-200:hover{color:#9ed186}.hover\\:text-lime-300:hover{color:#77bf56}.hover\\:text-lime-500:hover{color:#50ac25}.hover\\:text-lime-500:hover\\/20{color:#50ac2533}.hover\\:text-lime-500:hover\\/40{color:#50ac2566}.hover\\:text-lime-500:hover\\/70{color:#50ac25b3}.hover\\:text-lime-700:hover{color:#238900}.hover\\:text-magenta-50:hover{color:#fbe9f1}.hover\\:text-magenta-100:hover{color:#f4bed6}.hover\\:text-magenta-200:hover{color:#ed93bb}.hover\\:text-magenta-300:hover{color:#e668a0}.hover\\:text-magenta-500:hover{color:#df3d85}.hover\\:text-magenta-500:hover\\/20{color:#df3d8533}.hover\\:text-magenta-500:hover\\/40{color:#df3d8566}.hover\\:text-magenta-500:hover\\/70{color:#df3d85b3}.hover\\:text-magenta-700:hover{color:#c10d5d}.hover\\:bg-white-50:hover{background-color:#fff}.hover\\:bg-white-100:hover{background-color:#f7f7f7}.hover\\:bg-white-200:hover{background-color:#eee}.hover\\:bg-white-300:hover{background-color:#e5e5e5}.hover\\:bg-white-500:hover{background-color:#dadada}.hover\\:bg-white-500:hover\\/20{background-color:#dadada33}.hover\\:bg-white-500:hover\\/40{background-color:#dadada66}.hover\\:bg-white-500:hover\\/70{background-color:#dadadab3}.hover\\:bg-white-700:hover{background-color:#ccc}.hover\\:bg-black-50:hover{background-color:#aaa}.hover\\:bg-black-100:hover{background-color:#919191}.hover\\:bg-black-200:hover{background-color:#6c6c6c}.hover\\:bg-black-300:hover{background-color:#424242}.hover\\:bg-black-500:hover{background-color:#2f2f2f}.hover\\:bg-black-500:hover\\/20{background-color:#2f2f2f33}.hover\\:bg-black-500:hover\\/40{background-color:#2f2f2f66}.hover\\:bg-black-500:hover\\/70{background-color:#2f2f2fb3}.hover\\:bg-black-700:hover{background-color:#1d1d1d}.hover\\:bg-blue-50:hover{background-color:#e9effd}.hover\\:bg-blue-100:hover{background-color:#bed0f9}.hover\\:bg-blue-200:hover{background-color:#92b1f5}.hover\\:bg-blue-300:hover{background-color:#6692f1}.hover\\:bg-blue-500:hover{background-color:#3b73ed}.hover\\:bg-blue-500:hover\\/20{background-color:#3b73ed33}.hover\\:bg-blue-500:hover\\/40{background-color:#3b73ed66}.hover\\:bg-blue-500:hover\\/70{background-color:#3b73edb3}.hover\\:bg-blue-700:hover{background-color:#0b49d1}.hover\\:bg-blue-900:hover{background-color:#00179e}.hover\\:bg-red-50:hover{background-color:#fbe9e9}.hover\\:bg-red-100:hover{background-color:#f4bebe}.hover\\:bg-red-200:hover{background-color:#ed9292}.hover\\:bg-red-300:hover{background-color:#e66767}.hover\\:bg-red-500:hover{background-color:#df3c3c}.hover\\:bg-red-500:hover\\/20{background-color:#df3c3c33}.hover\\:bg-red-500:hover\\/40{background-color:#df3c3c66}.hover\\:bg-red-500:hover\\/70{background-color:#df3c3cb3}.hover\\:bg-red-700:hover{background-color:#c20c0c}.hover\\:bg-green-50:hover{background-color:#e7f4f3}.hover\\:bg-green-100:hover{background-color:#b6dfdb}.hover\\:bg-green-200:hover{background-color:#86c9c3}.hover\\:bg-green-300:hover{background-color:#56b4ac}.hover\\:bg-green-500:hover{background-color:#259f94}.hover\\:bg-green-500:hover\\/20{background-color:#259f9433}.hover\\:bg-green-500:hover\\/40{background-color:#259f9466}.hover\\:bg-green-500:hover\\/70{background-color:#259f94b3}.hover\\:bg-green-700:hover{background-color:#007a6e}.hover\\:bg-yellow-50:hover{background-color:#fef4e8}.hover\\:bg-yellow-100:hover{background-color:#fddeb9}.hover\\:bg-yellow-200:hover{background-color:#fbc88b}.hover\\:bg-yellow-300:hover{background-color:#fab15c}.hover\\:bg-yellow-500:hover{background-color:#f89b2e}.hover\\:bg-yellow-500:hover\\/20{background-color:#f89b2e33}.hover\\:bg-yellow-500:hover\\/40{background-color:#f89b2e66}.hover\\:bg-yellow-500:hover\\/70{background-color:#f89b2eb3}.hover\\:bg-yellow-700:hover{background-color:#de7700}.hover\\:bg-purple-50:hover{background-color:#f4ebfd}.hover\\:bg-purple-100:hover{background-color:#dfc2f9}.hover\\:bg-purple-200:hover{background-color:#c999f4}.hover\\:bg-purple-300:hover{background-color:#b370f0}.hover\\:bg-purple-500:hover{background-color:#9e47ec}.hover\\:bg-purple-500:hover\\/20{background-color:#9e47ec33}.hover\\:bg-purple-500:hover\\/40{background-color:#9e47ec66}.hover\\:bg-purple-500:hover\\/70{background-color:#9e47ecb3}.hover\\:bg-purple-700:hover{background-color:#7919d0}.hover\\:bg-orange-50:hover{background-color:#ffefea}.hover\\:bg-orange-100:hover{background-color:#ffcfc0}.hover\\:bg-orange-200:hover{background-color:#ffb097}.hover\\:bg-orange-300:hover{background-color:#ff906d}.hover\\:bg-orange-500:hover{background-color:#ff7043}.hover\\:bg-orange-500:hover\\/20{background-color:#ff704333}.hover\\:bg-orange-500:hover\\/40{background-color:#ff704366}.hover\\:bg-orange-500:hover\\/70{background-color:#ff7043b3}.hover\\:bg-orange-700:hover{background-color:#e54715}.hover\\:bg-azure-50:hover{background-color:#e5f7fc}.hover\\:bg-azure-100:hover{background-color:#b2e6f7}.hover\\:bg-azure-200:hover{background-color:#80d6f1}.hover\\:bg-azure-300:hover{background-color:#4dc5eb}.hover\\:bg-azure-500:hover{background-color:#1ab5e6}.hover\\:bg-azure-500:hover\\/20{background-color:#1ab5e633}.hover\\:bg-azure-500:hover\\/40{background-color:#1ab5e666}.hover\\:bg-azure-500:hover\\/70{background-color:#1ab5e6b3}.hover\\:bg-azure-700:hover{background-color:#0093c9}.hover\\:bg-gold-50:hover{background-color:#faf3e6}.hover\\:bg-gold-100:hover{background-color:#efdcb4}.hover\\:bg-gold-200:hover{background-color:#e4c481}.hover\\:bg-gold-300:hover{background-color:#daad4f}.hover\\:bg-gold-500:hover{background-color:#cf961d}.hover\\:bg-gold-500:hover\\/20{background-color:#cf961d33}.hover\\:bg-gold-500:hover\\/40{background-color:#cf961d66}.hover\\:bg-gold-500:hover\\/70{background-color:#cf961db3}.hover\\:bg-gold-700:hover{background-color:#b07000}.hover\\:bg-brown-50:hover{background-color:#f1ede9}.hover\\:bg-brown-100:hover{background-color:#d6c9bd}.hover\\:bg-brown-200:hover{background-color:#bca691}.hover\\:bg-brown-300:hover{background-color:#a08266}.hover\\:bg-brown-500:hover{background-color:#865e3a}.hover\\:bg-brown-500:hover\\/20{background-color:#865e3a33}.hover\\:bg-brown-500:hover\\/40{background-color:#865e3a66}.hover\\:bg-brown-500:hover\\/70{background-color:#865e3ab3}.hover\\:bg-brown-700:hover{background-color:#5f330a}.hover\\:bg-navy-50:hover{background-color:#e7e7fa}.hover\\:bg-navy-100:hover{background-color:#b7b6f1}.hover\\:bg-navy-200:hover{background-color:#8785e8}.hover\\:bg-navy-300:hover{background-color:#5755df}.hover\\:bg-navy-500:hover{background-color:#2724d6}.hover\\:bg-navy-500:hover\\/20{background-color:#2724d633}.hover\\:bg-navy-500:hover\\/40{background-color:#2724d666}.hover\\:bg-navy-500:hover\\/70{background-color:#2724d6b3}.hover\\:bg-navy-700:hover{background-color:#0000b8}.hover\\:bg-lime-50:hover{background-color:#ecf6e7}.hover\\:bg-lime-100:hover{background-color:#c5e3b6}.hover\\:bg-lime-200:hover{background-color:#9ed186}.hover\\:bg-lime-300:hover{background-color:#77bf56}.hover\\:bg-lime-500:hover{background-color:#50ac25}.hover\\:bg-lime-500:hover\\/20{background-color:#50ac2533}.hover\\:bg-lime-500:hover\\/40{background-color:#50ac2566}.hover\\:bg-lime-500:hover\\/70{background-color:#50ac25b3}.hover\\:bg-lime-700:hover{background-color:#238900}.hover\\:bg-magenta-50:hover{background-color:#fbe9f1}.hover\\:bg-magenta-100:hover{background-color:#f4bed6}.hover\\:bg-magenta-200:hover{background-color:#ed93bb}.hover\\:bg-magenta-300:hover{background-color:#e668a0}.hover\\:bg-magenta-500:hover{background-color:#df3d85}.hover\\:bg-magenta-500:hover\\/20{background-color:#df3d8533}.hover\\:bg-magenta-500:hover\\/40{background-color:#df3d8566}.hover\\:bg-magenta-500:hover\\/70{background-color:#df3d85b3}.hover\\:bg-magenta-700:hover{background-color:#c10d5d}.focus\\:text-white-50:focus-visible{color:#fff}.focus\\:text-white-100:focus-visible{color:#f7f7f7}.focus\\:text-white-200:focus-visible{color:#eee}.focus\\:text-white-300:focus-visible{color:#e5e5e5}.focus\\:text-white-500:focus-visible{color:#dadada}.focus\\:text-white-500:focus-visible\\/20{color:#dadada33}.focus\\:text-white-500:focus-visible\\/40{color:#dadada66}.focus\\:text-white-500:focus-visible\\/70{color:#dadadab3}.focus\\:text-white-700:focus-visible{color:#ccc}.focus\\:text-black-50:focus-visible{color:#aaa}.focus\\:text-black-100:focus-visible{color:#919191}.focus\\:text-black-200:focus-visible{color:#6c6c6c}.focus\\:text-black-300:focus-visible{color:#424242}.focus\\:text-black-500:focus-visible{color:#2f2f2f}.focus\\:text-black-500:focus-visible\\/20{color:#2f2f2f33}.focus\\:text-black-500:focus-visible\\/40{color:#2f2f2f66}.focus\\:text-black-500:focus-visible\\/70{color:#2f2f2fb3}.focus\\:text-black-700:focus-visible{color:#1d1d1d}.focus\\:text-blue-50:focus-visible{color:#e9effd}.focus\\:text-blue-100:focus-visible{color:#bed0f9}.focus\\:text-blue-200:focus-visible{color:#92b1f5}.focus\\:text-blue-300:focus-visible{color:#6692f1}.focus\\:text-blue-500:focus-visible{color:#3b73ed}.focus\\:text-blue-500:focus-visible\\/20{color:#3b73ed33}.focus\\:text-blue-500:focus-visible\\/40{color:#3b73ed66}.focus\\:text-blue-500:focus-visible\\/70{color:#3b73edb3}.focus\\:text-blue-700:focus-visible{color:#0b49d1}.focus\\:text-blue-900:focus-visible{color:#00179e}.focus\\:text-red-50:focus-visible{color:#fbe9e9}.focus\\:text-red-100:focus-visible{color:#f4bebe}.focus\\:text-red-200:focus-visible{color:#ed9292}.focus\\:text-red-300:focus-visible{color:#e66767}.focus\\:text-red-500:focus-visible{color:#df3c3c}.focus\\:text-red-500:focus-visible\\/20{color:#df3c3c33}.focus\\:text-red-500:focus-visible\\/40{color:#df3c3c66}.focus\\:text-red-500:focus-visible\\/70{color:#df3c3cb3}.focus\\:text-red-700:focus-visible{color:#c20c0c}.focus\\:text-green-50:focus-visible{color:#e7f4f3}.focus\\:text-green-100:focus-visible{color:#b6dfdb}.focus\\:text-green-200:focus-visible{color:#86c9c3}.focus\\:text-green-300:focus-visible{color:#56b4ac}.focus\\:text-green-500:focus-visible{color:#259f94}.focus\\:text-green-500:focus-visible\\/20{color:#259f9433}.focus\\:text-green-500:focus-visible\\/40{color:#259f9466}.focus\\:text-green-500:focus-visible\\/70{color:#259f94b3}.focus\\:text-green-700:focus-visible{color:#007a6e}.focus\\:text-yellow-50:focus-visible{color:#fef4e8}.focus\\:text-yellow-100:focus-visible{color:#fddeb9}.focus\\:text-yellow-200:focus-visible{color:#fbc88b}.focus\\:text-yellow-300:focus-visible{color:#fab15c}.focus\\:text-yellow-500:focus-visible{color:#f89b2e}.focus\\:text-yellow-500:focus-visible\\/20{color:#f89b2e33}.focus\\:text-yellow-500:focus-visible\\/40{color:#f89b2e66}.focus\\:text-yellow-500:focus-visible\\/70{color:#f89b2eb3}.focus\\:text-yellow-700:focus-visible{color:#de7700}.focus\\:text-purple-50:focus-visible{color:#f4ebfd}.focus\\:text-purple-100:focus-visible{color:#dfc2f9}.focus\\:text-purple-200:focus-visible{color:#c999f4}.focus\\:text-purple-300:focus-visible{color:#b370f0}.focus\\:text-purple-500:focus-visible{color:#9e47ec}.focus\\:text-purple-500:focus-visible\\/20{color:#9e47ec33}.focus\\:text-purple-500:focus-visible\\/40{color:#9e47ec66}.focus\\:text-purple-500:focus-visible\\/70{color:#9e47ecb3}.focus\\:text-purple-700:focus-visible{color:#7919d0}.focus\\:text-orange-50:focus-visible{color:#ffefea}.focus\\:text-orange-100:focus-visible{color:#ffcfc0}.focus\\:text-orange-200:focus-visible{color:#ffb097}.focus\\:text-orange-300:focus-visible{color:#ff906d}.focus\\:text-orange-500:focus-visible{color:#ff7043}.focus\\:text-orange-500:focus-visible\\/20{color:#ff704333}.focus\\:text-orange-500:focus-visible\\/40{color:#ff704366}.focus\\:text-orange-500:focus-visible\\/70{color:#ff7043b3}.focus\\:text-orange-700:focus-visible{color:#e54715}.focus\\:text-azure-50:focus-visible{color:#e5f7fc}.focus\\:text-azure-100:focus-visible{color:#b2e6f7}.focus\\:text-azure-200:focus-visible{color:#80d6f1}.focus\\:text-azure-300:focus-visible{color:#4dc5eb}.focus\\:text-azure-500:focus-visible{color:#1ab5e6}.focus\\:text-azure-500:focus-visible\\/20{color:#1ab5e633}.focus\\:text-azure-500:focus-visible\\/40{color:#1ab5e666}.focus\\:text-azure-500:focus-visible\\/70{color:#1ab5e6b3}.focus\\:text-azure-700:focus-visible{color:#0093c9}.focus\\:text-gold-50:focus-visible{color:#faf3e6}.focus\\:text-gold-100:focus-visible{color:#efdcb4}.focus\\:text-gold-200:focus-visible{color:#e4c481}.focus\\:text-gold-300:focus-visible{color:#daad4f}.focus\\:text-gold-500:focus-visible{color:#cf961d}.focus\\:text-gold-500:focus-visible\\/20{color:#cf961d33}.focus\\:text-gold-500:focus-visible\\/40{color:#cf961d66}.focus\\:text-gold-500:focus-visible\\/70{color:#cf961db3}.focus\\:text-gold-700:focus-visible{color:#b07000}.focus\\:text-brown-50:focus-visible{color:#f1ede9}.focus\\:text-brown-100:focus-visible{color:#d6c9bd}.focus\\:text-brown-200:focus-visible{color:#bca691}.focus\\:text-brown-300:focus-visible{color:#a08266}.focus\\:text-brown-500:focus-visible{color:#865e3a}.focus\\:text-brown-500:focus-visible\\/20{color:#865e3a33}.focus\\:text-brown-500:focus-visible\\/40{color:#865e3a66}.focus\\:text-brown-500:focus-visible\\/70{color:#865e3ab3}.focus\\:text-brown-700:focus-visible{color:#5f330a}.focus\\:text-navy-50:focus-visible{color:#e7e7fa}.focus\\:text-navy-100:focus-visible{color:#b7b6f1}.focus\\:text-navy-200:focus-visible{color:#8785e8}.focus\\:text-navy-300:focus-visible{color:#5755df}.focus\\:text-navy-500:focus-visible{color:#2724d6}.focus\\:text-navy-500:focus-visible\\/20{color:#2724d633}.focus\\:text-navy-500:focus-visible\\/40{color:#2724d666}.focus\\:text-navy-500:focus-visible\\/70{color:#2724d6b3}.focus\\:text-navy-700:focus-visible{color:#0000b8}.focus\\:text-lime-50:focus-visible{color:#ecf6e7}.focus\\:text-lime-100:focus-visible{color:#c5e3b6}.focus\\:text-lime-200:focus-visible{color:#9ed186}.focus\\:text-lime-300:focus-visible{color:#77bf56}.focus\\:text-lime-500:focus-visible{color:#50ac25}.focus\\:text-lime-500:focus-visible\\/20{color:#50ac2533}.focus\\:text-lime-500:focus-visible\\/40{color:#50ac2566}.focus\\:text-lime-500:focus-visible\\/70{color:#50ac25b3}.focus\\:text-lime-700:focus-visible{color:#238900}.focus\\:text-magenta-50:focus-visible{color:#fbe9f1}.focus\\:text-magenta-100:focus-visible{color:#f4bed6}.focus\\:text-magenta-200:focus-visible{color:#ed93bb}.focus\\:text-magenta-300:focus-visible{color:#e668a0}.focus\\:text-magenta-500:focus-visible{color:#df3d85}.focus\\:text-magenta-500:focus-visible\\/20{color:#df3d8533}.focus\\:text-magenta-500:focus-visible\\/40{color:#df3d8566}.focus\\:text-magenta-500:focus-visible\\/70{color:#df3d85b3}.focus\\:text-magenta-700:focus-visible{color:#c10d5d}.focus\\:bg-white-50:focus-visible{background-color:#fff}.focus\\:bg-white-100:focus-visible{background-color:#f7f7f7}.focus\\:bg-white-200:focus-visible{background-color:#eee}.focus\\:bg-white-300:focus-visible{background-color:#e5e5e5}.focus\\:bg-white-500:focus-visible{background-color:#dadada}.focus\\:bg-white-500:focus-visible\\/20{background-color:#dadada33}.focus\\:bg-white-500:focus-visible\\/40{background-color:#dadada66}.focus\\:bg-white-500:focus-visible\\/70{background-color:#dadadab3}.focus\\:bg-white-700:focus-visible{background-color:#ccc}.focus\\:bg-black-50:focus-visible{background-color:#aaa}.focus\\:bg-black-100:focus-visible{background-color:#919191}.focus\\:bg-black-200:focus-visible{background-color:#6c6c6c}.focus\\:bg-black-300:focus-visible{background-color:#424242}.focus\\:bg-black-500:focus-visible{background-color:#2f2f2f}.focus\\:bg-black-500:focus-visible\\/20{background-color:#2f2f2f33}.focus\\:bg-black-500:focus-visible\\/40{background-color:#2f2f2f66}.focus\\:bg-black-500:focus-visible\\/70{background-color:#2f2f2fb3}.focus\\:bg-black-700:focus-visible{background-color:#1d1d1d}.focus\\:bg-blue-50:focus-visible{background-color:#e9effd}.focus\\:bg-blue-100:focus-visible{background-color:#bed0f9}.focus\\:bg-blue-200:focus-visible{background-color:#92b1f5}.focus\\:bg-blue-300:focus-visible{background-color:#6692f1}.focus\\:bg-blue-500:focus-visible{background-color:#3b73ed}.focus\\:bg-blue-500:focus-visible\\/20{background-color:#3b73ed33}.focus\\:bg-blue-500:focus-visible\\/40{background-color:#3b73ed66}.focus\\:bg-blue-500:focus-visible\\/70{background-color:#3b73edb3}.focus\\:bg-blue-700:focus-visible{background-color:#0b49d1}.focus\\:bg-blue-900:focus-visible{background-color:#00179e}.focus\\:bg-red-50:focus-visible{background-color:#fbe9e9}.focus\\:bg-red-100:focus-visible{background-color:#f4bebe}.focus\\:bg-red-200:focus-visible{background-color:#ed9292}.focus\\:bg-red-300:focus-visible{background-color:#e66767}.focus\\:bg-red-500:focus-visible{background-color:#df3c3c}.focus\\:bg-red-500:focus-visible\\/20{background-color:#df3c3c33}.focus\\:bg-red-500:focus-visible\\/40{background-color:#df3c3c66}.focus\\:bg-red-500:focus-visible\\/70{background-color:#df3c3cb3}.focus\\:bg-red-700:focus-visible{background-color:#c20c0c}.focus\\:bg-green-50:focus-visible{background-color:#e7f4f3}.focus\\:bg-green-100:focus-visible{background-color:#b6dfdb}.focus\\:bg-green-200:focus-visible{background-color:#86c9c3}.focus\\:bg-green-300:focus-visible{background-color:#56b4ac}.focus\\:bg-green-500:focus-visible{background-color:#259f94}.focus\\:bg-green-500:focus-visible\\/20{background-color:#259f9433}.focus\\:bg-green-500:focus-visible\\/40{background-color:#259f9466}.focus\\:bg-green-500:focus-visible\\/70{background-color:#259f94b3}.focus\\:bg-green-700:focus-visible{background-color:#007a6e}.focus\\:bg-yellow-50:focus-visible{background-color:#fef4e8}.focus\\:bg-yellow-100:focus-visible{background-color:#fddeb9}.focus\\:bg-yellow-200:focus-visible{background-color:#fbc88b}.focus\\:bg-yellow-300:focus-visible{background-color:#fab15c}.focus\\:bg-yellow-500:focus-visible{background-color:#f89b2e}.focus\\:bg-yellow-500:focus-visible\\/20{background-color:#f89b2e33}.focus\\:bg-yellow-500:focus-visible\\/40{background-color:#f89b2e66}.focus\\:bg-yellow-500:focus-visible\\/70{background-color:#f89b2eb3}.focus\\:bg-yellow-700:focus-visible{background-color:#de7700}.focus\\:bg-purple-50:focus-visible{background-color:#f4ebfd}.focus\\:bg-purple-100:focus-visible{background-color:#dfc2f9}.focus\\:bg-purple-200:focus-visible{background-color:#c999f4}.focus\\:bg-purple-300:focus-visible{background-color:#b370f0}.focus\\:bg-purple-500:focus-visible{background-color:#9e47ec}.focus\\:bg-purple-500:focus-visible\\/20{background-color:#9e47ec33}.focus\\:bg-purple-500:focus-visible\\/40{background-color:#9e47ec66}.focus\\:bg-purple-500:focus-visible\\/70{background-color:#9e47ecb3}.focus\\:bg-purple-700:focus-visible{background-color:#7919d0}.focus\\:bg-orange-50:focus-visible{background-color:#ffefea}.focus\\:bg-orange-100:focus-visible{background-color:#ffcfc0}.focus\\:bg-orange-200:focus-visible{background-color:#ffb097}.focus\\:bg-orange-300:focus-visible{background-color:#ff906d}.focus\\:bg-orange-500:focus-visible{background-color:#ff7043}.focus\\:bg-orange-500:focus-visible\\/20{background-color:#ff704333}.focus\\:bg-orange-500:focus-visible\\/40{background-color:#ff704366}.focus\\:bg-orange-500:focus-visible\\/70{background-color:#ff7043b3}.focus\\:bg-orange-700:focus-visible{background-color:#e54715}.focus\\:bg-azure-50:focus-visible{background-color:#e5f7fc}.focus\\:bg-azure-100:focus-visible{background-color:#b2e6f7}.focus\\:bg-azure-200:focus-visible{background-color:#80d6f1}.focus\\:bg-azure-300:focus-visible{background-color:#4dc5eb}.focus\\:bg-azure-500:focus-visible{background-color:#1ab5e6}.focus\\:bg-azure-500:focus-visible\\/20{background-color:#1ab5e633}.focus\\:bg-azure-500:focus-visible\\/40{background-color:#1ab5e666}.focus\\:bg-azure-500:focus-visible\\/70{background-color:#1ab5e6b3}.focus\\:bg-azure-700:focus-visible{background-color:#0093c9}.focus\\:bg-gold-50:focus-visible{background-color:#faf3e6}.focus\\:bg-gold-100:focus-visible{background-color:#efdcb4}.focus\\:bg-gold-200:focus-visible{background-color:#e4c481}.focus\\:bg-gold-300:focus-visible{background-color:#daad4f}.focus\\:bg-gold-500:focus-visible{background-color:#cf961d}.focus\\:bg-gold-500:focus-visible\\/20{background-color:#cf961d33}.focus\\:bg-gold-500:focus-visible\\/40{background-color:#cf961d66}.focus\\:bg-gold-500:focus-visible\\/70{background-color:#cf961db3}.focus\\:bg-gold-700:focus-visible{background-color:#b07000}.focus\\:bg-brown-50:focus-visible{background-color:#f1ede9}.focus\\:bg-brown-100:focus-visible{background-color:#d6c9bd}.focus\\:bg-brown-200:focus-visible{background-color:#bca691}.focus\\:bg-brown-300:focus-visible{background-color:#a08266}.focus\\:bg-brown-500:focus-visible{background-color:#865e3a}.focus\\:bg-brown-500:focus-visible\\/20{background-color:#865e3a33}.focus\\:bg-brown-500:focus-visible\\/40{background-color:#865e3a66}.focus\\:bg-brown-500:focus-visible\\/70{background-color:#865e3ab3}.focus\\:bg-brown-700:focus-visible{background-color:#5f330a}.focus\\:bg-navy-50:focus-visible{background-color:#e7e7fa}.focus\\:bg-navy-100:focus-visible{background-color:#b7b6f1}.focus\\:bg-navy-200:focus-visible{background-color:#8785e8}.focus\\:bg-navy-300:focus-visible{background-color:#5755df}.focus\\:bg-navy-500:focus-visible{background-color:#2724d6}.focus\\:bg-navy-500:focus-visible\\/20{background-color:#2724d633}.focus\\:bg-navy-500:focus-visible\\/40{background-color:#2724d666}.focus\\:bg-navy-500:focus-visible\\/70{background-color:#2724d6b3}.focus\\:bg-navy-700:focus-visible{background-color:#0000b8}.focus\\:bg-lime-50:focus-visible{background-color:#ecf6e7}.focus\\:bg-lime-100:focus-visible{background-color:#c5e3b6}.focus\\:bg-lime-200:focus-visible{background-color:#9ed186}.focus\\:bg-lime-300:focus-visible{background-color:#77bf56}.focus\\:bg-lime-500:focus-visible{background-color:#50ac25}.focus\\:bg-lime-500:focus-visible\\/20{background-color:#50ac2533}.focus\\:bg-lime-500:focus-visible\\/40{background-color:#50ac2566}.focus\\:bg-lime-500:focus-visible\\/70{background-color:#50ac25b3}.focus\\:bg-lime-700:focus-visible{background-color:#238900}.focus\\:bg-magenta-50:focus-visible{background-color:#fbe9f1}.focus\\:bg-magenta-100:focus-visible{background-color:#f4bed6}.focus\\:bg-magenta-200:focus-visible{background-color:#ed93bb}.focus\\:bg-magenta-300:focus-visible{background-color:#e668a0}.focus\\:bg-magenta-500:focus-visible{background-color:#df3d85}.focus\\:bg-magenta-500:focus-visible\\/20{background-color:#df3d8533}.focus\\:bg-magenta-500:focus-visible\\/40{background-color:#df3d8566}.focus\\:bg-magenta-500:focus-visible\\/70{background-color:#df3d85b3}.focus\\:bg-magenta-700:focus-visible{background-color:#c10d5d}.active\\:text-white-50:active{color:#fff}.active\\:text-white-100:active{color:#f7f7f7}.active\\:text-white-200:active{color:#eee}.active\\:text-white-300:active{color:#e5e5e5}.active\\:text-white-500:active{color:#dadada}.active\\:text-white-500:active\\/20{color:#dadada33}.active\\:text-white-500:active\\/40{color:#dadada66}.active\\:text-white-500:active\\/70{color:#dadadab3}.active\\:text-white-700:active{color:#ccc}.active\\:text-black-50:active{color:#aaa}.active\\:text-black-100:active{color:#919191}.active\\:text-black-200:active{color:#6c6c6c}.active\\:text-black-300:active{color:#424242}.active\\:text-black-500:active{color:#2f2f2f}.active\\:text-black-500:active\\/20{color:#2f2f2f33}.active\\:text-black-500:active\\/40{color:#2f2f2f66}.active\\:text-black-500:active\\/70{color:#2f2f2fb3}.active\\:text-black-700:active{color:#1d1d1d}.active\\:text-blue-50:active{color:#e9effd}.active\\:text-blue-100:active{color:#bed0f9}.active\\:text-blue-200:active{color:#92b1f5}.active\\:text-blue-300:active{color:#6692f1}.active\\:text-blue-500:active{color:#3b73ed}.active\\:text-blue-500:active\\/20{color:#3b73ed33}.active\\:text-blue-500:active\\/40{color:#3b73ed66}.active\\:text-blue-500:active\\/70{color:#3b73edb3}.active\\:text-blue-700:active{color:#0b49d1}.active\\:text-blue-900:active{color:#00179e}.active\\:text-red-50:active{color:#fbe9e9}.active\\:text-red-100:active{color:#f4bebe}.active\\:text-red-200:active{color:#ed9292}.active\\:text-red-300:active{color:#e66767}.active\\:text-red-500:active{color:#df3c3c}.active\\:text-red-500:active\\/20{color:#df3c3c33}.active\\:text-red-500:active\\/40{color:#df3c3c66}.active\\:text-red-500:active\\/70{color:#df3c3cb3}.active\\:text-red-700:active{color:#c20c0c}.active\\:text-green-50:active{color:#e7f4f3}.active\\:text-green-100:active{color:#b6dfdb}.active\\:text-green-200:active{color:#86c9c3}.active\\:text-green-300:active{color:#56b4ac}.active\\:text-green-500:active{color:#259f94}.active\\:text-green-500:active\\/20{color:#259f9433}.active\\:text-green-500:active\\/40{color:#259f9466}.active\\:text-green-500:active\\/70{color:#259f94b3}.active\\:text-green-700:active{color:#007a6e}.active\\:text-yellow-50:active{color:#fef4e8}.active\\:text-yellow-100:active{color:#fddeb9}.active\\:text-yellow-200:active{color:#fbc88b}.active\\:text-yellow-300:active{color:#fab15c}.active\\:text-yellow-500:active{color:#f89b2e}.active\\:text-yellow-500:active\\/20{color:#f89b2e33}.active\\:text-yellow-500:active\\/40{color:#f89b2e66}.active\\:text-yellow-500:active\\/70{color:#f89b2eb3}.active\\:text-yellow-700:active{color:#de7700}.active\\:text-purple-50:active{color:#f4ebfd}.active\\:text-purple-100:active{color:#dfc2f9}.active\\:text-purple-200:active{color:#c999f4}.active\\:text-purple-300:active{color:#b370f0}.active\\:text-purple-500:active{color:#9e47ec}.active\\:text-purple-500:active\\/20{color:#9e47ec33}.active\\:text-purple-500:active\\/40{color:#9e47ec66}.active\\:text-purple-500:active\\/70{color:#9e47ecb3}.active\\:text-purple-700:active{color:#7919d0}.active\\:text-orange-50:active{color:#ffefea}.active\\:text-orange-100:active{color:#ffcfc0}.active\\:text-orange-200:active{color:#ffb097}.active\\:text-orange-300:active{color:#ff906d}.active\\:text-orange-500:active{color:#ff7043}.active\\:text-orange-500:active\\/20{color:#ff704333}.active\\:text-orange-500:active\\/40{color:#ff704366}.active\\:text-orange-500:active\\/70{color:#ff7043b3}.active\\:text-orange-700:active{color:#e54715}.active\\:text-azure-50:active{color:#e5f7fc}.active\\:text-azure-100:active{color:#b2e6f7}.active\\:text-azure-200:active{color:#80d6f1}.active\\:text-azure-300:active{color:#4dc5eb}.active\\:text-azure-500:active{color:#1ab5e6}.active\\:text-azure-500:active\\/20{color:#1ab5e633}.active\\:text-azure-500:active\\/40{color:#1ab5e666}.active\\:text-azure-500:active\\/70{color:#1ab5e6b3}.active\\:text-azure-700:active{color:#0093c9}.active\\:text-gold-50:active{color:#faf3e6}.active\\:text-gold-100:active{color:#efdcb4}.active\\:text-gold-200:active{color:#e4c481}.active\\:text-gold-300:active{color:#daad4f}.active\\:text-gold-500:active{color:#cf961d}.active\\:text-gold-500:active\\/20{color:#cf961d33}.active\\:text-gold-500:active\\/40{color:#cf961d66}.active\\:text-gold-500:active\\/70{color:#cf961db3}.active\\:text-gold-700:active{color:#b07000}.active\\:text-brown-50:active{color:#f1ede9}.active\\:text-brown-100:active{color:#d6c9bd}.active\\:text-brown-200:active{color:#bca691}.active\\:text-brown-300:active{color:#a08266}.active\\:text-brown-500:active{color:#865e3a}.active\\:text-brown-500:active\\/20{color:#865e3a33}.active\\:text-brown-500:active\\/40{color:#865e3a66}.active\\:text-brown-500:active\\/70{color:#865e3ab3}.active\\:text-brown-700:active{color:#5f330a}.active\\:text-navy-50:active{color:#e7e7fa}.active\\:text-navy-100:active{color:#b7b6f1}.active\\:text-navy-200:active{color:#8785e8}.active\\:text-navy-300:active{color:#5755df}.active\\:text-navy-500:active{color:#2724d6}.active\\:text-navy-500:active\\/20{color:#2724d633}.active\\:text-navy-500:active\\/40{color:#2724d666}.active\\:text-navy-500:active\\/70{color:#2724d6b3}.active\\:text-navy-700:active{color:#0000b8}.active\\:text-lime-50:active{color:#ecf6e7}.active\\:text-lime-100:active{color:#c5e3b6}.active\\:text-lime-200:active{color:#9ed186}.active\\:text-lime-300:active{color:#77bf56}.active\\:text-lime-500:active{color:#50ac25}.active\\:text-lime-500:active\\/20{color:#50ac2533}.active\\:text-lime-500:active\\/40{color:#50ac2566}.active\\:text-lime-500:active\\/70{color:#50ac25b3}.active\\:text-lime-700:active{color:#238900}.active\\:text-magenta-50:active{color:#fbe9f1}.active\\:text-magenta-100:active{color:#f4bed6}.active\\:text-magenta-200:active{color:#ed93bb}.active\\:text-magenta-300:active{color:#e668a0}.active\\:text-magenta-500:active{color:#df3d85}.active\\:text-magenta-500:active\\/20{color:#df3d8533}.active\\:text-magenta-500:active\\/40{color:#df3d8566}.active\\:text-magenta-500:active\\/70{color:#df3d85b3}.active\\:text-magenta-700:active{color:#c10d5d}.active\\:bg-white-50:active{background-color:#fff}.active\\:bg-white-100:active{background-color:#f7f7f7}.active\\:bg-white-200:active{background-color:#eee}.active\\:bg-white-300:active{background-color:#e5e5e5}.active\\:bg-white-500:active{background-color:#dadada}.active\\:bg-white-500:active\\/20{background-color:#dadada33}.active\\:bg-white-500:active\\/40{background-color:#dadada66}.active\\:bg-white-500:active\\/70{background-color:#dadadab3}.active\\:bg-white-700:active{background-color:#ccc}.active\\:bg-black-50:active{background-color:#aaa}.active\\:bg-black-100:active{background-color:#919191}.active\\:bg-black-200:active{background-color:#6c6c6c}.active\\:bg-black-300:active{background-color:#424242}.active\\:bg-black-500:active{background-color:#2f2f2f}.active\\:bg-black-500:active\\/20{background-color:#2f2f2f33}.active\\:bg-black-500:active\\/40{background-color:#2f2f2f66}.active\\:bg-black-500:active\\/70{background-color:#2f2f2fb3}.active\\:bg-black-700:active{background-color:#1d1d1d}.active\\:bg-blue-50:active{background-color:#e9effd}.active\\:bg-blue-100:active{background-color:#bed0f9}.active\\:bg-blue-200:active{background-color:#92b1f5}.active\\:bg-blue-300:active{background-color:#6692f1}.active\\:bg-blue-500:active{background-color:#3b73ed}.active\\:bg-blue-500:active\\/20{background-color:#3b73ed33}.active\\:bg-blue-500:active\\/40{background-color:#3b73ed66}.active\\:bg-blue-500:active\\/70{background-color:#3b73edb3}.active\\:bg-blue-700:active{background-color:#0b49d1}.active\\:bg-blue-900:active{background-color:#00179e}.active\\:bg-red-50:active{background-color:#fbe9e9}.active\\:bg-red-100:active{background-color:#f4bebe}.active\\:bg-red-200:active{background-color:#ed9292}.active\\:bg-red-300:active{background-color:#e66767}.active\\:bg-red-500:active{background-color:#df3c3c}.active\\:bg-red-500:active\\/20{background-color:#df3c3c33}.active\\:bg-red-500:active\\/40{background-color:#df3c3c66}.active\\:bg-red-500:active\\/70{background-color:#df3c3cb3}.active\\:bg-red-700:active{background-color:#c20c0c}.active\\:bg-green-50:active{background-color:#e7f4f3}.active\\:bg-green-100:active{background-color:#b6dfdb}.active\\:bg-green-200:active{background-color:#86c9c3}.active\\:bg-green-300:active{background-color:#56b4ac}.active\\:bg-green-500:active{background-color:#259f94}.active\\:bg-green-500:active\\/20{background-color:#259f9433}.active\\:bg-green-500:active\\/40{background-color:#259f9466}.active\\:bg-green-500:active\\/70{background-color:#259f94b3}.active\\:bg-green-700:active{background-color:#007a6e}.active\\:bg-yellow-50:active{background-color:#fef4e8}.active\\:bg-yellow-100:active{background-color:#fddeb9}.active\\:bg-yellow-200:active{background-color:#fbc88b}.active\\:bg-yellow-300:active{background-color:#fab15c}.active\\:bg-yellow-500:active{background-color:#f89b2e}.active\\:bg-yellow-500:active\\/20{background-color:#f89b2e33}.active\\:bg-yellow-500:active\\/40{background-color:#f89b2e66}.active\\:bg-yellow-500:active\\/70{background-color:#f89b2eb3}.active\\:bg-yellow-700:active{background-color:#de7700}.active\\:bg-purple-50:active{background-color:#f4ebfd}.active\\:bg-purple-100:active{background-color:#dfc2f9}.active\\:bg-purple-200:active{background-color:#c999f4}.active\\:bg-purple-300:active{background-color:#b370f0}.active\\:bg-purple-500:active{background-color:#9e47ec}.active\\:bg-purple-500:active\\/20{background-color:#9e47ec33}.active\\:bg-purple-500:active\\/40{background-color:#9e47ec66}.active\\:bg-purple-500:active\\/70{background-color:#9e47ecb3}.active\\:bg-purple-700:active{background-color:#7919d0}.active\\:bg-orange-50:active{background-color:#ffefea}.active\\:bg-orange-100:active{background-color:#ffcfc0}.active\\:bg-orange-200:active{background-color:#ffb097}.active\\:bg-orange-300:active{background-color:#ff906d}.active\\:bg-orange-500:active{background-color:#ff7043}.active\\:bg-orange-500:active\\/20{background-color:#ff704333}.active\\:bg-orange-500:active\\/40{background-color:#ff704366}.active\\:bg-orange-500:active\\/70{background-color:#ff7043b3}.active\\:bg-orange-700:active{background-color:#e54715}.active\\:bg-azure-50:active{background-color:#e5f7fc}.active\\:bg-azure-100:active{background-color:#b2e6f7}.active\\:bg-azure-200:active{background-color:#80d6f1}.active\\:bg-azure-300:active{background-color:#4dc5eb}.active\\:bg-azure-500:active{background-color:#1ab5e6}.active\\:bg-azure-500:active\\/20{background-color:#1ab5e633}.active\\:bg-azure-500:active\\/40{background-color:#1ab5e666}.active\\:bg-azure-500:active\\/70{background-color:#1ab5e6b3}.active\\:bg-azure-700:active{background-color:#0093c9}.active\\:bg-gold-50:active{background-color:#faf3e6}.active\\:bg-gold-100:active{background-color:#efdcb4}.active\\:bg-gold-200:active{background-color:#e4c481}.active\\:bg-gold-300:active{background-color:#daad4f}.active\\:bg-gold-500:active{background-color:#cf961d}.active\\:bg-gold-500:active\\/20{background-color:#cf961d33}.active\\:bg-gold-500:active\\/40{background-color:#cf961d66}.active\\:bg-gold-500:active\\/70{background-color:#cf961db3}.active\\:bg-gold-700:active{background-color:#b07000}.active\\:bg-brown-50:active{background-color:#f1ede9}.active\\:bg-brown-100:active{background-color:#d6c9bd}.active\\:bg-brown-200:active{background-color:#bca691}.active\\:bg-brown-300:active{background-color:#a08266}.active\\:bg-brown-500:active{background-color:#865e3a}.active\\:bg-brown-500:active\\/20{background-color:#865e3a33}.active\\:bg-brown-500:active\\/40{background-color:#865e3a66}.active\\:bg-brown-500:active\\/70{background-color:#865e3ab3}.active\\:bg-brown-700:active{background-color:#5f330a}.active\\:bg-navy-50:active{background-color:#e7e7fa}.active\\:bg-navy-100:active{background-color:#b7b6f1}.active\\:bg-navy-200:active{background-color:#8785e8}.active\\:bg-navy-300:active{background-color:#5755df}.active\\:bg-navy-500:active{background-color:#2724d6}.active\\:bg-navy-500:active\\/20{background-color:#2724d633}.active\\:bg-navy-500:active\\/40{background-color:#2724d666}.active\\:bg-navy-500:active\\/70{background-color:#2724d6b3}.active\\:bg-navy-700:active{background-color:#0000b8}.active\\:bg-lime-50:active{background-color:#ecf6e7}.active\\:bg-lime-100:active{background-color:#c5e3b6}.active\\:bg-lime-200:active{background-color:#9ed186}.active\\:bg-lime-300:active{background-color:#77bf56}.active\\:bg-lime-500:active{background-color:#50ac25}.active\\:bg-lime-500:active\\/20{background-color:#50ac2533}.active\\:bg-lime-500:active\\/40{background-color:#50ac2566}.active\\:bg-lime-500:active\\/70{background-color:#50ac25b3}.active\\:bg-lime-700:active{background-color:#238900}.active\\:bg-magenta-50:active{background-color:#fbe9f1}.active\\:bg-magenta-100:active{background-color:#f4bed6}.active\\:bg-magenta-200:active{background-color:#ed93bb}.active\\:bg-magenta-300:active{background-color:#e668a0}.active\\:bg-magenta-500:active{background-color:#df3d85}.active\\:bg-magenta-500:active\\/20{background-color:#df3d8533}.active\\:bg-magenta-500:active\\/40{background-color:#df3d8566}.active\\:bg-magenta-500:active\\/70{background-color:#df3d85b3}.active\\:bg-magenta-700:active{background-color:#c10d5d}.transition{transition:all .2s ease-in-out}.disable-selection,.logo-container .logo-image,.cover-container .cover-image,.profile-rounded-image,.profile-square-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.drop-zone-container.has-logo{display:none}.largeContainer{position:relative;min-height:178px}.largeContainer .cropper-overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.logo-container{position:absolute;top:0;left:0;width:616px;height:214px;overflow:hidden}.logo-container .logo-image{width:100%;height:100%;z-index:1000}.logoVar{height:214px}.logoVar.hasCropper{height:240px!important}.logoVar.hasCropper .drop-zone-container{display:none!important}.logoVar .drop-zone-container .drop-zone,.logoVar .drop-zone-container .drop-zone-error{height:204px}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cover-container{width:267px;height:178px}.cover-container .cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.container.dragMode{position:fixed;position-anchor:--modal-body;left:anchor(left);top:anchor(top);height:anchor-size(--modal-body height)!important;width:anchor-size(--modal-body width)!important;display:flex;justify-content:center;align-items:center;gap:0;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .drop-zone-container{position:relative;width:100%;height:100%;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%;outline:none!important;margin:0!important;border:4px dashed #cccccc;border-color:#ccc}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container{position:relative}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document svg{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container ng-lottie{width:200px;height:200px;display:block}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.container.dragMode.onDragover .drop-zone-container .drop-zone{border-color:#ccc}.container.dragMode.dual-drop-mode .drop-zone-container{--dual-drop-border: 4px;--dual-drop-border-overlap: calc(var(--dual-drop-border) / 2);position:relative;display:block;overflow:hidden}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel{position:absolute;top:0;bottom:0;margin:0!important;width:calc(50% + var(--dual-drop-border-overlap));opacity:1;transition:width .25s ease,opacity .25s ease,z-index 0s}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .dual-drop-zone-title{position:absolute;top:10px;left:8px;margin:0;font-weight:800;font-size:18px;line-height:100%;letter-spacing:0}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-left{left:0;z-index:1}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-right{right:0;left:auto;z-index:1}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .drop-zone-focus-text{text-align:center}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .drop-zone-focus-text .description{margin:8px auto 0;max-width:158px;font-weight:400;font-size:11px;line-height:14px;text-align:center}.container.dragMode.dual-drop-mode.dual-drop-focus-left .drop-zone-container .dual-drop-zone-left{width:calc(60% + var(--dual-drop-border-overlap));opacity:1;z-index:2}.container.dragMode.dual-drop-mode.dual-drop-focus-left .drop-zone-container .dual-drop-zone-right{width:calc(40% + var(--dual-drop-border-overlap));opacity:.4;z-index:1}.container.dragMode.dual-drop-mode.dual-drop-focus-right .drop-zone-container .dual-drop-zone-right{width:calc(60% + var(--dual-drop-border-overlap));opacity:1;z-index:2}.container.dragMode.dual-drop-mode.dual-drop-focus-right .drop-zone-container .dual-drop-zone-left{width:calc(40% + var(--dual-drop-border-overlap));opacity:.4;z-index:1}.is-documents-mode .dragMode{height:120px!important}.dragModeDocuments .drop-zone-container .drop-zone{background-color:#fff!important}.dragModeDocuments .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.drop-zone-dimensions-lock{width:var(--drag-lock-width);height:var(--drag-lock-height)}.is-details-slider{width:100%!important;height:100%!important;overflow:hidden}.is-details-slider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important;margin-top:12px!important;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.is-details-slider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;cursor:pointer!important;transition:width .2s ease-in-out,background-color .2s ease-in-out}.is-details-slider .sliders .slider-item.active{width:20px;background-color:#919191}.is-details-slider .drop-zone-container{display:none!important}.is-details-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-details-slider .docs .carousel-button{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-details-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-details-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.is-details-slider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;flex-shrink:0!important;gap:0!important;position:relative!important;transition:transform .3s ease-out}.is-details-slider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;justify-content:center!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.is-details-slider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.is-details-slider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.is-details-slider .carousel-button{position:absolute!important;top:45%!important}.is-details-slider:hover .sliders{opacity:1;pointer-events:auto}.is-drawer-mode{width:100%!important;padding:4px!important;position:absolute!important;max-width:100%!important}.is-drawer-mode .drop-zone-container{display:none!important}.is-drawer-mode .skeleton-container.drawer-position{width:100%!important;position:relative!important;overflow:hidden!important;display:flex;align-items:center;gap:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item{width:194px;height:194px;flex:0 0 194px;border-radius:2px;padding:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item .skeleton-bar{width:100%;height:100%;background-color:#fff}.is-drawer-mode .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-drawer-mode .docs .doc-container{display:flex;width:auto!important;height:auto!important;gap:4px!important;transition:transform .3s ease-out}.is-drawer-mode .docs .doc-container .doc{width:194px!important;height:194px!important;flex:0 0 194px!important;background-color:transparent!important}.is-drawer-mode .carousel-button.carousel-right{right:4px!important;position:absolute!important}.is-drawer-mode .carousel-button.carousel-left{left:4px!important;position:absolute!important}.isCoverDetails{width:100%!important;height:100%!important}.isCoverDetails .drop-zone-container{display:none!important}.isCoverDetails .docs{width:100%!important}.isCoverDetails .docs .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;display:block!important;background-color:transparent!important}.more-docs{width:148px;flex:0 0 148px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs{width:148px!important}.small-more-docs .illustration,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text{padding:0 12px}.unsupported .drop-zone-text .heading.invalid{line-height:18px}.unsupported .drop-zone-text .subtext{line-height:14px;margin-bottom:0}.unsupported .cancel-button .cancel-icon{width:18px!important;height:18px!important}.unsupported .cancel-button-documents{display:none}.max-reached,.max-reached-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-media .drop-zone{padding:13px 0!important;flex-direction:column}.invalid-file-size .drop-zone .illustration{display:none!important}.invalid-file-size .drop-zone .drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:2px;right:2px;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.drop-zone-error .file-types{display:flex;align-items:center;gap:2px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.drop-zone-error .badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;width:35px;border-radius:1px;margin-bottom:0;text-align:center;background-color:#919191}.drop-zone-error .pdf{background-color:#e66767}.drop-zone-error .video{background-color:#b370f0}.drop-zone-error .image{background-color:#fab15c}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ['containerRef', { isSignal: true }] }], cropper: [{ type: i0.ViewChild, args: ['cropper', { isSignal: true }] }], docsViewport: [{ type: i0.ViewChild, args: ['docsViewport', { isSignal: true }] }], dropZoneContainer: [{ type: i0.ViewChild, args: ['dropZoneContainer', { isSignal: true }] }], inputRange: [{ type: i0.ViewChild, args: ['inputRange', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], avatarColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarColor", required: false }] }], crop: [{ type: i0.Input, args: [{ isSignal: true, alias: "crop", required: false }] }], deletedFileIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletedFileIds", required: false }] }], documentsDropZoneOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentsDropZoneOpen", required: false }] }], documentTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentTags", required: false }] }], dualDropZones: [{ type: i0.Input, args: [{ isSignal: true, alias: "dualDropZones", required: false }] }], excludedFileTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFileTypes", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], fileTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileTypes", required: false }] }], isCoverDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCoverDetails", required: false }] }], isDetailsSlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDetailsSlider", required: false }] }], isDocumentsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDocumentsMode", required: false }] }], isDrawerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDrawerMode", required: false }] }], isDualDropZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDualDropZone", required: false }] }], maxCountFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCountFiles", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], parentForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentForm", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], onCropPendingChange: [{ type: i0.Output, args: ["onCropPendingChange"] }], onDeletedFileIds: [{ type: i0.Output, args: ["onDeletedFileIds"] }], onDocsChange: [{ type: i0.Output, args: ["onDocsChange"] }], onDocumentDropZoneOpenChange: [{ type: i0.Output, args: ["onDocumentDropZoneOpenChange"] }], onDocumentFileNameChange: [{ type: i0.Output, args: ["onDocumentFileNameChange"] }], onDocumentPreviewClick: [{ type: i0.Output, args: ["onDocumentPreviewClick"] }], onDualDropChange: [{ type: i0.Output, args: ["onDualDropChange"] }] } });
+                    ], template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let mediaVariant = variant() === dropZoneVariant.MEDIA;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl() !== \"\";\n@let profilePreview = profileUrl() !== \"\"; @let logoPreview = !!logoUrl();\n@let smallSize = size() === \"480px\";\n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {\n  <div class=\"documents-drag-overlay\"></div>\n}\n\n@if (dragMode() && !isDrawerMode() && !isCardSlider()) {\n  <div\n    class=\"drop-zone-dimensions-lock\"\n    [style.--drag-lock-width.px]=\"dropzoneDimensionsLock().width\"\n    [style.--drag-lock-height.px]=\"dropzoneDimensionsLock().height\"\n  ></div>\n}\n\n<div\n  #containerRef\n  class=\"container\"\n  [class]=\"{\n    'picture-container': profileVariant || coverVariant,\n    smallContainer: smallSize,\n    largeContainer: largeSize,\n    dragMode: dragMode() && !isDocumentsMode(),\n    dragModeDocuments: dragMode() && isDocumentsMode(),\n    'dual-drop-mode': isDualDragActive(),\n    'dual-drop-focus-left':\n      isDualDragActive() && activeDualTarget() === dualDropTarget.LEFT,\n    'dual-drop-focus-right':\n      isDualDragActive() && activeDualTarget() === dualDropTarget.RIGHT,\n    onDragover: onDragover(),\n    logoVar: logoVariant,\n    hasCropper: isCropperReady(),\n    'is-details-slider': isDetailsSlider(),\n    'is-card-slider': isCardSlider(),\n    'is-drawer-mode': isDrawerMode(),\n    isCoverDetails: isCoverDetails(),\n    'is-documents-mode': isDocumentsMode(),\n  }\"\n>\n  @if (coverVariant && coverPreview) {\n    <div class=\"cover-container\">\n      <img [src]=\"coverUrl()\" class=\"cover-image\" draggable=\"false\" />\n    </div>\n  }\n  @if (profileVariant) {\n    @if (!profilePreview) {\n      <div class=\"avatar\">\n        <cai-avatar\n          [driver]=\"driver()\"\n          [size]=\"160\"\n          [rounded]=\"rounded()\"\n        ></cai-avatar>\n      </div>\n    } @else {\n      <div class=\"profile-container\">\n        <img\n          [class]=\"rounded() ? 'profile-rounded-image' : 'profile-square-image'\"\n          [src]=\"profileUrl()\"\n          draggable=\"false\"\n        />\n      </div>\n    }\n  }\n  @if (logoVariant && logoPreview) {\n    <div class=\"logo-container\" [class.has-logo]=\"!!logoUrl()\">\n      <img class=\"logo-image\" [src]=\"logoUrl()\" draggable=\"false\" />\n    </div>\n  }\n  <!--Image Cropper-->\n  @if (cropFile && showCrop) {\n    @if (!isCropperReady()) {\n      <div class=\"cropper-loader\">\n        <div class=\"spinner\"></div>\n      </div>\n    }\n    <div class=\"cropper-overlay\">\n      <image-cropper\n        #cropper\n        class=\"img-cropper\"\n        [output]=\"'base64'\"\n        [class.logoBorder]=\"logoVariant\"\n        [class.snapback-animate]=\"isSnapbackAnimating()\"\n        [roundCropper]=\"roundedBorder ? true : false\"\n        [hideResizeSquares]=\"true\"\n        [allowMoveImage]=\"true\"\n        [transform]=\"transform()\"\n        (transformChange)=\"onTransformChange($event)\"\n        format=\"png\"\n        [aspectRatio]=\"cropAspectRatio()\"\n        [resizeToWidth]=\"cropWidth()\"\n        [resizeToHeight]=\"cropHeight()\"\n        [containWithinAspectRatio]=\"true\"\n        [imageChangedEvent]=\"imageChangedEvent()\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded($event)\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      @if (isCropperReady()) {\n        <div class=\"lower-part\">\n          <div class=\"range\">\n            <input\n              #inputRange\n              type=\"range\"\n              class=\"custom-range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"0.1\"\n              [value]=\"zoomValue()\"\n              (input)=\"onZoomChange($event)\"\n            />\n          </div>\n          <div class=\"cropper-buttons\">\n            <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n            <button class=\"submit-button\" (click)=\"submitCrop()\">Crop</button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n  <!-- Drop Zone -->\n  @if (!isDocumentsMode() || documentsDropZoneOpen()) {\n    <div\n      #dropZoneContainer\n      class=\"drop-zone-container\"\n      [class.has-logo]=\"logoVariant && !!logoUrl()\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      [class]=\"{\n        'more-docs': docCount >= 3 && largeSize,\n        'small-more-docs': docCount >= 2 && smallSize,\n        'max-reached-drop-design':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          documentVariant,\n        'max-reached-more-doc':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          documentVariant,\n        'max-reached-more-media':\n          (countFiles <= this.docs().length || maxCountReached()) &&\n          mediaVariant,\n        'invalid-file-size': invalidFileSize(),\n        unsupported: unsupported() || invalidFileSize(),\n        smallView: this.smallView() && !dragMode(),\n      }\"\n    >\n      <!-- Drop Zone -->\n      @if (isDualDragActive()) {\n        @for (target of dualTargets; track target) {\n          @let panel = dualDropZones()[target];\n          <div\n            class=\"drop-zone dual-drop-zone-panel\"\n            [class.dual-drop-zone-left]=\"target === dualDropTarget.LEFT\"\n            [class.dual-drop-zone-right]=\"target === dualDropTarget.RIGHT\"\n            [class.active]=\"activeDualTarget() === target\"\n            (drop)=\"onDualDrop($event, target)\"\n          >\n            @if (panel.title) {\n              <div class=\"dual-drop-zone-title\">{{ panel.title }}</div>\n            }\n            <div class=\"drag-icons-container\">\n              @if (isDocumentsMode()) {\n                <svg-icon\n                  name=\"cai-drop-zone-focus\"\n                  class=\"illustration drag-icon-document\"\n                ></svg-icon>\n              } @else {\n                <ng-lottie\n                  [options]=\"{\n                    path:\n                      (target === dualDropTarget.LEFT\n                        ? dropZoneVariant.PROFILE\n                        : variant()\n                      ) | dropZoneAnimation,\n                    loop: false,\n                    autoplay: false,\n                  }\"\n                  (animationCreated)=\"animationCreated($event, target)\"\n                ></ng-lottie>\n              }\n            </div>\n            <div class=\"drop-zone-focus-text\">\n              <div class=\"heading\">\n                {{\n                  activeDualTarget() === target\n                    ? panel.dropLabel\n                    : panel.dragLabel\n                }}\n              </div>\n              <div class=\"description\">{{ panel.description }}</div>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n          @if (dragMode()) {\n            <div class=\"drag-icons-container\">\n              @if (isDocumentsMode()) {\n                <svg-icon\n                  name=\"cai-drop-zone-focus\"\n                  class=\"illustration drag-icon-document\"\n                ></svg-icon>\n              } @else {\n                <!-- Animation -->\n                <ng-lottie\n                  [options]=\"{\n                    path: variant() | dropZoneAnimation,\n                    loop: false,\n                    autoplay: false,\n                  }\"\n                  (animationCreated)=\"animationCreated($event)\"\n                ></ng-lottie>\n              }\n            </div>\n            <div class=\"drop-zone-focus-text\">\n              @if (isDocumentsMode()) {\n                <p class=\"heading\">DRAG FILES HERE</p>\n              } @else if (documentVariant || mediaVariant) {\n                <p class=\"heading\">\n                  {{ onDragover() ? \"DROP FILES HERE\" : \"DRAG FILES HERE\" }}\n                </p>\n              } @else {\n                <p class=\"heading\">\n                  {{ onDragover() ? \"DROP IMAGE HERE\" : \"DRAG IMAGE HERE\" }}\n                </p>\n              }\n            </div>\n          } @else {\n            @let svgIcon = variant() | dropZoneAnimation: true;\n            <svg-icon [name]=\"svgIcon\" class=\"illustration\"></svg-icon>\n            @if (\n              (countFiles <= this.docs().length || maxCountReached()) &&\n              documentVariant\n            ) {\n              <div class=\"drop-zone-text\">\n                <p class=\"heading\">\n                  <span class=\"line\">MAX COUNT</span>\n                  <span class=\"line\">REACHED</span>\n                </p>\n                <p class=\"subtext\">\n                  <span class=\"line\">{{ countFiles }} FILES </span>\n                  <span class=\"line\">IMPORTED</span>\n                </p>\n              </div>\n            } @else {\n              <div class=\"drop-zone-text\">\n                <p class=\"heading\">\n                  @if (documentVariant || mediaVariant) {\n                    DRAG FILES\n                    @if (docCount < 1 || isDocumentsMode()) {\n                      <span>HERE</span>\n                    }\n                  } @else if (profileVariant && roundedBorder) {\n                    DRAG IMAGE\n                  } @else {\n                    DRAG IMAGE HERE\n                  }\n                </p>\n                @if (!coverPreview && !profilePreview) {\n                  <p class=\"subtext\">OR CLICK TO ADD</p>\n                }\n                @if (coverPreview || profilePreview) {\n                  <p class=\"subtext\">OR CLICK TO REPLACE</p>\n                }\n                @if (mediaVariant) {\n                  <p class=\"media-subtext\">\n                    max file size {{ maxFileSize() }}mb\n                  </p>\n                }\n              </div>\n              @if (isDocumentsMode()) {\n                <button\n                  class=\"cancel-button-documents\"\n                  ngbTooltip=\"Cancel\"\n                  [placement]=\"'bottom'\"\n                  container=\"body\"\n                  triggers=\"mouseenter:mouseleave\"\n                  tooltipClass=\"tooltip tooltip-m-b-2\"\n                >\n                  <svg-icon\n                    name=\"cai-cancel\"\n                    class=\"cancel-icon\"\n                    (click)=\"onCancel($event)\"\n                  ></svg-icon>\n                </button>\n              }\n            }\n          }\n        </div>\n      }\n\n      <input\n        type=\"file\"\n        aria-hidden=\"true\"\n        multiple\n        class=\"drop-zone-input\"\n        #inputRef\n        (input)=\"onInput($event)\"\n        (change)=\"fileChangeEvent($event)\"\n      />\n\n      <!-- Drop Zone Error -->\n      <div class=\"drop-zone-error\">\n        @if (invalidFileSize()) {\n          <div class=\"drop-zone-text\">\n            <p class=\"heading invalid\">INVALID FILE SIZE</p>\n            <p class=\"subtext\">MAX {{ maxFileSize() }} MB</p>\n          </div>\n        } @else {\n          <div class=\"drop-zone-text\">\n            <p class=\"heading invalid\">INVALID FILE TYPE</p>\n            <p class=\"subtext\">SUPPORTED FORMATS</p>\n          </div>\n          <div class=\"file-types\">\n            @for (type of supportedFileTypes(); track $index) {\n              <p\n                class=\"badge\"\n                [class]=\"{\n                  pdf: type === 'pdf',\n                  video: ['avi', 'mp4', 'mov'].includes(type),\n                  image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),\n                }\"\n              >\n                {{ type }}\n              </p>\n            }\n          </div>\n        }\n        <button class=\"cancel-button\">\n          <svg-icon\n            name=\"cai-cancel\"\n            class=\"cancel-icon\"\n            (click)=\"cancel()\"\n          ></svg-icon>\n        </button>\n      </div>\n    </div>\n  }\n  @if (isLoadingSkeleton() && skeletonCount() > 0) {\n    <ng-container *ngTemplateOutlet=\"skeletonTemplate\"></ng-container>\n  } @else {\n    <!-- Carousel -->\n    @if (docCount > 0 && (documentVariant || mediaVariant)) {\n      <div #docsViewport class=\"docs\">\n        <div\n          class=\"doc-container\"\n          [class.documents-container-grid]=\"isDocumentsMode()\"\n          [style.transform]=\"isDocumentsMode() ? '' : carouselTransform()\"\n          [style.--carousel-index]=\"isDocumentsMode() ? null : carouselIndex()\"\n        >\n          @for (doc of docs(); track doc.uid) {\n            <cai-document-preview\n              [class.doc-visible]=\"\n                isDetailsSlider() && $index === carouselIndex()\n              \"\n              [class.doc-hidden]=\"\n                isDetailsSlider() && $index !== carouselIndex()\n              \"\n              class=\"doc\"\n              [file]=\"doc\"\n              [tags]=\"documentTags()\"\n              [searchText]=\"searchText()\"\n              [cdlDetailsMode]=\"isDetailsSlider()\"\n              [multipleDetailsDocs]=\"isDetailsSlider() && docCount > 1\"\n              [maxAspectRatio]=\"\n                isDetailsSlider() && docCount > 1\n                  ? maxDetailsAspectRatio()\n                  : null\n              \"\n              [drawerMode]=\"isDrawerMode() || isCardSlider()\"\n              [isCoverDetails]=\"isCoverDetails()\"\n              [viewMode]=\"isDocumentsMode() ? 'large' : 'small'\"\n              (onDelete)=\"handleDelete($event)\"\n              (onDownload)=\"handleDownload($event)\"\n              (onTagChange)=\"handleTagChange($event)\"\n              (onFileNameChange)=\"handleFileNameChange($event)\"\n              (onDocumentPreviewClick)=\"handleDocumentPreviewClick($event)\"\n              (aspectRatioChange)=\"onDocAspectRatioChange($event)\"\n            ></cai-document-preview>\n          }\n        </div>\n        @if (\n          isCardSlider() || isDrawerMode()\n            ? hasCarouselOverflow()\n            : docCount >= 3 || (isDetailsSlider() && docCount > 1)\n        ) {\n          <button\n            class=\"carousel-button carousel-left\"\n            type=\"button\"\n            (click)=\"carouselLeft()\"\n            [disabled]=\"carouselIndex() === 0\"\n            [style.opacity]=\"carouselIndex() === 0 ? '0' : '1'\"\n          >\n            <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n          </button>\n          <button\n            class=\"carousel-button carousel-right\"\n            type=\"button\"\n            (click)=\"carouselRight()\"\n            [disabled]=\"isCarouselAtEnd()\"\n            [style.opacity]=\"isCarouselAtEnd() ? '0' : '1'\"\n          >\n            <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n          </button>\n        }\n        @if (isDetailsSlider() && docCount > 1) {\n          <div class=\"sliders\">\n            @for (doc of docs(); track $index) {\n              <div\n                class=\"slider-item\"\n                (click)=\"carouselIndex.set($index)\"\n                [class.active]=\"$index === carouselIndex()\"\n              ></div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n<!-- Skeleton Template -->\n\n<ng-template #skeletonTemplate>\n  <div\n    class=\"skeleton-container\"\n    [ngClass]=\"{\n      'documents-container-grid': isDocumentsMode(),\n      'drawer-position': isDrawerMode(),\n    }\"\n  >\n    @for (item of skeletonItems(); track $index) {\n      <div class=\"skeleton-item\">\n        <div class=\"skeleton-bar\"></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".container.is-documents-mode{width:100%!important;max-width:100%!important}.container.is-documents-mode .drop-zone-container .drop-zone{width:100%!important}.documents-drag-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0003;z-index:10}.is-documents-mode{display:flex;flex-direction:column;gap:0!important;width:100%!important;height:100%!important}.is-documents-mode .drop-zone-container{display:flex;margin-bottom:4px;background-color:#f7f7f7;z-index:20}.is-documents-mode .drop-zone-container .drop-zone{width:100%;height:120px!important;background-color:transparent;outline-color:#dadada;transition:background-color .2s ease-in-out}.is-documents-mode .drop-zone-container .drop-zone:hover{background-color:#fff!important}.is-documents-mode .drop-zone-container .drop-zone .illustration{width:80px;height:80px}.is-documents-mode .drop-zone-container .drop-zone .drop-zone-text .heading{padding-bottom:0}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents{z-index:1000;position:absolute;top:4px;right:4px;width:26px;height:26px;background-color:transparent;padding:4px}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents .cancel-icon{width:18px;height:18px;color:#919191}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents:hover .cancel-icon{color:#424242}.is-documents-mode .skeleton-container .skeleton-item{width:100%;height:auto;aspect-ratio:1/1;max-width:100%;min-width:302px;min-height:302px;position:relative;border-radius:3px;background-color:#fff}.is-documents-mode .skeleton-container .skeleton-item .skeleton-bar{position:absolute;bottom:8px;left:8px;right:8px;width:auto;height:26px;background-color:#91919133;animation:skeleton-pulse 1s ease-in-out infinite alternate;border-radius:2px}.is-documents-mode .docs{width:100%!important;position:static!important;overflow:visible!important}.is-documents-mode .docs .doc-container .doc{height:auto!important}.is-documents-mode .docs .carousel-button{display:none}.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:4px;justify-items:stretch;align-items:start}@media(min-width:801px)and (max-width:1001px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(2,minmax(302px,1fr))}}@media(min-width:1002px)and (max-width:1307px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(3,minmax(302px,1fr))}}@media(min-width:1308px)and (max-width:1613px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(4,minmax(302px,1fr))}}@media(min-width:1614px)and (max-width:1920px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(5,minmax(302px,1fr))}}@media(min-width:1921px)and (max-width:2227px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(6,minmax(302px,1fr))}}@media(min-width:2228px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}}@keyframes skeleton-pulse{0%{background-color:#91919133}to{background-color:#91919120}}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:100%}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .img-cropper.snapback-animate ::ng-deep .ngx-ic-source-image{transition:transform .22s cubic-bezier(.22,1,.36,1)}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range{width:100%;height:22px;display:flex;align-items:center}.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .range input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;--range-active-color: #6692f1;--range-progress: 50%;background:transparent;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .cancel-button:hover{background-color:#424242;color:#fff}.cropper-overlay .lower-part .cropper-buttons .cancel-button:active{background-color:#1d1d1d;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .submit-button:hover{background-color:#0b49d1;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button:active{background-color:#00179e;color:#fff}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(145,145,145,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.hasCropper{height:204px!important;position:relative}input[type=range]:hover{--range-active-color: $color-blue-500}input[type=range]:active{--range-active-color: $color-blue-700}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;background-color:#fff;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-image:url(/assets/carriera-intern/icons/interaction/cai-thumb.svg);background-repeat:no-repeat;background-position:center;background-size:14px 18px;border-radius:2px;transition:background-color .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-active-color) 0%,var(--range-active-color) var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%);height:6px;transition:background .3s ease-in-out}input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b73ed 0%,#3b73ed var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:active::-webkit-slider-runnable-track{background:linear-gradient(to right,#0b49d1 0%,#0b49d1 var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:hover::-webkit-slider-thumb{cursor:grab}input[type=range]:active::-webkit-slider-thumb{background-image:url(/assets/carriera-intern/icons/interaction/cai-thumb-active.svg);cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}p{margin-bottom:0}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.illustration{width:100px;height:100px}.container{display:flex;gap:6px;position:relative;padding-left:0!important;padding-right:0!important;margin:0!important}.container.picture-container{gap:8px}.container.smallContainer{width:456px!important}.container.largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.smallContainer .docs .doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.largeContainer .docs{max-width:460px!important}.largeContainer .docs .doc-container{display:flex;gap:8px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;cursor:pointer;transition:background-color .2s ease-in-out}.drop-zone:hover{background-color:#eee}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;padding-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .media-subtext{margin-top:4px;color:#919191;font-size:11px;line-height:14px;font-weight:500}.smallView{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.smallView .drop-zone .drop-zone-text .subtext{line-height:14px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.text-white-50{color:#fff}.text-white-100{color:#f7f7f7}.text-white-200{color:#eee}.text-white-300{color:#e5e5e5}.text-white-500{color:#dadada}.text-white-500\\/20{color:#dadada33}.text-white-500\\/40{color:#dadada66}.text-white-500\\/70{color:#dadadab3}.text-white-700{color:#ccc}.text-black-50{color:#aaa}.text-black-100{color:#919191}.text-black-200{color:#6c6c6c}.text-black-300{color:#424242}.text-black-500{color:#2f2f2f}.text-black-500\\/20{color:#2f2f2f33}.text-black-500\\/40{color:#2f2f2f66}.text-black-500\\/70{color:#2f2f2fb3}.text-black-700{color:#1d1d1d}.text-blue-50{color:#e9effd}.text-blue-100{color:#bed0f9}.text-blue-200{color:#92b1f5}.text-blue-300{color:#6692f1}.text-blue-500{color:#3b73ed}.text-blue-500\\/20{color:#3b73ed33}.text-blue-500\\/40{color:#3b73ed66}.text-blue-500\\/70{color:#3b73edb3}.text-blue-700{color:#0b49d1}.text-blue-900{color:#00179e}.text-red-50{color:#fbe9e9}.text-red-100{color:#f4bebe}.text-red-200{color:#ed9292}.text-red-300{color:#e66767}.text-red-500{color:#df3c3c}.text-red-500\\/20{color:#df3c3c33}.text-red-500\\/40{color:#df3c3c66}.text-red-500\\/70{color:#df3c3cb3}.text-red-700{color:#c20c0c}.text-green-50{color:#e7f4f3}.text-green-100{color:#b6dfdb}.text-green-200{color:#86c9c3}.text-green-300{color:#56b4ac}.text-green-500{color:#259f94}.text-green-500\\/20{color:#259f9433}.text-green-500\\/40{color:#259f9466}.text-green-500\\/70{color:#259f94b3}.text-green-700{color:#007a6e}.text-yellow-50{color:#fef4e8}.text-yellow-100{color:#fddeb9}.text-yellow-200{color:#fbc88b}.text-yellow-300{color:#fab15c}.text-yellow-500{color:#f89b2e}.text-yellow-500\\/20{color:#f89b2e33}.text-yellow-500\\/40{color:#f89b2e66}.text-yellow-500\\/70{color:#f89b2eb3}.text-yellow-700{color:#de7700}.text-purple-50{color:#f4ebfd}.text-purple-100{color:#dfc2f9}.text-purple-200{color:#c999f4}.text-purple-300{color:#b370f0}.text-purple-500{color:#9e47ec}.text-purple-500\\/20{color:#9e47ec33}.text-purple-500\\/40{color:#9e47ec66}.text-purple-500\\/70{color:#9e47ecb3}.text-purple-700{color:#7919d0}.text-orange-50{color:#ffefea}.text-orange-100{color:#ffcfc0}.text-orange-200{color:#ffb097}.text-orange-300{color:#ff906d}.text-orange-500{color:#ff7043}.text-orange-500\\/20{color:#ff704333}.text-orange-500\\/40{color:#ff704366}.text-orange-500\\/70{color:#ff7043b3}.text-orange-700{color:#e54715}.text-azure-50{color:#e5f7fc}.text-azure-100{color:#b2e6f7}.text-azure-200{color:#80d6f1}.text-azure-300{color:#4dc5eb}.text-azure-500{color:#1ab5e6}.text-azure-500\\/20{color:#1ab5e633}.text-azure-500\\/40{color:#1ab5e666}.text-azure-500\\/70{color:#1ab5e6b3}.text-azure-700{color:#0093c9}.text-gold-50{color:#faf3e6}.text-gold-100{color:#efdcb4}.text-gold-200{color:#e4c481}.text-gold-300{color:#daad4f}.text-gold-500{color:#cf961d}.text-gold-500\\/20{color:#cf961d33}.text-gold-500\\/40{color:#cf961d66}.text-gold-500\\/70{color:#cf961db3}.text-gold-700{color:#b07000}.text-brown-50{color:#f1ede9}.text-brown-100{color:#d6c9bd}.text-brown-200{color:#bca691}.text-brown-300{color:#a08266}.text-brown-500{color:#865e3a}.text-brown-500\\/20{color:#865e3a33}.text-brown-500\\/40{color:#865e3a66}.text-brown-500\\/70{color:#865e3ab3}.text-brown-700{color:#5f330a}.text-navy-50{color:#e7e7fa}.text-navy-100{color:#b7b6f1}.text-navy-200{color:#8785e8}.text-navy-300{color:#5755df}.text-navy-500{color:#2724d6}.text-navy-500\\/20{color:#2724d633}.text-navy-500\\/40{color:#2724d666}.text-navy-500\\/70{color:#2724d6b3}.text-navy-700{color:#0000b8}.text-lime-50{color:#ecf6e7}.text-lime-100{color:#c5e3b6}.text-lime-200{color:#9ed186}.text-lime-300{color:#77bf56}.text-lime-500{color:#50ac25}.text-lime-500\\/20{color:#50ac2533}.text-lime-500\\/40{color:#50ac2566}.text-lime-500\\/70{color:#50ac25b3}.text-lime-700{color:#238900}.text-magenta-50{color:#fbe9f1}.text-magenta-100{color:#f4bed6}.text-magenta-200{color:#ed93bb}.text-magenta-300{color:#e668a0}.text-magenta-500{color:#df3d85}.text-magenta-500\\/20{color:#df3d8533}.text-magenta-500\\/40{color:#df3d8566}.text-magenta-500\\/70{color:#df3d85b3}.text-magenta-700{color:#c10d5d}.bg-white-50{background-color:#fff}.bg-white-100{background-color:#f7f7f7}.bg-white-200{background-color:#eee}.bg-white-300{background-color:#e5e5e5}.bg-white-500{background-color:#dadada}.bg-white-500\\/20{background-color:#dadada33}.bg-white-500\\/40{background-color:#dadada66}.bg-white-500\\/70{background-color:#dadadab3}.bg-white-700{background-color:#ccc}.bg-black-50{background-color:#aaa}.bg-black-100{background-color:#919191}.bg-black-200{background-color:#6c6c6c}.bg-black-300{background-color:#424242}.bg-black-500{background-color:#2f2f2f}.bg-black-500\\/20{background-color:#2f2f2f33}.bg-black-500\\/40{background-color:#2f2f2f66}.bg-black-500\\/70{background-color:#2f2f2fb3}.bg-black-700{background-color:#1d1d1d}.bg-blue-50{background-color:#e9effd}.bg-blue-100{background-color:#bed0f9}.bg-blue-200{background-color:#92b1f5}.bg-blue-300{background-color:#6692f1}.bg-blue-500{background-color:#3b73ed}.bg-blue-500\\/20{background-color:#3b73ed33}.bg-blue-500\\/40{background-color:#3b73ed66}.bg-blue-500\\/70{background-color:#3b73edb3}.bg-blue-700{background-color:#0b49d1}.bg-blue-900{background-color:#00179e}.bg-red-50{background-color:#fbe9e9}.bg-red-100{background-color:#f4bebe}.bg-red-200{background-color:#ed9292}.bg-red-300{background-color:#e66767}.bg-red-500{background-color:#df3c3c}.bg-red-500\\/20{background-color:#df3c3c33}.bg-red-500\\/40{background-color:#df3c3c66}.bg-red-500\\/70{background-color:#df3c3cb3}.bg-red-700{background-color:#c20c0c}.bg-green-50{background-color:#e7f4f3}.bg-green-100{background-color:#b6dfdb}.bg-green-200{background-color:#86c9c3}.bg-green-300{background-color:#56b4ac}.bg-green-500{background-color:#259f94}.bg-green-500\\/20{background-color:#259f9433}.bg-green-500\\/40{background-color:#259f9466}.bg-green-500\\/70{background-color:#259f94b3}.bg-green-700{background-color:#007a6e}.bg-yellow-50{background-color:#fef4e8}.bg-yellow-100{background-color:#fddeb9}.bg-yellow-200{background-color:#fbc88b}.bg-yellow-300{background-color:#fab15c}.bg-yellow-500{background-color:#f89b2e}.bg-yellow-500\\/20{background-color:#f89b2e33}.bg-yellow-500\\/40{background-color:#f89b2e66}.bg-yellow-500\\/70{background-color:#f89b2eb3}.bg-yellow-700{background-color:#de7700}.bg-purple-50{background-color:#f4ebfd}.bg-purple-100{background-color:#dfc2f9}.bg-purple-200{background-color:#c999f4}.bg-purple-300{background-color:#b370f0}.bg-purple-500{background-color:#9e47ec}.bg-purple-500\\/20{background-color:#9e47ec33}.bg-purple-500\\/40{background-color:#9e47ec66}.bg-purple-500\\/70{background-color:#9e47ecb3}.bg-purple-700{background-color:#7919d0}.bg-orange-50{background-color:#ffefea}.bg-orange-100{background-color:#ffcfc0}.bg-orange-200{background-color:#ffb097}.bg-orange-300{background-color:#ff906d}.bg-orange-500{background-color:#ff7043}.bg-orange-500\\/20{background-color:#ff704333}.bg-orange-500\\/40{background-color:#ff704366}.bg-orange-500\\/70{background-color:#ff7043b3}.bg-orange-700{background-color:#e54715}.bg-azure-50{background-color:#e5f7fc}.bg-azure-100{background-color:#b2e6f7}.bg-azure-200{background-color:#80d6f1}.bg-azure-300{background-color:#4dc5eb}.bg-azure-500{background-color:#1ab5e6}.bg-azure-500\\/20{background-color:#1ab5e633}.bg-azure-500\\/40{background-color:#1ab5e666}.bg-azure-500\\/70{background-color:#1ab5e6b3}.bg-azure-700{background-color:#0093c9}.bg-gold-50{background-color:#faf3e6}.bg-gold-100{background-color:#efdcb4}.bg-gold-200{background-color:#e4c481}.bg-gold-300{background-color:#daad4f}.bg-gold-500{background-color:#cf961d}.bg-gold-500\\/20{background-color:#cf961d33}.bg-gold-500\\/40{background-color:#cf961d66}.bg-gold-500\\/70{background-color:#cf961db3}.bg-gold-700{background-color:#b07000}.bg-brown-50{background-color:#f1ede9}.bg-brown-100{background-color:#d6c9bd}.bg-brown-200{background-color:#bca691}.bg-brown-300{background-color:#a08266}.bg-brown-500{background-color:#865e3a}.bg-brown-500\\/20{background-color:#865e3a33}.bg-brown-500\\/40{background-color:#865e3a66}.bg-brown-500\\/70{background-color:#865e3ab3}.bg-brown-700{background-color:#5f330a}.bg-navy-50{background-color:#e7e7fa}.bg-navy-100{background-color:#b7b6f1}.bg-navy-200{background-color:#8785e8}.bg-navy-300{background-color:#5755df}.bg-navy-500{background-color:#2724d6}.bg-navy-500\\/20{background-color:#2724d633}.bg-navy-500\\/40{background-color:#2724d666}.bg-navy-500\\/70{background-color:#2724d6b3}.bg-navy-700{background-color:#0000b8}.bg-lime-50{background-color:#ecf6e7}.bg-lime-100{background-color:#c5e3b6}.bg-lime-200{background-color:#9ed186}.bg-lime-300{background-color:#77bf56}.bg-lime-500{background-color:#50ac25}.bg-lime-500\\/20{background-color:#50ac2533}.bg-lime-500\\/40{background-color:#50ac2566}.bg-lime-500\\/70{background-color:#50ac25b3}.bg-lime-700{background-color:#238900}.bg-magenta-50{background-color:#fbe9f1}.bg-magenta-100{background-color:#f4bed6}.bg-magenta-200{background-color:#ed93bb}.bg-magenta-300{background-color:#e668a0}.bg-magenta-500{background-color:#df3d85}.bg-magenta-500\\/20{background-color:#df3d8533}.bg-magenta-500\\/40{background-color:#df3d8566}.bg-magenta-500\\/70{background-color:#df3d85b3}.bg-magenta-700{background-color:#c10d5d}.border-white-50{border-color:#fff}.border-white-100{border-color:#f7f7f7}.border-white-200{border-color:#eee}.border-white-300{border-color:#e5e5e5}.border-white-500{border-color:#dadada}.border-white-500\\/20{border-color:#dadada33}.border-white-500\\/40{border-color:#dadada66}.border-white-500\\/70{border-color:#dadadab3}.border-white-700{border-color:#ccc}.border-black-50{border-color:#aaa}.border-black-100{border-color:#919191}.border-black-200{border-color:#6c6c6c}.border-black-300{border-color:#424242}.border-black-500{border-color:#2f2f2f}.border-black-500\\/20{border-color:#2f2f2f33}.border-black-500\\/40{border-color:#2f2f2f66}.border-black-500\\/70{border-color:#2f2f2fb3}.border-black-700{border-color:#1d1d1d}.border-blue-50{border-color:#e9effd}.border-blue-100{border-color:#bed0f9}.border-blue-200{border-color:#92b1f5}.border-blue-300{border-color:#6692f1}.border-blue-500{border-color:#3b73ed}.border-blue-500\\/20{border-color:#3b73ed33}.border-blue-500\\/40{border-color:#3b73ed66}.border-blue-500\\/70{border-color:#3b73edb3}.border-blue-700{border-color:#0b49d1}.border-blue-900{border-color:#00179e}.border-red-50{border-color:#fbe9e9}.border-red-100{border-color:#f4bebe}.border-red-200{border-color:#ed9292}.border-red-300{border-color:#e66767}.border-red-500{border-color:#df3c3c}.border-red-500\\/20{border-color:#df3c3c33}.border-red-500\\/40{border-color:#df3c3c66}.border-red-500\\/70{border-color:#df3c3cb3}.border-red-700{border-color:#c20c0c}.border-green-50{border-color:#e7f4f3}.border-green-100{border-color:#b6dfdb}.border-green-200{border-color:#86c9c3}.border-green-300{border-color:#56b4ac}.border-green-500{border-color:#259f94}.border-green-500\\/20{border-color:#259f9433}.border-green-500\\/40{border-color:#259f9466}.border-green-500\\/70{border-color:#259f94b3}.border-green-700{border-color:#007a6e}.border-yellow-50{border-color:#fef4e8}.border-yellow-100{border-color:#fddeb9}.border-yellow-200{border-color:#fbc88b}.border-yellow-300{border-color:#fab15c}.border-yellow-500{border-color:#f89b2e}.border-yellow-500\\/20{border-color:#f89b2e33}.border-yellow-500\\/40{border-color:#f89b2e66}.border-yellow-500\\/70{border-color:#f89b2eb3}.border-yellow-700{border-color:#de7700}.border-purple-50{border-color:#f4ebfd}.border-purple-100{border-color:#dfc2f9}.border-purple-200{border-color:#c999f4}.border-purple-300{border-color:#b370f0}.border-purple-500{border-color:#9e47ec}.border-purple-500\\/20{border-color:#9e47ec33}.border-purple-500\\/40{border-color:#9e47ec66}.border-purple-500\\/70{border-color:#9e47ecb3}.border-purple-700{border-color:#7919d0}.border-orange-50{border-color:#ffefea}.border-orange-100{border-color:#ffcfc0}.border-orange-200{border-color:#ffb097}.border-orange-300{border-color:#ff906d}.border-orange-500{border-color:#ff7043}.border-orange-500\\/20{border-color:#ff704333}.border-orange-500\\/40{border-color:#ff704366}.border-orange-500\\/70{border-color:#ff7043b3}.border-orange-700{border-color:#e54715}.border-azure-50{border-color:#e5f7fc}.border-azure-100{border-color:#b2e6f7}.border-azure-200{border-color:#80d6f1}.border-azure-300{border-color:#4dc5eb}.border-azure-500{border-color:#1ab5e6}.border-azure-500\\/20{border-color:#1ab5e633}.border-azure-500\\/40{border-color:#1ab5e666}.border-azure-500\\/70{border-color:#1ab5e6b3}.border-azure-700{border-color:#0093c9}.border-gold-50{border-color:#faf3e6}.border-gold-100{border-color:#efdcb4}.border-gold-200{border-color:#e4c481}.border-gold-300{border-color:#daad4f}.border-gold-500{border-color:#cf961d}.border-gold-500\\/20{border-color:#cf961d33}.border-gold-500\\/40{border-color:#cf961d66}.border-gold-500\\/70{border-color:#cf961db3}.border-gold-700{border-color:#b07000}.border-brown-50{border-color:#f1ede9}.border-brown-100{border-color:#d6c9bd}.border-brown-200{border-color:#bca691}.border-brown-300{border-color:#a08266}.border-brown-500{border-color:#865e3a}.border-brown-500\\/20{border-color:#865e3a33}.border-brown-500\\/40{border-color:#865e3a66}.border-brown-500\\/70{border-color:#865e3ab3}.border-brown-700{border-color:#5f330a}.border-navy-50{border-color:#e7e7fa}.border-navy-100{border-color:#b7b6f1}.border-navy-200{border-color:#8785e8}.border-navy-300{border-color:#5755df}.border-navy-500{border-color:#2724d6}.border-navy-500\\/20{border-color:#2724d633}.border-navy-500\\/40{border-color:#2724d666}.border-navy-500\\/70{border-color:#2724d6b3}.border-navy-700{border-color:#0000b8}.border-lime-50{border-color:#ecf6e7}.border-lime-100{border-color:#c5e3b6}.border-lime-200{border-color:#9ed186}.border-lime-300{border-color:#77bf56}.border-lime-500{border-color:#50ac25}.border-lime-500\\/20{border-color:#50ac2533}.border-lime-500\\/40{border-color:#50ac2566}.border-lime-500\\/70{border-color:#50ac25b3}.border-lime-700{border-color:#238900}.border-magenta-50{border-color:#fbe9f1}.border-magenta-100{border-color:#f4bed6}.border-magenta-200{border-color:#ed93bb}.border-magenta-300{border-color:#e668a0}.border-magenta-500{border-color:#df3d85}.border-magenta-500\\/20{border-color:#df3d8533}.border-magenta-500\\/40{border-color:#df3d8566}.border-magenta-500\\/70{border-color:#df3d85b3}.border-magenta-700{border-color:#c10d5d}.fill-white-50{fill:#fff}.fill-white-100{fill:#f7f7f7}.fill-white-200{fill:#eee}.fill-white-300{fill:#e5e5e5}.fill-white-500{fill:#dadada}.fill-white-500\\/20{fill:#dadada33}.fill-white-500\\/40{fill:#dadada66}.fill-white-500\\/70{fill:#dadadab3}.fill-white-700{fill:#ccc}.fill-black-50{fill:#aaa}.fill-black-100{fill:#919191}.fill-black-200{fill:#6c6c6c}.fill-black-300{fill:#424242}.fill-black-500{fill:#2f2f2f}.fill-black-500\\/20{fill:#2f2f2f33}.fill-black-500\\/40{fill:#2f2f2f66}.fill-black-500\\/70{fill:#2f2f2fb3}.fill-black-700{fill:#1d1d1d}.fill-blue-50{fill:#e9effd}.fill-blue-100{fill:#bed0f9}.fill-blue-200{fill:#92b1f5}.fill-blue-300{fill:#6692f1}.fill-blue-500{fill:#3b73ed}.fill-blue-500\\/20{fill:#3b73ed33}.fill-blue-500\\/40{fill:#3b73ed66}.fill-blue-500\\/70{fill:#3b73edb3}.fill-blue-700{fill:#0b49d1}.fill-blue-900{fill:#00179e}.fill-red-50{fill:#fbe9e9}.fill-red-100{fill:#f4bebe}.fill-red-200{fill:#ed9292}.fill-red-300{fill:#e66767}.fill-red-500{fill:#df3c3c}.fill-red-500\\/20{fill:#df3c3c33}.fill-red-500\\/40{fill:#df3c3c66}.fill-red-500\\/70{fill:#df3c3cb3}.fill-red-700{fill:#c20c0c}.fill-green-50{fill:#e7f4f3}.fill-green-100{fill:#b6dfdb}.fill-green-200{fill:#86c9c3}.fill-green-300{fill:#56b4ac}.fill-green-500{fill:#259f94}.fill-green-500\\/20{fill:#259f9433}.fill-green-500\\/40{fill:#259f9466}.fill-green-500\\/70{fill:#259f94b3}.fill-green-700{fill:#007a6e}.fill-yellow-50{fill:#fef4e8}.fill-yellow-100{fill:#fddeb9}.fill-yellow-200{fill:#fbc88b}.fill-yellow-300{fill:#fab15c}.fill-yellow-500{fill:#f89b2e}.fill-yellow-500\\/20{fill:#f89b2e33}.fill-yellow-500\\/40{fill:#f89b2e66}.fill-yellow-500\\/70{fill:#f89b2eb3}.fill-yellow-700{fill:#de7700}.fill-purple-50{fill:#f4ebfd}.fill-purple-100{fill:#dfc2f9}.fill-purple-200{fill:#c999f4}.fill-purple-300{fill:#b370f0}.fill-purple-500{fill:#9e47ec}.fill-purple-500\\/20{fill:#9e47ec33}.fill-purple-500\\/40{fill:#9e47ec66}.fill-purple-500\\/70{fill:#9e47ecb3}.fill-purple-700{fill:#7919d0}.fill-orange-50{fill:#ffefea}.fill-orange-100{fill:#ffcfc0}.fill-orange-200{fill:#ffb097}.fill-orange-300{fill:#ff906d}.fill-orange-500{fill:#ff7043}.fill-orange-500\\/20{fill:#ff704333}.fill-orange-500\\/40{fill:#ff704366}.fill-orange-500\\/70{fill:#ff7043b3}.fill-orange-700{fill:#e54715}.fill-azure-50{fill:#e5f7fc}.fill-azure-100{fill:#b2e6f7}.fill-azure-200{fill:#80d6f1}.fill-azure-300{fill:#4dc5eb}.fill-azure-500{fill:#1ab5e6}.fill-azure-500\\/20{fill:#1ab5e633}.fill-azure-500\\/40{fill:#1ab5e666}.fill-azure-500\\/70{fill:#1ab5e6b3}.fill-azure-700{fill:#0093c9}.fill-gold-50{fill:#faf3e6}.fill-gold-100{fill:#efdcb4}.fill-gold-200{fill:#e4c481}.fill-gold-300{fill:#daad4f}.fill-gold-500{fill:#cf961d}.fill-gold-500\\/20{fill:#cf961d33}.fill-gold-500\\/40{fill:#cf961d66}.fill-gold-500\\/70{fill:#cf961db3}.fill-gold-700{fill:#b07000}.fill-brown-50{fill:#f1ede9}.fill-brown-100{fill:#d6c9bd}.fill-brown-200{fill:#bca691}.fill-brown-300{fill:#a08266}.fill-brown-500{fill:#865e3a}.fill-brown-500\\/20{fill:#865e3a33}.fill-brown-500\\/40{fill:#865e3a66}.fill-brown-500\\/70{fill:#865e3ab3}.fill-brown-700{fill:#5f330a}.fill-navy-50{fill:#e7e7fa}.fill-navy-100{fill:#b7b6f1}.fill-navy-200{fill:#8785e8}.fill-navy-300{fill:#5755df}.fill-navy-500{fill:#2724d6}.fill-navy-500\\/20{fill:#2724d633}.fill-navy-500\\/40{fill:#2724d666}.fill-navy-500\\/70{fill:#2724d6b3}.fill-navy-700{fill:#0000b8}.fill-lime-50{fill:#ecf6e7}.fill-lime-100{fill:#c5e3b6}.fill-lime-200{fill:#9ed186}.fill-lime-300{fill:#77bf56}.fill-lime-500{fill:#50ac25}.fill-lime-500\\/20{fill:#50ac2533}.fill-lime-500\\/40{fill:#50ac2566}.fill-lime-500\\/70{fill:#50ac25b3}.fill-lime-700{fill:#238900}.fill-magenta-50{fill:#fbe9f1}.fill-magenta-100{fill:#f4bed6}.fill-magenta-200{fill:#ed93bb}.fill-magenta-300{fill:#e668a0}.fill-magenta-500{fill:#df3d85}.fill-magenta-500\\/20{fill:#df3d8533}.fill-magenta-500\\/40{fill:#df3d8566}.fill-magenta-500\\/70{fill:#df3d85b3}.fill-magenta-700{fill:#c10d5d}.stroke-white-50{stroke:#fff}.stroke-white-100{stroke:#f7f7f7}.stroke-white-200{stroke:#eee}.stroke-white-300{stroke:#e5e5e5}.stroke-white-500{stroke:#dadada}.stroke-white-500\\/20{stroke:#dadada33}.stroke-white-500\\/40{stroke:#dadada66}.stroke-white-500\\/70{stroke:#dadadab3}.stroke-white-700{stroke:#ccc}.stroke-black-50{stroke:#aaa}.stroke-black-100{stroke:#919191}.stroke-black-200{stroke:#6c6c6c}.stroke-black-300{stroke:#424242}.stroke-black-500{stroke:#2f2f2f}.stroke-black-500\\/20{stroke:#2f2f2f33}.stroke-black-500\\/40{stroke:#2f2f2f66}.stroke-black-500\\/70{stroke:#2f2f2fb3}.stroke-black-700{stroke:#1d1d1d}.stroke-blue-50{stroke:#e9effd}.stroke-blue-100{stroke:#bed0f9}.stroke-blue-200{stroke:#92b1f5}.stroke-blue-300{stroke:#6692f1}.stroke-blue-500{stroke:#3b73ed}.stroke-blue-500\\/20{stroke:#3b73ed33}.stroke-blue-500\\/40{stroke:#3b73ed66}.stroke-blue-500\\/70{stroke:#3b73edb3}.stroke-blue-700{stroke:#0b49d1}.stroke-blue-900{stroke:#00179e}.stroke-red-50{stroke:#fbe9e9}.stroke-red-100{stroke:#f4bebe}.stroke-red-200{stroke:#ed9292}.stroke-red-300{stroke:#e66767}.stroke-red-500{stroke:#df3c3c}.stroke-red-500\\/20{stroke:#df3c3c33}.stroke-red-500\\/40{stroke:#df3c3c66}.stroke-red-500\\/70{stroke:#df3c3cb3}.stroke-red-700{stroke:#c20c0c}.stroke-green-50{stroke:#e7f4f3}.stroke-green-100{stroke:#b6dfdb}.stroke-green-200{stroke:#86c9c3}.stroke-green-300{stroke:#56b4ac}.stroke-green-500{stroke:#259f94}.stroke-green-500\\/20{stroke:#259f9433}.stroke-green-500\\/40{stroke:#259f9466}.stroke-green-500\\/70{stroke:#259f94b3}.stroke-green-700{stroke:#007a6e}.stroke-yellow-50{stroke:#fef4e8}.stroke-yellow-100{stroke:#fddeb9}.stroke-yellow-200{stroke:#fbc88b}.stroke-yellow-300{stroke:#fab15c}.stroke-yellow-500{stroke:#f89b2e}.stroke-yellow-500\\/20{stroke:#f89b2e33}.stroke-yellow-500\\/40{stroke:#f89b2e66}.stroke-yellow-500\\/70{stroke:#f89b2eb3}.stroke-yellow-700{stroke:#de7700}.stroke-purple-50{stroke:#f4ebfd}.stroke-purple-100{stroke:#dfc2f9}.stroke-purple-200{stroke:#c999f4}.stroke-purple-300{stroke:#b370f0}.stroke-purple-500{stroke:#9e47ec}.stroke-purple-500\\/20{stroke:#9e47ec33}.stroke-purple-500\\/40{stroke:#9e47ec66}.stroke-purple-500\\/70{stroke:#9e47ecb3}.stroke-purple-700{stroke:#7919d0}.stroke-orange-50{stroke:#ffefea}.stroke-orange-100{stroke:#ffcfc0}.stroke-orange-200{stroke:#ffb097}.stroke-orange-300{stroke:#ff906d}.stroke-orange-500{stroke:#ff7043}.stroke-orange-500\\/20{stroke:#ff704333}.stroke-orange-500\\/40{stroke:#ff704366}.stroke-orange-500\\/70{stroke:#ff7043b3}.stroke-orange-700{stroke:#e54715}.stroke-azure-50{stroke:#e5f7fc}.stroke-azure-100{stroke:#b2e6f7}.stroke-azure-200{stroke:#80d6f1}.stroke-azure-300{stroke:#4dc5eb}.stroke-azure-500{stroke:#1ab5e6}.stroke-azure-500\\/20{stroke:#1ab5e633}.stroke-azure-500\\/40{stroke:#1ab5e666}.stroke-azure-500\\/70{stroke:#1ab5e6b3}.stroke-azure-700{stroke:#0093c9}.stroke-gold-50{stroke:#faf3e6}.stroke-gold-100{stroke:#efdcb4}.stroke-gold-200{stroke:#e4c481}.stroke-gold-300{stroke:#daad4f}.stroke-gold-500{stroke:#cf961d}.stroke-gold-500\\/20{stroke:#cf961d33}.stroke-gold-500\\/40{stroke:#cf961d66}.stroke-gold-500\\/70{stroke:#cf961db3}.stroke-gold-700{stroke:#b07000}.stroke-brown-50{stroke:#f1ede9}.stroke-brown-100{stroke:#d6c9bd}.stroke-brown-200{stroke:#bca691}.stroke-brown-300{stroke:#a08266}.stroke-brown-500{stroke:#865e3a}.stroke-brown-500\\/20{stroke:#865e3a33}.stroke-brown-500\\/40{stroke:#865e3a66}.stroke-brown-500\\/70{stroke:#865e3ab3}.stroke-brown-700{stroke:#5f330a}.stroke-navy-50{stroke:#e7e7fa}.stroke-navy-100{stroke:#b7b6f1}.stroke-navy-200{stroke:#8785e8}.stroke-navy-300{stroke:#5755df}.stroke-navy-500{stroke:#2724d6}.stroke-navy-500\\/20{stroke:#2724d633}.stroke-navy-500\\/40{stroke:#2724d666}.stroke-navy-500\\/70{stroke:#2724d6b3}.stroke-navy-700{stroke:#0000b8}.stroke-lime-50{stroke:#ecf6e7}.stroke-lime-100{stroke:#c5e3b6}.stroke-lime-200{stroke:#9ed186}.stroke-lime-300{stroke:#77bf56}.stroke-lime-500{stroke:#50ac25}.stroke-lime-500\\/20{stroke:#50ac2533}.stroke-lime-500\\/40{stroke:#50ac2566}.stroke-lime-500\\/70{stroke:#50ac25b3}.stroke-lime-700{stroke:#238900}.stroke-magenta-50{stroke:#fbe9f1}.stroke-magenta-100{stroke:#f4bed6}.stroke-magenta-200{stroke:#ed93bb}.stroke-magenta-300{stroke:#e668a0}.stroke-magenta-500{stroke:#df3d85}.stroke-magenta-500\\/20{stroke:#df3d8533}.stroke-magenta-500\\/40{stroke:#df3d8566}.stroke-magenta-500\\/70{stroke:#df3d85b3}.stroke-magenta-700{stroke:#c10d5d}.hover\\:text-white-50:hover{color:#fff}.hover\\:text-white-100:hover{color:#f7f7f7}.hover\\:text-white-200:hover{color:#eee}.hover\\:text-white-300:hover{color:#e5e5e5}.hover\\:text-white-500:hover{color:#dadada}.hover\\:text-white-500:hover\\/20{color:#dadada33}.hover\\:text-white-500:hover\\/40{color:#dadada66}.hover\\:text-white-500:hover\\/70{color:#dadadab3}.hover\\:text-white-700:hover{color:#ccc}.hover\\:text-black-50:hover{color:#aaa}.hover\\:text-black-100:hover{color:#919191}.hover\\:text-black-200:hover{color:#6c6c6c}.hover\\:text-black-300:hover{color:#424242}.hover\\:text-black-500:hover{color:#2f2f2f}.hover\\:text-black-500:hover\\/20{color:#2f2f2f33}.hover\\:text-black-500:hover\\/40{color:#2f2f2f66}.hover\\:text-black-500:hover\\/70{color:#2f2f2fb3}.hover\\:text-black-700:hover{color:#1d1d1d}.hover\\:text-blue-50:hover{color:#e9effd}.hover\\:text-blue-100:hover{color:#bed0f9}.hover\\:text-blue-200:hover{color:#92b1f5}.hover\\:text-blue-300:hover{color:#6692f1}.hover\\:text-blue-500:hover{color:#3b73ed}.hover\\:text-blue-500:hover\\/20{color:#3b73ed33}.hover\\:text-blue-500:hover\\/40{color:#3b73ed66}.hover\\:text-blue-500:hover\\/70{color:#3b73edb3}.hover\\:text-blue-700:hover{color:#0b49d1}.hover\\:text-blue-900:hover{color:#00179e}.hover\\:text-red-50:hover{color:#fbe9e9}.hover\\:text-red-100:hover{color:#f4bebe}.hover\\:text-red-200:hover{color:#ed9292}.hover\\:text-red-300:hover{color:#e66767}.hover\\:text-red-500:hover{color:#df3c3c}.hover\\:text-red-500:hover\\/20{color:#df3c3c33}.hover\\:text-red-500:hover\\/40{color:#df3c3c66}.hover\\:text-red-500:hover\\/70{color:#df3c3cb3}.hover\\:text-red-700:hover{color:#c20c0c}.hover\\:text-green-50:hover{color:#e7f4f3}.hover\\:text-green-100:hover{color:#b6dfdb}.hover\\:text-green-200:hover{color:#86c9c3}.hover\\:text-green-300:hover{color:#56b4ac}.hover\\:text-green-500:hover{color:#259f94}.hover\\:text-green-500:hover\\/20{color:#259f9433}.hover\\:text-green-500:hover\\/40{color:#259f9466}.hover\\:text-green-500:hover\\/70{color:#259f94b3}.hover\\:text-green-700:hover{color:#007a6e}.hover\\:text-yellow-50:hover{color:#fef4e8}.hover\\:text-yellow-100:hover{color:#fddeb9}.hover\\:text-yellow-200:hover{color:#fbc88b}.hover\\:text-yellow-300:hover{color:#fab15c}.hover\\:text-yellow-500:hover{color:#f89b2e}.hover\\:text-yellow-500:hover\\/20{color:#f89b2e33}.hover\\:text-yellow-500:hover\\/40{color:#f89b2e66}.hover\\:text-yellow-500:hover\\/70{color:#f89b2eb3}.hover\\:text-yellow-700:hover{color:#de7700}.hover\\:text-purple-50:hover{color:#f4ebfd}.hover\\:text-purple-100:hover{color:#dfc2f9}.hover\\:text-purple-200:hover{color:#c999f4}.hover\\:text-purple-300:hover{color:#b370f0}.hover\\:text-purple-500:hover{color:#9e47ec}.hover\\:text-purple-500:hover\\/20{color:#9e47ec33}.hover\\:text-purple-500:hover\\/40{color:#9e47ec66}.hover\\:text-purple-500:hover\\/70{color:#9e47ecb3}.hover\\:text-purple-700:hover{color:#7919d0}.hover\\:text-orange-50:hover{color:#ffefea}.hover\\:text-orange-100:hover{color:#ffcfc0}.hover\\:text-orange-200:hover{color:#ffb097}.hover\\:text-orange-300:hover{color:#ff906d}.hover\\:text-orange-500:hover{color:#ff7043}.hover\\:text-orange-500:hover\\/20{color:#ff704333}.hover\\:text-orange-500:hover\\/40{color:#ff704366}.hover\\:text-orange-500:hover\\/70{color:#ff7043b3}.hover\\:text-orange-700:hover{color:#e54715}.hover\\:text-azure-50:hover{color:#e5f7fc}.hover\\:text-azure-100:hover{color:#b2e6f7}.hover\\:text-azure-200:hover{color:#80d6f1}.hover\\:text-azure-300:hover{color:#4dc5eb}.hover\\:text-azure-500:hover{color:#1ab5e6}.hover\\:text-azure-500:hover\\/20{color:#1ab5e633}.hover\\:text-azure-500:hover\\/40{color:#1ab5e666}.hover\\:text-azure-500:hover\\/70{color:#1ab5e6b3}.hover\\:text-azure-700:hover{color:#0093c9}.hover\\:text-gold-50:hover{color:#faf3e6}.hover\\:text-gold-100:hover{color:#efdcb4}.hover\\:text-gold-200:hover{color:#e4c481}.hover\\:text-gold-300:hover{color:#daad4f}.hover\\:text-gold-500:hover{color:#cf961d}.hover\\:text-gold-500:hover\\/20{color:#cf961d33}.hover\\:text-gold-500:hover\\/40{color:#cf961d66}.hover\\:text-gold-500:hover\\/70{color:#cf961db3}.hover\\:text-gold-700:hover{color:#b07000}.hover\\:text-brown-50:hover{color:#f1ede9}.hover\\:text-brown-100:hover{color:#d6c9bd}.hover\\:text-brown-200:hover{color:#bca691}.hover\\:text-brown-300:hover{color:#a08266}.hover\\:text-brown-500:hover{color:#865e3a}.hover\\:text-brown-500:hover\\/20{color:#865e3a33}.hover\\:text-brown-500:hover\\/40{color:#865e3a66}.hover\\:text-brown-500:hover\\/70{color:#865e3ab3}.hover\\:text-brown-700:hover{color:#5f330a}.hover\\:text-navy-50:hover{color:#e7e7fa}.hover\\:text-navy-100:hover{color:#b7b6f1}.hover\\:text-navy-200:hover{color:#8785e8}.hover\\:text-navy-300:hover{color:#5755df}.hover\\:text-navy-500:hover{color:#2724d6}.hover\\:text-navy-500:hover\\/20{color:#2724d633}.hover\\:text-navy-500:hover\\/40{color:#2724d666}.hover\\:text-navy-500:hover\\/70{color:#2724d6b3}.hover\\:text-navy-700:hover{color:#0000b8}.hover\\:text-lime-50:hover{color:#ecf6e7}.hover\\:text-lime-100:hover{color:#c5e3b6}.hover\\:text-lime-200:hover{color:#9ed186}.hover\\:text-lime-300:hover{color:#77bf56}.hover\\:text-lime-500:hover{color:#50ac25}.hover\\:text-lime-500:hover\\/20{color:#50ac2533}.hover\\:text-lime-500:hover\\/40{color:#50ac2566}.hover\\:text-lime-500:hover\\/70{color:#50ac25b3}.hover\\:text-lime-700:hover{color:#238900}.hover\\:text-magenta-50:hover{color:#fbe9f1}.hover\\:text-magenta-100:hover{color:#f4bed6}.hover\\:text-magenta-200:hover{color:#ed93bb}.hover\\:text-magenta-300:hover{color:#e668a0}.hover\\:text-magenta-500:hover{color:#df3d85}.hover\\:text-magenta-500:hover\\/20{color:#df3d8533}.hover\\:text-magenta-500:hover\\/40{color:#df3d8566}.hover\\:text-magenta-500:hover\\/70{color:#df3d85b3}.hover\\:text-magenta-700:hover{color:#c10d5d}.hover\\:bg-white-50:hover{background-color:#fff}.hover\\:bg-white-100:hover{background-color:#f7f7f7}.hover\\:bg-white-200:hover{background-color:#eee}.hover\\:bg-white-300:hover{background-color:#e5e5e5}.hover\\:bg-white-500:hover{background-color:#dadada}.hover\\:bg-white-500:hover\\/20{background-color:#dadada33}.hover\\:bg-white-500:hover\\/40{background-color:#dadada66}.hover\\:bg-white-500:hover\\/70{background-color:#dadadab3}.hover\\:bg-white-700:hover{background-color:#ccc}.hover\\:bg-black-50:hover{background-color:#aaa}.hover\\:bg-black-100:hover{background-color:#919191}.hover\\:bg-black-200:hover{background-color:#6c6c6c}.hover\\:bg-black-300:hover{background-color:#424242}.hover\\:bg-black-500:hover{background-color:#2f2f2f}.hover\\:bg-black-500:hover\\/20{background-color:#2f2f2f33}.hover\\:bg-black-500:hover\\/40{background-color:#2f2f2f66}.hover\\:bg-black-500:hover\\/70{background-color:#2f2f2fb3}.hover\\:bg-black-700:hover{background-color:#1d1d1d}.hover\\:bg-blue-50:hover{background-color:#e9effd}.hover\\:bg-blue-100:hover{background-color:#bed0f9}.hover\\:bg-blue-200:hover{background-color:#92b1f5}.hover\\:bg-blue-300:hover{background-color:#6692f1}.hover\\:bg-blue-500:hover{background-color:#3b73ed}.hover\\:bg-blue-500:hover\\/20{background-color:#3b73ed33}.hover\\:bg-blue-500:hover\\/40{background-color:#3b73ed66}.hover\\:bg-blue-500:hover\\/70{background-color:#3b73edb3}.hover\\:bg-blue-700:hover{background-color:#0b49d1}.hover\\:bg-blue-900:hover{background-color:#00179e}.hover\\:bg-red-50:hover{background-color:#fbe9e9}.hover\\:bg-red-100:hover{background-color:#f4bebe}.hover\\:bg-red-200:hover{background-color:#ed9292}.hover\\:bg-red-300:hover{background-color:#e66767}.hover\\:bg-red-500:hover{background-color:#df3c3c}.hover\\:bg-red-500:hover\\/20{background-color:#df3c3c33}.hover\\:bg-red-500:hover\\/40{background-color:#df3c3c66}.hover\\:bg-red-500:hover\\/70{background-color:#df3c3cb3}.hover\\:bg-red-700:hover{background-color:#c20c0c}.hover\\:bg-green-50:hover{background-color:#e7f4f3}.hover\\:bg-green-100:hover{background-color:#b6dfdb}.hover\\:bg-green-200:hover{background-color:#86c9c3}.hover\\:bg-green-300:hover{background-color:#56b4ac}.hover\\:bg-green-500:hover{background-color:#259f94}.hover\\:bg-green-500:hover\\/20{background-color:#259f9433}.hover\\:bg-green-500:hover\\/40{background-color:#259f9466}.hover\\:bg-green-500:hover\\/70{background-color:#259f94b3}.hover\\:bg-green-700:hover{background-color:#007a6e}.hover\\:bg-yellow-50:hover{background-color:#fef4e8}.hover\\:bg-yellow-100:hover{background-color:#fddeb9}.hover\\:bg-yellow-200:hover{background-color:#fbc88b}.hover\\:bg-yellow-300:hover{background-color:#fab15c}.hover\\:bg-yellow-500:hover{background-color:#f89b2e}.hover\\:bg-yellow-500:hover\\/20{background-color:#f89b2e33}.hover\\:bg-yellow-500:hover\\/40{background-color:#f89b2e66}.hover\\:bg-yellow-500:hover\\/70{background-color:#f89b2eb3}.hover\\:bg-yellow-700:hover{background-color:#de7700}.hover\\:bg-purple-50:hover{background-color:#f4ebfd}.hover\\:bg-purple-100:hover{background-color:#dfc2f9}.hover\\:bg-purple-200:hover{background-color:#c999f4}.hover\\:bg-purple-300:hover{background-color:#b370f0}.hover\\:bg-purple-500:hover{background-color:#9e47ec}.hover\\:bg-purple-500:hover\\/20{background-color:#9e47ec33}.hover\\:bg-purple-500:hover\\/40{background-color:#9e47ec66}.hover\\:bg-purple-500:hover\\/70{background-color:#9e47ecb3}.hover\\:bg-purple-700:hover{background-color:#7919d0}.hover\\:bg-orange-50:hover{background-color:#ffefea}.hover\\:bg-orange-100:hover{background-color:#ffcfc0}.hover\\:bg-orange-200:hover{background-color:#ffb097}.hover\\:bg-orange-300:hover{background-color:#ff906d}.hover\\:bg-orange-500:hover{background-color:#ff7043}.hover\\:bg-orange-500:hover\\/20{background-color:#ff704333}.hover\\:bg-orange-500:hover\\/40{background-color:#ff704366}.hover\\:bg-orange-500:hover\\/70{background-color:#ff7043b3}.hover\\:bg-orange-700:hover{background-color:#e54715}.hover\\:bg-azure-50:hover{background-color:#e5f7fc}.hover\\:bg-azure-100:hover{background-color:#b2e6f7}.hover\\:bg-azure-200:hover{background-color:#80d6f1}.hover\\:bg-azure-300:hover{background-color:#4dc5eb}.hover\\:bg-azure-500:hover{background-color:#1ab5e6}.hover\\:bg-azure-500:hover\\/20{background-color:#1ab5e633}.hover\\:bg-azure-500:hover\\/40{background-color:#1ab5e666}.hover\\:bg-azure-500:hover\\/70{background-color:#1ab5e6b3}.hover\\:bg-azure-700:hover{background-color:#0093c9}.hover\\:bg-gold-50:hover{background-color:#faf3e6}.hover\\:bg-gold-100:hover{background-color:#efdcb4}.hover\\:bg-gold-200:hover{background-color:#e4c481}.hover\\:bg-gold-300:hover{background-color:#daad4f}.hover\\:bg-gold-500:hover{background-color:#cf961d}.hover\\:bg-gold-500:hover\\/20{background-color:#cf961d33}.hover\\:bg-gold-500:hover\\/40{background-color:#cf961d66}.hover\\:bg-gold-500:hover\\/70{background-color:#cf961db3}.hover\\:bg-gold-700:hover{background-color:#b07000}.hover\\:bg-brown-50:hover{background-color:#f1ede9}.hover\\:bg-brown-100:hover{background-color:#d6c9bd}.hover\\:bg-brown-200:hover{background-color:#bca691}.hover\\:bg-brown-300:hover{background-color:#a08266}.hover\\:bg-brown-500:hover{background-color:#865e3a}.hover\\:bg-brown-500:hover\\/20{background-color:#865e3a33}.hover\\:bg-brown-500:hover\\/40{background-color:#865e3a66}.hover\\:bg-brown-500:hover\\/70{background-color:#865e3ab3}.hover\\:bg-brown-700:hover{background-color:#5f330a}.hover\\:bg-navy-50:hover{background-color:#e7e7fa}.hover\\:bg-navy-100:hover{background-color:#b7b6f1}.hover\\:bg-navy-200:hover{background-color:#8785e8}.hover\\:bg-navy-300:hover{background-color:#5755df}.hover\\:bg-navy-500:hover{background-color:#2724d6}.hover\\:bg-navy-500:hover\\/20{background-color:#2724d633}.hover\\:bg-navy-500:hover\\/40{background-color:#2724d666}.hover\\:bg-navy-500:hover\\/70{background-color:#2724d6b3}.hover\\:bg-navy-700:hover{background-color:#0000b8}.hover\\:bg-lime-50:hover{background-color:#ecf6e7}.hover\\:bg-lime-100:hover{background-color:#c5e3b6}.hover\\:bg-lime-200:hover{background-color:#9ed186}.hover\\:bg-lime-300:hover{background-color:#77bf56}.hover\\:bg-lime-500:hover{background-color:#50ac25}.hover\\:bg-lime-500:hover\\/20{background-color:#50ac2533}.hover\\:bg-lime-500:hover\\/40{background-color:#50ac2566}.hover\\:bg-lime-500:hover\\/70{background-color:#50ac25b3}.hover\\:bg-lime-700:hover{background-color:#238900}.hover\\:bg-magenta-50:hover{background-color:#fbe9f1}.hover\\:bg-magenta-100:hover{background-color:#f4bed6}.hover\\:bg-magenta-200:hover{background-color:#ed93bb}.hover\\:bg-magenta-300:hover{background-color:#e668a0}.hover\\:bg-magenta-500:hover{background-color:#df3d85}.hover\\:bg-magenta-500:hover\\/20{background-color:#df3d8533}.hover\\:bg-magenta-500:hover\\/40{background-color:#df3d8566}.hover\\:bg-magenta-500:hover\\/70{background-color:#df3d85b3}.hover\\:bg-magenta-700:hover{background-color:#c10d5d}.focus\\:text-white-50:focus-visible{color:#fff}.focus\\:text-white-100:focus-visible{color:#f7f7f7}.focus\\:text-white-200:focus-visible{color:#eee}.focus\\:text-white-300:focus-visible{color:#e5e5e5}.focus\\:text-white-500:focus-visible{color:#dadada}.focus\\:text-white-500:focus-visible\\/20{color:#dadada33}.focus\\:text-white-500:focus-visible\\/40{color:#dadada66}.focus\\:text-white-500:focus-visible\\/70{color:#dadadab3}.focus\\:text-white-700:focus-visible{color:#ccc}.focus\\:text-black-50:focus-visible{color:#aaa}.focus\\:text-black-100:focus-visible{color:#919191}.focus\\:text-black-200:focus-visible{color:#6c6c6c}.focus\\:text-black-300:focus-visible{color:#424242}.focus\\:text-black-500:focus-visible{color:#2f2f2f}.focus\\:text-black-500:focus-visible\\/20{color:#2f2f2f33}.focus\\:text-black-500:focus-visible\\/40{color:#2f2f2f66}.focus\\:text-black-500:focus-visible\\/70{color:#2f2f2fb3}.focus\\:text-black-700:focus-visible{color:#1d1d1d}.focus\\:text-blue-50:focus-visible{color:#e9effd}.focus\\:text-blue-100:focus-visible{color:#bed0f9}.focus\\:text-blue-200:focus-visible{color:#92b1f5}.focus\\:text-blue-300:focus-visible{color:#6692f1}.focus\\:text-blue-500:focus-visible{color:#3b73ed}.focus\\:text-blue-500:focus-visible\\/20{color:#3b73ed33}.focus\\:text-blue-500:focus-visible\\/40{color:#3b73ed66}.focus\\:text-blue-500:focus-visible\\/70{color:#3b73edb3}.focus\\:text-blue-700:focus-visible{color:#0b49d1}.focus\\:text-blue-900:focus-visible{color:#00179e}.focus\\:text-red-50:focus-visible{color:#fbe9e9}.focus\\:text-red-100:focus-visible{color:#f4bebe}.focus\\:text-red-200:focus-visible{color:#ed9292}.focus\\:text-red-300:focus-visible{color:#e66767}.focus\\:text-red-500:focus-visible{color:#df3c3c}.focus\\:text-red-500:focus-visible\\/20{color:#df3c3c33}.focus\\:text-red-500:focus-visible\\/40{color:#df3c3c66}.focus\\:text-red-500:focus-visible\\/70{color:#df3c3cb3}.focus\\:text-red-700:focus-visible{color:#c20c0c}.focus\\:text-green-50:focus-visible{color:#e7f4f3}.focus\\:text-green-100:focus-visible{color:#b6dfdb}.focus\\:text-green-200:focus-visible{color:#86c9c3}.focus\\:text-green-300:focus-visible{color:#56b4ac}.focus\\:text-green-500:focus-visible{color:#259f94}.focus\\:text-green-500:focus-visible\\/20{color:#259f9433}.focus\\:text-green-500:focus-visible\\/40{color:#259f9466}.focus\\:text-green-500:focus-visible\\/70{color:#259f94b3}.focus\\:text-green-700:focus-visible{color:#007a6e}.focus\\:text-yellow-50:focus-visible{color:#fef4e8}.focus\\:text-yellow-100:focus-visible{color:#fddeb9}.focus\\:text-yellow-200:focus-visible{color:#fbc88b}.focus\\:text-yellow-300:focus-visible{color:#fab15c}.focus\\:text-yellow-500:focus-visible{color:#f89b2e}.focus\\:text-yellow-500:focus-visible\\/20{color:#f89b2e33}.focus\\:text-yellow-500:focus-visible\\/40{color:#f89b2e66}.focus\\:text-yellow-500:focus-visible\\/70{color:#f89b2eb3}.focus\\:text-yellow-700:focus-visible{color:#de7700}.focus\\:text-purple-50:focus-visible{color:#f4ebfd}.focus\\:text-purple-100:focus-visible{color:#dfc2f9}.focus\\:text-purple-200:focus-visible{color:#c999f4}.focus\\:text-purple-300:focus-visible{color:#b370f0}.focus\\:text-purple-500:focus-visible{color:#9e47ec}.focus\\:text-purple-500:focus-visible\\/20{color:#9e47ec33}.focus\\:text-purple-500:focus-visible\\/40{color:#9e47ec66}.focus\\:text-purple-500:focus-visible\\/70{color:#9e47ecb3}.focus\\:text-purple-700:focus-visible{color:#7919d0}.focus\\:text-orange-50:focus-visible{color:#ffefea}.focus\\:text-orange-100:focus-visible{color:#ffcfc0}.focus\\:text-orange-200:focus-visible{color:#ffb097}.focus\\:text-orange-300:focus-visible{color:#ff906d}.focus\\:text-orange-500:focus-visible{color:#ff7043}.focus\\:text-orange-500:focus-visible\\/20{color:#ff704333}.focus\\:text-orange-500:focus-visible\\/40{color:#ff704366}.focus\\:text-orange-500:focus-visible\\/70{color:#ff7043b3}.focus\\:text-orange-700:focus-visible{color:#e54715}.focus\\:text-azure-50:focus-visible{color:#e5f7fc}.focus\\:text-azure-100:focus-visible{color:#b2e6f7}.focus\\:text-azure-200:focus-visible{color:#80d6f1}.focus\\:text-azure-300:focus-visible{color:#4dc5eb}.focus\\:text-azure-500:focus-visible{color:#1ab5e6}.focus\\:text-azure-500:focus-visible\\/20{color:#1ab5e633}.focus\\:text-azure-500:focus-visible\\/40{color:#1ab5e666}.focus\\:text-azure-500:focus-visible\\/70{color:#1ab5e6b3}.focus\\:text-azure-700:focus-visible{color:#0093c9}.focus\\:text-gold-50:focus-visible{color:#faf3e6}.focus\\:text-gold-100:focus-visible{color:#efdcb4}.focus\\:text-gold-200:focus-visible{color:#e4c481}.focus\\:text-gold-300:focus-visible{color:#daad4f}.focus\\:text-gold-500:focus-visible{color:#cf961d}.focus\\:text-gold-500:focus-visible\\/20{color:#cf961d33}.focus\\:text-gold-500:focus-visible\\/40{color:#cf961d66}.focus\\:text-gold-500:focus-visible\\/70{color:#cf961db3}.focus\\:text-gold-700:focus-visible{color:#b07000}.focus\\:text-brown-50:focus-visible{color:#f1ede9}.focus\\:text-brown-100:focus-visible{color:#d6c9bd}.focus\\:text-brown-200:focus-visible{color:#bca691}.focus\\:text-brown-300:focus-visible{color:#a08266}.focus\\:text-brown-500:focus-visible{color:#865e3a}.focus\\:text-brown-500:focus-visible\\/20{color:#865e3a33}.focus\\:text-brown-500:focus-visible\\/40{color:#865e3a66}.focus\\:text-brown-500:focus-visible\\/70{color:#865e3ab3}.focus\\:text-brown-700:focus-visible{color:#5f330a}.focus\\:text-navy-50:focus-visible{color:#e7e7fa}.focus\\:text-navy-100:focus-visible{color:#b7b6f1}.focus\\:text-navy-200:focus-visible{color:#8785e8}.focus\\:text-navy-300:focus-visible{color:#5755df}.focus\\:text-navy-500:focus-visible{color:#2724d6}.focus\\:text-navy-500:focus-visible\\/20{color:#2724d633}.focus\\:text-navy-500:focus-visible\\/40{color:#2724d666}.focus\\:text-navy-500:focus-visible\\/70{color:#2724d6b3}.focus\\:text-navy-700:focus-visible{color:#0000b8}.focus\\:text-lime-50:focus-visible{color:#ecf6e7}.focus\\:text-lime-100:focus-visible{color:#c5e3b6}.focus\\:text-lime-200:focus-visible{color:#9ed186}.focus\\:text-lime-300:focus-visible{color:#77bf56}.focus\\:text-lime-500:focus-visible{color:#50ac25}.focus\\:text-lime-500:focus-visible\\/20{color:#50ac2533}.focus\\:text-lime-500:focus-visible\\/40{color:#50ac2566}.focus\\:text-lime-500:focus-visible\\/70{color:#50ac25b3}.focus\\:text-lime-700:focus-visible{color:#238900}.focus\\:text-magenta-50:focus-visible{color:#fbe9f1}.focus\\:text-magenta-100:focus-visible{color:#f4bed6}.focus\\:text-magenta-200:focus-visible{color:#ed93bb}.focus\\:text-magenta-300:focus-visible{color:#e668a0}.focus\\:text-magenta-500:focus-visible{color:#df3d85}.focus\\:text-magenta-500:focus-visible\\/20{color:#df3d8533}.focus\\:text-magenta-500:focus-visible\\/40{color:#df3d8566}.focus\\:text-magenta-500:focus-visible\\/70{color:#df3d85b3}.focus\\:text-magenta-700:focus-visible{color:#c10d5d}.focus\\:bg-white-50:focus-visible{background-color:#fff}.focus\\:bg-white-100:focus-visible{background-color:#f7f7f7}.focus\\:bg-white-200:focus-visible{background-color:#eee}.focus\\:bg-white-300:focus-visible{background-color:#e5e5e5}.focus\\:bg-white-500:focus-visible{background-color:#dadada}.focus\\:bg-white-500:focus-visible\\/20{background-color:#dadada33}.focus\\:bg-white-500:focus-visible\\/40{background-color:#dadada66}.focus\\:bg-white-500:focus-visible\\/70{background-color:#dadadab3}.focus\\:bg-white-700:focus-visible{background-color:#ccc}.focus\\:bg-black-50:focus-visible{background-color:#aaa}.focus\\:bg-black-100:focus-visible{background-color:#919191}.focus\\:bg-black-200:focus-visible{background-color:#6c6c6c}.focus\\:bg-black-300:focus-visible{background-color:#424242}.focus\\:bg-black-500:focus-visible{background-color:#2f2f2f}.focus\\:bg-black-500:focus-visible\\/20{background-color:#2f2f2f33}.focus\\:bg-black-500:focus-visible\\/40{background-color:#2f2f2f66}.focus\\:bg-black-500:focus-visible\\/70{background-color:#2f2f2fb3}.focus\\:bg-black-700:focus-visible{background-color:#1d1d1d}.focus\\:bg-blue-50:focus-visible{background-color:#e9effd}.focus\\:bg-blue-100:focus-visible{background-color:#bed0f9}.focus\\:bg-blue-200:focus-visible{background-color:#92b1f5}.focus\\:bg-blue-300:focus-visible{background-color:#6692f1}.focus\\:bg-blue-500:focus-visible{background-color:#3b73ed}.focus\\:bg-blue-500:focus-visible\\/20{background-color:#3b73ed33}.focus\\:bg-blue-500:focus-visible\\/40{background-color:#3b73ed66}.focus\\:bg-blue-500:focus-visible\\/70{background-color:#3b73edb3}.focus\\:bg-blue-700:focus-visible{background-color:#0b49d1}.focus\\:bg-blue-900:focus-visible{background-color:#00179e}.focus\\:bg-red-50:focus-visible{background-color:#fbe9e9}.focus\\:bg-red-100:focus-visible{background-color:#f4bebe}.focus\\:bg-red-200:focus-visible{background-color:#ed9292}.focus\\:bg-red-300:focus-visible{background-color:#e66767}.focus\\:bg-red-500:focus-visible{background-color:#df3c3c}.focus\\:bg-red-500:focus-visible\\/20{background-color:#df3c3c33}.focus\\:bg-red-500:focus-visible\\/40{background-color:#df3c3c66}.focus\\:bg-red-500:focus-visible\\/70{background-color:#df3c3cb3}.focus\\:bg-red-700:focus-visible{background-color:#c20c0c}.focus\\:bg-green-50:focus-visible{background-color:#e7f4f3}.focus\\:bg-green-100:focus-visible{background-color:#b6dfdb}.focus\\:bg-green-200:focus-visible{background-color:#86c9c3}.focus\\:bg-green-300:focus-visible{background-color:#56b4ac}.focus\\:bg-green-500:focus-visible{background-color:#259f94}.focus\\:bg-green-500:focus-visible\\/20{background-color:#259f9433}.focus\\:bg-green-500:focus-visible\\/40{background-color:#259f9466}.focus\\:bg-green-500:focus-visible\\/70{background-color:#259f94b3}.focus\\:bg-green-700:focus-visible{background-color:#007a6e}.focus\\:bg-yellow-50:focus-visible{background-color:#fef4e8}.focus\\:bg-yellow-100:focus-visible{background-color:#fddeb9}.focus\\:bg-yellow-200:focus-visible{background-color:#fbc88b}.focus\\:bg-yellow-300:focus-visible{background-color:#fab15c}.focus\\:bg-yellow-500:focus-visible{background-color:#f89b2e}.focus\\:bg-yellow-500:focus-visible\\/20{background-color:#f89b2e33}.focus\\:bg-yellow-500:focus-visible\\/40{background-color:#f89b2e66}.focus\\:bg-yellow-500:focus-visible\\/70{background-color:#f89b2eb3}.focus\\:bg-yellow-700:focus-visible{background-color:#de7700}.focus\\:bg-purple-50:focus-visible{background-color:#f4ebfd}.focus\\:bg-purple-100:focus-visible{background-color:#dfc2f9}.focus\\:bg-purple-200:focus-visible{background-color:#c999f4}.focus\\:bg-purple-300:focus-visible{background-color:#b370f0}.focus\\:bg-purple-500:focus-visible{background-color:#9e47ec}.focus\\:bg-purple-500:focus-visible\\/20{background-color:#9e47ec33}.focus\\:bg-purple-500:focus-visible\\/40{background-color:#9e47ec66}.focus\\:bg-purple-500:focus-visible\\/70{background-color:#9e47ecb3}.focus\\:bg-purple-700:focus-visible{background-color:#7919d0}.focus\\:bg-orange-50:focus-visible{background-color:#ffefea}.focus\\:bg-orange-100:focus-visible{background-color:#ffcfc0}.focus\\:bg-orange-200:focus-visible{background-color:#ffb097}.focus\\:bg-orange-300:focus-visible{background-color:#ff906d}.focus\\:bg-orange-500:focus-visible{background-color:#ff7043}.focus\\:bg-orange-500:focus-visible\\/20{background-color:#ff704333}.focus\\:bg-orange-500:focus-visible\\/40{background-color:#ff704366}.focus\\:bg-orange-500:focus-visible\\/70{background-color:#ff7043b3}.focus\\:bg-orange-700:focus-visible{background-color:#e54715}.focus\\:bg-azure-50:focus-visible{background-color:#e5f7fc}.focus\\:bg-azure-100:focus-visible{background-color:#b2e6f7}.focus\\:bg-azure-200:focus-visible{background-color:#80d6f1}.focus\\:bg-azure-300:focus-visible{background-color:#4dc5eb}.focus\\:bg-azure-500:focus-visible{background-color:#1ab5e6}.focus\\:bg-azure-500:focus-visible\\/20{background-color:#1ab5e633}.focus\\:bg-azure-500:focus-visible\\/40{background-color:#1ab5e666}.focus\\:bg-azure-500:focus-visible\\/70{background-color:#1ab5e6b3}.focus\\:bg-azure-700:focus-visible{background-color:#0093c9}.focus\\:bg-gold-50:focus-visible{background-color:#faf3e6}.focus\\:bg-gold-100:focus-visible{background-color:#efdcb4}.focus\\:bg-gold-200:focus-visible{background-color:#e4c481}.focus\\:bg-gold-300:focus-visible{background-color:#daad4f}.focus\\:bg-gold-500:focus-visible{background-color:#cf961d}.focus\\:bg-gold-500:focus-visible\\/20{background-color:#cf961d33}.focus\\:bg-gold-500:focus-visible\\/40{background-color:#cf961d66}.focus\\:bg-gold-500:focus-visible\\/70{background-color:#cf961db3}.focus\\:bg-gold-700:focus-visible{background-color:#b07000}.focus\\:bg-brown-50:focus-visible{background-color:#f1ede9}.focus\\:bg-brown-100:focus-visible{background-color:#d6c9bd}.focus\\:bg-brown-200:focus-visible{background-color:#bca691}.focus\\:bg-brown-300:focus-visible{background-color:#a08266}.focus\\:bg-brown-500:focus-visible{background-color:#865e3a}.focus\\:bg-brown-500:focus-visible\\/20{background-color:#865e3a33}.focus\\:bg-brown-500:focus-visible\\/40{background-color:#865e3a66}.focus\\:bg-brown-500:focus-visible\\/70{background-color:#865e3ab3}.focus\\:bg-brown-700:focus-visible{background-color:#5f330a}.focus\\:bg-navy-50:focus-visible{background-color:#e7e7fa}.focus\\:bg-navy-100:focus-visible{background-color:#b7b6f1}.focus\\:bg-navy-200:focus-visible{background-color:#8785e8}.focus\\:bg-navy-300:focus-visible{background-color:#5755df}.focus\\:bg-navy-500:focus-visible{background-color:#2724d6}.focus\\:bg-navy-500:focus-visible\\/20{background-color:#2724d633}.focus\\:bg-navy-500:focus-visible\\/40{background-color:#2724d666}.focus\\:bg-navy-500:focus-visible\\/70{background-color:#2724d6b3}.focus\\:bg-navy-700:focus-visible{background-color:#0000b8}.focus\\:bg-lime-50:focus-visible{background-color:#ecf6e7}.focus\\:bg-lime-100:focus-visible{background-color:#c5e3b6}.focus\\:bg-lime-200:focus-visible{background-color:#9ed186}.focus\\:bg-lime-300:focus-visible{background-color:#77bf56}.focus\\:bg-lime-500:focus-visible{background-color:#50ac25}.focus\\:bg-lime-500:focus-visible\\/20{background-color:#50ac2533}.focus\\:bg-lime-500:focus-visible\\/40{background-color:#50ac2566}.focus\\:bg-lime-500:focus-visible\\/70{background-color:#50ac25b3}.focus\\:bg-lime-700:focus-visible{background-color:#238900}.focus\\:bg-magenta-50:focus-visible{background-color:#fbe9f1}.focus\\:bg-magenta-100:focus-visible{background-color:#f4bed6}.focus\\:bg-magenta-200:focus-visible{background-color:#ed93bb}.focus\\:bg-magenta-300:focus-visible{background-color:#e668a0}.focus\\:bg-magenta-500:focus-visible{background-color:#df3d85}.focus\\:bg-magenta-500:focus-visible\\/20{background-color:#df3d8533}.focus\\:bg-magenta-500:focus-visible\\/40{background-color:#df3d8566}.focus\\:bg-magenta-500:focus-visible\\/70{background-color:#df3d85b3}.focus\\:bg-magenta-700:focus-visible{background-color:#c10d5d}.active\\:text-white-50:active{color:#fff}.active\\:text-white-100:active{color:#f7f7f7}.active\\:text-white-200:active{color:#eee}.active\\:text-white-300:active{color:#e5e5e5}.active\\:text-white-500:active{color:#dadada}.active\\:text-white-500:active\\/20{color:#dadada33}.active\\:text-white-500:active\\/40{color:#dadada66}.active\\:text-white-500:active\\/70{color:#dadadab3}.active\\:text-white-700:active{color:#ccc}.active\\:text-black-50:active{color:#aaa}.active\\:text-black-100:active{color:#919191}.active\\:text-black-200:active{color:#6c6c6c}.active\\:text-black-300:active{color:#424242}.active\\:text-black-500:active{color:#2f2f2f}.active\\:text-black-500:active\\/20{color:#2f2f2f33}.active\\:text-black-500:active\\/40{color:#2f2f2f66}.active\\:text-black-500:active\\/70{color:#2f2f2fb3}.active\\:text-black-700:active{color:#1d1d1d}.active\\:text-blue-50:active{color:#e9effd}.active\\:text-blue-100:active{color:#bed0f9}.active\\:text-blue-200:active{color:#92b1f5}.active\\:text-blue-300:active{color:#6692f1}.active\\:text-blue-500:active{color:#3b73ed}.active\\:text-blue-500:active\\/20{color:#3b73ed33}.active\\:text-blue-500:active\\/40{color:#3b73ed66}.active\\:text-blue-500:active\\/70{color:#3b73edb3}.active\\:text-blue-700:active{color:#0b49d1}.active\\:text-blue-900:active{color:#00179e}.active\\:text-red-50:active{color:#fbe9e9}.active\\:text-red-100:active{color:#f4bebe}.active\\:text-red-200:active{color:#ed9292}.active\\:text-red-300:active{color:#e66767}.active\\:text-red-500:active{color:#df3c3c}.active\\:text-red-500:active\\/20{color:#df3c3c33}.active\\:text-red-500:active\\/40{color:#df3c3c66}.active\\:text-red-500:active\\/70{color:#df3c3cb3}.active\\:text-red-700:active{color:#c20c0c}.active\\:text-green-50:active{color:#e7f4f3}.active\\:text-green-100:active{color:#b6dfdb}.active\\:text-green-200:active{color:#86c9c3}.active\\:text-green-300:active{color:#56b4ac}.active\\:text-green-500:active{color:#259f94}.active\\:text-green-500:active\\/20{color:#259f9433}.active\\:text-green-500:active\\/40{color:#259f9466}.active\\:text-green-500:active\\/70{color:#259f94b3}.active\\:text-green-700:active{color:#007a6e}.active\\:text-yellow-50:active{color:#fef4e8}.active\\:text-yellow-100:active{color:#fddeb9}.active\\:text-yellow-200:active{color:#fbc88b}.active\\:text-yellow-300:active{color:#fab15c}.active\\:text-yellow-500:active{color:#f89b2e}.active\\:text-yellow-500:active\\/20{color:#f89b2e33}.active\\:text-yellow-500:active\\/40{color:#f89b2e66}.active\\:text-yellow-500:active\\/70{color:#f89b2eb3}.active\\:text-yellow-700:active{color:#de7700}.active\\:text-purple-50:active{color:#f4ebfd}.active\\:text-purple-100:active{color:#dfc2f9}.active\\:text-purple-200:active{color:#c999f4}.active\\:text-purple-300:active{color:#b370f0}.active\\:text-purple-500:active{color:#9e47ec}.active\\:text-purple-500:active\\/20{color:#9e47ec33}.active\\:text-purple-500:active\\/40{color:#9e47ec66}.active\\:text-purple-500:active\\/70{color:#9e47ecb3}.active\\:text-purple-700:active{color:#7919d0}.active\\:text-orange-50:active{color:#ffefea}.active\\:text-orange-100:active{color:#ffcfc0}.active\\:text-orange-200:active{color:#ffb097}.active\\:text-orange-300:active{color:#ff906d}.active\\:text-orange-500:active{color:#ff7043}.active\\:text-orange-500:active\\/20{color:#ff704333}.active\\:text-orange-500:active\\/40{color:#ff704366}.active\\:text-orange-500:active\\/70{color:#ff7043b3}.active\\:text-orange-700:active{color:#e54715}.active\\:text-azure-50:active{color:#e5f7fc}.active\\:text-azure-100:active{color:#b2e6f7}.active\\:text-azure-200:active{color:#80d6f1}.active\\:text-azure-300:active{color:#4dc5eb}.active\\:text-azure-500:active{color:#1ab5e6}.active\\:text-azure-500:active\\/20{color:#1ab5e633}.active\\:text-azure-500:active\\/40{color:#1ab5e666}.active\\:text-azure-500:active\\/70{color:#1ab5e6b3}.active\\:text-azure-700:active{color:#0093c9}.active\\:text-gold-50:active{color:#faf3e6}.active\\:text-gold-100:active{color:#efdcb4}.active\\:text-gold-200:active{color:#e4c481}.active\\:text-gold-300:active{color:#daad4f}.active\\:text-gold-500:active{color:#cf961d}.active\\:text-gold-500:active\\/20{color:#cf961d33}.active\\:text-gold-500:active\\/40{color:#cf961d66}.active\\:text-gold-500:active\\/70{color:#cf961db3}.active\\:text-gold-700:active{color:#b07000}.active\\:text-brown-50:active{color:#f1ede9}.active\\:text-brown-100:active{color:#d6c9bd}.active\\:text-brown-200:active{color:#bca691}.active\\:text-brown-300:active{color:#a08266}.active\\:text-brown-500:active{color:#865e3a}.active\\:text-brown-500:active\\/20{color:#865e3a33}.active\\:text-brown-500:active\\/40{color:#865e3a66}.active\\:text-brown-500:active\\/70{color:#865e3ab3}.active\\:text-brown-700:active{color:#5f330a}.active\\:text-navy-50:active{color:#e7e7fa}.active\\:text-navy-100:active{color:#b7b6f1}.active\\:text-navy-200:active{color:#8785e8}.active\\:text-navy-300:active{color:#5755df}.active\\:text-navy-500:active{color:#2724d6}.active\\:text-navy-500:active\\/20{color:#2724d633}.active\\:text-navy-500:active\\/40{color:#2724d666}.active\\:text-navy-500:active\\/70{color:#2724d6b3}.active\\:text-navy-700:active{color:#0000b8}.active\\:text-lime-50:active{color:#ecf6e7}.active\\:text-lime-100:active{color:#c5e3b6}.active\\:text-lime-200:active{color:#9ed186}.active\\:text-lime-300:active{color:#77bf56}.active\\:text-lime-500:active{color:#50ac25}.active\\:text-lime-500:active\\/20{color:#50ac2533}.active\\:text-lime-500:active\\/40{color:#50ac2566}.active\\:text-lime-500:active\\/70{color:#50ac25b3}.active\\:text-lime-700:active{color:#238900}.active\\:text-magenta-50:active{color:#fbe9f1}.active\\:text-magenta-100:active{color:#f4bed6}.active\\:text-magenta-200:active{color:#ed93bb}.active\\:text-magenta-300:active{color:#e668a0}.active\\:text-magenta-500:active{color:#df3d85}.active\\:text-magenta-500:active\\/20{color:#df3d8533}.active\\:text-magenta-500:active\\/40{color:#df3d8566}.active\\:text-magenta-500:active\\/70{color:#df3d85b3}.active\\:text-magenta-700:active{color:#c10d5d}.active\\:bg-white-50:active{background-color:#fff}.active\\:bg-white-100:active{background-color:#f7f7f7}.active\\:bg-white-200:active{background-color:#eee}.active\\:bg-white-300:active{background-color:#e5e5e5}.active\\:bg-white-500:active{background-color:#dadada}.active\\:bg-white-500:active\\/20{background-color:#dadada33}.active\\:bg-white-500:active\\/40{background-color:#dadada66}.active\\:bg-white-500:active\\/70{background-color:#dadadab3}.active\\:bg-white-700:active{background-color:#ccc}.active\\:bg-black-50:active{background-color:#aaa}.active\\:bg-black-100:active{background-color:#919191}.active\\:bg-black-200:active{background-color:#6c6c6c}.active\\:bg-black-300:active{background-color:#424242}.active\\:bg-black-500:active{background-color:#2f2f2f}.active\\:bg-black-500:active\\/20{background-color:#2f2f2f33}.active\\:bg-black-500:active\\/40{background-color:#2f2f2f66}.active\\:bg-black-500:active\\/70{background-color:#2f2f2fb3}.active\\:bg-black-700:active{background-color:#1d1d1d}.active\\:bg-blue-50:active{background-color:#e9effd}.active\\:bg-blue-100:active{background-color:#bed0f9}.active\\:bg-blue-200:active{background-color:#92b1f5}.active\\:bg-blue-300:active{background-color:#6692f1}.active\\:bg-blue-500:active{background-color:#3b73ed}.active\\:bg-blue-500:active\\/20{background-color:#3b73ed33}.active\\:bg-blue-500:active\\/40{background-color:#3b73ed66}.active\\:bg-blue-500:active\\/70{background-color:#3b73edb3}.active\\:bg-blue-700:active{background-color:#0b49d1}.active\\:bg-blue-900:active{background-color:#00179e}.active\\:bg-red-50:active{background-color:#fbe9e9}.active\\:bg-red-100:active{background-color:#f4bebe}.active\\:bg-red-200:active{background-color:#ed9292}.active\\:bg-red-300:active{background-color:#e66767}.active\\:bg-red-500:active{background-color:#df3c3c}.active\\:bg-red-500:active\\/20{background-color:#df3c3c33}.active\\:bg-red-500:active\\/40{background-color:#df3c3c66}.active\\:bg-red-500:active\\/70{background-color:#df3c3cb3}.active\\:bg-red-700:active{background-color:#c20c0c}.active\\:bg-green-50:active{background-color:#e7f4f3}.active\\:bg-green-100:active{background-color:#b6dfdb}.active\\:bg-green-200:active{background-color:#86c9c3}.active\\:bg-green-300:active{background-color:#56b4ac}.active\\:bg-green-500:active{background-color:#259f94}.active\\:bg-green-500:active\\/20{background-color:#259f9433}.active\\:bg-green-500:active\\/40{background-color:#259f9466}.active\\:bg-green-500:active\\/70{background-color:#259f94b3}.active\\:bg-green-700:active{background-color:#007a6e}.active\\:bg-yellow-50:active{background-color:#fef4e8}.active\\:bg-yellow-100:active{background-color:#fddeb9}.active\\:bg-yellow-200:active{background-color:#fbc88b}.active\\:bg-yellow-300:active{background-color:#fab15c}.active\\:bg-yellow-500:active{background-color:#f89b2e}.active\\:bg-yellow-500:active\\/20{background-color:#f89b2e33}.active\\:bg-yellow-500:active\\/40{background-color:#f89b2e66}.active\\:bg-yellow-500:active\\/70{background-color:#f89b2eb3}.active\\:bg-yellow-700:active{background-color:#de7700}.active\\:bg-purple-50:active{background-color:#f4ebfd}.active\\:bg-purple-100:active{background-color:#dfc2f9}.active\\:bg-purple-200:active{background-color:#c999f4}.active\\:bg-purple-300:active{background-color:#b370f0}.active\\:bg-purple-500:active{background-color:#9e47ec}.active\\:bg-purple-500:active\\/20{background-color:#9e47ec33}.active\\:bg-purple-500:active\\/40{background-color:#9e47ec66}.active\\:bg-purple-500:active\\/70{background-color:#9e47ecb3}.active\\:bg-purple-700:active{background-color:#7919d0}.active\\:bg-orange-50:active{background-color:#ffefea}.active\\:bg-orange-100:active{background-color:#ffcfc0}.active\\:bg-orange-200:active{background-color:#ffb097}.active\\:bg-orange-300:active{background-color:#ff906d}.active\\:bg-orange-500:active{background-color:#ff7043}.active\\:bg-orange-500:active\\/20{background-color:#ff704333}.active\\:bg-orange-500:active\\/40{background-color:#ff704366}.active\\:bg-orange-500:active\\/70{background-color:#ff7043b3}.active\\:bg-orange-700:active{background-color:#e54715}.active\\:bg-azure-50:active{background-color:#e5f7fc}.active\\:bg-azure-100:active{background-color:#b2e6f7}.active\\:bg-azure-200:active{background-color:#80d6f1}.active\\:bg-azure-300:active{background-color:#4dc5eb}.active\\:bg-azure-500:active{background-color:#1ab5e6}.active\\:bg-azure-500:active\\/20{background-color:#1ab5e633}.active\\:bg-azure-500:active\\/40{background-color:#1ab5e666}.active\\:bg-azure-500:active\\/70{background-color:#1ab5e6b3}.active\\:bg-azure-700:active{background-color:#0093c9}.active\\:bg-gold-50:active{background-color:#faf3e6}.active\\:bg-gold-100:active{background-color:#efdcb4}.active\\:bg-gold-200:active{background-color:#e4c481}.active\\:bg-gold-300:active{background-color:#daad4f}.active\\:bg-gold-500:active{background-color:#cf961d}.active\\:bg-gold-500:active\\/20{background-color:#cf961d33}.active\\:bg-gold-500:active\\/40{background-color:#cf961d66}.active\\:bg-gold-500:active\\/70{background-color:#cf961db3}.active\\:bg-gold-700:active{background-color:#b07000}.active\\:bg-brown-50:active{background-color:#f1ede9}.active\\:bg-brown-100:active{background-color:#d6c9bd}.active\\:bg-brown-200:active{background-color:#bca691}.active\\:bg-brown-300:active{background-color:#a08266}.active\\:bg-brown-500:active{background-color:#865e3a}.active\\:bg-brown-500:active\\/20{background-color:#865e3a33}.active\\:bg-brown-500:active\\/40{background-color:#865e3a66}.active\\:bg-brown-500:active\\/70{background-color:#865e3ab3}.active\\:bg-brown-700:active{background-color:#5f330a}.active\\:bg-navy-50:active{background-color:#e7e7fa}.active\\:bg-navy-100:active{background-color:#b7b6f1}.active\\:bg-navy-200:active{background-color:#8785e8}.active\\:bg-navy-300:active{background-color:#5755df}.active\\:bg-navy-500:active{background-color:#2724d6}.active\\:bg-navy-500:active\\/20{background-color:#2724d633}.active\\:bg-navy-500:active\\/40{background-color:#2724d666}.active\\:bg-navy-500:active\\/70{background-color:#2724d6b3}.active\\:bg-navy-700:active{background-color:#0000b8}.active\\:bg-lime-50:active{background-color:#ecf6e7}.active\\:bg-lime-100:active{background-color:#c5e3b6}.active\\:bg-lime-200:active{background-color:#9ed186}.active\\:bg-lime-300:active{background-color:#77bf56}.active\\:bg-lime-500:active{background-color:#50ac25}.active\\:bg-lime-500:active\\/20{background-color:#50ac2533}.active\\:bg-lime-500:active\\/40{background-color:#50ac2566}.active\\:bg-lime-500:active\\/70{background-color:#50ac25b3}.active\\:bg-lime-700:active{background-color:#238900}.active\\:bg-magenta-50:active{background-color:#fbe9f1}.active\\:bg-magenta-100:active{background-color:#f4bed6}.active\\:bg-magenta-200:active{background-color:#ed93bb}.active\\:bg-magenta-300:active{background-color:#e668a0}.active\\:bg-magenta-500:active{background-color:#df3d85}.active\\:bg-magenta-500:active\\/20{background-color:#df3d8533}.active\\:bg-magenta-500:active\\/40{background-color:#df3d8566}.active\\:bg-magenta-500:active\\/70{background-color:#df3d85b3}.active\\:bg-magenta-700:active{background-color:#c10d5d}.transition{transition:all .2s ease-in-out}.disable-selection,.logo-container .logo-image,.cover-container .cover-image,.profile-rounded-image,.profile-square-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.drop-zone-container.has-logo{display:none}.largeContainer{position:relative;min-height:178px}.largeContainer .cropper-overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.logo-container{position:absolute;top:0;left:0;width:616px;height:214px;overflow:hidden}.logo-container .logo-image{width:100%;height:100%;z-index:1000}.logoVar{height:214px}.logoVar.hasCropper{height:240px!important}.logoVar.hasCropper .drop-zone-container{display:none!important}.logoVar .drop-zone-container .drop-zone,.logoVar .drop-zone-container .drop-zone-error{height:204px}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cover-container{width:267px;height:178px}.cover-container .cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.container.dragMode{position:fixed;position-anchor:--modal-body;left:anchor(left);top:anchor(top);height:anchor-size(--modal-body height)!important;width:anchor-size(--modal-body width)!important;display:flex;justify-content:center;align-items:center;gap:0;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .drop-zone-container{position:relative;width:100%;height:100%;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%;outline:none!important;margin:0!important;border:4px dashed #cccccc;border-color:#ccc}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container{position:relative}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document svg{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container ng-lottie{width:200px;height:200px;display:block}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.container.dragMode.onDragover .drop-zone-container .drop-zone{border-color:#ccc}.container.dragMode.dual-drop-mode .drop-zone-container{--dual-drop-border: 4px;--dual-drop-border-overlap: calc(var(--dual-drop-border) / 2);position:relative;display:block;overflow:hidden}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel{position:absolute;top:0;bottom:0;margin:0!important;width:calc(50% + var(--dual-drop-border-overlap));opacity:1;transition:width .25s ease,opacity .25s ease,z-index 0s}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .dual-drop-zone-title{position:absolute;top:10px;left:8px;margin:0;font-weight:800;font-size:18px;line-height:100%;letter-spacing:0}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-left{left:0;z-index:1}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-right{right:0;left:auto;z-index:1}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .drop-zone-focus-text{text-align:center}.container.dragMode.dual-drop-mode .drop-zone-container .dual-drop-zone-panel .drop-zone-focus-text .description{margin:8px auto 0;max-width:158px;font-weight:400;font-size:11px;line-height:14px;text-align:center}.container.dragMode.dual-drop-mode.dual-drop-focus-left .drop-zone-container .dual-drop-zone-left{width:calc(60% + var(--dual-drop-border-overlap));opacity:1;z-index:2}.container.dragMode.dual-drop-mode.dual-drop-focus-left .drop-zone-container .dual-drop-zone-right{width:calc(40% + var(--dual-drop-border-overlap));opacity:.4;z-index:1}.container.dragMode.dual-drop-mode.dual-drop-focus-right .drop-zone-container .dual-drop-zone-right{width:calc(60% + var(--dual-drop-border-overlap));opacity:1;z-index:2}.container.dragMode.dual-drop-mode.dual-drop-focus-right .drop-zone-container .dual-drop-zone-left{width:calc(40% + var(--dual-drop-border-overlap));opacity:.4;z-index:1}.is-documents-mode .dragMode{height:120px!important}.dragModeDocuments .drop-zone-container .drop-zone{background-color:#fff!important}.dragModeDocuments .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.drop-zone-dimensions-lock{width:var(--drag-lock-width);height:var(--drag-lock-height)}.is-details-slider{width:100%!important;height:100%!important;overflow:hidden}.is-details-slider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important;margin-top:12px!important;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.is-details-slider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;cursor:pointer!important;transition:width .2s ease-in-out,background-color .2s ease-in-out}.is-details-slider .sliders .slider-item.active{width:20px;background-color:#919191}.is-details-slider .drop-zone-container{display:none!important}.is-details-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-details-slider .docs .carousel-button{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-details-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-details-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.is-details-slider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;flex-shrink:0!important;gap:0!important;position:relative!important;transition:transform .3s ease-out}.is-details-slider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;justify-content:center!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.is-details-slider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.is-details-slider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.is-details-slider .carousel-button{position:absolute!important;top:45%!important}.is-details-slider:hover .sliders{opacity:1;pointer-events:auto}.is-drawer-mode,.is-card-slider{width:100%!important;position:relative!important;max-width:100%!important}.is-drawer-mode .drop-zone-container,.is-card-slider .drop-zone-container{display:none!important}.is-drawer-mode .skeleton-container.drawer-position,.is-card-slider .skeleton-container.drawer-position{width:100%!important;position:relative!important;overflow:hidden!important;display:flex;align-items:center;gap:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item,.is-card-slider .skeleton-container.drawer-position .skeleton-item{width:194px;height:194px;flex:0 0 194px;border-radius:2px;padding:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item .skeleton-bar,.is-card-slider .skeleton-container.drawer-position .skeleton-item .skeleton-bar{width:100%;height:100%;background-color:#fff}.is-drawer-mode .docs,.is-card-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-drawer-mode .docs .doc-container,.is-card-slider .docs .doc-container{display:flex;width:auto!important;height:auto!important;gap:4px!important;transition:transform .3s ease-out}.is-drawer-mode .docs .doc-container .doc,.is-card-slider .docs .doc-container .doc{width:194px!important;height:194px!important;flex:0 0 194px!important;background-color:transparent!important}.is-drawer-mode .carousel-button.carousel-right,.is-card-slider .carousel-button.carousel-right{right:4px!important;position:absolute!important}.is-drawer-mode .carousel-button.carousel-left,.is-card-slider .carousel-button.carousel-left{left:4px!important;position:absolute!important}.is-drawer-mode{padding:4px!important;position:absolute!important}.is-card-slider{padding:4px 0!important;height:auto!important;box-sizing:border-box!important}.is-card-slider .docs{max-width:590px!important;height:194px!important}.is-card-slider .carousel-button{top:50%!important;transform:translateY(-50%)!important;opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-card-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-card-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.isCoverDetails{width:100%!important;height:100%!important}.isCoverDetails .drop-zone-container{display:none!important}.isCoverDetails .docs{width:100%!important}.isCoverDetails .docs .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;display:block!important;background-color:transparent!important}.more-docs{width:148px;flex:0 0 148px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs{width:148px!important}.small-more-docs .illustration,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text{padding:0 12px}.unsupported .drop-zone-text .heading.invalid{line-height:18px}.unsupported .drop-zone-text .subtext{line-height:14px;margin-bottom:0}.unsupported .cancel-button .cancel-icon{width:18px!important;height:18px!important}.unsupported .cancel-button-documents{display:none}.max-reached,.max-reached-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-media .drop-zone{padding:13px 0!important;flex-direction:column}.invalid-file-size .drop-zone .illustration{display:none!important}.invalid-file-size .drop-zone .drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:2px;right:2px;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.drop-zone-error .file-types{display:flex;align-items:center;gap:2px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.drop-zone-error .badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;width:35px;border-radius:1px;margin-bottom:0;text-align:center;background-color:#919191}.drop-zone-error .pdf{background-color:#e66767}.drop-zone-error .video{background-color:#b370f0}.drop-zone-error .image{background-color:#fab15c}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ['containerRef', { isSignal: true }] }], cropper: [{ type: i0.ViewChild, args: ['cropper', { isSignal: true }] }], docsViewport: [{ type: i0.ViewChild, args: ['docsViewport', { isSignal: true }] }], dropZoneContainer: [{ type: i0.ViewChild, args: ['dropZoneContainer', { isSignal: true }] }], inputRange: [{ type: i0.ViewChild, args: ['inputRange', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], avatarColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarColor", required: false }] }], crop: [{ type: i0.Input, args: [{ isSignal: true, alias: "crop", required: false }] }], deletedFileIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletedFileIds", required: false }] }], documentsDropZoneOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentsDropZoneOpen", required: false }] }], documentTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentTags", required: false }] }], dualDropZones: [{ type: i0.Input, args: [{ isSignal: true, alias: "dualDropZones", required: false }] }], excludedFileTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFileTypes", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], fileTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileTypes", required: false }] }], isCardSlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCardSlider", required: false }] }], isCoverDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCoverDetails", required: false }] }], isDetailsSlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDetailsSlider", required: false }] }], isDocumentsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDocumentsMode", required: false }] }], isDrawerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDrawerMode", required: false }] }], isDualDropZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDualDropZone", required: false }] }], maxCountFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCountFiles", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], parentForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentForm", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], onCropPendingChange: [{ type: i0.Output, args: ["onCropPendingChange"] }], onDeletedFileIds: [{ type: i0.Output, args: ["onDeletedFileIds"] }], onDocsChange: [{ type: i0.Output, args: ["onDocsChange"] }], onDocumentDropZoneOpenChange: [{ type: i0.Output, args: ["onDocumentDropZoneOpenChange"] }], onDocumentFileNameChange: [{ type: i0.Output, args: ["onDocumentFileNameChange"] }], onDocumentPreviewClick: [{ type: i0.Output, args: ["onDocumentPreviewClick"] }], onDualDropChange: [{ type: i0.Output, args: ["onDualDropChange"] }] } });
 
 const supportedFileTypes = [
     'mp4',
@@ -11872,5 +11875,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, CaScrollableComponent, CaiInputDatetimePickerComponent, CopyComponent, CounterComponent, DEFAULT_CROP_ZOOM, DEFAULT_DUAL_DROP_ZONES, DOCS_OR_MEDIA_VARIANTS, DOCUMENT_THUMBNAIL_FALLBACK, DUAL_DROP_TARGETS, DispatchDropdownComponent, DispatchLocationComponent, 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, StickyScrollbarComponent, THUMBNAIL_MIME, THUMBNAIL_QUALITY, THUMBNAIL_WIDTH, TabOptionDropdownComponent, TextAreaComponent, VIDEO_THUMBNAIL_FALLBACK, VIDEO_THUMBNAIL_TIMEOUT_MS, eScrollState, ignoreWhenAutofilled, sizes };
+export { AvatarComponent, CaScrollableComponent, CaiInputDatetimePickerComponent, CopyComponent, CounterComponent, DEFAULT_CROP_ZOOM, DEFAULT_DUAL_DROP_ZONES, DOCS_OR_MEDIA_VARIANTS, DOCUMENT_THUMBNAIL_FALLBACK, DROP_ZONE_CARD_SLIDER, DROP_ZONE_CARD_SLIDER_ITEM_WITH_GAP_PX, DUAL_DROP_TARGETS, DispatchDropdownComponent, DispatchLocationComponent, 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, StickyScrollbarComponent, THUMBNAIL_MIME, THUMBNAIL_QUALITY, THUMBNAIL_WIDTH, TabOptionDropdownComponent, TextAreaComponent, VIDEO_THUMBNAIL_FALLBACK, VIDEO_THUMBNAIL_TIMEOUT_MS, eScrollState, ignoreWhenAutofilled, sizes };
 //# sourceMappingURL=carriera-intern.mjs.map