@syncfusion/ej2-pdfviewer 17.3.54-4568 → 17.3.56-4568

package/styles/pdfviewer/_theme.scss

@@ -1,24 +1,43 @@
 @include export-module('pdfviewer-theme') {
-  // sass-lint:disable no-vendor-prefixes
+  /* stylelint-disable value-no-vendor-prefix */
+  /* stylelint-disable property-no-vendor-prefix */
   .e-pv-viewer-container {
-    background-color: $pv-background;
     border-color: $pv-control-border-color;
     height: $pv-viewer-container-height;
     overflow: $pv-control-overflow;
     position: $pv-control-position;
     touch-action: $pv-control-touch-action;
+    @if $skin-name == 'Material3' {
+      background: $pv-background;
+      border: $pv-toolbar-border;
+    }
+    @else
+    {
+      background-color: $pv-background;
+    }
   }
 
   .e-pdfviewer.e-pv-mobile-view .e-pv-viewer-container::-webkit-scrollbar {
     display: none;
   }
 
+  input.e-pv-input-password::-ms-reveal {
+    display: none;
+  }
+
   .e-pv-page-container {
+    @if $skin-name == 'Material3' {
+      background: $pv-background;
+    }
     margin: $pv-page-container-margin;
     padding: $pv-page-container-padding;
     touch-action: $pv-page-container-touch-action;
   }
 
+  .e-pv-signaturehover {
+    background-color: $pv-prop-line-styles-hover-bg;
+  }
+
   .e-pv-mobilespanscroll-container {
     color: $pv-toolbar-total-page-number-color;
     font-family: $pv-sidebar-bookmark-title-font-family;
@@ -34,12 +53,33 @@
   .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
   .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
   .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
+  .e-pv-annotation-handwritten-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
   .e-bigger .e-pv-icon-search,
   .e-pv-icon {
     font-size: $pv-icon-font-size;
   }
 
+  .e-bigger .e-pv-icon {
+    @if $skin-name == 'FluentUI' {
+      font-size: 16px;
+    }
+  }
+
+  .e-pv-annotation-stamp-container .e-menu-wrapper {
+    @if $skin-name == 'FluentUI' {
+      background-color: transparent;
+    }
+  }
+
+  .e-pv-annotation-ink-container .e-pv-inkannotation-icon {
+    font-size: $pv-icon-font-size;
+  }
+
+  .e-pv-annotation-handwritten-container .e-pv-handwritten-icon.e-btn-icon:not(.e-caret) {
+    font-size: $pv-icon-font-size;
+  }
+
   .e-bigger .e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
   .e-bigger .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
   .e-bigger .e-pv-annotation-stroke-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
@@ -49,6 +89,7 @@
   .e-bigger .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
   .e-bigger .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
   .e-bigger .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
+  .e-bigger .e-pv-annotation-handwritten-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
   .e-bigger .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
   .e-bigger .e-pv-icon-search,
   .e-bigger .e-pv-icon {
@@ -58,7 +99,13 @@
   }
 
   .e-pv-mobilescroll-container {
-    background-color: $pv-background;
+    @if $skin-name == 'Material3' {
+      background: $pv-background;
+    }
+    @else
+    {
+      background-color: $pv-background;
+    }
     border: $pv-thumbnail-hover-border;
     border-radius: 56px 0 0 56px;
     line-height: 27px;
@@ -75,19 +122,38 @@
     position: $pv-page-div-position;
   }
 
+  .e-pv-viewer-container .e-pv-page-div.e-focused {
+    box-shadow: $pv-page-div-focus-style;
+  }
+
+  .e-pv-viewer-container.e-focused
+  {
+    box-shadow: $pv-page-div-focus-style inset;
+  }
+
   .e-pv-toolbar,
   .e-pv-nav-toolbar,
-  .e-pv-annotation-toolbar {
+  .e-pv-annotation-toolbar,
+  .e-pv-formdesigner-toolbar {
     border: $pv-toolbar-border;
     border-radius: $pv-toolbar-border-radius;
     border-width: $pv-toolbar-border-width;
   }
 
   .e-pv-toolbar,
-  .e-pv-annotation-toolbar {
+  .e-pv-annotation-toolbar,
+  .e-pv-mobile-annotation-toolbar,
+  .e-pv-formdesigner-toolbar {
     height: $pv-toolbar-height;
   }
 
+  .e-pv-toolbar.e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
+    @if $skin-name == 'bootstrap5' {
+      left: 0;
+      line-height: 0;
+    }
+  }
+
   .e-pv-nav-toolbar,
   .e-bigger .e-pv-toolbar,
   .e-pv-toolbar.e-pv-mobile-toolbar,
@@ -102,7 +168,10 @@
   }
 
   .e-toolbar.e-pv-toolbar .e-toolbar-pop .e-pv-zoom-drop-down-container {
-    display: none;
+    display: block;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: auto;
   }
 
   .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
@@ -110,8 +179,34 @@
     display: none;
   }
 
+  .e-control.e-toolbar.e-lib.e-pv-annotation-toolbar.e-pv-toolbar-scroll.e-keyboard.e-toolpop .e-tbar-btn-text
+  {
+    display: none;
+  }
+
+  .e-dropdown-popup.e-control.e-pv-annotation-shapes-container .e-tbar-btn-text {
+    display: none;
+  }
+
+  .e-dropdown-popup.e-control.e-pv-annotation-calibrate-container .e-tbar-btn-text {
+    display: none;
+  }
+
+  .e-dropdown-popup.e-control.e-pv-annotation-textalign-container .e-tbar-btn-text
+  {
+    display: none;
+  }
+
+  .e-dropdown-popup.e-control.e-pv-annotation-textprop-container.e-caret-hide .e-tbar-btn-text
+  {
+    display: none;
+  }
+
   .e-pv-current-page-box.e-input-group.e-control-wrapper {
     height: $pv-current-page-height;
+    @if $skin-name == 'bootstrap5' {
+      height: 32px;
+    }
     margin-top: $pv-toolbar-current-page-box-margin-top;
     width: $pv-current-page-width;
   }
@@ -142,10 +237,16 @@
     width: 10%;
   }
 
-  .e-pv-gotopage-popup {
+  .e-dialog.e-pv-gotopage-popup {
     max-width: 500px;
-    padding-left: 16px;
-    padding-top: 16px;
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      padding-left: 0;
+      padding-top: 0;
+    }
+    @else {
+      padding-left: 16px;
+      padding-top: 16px;
+    }
   }
 
   .e-pv-gotopage-apply-btn.e-btn.e-flat.e-primary:disabled {
@@ -165,7 +266,9 @@
   }
 
   .e-pv-password-input {
-    margin-top: $pv-password-input-margin-top;
+    @if $skin-name != 'Material3' {
+      margin-top: $pv-password-input-margin-top;
+    }
   }
 
   .e-pv-password-error {
@@ -178,10 +281,15 @@
   }
 
   .e-pv-corrupted-popup-content {
-    color: $pv-corrupted-pop-header-color;
-    font-size:  $pv-corrupted-pop-content-font-size;
+    @if $skin-name == 'Material3' {
+      color: $content-text-color-alt1;
+    }
+    @else {
+      color: $pv-corrupted-pop-header-color;
+    }
+    font-size: $pv-corrupted-pop-content-font-size;
     line-height: $pv-corrupted-pop-content-line-height;
-    margin-left:  $pv-corrupted-pop-content-margin-left;
+    margin-left: $pv-corrupted-pop-content-margin-left;
     opacity: $pv-corrupted-pop-header-opacity;
     padding-top: $pv-corrupted-pop-content-padding-top;
     text-align: $pv-corrupted-pop-header-text-align;
@@ -189,20 +297,30 @@
 
   .e-pv-corrupted-popup-content-rtl {
     color: $pv-corrupted-pop-header-color;
-    font-size:  $pv-corrupted-pop-content-font-size;
+    font-size: $pv-corrupted-pop-content-font-size;
     line-height: $pv-corrupted-pop-content-line-height;
-    margin-right:  $pv-corrupted-pop-content-margin-right;
+    margin-right: $pv-corrupted-pop-content-margin-right;
     opacity: $pv-corrupted-pop-header-opacity;
     padding-top: $pv-corrupted-pop-content-padding-top;
     text-align: $pv-corrupted-pop-header-rtl-text-align;
   }
 
   .e-pv-toolbar.e-toolbar:not(.e-pv-mobile-toolbar) .e-toolbar-items .e-toolbar-item:not(.e-separator) {
-    height: auto;
+    @if $skin-name == 'Material3' {
+      height: $pv-toolbar-height;
+    }
+    @else {
+      height: auto;
+    }
     margin-left: $pv-toolbar-items-margin-left;
     margin-right: $pv-toolbar-items-margin-right;
-    padding-bottom: $pv-toolbar-items-padding-bottom;
-    padding-top: $pv-toolbar-items-padding-top;
+    @if $skin-name != 'Material3' {
+      padding-bottom: $pv-toolbar-items-padding-bottom;
+      padding-top: $pv-toolbar-items-padding-top;
+    }
+    @if $skin-name == 'bootstrap5' {
+      padding: 3px 4px;
+    }
   }
 
   .e-bigger .e-pv-toolbar.e-toolbar:not(.e-pv-mobile-toolbar) .e-toolbar-items .e-toolbar-item:not(.e-separator) {
@@ -212,13 +330,68 @@
     }
   }
 
-  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
+  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+    @if $skin-name != 'tailwind' and $skin-name != 'tailwind-dark' {
+      height: auto;
+    }
+    @if $skin-name == 'bootstrap5' {
+      height: 32px;
+    }
     margin-left: $pv-toolbar-items-margin-left;
     margin-right: $pv-toolbar-items-margin-right;
+    @if $skin-name == 'bootstrap5' {
+      padding: 0 4px;
+    }
+  }
+
+  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
+  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
+    @if $skin-name == 'FluentUI' {
+      padding-bottom: 2px;
+    }
+    @else if $skin-name == 'Material3' {
+      padding: 0 !important;/* stylelint-disable-line declaration-no-important */
+    }
+    @else {
+      padding-bottom: 0;
+    }
+  }
+
+  .e-bigger .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
+  .e-bigger .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
+    @if $skin-name == 'FluentUI' {
+      padding-bottom: 2px;
+    }
+    @else if $skin-name == 'Material3' {
+      padding: 0 !important;/* stylelint-disable-line declaration-no-important */
+    }
+    @else {
+      padding-bottom: 0;
+    }
+  }
+
+  .e-pdfviewer .e-pv-open-document-icon .e-pv-icon .e-icons .e-btn-icon .e-icon-left {
+    @if $skin-name == 'FluentUI' {
+      padding: 0;
+    }
+  }
+
+  .e-pv-toolbar.e-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
+  .e-pv-annotation-toolbar.e-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
+    @if $skin-name == 'FluentUI' {
+      line-height: 22px;
+      min-height: 22px;
+    }
+    @else {
+      line-height: 26px;
+      min-height: 26px;
+    }
   }
 
   .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
