@syncfusion/blazor-themes 26.1.41 → 26.2.4

package/SCSS-Themes/fluent2-dark.scss

@@ -700,8 +700,8 @@ $msg-warning-color-alt1: mapcolorvariable('msg-warning-color-alt1') !default;
 $msg-warning-bg-color-alt1: mapcolorvariable('msg-warning-bg-color-alt1') !default;
 $msg-warning-border-color-alt1: mapcolorvariable('msg-warning-border-color-alt1') !default;
 $msg-warning-color-alt2: mapcolorvariable('msg-warning-color-alt2') !default;
-$msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2:') !default;
-$msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2:') !default;
+$msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2') !default;
+$msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2') !default;
 
 $msg-warning-icon-color: mapcolorvariable('msg-warning-icon-color') !default;
 $msg-warning-icon-color-alt1: mapcolorvariable('msg-warning-icon-color-alt1') !default;
@@ -7952,7 +7952,11 @@ $textarea-float-top: -28px !default;
   .e-input-group.e-input-focus input.e-input,
   .e-input-group.e-control-wrapper.e-input-focus input.e-input,
   .e-float-input.e-control-wrapper.e-input-focus input,
-  .e-float-input.e-input-focus input,
+  .e-float-input.e-input-focus input {
+    padding-left: $input-text-indent;
+    text-indent: 0;
+  }
+
   textarea.e-input#{$css},
   .e-input-group textarea.e-input,
   .e-input-group textarea,
@@ -7966,7 +7970,12 @@ $textarea-float-top: -28px !default;
   .e-input-group.e-control-wrapper textarea.e-input:focus,
   .e-float-input.e-control-wrapper textarea:focus,
   .e-float-input textarea:focus {
-    padding-left: $input-text-indent;
+    @if $input-skin-name == 'fluent2' {
+      padding-left: 12px;
+    }
+    @else {
+      padding-left: $input-text-indent;
+    }
     text-indent: 0;
   }
 
@@ -8293,7 +8302,12 @@ $textarea-float-top: -28px !default;
   .e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus,
   .e-bigger .e-float-input.e-control-wrapper textarea:focus,
   .e-bigger .e-float-input textarea:focus {
-    padding-left: $input-bigger-text-indent;
+    @if $input-skin-name == 'fluent2' {
+      padding: $textarea-bigger-padding;
+    }
+    @else {
+      padding-left: $input-bigger-text-indent;
+    }
     text-indent: 0;
   }
 
@@ -9193,18 +9207,18 @@ $textarea-float-top: -28px !default;
     }
   }
 
-  .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
-  .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left),
-  .e-float-input:hover:not(.e-disabled):not(.e-float-icon-left),
-  .e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
-  .e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
-  .e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
-  .e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
-  .e-float-input.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left),
-  .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]),
-  .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]) {
+  .e-input-group:hover:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
+  .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
+  .e-float-input:hover:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
+  .e-float-input:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input:not([disabled]),
+  .e-float-input:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea:not([disabled]),
+  .e-float-input:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input:not([disabled]),
+  .e-float-input:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea:not([disabled]),
+  .e-float-input.e-control-wrapper:hover:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
+  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input:not([disabled]),
+  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea:not([disabled]),
+  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input:not([disabled]),
+  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea:not([disabled]) {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-bottom-width: $input-group-border-width-hover;
     }
@@ -16359,7 +16373,7 @@ $textarea-float-top: -28px !default;
     border-color: $input-box-border-color;
   }
 
-  .e-bigger .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error) {
+  .e-bigger .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-textarea) {
     @if $input-skin-name == 'fluent2' {
       padding-bottom: 0;
     }
@@ -16394,6 +16408,20 @@ $textarea-float-top: -28px !default;
     }
   }
 
+  textarea.e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error) {
+    @if $input-skin-name == 'fluent2' {
+      border-bottom-color: $input-active-border-color;
+      padding-bottom: 4px;
+      border-bottom-width: 0;
+    }
+  }
+
+  .e-bigger textarea.e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error) {
+    @if $input-skin-name == 'fluent2' {
+      padding-bottom: 6px;
+    }
+  }
+
   .e-input-group .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
   .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
