@syncfusion/ej2-angular-inputs 20.4.54 → 21.1.35

package/styles/input/_layout.scss

@@ -152,27 +152,27 @@
   }
 
   .e-input#{$css}:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-bottom: $input-focus-padding-bottom;
     }
   }
 
   .e-input.e-small#{$css}:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-bottom: $input-focus-small-padding-bottom;
     }
   }
 
   .e-input.e-bigger#{$css}:focus,
   .e-bigger .e-input#{$css}:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-bottom: $input-focus-bigger-padding-bottom;
     }
   }
 
   .e-input.e-small.e-bigger#{$css}:focus,
   .e-bigger .e-input.e-small#{$css}:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-bottom: $input-focus-bigger-small-padding-bottom;
     }
   }
@@ -473,7 +473,7 @@
   .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
   .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
   .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $input-left-icon-font-size;
       margin: $zero-value;
       min-height: $input-left-child-min-height;
@@ -514,7 +514,7 @@
   .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $input-bigger-left-icon-font-size;
       margin: $zero-value;
       min-height: $input-bigger-left-child-min-height;
@@ -535,7 +535,7 @@
   .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
   .e-small .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $input-small-left-icon-font-size;
       margin: $zero-value;
       min-height: $input-small-left-child-min-height;
@@ -556,7 +556,7 @@
   .e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $input-bigger-small-left-icon-font-size;
       margin: $zero-value;
       min-height: $input-bigger-small-left-child-min-height;
@@ -567,14 +567,14 @@
 
   .e-input-group.e-float-icon-left:not(.e-disabled) > .e-input-group-icon:active,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) > .e-input-group-icon:active {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       background: transparent;
     }
   }
 
   .e-input-group.e-float-icon-left > .e-input-group-icon,
   .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       cursor: auto;
     }
   }
@@ -616,7 +616,7 @@
   .e-float-input input.e-disabled,
   .e-float-input.e-control-wrapper input[disabled],
   .e-float-input.e-control-wrapper input.e-disabled  {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       border-color: $input-disable-border-color;
       border-style: $input-disable-border-type;
     }
@@ -624,7 +624,7 @@
 
   .e-input-group.e-disabled,
   .e-input-group.e-control-wrapper.e-disabled {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       border-bottom-style: $input-disable-border-type;
       border-width: $input-disable-group-border-width;
     }
@@ -1038,7 +1038,7 @@
   .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-bigger-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
     }
   }
@@ -1050,7 +1050,7 @@
   .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -11px;
     }
   }
@@ -1070,7 +1070,7 @@
   .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-bigger-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -9px;
     }
     font-style: $input-font-style;
@@ -1080,7 +1080,7 @@
   .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -11px;
     }
   }
@@ -1097,7 +1097,7 @@
   .e-bigger.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
     }
   }
@@ -1110,7 +1110,7 @@
   .e-small .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -10px;
     }
   }
@@ -1127,7 +1127,7 @@
   .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -10px;
     }
   }
@@ -1147,7 +1147,7 @@
   .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
   .e-float-input.e-input-focus input ~ label.e-float-text {
     font-size: $float-label-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -9px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -1206,7 +1206,7 @@
   .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
     font-size: $float-label-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -9px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -1265,7 +1265,7 @@
   .e-bigger .e-float-input.e-input-focus input ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translate3d(0, -6px, 0) scale(.86);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -1341,7 +1341,7 @@
   .e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
   .e-small .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -1383,7 +1383,7 @@
   .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper .e-input-in-wrap input label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -9px;
     }
   }
@@ -1413,7 +1413,7 @@
   .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
     font-size: $float-label-bigger-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -9px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
@@ -1442,7 +1442,7 @@
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -9px;
     }
   }
@@ -1462,7 +1462,7 @@
   .e-float-input.e-small.e-input-focus input-group-animation ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
     font-size: $float-label-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
@@ -1483,7 +1483,7 @@
   .e-small .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
     }
   }
@@ -1518,7 +1518,7 @@
   .e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
     font-size: $float-label-bigger-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -7px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or  $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
@@ -1547,7 +1547,7 @@
   .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -10px;
     }
   }
@@ -2123,7 +2123,7 @@
   .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation;
     }
   }
@@ -2136,7 +2136,7 @@
   .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation;
     }
   }
@@ -2145,7 +2145,7 @@
   .e-input-group::after,
   .e-input-group.e-control-wrapper::before,
   .e-input-group.e-control-wrapper::after  {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       @include input-group-animation;
     }
   }
@@ -2154,7 +2154,7 @@
   .e-input-group.e-float-icon-left .e-input-in-wrap:not(.e-float-input)::before,
   .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
   .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap:not(.e-float-input)::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-left;
     }
   }
@@ -2163,14 +2163,14 @@
   .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
   .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before  {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-left;
     }
   }
 
   .e-input-group::before,
   .e-input-group.e-control-wrapper::before {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       @include input-group-animation-left;
     }
   }
@@ -2183,7 +2183,7 @@
   .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-width;
     }
   }
@@ -2196,7 +2196,7 @@
   .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-width;
     }
   }
@@ -2205,7 +2205,7 @@
   .e-input-group.e-input-focus::after,
   .e-input-group.e-control-wrapper.e-input-focus::before,
   .e-input-group.e-control-wrapper.e-input-focus::after {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       @include input-group-animation-width;
     }
   }
@@ -2214,7 +2214,7 @@
   .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
   .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-right;
     }
   }
@@ -2223,14 +2223,14 @@
   .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
   .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-right;
     }
   }
 
   .e-input-group::after,
   .e-input-group.e-control-wrapper::after {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       @include input-group-animation-right;
     }
   }
@@ -2356,7 +2356,7 @@
 
   .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-style: $input-group-border-type-focus;
       border-width: $input-group-border-width-focus;
     }
@@ -2388,7 +2388,7 @@
   .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
   .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-style: $input-group-border-type-focus;
       border-width: $input-group-border-width-focus;
     }
@@ -2396,14 +2396,14 @@
 
   .e-input-group,
   .e-input-group.e-control-wrapper {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       border-bottom: $input-group-border;
     }
   }
 
   .e-input-group:not(.e-float-icon-left),
   .e-input-group.e-control-wrapper:not(.e-float-icon-left) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-bottom: $input-group-border;
     }
   }
@@ -2416,7 +2416,7 @@
   .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
   .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
   .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $input-group-full-border;
       border-width: $input-group-full-border-width;
     }
@@ -2430,7 +2430,7 @@
   .e-input-group.e-control-wrapper.e-success,
   .e-input-group.e-control-wrapper.e-warning,
   .e-input-group.e-control-wrapper.e-error {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       border: $input-group-full-border;
       border-width: $input-group-full-border-width;
     }
@@ -2452,7 +2452,7 @@
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
     background: $input-disable-bg-color;
     color: $input-disable-font-color;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);
       background-position: bottom -1px left 0;
       background-repeat: repeat-x;
@@ -2464,7 +2464,7 @@
 
   .e-input-group:not(.e-success):not(.e-warning):not(.e-error).e-disabled,
   .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error).e-disabled {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       border-style: $input-disable-border-type;
     }
   }
@@ -2770,7 +2770,7 @@
   .e-control.e-input-group.e-control-wrapper input.e-input,
   .e-control.e-float-input input,
   .e-control.e-float-input.e-control-wrapper input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-sizing;
     }
   }
@@ -3944,7 +3944,7 @@
   .e-input-group.e-control-wrapper .e-input-in-wrap,
   .e-float-input .e-input-in-wrap,
   .e-float-input.e-control-wrapper .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       display: flex;
       position: relative;
       width: 100%;
@@ -3955,7 +3955,7 @@
   .e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-input-group.e-float-icon-left .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $input-group-full-border;
       border-width: $input-group-full-border-width;
       margin-left: $input-inner-wrap-margin-left;
@@ -3969,7 +3969,7 @@
   .e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: $input-inner-wrap-margin-left;
     }
@@ -3989,7 +3989,7 @@
   .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translate3d(0, 16px, 0) scale(1);
     }
   }
