report_html 0.4.1 → 0.5.6

data/js/canvasXpress.css

@@ -1,9 +1,50 @@
 @charset "UTF-8";
 
+/*
+ * Loading
+ */
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid rgb(51, 122, 183);
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: rgb(51, 122, 183) transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}  
+
 /*
  * Loading Image
  */
 
+ /*
 .sk-fading-circle {
     margin: 50px auto;
     width: 80px;
@@ -216,6 +257,7 @@
         transform: translateY(-250px);
     }
 }
+*/
 
 table.shorts {
     margin: 2px 3px;
@@ -269,6 +311,7 @@ td.cxv {
     line-height: 24px;
     background: #fefefe;
     padding: 1px;
+    color: rgb(34, 34, 34);
 }
 
 td.cxy {
@@ -279,6 +322,7 @@ td.cxy {
     text-align: right;
     background: #fefefe;
     padding: 1px;
+    color: rgb(34, 34, 34);
 }
 
 input[type="color"] {
@@ -339,6 +383,10 @@ div.cxc {
     color: #4575b4;
 }
 
+.json-comment {
+    color: #397300
+}
+
 div.CanvasXpressCode {
     border: 1px solid rgb(51, 122, 183);
     border-radius: 5px;
@@ -348,19 +396,18 @@ div.CanvasXpressCode {
     color: rgb(34, 34, 34);
     font: normal 12px arial, tahoma, sans-serif;
     margin: 2px 3px;
-    padding: 2px 3px;
+    padding: 18px;
     position: absolute;
     white-space: nowrap;
 }
 
-img.CanvasXpressCode {
+img.CanvasXpressCode, svg.CanvasXpressCode {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     cursor: default;
     float: right;
-    margin: 2px 8px 0px 0px !important;
-    padding-bottom: 5px;
+    margin: 5px 8px 0px 0px !important;
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
@@ -368,20 +415,6 @@ img.CanvasXpressCode {
     -ms-user-select: none;
 }
 
-img.CanvasXpressCode {
-    transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -webkit-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    -ms-transition: all 0.3s;
-}
-
-img.CanvasXpressCode:hover {
-    margin: 0 7px;
-    transform: scale(1.2);
-    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
-}
-
 pre.CanvasXpressCode {
     text-align: left;
     padding: inherit;
@@ -398,24 +431,21 @@ pre.CanvasXpressCode {
 }
 
 div.CanvasXpressCodeContainer {
-    background-color: rgba(255, 255, 255, 0.95);
     box-sizing: content-box;
     clear: both;
     max-height: 500px;
     max-width: 600px;
     overflow: auto;
+    padding: 10px;
 }
 
 div.CanvasXpressCodeContent {
-    background-color: rgba(255, 255, 255, 0.95);
     box-sizing: content-box;
     margin: 2px 3px;
     padding: 2px 3px;
 }
 
 pre.CanvasXpressCodeContent {
-    background-color: rgba(255, 255, 255, 0.95);
-    border: 1px solid #eee;
     margin: 0 !important;
     padding: 0 !important;
     white-space: pre;
@@ -522,7 +552,7 @@ div.CanvasXpressCarouselCell:nth-child(9) {
     transform: rotateY(320deg) translateZ(288px);
 }
 
-img.CanvasXpressCarousel:hover {
+img.CanvasXpressCarousel:hover, svg.CanvasXpressCarousel:hover {
     -webkit-transform: scale(1.8, 1.8);
     -ms-transform: scale(1.8, 1.8);
     transform: scale(1.8, 1.8);
@@ -562,14 +592,13 @@ div.CanvasXpressBin {
     -o-user-select: none;
 }
 
-img.CanvasXpressBin {
+img.CanvasXpressBin, svg.CanvasXpressBin {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     cursor: default;
     float: right;
-    margin: 2px 3px 0px 0px !important;
-    padding-bottom: 5px;
+    margin: 5px 5px 0px 0px !important;
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
@@ -577,20 +606,6 @@ img.CanvasXpressBin {
     -ms-user-select: none;
 }
 
-img.CanvasXpressBin {
-    transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -webkit-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    -ms-transition: all 0.3s;
-}
-
-img.CanvasXpressBin:hover {
-    margin: 0 7px;
-    transform: scale(1.2);
-    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
-}
-
 div.CanvasXpressBinContainer {
     background-color: rgba(255, 255, 255, 0.95);
     box-sizing: content-box;
@@ -602,6 +617,24 @@ div.CanvasXpressBinContainer {
     -o-user-select: none;
 }
 
+div.CanvasXpressBinContainerTab {
+    background-color: rgba(255, 255, 255, 0.95);
+    border-width: 1px 1px 1px 1px;
+    border-style: solid;
+    border-color: rgb(51, 122, 183);   
+    border-radius: 5px;
+    box-sizing: content-box;
+    clear: none;
+    height: 16px;
+    margin: 3px;
+    overflow-y: auto;
+    padding: 5px;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+}
+
 div.CanvasXpressBinNameContainer {
     background-color: rgba(255, 255, 255, 0.95);
     border: 1px solid rgb(51, 122, 183);
@@ -646,6 +679,7 @@ table.CanvasXpressBinTable {
 
 span.CanvasXpressBin {
     font: bold 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     margin-left: 5px;
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -654,6 +688,7 @@ span.CanvasXpressBin {
 }
 
 img.CanvasXpressBin::selection,
+svg.CanvasXpressBin::selection,
 span.CanvasXpressBin::selection {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
@@ -695,26 +730,27 @@ hr.CanvasXpressDataExplorer {
     background-color: rgb(51, 122, 183);
     height: 1px;
     margin: 1px -3px 1px !important;
+    padding: 0;
 }
 
-img.CanvasXpressDataExplorerActive {
+img.CanvasXpressDataExplorerActive, svg.CanvasXpressDataExplorerActive {
     background: rgba(0, 0, 0, 0) !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     border: 1px dashed rgb(255, 0, 0) !important;
     border-radius: 5px;
     cursor: pointer;
     margin: 3px !important;
-    padding: 3px;
+    padding: 2px;
 }
 
-img.CanvasXpressDataExplorer {
+img.CanvasXpressDataExplorer, svg.CanvasXpressDataExplorer {
     background: rgba(0, 0, 0, 0) !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     border: 1px solid rgb(51, 122, 183) !important;
     border-radius: 5px;
     cursor: pointer;
-    margin: 3px !important;
-    padding: 3px;
+    margin: 2px 3px !important;
+    padding: 2px;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     transform: scale(1, 1);
@@ -724,12 +760,14 @@ img.CanvasXpressDataExplorer {
 }
 
 img.CanvasXpressDataExplorer:hover,
-img.CanvasXpressDataExplorer3:hover img.CanvasXpressDataExplorer4:hover {
+img.CanvasXpressDataExplorer3:hover img.CanvasXpressDataExplorer4:hover,
+svg.CanvasXpressDataExplorer:hover,
+svg.CanvasXpressDataExplorer3:hover svg.CanvasXpressDataExplorer4:hover {
     background: rgba(0, 0, 0, 0) !important;
     border: 1px solid rgb(51, 122, 183) !important;
     border-radius: 5px;
     cursor: pointer;
-    margin: 3px !important;
+    margin: 2px 3px !important;
     padding: 3px;
     -webkit-transform: scale(1.8, 1.8);
     -ms-transform: scale(1.8, 1.8);
@@ -743,14 +781,15 @@ img.CanvasXpressDataExplorer3:hover img.CanvasXpressDataExplorer4:hover {
 }
 
 img.CanvasXpressDataExplorer2,
-img.CanvasXpressDataExplorer4 {
+img.CanvasXpressDataExplorer4,
+svg.CanvasXpressDataExplorer2,
+svg.CanvasXpressDataExplorer4 {
     background: rgba(0, 0, 0, 0) !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     border-radius: 0px;
     cursor: pointer;
-    margin: 3px !important;
-    padding: 0px;
+    margin: 2px 3px !important;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     transform: scale(1, 1);
@@ -759,12 +798,12 @@ img.CanvasXpressDataExplorer4 {
     /* Safari */
 }
 
-img.CanvasXpressDataExplorer2:hover {
+img.CanvasXpressDataExplorer2:hover, svg.CanvasXpressDataExplorer2:hover {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     border-radius: 5px;
     cursor: pointer;
-    margin: 4px !important;
+    margin: 2px 4px !important;
     padding: 4px;
     -webkit-transform: scale(1.8, 1.8);
     -ms-transform: scale(1.8, 1.8);
@@ -777,14 +816,14 @@ img.CanvasXpressDataExplorer2:hover {
     position: relative;
 }
 
-img.CanvasXpressDataExplorer3 {
+img.CanvasXpressDataExplorer3, svg.CanvasXpressDataExplorer3 {
     background: rgba(0, 0, 0, 0) !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     border: 1px solid rgb(51, 122, 183) !important;
     border-radius: 5px;
     cursor: pointer;
     margin: 12px 3px 3px 3px !important;
-    padding: 3px;
+    padding: 2px 3px;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     transform: scale(1, 1);
@@ -798,6 +837,7 @@ div.CanvasXpressDataExplorerActive {
     border-radius: 5px;
     box-sizing: content-box;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     margin: 3px;
     padding: 3px;
     white-space: normal;
@@ -808,12 +848,13 @@ div.CanvasXpressDataExplorer {
     border-radius: 2px;
     box-sizing: content-box;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     margin: 3px;
     padding: 3px;
     white-space: normal;
 }
 
-img.CanvasXpressDataExplorerMask {
+img.CanvasXpressDataExplorerMask, svg.CanvasXpressDataExplorerMask {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
@@ -838,6 +879,7 @@ span.CanvasXpressDataExplorerUnique {
     border-radius: 5px;
     cursor: move;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     margin: 3px;
     padding: 3px;
     word-wrap: normal;
@@ -866,6 +908,7 @@ span.CanvasXpressDataExplorer {
     border-radius: 5px;
     cursor: pointer;
     font: bold 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 380%;
     padding: 6px 29px;
     margin-left: -4px;
@@ -875,15 +918,19 @@ br::selection,
 hr.CanvasXpressDataExplorer::selection,
 img.CanvasXpressDataExplorerActive::selection,
 img.CanvasXpressDataExplorer::selection,
+svg.CanvasXpressDataExplorerActive::selection,
+svg.CanvasXpressDataExplorer::selection,
 div.CanvasXpressDataExplorerActive::selection,
 div.CanvasXpressDataExplorer::selection,
 img.CanvasXpressDataExplorerMask::selection,
+svg.CanvasXpressDataExplorerMask::selection,
 span.CanvasXpressDataExplorerNumeric::selection,
 span.CanvasXpressDataExplorerString::selection,
 span.CanvasXpressDataExplorerUnique::selection,
 span.CanvasXpressDataExplorer::selection {
     background: rgba(0, 0, 0, 0);
     color: rgb(0, 0, 0);
+    padding: 0;
 }
 
 
@@ -955,14 +1002,13 @@ div.CanvasXpressTooltipArrowLeft:before {
     margin-top: -9px;
 }
 
-img.CanvasXpressTooltip {
+img.CanvasXpressTooltip, svg.CanvasXpressTooltip {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     cursor: default;
     float: right;
-    margin: 2px 3px 0px 0px !important;
-    padding-bottom: 2px;
+    margin: 5px 8px 0px 0px !important;
     cursor: default;
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -971,20 +1017,6 @@ img.CanvasXpressTooltip {
     -ms-user-select: none;
 }
 
-img.CanvasXpressTooltip {
-    transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -webkit-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    -ms-transition: all 0.3s;
-}
-
-img.CanvasXpressTooltip:hover {
-    margin: 0 7px;
-    transform: scale(1.2);
-    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
-}
-
 span.CanvasXpressTooltip {
     border: 1px solid rgb(51, 122, 183);
     border-radius: 5px;
@@ -1015,7 +1047,7 @@ div.CanvasXpressMousePosition {
     z-index: 1;
 }
 
-img.CanvasXpressMousePosition {
+img.CanvasXpressMousePosition, svg.CanvasXpressMousePosition {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
@@ -1084,7 +1116,7 @@ div.CanvasXpressMotion {
     font: normal 12px arial, tahoma, sans-serif;
 }
 
-img.CanvasXpressMotion {
+img.CanvasXpressMotion, svg.CanvasXpressMotion {
     margin: 0px !important;
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
@@ -1133,7 +1165,7 @@ div.CanvasXpressMarker {
     color: rgb(34, 34, 34);
     cursor: move;
     font: normal 12px arial, tahoma, sans-serif;
-    height: 340px;
+    height: 400px;
     width: 286px;
     left: 0px;
     line-height: 100%;
@@ -1158,7 +1190,8 @@ div.CanvasXpressToolbar {
 }
 */
 
-div.CanvasXpressToolbar img.CanvasXpressToolbarImage {
+/*
+div.CanvasXpressToolbar img.CanvasXpressToolbarImage, div.CanvasXpressToolbar svg.CanvasXpressToolbarImage {
     transition: all 0.3s;
     -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
@@ -1166,26 +1199,26 @@ div.CanvasXpressToolbar img.CanvasXpressToolbarImage {
     -ms-transition: all 0.3s;
 }
 
-div.CanvasXpressToolbar img.CanvasXpressToolbarImage:hover {
+div.CanvasXpressToolbar img.CanvasXpressToolbarImage:hover, div.CanvasXpressToolbar svg.CanvasXpressToolbarImage:hover{
     margin: 0 7px;
     transform: scale(1.2);
     -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
 }
 
-div.CanvasXpressToolbar img.CanvasXpressToolbarImage:hover+img.CanvasXpressToolbarImage {
+div.CanvasXpressToolbar img.CanvasXpressToolbarImage:hover+img.CanvasXpressToolbarImage, div.CanvasXpressToolbar svg.CanvasXpressToolbarImage:hover+svg.CanvasXpressToolbarImage {
     margin: 0 6px;
     transform: scale(1.1);
     -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
-}
+    }
+*/    
 
-div.CanvasXpressToolbar img.CanvasXpressToolbarImage {
+div.CanvasXpressToolbar img.CanvasXpressToolbarImage, div.CanvasXpressToolbar svg.CanvasXpressToolbarImage {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     cursor: pointer;
     float: right;
-    margin: 4px 4px 0px 0px;
-    padding-top: 4px;
+    margin: 5px 8px 0px 0px;
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
@@ -1193,6 +1226,47 @@ div.CanvasXpressToolbar img.CanvasXpressToolbarImage {
     -ms-user-select: none;
 }
 
+/*
+ * Data Table DOE
+ */
+
+table.CanvasXpressDataTableDOE {
+    border-spacing: 0 !important;
+    font-size: 12px !important;
+    padding: 0 !important;
+    border: none !important;
+}
+
+th.CanvasXpressDataTableDOE {
+    padding: 0 !important;
+    font-size: 12px !important;
+    font-weight: bolder !important;
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+    height: 18px !important;
+    line-height: 18px !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    max-height: 18px !important;
+    border: none !important;
+}
+
+td.CanvasXpressDataTableDOE {
+    padding: 0 !important;
+    font-size: 12px !important;
+    padding-left: 5px !important;
+    padding-right: 18px !important;
+    height: 18px  !important;
+    line-height: 18px !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    max-height: 18px !important;
+    border: none !important;
+}
+
+tr.CanvasXpressDataTableDOE {
+    font-size: 12px !important;
+}
 
 /*
  * Data Table
@@ -1205,7 +1279,6 @@ div.CanvasXpressDataTable {
     background-color: rgba(255, 255, 255, 0.95);
     clear: both;
     color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
     overflow: hidden;
     position: absolute;
     -moz-user-select: none;
@@ -1221,7 +1294,6 @@ div.CanvasXpressDataTableToolbar {
     background-color: rgba(255, 255, 255, 0.95);
     color: rgb(34, 34, 34);
     cursor: move;
-    font: normal 12px arial, tahoma, sans-serif;
     height: 32px;
     left: 0px;
     line-height: 100%;
@@ -1235,13 +1307,13 @@ div.CanvasXpressDataTableToolbar {
     -o-user-select: none;
 }
 
-img.CanvasXpressDataTableToolbarImage {
+img.CanvasXpressDataTableToolbarImage, svg.CanvasXpressDataTableToolbarImage {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     cursor: pointer;
     float: right;
-    margin: 2px 7px 0px 0px !important;
+    margin: 5px 8px 0px 0px !important;
     user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -1250,30 +1322,15 @@ img.CanvasXpressDataTableToolbarImage {
     -ms-user-select: none;
 }
 
-img.CanvasXpressDataTableToolbarImage {
-    transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -webkit-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    -ms-transition: all 0.3s;
-}
-
-img.CanvasXpressDataTableToolbarImage:hover {
-    margin: 0 7px;
-    transform: scale(1.2);
-    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
-}
-
 div.CanvasXpressDataTableContainer {
     box-sizing: content-box;
     border-radius: 0px 0px 5px 5px;
     color: rgb(34, 34, 34);
     display: block;
-    font: normal 12px arial, tahoma, sans-serif;
     left: 0px;
     line-height: 100%;
     position: absolute;
-    top: 32px;
+    top: 35px;
     -ms-user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -1287,7 +1344,7 @@ div.CanvasXpressDataTableVertical {
     overflow-x: hidden;
     overflow-y: auto;
     position: absolute;
-    right: 4px;
+    right: 6px;
     top: 0px;
     width: 32px;
     -ms-user-select: none;
@@ -1304,7 +1361,7 @@ img.CanvasXpressDataTableVertical {
 div.CanvasXpressDataTableHorizontal {
     box-sizing: content-box;
     background-color: rgba(255, 255, 255, 0.95);
-    bottom: 8px;
+    bottom: 12px;
     height: 32px;
     left: 32px;
     overflow-x: auto;
@@ -1344,9 +1401,7 @@ table.CanvasXpressDataTable {
     border: 0px;
     border-spacing: 1px;
     color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
     left: 1px;
-    line-height: 20px;
     position: absolute;
     opacity: 0.95;
     table-layout: fixed;
@@ -1376,8 +1431,7 @@ th.CanvasXpressTableCellHead {
     background: linear-gradient(rgb(240, 240, 240), rgb(230, 230, 230));
     border: 1px solid #ccc;
     color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 20px;
+    font-style: bold;
     opacity: 0.95;
     padding: 2px;
     text-align: left;
@@ -1393,8 +1447,7 @@ th.CanvasXpressTableCellHeadActive {
     background: linear-gradient(rgb(243, 253, 255), rgb(217, 232, 251));
     border: 1px solid #ccc;
     color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 20px;
+    font-style: bold;
     opacity: 0.95;
     padding: 2px;
     text-align: left;
@@ -1444,8 +1497,6 @@ td.CanvasXpressTableCell {
     border-bottom: 1px solid #ccc;
     border-right: 1px solid #ccc;
     color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 20px;
     padding: 2px;
     vertical-align: middle;
     -ms-user-select: none;
@@ -1460,8 +1511,6 @@ td.CanvasXpressTableCellActive {
     border-bottom: 1px solid #ccc;
     border-right: 1px solid #ccc;
     color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 20px;
     padding: 2px;
     opacity: 0.95;
     vertical-align: middle;
@@ -1474,7 +1523,7 @@ td.CanvasXpressTableCellActive {
 
 div.CanvasXpressTableCell {
     box-sizing: content-box;
-    font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 20px;
     margin: 2px 2px 1px 5px;
     overflow: hidden;
@@ -1486,8 +1535,7 @@ div.CanvasXpressTableCell {
 div.CanvasXpressTableCellSortAsc {
     box-sizing: content-box;
     background: url(data:image/gif;base64,R0lGODlhDQAFAIcAAGGQzUD/QOPu+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAEALAAAAAANAAUAAAgbAAMIDABgoEGDABIeRJhQ4cKGEA8KmEiRosGAADs=) no-repeat right 7px;
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 20px;
+    color: rgb(34, 34, 34);
     margin: 2px 2px 1px 5px;
     overflow: hidden;
     position: relative;
@@ -1497,15 +1545,13 @@ div.CanvasXpressTableCellSortAsc {
 div.CanvasXpressTableCellSortDesc {
     box-sizing: content-box;
     background: url(data:image/gif;base64,R0lGODlhDQAFAIcAAGGQzUD/QOPu+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAEALAAAAAANAAUAAAgeAAUAGEgQgIAACBEKLHgwYcKFBh1KFNhQosOKEgMCADs=) no-repeat right 7px;
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 20px;
+    color: rgb(34, 34, 34);
     margin: 2px 2px 1px 5px;
     overflow: hidden;
     position: relative;
     white-space: nowrap;
 }
 
-
 /*
  * Configurator
  */
@@ -1532,6 +1578,7 @@ div.CanvasXpressConfigurator {
 span.CanvasXpressConfigurator {
     cursor: default;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
@@ -1548,7 +1595,7 @@ textarea.CanvasXpressConfigurator {
     font: normal 12px arial, tahoma, sans-serif;
 }
 
-img.CanvasXpressConfigurator {
+img.CanvasXpressConfigurator, svg.CanvasXpressConfigurator {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
@@ -1561,20 +1608,6 @@ img.CanvasXpressConfigurator {
     -o-user-select: none;
 }
 
-img.CanvasXpressConfigurator {
-    transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -webkit-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    -ms-transition: all 0.3s;
-}
-
-img.CanvasXpressConfigurator:hover {
-    margin: 0 7px;
-    transform: scale(1.2);
-    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
-}
-
 select.CanvasXpressConfigurator {
     background-color: rgba(255, 255, 255, 0.95);
     border: 1px solid rgb(51, 122, 183);
@@ -1597,6 +1630,7 @@ div.CanvasXpressConfiguratorOptions {
     box-sizing: content-box;
     cursor: default;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     height: 100px;
     margin-top: 8px;
     overflow: auto;
@@ -1616,11 +1650,13 @@ div.CanvasXpressConfiguratorFilter {
 select.CanvasXpressConfiguratorFilter {
     border: 1px solid rgb(51, 122, 183);
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
 }
 
 input.CanvasXpressConfiguratorFilter {
     border: 1px solid rgb(51, 122, 183);
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
 }
 
 div.CanvasXpressConfiguratorExample {
@@ -1631,11 +1667,14 @@ div.CanvasXpressConfiguratorExample {
     box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
     color: rgb(34, 34, 34);
     font: normal 12px arial, tahoma, sans-serif;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 
 span.CanvasXpressConfiguratorExample {
     cursor: default;
     font: bold 14px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 18px;
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -1644,13 +1683,14 @@ span.CanvasXpressConfiguratorExample {
 }
 
 div.CanvasXpressConfiguratorExampleContent {
-    overflow: 'auto'
+    overflow: hidden;
 }
 
 div.CanvasXpressConfiguratorColor {
     box-sizing: content-box;
     border: 1px solid rgb(51, 122, 183);
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 18px;
 }
 
@@ -1661,6 +1701,7 @@ div.CanvasXpressConfiguratorColorMain {
     box-sizing: content-box;
     border: none;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     float: left;
     cursor: crosshair;
 }
@@ -1671,6 +1712,7 @@ div.CanvasXpressConfiguratorColorExtra {
     background-repeat: no-repeat;
     border: none;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     cursor: crosshair;
     overflow: hidden;
 }
@@ -1705,7 +1747,6 @@ div.CanvasXpressContainer {
     box-sizing: content-box;
     position: relative;
     float: left;
-    transition: all 1s linear;
 }
 
 div.CanvasXpressContainerNT {
@@ -1757,13 +1798,8 @@ div.CanvasXpressWrapper {
     line-height: 100%;
 }
 
-
 /***************/
-
-
 /* Data Filter */
-
-
 /***************/
 
 div.CanvasXpressDataFilter {
@@ -1800,40 +1836,28 @@ div.CanvasXpressDataFilterToolbar {
 
 span.CanvasXpressDataFilterToolbarText {
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     left: 8px;
     line-height: 100%;
     position: relative;
     top: 9px;
 }
 
-img.CanvasXpressDataFilterToolbarImage {
+img.CanvasXpressDataFilterToolbarImage, svg.CanvasXpressDataFilterToolbarImage {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
     cursor: pointer;
-    margin: 4px 4px 0px 0px !important;
+    margin: 5px 8px 0px 0px !important;
     float: right;
 }
 
-img.CanvasXpressDataFilterToolbarImage {
-    transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -webkit-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    -ms-transition: all 0.3s;
-}
-
-img.CanvasXpressDataFilterToolbarImage:hover {
-    margin: 0 7px;
-    transform: scale(1.2);
-    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
-}
-
 span.CanvasXpressDataFilterText {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVR42mNkoBAwUt2A/0AAlgACsg0A6QWZQ4whOA2AsgkagtcAYgwhaAAhQ4gyAJ8htHcBRWFAUSxQlA7AEuSmRFLBwBsAAMDpRxF7e4BAAAAAAElFTkSuQmCC);
     background-repeat: no-repeat;
     background-position: -3px;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     left: 8px;
     line-height: 100%;
     position: relative;
@@ -1845,6 +1869,7 @@ span.CanvasXpressDataFilterTextActive {
     background-repeat: no-repeat;
     background-position: -3px;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     left: 8px;
     line-height: 100%;
     position: relative;
@@ -1902,6 +1927,7 @@ input[type=checkbox].CanvasXpressCheckbox+label.CanvasXpressCheckboxLabel {
     background-repeat: no-repeat;
     background-position: 0 0;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     vertical-align: middle;
     margin: 2px;
     cursor: pointer;
@@ -1915,6 +1941,7 @@ input[type=checkbox].CanvasXpressDataFilterContainerItem+label.CanvasXpressCheck
     background-repeat: no-repeat;
     background-position: 0 0;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     vertical-align: middle;
     margin: 2px;
     cursor: pointer;
@@ -1928,6 +1955,7 @@ input[type=checkbox].CanvasXpressDataFilterContainerItemSelected+label.CanvasXpr
     background-repeat: no-repeat;
     background-position: 0 0;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     vertical-align: middle;
     margin: 2px;
     cursor: pointer;
@@ -1954,6 +1982,13 @@ div.CanvasXpressDataFilterContainerMaskNoOverflow {
     overflow: hidden;
 }
 
+div.CanvasXpressDataFilterContainerMaskNoOverflowOut {
+    box-sizing: content-box;
+    border: none;
+    margin: 5px;
+    overflow: hidden;
+}
+
 div.CanvasXpressDataFilterContainerMask {
     box-sizing: content-box;
     border: 1px solid #d0d0d0;
@@ -1988,6 +2023,13 @@ div.CanvasXpressDataFilterContainerHoverable {
     margin-bottom: 4px;
 }
 
+div.CanvasXpressDataFilterContainerHoverableOut {
+    box-sizing: content-box;
+    border: none;
+    margin: 2px;
+    margin-bottom: 4px;
+}
+
 div.CanvasXpressDataFilterContainerHoverable:hover {
     box-sizing: content-box;
     background-color: #dfe8f6;
@@ -1998,7 +2040,7 @@ div.CanvasXpressDataFilterContainerNumeric {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAOCAYAAADuQ3ZcAAAAF0lEQVR42mNkAAJGNOLChQv/cRNYdAAA0dgUqRX/AM0AAAAASUVORK5CYII=);
     background-repeat: repeat-x;
     clear: both;
-    height: 14px;
+    height: 18px;
     margin: 2px;
 }
 
@@ -2082,6 +2124,7 @@ div.CanvasXpressDataFilterContainerScaleLogLinear {
 select.CanvasXpressDataFilterContainerString {
     background-color: rgba(255, 255, 255, 0.95);
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     margin-left: 3px;
     margin-bottom: 3px;
 }
@@ -2156,11 +2199,12 @@ div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-button,
 div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-button,
 div.CanvasXpressDataExplorer::-webkit-scrollbar-button,
 select.CanvasXpressConfigurator::-webkit-scrollbar-button,
+div.CanvasXpressConfiguratorExample::-webkit-scrollbar-button,
 div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-button,
 select.CanvasXpressSlider::-webkit-scrollbar-button,
 div.CanvasXpressBinNameContainer::-webkit-scrollbar-button {
-    width: 3px;
-    height: 3px;
+    width: 4px;
+    height: 4px;
 }
 
 
@@ -2177,6 +2221,7 @@ select.CanvasXpressSlider::-webkit-scrollbar-track {
 div.CanvasXpressDataTableHorizontal::-webkit-scrollbar-track,
 div.CanvasXpressDataTableVertical::-webkit-scrollbar-track,
 div.CanvasXpressDataExplorer::-webkit-scrollbar-track,
+div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track,
 div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track,
 div.CanvasXpressBinNameContainer::-webkit-scrollbar-track {
     background-color: #F5F5F5;
@@ -2192,11 +2237,12 @@ div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-track:hover,
 div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-track:hover,
 div.CanvasXpressDataExplorer::-webkit-scrollbar-track:hover,
 select.CanvasXpressConfigurator::-webkit-scrollbar-track:hover,
+div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track:hover,
 div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track:hover,
 select.CanvasXpressSlider::-webkit-scrollbar-track:hover,
 div.CanvasXpressBinNameContainer::-webkit-scrollbar-track:hover {
     background-color: #BEBEBE;
-    border-radius: 6px;
+    border-radius: 8px;
 }
 
 
@@ -2207,18 +2253,19 @@ div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar,
 div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar,
 select.CanvasXpressConfigurator::-webkit-scrollbar,
 select.CanvasXpressSlider::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 8px;
+    height: 8px;
     background-color: #FFFFFF;
 }
 
 div.CanvasXpressDataTableHorizontal::-webkit-scrollbar,
 div.CanvasXpressDataTableVertical::-webkit-scrollbar,
 div.CanvasXpressDataExplorer::-webkit-scrollbar,
+div.CanvasXpressConfiguratorExample::-webkit-scrollbar,
 div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar,
 div.CanvasXpressBinNameContainer::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 8px;
+    height: 8px;
     background-color: #F5F5F5;
 }
 
@@ -2232,11 +2279,12 @@ div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-thumb,
 div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-thumb,
 div.CanvasXpressDataExplorer::-webkit-scrollbar-thumb,
 select.CanvasXpressConfigurator::-webkit-scrollbar-thumb,
+div.CanvasXpressConfiguratorExample::-webkit-scrollbar-thumb,
 div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-thumb,
 select.CanvasXpressSlider::-webkit-scrollbar-thumb,
 div.CanvasXpressBinNameContainer::-webkit-scrollbar-thumb {
     background-color: #337AB7;
-    border-radius: 3px;
+    border-radius: 4px;
     border: none;
 }
 
@@ -2319,6 +2367,7 @@ section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator {
     padding: 0.5px;
     overflow: hidden;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 100%;
 }
 
@@ -2378,6 +2427,7 @@ li.CanvasXpressListItemSep {
     cursor: default;
     display: block;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     font-size: 1px;
     height: 100%;
     line-height: 1px;
@@ -2392,6 +2442,7 @@ input.CanvasXpressListItem {
     cursor: default;
     display: block;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 100%;
     list-style: none;
     margin: 0px;
@@ -2407,6 +2458,7 @@ div.CanvasXpressListItem {
     box-sizing: content-box;
     border: 1px solid rgb(51, 122, 183);
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 24px;
 }
 
@@ -2417,6 +2469,7 @@ li.CanvasXpressListItem {
     cursor: default;
     display: block;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     height: 100%;
     line-height: 100%;
     list-style: none;
@@ -2424,6 +2477,7 @@ li.CanvasXpressListItem {
     padding: 0px;
     width: 100%;
     white-space: nowrap;
+    text-align: left;
 }
 
 li.CanvasXpressListItemActive {
@@ -2434,6 +2488,7 @@ li.CanvasXpressListItemActive {
     cursor: default;
     display: block;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     height: 100%;
     line-height: 100%;
     list-style: none;
@@ -2441,6 +2496,7 @@ li.CanvasXpressListItemActive {
     padding: 0px;
     width: 100%;
     white-space: nowrap;
+    text-align: left;
 }
 
 li.CanvasXpressListItemScrollTop {
@@ -2607,7 +2663,7 @@ a.CanvasXpressListItemAArrowActive {
     white-space: nowrap;
 }
 
-img.CanvasXpressListIcon {
+img.CanvasXpressListIcon, svg.CanvasXpressListIcon {
     background-position: center;
     border: 0px none !important;
     color: rgb(34, 34, 34);
@@ -2665,6 +2721,7 @@ span.CanvasXpressListItemTextSep {
     cursor: default;
     display: block;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     font-size: 1px;
     line-height: 1px;
     list-style: none;
@@ -2679,6 +2736,7 @@ table.CanvasXpressListItemTable {
     color: rgb(34, 34, 34);
     cursor: default;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 24px;
     padding-left: 3px;
     -moz-user-select: none;
@@ -2687,7 +2745,7 @@ table.CanvasXpressListItemTable {
     -o-user-select: none;
 }
 
-img.CanvasXpressToolbarHelp {
+img.CanvasXpressToolbarHelp, svg.CanvasXpressToolbarHelp {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
@@ -2701,20 +2759,6 @@ img.CanvasXpressToolbarHelp {
     -ms-user-select: none;
 }
 
-img.CanvasXpressToolbarHelp {
-    transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -webkit-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    -ms-transition: all 0.3s;
-}
-
-img.CanvasXpressToolbarHelp:hover {
-    margin: 0 7px;
-    transform: scale(1.2);
-    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
-}
-
 div.CanvasXpressToolbarHelp {
     box-sizing: content-box;
     background-color: rgba(255, 255, 255, 0.95);
@@ -2735,6 +2779,7 @@ div.CanvasXpressToolbarHelp {
 p.CanvasXpressToolbarHelp {
     cursor: default;
     font: normal 12px arial, tahoma, sans-serif;
+    color: rgb(34, 34, 34);
     line-height: 24px;
     margin: 0px;
     padding: 5px 5px 5px 20px;
@@ -2834,6 +2879,15 @@ div.CanvasXpressSlider {
     width: 36px;
 }
 
+div.CanvasXpressSliderRemote {
+    background: rgba(0, 0, 0, 0);
+    height: 36px;
+    position: absolute;
+    margin-left: 3px;
+    margin-right: 3px;
+    width: 36px;
+}
+
 div.CanvasXpressSlider:hover {
     background: rgba(0, 0, 0, 0.4);
 }
@@ -2849,7 +2903,7 @@ div.CanvasXpressSliderLeft {
     left: -50px;
 }
 
-div.CanvasXpressSliderLeft img {
+div.CanvasXpressSliderLeft img, div.CanvasXpressSliderLeft svg {
     margin: 5px 5px 3px 3px;
 }
 
@@ -2857,7 +2911,7 @@ div.CanvasXpressSliderLeft img {
     div.CanvasXpressSliderLeft {
         left: -25px;
     }
-    div.CanvasXpressSliderLeft img {
+    div.CanvasXpressSliderLeft img, div.CanvasXpressSliderLeft svg {
         margin: -4px 0px 0px -2px;
     }
 }
@@ -2866,7 +2920,7 @@ div.CanvasXpressSliderRight {
     right: -50px;
 }
 
-div.CanvasXpressSliderRight img {
+div.CanvasXpressSliderRight img, div.CanvasXpressSliderRight svg {
     margin: 5px 3px 3px 8px;
 }
 
@@ -2874,7 +2928,7 @@ div.CanvasXpressSliderRight img {
     div.CanvasXpressSliderRight {
         right: -25px;
     }
-    div.CanvasXpressSliderRight img {
+    div.CanvasXpressSliderRight img, div.CanvasXpressSliderRight svg {
         margin: -4px -2px 0px 2px;
     }
 }
@@ -2939,7 +2993,6 @@ div.CanvasXpress-ParentNode {
     padding: 0;
 }
 
-
 /*
  * CanvasXpress
  */
@@ -2951,11 +3004,9 @@ canvas.CanvasXpress {
     -o-user-select: none;
     user-select: none;
     -ms-user-select: none;
-    transition: all 1s linear;
 }
 
 canvas.CanvasXpress:hover {
-    /*border: 1px solid #23527c;*/
     border: 1px solid rgba(35, 82, 124, 0.2);
     border-radius: 6px;
     margin: -1px;
@@ -6060,4 +6111,4 @@ Copyright (c) 2018 Christian Pucci
         -webkit-transform: scale(1, 1) translateY(-900%);
         transform: scale(1, 1) translateY(-900%);
     }
-}
+}