-  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-separator {
+  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
+  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-separator {
     border-right-width: $pv-toolbar-separator-border-right-width;
     height: $pv-toolbar-separator-height;
     margin-left: $pv-toolbar-separator-margin-left;
@@ -226,30 +399,40 @@
   }
 
   .e-pdfviewer .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child,
-  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child {
+  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child,
+  .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child  {
     margin-left: $pv-toolbar-items-first-child-margin-left;
   }
 
   .e-pdfviewer .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child,
-  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child {
+  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child,
+  .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child {
     margin-right: $pv-toolbar-items-first-child-margin-left;
   }
 
   .e-pdfviewer .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child,
-  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child {
+  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child,
+  .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child  {
     margin-right: $pv-toolbar-items-last-child-margin-right;
   }
 
   .e-pdfviewer .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:last-child,
-  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:last-child {
+  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:last-child,
+  .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:last-child {
     margin-left: $pv-toolbar-items-last-child-margin-right;
   }
 
   .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
-  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
+  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
+  .e-pv-mobile-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
+  .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: 20px;
+    min-width: $pv-toolbar-btn-width;
     width: $pv-toolbar-btn-width;
+    @if $skin-name == 'FluentUI' {
+      line-height: $pv-toolbar-btn-height;
+      min-width: 40px;
+    }
   }
 
   .e-pv-open-document-icon {
@@ -288,6 +471,11 @@
     line-height: $pv-toolbar-zoom-out-icon-line-height;
   }
 
+  .e-pv-eye-slash-icon,
+  .e-pv-eye-icon {
+    margin-top: $pv-eye-icon-margin-top;
+  }
+
   .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-pv-current-page-container {
     padding-left: 8px;
   }
@@ -310,10 +498,13 @@
     margin-left: $pv-toolbar-total-page-div-margin-left;
     margin-right: $pv-toolbar-total-page-div-margin-right;
     min-width: unset;
-    @if $skin-name != 'bootstrap4' {
+    @if $skin-name != 'bootstrap4' and $skin-name != 'FluentUI' {
       padding-bottom: $pv-toolbar-total-page-padding-bottom;
     }
     padding-left: $pv-toolbar-total-page-div-padding-left;
+    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+      padding-top: 0;
+    }
     position: relative;
   }
 
@@ -331,28 +522,39 @@
   }
 
   .e-pv-zoom-drop-down.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
-  .e-pv-prop-dropdown.e-input-group.e-control-wrapper.e-ddl:not(.e-error) {
+  .e-pv-prop-dropdown.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
+  .e-pv-zoom-drop-down-rtl.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
+  .e-pv-prop-dropdown-rtl.e-input-group.e-control-wrapper.e-ddl:not(.e-error) {
     background-color: transparent;
     border: $pv-toolbar-zoom-drop-down-border;
+    @if $skin-name == 'bootstrap5' {
+      box-shadow: none;
+    }
     height: inherit;
     margin-top: $pv-toolbar-zoom-drop-down-margin-top;
     padding: $pv-toolbar-zoom-drop-down-padding;
   }
 
   .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
-  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) {
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) {
     background-color: $pv-toolbar-zoom-drop-down-background-color;
     border: $pv-toolbar-zoom-drop-down-border-focus;
     border-radius: $pv-toolbar-zoom-drop-down-border-radius;
   }
 
   .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl.e-input-focus .e-search-icon.e-ddl-icon,
-  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus .e-search-icon.e-ddl-icon {
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus .e-search-icon.e-ddl-icon,
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus .e-search-icon.e-ddl-icon,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-input-focus .e-search-icon.e-ddl-icon {
     color: $pv-zoom-dropdown-input-focus-color;
   }
 
   .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-input.e-control.e-keyboard,
-  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard {
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard,
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-input.e-control.e-keyboard,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-input.e-control.e-keyboard {
     height: $pv-zoom-drop-down-input-height;
     margin-top: $pv-zoom-drop-down-input-margin-top;
     padding-bottom: $pv-zoom-drop-down-padding-bottom;
@@ -360,17 +562,28 @@
   }
 
   .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-input.e-control.e-keyboard,
-  .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard {
-    padding-left: $pv-zoom-drop-down-padding-left;
+  .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard,
+  .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-input.e-control.e-keyboard,
+  .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-input.e-control.e-keyboard {
+    @if $skin-name == 'bootstrap5' {
+      padding-left: 0;
+    }
+    @else {
+      padding-left: $pv-zoom-drop-down-padding-left;
+    }
   }
 
   .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-input.e-control.e-keyboard,
-  .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard {
+  .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard,
+  .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-input.e-control.e-keyboard,
+  .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-input.e-control.e-keyboard {
     padding-right: $pv-zoom-drop-down-padding-left;
   }
 
   .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-search-icon.e-ddl-icon,
-  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-search-icon.e-ddl-icon {
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-search-icon.e-ddl-icon,
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-search-icon.e-ddl-icon,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-search-icon.e-ddl-icon {
     background-color: transparent;
     border-left: 0;
     margin-bottom: $pv-zoom-drop-down-margin-bottom;
@@ -379,9 +592,23 @@
     padding-right: $pv-zoom-drop-down-padding-right;
   }
 
+  .e-pv-zoom-drop-down-container .e-input-group.e-control-wrapper .e-input-group-icon,
+  .e-pv-annotation-fontsize-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown .e-input-group-icon,
+  .e-pv-annotation-fontname-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown .e-input-group-icon {
+    @if $skin-name == 'bootstrap5' {
+      border-left: 0;
+      margin-bottom: $pv-zoom-drop-down-margin-bottom;
+      margin-left: $pv-zoom-drop-down-margin-left;
+      margin-top: $pv-zoom-drop-down-margin-top;
+      padding-right: $pv-zoom-drop-down-padding-right;
+    }
+  }
+
   .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-input.e-control,
   .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control,
-  .e-input-group.e-control-wrapper.e-pv-current-page-box .e-numerictextbox.e-input {
+  .e-input-group.e-control-wrapper.e-pv-current-page-box .e-numerictextbox.e-input,
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-input.e-control,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-input.e-control {
     text-align: $pv-text-align;
   }
 
@@ -390,19 +617,49 @@
     text-align: $pv-zoom-drop-down-popup-text-align;
   }
 
-  .e-pv-zoom-drop-down.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active
-  .e-pv-prop-dropdown.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active {
+  .e-pv-zoom-drop-down-rtl.e-ddl.e-popup.e-popup-open,
+  .e-pv-prop-dropdown-rtl.e-ddl.e-popup.e-popup-open {
+    text-align: right;
+  }
+
+  .e-pv-zoom-drop-down.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active .e-pv-prop-dropdown.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active,
+  .e-pv-zoom-drop-down-rtl.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active .e-pv-prop-dropdown-rtl.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active {
     color: $pv-zoom-drop-down-active-color;
   }
 
-  .e-pv-zoom-drop-down.e-popup.e-popup-open {
+  .e-pv-zoom-drop-down.e-popup.e-popup-open,
+  .e-pv-zoom-drop-down-rtl.e-popup.e-popup-open {
     min-height: $pv-zoom-drop-down-popup-height;
     min-width: $pv-zoom-drop-down-popup-width;
   }
 
   .e-input-group.e-control-wrapper.e-pv-current-page-box:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
-    border: $pv-current-page-border;
+    @if $skin-name == 'Material3' {
+      border-bottom: $pv-current-page-border;
+    }
+    @else {
+      border: $pv-current-page-border;
+    }
     border-radius: $pv-current-page-border-radius;
+    @if $skin-name == 'bootstrap5' {
+      box-shadow: none;
+    }
+  }
+
+  .e-pv-annotation-toolbar,
+  .e-pv-mobile-annotation-toolbar,
+  .e-pv-formdesigner-toolbar {
+    @if $skin-name == 'bootstrap5' {
+      border: solid $border-light;
+      border-width: 1px;
+    }
+  }
+
+  .e-pv-zoom-drop-down.e-ddl.e-valid-input.e-input-focus,
+  .e-pv-zoom-drop-down-rtl.e-ddl.e-valid-input.e-input-focus {
+    @if $skin-name != 'bootstrap5' {
+      box-shadow: none;
+    }
   }
 
   .e-pv-password-popup.e-dialog .e-dlg-header,
@@ -416,19 +673,23 @@
   .e-pv-password-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
   .e-pv-corrupted-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
   .e-pv-notification-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
-    @if $skin-name != 'bootstrap4' {
+    @if ($skin-name != 'bootstrap4') {
       padding-top: $pv-dialog-pop-close-icon-padding-top;
     }
   }
 
   .e-pv-password-popup.e-dialog {
-    height: $pv-password-dialog-height;
+    @if $skin-name != 'Material3' {
+      height: $pv-password-dialog-height;
+    }
     margin: 0 10px;
     max-width: $pv-password-dialog-width;
   }
 
   .e-pv-corrupted-popup.e-dialog {
-    height: $pv-corrupted-dialog-height;
+    @if $skin-name != 'Material3' {
+      height: $pv-corrupted-dialog-height;
+    }
     margin: 0 10px;
     max-width: $pv-corrupted-dialog-width;
   }
@@ -444,11 +705,13 @@
   }
 
   .e-pv-corrupted-popup.e-dialog .e-dlg-content {
-    padding-bottom: $pv-corrupted-dialog-pop-content-padding-bottom;
-    padding-top: $pv-corrupted-dialog-pop-content-padding-top;
+    @if $skin-name != 'Material3' {
+      padding-bottom: $pv-corrupted-dialog-pop-content-padding-bottom;
+      padding-top: $pv-corrupted-dialog-pop-content-padding-top;
+    }
   }
 
-  .e-pv-password-popup.e-dialog span[id*='_prompt'] {
+  .e-pv-password-popup.e-dialog span[id *= '_prompt'] {
     font-size: $pv-password-pop-content-font-size;
     letter-spacing: $pv-password-pop-content-letter-spacing;
   }
@@ -462,13 +725,19 @@
   }
 
   .e-pv-password-popup.e-dialog .e-dlg-content {
-    padding-bottom: $pv-password-dialog-pop-content-padding-bottom;
-    padding-top: $pv-password-pop-content-padding-top;
+    @if $skin-name != 'Material3' {
+      padding-bottom: $pv-password-dialog-pop-content-padding-bottom;
+      padding-top: $pv-password-pop-content-padding-top;
+    }
   }
 
   .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
     max-height: $pv-current-page-height;
     padding-bottom: $pv-current-page-padding-bottom;
+    @if $skin-name == 'bootstrap5' {
+      max-height: 30px;
+      padding-bottom: 1px;
+    }
   }
 
   .e-pv-toolbar:not(.e-rtl) .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
@@ -480,7 +749,9 @@
   }
 
   .e-pv-zoom-drop-down.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before,
-  .e-pv-prop-dropdown.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
+  .e-pv-prop-dropdown.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before,
+  .e-pv-zoom-drop-down-rtl.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before,
+  .e-pv-prop-dropdown-rtl.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
     transform: $pv-zoom-drop-down-transform;
   }
 
@@ -495,13 +766,21 @@
   .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl::after,
   .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl::before,
   .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus::after,
-  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus::before {
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus::before,
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl::after,
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl::before,
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus::after,
+  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus::before,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl::after,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl::before,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-input-focus::after,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-input-focus::before {
     background: $pv-material-line-background;
   }
 
   .e-pv-sidebar-container {
     background: $pv-sidebar-container-background;
-    border-top:  $pv-sidebar-container-border-top;
+    border-top: $pv-sidebar-container-border-top;
     bottom: $pv-sidebar-container-bottom;
     position: $pv-sidebar-container-position;
     top: $pv-sidebar-container-top;
@@ -522,7 +801,13 @@
   }
 
   .e-pv-viewer-main-container {
-    background-color: $pv-background;
+    @if $skin-name == 'Material3' {
+      background: $pv-background;
+    }
+    @else
+    {
+      background-color: $pv-background;
+    }
     bottom: $pv-viewer-main-container-bottom;
     left: $pv-viewer-main-container-left;
     position: $pv-viewer-main-container-position;
@@ -539,7 +824,7 @@
   }
 
   .e-pv-sidebar-content-container {
-    border-top:  $pv-sidebar-content-container-border-top;
+    border-top: $pv-sidebar-content-container-border-top;
     display: $pv-sidebar-content-container-display;
     float: $pv-sidebar-content-container-float;
     height: $pv-sidebar-content-container-height;
@@ -557,6 +842,8 @@
 
   .e-pv-sidebar-title-container {
     background: $pv-sidebar-title-container-background;
+    border: $pv-sidebar-toolbar-border;
+    border-width: $pv-sidebar-title-container-border-width;
     height: $pv-sidebar-title-container-height;
     position: $pv-sidebar-title-container-position;
     top: $pv-sidebar-title-container-top;
@@ -602,11 +889,23 @@
   .e-pv-sidebar-title {
     color: $pv-sidebar-title-color;
     font-size: $pv-sidebar-title-font-size;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'Material3') {
+      font-weight: 500;
+    }
     height: $pv-sidebar-title-height;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+      line-height: $pv-sidebar-title-line-height;
+    }
     margin: $pv-sidebar-title-margin;
     position: $pv-sidebar-title-position;
     text-align: $pv-sidebar-title-text-align;
     top: $pv-sidebar-title-top;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+      vertical-align: $pv-sidebar-title-vertical-align;
+    }
+    @if $skin-name == 'FluentUI' {
+      padding: 8px;
+    }
   }
 
   .e-bigger .e-pv-sidebar-title {
@@ -639,7 +938,7 @@
 
   .e-pv-sidebar-toolbar {
     background: $pv-sidebar-toolbar-background;
-    border:  $pv-sidebar-toolbar-border;
+    border: $pv-sidebar-toolbar-border;
     border-width: $pv-sidebar-toolbar-border-width;
     bottom: $pv-sidebar-toolbar-bottom;
     height: $pv-sidebar-toolbar-height;
@@ -649,7 +948,7 @@
   }
 
   .e-bigger .e-pv-sidebar-toolbar {
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
       width: $pv-sidebar-toolbar-width-big;
     }
   }
@@ -666,6 +965,10 @@
     z-index: $pv-sidebar-content-z-index;
   }
 
+  .e-pv-thumbnail-anchor-node:hover {
+    text-decoration: auto;
+  }
+
   .e-pv-sidebar-content.e-thumbnail {
     top: 1px;
   }
@@ -696,6 +999,9 @@
     -webkit-box-shadow: $pv-sidebar-content-scrollbar-track-box-shadow;
     background: $pv-sidebar-content-scrollbar-track-background;
     border: $pv-sidebar-content-scrollbar-track-border;
+    @if $skin-name == 'Material3' {
+      border-width: 0 1px 0 0;
+    }
   }
 
   .e-pv-sidebar-content::-webkit-scrollbar-thumb {
@@ -704,6 +1010,10 @@
     background-clip: $pv-sidebar-content-scrollbar-thumb-background-clip;
     border: $pv-sidebar-content-scrollbar-thumb-border;
     border-radius: $pv-sidebar-content-scrollbar-thumb-border-radius;
+    @if $skin-name == 'Material3' {
+      width: 6px;
+      height: 329px;
+    }
   }
 
   .e-pv-thumbnail-view-button.e-btn {
@@ -718,6 +1028,16 @@
     outline: $pv-thumbnail-outline;
     padding: $pv-thumbnail-view-button-padding;
     width: $pv-thumbnail-view-button-width;
+    @if $skin-name == 'bootstrap5' {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
   }
 
   .e-bigger .e-pv-thumbnail-view-button.e-btn {
@@ -727,6 +1047,9 @@
       padding: $pv-thumbnail-view-button-padding-big;
       width: $pv-thumbnail-view-button-width-big;
     }
+    @if $skin-name == 'FluentUI' {
+      margin: 12px 6px;
+    }
   }
 
   .e-pv-thumbnail-view-button-selection.e-pv-thumbnail-view-button.e-btn,
@@ -741,6 +1064,30 @@
     padding: $pv-thumbnail-view-button-selection-padding;
   }
 
+  .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
+  {
+    background: $pv-thumbnail-view-button-selection-background;
+    border: $pv-thumbnail-view-button-selection-border;
+    border-radius: $pv-thumbnail-border-selection-radius;
+    @if $skin-name == 'bootstrap4' {
+      color: $pv-thumbnail-border-selection-font-color;
+    }
+    line-height: $pv-thumbnail-view-button-selection-line-height;
+    padding: $pv-thumbnail-view-button-selection-padding;
+  }
+
+  .e-pv-tbar-btn.e-pv-bookmark-button.e-btn:focus
+  {
+    background: $pv-thumbnail-view-button-selection-background;
+    border: $pv-thumbnail-view-button-selection-border;
+    border-radius: $pv-thumbnail-border-selection-radius;
+    @if $skin-name == 'bootstrap4' {
+      color: $pv-thumbnail-border-selection-font-color;
+    }
+    line-height: $pv-thumbnail-view-button-selection-line-height;
+    padding: $pv-thumbnail-view-button-selection-padding;
+  }
+
   .e-bigger .e-pv-thumbnail-view-button-selection.e-pv-thumbnail-view-button.e-btn,
   .e-bigger .e-pv-bookmark-button-selection.e-pv-bookmark-button.e-btn  {
     @if $skin-name == 'bootstrap4' {
@@ -778,6 +1125,9 @@
     @if $skin-name == 'bootstrap4' {
       line-height: $pv-thumbnail-button-selection-line-height;
     }
+    @if $skin-name == 'FluentUI' {
+      margin: 12px 6px;
+    }
   }
 
   .e-pv-bookmark-button.e-btn {
@@ -790,6 +1140,16 @@
     outline: $pv-thumbnail-outline;
     padding: $pv-bookmark-button-padding;
     width: $pv-bookmark-button-width;
+    @if $skin-name == 'bootstrap5' {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
   }
 
   .e-bigger .e-pv-bookmark-button.e-btn {
@@ -810,10 +1170,16 @@
     }
     height: $pv-title-close-height;
     left: $pv-title-close-left;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+      line-height: $pv-sidebar-title-line-height;
+    }
     padding: $pv-title-close-padding;
     position: $pv-title-close-position;
     right: $pv-title-close-right;
     top: $pv-title-close-top;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+      vertical-align: $pv-sidebar-title-vertical-align;
+    }
     width: $pv-title-close-width;
   }
 
@@ -867,9 +1233,15 @@
     padding-left: $pv-thumbnail-number-padding-left;
     padding-right: $pv-thumbnail-number-padding-left;
     padding-top: $pv-thumbnail-number-padding-top;
+    @if $skin-name == 'Material3' {
+      font-weight: 500;
+    }
   }
 
   .e-pv-thumbnail-selection-ring {
+    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+      border: $pv-thumbnail-selection-ring-border;
+    }
     border-radius: $pv-thumbnail-selection-ring-border-radius;
     box-shadow: $pv-thumbnail-selection-ring-box-shadow;
     padding: $pv-thumbnail-selection-ring-padding;
@@ -895,7 +1267,7 @@
     border-radius: $pv-thumbnail-focus-border-radius;
     box-shadow: $pv-thumbnail-focus-box-shadow;
     cursor: $pv-thumbnail-focus-cursor;
-    padding:  $pv-thumbnail-focus-padding;
+    padding: $pv-thumbnail-focus-padding;
   }
 
   .e-pv-thumbnail-selection {
@@ -907,7 +1279,7 @@
   }
 
   .e-pv-thumbnail-row {
-    -ms-flex-wrap: $pv-thumbnail-row-flex-wrap; // IE10    
+    -ms-flex-wrap: $pv-thumbnail-row-flex-wrap; // IE10
     display: $pv-thumbnail-row-display;
     flex-wrap: $pv-thumbnail-row-flex-wrap;
   }
@@ -934,17 +1306,37 @@
     position: $pv-bookmark-view-position;
   }
 
