canvasxpress-cli 52.8.1 → 53.0.0

package/src/canvasXpress.css

@@ -61,13 +61,17 @@
   --cx-border-style: solid;
   --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
   /* Font */
-  --cx-font-size: 12px;
-  --cx-large-font-size: 14px;
+  --cx-small-font-size: 9px;
+  --cx-font-size: 11px;
+  --cx-large-font-size: 13px;
+  --cx-x-large-font-size: 15px;
   --cx-font-color: var(--cx-color-ui-font);
   --cx-font: normal var(--cx-font-size) var(--cx-font-family);
   --cx-large-font: normal var(--cx-large-font-size) var(--cx-font-family);
+  --cx-x-large-font: normal var(--cx-x-large-font-size) var(--cx-font-family);
   --cx-font-bold: bold var(--cx-font-size) var(--cx-font-family);
   --cx-font-italic: italic var(--cx-font-size) var(--cx-font-family);
+  --cx-small-font-italic: italic var(--cx-small-font-size) var(--cx-font-family);
   /* Background */
   --cx-background-widgets-color: var(--cx-color-ui-background);
   --cx-background-color: var(--cx-color-widgets);
@@ -77,6 +81,12 @@
   --cx-background-contrast-color: var(--cx-background-color);
   /* Border */
   --cx-border: var(--cx-border-width) var(--cx-border-style) var(--cx-color-widgets);
+  /* Callouts */
+  --cx-callout-size: 8px;
+  --cx-callout-radius: 10px;
+  --cx-callout-border-width: 1px;
+  --cx-callout-background-color: var(--cx-color-ui-background);
+  --cx-callout-border-color: var(--cx-color-widgets);
 }
 
 *,
@@ -362,7 +372,7 @@ div.cX-chat-container {
   border-radius: 10px;
   background-color: var(--cx-color-extra-light-gray);
   color: var(--cx-font-color);
-  font: var(--cx-large-font);
+  font: var(--cx-x-large-font);
   display: flex;
   align-items: center;
 }
@@ -582,7 +592,7 @@ span.cX-bin::selection {
   z-index: 10001;
   /*height: calc(100% - 5px);*/
   background-color: rgb(255, 255, 255);
-  font-family: arial, tahoma, sans-serif;
+  font-family: var(--cx-font-family);
   font-weight: normal;
 }
 
@@ -623,7 +633,7 @@ span.cX-bin::selection {
   position: absolute;
   z-index: 10000;
   top: 0px;
-  font-family: arial, tahoma, sans-serif;
+  font-family: var(--cx-font-family);
   font-weight: normal;
 }
 
@@ -1438,6 +1448,10 @@ div.CanvasXpressDragLayout {
   position: absolute;
 }
 
