flexmonster 2.9.100 → 2.9.101

package/lib/flexmonster.amcharts.js

@@ -1,6 +1,6 @@
 /** 
  * Flexmonster Pivot Table & Charts [https://www.flexmonster.com/]
- * March 2025 (v. 2.9.100)
+ * April 2025 (v. 2.9.101)
  * Copyright (c) 2025 Flexmonster. All rights reserved.
  *
  * Flexmonster Pivot Table & Charts is a part of Flexmonster Software that is distributed under the terms and conditions of Flexmonster Software License Agreement: 

package/lib/flexmonster.fusioncharts.js

@@ -1,6 +1,6 @@
 /** 
  * Flexmonster Pivot Table & Charts [https://www.flexmonster.com/]
- * March 2025 (v. 2.9.100)
+ * April 2025 (v. 2.9.101)
  * Copyright (c) 2025 Flexmonster. All rights reserved.
  *
  * Flexmonster Pivot Table & Charts is a part of Flexmonster Software that is distributed under the terms and conditions of Flexmonster Software License Agreement: 

package/lib/flexmonster.googlecharts.js

@@ -1,6 +1,6 @@
 /** 
  * Flexmonster Pivot Table & Charts [https://www.flexmonster.com/]
- * March 2025 (v. 2.9.100)
+ * April 2025 (v. 2.9.101)
  * Copyright (c) 2025 Flexmonster. All rights reserved.
  *
  * Flexmonster Pivot Table & Charts is a part of Flexmonster Software that is distributed under the terms and conditions of Flexmonster Software License Agreement: 

package/lib/flexmonster.highcharts.js

@@ -1,6 +1,6 @@
 /** 
  * Flexmonster Pivot Table & Charts [https://www.flexmonster.com/]
- * March 2025 (v. 2.9.100)
+ * April 2025 (v. 2.9.101)
  * Copyright (c) 2025 Flexmonster. All rights reserved.
  *
  * Flexmonster Pivot Table & Charts is a part of Flexmonster Software that is distributed under the terms and conditions of Flexmonster Software License Agreement: 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexmonster",
-  "version": "2.9.100",
+  "version": "2.9.101",
   "description": "Pivot table component for web reporting. The most powerful JavaScript tool to visualize your business data.",
   "main": "flexmonster.full.js",
   "typings": "./types/flexmonster.d.ts",

package/theme/accessible/flexmonster.css

@@ -1,6 +1,6 @@
 /** 
  * Flexmonster Pivot Table & Charts [https://www.flexmonster.com/]
- * March 2025 (v. 2.9.100)
+ * April 2025 (v. 2.9.101)
  * Copyright (c) 2025 Flexmonster. All rights reserved.
  *
  * Flexmonster Pivot Table & Charts is a part of Flexmonster Software that is distributed under the terms and conditions of Flexmonster Software License Agreement: 
@@ -14,7 +14,7 @@
  * https://www.flexmonster.com/pivot-table-editions-and-pricing/
  */
 :root {
-  --fm-version: "2.9.100";
+  --fm-version: "2.9.101";
 }
 /* ===== RESET STYLES ===== */
 #fm-pivot-view,
@@ -1795,7 +1795,7 @@
   color: #F44336;
   right: 0;
 }
-#fm-pivot-view .fm-helper.fm-drag-remove .fm-drag-icon:after {
+#fm-pivot-view .fm-helper.fm-drag-remove .fm-drag-icon::after {
   display: block;
   position: absolute;
   font-family: 'flexmonster-icons' !important;
@@ -1818,6 +1818,89 @@
   top: -4px;
   font-size: 21px;
 }