-  div >.e-pv-bookmark-icon.e-pv-icon {
+  div > .e-pv-bookmark-icon.e-pv-icon {
     float: $pv-bookmark-icon-float;
     font-size: $pv-bookmark-icon-font-size;
     padding-left: $pv-bookmark-icon-padding-left;
     padding-right: $pv-bookmark-icon-padding-right;
+    @if $skin-name == 'Material3' {
+      font-size: $text-base;
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+
+  .e-pv-bookmark-title {
+    padding-left: $pv-bookmark-title-padding-left;
+    @if $skin-name == 'Material3' {
+      font-size: $text-sm;
+      font-weight: $font-weight-normal;
+      line-height: 20px;
+      letter-spacing: .24px;
+    }
   }
 
-  .e-bigger div >.e-pv-bookmark-icon.e-pv-icon {
+  .e-bigger div > .e-pv-bookmark-icon.e-pv-icon {
     @if $skin-name == 'bootstrap4' {
       font-size: $pv-icon-font-size-big;
     }
+    @if $skin-name == 'Material3' {
+      font-size: $text-base;
+      padding-left: 12px;
+      padding-right: 12px;
+    }
   }
 
   .e-pv-sidebar-bookmark-title {
@@ -962,6 +1354,9 @@
     -webkit-box-shadow: $pv-sidebar-content-scrollbar-track-box-shadow;
     background: $pv-sidebar-content-scrollbar-track-background;
     border: $pv-sidebar-content-scrollbar-track-border;
+    @if $skin-name == 'Material3' {
+      border-width: 0 1px 0 0;
+    }
   }
 
   .e-pv-bookmark-view::-webkit-scrollbar-thumb {
@@ -970,6 +1365,10 @@
     background-clip: $pv-sidebar-content-scrollbar-thumb-background-clip;
     border: $pv-sidebar-content-scrollbar-thumb-border;
     border-radius: $pv-sidebar-content-scrollbar-thumb-border-radius;
+    @if $skin-name == 'Material3' {
+      width: 6px;
+      height: 329px;
+    }
   }
 
   .e-pv-bookmark-view > .e-ul {
@@ -987,6 +1386,9 @@
     height: $pv-bookmark-view-icon-collapsible-height;
     padding: $pv-bookmark-view-icon-collapsible-padding;
     width: $pv-bookmark-view-icon-collapsible-width;
+    @if $skin-name == 'Material3' {
+      margin-top: 5px;
+    }
   }
 
   .e-pv-bookmark-view .e-list-item .e-ul {
@@ -1007,13 +1409,59 @@
 
   .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
   .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
+  .e-pv-mobile-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
+  .e-pv-mobile-annotation-toolbar .e-dropdown-btn.e-btn,
   .e-pv-annotation-toolbar .e-dropdown-btn.e-btn,
+  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
+  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn,
   .e-pv-shapes-toolbar .e-pv-tbar-btn,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused,
   .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-caret,
+  .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 {
+    color: $pv-icon-color;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
+      box-shadow: none;
+    }
+  }
+
+  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
+  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-selected .e-caret {
+    @if $skin-name == 'FluentUI' {
+      color: $pv-item-selection-color;
+    }
+  }
+
   .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 {
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
+      box-shadow: none;
+      color: inherit;
+    }
+  }
+
+  .e-pv-mobile-annotation-toolbar .e-tbar-btn:hover {
+    background: $pv-comment-panel-bg;
+    border-color: $pv-comment-panel-bg;
+  }
+
+  .e-pv-mobile-annotation-toolbar .e-tbar-btn:focus {
+    background: $pv-comment-panel-bg;
+    border-color: $pv-comment-panel-bg;
+  }
+
+  .e-pv-mobile-annotation-toolbar .e-hscroll.e-scroll-device .e-scroll-nav {
+    transform: skewX(-1deg) translateX(6px);
+    width: 56px;
+  }
+
+  .e-pv-mobile-annotation-toolbar .e-hscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
+    font-size: 14px;
+    transform: skewX(4deg);
+  }
+
+  .e-pv-mobile-annotation-toolbar .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
     color: $pv-icon-color;
   }
 
@@ -1021,21 +1469,34 @@
   .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:hover,
   .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover,
   .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover .e-caret,
+  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:hover,
+  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:hover,
+  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:hover .e-caret,
   .e-pv-shapes-toolbar .e-pv-tbar-btn:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:hover,
   .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-annotation-toolbar .e-dropdown-btn.e-btn:focus,
-  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:focus .e-caret,
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active,
+  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
+  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus,
+  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus .e-caret,
   .e-pv-shapes-toolbar .e-pv-tbar-btn:focus,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:focus,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
-  .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.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 {
     @if $skin-name == 'bootstrap4' {
       color: $pv-icon-color-hover;
     }
+    @if $skin-name == 'bootstrap5' {
+      color: $white;
+    }
+    @if $skin-name == 'FluentUI' {
+      color: $pv-item-selection-color;
+    }
   }
 
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
@@ -1048,12 +1509,16 @@
 
   .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
   .e-pv-annotation-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
-  .e-pv-annotation-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn.e-btn .e-pv-icon {
+  .e-pv-annotation-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn.e-btn .e-pv-icon,
+  .e-pv-formdesigner-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
+  .e-pv-formdesigner-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn.e-btn .e-pv-icon {
     color: $pv-icon-disable-color;
   }
 
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item {
-    height: inherit;
+    @if $skin-name != 'Material3' {
+      height: inherit;
+    }
   }
 
   .e-pv-stamp.e-menu-wrapper ul .e-menu-item {
@@ -1094,6 +1559,25 @@
     }
   }
 
+  .e-pv-toolbar .e-pv-zoom-drop-down-container .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon:hover {
+    @if $skin-name == 'bootstrap4' {
+      background-color: $pv-zoom-drop-down-bgcolor;
+      color: $pv-icon-color-hover;
+    }
+    @if $skin-name == 'bootstrap5' {
+      background-color: $secondary-bg-color-hover;
+      color: $secondary-text-color-hover;
+    }
+  }
+
+  .e-pv-prop-dropdown .e-pv-annotation-fontsize-container,
+  .e-pv-prop-dropdown-rtl .e-pv-annotation-fontsize-container {
+    @if $skin-name == 'bootstrap5' {
+      padding-left: 0;
+      width: 40px;
+    }
+  }
+
   .e-pv-print-popup-container {
     height: $pv-print-popup-container-height;
     left: $pv-print-popup-container-left;
@@ -1117,26 +1601,43 @@
   }
 
   .e-pv-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
-  .e-pv-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select {
+  .e-pv-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
+  .e-pv-mobile-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
+  .e-pv-mobile-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
+  .e-pv-formdesigner-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select {
     background: $pv-item-selection-background-color;
     border: $pv-item-selection-border;
     border-radius: $pv-item-selection-border-radius;
     color: $pv-item-selection-color;
   }
 
+  .e-pv-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
+  .e-pv-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
+  .e-pv-mobile-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
+  .e-pv-mobile-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
+  .e-pv-formdesigner-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons {
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap4') {
+      color: $pv-item-selection-color;
+    }
+  }
+
   .e-pv-sidebar-toolbar .e-pv-tbar-btn {
     color: $pv-icon-color;
   }
 
   .e-pv-search-bar {
-    background-color: $pv-search-box-background-color;
+    @if ($skin-name == 'Material3'){
+      background: $pv-search-box-background-color;
+    }
+    @else{
+      background-color: $pv-search-box-background-color;
+    }
     border: $pv-search-box-border;
     border-radius: $pv-search-box-border-radius;
     box-shadow: $pv-search-box-box-shadow;
     height: $pv-search-box-height;
     padding: $pv-search-box-padding;
     position: absolute;
-    top: $pv-search-box-top;
     width: $pv-search-box-width;
     z-index: 105;
   }
@@ -1147,6 +1648,11 @@
       padding: $pv-search-box-padding-big;
       width: $pv-search-box-width-big;
     }
+    @if $skin-name == 'FluentUI' {
+      height: 109px;
+      padding: 16px;
+      width: 368px;
+    }
   }
 
   .e-pv-search-input {
@@ -1155,7 +1661,7 @@
   }
 
   .e-bigger .e-pv-search-input {
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
       height: $pv-search-input-height-big;
     }
   }
@@ -1184,11 +1690,18 @@
     height: $pv-search-btn-height;
     margin-top: $pv-search-btn-margin-top;
     width: $pv-search-btn-width;
+    @if $skin-name == 'FluentUI' {
+      padding-bottom: 0;
+      padding-left: 1px;
+      padding-right: 1px;
+      padding-top: 1px;
+    }
   }
 
   .e-bigger .e-pv-search-btn.e-btn {
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or  $skin-name == 'FluentUI' {
       height: $pv-search-btn-height-big;
+      padding: 2px;
       width: $pv-search-btn-width-big;
     }
   }
@@ -1304,15 +1817,62 @@
     padding-left: 0;
   }
 
-  .e-pv-annotation-color-icon,
-  .e-pv-annotation-stroke-icon,
-  .e-pv-annotation-textcolor-icon {
+  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
+  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon {
+    @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+      line-height: 1.71em;
+    }
+    border-bottom: 2px solid;
+    margin-top: 0;
+    padding-top: 5px;
+    @if $skin-name == 'bootstrap5' {
+      margin-top: -4px;
+      padding-top: 0;
+    }
+    @if $skin-name == 'FluentUI' {
+      line-height: 11px;
+    }
+    vertical-align: initial;
+  }
+
+  .e-pv-properties-font-color-container .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon {
+    @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+      line-height: 1.71em;
+    }
     border-bottom: 2px solid;
+    margin-top: 0;
+    padding-top: 1px;
+    vertical-align: initial;
+    @if $skin-name == 'FluentUI' {
+      line-height: 11px;
+      padding-top: 5px;
+    }
+  }
+
+  .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' {
+      padding-top: 0;
+    }
+    vertical-align: initial;
+  }
+
+  .e-pv-custom-annotation-thickness-container .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon,
+  .e-pv-custom-annotation-opacity-container .e-btn-icon.e-pv-annotation-opacity-icon.e-pv-icon {
+    @if $skin-name == 'bootstrap5' {
+      padding-top: 0;
+    }
+    vertical-align: initial;
   }
 
   .e-pv-annotation-opacity-popup-container,
   .e-pv-annotation-thickness-popup-container {
+    @if $skin-name != 'Material3' {
+      background-color: $pv-annotation-opacity-popup-background-color;
+    }
     box-shadow: $pv-annotation-opacity-popup-box-shadow;
+    color: $pv-annotation-opacity-popup-color;
     height: auto;
     min-height: $pv-annotation-opacity-popup-min-height;
     padding: $pv-annotation-opacity-popup-padding;
@@ -1351,30 +1911,53 @@
     height: $pv-annotation-opacity-slider-height;
   }
 
-  .e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-caret
-  .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn .e-caret
-  .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-caret,
+  .e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-caret .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn .e-caret .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-caret,
   .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-caret,
   .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-caret {
     font-size: $pv-annotation-drop-down-caret-font-size;
   }
 
-  .e-pv-annotation-color-container,
-  .e-pv-annotation-opacity-container,
-  .e-pv-annotation-stroke-container,
-  .e-pv-annotation-thickness-container,
-  .e-pv-annotation-textcolor-container,
-  .e-pv-annotation-textalign-container,
-  .e-pv-annotation-textprop-container {
+  .e-bigger .e-.e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-caret .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn .e-caret .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-caret,
+  .e-bigger .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-caret,
+  .e-bigger .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-caret {
+    font-size: 18px;
+  }
+
+  .e-pv-annotation-color-container.e-icon-btn,
+  .e-pv-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-stroke-container.e-icon-btn,
+  .e-pv-custom-annotation-thickness-container.e-icon-btn,
+  .e-pv-custom-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-thickness-container.e-icon-btn,
+  .e-pv-annotation-textcolor-container.e-icon-btn,
+  .e-pv-annotation-textalign-container.e-icon-btn,
+  .e-pv-annotation-textprop-container.e-icon-btn {
     height: $pv-annotation-drop-down-height;
     width: $pv-annotation-drop-down-width;
   }
 
+  .e-bigger .e-pv-annotation-color-container.e-icon-btn,
+  .e-bigger .e-pv-annotation-opacity-container.e-icon-btn,
+  .e-bigger .e-pv-annotation-stroke-container.e-icon-btn,
+  .e-bigger .e-pv-custom-annotation-thickness-container.e-icon-btn,
+  .e-bigger .e-pv-custom-annotation-opacity-container.e-icon-btn,
+  .e-bigger .e-pv-annotation-thickness-container.e-icon-btn,
+  .e-bigger .e-pv-annotation-textcolor-container.e-icon-btn,
+  .e-bigger .e-pv-annotation-textalign-container.e-icon-btn,
+  .e-bigger .e-pv-annotation-textprop-container.e-icon-btn {
+    white-space: nowrap;
+  }
+
   .e-pv-annotation-thickness-container.e-btn.e-icon-btn.e-dropdown-btn {
-    padding-top: $pv-annotation-thickness-drop-down-padding-top;
+    @if ($skin-name != 'bootstrap5') {
+      padding-top: $pv-annotation-thickness-drop-down-padding-top;
+    }
   }
 
   .e-pv-shapes-toolbar {
+    @if $skin-name == 'Material3' {
+      border-radius: 4px;
+    }
     box-shadow: $pv-drop-down-toolbar-box-shadow;
   }
 
@@ -1386,11 +1969,24 @@
     margin-bottom: 0;
     margin-left: 4px;
     margin-right: 4px;
+    @if $skin-name == 'Material3' {
+      margin-top: 4px;
+    }
   }
 
   .e-pv-shapes-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
     height: 32px;
     width: 32px;
