canvasxpress-cli 48.2.4 → 48.3.8

package/src/canvasXpress.css

@@ -1,12 +1,70 @@
 @charset "UTF-8";
 
 /*
-* Favorite Colors
+ * Favorite Colors
  * rgb(51,  122,  183) - #337ab7
  * rgb(76,  159,  224) - #4c9fe0
  * rgb(83,  105,  255) - #5369ff
  */
 
+:root {
+  /* Colors */
+  --cx-color-red: rgb(255, 0, 0) !important;
+  --cx-color-blue: rgb(0, 0, 255) !important;
+  --cx-color-green: rgb(0, 255, 0) !important;
+  --cx-color-yellow: rgb(255, 255, 0) !important;
+  --cx-color-orange: rgb(255, 165, 0) !important;
+  --cx-color-purple: rgb(128, 0, 128) !important;
+  --cx-color-white: rgb(255, 255, 255) !important;
+  --cx-color-gray: rgb(128, 128, 128) !important;
+  --cx-color-black: rgb(0, 0, 0) !important;
+  --cx-color-transparent: rgba(0, 0, 0, 0) !important;
+  /* Icons - Not used but just to remember */
+  --cx-icon-class-a: #5369ff;
+  --cx-icon-class-b: #292929;
+  --cx-icon-class-c: #999999;
+  --cx-icon-class-r: #ff0000;
+  /* Greys - Not used but just to remember */
+  --cx-color-extra-dark-gray:  rgb(34, 34, 34) !important;
+  --cx-color-dark-gray: rgb(64, 64, 64) !important;
+  --cx-color-medium-gray: rgb(180, 180, 180) !important;
+  --cx-color-light-gray: rgb(204, 204, 204) !important;
+  /* Coding colors */
+  --cx-color-key: rgb(215, 48, 39) !important;
+  --cx-color-value: rgb(69, 117, 180) !important;
+  --cx-color-string: rgb(168, 82, 2) !important;
+  --cx-color-number: rgb(69, 117, 180) !important;
+  --cx-color-boolean: rgb(102, 102, 0) !important;
+  --cx-color-null: rgb(69, 117, 180) !important;
+  --cx-color-comment: rgb(58, 115, 0) !important;
+  /* Favorite UI colors */
+  --cx-color-ui-background: rgba(255, 255, 255, 0.95) !important;
+  --cx-color-ui-font: rgb(34, 34, 34) !important;
+  --cx-color-widgets: rgb(83, 105, 255) !important;
+  --cx-color-widgets-hover: rgba(83, 105, 255, 0.1) !important;
+  /* Favorite UI Styles - Not used but just to remember */
+  --cx-color-modern: rgb(83, 105, 255) !important;
+  --cx-color-modern-hover: rgba(83, 105, 255, 0.1)  !important;
+  --cx-color-stripped: rgb(180, 180, 180)  !important;
+  --cx-color-stripped-hover: rgba(180, 180, 180, 0.3) !important;
+  --cx-color-default: linear-gradient(rgb(240, 240, 240), rgb(230, 230, 230)) !important;
+  --cx-color-default-hover: rgba(230,230,230,0.1) !important;
+  /* UI */
+  --cx-font-family: arial, tahoma, sans-serif;
+  --cx-font-size: 12px;
+  --cx-font-weight: normal;
+  --cx-font-color: var(--cx-color-ui-font);
+  --cx-background-ui-color: var(--cx-color-ui-background);
+  --cx-background-color: var(--cx-color-widgets);
+  --cx-background-hover-color: var(--cx-color-widgets-hover);
+  --cx-border-color: var(--cx-background-color);
+  --cx-border-radius: 5px;
+  --cx-border-width: 1px;
+  --cx-border-style: solid;
+  --cx-border: var(--cx-border-width) var(--cx-border-style) var(--cx-border-color);
+  --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
+}
+
 /*
  * Loading
  */
@@ -778,37 +836,50 @@ svg {
   font-weight: normal;
 }
 