@@ -4009,7 +4009,7 @@
   .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
     font-size: $float-label-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -22px;
       transform: translate3d(0, 6px, 0) scale(.92);
     }
@@ -4053,7 +4053,7 @@
   .e-bigger .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
     font-size: $float-label-bigger-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -20px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
@@ -4073,7 +4073,7 @@
   .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
     font-size: $float-label-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -21px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
@@ -4094,7 +4094,7 @@
   .e-bigger .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
     font-size: $float-label-bigger-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -20px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
@@ -4108,7 +4108,7 @@
   // Floating label on the top of the textarea
   .e-float-input textarea ~ .e-float-text,
   .e-float-input.e-control-wrapper textarea ~ .e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -11px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
@@ -4124,7 +4124,7 @@
   .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -11px;
     }
   }
@@ -4142,7 +4142,7 @@
   .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-bigger-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
@@ -4162,7 +4162,7 @@
   .e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
   .e-small .e-float-input.e-control-wrapper textarea ~ label.e-float-text {
     font-size: $float-placeholder-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -11px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
@@ -4186,7 +4186,7 @@
   .e-bigger .e-float-input.e-control-wrapper.e-input-group input,
   .e-float-input.e-control-wrapper.e-input-group.e-bigger input,
   .e-bigger .e-float-input.e-control-wrapper.e-input-group input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: 27px;
     }
   }
@@ -4207,7 +4207,7 @@
   .e-small .e-float-input.e-control-wrapper.e-input-group input,
   .e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-small .e-float-input.e-control-wrapper.e-input-group input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: 18px;
     }
   }
@@ -4231,7 +4231,7 @@
   .e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
   .e-bigger .e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-small .e-float-input.e-control-wrapper.e-input-group.e-bigger input  {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: 22px;
     }
   }
@@ -4242,7 +4242,7 @@
   .e-float-input.e-input-group.e-control-wrapper input,
   .e-float-input input,
   .e-float-input.e-control-wrapper input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: 22px;
     }
   }
@@ -4259,7 +4259,7 @@
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-bottom-width: $input-group-border-width-hover;
     }
   }
@@ -4276,7 +4276,7 @@
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       border-bottom-width: $input-group-border-width-hover;
     }
   }
@@ -4285,7 +4285,7 @@
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
   .e-float-input.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
   .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-bottom-width: $input-group-border-width-hover;
     }
   }
@@ -4298,7 +4298,7 @@
   .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::before,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       bottom: -2px;
     }
   }
@@ -4338,7 +4338,7 @@
   .e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
   .e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
   .e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-style: $input-group-border-type-focus;
       border-width: $zero-value $zero-value 1px;
     }
@@ -4348,7 +4348,7 @@
   .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -9px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -4378,7 +4378,7 @@
   .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-bigger-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
       transform: translate3d(0, -6px, 0) scale(.86);
     }
@@ -4415,7 +4415,7 @@
   .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -4452,7 +4452,7 @@
   .e-bigger .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-bigger-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -10px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -4515,7 +4515,7 @@
   .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-bigger-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -10px;
     }
     font-style: $input-font-style;
@@ -4557,7 +4557,7 @@
   .e-small .e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translate3d(0, 6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -4578,7 +4578,7 @@
 
   .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translate3d(0, 16px, 0) scale(1);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or  $input-skin-name == 'highcontrast' {
@@ -4663,7 +4663,7 @@
   .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -9px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -4698,7 +4698,7 @@
   .e-small .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -4735,7 +4735,7 @@
   .e-bigger .e-small.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-bigger-small-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -10px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -4769,7 +4769,7 @@
   .e-bigger .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-bigger-font-size;
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -8px;
       transform: translate3d(0, -6px, 0) scale(.86);
     }
@@ -4819,7 +4819,7 @@
   .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translate3d(0, 6px, 0) scale(.86);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -4873,7 +4873,7 @@
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translate3d(0, 6px, 0) scale(.86);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -4927,7 +4927,7 @@
   .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translate3d(0, 6px, 0) scale(.86);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -4961,7 +4961,7 @@
   .e-float-input textarea.e-disabled,
   .e-float-input.e-control-wrapper textarea[disabled],
   .e-float-input.e-control-wrapper textarea.e-disabled  {
-    @if $input-skin-name != 'material' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
       border-color: $input-disable-border-color;
       border-style: $input-disable-border-type;
     }
@@ -5173,14 +5173,14 @@
   textarea.e-input.e-small#{$css},
   .e-small input.e-input#{$css},
   .e-small textarea.e-input #{$css} {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $input-smaller-min-height;
     }
   }
 
   input.e-input#{$css},
   textarea.e-input#{$css} {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $input-min-height;
     }
   }
@@ -5189,7 +5189,7 @@
   .e-bigger textarea.e-input,
   input.e-input.e-bigger,
   textarea.e-input.e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $input-bigger-min-height;
     }
   }
@@ -5200,7 +5200,7 @@
   .e-small input.e-input.e-bigger,
   input.e-input.e-bigger.e-small,
   .e-small .e-bigger input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $input-bigger-smaller-min-height;
     }
   }
@@ -5216,13 +5216,13 @@
   .e-outline.e-float-input textarea,
   .e-outline.e-float-input.e-control-wrapper textarea.e-input,
   .e-outline.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       width: calc(100% - 1px);
     }
   }
 
   .e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       width: calc(100% - 80px);
     }
   }
@@ -5232,7 +5232,7 @@
   .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
   .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
   .e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       overflow: hidden;
       text-overflow: ellipsis;
       width: 100%;
@@ -5241,19 +5241,19 @@
 
   .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       width: calc(100% - 45px);
     }
   }
 
   .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       width: calc(100% - 75px);
     }
   }
   
   .e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       width: calc(100% - 110px);
     }
   }
@@ -5266,7 +5266,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       width: 0%;
     }
   }
@@ -5284,7 +5284,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
   .e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
   .e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: 1px solid $outline-border-color;
       border-radius: 4px;
       border-width: 1px;
@@ -5295,7 +5295,7 @@
 
   .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-top: $zero-value;
     }
   }
@@ -5328,7 +5328,7 @@
   .e-outline.e-float-input.e-input-group.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left),
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-float-icon-left),
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top-color: transparent;
     }
   }
@@ -5338,7 +5338,7 @@
   .e-outline .e-input-group.e-control-wrapper,
   .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-font-size;
     }
   }
@@ -5355,7 +5355,7 @@
   .e-bigger .e-outline.e-input-group.e-disabled,
   .e-outline.e-input-group.e-control-wrapper.e-bigger.e-disabled,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-disabled {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-bigger-input-font-size;
     }
   }
@@ -5366,7 +5366,7 @@
   .e-bigger .e-outline.e-input-group.e-disabled .e-input-group-icon,
   .e-outline.e-input-group.e-control-wrapper.e-bigger.e-disabled .e-input-group-icon,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-bigger-input-icon-font-size;
     }
   }
@@ -5398,7 +5398,7 @@
   .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error),
   .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error),
   .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-width: $outline-active-input-border;
     }
   }
@@ -5420,7 +5420,7 @@
   .e-outline.e-float-input:not(.e-float-icon-left).e-input-focus input,
   .e-outline.e-input-group:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       padding: $outline-input-padding-top $outline-input-padding-left $outline-input-padding-bottom;
     }
@@ -5437,7 +5437,7 @@
   .e-outline.e-float-input.e-control-wrapper textarea,
   .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input:focus,
   .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       margin: $outline-textarea-margin-top;
       padding: $zero-value $outline-input-padding-left $outline-input-padding-left;
@@ -5450,7 +5450,7 @@
   .e-outline.e-float-input.e-input-group.e-control-wrapper input,
   .e-outline.e-float-input input,
   .e-outline.e-float-input.e-control-wrapper input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       min-height: $outline-input-min-height;
     }
@@ -5468,7 +5468,7 @@
   .e-outline.e-float-input:not(.e-input-group) .e-float-line::after,
   .e-outline.e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
   .e-outline.e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       content: none;
     }
   }
@@ -5491,7 +5491,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-color: $input-active-border-color;
       box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
     }