+    @if $skin-name == 'FluentUI' {
+      min-height: 32px;
+    }
+  }
+
+  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
+  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
+    @if $skin-name == 'FluentUI' {
+      min-height: 32px;
+    }
   }
 
   .e-pv-annotation-thickness-slider-container {
@@ -1416,12 +2012,19 @@
   .e-pv-annotation-textcolor-container.e-btn,
   .e-pv-annotation-textalign-container.e-btn,
   .e-pv-annotation-textprop-container.e-btn,
+  .e-pv-annotation-handwritten-container.e-btn,
   .e-pv-stamp.e-menu-wrapper ul .e-menu-item.e-focused:not(.e-selected) {
-    background-color: $pv-annotation-dropdown-background-color;
-    border-color: $pv-annotation-dropdown-border-color;
+    @if $skin-name == 'Material3' {
+      background: $pv-annotation-dropdown-background-color;
+      border: $pv-annotation-dropdown-border-color;
+    }
+    @else {
+      background-color: $pv-annotation-dropdown-background-color;
+      border-color: $pv-annotation-dropdown-border-color;
+    }
   }
 
-  .e-pv-annotation-color-container.e-btn:hover ,
+  .e-pv-annotation-color-container.e-btn:hover,
   .e-pv-annotation-opacity-container.e-btn:hover,
   .e-pv-annotation-stroke-container.e-btn:hover,
   .e-pv-annotation-thickness-container.e-btn:hover,
@@ -1430,40 +2033,193 @@
   .e-pv-annotation-textcolor-container.e-btn:hover,
   .e-pv-annotation-textalign-container.e-btn:hover,
   .e-pv-annotation-textprop-container.e-btn:hover,
+  .e-pv-annotation-handwritten-container.e-btn:hover,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:hover,
+  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:hover,
   .e-pv-stamp.e-menu-wrapper ul .e-menu-item.e-focused:hover {
-    background-color: $pv-annotation-dropdown-background-color-hover;
-    border-color: $pv-annotation-dropdown-border-color-hover;
+    @if $skin-name == 'Material3' {
+      background: $pv-annotation-dropdown-background-color-hover;
+      border: $pv-annotation-dropdown-border-color-hover;
+    }
+    @else {
+      background-color: $pv-annotation-dropdown-background-color-hover;
+      border-color: $pv-annotation-dropdown-border-color-hover;
+    }
   }
 
-  .e-pv-annotation-color-container.e-btn:active ,
+  .e-pv-stamp.e-menu-wrapper ul .e-menu-item.e-focused:focus {
+    background-color: $pv-annotation-dropdown-background-color-hover;
+    border-color: $pv-annotation-dropdown-border-color-hover;
+    outline: none;
+    color: $pv-item-selection-color;
+  }
+
+  .e-pv-annotation-color-container.e-btn:focus,
+  .e-pv-annotation-opacity-container.e-btn:focus,
+  .e-pv-annotation-stroke-container.e-btn:focus,
+  .e-pv-annotation-thickness-container.e-btn:focus,
+  .e-pv-annotation-shapes-container.e-btn:focus,
+  .e-pv-annotation-calibrate-container.e-btn:focus,
+  .e-pv-annotation-textcolor-container.e-btn:focus,
+  .e-pv-annotation-textalign-container.e-btn:focus,
+  .e-pv-annotation-handwritten-container.e-btn:focus,
+  .e-pv-annotation-textprop-container.e-btn:focus {
+    @if $skin-name == 'Material3' {
+      background: $pv-annotation-dropdown-background-color-hover;
+      border: $pv-annotation-dropdown-border-color-hover;
+      outline: none;
+    }
+    @else {
+      background-color: $pv-annotation-dropdown-background-color-hover;
+      border-color: $pv-annotation-dropdown-border-color-hover;
+      outline: none;
+    }
+  }
+
+  .e-pv-annotation-color-container.e-btn:active,
   .e-pv-annotation-opacity-container.e-btn:active,
-  .e-pv-annotation-stroke-container.e-btn:active ,
+  .e-pv-annotation-stroke-container.e-btn:active,
   .e-pv-annotation-thickness-container.e-btn:active,
   .e-pv-annotation-shapes-container.e-btn:active,
   .e-pv-annotation-calibrate-container.e-btn:active,
   .e-pv-annotation-textcolor-container.e-btn:active,
   .e-pv-annotation-textalign-container.e-btn:active,
-  .e-pv-annotation-textprop-container.e-btn:active {
-    background-color: $pv-annotation-dropdown-background-color-active;
-    border-color: $pv-annotation-dropdown-border-color-active;
+  .e-pv-annotation-textprop-container.e-btn:active,
+  .e-pv-annotation-handwritten-container.e-btn:active {
+    @if $skin-name == 'Material3' {
+      background: $pv-annotation-dropdown-background-color-active;
+      border: $pv-annotation-dropdown-border-color-active;
+    }
+    @else {
+      background-color: $pv-annotation-dropdown-background-color-active;
+      border-color: $pv-annotation-dropdown-border-color-active;
+    }
     box-shadow: none;
     color: $pv-item-selection-color;
   }
 
   .e-pv-annotation-shapes-container.e-btn.e-dropdown-btn.e-active:not(:hover),
-  .e-pv-annotation-calibrate-container.e-btn.e-dropdown-btn.e-active:not(:hover) {
-    background-color: $pv-annotation-dd-background-color-active;
+  .e-pv-annotation-calibrate-container.e-btn.e-dropdown-btn.e-active:not(:hover),
+  .e-pv-annotation-handwritten-container.e-dropdown-btn.e-btn.e-active:not(:hover),
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active:not(:hover) .e-caret {
+    @if $skin-name == 'Material3' {
+      background: $pv-annotation-dd-background-color-active;
+    }
+    @else {
+      background-color: $pv-annotation-dd-background-color-active;
+    }
+    color: $pv-icon-color;
+    @if ($skin-name == 'bootstrap5') {
+      color: $secondary-text-color-pressed;
+    }
   }
 
   .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,
+  .e-pv-custom-annotation-thickness-container.e-dropdown-btn.e-btn,
+  .e-pv-custom-annotation-opacity-container.e-dropdown-btn.e-btn,
   .e-pv-annotation-thickness-container.e-dropdown-btn.e-btn,
   .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn,
   .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn,
   .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn {
     line-height: $pv-annotation-drop-down-btn-line-height;
     padding: $pv-annotation-drop-down-btn-padding;
+    @if ($skin-name == 'bootstrap5' or $skin-name =='Material3') {
+      align-items: center;
+      display: flex;
+    }
+  }
+
+  .e-pv-annotation-color-container.e-dropdown-btn.e-button,
+  .e-pv-annotation-opacity-container.e-dropdown-btn.e-button,
+  .e-pv-annotation-stroke-container.e-dropdown-btn.e-button,
+  .e-pv-custom-annotation-thickness-container.e-dropdown-btn.e-button,
+  .e-pv-custom-annotation-opacity-container.e-dropdown-btn.e-button,
+  .e-pv-annotation-thickness-container.e-dropdown-btn.e-bbuttontn,
+  .e-pv-annotation-textcolor-container.e-dropdown-btn.e-button,
+  .e-pv-annotation-textalign-container.e-dropdown-btn.e-button,
+  .e-pv-annotation-textprop-container.e-dropdown-btn.e-button {
+    line-height: $pv-annotation-drop-down-btn-line-height;
+    padding: $pv-annotation-drop-down-btn-padding;
+    @if ($skin-name == 'bootstrap5') {
+      align-items: baseline;
+      display: flex;
+    }
+  }
+
+  .e-pv-annotation-color-container.e-btn.e-active,
+  .e-pv-annotation-opacity-container.e-btn.e-active,
+  .e-pv-annotation-stroke-container.e-btn.e-active,
+  .e-pv-annotation-shapes-container.e-btn.e-active,
+  .e-pv-annotation-calibrate-container.e-btn.e-active,
+  .e-pv-annotation-textcolor-container.e-btn.e-active,
+  .e-pv-annotation-textprop-container.e-btn.e-active,
+  .e-pv-custom-annotation-thickness-container.e-btn.e-active,
+  .e-pv-custom-annotation-opacity-container.e-btn.e-active,
+  .e-pv-annotation-handwritten-container.e-btn.e-active,
+  .e-pv-annotation-textalign-container.e-btn.e-active {
+    @if ($skin-name == 'bootstrap5') {
+      background-color: $pv-annotation-dropdown-background-color-hover;
+      border-color: $pv-annotation-dropdown-border-color-hover;
+      color: $white;
+    }
+  }
+
+  .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') {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 8px;
+    }
+  }
+
+  .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') {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 8px;
+    }
+  }
+
+  .e-pv-custom-annotation-stamp-container,
+  .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 == 'FluentUI') {
+      background-color: transparent;
+      height: 32px;
+      line-height: 32px;
+    }
+  }
+
+  .e-pv-toolbar.e-toolbar .e-tbar-btn .e-icons.e-btn-icon,
+  .e-pv-annotation-toolbar.e-toolbar .e-tbar-btn .e-icons.e-btn-icon {
+    @if ($skin-name == 'FluentUI') {
+      font-size: $pv-icon-font-size;
+    }
+  }
+
+  .e-pv-submit .e-tbar-btn {
+    @if ($skin-name == 'bootstrap5') {
+      height: 30px;
+    }
+  }
+
+  .e-pv-toolbar.e-toolbar.e-toolpop .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn-text.e-pv-submitform-text {
+    display: inline-block;
+    padding: 0 4px;
+  }
+
+  .e-pv-toolbar.e-toolbar.e-toolpop .e-toolbar-items .e-toolbar-item.e-pv-submit .e-tbar-btn .e-tbar-btn-text.e-pv-submitform-text {
+    display: inline-block;
+    @if $skin-name == 'FluentUI' {
+      padding: 3px 4px;
+    }
+    @else {
+      padding: 0 4px;
+    }
   }
 
   .e-pv-mobile-toolbar .e-toolbar-items .e-toolbar-item .e-btn.e-tbar-btn,
@@ -1486,6 +2242,10 @@
     max-width: $pv-scale-ratio-win-max-width;
   }
 
+  .e-pv-scale-ratio-dialog {
+    max-width: $pv-blazor-scale-ratio-dialog-max-width;
+  }
+
   .e-pv-line-styles-content,
   .e-pv-line-styles-item {
     border-bottom-color: $pv-prop-line-styles-color;
@@ -1499,6 +2259,23 @@
   .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
     height: $pv-prop-color-picker-height;
     line-height: $pv-prop-color-picker-line-height;
+    @if ($skin-name == 'bootstrap5') {
+      background: $transparent;
+      border: 1px solid $border-light;
+      border-radius: 4px;
+      box-sizing: border-box;
+      color: $content-text-color;
+    }
+    @if ($skin-name == 'Material3') {
+      padding: 7px;
+    }
+  }
+
+  .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' {
+      height: 40px;
+    }
   }
 
   .e-pv-properties-window .e-dlg-content {
@@ -1518,13 +2295,19 @@
   .e-pv-properties-line-stroke-color-container,
   .e-pv-properties-line-leader-length-container {
     float: left;
-    height: 52px;
-    margin-bottom: 16px;
+    height: $pv-properties-container-height;
+    margin-bottom: $pv-properties-container-margin-bottom;
   }
 
   .e-pv-properties-line-opacity-container {
     float: left;
     height: auto;
+    width: $pv-properties-window-container-max-width;
+    @if $skin-name == 'Material3'
+    {
+      width: 204px;
+      max-width: 204px;
+    }
   }
 
   .e-pv-scale-ratio-src-input-container,
@@ -1534,20 +2317,32 @@
   .e-pv-depth-input-container,
   .e-pv-depth-unit-container {
     float: left;
-    height: 24px;
+    height: $pv-scale-ratio-input-container-height;
+  }
+
+  .e-bigger .e-pv-scale-ratio-src-input-container,
+  .e-bigger .e-pv-scale-ratio-src-unit-container,
+  .e-bigger .e-pv-scale-ratio-dest-input-container,
+  .e-bigger .e-pv-scale-ratio-dest-unit-container,
+  .e-bigger .e-pv-depth-input-container,
+  .e-bigger .e-pv-depth-unit-container {
+    @if $skin-name == 'FluentUI' {
+      float: left;
+      height: 40px;
+    }
   }
 
   .e-pv-scale-ratio-src-input-container,
   .e-pv-scale-ratio-src-unit-container,
   .e-pv-scale-ratio-dest-input-container,
   .e-pv-scale-ratio-dest-unit-container {
-    margin-bottom: 24px;
+    margin-bottom: $pv-scale-ratio-input-container-margin-bottom;
   }
 
   .e-pv-scale-ratio-src-unit-container,
   .e-pv-scale-ratio-dest-unit-container,
   .e-pv-depth-unit-container {
-    margin-left: 24px;
+    margin-left: $pv-prop-win-margin-left;
   }
 
   .e-pv-scale-ratio-src-unit.e-btn,
@@ -1568,6 +2363,14 @@
     margin-top: $pv-scale-ratio-win-drop-down-caret-margin-top;
   }
 
+  .e-bigger .e-pv-scale-ratio-src-unit .e-caret,
+  .e-bigger .e-pv-scale-ratio-dest-unit .e-caret,
+  .e-bigger .e-pv-depth-unit .e-caret {
+    @if $skin-name == 'FluentUI' {
+      margin-left: 160px;
+    }
+  }
+
   .e-pv-properties-line-opacity {
     margin-top: -10px;
   }
@@ -1580,43 +2383,122 @@
   .e-pv-properties-line-stroke-color-label,
   .e-pv-properties-line-opacity-label,
   .e-pv-properties-line-leader-length-label {
-    font-size: 14px;
     margin-bottom: 8px;
+    @if ($skin-name == 'FluentUI') {
+      font-weight: 600;
+    }
+    @if ($skin-name == 'Material3'){
+      font-size: $text-xxs;
+      margin-bottom: 0;
+    }
+    @else {
+      font-size: 14px;
+    }
   }
 
   .e-pv-properties-line-end-container,
   .e-pv-properties-line-thickness-container {
-    margin-left: 24px;
+    @if ($skin-name == 'bootstrap5') {
+      margin-left: 37px;
+    }
+    @if ($skin-name == 'Material3'){
+      margin-left: 12px;
+    }
+    @else {
+      margin-left: 24px;
+    }
   }
 
   .e-pv-properties-line-leader-length-container {
     margin-left: $pv-line-leader-length-margin-left;
   }
 
+  .e-bigger .e-pv-properties-line-leader-length-container {
+    @if $skin-name == 'FluentUI' {
+      margin-left: 100px;
+    }
+  }
+
   .e-pv-properties-line-stroke-color-container {
     margin-left: $pv-line-stroke-color-margin-left;
     margin-right: 87px;
   }
 
+  .e-bigger .e-pv-properties-line-stroke-color-container {
+    @if $skin-name == 'FluentUI' {
+      margin-left: 195px;
+    }
+  }
+
   .e-pv-properties-line-start,
   .e-pv-properties-line-end,
   .e-pv-properties-line-style,
   .e-pv-properties-line-thickness,
   .e-pv-properties-line-opacity,
-  .e-pv-properties-line-leader-length,
+  .e-pv-properties-line-leader-length {
+    max-width: $pv-properties-window-container-max-width;
+  }
+
+  .e-bigger .e-pv-properties-line-start,
+  .e-bigger .e-pv-properties-line-end,
+  .e-bigger .e-pv-properties-line-style,
+  .e-bigger .e-pv-properties-line-thickness,
+  .e-bigger .e-pv-properties-line-opacity,
+  .e-bigger .e-pv-properties-line-leader-length {
+    @if $skin-name == 'FluentUI' {
+      max-width: 248px;
+    }
+  }
+
   .e-pv-scale-ratio-src-input,
   .e-pv-scale-ratio-dest-input,
   .e-pv-depth-input {
-    max-width: 180px;
+    max-width: $pv-scale-ratio-container-max-width;
+  }
+
+  .e-bigger .e-pv-scale-ratio-src-input,
+  .e-bigger .e-pv-scale-ratio-dest-input,
+  .e-bigger .e-pv-depth-input {
+    @if $skin-name == 'FluentUI' {
+      max-width: 248px;
+    }
   }
 
   .e-pv-properties-line-start,
   .e-pv-properties-line-end,
-  .e-pv-properties-line-style,
+  .e-pv-properties-line-style {
+    width: $pv-properties-window-container-width;
+  }
+
+  .e-pv-properties-line-style {
+    @if ($skin-name == 'Material3'){
+      font-size: $text-xxs;
+      max-width: 214px;
+      border-radius: 0;
+    }
+  }
+
+  .e-bigger .e-pv-properties-line-start,
+  .e-bigger .e-pv-properties-line-end,
+  .e-bigger .e-pv-properties-line-style {
+    @if $skin-name == 'FluentUI' {
+      width: 248px;
+    }
+  }
+
   .e-pv-scale-ratio-src-unit,
   .e-pv-scale-ratio-dest-unit,
   .e-pv-depth-unit {
-    width: 180px;
+    width: $pv-scale-ratio-width;
+  }
+
+  .e-bigger .e-pv-scale-ratio-src-unit,
+  .e-bigger .e-pv-scale-ratio-dest-unit,
+  .e-bigger .e-pv-depth-unit {
+    @if $skin-name == 'FluentUI' {
+      height: 40px;
+      width: 248px;
+    }
   }
 
   .e-pv-line-styles-container {
@@ -1641,16 +2523,66 @@
     float: left;
     line-height: 16px;
     width: 44px;
+    @if $skin-name == 'FluentUI' {
+      line-height: 20px;
+    }
+    @if ($skin-name == 'Material3'){
+      font-size: $text-sm;
+    }
   }
 
   .e-pv-properties-line-start.e-btn,
   .e-pv-properties-line-end.e-btn {
-    height: 32px;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
+      background: transparent;
+      border-color: $border;
+      box-shadow: none;
+      color: $content-text-color;
+    }
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      height: 30px;
+    }
+    @if ($skin-name == 'Material3'){
+      border-bottom: 1px solid rgba($border);
+      border-radius: 0;
+      width: 214px;
+      height: 32px;
+    }
+
+    @else {
+      height: 32px;
+    }
     padding: $pv-properties-padding;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
