active_analytics 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +53 -0
  4. data/Rakefile +18 -0
  5. data/app/assets/config/active_analytics_manifest.js +1 -0
  6. data/app/assets/javascripts/active_analytics/application.js +3 -0
  7. data/app/assets/javascripts/active_analytics/ariato.js +746 -0
  8. data/app/assets/stylesheets/active_analytics/application.css +33 -0
  9. data/app/assets/stylesheets/active_analytics/ariato.css +3548 -0
  10. data/app/assets/stylesheets/active_analytics/charts.css +2606 -0
  11. data/app/controllers/active_analytics/application_controller.rb +4 -0
  12. data/app/controllers/active_analytics/pages_controller.rb +22 -0
  13. data/app/controllers/active_analytics/referrers_controller.rb +18 -0
  14. data/app/controllers/active_analytics/sites_controller.rb +16 -0
  15. data/app/helpers/active_analytics/application_helper.rb +4 -0
  16. data/app/helpers/active_analytics/pages_helper.rb +15 -0
  17. data/app/helpers/active_analytics/referrers_helper.rb +4 -0
  18. data/app/helpers/active_analytics/sites_helper.rb +4 -0
  19. data/app/jobs/active_analytics/application_job.rb +4 -0
  20. data/app/mailers/active_analytics/application_mailer.rb +6 -0
  21. data/app/models/active_analytics/application_record.rb +5 -0
  22. data/app/models/active_analytics/views_per_day.rb +100 -0
  23. data/app/views/active_analytics/pages/_table.html.erb +21 -0
  24. data/app/views/active_analytics/pages/index.html.erb +12 -0
  25. data/app/views/active_analytics/pages/show.html.erb +23 -0
  26. data/app/views/active_analytics/referrers/_table.html.erb +14 -0
  27. data/app/views/active_analytics/referrers/index.html.erb +8 -0
  28. data/app/views/active_analytics/referrers/show.html.erb +14 -0
  29. data/app/views/active_analytics/sites/_histogram.html.erb +19 -0
  30. data/app/views/active_analytics/sites/index.html.erb +7 -0
  31. data/app/views/active_analytics/sites/show.html.erb +16 -0
  32. data/app/views/layouts/active_analytics/_footer.html.erb +6 -0
  33. data/app/views/layouts/active_analytics/_header.html.erb +25 -0
  34. data/app/views/layouts/active_analytics/application.html.erb +19 -0
  35. data/config/routes.rb +13 -0
  36. data/db/migrate/20210303094108_create_active_analytics_views_per_days.rb +20 -0
  37. data/lib/active_analytics.rb +22 -0
  38. data/lib/active_analytics/engine.rb +5 -0
  39. data/lib/active_analytics/version.rb +3 -0
  40. data/lib/tasks/active_analytics_tasks.rake +4 -0
  41. metadata +100 -0