@@ -16509,15 +16537,11 @@ $textarea-float-top: -28px !default;
     @if $input-skin-name == 'bootstrap4'  {
       transition: $input-transition-shadow;
     }
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI'  {
       border-color: $input-group-border-color-focus;
       border-radius: $input-groupo-focus-border-radius;
       box-shadow: $input-group-focus-box-shadow;
     }
-    @if $input-skin-name == 'FluentUI' {
-      border-radius: $input-groupo-focus-border-radius;
-      border-width: 2px;
-    }
   }
 
   .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success,
@@ -21038,9 +21062,11 @@ $breadcrumb-item-active-bg-color: $content-bg-color-selected !default;
         &:focus-visible {
           @if $skin-name == 'fluent2' {
             box-shadow: $secondary-shadow-focus;
+            color: $breadcrumb-item-color !important; /* stylelint-disable-line declaration-no-important */
 
-            & .e-breadcrumb-icon {
-              color: $icon-color;
+            & .e-breadcrumb-icon,
+            &.e-breadcrumb-url .e-breadcrumb-icon {
+              color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
             }
           }
         }
@@ -24367,7 +24393,7 @@ $btn-keyboard-focus-border-color: $shadow-color !default;
           @if $skin-name == 'fluent2' {
             background: transparent;
             border-color: $secondary-border-color-hover;
-            color: $secondary-text-color-hover;
+            color: $secondary-outline-button-text-color-pressed;
           }
 
           @if $skin-name == 'bootstrap5' {
@@ -24400,7 +24426,7 @@ $btn-keyboard-focus-border-color: $shadow-color !default;
           @include outline-active;
           @if $skin-name == 'fluent2' {
             background: transparent;
-            color: $secondary-text-color-selected;
+            color: $secondary-outline-button-text-color-pressed;
             outline: 2px solid;
             outline-offset: -2px;
           }
@@ -25306,6 +25332,7 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
           font-size: 12px;
           line-height: 16px;
           padding: 8px 16px;
+          box-sizing: content-box;
         }
       }
     }
@@ -31362,6 +31389,12 @@ $drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default
             background: $drop-down-btn-li-bgcolor;
           }
           color: $drop-down-btn-li-selection-font-color;
+          & .e-menu-icon,
+          & .e-menu-url {
+            @if $skin-name == 'fluent2' {
+              color: $drop-down-btn-li-selection-font-color;
+            }
+          }
         }
 
         &:active,
@@ -33612,7 +33645,13 @@ $slider-button-vup-bg-image:  none !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -33622,7 +33661,10 @@ $slider-button-vup-bg-image:  none !default;
           }
 
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -33652,7 +33694,13 @@ $slider-button-vup-bg-image:  none !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -33662,7 +33710,10 @@ $slider-button-vup-bg-image:  none !default;
           }
 
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -33738,7 +33789,12 @@ $slider-button-vup-bg-image:  none !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
 
@@ -33764,6 +33820,10 @@ $slider-button-vup-bg-image:  none !default;
             @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               @include alignment(calc(100% + 3px), -9px, 'horizontal');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
 
@@ -33863,7 +33923,7 @@ $slider-button-vup-bg-image:  none !default;
           background-position: center center;
         }
 
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -33953,7 +34013,7 @@ $slider-button-vup-bg-image:  none !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
 
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {
@@ -46431,6 +46491,12 @@ $dialog-enable-resize-padding-bottom: 15px !default;
   box-sizing: border-box;
 }
 
