@syncfusion/blazor-themes 20.3.59 → 20.3.61

package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss

@@ -510,7 +510,7 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -518,7 +518,7 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss

@@ -510,7 +510,7 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -518,7 +518,7 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss

@@ -516,7 +516,7 @@ $ddt-remains-count-padding-top: 6px !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -524,7 +524,7 @@ $ddt-remains-count-padding-top: 6px !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss

@@ -517,7 +517,7 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -525,7 +525,7 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

package/SCSS-Themes/dropdowns/drop-down-tree/material.scss

@@ -517,7 +517,7 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -525,7 +525,7 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss

@@ -506,7 +506,7 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -514,7 +514,7 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss

@@ -506,7 +506,7 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -514,7 +514,7 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

package/SCSS-Themes/fabric-dark.scss

@@ -23859,8 +23859,8 @@ $sd-active-font-color: $neutral-light-fontalt !default;
 
 @include export-module('speed-dial-layout') {
   .e-speeddial-popup {
-    pointer-events: none;
     position: absolute;
+    z-index: 99999;
 
     &.e-speeddial-top {
       top: $sd-offset;
@@ -35420,9 +35420,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;
@@ -42766,7 +42763,7 @@ $dialog-active-icon-color: $theme-primary !default;
 $dialog-icon-bg-normal: $neutral-light-font !default;
 $dialog-footer-bg-color: $neutral-white !default;
 $dialog-shadow-color: 0 0 20px rgba($shadow, .3) !default;
-$dialog-close-button-left: 7px !default;
+$dialog-close-button-left: 0 !default;
 $dialog-close-button-right: 11px !default;
 $dialog-close-icon-normal-opacity: initial !default;
 $dialog-close-icon-active-opacity: initial !default;
@@ -42819,7 +42816,7 @@ $dialog-bigger-close-icon-margin-left: -8px !default;
 $dialog-bigger-close-icon-margin-right: -1px !default;
 $dialog-bigger-close-button-bottom: 4px !default;
 $dialog-bigger-close-button-height: 40px !default;
-$dialog-bigger-close-button-left: 12px !default;
+$dialog-bigger-close-button-left: 4px !default;
 $dialog-bigger-close-button-width: 40px !default;
 $dialog-btn-border-color: transparent !default;
 $dialog-btn-bg-color: transparent !default;
@@ -54349,7 +54346,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;
@@ -55729,7 +55736,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -56986,7 +56993,7 @@ $ddt-remains-count-padding-top: 6px !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -56994,7 +57001,7 @@ $ddt-remains-count-padding-top: 6px !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }
@@ -72563,8 +72570,8 @@ $grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
 $grid-rowcell-color: rgba($grid-content-font-color, $grid-conent-font-opacity) !default;
 $grid-reorderarrow-margin-top: -4.5px !default;
 $grid-reorderdownarrow-margin-top: 4px !default;
-$grid-reorder-arrow-top-margin: 0 !default;
-$grid-reorder-downarrow-top-margin: 0 !default;
+$grid-reorder-arrow-top-margin: 1px !default;
+$grid-reorder-downarrow-top-margin: -1px !default;
 $grid-sortnumber-font-size: 9px !default;
 $grid-header-text-transform: none !default;
 $grid-bigger-toolbar-icon-size: 18px !default;
@@ -73536,6 +73543,18 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    & .e-toolbar-items{
+      & .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon),
+      & .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon),
+      & .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+          background: none;
+          box-shadow: none;
+      }
+      & .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+          border: none;
+      }
+  }
+
     .e-res-toolbar {
       border-bottom: 1px solid;
       border-bottom-color: $grid-header-border-color;
@@ -75088,14 +75107,12 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grid-group-down-arrow-icon-font-size;
       padding: $grid-group-down-arrow-icon-padding;
       text-decoration: none;
-      text-indent: $group-collapse-icon-text-indent;
     }
 
     .e-icon-grightarrow {
       font-size: $grid-group-right-arrow-icon-font-size;
       padding: $grid-group-right-arrow-icon-padding;
       text-decoration: none;
-      text-indent: $group-expand-icon-text-indent;
     }
 
     .e-recordplusexpand {
@@ -76302,7 +76319,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
   .e-gridheader .e-headercontent .e-reorderuparrow {
     @if $grid-skin == 'fluent' or $grid-skin == 'bootstrap5' {
-      margin-top: -9px;
+      margin-top: -2px;
     }
   }
 
@@ -79869,6 +79886,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;
@@ -86722,12 +86748,12 @@ $bigger-column-menu-size: 45px !default;
       }
 
       .e-zero-spacing {
-        border-spacing: 0;
+        border-spacing: .25px;
       }
 
       .e-chart-row:first-child .e-chart-row-border {
         //border-width: 0;
-        border-top-color: transparent;
+        border-top: 0;
       }
 
       .e-chart-row {
@@ -87007,6 +87033,7 @@ $bigger-column-menu-size: 45px !default;
 
       .e-task-table {
         overflow: hidden;
+        border-collapse: separate;
       }
 
       .e-left-resize-gripper,
@@ -95594,7 +95621,19 @@ $pv-eye-icon-margin-top: 3px !default;
     height: 30px;
     min-height: 30px;
   }
