@syncfusion/ej2-inputs 25.2.6 → 26.1.35

package/styles/color-picker/tailwind.css

@@ -10,6 +10,7 @@
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -46,7 +47,8 @@
 }
 .e-colorpicker-wrapper *,
 .e-colorpicker-container * {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile,
 .e-colorpicker-container.e-disabled .e-palette .e-tile {
@@ -55,7 +57,8 @@
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile:hover,
 .e-colorpicker-container.e-disabled .e-palette .e-tile:hover {
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile.e-selected,
 .e-colorpicker-container.e-disabled .e-palette .e-tile.e-selected {
@@ -146,9 +149,11 @@ body.e-colorpicker-overflow {
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 .e-container.e-color-picker {
   width: 341px;
@@ -178,6 +183,7 @@ body.e-colorpicker-overflow {
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -187,7 +193,8 @@ body.e-colorpicker-overflow {
 }
 .e-container .e-palette .e-tile {
   border: 0.5px solid transparent;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
   height: 27px;
@@ -200,7 +207,8 @@ body.e-colorpicker-overflow {
   position: relative;
 }
 .e-container .e-palette .e-tile:hover {
-  box-shadow: 2px 2px 7px 2px rgba(229, 231, 235, 0.3);
+  -webkit-box-shadow: 2px 2px 7px 2px rgba(229, 231, 235, 0.3);
+          box-shadow: 2px 2px 7px 2px rgba(229, 231, 235, 0.3);
   position: relative;
 }
 .e-container .e-palette .e-tile.e-nocolor-item {
@@ -214,13 +222,15 @@ body.e-colorpicker-overflow {
       touch-action: none;
 }
 .e-container .e-hsv-container .e-hsv-color {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(#000)), -webkit-gradient(linear, left top, right top, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%), linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
   height: 232px;
 }
 .e-container .e-hsv-container .e-handler {
   border: 1px solid #fff;
   border-radius: 6px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.7), inset 0 0 2px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7), inset 0 0 2px rgba(0, 0, 0, 0.7);
+          box-shadow: 0 0 3px rgba(0, 0, 0, 0.7), inset 0 0 2px rgba(0, 0, 0, 0.7);
   cursor: pointer;
   display: inline-block;
   height: 8px;
@@ -230,6 +240,7 @@ body.e-colorpicker-overflow {
   -ms-touch-action: none;
       touch-action: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 8px;
@@ -251,7 +262,7 @@ body.e-colorpicker-overflow {
   top: calc(50% - 9px);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
-  height: 8px;
+  height: 8px !important; /* stylelint-disable-line declaration-no-important */
   top: calc(50% - 3px);
   border-radius: 6px;
 }
@@ -266,9 +277,11 @@ body.e-colorpicker-overflow {
   cursor: pointer;
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle.e-large-thumb-size {
-  transform: scale(1);
+  -webkit-transform: scale(1);
+          transform: scale(1);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-hue-slider .e-slider-track {
+  background: -webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(16%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#ff0004));
   background: linear-gradient(to right, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-opacity-slider .e-slider-track {
@@ -287,7 +300,8 @@ body.e-colorpicker-overflow {
   border-radius: 6px;
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle, .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle-start, .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle, .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle-start {
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
+  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
+          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
 }
 .e-container .e-slider-preview .e-preview-container {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -317,12 +331,15 @@ body.e-colorpicker-overflow {
   top: 18px;
 }
 .e-container .e-selected-value {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 0 8px 12px 8px;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -376,7 +393,6 @@ body.e-colorpicker-overflow {
   float: right;
   text-align: right;
   white-space: nowrap;
-  width: 89.913%;
   width: 86.913%;
 }
 .e-container .e-switch-ctrl-btn .e-ctrl-btn .e-btn {
@@ -399,7 +415,8 @@ body.e-colorpicker-overflow {
   white-space: nowrap;
 }
 .e-container .e-switch-ctrl-btn .e-mode-switch-btn:focus {
-  box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);
 }
 .e-container .e-value-switch-btn, .e-container .e-mode-switch-btn {
   background-color: transparent;
@@ -410,7 +427,8 @@ body.e-colorpicker-overflow {
 }
 .e-container.e-color-picker .e-value-switch-btn:focus, .e-container.e-color-picker .e-value-switch-btn:hover, .e-container.e-color-picker .e-value-switch-btn:active {
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline: none;
 }
 .e-container.e-color-picker .e-value-switch-btn:focus {
@@ -477,9 +495,11 @@ body.e-colorpicker-overflow {
 }
 
 .e-rtl .e-container .e-hsv-container .e-hsv-color {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(#000)), -webkit-gradient(linear, right top, left top, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%), linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 100%);
 }
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
+  background: -webkit-gradient(linear, right top, left top, color-stop(0, #f00), color-stop(16%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#ff0004));
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
 .e-rtl .e-container .e-slider-preview .e-preview-container {
@@ -494,7 +514,8 @@ body.e-colorpicker-overflow {
   padding-right: 0;
 }
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
 }
 .e-rtl .e-container .e-switch-ctrl-btn .e-mode-switch-btn {
   float: right;
@@ -515,6 +536,9 @@ body.e-colorpicker-overflow {
   margin-left: 0;
 }
 
+.e-bigger .e-container .e-switch-ctrl-btn .e-ctrl-btn {
+  margin: 2px 0;
+}
 .e-bigger .e-container.e-color-picker {
   width: 462px;
 }
@@ -687,11 +711,16 @@ body.e-colorpicker-overflow {
   border-bottom-right-radius: 0%;
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
+  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
+          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
   cursor: pointer;
   min-width: 26px;
-  transform: translateY(18px) rotate(45deg) scale(0.01);
+  -webkit-transform: translateY(18px) rotate(45deg) scale(0.01);
+          transform: translateY(18px) rotate(45deg) scale(0.01);
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 .e-popup.e-tooltip-wrap.e-color-picker-tooltip .e-tip-content {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -699,7 +728,8 @@ body.e-colorpicker-overflow {
   border-radius: 50%;
   height: 24px;
   position: relative;
-  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
   width: 24px;
 }
 
@@ -734,7 +764,8 @@ body.e-colorpicker-overflow {
 .e-container .e-handler.e-hide-handler, .e-container .e-handle.e-hide-handler {
   background-color: transparent;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle:not(.e-tab-handle), .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle:not(.e-tab-handle) {
@@ -750,7 +781,8 @@ body.e-colorpicker-overflow {
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle.e-tab-handle, .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle.e-tab-handle {
   background-color: transparent;
   border-color: #0e7490;
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
+  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
+          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn, .e-colorpicker-wrapper.e-disabled .e-mode-switch-btn,
@@ -776,7 +808,8 @@ body.e-colorpicker-overflow {
 .e-colorpicker-container .e-icon-btn:disabled,
 .e-colorpicker-container .e-icon-btn.e-disabled {
   background-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   border-color: #e5e7eb;
 }
 

package/styles/data-form/_bootstrap5.3-definition.scss

@@ -0,0 +1,41 @@
+/*! Form tailwind theme wise override definitions and variables */
+// form field styles
+$field-label-color: $content-text-color-alt1 !default;
+$field-label-font-size: 12px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 400 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 5px !default;
+
+// group title styles
+$group-title-color: $content-text-color-alt2 !default;
+$group-title-border-color: $gray-300;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 4px !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: $danger-light !default;
+$form-tooltip-color: $danger !default;
+$form-validation-message-font-size: 12px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;

package/styles/data-form/_fluent2-definition.scss

@@ -0,0 +1,41 @@
+/*! FileManager's bds theme wise override definitions and variables */
+// form field styles
+$field-label-color: $content-text-color-alt1 !default;
+$field-label-font-size: 12px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 500 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 6px !default;
+
+// group title styles
+$group-title-color: $content-text-color-alt2 !default;
+$group-title-border-color: $border !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 4px !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: $danger-light !default;
+$form-tooltip-color: $danger !default;
+$form-validation-message-font-size: 12px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;

package/styles/data-form/_layout.scss

@@ -143,6 +143,7 @@
       border: $form-group-border-none;
       padding: $form-padding-zero;
       margin: $form-margin-zero;
+      margin-top: $form-layout-margin-top;
 
       #{if(&, '&', '*')} .e-group-title {
         position: $form-group-title-position;
@@ -226,9 +227,5 @@
     > :first-child.e-form-layout {
       margin-top: 0;
     }
-
-    #{if(&, '&', '*')} .e-form-group-layout {
-      display: grid;
-    }
   }
 }

package/styles/data-form/_material3-definition.scss

@@ -1,13 +1,10 @@
 /*! Form material 3 theme wise override definitions and variables */
-// form field styles
 $field-label-color: $content-text-color-alt1 !default;
 $field-label-font-size: 12px !default;
 $field-label-margin-bottom: 4px !default;
 $field-label-font-weight: 400 !default;
 $form-layout-margin-top: 20px !default;
 $field-label-right-margin-top: 6px !default;
-
-// group title styles
 $group-title-color: $content-text-color-alt2 !default;
 $group-title-border-color: $border-light;
 $form-group-border-none: none !default;
@@ -24,13 +21,9 @@ $form-group-title-border-left: 0 !default;
 $form-group-title-border-width: 100% !default;
 $form-group-title-border-height: 1px !default;
 $form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
-
-//tooltip styles
 $form-tooltip-background-color: var(--danger-light, #f9dedc) !default;
 $form-tooltip-color: var(--danger, #b3261e) !default;
 $form-validation-message-font-size: 12px;
-
-// form common styles
 $form-display-flex: flex !default;
 $form-label-top-direction: column !default;
 $form-label-text-align: center !default;

package/styles/data-form/bootstrap-dark.css

@@ -10,7 +10,6 @@
   font-weight: 400;
 }
 .e-data-form .e-form-layout {
-  display: -ms-grid;
   display: grid;
 }
 .e-data-form .e-grid-col-2 {
@@ -58,82 +57,64 @@
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 .e-data-form .e-colspan-1 {
-  -ms-grid-column-span: 1;
-  -ms-grid-column: span 1;
-      grid-column: span 1/span 1;
+  grid-column: span 1/span 1;
 }
 .e-data-form .e-colspan-2 {
-  -ms-grid-column-span: 2;
-  -ms-grid-column: span 2;
-      grid-column: span 2/span 2;
+  grid-column: span 2/span 2;
 }
 .e-data-form .e-colspan-3 {
-  -ms-grid-column-span: 3;
-  -ms-grid-column: span 3;
-      grid-column: span 3/span 3;
+  grid-column: span 3/span 3;
 }
 .e-data-form .e-colspan-4 {
-  -ms-grid-column-span: 4;
-  -ms-grid-column: span 4;
-      grid-column: span 4/span 4;
+  grid-column: span 4/span 4;
 }
 .e-data-form .e-colspan-5 {
-  -ms-grid-column-span: 5;
-  -ms-grid-column: span 5;
-      grid-column: span 5/span 5;
+  grid-column: span 5/span 5;
 }
 .e-data-form .e-colspan-6 {
-  -ms-grid-column-span: 6;
-  -ms-grid-column: span 6;
-      grid-column: span 6/span 6;
+  grid-column: span 6/span 6;
 }
 .e-data-form .e-colspan-7 {
-  -ms-grid-column-span: 7;
-  -ms-grid-column: span 7;
-      grid-column: span 7/span 7;
+  grid-column: span 7/span 7;
 }
 .e-data-form .e-colspan-8 {
-  -ms-grid-column-span: 8;
-  -ms-grid-column: span 8;
-      grid-column: span 8/span 8;
+  grid-column: span 8/span 8;
 }
 .e-data-form .e-colspan-9 {
-  -ms-grid-column-span: 9;
-  -ms-grid-column: span 9;
-      grid-column: span 9/span 9;
+  grid-column: span 9/span 9;
 }
 .e-data-form .e-colspan-10 {
-  -ms-grid-column-span: 10;
-  -ms-grid-column: span 10;
-      grid-column: span 10/span 10;
+  grid-column: span 10/span 10;
 }
 .e-data-form .e-colspan-11 {
-  -ms-grid-column-span: 11;
-  -ms-grid-column: span 11;
-      grid-column: span 11/span 11;
+  grid-column: span 11/span 11;
 }
 .e-data-form .e-colspan-12 {
-  -ms-grid-column-span: 12;
-  -ms-grid-column: span 12;
-      grid-column: span 12/span 12;
+  grid-column: span 12/span 12;
 }
 .e-data-form .e-label-position-left .e-form-item-wrapper {
-  -ms-flex: 1 1 auto;
-      flex: 1 1 auto;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
   max-width: calc(75% - 12px);
 }
 .e-data-form .e-label-position-left .e-form-label {
   margin-right: 12px;
   width: 25%;
   text-align: end;
-  -ms-flex-direction: column;
-      flex-direction: column;
-  -ms-flex-align: end;
-      align-items: flex-end;
-  -ms-flex-pack: start;
-      justify-content: flex-start;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
 }
 .e-data-form .e-label-position-left .validation-message {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -141,6 +122,7 @@
   border: none;
   padding: 0;
   margin: 0;
+  margin-top: 20px;
 }
 .e-data-form .e-form-group .e-group-title {
   position: relative;
@@ -160,17 +142,22 @@
   border-bottom: 1px solid #1a1a1a;
 }
 .e-data-form .e-label-position-top {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   margin-top: 20px;
 }
 .e-data-form .e-label-position-top .e-label-right {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .e-data-form .e-label-position-top .e-label-right .e-switch-wrapper + .e-form-label {
   margin-top: 3px;
@@ -180,25 +167,30 @@
   margin-top: 5px;
 }
 .e-data-form .e-label-position-left {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   text-align: center;
   margin-top: 20px;
 }
 .e-data-form .e-button-left {
-  -ms-flex-pack: start;
-      justify-content: flex-start;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
 }
 .e-data-form .e-button-right {
-  -ms-flex-pack: end;
-      justify-content: flex-end;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
 }
 .e-data-form .e-button-center {
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 .e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
   margin-top: 24px;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 10px;
@@ -213,10 +205,6 @@
 .e-data-form > :first-child.e-form-layout {
   margin-top: 0;
 }
-.e-data-form .e-form-group-layout {
-  display: -ms-grid;
-  display: grid;
-}
 
 /*! data-form theme */
 .e-data-form .e-form-label {