@syncfusion/ej2-angular-dropdowns 20.4.38 → 20.4.40

package/styles/bootstrap-dark.css

@@ -1479,6 +1479,10 @@ ejs-dropdownlist {
   width: 30px;
 }
 
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 0 0 0;
+}
+
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
   margin: 1px 0 0;
 }
@@ -2180,6 +2184,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #f0f0f0;
 }
@@ -2374,6 +2382,10 @@ ejs-multiselect {
   left: 8px;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 8px;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 28px;
 }

package/styles/bootstrap.css

@@ -1478,6 +1478,10 @@ ejs-dropdownlist {
   width: 30px;
 }
 
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 0 0 0;
+}
+
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
   margin: 1px 0 0;
 }
@@ -2179,6 +2183,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #333;
 }
@@ -2373,6 +2381,10 @@ ejs-multiselect {
   left: 8px;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 8px;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 28px;
 }

package/styles/bootstrap4.css

@@ -1289,7 +1289,7 @@ ejs-dropdownlist {
 
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   height: 30px;
-  width: 30px;
+  width: auto;
 }
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus.e-hover {
@@ -1352,7 +1352,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-chips .e-chips-close::before {
   content: "\e745";
   cursor: pointer;
-  left: 10px;
+  left: 0;
   position: relative;
   top: 8px;
 }
@@ -1361,7 +1361,7 @@ ejs-dropdownlist {
   content: "\e745";
   cursor: pointer;
   height: 10px;
-  left: 10px;
+  left: 0;
   position: relative;
   top: 10px;
 }
@@ -1617,8 +1617,12 @@ ejs-dropdownlist {
   float: right;
   font-family: "e-icons";
   height: 24px;
-  margin: 0 0 0;
-  width: 24px;
+  margin: 10px 10px 10px 0;
+  width: auto;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 8px 0 8px 20px;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -1633,7 +1637,7 @@ ejs-dropdownlist {
   position: absolute;
   right: 0;
   top: 100%;
-  width: 29px;
+  width: auto;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -2050,7 +2054,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: 18px;
-  width: 18px;
+  width: auto;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -2083,7 +2087,8 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: 24px;
-  width: 24px;
+  width: auto;
+  margin: 3px 10px 10px 0;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2102,7 +2107,7 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
 .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  margin-top: -2.9em;
+  margin-top: -2.5em;
   right: 0;
 }
 
@@ -2341,6 +2346,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }
@@ -2546,7 +2555,7 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  left: 6px;
+  left: 0;
   top: 5px;
   font-size: 8px;
 }
@@ -2555,6 +2564,10 @@ ejs-multiselect {
   left: 4px;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 4px;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 30px;
 }
@@ -2564,7 +2577,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  left: 13px;
+  left: 0;
   top: 11px;
   font-size: 10px;
 }

package/styles/bootstrap5-dark.css

@@ -988,7 +988,10 @@ ejs-dropdownlist {
   box-shadow: none;
   position: absolute;
 }
-.e-ddt.e-popup .e-checkbox-wrapper .e-frame {
+.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
+  background-color: #212529;
+}
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: transparent;
 }
 .e-ddt.e-popup .e-selectall-parent {
@@ -1605,6 +1608,10 @@ ejs-dropdownlist {
   width: 14px;
 }
 
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 0 0 0;
+}
+
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
   margin: 3px 0 0;
 }
@@ -2344,6 +2351,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }
@@ -2539,6 +2550,10 @@ ejs-multiselect {
   left: 0;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 0;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 26px;
 }

package/styles/bootstrap5.css

@@ -988,7 +988,10 @@ ejs-dropdownlist {
   box-shadow: none;
   position: absolute;
 }
-.e-ddt.e-popup .e-checkbox-wrapper .e-frame {
+.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
+  background-color: #fff;
+}
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: transparent;
 }
 .e-ddt.e-popup .e-selectall-parent {
@@ -1605,6 +1608,10 @@ ejs-dropdownlist {
   width: 14px;
 }
 
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 0 0 0;
+}
+
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
   margin: 3px 0 0;
 }
@@ -2344,6 +2351,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #212529;
 }
@@ -2539,6 +2550,10 @@ ejs-multiselect {
   left: 0;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 0;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 26px;
 }

package/styles/drop-down-base/_bootstrap-dark-definition.scss

@@ -20,6 +20,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-dark-font !default;
 $ddl-list-active-border-color: $grey-white !default;
+$mention-popup-bg-color: $grey-white !default;
 $ddl-list-active-font-color: $brand-primary-font !default;
 $mention-active-font-color: $brand-primary !default;
 $ddl-list-active-bg-color: $brand-primary !default;

package/styles/drop-down-base/_bootstrap-definition.scss

@@ -19,6 +19,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-light-font !default;
 $ddl-list-active-border-color: $grey-white !default;
+$mention-popup-bg-color: $grey-white !default;
 $ddl-list-active-font-color: $brand-primary-font !default;
 $mention-active-font-color: $brand-primary !default;
 $ddl-list-active-bg-color: $brand-primary !default;