@@ -5501,7 +5501,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-outline.e-input-group.e-float-icon-left .e-input-in-wrap,
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $input-group-border-width;
       border-width: $input-group-border-width;
       margin-left: $zero-value;
@@ -5512,7 +5512,7 @@
   .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin: 9px $outline-input-icon-margin-right 9px $zero-value;
     }
   }
@@ -5521,7 +5521,7 @@
   .e-outline.e-float-input.e-control-wrapper .e-clear-icon,
   .e-outline.e-input-group .e-clear-icon,
   .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-clear-icon-font-size;
       padding: 9px $outline-input-icon-margin-right 9px $zero-value;
     }
@@ -5531,14 +5531,14 @@
   .e-outline.e-float-input.e-input-group.e-float-icon-left .e-input,
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left .e-input,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-left: $zero-value;
     }
   }
 
   .e-outline.e-input-group .e-input-group-icon,
   .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-icon-font-size;
       margin: 9px $outline-input-icon-margin-right 9px $zero-value;
     }
@@ -5558,7 +5558,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
   .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $zero-value;
     }
   }
@@ -5578,7 +5578,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
     }
   }
@@ -5598,7 +5598,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       min-height: $outline-small-input-min-height;
     }
@@ -5630,7 +5630,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-small-label-font-size;
     }
   }
@@ -5661,7 +5661,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-bigger-label-font-size;
     }
   }
@@ -5670,7 +5670,7 @@
   .e-outline.e-input-group.e-control-wrapper,
   .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-valid-input-font-size;
     }
   }
@@ -5683,7 +5683,7 @@
   .e-bigger .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger .e-outline.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-bigger-input-font-size;
     }
   }
@@ -5696,7 +5696,7 @@
   .e-small .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper.e-small,
   .e-small .e-outline.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-small-input-font-size;
     }
   }
@@ -5717,7 +5717,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-small-bigger-input-font-size;
     }
   }
@@ -5800,7 +5800,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-small-bigger-label-font-size;
     }
   }
@@ -5835,7 +5835,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
   .e-small .e-outline.e-input-group.e-control-wrapper.e-input-focus input.e-input,
   .e-small .e-outline.e-input-group.e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $outline-small-input-padding-top $outline-small-input-padding-left;
     }
   }
@@ -5860,7 +5860,7 @@
   .e-small .e-outline.e-input-group textarea.e-input:focus,
   .e-small .e-outline.e-float-input textarea:focus,
   .e-small .e-outline.e-float-input.e-control-wrapper textarea:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       margin: $outline-small-textarea-margin-top;
       padding: $zero-value $outline-small-input-padding-left $outline-small-input-padding-left;
@@ -5879,7 +5879,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: $outline-small-input-icon-margin-right;
     }
@@ -5889,7 +5889,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small .e-outline.e-input-group .e-input-group-icon,
   .e-small .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: $outline-small-input-icon-margin-left;
     }
@@ -5901,7 +5901,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
   .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-small,
   .e-small .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-small-clear-icon-font-size;
       padding: 7px $outline-small-input-icon-margin-left 7px $zero-value;
     }
@@ -5923,7 +5923,7 @@
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group input,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       min-height: $outline-bigger-input-min-height;
     }
@@ -5935,7 +5935,7 @@
   .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
   .e-bigger .e-outline.e-input-group .e-clear-icon,
   .e-bigger .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-bigger-clear-icon-font-size;
       padding: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left $outline-bigger-input-icon-padding $zero-value;
     }
@@ -5953,7 +5953,7 @@
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: $outline-bigger-input-icon-margin-right;
     }
@@ -5965,7 +5965,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
   .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
   .e-bigger .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left  $outline-bigger-input-icon-padding $zero-value;
     }
   }
@@ -6000,7 +6000,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-bigger .e-outline.e-input-group.e-float-input:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left).e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $outline-bigger-input-padding-top $outline-bigger-input-padding-left;
     }
   }
@@ -6027,7 +6027,7 @@
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left) textarea.e-input:focus,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-float-input:not(.e-float-icon-left) textarea:focus,
   .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) textarea:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin: $outline-bigger-textarea-maring-top;
       padding: $zero-value $outline-bigger-input-padding-left $outline-bigger-input-padding-left;
     }
@@ -6053,7 +6053,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       min-height: $outline-small-bigger-input-min-height;
     }
@@ -6097,7 +6097,7 @@
   .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-outline.e-input-group.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $outline-small-bigger-input-margin-top $outline-small-bigger-input-margin-left $outline-small-bigger-input-margin-bottom;
     }
   }
@@ -6128,7 +6128,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) textarea.e-input:focus,
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) textarea:focus,
   .e-outline.e-float-input.e-bigger.e-small:not(.e-float-icon-left) textarea:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       margin: $outline-bigger-textarea-maring-top;
       padding: $zero-value $outline-small-bigger-input-margin-left $outline-small-bigger-input-margin-left;
@@ -6141,7 +6141,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
   .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-small-bigger-clear-icon-font-size;
       padding: 9px $outline-small-bigger-icon-margin-left 9px $zero-value;
     }
@@ -6159,7 +6159,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: $outline-small-bigger-icon-margin-right;
     }
@@ -6171,7 +6171,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
   .e-bigger .e-outline.e-input-group.e-small .e-input-group-icon,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin: $outline-bigger-small-group-icon-top $outline-small-bigger-icon-margin-left $outline-bigger-small-group-icon-bottom $zero-value;
     }
   }
@@ -6180,7 +6180,7 @@
   .e-small .e-outline.e-float-input.e-input-group .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-top: $outline-bigger-small-group-icon-top;
     }
   }
@@ -6189,7 +6189,7 @@
   .e-outline.e-float-input textarea,
   .e-outline.e-float-input.e-control-wrapper input,
   .e-outline.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $outline-input-border;
       border-width: $outline-input-group-border-width;
     }
@@ -6230,7 +6230,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       display: flex;
       left: $zero-value;
@@ -6256,7 +6256,7 @@
   .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-bigger-label-line-height;
     }
   }
@@ -6283,7 +6283,7 @@
   .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-textarea-bigger-label-line-height;
     }
   }
@@ -6302,7 +6302,7 @@
   .e-bigger .e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-textarea-bigger-label-line-height;
     }
   }
@@ -6314,7 +6314,7 @@
   .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
   .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-small-label-line-height;
     }
   }
@@ -6334,7 +6334,7 @@
   .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
   .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-textarea-small-label-line-height;
     }
   }
@@ -6346,7 +6346,7 @@
   .e-small.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
   .e-small.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-textarea-small-label-line-height;
     }
   }
@@ -6358,7 +6358,7 @@
   .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
   .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-label-line-height;
     }
   }
@@ -6370,7 +6370,7 @@
   .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
   .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-textarea-label-line-height;
     }
   }
@@ -6380,7 +6380,7 @@
   .e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
   .e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-textarea-label-line-height;
     }
   }
@@ -6404,7 +6404,7 @@
   .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-small-bigger-label-line-height;
     }
   }
@@ -6436,7 +6436,7 @@
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-textarea-small-bigger-label-line-height;
     }
   }
@@ -6460,7 +6460,7 @@
   .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       line-height: $outline-textarea-small-bigger-label-line-height;
     }
   }
@@ -6471,7 +6471,7 @@
   .e-outline.e-float-input label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top: solid $outline-wrapper-border-infocused;
       border-top-color: transparent;
       box-shadow: inset $zero-value 1px transparent;
@@ -6499,7 +6499,7 @@
   .e-bigger .e-outline.e-float-input label.e-float-text::after,
   .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
   .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-width: $outline-bigger-label-min-width;
     }
   }
@@ -6516,7 +6516,7 @@
   .e-small .e-outline.e-float-input label.e-float-text::after,
   .e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
   .e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-width: $outline-small-label-min-width;
     }
   }
@@ -6533,7 +6533,7 @@
   .e-bigger.e-small .e-outline.e-float-input label.e-float-text::after,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-width: $outline-bigger-small-label-min-width;
     }
   }
@@ -6544,7 +6544,7 @@
   .e-outline.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top-color: $outline-border-color;
       border-width: 1px;
     }
