canvasxpress-cli 63.0.1 → 63.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/cmds/io.js +39 -35
  2. package/package.json +1 -1
  3. package/src/canvasXpress.css +1280 -1346
  4. package/src/canvasXpress.js +4 -4
package/src/canvasXpress.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @charset "UTF-8";
2
+ /* @category: shared */
2
3
 
3
4
  /*
4
5
  * Favorite Colors
@@ -54,40 +55,13 @@
54
55
  --cx-color-bms-hover: rgba(190, 43, 187, 0.1);
55
56
  --cx-color-bms2: rgb(89, 84, 84);
56
57
  --cx-color-bms2-hover: rgba(89, 84, 84, 0.1);
57
- /* UI: These are the exposed variables */
58
- --cx-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
59
- --cx-border-radius: 5px;
60
- --cx-border-width: 1px;
61
- --cx-border-style: solid;
62
- --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
63
- /* Data Table */
64
- --cx-datatable-accent-color: rgb(8, 122, 209);
65
- --cx-datatable-background-color: rgb(255, 255, 255);
66
- --cx-datatable-border-color: rgb(8, 122, 209);
67
- --cx-datatable-banner-background-color: rgb(255, 255, 255);
68
- --cx-datatable-banner-border-color: rgb(215, 226, 230);
69
- --cx-datatable-banner-text-color: rgb(85, 91, 98);
70
- --cx-datatable-toolbar-border-color: rgb(215, 226, 230);
71
- --cx-datatable-header-background-color: rgb(255, 255, 255);
72
- --cx-datatable-header-text-color: rgb(85, 91, 98);
73
- --cx-datatable-cell-background-color: rgb(255, 255, 255);
74
- --cx-datatable-oddcell-background-color: rgb(247, 248, 249);
75
- --cx-datatable-cell-border-color: rgb(215, 226, 230);
76
- --cx-datatable-cell-text-color: rgb(85, 91, 98);
77
- --cx-datatable-activecell-border-color: rgb(124, 182, 226);
78
- --cx-datatable-status-background-color: rgb(255, 255, 255);
79
- --cx-datatable-status-border-color: rgb(215, 226, 230);
80
- --cx-datatable-status-text-color: rgb(85, 91, 98);
81
- --cx-datatable-pagination-background-color: rgb(255, 255, 255);
82
- --cx-datatable-pagination-border-color: rgb(215, 226, 230);
83
- --cx-datatable-pagination-text-color: rgb(85, 91, 98);
84
- --cx-datatable-cell-hover-background-color: rgba(124, 182, 226, 0.2);
85
- --cx-datatable-row-hover-background-color: rgba(124, 182, 226, 0.2);
86
58
  /* Font */
87
- --cx-small-font-size: 9px;
88
- --cx-font-size: 12px;
89
- --cx-large-font-size: 13px;
90
- --cx-x-large-font-size: 15px;
59
+ --cx-x-small-font-size: 11px;
60
+ --cx-small-font-size: 12px;
61
+ --cx-medium-font-size: 13px;
62
+ --cx-font-size: 15px;
63
+ --cx-large-font-size: 16px;
64
+ --cx-x-large-font-size: 17px;
91
65
  --cx-font-color: var(--cx-color-ui-font);
92
66
  --cx-font: var(--cx-font-size) var(--cx-font-family);
93
67
  --cx-large-font: var(--cx-large-font-size) var(--cx-font-family);
@@ -116,6 +90,84 @@
116
90
  --cx-callout-border-color: var(--cx-color-widgets);
117
91
  /* Transitions */
118
92
  --cx-transition-speed: 0.5s;
93
+ /* UI: These are the exposed variables */
94
+ --cx-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
95
+ --cx-border-radius: 5px;
96
+ --cx-border-width: 1px;
97
+ --cx-border-style: solid;
98
+ --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
99
+ /* Scrollbar */
100
+ --cx-scrollbar-background-color: rgb(255, 255, 255);
101
+ --cx-scrollbar-alt-background-color: rgb(245, 245, 245);
102
+ --cx-scrollbar-thumb-color: #aaaaaa;
103
+ --cx-scrollbar-thumb-hover-color: #888888;
104
+ /* Customizer */
105
+ --cx-customizer-close-background-color: rgb(8, 122, 209);
106
+ --cx-customizer-close-text-color: rgb(255, 255, 255);
107
+ --cx-customizer-background-color: rgb(255, 255, 255);
108
+ --cx-customizer-border-color: rgb(8, 122, 209);
109
+ --cx-customizer-text-color: #555b62;
110
+ --cx-customizer-font-size: 12px;
111
+ --cx-customizer-hover-color: rgba(124, 182, 226, 0.2);
112
+ /* Data Filter */
113
+ --cx-toggle-switch-background-color: rgb(8, 122, 209);
114
+ --cx-datafilter-background-color: #ffffff;
115
+ --cx-datafilter-border-color: #087ad1;
116
+ --cx-datafilter-toolbar-background-color: #cccccc;
117
+ --cx-datafilter-text-color: #555b62;
118
+ --cx-datafilter-font-size: 12px;
119
+ --cx-datafilter-hover-color: rgba(124, 182, 226, 0.2);
120
+ /* Context Menu */
121
+ --cx-context-menu-background-color: #ffffff;
122
+ --cx-context-menu-border-color: #087ad1;
123
+ --cx-context-menu-text-color: #555b62;
124
+ --cx-context-menu-font-size: 11px;
125
+ --cx-context-menu-hover-color: rgba(124, 182, 226, 0.2);
126
+ /* Data Table */
127
+ --cx-datatable-accent-color: rgb(8, 122, 209);
128
+ --cx-datatable-background-color: rgb(255, 255, 255);
129
+ --cx-datatable-border-color: rgb(8, 122, 209);
130
+ --cx-datatable-banner-background-color: rgb(255, 255, 255);
131
+ --cx-datatable-banner-border-color: rgb(215, 226, 230);
132
+ --cx-datatable-banner-text-color: rgb(85, 91, 98);
133
+ --cx-datatable-toolbar-border-color: rgb(215, 226, 230);
134
+ --cx-datatable-header-background-color: rgb(255, 255, 255);
135
+ --cx-datatable-header-text-color: rgb(85, 91, 98);
136
+ --cx-datatable-cell-background-color: rgb(255, 255, 255);
137
+ --cx-datatable-oddcell-background-color: rgb(247, 248, 249);
138
+ --cx-datatable-cell-border-color: rgb(215, 226, 230);
139
+ --cx-datatable-cell-text-color: rgb(85, 91, 98);
140
+ --cx-datatable-activecell-border-color: rgb(124, 182, 226);
141
+ --cx-datatable-status-background-color: rgb(255, 255, 255);
142
+ --cx-datatable-status-border-color: rgb(215, 226, 230);
143
+ --cx-datatable-status-text-color: rgb(85, 91, 98);
144
+ --cx-datatable-pagination-background-color: rgb(255, 255, 255);
145
+ --cx-datatable-pagination-border-color: rgb(215, 226, 230);
146
+ --cx-datatable-pagination-text-color: rgb(85, 91, 98);
147
+ --cx-datatable-cell-hover-background-color: rgba(124, 182, 226, 0.2);
148
+ --cx-datatable-row-hover-background-color: rgba(124, 182, 226, 0.2);
149
+ --cx-datatable-toolbar-font-size: 14px;
150
+ --cx-datatable-header-font-size: 15px;
151
+ --cx-datatable-body-font-size: 15px;
152
+ --cx-datatable-cell-font-size: 15px;
153
+ --cx-datatable-cell-font-family: var(--cx-font-family);
154
+ /* Workflow */
155
+ --cx-workflow-background-color: #ffffff;
156
+ --cx-workflow-border-color: rgb(215, 226, 230);
157
+ --cx-workflow-text-color: #555b62;
158
+ --cx-workflow-hover-color: rgba(124, 182, 226, 0.2);
159
+ --cx-workflow-active-color: rgba(124, 182, 226, 0.2);
160
+ --cx-workflow-slider-track-color: rgb(215, 226, 230);
161
+ --cx-workflow-slider-fill-color: rgb(8, 122, 209);
162
+ --cx-workflow-slider-thumb-color: rgb(8, 122, 209);
163
+ --cx-workflow-slider-thumb-border-color: #ffffff;
164
+ --cx-workflow-list-label-font-size: 10px;
165
+ --cx-workflow-list-tick-font-size: 6px;
166
+ --cx-workflow-list-text-color: #555b62;
167
+ --cx-workflow-list-tick-color: rgb(215, 226, 230);
168
+ --cx-workflow-button-background-color: #ffffff;
169
+ --cx-workflow-button-border-color: rgb(215, 226, 230);
170
+ --cx-workflow-timeline-border-color: rgb(215, 226, 230);
119
171
  }
120
172
 
121
173
  *,
@@ -147,45 +199,35 @@ div.cX-bin-name-container,
147
199
  table.cX-bin-table,
148
200
  span.cX-bin,
149
201
  div.cX-DataTable,
150
- div.cX-DataTable-Container,
151
- table.cX-DataTable-Tooltip,
152
- div.cX-DataTable-Cell-Tooltip,
153
- div.cX-DataTable-Root,
154
- div.cX-DataTable-Vertical-Scrollbar,
155
- div.cX-DataTable-Horizontal-Scrollbar,
156
- div.cX-DataTable-Header-Viewport,
202
+ .cX-DataTable-Container,
203
+ .cX-DataTable-Tooltip,
204
+ .cX-DataTable-Cell-Tooltip,
205
+ .cX-DataTable-Root,
206
+ .cX-DataTable-Vertical-Scrollbar,
207
+ .cX-DataTable-Horizontal-Scrollbar,
208
+ .cX-DataTable-Header-Viewport,
157
209
  img.cX-DataTable-Toolbar-Image,
158
210
  svg.cX-DataTable-Toolbar-Image,
159
- svg.cX-DataTable-Toolbar-Image-Logo,
211
+ .cX-DataTable-Toolbar-Image-Logo,
160
212
  table.cX-DataTable,
161
- th.cX-DataTable-Cell-Head,
162
- th.cX-DataTable-Cell-Head-Active,
213
+ .cX-DataTable-Cell-Head,
214
+ .cX-DataTable-Cell-Head-Active,
163
215
  td.cX-DataTable-Cell,
164
216
  td.cX-DataTable-Cell-Active,
165
- a.cX-DataTable-Cell-Head,
166
- a.cX-DataTable-Cell-Head-Active,
167
- div.cX-DataFilter,
168
- div.cX-DataFilter-Toolbar,
169
- div.cX-DataFilter-Head,
170
- div.cX-DataFilter-Head-Active,
171
- div.cX-DataFilter-Toolbar svg.cX-DataFilter-Toolbar-Image,
172
- div.CanvasXpressPasswordContainer,
173
- img.CanvasXpressPassword,
174
- svg.CanvasXpressPassword,
175
- img.CanvasXpressMousePosition,
176
- svg.CanvasXpressMousePosition,
177
- div.CanvasXpressMarker,
178
- li.CanvasXpressListItemScrollTop,
179
- li.CanvasXpressListItemScrollTopActive,
180
- li.CanvasXpressListItemScrollBottom,
181
- li.CanvasXpressListItemScrollBottomActive,
182
- table.CanvasXpressListItemTable,
217
+ .cX-DataFilter,
218
+ .cX-DataFilter-Toolbar,
219
+ .cX-DataFilter-Head,
220
+ .cX-DataFilter-Head-Active,
221
+ .cX-DataFilter-Toolbar svg.cX-DataFilter-Toolbar-Image,
222
+ .cX-Password-Container,
223
+ .cX-Password-Icon,
224
+ .cX-Menu-Item-Scroll-Top,
225
+ .cX-Menu-Item-Scroll-Top-Active,
226
+ .cX-Menu-Item-Scroll-Bottom,
227
+ .cX-Menu-Item-Scroll-Bottom-Active,
183
228
  img.cX-Toolbar-Help,
184
229
  svg.cX-Toolbar-Help,