package/styles/drop-down-base/_bootstrap4-definition.scss

@@ -16,6 +16,7 @@ $ddl-list-header-bg-color: $white !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-default-font-color: $gray-900 !default;
 $ddl-list-active-border-color: $white !default;
+$mention-popup-bg-color: $white !default;
 $ddl-list-active-font-color: $primary-font !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $primary !default;

package/styles/drop-down-base/_bootstrap5-definition.scss

@@ -56,6 +56,7 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;
 $ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color-selected !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $content-bg-color-selected !default;

package/styles/drop-down-base/_fabric-dark-definition.scss

@@ -22,6 +22,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $neutral-light !default;
 $ddl-list-default-font-color: $neutral-light-font !default;
 $ddl-list-active-border-color: $neutral-quintenary !default;
+$mention-popup-bg-color: $neutral-quintenary !default;
 $ddl-list-active-font-color: $neutral-light-font !default;
 $mention-active-font-color: $theme-primary !default;
 $ddl-list-active-bg-color: $neutral-quintenary !default;

package/styles/drop-down-base/_fabric-definition.scss

@@ -11,7 +11,7 @@ $ddl-list-border-color: rgba($neutral-light, .25) !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
 $mention-gradient-color: $neutral-white !default;
-$mention-list-box-shadow-color: 0 0 5px 0 rgba(0, 0, 0, .4) !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .4) !default;
 $mention-chip-bg-color: $neutral-lighter !default;
 $mention-chip-border-radius: 0 !default;
 $mention-chip-border: none !default;
@@ -21,6 +21,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $neutral-light !default;
 $ddl-list-default-font-color: rgba($neutral-light-font, .87) !default;
 $ddl-list-active-border-color: $neutral-white !default;
+$mention-popup-bg-color: $neutral-white !default;
 $ddl-list-active-font-color: $neutral-light-font !default;
 $mention-active-font-color: $theme-primary !default;
 $ddl-list-active-bg-color: $theme-lighter !default;

package/styles/drop-down-base/_fluent-definition.scss

@@ -58,6 +58,7 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $flyout-text-color !default;
 $ddl-list-default-font-color: $flyout-text-color !default;
 $ddl-list-active-border-color: $flyout-bg-color !default;
+$mention-popup-bg-color: $flyout-bg-color !default;
 $ddl-list-active-font-color: $content-text-color !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $flyout-bg-color-selected !default;

package/styles/drop-down-base/_fusionnew-definition.scss

@@ -56,6 +56,7 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;
 $ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color-selected !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $content-bg-color-selected !default;

package/styles/drop-down-base/_highcontrast-definition.scss

@@ -20,6 +20,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $border-default !default;
 $ddl-list-default-font-color: $content-font !default;
 $ddl-list-active-border-color: $selection-border !default;
+$mention-popup-bg-color: $selection-border !default;
 $ddl-list-active-font-color: $selection-font !default;
 $mention-active-font-color: $selection-bg !default;
 $ddl-list-active-bg-color: $selection-bg !default;

package/styles/drop-down-base/_highcontrast-light-definition.scss

@@ -21,6 +21,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $border-default !default;
 $ddl-list-default-font-color: $content-font !default;
 $ddl-list-active-border-color: $selection-border !default;
+$mention-popup-bg-color: $selection-border !default;
 $ddl-list-active-font-color: $selection-font !default;
 $mention-active-font-color: $selection-bg !default;
 $ddl-list-active-bg-color: $selection-bg !default;

package/styles/drop-down-base/_layout.scss

@@ -80,7 +80,7 @@
   }
 
   .e-mention.e-popup {
-    background: $ddl-list-active-border-color;
+    background: $mention-popup-bg-color;
     border: 0;
     box-shadow: 0 2px 3px 1px $mention-list-box-shadow-color;
     margin-top: 2px;

package/styles/drop-down-base/_material-dark-definition.scss

@@ -20,6 +20,7 @@ $ddl-list-header-border-color: $grey-700 !default;
 $ddl-nodata-font-color: rgba($grey-dark-font, .7) !default;
 $ddl-list-default-font-color: $grey-dark-font !default;
 $ddl-list-active-border-color: rgba($grey-white, .18) !default;
+$mention-popup-bg-color: rgba($grey-light-font, .9) !default;
 $ddl-list-active-font-color: $accent !default;
 $mention-active-font-color: $accent !default;
 $ddl-list-active-bg-color: rgba($grey-white, .05) !default;

package/styles/drop-down-base/_material-definition.scss

@@ -20,6 +20,7 @@ $ddl-list-header-border-color: $grey-black !default;
 $ddl-nodata-font-color: $grey-black !default;
 $ddl-list-default-font-color: rgba($grey-light-font, .87) !default;
 $ddl-list-active-border-color: $grey-white !default;
+$mention-popup-bg-color: $grey-white !default;
 $ddl-list-active-font-color: $accent !default;
 $mention-active-font-color: $accent !default;
 $ddl-list-active-bg-color: $grey-200 !default;

package/styles/drop-down-base/_material3-definition.scss

@@ -56,6 +56,7 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;
 $ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color-selected !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $content-bg-color-selected !default;

package/styles/drop-down-base/_tailwind-definition.scss

@@ -58,6 +58,7 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;
 $ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color-selected !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $content-bg-color-selected !default;

package/styles/drop-down-base/fabric.css

@@ -90,7 +90,7 @@
 .e-mention.e-popup {
   background: #fff;
   border: 0;
-  box-shadow: 0 2px 3px 1px 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.4);
   margin-top: 2px;
   position: absolute;
 }