-  
+  .e-bigger .e-pv-signature-dialog-height .e-pv-clearbtn{
+    float: left;
+    height: 49px;
+    min-height: 49px;
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-cancelbtn{
+    height: 49px;
+    min-height: 49px;
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-createbtn{
+    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,

package/SCSS-Themes/fabric.scss

@@ -23818,8 +23818,8 @@ $sd-active-font-color: $neutral-light-fontalt !default;
 
 @include export-module('speed-dial-layout') {
   .e-speeddial-popup {
-    pointer-events: none;
     position: absolute;
+    z-index: 99999;
 
     &.e-speeddial-top {
       top: $sd-offset;
@@ -35243,9 +35243,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;
@@ -42538,7 +42535,7 @@ $dialog-btn-box-shadow: none !default;
 $dialog-bg-color: $neutral-white !default;
 $dialog-icon-color: $neutral-light-font !default;
 $dialog-active-icon-color: $theme-primary !default;
-$dialog-close-button-left: 7px !default;
+$dialog-close-button-left: 0 !default;
 $dialog-close-button-right: 11px !default;
 $dialog-header-border: none !default;
 $dialog-close-icon-normal-opacity: initial !default;
@@ -42600,7 +42597,7 @@ $dialog-bigger-close-icon-margin-left: -8px !default;
 $dialog-bigger-close-icon-margin-right: -1px !default;
 $dialog-bigger-close-button-bottom: 4px !default;
 $dialog-bigger-close-button-height: 40px !default;
-$dialog-bigger-close-button-left: 12px !default;
+$dialog-bigger-close-button-left: 4px !default;
 $dialog-bigger-close-button-width: 40px !default;
 $dialog-btn-border-color: transparent !default;
 $dialog-btn-bg-color: transparent !default;
@@ -54123,7 +54120,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;
@@ -55503,7 +55510,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -56760,7 +56767,7 @@ $ddt-remains-count-padding-top: 6px !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -56768,7 +56775,7 @@ $ddt-remains-count-padding-top: 6px !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }
@@ -72326,8 +72333,8 @@ $grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
 $grid-rowcell-color: rgba($grid-content-font-color, $grid-conent-font-opacity) !default;
 $grid-reorderarrow-margin-top: -4.5px !default;
 $grid-reorderdownarrow-margin-top: 4px !default;
-$grid-reorder-arrow-top-margin: 0 !default;
-$grid-reorder-downarrow-top-margin: 0 !default;
+$grid-reorder-arrow-top-margin: 1px !default;
+$grid-reorder-downarrow-top-margin: -1px !default;
 $grid-sortnumber-font-size: 9px !default;
 $grid-header-text-transform: none !default;
 $grid-bigger-toolbar-icon-size: 18px !default;
@@ -73299,6 +73306,18 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    & .e-toolbar-items{
+      & .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon),
+      & .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon),
+      & .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+          background: none;
+          box-shadow: none;
+      }
+      & .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+          border: none;
+      }
+  }
+
     .e-res-toolbar {
       border-bottom: 1px solid;
       border-bottom-color: $grid-header-border-color;
@@ -74851,14 +74870,12 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grid-group-down-arrow-icon-font-size;
       padding: $grid-group-down-arrow-icon-padding;
       text-decoration: none;
-      text-indent: $group-collapse-icon-text-indent;
     }
 
     .e-icon-grightarrow {
       font-size: $grid-group-right-arrow-icon-font-size;
       padding: $grid-group-right-arrow-icon-padding;
       text-decoration: none;
-      text-indent: $group-expand-icon-text-indent;
     }
 
     .e-recordplusexpand {
@@ -76065,7 +76082,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
   .e-gridheader .e-headercontent .e-reorderuparrow {
     @if $grid-skin == 'fluent' or $grid-skin == 'bootstrap5' {
-      margin-top: -9px;
+      margin-top: -2px;
     }
   }
 
@@ -79634,6 +79651,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;
@@ -86479,12 +86505,12 @@ $bigger-column-menu-size: 45px !default;
       }
 
       .e-zero-spacing {
-        border-spacing: 0;
+        border-spacing: .25px;
       }
 
       .e-chart-row:first-child .e-chart-row-border {
         //border-width: 0;
-        border-top-color: transparent;
+        border-top: 0;
       }
 
       .e-chart-row {
@@ -86764,6 +86790,7 @@ $bigger-column-menu-size: 45px !default;
 
       .e-task-table {
         overflow: hidden;
+        border-collapse: separate;
       }
 
       .e-left-resize-gripper,
@@ -95356,7 +95383,19 @@ $pv-eye-icon-margin-top: 3px !default;
     height: 30px;
     min-height: 30px;
   }
-  
+  .e-bigger .e-pv-signature-dialog-height .e-pv-clearbtn{
+    float: left;
+    height: 49px;
+    min-height: 49px;
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-cancelbtn{
+    height: 49px;
+    min-height: 49px;
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-createbtn{
+    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,

package/SCSS-Themes/filemanager/file-manager/bootstrap-dark.scss

@@ -2083,6 +2083,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/bootstrap.scss

@@ -2084,6 +2084,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/bootstrap4.scss

@@ -2085,6 +2085,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/bootstrap5-dark.scss

@@ -2080,6 +2080,15 @@ $fe-drop-folder-bg-color: $primary !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/bootstrap5.scss

@@ -2080,6 +2080,15 @@ $fe-drop-folder-bg-color: $primary !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/fabric-dark.scss

@@ -2081,6 +2081,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/fabric.scss

@@ -2083,6 +2083,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/fluent-dark.scss

@@ -2088,6 +2088,15 @@ $fe-drop-folder-bg-color: $primary !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/fluent.scss

@@ -2088,6 +2088,15 @@ $fe-drop-folder-bg-color: $primary !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;

package/SCSS-Themes/filemanager/file-manager/highcontrast.scss

@@ -2083,6 +2083,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;