@@ -6556,7 +6556,7 @@
   .e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top-color: $input-success-color;
     }
   }
@@ -6567,7 +6567,7 @@
   .e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-color: $input-success-color;
     }
   }
@@ -6578,7 +6578,7 @@
   .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top-color: $input-error-color;
     }
   }
@@ -6589,7 +6589,7 @@
   .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-color: $input-error-color;
     }
   }
@@ -6600,7 +6600,7 @@
   .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top-color: $input-warning-color;
     }
   }
@@ -6611,7 +6611,7 @@
   .e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-color: $input-warning-color;
     }
   }
@@ -6619,7 +6619,7 @@
   .e-outline label.e-float-text::before,
   .e-outline.e-float-input label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-left: solid 1px transparent;
       border-radius: $outline-label-margin $zero-value;
       left: $outline-label-before-left;
@@ -6630,7 +6630,7 @@
   .e-rtl.e-outline label.e-float-text::before,
   .e-rtl.e-outline.e-float-input label.e-float-text::before,
   .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-left: $zero-value;
       border-radius: $zero-value $outline-label-margin;
       left: $outline-label-before-left-rtl;
@@ -6640,7 +6640,7 @@
   .e-rtl.e-outline label.e-float-text::after,
   .e-rtl.e-outline.e-float-input label.e-float-text::after,
   .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-radius: $outline-label-border-radius $zero-value;
       border-right: $zero-value;
       left: $outline-label-after-left-rtl;
@@ -6650,7 +6650,7 @@
   .e-outline label.e-float-text::after,
   .e-outline.e-float-input label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-radius: $zero-value $outline-label-border-radius;
       border-right: solid 1px transparent;
       flex-grow: 1;
@@ -6665,7 +6665,7 @@
   .e-outline.e-float-input.e-input-focus label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top-color: $input-active-border-color;
     }
   }
@@ -6682,7 +6682,7 @@
   .e-outline.e-float-input.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
   .e-outline.e-float-input.e-input-group.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
   .e-outline.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top-color: transparent;
       box-shadow: inset 1px $zero-value $input-active-border-color, inset -1px $zero-value $input-active-border-color, inset $zero-value -1px $input-active-border-color;
     }
@@ -6714,7 +6714,7 @@
   .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-floating-label-font-size;
       top: $outline-float-label-top;
       transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
@@ -6729,7 +6729,7 @@
   .e-rtl .e-outline.e-input-group .e-clear-icon,
   .e-outline.e-input-group.e-control-wrapper.e-rtl .e-clear-icon,
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-rtl .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-left: $outline-input-icon-margin-right;
       padding-right: $outline-input-icon-margin-left;
     }
@@ -6764,14 +6764,14 @@
   .e-rtl.e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-right: $zero-value;
     }
   }
 
   .e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-input-icon-margin-right;
     }
   }
@@ -6779,7 +6779,7 @@
   .e-rtl.e-outline.e-input-group .e-input-group-icon,
   .e-rtl .e-outline.e-input-group .e-input-group-icon,
   .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-input-icon-margin-right;
       margin-right: $outline-input-icon-margin-left;
     }
@@ -6795,7 +6795,7 @@
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-small,
   .e-small .e-rtl.e-outline.e-input-group.e-control-wrapper .e-clear-icon .e-rtl.e-small .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-left: $outline-small-input-icon-margin-left;
       padding-right: $zero-value;
     }
@@ -6808,7 +6808,7 @@
   .e-small .e-rtl.e-outline.e-input-group .e-input-group-icon,
   .e-rtl.e-small .e-outline.e-input-group .e-input-group-icon,
   .e-small .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon .e-rtl.e-small .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-small-input-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6825,7 +6825,7 @@
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
   .e-bigger.e-rtl .e-outline.e-input-group .e-clear-icon,
   .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-left: $outline-bigger-input-icon-margin-left;
       padding-right: $zero-value;
     }
@@ -6843,7 +6843,7 @@
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
   .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-bigger-input-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6861,7 +6861,7 @@
   .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon,
   .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-small-bigger-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6879,7 +6879,7 @@
   .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-clear-icon,
   .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
   .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-left: $outline-small-bigger-icon-margin-left;
       padding-right: $zero-value;
     }
@@ -6889,7 +6889,7 @@
   .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-input-icon-margin-right;
       margin-right: $zero-value;
     }
@@ -6905,7 +6905,7 @@
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-bigger-input-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6915,7 +6915,7 @@
   .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-small-input-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6932,7 +6932,7 @@
   .e-rtl.e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child .e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $outline-small-bigger-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -7019,7 +7019,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $outline-float-label-top;
       transform: translate3d(0, 0, 0) scale(1);
     }
@@ -7069,7 +7069,7 @@
   .e-bigger .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-small-bigger-label-font-size;
     }
   }
@@ -7086,7 +7086,7 @@
   .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $outline-float-label-top;
       transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
     }
@@ -7097,7 +7097,7 @@
   .e-outline.e-float-input textarea,
   .e-outline.e-float-input.e-control-wrapper textarea,
   .e-outline.e-float-input.e-input-group textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7106,7 +7106,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) input:focus ~ label.e-float-text,
   .e-outline.e-float-input.e-valid-input:not(.e-input-focus) textarea:valid ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) textarea:focus ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       color: $outline-label-font-color-with-value;
     }
   }
@@ -7119,7 +7119,7 @@
   .e-rtl.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
   .e-rtl.e-outline.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
   .e-small .e-rtl.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $outline-float-label-top;
     }
   }
@@ -7134,7 +7134,7 @@
   .e-outline.e-small .e-float-input .e-clear-icon::before,
   .e-outline.e-small .e-input-group .e-clear-icon::before,
   .e-outline.e-small .e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-small-clear-icon;
     }
   }
@@ -7143,7 +7143,7 @@
   .e-outline.e-float-input.e-control-wrapper .e-clear-icon::before,
   .e-outline.e-input-group .e-clear-icon::before,
   .e-outline.e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-clear-icon;
     }
   }
@@ -7158,7 +7158,7 @@
   .e-outline.e-bigger .e-float-input .e-clear-icon::before,
   .e-outline.e-bigger .e-input-group .e-clear-icon::before,
   .e-outline.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-bigger-clear-icon;
     }
   }
@@ -7175,7 +7175,7 @@
   .e-outline.e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
   .e-outline.e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
   .e-outline.e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-bigger-small-clear-icon;
     }
   }
@@ -7184,7 +7184,7 @@
 
   .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-float-label-font-size;
     }
   }
@@ -7201,7 +7201,7 @@
   .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-outline-float-label-font-size;
     }
   }
@@ -7210,7 +7210,7 @@
   .e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-outline-float-label-font-size;
     }
   }
@@ -7225,7 +7225,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-outline-float-label-font-size;
     }
   }
@@ -7235,7 +7235,7 @@
   .e-outline.e-float-input.e-control-wrapper label.e-float-text,
   .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-float-label-font-size;
     }
   }
@@ -7243,7 +7243,7 @@
   .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
     }
   }
@@ -7251,7 +7251,7 @@
   .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-float-label-font-size;
     }
   }
@@ -7262,7 +7262,7 @@
   .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
     }
   }
@@ -7273,7 +7273,7 @@
   .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-outline-float-label-font-size;
     }
   }
@@ -7284,7 +7284,7 @@
   .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
     }
   }
@@ -7295,7 +7295,7 @@
   .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-outline-float-label-font-size;
     }
   }
@@ -7310,7 +7310,7 @@
   .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
     }
   }
@@ -7325,7 +7325,7 @@
   .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-outline-float-label-font-size;
     }
   }
@@ -7342,7 +7342,7 @@
   .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-outline-float-label-font-size;
     }
   }
@@ -7359,7 +7359,7 @@
   .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-outline-float-label-font-size;
     }
   }
@@ -7370,7 +7370,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-small label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-outline-float-label-font-size;
     }
   }
@@ -7379,7 +7379,7 @@
   .e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-outline-float-label-font-size;
     }
   }
@@ -7392,7 +7392,7 @@
   .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
   .e-outline.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
   .e-small .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-outline-float-label-font-size;
     }
   }
