@syncfusion/ej2-pdfviewer 17.3.59-4568 → 17.3.60-4568

package/styles/pdfviewer/_theme.scss

@@ -2262,7 +2262,7 @@ $lg-desktop: 1399.98;
     border-bottom: 2px solid;
     margin-top: 0;
     padding-top: 5px;
-    @if $skin-name == 'bootstrap5' {
+    @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
       margin-top: -4px;
       padding-top: 0;
     }
@@ -2289,7 +2289,7 @@ $lg-desktop: 1399.98;
   .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
     margin-top: 0;
     padding-top: 7px;
-    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
       padding-top: 0;
     }
     vertical-align: initial;
@@ -2308,7 +2308,9 @@ $lg-desktop: 1399.98;
     @if $skin-name != 'Material3' {
       background-color: $pv-annotation-opacity-popup-background-color;
     }
-    box-shadow: $pv-annotation-opacity-popup-box-shadow;
+    @if $theme-name != 'fluent2' {
+      box-shadow: $pv-annotation-opacity-popup-box-shadow;
+    }
     color: $pv-annotation-opacity-popup-color;
     height: auto;
     min-height: $pv-annotation-opacity-popup-min-height;
@@ -2812,7 +2814,7 @@ $lg-desktop: 1399.98;
   .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' {
+    @if ($skin-name=='FluentUI'or $theme-name=='fluent2') {
       float: left;
       height: 40px;
     }
@@ -2835,20 +2837,27 @@ $lg-desktop: 1399.98;
   .e-pv-scale-ratio-dest-unit.e-btn,
   .e-pv-depth-unit.e-btn {
     padding: $pv-scale-ratio-win-drop-down-padding;
+    @if $theme-name == 'fluent2' {
+      height: $pv-toolbar-btn-height;
+    }
   }
 
   .e-pv-scale-unit-content {
     float: left;
     width: 33px;
+    @if $theme-name=='fluent2' {
+      width: 8px;
+      height: 20px;
+      font-weight: normal;
+      line-height: 20px;
+    }
   }
 
   .e-pv-scale-ratio-src-unit .e-caret,
   .e-pv-scale-ratio-dest-unit .e-caret,
   .e-pv-depth-unit .e-caret {
     margin-left: $pv-scale-ratio-win-drop-down-caret-margin-left;
-    @if $theme-name != 'fluent2' {
-      margin-top: $pv-scale-ratio-win-drop-down-caret-margin-top;
-    }
+    margin-top: $pv-scale-ratio-win-drop-down-caret-margin-top;
   }
 
   .e-bigger .e-pv-scale-ratio-src-unit .e-caret,
@@ -3003,6 +3012,9 @@ $lg-desktop: 1399.98;
       height: 40px;
       width: 248px;
     }
+    @if $theme-name == 'fluent2' {
+      height: 40px !important;/* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-pv-line-styles-container {
@@ -3350,18 +3362,6 @@ $lg-desktop: 1399.98;
     }
   }
 
-  .e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center{
-    @if $theme-name == 'fluent2' {
-      margin-left: 710px !important;/* stylelint-disable-line declaration-no-important */
-    }
-  }
-
-  .e-bigger .e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center {
-    @if $theme-name == 'fluent2' {
-      margin-left: 109px !important;/* stylelint-disable-line declaration-no-important */
-    }
-  }
-
   .e-pv-zoom-drop-down-container .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
   .e-pv-zoom-drop-down-container .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
     @if $skin-name == 'bootstrap4' {
@@ -4797,7 +4797,9 @@ $lg-desktop: 1399.98;
   }
 
   .e-pv-properties-font-family-container {
-    margin-right: 15px;
+    @if $theme-name != 'fluent2' {
+      margin-right: 15px;
+    }
     @if $skin-name == 'FluentUI' {
       width: 122px;
     }
@@ -4845,6 +4847,9 @@ $lg-desktop: 1399.98;
     @if ($skin-name != 'bootstrap5') {
       padding-left: 6px;
     }
+    @if ($theme-name == 'fluent2') {
+      padding-left: 13px;
+    }
   }
 
   .e-pv-properties-font-color-container,
@@ -4918,6 +4923,7 @@ $lg-desktop: 1399.98;
     @if ($theme-name == 'fluent2') {
       border-radius: 4px;
       width: 65px;
+      padding: 1px 11px !important;/* stylelint-disable-line declaration-no-important */
     }
   }
 