185
- div.cX-Toolbar-Help,
186
- input.CanvasXpressFormButton,
187
- input.CanvasXpressFormButtonActive,
188
- section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator>label.CanvasXpressTabMenuConfigurator {
230
+ div.cX-Toolbar-Help {
189
231
  -webkit-touch-callout: none;
190
232
  /* iOS Safari */
191
233
  -webkit-user-select: none;
@@ -200,6 +242,7 @@ section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator>label
200
242
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
201
243
  }
202
244
 
245
+ /* @category: shared */
203
246
  /*****************
204
247
  * SVG No border *
205
248
  *****************/
@@ -221,6 +264,16 @@ svg > * {
221
264
  pointer-events: none;
222
265
  }
223
266
 
267
+ svg.cX-DataTable-Toolbar-Image > *,
268
+ svg.cX-DataTable-Toolbar-Image-Logo > * {
269
+ pointer-events: auto;
270
+ }
271
+
272
+ svg.cX-DataTable-Toolbar-Image,
273
+ svg.cX-DataTable-Toolbar-Image-Logo {
274
+ pointer-events: auto;
275
+ }
276
+
224
277
  /*****************
225
278
  * SVG Border *
226
279
  *****************/
@@ -272,7 +325,7 @@ svg.cX-code {
272
325
  color: rgb(83, 105, 255);
273
326
  background: rgba(0, 0, 0, 0);
274
327
  padding: 15px;
275
- border-radius: 8px;
328
+ border-radius: var(--cx-border-radius);
276
329
  }
277
330
 
278
331
  .cX-Loader-Spinner {
@@ -295,30 +348,31 @@ svg.cX-code {
295
348
  }
296
349
  }
297
350
 
351
+ /* @category: widget */
298
352
  /*****************
299
353
  * Code *
300
354
  *****************/
301
355
 
302
- .cX-code-key {
356
+ .cX-Code-Key {
303
357
  color: var(--cx-code-key);
304
358
  font-weight: bold;
305
359
  }
306
360
 
307
- .cX-code-value,
308
- .cX-code-number,
309
- .cX-code-null {
361
+ .cX-Code-Value,
362
+ .cX-Code-Number,
363
+ .cX-Code-Null {
310
364
  color: var(--cx-code-value);
311
365
  }
312
366
 
313
- .cX-code-string {
367
+ .cX-Code-String {
314
368
  color: var(--cx-code-string);
315
369
  }
316
370
 
317
- .cX-code-boolean {
371
+ .cX-Code-Boolean {
318
372
  color: var(--cx-code-boolean);
319
373
  }
320
374
 
321
- .cX-code-comment {
375
+ .cX-Code-Comment {
322
376
  color: var(--cx-code-comment);
323
377
  }
324
378
 
@@ -327,7 +381,7 @@ svg.cX-code {
327
381
  background: transparent;
328
382
  }
329
383
 
330
- div.cX-code {
384
+ div.cX-Code {
331
385
  border: var(--cx-border);
332
386
  border-radius: var(--cx-border-radius);
333
387
  background-color: var(--cx-color-extra-light-gray);
@@ -341,7 +395,7 @@ div.cX-code {
341
395
  z-index: 10000;
342
396
  }
343
397
 
344
- div.cX-code-container {
398
+ .cX-Code-Container {
345
399
  clear: both;
346
400
  width: 600px;
347
401
  overflow: auto;
@@ -350,25 +404,28 @@ div.cX-code-container {
350
404
  top: 10px;
351
405
  }
352
406
 
353
- div.cX-code-content {
354
- margin: 2px 3px;
355
- padding: 2px 3px;
356
- }
357
-
358
- div.cX-code-toolbar {
407
+ .cX-Code-Toolbar {
359
408
  display: flex;
360
409
  flex-wrap: nowrap;
361
410
  overflow: hidden;
362
411
  justify-content: start;
363
412
  }
364
413
 
365
- div.cX-code-icons {
414
+ .cX-Code-Icons {
366
415
  display: flex;
367
416
  position: relative;
368
417
  margin-left: auto;
418
+ gap: 8px;
419
+ align-items: center;
420
+ }
421
+
422
+ .cX-Code-Icons img,
423
+ .cX-Code-Icons svg {
424
+ width: 24px;
425
+ height: 24px;
369
426
  }
370
427
 
371
- div.cX-code-error {
428
+ .cX-Code-Error {
372
429
  height: 36px;
373
430
  width: 280px;
374
431
  float: left;
@@ -384,9 +441,8 @@ div.cX-code-error {
384
441
  cursor: pointer;
385
442
  }
386
443
 
387
- pre.cX-code,
388
- pre.cX-code-content,
389
- pre.cX-code-content code {
444
+ .cX-Code-Content,
445
+ .cX-Code-Content code {
390
446
  padding: 0;
391
447
  margin: 0;
392
448
  font-size: inherit;
@@ -395,32 +451,25 @@ pre.cX-code-content code {
395
451
  border: none;
396
452
  }
397
453
 
398
- pre.cX-code {
454
+ .cX-Code-Content {
455
+ white-space: pre;
456
+ outline: none;
457
+ cursor: text;
458
+ font-size: small;
399
459
  text-align: left;
400
460
  word-break: inherit;
401
461
  word-wrap: inherit;
402
462
  background-color: inherit;
403
463
  border-radius: inherit;
404
- counter-reset: line;
405
- }
406
-
407
- pre.cX-code-content {
408
- white-space: pre;
409
- outline: none;
410
- cursor: text;
411
- font-size: small;
412
- }
413
-
414
- pre.cX-code-content:before {
415
464
  counter-reset: listing;
416
465
  }
417
466
 
418
- pre.cX-code-content code {
467
+ .cX-Code-Content code {
419
468
  counter-increment: listing;
420
469
  line-height: 1.5;
421
470
  }
422
471
 
423
- pre.cX-code-content code::before {
472
+ .cX-Code-Content code::before {
424
473
  content: counter(listing) " ";
425
474
  display: inline-block;
426
475
  width: 3em;
@@ -429,6 +478,7 @@ pre.cX-code-content code::before {
429
478
  background-color: var(--cx-color-extra-light-gray);
430
479
  }
431
480
 
481
+ /* @category: widget */
432
482
  /******************
433
483
  * Chat Interface *
434
484
  ******************/
@@ -501,7 +551,7 @@ div.cX-Chat {
501
551
 
502
552
  .cX-Chat-Configurator {
503
553
  padding-left: 5px;
504
- border-radius: 5px;
554
+ border-radius: var(--cx-border-radius);
505
555
  border-width: 0.5px;
506
556
  height: 24px;
507
557
  }
@@ -572,7 +622,7 @@ div.cX-Chat {
572
622
 
573
623
  .cX-Chat-Html-Panel-Title {
574
624
  font-family: var(--cx-font-family);
575
- font-size: 13px;
625
+ font-size: var(--cx-medium-font-size);
576
626
  font-weight: 600;
577
627
  color: var(--cx-color-ui-background);
578
628
  }
@@ -599,7 +649,7 @@ svg.cX-Chat-Html-Panel-Close {
599
649
  */
600
650
  .cX-Chat-LLM-Response {
601
651
  font-family: var(--cx-font-family);
602
- font-size: 16px;
652
+ font-size: var(--cx-large-font-size);
603
653
  line-height: 1.6;
604
654
  color: var(--cx-color-ui-font);
605
655
  background: var(--cx-background-widgets-color);
@@ -612,7 +662,7 @@ svg.cX-Chat-Html-Panel-Close {
612
662
  }
613
663
 
614
664
  .cX-Chat-LLM-Response h3 {
615
- font-size: 16px;
665
+ font-size: var(--cx-large-font-size);
616
666
  font-weight: 600;
617
667
  margin: 0 0 10px;
618
668
  color: var(--cx-color-widgets);
@@ -626,7 +676,7 @@ svg.cX-Chat-Html-Panel-Close {
626
676
 
627
677
  .cX-Chat-LLM-Response code {
628
678
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
629
- font-size: 12px;
679
+ font-size: var(--cx-small-font-size);
630
680
  background: var(--cx-background-widgets-color);
631
681
  border: var(--cx-border);
632
682
  border-radius: var(--cx-border-radius);
@@ -648,7 +698,7 @@ svg.cX-Chat-Html-Panel-Close {
648
698
  border: none;
649
699
  padding: 0;
650
700
  color: var(--cx-color-ui-font);
651
- font-size: 12px;
701
+ font-size: var(--cx-small-font-size);
652
702
  }
653
703
 
654
704
  .cX-Chat-LLM-Response ul {
@@ -682,7 +732,7 @@ svg.cX-Chat-Html-Panel-Close {
682
732
  margin-top: 12px;
683
733
  padding-top: 8px;
684
734
  border-top: var(--cx-border);
685
- font-size: 13px;
735
+ font-size: var(--cx-medium-font-size);
686
736
  }
687
737
 
688
738
  .cX-Chat-LLM-Links a {
@@ -728,39 +778,39 @@ svg.cX-Chat-Html-Panel-Close {
728
778
 
729
779
  .cX-Chat-Select-GT {
730
780
  font-weight: 700;
731
- font-size: 15px;
781
+ font-size: var(--cx-font-size);
732
782
  color: var(--cx-color-widgets);
733
783
  }
734
784
 
735
785
  .cX-Chat-Select-Score {
736
- font-size: 11px;
786
+ font-size: var(--cx-x-small-font-size);
737
787
  color: #ffffff;
738
788
  background: var(--cx-background-color);
739
789
  border: var(--cx-border);
740
- border-radius: 10px;
790
+ border-radius: var(--cx-border-radius);
741
791
  padding: 1px 7px;
742
792
  }
743
793
 
744
794
  .cX-Chat-Select-Desc {
745
- font-size: 13px;
795
+ font-size: var(--cx-medium-font-size);
746
796
  margin: 4px 0;
747
797
  color: var(--cx-color-ui-font);
748
798
  }
749
799
 
750
800
  .cX-Chat-Select-Clinical {
751
- font-size: 12px;
801
+ font-size: var(--cx-small-font-size);
752
802
  margin: 4px 0;
753
803
  color: var(--cx-color-gray);
754
804
  }
755
805
 
756
806
  .cX-Chat-Select-Factors {
757
- font-size: 12px;
807
+ font-size: var(--cx-small-font-size);
758
808
  margin: 4px 0 4px 16px;
759
809
  padding: 0;
760
810
  }
761
811
 
762
812
  .cX-Chat-Select-Next {
763
- font-size: 11px;
813
+ font-size: var(--cx-x-small-font-size);
764
814
  margin: 6px 0 4px;
765
815
  color: var(--cx-color-gray);
766
816
  }
@@ -768,7 +818,7 @@ svg.cX-Chat-Html-Panel-Close {
768
818
  .cX-Chat-LLM-Apply {
769
819
  margin-top: 8px;
770
820
  padding: 4px 12px;
771
- font-size: 12px;
821
+ font-size: var(--cx-small-font-size);
772
822
  font-family: var(--cx-font-family);
773
823
  background: var(--cx-color-widgets);
774
824
  color: var(--cx-background-widgets-color);
@@ -846,7 +896,7 @@ svg.cX-Chat-Html-Panel-Close {
846
896
  outline: none;
847
897
  border: none;
848
898
  font-family: monospace;
849
- font-size: 13px;
899
+ font-size: var(--cx-medium-font-size);
850
900
  box-sizing: border-box;
851
901
  resize: vertical;
852
902
  display: none;
@@ -861,7 +911,7 @@ svg.cX-Chat-Html-Panel-Close {
861
911
  outline: none;
862
912
  border: none;
863
913
  font-family: monospace;
864
- font-size: 13px;
914
+ font-size: var(--cx-medium-font-size);
865
915
  box-sizing: border-box;
866
916
  resize: vertical;
867
917
  display: none;
@@ -984,8 +1034,8 @@ textarea.cX-Chat-Code-Output {
984
1034
  /* Color Coding Classes */
985
1035
  .hint {
986
1036
  padding: 4px 10px;
987
- border-radius: 16px;
988
- font-size: 12px;
1037
+ border-radius: var(--cx-border-radius);
1038
+ font-size: var(--cx-small-font-size);
989
1039
  cursor: pointer;
990
1040
  font-weight: bold;
991
1041
  transition: all 0.2s;
@@ -1118,102 +1168,170 @@ textarea.cX-Chat-Code-Output {
1118
1168
  cursor: default;
1119
1169
  }
1120
1170
 
1171
+ /* @category: widget */
1121
1172
  /***************
1122
1173
  * Bin Data *
1123
1174
  ***************/
1124
1175
 
1125
- div.cX-bin,
1126
- div.cX-bin-name-container {
1127
- border: var(--cx-border);
1128
- border-radius: var(--cx-border-radius);
1176
+ /* Outer widget shell */
1177
+ div.cX-Bin {
1129
1178
  background-color: var(--cx-background-widgets-color);
1179
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1180
+ border-radius: var(--cx-border-radius);
1181
+ box-shadow: 0 4px 16px rgba(0,0,0,0.13);
1130
1182
  box-sizing: border-box;
1131
- }
1132
-
1133
- div.cX-bin {
1134
- cursor: move;
1135
1183
  color: var(--cx-font-color);
1136
- font: var(--cx-large-font);
1184
+ cursor: move;
1185
+ font-family: var(--cx-font-family);
1186
+ font-size: var(--cx-font-size);
1137
1187
  margin: 2px 3px;
1138
- padding: 2px 3px 5px 3px;
1188
+ overflow: hidden;
1139
1189
  position: absolute;
1140
1190
  white-space: nowrap;
1141
1191
  }
1142
1192
 
1143
- div.cX-bin-container {
1144
- background-color: var(--cx-background-widgets-color);
1145
- box-sizing: border-box;
1146
- clear: both;
1147
- text-align: left;
1193
+ /* Title row: Name label left, X button right */
1194
+ .cX-Bin-Title-Row {
1195
+ align-items: center;
1196
+ background-color: var(--cx-datatable-toolbar-background-color, var(--cx-background-hover-color));
1197
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0;
1198
+ cursor: move;
1148
1199
  display: flex;
1149
- flex-direction: column;
1200
+ justify-content: space-between;
1201
+ padding: 8px 4px 0px 10px;
1150
1202
  }
1151
1203
 
1152
- div.cX-bin-name-container {
1153
- box-sizing: border-box;
1154
- border: none;
1155
- max-height: 400px;
1156
- overflow-y: auto;
1157
- padding: 5px;
1204
+ .cX-Bin-Title {
1205
+ font-family: var(--cx-font-family);
1206
+ font-size: var(--cx-font-size);
1207
+ font-weight: 600;
1208
+ color: var(--cx-datatable-banner-text-color);
1158
1209
  }
1159
1210
 
1160
- input.cX-bin {
1211
+ /* Body: padding wrapper */
1212
+ .cX-Bin-Body {
1161
1213
  background-color: var(--cx-background-widgets-color);
1162
- border: var(--cx-border);
1163
- color: var(--cx-font-color);
1164
- cursor: default;
1165
- font: var(--cx-large-font);
1166
- line-height: 24px;
1167
- padding-left: 3px;
1168
- border-radius: var(--cx-border-radius);
1169
- margin: 3px;
1214
+ cursor: move;
1215
+ padding: 8px 10px 0 10px;
1170
1216
  }
1171
1217
 
1172
- input.cX-bin-button {
1173
- float: left;
1174
- background-color: var(--cx-background-hover-color);
1175
- border: var(--cx-border);
1218
+ /* Section: label + content block */
1219
+ .cX-Bin-Section {
1220
+ margin-bottom: 8px;
1221
+ }
1222
+
1223
+ .cX-Bin-Section-Label {
1224
+ color: var(--cx-datatable-banner-text-color);
1225
+ font-family: var(--cx-font-family);
1226
+ font-size: var(--cx-font-size);
1227
+ font-weight: 600;
1228
+ margin-bottom: 4px;
1229
+ }
1230
+
1231
+ /* Name text input */
1232
+ .cX-Bin-Input {
1233
+ background-color: var(--cx-background-widgets-color);
1234
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1176
1235
  border-radius: var(--cx-border-radius);
1236
+ box-sizing: border-box;
1177
1237
  color: var(--cx-font-color);
1178
- cursor: pointer;
1179
- font: var(--cx-large-font-bold);
1180
- line-height: 24px;
1181
- margin: 0px 10px 10px 10px;
1182
- padding: 3px;
1238
+ cursor: default;
1239
+ font-family: var(--cx-font-family);
1240
+ font-size: var(--cx-font-size);
1241
+ padding: 3px 6px;
1242
+ width: 100%;
1183
1243
  }
1184
1244
 
1185
- table.cX-bin-table {
1186
- border-collapse: collapse !important;
1187
- color: var(--cx-font-color);
1245
+ .cX-Bin-Input-Center {
1246
+ text-align: center;
1247
+ font-weight: bold;
1248
+ }
1249
+
1250
+ /* Bin table — sized purely by content, no wrapper needed */
1251
+ .cX-Bin-Table {
1252
+ border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
1253
+ border-collapse: separate;
1254
+ border-radius: var(--cx-border-radius);
1255
+ border-spacing: 0;
1256
+ color: var(--cx-datatable-cell-text-color);
1188
1257
  cursor: default;
1189
- font: var(--cx-large-font-bold);
1190
- line-height: 24px;
1258
+ display: block;
1259
+ font-family: var(--cx-font-family);
1260
+ font-size: var(--cx-font-size);
1261
+ max-height: 300px;
1262
+ overflow-y: auto;
1263
+ width: 100%;
1191
1264
  }
1192
1265
 
1193
- th.cX-bin {
1266
+ .cX-Bin-Th {
1267
+ background-color: var(--cx-datatable-header-background-color, var(--cx-background-hover-color));
1268
+ border-bottom: 2px var(--cx-border-style) var(--cx-datatable-border-color);
1269
+ color: var(--cx-datatable-header-text-color);
1270
+ font-family: var(--cx-font-family);
1271
+ font-size: var(--cx-font-size);
1272
+ font-weight: bold;
1273
+ padding: 4px 6px;
1194
1274
  text-align: center;
1195
- line-height: 24px;
1196
- color: var(--cx-font-color);
1197
- background-color: var(--cx-background-hover-color);
1198
- border: var(--cx-border);
1199
- font: var(--cx-large-font-bold);
1200
1275
  }
1201
1276
 
1202
- span.cX-bin {
1203
- font: var(--cx-large-font-bold);
1204
- color: var(--cx-font-color);
1205
- margin-left: 5px;
1277
+ .cX-Bin-Td {
1278
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-cell-border-color);
1279
+ padding: 3px 4px;
1280
+ vertical-align: middle;
1281
+ }
1282
+
1283
+ .cX-Bin-Td-Num {
1284
+ font-weight: bold;
1285
+ text-align: center;
1286
+ width: 32px;
1287
+ }
1288
+
1289
+ .cX-Bin-Row:last-child .cX-Bin-Td {
1290
+ border-bottom: none;
1291
+ }
1292
+
1293
+ .cX-Bin-Row:nth-child(even) .cX-Bin-Td {
1294
+ background-color: var(--cx-datatable-oddcell-background-color);
1295
+ }
1296
+
1297
+ .cX-Bin-Row:hover .cX-Bin-Td {
1298
+ background-color: var(--cx-datatable-row-hover-background-color);
1299
+ }
1300
+
1301
+ /* Footer: Apply + Done */
1302
+ .cX-Bin-Footer {
1303
+ border-top: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
1304
+ display: flex;
1305
+ gap: 8px;
1306
+ margin-top: 8px;
1307
+ padding: 8px 0;
1308
+ }
1309
+
1310
+ .cX-Bin-Button {
1311
+ background-color: var(--cx-datatable-accent-color, var(--cx-background-hover-color));
1312
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1313
+ border-radius: var(--cx-border-radius);
1314
+ color: var(--cx-background-widgets-color);
1315
+ cursor: pointer;
1316
+ flex: 1;
1317
+ font-family: var(--cx-font-family);
1318
+ font-size: var(--cx-font-size);
1319
+ font-weight: bold;
1320
+ padding: 5px 8px;
1321
+ }
1322
+
1323
+ .cX-Bin-Button:hover {
1324
+ opacity: 0.85;
1206
1325
  }
1207
1326
 
1208
- svg.cX-bin::selection,
1209
- span.cX-bin::selection {
1327
+ svg.cX-Bin::selection {
1210
1328
  background: var(--cx-color-transparent) !important;
1211
1329
  border: 0px none !important;
1212
1330
  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
1213
1331
  color: rgb(0, 0, 0);
1214
1332
  margin: 0px !important;
1215
1333
  }
1216
-
1334
+ /* @category: widget */
1217
1335
  /* BEGIN OF CUSTOMIZER CSS */
1218
1336
  /* https://cssgrid-generator.netlify.app/ */
1219
1337
 
@@ -1221,82 +1339,62 @@ span.cX-bin::selection {
1221
1339
  * CanvasXpress Customizer
1222
1340
  */
1223
1341
 
1224
- .customizerPanelLeft {
1342
+ .cX-Customizer-PanelLeft {
1225
1343
  display: grid;
1226
1344
  grid-template-columns: 1fr;
1227
- grid-template-rows: 1fr 8fr 1fr;
1345
+ grid-template-rows: auto;
1228
1346
  grid-column-gap: 0px;
1229
1347
  grid-row-gap: 0px;
1230
1348
  position: fixed;
1231
1349
  z-index: 10001;
1232
1350
  line-height: 100%;
1233
- background-color: rgb(255, 255, 255);
1351
+ background-color: var(--cx-customizer-background-color, var(--cx-background-hover-color));
1234
1352
  font-family: var(--cx-font-family);
1353
+ font-size: var(--cx-customizer-font-size, var(--cx-font-size)) !important;
1235
1354
  font-weight: normal;
1236
- color: var(--cx-font-color);
1237
- margin-left: 1px;
1238
- margin-top: 1px;
1239
- height: calc(100vh - 2px);
1240
- border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1241
- }
1242
-
1243
- .customizerLeftPanelTop,
1244
- .customizerLeftPanelBottom {
1245
- background: var(--cx-background-color);
1246
- border-top: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1247
- border-left: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1248
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1249
- border-right: none !important;
1355
+ color: var(--cx-customizer-text-color, var(--cx-font-color));
1356
+ margin-left: 0px;
1357
+ margin-top: 0px;
1358
+ max-height: 100vh;
1359
+ min-height: calc(100vh);
1250
1360
  }
1251
1361
 
1252
- .customizerLeftPanelTop {
1362
+ .cX-Customizer-LeftPanelItems {
1253
1363
  grid-area: 1 / 1 / 2 / 2;
1254
- border-top-left-radius: 10px;
1255
- }
1256
-
1257
- .customizerLeftPanelBottom {
1258
- grid-area: 3 / 1 / 4 / 2;
1259
- border-bottom-left-radius: 10px;
1260
- }
1261
-
1262
- .customizerLeftPanelMiddle {
1263
- grid-area: 2 / 1 / 3 / 2;
1264
- background: var(--cx-color-transparent);
1364
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1365
+ /* border-left: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important; */
1265
1366
  }
1266
1367
 
1267
- .customizerLeftPanelTop .customizerLeftItem:hover svg,
1268
- .customizerLeftPanelTop .customizerLeftItemActive svg,
1269
- .customizerLeftPanelBottom .customizerLeftItem:hover svg,
1270
- .customizerLeftPanelBottom .customizerLeftItemActive svg {
1271
- border: 1px solid rgb(255, 255, 255) !important;
1272
- background: var(--cx-color-transparent);
1368
+ .cX-Customizer-LeftPanelItems > div:first-child {
1369
+ background: var(--cx-color-widgets);
1273
1370
  }
1274
1371
 
1275
- .customizerRightPanel {
1276
- background: var(--cx-color-transparent);
1372
+ .cX-Customizer-RightPanel {
1373
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1374
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1375
+ border-top: none !important;
1376
+ border-bottom: none !important;
1377
+ border-radius: 0 6px 6px 0;
1277
1378
  position: absolute;
1278
1379
  z-index: 10000;
1279
1380
  line-height: 100%;
1280
1381
  top: 0px;
1281
1382
  font-family: var(--cx-font-family);
1383
+ font-size: var(--cx-customizer-font-size, var(--cx-font-size)) !important;
1282
1384
  font-weight: normal;
1283
- color: var(--cx-font-color);
1385
+ color: var(--cx-customizer-text-color, var(--cx-font-color));
1284
1386
  max-height: 100vh;
1285
1387
  min-height: calc(100vh);
1286
1388
  overflow-y: auto;
1287
1389
  }
1288
1390
 
1289
- .customizerRightPanel {
1290
- border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color)!important;
1291
- }
1292
-
1293
1391
  /*
1294
1392
  * CanvasXpress Customizer Left Items
1295
1393
  */
1296
1394
 
1297
- .customizerLeftItem,
1298
- .customizerLeftItemActive,
1299
- .customizerLeftItemNB {
1395
+ .cX-Customizer-LeftItem,
1396
+ .cX-Customizer-LeftItemActive,
1397
+ .cX-Customizer-LeftItemNB {
1300
1398
  display: grid;
1301
1399
  grid-template-columns: 1fr;
1302
1400
  grid-template-rows: 1fr 4fr;
@@ -1307,192 +1405,219 @@ span.cX-bin::selection {
1307
1405
  align-items: center;
1308
1406
  }
1309
1407
 
1310
- .customizerLeftItem,
1311
- .customizerLeftItemActive {
1312
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1408
+ .cX-Customizer-LeftItem,
1409
+ .cX-Customizer-LeftItemActive {
1410
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1411
+ border-bottom: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-banner-border-color)) !important;
1412
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1313
1413
  }
1314
1414
 
1315
- .customizerLeftItem:hover,
1316
- .customizerLeftItemActive {
1317
- background: var(--cx-background-hover-color);
1415
+ .cX-Customizer-LeftItem:hover,
1416
+ .cX-Customizer-LeftItemActive {
1417
+ background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
1318
1418
  }
1319
1419
 
1320
- .customizerLeftItem:hover svg,
1321
- .customizerLeftItemActive svg {
1322
- background: rgb(255, 255, 255);
1420
+ .cX-Customizer-LeftItem:hover svg,
1421
+ .cX-Customizer-LeftItemActive svg {
1422
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1323
1423
  }
1324
1424
 
1325
- /*
1326
- .customizerLeftPanelTop > *,
1327
- .customizerLeftPanelBottom > *,
1328
- */
1329
- .customizerLeftItem:hover > *,
1330
- .customizerLeftItemActive > *,
1331
- .customizerLeftItemNB > * {
1332
- pointer-events: none;
1425
+ /* First div in the left Panel */
1426
+ .cX-Customizer-LeftItem:first-child:hover svg,
1427
+ .cX-Customizer-LeftItemActive:first-child svg {
1428
+ background: transparent !important;
1429
+ border: 1px solid var(--cx-customizer-close-text-color, #fff) !important;
1430
+ border-radius: var(--cx-border-radius);
1333
1431
  }
1334
1432
 
1433
+ .cX-Customizer-LeftItemActive {
1434
+ background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
1435
+ color: var(--cx-customizer-text-color, var(--cx-font-color));
1436
+ border-bottom: 4px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1437
+ }
1335
1438
 
1336
- .customizerLeftItemNB:hover svg {
1337
- border-color: var(--cx-background-border-hover-color) !important;
1338
- background: var(--cx-background-hover-color) !important;
1439
+ .cX-Customizer-LeftItem:hover > *,
1440
+ .cX-Customizer-LeftItemActive > *,
1441
+ .cX-Customizer-LeftItemNB > * {
1442
+ pointer-events: none;
1339
1443
  }
1340
1444
 
1341
- .customizerLeftItemTop {
1445
+ .cX-Customizer-LeftItemNB:hover svg {
1446
+ border-color: var(--cx-customizer-border-color, var(--cx-background-border-hover-color)) !important;
1447
+ background: var(--cx-customizer-hover-color, var(--cx-background-hover-color)) !important;
1448
+ }
1449
+
1450
+ .cX-Customizer-LeftItemTop {
1342
1451
  grid-area: 1 / 1 / 2 / 2;
1343
1452
  margin: auto;
1344
1453
  margin-top: 5px;
1454
+ font-size: var(--cx-small-font-size);
1345
1455
  }
1346
1456
 
1347
- .customizerLeftItemBottom {
1457
+ .cX-Customizer-LeftItemBottom {
1348
1458
  grid-area: 2 / 1 / 3 / 2;
1349
1459
  margin: auto;
1350
1460
  }
1351
1461
 
1352
- .customizerLeftIcon,
1353
- .customizerLeftIconNB {
1462
+ .cX-Customizer-LeftIcon,
1463
+ .cX-Customizer-LeftIconNB {
1354
1464
  padding: 5px;
1355
1465
  border-radius: var(--cx-border-radius);
1356
1466
  }
1357
1467
 
1358
- .customizerLeftIconNB {
1468
+ .cX-Customizer-LeftIconNB {
1359
1469
  border-width: 1px;
1360
1470
  border-style: solid;
1361
1471
  border-color: var(--cx-color-transparent) !important;
1362
1472
  }
1363
1473
 
1364
- .customizerLeftIcon {
1365
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1474
+ .cX-Customizer-LeftIcon {
1475
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1366
1476
  }
1367
1477
 
1368
1478
  /*
1369
1479
  * CanvasXpress Customizer Right Items
1370
1480
  */
1371
1481
 
1372
- .customizerRightItem {
1482
+ .cX-Customizer-RightItem {
1373
1483
  display: grid;
1374
1484
  grid-template-columns: 1fr;
1375
1485
  grid-template-rows: 3fr 2fr;
1376
1486
  grid-column-gap: 0px;
1377
1487
  grid-row-gap: 0px;
1378
1488
  border-radius: var(--cx-border-radius);
1379
- width: 95%;
1489
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1490
+ width: 100%;
1491
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1492
+ margin: 4px;
1380
1493
  }
1381
1494
 
1382
- .customizerRightItem {
1383
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1495
+ .cX-Customizer-RightItem:hover {
1496
+ background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
1497
+ }
1498
+
1499
+ /* Add top border to non-header items that follow another item (for separation) */
1500
+ .cX-Customizer-RightItem + .cX-Customizer-RightItem {
1501
+ border-top: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1384
1502
  }
1385
1503
 
1386
- .customizerRightItem * {
1504
+ .cX-Customizer-RightItem * {
1387
1505
  pointer-events: none;
1388
1506
  }
1389
1507
 
1390
- .customizerRightItem :first-child input:first-child {
1508
+ .cX-Customizer-RightItem :first-child input:first-child {
1391
1509
  pointer-events: auto;
1392
1510
  }
1393
1511
 
1394
- .customizerRightItemTop {
1512
+ .cX-Customizer-RightItemTop {
1395
1513
  grid-area: 1 / 1 / 2 / 2;
1396
- padding-top: 5px;
1514
+ padding-top: 3px;
1397
1515
  margin: auto;
1398
1516
  }
1399
1517
 
1400
- .customizerRightItemBottom {
1518
+ .cX-Customizer-RightItemBottom {
1401
1519
  display: grid;
1402
1520
  grid-area: 2 / 1 / 3 / 2;
1403
1521
  margin: auto;
1522
+ padding: 0 6px 3px;
1523
+ font-size: var(--cx-small-font-size);
1524
+ color: var(--cx-customizer-text-color, var(--cx-font-color));
1404
1525
  }
1405
1526
 
1406
1527
  /*
1407
1528
  * CanvasXpress Customizer Right Items Comb
1408
1529
  */
1409
1530
 
1410
- .customizerRightItemCombo {
1531
+ .cX-Customizer-RightItemCombo {
1411
1532
  display: grid;
1412
- grid-template-columns: 1fr 5fr;
1533
+ grid-template-columns: 1fr 4.5fr;
1413
1534
  grid-template-rows: 2fr 1fr;
1414
- grid-column-gap: 0px;
1535
+ grid-column-gap: 2px;
1415
1536
  grid-row-gap: 0px;
1537
+ border-top: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color));
1538
+ min-height: 28px;
1539
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1540
+ width: 100%;
1541
+ box-sizing: border-box;
1416
1542
  }
1417
1543
 
1418
- .customizerRightItemCombo {
1419
- border-top: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1544
+ .cX-Customizer-ContainerComboGroup {
1545
+ box-sizing: border-box;
1546
+ border-bottom-left-radius: var(--cx-border-radius);
1547
+ border-bottom-right-radius: var(--cx-border-radius);
1548
+ overflow: hidden;
1420
1549
  }
1421
1550
 
1422
- .customizerRightItemComboNB {
1423
- display: grid;
1424
- grid-template-columns: 1fr 5fr;
1425
- grid-template-rows: 2fr 1fr;
1426
- grid-column-gap: 0px;
1427
- grid-row-gap: 0px;
1428
- border: none !important;
1551
+ .cX-Customizer-ContainerComboGroup > .cX-Customizer-RightItemCombo:last-child {
1552
+ border-bottom-left-radius: var(--cx-border-radius);
1553
+ border-bottom-right-radius: var(--cx-border-radius);
1429
1554
  }
1430
1555
 
1431
- .customizerRightItemComboLeft {
1432
- grid-area: 1 / 1 / 3 / 2;
1556
+
1557
+ .cX-Customizer-RightItemComboLeft {
1558
+ grid-area: 1 / 1 / -1 / 2;
1433
1559
  display: flex;
1434
1560
  align-items: center;
1435
1561
  justify-content: center;
1436
1562
  }
1437
1563
 
1438
- .customizerRightItemComboTopRight {
1564
+ .cX-Customizer-RightItemComboTopRight {
1439
1565
  grid-area: 1 / 2 / 2 / 3;
1440
1566
  display: flex;
1441
1567
  align-items: center;
1442
1568
  justify-content: center;
1443
1569
  }
1444
1570
 
1445
- .customizerRightItemComboBottomRight {
1571
+ .cX-Customizer-RightItemComboBottomRight {
1446
1572
  grid-area: 2 / 2 / 3 / 3;
1447
1573
  display: flex;
1448
1574
  align-items: center;
1449
- padding-left: 15px;
1575
+ padding-left: 6px;
1450
1576
  padding-bottom: 2px;
1577
+ font-size: var(--cx-small-font-size);
1451
1578
  }
1452
1579
 
1453
1580
  /*
1454
1581
  * CanvasXpress Customizer Right Item Header
1455
1582
  */
1456
1583
 
1457
- .customizerRightItemHeader,
1458
- .customizerRightItemHeaderNB {
1584
+ .cX-Customizer-RightItemHeader,
1585
+ .cX-Customizer-RightItemHeaderNB {
1459
1586
  display: grid;
1460
1587
  grid-template-columns: 1fr;
1461
- grid-template-rows: 2fr 1fr;
1588
+ grid-template-rows: auto;
1462
1589
  grid-column-gap: 0px;
1463
1590
  grid-row-gap: 0px;
1464
- color: var(--cx-font-color);
1465
- padding-left: 5px;
1466
- }
1467
-
1468
- .customizerRightItemHeader,
1469
- .customizerRightItemHeaderNB {
1470
1591
  background: var(--cx-background-hover-color);
1592
+ color: var(--cx-font-color);
1593
+ padding: 2px 3px;
1594
+ font-size: var(--cx-medium-font-size);
1471
1595
  }
1472
1596
 
1473
- .customizerRightItemHeader {
1474
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1597
+ .cX-Customizer-RightItemHeader {
1598
+ border-bottom: 1px solid var(--cx-datatable-border-color) !important;
1475
1599
  }
1476
1600
 
1477
- .customizerRightItemHeaderNB {
1601
+ .cX-Customizer-RightItemHeaderNB {
1478
1602
  border-bottom: none !important;
1479
1603
  }
1480
1604
 
1481
- .customizerRightItemHeaderTop {
1482
- grid-area: 1 / 1 / 2 / 2;
1605
+ .cX-Customizer-RightItemHeaderTop {
1483
1606
  display: flex;
1484
1607
  align-items: center;
1608
+ min-height: 18px;
1485
1609
  }
1486
1610
 
1487
- .customizerRightItemHeaderBottom {
1488
- grid-area: 2 / 1 / 3 / 2;
1611
+ .cX-Customizer-RightItemHeaderBottom {
1489
1612
  display: flex;
1490
1613
  align-items: center;
1491
- padding-left: 10px;
1614
+ padding-left: 5px;
1492
1615
  overflow: auto;
1616
+ font-size: var(--cx-x-small-font-size);
1617
+ color: var(--cx-font-color);
1493
1618
  }
1494
1619
 
1495
- .customizerRightItemHeaderMain {
1620
+ .cX-Customizer-RightItemHeaderMain {
1496
1621
  grid-area: 1 / 1 / 3 / 2;
1497
1622
  display: flex;
1498
1623
  align-items: center;
@@ -1502,31 +1627,16 @@ span.cX-bin::selection {
1502
1627
  * CanvasXpress Customizer Right Item Sub Header
1503
1628
  */
1504
1629
 
1505
- .customizerRightItemSubHeader {
1506
- display: grid;
1507
- grid-template-columns: 1fr;
1508
- grid-template-rows: 1fr;
1509
- grid-column-gap: 0px;
1510
- grid-row-gap: 0px;
1511
- }
1512
-
1513
- .customizerRightItemSubHeader {
1514
- background: var(--cx-background-hover-color);
1515
- }
1516
-
1517
- .customizerRightItemSubHeaderRow {
1630
+ .cX-Customizer-RightItemSubHeaderRow {
1518
1631
  grid-area: 1 / 1 / 2 / 2;
1519
1632
  display: flex;
1520
1633
  align-items: center;
1521
1634
  }
1522
1635
 
1523
- .customizerRightItemSubHeaderRaw {
1636
+ .cX-Customizer-RightItemSubHeaderRaw {
1524
1637
  display: flex;
1525
1638
  align-items: center;
1526
1639
  border-radius: var(--cx-border-radius);
1527
- }
1528
-
1529
- .customizerRightItemSubHeaderRaw {
1530
1640
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1531
1641
  background-color: var(--cx-background-hover-color);
1532
1642
  }
@@ -1535,233 +1645,259 @@ span.cX-bin::selection {
1535
1645
  * CanvasXpress Customizer Right Item Launcher
1536
1646
  */
1537
1647
 
1538
- .customizerRightItemLauncher {
1648
+ .cX-Customizer-RightItemLauncher {
1539
1649
  display: grid;
1540
1650
  grid-template-columns: 1fr 6fr;
1541
1651
  grid-template-rows: 1fr;
1542
1652
  grid-column-gap: 0px;
1543
1653
  grid-row-gap: 0px;
1654
+ width: 100%;
1655
+ box-sizing: border-box;
1656
+ border: none !important;
1657
+ box-shadow: none !important;
1658
+ min-height: 34px;
1659
+ background: var(--cx-background-widgets-color);
1660
+ overflow: hidden;
1544
1661
  }
1545
1662
 
1546
- .customizerRightItemLauncher {
1547
- border-top: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1548
- }
1549
-
1550
- .customizerRightItemLauncher *,
1551
- .customizerRightItemLauncherNB * {
1663
+ .cX-Customizer-RightItemLauncher *,
1664
+ .cX-Customizer-RightItemLauncherNB * {
1552
1665
  pointer-events: none;
1553
1666
  }
1554
1667
 
1555
- .customizerRightItemLauncherNB > :last-child input:first-child {
1668
+ .cX-Customizer-RightItemLauncherNB > :last-child input:first-child {
1556
1669
  pointer-events: auto;
1557
1670
  }
1558
1671
 
1559
- .customizerRightItemLauncherNB {
1672
+ .cX-Customizer-RightItemLauncherNB {
1560
1673
  display: grid;
1561
1674
  grid-template-columns: 1fr 6fr;
1562
1675
  grid-template-rows: 1fr;
1563
1676
  grid-column-gap: 0px;
1564
1677
  grid-row-gap: 0px;
1678
+ width: 100%;
1679
+ box-sizing: border-box;
1565
1680
  border: none !important;
1681
+ box-shadow: none !important;
1682
+ overflow: hidden;
1566
1683
  }
1567
1684
 
1568
- .customizerRightItemLauncher:hover,
1569
- .customizerRightItemLauncherNB:hover {
1570
- background-color: var(--cx-background-hover-color);
1571
- }
1572
-
1573
- .customizerRightItemLauncherLeft {
1574
- grid-area: 1 / 1 / 2 / 2;
1575
- display: flex;
1576
- align-items: center;
1577
- justify-content: center;
1685
+ /* Launcher groups use the wrapper border; rows only get internal separators */
1686
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncher + .cX-Customizer-RightItemLauncher,
1687
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB + .cX-Customizer-RightItemLauncher,
1688
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncher + .cX-Customizer-RightItemLauncherNB,
1689
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB + .cX-Customizer-RightItemLauncherNB {
1690
+ border-top: 1px solid var(--cx-datatable-banner-border-color) !important;
1578
1691
  }
1579
1692
 
1580
- .customizerRightItemLauncherLeft {
1581
- background-color: var(--cx-background-hover-color);
1693
+ /* Override inline launcher width so rows do not cover the wrapper right border */
1694
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncher,
1695
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB {
1696
+ width: calc(100% - 2px) !important;
1697
+ margin-left: 1px;
1698
+ margin-right: 1px;
1582
1699
  }
1583
1700
 
1584
- .customizerRightItemLauncherRight {
1585
- grid-area: 1 / 2 / 2 / 3;
1586
- display: flex;
1587
- align-items: center;
1588
- padding-left: 5px;
1701
+ /* Preserve bottom corner rounding on the last launcher row in each section */
1702
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncher:last-child,
1703
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB:last-child {
1704
+ border-bottom-left-radius: 6px;
1705
+ border-bottom-right-radius: 6px;
1589
1706
  }
1590
1707
 
1591
- /*
1592
- * CanvasXpress Customizer Right Item Input
1593
- */
1594
-
1595
- .customizerRightItemInput {
1596
- display: grid;
1597
- grid-template-columns: 1fr 6fr;
1598
- grid-template-rows: repeat(2, 1fr);
1599
- grid-column-gap: 0px;
1600
- grid-row-gap: 0px;
1708
+ .cX-Customizer-RightItemLauncher:hover,
1709
+ .cX-Customizer-RightItemLauncherNB:hover {
1710
+ background-color: var(--cx-customizer-hover-color);
1601
1711
  }
1602
1712
 
1603
- .customizerRightItemInputTopLeft {
1713
+ .cX-Customizer-RightItemLauncherLeft {
1604
1714
  grid-area: 1 / 1 / 2 / 2;
1605
1715
  display: flex;
1606
1716
  align-items: center;
1717
+ justify-content: center;
1718
+ background-color: var(--cx-customizer-hover-color);
1607
1719
  }
1608
1720
 
1609
- .customizerRightItemInputTopRight {
1721
+ .cX-Customizer-RightItemLauncherRight {
1610
1722
  grid-area: 1 / 2 / 2 / 3;
1611
1723
  display: flex;
1612
1724
  align-items: center;
1613
- }
1614
-
1615
- .customizerRightItemInputBottom {
1616
- grid-area: 2 / 1 / 3 / 3;
1617
- display: flex;
1618
- align-items: center;
1725
+ padding-left: 8px;
1726
+ min-width: 0;
1727
+ max-width: 100%;
1728
+ overflow: hidden;
1619
1729
  }
1620
1730
 
1621
1731
  /*
1622
1732
  * CanvasXpress Customizer Right Item Cols
1623
1733
  */
1624
1734
 
1625
- .customizerRightItemFullCol {
1735
+ .cX-Customizer-RightItemFullCol {
1626
1736
  display: grid;
1627
1737
  grid-template-columns: 1fr;
1628
1738
  grid-template-rows: 1fr;
1629
1739
  grid-column-gap: 0px;
1630
1740
  grid-row-gap: 0px;
1631
- margin: 5px;
1741
+ margin: 3px;
1632
1742
  height: fit-content;
1633
1743
  }
1634
1744
 
1635
- .customizerRightItemHalfCol {
1745
+ .cX-Customizer-RightItemHalfCol {
1636
1746
  display: grid;
1637
1747
  grid-template-columns: repeat(2, 1fr);
1638
1748
  grid-template-rows: 1fr;
1639
1749
  grid-column-gap: 0px;
1640
1750
  grid-row-gap: 0px;
1641
- margin: 5px;
1751
+ margin: 3px;
1642
1752
  height: fit-content;
1643
1753
  }
1644
1754
 
1645
- .customizerRightItemThirdCol {
1755
+ .cX-Customizer-RightItemThirdCol {
1646
1756
  display: grid;
1647
1757
  grid-template-columns: repeat(3, 1fr);
1648
1758
  grid-template-rows: 1fr;
1649
1759
  grid-column-gap: 0px;
1650
1760
  grid-row-gap: 0px;
1651
- margin: 5px;
1761
+ margin: 3px;
1652
1762
  height: fit-content;
1653
1763
  }
1654
1764
 
1655
- .customizerRightItemFourthCol {
1765
+ .cX-Customizer-RightItemFourthCol {
1656
1766
  display: grid;
1657
1767
  grid-template-columns: repeat(4, 1fr);
1658
1768
  grid-template-rows: 1fr;
1659
1769
  grid-column-gap: 0px;
1660
1770
  grid-row-gap: 0px;
1661
- margin: 5px;
1771
+ margin: 3px;
1662
1772
  height: fit-content;
1663
1773
  }
1664
1774
 
1665
- .customizerRightItemFifthCol {
1775
+ .cX-Customizer-RightItemFifthCol {
1666
1776
  display: grid;
1667
1777
  grid-template-columns: repeat(5, 1fr);
1668
1778
  grid-template-rows: 1fr;
1669
1779
  grid-column-gap: 0px;
1670
1780
  grid-row-gap: 0px;
1671
- margin: 5px;
1781
+ margin: 3px;
1672
1782
  height: fit-content;
1673
1783
  }
1674
1784
 
1675
- .customizerRightItemSixthCol {
1785
+ .cX-Customizer-RightItemSixthCol {
1676
1786
  display: grid;
1677
1787
  grid-template-columns: repeat(6, 1fr);
1678
1788
  grid-template-rows: 1fr;
1679
1789
  grid-column-gap: 0px;
1680
1790
  grid-row-gap: 0px;
1681
- margin: 5px;
1791
+ margin: 3px;
1682
1792
  height: fit-content;
1683
1793
  }
1684
1794
 
1685
- .customizerRightItemCol1 {
1686
- grid-area: 1 / 1 / 2 / 2;
1795
+ .cX-Customizer-RightItemCol1,
1796
+ .cX-Customizer-RightItemCol2,
1797
+ .cX-Customizer-RightItemCol3,
1798
+ .cX-Customizer-RightItemCol4,
1799
+ .cX-Customizer-RightItemCol5,
1800
+ .cX-Customizer-RightItemCol6 {
1687
1801
  display: flex;
1688
1802
  align-items: center;
1689
1803
  justify-content: center;
1804
+ flex: 1 1 0%;
1805
+ min-width: 0;
1806
+ }
1807
+
1808
+ .cX-Customizer-RightItemCol1 {
1809
+ grid-area: 1 / 1 / 2 / 2;
1690
1810
  }
1691
1811
 
1692
- .customizerRightItemCol2 {
1812
+ .cX-Customizer-RightItemCol2 {
1693
1813
  grid-area: 1 / 2 / 2 / 3;
1694
- display: flex;
1695
- align-items: center;
1696
- justify-content: center;
1697
1814
  }
1698
1815
 
1699
- .customizerRightItemCol3 {
1816
+ .cX-Customizer-RightItemCol3 {
1700
1817
  grid-area: 1 / 3 / 2 / 4;
1701
- display: flex;
1702
- align-items: center;
1703
- justify-content: center;
1704
1818
  }
1705
1819
 
1706
- .customizerRightItemCol4 {
1820
+ .cX-Customizer-RightItemCol4 {
1707
1821
  grid-area: 1 / 4 / 2 / 5;
1708
- display: flex;
1709
- align-items: center;
1710
- justify-content: center;
1711
1822
  }
1712
1823
 
1713
- .customizerRightItemCol5 {
1824
+ .cX-Customizer-RightItemCol5 {
1714
1825
  grid-area: 1 / 5 / 2 / 6;
1715
- display: flex;
1716
- align-items: center;
1717
- justify-content: center;
1718
1826
  }
1719
1827
 
1720
- .customizerRightItemCol6 {
1828
+ .cX-Customizer-RightItemCol6 {
1721
1829
  grid-area: 1 / 6 / 2 / 7;
1830
+ }
1831
+
1832
+ .cX-Customizer-RightItemGrid .cX-Customizer-RightItemColor {
1722
1833
  display: flex;
1723
1834
  align-items: center;
1724
1835
  justify-content: center;
1836
+ width: 100%;
1837
+ height: 100%;
1838
+ }
1839
+
1840
+ .cX-Customizer-RightItemGrid .cX-Customizer-RightItemColor > .cX-Customizer-RightItemCol1 {
1841
+ width: 100%;
1842
+ }
1843
+
1844
+ .cX-Customizer-RightItemGrid .cX-Customizer-RightItemColor input[type="color"] {
1845
+ width: 26px !important;
1846
+ height: 26px !important;
1847
+ }
1848
+
1849
+ .cX-Customizer-ContainerRaw.cX-Customizer-RightItemText .cX-Customizer-RightItemColor input[type="color"] {
1850
+ width: 26px !important;
1851
+ height: 26px !important;
1725
1852
  }
1726
1853
 
1727
- .customizerRightItemColMid {
1854
+ .cX-Customizer-RightItemColMid {
1728
1855
  grid-area: 1 / 3 / 2 / 5;
1729
1856
  display: flex;
1730
1857
  align-items: center;
1731
1858
  justify-content: center;
1732
1859
  border-radius: var(--cx-border-radius);
1860
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1733
1861
  }
1734
1862
 
1735
- .customizerRightItemColMid {
1736
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1863
+ .cX-Customizer-RightItemSelect>select:hover,
1864
+ .cX-Customizer-RightItemTextArea > textarea {
1865
+ overflow: hidden;
1866
+ resize: none;
1867
+ box-sizing: border-box;
1868
+ display: flex;
1869
+ align-items: center;
1870
+ vertical-align: middle;
1871
+ padding-top: 0;
1872
+ padding-bottom: 0;
1873
+ line-height: normal;
1737
1874
  }
1738
1875
 
1739
- .customizerRightItemSelect>select:hover,
1740
- .customizerRightItemTextArea>svg:hover,
1741
- .customizerRightItemTextArea>textarea:hover,
1742
- .customizerContainerRaw>svg:hover,
1743
- .customizerRightItemCol1>svg:hover,
1744
- .customizerRightItemCol2>svg:hover,
1745
- .customizerRightItemCol3>svg:hover,
1746
- .customizerRightItemCol4>svg:hover,
1747
- .customizerRightItemCol5>svg:hover,
1748
- .customizerRightItemCol6>svg:hover,
1749
- .customizerRightItem:hover {
1750
- background-color: var(--cx-background-hover-color);
1876
+ .cX-Customizer-RightItemTextArea>svg:hover,
1877
+ .cX-Customizer-RightItemTextArea>textarea:hover,
1878
+ .cX-Customizer-ContainerRaw>svg:hover,
1879
+ .cX-Customizer-RightItemCol1>svg:hover,
1880
+ .cX-Customizer-RightItemCol2>svg:hover,
1881
+ .cX-Customizer-RightItemCol3>svg:hover,
1882
+ .cX-Customizer-RightItemCol4>svg:hover,
1883
+ .cX-Customizer-RightItemCol5>svg:hover,
1884
+ .cX-Customizer-RightItemCol6>svg:hover,
1885
+ .cX-Customizer-RightItem:hover {
1886
+ background-color: var(--cx-customizer-hover-color);
1751
1887
  }
1752
1888
 
1753
1889
  /*
1754
1890
  * Other Customizer classes
1755
1891
  */
1756
1892
 
1757
- .customizerContainer {
1893
+ .cX-Customizer-Container {
1758
1894
  height: fit-content;
1759
1895
  border-radius: var(--cx-border-radius);
1760
- margin: 10px;
1896
+ margin: 6px;
1761
1897
  float: left;
1762
1898
  }
1763
1899
 
1764
- .customizerWrangling {
1900
+ .cX-Customizer-Wrangling {
1765
1901
  height: 204px;
1766
1902
  margin: 0px 0px 10px 10px;
1767
1903
  border-radius: var(--cx-border-radius);
@@ -1769,15 +1905,15 @@ span.cX-bin::selection {
1769
1905
  overflow-x: hidden;
1770
1906
  }
1771
1907
 
1772
- .customizerNumeric,
1773
- .customizerString,
1774
- .customizerUnique,
1775
- .customizerWrangling,
1776
- .customizerContainer {
1908
+ .cX-Customizer-Numeric,
1909
+ .cX-Customizer-String,
1910
+ .cX-Customizer-Unique,
1911
+ .cX-Customizer-Wrangling,
1912
+ .cX-Customizer-Container {
1777
1913
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1778
1914
  }
1779
1915
 
1780
- .customizerWrangling:hover {
1916
+ .cX-Customizer-Wrangling:hover {
1781
1917
  border: 1px dashed var(--cx-color-red) !important;
1782
1918
  }
1783
1919
 
@@ -1786,19 +1922,19 @@ span.cX-bin::selection {
1786
1922
  * containers for moving in the wrangling *
1787
1923
  ***************************************************/
1788
1924
 
1789
- .customizerNumeric,
1790
- .customizerString,
1791
- .customizerUnique,
1792
- .customizerListNumeric,
1793
- .customizerListString,
1794
- .customizerListUnique {
1925
+ .cX-Customizer-Numeric,
1926
+ .cX-Customizer-String,
1927
+ .cX-Customizer-Unique,
1928
+ .cX-Customizer-ListNumeric,
1929
+ .cX-Customizer-ListString,
1930
+ .cX-Customizer-ListUnique {
1795
1931
  margin-top: 3px !important;
1796
1932
  display: block;
1797
1933
  }
1798
1934
 
1799
1935
  /***************************************************/
1800
1936
 
1801
- .customizerContainerRaw {
1937
+ .cX-Customizer-ContainerRaw {
1802
1938
  border: none !important;
1803
1939
  float: left;
1804
1940
  display: flex;
@@ -1806,7 +1942,20 @@ span.cX-bin::selection {
1806
1942
  justify-content: center;
1807
1943
  }
1808
1944
 
1809
- .customizerMask {
1945
+ /* Keep text+icon group labels compact so long labels don't make items look uneven */
1946
+ .cX-Customizer-ContainerRaw.cX-Customizer-RightItemTextImagesGroup .cX-Customizer-RightItemBottom {
1947
+ font-size: var(--cx-x-small-font-size);
1948
+ line-height: 1.05;
1949
+ }
1950
+
1951
+ .cX-Customizer-ContainerRaw.cX-Customizer-RightItemTextImagesGroup .cX-Customizer-RightItemBottom > span:first-child {
1952
+ white-space: nowrap;
1953
+ overflow: hidden;
1954
+ text-overflow: ellipsis;
1955
+ max-width: 100%;
1956
+ }
1957
+
1958
+ .cX-Customizer-Mask {
1810
1959
  background: var(--cx-color-transparent) !important;
1811
1960
  border: 0px none !important;
1812
1961
  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
@@ -1818,9 +1967,9 @@ span.cX-bin::selection {
1818
1967
  height: 20px;
1819
1968
  }
1820
1969
 
1821
- .customizerNumeric,
1822
- .customizerString,
1823
- .customizerUnique {
1970
+ .cX-Customizer-Numeric,
1971
+ .cX-Customizer-String,
1972
+ .cX-Customizer-Unique {
1824
1973
  border-radius: var(--cx-border-radius);
1825
1974
  cursor: move;
1826
1975
  margin: 3px;
@@ -1833,26 +1982,25 @@ span.cX-bin::selection {
1833
1982
  position: relative;
1834
1983
  }
1835
1984
 
1836
- .customizerNumeric {
1985
+ .cX-Customizer-Numeric {
1837
1986
  color: var(--cx-font-color);
1838
1987
  background-color: var(--cx-color-transparent);
1839
1988
  }
1840
1989
 
1841
- .customizerString {
1990
+ .cX-Customizer-String {
1842
1991
  color: var(--cx-color-green);
1843
1992
  background-color: var(--cx-color-transparent);
1844
1993
  }
1845
1994
 
1846
- .customizerUnique {
1995
+ .cX-Customizer-Unique {
1847
1996
  color: var(--cx-color-blue);
1848
1997
  background-color: var(--cx-color-transparent);
1849
1998
  }
1850
- .customizerListNumeric,
1851
- .customizerListString,
1852
- .customizerListUnique {
1999
+ .cX-Customizer-ListNumeric,
2000
+ .cX-Customizer-ListString,
2001
+ .cX-Customizer-ListUnique {
1853
2002
  border: none;
1854
2003
  cursor: move;
1855
- color: var(--cx-font-color);
1856
2004
  margin: 0;
1857
2005
  padding: 0 0 0 3px;
1858
2006
  width: 350px;
@@ -1861,63 +2009,53 @@ span.cX-bin::selection {
1861
2009
  text-align: start;
1862
2010
  overflow: hidden;
1863
2011
  position: relative;
2012
+ background-color: var(--cx-color-transparent);
1864
2013
  }
1865
2014
 
1866
- .customizerListNumeric {
2015
+ .cX-Customizer-ListNumeric {
1867
2016
  color: var(--cx-font-color);
1868
2017
  }
1869
2018
 
1870
- .customizerListString {
2019
+ .cX-Customizer-ListString {
1871
2020
  color: var(--cx-color-green);
1872
2021
  }
1873
2022
 
1874
- .customizerListUnique {
2023
+ .cX-Customizer-ListUnique {
1875
2024
  color: var(--cx-color-blue);
1876
2025
  }
1877
2026
 
1878
- .customizerListNumeric,
1879
- .customizerListString,
1880
- .customizerListUnique {
1881
- background-color: var(--cx-color-transparent);
1882
- }
1883
-
1884
- .customizerListNumeric:hover,
1885
- .customizerListString:hover,
1886
- .customizerListUnique:hover {
1887
- background: var(--cx-background-hover-color);
2027
+ .cX-Customizer-ListNumeric:hover,
2028
+ .cX-Customizer-ListString:hover,
2029
+ .cX-Customizer-ListUnique:hover {
2030
+ background: var(--cx-customizer-hover-color);
1888
2031
  }
1889
2032
 
1890
- .customizerListNumeric:before,
1891
- .customizerListString:before,
1892
- .customizerListUnique:before {
2033
+ .cX-Customizer-ListNumeric:before,
2034
+ .cX-Customizer-ListString:before,
2035
+ .cX-Customizer-ListUnique:before {
1893
2036
  font: normal 10px courier;
1894
- }
1895
-
1896
- .customizerListNumeric:before,
1897
- .customizerListString:before,
1898
- .customizerListUnique:before {
1899
2037
  color: var(--cx-background-color);
1900
2038
  }
1901
2039
 
1902
- .customizerListNumeric:before {
2040
+ .cX-Customizer-ListNumeric:before {
1903
2041
  content: "\00a0#\00a0\00a0";
1904
2042
  }
1905
2043
 
1906
- .customizerListString:before {
2044
+ .cX-Customizer-ListString:before {
1907
2045
  content: "Abc\00a0";
1908
2046
  }
1909
2047
 
1910
- .customizerListUnique:before {
2048
+ .cX-Customizer-ListUnique:before {
1911
2049
  content: "Unq\00a0";
1912
2050
  }
1913
2051
 
1914
- .customizerMask::selection,
1915
- .customizerNumeric::selection,
1916
- .customizerString::selection,
1917
- .customizerUnique::selection,
1918
- .customizerListNumeric::selection,
1919
- .customizerListString::selection,
1920
- .customizerListUnique::selection {
2052
+ .cX-Customizer-Mask::selection,
2053
+ .cX-Customizer-Numeric::selection,
2054
+ .cX-Customizer-String::selection,
2055
+ .cX-Customizer-Unique::selection,
2056
+ .cX-Customizer-ListNumeric::selection,
2057
+ .cX-Customizer-ListString::selection,
2058
+ .cX-Customizer-ListUnique::selection {
1921
2059
  background: var(--cx-color-transparent);
1922
2060
  color: var(--cx-color-black);
1923
2061
  padding: 0;
@@ -1927,47 +2065,88 @@ span.cX-bin::selection {
1927
2065
  * Search Customizer
1928
2066
  */
1929
2067
 
1930
- input.customizerSearch {
1931
- margin: 9px;
1932
- background-color: var( --cx-background-widgets-color);
2068
+ select.cX-Customizer-Search,
2069
+ input.cX-Customizer-Search {
2070
+ margin: 6px;
2071
+ background-color: var(--cx-background-widgets-color);
1933
2072
  color: var(--cx-font-color);
1934
2073
  cursor: default;
1935
2074
  font: inherit;
1936
- height: 40px;
1937
- border-radius: 4px;
2075
+ height: 32px;
2076
+ border-radius: var(--cx-border-radius);
2077
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1938
2078
  float: left;
1939
2079
  clear: left;
1940
2080
  }
1941
2081
 
1942
- select.customizerSearch,
1943
- input.customizerSearch {
1944
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
2082
+ select.cX-Customizer-Search {
2083
+ padding-left: 3px;
2084
+ }
2085
+
2086
+ select.cX-Customizer-Search[size]:not([size="1"]) {
2087
+ height: auto;
1945
2088
  }
1946
2089
 
1947
- input.customizerSearch[type="color"] {
2090
+ input.cX-Customizer-Search[type="color"] {
1948
2091
  padding: 0;
1949
2092
  overflow: hidden;
1950
2093
  }
1951
2094
 
1952
- input.customizerSearch:not([type="color"]) {
1953
- padding: 5px;
2095
+ input.cX-Customizer-Search:not([type="color"]) {
2096
+ padding: 4px 6px;
1954
2097
  }
1955
2098
 
1956
- select.customizerSearch {
1957
- margin: 9px;
1958
- background-color: var( --cx-background-widgets-color);
1959
- color: var(--cx-font-color);
1960
- cursor: default;
1961
- font: inherit;
1962
- padding-left: 3px;
1963
- border-radius: 4px;
1964
- float: left;
1965
- clear: left;
2099
+ input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button {
2100
+ -webkit-appearance: auto;
2101
+ height: 16px;
2102
+ width: 16px;
2103
+ cursor: pointer;
2104
+ }
2105
+
2106
+ /* Compact, sidebar-like right-widget overrides */
2107
+ .cX-Customizer-RightPanel .cX-Customizer-RightItem,
2108
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeader,
2109
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeaderNB,
2110
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemSubHeaderRaw,
2111
+ .cX-Customizer-RightPanel .cX-Customizer-Container,
2112
+ .cX-Customizer-RightPanel .cX-Customizer-Numeric,
2113
+ .cX-Customizer-RightPanel .cX-Customizer-String,
2114
+ .cX-Customizer-RightPanel .cX-Customizer-Unique,
2115
+ .cX-Customizer-RightPanel .cX-Customizer-Wrangling {
2116
+ border-color: var(--cx-datatable-banner-border-color) !important;
2117
+ border-radius: var(--cx-border-radius) !important;
2118
+ }
2119
+
2120
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeader,
2121
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeaderS {
2122
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0 !important;
1966
2123
  }
1967
2124
 
1968
- span.customizerSearch {
2125
+ /* Headers that control sibling content keep square bottom corners */
2126
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeader.cX-Customizer-RightItemHeaderLink,
2127
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeaderS.cX-Customizer-RightItemHeaderLink {
2128
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0 !important;
2129
+ }
2130
+
2131
+ /* Apply the same sibling-header shape everywhere these header-link widgets appear */
2132
+ .cX-Customizer-RightItemHeader.cX-Customizer-RightItemHeaderLink,
2133
+ .cX-Customizer-RightItemHeaderS.cX-Customizer-RightItemHeaderLink {
2134
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0 !important;
2135
+ border-bottom-left-radius: 0 !important;
2136
+ border-bottom-right-radius: 0 !important;
2137
+ }
2138
+
2139
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemTextArea > textarea,
2140
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemSelect > select,
2141
+ .cX-Customizer-RightPanel input.cX-Customizer-Search,
2142
+ .cX-Customizer-RightPanel select.cX-Customizer-Search {
2143
+ font-size: var(--cx-small-font-size) !important;
2144
+ }
2145
+
2146
+ span.cX-Customizer-Search {
1969
2147
  color: var(--cx-font-color);
1970
2148
  font: inherit;
2149
+ font-size: var(--cx-small-font-size);
1971
2150
  line-height: 20px;
1972
2151
  list-style: none;
1973
2152
  position: relative;
@@ -1976,11 +2155,12 @@ span.customizerSearch {
1976
2155
  clear: left;
1977
2156
  }
1978
2157
 
1979
- span.customizerSearchSelect,
1980
- span.customizerSearchDescription,
1981
- span.customizerSearchCategory,
1982
- span.customizerSearchCurrent {
2158
+ span.cX-Customizer-SearchSelect,
2159
+ span.cX-Customizer-SearchDescription,
2160
+ span.cX-Customizer-SearchCategory,
2161
+ span.cX-Customizer-SearchCurrent {
1983
2162
  font: inherit;
2163
+ font-size: var(--cx-customizer-font-size, var(--cx-font-size));
1984
2164
  line-height: 28px;
1985
2165
  list-style: none;
1986
2166
  position: relative;
@@ -1991,61 +2171,61 @@ span.customizerSearchCurrent {
1991
2171
  left: 15px;
1992
2172
  }
1993
2173
 
1994
- span.customizerSearchSelect {
2174
+ span.cX-Customizer-SearchSelect {
1995
2175
  color: var(--cx-font-color);
1996
2176
  }
1997
2177
 
1998
- span.customizerSearchDescription,
1999
- span.customizerSearchCategory {
2178
+ span.cX-Customizer-SearchDescription,
2179
+ span.cX-Customizer-SearchCategory {
2000
2180
  overflow: hidden;
2001
2181
  text-overflow: ellipsis;
2002
2182
  white-space: nowrap;
2003
2183
  }
2004
2184
 
2005
- span.customizerSearchDescription,
2006
- span.customizerSearchCategory,
2007
- span.customizerSearchCurrent {
2185
+ span.cX-Customizer-SearchDescription,
2186
+ span.cX-Customizer-SearchCategory,
2187
+ span.cX-Customizer-SearchCurrent {
2008
2188
  color: var(--cx-background-color);
2009
2189
  }
2010
2190
 
2011
- span.customizerSearchSelect:before {
2191
+ span.cX-Customizer-SearchSelect:before {
2012
2192
  color: var(--cx-font-color);
2013
2193
  font-weight: bold;
2014
2194
  content: "Select property (";
2015
2195
  }
2016
2196
 
2017
- span.customizerSearchSelect:after {
2197
+ span.cX-Customizer-SearchSelect:after {
2018
2198
  color: var(--cx-font-color);
2019
2199
  font-weight: bold;
2020
2200
  content: ")";
2021
2201
  }
2022
2202
 
2023
- span.customizerSearchDescription:before {
2203
+ span.cX-Customizer-SearchDescription:before {
2024
2204
  color: var(--cx-font-color);
2025
2205
  font-weight: bold;
2026
2206
  content: "Description [ ";
2027
2207
  }
2028
2208
 
2029
- span.customizerSearchCategory:before {
2209
+ span.cX-Customizer-SearchCategory:before {
2030
2210
  color: var(--cx-font-color);
2031
2211
  font-weight: bold;
2032
2212
  content: "Category [ ";
2033
2213
  }
2034
2214
 
2035
- span.customizerSearchDescription:after,
2036
- span.customizerSearchCategory:after {
2215
+ span.cX-Customizer-SearchDescription:after,
2216
+ span.cX-Customizer-SearchCategory:after {
2037
2217
  color: var(--cx-font-color);
2038
2218
  font-weight: bold;
2039
2219
  content: " ]";
2040
2220
  }
2041
2221
 
2042
- span.customizerSearchCurrent:before {
2222
+ span.cX-Customizer-SearchCurrent:before {
2043
2223
  color: var(--cx-font-color);
2044
2224
  font-weight: bold;
2045
2225
  content: "Current Value [ ";
2046
2226
  }
2047
2227
 
2048
- span.customizerSearchCurrent:after {
2228
+ span.cX-Customizer-SearchCurrent:after {
2049
2229
  color: var(--cx-font-color);
2050
2230
  font-weight: bold;
2051
2231
  content: " ]";
@@ -2055,7 +2235,7 @@ span.customizerSearchCurrent:after {
2055
2235
  * Password
2056
2236
  */
2057
2237
 
2058
- div.CanvasXpressPassword {
2238
+ .cX-Password-Dialog {
2059
2239
  border-radius: var(--cx-border-radius);
2060
2240
  background-color: var(--cx-background-widgets-color);
2061
2241
  box-sizing: border-box;
@@ -2072,8 +2252,7 @@ div.CanvasXpressPassword {
2072
2252
  text-align: left;
2073
2253
  }
2074
2254
 
2075
- img.CanvasXpressPassword,
2076
- svg.CanvasXpressPassword {
2255
+ .cX-Password-Icon {
2077
2256
  background: var(--cx-color-transparent) !important;
2078
2257
  border: 0px none !important;
2079
2258
  box-shadow: 0 0 0px rgb(0 0 0 / 0%) !important;
@@ -2081,11 +2260,12 @@ svg.CanvasXpressPassword {
2081
2260
  cursor: default;
2082
2261
  float: right;
2083
2262
  margin: 5px 0px 0px 0px !important;
2084
- cursor: default;
2085
2263
  }
2086
2264
 
2087
- div.CanvasXpressPasswordContainer {
2265
+ .cX-Password-Container {
2088
2266
  box-sizing: border-box;
2267
+ background-color: var(--cx-background-widgets-color);
2268
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
2089
2269
  border-radius: 0px 0px 5px 5px;
2090
2270
  color: var(--cx-font-color);
2091
2271
  display: block;
@@ -2096,18 +2276,20 @@ div.CanvasXpressPasswordContainer {
2096
2276
  margin-top: 5px;
2097
2277
  }
2098
2278
 
2099
- span.CanvasXpressPassword {
2279
+ .cX-Password-Label {
2100
2280
  margin-bottom: 5px;
2101
2281
  margin-left: 5px;
2102
2282
  float: left;
2103
2283
  }
2104
2284
 
2105
- input.CanvasXpressPassword {
2285
+ .cX-Password-Input {
2106
2286
  float: left;
2107
2287
  margin-bottom: 5px;
2108
2288
  padding: 5px;
2109
2289
  border-radius: var(--cx-border-radius);
2110
- border: 1px solid rgb(170, 170, 170);
2290
+ border: 1px solid var(--cx-datatable-border-color);
2291
+ background-color: var(--cx-background-widgets-color);
2292
+ color: var(--cx-font-color);
2111
2293
  width: 170px;
2112
2294
  }
2113
2295
 
@@ -2131,6 +2313,7 @@ div.CanvasXpressDragLayout {
2131
2313
  position: absolute;
2132
2314
  }
2133
2315
 
2316
+ /* @category: widget */
2134
2317
  /***********
2135
2318
  * Tooltip *
2136
2319
  ***********/
@@ -2139,8 +2322,8 @@ div.CanvasXpressDragLayout {
2139
2322
  position: absolute;
2140
2323
  }
2141
2324
 
2142
- div.CanvasXpressTooltip,
2143
- div.CanvasXpressTooltipInfo {
2325
+ div.cX-Tooltip-Container,
2326
+ .cX-Tooltip-Info {
2144
2327
  border: var(--cx-border);
2145
2328
  border-radius: var(--cx-border-radius);
2146
2329
  background-color: var(--cx-color-white);
@@ -2155,27 +2338,40 @@ div.CanvasXpressTooltipInfo {
2155
2338
  text-align: left;
2156
2339
  }
2157
2340
 
2158
- div.CanvasXpressTooltipInfo {
2341
+ .cX-Tooltip-Info {
2159
2342
  max-height: 800px;
2160
2343
  max-width: 350px;
2161
2344
  z-index: 1;
2162
2345
  }
2163
2346
 
2164
- div.CanvasXpressTooltip {
2347
+ div.cX-Tooltip-Container {
2165
2348
  box-sizing: border-box;
2166
2349
  }
2167
2350
 
2351
+ .cX-Tooltip-Toolbar {
2352
+ align-items: center;
2353
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
2354
+ cursor: move;
2355
+ display: flex;
2356
+ flex-direction: row;
2357
+ justify-content: flex-end;
2358
+ gap: 4px;
2359
+ margin: -5px -6px 4px -6px;
2360
+ padding: 4px 6px;
2361
+ }
2362
+
2363
+ /* @category: widget */
2168
2364
  /*****************************************************/
2169
2365
  /* Generators */
2170
2366
  /* A collection of Tooltips/Speech Bubbles */
2171
2367
  /* https://css-generators.com/tooltip-speech-bubble/ */
2172
2368
  /*****************************************************/
2173
2369
 
2174
- div.CanvasXpressTooltipInfoNone,
2175
- div.CanvasXpressTooltipInfoBottom,
2176
- div.CanvasXpressTooltipInfoTop,
2177
- div.CanvasXpressTooltipInfoLeft,
2178
- div.CanvasXpressTooltipInfoRight {
2370
+ .cX-Tooltip-Info-None,
2371
+ .cX-Tooltip-Info-Bottom,
2372
+ .cX-Tooltip-Info-Top,
2373
+ .cX-Tooltip-Info-Left,
2374
+ .cX-Tooltip-Info-Right {
2179
2375
  color: var(--cx-font-color);
2180
2376
  font: var(--cx-font);
2181
2377
  max-height: 800px;
@@ -2186,7 +2382,7 @@ div.CanvasXpressTooltipInfoRight {
2186
2382
  z-index: 1;
2187
2383
  }
2188
2384
 
2189
- div.CanvasXpressTooltipInfoBottom {
2385
+ .cX-Tooltip-Info-Bottom {
2190
2386
  border-radius: var(--cx-callout-radius) var(--cx-callout-radius)
2191
2387
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
2192
2388
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg)) /
@@ -2207,7 +2403,7 @@ div.CanvasXpressTooltipInfoBottom {
2207
2403
  var(--cx-callout-size) 0;
2208
2404
  }
2209
2405
 
2210
- div.CanvasXpressTooltipInfoBottom:before {
2406
+ .cX-Tooltip-Info-Bottom:before {
2211
2407
  content: "";
2212
2408
  position: absolute;
2213
2409
  z-index: -1;
@@ -2250,7 +2446,7 @@ div.CanvasXpressTooltipInfoBottom:before {
2250
2446
  ) / 0 0 var(--cx-callout-size) 0;
2251
2447
  }
2252
2448
 
2253
- div.CanvasXpressTooltipInfoTop {
2449
+ .cX-Tooltip-Info-Top {
2254
2450
  border-radius: min(
2255
2451
  var(--cx-callout-radius),
2256
2452
  50% - var(--cx-callout-size) * tan(45deg)
@@ -2273,7 +2469,7 @@ div.CanvasXpressTooltipInfoTop {
2273
2469
  0 0 0;
2274
2470
  }
2275
2471
 
2276
- div.CanvasXpressTooltipInfoTop:before {
2472
+ .cX-Tooltip-Info-Top:before {
2277
2473
  content: "";
2278
2474
  position: absolute;
2279
2475
  z-index: -1;
@@ -2311,7 +2507,7 @@ div.CanvasXpressTooltipInfoTop:before {
2311
2507
  }
2312
2508
 
2313
2509
 
2314
- div.CanvasXpressTooltipInfoLeft {
2510
+ .cX-Tooltip-Info-Left {
2315
2511
  border-radius: var(--cx-callout-radius) /
2316
2512
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
2317
2513
  var(--cx-callout-radius) var(--cx-callout-radius)
@@ -2332,7 +2528,7 @@ div.CanvasXpressTooltipInfoLeft {
2332
2528
  var(--cx-callout-size);
2333
2529
  }
2334
2530
 
2335
- div.CanvasXpressTooltipInfoLeft::before {
2531
+ .cX-Tooltip-Info-Left::before {
2336
2532
  content: "";
2337
2533
  position: absolute;
2338
2534
  inset: 0;
@@ -2373,7 +2569,7 @@ div.CanvasXpressTooltipInfoLeft::before {
2373
2569
  0/0 0 0 var(--cx-callout-size);
2374
2570
  }
2375
2571
 
2376
- div.CanvasXpressTooltipInfoRight {
2572
+ .cX-Tooltip-Info-Right {
2377
2573
  border-radius: var(--cx-callout-radius) / var(--cx-callout-radius)
2378
2574
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
2379
2575
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
@@ -2394,7 +2590,7 @@ div.CanvasXpressTooltipInfoRight {
2394
2590
  0 var(--cx-callout-size) 0 0;
2395
2591
  }
2396
2592
 
2397
- div.CanvasXpressTooltipInfoRight::before {
2593
+ .cX-Tooltip-Info-Right::before {
2398
2594
  content: "";
2399
2595
  position: absolute;
2400
2596
  inset: 0;
@@ -2480,6 +2676,7 @@ span.CanvasXpressMousePosition {
2480
2676
  z-index: 1;
2481
2677
  }
2482
2678
 
2679
+ /* @category: widget */
2483
2680
  /**********
2484
2681
  * Motion *
2485
2682
  **********/
@@ -2498,12 +2695,12 @@ span.CanvasXpressMousePosition {
2498
2695
  }
2499
2696
 
2500
2697
  .cX-Workflow-Wrapper.cX-Workflow-Mode-Repro .cX-Workflow-Widget {
2501
- background: rgba(255, 255, 255, 0.95);
2502
- border: 1px solid var(--cx-color-widgets);
2503
- border-radius: 12px;
2504
- padding: 15px;
2505
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2506
- backdrop-filter: blur(8px);
2698
+ background: var(--cx-workflow-background-color);
2699
+ border: 1px var(--cx-border-style) var(--cx-workflow-border-color);
2700
+ border-radius: var(--cx-border-radius);
2701
+ padding: 12px;
2702
+ box-shadow: none;
2703
+ backdrop-filter: none;
2507
2704
  box-sizing: border-box;
2508
2705
  order: -1;
2509
2706
  }
@@ -2523,7 +2720,10 @@ span.CanvasXpressMousePosition {
2523
2720
 
2524
2721
  .cX-Workflow-Wrapper.cX-Workflow-Mode-Filter .cX-Workflow-Widget {
2525
2722
  position: relative;
2526
- border: none !important;
2723
+ border: 1px var(--cx-border-style) var(--cx-workflow-border-color) !important;
2724
+ border-radius: var(--cx-border-radius);
2725
+ background: var(--cx-workflow-background-color);
2726
+ padding: 12px;
2527
2727
  width: 90% !important;
2528
2728
  left: 5% !important;
2529
2729
  order: 1;
@@ -2543,39 +2743,38 @@ span.CanvasXpressMousePosition {
2543
2743
  pointer-events: none;
2544
2744
  }
2545
2745
 
2546
- /* Specific transitions based on layout context */
2547
- .cX-Workflow-Wrapper .cX-Workflow-Mode-Repro {
2548
- transition: transform var(--cx-transition-speed) ease, opacity var(--cx-transition-speed) ease;
2549
- transform: translateX(0);
2550
- }
2551
- .cX-Workflow-Wrapper.cX-Workflow-Hidden .cX-Workflow-Mode-Repro {
2552
- transform: translateX(-20px);
2553
- }
2554
-
2555
2746
  .cX-Workflow-Widget {
2556
2747
  font-family: var(--cx-font-family);
2748
+ color: var(--cx-workflow-text-color);
2749
+ background: var(--cx-workflow-background-color);
2557
2750
  }
2558
2751
 
2559
2752
  .cX-Workflow-Header {
2560
2753
  display: flex;
2561
2754
  justify-content: space-between;
2562
2755
  align-items: center;
2563
- margin-bottom: 12px;
2756
+ margin-bottom: 10px;
2757
+ padding-bottom: 8px;
2758
+ color: var(--cx-workflow-text-color);
2564
2759
  }
2565
2760
 
2566
2761
  .cX-Workflow-Close-Btn {
2567
2762
  cursor: pointer;
2763
+ border-radius: var(--cx-border-radius);
2764
+ background: var(--cx-workflow-button-background-color);
2568
2765
  }
2569
2766
 
2570
2767
  .cX-Workflow-Controls {
2571
2768
  display: flex;
2572
2769
  align-items: center;
2573
- gap: 18px;
2770
+ gap: 12px;
2574
2771
  padding-bottom: 5px;
2575
2772
  }
2576
2773
 
2577
2774
  .cX-Workflow-Play-Btn {
2578
2775
  cursor: pointer;
2776
+ border-radius: var(--cx-border-radius);
2777
+ background: var(--cx-workflow-button-background-color);
2579
2778
  }
2580
2779
 
2581
2780
  .cX-Workflow-Slider-Area {
@@ -2586,7 +2785,7 @@ span.CanvasXpressMousePosition {
2586
2785
  .cX-Workflow-Slider-Track {
2587
2786
  position: relative;
2588
2787
  height: 6px;
2589
- background: var(--cx-color-extra-light-gray);
2788
+ background: var(--cx-workflow-slider-track-color);
2590
2789
  border-radius: 10px;
2591
2790
  cursor: pointer;
2592
2791
  }
@@ -2594,7 +2793,7 @@ span.CanvasXpressMousePosition {
2594
2793
  .cX-Workflow-Slider-Fill {
2595
2794
  position: absolute;
2596
2795
  height: 100%;
2597
- background: var(--cx-color-widgets);
2796
+ background: var(--cx-workflow-slider-fill-color);
2598
2797
  border-radius: 10px;
2599
2798
  width: 0%;
2600
2799
  }
@@ -2604,16 +2803,17 @@ span.CanvasXpressMousePosition {
2604
2803
  top: 50%;
2605
2804
  width: 22px;
2606
2805
  height: 22px;
2607
- background: var(--cx-color-widgets);
2608
- border: 2px solid white;
2806
+ background: var(--cx-workflow-slider-thumb-color);
2807
+ border: 2px solid var(--cx-workflow-slider-thumb-border-color);
2609
2808
  border-radius: 50%;
2610
2809
  transform: translate(-50%, -50%);
2611
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
2810
+ box-shadow: none;
2612
2811
  z-index: 10;
2613
2812
  }
2614
2813
 
2615
2814
  .cX-Workflow-Timeline-Container {
2616
- border-top: 1px solid #e2e8f0;
2815
+ border: 1px var(--cx-border-style) var(--cx-workflow-timeline-border-color);
2816
+ border-radius: var(--cx-border-radius);
2617
2817
  margin-top: 10px;
2618
2818
  padding-top: 10px;
2619
2819
  max-height: 200px;
@@ -2624,33 +2824,38 @@ span.CanvasXpressMousePosition {
2624
2824
  display: flex;
2625
2825
  align-items: center;
2626
2826
  gap: 8px;
2627
- padding: 6px 0;
2827
+ padding: 6px 8px;
2628
2828
  cursor: pointer;
2829
+ border-radius: var(--cx-border-radius);
2830
+ }
2831
+
2832
+ .cX-Workflow-Timeline-Item:hover {
2833
+ background: var(--cx-workflow-hover-color);
2629
2834
  }
2630
2835
 
2631
2836
  .cX-Workflow-List-Label {
2632
2837
  position: absolute;
2633
2838
  transform: translateX(-50%);
2634
- font-size: var(--cx-small-font-size);
2635
- color: var(--cx-color-dark-gray);
2839
+ font-size: var(--cx-workflow-list-label-font-size);
2840
+ color: var(--cx-workflow-list-text-color);
2636
2841
  white-space: nowrap;
2637
2842
  }
2638
2843
 
2639
2844
  .cX-Workflow-List-Tick {
2640
2845
  position: absolute;
2641
2846
  transform: translateX(-50%);
2642
- font-size: 8px;
2643
- color: var(--cx-color-light-gray);
2847
+ font-size: var(--cx-workflow-list-tick-font-size);
2848
+ color: var(--cx-workflow-list-tick-color);
2644
2849
  }
2645
2850
 
2646
- /* Specific active state for the Workflow Timeline List */
2647
- .cX-Workflow-Timeline-Item.active {
2648
- background-color: var(--cx-background-hover-color) !important;
2649
- color: var(--cx-color-widgets) !important;
2650
- border-radius: var(--cx-border-radius) !important;
2651
- font-weight: bold;
2851
+ .cX-Workflow-Timeline-Item.cX-Workflow-Active {
2852
+ background-color: var(--cx-workflow-active-color);
2853
+ color: var(--cx-workflow-text-color);
2854
+ border-radius: var(--cx-border-radius);
2855
+ font-weight: bold;
2652
2856
  }
2653
2857
 
2858
+ /* @category: widget */
2654
2859
  /*************
2655
2860
  * Toolbar *
2656
2861
  *************/
@@ -2719,8 +2924,7 @@ span.CanvasXpressMousePosition {
2719
2924
  position: absolute;
2720
2925
  border: var(--cx-border);
2721
2926
  padding: 1px;
2722
- background-color: var(--cx-background-widgets-color);
2723
- background: #ffffff;
2927
+ background: var(--cx-background-widgets-color);
2724
2928
  display: grid;
2725
2929
  opacity: 0;
2726
2930
  z-index: 1001;
@@ -2730,22 +2934,22 @@ span.CanvasXpressMousePosition {
2730
2934
  }
2731
2935
 
2732
2936
  .cX-Toolbar-Edge-Top {
2733
- border-radius: 0 0 8px 8px;
2937
+ border-radius: 0 0 var(--cx-border-radius) var(--cx-border-radius);
2734
2938
  border-top: none;
2735
2939
  }
2736
2940
 
2737
2941
  .cX-Toolbar-Edge-Bottom {
2738
- border-radius: 8px 8px 0 0;
2942
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0;
2739
2943
  border-bottom: none;
2740
2944
  }
2741
2945
 
2742
2946
  .cX-Toolbar-Edge-Left {
2743
- border-radius: 0 8px 8px 0;
2947
+ border-radius: 0 var(--cx-border-radius) var(--cx-border-radius) 0;
2744
2948
  border-left: none;
2745
2949
  }
2746
2950
 
2747
2951
  .cX-Toolbar-Edge-Right {
2748
- border-radius: 8px 0 0 8px;
2952
+ border-radius: var(--cx-border-radius) 0 0 var(--cx-border-radius);
2749
2953
  border-right: none;
2750
2954
  }
2751
2955
 
@@ -2805,43 +3009,110 @@ span.CanvasXpressMousePosition {
2805
3009
  * Tooltip *
2806
3010
  *************/
2807
3011
 
2808
- div.cX-Alt-Tooltip {
2809
- background-color: var(--cx-background-widgets-color);
2810
- border: var(--cx-border);
2811
- border-radius: var(--cx-border-radius);
2812
- box-shadow: 0 0 5px var(--cx-color-transparent);
2813
- color: var(--cx-font-color);
2814
- font: var(--cx-font);
2815
- font-size: var(--cx-font-size);
2816
- line-height: 100%;
2817
- padding: 5px;
2818
- position: absolute;
3012
+ .cX-Alt-Tooltip {
3013
+ position: fixed;
2819
3014
  display: none;
2820
- text-wrap: nowrap;
2821
- z-index: 1000000;
2822
- }
2823
-
2824
- /*********
2825
- * Marker *
2826
- **********/
2827
-
2828
- div.cX-Marker {
2829
- box-sizing: border-box;
2830
- border: var(--cx-border);
3015
+ z-index: 999999;
3016
+ background-color: rgba(0, 0, 0, 0.8);
3017
+ color: white;
3018
+ padding: 5px 10px;
2831
3019
  border-radius: var(--cx-border-radius);
2832
- background-color: var(--cx-background-widgets-color);
2833
- cursor: move;
2834
- font: var(--cx-font);
2835
- width: 308px;
2836
- left: 0px;
2837
- position: absolute;
2838
- top: 0px;
2839
- padding: 2px;
3020
+ font-size: var(--cx-small-font-size);
3021
+ white-space: nowrap;
3022
+ pointer-events: none;
2840
3023
  }
2841
3024
 
2842
- div.cX-Marker-Table-Container {
2843
- position: relative;
2844
- width: 286px;
3025
+ /*
3026
+ * Parent Node
3027
+ */
3028
+
3029
+ .CanvasXpress-ParentNode {
3030
+ display: flex;
3031
+ flex-direction: column;
3032
+ max-width: -webkit-fill-available;
3033
+ width: fit-content;
3034
+ -moz-transform: none;
3035
+ -webkit-transform: none;
3036
+ -o-transform: none;
3037
+ -ms-transform: none;
3038
+ transform: none;
3039
+ }
3040
+
3041
+ /*
3042
+ * CanvasXpress
3043
+ */
3044
+
3045
+ canvas.CanvasXpress {
3046
+ width: 100%;
3047
+ height: 100%;
3048
+ display: block;
3049
+ flex-grow: 1;
3050
+ -moz-user-select: none;
3051
+ -khtml-user-select: none;
3052
+ -webkit-user-select: none;
3053
+ -o-user-select: none;
3054
+ user-select: none;
3055
+ -ms-user-select: none;
3056
+ }
3057
+
3058
+ canvas.CanvasXpress:hover {
3059
+ border: 1px solid rgba(35, 82, 124, 0.2);
3060
+ border-radius: var(--cx-border-radius);
3061
+ margin: -1px;
3062
+ }
3063
+
3064
+ canvas.CanvasXpressUpload {
3065
+ border: 1px solid rgba(35, 82, 124, 0.2);
3066
+ border-radius: var(--cx-border-radius);
3067
+ margin: -1px;
3068
+ background-image: url('data:image/png;base64,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');
3069
+ background-size: contain;
3070
+ background-repeat: no-repeat;
3071
+ }
3072
+
3073
+ canvas.CanvasXpress::selection {
3074
+ background: rgba(0, 0, 0, 0);
3075
+ color: rgb(0, 0, 0);
3076
+ }
3077
+
3078
+ /* Hide Efect */
3079
+
3080
+ .appear {
3081
+ transition: all var(--cx-transition-speed) linear;
3082
+ opacity: 1;
3083
+ }
3084
+
3085
+ .dissapear {
3086
+ display: none;
3087
+ }
3088
+
3089
+ .dissapearHidden {
3090
+ transition: all var(--cx-transition-speed) linear;
3091
+ opacity: 0;
3092
+ }
3093
+
3094
+ /* @category: widget */
3095
+ /*********
3096
+ * Marker *
3097
+ **********/
3098
+
3099
+ div.cX-Marker {
3100
+ box-sizing: border-box;
3101
+ border: var(--cx-border);
3102
+ border-radius: var(--cx-border-radius);
3103
+ background-color: var(--cx-background-widgets-color);
3104
+ cursor: move;
3105
+ font: var(--cx-font);
3106
+ width: 308px;
3107
+ left: 0px;
3108
+ position: absolute;
3109
+ top: 0px;
3110
+ padding: 2px;
3111
+ }
3112
+
3113
+ .cX-Marker-Table-Container {
3114
+ position: relative;
3115
+ width: 286px;
2845
3116
  left: 8px;
2846
3117
  top: 8px;
2847
3118
  overflow: hidden;
@@ -2882,7 +3153,7 @@ select.cX-Marker {
2882
3153
  border: var(--cx-border);
2883
3154
  }
2884
3155
 
2885
- div.cX-Marker-Button-Container {
3156
+ .cX-Marker-Button-Container {
2886
3157
  float: left;
2887
3158
  position: relative;
2888
3159
  top: 8px;
@@ -2894,8 +3165,8 @@ div.cX-Marker-Button-Container {
2894
3165
  gap: 8px;
2895
3166
  }
2896
3167
 
2897
- input.cX-Marker-Remove,
2898
- input.cX-Marker-Add-Update {
3168
+ .cX-Marker-Remove,
3169
+ .cX-Marker-Add-Update {
2899
3170
  float: left;
2900
3171
  border-radius: var(--cx-border-radius);
2901
3172
  border: var(--cx-border);
@@ -2906,14 +3177,15 @@ input.cX-Marker-Add-Update {
2906
3177
  cursor: pointer;
2907
3178
  }
2908
3179
 
2909
- input.cX-Marker-Remove {
3180
+ .cX-Marker-Remove {
2910
3181
  left: 0px;
2911
3182
  }
2912
3183
 
2913
- input.cX-Marker-Add-Update {
3184
+ .cX-Marker-Add-Update {
2914
3185
  left: 12px;
2915
3186
  }
2916
3187
 
3188
+ /* @category: widget */
2917
3189
  /******************
2918
3190
  * Data Table DOE *
2919
3191
  ******************/
@@ -2964,55 +3236,61 @@ tr.cX-DataTable-DOE {
2964
3236
  /* Data Table / Tooltips / Markers */
2965
3237
  /***********************************/
2966
3238
 
2967
- div.cX-DataTable-Container {
3239
+ .cX-DataTable-Container {
2968
3240
  max-height: 400px;
2969
3241
  max-width: 600px;
2970
- position: inherit;
3242
+ overflow: auto;
3243
+ overscroll-behavior: contain;
3244
+ pointer-events: auto;
3245
+ position: relative;
2971
3246
  }
2972
3247
 
2973
- div.cX-DataTable-Container > table > tbody > tr > th {
3248
+ .cX-DataTable-Container > table > tbody > tr > th {
2974
3249
  background-color: rgb(255, 255, 255);
2975
3250
  margin: 1px;
2976
3251
  }
2977
3252
 
2978
- div.cX-DataTable-Container > table > tbody > tr > td {
3253
+ .cX-DataTable-Container > table > tbody > tr > td {
2979
3254
  margin: 1px;
2980
3255
  }
2981
3256
 
2982
- div.cX-DataTable-Container > table > tbody > tr > td > div {
3257
+ .cX-DataTable-Container > table > tbody > tr > td > div {
2983
3258
  padding-right: 10px;
2984
3259
  }
2985
3260
 
2986
- div.cX-DataTable {
3261
+ .cX-DataTable {
2987
3262
  box-sizing: border-box;
2988
3263
  position: relative;
2989
3264
  }
2990
3265
 
2991
- div.cX-DataTable-Root,
2992
- div.cX-DataTable-Vertical-Scrollbar,
2993
- div.cX-DataTable-Horizontal-Scrollbar,
2994
- div.cX-DataTable-Header-Viewport {
3266
+ .cX-DataTable-Root,
3267
+ .cX-DataTable-Vertical-Scrollbar,
3268
+ .cX-DataTable-Horizontal-Scrollbar,
3269
+ .cX-DataTable-Header-Viewport {
2995
3270
  box-sizing: border-box;
2996
3271
  position: absolute;
2997
3272
  }
2998
3273
 
2999
- div.cX-DataTable-Vertical-Scrollbar,
3000
- div.cX-DataTable-Horizontal-Scrollbar {
3274
+ .cX-DataTable-Vertical-Scrollbar,
3275
+ .cX-DataTable-Horizontal-Scrollbar {
3001
3276
  background-color: var(--cx-background-widgets-color);
3002
3277
  }
3003
3278
 
3004
- div.cX-DataTable {
3005
- background-color: var(--cx-datatable-background-color);
3006
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3279
+ .cX-DataTable {
3280
+ background-color: transparent;
3281
+ border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
3007
3282
  border-radius: var(--cx-border-radius);
3008
3283
  clear: both;
3284
+ color: var(--cx-font-color);
3285
+ font-family: var(--cx-font-family);
3286
+ font-size: var(--cx-font-size);
3009
3287
  overflow: hidden;
3010
3288
  z-index: 10001;
3011
3289
  }
3012
3290
 
3013
3291
  /* Data Table Banner */
3014
3292
 
3015
- div.cX-DataTable-Banner {
3293
+ .cX-DataTable-Banner {
3016
3294
  background-color: var(--cx-datatable-banner-background-color);
3017
3295
  border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
3018
3296
  color: var(--cx-datatable-banner-text-color);
@@ -3020,7 +3298,7 @@ div.cX-DataTable-Banner {
3020
3298
  align-items: center;
3021
3299
  }
3022
3300
 
3023
- div.cX-DataTable-Search {
3301
+ .cX-DataTable-Search {
3024
3302
  margin-left: auto;
3025
3303
  }
3026
3304
 
@@ -3032,53 +3310,65 @@ input.cX-DataTable-Search {
3032
3310
  margin-right: 10px;
3033
3311
  padding: 10px;
3034
3312
  outline: none;
3035
- font-size: 14px;
3313
+ font-size: var(--cx-small-font-size);
3036
3314
  display: flex;
3037
3315
  }
3038
3316
 
3039
- input[type="search"]::-webkit-search-cancel-button.cX-DataTable-Search {
3317
+ input[type="search"].cX-DataTable-Search::-webkit-search-cancel-button {
3040
3318
  -webkit-appearance: auto;
3041
- appearance: none;
3042
- color: var(--cx-datatable-banner-text-color);
3043
3319
  height: 16px;
3044
3320
  width: 16px;
3321
+ cursor: pointer;
3045
3322
  }
3046
3323
 
3047
3324
  /* Data Table Toolbar */
3048
3325
 
3049
- div.cX-DataTable-Toolbar {
3326
+ .cX-DataTable-Toolbar {
3050
3327
  background-color: var(--cx-datatable-toolbar-background-color);
3051
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-toolbar-border-color);
3328
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
3052
3329
  display: flex;
3053
3330
  align-items: center;
3054
3331
  justify-content: flex-end;
3332
+ gap: 4px;
3333
+ padding-right: 4px;
3334
+ font-size: var(--cx-datatable-toolbar-font-size);
3335
+ position: relative;
3336
+ top: 0px;
3337
+ left: 0px;
3055
3338
  -moz-transition: height var(--cx-transition-speed) ease;
3056
3339
  -webkit-transition: height var(--cx-transition-speed) ease;
3057
3340
  -o-transition: height var(--cx-transition-speed) ease;
3058
3341
  transition: height var(--cx-transition-speed) ease;
3059
3342
  }
3060
3343
 
3061
- div.cX-DataTable-Toolbar-Zero {
3062
- background-color: var(--cx-datatable-toolbar-background-color);
3063
- border-bottom: none;
3344
+ .cX-DataTable-Toolbar-Zero {
3345
+ background-color: transparent;
3346
+ border: none;
3347
+ font-size: var(--cx-datatable-toolbar-font-size);
3064
3348
  -moz-transition: height var(--cx-transition-speed) ease;
3065
3349
  -webkit-transition: height var(--cx-transition-speed) ease;
3066
3350
  -o-transition: height var(--cx-transition-speed) ease;
3067
3351
  transition: height var(--cx-transition-speed) ease;
3068
3352
  }
3069
3353
 
3354
+ .cX-DataTable-Toolbar,
3355
+ .cX-DataTable-Toolbar-Zero,
3356
+ .cX-DataTable-Banner,
3357
+ .cX-DataTable-Status,
3358
+ .cX-DataTable-Container {
3359
+ font-family: var(--cx-font-family);
3360
+ color: var(--cx-font-color);
3361
+ }
3362
+
3070
3363
  svg.cX-DataTable-Toolbar-Image {
3071
3364
  background: var(--cx-color-transparent) !important;
3072
3365
  border-radius: var(--cx-border-radius);
3366
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3073
3367
  padding: 2px;
3074
3368
  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
3075
3369
  cursor: pointer;
3076
3370
  float: right;
3077
- margin: 0px 8px 0px 0px !important;
3078
- }
3079
-
3080
- svg.cX-DataTable-Toolbar-Image {
3081
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3371
+ margin: 0px 4px 0px 0px !important;
3082
3372
  }
3083
3373
 
3084
3374
  svg.cX-DataTable-Toolbar-Image-Logo {
@@ -3087,7 +3377,7 @@ svg.cX-DataTable-Toolbar-Image-Logo {
3087
3377
  margin: 5px 0px 0px 10px !important;
3088
3378
  }
3089
3379
 
3090
- div.cX-DataTable-Toolbar-Spacer {
3380
+ .cX-DataTable-Toolbar-Spacer {
3091
3381
  float: right;
3092
3382
  margin-top: 5px;
3093
3383
  margin-left: 8px;
@@ -3097,11 +3387,11 @@ div.cX-DataTable-Toolbar-Spacer {
3097
3387
 
3098
3388
  /* Data Table Body */
3099
3389
 
3100
- div.cX-DataTable-Root {
3390
+ .cX-DataTable-Root {
3101
3391
  border: none;
3102
3392
  }
3103
3393
 
3104
- div.cX-DataTable-Header-Viewport {
3394
+ .cX-DataTable-Header-Viewport {
3105
3395
  border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3106
3396
  border-left: none;
3107
3397
  border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color);
@@ -3110,7 +3400,7 @@ div.cX-DataTable-Header-Viewport {
3110
3400
  z-index: 1;
3111
3401
  }
3112
3402
 
3113
- div.cX-DataTable-Vertical-Scrollbar {
3403
+ .cX-DataTable-Vertical-Scrollbar {
3114
3404
  overflow-x: hidden;
3115
3405
  overflow-y: auto;
3116
3406
  right: 5px;
@@ -3118,11 +3408,12 @@ div.cX-DataTable-Vertical-Scrollbar {
3118
3408
  width: 16px;
3119
3409
  }
3120
3410
 
3121
- img.cX-DataTable-Vertical-Scrollbar-Image {
3411
+ .cX-DataTable-Vertical-Scrollbar-Image {
3122
3412
  max-height: unset !important;
3413
+ width: 1px !important;
3123
3414
  }
3124
3415
 
3125
- div.cX-DataTable-Horizontal-Scrollbar {
3416
+ .cX-DataTable-Horizontal-Scrollbar {
3126
3417
  bottom: 5px;
3127
3418
  height: 16px;
3128
3419
  left: 2px;
@@ -3130,13 +3421,14 @@ div.cX-DataTable-Horizontal-Scrollbar {
3130
3421
  overflow-y: hidden;
3131
3422
  }
3132
3423
 
3133
- img.cX-DataTable-Horizontal-Scrollbar-Image {
3424
+ .cX-DataTable-Horizontal-Scrollbar-Image {
3134
3425
  max-width: unset !important;
3426
+ height: 1px !important;
3135
3427
  }
3136
3428
 
3137
3429
  /* Data Table Status */
3138
3430
 
3139
- div.cX-DataTable-Status {
3431
+ .cX-DataTable-Status {
3140
3432
  background-color: var(--cx-datatable-status-background-color);
3141
3433
  border-top: 1px var(--cx-border-style) var(--cx-datatable-status-border-color);
3142
3434
  position: relative;
@@ -3148,21 +3440,21 @@ div.cX-DataTable-Status {
3148
3440
  color: var(--cx-datatable-status-text-color);
3149
3441
  }
3150
3442
 
3151
- div.cX-DataTable-Status-Left {
3443
+ .cX-DataTable-Status-Left {
3152
3444
  display:flex;
3153
3445
  }
3154
3446
 
3155
- span.cX-DataTable-Dimensions {
3447
+ .cX-DataTable-Dimensions {
3156
3448
  display: flex;
3157
3449
  align-items: center;
3158
3450
  margin-left: 20px;
3159
- font-size: medium;
3451
+ font-size: var(--cx-font-size);
3160
3452
  color: var(--cx-datatable-status-text-color);
3161
3453
  }
3162
3454
 
3163
3455
  /* Data Table Pagination */
3164
3456
 
3165
- div.cX-DataTable-Pagination {
3457
+ .cX-DataTable-Pagination {
3166
3458
  background-color: var(--cx-datatable-pagination-background-color);
3167
3459
  border-top: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color);
3168
3460
  position: relative;
@@ -3174,37 +3466,37 @@ div.cX-DataTable-Pagination {
3174
3466
  color: var(--cx-datatable-pagination-text-color);
3175
3467
  }
3176
3468
 
3177
- span.cX-DataTable-Pagination-Size {
3469
+ .cX-DataTable-Pagination-Size {
3178
3470
  display: flex;
3179
3471
  align-items: center;
3180
3472
  margin-left: auto;
3181
3473
  gap: 10px;
3182
3474
  }
3183
3475
 
3184
- select.cX-DataTable-Pagination-Size-Select {
3476
+ .cX-DataTable-Pagination-Size-Select {
3185
3477
  background-color: var(--cx-datatable-background-color);
3186
3478
  border: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color);
3187
3479
  border-radius: var(--cx-border-radius);
3188
- color: var(--cx-datatable-pagination-text-color);
3480
+ color: var(--cx-datatable-pagination-select-text-color);
3189
3481
  height: 20px;
3190
3482
  padding: 2px;
3191
3483
  outline: none;
3192
- font-size: var(--cx-font-size);
3484
+ font-size: var(--cx-medium-font-size);
3193
3485
  cursor: pointer;
3194
3486
  }
3195
3487
 
3196
- span.cX-DataTable-Pagination-Rows {
3488
+ .cX-DataTable-Pagination-Rows {
3197
3489
  display: flex;
3198
3490
  align-items: center;
3199
3491
  margin: auto;
3200
3492
  gap: 10px;
3201
3493
  }
3202
3494
 
3203
- span.cX-DataTable-Pagination-Label-Bold {
3495
+ .cX-DataTable-Pagination-Label-Bold {
3204
3496
  font-weight: bold;
3205
3497
  }
3206
3498
 
3207
- span.cX-DataTable-Pagination-Controls {
3499
+ .cX-DataTable-Pagination-Controls {
3208
3500
  cursor: pointer;
3209
3501
  margin-right: auto;
3210
3502
  display: flex;
@@ -3213,7 +3505,7 @@ span.cX-DataTable-Pagination-Controls {
3213
3505
  padding-bottom: 5px;
3214
3506
  }
3215
3507
 
3216
- div.cX-DataTable-Pagination-Control-Disabled {
3508
+ .cX-DataTable-Pagination-Control-Disabled {
3217
3509
  opacity: 0.2;
3218
3510
  cursor: none;
3219
3511
  }
@@ -3221,26 +3513,52 @@ div.cX-DataTable-Pagination-Control-Disabled {
3221
3513
  /* Data Table Table */
3222
3514
 
3223
3515
  table.cX-DataTable,
3224
- table.cX-DataTable-Tooltip {
3516
+ .cX-DataTable-Tooltip {
3225
3517
  border: none !important;
3226
3518
  color: var(--cx-font-color);
3227
3519
  position: absolute;
3228
3520
  table-layout: fixed;
3229
3521
  }
3230
3522
 
3231
- table.cX-DataTable-Tooltip {
3523
+ .cX-DataTable-Tooltip {
3232
3524
  position: inherit;
3233
3525
  }
3234
3526
 
3235
- tr.cX-DataTable-Row,
3236
- tr.cX-DataTable-Row-Active {
3527
+ .cX-DataTable-Container table.cX-DataTable-Tooltip {
3528
+ border-collapse: collapse;
3529
+ }
3530
+
3531
+ .cX-DataTable-Container .cX-DataTable-Row th,
3532
+ .cX-DataTable-Container .cX-DataTable-Row td {
3533
+ border: 1px solid var(--cx-datatable-cell-border-color);
3534
+ }
3535
+
3536
+ .cX-DataTable-Container .cX-DataTable-Row {
3537
+ display: table-row !important;
3538
+ }
3539
+
3540
+ .cX-DataTable-Container th.cX-DataTable-Cell-Head {
3541
+ background: none;
3542
+ display: table-cell !important;
3543
+ font-weight: bold;
3544
+ padding: 0 !important;
3545
+ position: static;
3546
+ }
3547
+
3548
+ .cX-DataTable-Container td.cX-DataTable-Cell {
3549
+ display: table-cell !important;
3550
+ position: static;
3551
+ }
3552
+
3553
+ .cX-DataTable-Row,
3554
+ .cX-DataTable-Row-Active {
3237
3555
  display: flex;
3238
3556
  align-content: center;
3239
3557
  position: relative;
3240
3558
  }
3241
3559
 
3242
- tr.cX-DataTable-Row-Active td,
3243
- tr.cX-DataTable-Row-Active th {
3560
+ .cX-DataTable-Row-Active td,
3561
+ .cX-DataTable-Row-Active th {
3244
3562
  background-color: var(--cx-datatable-row-hover-background-color)!important;
3245
3563
  }
3246
3564
 
@@ -3255,8 +3573,8 @@ tr.cX-DataTable-Row-Active th {
3255
3573
 
3256
3574
  /* Data Table Header th */
3257
3575
 
3258
- th.cX-DataTable-Cell-Head,
3259
- th.cX-DataTable-Cell-Head-Active {
3576
+ .cX-DataTable-Cell-Head,
3577
+ .cX-DataTable-Cell-Head-Active {
3260
3578
  background: var(--cx-datatable-accent-color);
3261
3579
  border-top: none;
3262
3580
  border-bottom: var(--cx-datatable-cell-border-color);
@@ -3264,7 +3582,8 @@ th.cX-DataTable-Cell-Head-Active {
3264
3582
  border-right: var(--cx-datatable-cell-border-color);
3265
3583
  color: var(--cx-datatable-header-text-color);
3266
3584
  cursor: pointer;
3267
- font: var(--cx-x-large-font);
3585
+ font-size: var(--cx-datatable-header-font-size);
3586
+ font-family: var(--cx-datatable-cell-font-family);
3268
3587
  font-weight: bold;
3269
3588
  font-variant-numeric: tabular-nums;
3270
3589
  padding: 0 3px 0 0 !important;
@@ -3275,16 +3594,16 @@ th.cX-DataTable-Cell-Head-Active {
3275
3594
  position: relative;
3276
3595
  }
3277
3596
 
3278
- th.cX-DataTable-Cell-Head > div.cX-DataTable-Cell,
3279
- th.cX-DataTable-Cell-Head-Active > div.cX-DataTable-Cell,
3280
- th.cX-DataTable-Cell-Head > div.cX-DataTable-Cell-Number,
3281
- th.cX-DataTable-Cell-Head-Active > div.cX-DataTable-Cell-Number {
3597
+ .cX-DataTable-Cell-Head > .cX-DataTable-Cell,
3598
+ .cX-DataTable-Cell-Head-Active > .cX-DataTable-Cell,
3599
+ .cX-DataTable-Cell-Head > .cX-DataTable-Cell-Number,
3600
+ .cX-DataTable-Cell-Head-Active > .cX-DataTable-Cell-Number {
3282
3601
  align-content: center;
3283
3602
  overflow: hidden;
3284
3603
  cursor: pointer;
3285
3604
  }
3286
3605
 
3287
- a.cX-DataTable-Cell-Header-Menu {
3606
+ .cX-DataTable-Cell-Header-Menu {
3288
3607
  cursor: pointer;
3289
3608
  font-style: normal !important;
3290
3609
  position: absolute;
@@ -3297,21 +3616,21 @@ a.cX-DataTable-Cell-Header-Menu {
3297
3616
  right: 8px;
3298
3617
  }
3299
3618
 
3300
- div.cX-DataTable-Cell a.cX-DataTable-Cell-Header-Menu {
3619
+ .cX-DataTable-Cell .cX-DataTable-Cell-Header-Menu {
3301
3620
  right: 10px;
3302
3621
  left: auto;
3303
3622
  }
3304
3623
 
3305
- div.cX-DataTable-Cell-Number a.cX-DataTable-Cell-Header-Menu {
3624
+ .cX-DataTable-Cell-Number .cX-DataTable-Cell-Header-Menu {
3306
3625
  right: auto;
3307
3626
  left: 3px;
3308
3627
  }
3309
3628
 
3310
- a.cX-DataTable-Cell-Header-Menu:hover {
3629
+ .cX-DataTable-Cell-Header-Menu:hover {
3311
3630
  transform: scale(1.8);
3312
3631
  }
3313
3632
 
3314
- div.cX-DataTable-Cell-Header-Filter {
3633
+ .cX-DataTable-Cell-Header-Filter {
3315
3634
  cursor: pointer;
3316
3635
  display: flex;
3317
3636
  align-items: center;
@@ -3322,17 +3641,17 @@ div.cX-DataTable-Cell-Header-Filter {
3322
3641
  right: 18px;
3323
3642
  }
3324
3643
 
3325
- div.cX-DataTable-Cell div.cX-DataTable-Cell-Header-Filter {
3644
+ .cX-DataTable-Cell .cX-DataTable-Cell-Header-Filter {
3326
3645
  right: 22px;
3327
3646
  left: auto;
3328
3647
  }
3329
3648
 
3330
- div.cX-DataTable-Cell-Number div.cX-DataTable-Cell-Header-Filter {
3649
+ .cX-DataTable-Cell-Number .cX-DataTable-Cell-Header-Filter {
3331
3650
  left: 19px;
3332
3651
  right: auto;
3333
3652
  }
3334
3653
 
3335
- div.cX-DataTable-Cell-Header-Sort {
3654
+ .cX-DataTable-Cell-Header-Sort {
3336
3655
  cursor: pointer;
3337
3656
  display: flex;
3338
3657
  align-items: center;
@@ -3342,21 +3661,21 @@ div.cX-DataTable-Cell-Header-Sort {
3342
3661
  transform: translateY(-50%);
3343
3662
  }
3344
3663
 
3345
- svg.cX-DataTable-Cell-Header-Filter-Image:hover {
3664
+ .cX-DataTable-Cell-Header-Filter-Image:hover {
3346
3665
  transform: scale(1.4);
3347
3666
  }
3348
3667
 
3349
- div.cX-DataTable-Cell div.cX-DataTable-Cell-Header-Sort {
3668
+ .cX-DataTable-Cell .cX-DataTable-Cell-Header-Sort {
3350
3669
  right: 34px;
3351
3670
  left: auto;
3352
3671
  }
3353
3672
 
3354
- div.cX-DataTable-Cell-Number div.cX-DataTable-Cell-Header-Sort {
3673
+ .cX-DataTable-Cell-Number .cX-DataTable-Cell-Header-Sort {
3355
3674
  left: 31px;
3356
3675
  right: auto;
3357
3676
  }
3358
3677
 
3359
- span.cX-DataTable-Cell-Header-Resize {
3678
+ .cX-DataTable-Cell-Header-Resize {
3360
3679
  background: var(--cx-datatable-cell-border-color);
3361
3680
  cursor: col-resize;
3362
3681
  position: absolute;
@@ -3366,13 +3685,13 @@ span.cX-DataTable-Cell-Header-Resize {
3366
3685
  height: 30%;
3367
3686
  }
3368
3687
 
3369
- span.cX-DataTable-Cell-Head-Text {
3688
+ .cX-DataTable-Cell-Head-Text {
3370
3689
  color: var(--cx-datatable-header-text-color)
3371
3690
  }
3372
3691
 
3373
3692
  /* Data Table Cells td */
3374
3693
 
3375
- svg.cX-DataTable-Cell-Hierarchy-Icon {
3694
+ .cX-DataTable-Cell-Hierarchy-Icon {
3376
3695
  float: left;
3377
3696
  margin-left: -10px;
3378
3697
  margin-right: 10px;
@@ -3385,7 +3704,8 @@ td.cX-DataTable-Cell-Active {
3385
3704
  border-bottom: var(--cx-datatable-cell-border-color);
3386
3705
  border-left: none !important;
3387
3706
  border-right: var(--cx-datatable-cell-border-color);
3388
- font: var(--cx-x-large-font);
3707
+ font-size: var(--cx-datatable-body-font-size);
3708
+ font-family: var(--cx-datatable-cell-font-family);
3389
3709
  font-variant-numeric: tabular-nums;
3390
3710
  color: var(--cx-datatable-cell-text-color);
3391
3711
  padding: 0 3px 0 0 !important;
@@ -3395,14 +3715,16 @@ td.cX-DataTable-Cell-Active {
3395
3715
  position: relative;
3396
3716
  }
3397
3717
 
3398
- div.cX-DataTable-Cell,
3399
- div.cX-DataTable-Cell-Number,
3400
- div.cX-DataTable-Cell-Link,
3401
- div.cX-DataTable-Cell-Active,
3402
- div.cX-DataTable-Cell-Number-Active,
3403
- div.cX-DataTable-Cell-Link-Active,
3404
- div.cX-DataTable-Cell-Tooltip {
3718
+ .cX-DataTable-Cell,
3719
+ .cX-DataTable-Cell-Number,
3720
+ .cX-DataTable-Cell-Link,
3721
+ .cX-DataTable-Cell-Active,
3722
+ .cX-DataTable-Cell-Number-Active,
3723
+ .cX-DataTable-Cell-Link-Active,
3724
+ .cX-DataTable-Cell-Tooltip {
3405
3725
  box-sizing: border-box;
3726
+ font-size: var(--cx-datatable-cell-font-size);
3727
+ font-family: var(--cx-datatable-cell-font-family);
3406
3728
  color: var(--cx-datatable-cell-text-color);
3407
3729
  margin: 0px !important;
3408
3730
  overflow: hidden;
@@ -3411,22 +3733,22 @@ div.cX-DataTable-Cell-Tooltip {
3411
3733
  word-break: break-word;
3412
3734
  }
3413
3735
 
3414
- div.cX-DataTable-Cell,
3415
- div.cX-DataTable-Cell-Link,
3416
- div.cX-DataTable-Cell-Active,
3417
- div.cX-DataTable-Cell-Link-Active {
3736
+ .cX-DataTable-Cell,
3737
+ .cX-DataTable-Cell-Link,
3738
+ .cX-DataTable-Cell-Active,
3739
+ .cX-DataTable-Cell-Link-Active {
3418
3740
  padding-left: 15px;
3419
3741
  text-align: left;
3420
3742
  }
3421
3743
 
3422
- div.cX-DataTable-Cell-Number,
3423
- div.cX-DataTable-Cell-Number-Active {
3744
+ .cX-DataTable-Cell-Number,
3745
+ .cX-DataTable-Cell-Number-Active {
3424
3746
  padding-right: 15px;
3425
3747
  text-align: right;
3426
3748
  }
3427
3749
 
3428
- div.cX-DataTable-Cell-Link,
3429
- div.cX-DataTable-Cell-Link-Active {
3750
+ .cX-DataTable-Cell-Link,
3751
+ .cX-DataTable-Cell-Link-Active {
3430
3752
  text-decoration: underline var(--cx-border);
3431
3753
  text-underline-offset: 2px;
3432
3754
  cursor: pointer;
@@ -3434,23 +3756,23 @@ div.cX-DataTable-Cell-Link-Active {
3434
3756
  align-items: center;
3435
3757
  }
3436
3758
 
3437
- div.cX-DataTable-Cell-Active,
3438
- div.cX-DataTable-Cell-Number-Active,
3439
- div.cX-DataTable-Cell-Link-Active {
3759
+ .cX-DataTable-Cell-Active,
3760
+ .cX-DataTable-Cell-Number-Active,
3761
+ .cX-DataTable-Cell-Link-Active {
3440
3762
  background-color: var(--cx-datatable-cell-hover-background-color) !important;
3441
3763
  border: 1px var(--cx-border-style) var(--cx-datatable-activecell-border-color) !important;
3442
3764
  }
3443
3765
 
3444
- span.cX-DataTable-Cell-Text {
3766
+ .cX-DataTable-Cell-Text {
3445
3767
  color: var(--cx-datatable-cell-text-color)
3446
3768
  }
3447
3769
 
3448
- td.cX-DataTable-Cell > div.cX-DataTable-Cell:hover,
3449
- td.cX-DataTable-Cell > div.cX-DataTable-Cell-Number:hover {
3770
+ td.cX-DataTable-Cell > .cX-DataTable-Cell:hover,
3771
+ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
3450
3772
  background-color: var(--cx-datatable-cell-hover-background-color);
3451
3773
  }
3452
3774
 
3453
- div.cX-DataTable-Cell-Tooltip {
3775
+ .cX-DataTable-Cell-Tooltip {
3454
3776
  width: 100px;
3455
3777
  line-height: 32px;
3456
3778
  /*
@@ -3464,7 +3786,7 @@ div.cX-DataTable-Cell-Tooltip {
3464
3786
  text-overflow: ellipsis;
3465
3787
  }
3466
3788
 
3467
- div.cX-DataTable-Upload {
3789
+ .cX-DataTable-Upload {
3468
3790
  background-image: url('data:image/png;base64,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');
3469
3791
  background-size: contain;
3470
3792
  background-repeat: no-repeat;
@@ -3473,33 +3795,52 @@ div.cX-DataTable-Upload {
3473
3795
  position: relative;
3474
3796
  }
3475
3797
 
3476
- div.cX-DataTable-Upload div.cX-DataTable-Root {
3798
+ .cX-DataTable-Upload .cX-DataTable-Root {
3477
3799
  opacity: 0.1;
3478
3800
  }
3479
3801
 
3802
+ /************************************/
3803
+ /* Tooltip DataTable */
3804
+ /************************************/
3805
+
3806
+ .cX-DataTable-Container .cX-DataTable-Row:not(:first-child):hover {
3807
+ background-color: var(--cx-datatable-row-hover-background-color) !important;
3808
+ }
3809
+
3810
+ .cX-DataTable-Container .cX-DataTable-Cell-Tooltip {
3811
+ font-size: var(--cx-small-font-size);
3812
+ line-height: 1.4;
3813
+ overflow: hidden;
3814
+ padding: 5px 10px;
3815
+ text-overflow: ellipsis;
3816
+ white-space: nowrap;
3817
+ width: 120px;
3818
+ }
3819
+
3820
+ /* @category: widget */
3480
3821
  /***************/
3481
3822
  /* Data Filter */
3482
3823
  /***************/
3483
3824
 
3484
- div.cX-DataFilter,
3485
- div.cX-DataFilter-Toolbar,
3486
- span.cX-DataFilter-Toolbar-Text,
3487
- span.cX-DataFilter-Text,
3488
- span.cX-DataFilter-Text-Active {
3825
+ .cX-DataFilter,
3826
+ .cX-DataFilter-Toolbar,
3827
+ .cX-DataFilter-Toolbar-Text,
3828
+ .cX-DataFilter-Text,
3829
+ .cX-DataFilter-Text-Active {
3489
3830
  font-family: var(--cx-font-family);
3490
3831
  font-size: var(--cx-x-large-font-size);
3491
3832
  color: var(--cx-font-color);
3492
3833
  }
3493
3834
 
3494
- div.cX-DataFilter,
3495
- div.cX-DataFilter-Toolbar {
3835
+ .cX-DataFilter,
3836
+ .cX-DataFilter-Toolbar {
3496
3837
  box-sizing: border-box;
3497
3838
  line-height: 100%;
3498
3839
  margin: 0px;
3499
3840
  position: absolute;
3500
3841
  }
3501
3842
 
3502
- div.cX-DataFilter {
3843
+ .cX-DataFilter {
3503
3844
  top: 0px;
3504
3845
  left: 0px;
3505
3846
  display: none;
@@ -3507,72 +3848,81 @@ div.cX-DataFilter {
3507
3848
  height: 100%;
3508
3849
  }
3509
3850
 
3510
- div.cX-DataFilter-Toolbar {
3511
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3851
+ .cX-DataFilter-Toolbar {
3852
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color)) !important;
3512
3853
  border-radius: var(--cx-border-radius);
3513
3854
  width: 100%;
3514
3855
  left: 0px;
3515
3856
  top: 0px;
3516
3857
  }
3517
3858
 
3518
- div.cX-DataFilter-Toolbar-Top-Container {
3859
+ .cX-DataFilter-Toolbar-Top-Container {
3519
3860
  float: left;
3520
3861
  position: relative;
3521
3862
  width: 100%;
3522
3863
  z-index: 10001;
3523
- background-color: var(--cx-datatable-banner-background-color);
3524
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3864
+ background-color: var(--cx-datafilter-toolbar-background-color, var(--cx-datatable-banner-background-color));
3865
+ border-bottom: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3525
3866
  border-radius: var(--cx-border-radius) var(--cx-border-radius) 0px 0px;
3526
3867
  display: flex;
3527
3868
  align-items: center;
3869
+ gap: 4px;
3870
+ padding: 0px 4px;
3528
3871
  top: 0px;
3529
3872
  left: 0px;
3530
3873
  }
3531
3874
 
3532
- div.cX-DataFilter-Toolbar-Bottom-Container {
3875
+ .cX-DataFilter-Toolbar-Bottom-Container {
3533
3876
  position: relative;
3534
3877
  background-color: transparent;
3535
3878
  border: none;
3536
3879
  width: 100%;
3537
3880
  display: flex;
3538
3881
  align-items: center;
3882
+ justify-content: flex-end;
3883
+ gap: 4px;
3884
+ padding: 0px 4px;
3539
3885
  top: 0px;
3540
3886
  left: 0px;
3541
3887
  }
3542
3888
 
3543
- span.cX-DataFilter-Toolbar-Text,
3544
- span.cX-DataFilter-Text,
3545
- span.cX-DataFilter-Text-Active {
3889
+ .cX-DataFilter-Toolbar-Text,
3890
+ .cX-DataFilter-Text,
3891
+ .cX-DataFilter-Text-Active {
3546
3892
  left: 8px;
3547
3893
  line-height: 100%;
3548
3894
  position: relative;
3549
3895
  top: 6px;
3550
3896
  background-repeat: no-repeat;
3551
3897
  background-position: -0px;
3898
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
3899
+ font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
3552
3900
  }
3553
3901
 
3554
- span.cX-DataFilter-Toolbar-Text {
3555
- font-size: medium;
3556
- float: left;
3902
+ .cX-DataFilter-Toolbar-Text {
3903
+ flex: 1;
3904
+ top: 0px;
3905
+ left: 0px;
3906
+ padding-left: 8px;
3907
+ font-size: var(--cx-font-size);
3557
3908
  }
3558
3909
 
3559
-
3560
- svg.cX-DataFilter-Toolbar-Image {
3561
- float: left;
3562
- position: relative;
3563
- top: -8px;
3910
+ svg.cX-DataFilter-Toolbar-Image,
3911
+ svg.cX-DataFilter-Toolbar-ImageNB {
3912
+ margin: 0px !important;
3913
+ cursor: pointer;
3564
3914
  }
3565
3915
 
3566
3916
 
3567
- div.cX-DataFilter-Content {
3917
+ .cX-DataFilter-Content {
3568
3918
  box-sizing: border-box;
3569
- background-color: var(--cx-background-widgets-color);
3570
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3571
- border-radius: 0px 0px 4px 4px;
3919
+ background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
3920
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3921
+ border-radius: 0px 0px var(--cx-border-radius) var(--cx-border-radius);
3572
3922
  border-top: 0px;
3573
3923
  font-family: var(--cx-font-family);
3574
- font-size: var(--cx-x-large-font-size);
3575
- color: var(--cx-font-color);
3924
+ font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
3925
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
3576
3926
  overflow-y: auto;
3577
3927
  overflow-x: hidden;
3578
3928
  padding: 2px;
@@ -3587,6 +3937,8 @@ input[type=checkbox].cX-Checkbox {
3587
3937
  height: 14px;
3588
3938
  width: 14px;
3589
3939
  margin: 2px;
3940
+ vertical-align: middle;
3941
+ flex-shrink: 0;
3590
3942
  }
3591
3943
 
3592
3944
  label.cX-Checkbox-Label {
@@ -3600,34 +3952,33 @@ label.cX-Checkbox-Label {
3600
3952
  }
3601
3953
 
3602
3954
  input.cX-DataFilter-Search {
3603
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3955
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3604
3956
  border-radius: var(--cx-border-radius);
3605
- color: var(--cx-font-color);
3957
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
3606
3958
  cursor: default;
3607
3959
  width: calc(100% - 10px);
3608
3960
  margin-left: 5px;
3609
3961
  padding-left: 5px;
3610
- height: 25px;
3962
+ height: 32px;
3611
3963
  outline: none;
3612
- font-size: 14px;
3964
+ font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
3613
3965
  display: flex;
3614
3966
  }
3615
3967
 
3616
- input[type="search"]::-webkit-search-cancel-button.cX-DataFilter-Search {
3968
+ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
3617
3969
  -webkit-appearance: auto;
3618
- appearance: none;
3619
- color: var(--cx-font-color);
3620
3970
  height: 16px;
3621
3971
  width: 16px;
3972
+ cursor: pointer;
3622
3973
  }
3623
3974
 
3624
- div.cX-DataFilter-Container,
3625
- div.cX-DataFilter-Container-Mask,
3626
- div.cX-DataFilter-Container-Hoverable {
3975
+ .cX-DataFilter-Container,
3976
+ .cX-DataFilter-Container-Mask,
3977
+ .cX-DataFilter-Container-Hoverable {
3627
3978
  box-sizing: border-box;
3628
3979
  }
3629
3980
 
3630
- div.cX-DataFilter-Container {
3981
+ .cX-DataFilter-Container {
3631
3982
  border: 0px;
3632
3983
  left: 0px;
3633
3984
  margin: 0px;
@@ -3636,50 +3987,58 @@ div.cX-DataFilter-Container {
3636
3987
  width: 100%;
3637
3988
  }
3638
3989
 
3639
- div.cX-DataFilter-Container-Mask {
3640
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3990
+ .cX-DataFilter-Container-Mask {
3991
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3641
3992
  margin: 5px;
3642
3993
  overflow-x: hidden;
3643
3994
  overflow-y: scroll;
3644
3995
  }
3645
3996
 
3646
- div.cX-DataFilter-Container-Hoverable:hover {
3647
- background-color: var(--cx-background-hover-color);
3997
+ .cX-DataFilter-Container-Hoverable:hover {
3998
+ background-color: var(--cx-datafilter-hover-color, var(--cx-background-hover-color));
3648
3999
  }
3649
4000
 
3650
- div.cX-DataFilter-Container-Hoverable {
3651
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
4001
+ .cX-DataFilter-Container-Hoverable {
4002
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3652
4003
  border-radius: var(--cx-border-radius);
3653
4004
  margin: 2px;
3654
4005
  margin-bottom: 4px;
3655
4006
  }
3656
4007
 
3657
- div.cX-DataFilter-Head,
3658
- div.cX-DataFilter-Head-Active {
4008
+ .cX-DataFilter-Head,
4009
+ .cX-DataFilter-Head-Active {
4010
+ background: var(--cx-background-hover-color);
3659
4011
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3660
- border-radius: 4px;
4012
+ border-radius: var(--cx-border-radius);
3661
4013
  box-sizing: border-box;
3662
4014
  color: var(--cx-font-color);
3663
4015
  cursor: pointer;
3664
- float: left;
4016
+ display: flex;
4017
+ align-items: center;
4018
+ gap: 6px;
4019
+ padding: 0 8px;
3665
4020
  height: 38px;
3666
4021
  margin-top: 2px;
3667
4022
  overflow: hidden;
3668
- padding: 2px;
3669
- text-align: left;
3670
- vertical-align: middle;
3671
4023
  width: 100%;
3672
4024
  }
3673
4025
 
3674
- div.cX-DataFilter-Head-Active {
3675
- background:var(--cx-background-hover-color);
4026
+ .cX-DataFilter-Head .cX-DataFilter-Text,
4027
+ .cX-DataFilter-Head-Active .cX-DataFilter-Text,
4028
+ .cX-DataFilter-Head-Active .cX-DataFilter-Text-Active {
4029
+ top: 0px;
4030
+ left: 0px;
4031
+ font-size: var(--cx-font-size);
4032
+ }
4033
+
4034
+ .cX-DataFilter-Head-Active {
3676
4035
  border-bottom: var(--cx-border-transparent) !important;
3677
- border-radius: 4px 4px 0px 0px;
4036
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0px 0px;
3678
4037
  }
3679
4038
 
3680
4039
  svg.cX-DataFilter-Toolbar-Image {
3681
4040
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3682
- border-radius: 5px !important;
4041
+ border-radius: var(--cx-border-radius) !important;
3683
4042
  padding: 2px;
3684
4043
  }
3685
4044
 
@@ -3688,15 +4047,7 @@ svg.cX-DataFilter-Toolbar-ImageNB {
3688
4047
  z-index: 10002;
3689
4048
  }
3690
4049
 
3691
- span.cX-DataFilter-Text {
3692
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVR42mNkoBAwUt2A/0AAlgACsg0A6QWZQ4whOA2AsgkagtcAYgwhaAAhQ4gyAJ8htHcBRWFAUSxQlA7AEuSmRFLBwBsAAMDpRxF7e4BAAAAAAElFTkSuQmCC);
3693
- }
3694
-
3695
- span.cX-DataFilter-Text-Active {
3696
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASUlEQVR42mNkoBAwjhqAMOA/EBCtCQiwGoAkjhOA7MFqADGGoGvGGga4DMGmGWcgohuCSzNOA5ANwacZrwFIhuBVM4gS0oAZAAD1oisRsByngAAAAABJRU5ErkJggg==);
3697
- }
3698
-
3699
- div.cX-DataFilter-Container-Mask-NoOverflow {
4050
+ .cX-DataFilter-Container-Mask-NoOverflow {
3700
4051
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3701
4052
  box-sizing: border-box;
3702
4053
  margin: 5px;
@@ -3706,21 +4057,24 @@ div.cX-DataFilter-Container-Mask-NoOverflow {
3706
4057
  input.cX-DataFilter-Container-Input-Left {
3707
4058
  float: left;
3708
4059
  margin: 10px;
3709
- border: none;
4060
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3710
4061
  border-radius: var(--cx-border-radius);
3711
- font-size: small;
3712
- color: var(--cx-background-color);
4062
+ font-size: var(--cx-small-font-size);
4063
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
4064
+ background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
3713
4065
  }
3714
4066
 
3715
4067
  input.cX-DataFilter-Container-Input-Right {
3716
4068
  float: right;
3717
4069
  margin: 10px;
3718
- border: none;
4070
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3719
4071
  border-radius: var(--cx-border-radius);
3720
- font-size: small;
3721
- color: var(--cx-background-color);
4072
+ font-size: var(--cx-small-font-size);
4073
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
4074
+ background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
3722
4075
  }
3723
4076
 
4077
+ /* @category: widget */
3724
4078
  /***************/
3725
4079
  /* Toggle */
3726
4080
  /***************/
@@ -3729,7 +4083,7 @@ div.cX-Toggle {
3729
4083
  border: none;
3730
4084
  margin: 5px;
3731
4085
  height: 18px;
3732
- font-size: medium;
4086
+ font-size: inherit;
3733
4087
  }
3734
4088
 
3735
4089
  label.cX-Toggle {
@@ -3738,7 +4092,7 @@ label.cX-Toggle {
3738
4092
 
3739
4093
  div.cX-Toggle-Switch {
3740
4094
  display: inline-block;
3741
- background: rgb(204, 204, 204);
4095
+ background: var(--cx-color-light-gray);
3742
4096
  border-radius: 16px;
3743
4097
  width: 28px;
3744
4098
  height: 18px;
@@ -3754,7 +4108,7 @@ div.cX-Toggle-Switch:after {
3754
4108
 
3755
4109
  div.cX-Toggle-Switch:before {
3756
4110
  display: block;
3757
- background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%);
4111
+ background: linear-gradient(to bottom, var(--cx-color-white) 0%, var(--cx-color-extra-light-gray) 100%);
3758
4112
  border-radius: 50%;
3759
4113
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
3760
4114
  width: 14px;
@@ -3766,7 +4120,7 @@ div.cX-Toggle-Switch:before {
3766
4120
  }
3767
4121
 
3768
4122
  label.cX-Toggle:hover div.cX-Toggle-Switch:before {
3769
- background: linear-gradient(to bottom, rgb(255, 255, 255)0%, rgb(255, 255, 255)100%);
4123
+ background: linear-gradient(to bottom, var(--cx-color-white) 0%, var(--cx-color-white) 100%);
3770
4124
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
3771
4125
  }
3772
4126
 
@@ -3789,70 +4143,70 @@ span.cX-Toggle {
3789
4143
  position: relative;
3790
4144
  }
3791
4145
 
4146
+ /* @category: widget */
3792
4147
  /****************/
3793
4148
  /* Range Slider */
3794
4149
  /****************/
3795
4150
 
3796
- div.CanvasXpressRangeSliderContainer {
4151
+ div.cX-RangeSlider-Container {
3797
4152
  border: none;
3798
4153
  margin: auto;
3799
4154
  height: 110px;
3800
4155
  }
3801
4156
 
3802
- div.CanvasXpressRangeSliderContainerTop {
4157
+ div.cX-RangeSlider-Container-Top {
3803
4158
  height: 18px;
3804
4159
  margin: 5px;
3805
4160
  position: relative;
3806
4161
  display: flex;
3807
4162
  }
3808
4163
 
3809
- span.CanvasXpressRangeSliderContainerTop {
4164
+ span.cX-RangeSlider-Container-Top {
3810
4165
  border: none;
3811
4166
  }
3812
4167
 
3813
- div.CanvasXpressRangeSliderContainerBottom {
4168
+ div.cX-RangeSlider-Container-Bottom {
3814
4169
  height: 80px;
3815
4170
  position: relative;
3816
4171
  }
3817
4172
 
3818
- div.CanvasXpressRangeSliderInput {
3819
- position: relative;
3820
- z-index: 10001;
3821
- height: 22px;
3822
- margin: 8px 0;
4173
+ div.cX-RangeSlider-Input {
4174
+ display: flex;
4175
+ justify-content: space-between;
4176
+ align-items: center;
4177
+ margin: 4px 0;
4178
+ height: 32px;
3823
4179
  }
3824
4180
 
3825
- input.CanvasXpressRangeSliderMin,
3826
- input.CanvasXpressRangeSliderMax {
3827
- color: var(--cx-toggle-switch-background-color);
3828
- border: 1px solid var(--cx-background-widgets-color);
4181
+ input.cX-RangeSlider-Min,
4182
+ input.cX-RangeSlider-Max {
4183
+ border: none;
3829
4184
  border-radius: var(--cx-border-radius);
3830
4185
  font: var(--cx-font);
3831
4186
  color: var(--cx-font-color);
3832
- margin-bottom: 2px;
4187
+ background-color: var(--cx-background-widgets-color);
4188
+ height: 22px;
3833
4189
  line-height: 100%;
3834
- width: 60px;
4190
+ width: calc(50% - 6px);
3835
4191
  }
3836
4192
 
3837
- input.CanvasXpressRangeSliderMin {
3838
- float: left;
4193
+ input.cX-RangeSlider-Min {
3839
4194
  margin-left: 1px;
3840
4195
  }
3841
4196
 
3842
- input.CanvasXpressRangeSliderMax {
3843
- float: right;
4197
+ input.cX-RangeSlider-Max {
3844
4198
  margin-right: 1px;
3845
4199
  text-align: right;
3846
4200
  }
3847
4201
 
3848
- div.CanvasXpressRangeSlider {
4202
+ div.cX-RangeSlider {
3849
4203
  position: relative;
3850
4204
  z-index: 10001;
3851
4205
  height: 8px;
3852
4206
  margin: 0 15px;
3853
4207
  }
3854
4208
 
3855
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderTrack {
4209
+ div.cX-RangeSlider>div.cX-RangeSlider-Track {
3856
4210
  position: absolute;
3857
4211
  z-index: 10001;
3858
4212
  left: 0;
@@ -3863,7 +4217,7 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderTrack {
3863
4217
  background-color: rgb(238, 238, 238);
3864
4218
  }
3865
4219
 
3866
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
4220
+ div.cX-RangeSlider>div.cX-RangeSlider-Range {
3867
4221
  background-color: var(--cx-toggle-switch-background-color);
3868
4222
  position: absolute;
3869
4223
  z-index: 10002;
@@ -3874,8 +4228,8 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
3874
4228
  border-radius: var(--cx-border-radius);
3875
4229
  }
3876
4230
 
3877
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft,
3878
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
4231
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left,
4232
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
3879
4233
  position: absolute;
3880
4234
  z-index: 10003;
3881
4235
  width: 18px;
@@ -3884,28 +4238,28 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
3884
4238
  transition: box-shadow var(--cx-transition-speed) ease-in-out;
3885
4239
  }
3886
4240
 
3887
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft,
3888
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
4241
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left,
4242
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
3889
4243
  background-color: var(--cx-toggle-switch-background-color);
3890
4244
  box-shadow: 0 0 0 0 var(--cx-background-hover-color);
3891
4245
  }
3892
4246
 
3893
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft {
4247
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left {
3894
4248
  left: 0%;
3895
4249
  transform: translate(-15px, -5px);
3896
4250
  }
3897
4251
 
3898
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
4252
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
3899
4253
  right: 0%;
3900
4254
  transform: translate(15px, -5px);
3901
4255
  }
3902
4256
 
3903
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft:hover,
3904
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight:hover {
4257
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left:hover,
4258
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right:hover {
3905
4259
  box-shadow: 0 0 0 10px var(--cx-background-hover-color);
3906
4260
  }
3907
4261
 
3908
- input[type=range].customizerRightItemRangeSelect {
4262
+ input[type=range].cX-Customizer-RightItemRangeSelect {
3909
4263
  -webkit-appearance: none;
3910
4264
  appearance: none;
3911
4265
  width: 100%;
@@ -3916,7 +4270,7 @@ input[type=range].customizerRightItemRangeSelect {
3916
4270
  opacity: 1;
3917
4271
  }
3918
4272
 
3919
- input[type=range].customizerRightItemRangeSelect::-webkit-slider-thumb {
4273
+ input[type=range].cX-Customizer-RightItemRangeSelect::-webkit-slider-thumb {
3920
4274
  -webkit-appearance: none;
3921
4275
  appearance: none;
3922
4276
  width: 15px;
@@ -3926,7 +4280,7 @@ input[type=range].customizerRightItemRangeSelect::-webkit-slider-thumb {
3926
4280
  cursor: pointer;
3927
4281
  }
3928
4282
 
3929
- input[type=range].customizerRightItemRangeSelect::-moz-range-thumb {
4283
+ input[type=range].cX-Customizer-RightItemRangeSelect::-moz-range-thumb {
3930
4284
  width: 15px;
3931
4285
  height: 15px;
3932
4286
  border-radius: 50%;
@@ -3956,21 +4310,21 @@ input[type=range]::-webkit-slider-thumb {
3956
4310
  -webkit-appearance: none;
3957
4311
  }
3958
4312
 
3959
- div.CanvasXpressRangeSliderTicks,
3960
- div.CanvasXpressRangeSliderTicksLog {
4313
+ div.cX-RangeSlider-Ticks,
4314
+ div.cX-RangeSlider-Ticks-Log {
3961
4315
  display: flex;
3962
4316
  padding: 0px 10px;
3963
4317
  height: 18px;
3964
4318
  margin-top: 10px;
3965
4319
  }
3966
4320
 
3967
- div.CanvasXpressRangeSliderTicks {
4321
+ div.cX-RangeSlider-Ticks {
3968
4322
  justify-content: space-between;
3969
4323
  }
3970
4324
 
3971
- span.CanvasXpressRangeSliderTicksLong,
3972
- span.CanvasXpressRangeSliderTicksLongSmall,
3973
- span.CanvasXpressRangeSliderTicks {
4325
+ span.cX-RangeSlider-Ticks-Long,
4326
+ span.cX-RangeSlider-Ticks-Long-Small,
4327
+ span.cX-RangeSlider-Ticks {
3974
4328
  position: relative;
3975
4329
  display: flex;
3976
4330
  justify-content: center;
@@ -3979,21 +4333,15 @@ span.CanvasXpressRangeSliderTicks {
3979
4333
  margin-bottom: 10px;
3980
4334
  }
3981
4335
 
3982
- span.CanvasXpressRangeSliderTicksLong {
4336
+ span.cX-RangeSlider-Ticks-Long,
4337
+ span.cX-RangeSlider-Ticks-Long-Small {
3983
4338
  color: var(--cx-font-color);
3984
4339
  height: 10px;
3985
4340
  line-height: 35px;
3986
- font-size: x-small;
3987
- }
3988
-
3989
- span.CanvasXpressRangeSliderTicksLongSmall {
3990
- color: var(--cx-font-color);
3991
- height: 10px;
3992
- line-height: 35px;
3993
- font-size: x-small;
4341
+ font-size: var(--cx-small-font-size);
3994
4342
  }
3995
4343
 
3996
- span.CanvasXpressRangeSliderTicks {
4344
+ span.cX-RangeSlider-Ticks {
3997
4345
  height: 5px;
3998
4346
  line-height: 10px;
3999
4347
  }
@@ -4007,6 +4355,7 @@ input[type=number]::-webkit-inner-spin-button {
4007
4355
  -webkit-appearance: none;
4008
4356
  }
4009
4357
 
4358
+ /* @category: shared */
4010
4359
  /***************/
4011
4360
  /* Scrollbars */
4012
4361
  /***************/
@@ -4018,14 +4367,7 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-button,
4018
4367
  /*div.cX-DataFilter-Content::-webkit-scrollbar-button,*/
4019
4368
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-button,
4020
4369
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-button,
4021
- div.CanvasXpressDataExplorer::-webkit-scrollbar-button,
4022
- div.CanvasXpressDataCustomizer::-webkit-scrollbar-button,
4023
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar-button,
4024
- select.CanvasXpressConfigurator::-webkit-scrollbar-button,
4025
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar-button,
4026
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-button,
4027
- select.CanvasXpressSlider::-webkit-scrollbar-button,
4028
- div.cX-bin-name-container::-webkit-scrollbar-button {
4370
+ div.cX-Bin-Name-Container::-webkit-scrollbar-button {
4029
4371
  width: 4px;
4030
4372
  height: 4px;
4031
4373
  }
@@ -4034,21 +4376,15 @@ div.cX-bin-name-container::-webkit-scrollbar-button {
4034
4376
 
4035
4377
  /*div.cX-DataFilter-Content::-webkit-scrollbar-track,*/
4036
4378
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-track,
4037
- div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track,
4038
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar-track,
4039
- select.CanvasXpressConfigurator::-webkit-scrollbar-track,
4040
- select.CanvasXpressSlider::-webkit-scrollbar-track {
4041
- background-color: rgb(255, 255, 255);
4379
+ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track {
4380
+ background-color: var(--cx-background-widgets-color);
4042
4381
  }
4043
4382
 
4044
4383
  div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar-track,
4045
4384
  div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-track,
4046
- div.CanvasXpressDataExplorer::-webkit-scrollbar-track,
4047
- div.CanvasXpressDataCustomizer::-webkit-scrollbar-track,
4048
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track,
4049
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track,
4050
- div.cX-bin-name-container::-webkit-scrollbar-track {
4051
- background-color: rgb(245, 245, 245);
4385
+ div.cX-Bin-Name-Container::-webkit-scrollbar-track {
4386
+ background-color: var(--cx-background-hover-color);
4387
+ border-radius: var(--cx-border-radius);
4052
4388
  }
4053
4389
 
4054
4390
  /* All tracks -hovers */
@@ -4058,41 +4394,27 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-track:hover,
4058
4394
  /*div.cX-DataFilter-Content::-webkit-scrollbar-track:hover,*/
4059
4395
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-track:hover,
4060
4396
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track:hover,
4061
- div.CanvasXpressDataExplorer::-webkit-scrollbar-track:hover,
4062
- div.CanvasXpressDataCustomizer::-webkit-scrollbar-track:hover,
4063
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar-track:hover,
4064
- select.CanvasXpressConfigurator::-webkit-scrollbar-track:hover,
4065
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track:hover,
4066
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track:hover,
4067
- select.CanvasXpressSlider::-webkit-scrollbar-track:hover,
4068
- div.cX-bin-name-container::-webkit-scrollbar-track:hover {
4397
+ div.cX-Bin-Name-Container::-webkit-scrollbar-track:hover {
4069
4398
  background-color: var(--cx-background-hover-color);
4070
- border-radius: 8px;
4399
+ border-radius: var(--cx-border-radius);
4071
4400
  }
4072
4401
 
4073
4402
  /* scrollbar background could be of two different colors but match the style tracks above */
4074
4403
 
4075
4404
  /*div.cX-DataFilter-Content::-webkit-scrollbar,*/
4076
4405
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar,
4077
- div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar,
4078
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar,
4079
- select.CanvasXpressConfigurator::-webkit-scrollbar,
4080
- select.CanvasXpressSlider::-webkit-scrollbar {
4406
+ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar {
4081
4407
  width: 8px;
4082
4408
  height: 8px;
4083
- background-color: rgb(255, 255, 255);
4409
+ background-color: var(--cx-scrollbar-background-color);
4084
4410
  }
4085
4411
 
4086
4412
  div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar,
4087
4413
  div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar,
4088
- div.CanvasXpressDataExplorer::-webkit-scrollbar,
4089
- div.CanvasXpressDataCustomizer::-webkit-scrollbar,
4090
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar,
4091
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar,
4092
- div.cX-bin-name-container::-webkit-scrollbar {
4414
+ div.cX-Bin-Name-Container::-webkit-scrollbar {
4093
4415
  width: 8px;
4094
4416
  height: 8px;
4095
- background-color: rgb(245, 245, 245);
4417
+ background-color: var(--cx-scrollbar-alt-background-color);
4096
4418
  }
4097
4419
 
4098
4420
  /* All tracks thumbs */
@@ -4102,51 +4424,48 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-thumb,
4102
4424
  /*div.cX-DataFilter-Content::-webkit-scrollbar-thumb,*/
4103
4425
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-thumb,
4104
4426
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb,
4105
- div.CanvasXpressDataExplorer::-webkit-scrollbar-thumb,
4106
- div.CanvasXpressDataCustomizer::-webkit-scrollbar-thumb,
4107
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar-thumb,
4108
- select.CanvasXpressConfigurator::-webkit-scrollbar-thumb,
4109
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar-thumb,
4110
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-thumb,
4111
- select.CanvasXpressSlider::-webkit-scrollbar-thumb,
4112
- div.cX-bin-name-container::-webkit-scrollbar-thumb {
4113
- background-color: var(--cx-background-contrast-color);
4114
- border-radius: 8px;
4427
+ div.cX-Bin-Name-Container::-webkit-scrollbar-thumb {
4428
+ background-color: var(--cx-scrollbar-thumb-color);
4429
+ border-radius: var(--cx-border-radius);
4115
4430
  border: none;
4116
4431
  }
4117
4432
 
4118
- div.cX-DataFilter::selection,
4119
- div.cX-DataFilter-Toolbar::selection {
4120
- background: var(--cx-color-transparent);
4121
- color: var(--cx-font-color);
4433
+ div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar-thumb:hover,
4434
+ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-thumb:hover,
4435
+ /*div.cX-DataFilter-Content::-webkit-scrollbar-thumb:hover,*/
4436
+ div.cX-DataFilter-Container-Mask::-webkit-scrollbar-thumb:hover,
4437
+ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb:hover,
4438
+ div.cX-Bin-Name-Container::-webkit-scrollbar-thumb:hover {
4439
+ background-color: var(--cx-scrollbar-thumb-hover-color);
4122
4440
  }
4123
4441
 
4124
- div.cX-DataFilter-Container-Item::selection {
4442
+ .cX-DataFilter::selection,
4443
+ .cX-DataFilter-Toolbar::selection {
4125
4444
  background: var(--cx-color-transparent);
4126
- color: var(--cx-background-color);
4445
+ color: var(--cx-font-color);
4127
4446
  }
4128
-
4447
+ /* @category: widget */
4129
4448
  /*****************
4130
4449
  * Context Menus *
4131
4450
  *****************/
4132
4451
 
4133
- .cX-Container-Menus {
4452
+ .cX-Menu-Container {
4134
4453
  position: sticky;
4135
4454
  z-index: 100000;
4136
4455
  background: transparent;
4137
4456
  height: 0px;
4138
4457
  }
4139
4458
 
4140
- div.CanvasXpressLink {
4459
+ .cX-Menu {
4141
4460
  box-sizing: border-box;
4142
- background-color: rgb(255, 255, 255);
4461
+ background-color: var(--cx-context-menu-background-color, var(--cx-background-widgets-color));
4143
4462
  background-image: url(data:image/gif;base64,R0lGODlh+gABAIcAAOLj4/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAP8ALAAAAAD6AAEAAAgfAAMIHEiwoMGBAAQcXMiwocOHECNKnEixosWLGCMGBAA7);
4144
4463
  background-repeat: repeat-y;
4145
- border: 1px solid rgb(83, 105, 255);
4146
- border-radius: 3px;
4464
+ border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-datatable-border-color));
4465
+ border-radius: var(--cx-border-radius);
4147
4466
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4148
- color: var(--cx-font-color);
4149
- font: var(--cx-font);
4467
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4468
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4150
4469
  line-height: 100%;
4151
4470
  margin: 0px;
4152
4471
  padding: 0px;
@@ -4154,14 +4473,14 @@ div.CanvasXpressLink {
4154
4473
  -moz-box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4155
4474
  }
4156
4475
 
4157
- div.CanvasXpressMenu {
4476
+ .cX-Menu-Sub {
4158
4477
  box-sizing: border-box;
4159
- background-color: rgb(255, 255, 255);
4160
- border: var(--cx-border);
4161
- border-radius: 3px;
4478
+ background-color: var(--cx-context-menu-background-color, var(--cx-background-widgets-color));
4479
+ border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-datatable-border-color));
4480
+ border-radius: var(--cx-border-radius);
4162
4481
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4163
- color: var(--cx-font-color);
4164
- font: var(--cx-x-large-font);
4482
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4483
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4165
4484
  line-height: 100%;
4166
4485
  margin: 0px;
4167
4486
  padding: 0px;
@@ -4169,7 +4488,7 @@ div.CanvasXpressMenu {
4169
4488
  -moz-box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4170
4489
  }
4171
4490
 
4172
- ul.CanvasXpressList {
4491
+ ul.cX-Menu-List {
4173
4492
  background: transparent;
4174
4493
  border: 0px none;
4175
4494
  list-style: none;
@@ -4179,9 +4498,9 @@ ul.CanvasXpressList {
4179
4498
  height: calc(100% - 100px);
4180
4499
  }
4181
4500
 
4182
- li.CanvasXpressListItemSep {
4501
+ .cX-Menu-Item-Sep {
4183
4502
  display: block;
4184
- font: var(--cx-x-large-font);
4503
+ font: var(--cx-font);
4185
4504
  color: var(--cx-font-color);
4186
4505
  font-size: 1px;
4187
4506
  height: 100%;
@@ -4193,37 +4512,18 @@ li.CanvasXpressListItemSep {
4193
4512
  white-space: nowrap;
4194
4513
  }
4195
4514
 
4196
- input.CanvasXpressListItem {
4515
+ input[type=file] {
4197
4516
  display: block;
4198
- font: var(--cx-x-large-font);
4199
- color: var(--cx-font-color);
4200
- line-height: 100%;
4201
- list-style: none;
4202
- margin: 0px;
4203
- padding: 1px;
4204
- white-space: nowrap;
4205
- }
4206
-
4207
- input[type=file] {
4208
- display: block;
4209
- }
4210
-
4211
- div.CanvasXpressListItem {
4212
- box-sizing: border-box;
4213
- border: 1px solid rgb(83, 105, 255);
4214
- font: var(--cx-x-large-font);
4215
- color: var(--cx-font-color);
4216
- line-height: 24px;
4217
4517
  }
4218
4518
 
4219
- li.CanvasXpressListItem {
4220
- border-color: rgba(0, 0, 0, 0);
4519
+ .cX-Menu-Item,
4520
+ .cX-Menu-Item-Active {
4221
4521
  border-style: solid;
4222
4522
  border-width: 1px 0px;
4223
4523
  cursor: default;
4224
4524
  display: block;
4225
- font: var(--cx-x-large-font);
4226
- color: var(--cx-font-color);
4525
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4526
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4227
4527
  height: 100%;
4228
4528
  line-height: 100%;
4229
4529
  list-style: none;
@@ -4234,37 +4534,27 @@ li.CanvasXpressListItem {
4234
4534
  text-align: left;
4235
4535
  }
4236
4536
 
4237
- li.CanvasXpressListItem:hover,
4238
- li.CanvasXpressListItemActive {
4239
- background: rgba(83, 105, 255, 0.1);
4240
- border-color: rgb(83, 105, 255);
4241
- border-style: solid;
4242
- border-width: 1px 0px;
4243
- cursor: default;
4244
- display: block;
4245
- font: var(--cx-x-large-font);
4246
- color: var(--cx-font-color);
4247
- height: 100%;
4248
- line-height: 100%;
4249
- list-style: none;
4250
- margin: 0px;
4251
- padding: 0px;
4252
- width: 100%;
4253
- white-space: nowrap;
4254
- text-align: left;
4537
+ .cX-Menu-Item {
4538
+ border-color: rgba(0, 0, 0, 0);
4255
4539
  }
4256
4540
 
4257
- li.CanvasXpressListItemActive > :first-child,
4258
- li.CanvasXpressListItemActive > :first-child > svg:first-child {
4541
+ .cX-Menu-Item:hover,
4542
+ .cX-Menu-Item-Active {
4543
+ background: var(--cx-context-menu-hover-color, rgba(83, 105, 255, 0.1));
4544
+ border-color: var(--cx-context-menu-border-color, rgb(83, 105, 255));
4545
+ }
4546
+
4547
+ .cX-Menu-Item-Active > :first-child,
4548
+ .cX-Menu-Item-Active > :first-child > svg:first-child {
4259
4549
  pointer-events: none;
4260
4550
  }
4261
4551
 
4262
- li.CanvasXpressListItemActive > :first-child > div:last-child,
4263
- li.CanvasXpressListItemActive > :first-child > input:last-child {
4552
+ .cX-Menu-Item-Active > :first-child > div:last-child,
4553
+ .cX-Menu-Item-Active > :first-child > input:last-child {
4264
4554
  pointer-events: auto;
4265
4555
  }
4266
4556
 
4267
- li.CanvasXpressListItemScrollTop {
4557
+ .cX-Menu-Item-Scroll-Top {
4268
4558
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAARUlEQVR42mNkQAMXL178z0Ah0NfXZ0Tmo3BAFkhLS+M1IDw8kmHlyuV41Tx9+hTFIjiDWAtggBSLGMmxgFSLGKkRB4QAAILWJXgE49MrAAAAAElFTkSuQmCC);
4269
4559
  background-repeat: no-repeat;
4270
4560
  background-position: 50% 50%;
@@ -4275,7 +4565,7 @@ li.CanvasXpressListItemScrollTop {
4275
4565
  width: 100%;
4276
4566
  }
4277
4567
 
4278
- li.CanvasXpressListItemScrollTopActive {
4568
+ .cX-Menu-Item-Scroll-Top-Active {
4279
4569
  background-color: rgb(219, 236, 244);
4280
4570
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAAbUlEQVR42mNkQAOHb/38z0AhsFVjZ0Tmo3BAFmjIsOHULMLJwKDs1sFwd1cFw5vvuC258eQXikWMyBYoSOC2QIYXYgEMgCx68hm3RQ9eICxihFkgzI/bAk0xVAuQLbr+CrdFbz9CLGKkRhwQAgBYqyubRxy5uAAAAABJRU5ErkJggg==);
4281
4571
  background-repeat: no-repeat;
@@ -4289,7 +4579,7 @@ li.CanvasXpressListItemScrollTopActive {
4289
4579
  width: 100%;
4290
4580
  }
4291
4581
 
4292
- li.CanvasXpressListItemScrollBottom {
4582
+ .cX-Menu-Item-Scroll-Bottom {
4293
4583
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAASUlEQVR42mO8ePHifwYaA0YQAbJIWloar8Lw8EgMsZUrl+PV8/TpUwZ9fX1GRpgAqRYRawHcJ6RaRIoFGJbALCIcyvgBsgUgAACiryV42XltywAAAABJRU5ErkJggg==);
4294
4584
  background-repeat: no-repeat;
4295
4585
  background-position: 50% 50%;
@@ -4300,7 +4590,7 @@ li.CanvasXpressListItemScrollBottom {
4300
4590
  width: 100%;
4301
4591
  }
4302
4592
 
4303
- li.CanvasXpressListItemScrollBottomActive {
4593
+ .cX-Menu-Item-Scroll-Bottom-Active {
4304
4594
  background-color: rgb(219, 236, 244);
4305
4595
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAAcklEQVR42mM8fOvnfwYaA0YQAbJImJ8NpyJNMQYGZbcODPG7uyoYrr/Cbfjbj78YbNXYGRlhAiCLFCRwWyTDi2oRyIInn3Fb8OAFxAK4T5At0pDBbZEIJ8QikAVvvuO24MYThAUYlsAsIjPo4QDZAhAAAK/AK5vjVTSgAAAAAElFTkSuQmCC);
4306
4596
  background-repeat: no-repeat;
@@ -4314,17 +4604,10 @@ li.CanvasXpressListItemScrollBottomActive {
4314
4604
  width: 100%;
4315
4605
  }
4316
4606
 
4317
- li.CanvasXpressListItemScrollSearch {
4318
- border-color: rgb(170, 204, 246);
4319
- border-style: solid;
4320
- border-width: 1px;
4321
- width: 100%;
4322
- }
4323
-
4324
- input.CanvasXpressListItemScrollSearch {
4325
- color: var(--cx-font-color);
4607
+ .cX-Menu-Item-Scroll-Search {
4608
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4326
4609
  cursor: default;
4327
- font: var(--cx-x-large-font);
4610
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4328
4611
  line-height: 24px;
4329
4612
  list-style: none;
4330
4613
  margin: 3px;
@@ -4334,14 +4617,14 @@ input.CanvasXpressListItemScrollSearch {
4334
4617
  width: 93%;
4335
4618
  }
4336
4619
 
4337
- a.CanvasXpressListItemA {
4620
+ .cX-Menu-Item-A {
4338
4621
  border-color: rgba(0, 0, 0, 0);
4339
4622
  border-style: solid;
4340
4623
  border-width: 0px 1px;
4341
- color: var(--cx-font-color);
4624
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4342
4625
  cursor: pointer;
4343
4626
  display: flex;
4344
- font: var(--cx-x-large-font);
4627
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4345
4628
  line-height: 24px;
4346
4629
  list-style: none;
4347
4630
  margin: 0px;
@@ -4353,14 +4636,14 @@ a.CanvasXpressListItemA {
4353
4636
  white-space: nowrap;
4354
4637
  }
4355
4638
 
4356
- a.CanvasXpressListItemAActive {
4357
- border-color: rgb(170, 204, 246);
4639
+ .cX-Menu-Item-A-Active {
4640
+ border-color: var(--cx-context-menu-border-color, rgb(170, 204, 246));
4358
4641
  border-style: solid;
4359
4642
  border-width: 0px 1px;
4360
- color: var(--cx-font-color);
4643
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4361
4644
  cursor: pointer;
4362
4645
  display: flex;
4363
- font: var(--cx-x-large-font);
4646
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4364
4647
  line-height: 24px;
4365
4648
  list-style: none;
4366
4649
  margin: 0px;
@@ -4372,15 +4655,15 @@ a.CanvasXpressListItemAActive {
4372
4655
  white-space: nowrap;
4373
4656
  }
4374
4657
 
4375
- a.CanvasXpressListItemAArrow {
4658
+ .cX-Menu-Item-A-Arrow {
4376
4659
  background: url(data:image/gif;base64,R0lGODlhDAAJAIcAACluvipxvzJ1vyxwwCt1yjp6zkD/QDiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAYALAAAAAAMAAkAAAgzAA8YGEiwoAEFCQwaJEABgUKCBCRMYPDQAIEHESAIeEjAQYMAFQksAFDR4oCSBgqgNBAQADs=) no-repeat scroll right 50% transparent;
4377
4660
  border-color: rgba(0, 0, 0, 0);
4378
4661
  border-style: solid;
4379
4662
  border-width: 0px 1px;
4380
- color: var(--cx-font-color);
4663
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4381
4664
  cursor: pointer;
4382
4665
  display: flex;
4383
- font: var(--cx-x-large-font);
4666
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4384
4667
  line-height: 24px;
4385
4668
  list-style: none;
4386
4669
  margin: 0px;
@@ -4392,15 +4675,15 @@ a.CanvasXpressListItemAArrow {
4392
4675
  white-space: nowrap;
4393
4676
  }
4394
4677
 
4395
- a.CanvasXpressListItemAArrowActive {
4678
+ .cX-Menu-Item-A-Arrow-Active {
4396
4679
  background: url(data:image/gif;base64,R0lGODlhDAAJAIcAACluvipxvzJ1vyxwwCt1yjp6zkD/QDiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAYALAAAAAAMAAkAAAgzAA8YGEiwoAEFCQwaJEABgUKCBCRMYPDQAIEHESAIeEjAQYMAFQksAFDR4oCSBgqgNBAQADs=) no-repeat scroll right 50% transparent;
4397
- border-color: rgb(170, 204, 246);
4680
+ border-color: var(--cx-context-menu-border-color, rgb(170, 204, 246));
4398
4681
  border-style: solid;
4399
4682
  border-width: 0px 1px;
4400
- color: var(--cx-font-color);
4683
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4401
4684
  cursor: pointer;
4402
4685
  display: flex;
4403
- font: var(--cx-x-large-font);
4686
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4404
4687
  line-height: 24px;
4405
4688
  list-style: none;
4406
4689
  margin: 0px;
@@ -4412,13 +4695,12 @@ a.CanvasXpressListItemAArrowActive {
4412
4695
  white-space: nowrap;
4413
4696
  }
4414
4697
 
4415
- img.CanvasXpressListIcon,
4416
- svg.CanvasXpressListIcon {
4698
+ .cX-Menu-List-Icon {
4417
4699
  background-position: center;
4418
4700
  border: 0px none !important;
4419
- color: var(--cx-font-color);
4701
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4420
4702
  cursor: pointer;
4421
- font: var(--cx-x-large-font);
4703
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4422
4704
  height: 24px;
4423
4705
  line-height: 24px;
4424
4706
  list-style: none;
@@ -4434,27 +4716,21 @@ svg.CanvasXpressListIcon {
4434
4716
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
4435
4717
  }
4436
4718
 
4437
- span.CanvasXpressListItemText {
4438
- color: var(--cx-font-color);
4719
+ .cX-Menu-Item-Text {
4720
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4439
4721
  cursor: pointer;
4440
- font: var(--cx-x-large-font);
4722
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4441
4723
  line-height: 24px;
4442
4724
  list-style: none;
4443
- margin-right: 10px;
4444
4725
  white-space: nowrap;
4445
4726
  }
4446
4727
 
4447
- input.CanvasXpressListItemText {
4448
- color: var(--cx-font-color);
4449
- cursor: pointer;
4450
- font: var(--cx-x-large-font);
4451
- line-height: 24px;
4452
- list-style: none;
4453
- white-space: nowrap;
4728
+ span.cX-Menu-Item-Text {
4729
+ margin-right: 10px;
4454
4730
  }
4455
4731
 
4456
- span.CanvasXpressListItemTextShort {
4457
- color: var(--cx-font-color);
4732
+ .cX-Menu-Item-Text-Short {
4733
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4458
4734
  cursor: pointer;
4459
4735
  float: right;
4460
4736
  font: var(--cx-small-font-italic);
@@ -4465,13 +4741,13 @@ span.CanvasXpressListItemTextShort {
4465
4741
  white-space: nowrap;
4466
4742
  }
4467
4743
 
4468
- span.CanvasXpressListItemTextSep {
4469
- background-color: rgb(224, 224, 224);
4744
+ .cX-Menu-Item-Text-Sep {
4745
+ background-color: var(--cx-context-menu-hover-color, rgb(224, 224, 224));
4470
4746
  border-bottom: 1px solid;
4471
4747
  border-bottom-color: rgb(255, 255, 255);
4472
4748
  display: block;
4473
- font: var(--cx-x-large-font);
4474
- color: var(--cx-font-color);
4749
+ font: var(--cx-small-font-size) var(--cx-font-family);
4750
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4475
4751
  font-size: 1px;
4476
4752
  line-height: 1px;
4477
4753
  list-style: none;
@@ -4479,351 +4755,7 @@ span.CanvasXpressListItemTextSep {
4479
4755
  overflow: hidden;
4480
4756
  white-space: nowrap;
4481
4757
  }
4482
-
4483
- table.CanvasXpressListItemTable {
4484
- border: collapse;
4485
- line-height: 20px;
4486
- color: var(--cx-font-color);
4487
- font: var(--cx-x-large-font);
4488
- color: var(--cx-font-color);
4489
- line-height: 24px;
4490
- padding-left: 3px;
4491
- }
4492
-
4493
- img.cX-Toolbar-Help,
4494
- svg.cX-Toolbar-Help {
4495
- background: rgba(0, 0, 0, 0) !important;
4496
- border: 0px none !important;
4497
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
4498
- float: right;
4499
- margin: 0px 0px 0px 2px !important;
4500
- }
4501
-
4502
- div.cX-Toolbar-Help {
4503
- box-sizing: border-box;
4504
- background-color: rgb(255, 255, 255);
4505
- border-radius: var(--cx-border-radius);
4506
- border: 1px solid rgb(83, 105, 255);
4507
- box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4508
- color: var(--cx-font-color);
4509
- font: var(--cx-x-large-font);
4510
- line-height: 24px;
4511
- }
4512
-
4513
- p.cX-Toolbar-Help {
4514
- font: var(--cx-x-large-font);
4515
- color: var(--cx-font-color);
4516
- line-height: 24px;
4517
- margin: 0px;
4518
- padding: 5px 5px 5px 20px;
4519
- }
4520
-
4521
- div.CanvasXpressForm {
4522
- box-sizing: border-box;
4523
- border: 1px solid rgb(83, 105, 255);
4524
- border-radius: var(--cx-border-radius);
4525
- background-color: rgb(255, 255, 255);
4526
- color: var(--cx-font-color);
4527
- cursor: move;
4528
- font: var(--cx-x-large-font);
4529
- margin: 8px;
4530
- padding: 8px;
4531
- position: absolute;
4532
- white-space: nowrap;
4533
- }
4534
-
4535
- input.CanvasXpressFormButton {
4536
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mP88OHDf0aSiGfPntGaAAAL8XAJa+SuYgAAAABJRU5ErkJggg==);
4537
- background-repeat: repeat-x;
4538
- border: 1px solid rgb(83, 105, 255);
4539
- border-radius: 5px 5px 5px 5px;
4540
- color: var(--cx-font-color);
4541
- cursor: pointer;
4542
- float: left;
4543
- height: 22px;
4544
- margin-top: 2px;
4545
- overflow: hidden;
4546
- padding: 2px;
4547
- vertical-align: middle;
4548
- }
4549
-
4550
- input.CanvasXpressFormButtonActive {
4551
- background-color: rgb(255, 255, 255);
4552
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mN89fnvf0aSiBvPf9GaAABVL3D5nF6uqAAAAABJRU5ErkJggg==);
4553
- background-repeat: repeat-x;
4554
- border: 1px solid rgb(83, 105, 255);
4555
- border-radius: 5px 5px 0px 0px;
4556
- color: var(--cx-font-color);
4557
- cursor: pointer;
4558
- float: left;
4559
- height: 22px;
4560
- margin-top: 2px;
4561
- overflow: hidden;
4562
- padding: 2px;
4563
- vertical-align: middle;
4564
- }
4565
-
4566
- input.CanvasXpressFormText {
4567
- background-color: rgb(255, 255, 255);
4568
- border: 1px solid rgb(83, 105, 255);
4569
- color: var(--cx-font-color);
4570
- font: var(--cx-x-large-font);
4571
- line-height: 24px;
4572
- padding-left: 3px;
4573
- }
4574
-
4575
- form.CanvasXpressFormForm {
4576
- background-color: rgb(255, 255, 255);
4577
- border: 1px solid rgb(83, 105, 255);
4578
- color: var(--cx-font-color);
4579
- font: var(--cx-x-large-font);
4580
- line-height: 24px;
4581
- margin: 8px;
4582
- overflow: auto;
4583
- padding-left: 3px;
4584
- }
4585
-
4586
- div.CanvasXpressConfiguratorColor {
4587
- box-sizing: content-box;
4588
- border: 1px solid rgb(83, 105, 255);
4589
- font: var(--cx-font);
4590
- color: rgb(34, 34, 34);
4591
- line-height: 18px;
4592
- }
4593
-
4594
- div.CanvasXpressConfiguratorColorMain {
4595
- box-sizing: content-box;
4596
- background-image: url(data:image/png;base64,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);
4597
- background-repeat: no-repeat;
4598
- box-sizing: content-box;
4599
- border: none;
4600
- font: var(--cx-font);
4601
- color:var(--cx-font-color);
4602
- float: left;
4603
- cursor: crosshair;
4604
- }
4605
-
4606
- div.CanvasXpressConfiguratorColorExtra {
4607
- box-sizing: content-box;
4608
- background-image: url(data:image/gif;base64,R0lGODlhDwAPAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=);
4609
- background-repeat: no-repeat;
4610
- border: none;
4611
- font: var(--cx-font);
4612
- color: var(--cx-font-color);
4613
- cursor: crosshair;
4614
- overflow: hidden;
4615
- }
4616
-
4617
- /*
4618
- * Slider
4619
- */
4620
-
4621
- div.CanvasXpressSlider {
4622
- background: rgba(0, 0, 0, 0);
4623
- border: 1px solid rgba(35, 82, 124, 0.2);
4624
- border-radius: 50%;
4625
- height: 36px;
4626
- position: absolute;
4627
- margin-left: 3px;
4628
- margin-right: 3px;
4629
- width: 36px;
4630
- }
4631
-
4632
- div.CanvasXpressSliderRemote {
4633
- background: rgba(0, 0, 0, 0);
4634
- height: 36px;
4635
- position: absolute;
4636
- margin-left: 3px;
4637
- margin-right: 3px;
4638
- width: 36px;
4639
- }
4640
-
4641
- div.CanvasXpressSlider:hover {
4642
- background: rgba(0, 0, 0, 0.4);
4643
- }
4644
-
4645
- @media screen and (max-width: 480px) {
4646
- div.CanvasXpressSlider {
4647
- width: 20px;
4648
- height: 20px;
4649
- }
4650
- }
4651
-
4652
- div.CanvasXpressSliderLeft {
4653
- left: -50px;
4654
- }
4655
-
4656
- div.CanvasXpressSliderLeft img,
4657
- div.CanvasXpressSliderLeft svg {
4658
- margin: 5px 5px 3px 3px;
4659
- }
4660
-
4661
- @media screen and (max-width: 480px) {
4662
- div.CanvasXpressSliderLeft {
4663
- left: -25px;
4664
- }
4665
-
4666
- div.CanvasXpressSliderLeft img,
4667
- div.CanvasXpressSliderLeft svg {
4668
- margin: -4px 0px 0px -2px;
4669
- }
4670
- }
4671
-
4672
- div.CanvasXpressSliderRight {
4673
- right: -50px;
4674
- }
4675
-
4676
- div.CanvasXpressSliderRight img,
4677
- div.CanvasXpressSliderRight svg {
4678
- margin: 5px 3px 3px 8px;
4679
- }
4680
-
4681
- @media screen and (max-width: 480px) {
4682
- div.CanvasXpressSliderRight {
4683
- right: -25px;
4684
- }
4685
-
4686
- div.CanvasXpressSliderRight img,
4687
- div.CanvasXpressSliderRight svg {
4688
- margin: -4px -2px 0px 2px;
4689
- }
4690
- }
4691
-
4692
- div.CanvasXpressSliderDotsContainer {
4693
- top: 25%;
4694
- }
4695
-
4696
- div.CanvasXpressSliderDots {
4697
- width: 10px;
4698
- height: 10px;
4699
- }
4700
-
4701
- @media screen and (max-width: 480px) {
4702
- div.CanvasXpressSliderDots {
4703
- width: 5px;
4704
- height: 5px;
4705
- margin-left: 1px;
4706
- margin-right: 1px;
4707
- }
4708
- }
4709
-
4710
- input.CanvasXpressSlider,
4711
- select.CanvasXpressSlider {
4712
- padding: 2px 3px 2px 2px;
4713
- cursor: default;
4714
- color: var(--cx-font-color);
4715
- border-left: none;
4716
- border-right: none;
4717
- border-top: none;
4718
- border-bottom: 1px solid rgb(83, 105, 255);
4719
- background: rgba(0, 0, 0, 0);
4720
- width: 100%;
4721
- max-Width: 100%;
4722
- line-height: 22px;
4723
- margin: 0;
4724
- }
4725
-
4726
- input.CanvasXpressSlider:focus,
4727
- select.CanvasXpressSlider:focus {
4728
- outline: 0;
4729
- }
4730
-
4731
- /*
4732
- * Parent Node
4733
- */
4734
-
4735
- div.CanvasXpress-ParentNode {
4736
- display: flex;
4737
- flex-direction: column;
4738
- max-width: -webkit-fill-available;
4739
- width: fit-content;
4740
- -moz-transform: none;
4741
- -webkit-transform: none;
4742
- -o-transform: none;
4743
- -ms-transform: none;
4744
- transform: none;
4745
- }
4746
-
4747
- /*
4748
- * CanvasXpress
4749
- */
4750
-
4751
- canvas.CanvasXpress {
4752
- width: 100%;
4753
- height: 100%;
4754
- display: block;
4755
- flex-grow: 1;
4756
- -moz-user-select: none;
4757
- -khtml-user-select: none;
4758
- -webkit-user-select: none;
4759
- -o-user-select: none;
4760
- user-select: none;
4761
- -ms-user-select: none;
4762
- }
4763
-
4764
- canvas.CanvasXpress:hover {
4765
- border: 1px solid rgba(35, 82, 124, 0.2);
4766
- border-radius: 6px;
4767
- margin: -1px;
4768
- }
4769
-
4770
- canvas.CanvasXpressUpload {
4771
- border: 1px solid rgba(35, 82, 124, 0.2);
4772
- border-radius: 6px;
4773
- margin: -1px;
4774
- background-image: url('data:image/png;base64,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');
4775
- background-size: contain;
4776
- background-repeat: no-repeat;
4777
- }
4778
-
4779
- canvas.CanvasXpress::selection {
4780
- background: rgba(0, 0, 0, 0);
4781
- color: rgb(0, 0, 0);
4782
- }
4783
-
4784
- div.CanvasXpressPlay {
4785
- background-color: rgba(0, 0, 0, 0.05);
4786
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAARtElEQVR42u2dB7gdRRXHT0AUMdIEARF5IBEpIh9GQIh4RSw0AwjYKIpUQQUpghUbICIWLIiU2OgoVQxFnijSFKWpFOGpFCUiLQpY0Pm92U0um5md2Tpz793/950vedvu7MzZmdNnigwfpihaWdFaisYSepGiZRN6nqJnK3qGoqnJPXMV/UfR44oeVDQnoT8pmkjoluTv/4V+wbo7a9CxvKIZijZStIGitRUt3tBvParoZkXXKfqFop8r+kvoDqiCQWSAZyrqKXqjos0VrRG4Pb9TdLGi2YrGFf0rcHsKYVAYgOn6dYrermgbRUuEbpAFjyg6V9Fpii4XvaxEjdgZ4MWKdkto+dCNKQiWhpMVnaTortCNsSFWBugpOkjRFhXbiHA3kdC9ogU86CFFTyl6MrnuWYoWUrSUaCERWlHmC5FTvX9xQSA0XqToC6KXiKgQEwPQljcr+qii6SXuR2pHKENAu0m0sPbnmtq2kqKXKVpH0fqihc5lSzznl4o+o+i8OjuuCmJhgM0UfVrRhgXuQWUbFy2AXaLotpbbvLqiN4gWRHuiVUtfXKPoY4oua7nNCyA0A7xE0bGKtvS8/gnR0+lZyb9zA7c/xdTkHXZI/l3U8z7e4QBFd4RqeCgGoIM+oeiDotU6F5jOT1T0PUV/D9RmXyytaCdFu4teNlxAbeQjOFzmyyStIQQD9BSdoGia4zqEJ6Z3OufyAO2sA6iuCLPYLFx9zSywp7QsKLbJAEjaRyra3/G7DDxC0icV/abNzmgQ64qe8WZ6vPuXFB0qLRmU2mKANUUbR9ZxXDcueln4dUvtahvriVYHe47rblT0DkW/bbpBbTAAghEGkTxd+m5FByr6YQvtiQHbKTpG0So51yDgYgA7q8mGNMkACys6SvTA2n4HU+mXFX1c0T+bfNEIsZiiT4leEhe2XMOSwIzBkvDfJhrRFAOgEzPlz8y5BifKzop+1VAbBgWvEK3dvDTnGvwLLAmP1/3jTTDAMqKl9zxr3vGiZ4ZR++ptYDbgS98755rrRZvG/1bnD9fNANjPsW7ZuLmVdW2AsaNo55FNXmLWfL1ov0YtqJMBVhXtE1/Ncv52RdtKC5LtgINIJoRhm53kTtEm6Lvr+LG6GIAvf1zsg/8z0YP/YF29NOTAG8m6P8NyHiboSQ0zQR0MwJrPANum/TMU7SoBzJwDDgxn3xG9LJjAcrCJVJQJqjIA0v6VYhf4sN8j2DSiwowAUA+/qeg9lvMIhq+RCtpBFQagceeIXdX7hqJ9ZciiaAOAMfqaon0s51kqtpeSH1kVBvi8aEeHCXz5ODa6wa8HjBN9upvlPFbFg8s+uAww755pOcea/07ppv26wYx7qphlAj60t0oJ9boMA+DYuVbMuirCIHpqJ/A1AwRD7Cwm7QAbC3kRhdTsogxAA4i5M3n10PNJzuhUvWaBini1mO0EeBFhAu8PsCgDEJxxgOF4Ke7rUBoYi4grNM3CXxTtUvdCEQboKfqJ5R7Wpc682y7o8zMMx5EHNhXPyCJfBkDfZ3oxTTs4dvbxfE6HeoGqbXIgEV7GMv2E6wG+DIBf/0OG41ijMAJ1Xr0wwIuIO91khWXMDnM9wIcBCN0mKjcbvUswx4bS+fNDg3gCtLJsUAkxhWRK54ac+zDAhWKO2y9tfOhQOxiLAw3HGbut8250MQAZO5cajuOKhLtCTP3owGOibQ5/DPD7MYKlgAIWphhD7DLWDKQ8BuAcRRBM6VoENYYI4ETg3Cv5P1PccaLj6h4N0JbYwJicYziOuvgq2015DICT51zD8XFFrw3wgki1NxqOPyA6oZRImqcCtCsmXCHmkHPG8nzTDXkMgKsx6+ZFx0ToCBG3b2PIFCSRvF/00jCqYGwYt+y4kpX8StMNNgboieamLBiAbQO9nIsBUuCkOkRGVz5gad7GcJxZezx70MYAJsmfr5/MllDpWr4MAAiQwF39ORk9GwVpaDfIgmNr1AhMDEBZljsM534k/mncTaAIA6S4R7QBixyFUYpNICz/TZljvD8xm08rV2NigM8q+rDhOCphyCxdGwMg+C3kuBdthgyc6wO2v02QlWxS/Y5Q9JH+A1kGWER0McRsQSYsga7EzqZhYwAEVdLLNnbcD6MQZEma1V8Dv0sboExOtj4BhasodzOvelmWAchj/7HhYUjXxwV+IRsDTEmIiJijkxfMw2OiZzncpgNV068gPiA61TwLlobZ6R9ZBvi2ol0yx/AoEfcfujJHHgOkwCJ2SEKumj2shfjNoynYVDOoVELeQLZczSxF707/6O88on2YGrNFGLEubR/6bcSPAVIwC6AF7ChuczdrJUEut4R+wQZwtqK3ZI5RzHI5SaKG+juHdKPZhoe8TcyBB22jCAOkwG+AfLCe49msicTfk6YeeqarEyyLpxuOM9aTPp7+zmNN3D9zIfo09fD+EfpNpBwDADQEpjzW/eUc1zL4h4sOtIi+zKsHCBnDVJ5dDgntm/Qe9nce8XzZwsvok1uEfosEZRkgBUsbKhDCkasy2a2il4VLXQ8dAGC/2TxzjEAeorvndd4Kiu4z3ByD9J+iKgOkIKyNXPytPa7FgYKg+IfQL18B71P0FcPxFyi6P+08hDxTUCfVMG8P/QYJ6mKAFKyDLHtrOq5DVUSdosTrY6E7oQQYw98bjpPcc3baeaZwb9YO15rZJupmAEAZ+veKXveXclyLhoSFdJYMntuZsczWNp4MH0877yrRSR39wKu0XeiW96EJBkhBsgW1ivcQzRR5IAYSOeKq0B1SAPRbNomX9s9IrWgPy4LbrBBRelTolvehSQZIQZgbauOmjutwrKBe4WiqqyJ5k8D8fWTmGFFUS9J5Y2IuN4L0f3HolvehDQZIQcwDgZarOq7D1Xx0QrVX8KoReHEvNBxfZUrOSXbaiom722QAgAkVuwjr/nMd1+JAw/xMMEqMbueVkjZmsSWdRxGHr2ZOzPV46bbRNgOkQF3CiLSrx2+xYQWqc4ylbhnT52SO7ccLmQo9YBf3KXXeJkIxQApi6tCnXZtaoCGcInrmeKC13nEDl/7amWPH0HnY+bNFBy4QvX1LTAjNAOlvUbGTULMVHdciZGE7wIbw7xbbaANjulXm2Jm8EBm/2TBvHCN7+zy1RcTAACmYSpGssae73M53JNddEKCd/WBM98wcu4LOM00NC4QORYCYGCAFW9SyhO7gcS2eVszKoWooMKbZZNFb6Dx8ACtkTsCxxwZqqA0xMkAKSrUx1a/ruA4P49dFWx4farmNjOkxmWOTvgAasmTmBO7TWS030IWYGQCQnUs9PyyKz3dcSxkdhMRvSXtqIxXGTsoce5jOw8GRLTXyLtHhYTEhdgZIwcfElnB44RZxXHu46K1x2gBq7KzMscfoPBMHskfv6a4ntoxBYYAU1FVgWdg85xpmgmVaag9jemr2YMcAzcGHAajzW2YH0jKwMkC3BNQLIo/YIWw/cS8BaFpHtNQu6xLQCYH1IBUCMf64vmoshNgRTmmxfVYhsFMDqwM1EDfyyx3XEV2EORkmeaTlNlrVwM4QVB5jol3BPoYgPK4YgkLtE2w1BJmqSnSm4HyQgYQez4C6TMFE4BJuN9v10IZhNQWbnEHO6lIBEAMD8FtUQidSyuUMQrZCx6fWfww5BlZnUOcO9oOvO5jBxsJHllGtW7xVhNUd3AWE5AMBmXi6XTx+i+WUgNGbW+8dN8juWixzbL8uJMwOkmVZuxGGpzqujX3vY8bSVDNpMiSM4oJ3mU6KTiuKBTEGhTJTEi6Gxc9ZmDkgcoNCu7Dw+UDuYTB9wsKpNoImcJ/roREgNywcdIkh/okhVN5knb8udIcUQG5iCOhSw9ypYVTb4Ev6vsQZ+p0HZ2qYLTmUOvS3hW59giaSQ5nu13BcR8IHHwhTaAx1EorCKzl01NLDGdCtPK6lxAol8SdCv3wFeKWHg2EvEIGQS6QOTO0qEEFRatb5n4Z+6RrgVSACUDQhu9sU0x/xbXNDv4VUKxGDKxQPnEummSPzK48Pw8aXhUrEDGORqFeLXuddRaJI3MAayt4DD4d+0RphKxI1bxOJYS0Th+ULN61PmTiWOTSgWITdOlGoTByYJTp0qB9YuBAY2o5jz8KHAZjqyNn3KRTJgDPwMaXA1wnUWgT7bKFIopDmbULtWyoWgcgkSbYJn1KxeDZf6HgOUzxTPVN+DDl7TaFUqdhBLRYNc27kuJ+s3dRNG1PWblMwuX+dxaLBMJaLR53ji7hRRgOly8WDYdowYkK0IefsgO0OAduGEYzt08oB2SRkU/jQIG0Zg8kW0y36bsy1e5pA5S1jQE8Gc9MomJTsF7SAQXDTNgHbplE9MVg2h2nbONyzrPPXBGhbLKht2zgQ28aRBGvcZDjOl47QSoDGoLlp60atG0fGuHUsuvu+yf+xZKVu2kGs4Vs3sPiZhN3SW8eCGDeP5mWI1WM9uyfA78cIon0pcT9mOFd68+gUtu3j8R4e5HF/h+bR2PbxgAAKEkWyPnTcpRuILp7cIRwQ/K4VnZ3cDxJRmaVzcxF9gylYZw81HCewAE1h1LZnjQVM/ej8qxvOEdF9mOsBvgyAZw0z6jTDueMV7RO6J0YU7G1kSuLlq8d348xVKBJP1xNdVNJ0D564M0P3xoiBWAdToA6qMGq6Vzhb0YBKU/g4IGQMdfHW0L0yIlhLtHpnSlmbDPf2fVBRBiBqCIubyTXMtAMTDNO+ezGCJJarxbwcs0wjmD/p+7AyMfVEkyJ1mriPcumbFWlAh0Iguge7zAzDOWbh9UUL5t4om1RBUsEZlvuRBaioPQxRtTEBNQ9H146Gc6z7yGFnFXqiVEurMhWWSEFY9R7S2ebrAuN0ovTF8mWAIejgsg8uCziSiOGZlvOoKNjtOyaoBsaIMjM2VRuHHVHbpWbcqpm1GCJQN6ZbzjMT7FW2cR0mP7ITxP7l4/rtSQVDXB2p1WSdXik6kdQEZIKdRZsmO/gD0/t3xbzmA4Q96hPOqfIjdRVXoGLWuKLVLOfRDlgqOhXRD0srOk/M0j64U/SXf2/VH6qzugalZi4ROxNgJyCcrDMW5QMjD7EW0yznGXxcvBN1/Fjd9XWYCfA925YDdFXq6XZmYzOY7pGbbEWpmPYZ/MpffoomCiwhExBCPj3nGhxImCtHLWLXBoRp4ivyqrMi8BGXUWnNz6KpEmu8EKVUtsm5hqoVO0kXT4A/n75aPecaVD0qlNbudm+yyCIqDD7pA3N+B/WQ/DUKN4zabICLncJUbE+7sOUabCjMDMRiNKJKt1FmFbPxyZJfbJEYQ6yKP2ihPTGAAE6sd2M51yAvof8XNu8WQVt1dnEgnSbuBNNx0TPGDS21q20w3TPwPcd1ePXY4qWQY6cM2qy0jSuZ0LL9Hb/LtIcOTKXtUGlodYN0LbaRmenx7iyJhHK14lENUWu/J9q8Oc1xHZ1BHjtfTMis5CogS5eljboLrr7GTkI9//E2Gxhqtw0EIPL0UQVdFbsAue7ox2T/hK5U4gKVOagsvrssmJ9vAiZyIq2Y8VqvNxx6vx1mAUKYfNPO6aCLRAtGxLzHUriRzaTJpt4heZdFPe8LvY1McAZIQRQRKpFrM4Z+oDaOi86FxwTddpEn9HYqq1GDryfumkT9IJ4P1feyAvc0glgYIAVCEnX6ppe4FwsZuYx0LksGiaR17XdAWRU0GBJUYVLK0ZTZ8JEsXRj9/BL3NoLYGCBFT7Q6uGXFNrJEYGOYEG0/xxvJdq3IERhWUhc1cgjGGNZvgi7xxuHXGBOdh7hYgd/MAmGWZQuDznjrPelArAyQgs7HeYRBZPmKz2obFGTCAIbwelfFZzWG2BkgBdXL2MSBqqW4lJeo9rjGQBFGXLlU5ySJJvoydIPCAP3AoLSJ6CJICGCucu9NA2sdgij1FYmMGqiQ+EFkgCwodb+xaMGMuHgEtcUrPdEOtllBwCQ5BoGTXTfuD90BVTAMDGB6p5VF+x+IUhoTXTt42YQQ8lDZ2C0kdVDheKF4IqolQuKchCiaOSFakKScPjtvDVWU8/8BFWavcIiHLzgAAAAASUVORK5CYII=');
4787
- background-position-x: 50%;
4788
- background-position-y: center;
4789
- background-size: 25%;
4790
- background-repeat: no-repeat;
4791
- position: absolute;
4792
- }
4793
-
4794
- div.CanvasXpressPlay:hover {
4795
- background-color: rgba(0, 0, 0, 0);
4796
- }
4797
-
4798
- div.CanvasXpressContainer {
4799
- box-sizing: border-box;
4800
- position: relative;
4801
- float: left;
4802
- }
4803
-
4804
- div.CanvasXpressWrapper {
4805
- box-sizing: border-box;
4806
- position: relative;
4807
- float: left;
4808
- line-height: 100%;
4809
- }
4810
-
4811
- /* Hide Efect */
4812
-
4813
- .appear {
4814
- transition: all var(--cx-transition-speed) linear;
4815
- opacity: 1;
4816
- }
4817
-
4818
- .dissapear {
4819
- display: none;
4820
- }
4821
-
4822
- .dissapearHidden {
4823
- transition: all var(--cx-transition-speed) linear;
4824
- opacity: 0;
4825
- }
4826
-
4758
+ /* @category: widget */
4827
4759
  /***********
4828
4760
  * Resizer *
4829
4761
  ***********/
@@ -4835,8 +4767,8 @@ div.CanvasXpressWrapper {
4835
4767
  background: rgb(83, 105, 255);
4836
4768
  color: white;
4837
4769
  padding: 4px 10px;
4838
- border-radius: 4px;
4839
- font-size: 12px;
4770
+ border-radius: var(--cx-border-radius);
4771
+ font-size: var(--cx-small-font-size);
4840
4772
  font-weight: bold;
4841
4773
  pointer-events: none;
4842
4774
  opacity: 0;
@@ -4919,6 +4851,7 @@ div.CanvasXpressWrapper {
4919
4851
  cursor: se-resize !important;
4920
4852
  }
4921
4853
 
4854
+ /* @category: shared */
4922
4855
  /******************
4923
4856
  * New Viewport *
4924
4857
  ******************/
@@ -5112,6 +5045,7 @@ body.has-fullscreen {
5112
5045
  * End Viewport *
5113
5046
  ******************/
5114
5047
 
5048
+ /* @category: shared */
5115
5049
  /* Magic Effects */
5116
5050
 
5117
5051
  /*