@@ -7411,7 +7411,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-outline-float-label-font-size;
     }
   }
@@ -7426,7 +7426,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-outline-float-label-font-size;
     }
   }
@@ -7447,14 +7447,14 @@
   .e-filled.e-input-group.e-control-wrapper input,
   .e-filled.e-input-group input.e-input,
   .e-filled.e-input-group.e-control-wrapper input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
 
   .e-filled.e-float-input:not(.e-input-group) input,
   .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7472,7 +7472,7 @@
   .e-control.e-filled.e-input-group.e-control-wrapper input.e-input,
   .e-control.e-filled.e-float-input input,
   .e-control.e-filled.e-float-input.e-control-wrapper input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7494,7 +7494,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger input.e-input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7507,7 +7507,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input.e-input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7529,7 +7529,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small input.e-input,
   .e-small .e-filled.e-float-input.e-control-wrapper input,
   .e-small .e-filled.e-float-input.e-control-wrapper input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7541,7 +7541,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-group) input.e-input,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input  {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7563,7 +7563,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input.e-input,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper input,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7576,7 +7576,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input.e-input,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7586,7 +7586,7 @@
   .e-filled.e-input-group.e-control-wrapper textarea,
   .e-filled.e-float-input textarea,
   .e-filled.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7610,7 +7610,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger textarea.e-input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea.e-input  {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7632,7 +7632,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small textarea.e-input,
   .e-small .e-filled.e-float-input.e-control-wrapper textarea,
   .e-small .e-filled.e-float-input.e-control-wrapper textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7654,7 +7654,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea.e-input,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
     }
   }
@@ -7665,7 +7665,7 @@
   .e-filled.e-float-input textarea,
   .e-filled.e-float-input.e-control-wrapper input,
   .e-filled.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $float-input-border;
       border-width: $zero-value;
     }
@@ -7679,7 +7679,7 @@
   .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
   .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
   .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-bottom-width: $zero-value;
     }
   }
@@ -7708,7 +7708,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-width: $zero-value;
     }
   }
@@ -7717,7 +7717,7 @@
 
   .e-filled.e-input-group,
   .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-radius: 4px 4px $zero-value $zero-value;
       padding: $filled-wrapper-padding;
     }
@@ -7727,7 +7727,7 @@
   .e-bigger .e-filled.e-input-group,
   .e-filled.e-input-group.e-control-wrapper.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-top: $filled-wrapper-margin;
       padding: $bigger-filled-wrapper-padding;
     }
@@ -7736,7 +7736,7 @@
   .e-filled.e-input-group.e-small,
   .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-small .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-top: $filled-wrapper-margin;
       padding: $small-filled-wrapper-padding;
     }
@@ -7750,7 +7750,7 @@
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-top: $filled-wrapper-margin;
       padding: $bigger-small-filled-wrapper-padding;
     }
@@ -7758,7 +7758,7 @@
 
   .e-filled.e-float-input,
   .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $input-group-full-border;
       border-radius: 4px 4px $zero-value $zero-value;
       border-width: $input-group-full-border-width;
@@ -7771,7 +7771,7 @@
   .e-bigger .e-filled.e-float-input,
   .e-filled.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-top: $filled-wrapper-margin;
       padding: $bigger-filled-float-input-wrapper-padding;
     }
@@ -7780,7 +7780,7 @@
   .e-filled.e-float-input.e-small,
   .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-top: $filled-wrapper-margin;
       padding: $small-filled-float-input-wrapper-padding;
     }
@@ -7794,7 +7794,7 @@
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-top: $filled-wrapper-margin;
       padding: $bigger-small-filled-float-input-wrapper-padding;
     }
@@ -7804,7 +7804,7 @@
   .e-rtl.e-filled.e-input-group.e-control-wrapper,
   .e-rtl .e-filled.e-input-group,
   .e-rtl .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-wrapper-rtl-padding;
     }
   }
@@ -7817,7 +7817,7 @@
   .e-bigger.e-rtl .e-filled.e-input-group,
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger,
   .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $bigger-filled-wrapper-rtl-padding;
     }
   }
@@ -7828,7 +7828,7 @@
   .e-rtl .e-filled.e-input-group.e-small,
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $small-filled-wrapper-rtl-padding;
     }
   }
@@ -7849,7 +7849,7 @@
   .e-bigger.e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $bigger-small-filled-wrapper-rtl-padding;
     }
   }
@@ -7858,7 +7858,7 @@
   .e-rtl.e-filled.e-float-input.e-control-wrapper,
   .e-rtl .e-filled.e-float-input,
   .e-rtl .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-float-input-wrapper-rtl-padding;
     }
   }
@@ -7871,7 +7871,7 @@
   .e-bigger.e-rtl .e-filled.e-float-input,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $bigger-filled-float-input-wrapper-rtl-padding;
     }
   }
@@ -7882,7 +7882,7 @@
   .e-rtl .e-filled.e-float-input.e-small,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $small-filled-float-input-wrapper-rtl-padding;
     }
   }
@@ -7903,7 +7903,7 @@
   .e-bigger.e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $bigger-small-filled-float-input-wrapper-rtl-padding;
     }
   }
@@ -7916,13 +7916,13 @@
   .e-filled textarea.e-input#{$css},
   .e-filled.e-input-group textarea.e-input,
   .e-filled.e-input-group.e-control-wrapper textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-input-padding;
     }
   }
 
   .e-filled .e-input#{$css}:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-bottom: $filled-input-padding-bottom;
     }
   }
@@ -7933,7 +7933,7 @@
   .e-filled.e-input-group.e-control-wrapper textarea.e-input:focus,
   .e-filled.e-input-group.e-input-focus input.e-input,
   .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-input-padding;
     }
   }
@@ -7946,7 +7946,7 @@
   .e-bigger .e-filled textarea.e-input#{$css},
   .e-bigger .e-filled.e-input-group .e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-input-padding;
     }
   }
@@ -7959,20 +7959,20 @@
   .e-bigger .e-filled.e-input-group.e-input-focus .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-bigger.e-input-focus .e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-input-padding;
     }
   }
 
   .e-filled .e-input.e-bigger#{$css}:focus,
   .e-bigger .e-filled .e-input#{$css}:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-bottom: $filled-bigger-input-padding-bottom;
     }
   }
 
   .e-filled .e-input.e-small#{$css}:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-bottom: $filled-small-input-padding-bottom;
     }
   }
@@ -7980,7 +7980,7 @@
   .e-filled .e-input#{$css}.e-small,
   .e-filled.e-input-group.e-small .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-input-padding;
     }
   }
@@ -7989,14 +7989,14 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input:focus,
   .e-filled.e-input-group.e-small.e-input-focus .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-input-padding;
     }
   }
 
   .e-filled .e-input.e-small.e-bigger#{$css}:focus,
   .e-bigger .e-filled .e-input.e-small#{$css}:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding-bottom: $filled-bigger-small-input-padding-bottom;
     }
   }
@@ -8004,7 +8004,7 @@
   .e-filled .e-input.e-small.e-bigger#{$css},
   .e-bigger .e-filled .e-input#{$css}.e-small,
   .e-small .e-filled .e-input#{$css}.e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-input-padding;
     }
   }
@@ -8015,7 +8015,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input.e-bigger,
   .e-bigger .e-filled.e-input-group.e-small .e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-input-padding;
     }
   }
@@ -8032,14 +8032,14 @@
   .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-input-focus .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-input-padding;
     }
   }
 
   .e-filled.e-float-input input,
   .e-filled.e-float-input.e-control-wrapper input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-float-input-padding;
     }
   }
@@ -8050,7 +8050,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger input,
   .e-filled.e-float-input.e-control-wrapper input.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-float-input-padding;
     }
   }
@@ -8061,14 +8061,14 @@
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input,
   .e-filled.e-float-input.e-control-wrapper.e-small input.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-float-input-padding;
     }
   }
 
   .e-filled.e-float-input.e-small input,
   .e-filled.e-float-input.e-control-wrapper.e-small input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-float-input-padding;
     }
   }
@@ -8090,7 +8090,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
   .e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-input-rtl-padding;
       text-indent: 0;
     }