@@ -5198,14 +5204,20 @@ $lg-desktop: 1399.98;
 
   .e-pv-properties-form-field-font-style {
     background: $pv-form-field-property-font-style-color;
-    @if ($skin-name == 'bootstrap5') {
+    @if ($skin-name == 'bootstrap5' or $theme-name == 'fluent2') {
       border-radius: 4px;
     }
     @else {
       border-radius: 2px;
     }
     display: flex;
-    height: 36px;
+    @if ($theme-name == 'fluent2') {
+      height: 32px;
+      border: $pv-current-page-border;
+    }
+    @else {
+      height: 36px;
+    }
     justify-content: space-evenly;
     width: 154px;
     @if ($skin-name == 'bootstrap5') {
@@ -5230,16 +5242,29 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-properties-form-field-font-style .e-control:not(.e-pv-strikeout-icon-div),
+  .e-pv-properties-form-field-font-align .e-control:not(.e-pv-right-align-icon-div) {
+    @if ($theme-name=='fluent2') {
+      border-right: $pv-current-page-border;
+    }
+  }
+
   .e-pv-properties-form-field-font-align {
     background: $pv-form-field-property-font-style-color;
-    @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3' or $theme-name == 'fluent2') {
       border-radius: 4px;
     }
     @else {
       border-radius: 2px;
     }
     display: flex;
-    height: 36px;
+    @if ($theme-name == 'fluent2') {
+      border: $pv-current-page-border;
+      height: 32px;
+    }
+    @else {
+      height: 36px;
+    }
     justify-content: space-evenly;
     margin-right: 15px;
     width: 120px;

package/styles/pdfviewer/fluent2.css

@@ -83,7 +83,7 @@
   --color-sf-border-pressed: #4d4d4d;
   --color-sf-border-focus: var(--color-sf-border);
   --color-sf-border-selected: #b3b3b3;
-  --color-sf-border-dragged: var(--color-sf-primary);
+  --color-sf-border-dragged: #ebf3fc;
   --color-sf-border-disabled: var(--color-sf-border-light);
   --color-sf-border-warning: #da3b01;
   --color-sf-border-error: #c50f1f;
@@ -310,6 +310,42 @@
   --color-sf-utility-danger-lighter: #fecdc9;
   --color-sf-fg-white: #fff;
   --color-sf-shadow-color: #000;
+  --color-sf-shadow-color1: #fff;
+  --color-sf-link-button: var(--color-sf-primary);
+  --color-sf-link-button-hover: #115ea3;
+  --color-sf-link-button-pressed: #0c3b5e;
+  --color-sf-link-button-focus: #0f6cbd;
+  --color-sf-link-button-border-focus: #242424;
+  --color-sf-chip-bg-color: #f5f5f5;
+  --color-sf-chip-border-color: rgba(0, 0, 0, 0);
+  --color-sf-chip-bg-disabled: #f0f0f0;
+  --color-sf-chip-border-disabled: #fff;
+  --color-sf-secondary-outline-button-text-color-hover: #242424;
+  --color-sf-secondary-outline-button-text-color-pressed: #242424;
+  --color-sf-secondary-outline-button-text-color-selected: #242424;
+  --color-sf-secondary-outline-button-text-color-focus: #242424;
+  --color-sf-slider-shadow1: #fff;
+  --color-sf-slider-shadow2: #d1d1d1;
+  --color-sf-slider-disabled: #d1d1d1;
+  --color-sf-slider-border-color: rgba(255, 255, 255, 0);
+  --color-sf-slider-bg-disabled: #e0e0e0;
+  --color-sf-toggle-switch-border-disabled: #f0f0f0;
+  --color-sf-calendar-icon-color: #0f6ebd;
+  --color-sf-calendar-header-text-color-pressed: #0f548c;
+  --color-sf-calendar-today-bg-color: #0f63bd;
+  --color-sf-dialog-border: #fafafa;
+  --color-sf-badge-light-bg-color: #e6e6e6;
+  --color-sf-secondary-badge-border-color: #fff;
+  --color-sf-secondary-badge-bg-color: #fff;
+  --color-sf-secondary-badge-bg-color-focus: #fff;
+  --color-sf-skeleton-bg-color: #e6e6e6;
+  --color-sf-tab-selected-bg-color-disabled: #0f6ebd;
+  --color-sf-tab-selected-text-color-disabled: #bdbdbd;
+  --color-sf-ribbon-border-color: #00000000;
+  --color-sf-toolbar-icon-color: #0f6cbd;
+  --color-sf-contextual-text: #616161;
+  --color-sf-cell-selection-bg-color: #ebf3fc;
+  --color-sf-document-editor-border-color: #00000000;
 }
 
 .e-dark-mode {
@@ -326,8 +362,8 @@
   --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
   --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
   --color-sf-content-bg-color-selected: #2e2e2e;
-  --color-sf-content-bg-color-dragged: #082338;
-  --color-sf-content-bg-color-disabled: transparent;
+  --color-sf-content-bg-color-dragged: #08233b;
+  --color-sf-content-bg-color-disabled: #141414;
   --color-sf-flyout-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-flyout-bg-color-hover: #3d3d3d;
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
@@ -370,7 +406,7 @@
   --color-sf-border-focus: var(--color-sf-border);
   --color-sf-border-selected: #6b6b6b;
   --color-sf-border-dragged: var(--color-sf-primary);
-  --color-sf-border-disabled: #424242;
+  --color-sf-border-disabled: #08233b;
   --color-sf-border-warning: #bc4b09;
   --color-sf-border-error: #dc626d;
   --color-sf-border-success: #9fd89f;
@@ -616,6 +652,42 @@
   --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-msg-warning-close-icon-color-alt1);
   --color-sf-msg-warning-close-icon-color-alt2: #fff;
   --color-sf-shadow-color: #fff;
+  --color-sf-shadow-color1: #000;
+  --color-sf-link-button: var(--color-sf-primary);
+  --color-sf-link-button-hover: #0f6cbd;
+  --color-sf-link-button-pressed: #115ea3;
+  --color-sf-link-button-focus: #115ea3;
+  --color-sf-link-button-border-focus: #fff;
+  --color-sf-chip-bg-color: #141414;
+  --color-sf-chip-border-color: rgba(0, 0, 0, 0);
+  --color-sf-chip-bg-disabled: #141414;
+  --color-sf-chip-border-disabled: rgba(0, 0, 0, 0);
+  --color-sf-secondary-outline-button-text-color-hover: #fff;
+  --color-sf-secondary-outline-button-text-color-pressed: #fff;
+  --color-sf-secondary-outline-button-text-color-selected: #fff;
+  --color-sf-secondary-outline-button-text-color-focus: #fff;
+  --color-sf-slider-shadow1: #000;
+  --color-sf-slider-shadow2: #666666;
+  --color-sf-slider-disabled: #666666;
+  --color-sf-slider-border-color: rgba(255, 255, 255, 0);
+  --color-sf-slider-bg-disabled: #525252;
+  --color-sf-toggle-switch-border-disabled: #141414;
+  --color-sf-calendar-icon-color: #1153a3;
+  --color-sf-calendar-header-text-color-pressed: #62abf5;
+  --color-sf-calendar-today-bg-color: #1153a3;
+  --color-sf-dialog-border: #1f1f1f;
+  --color-sf-badge-light-bg-color: #333333;
+  --color-sf-secondary-badge-border-color: #292929;
+  --color-sf-secondary-badge-bg-color: #292929;
+  --color-sf-secondary-badge-bg-color-focus: #292929;
+  --color-sf-skeleton-bg-color: #575757;
+  --color-sf-tab-selected-bg-color-disabled: #115ea3;
+  --color-sf-tab-selected-text-color-disabled: #a3a3a3;
+  --color-sf-ribbon-border-color: #00000000;
+  --color-sf-toolbar-icon-color: #479ef5;
+  --color-sf-contextual-text: #fff;
+  --color-sf-cell-selection-bg-color: #08233b;
+  --color-sf-document-editor-border-color: #00000000;
 }
 
 .e-high-contrast {
@@ -632,8 +704,8 @@
   --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
   --color-sf-content-bg-color-selected: var(--color-sf-content-bg-color-hover);
-  --color-sf-content-bg-color-dragged: var(--color-sf-black);
-  --color-sf-content-bg-color-disabled: #3ff23f;
+  --color-sf-content-bg-color-dragged: #fff;
+  --color-sf-content-bg-color-disabled: #000000;
   --color-sf-flyout-bg-color: var(--color-sf-black);
   --color-sf-flyout-bg-color-hover: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
@@ -651,7 +723,7 @@
   --color-sf-content-text-color-pressed: var(--color-sf-content-text-color-hover);
   --color-sf-content-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-content-text-color-selected: var(--color-sf-content-text-color-hover);
-  --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
+  --color-sf-content-text-color-dragged: #000;
   --color-sf-content-text-color-disabled: var(--color-sf-content-bg-color-disabled);
   --color-sf-placeholder-text-color: var(--color-sf-content-text-color);
   --color-sf-flyout-text-color: var(--color-sf-content-text-color);
@@ -676,7 +748,7 @@
   --color-sf-border-focus: var(--color-sf-border-hover);
   --color-sf-border-selected: var(--color-sf-border-hover);
   --color-sf-border-dragged: var(--color-sf-border-light);
-  --color-sf-border-disabled: #3ff23f;
+  --color-sf-border-disabled: #fff;
   --color-sf-border-warning: #f7630c;
   --color-sf-border-error: #c50f1f;
   --color-sf-border-success: #107c10;
@@ -922,6 +994,42 @@
   --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-msg-warning-border-color-alt11);
   --color-sf-msg-warning-close-icon-color-alt2: var(--color-sf-msg-warning-bg-color);
   --color-sf-shadow-color: #fff;
+  --color-sf-shadow-color1: #1aebff;
+  --color-sf-link-button: #fff000;
+  --color-sf-link-button-hover: #fff000;
+  --color-sf-link-button-pressed: #fff000;
+  --color-sf-link-button-focus: #fff000;
+  --color-sf-link-button-border-focus: #1aebff;
+  --color-sf-chip-bg-color: #000;
+  --color-sf-chip-border-color: #fff;
+  --color-sf-chip-bg-disabled: #000;
+  --color-sf-chip-border-disabled: #3ff23f;
+  --color-sf-secondary-outline-button-text-color-hover: #fff;
+  --color-sf-secondary-outline-button-text-color-pressed: #fff;
+  --color-sf-secondary-outline-button-text-color-selected: #fff;
+  --color-sf-secondary-outline-button-text-color-focus: #fff;
+  --color-sf-slider-shadow1: #000;
+  --color-sf-slider-shadow2: #fff;
+  --color-sf-slider-disabled: #3ff23f;
+  --color-sf-slider-border-color: #fff;
+  --color-sf-slider-bg-disabled: #000;
+  --color-sf-toggle-switch-border-disabled: #3ff23f;
+  --color-sf-calendar-icon-color: #000;
+  --color-sf-calendar-header-text-color-pressed: #000;
+  --color-sf-calendar-today-bg-color: #fff;
+  --color-sf-dialog-border: #fff;
+  --color-sf-badge-light-bg-color: #000;
+  --color-sf-secondary-badge-border-color: #fff;
+  --color-sf-secondary-badge-bg-color: #000;
+  --color-sf-secondary-badge-bg-color-focus: #fff;
+  --color-sf-skeleton-bg-color: #ffffff;
+  --color-sf-tab-selected-bg-color-disabled: #000;
+  --color-sf-tab-selected-text-color-disabled: #3ff23f;
+  --color-sf-ribbon-border-color: #fff;
+  --color-sf-toolbar-icon-color: #000;
+  --color-sf-contextual-text: #000;
+  --color-sf-cell-selection-bg-color: #1aecff1f;
+  --color-sf-document-editor-border-color: #fff;
 }
 
 /*! PdfViewer's default definitions and variables */