+      text-align: center;
+    }
+  }
+
+  .e-bigger .e-pv-properties-line-start.e-btn,
+  .e-bigger .e-pv-properties-line-end.e-btn,
+  .e-bigger .e-pv-properties-line-style.e-btn {
+    @if $skin-name == 'FluentUI' {
+      height: 40px;
+    }
   }
 
   .e-pv-properties-line-style.e-btn {
-    height: 32px;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
+      background: transparent;
+      border-color: $border;
+      box-shadow: none;
+      color: $content-text-color;
+    }
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      height: 30px;
+    }
+    @if ($skin-name =='Material3'){
+      border-bottom: 1px solid rgba($border);
+      border-radius: 0;
+    }
+    @else {
+      height: 32px;
+    }
     line-height: 0;
     padding: $pv-properties-line-style-padding;
     white-space: pre;
@@ -1668,33 +2600,113 @@
     margin-left: $pv-properties-drop-down-margin-left;
   }
 
+  .e-bigger .e-pv-properties-line-start.e-btn .e-caret,
+  .e-bigger .e-pv-properties-line-end.e-btn .e-caret {
+    @if $skin-name == 'FluentUI' {
+      margin-left: 145px;
+    }
+  }
+
   .e-pv-line-styles-content-container {
     float: left;
     font-size: 0;
     margin-right: 7.5px;
     margin-top: $pv-prop-line-styles-margin-top;
-    width: 138px;
+    @if $skin-name == 'FluentUI' {
+      width: 120px;
+    }
+    @if ($skin-name == 'Material3'){
+      width: 155px;
+      padding-top: 6px;
+    }
+    @else {
+      width: 138px;
+    }
+  }
+
+  .e-bigger .e-pv-line-styles-content-container {
+    @if $skin-name == 'FluentUI' {
+      margin-top: 5.5px;
+      width: 180px;
+    }
   }
 
   .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,
   .e-menu-wrapper.e-custom-scroll.e-lib.e-keyboard.e-pv-stamp ul {
-    height: $pv-annot-toolbar-dropdown-btn-height;
-    width: $pv-annot-toolbar-dropdown-btn-width;
+    @if $skin-name != 'Material3' {
+      height: $pv-annot-toolbar-dropdown-btn-height;
+      width: $pv-annot-toolbar-dropdown-btn-width;
+    }
+    @else {
+      width: max-content;
+    }
+  }
+
+  .e-pv-annotation-shapes-container.e-btn.e-icon-button,
+  .e-pv-annotation-calibrate-container.e-btn.e-icon-button,
+  .e-pv-annotation-handwritten-container.e-btn.e-icon-button {
+    @if $skin-name == 'bootstrap5' {
+      align-items: baseline;
+      display: flex;
+      height: $pv-annot-toolbar-dropdown-btn-height;
+      line-height: $pv-annot-toolbar-dropdown-btn-height;
+      padding: 3px 8px;
+      width: $pv-annot-toolbar-dropdown-btn-width;
+    }
   }
 
   .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
-  .e-pv-annotation-calibrate-container.e-btn.e-icon-btn {
-    padding-top: $pv-annot-toolbar-dropdown-btn-padding-top;
+  .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
+  .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
+    @if $skin-name == 'bootstrap5' {
+      align-items: baseline;
+      display: flex;
+      padding: $pv-annotation-icon-padding;
+    }
+    @else {
+      padding: $pv-annotation-icon-padding;
+    }
+  }
+
+  .e-pv-annotation-shapes-container .e-btn-icon.e-icons.e-icon-right.e-caret,
+  .e-pv-annotation-calibrate-container .e-btn-icon.e-icons.e-icon-right.e-caret,
+  .e-pv-annotation-handwritten-container .e-btn-icon.e-icons.e-icon-right.e-caret,
+  .e-pv-alignment-container .e-btn-icon.e-icons.e-icon-right.e-caret,
+  .e-pv-text-color-container .e-btn-icon.e-icons.e-icon-right.e-caret,
+  .e-pv-color-template-container .e-btn-icon.e-icons.e-icon-right.e-caret,
+  .e-pv-stroke-template-container .e-btn-icon.e-icons.e-icon-right.e-caret,
+  .e-pv-thickness-template-container .e-btn-icon.e-icons.e-icon-right.e-caret,
+  .e-pv-opacity-template-container .e-btn-icon.e-icons.e-icon-right.e-caret {
+    @if $skin-name == 'bootstrap5' {
+      padding-bottom: 0;
+      width: 20px;
+    }
   }
 
   .e-pv-annotation-shape-icon,
-  .e-pv-annotation-calibrate-icon {
-    margin-right: 10px;
+  .e-pv-annotation-calibrate-icon,
+  .e-pv-handwritten-icon {
+    margin-right: 4px;
+  }
+
+  .e-pv-stamp-template-container .e-menu-item.e-menu-caret-icon {
+    @if $skin-name == 'bootstrap5' {
+      padding: 0 26px 0 8px;
+    }
   }
 
   .e-pv-properties-opacity-indicator {
-    margin-left: 153px;
+    @if $skin-name == 'FluentUI' {
+      margin-left: 141px;
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: 190px;
+    }
+    @else {
+      margin-left: 153px;
+    }
   }
 
   .e-pv-annotation-stamp-container .e-menu-parent.e-menu {
@@ -1703,10 +2715,19 @@
 
   .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,
   .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 {
-    line-height: $pv-annot-toolbar-dropdown-btn-height;
+    @if $skin-name != 'Material3' {
+      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' {
+      background: $secondary-bg-color-pressed;
+    }
   }
 
   .e-bigger .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
@@ -1714,7 +2735,9 @@
     height: $pv-toolbar-btn-height-big;
     line-height: $pv-toolbar-btn-line-height;
     margin: $pv-toolbar-btn-margin;
-    padding: $pv-toolbar-btn-padding;
+    @if $skin-name != 'Material3' {
+      padding: $pv-toolbar-btn-padding;
+    }
     width: $pv-toolbar-btn-width-big;
   }
 
@@ -1722,6 +2745,12 @@
     padding-top: $pv-mobile-page-box-padding-top;
   }
 
+  .e-toolbar-item.e-pv-current-page-container {
+    @if $skin-name == 'bootstrap5' {
+      padding-top: 2px;
+    }
+  }
+
   .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-pv-zoom-drop-down-container {
     width: $pv-zoom-dropdown-width-mobile;
   }
@@ -1745,22 +2774,42 @@
 
   .e-bigger .e-pv-password-popup.e-dialog,
   .e-pv-mobile-view .e-pv-password-popup.e-dialog {
-    height: $pv-password-dialog-height-mobile;
+    @if ($skin-name != 'Material3') {
+      height: $pv-password-dialog-height-mobile;
+    }
+  }
+  .e-bigger .e-pv-password-popup.e-dialog,
+  .e-pv-mobile-view .e-pv-password-popup.e-dialog {
+    @if ($skin-name == 'FluentUI') {
+      height: 270px;
+    }
   }
 
   .e-bigger .e-pv-notification-popup.e-dialog,
   .e-pv-mobile-view .e-pv-notification-popup.e-dialog {
-    height: $pv-notification-dialog-height-mobile;
+    @if $skin-name != 'Material3' {
+      height: $pv-notification-dialog-height-mobile;
+    }
   }
 
   .e-bigger .e-pv-notification-popup.e-pv-notification-large-content.e-dialog,
   .e-pv-mobile-view .e-pv-notification-popup.e-pv-notification-large-content.e-dialog {
-    height: $pv-notification-dialog-height-large-mobile;
+    @if $skin-name != 'Material3' {
+      height: $pv-notification-dialog-height-large-mobile;
+    }
   }
 
+  .e-bigger .e-pv-notification-popup.e-pv-notification-large-content.e-dialog,
+  .e-pv-mobile-view .e-pv-notification-popup.e-pv-notification-large-content.e-dialog {
+    @if ($skin-name == 'FluentUI') {
+      height: 280px;
+    }
+  }
   .e-bigger .e-pv-corrupted-popup.e-dialog,
   .e-pv-mobile-view .e-pv-corrupted-popup.e-dialog {
-    height: $pv-corrupted-dialog-height-mobile;
+    @if $skin-name != 'Material3' {
+      height: $pv-corrupted-dialog-height-mobile;
+    }
   }
 
   .e-bigger .e-pv-password-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
@@ -1782,6 +2831,16 @@
     @if $skin-name == 'bootstrap4' {
       color: $pv-title-close-color;
     }
+    @if $skin-name == 'bootstrap5' {
+      color: $white;
+    }
+  }
+
+  .e-pv-fontfamily-container .e-input-group .e-input-group-icon,
+  .e-input-group.e-control-wrapper .e-input-group-icon {
+    @if $skin-name == 'bootstrap5' {
+      color: inherit;
+    }
   }
 
   .e-pv-fontsize-container .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
@@ -1801,27 +2860,32 @@
   }
 
   .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl input.e-input.e-control.e-keyboard,
-  .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.-pv-prop-dropdown.e-ddl input.e-input.e-control.e-keyboard {
+  .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl input.e-input.e-control.e-keyboard,
+  .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl input.e-input.e-control.e-keyboard,
+  .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl input.e-input.e-control.e-keyboard {
     padding-left: $pv-zoom-drop-down-padding-left-rtl;
     padding-right: $pv-zoom-drop-down-padding-right-rtl;
   }
 
   .e-bigger .e-pdfviewer .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child,
-  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child {
+  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child,
+  .e-bigger .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child {
     @if $skin-name == 'bootstrap4' {
       margin-left: $pv-toolbar-items-first-child-margin-left-big;
     }
   }
 
   .e-bigger .e-pdfviewer .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child,
-  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child {
+  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child,
+  .e-bigger .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child  {
     @if $skin-name == 'bootstrap4' {
       margin-right: $pv-toolbar-items-first-child-margin-left-big;
     }
   }
 
   .e-bigger .e-pdfviewer .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child,
-  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child {
+  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child,
+  .e-bigger .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child {
     @if $skin-name == 'bootstrap4' {
       margin-right: $pv-toolbar-items-last-child-margin-right-big;
     }
@@ -1892,22 +2956,35 @@
     margin-right: $pv-textsearch-textbox-margin-right;
   }
 
-  div >.e-pv-bookmark-icon.e-pv-icon.e-right {
+  div > .e-pv-bookmark-icon.e-pv-icon.e-right {
     float: $pv-bookmark-icon-float;
     font-size: $pv-bookmark-icon-font-size;
     padding-left: $pv-bookmark-icon-rtl-padding;
     padding-right: $pv-bookmark-icon-rtl-padding;
     position: $pv-bookmark-icon-rtl-position;
+    @if $skin-name == 'Material3' {
+      font-size: $text-base;
+      padding-left: 12px;
+      padding-right: 12px;
+    }
   }
 
-  .e-bigger div >.e-pv-bookmark-icon.e-pv-icon.e-right {
+  .e-bigger div > .e-pv-bookmark-icon.e-pv-icon.e-right {
     @if $skin-name == 'bootstrap4' {
       font-size: $pv-icon-font-size-big;
     }
+    @if $skin-name == 'Material3' {
+      font-size: $text-base;
+      padding-left: 12px;
+      padding-right: 12px;
+    }
   }
 
   .e-bigger .e-pv-properties-window {
     max-width: $pv-properties-win-max-width-big;
+    @if $skin-name == 'FluentUI' {
+      min-height: 498px;
+    }
   }
 
   .e-bigger .e-pv-scale-ratio-window {
@@ -1920,6 +2997,9 @@
   }
 
   .e-pdfviewer .e-treeview .e-list-text {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      line-height: 20px;
+    }
     width: 100%;
   }
 
@@ -1927,7 +3007,7 @@
   .e-pdfviewer .e-treeview.e-fullrow-wrap .e-icon-expandable,
   .e-pdfviewer .e-treeview.e-fullrow-wrap .e-input,
   .e-pdfviewer .e-treeview.e-fullrow-wrap .e-list-url {
-    margin-top: 3px;
+    margin-top: $pv-bookmark-expandable-icon-margin-top;
     position: absolute;
   }
 
@@ -1943,7 +3023,12 @@
   }
 
   .e-pdfviewer .e-editable-inline {
-    padding: 7px 8px 42px;
+    @if $skin-name == 'bootstrap5' {
+      padding: 7px 8px 50px;
+    }
+    @else {
+      padding: 7px 8px 42px;
+    }
   }
 
   .e-pv-comment-textbox {
@@ -1952,34 +3037,93 @@
 
   .e-pdfviewer .e-editable-value-wrapper {
     color: $pv-comment-font-color;
-    font-size: 14px;
     line-height: normal;
     min-height: 22px;
     padding: 2px 8px 3px;
+    @if $skin-name == 'bootstrap5' {
+      color: $content-text-color-alt2;
+    }
+    font-size: 14px;
+    @if $skin-name == 'bootstrap5' {
+      font-size: 12px;
+    }
+    @if $skin-name == 'Material3' {
+      font-size: $text-xs;
+      line-height: 18px;
+    }
   }
 
   .e-pdfviewer .e-pv-comment-textbox .e-editable-value-wrapper {
     color: $pv-comment-font-color;
+    @if $skin-name == 'bootstrap5' {
+      color: $content-text-color-alt2;
+    }
     font-size: 14px;
+    @if $skin-name == 'bootstrap5' {
+      font-size: 12px;
+    }
+    @if $skin-name == 'Material3' {
+      font-size: $text-xs;
+    }
     line-height: normal;
     min-height: 24px;
     padding: 2px 8px 3px 32px;
   }
 
+  .e-pv-comment-textbox.e-inplaceeditor .e-component-group,
+  .e-pv-new-comments-div.e-inplaceeditor .e-component-group {
+    @if $skin-name == 'bootstrap5' {
+      margin-bottom: 0;
+    }
+  }
+
+  .e-pv-reply-div.e-pv-comments-leave.e-focused
+  {
+    border: $pv-comments-div-focus-border;
+    background: $pv-comments-div-focus-background;
+  }
+  
+  .e-pv-comments-div.e-focused {
+    border: $pv-comments-div-focus-border;
+    background: $pv-comments-div-focus-background;
+  }
+
   .e-pdfviewer .e-inplaceeditor .e-editable-action-buttons {
     float: right;
     padding-bottom: 7px;
-    padding-top: 5px;
+    @if $skin-name == 'bootstrap5' {
+      margin-top: 0;
+      padding-top: 10px;
+    }
+    @else {
+      padding-top: 5px;
+    }
     position: relative;
-    right: 8px;
+    @if $skin-name == 'bootstrap5' {
+      right: 0;
+    }
+    @else {
+      right: 8px;
+    }
   }
 
   .e-pdfviewer .e-pv-reply-div .e-inplaceeditor .e-editable-action-buttons {
     float: right;
     padding-bottom: 7px;
-    padding-top: 5px;
+    @if $skin-name == 'bootstrap5' {
+      margin-top: 0;
+      padding-top: 10px;
+    }
+    @else {
+      padding-top: 5px;
+    }
     position: relative;
-    right: 8px;
+    @if $skin-name == 'bootstrap5' {
+      right: 0;
+    }
+    @else {
+      right: 8px;
+    }
   }
 
   .e-pv-comment-title-container {
@@ -2001,7 +3145,9 @@
 
   .e-pdfviewer .e-editable-inline .e-btn.e-outline.e-primary,
   .e-pdfviewer .e-editable-inline .e-btn.e-outline {
-    border-color: transparent;
+    @if ($skin-name != 'bootstrap5' and $skin-name != 'Material3') {
+      border-color: transparent;
+    }
   }
 
   .e-pdfviewer .e-editable-inline .e-editable-form {
@@ -2016,6 +3162,9 @@
     font-size: 14px;
     padding-left: 5px;
     padding-right: 5px;
+    @if $skin-name == 'Material3' {
+      font-size: $text-xs;
+    }
   }
 
   .e-pdfviewer .e-btn-save {
@@ -2023,12 +3172,17 @@
     margin-right: 12px;
     padding-left: 7px;
     padding-right: 7px;
+    @if $skin-name == 'Material3' {
+      font-size: $text-xs;
+    }
   }
 
   .e-pdfviewer .e-btn-save.e-outline.e-primary:disabled {
-    background-color: $pv-save-button-bg-color;
-    border-radius: 2px;
-    color: $pv-save-button-color;
+    @if ($skin-name != 'bootstrap5' and $skin-name != 'Material3') {
+      background-color: $pv-save-button-bg-color;
+      border-radius: 2px;
+      color: $pv-save-button-color;
+    }
   }
 
   .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
@@ -2039,6 +3193,11 @@
   .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-header {
     line-height: 32px;
     min-height: 32px;
+    @if $skin-name == 'Material3' {
+      box-shadow: none;
+      border: 1px solid rgba($border-light);
+      border-width: 1px 0;
+    }
   }
 
   .e-contextmenu-wrapper .e-pv-context-menu .e-menu-item {
@@ -2046,6 +3205,9 @@
   }
 
   .e-pv-comment-panel {
+    @if $skin-name == 'Material3' {
+      background: $content-bg-color-alt2;
+    }
     background-color: $pv-comment-panel-bg;
     border: $pv-sidebar-toolbar-border;
     border-width: 1px 1px 0;
@@ -2058,21 +3220,62 @@
   }
 
   .e-pv-comment-panel-title-container {
-    background-color: $pv-comment-panel-bg;
-    border-color: $pv-comment-panel-border-color;
-    border-style: double;
-    border-width: 0 1px 1px 0;
+    @if $skin-name == 'Material3' {
+      background: $content-bg-color-alt2;
+      border-style: solid;
+      border-width: 0 0 1px 1px;
+    }
+    @else {
+      background-color: $pv-comment-panel-bg;
+      border-style: double;
+      border-width: 0 1px 1px 0;
+    }
     height: 45px;
     position: relative;
+    border-color: $pv-comment-panel-border-color;
   }
 
   .e-pv-comment-panel-title {
     color: $pv-comment-font-color;
     font-size: 14px;
-    left: 15px;
+    @if $skin-name == 'Material3' {
+      background: $content-bg-color-alt2;
+      border: $border-light;
+      border-width: 0 0 1px 1px;
+      font-size: $text-base;
+      font-weight: $pv-comment-tile-font-weight;
+      line-height: 24px;
+      padding: 8px 215px 8px 12px;
+    }
+    @if $skin-name == 'bootstrap5' {
+      font-size: 16px;
+      font-weight: 500;
+    }
+    @if $skin-name == 'FluentUI' {
+      font-weight: $pv-comment-tile-font-weight;
+    }
+    @if $skin-name != 'Material3' {
+      left: 15px;
+      top: 14px;
+    }
     position: absolute;
     text-align: left;
-    top: 14px;
+  }
+
+  .e-pv-mobile-comments-container .e-pv-comment-panel-title {
+    @if $skin-name == 'Material3' {
+      background: $content-bg-color-alt2;
+      border: $border-light;
+      border-width: 0 0 1px 1px;
+      font-size: $text-base;
+      font-weight: $pv-comment-tile-font-weight;
+      line-height: 16px;
+      padding: 0;
+      left: 15px;
+      top: 14px;
+      position: absolute;
+      text-align: left;
+    }
   }
 
   .e-pv-comment-panel-title-close-div.e-btn {
@@ -2087,15 +3290,30 @@
     right: 11px;
     top: 5px;
     width: $pv-title-close-width;
+    @if $skin-name == 'FluentUI' {
+      padding: 4px;
+    }
+  }
+
+  @if $skin-name == 'Material3' {
+    .e-pv-comment-panel-title-container .e-pv-more-icon .e-pv-icon {
+      font-size: $text-base;
+    }
   }
 
   .e-pv-title-close-icon {
-    color: $pv-comment-text-color;
+    @if $skin-name != 'bootstrap5' {
+      color: $pv-comment-text-color;
+    }
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+      color: $icon-color;
+    }
   }
 
   .e-pv-comments-panel-text {
     font-size: 15px;
     padding-left: 85px;
+    color: rgba(var(--color-sf-on-surface-variant));
   }
 
   .e-pv-comments-content-container {
@@ -2105,6 +3323,9 @@
     border-width: 0 1px 1px 0;
     height: calc(100% - 45px);
     overflow: auto;
+    @if $skin-name == 'Material3' {
+      background: $content-bg-color-alt2;
+    }
   }
 
   .e-pv-comments-container {
@@ -2115,26 +3336,70 @@
   }
 
   .e-pv-comments-border {
-    border: 2px;
-    border-color: $pv-comment-panel-bottom-color;
-    border-radius: 4px;
-    border-style: groove;
+    @if $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' {
+      border: 2px;
+      border-color: $pv-comment-panel-bottom-color;
+      border-radius: 4px;
+      border-style: groove;
+    }
+    @if $skin-name == 'tailwind' {
+      border: 1px solid $border-light;
+      border-radius: 2px;
+    }
+    @if $skin-name == 'bootstrap5' {
+      border: 1px solid $border-light;
+      border-radius: 2px;
+    }
+    @if $skin-name == 'Material3' {
+      border: 1px solid rgba($border-light);
+      border-radius: 4px;
+    }
   }
 
   .e-pv-comment-title {
     color: $pv-comment-text-color;
-    font-size: 14px;
-    max-width: 237px;
     padding-left: 32px;
     padding-top: $pv-comment-title-padding-top;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
+      color: $pv-comment-tile-text-color;
+    }
+    font-size: 14px;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+      font-size: 12px;
+      font-weight: $pv-comment-tile-font-weight;
+    }
+    @if $skin-name == 'FluentUI' {
+      font-weight: $pv-comment-tile-font-weight;
+    }
+    @if $skin-name == 'Material3' {
+      font-size: $text-xs;
+      padding-left: 40px;
+      padding-top: $pv-comment-title-padding-top;
+      padding-bottom: 30px;
+      height: 18px;
+    }
+    max-width: 237px;
     position: absolute;
   }
 
   .e-pv-reply-title {
     color: $pv-comment-text-color;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
+      color: $pv-comment-tile-text-color;
+    }
     font-size: 14px;
-    max-width: 212px;
-    padding-left: 8px;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+      font-size: 12px;
+      font-weight: $pv-comment-tile-font-weight;
+    }
+    @if $skin-name == 'FluentUI' {
+      font-weight: $pv-comment-tile-font-weight;
+    }
+    @if $skin-name == 'Material3' {
+      font-size: $text-xs;
+    }
+    max-width: 212px;
+    padding-left: 8px;
     padding-top: $pv-comment-title-padding-top;
     position: absolute;
   }
