1.apexcharts-canvas {
2  position: relative;
3  user-select: none;
4  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
5}
6
7
8/* scrollbar is not visible by default for legend, hence forcing the visibility */
9.apexcharts-canvas ::-webkit-scrollbar {
10  -webkit-appearance: none;
11  width: 6px;
12}
13
14.apexcharts-canvas ::-webkit-scrollbar-thumb {
15  border-radius: 4px;
16  background-color: rgba(0, 0, 0, .5);
17  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
18  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
19}
20
21
22.apexcharts-inner {
23  position: relative;
24}
25
26.apexcharts-text tspan {
27  font-family: inherit;
28}
29
30.legend-mouseover-inactive {
31  transition: 0.15s ease all;
32  opacity: 0.20;
33}
34
35.apexcharts-series-collapsed {
36  opacity: 0;
37}
38
39.apexcharts-tooltip {
40  border-radius: 5px;
41  box-shadow: 2px 2px 6px -4px #999;
42  cursor: default;
43  font-size: 14px;
44  left: 62px;
45  opacity: 0;
46  pointer-events: none;
47  position: absolute;
48  top: 20px;
49  display: flex;
50  flex-direction: column;
51  overflow: hidden;
52  white-space: nowrap;
53  z-index: 12;
54  transition: 0.15s ease all;
55}
56
57.apexcharts-tooltip.apexcharts-active {
58  opacity: 1;
59  transition: 0.15s ease all;
60}
61
62.apexcharts-tooltip.apexcharts-theme-light {
63  border: 1px solid #e3e3e3;
64  background: rgba(255, 255, 255, 0.96);
65}
66
67.apexcharts-tooltip.apexcharts-theme-dark {
68  color: #fff;
69  background: rgba(30, 30, 30, 0.8);
70}
71
72.apexcharts-tooltip * {
73  font-family: inherit;
74}
75
76
77.apexcharts-tooltip-title {
78  padding: 6px;
79  font-size: 15px;
80  margin-bottom: 4px;
81}
82
83.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
84  background: #ECEFF1;
85  border-bottom: 1px solid #ddd;
86}
87
88.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
89  background: rgba(0, 0, 0, 0.7);
90  border-bottom: 1px solid #333;
91}
92
93.apexcharts-tooltip-text-y-value,
94.apexcharts-tooltip-text-goals-value,
95.apexcharts-tooltip-text-z-value {
96  display: inline-block;
97  font-weight: 600;
98  margin-left: 5px;
99}
100
101.apexcharts-tooltip-text-y-label:empty,
102.apexcharts-tooltip-text-y-value:empty,
103.apexcharts-tooltip-text-goals-label:empty,
104.apexcharts-tooltip-text-goals-value:empty,
105.apexcharts-tooltip-text-z-value:empty {
106  display: none;
107}
108
109.apexcharts-tooltip-text-y-value,
110.apexcharts-tooltip-text-goals-value,
111.apexcharts-tooltip-text-z-value {
112  font-weight: 600;
113}
114
115.apexcharts-tooltip-text-goals-label,
116.apexcharts-tooltip-text-goals-value {
117  padding: 6px 0 5px;
118}
119
120.apexcharts-tooltip-goals-group,
121.apexcharts-tooltip-text-goals-label,
122.apexcharts-tooltip-text-goals-value {
123  display: flex;
124}
125.apexcharts-tooltip-text-goals-label:not(:empty),
126.apexcharts-tooltip-text-goals-value:not(:empty) {
127  margin-top: -6px;
128}
129
130.apexcharts-tooltip-marker {
131  width: 12px;
132  height: 12px;
133  position: relative;
134  top: 0px;
135  margin-right: 10px;
136  border-radius: 50%;
137}
138
139.apexcharts-tooltip-series-group {
140  padding: 0 10px;
141  display: none;
142  text-align: left;
143  justify-content: left;
144  align-items: center;
145}
146
147.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
148  opacity: 1;
149}
150
151.apexcharts-tooltip-series-group.apexcharts-active,
152.apexcharts-tooltip-series-group:last-child {
153  padding-bottom: 4px;
154}
155
156.apexcharts-tooltip-series-group-hidden {
157  opacity: 0;
158  height: 0;
159  line-height: 0;
160  padding: 0 !important;
161}
162
163.apexcharts-tooltip-y-group {
164  padding: 6px 0 5px;
165}
166
167.apexcharts-tooltip-box, .apexcharts-custom-tooltip {
168  padding: 4px 8px;
169}
170
171.apexcharts-tooltip-boxPlot {
172  display: flex;
173  flex-direction: column-reverse;
174}
175
176.apexcharts-tooltip-box>div {
177  margin: 4px 0;
178}
179
180.apexcharts-tooltip-box span.value {
181  font-weight: bold;
182}
183
184.apexcharts-tooltip-rangebar {
185  padding: 5px 8px;
186}
187
188.apexcharts-tooltip-rangebar .category {
189  font-weight: 600;
190  color: #777;
191}
192
193.apexcharts-tooltip-rangebar .series-name {
194  font-weight: bold;
195  display: block;
196  margin-bottom: 5px;
197}
198
199.apexcharts-xaxistooltip {
200  opacity: 0;
201  padding: 9px 10px;
202  pointer-events: none;
203  color: #373d3f;
204  font-size: 13px;
205  text-align: center;
206  border-radius: 2px;
207  position: absolute;
208  z-index: 10;
209  background: #ECEFF1;
210  border: 1px solid #90A4AE;
211  transition: 0.15s ease all;
212}
213
214.apexcharts-xaxistooltip.apexcharts-theme-dark {
215  background: rgba(0, 0, 0, 0.7);
216  border: 1px solid rgba(0, 0, 0, 0.5);
217  color: #fff;
218}
219
220.apexcharts-xaxistooltip:after,
221.apexcharts-xaxistooltip:before {
222  left: 50%;
223  border: solid transparent;
224  content: " ";
225  height: 0;
226  width: 0;
227  position: absolute;
228  pointer-events: none;
229}
230
231.apexcharts-xaxistooltip:after {
232  border-color: rgba(236, 239, 241, 0);
233  border-width: 6px;
234  margin-left: -6px;
235}
236
237.apexcharts-xaxistooltip:before {
238  border-color: rgba(144, 164, 174, 0);
239  border-width: 7px;
240  margin-left: -7px;
241}
242
243.apexcharts-xaxistooltip-bottom:after,
244.apexcharts-xaxistooltip-bottom:before {
245  bottom: 100%;
246}
247
248.apexcharts-xaxistooltip-top:after,
249.apexcharts-xaxistooltip-top:before {
250  top: 100%;
251}
252
253.apexcharts-xaxistooltip-bottom:after {
254  border-bottom-color: #ECEFF1;
255}
256
257.apexcharts-xaxistooltip-bottom:before {
258  border-bottom-color: #90A4AE;
259}
260
261.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
262  border-bottom-color: rgba(0, 0, 0, 0.5);
263}
264
265.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
266  border-bottom-color: rgba(0, 0, 0, 0.5);
267}
268
269.apexcharts-xaxistooltip-top:after {
270  border-top-color: #ECEFF1
271}
272
273.apexcharts-xaxistooltip-top:before {
274  border-top-color: #90A4AE;
275}
276
277.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
278  border-top-color: rgba(0, 0, 0, 0.5);
279}
280
281.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
282  border-top-color: rgba(0, 0, 0, 0.5);
283}
284
285.apexcharts-xaxistooltip.apexcharts-active {
286  opacity: 1;
287  transition: 0.15s ease all;
288}
289
290.apexcharts-yaxistooltip {
291  opacity: 0;
292  padding: 4px 10px;
293  pointer-events: none;
294  color: #373d3f;
295  font-size: 13px;
296  text-align: center;
297  border-radius: 2px;
298  position: absolute;
299  z-index: 10;
300  background: #ECEFF1;
301  border: 1px solid #90A4AE;
302}
303
304.apexcharts-yaxistooltip.apexcharts-theme-dark {
305  background: rgba(0, 0, 0, 0.7);
306  border: 1px solid rgba(0, 0, 0, 0.5);
307  color: #fff;
308}
309
310.apexcharts-yaxistooltip:after,
311.apexcharts-yaxistooltip:before {
312  top: 50%;
313  border: solid transparent;
314  content: " ";
315  height: 0;
316  width: 0;
317  position: absolute;
318  pointer-events: none;
319}
320
321.apexcharts-yaxistooltip:after {
322  border-color: rgba(236, 239, 241, 0);
323  border-width: 6px;
324  margin-top: -6px;
325}
326
327.apexcharts-yaxistooltip:before {
328  border-color: rgba(144, 164, 174, 0);
329  border-width: 7px;
330  margin-top: -7px;
331}
332
333.apexcharts-yaxistooltip-left:after,
334.apexcharts-yaxistooltip-left:before {
335  left: 100%;
336}
337
338.apexcharts-yaxistooltip-right:after,
339.apexcharts-yaxistooltip-right:before {
340  right: 100%;
341}
342
343.apexcharts-yaxistooltip-left:after {
344  border-left-color: #ECEFF1;
345}
346
347.apexcharts-yaxistooltip-left:before {
348  border-left-color: #90A4AE;
349}
350
351.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
352  border-left-color: rgba(0, 0, 0, 0.5);
353}
354
355.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
356  border-left-color: rgba(0, 0, 0, 0.5);
357}
358
359.apexcharts-yaxistooltip-right:after {
360  border-right-color: #ECEFF1;
361}
362
363.apexcharts-yaxistooltip-right:before {
364  border-right-color: #90A4AE;
365}
366
367.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
368  border-right-color: rgba(0, 0, 0, 0.5);
369}
370
371.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
372  border-right-color: rgba(0, 0, 0, 0.5);
373}
374
375.apexcharts-yaxistooltip.apexcharts-active {
376  opacity: 1;
377}
378
379.apexcharts-yaxistooltip-hidden {
380  display: none;
381}
382
383.apexcharts-xcrosshairs,
384.apexcharts-ycrosshairs {
385  pointer-events: none;
386  opacity: 0;
387  transition: 0.15s ease all;
388}
389
390.apexcharts-xcrosshairs.apexcharts-active,
391.apexcharts-ycrosshairs.apexcharts-active {
392  opacity: 1;
393  transition: 0.15s ease all;
394}
395
396.apexcharts-ycrosshairs-hidden {
397  opacity: 0;
398}
399
400.apexcharts-selection-rect {
401  cursor: move;
402}
403
404.svg_select_boundingRect, .svg_select_points_rot {
405  pointer-events: none;
406  opacity: 0;
407  visibility: hidden;
408}
409.apexcharts-selection-rect + g .svg_select_boundingRect,
410.apexcharts-selection-rect + g .svg_select_points_rot {
411  opacity: 0;
412  visibility: hidden;
413}
414
415.apexcharts-selection-rect + g .svg_select_points_l,
416.apexcharts-selection-rect + g .svg_select_points_r {
417  cursor: ew-resize;
418  opacity: 1;
419  visibility: visible;
420}
421
422.svg_select_points {
423  fill: #efefef;
424  stroke: #333;
425  rx: 2;
426}
427
428.apexcharts-svg {
429  height: auto;
430}
431
432.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
433  cursor: crosshair
434}
435
436.apexcharts-svg.apexcharts-zoomable.hovering-pan {
437  cursor: move
438}
439
440.apexcharts-zoom-icon,
441.apexcharts-zoomin-icon,
442.apexcharts-zoomout-icon,
443.apexcharts-reset-icon,
444.apexcharts-pan-icon,
445.apexcharts-selection-icon,
446.apexcharts-menu-icon,
447.apexcharts-toolbar-custom-icon {
448  cursor: pointer;
449  width: 20px;
450  height: 20px;
451  line-height: 24px;
452  color: #6E8192;
453  text-align: center;
454}
455
456.apexcharts-zoom-icon svg,
457.apexcharts-zoomin-icon svg,
458.apexcharts-zoomout-icon svg,
459.apexcharts-reset-icon svg,
460.apexcharts-menu-icon svg {
461  fill: #6E8192;
462}
463
464.apexcharts-selection-icon svg {
465  fill: #444;
466  transform: scale(0.76)
467}
468
469.apexcharts-theme-dark .apexcharts-zoom-icon svg,
470.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
471.apexcharts-theme-dark .apexcharts-zoomout-icon svg,
472.apexcharts-theme-dark .apexcharts-reset-icon svg,
473.apexcharts-theme-dark .apexcharts-pan-icon svg,
474.apexcharts-theme-dark .apexcharts-selection-icon svg,
475.apexcharts-theme-dark .apexcharts-menu-icon svg,
476.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
477  fill: #f3f4f5;
478}
479
480.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
481.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
482.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
483  fill: #008FFB;
484}
485
486.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
487.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
488.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
489.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
490.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
491.apexcharts-theme-light .apexcharts-menu-icon:hover svg {
492  fill: #333;
493}
494
495.apexcharts-selection-icon,
496.apexcharts-menu-icon {
497  position: relative;
498}
499
500.apexcharts-reset-icon {
501  margin-left: 5px;
502}
503
504.apexcharts-zoom-icon,
505.apexcharts-reset-icon,
506.apexcharts-menu-icon {
507  transform: scale(0.85);
508}
509
510.apexcharts-zoomin-icon,
511.apexcharts-zoomout-icon {
512  transform: scale(0.7)
513}
514
515.apexcharts-zoomout-icon {
516  margin-right: 3px;
517}
518
519.apexcharts-pan-icon {
520  transform: scale(0.62);
521  position: relative;
522  left: 1px;
523  top: 0px;
524}
525
526.apexcharts-pan-icon svg {
527  fill: #fff;
528  stroke: #6E8192;
529  stroke-width: 2;
530}
531
532.apexcharts-pan-icon.apexcharts-selected svg {
533  stroke: #008FFB;
534}
535
536.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
537  stroke: #333;
538}
539
540.apexcharts-toolbar {
541  position: absolute;
542  z-index: 11;
543  max-width: 176px;
544  text-align: right;
545  border-radius: 3px;
546  padding: 0px 6px 2px 6px;
547  display: flex;
548  justify-content: space-between;
549  align-items: center;
550}
551
552.apexcharts-menu {
553  background: #fff;
554  position: absolute;
555  top: 100%;
556  border: 1px solid #ddd;
557  border-radius: 3px;
558  padding: 3px;
559  right: 10px;
560  opacity: 0;
561  min-width: 110px;
562  transition: 0.15s ease all;
563  pointer-events: none;
564}
565
566.apexcharts-menu.apexcharts-menu-open {
567  opacity: 1;
568  pointer-events: all;
569  transition: 0.15s ease all;
570}
571
572.apexcharts-menu-item {
573  padding: 6px 7px;
574  font-size: 12px;
575  cursor: pointer;
576}
577
578.apexcharts-theme-light .apexcharts-menu-item:hover {
579  background: #eee;
580}
581
582.apexcharts-theme-dark .apexcharts-menu {
583  background: rgba(0, 0, 0, 0.7);
584  color: #fff;
585}
586
587@media screen and (min-width: 768px) {
588  .apexcharts-canvas:hover .apexcharts-toolbar {
589    opacity: 1;
590  }
591}
592
593.apexcharts-datalabel.apexcharts-element-hidden {
594  opacity: 0;
595}
596
597.apexcharts-pie-label,
598.apexcharts-datalabels,
599.apexcharts-datalabel,
600.apexcharts-datalabel-label,
601.apexcharts-datalabel-value {
602  cursor: default;
603  pointer-events: none;
604}
605
606.apexcharts-pie-label-delay {
607  opacity: 0;
608  animation-name: opaque;
609  animation-duration: 0.3s;
610  animation-fill-mode: forwards;
611  animation-timing-function: ease;
612}
613
614.apexcharts-canvas .apexcharts-element-hidden {
615  opacity: 0;
616}
617
618.apexcharts-hide .apexcharts-series-points {
619  opacity: 0;
620}
621
622.apexcharts-gridline,
623.apexcharts-annotation-rect,
624.apexcharts-tooltip .apexcharts-marker,
625.apexcharts-area-series .apexcharts-area,
626.apexcharts-line,
627.apexcharts-zoom-rect,
628.apexcharts-toolbar svg,
629.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
630.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
631.apexcharts-radar-series path,
632.apexcharts-radar-series polygon {
633  pointer-events: none;
634}
635
636
637/* markers */
638
639.apexcharts-marker {
640  transition: 0.15s ease all;
641}
642
643@keyframes opaque {
644  0% {
645    opacity: 0;
646  }
647  100% {
648    opacity: 1;
649  }
650}
651
652
653/* Resize generated styles */
654
655@keyframes resizeanim {
656  from {
657    opacity: 0;
658  }
659  to {
660    opacity: 0;
661  }
662}
663
664.resize-triggers {
665  animation: 1ms resizeanim;
666  visibility: hidden;
667  opacity: 0;
668}
669
670.resize-triggers,
671.resize-triggers>div,
672.contract-trigger:before {
673  content: " ";
674  display: block;
675  position: absolute;
676  top: 0;
677  left: 0;
678  height: 100%;
679  width: 100%;
680  overflow: hidden;
681}
682
683.resize-triggers>div {
684  background: #eee;
685  overflow: auto;
686}
687
688.contract-trigger:before {
689  width: 200%;
690  height: 200%;
691}
692