+@media (max-width: 1370px) and (pointer: coarse) {
+  #fm-pivot-view .fm-helper {
+    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    display: inline-block;
+    background: #E8E8E8;
+    opacity: 0.9;
+    padding: 10px 9px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    border: 1px solid #111;
+    pointer-events: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 250px;
+    color: #111;
+  }
+  #fm-pivot-view .fm-helper .fm-label {
+    width: calc(100% - 20px);
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  #fm-pivot-view .fm-helper .fm-drag-icon {
+    float: right;
+    position: relative;
+  }
+  #fm-pivot-view .fm-helper.fm-no-drop .fm-drag-icon:after {
+    display: block;
+    position: absolute;
+    font-family: 'flexmonster-icons' !important;
+    speak-as: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    width: auto;
+    height: auto;
+    height: initial;
+    background: transparent;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    content: "\ea0e";
+    color: #F44336;
+    right: 0;
+  }
+  #fm-pivot-view .fm-helper.fm-drag-remove {
+    border-color: red;
+    border-width: 2px;
+    display: flex;
+  }
+  #fm-pivot-view .fm-helper.fm-drag-remove .fm-label {
+    display: flex;
+    padding-left: 10px;
+  }
+  #fm-pivot-view .fm-helper.fm-drag-remove .fm-drag-icon::after {
+    display: block;
+    position: absolute;
+    font-family: 'flexmonster-icons' !important;
+    speak-as: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    width: auto;
+    height: auto;
+    height: initial;
+    background: transparent;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    content: "\e90e";
+    color: #F44336;
+    left: -8px;
+    top: -5px;
+    font-size: 21px;
+  }
+}
 #fm-pivot-view .fm-header-helper {
   text-transform: uppercase;
   border: none;
@@ -1827,6 +1910,10 @@
   border: 1px solid #555;
   cursor: move;
 }
+#fm-pivot-view .fm-header-helper.fm-drag-remove {
+  border-color: red;
+  border-width: 2px;
+}
 #fm-pivot-view .fm-header-helper.fm-drag-remove .fm-remove-icon {
   display: inline-block;
   margin-left: 4px;
@@ -1852,10 +1939,54 @@
   -moz-osx-font-smoothing: grayscale;
   content: "\e90e";
   color: #F44336;
-  top: -15px;
-  left: -6px;
+  top: -16px;
+  left: -7px;
   font-size: 21px;
 }
+@media (max-width: 1370px) and (pointer: coarse) {
+  #fm-pivot-view .fm-header-helper {
+    text-transform: uppercase;
+    border: none;
+    background: #E8E8E8;
+    padding: 12px 18px;
+    font-size: 14.4px;
+    border: 1px solid #555;
+    cursor: move;
+  }
+  #fm-pivot-view .fm-header-helper.fm-drag-remove {
+    border-color: red;
+    border-width: 2px;
+  }
+  #fm-pivot-view .fm-header-helper.fm-drag-remove .fm-remove-icon {
+    display: inline-block;
+    margin-left: 4px;
+    width: 10px;
+    position: relative;
+  }
+  #fm-pivot-view .fm-header-helper.fm-drag-remove .fm-remove-icon:after {
+    display: block;
+    position: absolute;
+    font-family: 'flexmonster-icons' !important;
+    speak-as: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    width: auto;
+    height: auto;
+    height: initial;
+    background: transparent;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    content: "\e90e";
+    color: #F44336;
+    top: -23px;
+    left: -15px;
+    font-size: 31.5px;
+  }
+}
 #fm-pivot-view .fm-drop-indicator {
   height: 2px;
   background: #454545;
@@ -5474,8 +5605,8 @@
   color: #111;
   box-sizing: border-box;
   vertical-align: top;
-  border-right: 1px solid #E9E9E9;
-  border-bottom: 1px solid #E9E9E9;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
   padding: 7px 4px;
   line-height: normal;
 }
@@ -5551,14 +5682,14 @@
 #fm-pivot-view .fm-grid-layout div.fm-header-r {
   background-color: #f7f7f7;
   color: #111;
-  border-right: 1px solid #D2D2D2;
-  border-bottom: 1px solid #D2D2D2;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-header-c {
   background-color: #E9E9E9;
   color: #111;
