You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

684 lines
13 KiB

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