@@ -8112,7 +8112,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
   .e-rtl .e-filled.e-float-input.e-input-focus input,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-focus input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-float-input-rtl-padding;
       text-indent: 0;
     }
@@ -8142,7 +8142,7 @@
   .e-small.e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
   .e-small .e-filled.e-input-group.e-rtl.e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-input-rtl-padding;
       text-indent: 0;
     }
@@ -8168,7 +8168,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-input-focus input,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
   .e-small .e-filled.e-float-input.e-rtl.e-input-focus input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-float-input-rtl-padding;
       text-indent: 0;
     }
@@ -8198,7 +8198,7 @@
   .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input,
   .e-bigger .e-filled.e-input-group.e-rtl.e-input-focus input.e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-input-rtl-padding;
       text-indent: 0;
     }
@@ -8224,7 +8224,7 @@
   .e-bigger.e-rtl .e-filled.e-float-input.e-input-focus input,
   .e-bigger .e-filled.e-float-input.e-rtl.e-input-focus input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-float-input-rtl-padding;
       text-indent: 0;
     }
@@ -8268,7 +8268,7 @@
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
   .e-rtl .e-filled.e-input-group.e-bigger.e-small.e-input-focus input.e-input,
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small.e-input-focus input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-input-rtl-padding;
       text-indent: 0;
     }
@@ -8310,7 +8310,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-bigger.e-input-focus input,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input,
   .e-rtl .e-filled.e-float-input.e-bigger.e-small.e-input-focus input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-float-input-rtl-padding;
       text-indent: 0;
     }
@@ -8324,7 +8324,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-disabled,
   .e-filled.e-float-input.e-input-group.e-disabled,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-input-font-size;
     }
   }
@@ -8333,7 +8333,7 @@
   .e-bigger .e-filled.e-float-input,
   .e-filled.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-input-font-size;
     }
   }
@@ -8346,7 +8346,7 @@
   .e-bigger .e-filled.e-float-input.e-input-group.e-disabled,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled,
   .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-input-font-size;
     }
   }
@@ -8355,7 +8355,7 @@
   .e-small .e-filled.e-float-input,
   .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-input-font-size;
     }
   }
@@ -8368,7 +8368,7 @@
   .e-small .e-filled.e-float-input.e-input-group.e-disabled,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
   .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-input-font-size;
     }
   }
@@ -8381,7 +8381,7 @@
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-input-font-size;
     }
   }
@@ -8402,7 +8402,7 @@
   .e-small.e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled,
   .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
   .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-input-font-size;
     }
   }
@@ -8413,7 +8413,7 @@
   .e-bigger .e-filled.e-input-group:not(.e-float-input) .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $bigger-filled-default-input-min-height;
     }
   }
@@ -8430,7 +8430,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group input,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $bigger-filled-input-min-height;
     }
   }
@@ -8439,7 +8439,7 @@
   .e-small .e-filled.e-input-group:not(.e-float-input) .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
   .e-small .e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $small-filled-default-input-min-height;
     }
   }
@@ -8456,7 +8456,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group input,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $small-filled-input-min-height;
     }
   }
@@ -8465,7 +8465,7 @@
   .e-bigger .e-filled.e-input-group.e-small:not(.e-float-input) .e-input .e-small .e-filled.e-input-group.e-bigger:not(.e-float-input) .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-input) .e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $bigger-small-filled-default-input-min-height;
     }
   }
@@ -8485,21 +8485,21 @@
   .e-float-input.e-control-wrapper.e-filled.e-input-group.e-bigger.e-small input,
   .e-bigger .e-float-input.e-control-wrapper.e-filled.e-input-group.e-small input,
   .e-small .e-float-input.e-control-wrapper.e-filled.e-input-group.e-bigger input  {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $bigger-small-filled-input-min-height;
     }
   }
 
   .e-filled.e-input-group input.e-input,
   .e-filled.e-input-group.e-control-wrapper input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $filled-default-input-min-height;
     }
   }
 
   .e-filled.e-input-group:not(.e-float-input) input.e-input,
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper input.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $filled-default-input-min-height;
     }
   }
@@ -8507,7 +8507,7 @@
   .e-float-input.e-filled.e-input-group.e-control-wrapper input,
   .e-float-input.e-filled input,
   .e-float-input.e-filled.e-control-wrapper input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $filled-input-min-height;
     }
   }
@@ -8519,7 +8519,7 @@
   .e-filled.e-float-input.e-control-wrapper label.e-float-text,
   .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-float-label-font-size;
       left: $filled-input-label-left;
       letter-spacing: .009375em;
@@ -8536,7 +8536,7 @@
 
   .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-float-label-font-size;
       padding-left: $float-label-padding;
       top: $filled-input-label-top;
@@ -8559,7 +8559,7 @@
   .e-filled.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
   .e-filled.e-float-input.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-float-label-font-size;
       top: $filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8578,7 +8578,7 @@
   .e-filled.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-float-label-font-size;
       top: $filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8588,7 +8588,7 @@
   .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-float-label-font-size;
       top: $filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8599,7 +8599,7 @@
   .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-float-label-font-size;
       top: $filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8631,7 +8631,7 @@
   .e-bigger .e-filled.e-float-input.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top-after-floating;
     }
@@ -8649,7 +8649,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top-after-floating;
     }
@@ -8661,7 +8661,7 @@
   .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8675,7 +8675,7 @@
   .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8697,7 +8697,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top-after-floating;
     }
@@ -8711,7 +8711,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top-after-floating;
     }
@@ -8723,7 +8723,7 @@
   .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8737,7 +8737,7 @@
   .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8769,7 +8769,7 @@
   .e-bigger .e-filled.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top-after-floating;
     }
@@ -8787,7 +8787,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top-after-floating;
     }
@@ -8803,7 +8803,7 @@
   .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8821,7 +8821,7 @@
   .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -8841,7 +8841,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top;
     }
@@ -8859,7 +8859,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top;
     }
@@ -8871,7 +8871,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top;
     }
@@ -8881,7 +8881,7 @@
   .e-small .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top;
     }
@@ -8895,7 +8895,7 @@
   .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
   .e-filled.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top;
     }
@@ -8915,7 +8915,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top;
       transform: none;
@@ -8964,7 +8964,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translateY(-50%) scale(.75);
     }
   }
@@ -8979,7 +8979,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top;
     }
@@ -9021,7 +9021,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       transform: translateY(-50%) scale(.75);
     }
   }
@@ -9034,14 +9034,14 @@
   .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
   .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $filled-input-label-left;
     }
   }
 
   .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $filled-input-label-left;
     }
   }
@@ -9055,7 +9055,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $filled-input-label-left;
     }
   }
@@ -9064,7 +9064,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $filled-input-label-left;
     }
   }
@@ -9081,7 +9081,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $bigger-filled-input-label-left;
     }
   }
@@ -9090,7 +9090,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $bigger-filled-input-label-left;
     }
   }
@@ -9113,7 +9113,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $bigger-filled-input-label-left;
     }
   }
@@ -9126,7 +9126,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $bigger-filled-input-label-left;
     }
   }
@@ -9143,7 +9143,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $small-filled-input-label-left;
     }
   }
@@ -9152,7 +9152,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $small-filled-input-label-left;
     }
   }
@@ -9175,7 +9175,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $small-filled-input-label-left;
     }
   }
@@ -9188,7 +9188,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $small-filled-input-label-left;
     }
   }
@@ -9205,7 +9205,7 @@
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $bigger-small-filled-input-label-left;
     }
   }
@@ -9214,7 +9214,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $bigger-small-filled-input-label-left;
     }
   }
@@ -9239,7 +9239,7 @@
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $bigger-small-filled-input-label-left;
     }
   }
@@ -9254,7 +9254,7 @@
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $bigger-small-filled-input-label-left;
     }
   }
@@ -9263,7 +9263,7 @@
 
   .e-filled.e-float-input .e-float-line,
   .e-float-input.e-filled.e-control-wrapper .e-float-line {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       bottom: -1px;
       position: absolute;
     }