package/styles/drop-down-base/material-dark.css

@@ -88,7 +88,7 @@
 }
 
 .e-mention.e-popup {
-  background: rgba(255, 255, 255, 0.18);
+  background: rgba(0, 0, 0, 0.9);
   border: 0;
   box-shadow: 0 2px 3px 1px 0 2px 3px 1px rgba(0, 0, 0, 0.21);
   margin-top: 2px;

package/styles/drop-down-tree/_layout.scss

@@ -435,9 +435,17 @@
       }
       box-shadow: $ddt-box-shadow;
       position: absolute;
+      
+      .e-active .e-checkbox-wrapper {
+        .e-frame:not(.e-check):not(.e-stop) {
+          @if$ddt-skin-name == 'bootstrap5' {
+            background-color: $ddt-readonly-input-bg-color;
+          }
+        }
+      }
 
       .e-checkbox-wrapper {
-        .e-frame {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

package/styles/drop-down-tree/bootstrap5-dark.css

@@ -207,7 +207,10 @@
   box-shadow: none;
   position: absolute;
 }
-.e-ddt.e-popup .e-checkbox-wrapper .e-frame {
+.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
+  background-color: #212529;
+}
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: transparent;
 }
 .e-ddt.e-popup .e-selectall-parent {

package/styles/drop-down-tree/bootstrap5.css

@@ -207,7 +207,10 @@
   box-shadow: none;
   position: absolute;
 }
-.e-ddt.e-popup .e-checkbox-wrapper .e-frame {
+.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
+  background-color: #fff;
+}
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: transparent;
 }
 .e-ddt.e-popup .e-selectall-parent {

package/styles/fabric-dark.css

@@ -1191,7 +1191,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-chips .e-chips-close::before {
   content: "\e7a7";
   cursor: pointer;
-  left: 8px;
+  left: 0;
   position: relative;
   top: 8px;
 }
@@ -1199,7 +1199,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-close-hooker::before {
   content: "\e7a7";
   cursor: pointer;
-  left: 10px;
+  left: 0;
   position: relative;
   top: 10px;
 }
@@ -1446,8 +1446,12 @@ ejs-dropdownlist {
   float: right;
   font-family: "e-icons";
   height: 26px;
-  margin: 0;
-  width: 26px;
+  margin: 8px 8px 8px 8px;
+  width: auto;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 8px 0 8px 20px;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -1462,7 +1466,7 @@ ejs-dropdownlist {
   position: absolute;
   right: 0;
   top: 100%;
-  width: 30px;
+  width: auto;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1876,7 +1880,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: 22px;
-  width: 22px;
+  width: auto;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -1895,7 +1899,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
 .e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  margin-top: -2.8em;
+  margin-top: -3em;
 }
 
 .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
@@ -1905,7 +1909,7 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: 26px;
-  width: 26px;
+  width: auto;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2159,6 +2163,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }
@@ -2353,6 +2361,10 @@ ejs-multiselect {
   left: 7px;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: -35px;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 26px;
 }

package/styles/fabric.css

@@ -90,7 +90,7 @@
 .e-mention.e-popup {
   background: #fff;
   border: 0;
-  box-shadow: 0 2px 3px 1px 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.4);
   margin-top: 2px;
   position: absolute;
 }
@@ -1185,7 +1185,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-chips .e-chips-close::before {
   content: "\e7a7";
   cursor: pointer;
-  left: 8px;
+  left: 0;
   position: relative;
   top: 8px;
 }
@@ -1193,7 +1193,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-close-hooker::before {
   content: "\e7a7";
   cursor: pointer;
-  left: 10px;
+  left: 0;
   position: relative;
   top: 10px;
 }
@@ -1440,8 +1440,12 @@ ejs-dropdownlist {
   float: right;
   font-family: "e-icons";
   height: 26px;
-  margin: 0;
-  width: 26px;
+  margin: 8px 8px 8px 8px;
+  width: auto;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 8px 0 8px 20px;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -1456,7 +1460,7 @@ ejs-dropdownlist {
   position: absolute;
   right: 0;
   top: 100%;
-  width: 30px;
+  width: auto;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1870,7 +1874,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: 22px;
-  width: 22px;
+  width: auto;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -1889,7 +1893,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
 .e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  margin-top: -2.8em;
+  margin-top: -3em;
 }
 
 .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
@@ -1899,7 +1903,7 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: 26px;
-  width: 26px;
+  width: auto;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2153,6 +2157,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #666;
 }
@@ -2347,6 +2355,10 @@ ejs-multiselect {
   left: 7px;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: -35px;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 26px;
 }