@@ -2144,7 +3409,12 @@
   }
 
   .e-pv-comments-select {
-    background-color: $pv-comment-panel-bg;
+    @if $skin-name == 'FluentUI' {
+      background-color: $content-bg-color-selected;
+    }
+    @else {
+      background-color: $pv-comment-panel-bg;
+    }
   }
 
   .e-pv-comments-select .e-pv-comment-textbox .e-editable-value-wrapper {
@@ -2156,20 +3426,61 @@
   }
 
   .e-pdfviewer .e-accordion {
-    background-color: $pv-comments-content-container-bg;
-    border: transparent;
+    @if $skin-name == 'Material3' {
+      background: $pv-comments-content-container-bg;
+      border-radius: 0;
+      border-width: 0;
+    }
+    @else {
+      background-color: $pv-comments-content-container-bg;
+      border: transparent;
+    }
   }
 
   .e-menu-wrapper.e-custom-scroll.e-lib.e-keyboard.e-pv-stamp {
     border: 0;
-    display: block;
+    @if $skin-name == 'bootstrap5' {
+      background-color: $transparent;
+    }
+    @if $skin-name != 'Material3' {
+      display: block;
+    }
+  }
+
+  .e-dropdown-popup.e-lib.e-popup.e-control.e-pv-handwritten-popup.e-popup-open ul {
+    @if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
+      padding-bottom: 6px;
+      padding-top: 6px;
+    }
+    @else {
+      padding-bottom: 6px;
+      padding-top: 17px;
+    }
+  }
+
+  .e-bigger .e-dropdown-popup.e-lib.e-popup.e-control.e-pv-handwritten-popup .e-btn.e-outline.e-primary {
+    @if $skin-name == 'FluentUI' {
+      min-height: 49px;
+      min-width: 152px;
+    }
   }
 
   .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
+    margin-top: $pv-stamp-icon-margin-top;
     padding-left: 7px;
     @if $skin-name == 'fabric' {
+      margin-top: -7px;
       padding-left: 10px;
     }
+    @if $skin-name == 'bootstrap5' {
+      padding-left: 4px;
+    }
+  }
+
+  .e-pv-annotation-stamp-container .e-rtl.e-menu-wrapper ul .e-menu-item .e-menu-icon {
+    @if $skin-name == 'bootstrap5' {
+      margin-left: 1px;
+    }
   }
 
   .e-pdfviewer .e-inplaceeditor {
@@ -2182,7 +3493,13 @@
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
     border-bottom: 0;
-    word-break: break-all;
+    word-break: break-word;
+  }
+
+  .e-pdfviewer .e-inplaceeditor .e-editable-value-container .e-editable-value {
+    @if $skin-name == 'Material3' {
+      font-size: $text-xs;
+    }
   }
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper {
@@ -2193,6 +3510,11 @@
     background: transparent;
   }
 
+  .e-pdfviewer .e-inplaceeditor .e-editable-value-container {
+    background: transparent;
+    width: 229px;
+  }
+
   .e-pv-status-div {
     height: 20px;
     left: 8px;
@@ -2206,7 +3528,9 @@
   }
 
   .e-pdfviewer .e-input-group.e-control-wrapper.e-editable-elements.e-input-focus {
-    caret-color: $pv-comment-text-curser-color;
+    @if $skin-name != 'bootstrap5' {
+      caret-color: $pv-comment-text-cursor-color;
+    }
   }
 
   .e-pv-reply-div {
@@ -2216,7 +3540,18 @@
   .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
   .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
     background: $pv-comment-panel-bg;
-    border: $pv-comment-panel-border-color;
+    @if $skin-name != 'FluentUI' {
+      border: 1px solid $pv-comment-panel-border-color;
+    }
+    @if $skin-name == 'Material3' {
+      border-width: 1px 0;
+    }
+  }
+
+  .e-pdfviewer .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus,
+  .e-pdfviewer .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
+    background: $pv-comment-panel-bg;
+    box-shadow: none;
   }
 
   .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon,
@@ -2225,6 +3560,15 @@
   .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
     color: $pv-comment-text-color;
     font-size: 14px;