@@ -2256,7 +2364,7 @@ input.e-pv-input-password::-ms-reveal {
 .e-pv-sidebar-title-container {
   background: var(--color-sf-content-bg-color-alt1);
   border: 1px solid var(--color-sf-border-light);
-  border-width: 0 0 0 0;
+  border-width: 0 1px 0 0;
   height: 40px;
   position: absolute;
   top: 0;
@@ -2674,7 +2782,7 @@ input.e-pv-input-password::-ms-reveal {
   bottom: 0;
   height: calc(100% - 38px);
   position: absolute;
-  width: 0;
+  width: 1px;
   z-index: 104;
 }
 
@@ -2770,7 +2878,7 @@ input.e-pv-input-password::-ms-reveal {
 .e-pv-bookmark-view {
   height: 100%;
   overflow: auto;
-  padding-top: 15px;
+  padding-top: 0;
   position: relative;
 }
 
@@ -3083,6 +3191,8 @@ div > .e-pv-bookmark-icon.e-pv-icon {
   border-bottom: 2px solid;
   margin-top: 0;
   padding-top: 5px;
+  margin-top: -4px;
+  padding-top: 0;
   vertical-align: initial;
 }
 
@@ -3096,6 +3206,7 @@ div > .e-pv-bookmark-icon.e-pv-icon {
 .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
   margin-top: 0;
   padding-top: 7px;
+  padding-top: 0;
   vertical-align: initial;
 }
 
@@ -3107,7 +3218,6 @@ div > .e-pv-bookmark-icon.e-pv-icon {
 .e-pv-annotation-opacity-popup-container,
 .e-pv-annotation-thickness-popup-container {
   background-color: #fff;
-  box-shadow: 0 3px 8px 0 var(--color-sf-content-bg-color-hover);
   color: var(--color-sf-content-text-color);
   height: auto;
   min-height: 48px;
@@ -3441,6 +3551,16 @@ div > .e-pv-bookmark-icon.e-pv-icon {
   height: 24px;
 }
 
+.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 {
+  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,
@@ -3457,18 +3577,24 @@ div > .e-pv-bookmark-icon.e-pv-icon {
 .e-pv-scale-ratio-src-unit.e-btn,
 .e-pv-scale-ratio-dest-unit.e-btn,
 .e-pv-depth-unit.e-btn {
-  padding: 6px 8px 4px;
+  padding: 4px 8px 4px;
+  height: 32px;
 }
 
 .e-pv-scale-unit-content {
   float: left;
   width: 33px;
+  width: 8px;
+  height: 20px;
+  font-weight: normal;
+  line-height: 20px;
 }
 
 .e-pv-scale-ratio-src-unit .e-caret,
 .e-pv-scale-ratio-dest-unit .e-caret,
 .e-pv-depth-unit .e-caret {
   margin-left: 96px;
+  margin-top: 4px;
 }
 
 .e-pv-properties-line-opacity {
@@ -3537,6 +3663,12 @@ div > .e-pv-bookmark-icon.e-pv-icon {
   width: 180px;
 }
 
+.e-bigger .e-pv-scale-ratio-src-unit,
+.e-bigger .e-pv-scale-ratio-dest-unit,
+.e-bigger .e-pv-depth-unit {
+  height: 40px !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-pv-line-styles-container {
   line-height: 0;
   padding: 17px;
@@ -3601,7 +3733,7 @@ div > .e-pv-bookmark-icon.e-pv-icon {
 .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 {
-  padding: 0 4px 3px;
+  padding: 1.5px 4px 3px;
 }
 
 .e-pv-stamp-template-container .e-menu-item.e-menu-caret-icon {
@@ -3687,14 +3819,6 @@ div > .e-pv-bookmark-icon.e-pv-icon {
   padding: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center {
-  margin-left: 710px !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-bigger .e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center {
-  margin-left: 109px !important; /* stylelint-disable-line declaration-no-important */
-}
-
 .e-bigger .e-toolbar.e-pv-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left,
 .e-bigger .e-toolbar.e-pv-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
   top: 0;
@@ -4406,7 +4530,7 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 .e-pv-left-align-icon-div,
 .e-pv-center-align-icon-div,
 .e-pv-right-align-icon-div {
-  padding: 6px 8px;
+  padding: 3px 10px;
 }
 
 .e-pv-bold-icon-div:hover,
@@ -4448,7 +4572,7 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 .e-pv-formfield-strokethickness-icon {
   background: var(--color-sf-content-bg-color-alt1);
   border-radius: 2px;
-  height: 44px;
+  height: 32px;
   margin-top: 8px;
   width: 54px;
   width: 59px;
@@ -4460,7 +4584,6 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 }
 
 .e-pv-properties-font-family-container {
-  margin-right: 15px;
   width: 165px;
 }
 
@@ -4481,6 +4604,7 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 .e-pv-center-align-icon-div,
 .e-pv-right-align-icon-div {
   padding-left: 6px;
+  padding-left: 13px;
 }
 
 .e-pv-properties-font-color-container,
@@ -4508,6 +4632,7 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
   width: 49px;
   border-radius: 4px;
   width: 65px;
+  padding: 1px 11px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-pv-properties-formfield-maxlength-text-label,
@@ -4677,21 +4802,28 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 
 .e-pv-properties-form-field-font-style {
   background: var(--color-sf-content-bg-color-alt1);
-  border-radius: 2px;
+  border-radius: 4px;
   display: -ms-flexbox;
   display: flex;
-  height: 36px;
+  height: 32px;
+  border: 1px solid var(--color-sf-border);
   -ms-flex-pack: space-evenly;
       justify-content: space-evenly;
   width: 154px;
 }
 
+.e-pv-properties-form-field-font-style .e-control:not(.e-pv-strikeout-icon-div),
+.e-pv-properties-form-field-font-align .e-control:not(.e-pv-right-align-icon-div) {
+  border-right: 1px solid var(--color-sf-border);
+}
+
 .e-pv-properties-form-field-font-align {
   background: var(--color-sf-content-bg-color-alt1);
-  border-radius: 2px;
+  border-radius: 4px;
   display: -ms-flexbox;
   display: flex;
-  height: 36px;
+  border: 1px solid var(--color-sf-border);
+  height: 32px;
   -ms-flex-pack: space-evenly;
       justify-content: space-evenly;
   margin-right: 15px;