@@ -0,0 +1,2606 @@
1
+ /*
2
+ * Charts.css v0.9.0 (https://ChartsCSS.org/)
3
+ * Copyright 2020 Rami Yushuvaev
4
+ * Licensed under MIT
5
+ */
6
+ .charts-css {
7
+ --color-1: rgba(240, 50, 50, 0.75);
8
+ --color-2: rgba(255, 180, 50, 0.75);
9
+ --color-3: rgba(255, 220, 90, 0.75);
10
+ --color-4: rgba(100, 210, 80, 0.75);
11
+ --color-5: rgba(90, 165, 255, 0.75);
12
+ --color-6: rgba(170, 90, 240, 0.75);
13
+ --color-7: rgba(180, 180, 180, 0.75);
14
+ --color-8: rgba(110, 110, 110, 0.75);
15
+ --color-9: rgba(170, 150, 110, 0.75);
16
+ --color-10: rgba(130, 50, 20, 0.75);
17
+ --chart-bg-color: #f5f5f5;
18
+ --heading-size: 0px;
19
+ --primary-axis-color: rgba(0, 0, 0, 1);
20
+ --primary-axis-style: solid;
21
+ --primary-axis-width: 1px;
22
+ --secondary-axes-color: rgba(0, 0, 0, .15);
23
+ --secondary-axes-style: solid;
24
+ --secondary-axes-width: 1px;
25
+ --data-axes-color: rgba(0, 0, 0, .15);
26
+ --data-axes-style: solid;
27
+ --data-axes-width: 1px;
28
+ --legend-border-color: rgb(200, 200, 200);
29
+ position: relative;
30
+ display: block;
31
+ width: 100%;
32
+ height: 100%;
33
+ margin: 0 auto;
34
+ padding: 0;
35
+ border: 0;
36
+ -webkit-print-color-adjust: exact;
37
+ color-adjust: exact;
38
+ }
39
+
40
+ /*
41
+ * Chart wrapper element
42
+ */
43
+
44
+ .charts-css, .charts-css::after, .charts-css::before,
45
+ .charts-css *,
46
+ .charts-css *::after,
47
+ .charts-css *::before {
48
+ -webkit-box-sizing: border-box;
49
+ box-sizing: border-box;
50
+ }
51
+
52
+ /*
53
+ * Reset table element
54
+ */
55
+ table.charts-css {
56
+ border-collapse: collapse;
57
+ border-spacing: 0;
58
+ empty-cells: show;
59
+ overflow: initial;
60
+ background-color: transparent;
61
+ }
62
+
63
+ table.charts-css caption,
64
+ table.charts-css colgroup,
65
+ table.charts-css thead,
66
+ table.charts-css tbody,
67
+ table.charts-css tr,
68
+ table.charts-css th,
69
+ table.charts-css td {
70
+ display: block;
71
+ margin: 0;
72
+ padding: 0;
73
+ border: 0;
74
+ background-color: transparent;
75
+ }
76
+
77
+ table.charts-css colgroup,
78
+ table.charts-css thead,
79
+ table.charts-css tfoot {
80
+ display: none;
81
+ }
82
+
83
+ /*
84
+ * Reset list elements
85
+ */
86
+ ul.charts-css,
87
+ ol.charts-css {
88
+ list-style-type: none;
89
+ }
90
+
91
+ ul.charts-css li,
92
+ ol.charts-css li {
93
+ margin: 0;
94
+ padding: 0;
95
+ border: 0;
96
+ }
97
+
98
+ /*
99
+ * Chart heading
100
+ */
101
+ .charts-css:not(.show-heading) caption {
102
+ display: none;
103
+ }
104
+
105
+ .charts-css.show-heading {
106
+ --heading-size: 1.5rem;
107
+ }
108
+
109
+ .charts-css.show-heading caption {
110
+ display: block;
111
+ width: 100%;
112
+ height: var(--heading-size);
113
+ }
114
+
115
+ /*
116
+ * Chart colors
117
+ */
118
+ .charts-css.bar tbody tr:nth-of-type(10n + 1) td,
119
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 1),
120
+ .charts-css.column tbody tr:nth-of-type(10n + 1) td,
121
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 1),
122
+ .charts-css.area tbody tr td:nth-of-type(10n + 1)::before,
123
+ .charts-css.line tbody tr td:nth-of-type(10n + 1)::before {
124
+ background: var(--color, var(--color-1));
125
+ }
126
+
127
+ .charts-css.bar tbody tr:nth-of-type(10n + 2) td,
128
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 2),
129
+ .charts-css.column tbody tr:nth-of-type(10n + 2) td,
130
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 2),
131
+ .charts-css.area tbody tr td:nth-of-type(10n + 2)::before,
132
+ .charts-css.line tbody tr td:nth-of-type(10n + 2)::before {
133
+ background: var(--color, var(--color-2));
134
+ }
135
+
136
+ .charts-css.bar tbody tr:nth-of-type(10n + 3) td,
137
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 3),
138
+ .charts-css.column tbody tr:nth-of-type(10n + 3) td,
139
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 3),
140
+ .charts-css.area tbody tr td:nth-of-type(10n + 3)::before,
141
+ .charts-css.line tbody tr td:nth-of-type(10n + 3)::before {
142
+ background: var(--color, var(--color-3));
143
+ }
144
+
145
+ .charts-css.bar tbody tr:nth-of-type(10n + 4) td,
146
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 4),
147
+ .charts-css.column tbody tr:nth-of-type(10n + 4) td,
148
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 4),
149
+ .charts-css.area tbody tr td:nth-of-type(10n + 4)::before,
150
+ .charts-css.line tbody tr td:nth-of-type(10n + 4)::before {
151
+ background: var(--color, var(--color-4));
152
+ }
153
+
154
+ .charts-css.bar tbody tr:nth-of-type(10n + 5) td,
155
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 5),
156
+ .charts-css.column tbody tr:nth-of-type(10n + 5) td,
157
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 5),
158
+ .charts-css.area tbody tr td:nth-of-type(10n + 5)::before,
159
+ .charts-css.line tbody tr td:nth-of-type(10n + 5)::before {
160
+ background: var(--color, var(--color-5));
161
+ }
162
+
163
+ .charts-css.bar tbody tr:nth-of-type(10n + 6) td,
164
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 6),
165
+ .charts-css.column tbody tr:nth-of-type(10n + 6) td,
166
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 6),
167
+ .charts-css.area tbody tr td:nth-of-type(10n + 6)::before,
168
+ .charts-css.line tbody tr td:nth-of-type(10n + 6)::before {
169
+ background: var(--color, var(--color-6));
170
+ }
171
+
172
+ .charts-css.bar tbody tr:nth-of-type(10n + 7) td,
173
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 7),
174
+ .charts-css.column tbody tr:nth-of-type(10n + 7) td,
175
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 7),
176
+ .charts-css.area tbody tr td:nth-of-type(10n + 7)::before,
177
+ .charts-css.line tbody tr td:nth-of-type(10n + 7)::before {
178
+ background: var(--color, var(--color-7));
179
+ }
180
+
181
+ .charts-css.bar tbody tr:nth-of-type(10n + 8) td,
182
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 8),
183
+ .charts-css.column tbody tr:nth-of-type(10n + 8) td,
184
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 8),
185
+ .charts-css.area tbody tr td:nth-of-type(10n + 8)::before,
186
+ .charts-css.line tbody tr td:nth-of-type(10n + 8)::before {
187
+ background: var(--color, var(--color-8));
188
+ }
189
+
190
+ .charts-css.bar tbody tr:nth-of-type(10n + 9) td,
191
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 9),
192
+ .charts-css.column tbody tr:nth-of-type(10n + 9) td,
193
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 9),
194
+ .charts-css.area tbody tr td:nth-of-type(10n + 9)::before,
195
+ .charts-css.line tbody tr td:nth-of-type(10n + 9)::before {
196
+ background: var(--color, var(--color-9));
197
+ }
198
+
199
+ .charts-css.bar tbody tr:nth-of-type(10n + 10) td,
200
+ .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 10),
201
+ .charts-css.column tbody tr:nth-of-type(10n + 10) td,
202
+ .charts-css.column.multiple tbody tr td:nth-of-type(10n + 10),
203
+ .charts-css.area tbody tr td:nth-of-type(10n + 10)::before,
204
+ .charts-css.line tbody tr td:nth-of-type(10n + 10)::before {
205
+ background: var(--color, var(--color-10));
206
+ }
207
+
208
+ /*
209
+ * Chart data
210
+ */
211
+ .charts-css.hide-data .data {
212
+ opacity: 0;
213
+ }
214
+
215
+ .charts-css.show-data-on-hover .data {
216
+ -webkit-transition-duration: .3s;
217
+ transition-duration: .3s;
218
+ opacity: 0;
219
+ }
220
+
221
+ .charts-css.show-data-on-hover tr:hover .data {
222
+ -webkit-transition-duration: .3s;
223
+ transition-duration: .3s;
224
+ opacity: 1;
225
+ }
226
+
227
+ /*
228
+ * Chart labels
229
+ */
230
+ .charts-css.bar:not(.show-labels) {
231
+ --labels-size: 0;
232
+ }
233
+
234
+ .charts-css.bar:not(.show-labels) tbody tr th {
235
+ display: none;
236
+ }
237
+
238
+ .charts-css.bar.show-labels {
239
+ --labels-size: 80px;
240
+ }
241
+
242
+ .charts-css.bar.show-labels tbody tr th {
243
+ display: -webkit-box;
244
+ display: -ms-flexbox;
245
+ display: flex;
246
+ -webkit-box-pack: var(--labels-align, center);
247
+ -ms-flex-pack: var(--labels-align, center);
248
+ justify-content: var(--labels-align, center);
249
+ -webkit-box-align: center;
250
+ -ms-flex-align: center;
251
+ align-items: center;
252
+ -webkit-box-orient: vertical;
253
+ -webkit-box-direction: normal;
254
+ -ms-flex-direction: column;
255
+ flex-direction: column;
256
+ }
257
+
258
+ .charts-css.bar.show-labels tr.hide-label th,
259
+ .charts-css.bar.show-labels th.hide-label {
260
+ display: none;
261
+ }
262
+
263
+ .charts-css.bar.labels-align-start tbody tr th {
264
+ -webkit-box-align: var(--labels-align, flex-start);
265
+ -ms-flex-align: var(--labels-align, flex-start);
266
+ align-items: var(--labels-align, flex-start);
267
+ }
268
+
269
+ .charts-css.bar.labels-align-end tbody tr th {
270
+ -webkit-box-align: var(--labels-align, flex-end);
271
+ -ms-flex-align: var(--labels-align, flex-end);
272
+ align-items: var(--labels-align, flex-end);
273
+ }
274
+
275
+ .charts-css.bar.labels-align-center tbody tr th {
276
+ -webkit-box-align: var(--labels-align, center);
277
+ -ms-flex-align: var(--labels-align, center);
278
+ align-items: var(--labels-align, center);
279
+ }
280
+
281
+ .charts-css.column:not(.show-labels), .charts-css.area:not(.show-labels), .charts-css.line:not(.show-labels) {
282
+ --labels-size: 0;
283
+ }
284
+
285
+ .charts-css.column:not(.show-labels) tbody tr th, .charts-css.area:not(.show-labels) tbody tr th, .charts-css.line:not(.show-labels) tbody tr th {
286
+ display: none;
287
+ }
288
+
289
+ .charts-css.column.show-labels, .charts-css.area.show-labels, .charts-css.line.show-labels {
290
+ --labels-size: 1.5rem;
291
+ }
292
+
293
+ .charts-css.column.show-labels tbody tr th, .charts-css.area.show-labels tbody tr th, .charts-css.line.show-labels tbody tr th {
294
+ display: -webkit-box;
295
+ display: -ms-flexbox;
296
+ display: flex;
297
+ -webkit-box-pack: var(--labels-align, center);
298
+ -ms-flex-pack: var(--labels-align, center);
299
+ justify-content: var(--labels-align, center);
300
+ -webkit-box-align: center;
301
+ -ms-flex-align: center;
302
+ align-items: center;
303
+ -webkit-box-orient: vertical;
304
+ -webkit-box-direction: normal;
305
+ -ms-flex-direction: column;
306
+ flex-direction: column;
307
+ }
308
+
309
+ .charts-css.column.show-labels tr.hide-label th,
310
+ .charts-css.column.show-labels th.hide-label, .charts-css.area.show-labels tr.hide-label th,
311
+ .charts-css.area.show-labels th.hide-label, .charts-css.line.show-labels tr.hide-label th,
312
+ .charts-css.line.show-labels th.hide-label {
313
+ display: none;
314
+ }
315
+
316
+ .charts-css.column.labels-align-start tbody tr th, .charts-css.area.labels-align-start tbody tr th, .charts-css.line.labels-align-start tbody tr th {
317
+ -webkit-box-pack: var(--labels-align, flex-start);
318
+ -ms-flex-pack: var(--labels-align, flex-start);
319
+ justify-content: var(--labels-align, flex-start);
320
+ }
321
+
322
+ .charts-css.column.labels-align-end tbody tr th, .charts-css.area.labels-align-end tbody tr th, .charts-css.line.labels-align-end tbody tr th {
323
+ -webkit-box-pack: var(--labels-align, flex-end);
324
+ -ms-flex-pack: var(--labels-align, flex-end);
325
+ justify-content: var(--labels-align, flex-end);
326
+ }
327
+
328
+ .charts-css.column.labels-align-center tbody tr th, .charts-css.area.labels-align-center tbody tr th, .charts-css.line.labels-align-center tbody tr th {
329
+ -webkit-box-pack: var(--labels-align, center);
330
+ -ms-flex-pack: var(--labels-align, center);
331
+ justify-content: var(--labels-align, center);
332
+ }
333
+
334
+ /*
335
+ * Chart axes
336
+ */
337
+ .charts-css.column.show-primary-axis:not(.reverse) tbody tr, .charts-css.area.show-primary-axis:not(.reverse) tbody tr, .charts-css.line.show-primary-axis:not(.reverse) tbody tr {
338
+ -webkit-border-after: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
339
+ border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
340
+ }
341
+
342
+ .charts-css.column.show-primary-axis.reverse tbody tr, .charts-css.area.show-primary-axis.reverse tbody tr, .charts-css.line.show-primary-axis.reverse tbody tr {
343
+ -webkit-border-before: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
344
+ border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
345
+ }
346
+
347
+ .charts-css.column.show-1-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-1-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-1-secondary-axes:not(.reverse) tbody tr {
348
+ background-size: 100% 100%;
349
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
350
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
351
+ }
352
+
353
+ .charts-css.column.show-1-secondary-axes.reverse tbody tr, .charts-css.area.show-1-secondary-axes.reverse tbody tr, .charts-css.line.show-1-secondary-axes.reverse tbody tr {
354
+ background-size: 100% 100%;
355
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
356
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
357
+ }
358
+
359
+ .charts-css.column.show-2-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-2-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-2-secondary-axes:not(.reverse) tbody tr {
360
+ background-size: 100% 50%;
361
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
362
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
363
+ }
364
+
365
+ .charts-css.column.show-2-secondary-axes.reverse tbody tr, .charts-css.area.show-2-secondary-axes.reverse tbody tr, .charts-css.line.show-2-secondary-axes.reverse tbody tr {
366
+ background-size: 100% 50%;
367
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
368
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
369
+ }
370
+
371
+ .charts-css.column.show-3-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-3-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-3-secondary-axes:not(.reverse) tbody tr {
372
+ background-size: 100% 33.333333%;
373
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
374
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
375
+ }
376
+
377
+ .charts-css.column.show-3-secondary-axes.reverse tbody tr, .charts-css.area.show-3-secondary-axes.reverse tbody tr, .charts-css.line.show-3-secondary-axes.reverse tbody tr {
378
+ background-size: 100% 33.333333%;
379
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
380
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
381
+ }
382
+
383
+ .charts-css.column.show-4-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-4-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-4-secondary-axes:not(.reverse) tbody tr {
384
+ background-size: 100% 25%;
385
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
386
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
387
+ }
388
+
389
+ .charts-css.column.show-4-secondary-axes.reverse tbody tr, .charts-css.area.show-4-secondary-axes.reverse tbody tr, .charts-css.line.show-4-secondary-axes.reverse tbody tr {
390
+ background-size: 100% 25%;
391
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
392
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
393
+ }
394
+
395
+ .charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-5-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-5-secondary-axes:not(.reverse) tbody tr {
396
+ background-size: 100% 20%;
397
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
398
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
399
+ }
400
+
401
+ .charts-css.column.show-5-secondary-axes.reverse tbody tr, .charts-css.area.show-5-secondary-axes.reverse tbody tr, .charts-css.line.show-5-secondary-axes.reverse tbody tr {
402
+ background-size: 100% 20%;
403
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
404
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
405
+ }
406
+
407
+ .charts-css.column.show-6-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-6-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-6-secondary-axes:not(.reverse) tbody tr {
408
+ background-size: 100% 16.666667%;
409
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
410
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
411
+ }
412
+
413
+ .charts-css.column.show-6-secondary-axes.reverse tbody tr, .charts-css.area.show-6-secondary-axes.reverse tbody tr, .charts-css.line.show-6-secondary-axes.reverse tbody tr {
414
+ background-size: 100% 16.666667%;
415
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
416
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
417
+ }
418
+
419
+ .charts-css.column.show-7-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-7-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-7-secondary-axes:not(.reverse) tbody tr {
420
+ background-size: 100% 14.285714%;
421
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
422
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
423
+ }
424
+
425
+ .charts-css.column.show-7-secondary-axes.reverse tbody tr, .charts-css.area.show-7-secondary-axes.reverse tbody tr, .charts-css.line.show-7-secondary-axes.reverse tbody tr {
426
+ background-size: 100% 14.285714%;
427
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
428
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
429
+ }
430
+
431
+ .charts-css.column.show-8-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-8-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-8-secondary-axes:not(.reverse) tbody tr {
432
+ background-size: 100% 12.5%;
433
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
434
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
435
+ }
436
+
437
+ .charts-css.column.show-8-secondary-axes.reverse tbody tr, .charts-css.area.show-8-secondary-axes.reverse tbody tr, .charts-css.line.show-8-secondary-axes.reverse tbody tr {
438
+ background-size: 100% 12.5%;
439
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
440
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
441
+ }
442
+
443
+ .charts-css.column.show-9-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-9-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-9-secondary-axes:not(.reverse) tbody tr {
444
+ background-size: 100% 11.111111%;
445
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
446
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
447
+ }
448
+
449
+ .charts-css.column.show-9-secondary-axes.reverse tbody tr, .charts-css.area.show-9-secondary-axes.reverse tbody tr, .charts-css.line.show-9-secondary-axes.reverse tbody tr {
450
+ background-size: 100% 11.111111%;
451
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
452
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
453
+ }
454
+
455
+ .charts-css.column.show-10-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-10-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-10-secondary-axes:not(.reverse) tbody tr {
456
+ background-size: 100% 10%;
457
+ background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
458
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
459
+ }
460
+
461
+ .charts-css.column.show-10-secondary-axes.reverse tbody tr, .charts-css.area.show-10-secondary-axes.reverse tbody tr, .charts-css.line.show-10-secondary-axes.reverse tbody tr {
462
+ background-size: 100% 10%;
463
+ background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
464
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
465
+ }
466
+
467
+ .charts-css.column.show-data-axes tbody tr, .charts-css.area.show-data-axes tbody tr, .charts-css.line.show-data-axes tbody tr {
468
+ -webkit-border-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
469
+ border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
470
+ }
471
+
472
+ .charts-css.column.show-data-axes:not(.reverse-data) tbody tr:first-of-type, .charts-css.area.show-data-axes:not(.reverse-data) tbody tr:first-of-type, .charts-css.line.show-data-axes:not(.reverse-data) tbody tr:first-of-type {
473
+ -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
474
+ border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
475
+ }
476
+
477
+ .charts-css.column.show-data-axes.reverse-data tbody tr:last-of-type, .charts-css.area.show-data-axes.reverse-data tbody tr:last-of-type, .charts-css.line.show-data-axes.reverse-data tbody tr:last-of-type {
478
+ -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
479
+ border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
480
+ }
481
+
482
+ .charts-css.column.show-dataset-axes tbody tr td, .charts-css.area.show-dataset-axes tbody tr td, .charts-css.line.show-dataset-axes tbody tr td {
483
+ -webkit-border-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
484
+ border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
485
+ }
486
+
487
+ .charts-css.column.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td, .charts-css.area.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td, .charts-css.line.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td {
488
+ -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
489
+ border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
490
+ }
491
+
492
+ .charts-css.column.show-dataset-axes.reverse-data tbody tr:last-of-type td, .charts-css.area.show-dataset-axes.reverse-data tbody tr:last-of-type td, .charts-css.line.show-dataset-axes.reverse-data tbody tr:last-of-type td {
493
+ -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
494
+ border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
495
+ }
496
+
497
+ .charts-css.bar.show-primary-axis:not(.reverse) tbody tr {
498
+ -webkit-border-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
499
+ border-inline-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
500
+ }
501
+
502
+ .charts-css.bar.show-primary-axis.reverse tbody tr {
503
+ -webkit-border-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
504
+ border-inline-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
505
+ }
506
+
507
+ .charts-css.bar.show-1-secondary-axes:not(.reverse) tbody tr {
508
+ background-size: 100% 100%;
509
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
510
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
511
+ }
512
+
513
+ .charts-css.bar.show-1-secondary-axes.reverse tbody tr {
514
+ background-size: 100% 100%;
515
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
516
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
517
+ }
518
+
519
+ .charts-css.bar.show-2-secondary-axes:not(.reverse) tbody tr {
520
+ background-size: 50% 100%;
521
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
522
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
523
+ }
524
+
525
+ .charts-css.bar.show-2-secondary-axes.reverse tbody tr {
526
+ background-size: 50% 100%;
527
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
528
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
529
+ }
530
+
531
+ .charts-css.bar.show-3-secondary-axes:not(.reverse) tbody tr {
532
+ background-size: 33.333333% 100%;
533
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
534
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
535
+ }
536
+
537
+ .charts-css.bar.show-3-secondary-axes.reverse tbody tr {
538
+ background-size: 33.333333% 100%;
539
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
540
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
541
+ }
542
+
543
+ .charts-css.bar.show-4-secondary-axes:not(.reverse) tbody tr {
544
+ background-size: 25% 100%;
545
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
546
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
547
+ }
548
+
549
+ .charts-css.bar.show-4-secondary-axes.reverse tbody tr {
550
+ background-size: 25% 100%;
551
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
552
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
553
+ }
554
+
555
+ .charts-css.bar.show-5-secondary-axes:not(.reverse) tbody tr {
556
+ background-size: 20% 100%;
557
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
558
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
559
+ }
560
+
561
+ .charts-css.bar.show-5-secondary-axes.reverse tbody tr {
562
+ background-size: 20% 100%;
563
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
564
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
565
+ }
566
+
567
+ .charts-css.bar.show-6-secondary-axes:not(.reverse) tbody tr {
568
+ background-size: 16.666667% 100%;
569
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
570
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
571
+ }
572
+
573
+ .charts-css.bar.show-6-secondary-axes.reverse tbody tr {
574
+ background-size: 16.666667% 100%;
575
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
576
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
577
+ }
578
+
579
+ .charts-css.bar.show-7-secondary-axes:not(.reverse) tbody tr {
580
+ background-size: 14.285714% 100%;
581
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
582
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
583
+ }
584
+
585
+ .charts-css.bar.show-7-secondary-axes.reverse tbody tr {
586
+ background-size: 14.285714% 100%;
587
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
588
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
589
+ }
590
+
591
+ .charts-css.bar.show-8-secondary-axes:not(.reverse) tbody tr {
592
+ background-size: 12.5% 100%;
593
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
594
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
595
+ }
596
+
597
+ .charts-css.bar.show-8-secondary-axes.reverse tbody tr {
598
+ background-size: 12.5% 100%;
599
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
600
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
601
+ }
602
+
603
+ .charts-css.bar.show-9-secondary-axes:not(.reverse) tbody tr {
604
+ background-size: 11.111111% 100%;
605
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
606
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
607
+ }
608
+
609
+ .charts-css.bar.show-9-secondary-axes.reverse tbody tr {
610
+ background-size: 11.111111% 100%;
611
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
612
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
613
+ }
614
+
615
+ .charts-css.bar.show-10-secondary-axes:not(.reverse) tbody tr {
616
+ background-size: 10% 100%;
617
+ background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
618
+ background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
619
+ }
620
+
621
+ .charts-css.bar.show-10-secondary-axes.reverse tbody tr {
622
+ background-size: 10% 100%;
623
+ background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
624
+ background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
625
+ }
626
+
627
+ .charts-css.bar.show-data-axes tbody tr {
628
+ -webkit-border-after: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
629
+ border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
630
+ }
631
+
632
+ .charts-css.bar.show-data-axes:not(.reverse-data) tbody tr:first-of-type {
633
+ -webkit-border-before: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
634
+ border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
635
+ }
636
+
637
+ .charts-css.bar.show-data-axes.reverse-data tbody tr:last-of-type {
638
+ -webkit-border-before: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
639
+ border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
640
+ }
641
+
642
+ .charts-css.bar.show-dataset-axes tbody tr td {
643
+ -webkit-border-after: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
644
+ border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
645
+ }
646
+
647
+ .charts-css.bar.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td {
648
+ -webkit-border-before: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
649
+ border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
650
+ }
651
+
652
+ .charts-css.bar.show-dataset-axes.reverse-data tbody tr:last-of-type td {
653
+ -webkit-border-before: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
654
+ border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
655
+ }
656
+
657
+ /*
658
+ * Chart legend
659
+ */
660
+ .charts-css.legend {
661
+ padding: 1rem;
662
+ border: 1px solid var(--legend-border-color);
663
+ list-style: none;
664
+ font-size: 1rem;
665
+ }
666
+
667
+ .charts-css.legend li {
668
+ line-height: 2;
669
+ display: -webkit-box;
670
+ display: -ms-flexbox;
671
+ display: flex;
672
+ -webkit-box-align: center;
673
+ -ms-flex-align: center;
674
+ align-items: center;
675
+ }
676
+
677
+ .charts-css.legend li::before {
678
+ content: "";
679
+ display: inline-block;
680
+ vertical-align: middle;
681
+ -webkit-margin-end: .5rem;
682
+ margin-inline-end: .5rem;
683
+ border-width: 2px;
684
+ border-style: solid;
685
+ }
686
+
687
+ .charts-css.legend li:nth-child(1)::before {
688
+ background-color: var(--color-1, transparent);
689
+ border-color: var(--border-color-1, var(--border-color, #000));
690
+ }
691
+
692
+ .charts-css.legend li:nth-child(2)::before {
693
+ background-color: var(--color-2, transparent);
694
+ border-color: var(--border-color-2, var(--border-color, #000));
695
+ }
696
+
697
+ .charts-css.legend li:nth-child(3)::before {
698
+ background-color: var(--color-3, transparent);
699
+ border-color: var(--border-color-3, var(--border-color, #000));
700
+ }
701
+
702
+ .charts-css.legend li:nth-child(4)::before {
703
+ background-color: var(--color-4, transparent);
704
+ border-color: var(--border-color-4, var(--border-color, #000));
705
+ }
706
+
707
+ .charts-css.legend li:nth-child(5)::before {
708
+ background-color: var(--color-5, transparent);
709
+ border-color: var(--border-color-5, var(--border-color, #000));
710
+ }
711
+
712
+ .charts-css.legend li:nth-child(6)::before {
713
+ background-color: var(--color-6, transparent);
714
+ border-color: var(--border-color-6, var(--border-color, #000));
715
+ }
716
+
717
+ .charts-css.legend li:nth-child(7)::before {
718
+ background-color: var(--color-7, transparent);
719
+ border-color: var(--border-color-7, var(--border-color, #000));
720
+ }
721
+
722
+ .charts-css.legend li:nth-child(8)::before {
723
+ background-color: var(--color-8, transparent);
724
+ border-color: var(--border-color-8, var(--border-color, #000));
725
+ }
726
+
727
+ .charts-css.legend li:nth-child(9)::before {
728
+ background-color: var(--color-9, transparent);
729
+ border-color: var(--border-color-9, var(--border-color, #000));
730
+ }
731
+
732
+ .charts-css.legend li:nth-child(10)::before {
733
+ background-color: var(--color-10, transparent);
734
+ border-color: var(--border-color-10, var(--border-color, #000));
735
+ }
736
+
737
+ .charts-css:not(.legend-inline) {
738
+ display: -webkit-box;
739
+ display: -ms-flexbox;
740
+ display: flex;
741
+ -webkit-box-orient: vertical;
742
+ -webkit-box-direction: normal;
743
+ -ms-flex-direction: column;
744
+ flex-direction: column;
745
+ -ms-flex-wrap: nowrap;
746
+ flex-wrap: nowrap;
747
+ }
748
+
749
+ .charts-css.legend-inline {
750
+ display: -webkit-box;
751
+ display: -ms-flexbox;
752
+ display: flex;
753
+ -webkit-box-orient: horizontal;
754
+ -webkit-box-direction: normal;
755
+ -ms-flex-direction: row;
756
+ flex-direction: row;
757
+ -ms-flex-wrap: wrap;
758
+ flex-wrap: wrap;
759
+ }
760
+
761
+ .charts-css.legend-inline li {
762
+ -webkit-margin-end: 1rem;
763
+ margin-inline-end: 1rem;
764
+ }
765
+
766
+ .charts-css.legend-circle li::before {
767
+ width: 1rem;
768
+ height: 1rem;
769
+ border-radius: 50%;
770
+ }
771
+
772
+ .charts-css.legend-ellipse li::before {
773
+ width: 2rem;
774
+ height: 1rem;
775
+ border-radius: 50%;
776
+ }
777
+
778
+ .charts-css.legend-square li::before {
779
+ width: 1rem;
780
+ height: 1rem;
781
+ border-radius: 3px;
782
+ }
783
+
784
+ .charts-css.legend-rhombus li::before {
785
+ width: 1rem;
786
+ height: 1rem;
787
+ border-radius: 3px;
788
+ -webkit-transform: rotate(45deg) scale(0.85);
789
+ transform: rotate(45deg) scale(0.85);
790
+ }
791
+
792
+ .charts-css.legend-rectangle li::before {
793
+ width: 2rem;
794
+ height: 1rem;
795
+ border-radius: 3px;
796
+ }
797
+
798
+ .charts-css.legend-line li::before {
799
+ width: 2rem;
800
+ height: 3px;
801
+ border-radius: 2px;
802
+ -webkit-box-sizing: content-box;
803
+ box-sizing: content-box;
804
+ }
805
+
806
+ /*
807
+ * Chart tooltips
808
+ */
809
+ .charts-css .tooltip {
810
+ position: absolute;
811
+ z-index: 1;
812
+ bottom: 50%;
813
+ left: 50%;
814
+ -webkit-transform: translateX(-50%);
815
+ transform: translateX(-50%);
816
+ width: -webkit-max-content;
817
+ width: -moz-max-content;
818
+ width: max-content;
819
+ padding: 5px 10px;
820
+ border-radius: 6px;
821
+ visibility: hidden;
822
+ opacity: 0;
823
+ -webkit-transition: opacity .3s;
824
+ transition: opacity .3s;
825
+ background-color: #555;
826
+ color: #fff;
827
+ text-align: center;
828
+ font-size: .9rem;
829
+ }
830
+
831
+ .charts-css .tooltip::after {
832
+ content: "";
833
+ position: absolute;
834
+ top: 100%;
835
+ left: 50%;
836
+ margin-left: -5px;
837
+ border-width: 5px;
838
+ border-style: solid;
839
+ border-color: #555 transparent transparent;
840
+ }
841
+
842
+ .charts-css td:hover .tooltip {
843
+ visibility: visible;
844
+ opacity: 1;
845
+ }
846
+
847
+ /*
848
+ * Bar Chart
849
+ */
850
+ .charts-css.bar tbody {
851
+ display: -webkit-box;
852
+ display: -ms-flexbox;
853
+ display: flex;
854
+ -webkit-box-pack: justify;
855
+ -ms-flex-pack: justify;
856
+ justify-content: space-between;
857
+ -webkit-box-align: stretch;
858
+ -ms-flex-align: stretch;
859
+ align-items: stretch;
860
+ width: 100%;
861
+ height: calc(100% - var(--heading-size));
862
+ }
863
+
864
+ .charts-css.bar tbody tr {
865
+ position: relative;
866
+ -webkit-box-flex: 1;
867
+ -ms-flex-positive: 1;
868
+ flex-grow: 1;
869
+ -ms-flex-negative: 1;
870
+ flex-shrink: 1;
871
+ -ms-flex-preferred-size: 0;
872
+ flex-basis: 0;
873
+ overflow-wrap: anywhere;
874
+ display: -webkit-box;
875
+ display: -ms-flexbox;
876
+ display: flex;
877
+ -webkit-box-pack: start;
878
+ -ms-flex-pack: start;
879
+ justify-content: flex-start;
880
+ }
881
+
882
+ .charts-css.bar tbody tr th {
883
+ position: absolute;
884
+ top: 0;
885
+ bottom: 0;
886
+ }
887
+
888
+ .charts-css.bar tbody tr td {
889
+ display: -webkit-box;
890
+ display: -ms-flexbox;
891
+ display: flex;
892
+ -webkit-box-align: center;
893
+ -ms-flex-align: center;
894
+ align-items: center;
895
+ width: calc(100% * var(--size, 1));
896
+ height: 100%;
897
+ position: relative;
898
+ }
899
+
900
+ .charts-css.bar:not(.reverse) tbody tr {
901
+ -webkit-box-align: start;
902
+ -ms-flex-align: start;
903
+ align-items: flex-start;
904
+ -webkit-margin-start: var(--labels-size);
905
+ margin-inline-start: var(--labels-size);
906
+ }
907
+
908
+ .charts-css.bar:not(.reverse) tbody tr th {
909
+ left: calc(-1 * var(--labels-size) - var(--primary-axis-width));
910
+ width: var(--labels-size);
911
+ }
912
+
913
+ .charts-css.bar:not(.reverse) tbody tr td {
914
+ -webkit-box-pack: end;
915
+ -ms-flex-pack: end;
916
+ justify-content: flex-end;
917
+ }
918
+
919
+ .charts-css.bar.reverse tbody tr {
920
+ -webkit-box-align: end;
921
+ -ms-flex-align: end;
922
+ align-items: flex-end;
923
+ -webkit-margin-end: var(--labels-size);
924
+ margin-inline-end: var(--labels-size);
925
+ }
926
+
927
+ .charts-css.bar.reverse tbody tr th {
928
+ right: calc(-1 * var(--labels-size) - var(--primary-axis-width));
929
+ width: var(--labels-size);
930
+ }
931
+
932
+ .charts-css.bar.reverse tbody tr td {
933
+ -webkit-box-pack: start;
934
+ -ms-flex-pack: start;
935
+ justify-content: flex-start;
936
+ }
937
+
938
+ .charts-css.bar:not(.stacked) tbody tr td {
939
+ -webkit-box-flex: 1;
940
+ -ms-flex-positive: 1;
941
+ flex-grow: 1;
942
+ -ms-flex-negative: 1;
943
+ flex-shrink: 1;
944
+ -ms-flex-preferred-size: 0;
945
+ flex-basis: 0;
946
+ }
947
+
948
+ .charts-css.bar.stacked tbody tr td {
949
+ -webkit-box-flex: unset;
950
+ -ms-flex-positive: unset;
951
+ flex-grow: unset;
952
+ -ms-flex-negative: unset;
953
+ flex-shrink: unset;
954
+ -ms-flex-preferred-size: unset;
955
+ flex-basis: unset;
956
+ }
957
+
958
+ .charts-css.bar.stacked.reverse-datasets tbody tr {
959
+ -webkit-box-pack: end;
960
+ -ms-flex-pack: end;
961
+ justify-content: flex-end;
962
+ }
963
+
964
+ .charts-css.bar:not(.reverse-data) tbody {
965
+ -webkit-box-orient: vertical;
966
+ -webkit-box-direction: normal;
967
+ -ms-flex-direction: column;
968
+ flex-direction: column;
969
+ }
970
+
971
+ .charts-css.bar.reverse-data tbody {
972
+ -webkit-box-orient: vertical;
973
+ -webkit-box-direction: reverse;
974
+ -ms-flex-direction: column-reverse;
975
+ flex-direction: column-reverse;
976
+ }
977
+
978
+ .charts-css.bar:not(.reverse-datasets):not(.stacked) tbody tr {
979
+ -webkit-box-orient: vertical;
980
+ -webkit-box-direction: normal;
981
+ -ms-flex-direction: column;
982
+ flex-direction: column;
983
+ }
984
+
985
+ .charts-css.bar:not(.reverse-datasets).stacked:not(.reverse) tbody tr {
986
+ -webkit-box-orient: horizontal;
987
+ -webkit-box-direction: normal;
988
+ -ms-flex-direction: row;
989
+ flex-direction: row;
990
+ }
991
+
992
+ .charts-css.bar:not(.reverse-datasets).stacked.reverse tbody tr {
993
+ -webkit-box-orient: horizontal;
994
+ -webkit-box-direction: reverse;
995
+ -ms-flex-direction: row-reverse;
996
+ flex-direction: row-reverse;
997
+ }
998
+
999
+ .charts-css.bar.reverse-datasets:not(.stacked) tbody tr {
1000
+ -webkit-box-orient: vertical;
1001
+ -webkit-box-direction: reverse;
1002
+ -ms-flex-direction: column-reverse;
1003
+ flex-direction: column-reverse;
1004
+ }
1005
+
1006
+ .charts-css.bar.reverse-datasets.stacked:not(.reverse) tbody tr {
1007
+ -webkit-box-orient: horizontal;
1008
+ -webkit-box-direction: reverse;
1009
+ -ms-flex-direction: row-reverse;
1010
+ flex-direction: row-reverse;
1011
+ }
1012
+
1013
+ .charts-css.bar.reverse-datasets.stacked.reverse tbody tr {
1014
+ -webkit-box-orient: horizontal;
1015
+ -webkit-box-direction: normal;
1016
+ -ms-flex-direction: row;
1017
+ flex-direction: row;
1018
+ }
1019
+
1020
+ .charts-css.bar.data-spacing-1 tbody tr {
1021
+ -webkit-padding-before: 1px;
1022
+ padding-block-start: 1px;
1023
+ -webkit-padding-after: 1px;
1024
+ padding-block-end: 1px;
1025
+ }
1026
+
1027
+ .charts-css.bar.data-spacing-2 tbody tr {
1028
+ -webkit-padding-before: 2px;
1029
+ padding-block-start: 2px;
1030
+ -webkit-padding-after: 2px;
1031
+ padding-block-end: 2px;
1032
+ }
1033
+
1034
+ .charts-css.bar.data-spacing-3 tbody tr {
1035
+ -webkit-padding-before: 3px;
1036
+ padding-block-start: 3px;
1037
+ -webkit-padding-after: 3px;
1038
+ padding-block-end: 3px;
1039
+ }
1040
+
1041
+ .charts-css.bar.data-spacing-4 tbody tr {
1042
+ -webkit-padding-before: 4px;
1043
+ padding-block-start: 4px;
1044
+ -webkit-padding-after: 4px;
1045
+ padding-block-end: 4px;
1046
+ }
1047
+
1048
+ .charts-css.bar.data-spacing-5 tbody tr {
1049
+ -webkit-padding-before: 5px;
1050
+ padding-block-start: 5px;
1051
+ -webkit-padding-after: 5px;
1052
+ padding-block-end: 5px;
1053
+ }
1054
+
1055
+ .charts-css.bar.data-spacing-6 tbody tr {
1056
+ -webkit-padding-before: 6px;
1057
+ padding-block-start: 6px;
1058
+ -webkit-padding-after: 6px;
1059
+ padding-block-end: 6px;
1060
+ }
1061
+
1062
+ .charts-css.bar.data-spacing-7 tbody tr {
1063
+ -webkit-padding-before: 7px;
1064
+ padding-block-start: 7px;
1065
+ -webkit-padding-after: 7px;
1066
+ padding-block-end: 7px;
1067
+ }
1068
+
1069
+ .charts-css.bar.data-spacing-8 tbody tr {
1070
+ -webkit-padding-before: 8px;
1071
+ padding-block-start: 8px;
1072
+ -webkit-padding-after: 8px;
1073
+ padding-block-end: 8px;
1074
+ }
1075
+
1076
+ .charts-css.bar.data-spacing-9 tbody tr {
1077
+ -webkit-padding-before: 9px;
1078
+ padding-block-start: 9px;
1079
+ -webkit-padding-after: 9px;
1080
+ padding-block-end: 9px;
1081
+ }
1082
+
1083
+ .charts-css.bar.data-spacing-10 tbody tr {
1084
+ -webkit-padding-before: 10px;
1085
+ padding-block-start: 10px;
1086
+ -webkit-padding-after: 10px;
1087
+ padding-block-end: 10px;
1088
+ }
1089
+
1090
+ .charts-css.bar.data-spacing-11 tbody tr {
1091
+ -webkit-padding-before: 11px;
1092
+ padding-block-start: 11px;
1093
+ -webkit-padding-after: 11px;
1094
+ padding-block-end: 11px;
1095
+ }
1096
+
1097
+ .charts-css.bar.data-spacing-12 tbody tr {
1098
+ -webkit-padding-before: 12px;
1099
+ padding-block-start: 12px;
1100
+ -webkit-padding-after: 12px;
1101
+ padding-block-end: 12px;
1102
+ }
1103
+
1104
+ .charts-css.bar.data-spacing-13 tbody tr {
1105
+ -webkit-padding-before: 13px;
1106
+ padding-block-start: 13px;
1107
+ -webkit-padding-after: 13px;
1108
+ padding-block-end: 13px;
1109
+ }
1110
+
1111
+ .charts-css.bar.data-spacing-14 tbody tr {
1112
+ -webkit-padding-before: 14px;
1113
+ padding-block-start: 14px;
1114
+ -webkit-padding-after: 14px;
1115
+ padding-block-end: 14px;
1116
+ }
1117
+
1118
+ .charts-css.bar.data-spacing-15 tbody tr {
1119
+ -webkit-padding-before: 15px;
1120
+ padding-block-start: 15px;
1121
+ -webkit-padding-after: 15px;
1122
+ padding-block-end: 15px;
1123
+ }
1124
+
1125
+ .charts-css.bar.data-spacing-16 tbody tr {
1126
+ -webkit-padding-before: 16px;
1127
+ padding-block-start: 16px;
1128
+ -webkit-padding-after: 16px;
1129
+ padding-block-end: 16px;
1130
+ }
1131
+
1132
+ .charts-css.bar.data-spacing-17 tbody tr {
1133
+ -webkit-padding-before: 17px;
1134
+ padding-block-start: 17px;
1135
+ -webkit-padding-after: 17px;
1136
+ padding-block-end: 17px;
1137
+ }
1138
+
1139
+ .charts-css.bar.data-spacing-18 tbody tr {
1140
+ -webkit-padding-before: 18px;
1141
+ padding-block-start: 18px;
1142
+ -webkit-padding-after: 18px;
1143
+ padding-block-end: 18px;
1144
+ }
1145
+
1146
+ .charts-css.bar.data-spacing-19 tbody tr {
1147
+ -webkit-padding-before: 19px;
1148
+ padding-block-start: 19px;
1149
+ -webkit-padding-after: 19px;
1150
+ padding-block-end: 19px;
1151
+ }
1152
+
1153
+ .charts-css.bar.data-spacing-20 tbody tr {
1154
+ -webkit-padding-before: 20px;
1155
+ padding-block-start: 20px;
1156
+ -webkit-padding-after: 20px;
1157
+ padding-block-end: 20px;
1158
+ }
1159
+
1160
+ .charts-css.bar.datasets-spacing-1 tbody tr td {
1161
+ -webkit-margin-before: 1px;
1162
+ margin-block-start: 1px;
1163
+ -webkit-margin-after: 1px;
1164
+ margin-block-end: 1px;
1165
+ }
1166
+
1167
+ .charts-css.bar.datasets-spacing-2 tbody tr td {
1168
+ -webkit-margin-before: 2px;
1169
+ margin-block-start: 2px;
1170
+ -webkit-margin-after: 2px;
1171
+ margin-block-end: 2px;
1172
+ }
1173
+
1174
+ .charts-css.bar.datasets-spacing-3 tbody tr td {
1175
+ -webkit-margin-before: 3px;
1176
+ margin-block-start: 3px;
1177
+ -webkit-margin-after: 3px;
1178
+ margin-block-end: 3px;
1179
+ }
1180
+
1181
+ .charts-css.bar.datasets-spacing-4 tbody tr td {
1182
+ -webkit-margin-before: 4px;
1183
+ margin-block-start: 4px;
1184
+ -webkit-margin-after: 4px;
1185
+ margin-block-end: 4px;
1186
+ }
1187
+
1188
+ .charts-css.bar.datasets-spacing-5 tbody tr td {
1189
+ -webkit-margin-before: 5px;
1190
+ margin-block-start: 5px;
1191
+ -webkit-margin-after: 5px;
1192
+ margin-block-end: 5px;
1193
+ }
1194
+
1195
+ .charts-css.bar.datasets-spacing-6 tbody tr td {
1196
+ -webkit-margin-before: 6px;
1197
+ margin-block-start: 6px;
1198
+ -webkit-margin-after: 6px;
1199
+ margin-block-end: 6px;
1200
+ }
1201
+
1202
+ .charts-css.bar.datasets-spacing-7 tbody tr td {
1203
+ -webkit-margin-before: 7px;
1204
+ margin-block-start: 7px;
1205
+ -webkit-margin-after: 7px;
1206
+ margin-block-end: 7px;
1207
+ }
1208
+
1209
+ .charts-css.bar.datasets-spacing-8 tbody tr td {
1210
+ -webkit-margin-before: 8px;
1211
+ margin-block-start: 8px;
1212
+ -webkit-margin-after: 8px;
1213
+ margin-block-end: 8px;
1214
+ }
1215
+
1216
+ .charts-css.bar.datasets-spacing-9 tbody tr td {
1217
+ -webkit-margin-before: 9px;
1218
+ margin-block-start: 9px;
1219
+ -webkit-margin-after: 9px;
1220
+ margin-block-end: 9px;
1221
+ }
1222
+
1223
+ .charts-css.bar.datasets-spacing-10 tbody tr td {
1224
+ -webkit-margin-before: 10px;
1225
+ margin-block-start: 10px;
1226
+ -webkit-margin-after: 10px;
1227
+ margin-block-end: 10px;
1228
+ }
1229
+
1230
+ .charts-css.bar.datasets-spacing-11 tbody tr td {
1231
+ -webkit-margin-before: 11px;
1232
+ margin-block-start: 11px;
1233
+ -webkit-margin-after: 11px;
1234
+ margin-block-end: 11px;
1235
+ }
1236
+
1237
+ .charts-css.bar.datasets-spacing-12 tbody tr td {
1238
+ -webkit-margin-before: 12px;
1239
+ margin-block-start: 12px;
1240
+ -webkit-margin-after: 12px;
1241
+ margin-block-end: 12px;
1242
+ }
1243
+
1244
+ .charts-css.bar.datasets-spacing-13 tbody tr td {
1245
+ -webkit-margin-before: 13px;
1246
+ margin-block-start: 13px;
1247
+ -webkit-margin-after: 13px;
1248
+ margin-block-end: 13px;
1249
+ }
1250
+
1251
+ .charts-css.bar.datasets-spacing-14 tbody tr td {
1252
+ -webkit-margin-before: 14px;
1253
+ margin-block-start: 14px;
1254
+ -webkit-margin-after: 14px;
1255
+ margin-block-end: 14px;
1256
+ }
1257
+
1258
+ .charts-css.bar.datasets-spacing-15 tbody tr td {
1259
+ -webkit-margin-before: 15px;
1260
+ margin-block-start: 15px;
1261
+ -webkit-margin-after: 15px;
1262
+ margin-block-end: 15px;
1263
+ }
1264
+
1265
+ .charts-css.bar.datasets-spacing-16 tbody tr td {
1266
+ -webkit-margin-before: 16px;
1267
+ margin-block-start: 16px;
1268
+ -webkit-margin-after: 16px;
1269
+ margin-block-end: 16px;
1270
+ }
1271
+
1272
+ .charts-css.bar.datasets-spacing-17 tbody tr td {
1273
+ -webkit-margin-before: 17px;
1274
+ margin-block-start: 17px;
1275
+ -webkit-margin-after: 17px;
1276
+ margin-block-end: 17px;
1277
+ }
1278
+
1279
+ .charts-css.bar.datasets-spacing-18 tbody tr td {
1280
+ -webkit-margin-before: 18px;
1281
+ margin-block-start: 18px;
1282
+ -webkit-margin-after: 18px;
1283
+ margin-block-end: 18px;
1284
+ }
1285
+
1286
+ .charts-css.bar.datasets-spacing-19 tbody tr td {
1287
+ -webkit-margin-before: 19px;
1288
+ margin-block-start: 19px;
1289
+ -webkit-margin-after: 19px;
1290
+ margin-block-end: 19px;
1291
+ }
1292
+
1293
+ .charts-css.bar.datasets-spacing-20 tbody tr td {
1294
+ -webkit-margin-before: 20px;
1295
+ margin-block-start: 20px;
1296
+ -webkit-margin-after: 20px;
1297
+ margin-block-end: 20px;
1298
+ }
1299
+
1300
+ /*
1301
+ * Column Chart
1302
+ */
1303
+ .charts-css.column tbody {
1304
+ display: -webkit-box;
1305
+ display: -ms-flexbox;
1306
+ display: flex;
1307
+ -webkit-box-pack: justify;
1308
+ -ms-flex-pack: justify;
1309
+ justify-content: space-between;
1310
+ -webkit-box-align: stretch;
1311
+ -ms-flex-align: stretch;
1312
+ align-items: stretch;
1313
+ width: 100%;
1314
+ height: calc(100% - var(--heading-size));
1315
+ }
1316
+
1317
+ .charts-css.column tbody tr {
1318
+ position: relative;
1319
+ -webkit-box-flex: 1;
1320
+ -ms-flex-positive: 1;
1321
+ flex-grow: 1;
1322
+ -ms-flex-negative: 1;
1323
+ flex-shrink: 1;
1324
+ -ms-flex-preferred-size: 0;
1325
+ flex-basis: 0;
1326
+ overflow-wrap: anywhere;
1327
+ display: -webkit-box;
1328
+ display: -ms-flexbox;
1329
+ display: flex;
1330
+ -webkit-box-pack: start;
1331
+ -ms-flex-pack: start;
1332
+ justify-content: flex-start;
1333
+ }
1334
+
1335
+ .charts-css.column tbody tr th {
1336
+ position: absolute;
1337
+ right: 0;
1338
+ left: 0;
1339
+ }
1340
+
1341
+ .charts-css.column tbody tr td {
1342
+ display: -webkit-box;
1343
+ display: -ms-flexbox;
1344
+ display: flex;
1345
+ -webkit-box-pack: center;
1346
+ -ms-flex-pack: center;
1347
+ justify-content: center;
1348
+ width: 100%;
1349
+ height: calc(100% * var(--size, 1));
1350
+ position: relative;
1351
+ }
1352
+
1353
+ .charts-css.column:not(.reverse) tbody tr {
1354
+ -webkit-box-align: end;
1355
+ -ms-flex-align: end;
1356
+ align-items: flex-end;
1357
+ -webkit-margin-after: var(--labels-size);
1358
+ margin-block-end: var(--labels-size);
1359
+ }
1360
+
1361
+ .charts-css.column:not(.reverse) tbody tr th {
1362
+ bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
1363
+ height: var(--labels-size);
1364
+ }
1365
+
1366
+ .charts-css.column:not(.reverse) tbody tr td {
1367
+ -webkit-box-align: start;
1368
+ -ms-flex-align: start;
1369
+ align-items: flex-start;
1370
+ }
1371
+
1372
+ .charts-css.column.reverse tbody tr {
1373
+ -webkit-box-align: start;
1374
+ -ms-flex-align: start;
1375
+ align-items: flex-start;
1376
+ -webkit-margin-before: var(--labels-size);
1377
+ margin-block-start: var(--labels-size);
1378
+ }
1379
+
1380
+ .charts-css.column.reverse tbody tr th {
1381
+ top: calc(-1 * var(--labels-size) - var(--primary-axis-width));
1382
+ height: var(--labels-size);
1383
+ }
1384
+
1385
+ .charts-css.column.reverse tbody tr td {
1386
+ -webkit-box-align: end;
1387
+ -ms-flex-align: end;
1388
+ align-items: flex-end;
1389
+ }
1390
+
1391
+ .charts-css.column:not(.stacked) tbody tr td {
1392
+ -webkit-box-flex: 1;
1393
+ -ms-flex-positive: 1;
1394
+ flex-grow: 1;
1395
+ -ms-flex-negative: 1;
1396
+ flex-shrink: 1;
1397
+ -ms-flex-preferred-size: 0;
1398
+ flex-basis: 0;
1399
+ }
1400
+
1401
+ .charts-css.column.stacked tbody tr td {
1402
+ -webkit-box-flex: unset;
1403
+ -ms-flex-positive: unset;
1404
+ flex-grow: unset;
1405
+ -ms-flex-negative: unset;
1406
+ flex-shrink: unset;
1407
+ -ms-flex-preferred-size: unset;
1408
+ flex-basis: unset;
1409
+ }
1410
+
1411
+ .charts-css.column.stacked.reverse-datasets tbody tr {
1412
+ -webkit-box-pack: end;
1413
+ -ms-flex-pack: end;
1414
+ justify-content: flex-end;
1415
+ }
1416
+
1417
+ .charts-css.column:not(.reverse-data) tbody {
1418
+ -webkit-box-orient: horizontal;
1419
+ -webkit-box-direction: normal;
1420
+ -ms-flex-direction: row;
1421
+ flex-direction: row;
1422
+ }
1423
+
1424
+ .charts-css.column.reverse-data tbody {
1425
+ -webkit-box-orient: horizontal;
1426
+ -webkit-box-direction: reverse;
1427
+ -ms-flex-direction: row-reverse;
1428
+ flex-direction: row-reverse;
1429
+ }
1430
+
1431
+ .charts-css.column:not(.reverse-datasets):not(.stacked) tbody tr {
1432
+ -webkit-box-orient: horizontal;
1433
+ -webkit-box-direction: normal;
1434
+ -ms-flex-direction: row;
1435
+ flex-direction: row;
1436
+ }
1437
+
1438
+ .charts-css.column:not(.reverse-datasets).stacked:not(.reverse) tbody tr {
1439
+ -webkit-box-orient: vertical;
1440
+ -webkit-box-direction: reverse;
1441
+ -ms-flex-direction: column-reverse;
1442
+ flex-direction: column-reverse;
1443
+ }
1444
+
1445
+ .charts-css.column:not(.reverse-datasets).stacked.reverse tbody tr {
1446
+ -webkit-box-orient: vertical;
1447
+ -webkit-box-direction: normal;
1448
+ -ms-flex-direction: column;
1449
+ flex-direction: column;
1450
+ }
1451
+
1452
+ .charts-css.column.reverse-datasets:not(.stacked) tbody tr {
1453
+ -webkit-box-orient: horizontal;
1454
+ -webkit-box-direction: reverse;
1455
+ -ms-flex-direction: row-reverse;
1456
+ flex-direction: row-reverse;
1457
+ }
1458
+
1459
+ .charts-css.column.reverse-datasets.stacked:not(.reverse) tbody tr {
1460
+ -webkit-box-orient: vertical;
1461
+ -webkit-box-direction: normal;
1462
+ -ms-flex-direction: column;
1463
+ flex-direction: column;
1464
+ }
1465
+
1466
+ .charts-css.column.reverse-datasets.stacked.reverse tbody tr {
1467
+ -webkit-box-orient: vertical;
1468
+ -webkit-box-direction: reverse;
1469
+ -ms-flex-direction: column-reverse;
1470
+ flex-direction: column-reverse;
1471
+ }
1472
+
1473
+ .charts-css.column.data-spacing-1 tbody tr {
1474
+ -webkit-padding-start: 1px;
1475
+ padding-inline-start: 1px;
1476
+ -webkit-padding-end: 1px;
1477
+ padding-inline-end: 1px;
1478
+ }
1479
+
1480
+ .charts-css.column.data-spacing-2 tbody tr {
1481
+ -webkit-padding-start: 2px;
1482
+ padding-inline-start: 2px;
1483
+ -webkit-padding-end: 2px;
1484
+ padding-inline-end: 2px;
1485
+ }
1486
+
1487
+ .charts-css.column.data-spacing-3 tbody tr {
1488
+ -webkit-padding-start: 3px;
1489
+ padding-inline-start: 3px;
1490
+ -webkit-padding-end: 3px;
1491
+ padding-inline-end: 3px;
1492
+ }
1493
+
1494
+ .charts-css.column.data-spacing-4 tbody tr {
1495
+ -webkit-padding-start: 4px;
1496
+ padding-inline-start: 4px;
1497
+ -webkit-padding-end: 4px;
1498
+ padding-inline-end: 4px;
1499
+ }
1500
+
1501
+ .charts-css.column.data-spacing-5 tbody tr {
1502
+ -webkit-padding-start: 5px;
1503
+ padding-inline-start: 5px;
1504
+ -webkit-padding-end: 5px;
1505
+ padding-inline-end: 5px;
1506
+ }
1507
+
1508
+ .charts-css.column.data-spacing-6 tbody tr {
1509
+ -webkit-padding-start: 6px;
1510
+ padding-inline-start: 6px;
1511
+ -webkit-padding-end: 6px;
1512
+ padding-inline-end: 6px;
1513
+ }
1514
+
1515
+ .charts-css.column.data-spacing-7 tbody tr {
1516
+ -webkit-padding-start: 7px;
1517
+ padding-inline-start: 7px;
1518
+ -webkit-padding-end: 7px;
1519
+ padding-inline-end: 7px;
1520
+ }
1521
+
1522
+ .charts-css.column.data-spacing-8 tbody tr {
1523
+ -webkit-padding-start: 8px;
1524
+ padding-inline-start: 8px;
1525
+ -webkit-padding-end: 8px;
1526
+ padding-inline-end: 8px;
1527
+ }
1528
+
1529
+ .charts-css.column.data-spacing-9 tbody tr {
1530
+ -webkit-padding-start: 9px;
1531
+ padding-inline-start: 9px;
1532
+ -webkit-padding-end: 9px;
1533
+ padding-inline-end: 9px;
1534
+ }
1535
+
1536
+ .charts-css.column.data-spacing-10 tbody tr {
1537
+ -webkit-padding-start: 10px;
1538
+ padding-inline-start: 10px;
1539
+ -webkit-padding-end: 10px;
1540
+ padding-inline-end: 10px;
1541
+ }
1542
+
1543
+ .charts-css.column.data-spacing-11 tbody tr {
1544
+ -webkit-padding-start: 11px;
1545
+ padding-inline-start: 11px;
1546
+ -webkit-padding-end: 11px;
1547
+ padding-inline-end: 11px;
1548
+ }
1549
+
1550
+ .charts-css.column.data-spacing-12 tbody tr {
1551
+ -webkit-padding-start: 12px;
1552
+ padding-inline-start: 12px;
1553
+ -webkit-padding-end: 12px;
1554
+ padding-inline-end: 12px;
1555
+ }
1556
+
1557
+ .charts-css.column.data-spacing-13 tbody tr {
1558
+ -webkit-padding-start: 13px;
1559
+ padding-inline-start: 13px;
1560
+ -webkit-padding-end: 13px;
1561
+ padding-inline-end: 13px;
1562
+ }
1563
+
1564
+ .charts-css.column.data-spacing-14 tbody tr {
1565
+ -webkit-padding-start: 14px;
1566
+ padding-inline-start: 14px;
1567
+ -webkit-padding-end: 14px;
1568
+ padding-inline-end: 14px;
1569
+ }
1570
+
1571
+ .charts-css.column.data-spacing-15 tbody tr {
1572
+ -webkit-padding-start: 15px;
1573
+ padding-inline-start: 15px;
1574
+ -webkit-padding-end: 15px;
1575
+ padding-inline-end: 15px;
1576
+ }
1577
+
1578
+ .charts-css.column.data-spacing-16 tbody tr {
1579
+ -webkit-padding-start: 16px;
1580
+ padding-inline-start: 16px;
1581
+ -webkit-padding-end: 16px;
1582
+ padding-inline-end: 16px;
1583
+ }
1584
+
1585
+ .charts-css.column.data-spacing-17 tbody tr {
1586
+ -webkit-padding-start: 17px;
1587
+ padding-inline-start: 17px;
1588
+ -webkit-padding-end: 17px;
1589
+ padding-inline-end: 17px;
1590
+ }
1591
+
1592
+ .charts-css.column.data-spacing-18 tbody tr {
1593
+ -webkit-padding-start: 18px;
1594
+ padding-inline-start: 18px;
1595
+ -webkit-padding-end: 18px;
1596
+ padding-inline-end: 18px;
1597
+ }
1598
+
1599
+ .charts-css.column.data-spacing-19 tbody tr {
1600
+ -webkit-padding-start: 19px;
1601
+ padding-inline-start: 19px;
1602
+ -webkit-padding-end: 19px;
1603
+ padding-inline-end: 19px;
1604
+ }
1605
+
1606
+ .charts-css.column.data-spacing-20 tbody tr {
1607
+ -webkit-padding-start: 20px;
1608
+ padding-inline-start: 20px;
1609
+ -webkit-padding-end: 20px;
1610
+ padding-inline-end: 20px;
1611
+ }
1612
+
1613
+ .charts-css.column.datasets-spacing-1 tbody tr td {
1614
+ -webkit-margin-start: 1px;
1615
+ margin-inline-start: 1px;
1616
+ -webkit-margin-end: 1px;
1617
+ margin-inline-end: 1px;
1618
+ }
1619
+
1620
+ .charts-css.column.datasets-spacing-2 tbody tr td {
1621
+ -webkit-margin-start: 2px;
1622
+ margin-inline-start: 2px;
1623
+ -webkit-margin-end: 2px;
1624
+ margin-inline-end: 2px;
1625
+ }
1626
+
1627
+ .charts-css.column.datasets-spacing-3 tbody tr td {
1628
+ -webkit-margin-start: 3px;
1629
+ margin-inline-start: 3px;
1630
+ -webkit-margin-end: 3px;
1631
+ margin-inline-end: 3px;
1632
+ }
1633
+
1634
+ .charts-css.column.datasets-spacing-4 tbody tr td {
1635
+ -webkit-margin-start: 4px;
1636
+ margin-inline-start: 4px;
1637
+ -webkit-margin-end: 4px;
1638
+ margin-inline-end: 4px;
1639
+ }
1640
+
1641
+ .charts-css.column.datasets-spacing-5 tbody tr td {
1642
+ -webkit-margin-start: 5px;
1643
+ margin-inline-start: 5px;
1644
+ -webkit-margin-end: 5px;
1645
+ margin-inline-end: 5px;
1646
+ }
1647
+
1648
+ .charts-css.column.datasets-spacing-6 tbody tr td {
1649
+ -webkit-margin-start: 6px;
1650
+ margin-inline-start: 6px;
1651
+ -webkit-margin-end: 6px;
1652
+ margin-inline-end: 6px;
1653
+ }
1654
+
1655
+ .charts-css.column.datasets-spacing-7 tbody tr td {
1656
+ -webkit-margin-start: 7px;
1657
+ margin-inline-start: 7px;
1658
+ -webkit-margin-end: 7px;
1659
+ margin-inline-end: 7px;
1660
+ }
1661
+
1662
+ .charts-css.column.datasets-spacing-8 tbody tr td {
1663
+ -webkit-margin-start: 8px;
1664
+ margin-inline-start: 8px;
1665
+ -webkit-margin-end: 8px;
1666
+ margin-inline-end: 8px;
1667
+ }
1668
+
1669
+ .charts-css.column.datasets-spacing-9 tbody tr td {
1670
+ -webkit-margin-start: 9px;
1671
+ margin-inline-start: 9px;
1672
+ -webkit-margin-end: 9px;
1673
+ margin-inline-end: 9px;
1674
+ }
1675
+
1676
+ .charts-css.column.datasets-spacing-10 tbody tr td {
1677
+ -webkit-margin-start: 10px;
1678
+ margin-inline-start: 10px;
1679
+ -webkit-margin-end: 10px;
1680
+ margin-inline-end: 10px;
1681
+ }
1682
+
1683
+ .charts-css.column.datasets-spacing-11 tbody tr td {
1684
+ -webkit-margin-start: 11px;
1685
+ margin-inline-start: 11px;
1686
+ -webkit-margin-end: 11px;
1687
+ margin-inline-end: 11px;
1688
+ }
1689
+
1690
+ .charts-css.column.datasets-spacing-12 tbody tr td {
1691
+ -webkit-margin-start: 12px;
1692
+ margin-inline-start: 12px;
1693
+ -webkit-margin-end: 12px;
1694
+ margin-inline-end: 12px;
1695
+ }
1696
+
1697
+ .charts-css.column.datasets-spacing-13 tbody tr td {
1698
+ -webkit-margin-start: 13px;
1699
+ margin-inline-start: 13px;
1700
+ -webkit-margin-end: 13px;
1701
+ margin-inline-end: 13px;
1702
+ }
1703
+
1704
+ .charts-css.column.datasets-spacing-14 tbody tr td {
1705
+ -webkit-margin-start: 14px;
1706
+ margin-inline-start: 14px;
1707
+ -webkit-margin-end: 14px;
1708
+ margin-inline-end: 14px;
1709
+ }
1710
+
1711
+ .charts-css.column.datasets-spacing-15 tbody tr td {
1712
+ -webkit-margin-start: 15px;
1713
+ margin-inline-start: 15px;
1714
+ -webkit-margin-end: 15px;
1715
+ margin-inline-end: 15px;
1716
+ }
1717
+
1718
+ .charts-css.column.datasets-spacing-16 tbody tr td {
1719
+ -webkit-margin-start: 16px;
1720
+ margin-inline-start: 16px;
1721
+ -webkit-margin-end: 16px;
1722
+ margin-inline-end: 16px;
1723
+ }
1724
+
1725
+ .charts-css.column.datasets-spacing-17 tbody tr td {
1726
+ -webkit-margin-start: 17px;
1727
+ margin-inline-start: 17px;
1728
+ -webkit-margin-end: 17px;
1729
+ margin-inline-end: 17px;
1730
+ }
1731
+
1732
+ .charts-css.column.datasets-spacing-18 tbody tr td {
1733
+ -webkit-margin-start: 18px;
1734
+ margin-inline-start: 18px;
1735
+ -webkit-margin-end: 18px;
1736
+ margin-inline-end: 18px;
1737
+ }
1738
+
1739
+ .charts-css.column.datasets-spacing-19 tbody tr td {
1740
+ -webkit-margin-start: 19px;
1741
+ margin-inline-start: 19px;
1742
+ -webkit-margin-end: 19px;
1743
+ margin-inline-end: 19px;
1744
+ }
1745
+
1746
+ .charts-css.column.datasets-spacing-20 tbody tr td {
1747
+ -webkit-margin-start: 20px;
1748
+ margin-inline-start: 20px;
1749
+ -webkit-margin-end: 20px;
1750
+ margin-inline-end: 20px;
1751
+ }
1752
+
1753
+ /*
1754
+ * Area Chart
1755
+ */
1756
+ .charts-css.area tbody {
1757
+ display: -webkit-box;
1758
+ display: -ms-flexbox;
1759
+ display: flex;
1760
+ -webkit-box-pack: justify;
1761
+ -ms-flex-pack: justify;
1762
+ justify-content: space-between;
1763
+ -webkit-box-align: stretch;
1764
+ -ms-flex-align: stretch;
1765
+ align-items: stretch;
1766
+ width: 100%;
1767
+ height: calc(100% - var(--heading-size));
1768
+ }
1769
+
1770
+ .charts-css.area tbody tr {
1771
+ position: relative;
1772
+ -webkit-box-flex: 1;
1773
+ -ms-flex-positive: 1;
1774
+ flex-grow: 1;
1775
+ -ms-flex-negative: 1;
1776
+ flex-shrink: 1;
1777
+ -ms-flex-preferred-size: 0;
1778
+ flex-basis: 0;
1779
+ overflow-wrap: anywhere;
1780
+ display: -webkit-box;
1781
+ display: -ms-flexbox;
1782
+ display: flex;
1783
+ -webkit-box-pack: start;
1784
+ -ms-flex-pack: start;
1785
+ justify-content: flex-start;
1786
+ }
1787
+
1788
+ .charts-css.area tbody tr th {
1789
+ position: absolute;
1790
+ right: 0;
1791
+ left: 0;
1792
+ }
1793
+
1794
+ .charts-css.area tbody tr td {
1795
+ display: -webkit-box;
1796
+ display: -ms-flexbox;
1797
+ display: flex;
1798
+ -webkit-box-orient: vertical;
1799
+ -webkit-box-direction: normal;
1800
+ -ms-flex-flow: column;
1801
+ flex-flow: column;
1802
+ width: 100%;
1803
+ height: 100%;
1804
+ position: absolute;
1805
+ top: 0;
1806
+ right: 0;
1807
+ bottom: 0;
1808
+ left: 0;
1809
+ z-index: 0;
1810
+ }
1811
+
1812
+ .charts-css.area tbody tr td::before {
1813
+ content: "";
1814
+ position: absolute;
1815
+ top: 0;
1816
+ right: 0;
1817
+ bottom: 0;
1818
+ left: 0;
1819
+ z-index: -1;
1820
+ }
1821
+
1822
+ .charts-css.area tbody tr td::after {
1823
+ content: "";
1824
+ width: 100%;
1825
+ }
1826
+
1827
+ .charts-css.area:not(.reverse) tbody tr {
1828
+ -webkit-box-align: end;
1829
+ -ms-flex-align: end;
1830
+ align-items: flex-end;
1831
+ -webkit-margin-after: var(--labels-size);
1832
+ margin-block-end: var(--labels-size);
1833
+ }
1834
+
1835
+ .charts-css.area:not(.reverse) tbody tr th {
1836
+ bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
1837
+ height: var(--labels-size);
1838
+ }
1839
+
1840
+ .charts-css.area:not(.reverse) tbody tr td {
1841
+ -webkit-box-align: start;
1842
+ -ms-flex-align: start;
1843
+ align-items: flex-start;
1844
+ }
1845
+
1846
+ .charts-css.area.reverse tbody tr {
1847
+ -webkit-box-align: start;
1848
+ -ms-flex-align: start;
1849
+ align-items: flex-start;
1850
+ -webkit-margin-before: var(--labels-size);
1851
+ margin-block-start: var(--labels-size);
1852
+ }
1853
+
1854
+ .charts-css.area.reverse tbody tr th {
1855
+ top: calc(-1 * var(--labels-size) - var(--primary-axis-width));
1856
+ height: var(--labels-size);
1857
+ }
1858
+
1859
+ .charts-css.area.reverse tbody tr td {
1860
+ -webkit-box-align: end;
1861
+ -ms-flex-align: end;
1862
+ align-items: flex-end;
1863
+ }
1864
+
1865
+ .charts-css.area:not(.reverse-data) tbody {
1866
+ -webkit-box-orient: horizontal;
1867
+ -webkit-box-direction: normal;
1868
+ -ms-flex-direction: row;
1869
+ flex-direction: row;
1870
+ }
1871
+
1872
+ .charts-css.area.reverse-data tbody {
1873
+ -webkit-box-orient: horizontal;
1874
+ -webkit-box-direction: reverse;
1875
+ -ms-flex-direction: row-reverse;
1876
+ flex-direction: row-reverse;
1877
+ }
1878
+
1879
+ .charts-css.area:not(.reverse-datasets) tbody tr {
1880
+ -webkit-box-orient: horizontal;
1881
+ -webkit-box-direction: normal;
1882
+ -ms-flex-direction: row;
1883
+ flex-direction: row;
1884
+ }
1885
+
1886
+ .charts-css.area.reverse-datasets tbody tr {
1887
+ -webkit-box-orient: horizontal;
1888
+ -webkit-box-direction: reverse;
1889
+ -ms-flex-direction: row-reverse;
1890
+ flex-direction: row-reverse;
1891
+ }
1892
+
1893
+ .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td {
1894
+ -webkit-box-pack: end;
1895
+ -ms-flex-pack: end;
1896
+ justify-content: flex-end;
1897
+ -webkit-box-align: end;
1898
+ -ms-flex-align: end;
1899
+ align-items: flex-end;
1900
+ }
1901
+
1902
+ .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td::before {
1903
+ -webkit-clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% 100%, 0% 100%);
1904
+ clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% 100%, 0% 100%);
1905
+ }
1906
+
1907
+ .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td .data {
1908
+ -webkit-transform: translateX(50%);
1909
+ transform: translateX(50%);
1910
+ }
1911
+
1912
+ .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td::after {
1913
+ height: calc(100% * var(--size));
1914
+ }
1915
+
1916
+ .charts-css.area:not(.reverse).reverse-data tbody tr td {
1917
+ -webkit-box-pack: end;
1918
+ -ms-flex-pack: end;
1919
+ justify-content: flex-end;
1920
+ -webkit-box-align: start;
1921
+ -ms-flex-align: start;
1922
+ align-items: flex-start;
1923
+ }
1924
+
1925
+ .charts-css.area:not(.reverse).reverse-data tbody tr td::before {
1926
+ -webkit-clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% 100%, 0% 100%);
1927
+ clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% 100%, 0% 100%);
1928
+ }
1929
+
1930
+ .charts-css.area:not(.reverse).reverse-data tbody tr td .data {
1931
+ -webkit-transform: translateX(-50%);
1932
+ transform: translateX(-50%);
1933
+ }
1934
+
1935
+ .charts-css.area:not(.reverse).reverse-data tbody tr td::after {
1936
+ height: calc(100% * var(--size));
1937
+ }
1938
+
1939
+ .charts-css.area.reverse:not(.reverse-data) tbody tr td {
1940
+ -webkit-box-pack: end;
1941
+ -ms-flex-pack: end;
1942
+ justify-content: flex-end;
1943
+ -webkit-box-align: end;
1944
+ -ms-flex-align: end;
1945
+ align-items: flex-end;
1946
+ }
1947
+
1948
+ .charts-css.area.reverse:not(.reverse-data) tbody tr td::before {
1949
+ -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
1950
+ clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
1951
+ }
1952
+
1953
+ .charts-css.area.reverse:not(.reverse-data) tbody tr td .data {
1954
+ -webkit-transform: translateX(50%);
1955
+ transform: translateX(50%);
1956
+ }
1957
+
1958
+ .charts-css.area.reverse:not(.reverse-data) tbody tr td::after {
1959
+ height: calc(100% * (1 -var(--size)));
1960
+ }
1961
+
1962
+ .charts-css.area.reverse.reverse-data tbody tr td {
1963
+ -webkit-box-pack: end;
1964
+ -ms-flex-pack: end;
1965
+ justify-content: flex-end;
1966
+ -webkit-box-align: start;
1967
+ -ms-flex-align: start;
1968
+ align-items: flex-start;
1969
+ }
1970
+
1971
+ .charts-css.area.reverse.reverse-data tbody tr td::before {
1972
+ -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
1973
+ clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
1974
+ }
1975
+
1976
+ .charts-css.area.reverse.reverse-data tbody tr td .data {
1977
+ -webkit-transform: translateX(-50%);
1978
+ transform: translateX(-50%);
1979
+ }
1980
+
1981
+ .charts-css.area.reverse.reverse-data tbody tr td::after {
1982
+ height: calc(100% * (1 - var(--size)));
1983
+ }
1984
+
1985
+ .charts-css.area.data-spacing-1 tbody tr td::before, .charts-css.area.datasets-spacing-1 tbody tr td::before {
1986
+ -webkit-margin-start: 1px;
1987
+ margin-inline-start: 1px;
1988
+ -webkit-margin-end: 1px;
1989
+ margin-inline-end: 1px;
1990
+ }
1991
+
1992
+ .charts-css.area.data-spacing-2 tbody tr td::before, .charts-css.area.datasets-spacing-2 tbody tr td::before {
1993
+ -webkit-margin-start: 2px;
1994
+ margin-inline-start: 2px;
1995
+ -webkit-margin-end: 2px;
1996
+ margin-inline-end: 2px;
1997
+ }
1998
+
1999
+ .charts-css.area.data-spacing-3 tbody tr td::before, .charts-css.area.datasets-spacing-3 tbody tr td::before {
2000
+ -webkit-margin-start: 3px;
2001
+ margin-inline-start: 3px;
2002
+ -webkit-margin-end: 3px;
2003
+ margin-inline-end: 3px;
2004
+ }
2005
+
2006
+ .charts-css.area.data-spacing-4 tbody tr td::before, .charts-css.area.datasets-spacing-4 tbody tr td::before {
2007
+ -webkit-margin-start: 4px;
2008
+ margin-inline-start: 4px;
2009
+ -webkit-margin-end: 4px;
2010
+ margin-inline-end: 4px;
2011
+ }
2012
+
2013
+ .charts-css.area.data-spacing-5 tbody tr td::before, .charts-css.area.datasets-spacing-5 tbody tr td::before {
2014
+ -webkit-margin-start: 5px;
2015
+ margin-inline-start: 5px;
2016
+ -webkit-margin-end: 5px;
2017
+ margin-inline-end: 5px;
2018
+ }
2019
+
2020
+ .charts-css.area.data-spacing-6 tbody tr td::before, .charts-css.area.datasets-spacing-6 tbody tr td::before {
2021
+ -webkit-margin-start: 6px;
2022
+ margin-inline-start: 6px;
2023
+ -webkit-margin-end: 6px;
2024
+ margin-inline-end: 6px;
2025
+ }
2026
+
2027
+ .charts-css.area.data-spacing-7 tbody tr td::before, .charts-css.area.datasets-spacing-7 tbody tr td::before {
2028
+ -webkit-margin-start: 7px;
2029
+ margin-inline-start: 7px;
2030
+ -webkit-margin-end: 7px;
2031
+ margin-inline-end: 7px;
2032
+ }
2033
+
2034
+ .charts-css.area.data-spacing-8 tbody tr td::before, .charts-css.area.datasets-spacing-8 tbody tr td::before {
2035
+ -webkit-margin-start: 8px;
2036
+ margin-inline-start: 8px;
2037
+ -webkit-margin-end: 8px;
2038
+ margin-inline-end: 8px;
2039
+ }
2040
+
2041
+ .charts-css.area.data-spacing-9 tbody tr td::before, .charts-css.area.datasets-spacing-9 tbody tr td::before {
2042
+ -webkit-margin-start: 9px;
2043
+ margin-inline-start: 9px;
2044
+ -webkit-margin-end: 9px;
2045
+ margin-inline-end: 9px;
2046
+ }
2047
+
2048
+ .charts-css.area.data-spacing-10 tbody tr td::before, .charts-css.area.datasets-spacing-10 tbody tr td::before {
2049
+ -webkit-margin-start: 10px;
2050
+ margin-inline-start: 10px;
2051
+ -webkit-margin-end: 10px;
2052
+ margin-inline-end: 10px;
2053
+ }
2054
+
2055
+ .charts-css.area.data-spacing-11 tbody tr td::before, .charts-css.area.datasets-spacing-11 tbody tr td::before {
2056
+ -webkit-margin-start: 11px;
2057
+ margin-inline-start: 11px;
2058
+ -webkit-margin-end: 11px;
2059
+ margin-inline-end: 11px;
2060
+ }
2061
+
2062
+ .charts-css.area.data-spacing-12 tbody tr td::before, .charts-css.area.datasets-spacing-12 tbody tr td::before {
2063
+ -webkit-margin-start: 12px;
2064
+ margin-inline-start: 12px;
2065
+ -webkit-margin-end: 12px;
2066
+ margin-inline-end: 12px;
2067
+ }
2068
+
2069
+ .charts-css.area.data-spacing-13 tbody tr td::before, .charts-css.area.datasets-spacing-13 tbody tr td::before {
2070
+ -webkit-margin-start: 13px;
2071
+ margin-inline-start: 13px;
2072
+ -webkit-margin-end: 13px;
2073
+ margin-inline-end: 13px;
2074
+ }
2075
+
2076
+ .charts-css.area.data-spacing-14 tbody tr td::before, .charts-css.area.datasets-spacing-14 tbody tr td::before {
2077
+ -webkit-margin-start: 14px;
2078
+ margin-inline-start: 14px;
2079
+ -webkit-margin-end: 14px;
2080
+ margin-inline-end: 14px;
2081
+ }
2082
+
2083
+ .charts-css.area.data-spacing-15 tbody tr td::before, .charts-css.area.datasets-spacing-15 tbody tr td::before {
2084
+ -webkit-margin-start: 15px;
2085
+ margin-inline-start: 15px;
2086
+ -webkit-margin-end: 15px;
2087
+ margin-inline-end: 15px;
2088
+ }
2089
+
2090
+ .charts-css.area.data-spacing-16 tbody tr td::before, .charts-css.area.datasets-spacing-16 tbody tr td::before {
2091
+ -webkit-margin-start: 16px;
2092
+ margin-inline-start: 16px;
2093
+ -webkit-margin-end: 16px;
2094
+ margin-inline-end: 16px;
2095
+ }
2096
+
2097
+ .charts-css.area.data-spacing-17 tbody tr td::before, .charts-css.area.datasets-spacing-17 tbody tr td::before {
2098
+ -webkit-margin-start: 17px;
2099
+ margin-inline-start: 17px;
2100
+ -webkit-margin-end: 17px;
2101
+ margin-inline-end: 17px;
2102
+ }
2103
+
2104
+ .charts-css.area.data-spacing-18 tbody tr td::before, .charts-css.area.datasets-spacing-18 tbody tr td::before {
2105
+ -webkit-margin-start: 18px;
2106
+ margin-inline-start: 18px;
2107
+ -webkit-margin-end: 18px;
2108
+ margin-inline-end: 18px;
2109
+ }
2110
+
2111
+ .charts-css.area.data-spacing-19 tbody tr td::before, .charts-css.area.datasets-spacing-19 tbody tr td::before {
2112
+ -webkit-margin-start: 19px;
2113
+ margin-inline-start: 19px;
2114
+ -webkit-margin-end: 19px;
2115
+ margin-inline-end: 19px;
2116
+ }
2117
+
2118
+ .charts-css.area.data-spacing-20 tbody tr td::before, .charts-css.area.datasets-spacing-20 tbody tr td::before {
2119
+ -webkit-margin-start: 20px;
2120
+ margin-inline-start: 20px;
2121
+ -webkit-margin-end: 20px;
2122
+ margin-inline-end: 20px;
2123
+ }
2124
+
2125
+ /*
2126
+ * Line Chart
2127
+ */
2128
+ .charts-css.line {
2129
+ --line-size: 3px;
2130
+ }
2131
+
2132
+ .charts-css.line tbody {
2133
+ display: -webkit-box;
2134
+ display: -ms-flexbox;
2135
+ display: flex;
2136
+ -webkit-box-pack: justify;
2137
+ -ms-flex-pack: justify;
2138
+ justify-content: space-between;
2139
+ -webkit-box-align: stretch;
2140
+ -ms-flex-align: stretch;
2141
+ align-items: stretch;
2142
+ width: 100%;
2143
+ height: calc(100% - var(--heading-size));
2144
+ }
2145
+
2146
+ .charts-css.line tbody tr {
2147
+ position: relative;
2148
+ -webkit-box-flex: 1;
2149
+ -ms-flex-positive: 1;
2150
+ flex-grow: 1;
2151
+ -ms-flex-negative: 1;
2152
+ flex-shrink: 1;
2153
+ -ms-flex-preferred-size: 0;
2154
+ flex-basis: 0;
2155
+ overflow-wrap: anywhere;
2156
+ display: -webkit-box;
2157
+ display: -ms-flexbox;
2158
+ display: flex;
2159
+ -webkit-box-pack: start;
2160
+ -ms-flex-pack: start;
2161
+ justify-content: flex-start;
2162
+ }
2163
+
2164
+ .charts-css.line tbody tr th {
2165
+ position: absolute;
2166
+ right: 0;
2167
+ left: 0;
2168
+ }
2169
+
2170
+ .charts-css.line tbody tr td {
2171
+ display: -webkit-box;
2172
+ display: -ms-flexbox;
2173
+ display: flex;
2174
+ -webkit-box-orient: vertical;
2175
+ -webkit-box-direction: normal;
2176
+ -ms-flex-flow: column;
2177
+ flex-flow: column;
2178
+ width: 100%;
2179
+ height: 100%;
2180
+ position: absolute;
2181
+ top: 0;
2182
+ right: 0;
2183
+ bottom: 0;
2184
+ left: 0;
2185
+ z-index: 0;
2186
+ }
2187
+
2188
+ .charts-css.line tbody tr td::before {
2189
+ content: "";
2190
+ position: absolute;
2191
+ top: 0;
2192
+ right: 0;
2193
+ bottom: 0;
2194
+ left: 0;
2195
+ z-index: -1;
2196
+ }
2197
+
2198
+ .charts-css.line tbody tr td::after {
2199
+ content: "";
2200
+ width: 100%;
2201
+ }
2202
+
2203
+ .charts-css.line:not(.reverse) tbody tr {
2204
+ -webkit-box-align: end;
2205
+ -ms-flex-align: end;
2206
+ align-items: flex-end;
2207
+ -webkit-margin-after: var(--labels-size);
2208
+ margin-block-end: var(--labels-size);
2209
+ }
2210
+
2211
+ .charts-css.line:not(.reverse) tbody tr th {
2212
+ bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
2213
+ height: var(--labels-size);
2214
+ }
2215
+
2216
+ .charts-css.line:not(.reverse) tbody tr td {
2217
+ -webkit-box-align: start;
2218
+ -ms-flex-align: start;
2219
+ align-items: flex-start;
2220
+ }
2221
+
2222
+ .charts-css.line.reverse tbody tr {
2223
+ -webkit-box-align: start;
2224
+ -ms-flex-align: start;
2225
+ align-items: flex-start;
2226
+ -webkit-margin-before: var(--labels-size);
2227
+ margin-block-start: var(--labels-size);
2228
+ }
2229
+
2230
+ .charts-css.line.reverse tbody tr th {
2231
+ top: calc(-1 * var(--labels-size) - var(--primary-axis-width));
2232
+ height: var(--labels-size);
2233
+ }
2234
+
2235
+ .charts-css.line.reverse tbody tr td {
2236
+ -webkit-box-align: end;
2237
+ -ms-flex-align: end;
2238
+ align-items: flex-end;
2239
+ }
2240
+
2241
+ .charts-css.line:not(.reverse-data) tbody {
2242
+ -webkit-box-orient: horizontal;
2243
+ -webkit-box-direction: normal;
2244
+ -ms-flex-direction: row;
2245
+ flex-direction: row;
2246
+ }
2247
+
2248
+ .charts-css.line.reverse-data tbody {
2249
+ -webkit-box-orient: horizontal;
2250
+ -webkit-box-direction: reverse;
2251
+ -ms-flex-direction: row-reverse;
2252
+ flex-direction: row-reverse;
2253
+ }
2254
+
2255
+ .charts-css.line:not(.reverse-datasets) tbody tr {
2256
+ -webkit-box-orient: horizontal;
2257
+ -webkit-box-direction: normal;
2258
+ -ms-flex-direction: row;
2259
+ flex-direction: row;
2260
+ }
2261
+
2262
+ .charts-css.line.reverse-datasets tbody tr {
2263
+ -webkit-box-orient: horizontal;
2264
+ -webkit-box-direction: reverse;
2265
+ -ms-flex-direction: row-reverse;
2266
+ flex-direction: row-reverse;
2267
+ }
2268
+
2269
+ .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td {
2270
+ -webkit-box-pack: end;
2271
+ -ms-flex-pack: end;
2272
+ justify-content: flex-end;
2273
+ -webkit-box-align: end;
2274
+ -ms-flex-align: end;
2275
+ align-items: flex-end;
2276
+ }
2277
+
2278
+ .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td::before {
2279
+ -webkit-clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--size)) - var(--line-size)), 0% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)));
2280
+ clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--size)) - var(--line-size)), 0% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)));
2281
+ }
2282
+
2283
+ .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td .data {
2284
+ -webkit-transform: translateX(50%);
2285
+ transform: translateX(50%);
2286
+ }
2287
+
2288
+ .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td::after {
2289
+ height: calc(100% * var(--size));
2290
+ }
2291
+
2292
+ .charts-css.line:not(.reverse).reverse-data tbody tr td {
2293
+ -webkit-box-pack: end;
2294
+ -ms-flex-pack: end;
2295
+ justify-content: flex-end;
2296
+ -webkit-box-align: start;
2297
+ -ms-flex-align: start;
2298
+ align-items: flex-start;
2299
+ }
2300
+
2301
+ .charts-css.line:not(.reverse).reverse-data tbody tr td::before {
2302
+ -webkit-clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)), 0% calc(100% * (1 - var(--size)) - var(--line-size)));
2303
+ clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)), 0% calc(100% * (1 - var(--size)) - var(--line-size)));
2304
+ }
2305
+
2306
+ .charts-css.line:not(.reverse).reverse-data tbody tr td .data {
2307
+ -webkit-transform: translateX(-50%);
2308
+ transform: translateX(-50%);
2309
+ }
2310
+
2311
+ .charts-css.line:not(.reverse).reverse-data tbody tr td::after {
2312
+ height: calc(100% * var(--size));
2313
+ }
2314
+
2315
+ .charts-css.line.reverse:not(.reverse-data) tbody tr td {
2316
+ -webkit-box-pack: end;
2317
+ -ms-flex-pack: end;
2318
+ justify-content: flex-end;
2319
+ -webkit-box-align: end;
2320
+ -ms-flex-align: end;
2321
+ align-items: flex-end;
2322
+ }
2323
+
2324
+ .charts-css.line.reverse:not(.reverse-data) tbody tr td::before {
2325
+ -webkit-clip-path: polygon(0% calc(100% * var(--start, var(--size)) - var(--line-size)), 100% calc(100% * var(--size) - var(--line-size)), 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
2326
+ clip-path: polygon(0% calc(100% * var(--start, var(--size)) - var(--line-size)), 100% calc(100% * var(--size) - var(--line-size)), 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
2327
+ }
2328
+
2329
+ .charts-css.line.reverse:not(.reverse-data) tbody tr td .data {
2330
+ -webkit-transform: translateX(50%);
2331
+ transform: translateX(50%);
2332
+ }
2333
+
2334
+ .charts-css.line.reverse:not(.reverse-data) tbody tr td::after {
2335
+ height: calc(100% * (1 -var(--size)));
2336
+ }
2337
+
2338
+ .charts-css.line.reverse.reverse-data tbody tr td {
2339
+ -webkit-box-pack: end;
2340
+ -ms-flex-pack: end;
2341
+ justify-content: flex-end;
2342
+ -webkit-box-align: start;
2343
+ -ms-flex-align: start;
2344
+ align-items: flex-start;
2345
+ }
2346
+
2347
+ .charts-css.line.reverse.reverse-data tbody tr td::before {
2348
+ -webkit-clip-path: polygon(0% calc(100% * var(--size) - var(--line-size)), 100% calc(100% * var(--start, var(--size)) - var(--line-size)), 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
2349
+ clip-path: polygon(0% calc(100% * var(--size) - var(--line-size)), 100% calc(100% * var(--start, var(--size)) - var(--line-size)), 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
2350
+ }
2351
+
2352
+ .charts-css.line.reverse.reverse-data tbody tr td .data {
2353
+ -webkit-transform: translateX(-50%);
2354
+ transform: translateX(-50%);
2355
+ }
2356
+
2357
+ .charts-css.line.reverse.reverse-data tbody tr td::after {
2358
+ height: calc(100% * (1 - var(--size)));
2359
+ }
2360
+
2361
+ .charts-css.line.data-spacing-1 tbody tr td::before, .charts-css.line.datasets-spacing-1 tbody tr td::before {
2362
+ -webkit-margin-start: 1px;
2363
+ margin-inline-start: 1px;
2364
+ -webkit-margin-end: 1px;
2365
+ margin-inline-end: 1px;
2366
+ }
2367
+
2368
+ .charts-css.line.data-spacing-2 tbody tr td::before, .charts-css.line.datasets-spacing-2 tbody tr td::before {
2369
+ -webkit-margin-start: 2px;
2370
+ margin-inline-start: 2px;
2371
+ -webkit-margin-end: 2px;
2372
+ margin-inline-end: 2px;
2373
+ }
2374
+
2375
+ .charts-css.line.data-spacing-3 tbody tr td::before, .charts-css.line.datasets-spacing-3 tbody tr td::before {
2376
+ -webkit-margin-start: 3px;
2377
+ margin-inline-start: 3px;
2378
+ -webkit-margin-end: 3px;
2379
+ margin-inline-end: 3px;
2380
+ }
2381
+
2382
+ .charts-css.line.data-spacing-4 tbody tr td::before, .charts-css.line.datasets-spacing-4 tbody tr td::before {
2383
+ -webkit-margin-start: 4px;
2384
+ margin-inline-start: 4px;
2385
+ -webkit-margin-end: 4px;
2386
+ margin-inline-end: 4px;
2387
+ }
2388
+
2389
+ .charts-css.line.data-spacing-5 tbody tr td::before, .charts-css.line.datasets-spacing-5 tbody tr td::before {
2390
+ -webkit-margin-start: 5px;
2391
+ margin-inline-start: 5px;
2392
+ -webkit-margin-end: 5px;
2393
+ margin-inline-end: 5px;
2394
+ }
2395
+
2396
+ .charts-css.line.data-spacing-6 tbody tr td::before, .charts-css.line.datasets-spacing-6 tbody tr td::before {
2397
+ -webkit-margin-start: 6px;
2398
+ margin-inline-start: 6px;
2399
+ -webkit-margin-end: 6px;
2400
+ margin-inline-end: 6px;
2401
+ }
2402
+
2403
+ .charts-css.line.data-spacing-7 tbody tr td::before, .charts-css.line.datasets-spacing-7 tbody tr td::before {
2404
+ -webkit-margin-start: 7px;
2405
+ margin-inline-start: 7px;
2406
+ -webkit-margin-end: 7px;
2407
+ margin-inline-end: 7px;
2408
+ }
2409
+
2410
+ .charts-css.line.data-spacing-8 tbody tr td::before, .charts-css.line.datasets-spacing-8 tbody tr td::before {
2411
+ -webkit-margin-start: 8px;
2412
+ margin-inline-start: 8px;
2413
+ -webkit-margin-end: 8px;
2414
+ margin-inline-end: 8px;
2415
+ }
2416
+
2417
+ .charts-css.line.data-spacing-9 tbody tr td::before, .charts-css.line.datasets-spacing-9 tbody tr td::before {
2418
+ -webkit-margin-start: 9px;
2419
+ margin-inline-start: 9px;
2420
+ -webkit-margin-end: 9px;
2421
+ margin-inline-end: 9px;
2422
+ }
2423
+
2424
+ .charts-css.line.data-spacing-10 tbody tr td::before, .charts-css.line.datasets-spacing-10 tbody tr td::before {
2425
+ -webkit-margin-start: 10px;
2426
+ margin-inline-start: 10px;
2427
+ -webkit-margin-end: 10px;
2428
+ margin-inline-end: 10px;
2429
+ }
2430
+
2431
+ .charts-css.line.data-spacing-11 tbody tr td::before, .charts-css.line.datasets-spacing-11 tbody tr td::before {
2432
+ -webkit-margin-start: 11px;
2433
+ margin-inline-start: 11px;
2434
+ -webkit-margin-end: 11px;
2435
+ margin-inline-end: 11px;
2436
+ }
2437
+
2438
+ .charts-css.line.data-spacing-12 tbody tr td::before, .charts-css.line.datasets-spacing-12 tbody tr td::before {
2439
+ -webkit-margin-start: 12px;
2440
+ margin-inline-start: 12px;
2441
+ -webkit-margin-end: 12px;
2442
+ margin-inline-end: 12px;
2443
+ }
2444
+
2445
+ .charts-css.line.data-spacing-13 tbody tr td::before, .charts-css.line.datasets-spacing-13 tbody tr td::before {
2446
+ -webkit-margin-start: 13px;
2447
+ margin-inline-start: 13px;
2448
+ -webkit-margin-end: 13px;
2449
+ margin-inline-end: 13px;
2450
+ }
2451
+
2452
+ .charts-css.line.data-spacing-14 tbody tr td::before, .charts-css.line.datasets-spacing-14 tbody tr td::before {
2453
+ -webkit-margin-start: 14px;
2454
+ margin-inline-start: 14px;
2455
+ -webkit-margin-end: 14px;
2456
+ margin-inline-end: 14px;
2457
+ }
2458
+
2459
+ .charts-css.line.data-spacing-15 tbody tr td::before, .charts-css.line.datasets-spacing-15 tbody tr td::before {
2460
+ -webkit-margin-start: 15px;
2461
+ margin-inline-start: 15px;
2462
+ -webkit-margin-end: 15px;
2463
+ margin-inline-end: 15px;
2464
+ }
2465
+
2466
+ .charts-css.line.data-spacing-16 tbody tr td::before, .charts-css.line.datasets-spacing-16 tbody tr td::before {
2467
+ -webkit-margin-start: 16px;
2468
+ margin-inline-start: 16px;
2469
+ -webkit-margin-end: 16px;
2470
+ margin-inline-end: 16px;
2471
+ }
2472
+
2473
+ .charts-css.line.data-spacing-17 tbody tr td::before, .charts-css.line.datasets-spacing-17 tbody tr td::before {
2474
+ -webkit-margin-start: 17px;
2475
+ margin-inline-start: 17px;
2476
+ -webkit-margin-end: 17px;
2477
+ margin-inline-end: 17px;
2478
+ }
2479
+
2480
+ .charts-css.line.data-spacing-18 tbody tr td::before, .charts-css.line.datasets-spacing-18 tbody tr td::before {
2481
+ -webkit-margin-start: 18px;
2482
+ margin-inline-start: 18px;
2483
+ -webkit-margin-end: 18px;
2484
+ margin-inline-end: 18px;
2485
+ }
2486
+
2487
+ .charts-css.line.data-spacing-19 tbody tr td::before, .charts-css.line.datasets-spacing-19 tbody tr td::before {
2488
+ -webkit-margin-start: 19px;
2489
+ margin-inline-start: 19px;
2490
+ -webkit-margin-end: 19px;
2491
+ margin-inline-end: 19px;
2492
+ }
2493
+
2494
+ .charts-css.line.data-spacing-20 tbody tr td::before, .charts-css.line.datasets-spacing-20 tbody tr td::before {
2495
+ -webkit-margin-start: 20px;
2496
+ margin-inline-start: 20px;
2497
+ -webkit-margin-end: 20px;
2498
+ margin-inline-end: 20px;
2499
+ }
2500
+
2501
+ /*
2502
+ * Radial Chart
2503
+ */
2504
+ .charts-css.radial tbody {
2505
+ display: block;
2506
+ width: 100%;
2507
+ height: 0;
2508
+ -webkit-padding-after: 100%;
2509
+ padding-block-end: 100%;
2510
+ border-radius: 50%;
2511
+ background-color: var(--chart-bg-color);
2512
+ }
2513
+
2514
+ .charts-css.radial tbody tr {
2515
+ display: none;
2516
+ }
2517
+
2518
+ /*
2519
+ * Pie Chart
2520
+ */
2521
+ .charts-css.pie tbody {
2522
+ display: block;
2523
+ width: 100%;
2524
+ height: 0;
2525
+ -webkit-padding-after: 100%;
2526
+ padding-block-end: 100%;
2527
+ border-radius: 50%;
2528
+ background-color: var(--chart-bg-color);
2529
+ }
2530
+
2531
+ .charts-css.pie tbody tr {
2532
+ display: none;
2533
+ }
2534
+
2535
+ /*
2536
+ * Donut Chart
2537
+ */
2538
+ .charts-css.donut tbody {
2539
+ display: block;
2540
+ width: 100%;
2541
+ height: 0;
2542
+ -webkit-padding-after: 100%;
2543
+ padding-block-end: 100%;
2544
+ border-radius: 50%;
2545
+ background-color: var(--chart-bg-color);
2546
+ }
2547
+
2548
+ .charts-css.donut tbody tr {
2549
+ display: none;
2550
+ }
2551
+
2552
+ .charts-css.donut tbody::after {
2553
+ content: "";
2554
+ position: absolute;
2555
+ top: 50%;
2556
+ left: 50%;
2557
+ -webkit-transform: translate(-50%, -50%);
2558
+ transform: translate(-50%, -50%);
2559
+ width: var(--donut-inner-size, 50%);
2560
+ height: var(--donut-inner-size, 50%);
2561
+ display: -webkit-box;
2562
+ display: -ms-flexbox;
2563
+ display: flex;
2564
+ -webkit-box-pack: center;
2565
+ -ms-flex-pack: center;
2566
+ justify-content: center;
2567
+ -webkit-box-align: center;
2568
+ -ms-flex-align: center;
2569
+ align-items: center;
2570
+ border-radius: 50%;
2571
+ background-color: var(--donut-inner-color, #fff);
2572
+ }
2573
+
2574
+ /*
2575
+ * Polar Chart
2576
+ */
2577
+ .charts-css.polar tbody {
2578
+ display: block;
2579
+ width: 100%;
2580
+ height: 0;
2581
+ -webkit-padding-after: 100%;
2582
+ padding-block-end: 100%;
2583
+ border-radius: 50%;
2584
+ background-color: var(--chart-bg-color);
2585
+ }
2586
+
2587
+ .charts-css.polar tbody tr {
2588
+ display: none;
2589
+ }
2590
+
2591
+ /*
2592
+ * Radar Chart
2593
+ */
2594
+ .charts-css.radar tbody {
2595
+ display: block;
2596
+ width: 100%;
2597
+ height: 0;
2598
+ -webkit-padding-after: 100%;
2599
+ padding-block-end: 100%;
2600
+ border-radius: 50%;
2601
+ background-color: var(--chart-bg-color);
2602
+ }
2603
+
2604
+ .charts-css.radar tbody tr {
2605
+ display: none;
2606
+ }