-  border-right: 1px solid #CFCFCF;
-  border-bottom: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-filter-header {
   cursor: pointer;
@@ -5570,64 +5701,64 @@
   font-weight: bold;
   background-color: #FFFFFF;
   color: #111;
-  border-right: 1px solid #E9E9E9;
-  border-bottom: 1px solid #E9E9E9;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-total-c {
   font-weight: bold;
   background-color: #FFFFFF;
   color: #111;
-  border-right: 1px solid #E9E9E9;
-  border-bottom: 1px solid #E9E9E9;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-grand-total-r {
   font-weight: bold;
   background-color: #F5F5F5;
   color: #111;
-  border-right: 1px solid #DaDaDa;
-  border-bottom: 1px solid #DaDaDa;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-grand-total-c {
   font-weight: bold;
   background-color: #FFFFFF;
   color: #111;
-  border-right: 1px solid #E9E9E9;
-  border-bottom: 1px solid #E9E9E9;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-grand-total-c.fm-grand-total-r {
   font-weight: bold;
   background-color: #F5F5F5;
   color: #111;
-  border-right: 1px solid #DaDaDa;
-  border-bottom: 1px solid #DaDaDa;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-header.fm-total-r {
   font-weight: normal;
   background-color: #f7f7f7;
   color: #111;
-  border-right: 1px solid #D2D2D2;
-  border-bottom: 1px solid #D2D2D2;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-header.fm-total-c {
   font-weight: normal;
   background-color: #E9E9E9;
   color: #111;
-  border-right: 1px solid #CFCFCF;
-  border-bottom: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-header.fm-grand-total-r {
   font-weight: bold;
   background-color: #E9E9E9;
   color: #111;
-  border-right: 1px solid #CFCFCF;
-  border-bottom: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout div.fm-header.fm-grand-total-c {
   font-weight: bold;
   background-color: #E9E9E9;
   color: #111;
-  border-right: 1px solid #CFCFCF;
-  border-bottom: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout.fm-flat-view div.fm-total,
 #fm-pivot-view .fm-grid-layout.fm-flat-view div.fm-grand-total {
@@ -5639,11 +5770,11 @@
   color: #111;
 }
 #fm-pivot-view .fm-grid-layout .fm-cols-filter {
-  border-right: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
   z-index: 1;
 }
 #fm-pivot-view .fm-grid-layout .fm-cols-filter .fm-row {
-  border-bottom: 1px solid #CFCFCF;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-grid-layout .fm-filters .fm-header,
 #fm-pivot-view .fm-grid-layout.fm-flat-view .fm-header {
@@ -5652,8 +5783,8 @@
   font-weight: bold;
   text-transform: uppercase;
   position: relative;
-  border-bottom: 1px solid #CFCFCF;
-  border-right: 1px solid #CFCFCF;
+  border-bottom: 1px solid #8F8F8F;
+  border-right: 1px solid #8F8F8F;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -5664,8 +5795,8 @@
   font-weight: bold;
   text-transform: uppercase;
   position: relative;
-  border-bottom: 1px solid #CFCFCF;
-  border-right: 1px solid #CFCFCF;
+  border-bottom: 1px solid #8F8F8F;
+  border-right: 1px solid #8F8F8F;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -5743,7 +5874,7 @@
 }
 #fm-pivot-view .fm-grid-layout .fm-filters.fm-cols-filter .fm-filter-header {
   border-right: none;
-  border-bottom: 1px solid #CFCFCF;
+  border-bottom: 1px solid #8F8F8F;
   background-color: #E9E9E9;
   color: #111;
 }
@@ -5756,8 +5887,8 @@
   height: 100%;
 }
 #fm-pivot-view .fm-grid-layout .fm-filters.fm-rows-filter .fm-filter-header {
-  border-right: 1px solid #CFCFCF;
-  border-bottom: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
   background-color: #E9E9E9;
   color: #111;
 }