-.customizerLeftPanelTop {
-  grid-area: 1 / 1 / 2 / 2;
+.customizerLeftPanelTop,
+.customizerLeftPanelBottom {
   background: rgb(83, 105, 255);
   border: 1px solid rgb(83, 105, 255) !important;
-  border-top-left-radius: 10px;
 }
 
-.customizerLeftPanelMiddle {
-  grid-area: 2 / 1 / 3 / 2;
-  background: rgba(0, 0, 0, 0);
+.customizerLeftPanelTopS,
+.customizerLeftPanelBottomS {
+  background: rgb(180, 180, 180);
+  border: 1px solid rgb(180, 180, 180)  !important;
+}
+
+.customizerLeftPanelTopS,
+.customizerLeftPanelTop {
+  grid-area: 1 / 1 / 2 / 2;
+  border-top-left-radius: 10px;
 }
 
+.customizerLeftPanelBottomS,
 .customizerLeftPanelBottom {
   grid-area: 3 / 1 / 4 / 2;
-  background: rgb(83, 105, 255);
-  border: 1px solid rgb(83, 105, 255) !important;
   border-bottom-left-radius: 10px;
 }
 
+.customizerLeftPanelMiddle {
+  grid-area: 2 / 1 / 3 / 2;
+  background: rgba(0, 0, 0, 0);
+}
+
 .customizerLeftPanelTop .customizerLeftItem:hover svg,
 .customizerLeftPanelTop .customizerLeftItemActive svg,
+.customizerLeftPanelTopS .customizerLeftItemS:hover svg,
+.customizerLeftPanelTopS .customizerLeftItemSActive svg,
 .customizerLeftPanelBottom .customizerLeftItem:hover svg,
-.customizerLeftPanelBottom .customizerLeftItemActive svg {
+.customizerLeftPanelBottom .customizerLeftItemActive svg,
+.customizerLeftPanelBottomS .customizerLeftItemS:hover svg,
+.customizerLeftPanelBottomS .customizerLeftItemSActive svg {
   border: 1px solid rgb(255, 255, 255) !important;
   background: rgba(0, 0, 0, 0);
 }
 
-.customizerRightPanel {
+.customizerRightPanel,
+.customizerRightPanelS {
   background: rgba(0, 0, 0, 0);
-  border-left: 1px solid rgb(83, 105, 255) !important;
-  border-right: 1px solid rgb(83, 105, 255) !important;
   position: absolute;
   z-index: 10000;
   top: 0px;
@@ -816,30 +887,59 @@ svg {
   font-weight: normal;
 }
 
+.customizerRightPanel {
+  border-left: 1px solid rgb(83, 105, 255) !important;
+  border-right: 1px solid rgb(83, 105, 255) !important;
+}
+
+.customizerRightPanelS {
+  border-left: 1px solid rgb(180, 180, 180) !important;
+  border-right: 1px solid rgb(180, 180, 180) !important;
+}
+
 /*
  * CanvasXpress Customizer Left Items
  */
 
 .customizerLeftItem,
-.customizerLeftItemActive {
+.customizerLeftItemActive,
+.customizerLeftItemS,
+.customizerLeftItemSActive {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 4fr;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   margin: 5px;
-  border: 1px solid rgb(83, 105, 255) !important;
   border-radius: 5px;
   align-items: center;
 }
 
+.customizerLeftItem,
+.customizerLeftItemActive {
+  border: 1px solid rgb(83, 105, 255) !important;
+}
+
+.customizerLeftItemS,
+.customizerLeftItemSActive {
+  border: 1px solid rgb(180, 180, 180) !important;
+}
+
+
 .customizerLeftItem:hover,
 .customizerLeftItemActive {
   background: rgba(83, 105, 255, 0.1);
 }
 
+.customizerLeftItemS:hover,
+.customizerLeftItemSActive {
+  background:rgba(180, 180, 180, 0.5);
+}
+
 .customizerLeftItem:hover svg,
-.customizerLeftItemActive svg {
+.customizerLeftItemS:hover svg,
+.customizerLeftItemActive svg,
+.customizerLeftItemSActive svg {
   background: rgb(255, 255, 255);
 }
 
@@ -860,21 +960,35 @@ svg {
   border-radius: 5px;
 }
 
+.customizerLeftIconS {
+  padding: 5px;
+  border: 1px solid rgb(180, 180, 180) !important;
+  border-radius: 5px;
+}
+
 /*
  * CanvasXpress Customizer Right Items
  */
 
+.customizerRightItemS,
 .customizerRightItem {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 3fr 2fr;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
-  border: 1px solid rgb(83, 105, 255) !important;
   border-radius: 5px;
   width: 95%;
 }
 
+.customizerRightItem {
+  border: 1px solid rgb(83, 105, 255) !important;
+}
+
+.customizerRightItemS {
+  border: 1px solid rgb(180, 180, 180) !important;
+}
+
 .customizerRightItemTop {
   grid-area: 1 / 1 / 2 / 2;
   padding-top: 5px;
@@ -891,15 +1005,23 @@ svg {
  * CanvasXpress Customizer Right Items Comb
  */
 
+.customizerRightItemComboS,
 .customizerRightItemCombo {
   display: grid;
   grid-template-columns: 1fr 5fr;
   grid-template-rows: 2fr 1fr;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
+}
+
+.customizerRightItemCombo {
   border-top: 1px solid rgb(83, 105, 255);
 }
 
+.customizerRightItemComboS {
+  border-top: 1px solid rgb(180, 180, 180);
+}
+
 .customizerRightItemComboNB {
   display: grid;
   grid-template-columns: 1fr 5fr;
@@ -935,28 +1057,40 @@ svg {
  * CanvasXpress Customizer Right Item Header
  */
 
-.customizerRightItemHeader {
+.customizerRightItemHeader,
+.customizerRightItemHeaderS,
+.customizerRightItemHeaderNB,
+.customizerRightItemHeaderNBS {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 2fr 1fr;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
-  background: rgba(83, 105, 255, 0.1);
   color: rgb(34, 34, 34);
-  border-bottom: 1px solid rgb(83, 105, 255) !important;
   padding-left: 5px;
 }
 
+.customizerRightItemHeader,
 .customizerRightItemHeaderNB {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 2fr 1fr;
-  grid-column-gap: 0px;
-  grid-row-gap: 0px;
   background: rgba(83, 105, 255, 0.1);
-  color: rgb(34, 34, 34);
+}
+
+.customizerRightItemHeaderS,
+.customizerRightItemHeaderNBS {
+  background: rgba(180, 180, 180, 0.1);
+}
+
+.customizerRightItemHeader {
+  border-bottom: 1px solid rgb(83, 105, 255) !important;
+}
+
+.customizerRightItemHeaderS {
+  border-bottom: 1px solid rgb(180, 180, 180) !important;
+}
+
+.customizerRightItemHeaderNB,
+.customizerRightItemHeaderNBS {
   border-bottom: none !important;
-  padding-left: 5px;
 }
 
 .customizerRightItemHeaderTop {
@@ -983,42 +1117,68 @@ svg {
  * CanvasXpress Customizer Right Item Sub Header
  */
 
+.customizerRightItemSubHeaderS,
 .customizerRightItemSubHeader {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
+}
+
+.customizerRightItemSubHeader {
   background: rgba(83, 105, 255, 0.1);
 }
 
+.customizerRightItemSubHeaderS {
+  background: rgba(180, 180, 180, 0.1);
+}
+
 .customizerRightItemSubHeaderRow {
   grid-area: 1 / 1 / 2 / 2;
   display: flex;
   align-items: center;
 }
 
+.customizerRightItemSubHeaderRawS,
 .customizerRightItemSubHeaderRaw {
   display: flex;
   align-items: center;
-  border: 1px solid rgb(83, 105, 255) !important;
   border-radius: 5px;
+}
+
+.customizerRightItemSubHeaderRaw {
+  border: 1px solid rgb(83, 105, 255) !important;
   background-color: rgba(83, 105, 255, 0.1);
 }
 
+.customizerRightItemSubHeaderRawS {
+  border: 1px solid  rgb(180, 180, 180) !important;
+  background-color:  rgba(180, 180, 180, 0.1);
+}
+
 /*
  * CanvasXpress Customizer Right Item Launcher
  */
 
+.customizerRightItemLauncherS,
 .customizerRightItemLauncher {
   display: grid;
   grid-template-columns: 1fr 6fr;
   grid-template-rows: 1fr;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
+}
+
+.customizerRightItemLauncher {
   border-top: 1px solid rgb(83, 105, 255) !important;
 }
 
+.customizerRightItemLauncherS {
+  border-top: 1px solid rgb(180, 180, 180) !important;
+}
+
+.customizerRightItemLauncherNBS,
 .customizerRightItemLauncherNB {
   display: grid;
   grid-template-columns: 1fr 6fr;
@@ -1033,14 +1193,28 @@ svg {
   background-color: rgba(83, 105, 255, 0.1);
 }
 
+.customizerRightItemLauncherS:hover,
+.customizerRightItemLauncherNBS:hover {
+  background-color:  rgba(180, 180, 180, 0.1);
+}
+
+.customizerRightItemLauncherLeftS,
 .customizerRightItemLauncherLeft {
   grid-area: 1 / 1 / 2 / 2;
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.customizerRightItemLauncherLeft {
   background-color: rgba(83, 105, 255, 0.1);
 }
 
+.customizerRightItemLauncherLeftS {
+  background-color: rgba(180, 180, 180, 0.1);
+}
+
+.customizerRightItemLauncherRightS,
 .customizerRightItemLauncherRight {
   grid-area: 1 / 2 / 2 / 3;
   display: flex;
@@ -1184,15 +1358,23 @@ svg {
   justify-content: center;
 }
 
+.customizerRightItemColMidS,
 .customizerRightItemColMid {
   grid-area: 1 / 3 / 2 / 5;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid rgb(83, 105, 255) !important;
   border-radius: 5px;
 }
 
+.customizerRightItemColMid {
+  border: 1px solid rgb(83, 105, 255) !important;
+}
+
+.customizerRightItemColMidS {
+  border: 1px solid rgb(180, 180, 180) !important;
+}
+
 .customizerRightItemSelect>select:hover,
 .customizerRightItemTextArea>svg:hover,
 .customizerRightItemTextArea>textarea:hover,
@@ -1211,35 +1393,52 @@ svg {
  * Other Customizer classes
  */
 
+.customizerContainerS,
 .customizerContainer {
   height: fit-content;
-  border: 1px solid rgb(83, 105, 255) !important;
   border-radius: 5px;
   margin: 10px;
   float: left;
 }
 
-.customizerContainerRaw {
-  border: none !important;
-  float: left;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
+.customizerWranglingS,
 .customizerWrangling {
   height: 102px;
   margin: 0px 0px 10px 10px;
-  border: 1px solid rgb(83, 105, 255) !important;
   border-radius: 5px;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
+.customizerNumeric,
+.customizerString,
+.customizerUnique,
+.customizerWrangling,
+.customizerContainer {
+  border: 1px solid rgb(83, 105, 255) !important;
+}
+
+.customizerNumericS,
+.customizerStringS,
+.customizerUniqueS,
+.customizerWranglingS,
+.customizerContainerS {
+  border: 1px solid rgb(180, 180, 180) !important;
+}
+
 .customizerWrangling:hover {
   border: 1px dashed rgb(255, 0, 0) !important;
 }
 
+.customizerContainerRaw {
+  border: none !important;
+  float: left;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.customizerMaskS,
 .customizerMask {
   background: rgba(0, 0, 0, 0) !important;
   border: 0px none !important;
@@ -1252,10 +1451,12 @@ svg {
   height: 20px;
 }
 
+.customizerNumericS,
+.customizerStringS,
+.customizerUniqueS,
 .customizerNumeric,
 .customizerString,
 .customizerUnique {
-  border: 1px solid rgb(83, 105, 255);
   border-radius: 5px;
   cursor: move;
   margin: 3px;
@@ -1268,21 +1469,26 @@ svg {
   position: relative;
 }
 
+.customizerNumericS,
 .customizerNumeric {
   color: rgb(34, 34, 34);
   background-color: rgba(0, 0, 0, 0);
 }
 
+.customizerStringS,
 .customizerString {
   color: rgb(0, 255, 0);
   background-color: rgba(0, 0, 0, 0);
 }
 
+.customizerUniqueS,
 .customizerUnique {
   color: rgb(0, 0, 255);
   background-color: rgba(0, 0, 0, 0);
 }
-
+.customizerListNumericS,
+.customizerListStringS,
+.customizerListUniqueS,
 .customizerListNumeric,
 .customizerListString,
 .customizerListUnique {
@@ -1299,18 +1505,24 @@ svg {
   position: relative;
 }
 
+.customizerListNumericS,
 .customizerListNumeric {
   color: rgb(34, 34, 34);
 }
 
+.customizerListStringS,
 .customizerListString {
   color: rgb(0, 255, 0);
 }
 
+.customizerListUniqueS,
 .customizerListUnique {
   color: rgb(0, 0, 255);
 }
 
+.customizerListNumericS,
+.customizerListStringS,
+.customizerListUniqueS,
 .customizerListNumeric,
 .customizerListString,
 .customizerListUnique {
@@ -1323,24 +1535,55 @@ svg {
   background: rgba(83, 105, 255, 0.1);
 }
 
-.customizerListNumeric:before {
+.customizerListNumericS:hover,
+.customizerListStringS:hover,
+.customizerListUniqueS:hover {
+  background: rgba(180, 180, 180, 0.1);
+}
+
+.customizerListNumeric:before,
+.customizerListString:before,
+.customizerListUnique:before,
+.customizerListNumericS:before,
+.customizerListStringS:before,
+.customizerListUniqueS:before {
   font: normal 10px courier;
+}
+
+.customizerListNumeric:before,
+.customizerListString:before,
+.customizerListUnique:before {
   color: rgb(83, 105, 255);
+}
+
+.customizerListNumericS:before,
+.customizerListStringS:before,
+.customizerListUniqueS:before {
+  color: rgb(180, 180, 180);
+}
+
+.customizerListNumeric:before,
+.customizerListNumericS:before {
   content: "\00a0#\00a0\00a0";
 }
 
-.customizerListString:before {
-  font: normal 10px courier;
-  color: rgb(83, 105, 255);
+.customizerListString:before,
+.customizerListStringS:before {
   content: "Abc\00a0";
 }
 
-.customizerListUnique:before {
-  font: normal 10px courier;
-  color: rgb(83, 105, 255);
+.customizerListUnique:before,
+.customizerListUniqueS:before {
   content: "Unq\00a0";
 }
 
+.customizerMaskS::selection,
+.customizerNumericS::selection,
+.customizerStringS::selection,
+.customizerUniqueS::selection,
+.customizerListNumericS::selection,
+.customizerListStringS::selection,
+.customizerListUniqueS::selection,
 .customizerMask::selection,
 .customizerNumeric::selection,
 .customizerString::selection,
@@ -1357,10 +1600,10 @@ svg {
  * Search Customizer
  */
 
+ input.customizerSearchS,
 input.customizerSearch {
   margin: 9px;
   background-color: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgb(83, 105, 255);
   color: rgb(34, 34, 34);
   cursor: default;
   font: inherit;
@@ -1370,19 +1613,31 @@ input.customizerSearch {
   clear: left;
 }
 
+select.customizerSearch,
+input.customizerSearch {
+  border: 1px solid rgb(83, 105, 255);
+}
+
+select.customizerSearchS,
+input.customizerSearchS {
+  border: 1px solid rgb(180, 180, 180);
+}
+
+input.customizerSearchS[type="color"],
 input.customizerSearch[type="color"] {
   padding: 0;
   overflow: hidden;
 }
 
+input.customizerSearchS:not([type="color"]),
 input.customizerSearch:not([type="color"]) {
   padding: 5px;
 }
 
+select.customizerSearchS,
 select.customizerSearch {
   margin: 9px;
   background-color: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgb(83, 105, 255);
   color: rgb(34, 34, 34);
   cursor: default;
   font: inherit;
@@ -1392,6 +1647,7 @@ select.customizerSearch {
   clear: left;
 }
 
+span.customizerSearchS,
 span.customizerSearch {
   color: rgb(34, 34, 34);
   font: inherit;
@@ -1403,6 +1659,10 @@ span.customizerSearch {
   clear: left;
 }
 
+span.customizerSearchSelectS,
+span.customizerSearchDescriptionS,
+span.customizerSearchCategoryS,
+span.customizerSearchCurrentS,
 span.customizerSearchSelect,
 span.customizerSearchDescription,
 span.customizerSearchCategory,
@@ -1418,46 +1678,62 @@ span.customizerSearchCurrent {
   left: 15px;
 }
 
+span.customizerSearchSelectS,
 span.customizerSearchSelect {
   color: rgb(34, 34, 34);
 }
 
+span.customizerSearchDescriptionS,
+span.customizerSearchCategoryS,
 span.customizerSearchDescription,
 span.customizerSearchCategory {
-  color: rgb(83, 105, 255);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+span.customizerSearchDescription,
+span.customizerSearchCategory,
 span.customizerSearchCurrent {
   color: rgb(83, 105, 255);
 }
 
+span.customizerSearchDescriptionS,
+span.customizerSearchCategoryS,
+span.customizerSearchCurrentS {
+  color: rgb(180, 180, 180);
+}
+
+span.customizerSearchSelectS:before,
 span.customizerSearchSelect:before {
   color: rgb(34, 34, 34);
   font-weight: bold;
   content: "Select property (";
 }
 
+span.customizerSearchSelectS:after,
 span.customizerSearchSelect:after {
   color: rgb(34, 34, 34);
   font-weight: bold;
   content: ")";
 }
 
+span.customizerSearchDescriptionS:before,
 span.customizerSearchDescription:before {
   color: rgb(34, 34, 34);
   font-weight: bold;
   content: "Description [ ";
 }
 
+span.customizerSearchCategoryS:before,
 span.customizerSearchCategory:before {
   color: rgb(34, 34, 34);
   font-weight: bold;
   content: "Category [ ";
 }
 
+span.customizerSearchDescriptionS:after,
+span.customizerSearchCategoryS:after,
 span.customizerSearchDescription:after,
 span.customizerSearchCategory:after {
   color: rgb(34, 34, 34);
@@ -1465,12 +1741,14 @@ span.customizerSearchCategory:after {
   content: " ]";
 }
 
+span.customizerSearchCurrentS:before,
 span.customizerSearchCurrent:before {
   color: rgb(34, 34, 34);
   font-weight: bold;
   content: "Current Value [ ";
 }
 
+span.customizerSearchCurrentS:after,
 span.customizerSearchCurrent:after {
   color: rgb(34, 34, 34);
   font-weight: bold;
@@ -1482,7 +1760,6 @@ span.customizerSearchCurrent:after {
  */
 
 div.CanvasXpressPassword {
-  border: 1px solid rgb(83, 105, 255);
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.95);
   box-sizing: border-box;
@@ -1922,126 +2199,142 @@ tr.CanvasXpressDataTableDOE {
   font-size: 12px !important;
 }
 
-/*
- * Data Table
- */
+/***************/
+/*  Data Table */
+/***************/
 
-div.CanvasXpressDataTable {
+div.CanvasXpressDataTable,
+div.CanvasXpressDataTableToolbar,
+div.CanvasXpressDataTableContainer,
+div.CanvasXpressDataTableVertical,
+div.CanvasXpressDataTableVerticalS,
+div.CanvasXpressDataTableHorizontal,
+div.CanvasXpressDataTableHorizontalS,
+div.CanvasXpressDataTableMask,
+img.CanvasXpressDataTableToolbarImage,
+svg.CanvasXpressDataTableToolbarImage,
+img.CanvasXpressDataTableToolbarImageS,
+svg.CanvasXpressDataTableToolbarImageS,
+img.CanvasXpressDataTableToolbarImageNB,
+svg.CanvasXpressDataTableToolbarImageNB,
+table.CanvasXpressDataTable,
+th.CanvasXpressTableCellHead,
+th.CanvasXpressTableCellModernHead,
+th.CanvasXpressTableCellHeadActive,
+th.CanvasXpressTableCellModernHeadActive,
+td.CanvasXpressTableCell,
+td.CanvasXpressTableCellModern,
+td.CanvasXpressTableCellActive,
+td.CanvasXpressTableCellModernActive,
+a.CanvasXpressTableCellHead,
+a.CanvasXpressTableCellModernHead,
+a.CanvasXpressTableCellHeadActive,
+a.CanvasXpressTableCellModernHeadActive {
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+div.CanvasXpressDataTable,
+div.CanvasXpressDataTableToolbar,
+div.CanvasXpressDataTableContainer,
+div.CanvasXpressDataTableVertical,
+div.CanvasXpressDataTableVerticalS,
+div.CanvasXpressDataTableHorizontal,
+div.CanvasXpressDataTableHorizontalS,
+div.CanvasXpressDataTableMask {
   box-sizing: border-box;
+  position: absolute;
+}
+
+div.CanvasXpressDataTable,
+div.CanvasXpressDataTableToolbar,
+div.CanvasXpressDataTableVertical,
+div.CanvasXpressDataTableVerticalS,
+div.CanvasXpressDataTableHorizontal,
+div.CanvasXpressDataTableHorizontalS {
+  color: rgb(34, 34, 34);
+  background-color: rgba(255, 255, 255, 0.95);
+}
+
+div.CanvasXpressDataTable {
   border: 1px solid rgb(83, 105, 255);
   border-radius: 5px;
-  background-color: rgba(255, 255, 255, 0.95);
   clear: both;
-  color: rgb(34, 34, 34);
   overflow: hidden;
-  position: absolute;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
 }
 
 div.CanvasXpressDataTableToolbar {
-  box-sizing: border-box;
   border-bottom: 1px solid rgb(204, 204, 204);
   border-radius: 5px 5px 0px 0px;
-  background-color: rgba(255, 255, 255, 0.95);
-  color: rgb(34, 34, 34);
   height: 36px;
   left: 0px;
   line-height: 100%;
-  position: absolute;
   top: 0px;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
 }
 
-img.CanvasXpressDataTableToolbarImage,
-svg.CanvasXpressDataTableToolbarImage {
-  background: rgba(0, 0, 0, 0) !important;
-  border: 1px solid rgb(83, 105, 255) !important;
-  border-radius: 5px;
-  padding: 2px;
-  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
-  cursor: pointer;
-  float: right;
-  margin: 5px 8px 0px 0px !important;
-  user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-  -ms-user-select: none;
+div.CanvasXpressDataTableContainer {
+  border-radius: 0px 0px 5px 5px;
+  display: block;
+  left: 0px;
+  line-height: 100%;
 }
 
-img.CanvasXpressDataTableToolbarImageS,
-svg.CanvasXpressDataTableToolbarImageS {
-  background: rgba(0, 0, 0, 0) !important;
-  border: 1px solid rgb(0, 0, 0, 0.1) !important;
-  border-radius: 5px;
-  padding: 2px;
-  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
-  cursor: pointer;
-  float: right;
-  margin: 5px 8px 0px 0px !important;
-  user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-  -ms-user-select: none;
+div.CanvasXpressDataTableVertical,
+div.CanvasXpressDataTableVerticalS {
+  overflow-x: hidden;
+  overflow-y: auto;
+  right: 6px;
+  top: 2px;
+  width: 16px;
+}
+
+div.CanvasXpressDataTableHorizontal,
+div.CanvasXpressDataTableHorizontalS {
+  bottom: 12px;
+  height: 16px;
+  left: 2px;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
+div.CanvasXpressDataTableMask {
+  border: 0px;
+  top: 0px;
+  overflow: hidden;
+}
 
+img.CanvasXpressDataTableToolbarImage,
+svg.CanvasXpressDataTableToolbarImage,
+img.CanvasXpressDataTableToolbarImageS,
+svg.CanvasXpressDataTableToolbarImageS,
 img.CanvasXpressDataTableToolbarImageNB,
 svg.CanvasXpressDataTableToolbarImageNB {
   background: rgba(0, 0, 0, 0) !important;
-  border: none !important;
+  border-radius: 5px;
+  padding: 2px;
   box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
   cursor: pointer;
   float: right;
   margin: 5px 8px 0px 0px !important;
-  user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-  -ms-user-select: none;
 }
 
+img.CanvasXpressDataTableToolbarImage,
+svg.CanvasXpressDataTableToolbarImage {
+  border: 1px solid rgb(83, 105, 255) !important;
+}
 
-div.CanvasXpressDataTableContainer {
-  box-sizing: border-box;
-  border-radius: 0px 0px 5px 5px;
-  color: rgb(34, 34, 34);
-  display: block;
-  left: 0px;
-  line-height: 100%;
-  position: absolute;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
+img.CanvasXpressDataTableToolbarImageS,
+svg.CanvasXpressDataTableToolbarImageS {
+  border: 1px solid rgb(0, 0, 0, 0.1) !important;
 }
-div.CanvasXpressDataTableVertical,
-div.CanvasXpressDataTableVerticalS {
-  box-sizing: border-box;
-  background-color: rgba(255, 255, 255, 0.95);
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: absolute;
-  right: 6px;
-  top: 2px;
-  width: 16px;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
+
+img.CanvasXpressDataTableToolbarImageNB,
+svg.CanvasXpressDataTableToolbarImageNB {
+  border: none !important;
 }
 
 img.CanvasXpressDataTableVertical {
@@ -2049,23 +2342,6 @@ img.CanvasXpressDataTableVertical {
   height: revert-layer !important;
 }
 
-div.CanvasXpressDataTableHorizontal,
-div.CanvasXpressDataTableHorizontalS {
-  box-sizing: border-box;
-  background-color: rgba(255, 255, 255, 0.95);
-  bottom: 12px;
-  height: 16px;
-  left: 2px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  position: absolute;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-}
-
 img.CanvasXpressDataTableHorizontal {
   max-width: unset !important;
 }
@@ -2079,67 +2355,30 @@ table.CanvasXpressDataTable {
   opacity: 0.95;
   table-layout: fixed;
   top: 1px;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-}
-
-div.CanvasXpressDataTableMask {
-  box-sizing: border-box;
-  border: 0px;
-  position: absolute;
-  top: 0px;
-  overflow: hidden;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
 }
 
 th.CanvasXpressTableCellHead,
-th.CanvasXpressTableCellModernHead {
+th.CanvasXpressTableCellModernHead,
+th.CanvasXpressTableCellHeadActive,
+th.CanvasXpressTableCellModernHeadActive {
   border-top: none;
   border-bottom: 1px solid rgb(204, 204, 204);
   border-left: none;
   border-right: none;
-  color: rgb(34, 34, 34);
   font-style: bold;
   opacity: 0.95;
   padding: 2px;
   vertical-align: middle;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
 }
 
 th.CanvasXpressTableCellHead {
   background: linear-gradient(rgb(240, 240, 240), rgb(230, 230, 230));
+  color: rgb(34, 34, 34);
 }
 
 th.CanvasXpressTableCellModernHead {
   background: rgb(0, 0, 0, 0);
-}
-
-th.CanvasXpressTableCellHeadActive,
-th.CanvasXpressTableCellModernHeadActive {
-  border-top: none;
-  border-bottom: 1px solid rgb(204, 204, 204);
-  border-left: none;
-  border-right: none;
-  font-style: bold;
-  opacity: 0.95;
-  padding: 2px;
-  vertical-align: middle;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
+  color: rgb(34, 34, 34);
 }
 
 th.CanvasXpressTableCellHeadActive {
@@ -2153,7 +2392,9 @@ th.CanvasXpressTableCellModernHeadActive {
 }
 
 a.CanvasXpressTableCellHead,
-a.CanvasXpressTableCellModernHead {
+a.CanvasXpressTableCellModernHead,
+a.CanvasXpressTableCellHeadActive,
+a.CanvasXpressTableCellModernHeadActive {
   cursor: pointer;
   position: absolute;
   right: 8px;
@@ -2162,38 +2403,13 @@ a.CanvasXpressTableCellModernHead {
   font-weight: bold;
   font-style: normal;
   width: 14px;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
 }
 
 a.CanvasXpressTableCellHead {
   color: rgb(34, 34, 34);
 }
 
-a.CanvasXpressTableCellModernHead {
-  color: rgb(83, 105, 255);
-}
-
-a.CanvasXpressTableCellHeadActive,
-a.CanvasXpressTableCellModernHeadActive {
-  cursor: pointer;
-  position: absolute;
-  right: 8px;
-  white-space: normal;
-  text-decoration: none;
-  font-weight: bold;
-  font-style: normal;
-  width: 14px;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-}
-
+a.CanvasXpressTableCellModernHead,
 a.CanvasXpressTableCellHeadActive {
   color: rgb(83, 105, 255);
 }
@@ -2203,8 +2419,9 @@ a.CanvasXpressTableCellModernHeadActive {
 }
 
 td.CanvasXpressTableCell,
-td.CanvasXpressTableCellModern {
-  background: rgb(0, 0, 0, 0);
+td.CanvasXpressTableCellModern,
+td.CanvasXpressTableCellActive,
+td.CanvasXpressTableCellModernActive {
   border-top: none;
   border-bottom: 1px solid rgb(204, 204, 204);
   border-left: none;
@@ -2212,29 +2429,17 @@ td.CanvasXpressTableCellModern {
   color: rgb(34, 34, 34);
   padding: 2px;
   vertical-align: middle;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
+}
+
+td.CanvasXpressTableCell,
+td.CanvasXpressTableCellModern {
+  background: rgb(0, 0, 0, 0);
 }
 
 td.CanvasXpressTableCellActive,
 td.CanvasXpressTableCellModernActive {
   background-color: rgb(223, 232, 249);
-  border-top: none;
-  border-bottom: 1px solid rgb(204, 204, 204);
-  border-left: none;
-  border-right: none;
-  color: rgb(34, 34, 34);
-  padding: 2px;
   opacity: 0.95;
-  vertical-align: middle;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
 }
 
 div.CanvasXpressTableCell {
@@ -2252,42 +2457,42 @@ div.CanvasXpressTableCell:hover {
   background-color: rgba(83, 105, 255, 0.1);
 }
 
+th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell,
+th.CanvasXpressTableCellModernHead div.CanvasXpressTableCellEmpty,
+tr:nth-child(1) tr:nth-child(1) th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell,
+th.CanvasXpressTableCellModernHeadActive div.CanvasXpressTableCell,
+th.CanvasXpressTableCellHead div.CanvasXpressTableCell,
+th.CanvasXpressTableCellHeadActive div.CanvasXpressTableCell {
+  border-radius: 5px;
+}
+
 th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell {
   background: rgba(255, 255, 255, 0.95);
-  /*color: rgb(83, 105, 255);*/
   border: 1px solid rgb(83, 105, 255);
-  border-radius: 5px;
 }
 
 th.CanvasXpressTableCellModernHead div.CanvasXpressTableCellEmpty {
   background: rgba(255, 255, 255, 0.95);
-  /*color: rgb(83, 105, 255);*/
-  border: 1px solid rgba(255, 255, 255, 0.95);
-  border-radius: 5px;
+  border: none !important;
 }
 
 tr:nth-child(1) tr:nth-child(1) th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell {
   background: rgba(83, 105, 255, 0.1);
-  /*color: rgb(83, 105, 255);*/
   border: 1px solid rgb(83, 105, 255);
-  border-radius: 5px;
 }
 
 th.CanvasXpressTableCellModernHeadActive div.CanvasXpressTableCell {
   background: rgb(83, 105, 255);
   color: rgb(255, 255, 255);
   border: 1px solid rgb(83, 105, 255);
-  border-radius: 5px;
 }
 
 th.CanvasXpressTableCellHead div.CanvasXpressTableCell {
   border: 1px solid rgba(0, 0, 0, 0);
-  border-radius: 5px;
 }
 
 th.CanvasXpressTableCellHeadActive div.CanvasXpressTableCell {
   border: 1px solid rgb(255, 255, 255);
-  border-radius: 5px;
 }
 
 /*
@@ -2541,13 +2746,13 @@ div.CanvasXpressWrapper {
 /* Data Filter */
 /***************/
 
-div.CanvasXpressDataFilter {
+div.CanvasXpressDataFilter,
+div.CanvasXpressDataFilterToolbar {
   box-sizing: border-box;
   color: rgb(34, 34, 34);
   font: normal 16px arial, tahoma, sans-serif;
   line-height: 100%;
   margin: 0px;
-  padding: 0px;
   position: absolute;
   -moz-user-select: none;
   -khtml-user-select: none;
@@ -2556,72 +2761,55 @@ div.CanvasXpressDataFilter {
 }
 
 div.CanvasXpressDataFilterToolbar {
-  box-sizing: border-box;
   border: 1px solid rgb(83, 105, 255);
   border-radius: 4px;
-  color: rgb(34, 34, 34);
-  font: normal 16px arial, tahoma, sans-serif;
   left: 0px;
-  line-height: 100%;
-  margin: 0px;
-  position: absolute;
   opacity: 0.95;
   top: 0px;
 }
 
-span.CanvasXpressDataFilterToolbarText {
-  font: normal 16px arial, tahoma, sans-serif;
-  color: rgb(34, 34, 34);
-  left: 8px;
-  line-height: 100%;
-  position: relative;
-  top: 9px;
+img.CanvasXpressDataFilterToolbarImage,
+svg.CanvasXpressDataFilterToolbarImage,
+img.CanvasXpressDataFilterToolbarImageNB,
+svg.CanvasXpressDataFilterToolbarImageNB {
+  background: rgba(0, 0, 0, 0) !important;
+  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+  cursor: pointer;
+  margin: 5px 8px 0px 0px !important;
+  float: right;
 }
 
 img.CanvasXpressDataFilterToolbarImage,
 svg.CanvasXpressDataFilterToolbarImage {
-  background: rgba(0, 0, 0, 0) !important;
   border: 1px solid rgb(83, 105, 255) !important;
   border-radius: 5px !important;
   padding: 2px;
-  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
-  cursor: pointer;
-  margin: 5px 8px 0px 0px !important;
-  float: right;
 }
 
 img.CanvasXpressDataFilterToolbarImageNB,
 svg.CanvasXpressDataFilterToolbarImageNB {
-  background: rgba(0, 0, 0, 0) !important;
   border: none !important;
-  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
-  cursor: pointer;
-  margin: 5px 8px 0px 0px !important;
-  float: right;
 }
 
-span.CanvasXpressDataFilterText {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVR42mNkoBAwUt2A/0AAlgACsg0A6QWZQ4whOA2AsgkagtcAYgwhaAAhQ4gyAJ8htHcBRWFAUSxQlA7AEuSmRFLBwBsAAMDpRxF7e4BAAAAAAElFTkSuQmCC);
-  background-repeat: no-repeat;
-  background-position: -0px;
+span.CanvasXpressDataFilterToolbarText,
+span.CanvasXpressDataFilterText,
+span.CanvasXpressDataFilterTextActive {
   font: normal 16px arial, tahoma, sans-serif;
   color: rgb(34, 34, 34);
   left: 8px;
   line-height: 100%;
   position: relative;
   top: 9px;
+  background-repeat: no-repeat;
+  background-position: -0px;
+}
+
+span.CanvasXpressDataFilterText {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVR42mNkoBAwUt2A/0AAlgACsg0A6QWZQ4whOA2AsgkagtcAYgwhaAAhQ4gyAJ8htHcBRWFAUSxQlA7AEuSmRFLBwBsAAMDpRxF7e4BAAAAAAElFTkSuQmCC);
 }
 
 span.CanvasXpressDataFilterTextActive {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASUlEQVR42mNkoBAwjhqAMOA/EBCtCQiwGoAkjhOA7MFqADGGoGvGGga4DMGmGWcgohuCSzNOA5ANwacZrwFIhuBVM4gS0oAZAAD1oisRsByngAAAAABJRU5ErkJggg==);
-  background-repeat: no-repeat;
-  background-position: -0px;
-  font: normal 16px arial, tahoma, sans-serif;
-  color: rgb(34, 34, 34);
-  left: 8px;
-  line-height: 100%;
-  position: relative;
-  top: 9px;
 }
 
 div.CanvasXpressDataFilterContainer {
@@ -2633,13 +2821,20 @@ div.CanvasXpressDataFilterContainer {
   position: absolute;
 }
 
-input[type=checkbox].CanvasXpressCheckbox {
-  accent-color: rgb(83, 105, 255);
+input[type=checkbox].CanvasXpressCheckbox,
+input[type=checkbox].CanvasXpressCheckboxS {
   border-radius: 5px;
   height: 14px;
   width: 14px;
   margin: 2px;
+}
+
+input[type=checkbox].CanvasXpressCheckbox {
+  accent-color: rgb(83, 105, 255);
+}
 
+input[type=checkbox].CanvasXpressCheckboxS {
+  accent-color: rgb(180, 180, 180);
 }
 
 label.CanvasXpressCheckboxLabel {
@@ -2650,21 +2845,23 @@ label.CanvasXpressCheckboxLabel {
   margin: 0 0 0 3px !important;
 }
 
-div.CanvasXpressDataFilterContainerMaskNoOverflow {
+div.CanvasXpressDataFilterContainerMaskNoOverflow,
+div.CanvasXpressDataFilterContainerMaskNoOverflowOut {
   box-sizing: border-box;
-  border: 1px solid rgb(208, 208, 208);
   margin: 5px;
   overflow: hidden;
 }
 
+div.CanvasXpressDataFilterContainerMaskNoOverflow {
+  border: 1px solid rgb(208, 208, 208);
+}
+
 div.CanvasXpressDataFilterContainerMaskNoOverflowOut {
-  box-sizing: border-box;
   border: none;
-  margin: 5px;
-  overflow: hidden;
 }
 
-div.CanvasXpressDataFilterContainerMask {
+div.CanvasXpressDataFilterContainerMask,
+div.CanvasXpressDataFilterContainerMaskS {
   box-sizing: border-box;
   border: 1px solid rgb(208, 208, 208);
   margin: 5px;
@@ -2672,9 +2869,18 @@ div.CanvasXpressDataFilterContainerMask {
   overflow-y: scroll;
 }
 
-div.CanvasXpressDataFilterContainerItem {
+select.CanvasXpressDataFilterContainerString {
+  background-color: rgba(255, 255, 255, 0.95);
+  font: normal 16px arial, tahoma, sans-serif;
+  color: rgb(34, 34, 34);
+  margin-left: 3px;
+  margin-bottom: 3px;
+}
+
+div.CanvasXpressDataFilterContainerItem,
+div.CanvasXpressDataFilterContainerItemSelected,
+div.CanvasXpressDataFilterContainerItemSSelected {
   box-sizing: border-box;
-  /*color: rgb(83, 105, 255);*/
   height: 20px;
   padding: 1px 0px 0px 1px;
   overflow: hidden;
@@ -2682,50 +2888,44 @@ div.CanvasXpressDataFilterContainerItem {
 }
 
 div.CanvasXpressDataFilterContainerItemSelected {
-  box-sizing: border-box;
   background-color: rgba(83, 105, 255, 0.1);
-  /*color: rgb(83, 105, 255);*/
-  height: 20px;
-  padding: 1px 0px 0px 1px;
-  overflow: hidden;
-  white-space: nowrap;
 }
 
-div.CanvasXpressDataFilterContainerHoverable {
-  box-sizing: border-box;
-  border: 1px solid rgb(83, 105, 255);
-  border-radius: 5px;
-  margin: 2px;
-  margin-bottom: 4px;
+div.CanvasXpressDataFilterContainerItemSSelected {
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
-div.CanvasXpressDataFilterContainerHoverableOut {
+div.CanvasXpressDataFilterContainerHoverable,
+div.CanvasXpressDataFilterContainerHoverableS {
   box-sizing: border-box;
-  border: none;
   border-radius: 5px;
   margin: 2px;
   margin-bottom: 4px;
 }
 
+div.CanvasXpressDataFilterContainerHoverable {
+  border: 1px solid rgb(83, 105, 255);
+}
+
 div.CanvasXpressDataFilterContainerHoverable:hover {
-  box-sizing: border-box;
   background-color: rgba(83, 105, 255, 0.1);
-  border-radius: 5px;
 }
 
-select.CanvasXpressDataFilterContainerString {
-  background-color: rgba(255, 255, 255, 0.95);
-  font: normal 16px arial, tahoma, sans-serif;
-  color: rgb(34, 34, 34);
-  margin-left: 3px;
-  margin-bottom: 3px;
+div.CanvasXpressDataFilterContainerHoverableS {
+  border: 1px solid rgb(34, 34, 34);
 }
 
-div.CanvasXpressDataFilterHead {
+div.CanvasXpressDataFilterContainerHoverableS:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+div.CanvasXpressDataFilterHead,
+div.CanvasXpressDataFilterHeadActive,
+div.CanvasXpressDataFilterHeadS,
+div.CanvasXpressDataFilterHeadSActive,
+div.CanvasXpressDataFilterHeadO,
+div.CanvasXpressDataFilterHeadOActive {
   box-sizing: border-box;
-  /*background: linear-gradient(rgb(240, 240, 240), rgb(230,230,230));*/
-  border: 1px solid rgb(83, 105, 255);
-  border-radius: 4px;
   color: rgb(34, 34, 34);
   cursor: pointer;
   float: left;
@@ -2742,40 +2942,62 @@ div.CanvasXpressDataFilterHead {
   -o-user-select: none;
 }
 
-div.CanvasXpressDataFilterHeadActive {
-  box-sizing: border-box;
-  background: rgba(83, 105, 255, 0.1);
+div.CanvasXpressDataFilterHead,
+div.CanvasXpressDataFilterHeadActive,
+div.CanvasXpressDataFilterHeadS,
+div.CanvasXpressDataFilterHeadSActive,
+div.CanvasXpressDataFilterHeadO,
+div.CanvasXpressDataFilterHeadOActive {
   border: 1px solid rgb(83, 105, 255);
+  border-radius: 4px;
+}
+
+div.CanvasXpressDataFilterHeadActive,
+div.CanvasXpressDataFilterHeadSActive,
+div.CanvasXpressDataFilterHeadOActive {
+  border-bottom: 1px solid transparent !important;
   border-radius: 4px 4px 0px 0px;
-  color: rgb(34, 34, 34);
-  cursor: pointer;
-  float: left;
-  height: 38px;
-  margin-top: 2px;
-  overflow: hidden;
-  opacity: 0.95;
-  padding: 2px;
-  text-align: left;
-  vertical-align: middle;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
 }
 
-div.CanvasXpressDataFilterContent {
+div.CanvasXpressDataFilterHeadActive {
+  background: rgba(83, 105, 255, 0.1);
+}
+
+div.CanvasXpressDataFilterHeadS,
+div.CanvasXpressDataFilterHeadSActive,
+div.CanvasXpressDataFilterHeadO,
+div.CanvasXpressDataFilterHeadOActive {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+div.CanvasXpressDataFilterHeadSActive {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+div.CanvasXpressDataFilterHeadOActive {
+  background: linear-gradient(rgb(240, 240, 240), rgb(230,230,230));
+}
+
+div.CanvasXpressDataFilterContent,
+div.CanvasXpressDataFilterContentS {
   box-sizing: border-box;
   background-color: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgb(83, 105, 255);
   border-radius: 0px 0px 4px 4px;
   border-top: 0px;
-  /*color: rgb(83, 105, 255);*/
   font: normal 16px arial, tahoma, sans-serif;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 2px;
 }
 
+div.CanvasXpressDataFilterContent {
+  border: 1px solid rgb(83, 105, 255);
+}
+
+div.CanvasXpressDataFilterContentS {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 div.CanvasXpressDataFilterContainerTicks {
   display: flex;
   justify-content: space-between;
@@ -2783,32 +3005,28 @@ div.CanvasXpressDataFilterContainerTicks {
   height: 18px;
 }
 
-span.CanvasXpressDataFilterContainerTicksLong {
+span.CanvasXpressDataFilterContainerTicksLong,
+span.CanvasXpressDataFilterContainerTicks {
   position: relative;
   display: flex;
   justify-content: center;
   width: 1px;
-  background: gray;
-  height: 10px;
+  background: rgb(128, 128, 128);
   line-height: 10px;
   margin-bottom: 10px;
 }
 
+span.CanvasXpressDataFilterContainerTicksLong {
+  height: 10px;
+}
+
 span.CanvasXpressDataFilterContainerTicks {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  width: 1px;
-  background: gray;
   height: 5px;
-  line-height: 10px;
-  margin-bottom: 10px;
 }
 
-/**
- * Toggle
- */
-
+/***************/
+/*   Toggle    */
+/***************/
 div.CanvasXpressToggle {
   border: none;
   margin: 5px;
@@ -2819,6 +3037,7 @@ label.CanvasXpressToggle {
   cursor: pointer;
 }
 
+div.CanvasXpressToggleSwitchS,
 div.CanvasXpressToggleSwitch {
   display: inline-block;
   background: rgb(204, 204, 204);
@@ -2830,12 +3049,15 @@ div.CanvasXpressToggleSwitch {
   transition: background 0.25s;
 }
 
+div.CanvasXpressToggleSwitchS:before,
+div.CanvasXpressToggleSwitchS:after,
 div.CanvasXpressToggleSwitch:before,
 div.CanvasXpressToggleSwitch:after {
   content: "";
 }
 
-div.CanvasXpressToggleSwitch:before {
+div.CanvasXpressToggleSwitch:before,
+div.CanvasXpressToggleSwitchS:before {
   display: block;
   background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%);
   border-radius: 50%;
@@ -2857,6 +3079,11 @@ input.CanvasXpressToggle:checked+div.CanvasXpressToggleSwitch {
   background: rgb(83, 105, 255);
 }
 
+input.CanvasXpressToggle:checked+div.CanvasXpressToggleSwitchS {
+  background: rgb(180, 180, 180);
+}
+
+input.CanvasXpressToggle:checked+div.CanvasXpressToggleSwitchS:before,
 input.CanvasXpressToggle:checked+div.CanvasXpressToggleSwitch:before {
   left: 12px;
 }
@@ -2873,9 +3100,9 @@ span.CanvasXpressToggle {
   top: -4px;
 }
 
-/**
- * Range Slider
- */
+/****************/
+/* Range Slider */
+/****************/
 
 div.CanvasXpressRangeSliderContainer {
   border: none;
@@ -2906,29 +3133,39 @@ div.CanvasXpressRangeSliderInput {
   margin: 8px 0;
 }
 
-input.CanvasXpressRangeSliderMin {
+input.CanvasXpressRangeSliderMin,
+input.CanvasXpressRangeSliderMax,
+input.CanvasXpressRangeSliderMinS,
+input.CanvasXpressRangeSliderMaxS {
   border: 1px solid rgba(255, 255, 255, 0.95);
   border-radius: 5px;
-  color: rgb(83, 105, 255);
-  float: left;
   font: normal 16px arial, tahoma, sans-serif;
   margin-bottom: 2px;
-  margin-left: 1px;
   line-height: 100%;
   width: 60px;
 }
 
+input.CanvasXpressRangeSliderMin,
 input.CanvasXpressRangeSliderMax {
-  border: 1px solid rgba(255, 255, 255, 0.95);
-  border-radius: 5px;
   color: rgb(83, 105, 255);
+}
+
+input.CanvasXpressRangeSliderMinS,
+input.CanvasXpressRangeSliderMaxS {
+  color: rgb(180, 180, 180);
+}
+
+input.CanvasXpressRangeSliderMinS,
+input.CanvasXpressRangeSliderMin {
+  float: left;
+  margin-left: 1px;
+}
+
+input.CanvasXpressRangeSliderMaxS,
+input.CanvasXpressRangeSliderMax {
   float: right;
-  font: normal 16px arial, tahoma, sans-serif;
-  margin-bottom: 2px;
   margin-right: 1px;
-  line-height: 100%;
   text-align: right;
-  width: 60px;
 }
 
 div.CanvasXpressRangeSlider {
@@ -2949,7 +3186,8 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderTrack {
   background-color: rgb(238, 238, 238);
 }
 
-div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange,
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRangeS {
   position: absolute;
   z-index: 10002;
   left: 0%;
@@ -2957,26 +3195,47 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
   top: 0;
   bottom: 0;
   border-radius: 5px;
+}
+
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
   background-color: rgb(83, 105, 255);
 }
 
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRangeS {
+  background-color: rgb(180, 180, 180);
+}
+
 div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft,
-div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight,
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeftS,
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRightS {
   position: absolute;
   z-index: 10003;
   width: 18px;
   height: 18px;
-  background-color: rgb(83, 105, 255);
   border-radius: 50%;
-  box-shadow: 0 0 0 0 rgba(51, 122, 183, 0.1);
   transition: box-shadow .3s ease-in-out;
 }
 
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft,
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
+  background-color: rgb(83, 105, 255);
+  box-shadow: 0 0 0 0 rgba(51, 122, 183, 0.1);
+}
+
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeftS,
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRightS {
+  background-color: rgb(180, 180, 180);
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
+}
+
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeftS,
 div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft {
   left: 0%;
   transform: translate(-15px, -5px);
 }
 
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRightS,
 div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
   right: 0%;
   transform: translate(15px, -5px);
@@ -2990,6 +3249,14 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight:hover {
   box-shadow: 0 0 0 10px rgba(51, 122, 183, 0.1);
 }
 
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeftS:hover {
+  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRightS:hover {
+  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
 input[type=range] {
   position: absolute;
   pointer-events: none;
@@ -3058,10 +3325,9 @@ input[type=number]::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-/**
- * Scrollbars
- */
-
+/***************/
+/*  Scrollbars */
+/***************/
 
 /* All scrollbar buttons*/
 
@@ -3071,6 +3337,7 @@ div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar-button,
 div.CanvasXpressDataTableVerticalS::-webkit-scrollbar-button,
 /*div.CanvasXpressDataFilterContent::-webkit-scrollbar-button,*/
 div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-button,
+div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar-button,
 div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-button,
 div.CanvasXpressDataExplorer::-webkit-scrollbar-button,
 div.CanvasXpressDataCustomizer::-webkit-scrollbar-button,
@@ -3096,6 +3363,7 @@ select.CanvasXpressSlider::-webkit-scrollbar-track {
   background-color: rgb(255, 255, 255);
 }
 
+div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar-track,
 div.CanvasXpressDataTableHorizontal::-webkit-scrollbar-track,
 div.CanvasXpressDataTableVertical::-webkit-scrollbar-track,
 div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar-track,
@@ -3128,6 +3396,7 @@ div.CanvasXpressBinNameContainer::-webkit-scrollbar-track:hover {
   border-radius: 8px;
 }
 
+div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar-track:hover,
 div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar-track:hover,
 div.CanvasXpressDataTableVerticalS::-webkit-scrollbar-track:hover {
   background-color: rgb(220, 220, 220);
@@ -3147,6 +3416,7 @@ select.CanvasXpressSlider::-webkit-scrollbar {
   background-color: rgb(255, 255, 255);
 }
 
+div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar,
 div.CanvasXpressDataTableHorizontal::-webkit-scrollbar,
 div.CanvasXpressDataTableVertical::-webkit-scrollbar,
 div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar,
@@ -3181,6 +3451,7 @@ div.CanvasXpressBinNameContainer::-webkit-scrollbar-thumb {
   border: none;
 }
 
+div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar-thumb,
 div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar-thumb,
 div.CanvasXpressDataTableVerticalS::-webkit-scrollbar-thumb {
   background-color: rgb(153, 153, 153);