diff --git a/src/app/components/autocomplete/autocomplete.css b/src/app/components/autocomplete/autocomplete.css
index 69044565e90..7d19db1f85c 100755
--- a/src/app/components/autocomplete/autocomplete.css
+++ b/src/app/components/autocomplete/autocomplete.css
@@ -94,3 +94,14 @@
 .p-fluid .p-autocomplete-dd .p-autocomplete-input {
     width: 1%;
 }
+
+.p-autocomplete-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-autocomplete-clearable {
+    position: relative;
+} 
diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
index 3fa30f337fd..935b11f7417 100755
--- a/src/app/components/autocomplete/autocomplete.ts
+++ b/src/app/components/autocomplete/autocomplete.ts
@@ -23,8 +23,10 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
             <input *ngIf="!multiple" #in [attr.type]="type" [attr.id]="inputId" [ngStyle]="inputStyle" [class]="inputStyleClass" [autocomplete]="autocomplete" [attr.required]="required" [attr.name]="name"
             class="p-autocomplete-input p-inputtext p-component" [ngClass]="{'p-autocomplete-dd-input':dropdown,'p-disabled': disabled}" [value]="inputFieldValue" aria-autocomplete="list" role="searchbox"
             (click)="onInputClick($event)" (input)="onInput($event)" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)" [attr.autofocus]="autofocus" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (change)="onInputChange($event)" (paste)="onInputPaste($event)"
-            [attr.placeholder]="placeholder" [attr.size]="size" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [readonly]="readonly" [disabled]="disabled" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-required]="required"
-            ><ul *ngIf="multiple" #multiContainer class="p-autocomplete-multiple-container p-component p-inputtext" [ngClass]="{'p-disabled':disabled,'p-focus':focus}" (click)="multiIn.focus()">
+            [attr.placeholder]="placeholder" [attr.size]="size" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [readonly]="readonly" [disabled]="disabled" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-required]="required">
+            <i *ngIf="!multiple && inputValue && filled && !disabled && showClear" class="p-autocomplete-clear-icon pi pi-times" [style.left]="dropdown ? '72%' : ''"  (click)="clear()"></i>
+            <i *ngIf="multiple && value && filled && !disabled && showClear" class="p-autocomplete-clear-icon pi pi-times" [style.left]="dropdown ? '72%' : ''" (click)="clear()"></i>
+            <ul *ngIf="multiple" #multiContainer class="p-autocomplete-multiple-container p-component p-inputtext" [ngClass]="{'p-disabled':disabled,'p-focus':focus}" (click)="multiIn.focus()">
                 <li #token *ngFor="let val of value" class="p-autocomplete-token">
                     <ng-container *ngTemplateOutlet="selectedItemTemplate; context: {$implicit: val}"></ng-container>
                     <span *ngIf="!selectedItemTemplate" class="p-autocomplete-token-label">{{resolveFieldData(val)}}</span>
@@ -98,7 +100,8 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': '(focus && !disabled) || overlayVisible'
+        '[class.p-inputwrapper-focus]': '(focus && !disabled) || overlayVisible',
+        '[class.p-autocomplete-clearable]': 'showClear && !disabled'
     },
     providers: [AUTOCOMPLETE_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -169,6 +172,8 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
 
     @Input() completeOnFocus: boolean = false;
 
+    @Input() showClear: boolean = true;
+
     @Output() completeMethod: EventEmitter<any> = new EventEmitter();
 
     @Output() onSelect: EventEmitter<any> = new EventEmitter();
@@ -297,6 +302,8 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
 
     virtualScrollSelectedIndex: number;
 
+    inputValue: string = null;
+
     constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public differs: IterableDiffers, public config: PrimeNGConfig, public overlayService: OverlayService) {
         this.differ = differs.find([]).create(null);
         this.listId = UniqueComponentId() + '_list';
@@ -452,6 +459,7 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
         }
 
         let value = (<HTMLInputElement> event.target).value;
+        this.inputValue = value;
         if (!this.multiple && !this.forceSelection) {
             this.onModelChange(value);
         }
@@ -535,6 +543,18 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
         }
     }
 
+    clear() {
+        if(this.multiple) {
+            this.value = null;
+
+        } else {
+            this.inputValue = null;
+            this.inputEL.nativeElement.value = '';
+        }
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
+
     onOverlayAnimationStart(event: AnimationEvent) {
         switch (event.toState) {
             case 'visible':
diff --git a/src/app/components/calendar/calendar.css b/src/app/components/calendar/calendar.css
index 2074fff8e68..051d3b39dd8 100755
--- a/src/app/components/calendar/calendar.css
+++ b/src/app/components/calendar/calendar.css
@@ -158,3 +158,14 @@
     overflow: hidden;
     position: relative;
 }
+
+.p-calendar-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-calendar-clearable {
+    position: relative;
+} 
diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
index 2963cd35529..65fb21c487e 100755
--- a/src/app/components/calendar/calendar.ts
+++ b/src/app/components/calendar/calendar.ts
@@ -36,8 +36,9 @@ export interface LocaleSettings {
             <ng-template [ngIf]="!inline">
                 <input #inputfield type="text" [attr.id]="inputId" [attr.name]="name" [attr.required]="required" [attr.aria-required]="required" [value]="inputFieldValue" (focus)="onInputFocus($event)" (keydown)="onInputKeydown($event)" (click)="onInputClick()" (blur)="onInputBlur($event)"
                     [readonly]="readonlyInput" (input)="onUserInput($event)" [ngStyle]="inputStyle" [class]="inputStyleClass" [placeholder]="placeholder||''" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.inputmode]="touchUI ? 'off' : null"
-                    [ngClass]="'p-inputtext p-component'" autocomplete="off" [attr.aria-labelledby]="ariaLabelledBy"
-                    ><button type="button" [attr.aria-label]="iconAriaLabel" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event,inputfield)" class="p-datepicker-trigger"
+                    [ngClass]="'p-inputtext p-component'" autocomplete="off" [attr.aria-labelledby]="ariaLabelledBy">
+                    <i *ngIf="showClear && !disabled && value != null" [style.right]="showIcon ? '14%' : ''" class="p-calendar-clear-icon pi pi-times" (click)="clear()"></i>
+                    <button type="button" [attr.aria-label]="iconAriaLabel" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event,inputfield)" class="p-datepicker-trigger"
                     [disabled]="disabled" tabindex="0"></button>
             </ng-template>
             <div #contentWrapper [class]="panelStyleClass" [ngStyle]="panelStyle" [ngClass]="{'p-datepicker p-component': true, 'p-datepicker-inline':inline,