@@ -6012,8 +6143,8 @@
 }
 #fm-pivot-view .fm-grid-layout div.fm-sheet-header,
 #fm-pivot-view .fm-grid-layout .fm-filters div.fm-sheet-header {
-  border-right: 1px solid #D2D2D2;
-  border-bottom: 1px solid #D2D2D2;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
   color: #111;
   background-color: #f7f7f7;
   text-align: center;
@@ -8178,24 +8309,24 @@ Used in this file to define bg, border and other colors
 -----------------------------------------------------------------*/
 #fm-pivot-view .fm-data-sheet .fm-row .fm-cell.fm-total.fm-grand-total-c.fm-total-r:not(.fm-grand-total-r) {
   background-color: #FFFFFF;
-  border-bottom: 1px solid #E9E9E9;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-data-sheet .fm-row .fm-cell.fm-level-0:not(.fm-grand-total) {
   background-color: #FFFFFF;
-  border-bottom: 1px solid #E9E9E9;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-data-sheet .fm-row .fm-cell.fm-level-0.fm-grand-total-c:not(.fm-grand-total-r) {
   background-color: #FFFFFF;
-  border-bottom: 1px solid #E9E9E9;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-data-sheet .fm-row .fm-cell.fm-total.fm-total-c.fm-total-r:not(.fm-grand-total) {
   background-color: #FFFFFF;
-  border-bottom: 1px solid #E9E9E9;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-rows-sheet .fm-row .fm-cell.fm-header.fm-header-r.fm-total-r:not(.fm-grand-total),
 #fm-pivot-view .fm-rows-sheet .fm-row .fm-cell.fm-level-0:not(.fm-grand-total) {
   background-color: #f7f7f7;
-  border-bottom: 1px solid #D2D2D2;
+  border-bottom: 1px solid #8F8F8F;
   color: #111;
 }
 #fm-pivot-view .fm-rows-sheet .fm-row .fm-cell.fm-header.fm-header-r.fm-total-r:not(.fm-grand-total) i.fm-icon:before,
@@ -8208,13 +8339,13 @@ Used in this file to define bg, border and other colors
 }
 #fm-pivot-view .fm-cols-sheet .fm-scroll-content div:last-child .fm-cell:not(.fm-empty) {
   background-color: #E9E9E9;
-  border-right: 1px solid #CFCFCF;
-  border-bottom: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-cols-sheet .fm-scroll-content div:last-child .fm-cell.fm-sheet-header {
   background-color: #f7f7f7;
-  border-right: 1px solid #D2D2D2;
-  border-bottom: 1px solid #D2D2D2;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-cols-sheet .fm-scroll-content span.fm-hierarchy-link {
   color: #454545;
@@ -8223,12 +8354,12 @@ Used in this file to define bg, border and other colors
   background-color: #FFFFFF;
 }
 #fm-pivot-view .fm-cols-sheet .fm-scroll-content div:last-child .fm-cell.fm-header:not(.fm-empty) {
-  border-bottom: 1px solid #CFCFCF;
+  border-bottom: 1px solid #8F8F8F;
   background-color: #E9E9E9;
 }
 #fm-pivot-view .fm-sheet-headers div:last-child .fm-cell.fm-header,
 #fm-pivot-view .fm-rows-filter div:last-child .fm-cell.fm-header {
-  border-bottom: 1px solid #CFCFCF !important;
+  border-bottom: 1px solid #8F8F8F !important;
 }
 #fm-pivot-view .fm-grid-layout div.fm-header-c.fm-empty {
   background-color: #E9E9E9;
@@ -8237,40 +8368,40 @@ Used in this file to define bg, border and other colors
   background-color: #E9E9E9;
 }
 #fm-pivot-view .fm-rows-sheet .fm-scroll-content .fm-row .fm-sheet-header {