+    @if $skin-name == 'FluentUI' {
+      font-weight: $pv-comment-tile-font-weight;
+    }
+    @if $skin-name == 'Material3' {
+      font-weight: $font-weight-normal;
+      letter-spacing: .24px;
+      line-height: 20px;
+      padding: 0 249px 9px 0;
+    }
   }
 
   .e-content-placeholder.e-pdfviewer.e-placeholder-pdfviewer {
@@ -2237,12 +3581,56 @@
 
   .e-pdfviewer .e-pv-signature-apperance .e-checkbox-wrapper {
     margin-top: 10px;
+    padding-bottom: $pv-signature-appearance-checkbox;
+    @if $skin-name == 'Material3' {
+      margin-top: 12px;
+    }
   }
 
-  .e-pdfviewer .e-pv-signature-window .e-footer-content .e-pv-clearbtn {
+  .e-pdfviewer .e-pv-signature-window .e-footer-content {
+    float: left;
+  }
+  .e-pv-signature-dialog-height .e-pv-clearbtn
+  {
     float: left;
+    @if $skin-name != 'Material3' {
+      height: 30px;
+      min-height: 30px;
+    }
+  }
+  .e-pv-signature-dialog-height .e-pv-cancelbtn{
+    @if $skin-name != 'Material3' {
+      height: 32px;
+      min-height: 32px;
+    }
   }
 
+  .e-pv-signature-dialog-height .e-pv-createbtn{
+    @if $skin-name != 'Material3' {
+      height: 30px;
+      min-height: 30px;
+    }
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-clearbtn{
+    @if $skin-name != 'Material3' {
+      float: left;
+      height: 49px;
+      min-height: 49px;
+    }
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-cancelbtn{
+    @if $skin-name != 'Material3' {
+      height: 49px;
+      min-height: 49px;
+    }
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-createbtn{
+    @if $skin-name != 'Material3' {
+      height: 49px;
+      min-height: 49px;
+    }
+  }
+  
   .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-bold.e-pv-tbar-btn.e-tooltip.textprop-option-active,
   .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-italic.e-pv-tbar-btn.e-tooltip.textprop-option-active,
   .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-strikeout.e-pv-tbar-btn.e-tooltip.textprop-option-active,
@@ -2251,8 +3639,15 @@
   .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 {
-    background: $pv-signature-footer-color;
-    border-color: $pv-signature-footer-color;
+    @if $skin-name != 'bootstrap5' {
+      background: $pv-signature-footer-color;
+      border-color: $pv-signature-footer-color;
+    }
+    @else {
+      background: $secondary-bg-color-pressed;
+      border-color: $secondary-bg-color-pressed;
+      color: $secondary-text-color-pressed;
+    }
   }
 
   .e-pv-comment-panel-resizer {
@@ -2280,4 +3675,1220 @@
     }
     right: 300px;
   }
+
+  .e-pv-align {
+    cursor: pointer;
+    float: right;
+    font-size: 20px;
+    margin-right: 16px;
+    margin-top: $pv-signature-delete-icon-margin-top;
+  }
+
+  .e-pv-align-border {
+    border: $pv-signature-border-color;
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+    width: 170px;
+  }
+
+  .e-pv-align-border-div {
+    @if $skin-name == 'highcontrast' {
+      background-color: $pv-high-contrast-signature-bg;
+      color: $pv-high-contrast-signature-text;
+    }
+  }
+
+  .e-pv-font-sign {
+    border: 1px solid $pv-sidebar-bookmark-title-color;
+    border-radius: 5px;
+    display: inline-block;
+    font-size: 13px;
+    height: 88px;
+    margin: 15px;
+    padding-top: 40px;
+    text-align: center;
+    width: 311px;
+    word-wrap: break-word;
+    @if $skin-name == 'FluentUI' {
+      max-width: 300px;
+      padding-top: 36px;
+    }
+    @if $skin-name == 'Material3' {
+      border: 1px dashed rgba($primary);
+      border-radius: 4px;
+      background: $content-bg-color;
+      font-size: $text-2xl;
+      color: $content-text-color;
+      font-weight: $font-weight-normal;
+    }
+  }
+
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused {
+    @if $skin-name == 'bootstrap5' {
+      color: $white;
+      height: 32px;
+      line-height: 32px;
+    }
+    @else {
+      color: $pv-icon-color;
+    }
+  }
+
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item {
+    @if $skin-name == 'bootstrap5' {
+      height: 32px;
+      line-height: 32px;
+      padding-left: 8px;
+    }
+  }
+
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon {
+    @if $skin-name == 'bootstrap5' {
+      font-size: 16px;
+    }
+  }
+
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
+    @if $skin-name == 'bootstrap5' {
+      font-size: 14px;
+    }
+  }
+
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item,
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-menu-icon,
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-caret {
+    @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+      border-radius: 4px;
+    }
+    @if $skin-name == 'bootstrap5' {
+      color: $pv-icon-color;
+      height: 32px;
+      line-height: 32px;
+    }
+    @else {
+      color: $pv-icon-color;
+    }
+  }
+
+  .e-bigger .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item,
+  .e-bigger .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-menu-icon,
+  .e-bigger .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-caret {
+    @if ($skin-name == 'FluentUI') {
+      height: 32px;
+    }
+  }
+
+  .e-pv-mobile-annotation-toolbar .e-toolbar-items .e-hscroll-bar {
+    @if ($skin-name == 'FluentUI') {
+      overflow-y: hidden;
+    }
+  }
+
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused:hover,
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-selected {
+    @if $skin-name == 'bootstrap5' {
+      background: $secondary-bg-color-pressed;
+    }
+    @if $skin-name == 'bootstrap4' {
+      background: $pv-annotation-dropdown-background-color-hover;
+    }
+  }
+
+  .e-pv-custom-annotation-stamp-container.e-menu-wrapper ul,
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul {
+    @if $skin-name == 'bootstrap4' {
+      background-color: $pv-annotation-dropdown-background-color;
+    }
+  }
+
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused:hover .e-menu-icon,
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused:hover .e-caret {
+    @if $skin-name == 'bootstrap4' {
+      color: $pv-icon-color-hover;
+    }
+    @if $skin-name == 'bootstrap5' {
+      color: $white;
+    }
+  }
+
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused:hover .e-menu-icon,
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused:hover .e-caret,
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+    @if $skin-name == 'bootstrap4' {
+      color: $pv-icon-color-hover;
+    }
+    @if $skin-name == 'bootstrap5' {
+      color: $white;
+    }
+  }
+
+  .e-pv-stamp-template-container .e-menu-container .e-menu {
+    background-color: $pv-annotation-dropdown-background-color;
+    border-color: $pv-annotation-dropdown-border-color;
+  }
+
+  .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' {
+      background-color: $pv-comment-text-cursor-color;
+      color: $pv-icon-color-hover;
+      outline: 0 solid $pv-comment-text-cursor-color;
+      outline-offset: 0;
+    }
+  }
+
+  .e-pv-custom-annotation-thickness-container,
+  .e-pv-custom-annotation-opacity-container {
+    @if $skin-name == 'Material3'{
+      background: $pv-annotation-dropdown-background-color;
+      border: $pv-annotation-dropdown-border-color;
+    }
+    @else {
+      background-color: $pv-annotation-dropdown-background-color;
+      border-color: $pv-annotation-dropdown-border-color;
+    }
+  }
+
+  .e-pdfviewer-signatureformfields.e-pv-signature-focus,
+  .e-pdfviewer-signatureformfields-signature.e-pv-signature-focus {
+    outline: $pv-print-popup-container-background-color dotted 2px;
+  }
+
+  .e-pv-checkbox-container {
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+    display: block;
+    margin-bottom: 0;
+    position: relative;
+    user-select: none;
+  }
+
+  .e-pv-text-selection-none {
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .e-pv-checkbox-container input {
+    cursor: pointer;
+    height: 0;
+    opacity: 0;
+    position: absolute;
+    width: 0;
+  }
+
+  .e-pv-checkbox-div {
+    border: $pv-form-field-checkbox-container;
+    display: inline;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+  }
+
+  .e-pv-cb-checked {
+    border: $pv-form-field-checkbox-checked;
+    border-left-color: transparent;
+    border-top-color: transparent;
+    border-width: $pv-form-field-checkbox-border-width;
+    position: absolute;
+    transform: rotate(45deg);
+  }
+
+  .e-pv-cb-unchecked {
+    border: 1px;
+    border-width: 1px;
+  }
+
+  .e-pv-radiobtn-container {
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+    display: block;
+    margin-bottom: 0;
+    position: relative;
+    user-select: none;
+  }
+
+  .e-pv-radiobtn-container input {
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+  }
+
+  .e-pv-radiobtn-div {
+    border: 1px solid $pv-form-checkbox-border-color;
+    border-radius: 50%;
+    height: 100%;
+    left: $pv-form-field-size;
+    position: absolute;
+    top: $pv-form-field-size;
+    width: 100%;
+  }
+
+  .e-pv-radio-btn {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  .e-pv-radio-btn + span {
+    display: block;
+  }
+
+  .e-pv-radio-btn + .e-pv-radiobtn-span::before {
+    content: '';
+    display: block;
+    height: inherit;
+    width: inherit;
+  }
+
+  .e-pv-radio-btn:checked + .e-pv-radiobtn-span::before {
+    background: $pv-form-checkbox-border-color;
+    border-radius: 50%;
+  }
+
+  .e-pv-properties-text-edit-prop,
+  .e-pv-properties-visibility-style-prop,
+  .e-pv-properties-font-items-container {
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .e-pv-properties-form-field-name-main-div,
+  .e-pv-properties-form-field-value-main-div {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'FluentUI') {
+      padding-right: 12px;
+    }
+    @else {
+      padding-right: 15px;
+    }
+  }
+
+  .e-pv-properties-form-field-name-main-div,
+  .e-pv-properties-form-field-tooltip-main-div,
+  .e-pv-properties-form-field-value-main-div,
+  .e-pv-properties-form-field-visibility-main-div {
+    @if $skin-name == 'FluentUI' {
+      width: 232px;
+    }
+    @else {
+      width: 285px;
+    }
+  }
+
+  .e-pv-properties-text-edit-prop {
+    @if $skin-name == 'FluentUI' {
+      padding-top: 35px;
+    }
+    @else {
+      padding-top: 20px;
+    }
+  }
+
+  .e-pv-properties-visibility-style-prop {
+    @if $skin-name == 'FluentUI' {
+      padding-bottom: 12px;
+      padding-top: 12px;
+    }
+    @if $skin-name == 'Material3' {
+      padding-top: 16px;
+    }
+    @else {
+      padding-bottom: 10px;
+      padding-top: 20px;
+    }
+  }
+
+  .e-pv-properties-checkbox-main-div-prop {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: 20px;
+  }
+
+  .e-pv-bold-icon-div,
+  .e-pv-italic-icon-div,
+  .e-pv-strikeout-icon-div,
+  .e-pv-underlinetext-icon-div,
+  .e-pv-left-align-icon-div,
+  .e-pv-center-align-icon-div,
+  .e-pv-right-align-icon-div {
+    padding: $pv-formfield-properties-icon-align-padding;
+  }
+
+  .e-pv-bold-icon-div:hover,
+  .e-pv-italic-icon-div:hover,
+  .e-pv-strikeout-icon-div:hover,
+  .e-pv-underlinetext-icon-div:hover,
+  .e-pv-left-align-icon-div:hover,
+  .e-pv-center-align-icon-div:hover,
+  .e-pv-right-align-icon-div:hover {
+    @if ($skin-name != 'Material3' and $skin-name != 'bootstrap5') {
+      background-color: $pv-annotation-dropdown-background-color-hover;
+      border-color: $pv-annotation-dropdown-border-color-hover;
+    }
+    @if ($skin-name == 'bootstrap5') {
+      background-color: $secondary-bg-color-pressed;
+      border-color: $secondary-bg-color-pressed;
+      color: $white;
+    }
+    @if ($skin-name == 'Material3') {
+      background: $pv-annotation-dropdown-background-color-hover;
+      border: $pv-annotation-dropdown-border-color-hover;
+    }
+  }
+
+  .e-pv-bold-icon-div:active,
+  .e-pv-italic-icon-div:active,
+  .e-pv-strikeout-icon-div:active,
+  .e-pv-underlinetext-icon-div:active,
+  .e-pv-left-align-icon-div:active,
+  .e-pv-center-align-icon-div:active,
+  .e-pv-right-align-icon-div:active {
+    @if ($skin-name != 'Material3' and $skin-name != 'bootstrap5') {
+      background-color: $pv-signature-footer-color;
+      border-color: $pv-signature-footer-color;
+    }
+    @if ($skin-name == 'bootstrap5') {
+      background-color: $secondary-bg-color-pressed;
+      border-color: $secondary-bg-color-pressed;
+      color: $white;
+    }
+    @if ($skin-name == 'Material3') {
+      background: $pv-signature-footer-color;
+      border: $pv-signature-footer-color;
+    }
+  }
+
+  .e-pv-properties-fill-color-style-prop,
+  .e-pv-properties-stroke-color-style-prop,
+  .e-pv-properties-stroke-thickness-style-prop {
+    @if $skin-name == 'Material3' {
+      padding: 0 20px 12px 1px;
+    }
+    @else {
+      padding: 12px 20px 12px 1px;
+    }
+  }
+
+  .e-bigger .e-pv-properties-fill-color-style-prop,
+  .e-bigger .e-pv-properties-stroke-color-style-prop,
+  .e-bigger .e-pv-properties-stroke-thickness-style-prop {
+    @if $skin-name == 'Material3' {
+      padding: 0 20px 12px 1px;
+    }
+    @else{
+      padding: 12px 20px 12px 1px;
+    }
+  }
+
+  .e-pv-formfield-fontcolor-icon,
+  .e-pv-formfield-strokecolor-icon,
+  .e-pv-formfield-strokethickness-icon {
+    @if ($skin-name == 'bootstrap4') {
+      color: $pv-form-field-property-header-color;
+    }
+    @if ($skin-name == 'bootstrap5') {
+      color: inherit;
+    }
+    @if ($skin-name == 'material') {
+      color: $pv-prop-line-styles-color;
+    }
+    background: $pv-form-field-property-font-style-color;
+    @if ($skin-name == 'bootstrap5') {
+      border: 1px solid $border-light;
+    }
+    @if ($skin-name == 'bootstrap5') {
+      border-radius: 4px;
+    }
+    @else {
+      border-radius: 2px;
+    }
+    height: $pv-formfield-properties-icon-height;
+    margin-top: 8px;
+    @if $skin-name != 'FluentUI' {
+      width: 54px;
+    }
+    @if ($skin-name == 'bootstrap5') {
+      align-content: center;
+      align-items: center;
+      box-shadow: none;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding: 0 11px;
+      width: inherit;
+    }
+    @if ($skin-name == 'Material3') {
+      align-content: center;
+      align-items: center;
+      box-shadow: none;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 72px;
+      height: 32px;
+      border-bottom: 1px solid rgba($border);
+      box-sizing: border-box;
+      padding-right: 16px;
+      margin-top: 0;
+    }
+  }
+
+  .e-pv-properties-format-text-style-prop {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      padding: 15px 15px 4px 1px;
+    }
+    @if ($skin-name == 'Material3') {
+      padding: 20px 15px 6px 0;
+    }
+    @else {
+      padding: 15px 15px 15px 1px;
+    }
+  }
+
+  .e-pv-properties-font-family-container {
+    margin-right: 15px;
+    @if $skin-name == 'FluentUI' {
+      width: 122px;
+    }
+    @if $skin-name == 'Material3' {
+      width: 214px;
+      height: 32px;
+      margin-right: 12px;
+    }
+    @else {
+      width: 165px;
+    }
+  }
+
+  .e-pv-properties-font-size-container {
+    @if $skin-name == 'Material3' {
+      border-right-color: $transparent;
+      height: 32px;
+      border-bottom: 1px solid $transparent;
+      box-sizing: border-box;
+    }
+    @else {
+      border-right-color: $pv-comment-panel-bottom-color;
+      border-right-style: solid;
+      border-right-width: 1px;
+      margin-right: 15px;
+      padding-right: 15px;
+    }
+    width: $pv-font-size-field-width;
+  }
+
+  .e-pv-formfield-maxlength {
+    padding-left: 20px;
+  }
+
+  .e-pv-left-align-icon-div,
+  .e-pv-center-align-icon-div,
+  .e-pv-right-align-icon-div {
+    @if ($skin-name != 'bootstrap5') {
+      padding-left: 6px;
+    }
+  }
+
+  .e-pv-properties-font-color-container,
+  .e-pv-properties-color-container-style-prop {
+    display: flex;
+    padding-top: 20px;
+  }
+
+  .e-pv-formfield-textcolor {
+    margin-right: 10px;
+  }
+
+  .e-pv-formfield-maxlength-icon {
+    align-items: center;
+    display: flex;
+    padding-right: 14px;
+    @if ($skin-name == 'bootstrap5') {
+      padding-right: 10px;
+    }
+    @if ($skin-name == 'FluentUI') {
+      padding-right: 8px;
+    }
+  }
+
+  .e-pv-formfield-textcolor-icon.e-btn.e-icon-btn,
+  .e-pv-formfield-strokecolor-icon.e-btn.e-icon-btn,
+  .e-pv-formfield-fontcolor-icon.e-btn.e-icon-btn,
+  .e-pv-formfield-strokethickness-icon.e-btn.e-icon-btn {
+    @if ($skin-name == 'bootstrap5') {
+      padding: 0 11px;
+    }
+  }
+
+  .e-pv-formfield-textcolor-icon {
+    background: $pv-form-field-property-font-style-color;
+    @if ($skin-name == 'bootstrap5') {
+      border: 1px solid $border-light;
+    }
+    @if ($skin-name == 'bootstrap5') {
+      border-radius: 4px;
+    }
+    @else {
+      border-radius: 2px;
+    }
+    width: $pv-form-field-property-font-style-width;
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      height: 36px;
+    }
+    @if ($skin-name == 'bootstrap4') {
+      color: $pv-form-field-property-header-color;
+    }
+    @if ($skin-name == 'material') {
+      color: $pv-prop-line-styles-color;
+    }
+    @if ($skin-name == 'bootstrap5') {
+      align-items: baseline;
+      box-shadow: none;
+      color: inherit;
+      display: flex;
+      height: 32px;
+    }
+    @if ($skin-name == 'Material3') {
+      display: flex;
+      width: 76px;
+      border-bottom: 1px solid rgba($border);
+      box-shadow: none;
+    }
+    @if ($skin-name == 'FluentUI') {
+      height: auto;
+    }
+  }
+
+  .e-pv-properties-formfield-maxlength-text-label,
+  .e-pv-formfield-maxlength {
+    padding-left: 1px;
+    width: $pv-formfield-maxlength-width;
+    @if ($skin-name == 'Material3') {
+      height: 32px;
+    }
+  }
+
+  .e-pv-formfield-maxlength-group {
+    display: flex;
+    padding-left: $pv-formfield-maxlength-group-padding-left;
+  }
+
+  .e-pv-properties-form-field-list-add-div {
+    display: flex;
+    @if $skin-name == 'FluentUI' {
+      padding-bottom: 12px;
+      padding-top: 16px;
+    }
+    @else {
+      padding-bottom: 15px;
+      padding-top: 20px;
+    }
+  }
+
+  .e-pv-properties-list-item-edit-prop {
+    margin-right: 15px;
+    width: 295px;
+    @if $skin-name == 'FluentUI' {
+      margin-right: 12px;
+      width: 318px;
+    }
+  }
+
+  .e-pv-properties-form-field-window {
+    max-width: $pv-properties-form-field-win-max-width;
+  }
+
+  .e-bigger .e-pv-properties-form-field-window {
+    @if $skin-name == 'Material3' {
+      max-width: 490px;
+    }
+  }
+
+  .e-pv-properties-formfield-textarea {
+    @if $skin-name == 'FluentUI' {
+      min-width: 318px;
+    }
+  }
+
+  .e-pv-properties-export-value-edit-prop {
+    width: 295px;
+    @if $skin-name == 'FluentUI' {
+      width: 318px;
+    }
+  }
+
+  .e-pv-properties-form-field-list-btn-div {
+    align-items: center;
+    display: flex;
+    height: 36px;
+    margin-top: 10px;
+    text-align: center;
+    @if $skin-name == 'FluentUI' {
+      height: 32px;
+      margin-top: 25px;
+    }
+  }
+
+  .e-pv-properties-form-field-export-value-main-div {
+    @if $skin-name == 'FluentUI' {
+      padding-bottom: 12px;
+      padding-top: 0;
+    }
+    @else {
+      padding-bottom: 15px;
+      padding-top: 10px;
+    }
+    width: 335px;
+  }
+
+  .e-pv-properties-form-field-group-btn-div {
+    display: grid;
+  }
+
+  .e-pv-properties-form-field-option-dropdown-list-div {
+    @if $skin-name == 'FluentUI' {
+      padding-top: 0;
+    }
+    @else {
+      padding-top: 10px;
+    }
+  }
+
+  .e-pv-properties-form-field-btn-textarea-container {
+    display: flex;
+    width: 385px;
+    @if $skin-name == 'FluentUI' {
+      padding-top: 0;
+    }
+    @else {
+      padding-top: 15px;
+    }
+  }
+
+  .e-pv-properties-dropdown-btn {
+    align-items: center;
+    display: flex;
+    height: 36px;
+    text-align: center;
+    width: 75px;
+  }
+
+  .e-pv-show-designer-name {
+    align-items: center;
+    color: $pv-show-designer-name-color;
+    display: grid;
+    height: 100%;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  .e-pv-formfield-li-element {
+    list-style: none;
+    padding-left: 10px;
+  }
+
+  .e-pv-li-select {
+    background-color: $pv-form-field-li-background-color;
+    @if ($skin-name == 'bootstrap5') {
+      background-color: $pv-item-selection-background-color;
+      color: $white;
+    }
+    @if ($skin-name == 'tailwind') {
+      background-color: $pv-item-selection-background-color;
+    }
+  }
+
+  .e-pv-formfield-li-element.e-pv-li-select {
+    background-color: $pv-form-field-li-background-color;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      color: $white;
+    }
+  }
+
+  .e-pv-formfield-li-element:hover:not(.e-pv-li-select) {
+    @if ($skin-name != 'Material3') {
+      background-color: $pv-form-field-li-background-color;
+    }
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      color: $white;
+    }
+    @if ($skin-name == 'Material3') {
+      background-color: $content-bg-color-hover;
+    }
+  }
+
+  .e-pv-formfield-li-element:focus {
+    @if ($skin-name == 'Material3') {
+      background-color: $content-bg-color-focus;
+    }
+  }
+
+  .e-pv-formfield-li-element:disabled {
+    @if ($skin-name == 'Material3') {
+      background-color: $transparent;
+      font-size: $text-sm;
+      color: rgba(28, 31, 30, .38);
+    }
+  }
+
+  .e-pv-form-designer-ul-list-items {
+    padding-left: 1px;
+  }
+
+  .e-pv-form-field-property-header.e-dialog .e-dlg-header .e-dlg-header-content {
+    font-size: $pv-form-field-property-header-font-size;
+    font-weight: $pv-form-field-property-header-font-weight;
+  }
+
+  .e-pv-form-field-property-header {
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    color: $pv-form-field-property-header-color;
+    display: block;
+    @if $skin-name == 'FluentUI' {
+      font-family: 'Segoe UI';
+      height: 24px;
+    }
+    @else {
+      font-family: 'Roboto';
+    }
+    @if $skin-name == 'bootstrap5' {
+      font-family: inherit;
+    }
+    font-size: $pv-form-field-property-header-font-size;
+    font-style: normal;
+    font-weight: $pv-form-field-property-header-font-weight;
+    line-height: $pv-form-field-property-header-line-height;
+    margin-top: $pv-form-field-property-header-margin-top;
+    mix-blend-mode: normal;
+    opacity: $pv-form-field-property-header-opacity;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
+    vertical-align: top;
+    white-space: nowrap;
+    width: $pv-form-field-property-header-width;
+    @if $skin-name == 'Material3' {
+      height: 20px;
+      font-family: $font-family;
+    }
+  }
+
+  .e-pv-form-field-property-header-general {
+    @if $skin-name == 'FluentUI' {
+      font-family: 'Segoe UI';
+      height: 24px;
+    }
+    @if $skin-name == 'Material3' {
+      font-family: $font-family;
+    }
+    @else {
+      font-family: 'Roboto';
+    }
+    @if $skin-name == 'bootstrap5' {
+      font-family: inherit;
+    }
+    font-size: $pv-form-field-property-general-header-font-size;
+    font-style: normal;
+    @if $skin-name != 'FluentUI' {
+      font-weight: $pv-form-field-property-header-font-weight;
+    }
+    line-height: $pv-form-field-property-general-header-line-height;
+  }
+
+  .e-pv-properties-tab-style-prop.e-lib.e-tab.e-control {
+    @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark') {
+      border: 0;
+    }
+  }
+
+  .e-pv-properties-formfield-formatting {
+    color: $pv-form-field-property-label-color;
+    font-family: 'Roboto';
+    font-size: $pv-form-field-property-general-header-font-size;
+    font-style: normal;
+    font-weight: normal;
+    height: $pv-form-field-property-general-header-line-height;
+    line-height: $pv-form-field-property-general-header-line-height;
+    width: 64px;
+  }
+
+  .e-pv-properties-form-field-font-style {
+    background: $pv-form-field-property-font-style-color;
+    @if ($skin-name == 'bootstrap5') {
+      border-radius: 4px;
+    }
+    @else {
+      border-radius: 2px;
+    }
+    display: flex;
+    height: 36px;
+    justify-content: space-evenly;
+    width: 154px;
+    @if ($skin-name == 'bootstrap5') {
+      align-items: center;
+      border: 1px solid $border-light;
+      height: 32px;
+      width: 163px;
+    }
+    @if ($skin-name == 'FluentUI') {
+      align-items: center;
+      border: 1px solid $border;
+      height: 32px;
+      width: 163px;
+    }
+    @if ($skin-name == 'Material3') {
+      align-items: center;
+      border-bottom: 1px solid $transparent;
+      height: 32px;
+      width: 128px;
+      padding-left: 8px;
+      padding-top: 10px;
+    }
+  }
+
+  .e-pv-properties-form-field-font-align {
+    background: $pv-form-field-property-font-style-color;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+      border-radius: 4px;
+    }
+    @else {
+      border-radius: 2px;
+    }
+    display: flex;
+    height: 36px;
+    justify-content: space-evenly;
+    margin-right: 15px;
+    width: 120px;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      align-items: center;
+      border: 1px solid $border-light;
+      height: 32px;
+    }
+    @if ($skin-name == 'FluentUI') {
+      border: 1px solid $border;
+    }
+    @if ($skin-name == 'Material3') {
+      align-items: center;
+      height: 32px;
+      width: 96px;
+      padding-top: 8px;
+      border: 1px solid $transparent;
+    }
+  }
+
+  .e-bigger .e-pv-properties-form-field-font-style {
+    background: $pv-form-field-property-font-style-color;
+    @if ($skin-name == 'bootstrap5') {
+      border-radius: 4px;
+    }
+    @else {
+      border-radius: 2px;
+    }
+    display: flex;
+    height: 36px;
+    justify-content: space-evenly;
+    width: 154px;
+    @if ($skin-name == 'bootstrap5') {
+      align-items: center;
+      border: 1px solid $border-light;
+      height: 32px;
+      width: 163px;
+    }
+    @if ($skin-name == 'FluentUI') {
+      align-items: center;
+      border: 1px solid $border;
+      height: 32px;
+      width: 163px;
+    }
+    @if ($skin-name == 'Material3') {
+      align-items: center;
+      border-bottom: 1px solid $transparent;
+      height: 32px;
+      width: 128px;
+      padding-left: 8px;
+      padding-top: 20px;
+    }
+  }
+
+  .e-bigger .e-pv-properties-form-field-font-align {
+    background: $pv-form-field-property-font-style-color;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+      border-radius: 4px;
+    }
+    @else {
+      border-radius: 2px;
+    }
+    display: flex;
+    height: 36px;
+    justify-content: space-evenly;
+    margin-right: 15px;
+    width: 120px;
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      align-items: center;
+      border: 1px solid $border-light;
+      height: 32px;
+    }
+    @if ($skin-name == 'FluentUI') {
+      border: 1px solid $border;
+    }
+    @if ($skin-name == 'Material3') {
+      align-items: center;
+      height: 32px;
+      width: 96px;
+      border: 1px solid $transparent;
+      padding-top: 20px;
+    }
+  }
+
+  .e-pv-properties-formfield-label {
+    color: $pv-form-field-property-label-color;
+    font-family: 'Roboto';
+    @if ($skin-name == 'bootstrap5') {
+      font-family: inherit;
+    }
+    font-size: $pv-form-field-property-general-header-font-size;
+    font-style: normal;
+    font-weight: normal;
+    @if ($skin-name == 'bootstrap5') {
+      font-weight: 500;
+    }
+    @if ($skin-name == 'FluentUI') {
+      font-family: 'Segoe UI';
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+    height: $pv-form-field-property-general-header-line-height;
+    line-height: $pv-form-field-property-general-header-line-height;
+    @if ($skin-name == 'Material3') {
+      font-size: $text-xxs;
+      font-weight: $font-weight-normal;
+      line-height: 12px;
+      height: 12px;
+      font-family: $font-family;
+    }
+  }
+
+  .e-pv-formfield-maxlength .e-input-group.e-control-wrapper .e-input-group-icon {
+    min-width: $pv-formfield-maxlength-arrow-width;
+  }
+
+  .e-pv-properties-form-field-window {
+    height: $pv-formfield-designer-dialog-height;
+  }
+
+  .e-bigger .e-pv-properties-form-field-window {
+    @if $skin-name == 'Material3' {
+      height: 565px;
+    }
+    @if ($skin-name == 'FluentUI') {
+      height: 585px;
+    }
+  }
+
+  .e-pv-properties-header-spliter {
+    border-bottom-color: $pv-properties-header-spliter-border-bottom-color;
+    border-bottom-style: $pv-properties-header-spliter-border-bottom-style;
+    border-bottom-width: $pv-properties-header-spliter-border-bottom-width;
+    left: $pv-properties-header-spliter-left;
+    padding-top: $pv-properties-header-spliter-padding-top;
+    position: $pv-properties-header-spliter-position;
+    width: $pv-properties-header-spliter-width;
+  }
+
+  .e-bigger .e-pv-properties-header-spliter {
+    @if $skin-name == 'Material3'{
+      border-bottom-color: $pv-properties-header-spliter-border-bottom-color;
+      border-bottom-style: $pv-properties-header-spliter-border-bottom-style;
+      border-bottom-width: $pv-properties-header-spliter-border-bottom-width;
+      left: $pv-properties-header-spliter-left;
+      padding-top: 48px;
+      position: $pv-properties-header-spliter-position;
+      width: $pv-properties-header-spliter-width;
+    }
+  }
+
+  .e-pv-properties-bottom-spliter {
+    border-bottom-color: $pv-properties-header-spliter-border-bottom-color;
+    border-bottom-style: $pv-properties-header-spliter-border-bottom-style;
+    border-bottom-width: $pv-properties-header-spliter-border-bottom-width;
+    left: $pv-properties-header-spliter-left;
+    margin-bottom: $pv-properties-header-spliter-margin-bottom;
+    padding-top: $pv-properties-header-spliter-margin-bottom;
+    width: $pv-properties-header-spliter-width;
+    @if ($skin-name == 'Material3'){
+      margin-bottom: 0;
+      padding-top: 0;
+      border-width: 0;
+    }
+  }
+
+  .e-pv-formfield-textcolor-icon .e-btn-icon.e-icons,
+  .e-pv-formfield-fontcolor-icon .e-btn-icon.e-icons,
+  .e-pv-formfield-strokecolor-icon .e-btn-icon.e-icons,
+  .e-pv-formfield-strokethickness-icon .e-btn-icon.e-icons {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      width: 1em;
+    }
+  }
+
+  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
+    background-color: $pv-comment-panel-bg;
+    padding: 0 $pv-icon-padding-top;
+  }
+
+  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    justify-content: center;
+    padding: 0 $pv-icon-padding-top;
+  }
+
+  .e-pv-mobile-toolbar .e-mobile-more-option .e-pv-more-icon {
+    @if ($skin-name == 'bootstrap4') {
+      margin-left: 0 !important;/* stylelint-disable-line declaration-no-important */
+      width: 1em !important;/* stylelint-disable-line declaration-no-important */
+      line-height: 22px !important;/* stylelint-disable-line declaration-no-important */
+      padding: 0 !important;/* stylelint-disable-line declaration-no-important */
+    }
+    @else {
+      margin-left: 0 !important;/* stylelint-disable-line declaration-no-important */
+      width: 1em !important;/* stylelint-disable-line declaration-no-important */
+      line-height: 22px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pv-signature-window .e-dlg-content {
+    @if ($skin-name == 'highcontrast') {
+      padding: 16px;
+    }
+  }
+
+  .e-pv-signatureimage {
+    @if ($skin-name == 'highcontrast') {
+      background-color: $pv-signature-image-panel-bg;
+    }
+  }
+
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover,
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover .e-caret,
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover:focus,
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover:focus .e-caret {
+    @if ($skin-name == 'bootstrap4') {
+      color: $pv-prop-win-drop-down-color-hover;
+    }
+  }
+
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:focus,
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:focus .e-caret,
+  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:not(:hover) {
+    @if ($skin-name == 'bootstrap4') {
+      color: $pv-stamp-icon-color;
+    }
+  }
+
+  .e-dialog.e-pv-signature-dialog-height {
+    height: $pv-signature-dialog-height;
+    @if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
+      min-height: $pv-signature-dialog-height;
+    }
+  }
+
+  .e-bigger .e-dialog.e-pv-signature-dialog-height {
+    @if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
+      height: 627px;
+      min-height: 591px;
+    }
+  }
+  
+  .e-bigger .e-pv-signature-dialog-height {
+    @if ($skin-name == 'FluentUI') {
+      min-height: 592px;
+    }
+  }
+
+  .e-dialog.e-pv-signature-dialog-blazor-height {
+    height: $pv-signature-dialog-blazor-height;
+    @if ($skin-name == 'FluentUI') {
+      min-height: $pv-signature-dialog-height;
+    }
+    @if ($skin-name == 'Material3') {
+      min-height: $pv-signature-dialog-blazor-height;
+    }
+  }
+
+  .e-bigger .e-dialog.e-pv-signature-dialog-blazor-height  {
+    @if ($skin-name == 'Material3') {
+      min-height: 590px;
+    }
+  }
+
+  .e-pv-handwritten-signature-canvas {
+    height: $pv-handwritten-sign-height;
+    width: $pv-handwritten-sign-width;
+  }
+
+  .e-pv-toolbar-scroll .e-toolbar-pop.e-popup-open {
+    overflow: auto;
+  }
+
+  .e-pv-canvas-signature {
+    width: $pv-canvas-sign-width;
+    @if $skin-name == 'FluentUI' {
+      max-width: $pv-canvas-sign-width;
+    }
+    @if $skin-name == 'Material3' {
+      width: 100%;
+      max-width: $pv-canvas-sign-width;
+    }
+  }
+
+  .e-pv-canvas-signature-blazor {
+    width: $pv-canvas-sign-width-blazor;
+  }
+
+  .e-pv-font-appearance-style {
+    padding: $pv-font-div-padding;
+    @if $skin-name == 'Material3' {
+      max-width: $pv-canvas-sign-width;
+    }
+  }
+
+  .e-pv-font-appearance-style-blazor {
+    padding: $pv-font-div-padding-blazor;
+  }
+
+  .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-pv-left-align-icon.e-pv-icon.e-btn-icon.e-icon-left {
+    @if ($skin-name == 'bootstrap4' or $skin-name == 'material') {
+      padding: 0 6px;
+      width: 28px;
+    }
+  }
+  .e-pv-toolbar-tooltip {
+    pointer-events: none;
+  }
+
+  .e-pdfviewer .e-dropdown-btn,
+  .e-pdfviewer .e-dropdown-btn.e-btn {
+    @if ($skin-name == 'Material3') {
+      box-shadow: none;
+    }
+  }
 }