@@ -9273,7 +9273,7 @@
   .e-float-input.e-filled .e-float-text,
   .e-float-input.e-filled.e-control-wrapper .e-float-line,
   .e-float-input.e-filled.e-control-wrapper .e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $zero-value;
     }
   }
@@ -9282,7 +9282,7 @@
   .e-filled.e-filled.e-input-group:not(.e-disabled):not(.e-float-icon-left)::after,
   .e-filled.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::before,
   .e-filled.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       bottom: -1px;
     }
   }
@@ -9307,7 +9307,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small .e-filled.e-input-group .e-input-group-icon,
   .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-input-icon-size;
       margin-bottom: $zero-value;
       margin-top: $zero-value;
@@ -9353,7 +9353,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small.e-rtl .e-filled.e-input-group .e-input-group-icon,
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 8px $zero-value $zero-value;
     }
   }
@@ -9362,7 +9362,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small .e-filled.e-input-group .e-input-group-icon,
   .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-input-icon-size;
       min-height: $small-filled-input-icon-min-height;
       min-width: $small-filled-input-icon-min-height;
@@ -9378,7 +9378,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small.e-rtl .e-filled.e-input-group .e-input-group-icon,
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 4px $zero-value $zero-value;
     }
   }
@@ -9389,7 +9389,7 @@
   .e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group .e-input-group-icon,
   .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-input-icon-size;
       min-height: $bigger-filled-input-icon-min-height;
       min-width: $bigger-filled-input-icon-min-height;
@@ -9403,7 +9403,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-input-icon-size;
       min-height: $bigger-small-filled-input-icon-min-height;
       min-width: $bigger-small-filled-input-icon-min-height;
@@ -9447,7 +9447,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 8px $zero-value $zero-value;
     }
   }
@@ -9470,11 +9470,11 @@
   .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-input-icon-size;
       margin-bottom: $zero-value;
       margin-top: $zero-value;
-      padding: $zero-value $zero-value $zero-value 8px;
+      padding: 8px;
     }
   }
 
@@ -9482,7 +9482,7 @@
   .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-input-icon-size;
       padding: $zero-value $zero-value $zero-value 4px;
     }
@@ -9496,7 +9496,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 4px $zero-value $zero-value;
     }
   }
@@ -9507,7 +9507,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-input-icon-size;
       padding: $zero-value $zero-value $zero-value 8px;
     }
@@ -9519,7 +9519,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-input-icon-size;
       padding: $zero-value $zero-value $zero-value 8px;
     }
@@ -9531,7 +9531,7 @@
   .e-filled.e-float-input.e-control-wrapper .e-clear-icon,
   .e-filled.e-input-group .e-clear-icon,
   .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-input-clear-icon-size;
       padding: $zero-value $zero-value $zero-value 8px;
     }
@@ -9539,7 +9539,7 @@
 
   .e-filled.e-input-group .e-clear-icon,
   .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $filled-input-icon-min-height;
       min-width: $filled-input-icon-min-height;
       padding: $zero-value $zero-value $zero-value 8px;
@@ -9548,7 +9548,7 @@
 
   .e-filled.e-float-input.e-input-group .e-clear-icon,
   .e-filled.e-float-input.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value $zero-value $zero-value 8px;
     }
   }
@@ -9559,7 +9559,7 @@
   .e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
   .e-bigger .e-filled.e-input-group .e-clear-icon,
   .e-bigger .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-input-clear-icon-size;
       min-height: $bigger-filled-input-icon-min-height;
       min-width: $bigger-filled-input-icon-min-height;
@@ -9573,7 +9573,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-input.e-bigger .e-clear-icon,
   .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value $zero-value $zero-value 8px;
     }
   }
@@ -9584,7 +9584,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
   .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-input-clear-icon-size;
       min-height: $bigger-small-filled-input-icon-min-height;
       min-width: $bigger-small-filled-input-icon-min-height;
@@ -9604,7 +9604,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
   .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value $zero-value $zero-value 8px;
     }
   }
@@ -9615,7 +9615,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
   .e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-small,
   .e-small .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-input-clear-icon-size;
       min-height: $small-filled-input-icon-min-height;
       min-width: $small-filled-input-icon-min-height;
@@ -9635,7 +9635,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
   .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value $zero-value $zero-value 4px;
     }
   }
@@ -9676,7 +9676,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
   .e-small.e-rtl .e-filled.e-input-group .e-clear-icon,
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 8px $zero-value $zero-value;
     }
   }
@@ -9689,7 +9689,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
   .e-small.e-rtl .e-filled.e-input-group .e-clear-icon,
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 4px $zero-value $zero-value;
     }
   }
@@ -9730,7 +9730,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 8px $zero-value $zero-value;
     }
   }
@@ -9743,7 +9743,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 4px $zero-value $zero-value;
     }
   }
@@ -9752,7 +9752,7 @@
   .e-filled.e-float-input.e-control-wrapper .e-clear-icon::before,
   .e-filled.e-input-group .e-clear-icon::before,
   .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-input-clear-icon-size;
     }
   }
@@ -9767,7 +9767,7 @@
   .e-small .e-filled.e-float-input .e-clear-icon::before,
   .e-small .e-filled.e-input-group .e-clear-icon::before,
   .e-small .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-input-clear-icon-size;
     }
   }
@@ -9782,7 +9782,7 @@
   .e-bigger .e-filled.e-float-input .e-clear-icon::before,
   .e-bigger .e-filled.e-input-group .e-clear-icon::before,
   .e-bigger .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-input-clear-icon-size;
     }
   }
@@ -9799,7 +9799,7 @@
   .e-small .e-filled.e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
   .e-bigger .e-filled.e-float-input.e-small input:first-child ~ .e-clear-icon::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-input-clear-icon-size;
     }
   }
@@ -9818,7 +9818,7 @@
   .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $filled-input-label-top-after-floating;
     }
   }
@@ -9843,7 +9843,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $bigger-filled-input-label-top-after-floating;
     }
   }
@@ -9860,7 +9860,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $small-filled-input-label-top-after-floating;
     }
   }
@@ -9885,7 +9885,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $bigger-small-filled-input-label-top-after-floating;
     }
   }
@@ -9898,7 +9898,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-style: none;
       border-width: $zero-value;
     }
@@ -9908,7 +9908,7 @@
   .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $filled-input-label-top;
     }
   }
@@ -9925,7 +9925,7 @@
   .e-bigger.e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $bigger-filled-input-label-top;
     }
   }
@@ -9938,7 +9938,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $small-filled-input-label-top;
     }
   }
@@ -9955,14 +9955,14 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: $bigger-small-filled-input-label-top;
     }
   }
 
   .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-input-icon-size;
       margin: $zero-value;
       min-height: $filled-input-left-icon-min-height;
@@ -9977,7 +9977,7 @@
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-filled-input-icon-size;
       margin: $zero-value;
       min-height: $bigger-filled-input-left-icon-min-height;
@@ -9992,7 +9992,7 @@
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
   .e-small .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
   .e-small .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $small-filled-input-icon-size;
       margin: $zero-value;
       min-height: $small-filled-input-left-icon-min-height;
@@ -10007,7 +10007,7 @@
   .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $bigger-small-filled-input-icon-size;
       margin: $zero-value;
       min-height: $bigger-small-filled-input-left-icon-min-height;
@@ -10020,7 +10020,7 @@
   .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin: $zero-value;
       min-height: $filled-input-left-icon-min-height;
       min-width: $filled-input-left-icon-min-width;
@@ -10040,7 +10040,7 @@
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin: $zero-value;
       min-height: $bigger-filled-input-left-icon-min-height;
       min-width: $bigger-filled-input-left-icon-min-width;
@@ -10060,7 +10060,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin: $zero-value;
       min-height: $small-filled-input-left-icon-min-height;
       min-width: $small-filled-input-left-icon-min-width;
@@ -10080,7 +10080,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin: $zero-value;
       min-height: $bigger-small-filled-input-left-icon-min-height;
       min-width: $bigger-small-filled-input-left-icon-min-width;
@@ -10094,7 +10094,7 @@
   .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
   .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $zero-value;
     }
   }
@@ -10108,7 +10108,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $zero-value;
     }
   }