-  border-bottom: 1px solid #D2D2D2;
+  border-bottom: 1px solid #8F8F8F;
   color: #111;
   background-color: #f7f7f7;
 }
 #fm-pivot-view .fm-cols-sheet .fm-scroll-content .fm-row .fm-cell:not(.fm-filter-header) {
   background-color: #E9E9E9;
   color: #111;
-  border-right: 1px solid #CFCFCF;
-  border-bottom: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-cols-sheet .fm-scroll-content .fm-row .fm-cell:not(.fm-filter-header).fm-sheet-header {
   background-color: #f7f7f7;
-  border-bottom: 1px solid #D2D2D2;
+  border-bottom: 1px solid #8F8F8F;
   color: #111;
 }
 #fm-pivot-view .fm-cols-sheet .fm-scroll-content .fm-row .fm-cell:not(.fm-filter-header).fm-empty {
   background-color: #FFFFFF;
-  border-right: 1px solid #E9E9E9;
-  border-bottom: 1px solid #E9E9E9;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-cols-sheet .fm-scroll-content .fm-row .fm-cell:not(.fm-filter-header).fm-header {
   background-color: #E9E9E9;
-  border-right: 1px solid #CFCFCF;
-  border-bottom: 1px solid #CFCFCF;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-rows-sheet .fm-row .fm-cell[data-n="odd"]:not(.fm-empty) {
   background-color: #f7f7f7;
-  border-right: 1px solid #D2D2D2;
-  border-bottom: 1px solid #D2D2D2;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-rows-sheet .fm-row .fm-cell[data-n="even"]:not(.fm-empty) {
   background-color: #f7f7f7;
-  border-right: 1px solid #D2D2D2;
-  border-bottom: 1px solid #D2D2D2;
+  border-right: 1px solid #8F8F8F;
+  border-bottom: 1px solid #8F8F8F;
 }
 #fm-pivot-view .fm-rows-sheet .fm-row .fm-cell[data-n="even"]:not(.fm-empty).fm-grand-total-r {
   background-color: #E9E9E9;

package/theme/accessible/flexmonster.less

@@ -1,6 +1,6 @@
 /** 
  * Flexmonster Pivot Table & Charts [https://www.flexmonster.com/]
- * March 2025 (v. 2.9.100)
+ * April 2025 (v. 2.9.101)
  * Copyright (c) 2025 Flexmonster. All rights reserved.
  *
  * Flexmonster Pivot Table & Charts is a part of Flexmonster Software that is distributed under the terms and conditions of Flexmonster Software License Agreement: 
@@ -39,6 +39,7 @@ Used in this file to define bg, border and other colors
 @theme-color-superlight: #f7f7f7;
 @theme-color-supersuperlight: #FFFFFF;
 @theme-color-danger: #F44336;
+@theme-border-color: #8F8F8F;
 
 /* ===== basic grey colors, common for all themes ===== */
 @theme-base-color: #999;
@@ -103,7 +104,7 @@ Used in this file to define bg, border and other colors
 ---------------------------------------------------------*/
 @grid-sheet-header-text-color: @theme-text-color;
 @grid-sheet-header-color: @theme-color-superlight;
-@grid-sheet-header-border-color: #D2D2D2;
+@grid-sheet-header-border-color: @theme-border-color;
 @grid-sheet-header-border-right: 1px solid @grid-sheet-header-border-color;
 @grid-sheet-header-border-bottom: 1px solid @grid-sheet-header-border-color;
 
@@ -118,14 +119,14 @@ Used in this file to define bg, border and other colors
 /* ===== table header row ===== */
 @grid-table-header-row-color: @theme-color-superlight;
 @grid-table-header-row-text-color: @theme-text-color;
-@grid-table-header-row-border-color: #D2D2D2;
+@grid-table-header-row-border-color: @theme-border-color;
 @grid-table-header-row-border-right: 1px solid @grid-table-header-row-border-color;
 @grid-table-header-row-border-bottom: 1px solid @grid-table-header-row-border-color;
 
 /* ===== table header column ===== */
 @grid-table-header-column-color: @theme-color;
 @grid-table-header-column-text-color: @theme-text-color;
