@syncfusion/ej2-ribbon 31.1.17 → 31.2.2

package/styles/fluent-dark-lite.css

@@ -944,6 +944,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1149,6 +1155,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fluent-dark.css

@@ -944,6 +944,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1149,6 +1155,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fluent-lite.css

@@ -944,6 +944,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1149,6 +1155,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fluent.css

@@ -944,6 +944,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1149,6 +1155,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fluent2-lite.css

@@ -992,6 +992,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1218,9 +1224,12 @@
   font-size: 16px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
-  margin: 8px 0 8px 8px;
+  margin: 8px 0 8px 6px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;
@@ -1307,7 +1316,7 @@
   margin: 0 auto 0 0;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
-  margin: 8px 8px 8px 0;
+  margin: 8px 6px 8px 0;
 }
 
 .e-dropdown-popup.e-ribbon-dropdown-group-button {

package/styles/fluent2.css

@@ -992,6 +992,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1218,9 +1224,12 @@
   font-size: 16px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
-  margin: 8px 0 8px 8px;
+  margin: 8px 0 8px 6px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;
@@ -1307,7 +1316,7 @@
   margin: 0 auto 0 0;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
-  margin: 8px 8px 8px 0;
+  margin: 8px 6px 8px 0;
 }
 
 .e-dropdown-popup.e-ribbon-dropdown-group-button {

package/styles/highcontrast-light-lite.css

@@ -872,6 +872,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1077,6 +1083,9 @@
   margin: 4px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/highcontrast-light.css

@@ -872,6 +872,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1077,6 +1083,9 @@
   margin: 4px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/highcontrast-lite.css

@@ -877,6 +877,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1082,6 +1088,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/highcontrast.css

@@ -877,6 +877,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1082,6 +1088,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/material-dark-lite.css

@@ -1013,6 +1013,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1218,6 +1224,9 @@
   margin: 10px 0 10px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/material-dark.css

@@ -1013,6 +1013,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1218,6 +1224,9 @@
   margin: 10px 0 10px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/material-lite.css

@@ -1018,6 +1018,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1223,6 +1229,9 @@
   margin: 10px 0 10px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/material.css

@@ -1018,6 +1018,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1223,6 +1229,9 @@
   margin: 10px 0 10px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/material3-dark-lite.css

@@ -939,6 +939,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1144,6 +1150,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/material3-dark.css

@@ -939,6 +939,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1144,6 +1150,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/material3-lite.css

@@ -941,6 +941,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1146,6 +1152,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/material3.css

@@ -941,6 +941,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1146,6 +1152,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/ribbon/_fluent2-definition.scss

@@ -75,8 +75,8 @@ $ribbon-items-height: 20px !default;
 $ribbon-items-btn-padding: 0 12px 0 4px !default;
 $ribbon-items-btn-rtl-padding: 0 4px 0 12px !default;
 $ribbon-items-min-width-height: 16px !default;
-$ribbon-checkbox-margin: 8px 0 8px 8px !default;
-$ribbon-rtl-checkbox-margin: 8px 8px 8px 0 !default;
+$ribbon-checkbox-margin: 8px 0 8px 6px !default;
+$ribbon-rtl-checkbox-margin: 8px 6px 8px 0 !default;
 $ribbon-items-checkbox-size: $text-sm !default;
 $ribbon-items-checkbox-padding: 0 5px !default;
 $ribbon-input-group-height: 32px !default;

package/styles/ribbon/_layout.scss

@@ -893,6 +893,10 @@
         .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
           padding: 0;
         }
+        .e-colorpicker-popup.e-ribbon-control
+        {
+          z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+        }
       }
 
       .e-split-btn-wrapper {
@@ -1087,6 +1091,9 @@
       .e-ribbon-item > .e-checkbox-wrapper {
         margin: $ribbon-checkbox-margin;
         padding: 0;
+        .e-frame {
+          margin: unset;
+        }
       }
 
       .e-ribbon-item.e-ribbon-medium-item {

package/styles/ribbon/bds.css

@@ -1118,6 +1118,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1323,6 +1329,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/ribbon/bootstrap-dark.css

@@ -877,6 +877,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1082,6 +1088,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/ribbon/bootstrap.css

@@ -879,6 +879,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1084,6 +1090,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/ribbon/bootstrap4.css

@@ -93,6 +93,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -921,6 +929,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1126,6 +1140,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/ribbon/bootstrap5-dark.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/ribbon/bootstrap5.3.css

@@ -956,6 +956,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1161,6 +1167,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;