@@ -10124,7 +10124,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $zero-value;
     }
   }
@@ -10147,7 +10147,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $zero-value;
     }
   }
@@ -10163,7 +10163,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $zero-value;
     }
   }
@@ -10186,7 +10186,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $zero-value;
     }
   }
@@ -10202,7 +10202,7 @@
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       left: $zero-value;
     }
   }
@@ -10227,7 +10227,7 @@
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       right: $zero-value;
     }
   }
@@ -10250,7 +10250,7 @@
   .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
   .e-bigger .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
   .e-small .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-right: $zero-value;
     }
   }
@@ -10291,7 +10291,7 @@
   .e-rtl.e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
   .e-rtl.e-bigger .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
   .e-rtl.e-small .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
     }
   }
@@ -10302,7 +10302,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
   .e-small.e-bigger .e-filled.e-input-group .e-input-group-icon,
   .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-right: $zero-value;
     }
   }
@@ -10319,7 +10319,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
   .e-rtl.e-small.e-bigger .e-filled.e-input-group .e-input-group-icon,
   .e-rtl.e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: $zero-value;
     }
@@ -10329,7 +10329,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small .e-filled.e-input-group .e-input-group-icon,
   .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-right: $zero-value;
     }
   }
@@ -10342,7 +10342,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-rtl.e-small .e-filled.e-input-group .e-input-group-icon,
   .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: $zero-value;
     }
@@ -10367,14 +10367,14 @@
   .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea,
   .e-filled.e-input-group.e-control-wrapper textarea.e-input,
   .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-textarea-padding;
     }
   }
 
   .e-filled.e-float-input textarea,
   .e-filled.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-float-textarea-padding;
     }
   }
@@ -10391,7 +10391,7 @@
   .e-bigger .e-filled.e-input-group textarea.e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper textarea,
   .e-bigger .e-filled.e-input-group.e-control-wrapper textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-textarea-padding;
     }
   }
@@ -10402,7 +10402,7 @@
   .e-filled.e-float-input.e-control-wrapper textarea.e-bigger,
   .e-bigger .e-filled.e-float-input textarea,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-float-textarea-padding;
     }
   }
@@ -10418,7 +10418,7 @@
   .e-bigger .e-filled.e-input-group.e-input-focus textarea,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-textarea-padding;
     }
   }
@@ -10431,7 +10431,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input,
   .e-small .e-filled.e-input-group textarea,
   .e-small .e-filled.e-input-group textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-textarea-padding;
     }
   }
@@ -10442,7 +10442,7 @@
   .e-filled.e-float-input.e-control-wrapper textarea.e-small,
   .e-small .e-filled.e-float-input textarea,
   .e-small .e-filled.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-float-textarea-padding;
     }
   }
@@ -10456,7 +10456,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
   .e-small .e-filled.e-input-group.e-input-focus textarea,
   .e-small .e-filled.e-input-group.e-input-focus textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-textarea-padding;
     }
   }
@@ -10477,7 +10477,7 @@
   .e-small .e-filled.e-input-group.e-bigger textarea.e-input,
   .e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-textarea-padding;
     }
   }
@@ -10497,7 +10497,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea,
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-float-textarea-padding;
     }
   }
@@ -10512,14 +10512,14 @@
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
   .e-bigger .e-small.e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-textarea-padding;
     }
   }
 
   .e-filled.e-input-group.e-multi-line-input,
   .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-textarea-wrapper-padding;
     }
   }
@@ -10528,7 +10528,7 @@
   .e-bigger .e-filled.e-input-group.e-multi-line-input,
   .e-filled.e-input-group.e-control-wrapper.e-bigger.e-multi-line-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $bigger-filled-textarea-wrapper-padding;
     }
   }
@@ -10536,7 +10536,7 @@
   .e-filled.e-input-group.e-small.e-multi-line-input,
   .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $small-filled-textarea-wrapper-padding;
     }
   }
@@ -10549,14 +10549,14 @@
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger.e-multi-line-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $bigger-small-filled-textarea-wrapper-padding;
     }
   }
 
   .e-filled.e-float-input.e-multi-line-input,
   .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-float-textarea-wrapper-padding;
     }
   }
@@ -10565,7 +10565,7 @@
   .e-bigger .e-filled.e-float-input.e-multi-line-input,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-multi-line-input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $bigger-filled-float-textarea-wrapper-padding;
     }
   }
@@ -10573,7 +10573,7 @@
   .e-filled.e-float-input.e-small.e-multi-line-input,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $small-filled-float-textarea-wrapper-padding;
     }
   }
@@ -10586,7 +10586,7 @@
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-multi-line-input {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $bigger-small-filled-float-textarea-wrapper-padding;
     }
   }
@@ -10604,7 +10604,7 @@
   .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus,
   .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
   .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-textarea-padding;
       text-indent: 0;
     }
@@ -10622,7 +10622,7 @@
   .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus,
   .e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
   .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-float-textarea-padding;
       text-indent: 0;
     }
@@ -10648,7 +10648,7 @@
   .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
   .e-small .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus,
   .e-small .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-textarea-padding;
       text-indent: 0;
     }
@@ -10670,7 +10670,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
   .e-small .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus,
   .e-small .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-small-float-textarea-padding;
       text-indent: 0;
     }
@@ -10696,7 +10696,7 @@
   .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus,
   .e-bigger .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus,
   .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-textarea-padding;
       text-indent: 0;
     }
@@ -10718,7 +10718,7 @@
   .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
   .e-bigger .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus,
   .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-float-textarea-padding;
       text-indent: 0;
     }
@@ -10750,7 +10750,7 @@
   .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger textarea.e-input:focus,
   .e-rtl .e-filled.e-input-group.e-multi-line-input.e-bigger.e-small textarea.e-input:focus,
   .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-small textarea.e-input:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-textarea-padding;
       text-indent: 0;
     }
@@ -10780,7 +10780,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger textarea:focus,
   .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-small textarea:focus,
   .e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger.e-small textarea:focus {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $filled-bigger-small-float-textarea-padding;
       text-indent: 0;
     }
@@ -10792,7 +10792,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $input-group-full-border;
       border-width: $zero-value;
       margin-left: 8px;
@@ -10806,7 +10806,7 @@
   .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: 8px;
     }
@@ -10820,7 +10820,7 @@
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-bigger.e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $input-group-full-border;
       border-width: $zero-value;
       margin-left: 8px;
@@ -10835,7 +10835,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: 4px;
     }
   }
@@ -10856,7 +10856,7 @@
   .e-bigger.e-small .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-bigger.e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: 8px;
     }
@@ -10878,7 +10878,7 @@
   .e-small .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       margin-left: $zero-value;
       margin-right: 4px;
     }
@@ -10888,7 +10888,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
   .e-filled.e-float-input.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
   .e-filled.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-bottom-width: $zero-value;
     }
   }
@@ -10897,7 +10897,7 @@
   .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::before,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation;
       bottom: -1px;
     }
@@ -10907,21 +10907,21 @@
   .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation;
     }
   }
 
   .e-filled.e-input-group.e-float-icon-left::before,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left::before {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-left;
     }
   }
 
   .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before  {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-left;
     }
   }
@@ -10930,7 +10930,7 @@
   .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus::after,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::before,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-width;
       bottom: -1px;
     }
@@ -10940,28 +10940,28 @@
   .e-filled.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-float-line::after,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-float-line::before,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-float-line::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-width;
     }
   }
 
   .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-right;
     }
   }
 
   .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-right;
     }
   }
 
   .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       @include input-group-animation-right;
     }
   }
@@ -10970,14 +10970,14 @@
   .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       width: $zero-value;
     }
   }
 
   .e-filled.e-input-group.e-float-icon-left,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-bottom: $input-group-border;
     }
   }
@@ -10995,7 +10995,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-success.e-float-icon-left,
   .e-filled.e-input-group.e-control-wrapper.e-warning.e-float-icon-left,
   .e-filled.e-input-group.e-control-wrapper.e-error.e-float-icon-left {
-    @if $input-skin-name == 'material' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $input-group-full-border;
       border-width: $input-group-full-border-width;
     }