-@grid-table-header-column-border-color: @theme-color-midlight;
+@grid-table-header-column-border-color: @theme-border-color;
 @grid-table-header-column-border-right: 1px solid @grid-table-header-column-border-color;
 @grid-table-header-column-border-bottom: 1px solid @grid-table-header-column-border-color;
 
@@ -133,7 +134,7 @@ Used in this file to define bg, border and other colors
 @grid-table-header-total-row-cell-color: @theme-color-superlight;
 @grid-table-header-total-row-cell-text-color: @theme-text-color;
 @grid-table-header-total-row-cell-font-weight: normal;
-@grid-table-header-total-row-cell-border-color: #D2D2D2;
+@grid-table-header-total-row-cell-border-color: @theme-border-color;
 @grid-table-header-total-row-cell-border-right: 1px solid @grid-table-header-total-row-cell-border-color;
 @grid-table-header-total-row-cell-border-bottom: 1px solid @grid-table-header-total-row-cell-border-color;
 
@@ -141,7 +142,7 @@ Used in this file to define bg, border and other colors
 @grid-table-header-total-column-cell-color: @theme-color;
 @grid-table-header-total-column-cell-text-color: @theme-text-color;
 @grid-table-header-total-column-cell-font-weight: normal;
-@grid-table-header-total-column-cell-border-color: @theme-color-midlight;
+@grid-table-header-total-column-cell-border-color: @theme-border-color;
 @grid-table-header-total-column-cell-border-right: 1px solid @grid-table-header-total-column-cell-border-color;
 @grid-table-header-total-column-cell-border-bottom: 1px solid @grid-table-header-total-column-cell-border-color;
 
@@ -149,7 +150,7 @@ Used in this file to define bg, border and other colors
 @grid-table-header-grand-total-row-cell-color: @theme-color;
 @grid-table-header-grand-total-row-cell-text-color: @theme-text-color;
 @grid-table-header-grand-total-row-cell-font-weight: bold;
-@grid-table-header-grand-total-row-cell-border-color: @theme-color-midlight;
+@grid-table-header-grand-total-row-cell-border-color:@theme-border-color;
 @grid-table-header-grand-total-row-cell-border-right: 1px solid @grid-table-header-grand-total-row-cell-border-color;
 @grid-table-header-grand-total-row-cell-border-bottom: 1px solid @grid-table-header-grand-total-row-cell-border-color;
 
@@ -157,7 +158,7 @@ Used in this file to define bg, border and other colors
 @grid-table-header-grand-total-column-cell-color: @theme-color;
 @grid-table-header-grand-total-column-cell-text-color: @theme-text-color;
 @grid-table-header-grand-total-column-cell-font-weight: bold;
-@grid-table-header-grand-total-column-cell-border-color: @theme-color-midlight;
+@grid-table-header-grand-total-column-cell-border-color: @theme-border-color;
 @grid-table-header-grand-total-column-cell-border-right: 1px solid @grid-table-header-grand-total-column-cell-border-color;
 @grid-table-header-grand-total-column-cell-border-bottom: 1px solid @grid-table-header-grand-total-column-cell-border-color;
 
@@ -170,7 +171,7 @@ Used in this file to define bg, border and other colors
 /* ===== table header filters column area ===== */
 @grid-table-header-filter-column-pane-color: @theme-color;
 @grid-table-header-filter-column-pane-text-color: @theme-text-color;
-@grid-table-header-filter-column-pane-border-color: @theme-color-midlight;
+@grid-table-header-filter-column-pane-border-color: @theme-border-color;
 @grid-table-header-filter-column-pane-border-bottom: 1px solid @grid-table-header-filter-column-pane-border-color;
 @grid-table-header-filter-column-pane-border-right: 1px solid @grid-table-header-filter-column-pane-border-color;
 