+/*
+ * Tooltip
+ */
+
 div.CanvasXpressTooltip {
   border: 1px solid rgb(83, 105, 255);
   border-radius: 5px;
@@ -1454,11 +1468,7 @@ div.CanvasXpressTooltip {
   text-align: left;
 }
 
-span.CanvasXpressTooltip,
-span.CanvasXpressTooltipTop,
-span.CanvasXpressTooltipBottom,
-span.CanvasXpressTooltipLeft,
-span.CanvasXpressTooltipRight {
+div.CanvasXpressTooltipInfo {
   border: 1px solid rgb(83, 105, 255);
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.95);
@@ -1473,44 +1483,279 @@ span.CanvasXpressTooltipRight {
   white-space: nowrap;
   text-align: left;
   z-index: 1;
-  /*
-  --b: 2em;
-  --h: 1em;
-  border-image: fill 0 conic-gradient(var(--c,#CC333F) 0 0);
-  --webkit-border-image: fill 0 conic-gradient(var(--c,#CC333F) 0 0);
-  */
-}
-
-span.CanvasXpressTooltipBottom {
-  clip-path:
-    polygon(0 100%,0 0,100% 0,100% 100%,
-      calc(50% + var(--b)/2) 100%,
-      50% calc(100% + var(--h)),
-      calc(50% - var(--b)/2) 100%);
 }
 
-span.CanvasXpressTooltipTop {
-  clip-path:
-    polygon(0 0,0 100%,100% 100%,100% 0,
-      calc(50% + var(--b)/2) 0,
-      50% calc(-1*var(--h)),
-      calc(50% - var(--b)/2) 0);
-}
+/*****************************************************/
+/* Generators                                        */
+/* A collection of Tooltips/Speech Bubbles           */
+/* https://css-generators.com/tooltip-speech-bubble/ */
+/*****************************************************/
 
-span.CanvasXpressTooltipLeft {
-  clip-path:
-    polygon(0 100%,100% 100%,100% 0,0 0,
-      0 calc(50% - var(--b)/2),
-      calc(-1*var(--h)) 50%,
-      0 calc(50% + var(--b)/2));
+div.CanvasXpressTooltipInfoNone,
+div.CanvasXpressTooltipInfoBottom,
+div.CanvasXpressTooltipInfoTop,
+div.CanvasXpressTooltipInfoLeft,
+div.CanvasXpressTooltipInfoRight {
+  color: var(--cx-font-color);
+  font: var(--cx-font);
+  max-height: 800px;
+  padding: 10px;
+  position: absolute;
+  white-space: nowrap;
+  text-align: left;
+  z-index: 1;
 }
 
-span.CanvasXpressTooltipRight {
-  clip-path:
-    polygon(100% 100%,0 100%,0 0,100% 0,
-      100% calc(50% - var(--b)/2),
-      calc(100% + var(--h)) 50%,
-      100% calc(50% + var(--b)/2));
+div.CanvasXpressTooltipInfoBottom {
+  border-radius: var(--cx-callout-radius) var(--cx-callout-radius)
+    min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
+    min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg)) /
+    var(--cx-callout-radius);
+  clip-path: polygon(
+    0 100%,
+    0 0,
+    100% 0,
+    100% 100%,
+    min(100%, 50% + var(--cx-callout-size) * tan(45deg)) 100%,
+    50% calc(100% + var(--cx-callout-size)),
+    max(0%, 50% - var(--cx-callout-size) * tan(45deg)) 100%
+  );
+  background: var(--cx-callout-border-color);
+  border-image: conic-gradient(var(--cx-callout-border-color) 0 0) fill 0 /
+    var(--cx-callout-radius) max(0%, 50% - var(--cx-callout-size) * tan(45deg))
+    0 max(0%, 50% - var(--cx-callout-size) * tan(45deg)) / 0 0
+    var(--cx-callout-size) 0;
+}
+
+div.CanvasXpressTooltipInfoBottom:before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  padding: var(--cx-callout-border-width);
+  border-radius: inherit;
+  clip-path: polygon(
+    0 100%,
+    0 0,
+    100% 0,
+    100% 100%,
+    min(
+        100% - var(--cx-callout-border-width),
+        50% + var(--cx-callout-size) * tan(45deg) -
+          var(--cx-callout-border-width) * tan(22.5deg)
+      )
+      calc(100% - var(--cx-callout-border-width)),
+    50%
+      calc(
+        100% + var(--cx-callout-size) - var(--cx-callout-border-width) /
+          sin(45deg)
+      ),
+    max(
+        var(--cx-callout-border-width),
+        50% - var(--cx-callout-size) * tan(45deg) +
+          var(--cx-callout-border-width) * tan(22.5deg)
+      )
+      calc(100% - var(--cx-callout-border-width))
+  );
+  background: var(--cx-callout-background-color) content-box;
+  border-image: conic-gradient(var(--cx-callout-background-color) 0 0) fill 0 /
+    var(--cx-callout-radius)
+    max(
+      var(--cx-callout-border-width),
+      50% - var(--cx-callout-size) * tan(45deg)
+    )
+    0
+    max(
+      var(--cx-callout-border-width),
+      50% - var(--cx-callout-size) * tan(45deg)
+    ) / 0 0 var(--cx-callout-size) 0;
+}
+
+div.CanvasXpressTooltipInfoTop {
+  border-radius: min(
+      var(--cx-callout-radius),
+      50% - var(--cx-callout-size) * tan(45deg)
+    )
+    min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
+    var(--cx-callout-radius) var(--cx-callout-radius) / var(--cx-callout-radius);
+  clip-path: polygon(
+    0 0,
+    0 100%,
+    100% 100%,
+    100% 0,
+    min(100%, 50% + var(--cx-callout-size) * tan(45deg)) 0,
+    50% calc(-1 * var(--cx-callout-size)),
+    max(0%, 50% - var(--cx-callout-size) * tan(45deg)) 0
+  );
+  background: var(--cx-callout-border-color);
+  border-image: conic-gradient(var(--cx-callout-border-color) 0 0) fill 0 / 0
+    max(0%, 50% - var(--cx-callout-size) * tan(45deg)) var(--cx-callout-radius)
+    max(0%, 50% - var(--cx-callout-size) * tan(45deg)) / var(--cx-callout-size)
+    0 0 0;
+}
+
+div.CanvasXpressTooltipInfoTop:before  {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  padding: var(--cx-callout-border-width);
+  border-radius: inherit;
+  clip-path: polygon(
+    0 0,
+    0 100%,
+    100% 100%,
+    100% 0,
+    min(
+        100% - var(--cx-callout-border-width),
+        50% + var(--cx-callout-size) * tan(45deg) -
+          var(--cx-callout-border-width) * tan(22.5deg)
+      )
+      var(--cx-callout-border-width),
+    50%
+      calc(var(--cx-callout-border-width) / sin(45deg) - var(--cx-callout-size)),
+    max(
+        var(--cx-callout-border-width),
+        50% - var(--cx-callout-size) * tan(45deg) +
+          var(--cx-callout-border-width) * tan(22.5deg)
+      )
+      var(--cx-callout-border-width)
+  );
+  background: var(--cx-callout-background-color) content-box;
+  border-image: conic-gradient(var(--cx-callout-background-color) 0 0) fill 0/ 0
+    max(
+      var(--cx-callout-border-width),
+      50% - var(--cx-callout-size) * tan(45deg)
+    ) var(--cx-callout-radius) max(
+      var(--cx-callout-border-width),
+      50% - var(--cx-callout-size) * tan(45deg)
+    ) / var(--cx-callout-size) 0 0 0;
+}
+
+
+div.CanvasXpressTooltipInfoLeft {
+  border-radius: var(--cx-callout-radius) /
+    min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
+    var(--cx-callout-radius) var(--cx-callout-radius)
+    min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg));
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% 100%,
+    0 100%,
+    0 min(100%, 50% + var(--cx-callout-size) * tan(45deg)),
+    calc(-1 * var(--cx-callout-size)) 50%,
+    0 max(0%, 50% - var(--cx-callout-size) * tan(45deg))
+  );
+  background: var(--cx-callout-border-color);
+  border-image: conic-gradient(var(--cx-callout-border-color) 0 0) fill 0 /
+    max(0%, 50% - var(--cx-callout-size) * tan(45deg)) var(--cx-callout-radius)
+    max(0%, 50% - var(--cx-callout-size) * tan(45deg)) 0/0 0 0
+    var(--cx-callout-size);
+}
+
+div.CanvasXpressTooltipInfoLeft::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  padding: var(--cx-callout-border-width);
+  border-radius: inherit;
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% 100%,
+    0 100%,
+    var(--cx-callout-border-width)
+      min(
+        100% - var(--cx-callout-border-width),
+        50% + var(--cx-callout-size) * tan(45deg) -
+          var(--cx-callout-border-width) * tan(22.5deg)
+      ),
+    calc(var(--cx-callout-border-width) / sin(45deg) - var(--cx-callout-size))
+      50%,
+    var(--cx-callout-border-width)
+      max(
+        var(--cx-callout-border-width),
+        50% - var(--cx-callout-size) * tan(45deg) +
+          var(--cx-callout-border-width) * tan(22.5deg)
+      )
+  );
+  background: var(--cx-callout-background-color) content-box;
+  border-image: conic-gradient(var(--cx-callout-background-color) 0 0) fill 0 /
+    max(
+      var(--cx-callout-border-width),
+      50% - var(--cx-callout-size) * tan(45deg)
+    )
+    var(--cx-callout-radius)
+    max(
+      var(--cx-callout-border-width),
+      50% - var(--cx-callout-size) * tan(45deg)
+    )
+    0/0 0 0 var(--cx-callout-size);
+}
+
+div.CanvasXpressTooltipInfoRight {
+  border-radius: var(--cx-callout-radius) / var(--cx-callout-radius)
+    min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
+    min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
+    var(--cx-callout-radius);
+  clip-path: polygon(
+    100% 0,
+    0 0,
+    0 100%,
+    100% 100%,
+    100% min(100%, 50% + var(--cx-callout-size) * tan(45deg)),
+    calc(100% + var(--cx-callout-size)) 50%,
+    100% max(0%, 50% - var(--cx-callout-size) * tan(45deg))
+  );
+  background: var(--cx-callout-border-color);
+  border-image: conic-gradient(var(--cx-callout-border-color) 0 0) fill 0 /
+    max(0%, 50% - var(--cx-callout-size) * tan(45deg)) 0
+    max(0%, 50% - var(--cx-callout-size) * tan(45deg)) var(--cx-callout-radius) /
+    0 var(--cx-callout-size) 0 0;
+}
+
+div.CanvasXpressTooltipInfoRight::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  padding: var(--cx-callout-border-width);
+  border-radius: inherit;
+  clip-path: polygon(
+    100% 0,
+    0 0,
+    0 100%,
+    100% 100%,
+    calc(100% - var(--cx-callout-border-width))
+      min(
+        100% - var(--cx-callout-border-width),
+        50% + var(--cx-callout-size) * tan(45deg) -
+          var(--cx-callout-border-width) * tan(22.5deg)
+      ),
+    calc(
+        100% + var(--cx-callout-size) - var(--cx-callout-border-width) /
+          sin(45deg)
+      )
+      50%,
+    calc(100% - var(--cx-callout-border-width))
+      max(
+        var(--cx-callout-border-width),
+        50% - var(--cx-callout-size) * tan(45deg) +
+          var(--cx-callout-border-width) * tan(22.5deg)
+      )
+  );
+  background: var(--cx-callout-background-color) content-box;
+  border-image: conic-gradient(var(--cx-callout-background-color) 0 0) fill 0 /
+    max(
+      var(--cx-callout-border-width),
+      50% - var(--cx-callout-size) * tan(45deg)
+    )
+    0
+    max(
+      var(--cx-callout-border-width),
+      50% - var(--cx-callout-size) * tan(45deg)
+    )
+    var(--cx-callout-radius) / 0 var(--cx-callout-size) 0 0;
 }
 
 div.CanvasXpressMousePosition {
@@ -1669,7 +1914,7 @@ div.CanvasXpressAltTooltip {
   box-shadow: 0 0 5px var(--cx-color-transparent);
   color: var(--cx-font-color);
   font: var(--cx-font);
-  font-size: 12px;
+  font-size: var(--cx-font-size);
   line-height: 100%;
   padding: 5px;
   position: absolute;
@@ -1684,14 +1929,14 @@ div.CanvasXpressAltTooltip {
 
 table.CanvasXpressDataTableDOE {
   border-spacing: 0 !important;
-  font-size: 12px !important;
+  font-size: var(--cx-font-size) !important;
   padding: 0 !important;
   border: none !important;
 }
 
 th.CanvasXpressDataTableDOE {
   padding: 0 !important;
-  font-size: 12px !important;
+  font-size: var(--cx-font-size) !important;
   font-weight: bold !important;
   padding-left: 5px !important;
   padding-right: 5px !important;
@@ -1705,7 +1950,7 @@ th.CanvasXpressDataTableDOE {
 
 td.CanvasXpressDataTableDOE {
   padding: 0 !important;
-  font-size: 12px !important;
+  font-size: var(--cx-font-size) !important;
   padding-left: 5px !important;
   padding-right: 18px !important;
   height: 18px !important;
@@ -1717,7 +1962,7 @@ td.CanvasXpressDataTableDOE {
 }
 
 tr.CanvasXpressDataTableDOE {
-  font-size: 12px !important;
+  font-size: var(--cx-font-size) !important;
 }
 
 /****************/
@@ -1867,11 +2112,15 @@ tr > th.CanvasXpressTableCellActive:last-child {
 
 th.CanvasXpressTableCellHead {
   background: var(--cx-background-accent-color);
+  font: var(--cx-x-large-font);
+  font-weight: bold;
   color: var(--cx-font-color);
 }
 
 th.CanvasXpressTableCellHeadActive {
   background: var(--cx-background-accent-color);
+  font: var(--cx-x-large-font);
+  font-weight: bold;
   color: var(--cx-font-color);
 }
 
@@ -1900,6 +2149,7 @@ td.CanvasXpressTableCellActive {
   border-bottom: var(--cx-border-transparent);
   border-left: none;
   border-right: var(--cx-border-transparent);
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   padding: 2px;
   vertical-align: middle;
@@ -1956,7 +2206,7 @@ span.CanvasXpressDataFilterText,
 span.CanvasXpressDataFilterTextActive,
 select.CanvasXpressDataFilterContainerString {
   font-family: var(--cx-font-family);
-  font-size: 16px;
+  font-size: var(--cx-x-large-font-size);
   color: var(--cx-font-color);
 }
 
@@ -2000,7 +2250,7 @@ div.CanvasXpressDataFilterContent {
   border-radius: 0px 0px 4px 4px;
   border-top: 0px;
   font-family: var(--cx-font-family);
-  font-size: 16px;
+  font-size: var(--cx-x-large-font-size);
   color: var(--cx-font-color);
   overflow-y: auto;
   overflow-x: hidden;
@@ -2255,7 +2505,7 @@ input.CanvasXpressRangeSliderMax {
   color: var(--cx-background-color);
   border: 1px solid var(--cx-background-widgets-color);
   border-radius: 5px;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-font);
   margin-bottom: 2px;
   line-height: 100%;
   width: 60px;
@@ -2556,7 +2806,7 @@ div.CanvasXpressLink {
   box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
   color: var(--cx-font-color);
   cursor: default;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-font);
   line-height: 100%;
   margin: 0px;
   opacity: 0.95;
@@ -2608,7 +2858,7 @@ section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator {
   margin: 0;
   padding: 0.5px;
   overflow: hidden;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-font);
   color: var(--cx-font-color);
   line-height: 100%;
 }
@@ -2645,7 +2895,7 @@ div.CanvasXpressMenu {
   box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
   color: var(--cx-font-color);
   cursor: default;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 100%;
   margin: 0px;
   padding: 0px;
@@ -2668,7 +2918,7 @@ ul.CanvasXpressList {
 li.CanvasXpressListItemSep {
   cursor: default;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   font-size: 1px;
   height: 100%;
@@ -2683,7 +2933,7 @@ li.CanvasXpressListItemSep {
 input.CanvasXpressListItem {
   cursor: default;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   line-height: 100%;
   list-style: none;
@@ -2699,7 +2949,7 @@ input[type=file] {
 div.CanvasXpressListItem {
   box-sizing: border-box;
   border: 1px solid rgb(83, 105, 255);
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   line-height: 24px;
 }
@@ -2710,7 +2960,7 @@ li.CanvasXpressListItem {
   border-width: 1px 0px;
   cursor: default;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   height: 100%;
   line-height: 100%;
@@ -2729,7 +2979,7 @@ li.CanvasXpressListItemActive {
   border-width: 1px 0px;
   cursor: default;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   height: 100%;
   line-height: 100%;
@@ -2817,7 +3067,7 @@ li.CanvasXpressListItemScrollSearch {
 input.CanvasXpressListItemScrollSearch {
   color: var(--cx-font-color);
   cursor: default;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   list-style: none;
   margin: 3px;
@@ -2834,7 +3084,7 @@ a.CanvasXpressListItemA {
   color: var(--cx-font-color);
   cursor: pointer;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   list-style: none;
   margin: 0px;
@@ -2853,7 +3103,7 @@ a.CanvasXpressListItemAActive {
   color: var(--cx-font-color);
   cursor: pointer;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   list-style: none;
   margin: 0px;
@@ -2873,7 +3123,7 @@ a.CanvasXpressListItemAArrow {
   color: var(--cx-font-color);
   cursor: pointer;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   list-style: none;
   margin: 0px;
@@ -2893,7 +3143,7 @@ a.CanvasXpressListItemAArrowActive {
   color: var(--cx-font-color);
   cursor: pointer;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   list-style: none;
   margin: 0px;
@@ -2911,7 +3161,7 @@ svg.CanvasXpressListIcon {
   border: 0px none !important;
   color: var(--cx-font-color);
   cursor: pointer;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   height: 24px;
   line-height: 24px;
   list-style: none;
@@ -2930,7 +3180,7 @@ svg.CanvasXpressListIcon {
 span.CanvasXpressListItemText {
   color: var(--cx-font-color);
   cursor: pointer;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   list-style: none;
   margin-right: 10px;
@@ -2940,7 +3190,7 @@ span.CanvasXpressListItemText {
 input.CanvasXpressListItemText {
   color: var(--cx-font-color);
   cursor: pointer;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   list-style: none;
   white-space: nowrap;
@@ -2950,7 +3200,7 @@ span.CanvasXpressListItemTextShort {
   color: var(--cx-font-color);
   cursor: pointer;
   float: right;
-  font: italic 9px arial, tahoma, sans-serif;
+  font: var(--cx-small-font-italic);
   line-height: 24px;
   list-style: none;
   margin-left: 10px;
@@ -2963,7 +3213,7 @@ span.CanvasXpressListItemTextSep {
   border-bottom-color: rgb(255, 255, 255);
   cursor: default;
   display: block;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   font-size: 1px;
   line-height: 1px;
@@ -2978,7 +3228,7 @@ table.CanvasXpressListItemTable {
   line-height: 20px;
   color: var(--cx-font-color);
   cursor: default;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   line-height: 24px;
   padding-left: 3px;
@@ -3011,7 +3261,7 @@ div.CanvasXpressToolbarHelp {
   box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
   color: var(--cx-font-color);
   cursor: default;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   -moz-user-select: none;
   -khtml-user-select: none;
@@ -3022,7 +3272,7 @@ div.CanvasXpressToolbarHelp {
 
 p.CanvasXpressToolbarHelp {
   cursor: default;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   color: var(--cx-font-color);
   line-height: 24px;
   margin: 0px;
@@ -3036,7 +3286,7 @@ div.CanvasXpressForm {
   background-color: rgba(255, 255, 255, 0.95);
   color: var(--cx-font-color);
   cursor: move;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   margin: 8px;
   padding: 8px;
   position: absolute;
@@ -3090,7 +3340,7 @@ input.CanvasXpressFormText {
   border: 1px solid rgb(83, 105, 255);
   color: var(--cx-font-color);
   cursor: default;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   padding-left: 3px;
 }
@@ -3100,7 +3350,7 @@ form.CanvasXpressFormForm {
   border: 1px solid rgb(83, 105, 255);
   color: var(--cx-font-color);
   cursor: default;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 24px;
   margin: 8px;
   overflow: auto;
@@ -3110,7 +3360,7 @@ form.CanvasXpressFormForm {
 div.CanvasXpressConfiguratorColor {
   box-sizing: content-box;
   border: 1px solid rgb(83, 105, 255);
-  font: normal 12px arial, tahoma, sans-serif;
+  font: var(--cx-font);
   color: rgb(34, 34, 34);
   line-height: 18px;
 }
@@ -3121,7 +3371,7 @@ div.CanvasXpressConfiguratorColorMain {
   background-repeat: no-repeat;
   box-sizing: content-box;
   border: none;
-  font: normal 12px arial, tahoma, sans-serif;
+  font: var(--cx-font);
   color:var(--cx-font-color);
   float: left;
   cursor: crosshair;
@@ -3132,7 +3382,7 @@ div.CanvasXpressConfiguratorColorExtra {
   background-image: url(data:image/gif;base64,R0lGODlhDwAPAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=);
   background-repeat: no-repeat;
   border: none;
-  font: normal 12px arial, tahoma, sans-serif;
+  font: var(--cx-font);
   color: var(--cx-font-color);
   cursor: crosshair;
   overflow: hidden;
@@ -3286,7 +3536,7 @@ div.CanvasXpress-ParentNode {
  */
 
 div.CanvasXpressTabPanel {
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   float: left;
   width: 100%
 }
@@ -3327,7 +3577,7 @@ div.CanvasXpressTabPanelRibbon {
 
 span.CanvasXpressTabPanelRibbon {
   color: var(--cx-font-color);
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   line-height: 28px;
   list-style: none;
   white-space: nowrap;
@@ -3358,7 +3608,7 @@ svg.CanvasXpressTabPanelRibbon:hover {
 /* Header */
 
 div.CanvasXpressTabPanelHeader {
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   border-bottom: 2px solid rgb(83, 105, 255);
   height: 38px;
   width: 100%;
@@ -3366,7 +3616,7 @@ div.CanvasXpressTabPanelHeader {
 }
 
 div.CanvasXpressTabPanelHeaderTab {
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   margin-left: 20px;
   margin-right: 20px;
   float: left;
@@ -3378,7 +3628,7 @@ input.CanvasXpressTabPanelHeader {
   border-style: solid;
   border-radius: 5px 5px 0 0;
   padding: 8px;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   max-width: 100px;
   outline: none;
   text-align: center;
@@ -3393,7 +3643,7 @@ input.CanvasXpressTabPanelHeaderActive {
   border-style: solid;
   border-radius: 5px 5px 0 0;
   padding: 8px;
-  font: normal 16px arial, tahoma, sans-serif;
+  font: var(--cx-x-large-font);
   max-width: 100px;
   outline: none;
   text-align: center;