@@ -197,7 +198,8 @@ export interface LocaleSettings {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focus'
+        '[class.p-inputwrapper-focus]': 'focus',
+        '[class.p-calendar-clearable]': 'showClear && !disabled'
     },
     providers: [CALENDAR_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -270,6 +272,8 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     @Input() showWeek: boolean = false;
 
+    @Input() showClear: boolean = true;
+
     @Input() dataType: string = 'date';
 
     @Input() selectionMode: string = 'single';
@@ -312,6 +316,8 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     @Output() onSelect: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     @Output() onInput: EventEmitter<any> = new EventEmitter();
 
     @Output() onTodayClick: EventEmitter<any> = new EventEmitter();
@@ -1391,6 +1397,13 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
         }
     }
 
+    clear() {
+        this.inputFieldValue = null;
+        this.value = null;
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
+
     onOverlayClick(event) {
         this.overlayService.add({
             originalEvent: event,
@@ -1404,7 +1417,7 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     getYear(month) {
         return this.currentView === 'month' ? this.currentYear : month.year;
-     }
+    }
 
     switchViewButtonDisabled() {
         return this.numberOfMonths > 1 || this.disabled;
diff --git a/src/app/components/cascadeselect/cascadeselect.css b/src/app/components/cascadeselect/cascadeselect.css
index 07d33564355..31f806659e8 100644
--- a/src/app/components/cascadeselect/cascadeselect.css
+++ b/src/app/components/cascadeselect/cascadeselect.css
@@ -84,3 +84,15 @@
     left: 100%;
     top: 0;
 }
+
+.p-cascadeselect-clear-icon {
+    position: absolute;
+    top: 50%;
+    right: 18%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-cascadeselect-clearable {
+    position: relative;
+} 
\ No newline at end of file
diff --git a/src/app/components/cascadeselect/cascadeselect.ts b/src/app/components/cascadeselect/cascadeselect.ts
index 1b04d72ea0d..144940a8977 100755
--- a/src/app/components/cascadeselect/cascadeselect.ts
+++ b/src/app/components/cascadeselect/cascadeselect.ts
@@ -258,6 +258,7 @@ export class CascadeSelectSub implements OnInit {
                 </ng-template>
             </span>
             <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
+            <i *ngIf="!optionCleared && filled && !disabled && showClear" class="p-cascadeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
                 <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
             </div>
             <div class="p-cascadeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
@@ -286,7 +287,8 @@ export class CascadeSelectSub implements OnInit {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
+        '[class.p-inputwrapper-focus]': 'focused || overlayVisible',
+        '[class.p-autocomplete-clearable]': 'showClear && !disabled'
     },
     providers: [CASCADESELECT_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -335,6 +337,8 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
 
     @Input() hideTransitionOptions: string = '.1s linear';
 
+    @Input() showClear: boolean = true;
+
     @ViewChild('focusInput') focusInputEl: ElementRef;
 
     @ViewChild('container') containerEl: ElementRef;
@@ -347,6 +351,8 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
 
     @Output() onHide: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     @Output() onBeforeShow: EventEmitter<any> = new EventEmitter();
 
     @Output() onBeforeHide: EventEmitter<any> = new EventEmitter();
@@ -355,6 +361,8 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
 
     selectionPath: any = null;
 
+    optionCleared: boolean = false;
+
     focused: boolean = false;
 
     filled: boolean = false;
@@ -476,6 +484,16 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
         this.cd.markForCheck();
     }
 
+    clear(event) {
+        this.optionCleared = true;
+        this.value = null;
+        this.selectionPath = null;
+        this.onClear.emit();
+        this.onModelChange(this.value);
+        event.stopPropagation();
+        this.cd.markForCheck();
+    }
+
     onClick(event) {
         if (this.disabled) {
             return;
@@ -646,7 +664,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
     }
 
     label   () {
-        if (this.selectionPath)
+        if (this.selectionPath && !this.optionCleared)
             return this.getOptionLabel(this.selectionPath[this.selectionPath.length - 1]);
         else
             return this.placeholder||'p-emptylabel';
diff --git a/src/app/components/chips/chips.css b/src/app/components/chips/chips.css
index 809b9a85206..82a600ea7e4 100755
--- a/src/app/components/chips/chips.css
+++ b/src/app/components/chips/chips.css
@@ -42,4 +42,16 @@
 
 .p-fluid .p-chips {
     display: flex;
-}
\ No newline at end of file
+}
+
+.p-chips-clear-icon {
+    position: absolute;
+    top: 50%;
+    right: 1%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-chips-clearable {
+    position: relative;
+} 
\ No newline at end of file
diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts
index b218bfdfa0e..efc493f7f24 100755
--- a/src/app/components/chips/chips.ts
+++ b/src/app/components/chips/chips.ts
@@ -20,7 +20,8 @@ export const CHIPS_VALUE_ACCESSOR: any = {
                     <span *ngIf="!itemTemplate" class="p-chips-token-label">{{field ? resolveFieldData(item,field) : item}}</span>
                     <span *ngIf="!disabled" class="p-chips-token-icon pi pi-times-circle" (click)="removeItem($event,i)"></span>
                 </li>
-                <li class="p-chips-input-token">
+                <li class="p-chips-input-token" [ngClass]="{'p-chips-clearable': showClear && !disabled}">
+                <i *ngIf="value != null && filled && !disabled && showClear" class="p-chips-clear-icon pi pi-times" (click)="clear()"></i>
                     <input #inputtext type="text" [attr.id]="inputId" [attr.placeholder]="(value && value.length ? null : placeholder)" [attr.tabindex]="tabindex" (keydown)="onKeydown($event)"
                     (input)="onInput()" (paste)="onPaste($event)" [attr.aria-labelledby]="ariaLabelledBy" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" [disabled]="disabled" [ngStyle]="inputStyle" [class]="inputStyleClass">
                 </li>
@@ -68,6 +69,8 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
     @Input() addOnBlur: boolean;
 
     @Input() separator: string;
+    
+    @Input() showClear: boolean = true;
 
     @Output() onAdd: EventEmitter<any> = new EventEmitter();
 
@@ -79,6 +82,8 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
 
     @Output() onChipClick: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     @ViewChild('inputtext') inputViewChild: ElementRef;
 
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
@@ -243,6 +248,13 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
         }
     }
 
+    clear() {
+        this.value = null;
+        this.updateFilledState();
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
+
     onKeydown(event: KeyboardEvent): void {
         switch(event.which) {
             //backspace
diff --git a/src/app/components/inputnumber/inputnumber.css b/src/app/components/inputnumber/inputnumber.css
index f9c6ad56058..d30f247799a 100755
--- a/src/app/components/inputnumber/inputnumber.css
+++ b/src/app/components/inputnumber/inputnumber.css
@@ -100,3 +100,14 @@ p-inputnumber,
 .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
     width: 100%;
 }
+
+.p-inputnumber-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-inputnumber-clearable {
+    position: relative;
+}
diff --git a/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts
index 971d30f48db..02b1dab37f7 100755
--- a/src/app/components/inputnumber/inputnumber.ts
+++ b/src/app/components/inputnumber/inputnumber.ts
@@ -21,6 +21,7 @@ export const INPUTNUMBER_VALUE_ACCESSOR: any = {
                 [attr.aria-required]="ariaRequired" [disabled]="disabled" [attr.required]="required" [attr.min]="min" [attr.max]="max" [readonly]="readonly" inputmode="decimal"
                 (input)="onUserInput($event)" (keydown)="onInputKeyDown($event)" (keypress)="onInputKeyPress($event)" (paste)="onPaste($event)" (click)="onInputClick()"
                 (focus)="onInputFocus($event)" (blur)="onInputBlur($event)">
+            <i *ngIf="buttonLayout != 'vertical' && showClear && value" class="p-inputnumber-clear-icon pi pi-times" [style.right]="showButtons ? '10%' : '2%'" (click)="clear()"></i>
             <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'">
                 <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-up': true}" [class]="incrementButtonClass" [icon]="incrementButtonIcon" [disabled]="disabled"
                     (mousedown)="this.onUpButtonMouseDown($event)" (mouseup)="onUpButtonMouseUp()" (mouseleave)="onUpButtonMouseLeave()" (keydown)="onUpButtonKeyDown($event)" (keyup)="onUpButtonKeyUp()"></button>
@@ -40,7 +41,8 @@ export const INPUTNUMBER_VALUE_ACCESSOR: any = {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focused'
+        '[class.p-inputwrapper-focus]': 'focused',
+        '[class.p-inputnumber-clearable]': 'showClear && buttonLayout != vertical'
     }
 })
 export class InputNumber implements OnInit,ControlValueAccessor {
@@ -119,6 +121,8 @@ export class InputNumber implements OnInit,ControlValueAccessor {
 
     @Input() inputStyleClass: string;
 
+    @Input() showClear: boolean = true;
+
     @ViewChild('input') input: ElementRef;
 
     @Output() onInput: EventEmitter<any> = new EventEmitter();
@@ -129,6 +133,8 @@ export class InputNumber implements OnInit,ControlValueAccessor {
 
     @Output() onKeyDown: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     value: number;
 
     onModelChange: Function = () => {};
@@ -365,6 +371,12 @@ export class InputNumber implements OnInit,ControlValueAccessor {
         this.handleOnInput(event, currentValue, newValue);
     }
 
+    clear() {
+        this.value = null;
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
+
     onUpButtonMouseDown(event) {
         this.input.nativeElement.focus();
         this.repeat(event, null, 1);
diff --git a/src/app/components/multiselect/multiselect.css b/src/app/components/multiselect/multiselect.css
index ce1322c50b5..3ab905f182e 100755
--- a/src/app/components/multiselect/multiselect.css
+++ b/src/app/components/multiselect/multiselect.css
@@ -105,3 +105,14 @@
 .p-fluid .p-multiselect {
     display: flex;
 }
+
+.p-multiselect-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-multiselect-clearable {
+    position: relative;
+} 
diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
index aa1e13bc845..792e5d3a1fe 100755
--- a/src/app/components/multiselect/multiselect.ts
+++ b/src/app/components/multiselect/multiselect.ts
@@ -97,6 +97,7 @@ export class MultiSelectItem {
                     </ng-container>
                     <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: {$implicit: value}"></ng-container>
                 </div>
+                <i *ngIf="value != null && filled && !disabled && showClear" class="p-multiselect-clear-icon pi pi-times" (click)="clear($event)"></i>
             </div>
             <div [ngClass]="{'p-multiselect-trigger':true}">
                 <span class="p-multiselect-trigger-icon" [ngClass]="dropdownIcon"></span>
@@ -187,7 +188,8 @@ export class MultiSelectItem {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focus || overlayVisible'
+        '[class.p-inputwrapper-focus]': 'focus || overlayVisible',
+        '[class.p-multiselect-clearable]': 'showClear && !disabled'
     },
     providers: [MULTISELECT_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -294,6 +296,8 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
 
     @Input() autocomplete: string = 'on';
 
+    @Input() showClear: boolean = true;
+
     @ViewChild('container') containerViewChild: ElementRef;
 
     @ViewChild('filterInput') filterInputChild: ElementRef;
@@ -316,6 +320,8 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
 
     @Output() onClick: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     @Output() onPanelShow: EventEmitter<any> = new EventEmitter();
 
     @Output() onPanelHide: EventEmitter<any> = new EventEmitter();
@@ -761,6 +767,15 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
         event.stopPropagation();
     }
 
+    clear(event) {
+        this.value = null;
+        this.updateLabel();
+        this.updateFilledState();
+        this.onClear.emit();
+        this.onModelChange(this.value);
+        event.stopPropagation();
+    }
+
     onMouseclick(event: MouseEvent, input) {
         if (this.disabled || this.readonly || (<Node> event.target).isSameNode(this.accessibleViewChild.nativeElement)) {
             return;
diff --git a/src/app/components/password/password.css b/src/app/components/password/password.css
index 182dab592bb..068cf3f07eb 100755
--- a/src/app/components/password/password.css
+++ b/src/app/components/password/password.css
@@ -26,3 +26,14 @@
 .p-fluid .p-password {
     display: flex;
 }
+
+.p-password-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-password-clearable {
+    position: relative;
+}
diff --git a/src/app/components/password/password.ts b/src/app/components/password/password.ts
index 546448666eb..163d5155b95 100755
--- a/src/app/components/password/password.ts
+++ b/src/app/components/password/password.ts
@@ -251,6 +251,7 @@ export const Password_VALUE_ACCESSOR: any = {
         <div [ngClass]="containerClass()" [ngStyle]="style" [class]="styleClass">
             <input #input [attr.label]="label" [attr.aria-label]="ariaLabel" [attr.aria-labelledBy]="ariaLabelledBy" [attr.id]="inputId" pInputText [ngClass]="inputFieldClass()" [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.type]="inputType()" [attr.placeholder]="placeholder" [value]="value" (input)="onInput($event)" (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" />
+            <i *ngIf="showClear && value != null" class="p-password-clear-icon pi pi-times" [style.right]="toggleMask ? '15%' : '4%'" (click)="clear()"></i>
             <i *ngIf="toggleMask" [ngClass]="toggleIconClass()" (click)="onMaskToggle()"></i>
             <div #overlay *ngIf="overlayVisible" [ngClass]="'p-password-panel p-component'" (click)="onOverlayClick($event)"
                 [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onAnimationStart($event)" (@overlayAnimation.done)="onAnimationEnd($event)">
@@ -282,7 +283,8 @@ export const Password_VALUE_ACCESSOR: any = {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled()',
-        '[class.p-inputwrapper-focus]': 'focused'
+        '[class.p-inputwrapper-focus]': 'focused',
+        '[class.p-password-clearable]': 'showClear'
     },
     providers: [Password_VALUE_ACCESSOR],
     styleUrls: ['./password.css'],
@@ -333,12 +335,16 @@ export class Password implements AfterContentInit,OnInit {
 
     @Input() placeholder: string;
 
+    @Input() showClear: boolean = true;
+    
     @ViewChild('input') input: ElementRef;
 
     @Output() onFocus: EventEmitter<any> = new EventEmitter();
 
     @Output() onBlur: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     contentTemplate: TemplateRef<any>;
 
     footerTemplate: TemplateRef<any>;
@@ -684,6 +690,13 @@ export class Password implements AfterContentInit,OnInit {
         return this.config.getTranslation(option);
     }
 
+    clear() {
+        this.value = null;
+        this.onModelChange(this.value);
+        this.writeValue(this.value);
+        this.onClear.emit();
+    }
+
     ngOnDestroy() {
         if (this.overlay) {
             ZIndexUtils.clear(this.overlay);
diff --git a/src/app/components/treeselect/treeselect.css b/src/app/components/treeselect/treeselect.css
index b33153f5f46..5b88f952c97 100755
--- a/src/app/components/treeselect/treeselect.css
+++ b/src/app/components/treeselect/treeselect.css
@@ -55,3 +55,14 @@
 .p-fluid .p-treeselect {
     display: flex;
 }
+
+.p-treeselect-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-treeselect-clearable {
+    position: relative;
+} 
diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts
index be92e5f11b6..46e32cd4112 100755
--- a/src/app/components/treeselect/treeselect.ts
+++ b/src/app/components/treeselect/treeselect.ts
@@ -6,7 +6,7 @@ import {animate, style, transition, trigger, AnimationEvent} from '@angular/anim
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
 import {ConnectedOverlayScrollHandler, DomHandler} from 'primeng/dom';
 import {TreeModule} from 'primeng/tree';
-import {ZIndexUtils} from 'primeng/utils'
+import {ZIndexUtils, ObjectUtils} from 'primeng/utils'
 
 
 export const TREESELECT_VALUE_ACCESSOR: any = {
@@ -40,6 +40,8 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
                     </ng-template>
                 </ng-template>
             </div>
+            <i *ngIf="checkValue() && !disabled && showClear" class="p-treeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
+
         </div>
         <div class="p-treeselect-trigger">
             <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
@@ -78,7 +80,8 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': '!emptyValue',
-        '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
+        '[class.p-inputwrapper-focus]': 'focused || overlayVisible',
+        '[class.p-treeselect-clearable]': 'showClear && !disabled'
     },
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TREESELECT_VALUE_ACCESSOR],
@@ -116,6 +119,8 @@ export class TreeSelect implements AfterContentInit {
 
     @Input() propagateSelectionUp: boolean = true;
 
+    @Input() showClear: boolean = true;
+
     @Input() get options(): any[] {
         return this._options;
     };
@@ -142,6 +147,8 @@ export class TreeSelect implements AfterContentInit {
 
     @Output() onHide: EventEmitter<any> = new EventEmitter();
 
+	@Output() onClear: EventEmitter<any> = new EventEmitter();
+
     @Output() onNodeUnselect: EventEmitter<any> = new EventEmitter();
 
     @Output() onNodeSelect: EventEmitter<any> = new EventEmitter();
@@ -300,6 +307,19 @@ export class TreeSelect implements AfterContentInit {
         this.cd.markForCheck();
     }
 
+    clear(event) {
+        this.value = null;
+        this.resetExpandedNodes();
+        this.onModelChange(this.value);
+        this.onClear.emit();
+
+        event.stopPropagation()
+    }
+
+    checkValue() {
+        return this.value !== null && ObjectUtils.isNotEmpty(this.value)
+    }
+
     onOverlayClick(event) {
         this.overlayService.add({
             originalEvent: event,
diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
index cdcb093d376..17b2d9a8f66 100644
--- a/src/assets/components/themes/arya-blue/theme.css
+++ b/src/assets/components/themes/arya-blue/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #383838;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #383838;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #383838;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-button {
   color: #212529;
   background: #64B5F6;
diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
index 836980d24b8..78c2bd7566d 100644
--- a/src/assets/components/themes/arya-green/theme.css
+++ b/src/assets/components/themes/arya-green/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #383838;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #383838;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #383838;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-button {
   color: #212529;
   background: #81C784;
diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
index b409c267ff4..e949cd07370 100644
--- a/src/assets/components/themes/arya-orange/theme.css
+++ b/src/assets/components/themes/arya-orange/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #ffe284;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #383838;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #383838;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #383838;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-button {
   color: #212529;
   background: #FFD54F;
diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
index c1cdccb99e6..c8bcdf96276 100644
--- a/src/assets/components/themes/arya-purple/theme.css
+++ b/src/assets/components/themes/arya-purple/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #383838;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #383838;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #383838;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #BA68C8;
diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
index 2dbef701dc1..247ff538f50 100644
--- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f19ea6;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #e3f3fe;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #3f4b5b;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f19ea6;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f19ea6;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #3f4b5b;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f19ea6;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #9fdaa8;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: none;
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #3f4b5b;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #151515;
   background: #8dd0ff;
diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
index 8d98a8d26a3..2ea6e2bb6eb 100644
--- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f19ea6;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #f0e6f5;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #3f4b5b;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f19ea6;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f19ea6;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #3f4b5b;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f19ea6;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #9fdaa8;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: none;
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #f0e6f5;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #3f4b5b;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #151515;
   background: #c298d8;
diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
index cd1da36cc39..895bb3562c4 100644
--- a/src/assets/components/themes/bootstrap4-light-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #dc3545;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #efefef;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #dc3545;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #dc3545;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #495057;
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #efefef;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #495057;
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #dc3545;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #28a745;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #495057;
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: none;
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #212529;
+  background: #efefef;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: #495057;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #efefef;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #495057;
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #007bff;
diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
index c4812b9cdb5..98c019d86a6 100644
--- a/src/assets/components/themes/bootstrap4-light-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #dc3545;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #efefef;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #dc3545;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #dc3545;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #495057;
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #efefef;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #495057;
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #dc3545;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #28a745;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #495057;
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: none;
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #212529;
+  background: #efefef;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: #495057;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #efefef;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #495057;
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #883cae;
diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
index 6940d9628e0..0a2f93aa03a 100644
--- a/src/assets/components/themes/fluent-light/theme.css
+++ b/src/assets/components/themes/fluent-light/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #605e5c;
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #a4252c;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: inset 0 0 0 1px #605e5c;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #605e5c;
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #faf9f8;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #605e5c;
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #a4252c;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #605e5c;
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #a4252c;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #605e5c;
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #faf9f8;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #605e5c;
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #a4252c;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #498205;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #605e5c;
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 2px;
   box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 0.5rem;
+  border-bottom: 1px solid #edebe9;
+  color: #323130;
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: #605e5c;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #605e5c;
+  border: 0 none;
+  background: transparent;
+  border-radius: 2px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #605e5c;
+  border-color: transparent;
+  background: #f3f2f1;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #605e5c;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #faf9f8;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #605e5c;
+  right: 2rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #0078d4;
diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
index b84ad082d28..ff9463662e9 100644
--- a/src/assets/components/themes/lara-dark-blue/theme.css
+++ b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #FCA5A5;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #0b213f;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 22px;
   height: 22px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #0b213f;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #FCA5A5;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #93deac;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 22px;
   height: 22px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 6px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #0b213f;
+  color: rgba(255, 255, 255, 0.87);
+  background: #071426;
+  margin: 0;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #0b213f;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #1c2127;
   background: #93C5FD;
diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
index ef0a777d325..9b9f89dfdd1 100644
--- a/src/assets/components/themes/lara-dark-indigo/theme.css
+++ b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #FCA5A5;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #0b213f;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 22px;
   height: 22px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #0b213f;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #FCA5A5;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #93deac;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 22px;
   height: 22px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 6px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #0b213f;
+  color: rgba(255, 255, 255, 0.87);
+  background: #071426;
+  margin: 0;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #0b213f;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #1c2127;
   background: #A5B4FC;
diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
index 51517fb2237..f71e3af0fff 100644
--- a/src/assets/components/themes/lara-dark-purple/theme.css
+++ b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #FCA5A5;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #0b213f;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 22px;
   height: 22px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #0b213f;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #FCA5A5;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #93deac;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 22px;
   height: 22px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 6px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #0b213f;
+  color: rgba(255, 255, 255, 0.87);
+  background: #071426;
+  margin: 0;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #0b213f;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #1c2127;
   background: #C4B5FD;
diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
index d7d8e55f0d3..5a57cdbedba 100644
--- a/src/assets/components/themes/lara-dark-teal/theme.css
+++ b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #FCA5A5;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #0b213f;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 22px;
   height: 22px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #0b213f;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #FCA5A5;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #93deac;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 22px;
   height: 22px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 6px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #0b213f;
+  color: rgba(255, 255, 255, 0.87);
+  background: #071426;
+  margin: 0;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #0b213f;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #1c2127;
   background: #5EEAD4;
diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
index daf18892094..bf5e93c0360 100644
--- a/src/assets/components/themes/lara-light-blue/theme.css
+++ b/src/assets/components/themes/lara-light-blue/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e24c4c;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #BFDBFE;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 22px;
   height: 22px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e24c4c;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #29c76f;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 22px;
   height: 22px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 6px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #343a40;
+  background: #f8f9fa;
+  margin: 0;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: #6c757d;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #343a40;
+  border-color: transparent;
+  background: #e9ecef;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #BFDBFE;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #3B82F6;
diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
index 57cf69702fe..4953ad80cd5 100644
--- a/src/assets/components/themes/lara-light-indigo/theme.css
+++ b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e24c4c;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #C7D2FE;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 22px;
   height: 22px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e24c4c;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #29c76f;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 22px;
   height: 22px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 6px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #343a40;
+  background: #f8f9fa;
+  margin: 0;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: #6c757d;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #343a40;
+  border-color: transparent;
+  background: #e9ecef;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #C7D2FE;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #6366F1;
diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
index 8500ad91a72..bf4a5c88fc1 100644
--- a/src/assets/components/themes/lara-light-purple/theme.css
+++ b/src/assets/components/themes/lara-light-purple/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e24c4c;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #DDD6FE;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 22px;
   height: 22px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e24c4c;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #29c76f;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 22px;
   height: 22px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 6px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #343a40;
+  background: #f8f9fa;
+  margin: 0;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: #6c757d;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #343a40;
+  border-color: transparent;
+  background: #e9ecef;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #DDD6FE;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #8B5CF6;
diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
index bbf1ee443af..2503acbafaf 100644
--- a/src/assets/components/themes/lara-light-teal/theme.css
+++ b/src/assets/components/themes/lara-light-teal/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e24c4c;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #99F6E4;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 22px;
   height: 22px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e24c4c;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #29c76f;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 22px;
   height: 22px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 6px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #343a40;
+  background: #f8f9fa;
+  margin: 0;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: #6c757d;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #343a40;
+  border-color: transparent;
+  background: #e9ecef;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #99F6E4;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #6c757d;
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #14B8A6;
diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
index 962cba37cf0..47c61ba602f 100644
--- a/src/assets/components/themes/luna-amber/theme.css
+++ b/src/assets/components/themes/luna-amber/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e57373;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.1rem white;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #4b4b4b;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e57373;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e57373;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #4b4b4b;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 1.858rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e57373;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #AED581;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.429rem 0.857rem;
+  border-bottom: 1px solid #191919;
+  color: #dedede;
+  background: #252525;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.429rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.429rem;
+  color: #888888;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 2.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 1.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #8888;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #dedede;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #4b4b4b;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-button {
   color: #212529;
   background: #FFE082;
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
index a99bde91be2..1d364debc33 100644
--- a/src/assets/components/themes/luna-blue/theme.css
+++ b/src/assets/components/themes/luna-blue/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e57373;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.1rem white;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #4b4b4b;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e57373;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e57373;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #4b4b4b;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 1.858rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e57373;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #AED581;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.429rem 0.857rem;
+  border-bottom: 1px solid #191919;
+  color: #dedede;
+  background: #252525;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.429rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.429rem;
+  color: #888888;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 2.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 1.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #8888;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #dedede;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #4b4b4b;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-button {
   color: #212529;
   background: #81D4FA;
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
index a8deb1f2af1..5ce767b4648 100644
--- a/src/assets/components/themes/luna-green/theme.css
+++ b/src/assets/components/themes/luna-green/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e57373;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.1rem white;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #4b4b4b;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e57373;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e57373;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #4b4b4b;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 1.858rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e57373;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #AED581;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.429rem 0.857rem;
+  border-bottom: 1px solid #191919;
+  color: #dedede;
+  background: #252525;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.429rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.429rem;
+  color: #888888;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 2.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 1.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #8888;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #dedede;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #4b4b4b;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-button {
   color: #212529;
   background: #C5E1A5;
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
index d6dbcb1a468..4a20c204d52 100644
--- a/src/assets/components/themes/luna-pink/theme.css
+++ b/src/assets/components/themes/luna-pink/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e57373;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.1rem white;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #4b4b4b;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e57373;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e57373;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #4b4b4b;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 1.858rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e57373;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #AED581;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.429rem 0.857rem;
+  border-bottom: 1px solid #191919;
+  color: #dedede;
+  background: #252525;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.429rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.429rem;
+  color: #888888;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 2.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 1.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #8888;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #dedede;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #4b4b4b;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #888888;
+  right: 1.716rem;
+}
+
 .p-button {
   color: #212529;
   background: #F48FB1;
diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
index 0769ef1b164..49d83fe59be 100644
--- a/src/assets/components/themes/md-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -344,6 +344,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 400;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 1rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f44435;
 }
@@ -556,6 +564,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: none;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 1rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -648,6 +664,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 1rem;
+}
+
 .p-checkbox {
   width: 18px;
   height: 18px;
@@ -743,6 +767,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44435;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 1rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1069,6 +1101,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f44435;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 3rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 4rem;
+}
+
 .p-inputswitch {
   width: 2.75rem;
   height: 1rem;
@@ -1429,6 +1469,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 3rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 4rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f44435;
 }
@@ -1455,6 +1503,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 4rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1729,6 +1782,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  background: #2b2b2b;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 4rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1748,6 +1845,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 3rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 4rem;
+}
+
 .p-button {
   color: #121212;
   background: #CE93D8;
diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
index 91c9cc25db0..1bdacdd2e15 100644
--- a/src/assets/components/themes/md-dark-indigo/theme.css
+++ b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -344,6 +344,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 400;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 1rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f44435;
 }
@@ -556,6 +564,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: none;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 1rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -648,6 +664,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 1rem;
+}
+
 .p-checkbox {
   width: 18px;
   height: 18px;
@@ -743,6 +767,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44435;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 1rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1069,6 +1101,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f44435;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 3rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 4rem;
+}
+
 .p-inputswitch {
   width: 2.75rem;
   height: 1rem;
@@ -1429,6 +1469,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 3rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 4rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f44435;
 }
@@ -1455,6 +1503,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 4rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1729,6 +1782,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  background: #2b2b2b;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 4rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1748,6 +1845,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 3rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 4rem;
+}
+
 .p-button {
   color: #121212;
   background: #9FA8DA;
diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
index 63cd2ecaa6a..0454e97e9bd 100644
--- a/src/assets/components/themes/md-light-deeppurple/theme.css
+++ b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -344,6 +344,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 400;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 1rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #B00020;
 }
@@ -556,6 +564,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: none;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 1rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -648,6 +664,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #dcdcdc;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 1rem;
+}
+
 .p-checkbox {
   width: 18px;
   height: 18px;
@@ -743,6 +767,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #B00020;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 1rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1069,6 +1101,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #B00020;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 3rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 4rem;
+}
+
 .p-inputswitch {
   width: 2.75rem;
   height: 1rem;
@@ -1429,6 +1469,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #dcdcdc;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 3rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 4rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #B00020;
 }
@@ -1455,6 +1503,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #689F38;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 4rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1729,6 +1782,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.87);
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 4rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(0, 0, 0, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(0, 0, 0, 0.6);
+  border-color: transparent;
+  background: rgba(0, 0, 0, 0.04);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1748,6 +1845,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #dcdcdc;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 3rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 4rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #673AB7;
diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
index a3344436912..4a25c14a032 100644
--- a/src/assets/components/themes/md-light-indigo/theme.css
+++ b/src/assets/components/themes/md-light-indigo/theme.css
@@ -344,6 +344,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 400;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 1rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #B00020;
 }
@@ -556,6 +564,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: none;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 1rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -648,6 +664,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #dcdcdc;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 1rem;
+}
+
 .p-checkbox {
   width: 18px;
   height: 18px;
@@ -743,6 +767,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #B00020;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 3rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 1rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1069,6 +1101,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #B00020;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 3rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 4rem;
+}
+
 .p-inputswitch {
   width: 2.75rem;
   height: 1rem;
@@ -1429,6 +1469,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #dcdcdc;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 3rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 4rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #B00020;
 }
@@ -1455,6 +1503,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #689F38;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 4rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1729,6 +1782,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.87);
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 4rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(0, 0, 0, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(0, 0, 0, 0.6);
+  border-color: transparent;
+  background: rgba(0, 0, 0, 0.04);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1748,6 +1845,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #dcdcdc;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 3rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 4rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #3F51B5;
diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
index 13198c3d282..6b743514a72 100644
--- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -344,6 +344,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 400;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f44435;
 }
@@ -556,6 +564,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: none;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -648,6 +664,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 18px;
   height: 18px;
@@ -743,6 +767,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44435;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1069,6 +1101,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f44435;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 2.75rem;
   height: 1rem;
@@ -1429,6 +1469,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f44435;
 }
@@ -1455,6 +1503,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1729,6 +1782,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  background: #2b2b2b;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1748,6 +1845,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #121212;
   background: #CE93D8;
diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css
index 78b555cfe43..b0a5fb56c26 100644
--- a/src/assets/components/themes/mdc-dark-indigo/theme.css
+++ b/src/assets/components/themes/mdc-dark-indigo/theme.css
@@ -344,6 +344,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 400;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f44435;
 }
@@ -556,6 +564,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: none;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -648,6 +664,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 18px;
   height: 18px;
@@ -743,6 +767,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44435;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1069,6 +1101,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f44435;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 2.75rem;
   height: 1rem;
@@ -1429,6 +1469,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f44435;
 }
@@ -1455,6 +1503,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1729,6 +1782,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  background: #2b2b2b;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1748,6 +1845,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #121212;
   background: #9FA8DA;
diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css
index 6ab2f4191cf..f55bb9937e2 100644
--- a/src/assets/components/themes/mdc-light-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css
@@ -344,6 +344,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 400;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #B00020;
 }
@@ -556,6 +564,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: none;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -648,6 +664,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #dcdcdc;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 18px;
   height: 18px;
@@ -743,6 +767,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #B00020;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1069,6 +1101,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #B00020;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 2.75rem;
   height: 1rem;
@@ -1429,6 +1469,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #dcdcdc;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #B00020;
 }
@@ -1455,6 +1503,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #689F38;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1729,6 +1782,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.87);
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(0, 0, 0, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(0, 0, 0, 0.6);
+  border-color: transparent;
+  background: rgba(0, 0, 0, 0.04);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1748,6 +1845,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #dcdcdc;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #673AB7;
diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css
index 195d4947a48..ef11889c873 100644
--- a/src/assets/components/themes/mdc-light-indigo/theme.css
+++ b/src/assets/components/themes/mdc-light-indigo/theme.css
@@ -344,6 +344,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 400;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #B00020;
 }
@@ -556,6 +564,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: none;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -648,6 +664,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #dcdcdc;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 18px;
   height: 18px;
@@ -743,6 +767,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #B00020;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1069,6 +1101,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #B00020;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 2.75rem;
   height: 1rem;
@@ -1429,6 +1469,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #dcdcdc;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #B00020;
 }
@@ -1455,6 +1503,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #689F38;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1729,6 +1782,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.87);
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(0, 0, 0, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(0, 0, 0, 0.6);
+  border-color: transparent;
+  background: rgba(0, 0, 0, 0.04);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1748,6 +1845,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #dcdcdc;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #3F51B5;
diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css
index 76e512efc17..614f213f4a3 100644
--- a/src/assets/components/themes/nova-accent/theme.css
+++ b/src/assets/components/themes/nova-accent/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #a80000;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #f4f4f4;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #a80000;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #a80000;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #f4f4f4;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 1.858rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #a80000;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #34A835;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.429rem 0.857rem;
+  border-bottom: 1px solid #eaeaea;
+  color: #333333;
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.429rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.429rem;
+  color: #848484;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 2.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 1.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #a6a6a6;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #007ad9;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #f4f4f4;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #007ad9;
diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css
index 6d0aa6150b9..b76f04c4ef1 100644
--- a/src/assets/components/themes/nova-alt/theme.css
+++ b/src/assets/components/themes/nova-alt/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #a80000;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #f4f4f4;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #a80000;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #a80000;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #f4f4f4;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 1.858rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #a80000;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #34A835;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.429rem 0.857rem;
+  border-bottom: 1px solid #eaeaea;
+  color: #333333;
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.429rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.429rem;
+  color: #848484;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 2.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 1.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #a6a6a6;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #007ad9;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #f4f4f4;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #007ad9;
diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css
index e3c58bac9db..48ee1d3b3ec 100644
--- a/src/assets/components/themes/nova/theme.css
+++ b/src/assets/components/themes/nova/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #a80000;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #f4f4f4;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -723,6 +747,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #a80000;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #848484;
+  right: 0.429rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1049,6 +1081,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #a80000;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1409,6 +1449,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #f4f4f4;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 1.858rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #a80000;
 }
@@ -1435,6 +1483,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #34A835;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1717,6 +1770,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.429rem 0.857rem;
+  border-bottom: 1px solid #eaeaea;
+  color: #333333;
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.429rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.429rem;
+  color: #848484;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 2.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 1.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #a6a6a6;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #007ad9;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1736,6 +1833,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #f4f4f4;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #848484;
+  right: 1.716rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #007ad9;
diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css
index 3a75a005340..40f95677753 100644
--- a/src/assets/components/themes/rhea/theme.css
+++ b/src/assets/components/themes/rhea/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 700;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #a6a6a6;
+  right: 0.429rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #e7a3a3;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #a6a6a6;
+  right: 0.429rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #f4f4f4;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #a6a6a6;
+  right: 0.429rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #e7a3a3;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #a6a6a6;
+  right: 0.429rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e7a3a3;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #a6a6a6;
+  right: 1.716rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #f4f4f4;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 1.858rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #a6a6a6;
+  right: 1.716rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e7a3a3;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #A3E2C6;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #a6a6a6;
+  right: 1.716rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 2px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.429rem 0.857rem;
+  border-bottom: 1px solid #dadada;
+  color: #666666;
+  background: #ffffff;
+  margin: 0;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.429rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.429rem;
+  color: #a6a6a6;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 2.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 1.858rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #a6a6a6;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #666666;
+  border-color: transparent;
+  background: transparent;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #e4e9ec;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #f4f4f4;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 1.858rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #a6a6a6;
+  right: 1.716rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #7B95A3;
diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css
index ee84fbaa99f..07d8354fc2f 100644
--- a/src/assets/components/themes/saga-blue/theme.css
+++ b/src/assets/components/themes/saga-blue/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f44336;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #a6d5fa;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44336;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f44336;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f44336;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #689F38;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: #495057;
+  background: #f8f9fa;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: #e9ecef;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #a6d5fa;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #2196F3;
diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css
index dcc7d88e1b9..58dec22194e 100644
--- a/src/assets/components/themes/saga-green/theme.css
+++ b/src/assets/components/themes/saga-green/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f44336;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #b7e0b8;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44336;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f44336;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f44336;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #689F38;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: #495057;
+  background: #f8f9fa;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: #e9ecef;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #b7e0b8;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #4CAF50;
diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css
index e63d65d36de..b285f61daf7 100644
--- a/src/assets/components/themes/saga-orange/theme.css
+++ b/src/assets/components/themes/saga-orange/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f44336;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #ffe69c;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44336;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f44336;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f44336;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #689F38;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: #495057;
+  background: #f8f9fa;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: #e9ecef;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #ffe69c;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-button {
   color: #212529;
   background: #FFC107;
diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css
index 1a12e90c19c..3c8ed863d1c 100644
--- a/src/assets/components/themes/saga-purple/theme.css
+++ b/src/assets/components/themes/saga-purple/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f44336;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 0.2rem #df9eea;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44336;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #6c757d;
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f44336;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f44336;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #689F38;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: #495057;
+  background: #f8f9fa;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: #e9ecef;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #df9eea;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #6c757d;
+  right: 2rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #9C27B0;
diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css
index ade05ad7609..c4e0dbb861f 100644
--- a/src/assets/components/themes/tailwind-light/theme.css
+++ b/src/assets/components/themes/tailwind-light/theme.css
@@ -355,6 +355,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: #71717A;
+  right: 0.75rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #f0a9a7;
 }
@@ -567,6 +575,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #6366F1;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: #71717A;
+  right: 0.75rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -659,6 +675,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #ffffff;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: #71717A;
+  right: 0.75rem;
+}
+
 .p-checkbox {
   width: 16px;
   height: 16px;
@@ -754,6 +778,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f0a9a7;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: #71717A;
+  right: 0.75rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1080,6 +1112,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f0a9a7;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: #71717A;
+  right: 3rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1440,6 +1480,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #ffffff;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2.5rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: #71717A;
+  right: 3rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f0a9a7;
 }
@@ -1466,6 +1514,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #22C55E;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: #71717A;
+  right: 3rem;
+}
+
 .p-radiobutton {
   width: 16px;
   height: 16px;
@@ -1740,6 +1793,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 0.375rem;
   box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 0 none;
+  color: #3f3f46;
+  background: #fafafa;
+  margin: 0;
+  border-top-right-radius: 0.375rem;
+  border-top-left-radius: 0.375rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.75rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.75rem;
+  color: #71717A;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #71717A;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: none;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: #18181B;
+  border-color: transparent;
+  background: #f4f4f5;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #6366F1;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1759,6 +1856,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #ffffff;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2.5rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: #71717A;
+  right: 3rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #4F46E5;
diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css
index 6a39b03e95e..d51e1a9f011 100644
--- a/src/assets/components/themes/vela-blue/theme.css
+++ b/src/assets/components/themes/vela-blue/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #304562;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #304562;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #304562;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-button {
   color: #212529;
   background: #64B5F6;
diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css
index 96e3fa2af4a..d24c1c34118 100644
--- a/src/assets/components/themes/vela-green/theme.css
+++ b/src/assets/components/themes/vela-green/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #304562;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #304562;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #304562;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-button {
   color: #212529;
   background: #81C784;
diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css
index 4de7ec2291f..da0742b8f50 100644
--- a/src/assets/components/themes/vela-orange/theme.css
+++ b/src/assets/components/themes/vela-orange/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #ffe284;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #304562;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #304562;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #304562;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-button {
   color: #212529;
   background: #FFD54F;
diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css
index a20ca1c1d4f..cb219da5776 100644
--- a/src/assets/components/themes/vela-purple/theme.css
+++ b/src/assets/components/themes/vela-purple/theme.css
@@ -320,6 +320,14 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   font-weight: 600;
 }
 
+p-autocomplete.p-autocomplete-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -532,6 +540,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
+p-calendar.p-calendar-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-calendar.p-calendar-clearable .p-calendar-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -624,6 +640,14 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
   background-color: #304562;
 }
 
+p-cascadeselect.p-cascadeselect-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-checkbox {
   width: 20px;
   height: 20px;
@@ -719,6 +743,14 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 .p-colorpicker-preview,
 .p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
@@ -1045,6 +1077,14 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-treeselect.p-inputnumber-clearable .p-inputnumber-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-inputnumber-clearable .p-inputnumber-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -1405,6 +1445,14 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #304562;
 }
 
+p-multiselect.p-multiselect-clearable .p-multiselect-label-container {
+  padding-right: 2rem;
+}
+p-multiselect.p-multiselect-clearable .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -1431,6 +1479,11 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   background: #C5E1A5;
 }
 
+p-password.p-password-clearable .p-password-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-radiobutton {
   width: 20px;
   height: 20px;
@@ -1705,6 +1758,50 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-radius: 3px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 1rem;
+  border-bottom: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  margin: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+  margin-right: 0.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+  padding-right: 1.5rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+  padding-right: 3rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+  right: 2rem;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+}
 .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
   border: 0 none;
 }
@@ -1724,6 +1821,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background-color: #304562;
 }
 
+p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
+  padding-right: 2rem;
+}
+p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2rem;
+}
+
 .p-button {
   color: #ffffff;
   background: #BA68C8;