+@if $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
+  .e-dialog .e-dlg-content .e-richtexteditor .e-rte-container .e-rte-tb-float {
+    top: -$dialog-content-padding-top !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
 
 @include export-module('dialog-theme') {
   .e-dialog {
@@ -56470,7 +56536,8 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
   
     .e-list-item {
   
-      div.e-icons::before {
+      div.e-icons.e-icon-expandable::before,
+      div.e-icons.e-icon-collapsible::before {
         content: '\e75c';
       }
     }
@@ -64595,19 +64662,6 @@ $listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
       text-align: center;
     }
 
-    &:not(.e-list-template) .e-list-item,
-    .e-list-nrt,
-    .e-selectall-parent {
-      height: $listbox-item-height;
-      line-height: $listbox-item-line-height;
-      padding: $listbox-item-padding;
-      position: relative;
-      @if $skin-name == 'fluent2' {
-        font-size: 14px;
-        border-radius: 4px !important; /* stylelint-disable-line declaration-no-important */
-      }
-    }
-
     .e-list-parent {
       height: 100%;
       min-height: $listbox-item-height;
@@ -65109,6 +65163,23 @@ $listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
   }
 }
 
+.e-listbox-wrapper,
+.e-listbox-container,
+.e-listboxtool-wrapper .e-listbox-wrapper {
+  &:not(.e-list-template) .e-list-item,
+  .e-list-nrt,
+  .e-selectall-parent {
+    height: $listbox-item-height;
+    line-height: $listbox-item-line-height;
+    padding: $listbox-item-padding;
+    position: relative;
+    @if $skin-name == 'fluent2' {
+      font-size: 14px;
+      border-radius: 4px !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+}
+
 
 @mixin avatar {
   height: $listbox-template-avatar-size;
@@ -71243,7 +71314,7 @@ $de-hlt-clr-height-bigger: 24px;
             }
         }
     }
-    .e-listview .e-list-icon {
+    .e-de-listview.e-de-listview-icon.e-icons.e-list-icon {
         height: 24px;
         width: 16px;
         margin-right: $e-de-ctnr-break-listview-margin-right;
@@ -77302,7 +77373,7 @@ $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .33em 0 .4em !default;
 $grid-ungroup-rtl-padding-right: -10px !default;
 $grid-headercelldiv-padding: 0 18px 0 5px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
-$grid-headercell-div-padding: 0 .4em !default;
+$grid-headercell-div-padding: 0 1.5em 0 .4em !default;
 $grid-group-text-width: auto !default;
 $grid-grouptopleftcell-border-top: 2px solid !default;
 $grid-group-caption-font-size: $text-sm !default;
@@ -79482,7 +79553,22 @@ $grid-checkmark-color: $primary-text-color !default;
       text-transform: $grid-header-text-transform;
       user-select: none;
     }
-
+    
+    .e-rightalign:not(.e-fltr-icon) .e-headercelldiv,
+    .e-leftalign:not(.e-fltr-icon) .e-headercelldiv,
+    .e-centeralign:not(.e-fltr-icon) .e-headercelldiv{
+      padding: 0 .4em ;
+      @if $grid-skin == 'material' {
+        padding: $grid-headercell-div-padding;
+      }
+      @if $grid-skin == 'fabric' {
+        padding: 0 1px 0;
+      }
+      @if $grid-skin == 'highcontrast' {
+        padding: 0;
+      }
+    }
+    
     .e-headercelldiv.e-headerchkcelldiv {
       overflow: visible;
     }
@@ -79926,7 +80012,7 @@ $grid-checkmark-color: $primary-text-color !default;
       }
   
     &.e-default:not(.e-rtl) tr {
-        & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-addfreezefirstchildborder),
+        & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder),
         & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
         & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
             border-left-width: 0;
@@ -80363,7 +80449,10 @@ $grid-checkmark-color: $primary-text-color !default;
         border-top-color: $grid-columnchooser-footer-border-color;
         border-top-width: 1px;
         margin-top: 0;
-        overflow-x: hidden;
+        overflow-x: auto;
+        & .e-checkbox-wrapper .e-label.e-checkboxfiltertext{
+          white-space: nowrap;
+        }
       }
 
       @if $grid-skin == 'fluent2' {
@@ -81383,6 +81472,9 @@ $grid-checkmark-color: $primary-text-color !default;
           .e-headercelldiv.e-headerchkcelldiv {
             padding: $grid-rtl-headercelldiv-padding;
             text-align: right;
+            @if $grid-skin == 'highcontrast' {
+              margin: -7px 0;
+            }
 
             & .e-sortnumber {
               @include grid-flot-margin(left, $grid-fltr-rtl-sortnumber-margin);
@@ -81394,6 +81486,9 @@ $grid-checkmark-color: $primary-text-color !default;
         .e-headercelldiv.e-headerchkcelldiv {
           padding: $grid-rtl-headercelldiv-padding;
           text-align: right;
+          @if $grid-skin == 'highcontrast' {
+            margin: -7px 0;
+          }
 
           & .e-sortnumber {
             @include grid-flot-margin(left, $grid-rtl-sortnumber-margin);
@@ -81414,9 +81509,6 @@ $grid-checkmark-color: $primary-text-color !default;
 
             & .e-sortnumber {
               margin: $grid-rtl-sort-num-left-align-margin;
-              @if $grid-skin == 'bootstrap4' {
-                margin: 4px -2px 0 0;
-              }
             }
           }
 
@@ -81629,7 +81721,7 @@ $grid-checkmark-color: $primary-text-color !default;
       }
 
       &.e-default {
-        & tr td:last-child:not(.e-xlsel-left-border, .e-addfreezefirstchildborder),
+        & tr td:last-child:not(.e-xlsel-left-border, .e-rowcell-lastchild, .e-addfreezefirstchildborder),
         & .e-gridheader table tr th:last-child:not(.e-firstcell) {
           border-left: 0;
         }
@@ -100846,7 +100938,7 @@ $pv-corrupted-pop-content-margin-right: 53px !default;
 $pv-corrupted-pop-header-rtl-text-align: right !default;
 $pv-toolbar-btn-width-mobile: 36px !default;
 $pv-toolbar-btn-height-mobile: 30px !default;
-$pv-annotation-opacity-popup-background-color: $white !default;
+$pv-annotation-opacity-popup-background-color: $content-bg-color-alt1 !default;
 $pv-annotation-opacity-popup-color: $content-text-color !default;
 $pv-annotation-opacity-popup-padding: 16px !default;
 $pv-annotation-opacity-popup-min-height: 48px !default;
@@ -101029,14 +101121,14 @@ $pv-input-active-color: rgba($primary, .54) !default;
 $pv-input-hover-background: $transparent !default;
 $pv-input-hover-color: rgba($primary, .54) !default;
 $pv-input-background: $transparent !default;
-$pv-bookmark-container-background-color: var(--color-sf-white) !default;
+$pv-bookmark-container-background-color: $content-bg-color-alt1 !default;
 $pv-nav-toolbar-text-color: rgba($primary, .87) !default;
-$pv-bookmark-container-border: 1px solid $primary !default;
+$pv-bookmark-container-border: 1px solid $border-light !default;
 $pv-bookmark-list-border-bottom: 1px solid var(--color-sf-border-alt) !default;
 $pv-annotation-opacity-popup-box-shadow: 0 3px 8px 0 $content-bg-color-hover !default;
 $pv-annotation-dropdown-background-color: $transparent !default;
 $pv-annotation-dropdown-border-color: $transparent !default;
-$pv-annotation-dropdown-background-color-hover: $content-bg-color-alt3 !default;
+$pv-annotation-dropdown-background-color-hover: var(--color-sf-content-bg-color-hover) !default;
 $pv-annotation-dropdown-border-color-hover: $content-bg-color-alt3 !default;
 $pv-annotation-dropdown-background-color-active: $content-bg-color-alt2 !default;
 $pv-annotation-dropdown-border-color-active: $transparent !default;
@@ -101496,14 +101588,14 @@ $lg-desktop: 1399.98;
   }
   
   .e-pv-diagram-resize-handle{
-    @if $theme-name == 'fluent2' {
+    @if $theme-name == 'fluent2' or $theme-name == 'bootstrap5.3' {
       fill: $pv-selection-touch-element-background-color !important/* stylelint-disable-line declaration-no-important */
     }
   }
 
   .e-pv-diagram-border,
   .e-pv-diagram-resize-handle {
-    @if $theme-name=='fluent2' {
+    @if $theme-name == 'fluent2' or $theme-name == 'bootstrap5.3' {
       stroke: $pv-selection-touch-element-background-color !important;/* stylelint-disable-line declaration-no-important */
     }
   }
@@ -101811,7 +101903,9 @@ $lg-desktop: 1399.98;
   .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
     height: $pv-toolbar-btn-height;
     min-width: $pv-toolbar-btn-width;
-    width: $pv-toolbar-btn-width;
+    @if ($skin-name != 'fluent2') {
+      width: $pv-toolbar-btn-width;
+    }
     @if $skin-name == 'FluentUI' {
       line-height: $pv-toolbar-btn-height;
       min-width: 40px;
@@ -102729,7 +102823,8 @@ $lg-desktop: 1399.98;
     padding: $pv-thumbnail-view-button-selection-padding;
   }
 
-  .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
+  .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
+  .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
   {
     background: $pv-thumbnail-view-button-selection-background;
     border: $pv-thumbnail-view-button-selection-border;
@@ -103092,7 +103187,9 @@ $lg-desktop: 1399.98;
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
-  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
+  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
+  .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
+  .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon {
     color: $pv-icon-color;
     @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
       box-shadow: none;
@@ -103156,25 +103253,39 @@ $lg-desktop: 1399.98;
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
   .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
-  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover {
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
+  .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover,
+  .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:focus {
     @if $skin-name == 'bootstrap4' {
       color: $pv-icon-color-hover;
     }
     @if $skin-name == 'bootstrap5' {
       color: $white;
     }
+    @if $skin-name == 'fluent2' {
+      color: var(--color-sf-toolbar-icon-color);
+    }
     @if $skin-name == 'FluentUI' {
       color: $pv-item-selection-color;
     }
   }
 
+  .e-pv-shapes-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover{
+    @if $theme-name == 'bootstrap5.3' {
+      color: var(--color-sf-secondary-text-color-pressed);
+    }
+    @if $theme-name == 'bootstrap5' {
+      color: $pv-item-selection-color;
+    }
+  }
+
   .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
   .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
   .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus {
     @if $skin-name == 'bootstrap4' {
       color: $pv-icon-color-hover;
     }
-    @if $skin-name == 'bootstrap5' {
+    @if ($skin-name == 'bootstrap5') {
       color: $pv-icon-color;
     }
     @if $skin-name == 'FluentUI' {
@@ -103182,12 +103293,23 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
+  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
+  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
+    @if ($skin-name == 'fluent2') {
+      color: $pv-icon-color;
+    }
+  }
+
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
     @if $skin-name == 'bootstrap4' {
       color: $pv-icon-color-hover;
     }
+    @if $skin-name == 'fluent2' {
+      color: var(--color-sf-toolbar-icon-color);
+    }
   }
 
   .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
@@ -103368,6 +103490,17 @@ $lg-desktop: 1399.98;
 
   .e-pv-search-input-mobile {
     height: $pv-search-input-height;
+    max-height: 150px !important;/* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-pdfviewer.e-pv-mobile-view .e-pv-nav-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child,
+  .e-bigger .e-pdfviewer.e-pv-mobile-view .e-pv-nav-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
+    margin-left: 3px;
+  }
+ 
+  .e-pdfviewer.e-pv-mobile-view .e-pv-nav-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:last-child,
+  .e-bigger .e-pdfviewer.e-pv-mobile-view .e-pv-nav-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:last-child {
+    margin-right: 3px;
   }
 
   .e-pv-match-case-container {
@@ -103465,13 +103598,11 @@ $lg-desktop: 1399.98;
   }
 
   .e-pv-notification-popup {
-    height: $pv-notification-popup-height;
     margin: 0 10px;
     max-width: $pv-notification-popup-width;
   }
 
   .e-pv-notification-popup.e-pv-notification-large-content {
-    height: $pv-notification-popup-height-large-content;
     max-width: $pv-notification-popup-width-large-content;
   }
 
@@ -103539,10 +103670,13 @@ $lg-desktop: 1399.98;
     border-bottom: 2px solid;
     margin-top: 0;
     padding-top: 5px;
-    @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
+    @if ($skin-name=='bootstrap5') {
       margin-top: -4px;
       padding-top: 0;
     }
+    @if ($theme-name=='fluent2') {
+      padding-top: 0;
+    }
     @if $skin-name == 'FluentUI' {
       line-height: 11px;
     }
@@ -103554,7 +103688,12 @@ $lg-desktop: 1399.98;
       line-height: 1.71em;
     }
     border-bottom: 2px solid;
-    margin-top: 0;
+    @if ($skin-name == 'fluent2') {
+      margin-top: 5px;
+    }
+    @else {
+      margin-top: 0;
+    }
     padding-top: 1px;
     vertical-align: initial;
     @if $skin-name == 'FluentUI' {
@@ -103566,9 +103705,12 @@ $lg-desktop: 1399.98;
   .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
     margin-top: 0;
     padding-top: 7px;
-    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
+    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
       padding-top: 0;
     }
+    @if ( or $theme-name == 'fluent2'){
+      padding-top: 5px;
+    }
     vertical-align: initial;
   }
 
@@ -103580,6 +103722,13 @@ $lg-desktop: 1399.98;
     vertical-align: initial;
   }
 
+  .e-pv-annotation-thickness-popup-container-mobile,
+  .e-pv-annotation-opacity-popup-container-mobile {
+    @if $skin-name != 'Material3' {
+      background-color: $pv-annotation-opacity-popup-background-color;
+    }
+  }
+
   .e-pv-annotation-opacity-popup-container,
   .e-pv-annotation-thickness-popup-container {
     @if $skin-name != 'Material3' {
@@ -103859,6 +104008,13 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active:not(:hover) {
+    @if $skin-name == 'fluent2' {
+      background-color: $pv-annotation-dd-background-color-active;
+      color: $pv-icon-color;
+    }
+  }
+
   .e-pv-annotation-color-container.e-dropdown-btn.e-btn,
   .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn,
   .e-pv-annotation-stroke-container.e-dropdown-btn.e-btn,
@@ -103938,13 +104094,6 @@ $lg-desktop: 1399.98;
     }
   }
 
-  .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
-  .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
-    @if ($theme-name == 'fluent2') {
-      line-height: 28px;
-    }
-  }
-
   .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
   .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
     @if ($skin-name == 'bootstrap5') {
@@ -104042,6 +104191,13 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
+  .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
+    @if ($skin-name == 'bootstrap5') {
+      color: $pv-icon-color;
+    }
+  }
+
   .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
   .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
     @if $skin-name == 'FluentUI' {
@@ -104250,6 +104406,9 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'FluentUI' {
       margin-left: 195px;
     }
+    @if ($skin-name == 'bootstrap5') {
+      margin-left: 145px !important;/* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-pv-properties-line-start,
@@ -104573,17 +104732,27 @@ $lg-desktop: 1399.98;
   .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
   .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
   .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
-    @if $skin-name != 'Material3' {
+    @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
       line-height: $pv-annot-toolbar-dropdown-btn-line-height;
     }
   }
 
   .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item.e-selected {
-    @if $skin-name == 'bootstrap5' {
+    @if $skin-name == 'bootstrap5' or $theme-name == 'bootstrap5.3' {
       background: $secondary-bg-color-pressed;
     }
   }
 
+  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item.e-selected .e-pv-stamp-icon,
+  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item.e-selected .e-caret {
+    @if $theme-name == 'bootstrap5.3' {
+      color: var(--color-sf-secondary-text-color-pressed);
+    }
+    @if $theme-name == 'bootstrap5' {
+      color: $pv-item-selection-color;
+    }
+  }
+
   .e-bigger .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
   .e-bigger .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
     height: $pv-toolbar-btn-height-big;
@@ -104677,17 +104846,9 @@ $lg-desktop: 1399.98;
     padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
   }
 
-  .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
-  .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
-    @if $theme-name == 'fluent2' {
-      padding-left: 24px !important;/* stylelint-disable-line declaration-no-important */
-      padding-top: 24px !important;/* stylelint-disable-line declaration-no-important */
-    }
-  }
-
   .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
     @if $theme-name == 'fluent2' {
-      padding: 8px !important;/* stylelint-disable-line declaration-no-important */
+      color: var(--color-sf-secondary-text-color);
     }
   }
 
@@ -105027,11 +105188,13 @@ $lg-desktop: 1399.98;
     padding-right: 7px;
     @if $skin-name == 'Material3' {
       font-size: $text-xs;
+      padding-left: 12px;
+      padding-right: 12px;
     }
   }
 
   .e-pdfviewer .e-btn-save.e-outline.e-primary:disabled {
-    @if ($skin-name != 'bootstrap5' and $skin-name != 'Material3') {
+    @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'Material3') {
       background-color: $pv-save-button-bg-color;
       border-radius: 2px;
       color: $pv-save-button-color;
@@ -105141,6 +105304,9 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'bootstrap4' {
       color: $pv-title-close-color;
     }
+    @if $skin-name == 'fluent2' {
+      color: var(--color-sf-secondary-text-color);
+    }
     height: $pv-title-close-height;
     position: $pv-title-close-position;
     right: 11px;
@@ -105169,7 +105335,7 @@ $lg-desktop: 1399.98;
   .e-pv-comments-panel-text {
     font-size: 15px;
     padding-left: 85px;
-    color: rgba(var(--color-sf-on-surface-variant));
+    color: var(--color-sf-content-text-color-alt1);
   }
 
   .e-pv-comments-content-container {
@@ -105357,8 +105523,34 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
+    @if ($skin-name == 'fluent2') {
+      margin-top: -4px;
+    }
+  }
+
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
+    @if ($skin-name == 'fluent2') {
+      margin-top: -5px;
+    }
+  }
+
+  .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
+  .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
+  .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
+    @if ($skin-name == 'fluent2') {
+      padding-top: 8px;
+    }
+  }
+
   .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
-    margin-top: $pv-stamp-icon-margin-top;
+    @if ($skin-name == 'fluent2') {
+      margin-top: -4px;
+    }
+    @else {
+      margin-top: $pv-stamp-icon-margin-top;
+    }
     @if $theme-name != 'fluent2'{
       padding-left: 7px;
     }
@@ -105412,7 +105604,7 @@ $lg-desktop: 1399.98;
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-container {
     background: transparent;
-    width: 229px;
+    max-width: 229px;
   }
 
   .e-pv-status-div {
@@ -105428,7 +105620,7 @@ $lg-desktop: 1399.98;
   }
 
   .e-pdfviewer .e-input-group.e-control-wrapper.e-editable-elements.e-input-focus {
-    @if $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
       caret-color: $pv-comment-text-cursor-color;
     }
   }
@@ -105548,10 +105740,14 @@ $lg-desktop: 1399.98;
   .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-right-align.e-pv-tbar-btn.e-tooltip.textprop-option-active,
   .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-center-align.e-pv-tbar-btn.e-tooltip.textprop-option-active,
   .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-justfiy-align.e-pv-tbar-btn.e-tooltip.textprop-option-active {
-    @if $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap5' and $skin-name != 'fluent2' {
       background: $pv-signature-footer-color;
       border-color: $pv-signature-footer-color;
     }
+    @else if ($skin-name == 'fluent2'){
+      background: $pv-item-selection-background-color;
+      border-color: $pv-annotation-dropdown-border-color-hover;
+    }
     @else {
       background: $secondary-bg-color-pressed;
       border-color: $secondary-bg-color-pressed;
@@ -105682,7 +105878,9 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'bootstrap5' {
       color: $pv-icon-color;
       height: 32px;
-      line-height: 32px;
+      @if ($theme-name != 'fluent2') {
+        line-height: 32px;
+      }
     }
     @else {
       color: $pv-icon-color;
@@ -105739,13 +105937,6 @@ $lg-desktop: 1399.98;
     border-color: $pv-annotation-dropdown-border-color;
   }
 
-  .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
-  .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
-    @if $theme-name == 'fluent2' {
-      margin-top: -10px;
-    }
-  }
-
   .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
   .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
     @if $skin-name == 'bootstrap4' {
@@ -106314,6 +106505,7 @@ $lg-desktop: 1399.98;
 
   .e-pv-properties-form-field-group-btn-div {
     display: grid;
+    align-content: space-between;
   }
 
   .e-pv-properties-form-field-option-dropdown-list-div {
@@ -106672,7 +106864,6 @@ $lg-desktop: 1399.98;
     }
     @if $theme-name == 'fluent2'{
       font-family: $font-family;
-      margin-left: 7px;
     }
   }
 
@@ -117521,7 +117712,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
 
     &:focus {
@@ -123690,6 +123881,12 @@ $image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
         margin-top: 5px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
+
+    @if $skin-name == 'fluent2' {
+      & .e-dropdown-btn.e-ie-ddb-popup {
+        padding-left: 16px;
+      }
+    }
   }
   
   .e-image-editor {
@@ -123996,6 +124193,16 @@ $image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
         width: 16px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
+
+    @if $skin-name == 'fluent2' {
+      & .e-dropdown-btn.e-ie-ddb-popup {
+        padding-left: 14px;
+      }
+      & .e-dropdown-btn,
+      & .e-dropdown-btn span {
+        font-weight: normal;
+      }
+    }
   }
   
   .e-ie-img-save-dlg .e-btn {
@@ -124466,10 +124673,13 @@ $image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
           background: inherit;
           border: none;
           margin-top: $image-editor-ddbtn-margin-top;
-          @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' $skin-name == 'bootstrap5-dark' {
+          @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
             background: $tbar-default-bg;
             color: $tbar-default-icon-color;
           }
+          @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+            border: 2px solid #000;
+          }
           @if $skin-name == 'Material3' {
             box-shadow: none;
           }
@@ -124488,6 +124698,36 @@ $image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
             background: $btn-focus-bgcolor;
             box-shadow: none;
             color: $btn-focus-color;
+            @if $skin-name == 'FluentUI' {
+              outline: none !important; /* stylelint-disable-line declaration-no-important */
+              box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
+              outline: none !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+              outline: none !important; /* stylelint-disable-line declaration-no-important */
+              border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'bootstrap4' {
+              $color-rgba: rgba(mix(lighten($btn-focus-bgcolor, 50%), $btn-focus-border-color, 15%), .5);
+              box-shadow: 0 0 0 .25em $color-rgba !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'bootstrap5' {
+              box-shadow: $secondary-shadow-focus !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'Material3' {
+              box-shadow: $shadow-focus-ring1 !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'tailwind' {
+              box-shadow: 0 0 0 1px #4f46e5 !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+
+          &:focus-visible {
+            @if $skin-name == 'fluent2' {
+              box-shadow: $keyboard-focus !important; /* stylelint-disable-line declaration-no-important */
+            }
           }
 
           &:active {
@@ -125246,8 +125486,8 @@ $msg-filled-success-color: $msg-success-color-alt2 !default;
 $msg-filled-success-bg-color: $msg-success-bg-color-alt2 !default;
 $msg-filled-success-border-color: $msg-success-border-color-alt2 !default;
 $msg-filled-warning-color: $msg-warning-color-alt2 !default;
-$msg-filled-warning-bg-color: $warning-dark-primary !default;
-$msg-filled-warning-border-color: $warning-dark-primary !default;
+$msg-filled-warning-bg-color: $msg-warning-bg-color-alt2 !default;
+$msg-filled-warning-border-color: $msg-warning-border-color-alt2 !default;
 $msg-filled-info-color: $msg-info-color-alt2 !default;
 $msg-filled-info-bg-color: $msg-info-bg-color-alt2 !default;
 $msg-filled-info-border-color: $msg-info-border-color-alt2 !default;
@@ -126690,7 +126930,7 @@ $otp-input-disabled-border-color: $border-disabled !default;
     }
     &.e-outline {
       .e-otp-input-field {
-        border: 2px solid $otp-input-border-color;
+        border: 1px solid $otp-input-border-color;
       }
     }
     &.e-outline,
@@ -127688,6 +127928,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
 
     .e-disabled {
       opacity: $ribbon-disabled-opacity;
+      pointer-events: none;
     }
 
     .e-input-group {