@@ -178,7 +179,7 @@ Used in this file to define bg, border and other colors
 @grid-table-header-filter-column-cell-color: @theme-color;
 @grid-table-header-filter-column-cell-color-hover: darken(@grid-table-header-filter-column-cell-color, 5%);
 @grid-table-header-filter-column-cell-text-color: @theme-text-color;
-@grid-table-header-filter-column-cell-border-color: @theme-color-midlight;
+@grid-table-header-filter-column-cell-border-color: @theme-border-color;
 @grid-table-header-filter-column-cell-border-bottom: 1px solid @grid-table-header-filter-column-cell-border-color;
 @grid-table-header-filter-column-cell-border-right: none;
 
@@ -186,7 +187,7 @@ Used in this file to define bg, border and other colors
 @grid-table-header-filter-row-cell-color: @theme-color;
 @grid-table-header-filter-row-cell-color-hover: darken(@grid-table-header-filter-row-cell-color, 5%);
 @grid-table-header-filter-row-cell-text-color: @theme-text-color;
-@grid-table-header-filter-row-cell-border-color: @theme-color-midlight;
+@grid-table-header-filter-row-cell-border-color: @theme-border-color;
 @grid-table-header-filter-row-cell-border-bottom: 1px solid @grid-table-header-filter-row-cell-border-color;
 @grid-table-header-filter-row-cell-border-right: 1px solid @grid-table-header-filter-row-cell-border-color;
 
@@ -199,14 +200,14 @@ Used in this file to define bg, border and other colors
 @grid-flat-table-filter-header-color: @theme-color;
 @grid-flat-table-filter-header-text-color: @theme-text-color;
 @grid-flat-table-filter-header-color-hover: darken(@grid-flat-table-filter-header-color, 5%);
-@grid-flat-table-filter-cell-border-color: @theme-color-midlight;
+@grid-flat-table-filter-cell-border-color: @theme-border-color;
 @grid-flat-table-filter-cell-border-bottom: 1px solid @grid-flat-table-filter-cell-border-color;
 @grid-flat-table-filter-cell-border-right: 1px solid @grid-flat-table-filter-cell-border-color;
 
 /* ===== drill-through table filter cell and empty filter cell styles ===== */
 @grid-table-header-filter-cell-color: @theme-color;
 @grid-table-header-filter-cell-text-color: @theme-text-color;
-@grid-table-header-filter-cell-border-color: @theme-color-midlight;
+@grid-table-header-filter-cell-border-color: @theme-border-color;
 @grid-table-header-filter-cell-border-bottom: 1px solid @grid-table-header-filter-cell-border-color;
 @grid-table-header-filter-cell-border-right: 1px solid @grid-table-header-filter-cell-border-color;
 
@@ -219,7 +220,7 @@ Used in this file to define bg, border and other colors
 /* ===== general grid cell style ===== */
 @grid-cell-color: @theme-color-supersuperlight;
 @grid-cell-text-color: @theme-text-color;
-@grid-cell-border-color: @theme-color;
+@grid-cell-border-color: @theme-border-color;
 @grid-cell-border-right: 1px solid @grid-cell-border-color;
 @grid-cell-border-bottom: 1px solid @grid-cell-border-color;
 
@@ -243,7 +244,7 @@ Used in this file to define bg, border and other colors
 @grid-grand-total-row-cell-color: @theme-color-light;
 @grid-grand-total-row-cell-text-color: @theme-text-color;
 @grid-grand-total-row-cell-font-weight: bold;
-@grid-grand-total-row-cell-border-color: #DaDaDa;
+@grid-grand-total-row-cell-border-color: @theme-border-color;
 @grid-grand-total-row-cell-border-right: 1px solid @grid-grand-total-row-cell-border-color;
 @grid-grand-total-row-cell-border-bottom: 1px solid @grid-grand-total-row-cell-border-color;