123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663 |
- .apexcharts-canvas {
- position: relative;
- user-select: none;
- /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
- }
- /* scrollbar is not visible by default for legend, hence forcing the visibility */
- .apexcharts-canvas ::-webkit-scrollbar {
- -webkit-appearance: none;
- width: 6px;
- }
- .apexcharts-canvas ::-webkit-scrollbar-thumb {
- border-radius: 4px;
- background-color: rgba(0, 0, 0, .5);
- box-shadow: 0 0 1px rgba(255, 255, 255, .5);
- -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
- }
- .apexcharts-canvas.apexcharts-theme-dark {
- background: #424242;
- }
- .apexcharts-inner {
- position: relative;
- }
- .apexcharts-text tspan {
- font-family: inherit;
- }
- .legend-mouseover-inactive {
- transition: 0.15s ease all;
- opacity: 0.20;
- }
- .apexcharts-series-collapsed {
- opacity: 0;
- }
- .apexcharts-tooltip {
- border-radius: 5px;
- box-shadow: 2px 2px 6px -4px #999;
- cursor: default;
- font-size: 14px;
- left: 62px;
- opacity: 0;
- pointer-events: none;
- position: absolute;
- top: 20px;
- overflow: hidden;
- white-space: nowrap;
- z-index: 12;
- transition: 0.15s ease all;
- }
- .apexcharts-tooltip.apexcharts-active {
- opacity: 1;
- transition: 0.15s ease all;
- }
- .apexcharts-tooltip.apexcharts-theme-light {
- border: 1px solid #e3e3e3;
- background: rgba(255, 255, 255, 0.96);
- }
- .apexcharts-tooltip.apexcharts-theme-dark {
- color: #fff;
- background: rgba(30, 30, 30, 0.8);
- }
- .apexcharts-tooltip * {
- font-family: inherit;
- }
- .apexcharts-tooltip-title {
- padding: 6px;
- font-size: 15px;
- margin-bottom: 4px;
- }
- .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
- background: #ECEFF1;
- border-bottom: 1px solid #ddd;
- }
- .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
- background: rgba(0, 0, 0, 0.7);
- border-bottom: 1px solid #333;
- }
- .apexcharts-tooltip-text-value,
- .apexcharts-tooltip-text-z-value {
- display: inline-block;
- font-weight: 600;
- margin-left: 5px;
- }
- .apexcharts-tooltip-text-z-label:empty,
- .apexcharts-tooltip-text-z-value:empty {
- display: none;
- }
- .apexcharts-tooltip-text-value,
- .apexcharts-tooltip-text-z-value {
- font-weight: 600;
- }
- .apexcharts-tooltip-marker {
- width: 12px;
- height: 12px;
- position: relative;
- top: 0px;
- margin-right: 10px;
- border-radius: 50%;
- }
- .apexcharts-tooltip-series-group {
- padding: 0 10px;
- display: none;
- text-align: left;
- justify-content: left;
- align-items: center;
- }
- .apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
- opacity: 1;
- }
- .apexcharts-tooltip-series-group.apexcharts-active,
- .apexcharts-tooltip-series-group:last-child {
- padding-bottom: 4px;
- }
- .apexcharts-tooltip-series-group-hidden {
- opacity: 0;
- height: 0;
- line-height: 0;
- padding: 0 !important;
- }
- .apexcharts-tooltip-y-group {
- padding: 6px 0 5px;
- }
- .apexcharts-tooltip-candlestick {
- padding: 4px 8px;
- }
- .apexcharts-tooltip-candlestick>div {
- margin: 4px 0;
- }
- .apexcharts-tooltip-candlestick span.value {
- font-weight: bold;
- }
- .apexcharts-tooltip-rangebar {
- padding: 5px 8px;
- }
- .apexcharts-tooltip-rangebar .category {
- font-weight: 600;
- color: #777;
- }
- .apexcharts-tooltip-rangebar .series-name {
- font-weight: bold;
- display: block;
- margin-bottom: 5px;
- }
- .apexcharts-xaxistooltip {
- opacity: 0;
- padding: 9px 10px;
- pointer-events: none;
- color: #373d3f;
- font-size: 13px;
- text-align: center;
- border-radius: 2px;
- position: absolute;
- z-index: 10;
- background: #ECEFF1;
- border: 1px solid #90A4AE;
- transition: 0.15s ease all;
- }
- .apexcharts-xaxistooltip.apexcharts-theme-dark {
- background: rgba(0, 0, 0, 0.7);
- border: 1px solid rgba(0, 0, 0, 0.5);
- color: #fff;
- }
- .apexcharts-xaxistooltip:after,
- .apexcharts-xaxistooltip:before {
- left: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
- .apexcharts-xaxistooltip:after {
- border-color: rgba(236, 239, 241, 0);
- border-width: 6px;
- margin-left: -6px;
- }
- .apexcharts-xaxistooltip:before {
- border-color: rgba(144, 164, 174, 0);
- border-width: 7px;
- margin-left: -7px;
- }
- .apexcharts-xaxistooltip-bottom:after,
- .apexcharts-xaxistooltip-bottom:before {
- bottom: 100%;
- }
- .apexcharts-xaxistooltip-top:after,
- .apexcharts-xaxistooltip-top:before {
- top: 100%;
- }
- .apexcharts-xaxistooltip-bottom:after {
- border-bottom-color: #ECEFF1;
- }
- .apexcharts-xaxistooltip-bottom:before {
- border-bottom-color: #90A4AE;
- }
- .apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
- border-bottom-color: rgba(0, 0, 0, 0.5);
- }
- .apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
- border-bottom-color: rgba(0, 0, 0, 0.5);
- }
- .apexcharts-xaxistooltip-top:after {
- border-top-color: #ECEFF1
- }
- .apexcharts-xaxistooltip-top:before {
- border-top-color: #90A4AE;
- }
- .apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
- border-top-color: rgba(0, 0, 0, 0.5);
- }
- .apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
- border-top-color: rgba(0, 0, 0, 0.5);
- }
- .apexcharts-xaxistooltip.apexcharts-active {
- opacity: 1;
- transition: 0.15s ease all;
- }
- .apexcharts-yaxistooltip {
- opacity: 0;
- padding: 4px 10px;
- pointer-events: none;
- color: #373d3f;
- font-size: 13px;
- text-align: center;
- border-radius: 2px;
- position: absolute;
- z-index: 10;
- background: #ECEFF1;
- border: 1px solid #90A4AE;
- }
- .apexcharts-yaxistooltip.apexcharts-theme-dark {
- background: rgba(0, 0, 0, 0.7);
- border: 1px solid rgba(0, 0, 0, 0.5);
- color: #fff;
- }
- .apexcharts-yaxistooltip:after,
- .apexcharts-yaxistooltip:before {
- top: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
- .apexcharts-yaxistooltip:after {
- border-color: rgba(236, 239, 241, 0);
- border-width: 6px;
- margin-top: -6px;
- }
- .apexcharts-yaxistooltip:before {
- border-color: rgba(144, 164, 174, 0);
- border-width: 7px;
- margin-top: -7px;
- }
- .apexcharts-yaxistooltip-left:after,
- .apexcharts-yaxistooltip-left:before {
- left: 100%;
- }
- .apexcharts-yaxistooltip-right:after,
- .apexcharts-yaxistooltip-right:before {
- right: 100%;
- }
- .apexcharts-yaxistooltip-left:after {
- border-left-color: #ECEFF1;
- }
- .apexcharts-yaxistooltip-left:before {
- border-left-color: #90A4AE;
- }
- .apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
- border-left-color: rgba(0, 0, 0, 0.5);
- }
- .apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
- border-left-color: rgba(0, 0, 0, 0.5);
- }
- .apexcharts-yaxistooltip-right:after {
- border-right-color: #ECEFF1;
- }
- .apexcharts-yaxistooltip-right:before {
- border-right-color: #90A4AE;
- }
- .apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
- border-right-color: rgba(0, 0, 0, 0.5);
- }
- .apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
- border-right-color: rgba(0, 0, 0, 0.5);
- }
- .apexcharts-yaxistooltip.apexcharts-active {
- opacity: 1;
- }
- .apexcharts-yaxistooltip-hidden {
- display: none;
- }
- .apexcharts-xcrosshairs,
- .apexcharts-ycrosshairs {
- pointer-events: none;
- opacity: 0;
- transition: 0.15s ease all;
- }
- .apexcharts-xcrosshairs.apexcharts-active,
- .apexcharts-ycrosshairs.apexcharts-active {
- opacity: 1;
- transition: 0.15s ease all;
- }
- .apexcharts-ycrosshairs-hidden {
- opacity: 0;
- }
- .apexcharts-selection-rect {
- cursor: move;
- }
- .svg_select_boundingRect, .svg_select_points_rot {
- pointer-events: none;
- opacity: 0;
- visibility: hidden;
- }
- .apexcharts-selection-rect + g .svg_select_boundingRect,
- .apexcharts-selection-rect + g .svg_select_points_rot {
- opacity: 0;
- visibility: hidden;
- }
- .apexcharts-selection-rect + g .svg_select_points_l,
- .apexcharts-selection-rect + g .svg_select_points_r {
- cursor: ew-resize;
- opacity: 1;
- visibility: visible;
- }
- .svg_select_points {
- fill: #efefef;
- stroke: #333;
- rx: 2;
- }
- .apexcharts-canvas.apexcharts-zoomable .hovering-zoom {
- cursor: crosshair
- }
- .apexcharts-canvas.apexcharts-zoomable .hovering-pan {
- cursor: move
- }
- .apexcharts-zoom-icon,
- .apexcharts-zoomin-icon,
- .apexcharts-zoomout-icon,
- .apexcharts-reset-icon,
- .apexcharts-pan-icon,
- .apexcharts-selection-icon,
- .apexcharts-menu-icon,
- .apexcharts-toolbar-custom-icon {
- cursor: pointer;
- width: 20px;
- height: 20px;
- line-height: 24px;
- color: #6E8192;
- text-align: center;
- }
- .apexcharts-zoom-icon svg,
- .apexcharts-zoomin-icon svg,
- .apexcharts-zoomout-icon svg,
- .apexcharts-reset-icon svg,
- .apexcharts-menu-icon svg {
- fill: #6E8192;
- }
- .apexcharts-selection-icon svg {
- fill: #444;
- transform: scale(0.76)
- }
- .apexcharts-theme-dark .apexcharts-zoom-icon svg,
- .apexcharts-theme-dark .apexcharts-zoomin-icon svg,
- .apexcharts-theme-dark .apexcharts-zoomout-icon svg,
- .apexcharts-theme-dark .apexcharts-reset-icon svg,
- .apexcharts-theme-dark .apexcharts-pan-icon svg,
- .apexcharts-theme-dark .apexcharts-selection-icon svg,
- .apexcharts-theme-dark .apexcharts-menu-icon svg,
- .apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
- fill: #f3f4f5;
- }
- .apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
- .apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
- .apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
- fill: #008FFB;
- }
- .apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
- .apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
- .apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
- .apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
- .apexcharts-theme-light .apexcharts-reset-icon:hover svg,
- .apexcharts-theme-light .apexcharts-menu-icon:hover svg {
- fill: #333;
- }
- .apexcharts-selection-icon,
- .apexcharts-menu-icon {
- position: relative;
- }
- .apexcharts-reset-icon {
- margin-left: 5px;
- }
- .apexcharts-zoom-icon,
- .apexcharts-reset-icon,
- .apexcharts-menu-icon {
- transform: scale(0.85);
- }
- .apexcharts-zoomin-icon,
- .apexcharts-zoomout-icon {
- transform: scale(0.7)
- }
- .apexcharts-zoomout-icon {
- margin-right: 3px;
- }
- .apexcharts-pan-icon {
- transform: scale(0.62);
- position: relative;
- left: 1px;
- top: 0px;
- }
- .apexcharts-pan-icon svg {
- fill: #fff;
- stroke: #6E8192;
- stroke-width: 2;
- }
- .apexcharts-pan-icon.apexcharts-selected svg {
- stroke: #008FFB;
- }
- .apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
- stroke: #333;
- }
- .apexcharts-toolbar {
- position: absolute;
- z-index: 11;
- max-width: 176px;
- text-align: right;
- border-radius: 3px;
- padding: 0px 6px 2px 6px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .apexcharts-menu {
- background: #fff;
- position: absolute;
- top: 100%;
- border: 1px solid #ddd;
- border-radius: 3px;
- padding: 3px;
- right: 10px;
- opacity: 0;
- min-width: 110px;
- transition: 0.15s ease all;
- pointer-events: none;
- }
- .apexcharts-menu.apexcharts-menu-open {
- opacity: 1;
- pointer-events: all;
- transition: 0.15s ease all;
- }
- .apexcharts-menu-item {
- padding: 6px 7px;
- font-size: 12px;
- cursor: pointer;
- }
- .apexcharts-theme-light .apexcharts-menu-item:hover {
- background: #eee;
- }
- .apexcharts-theme-dark .apexcharts-menu {
- background: rgba(0, 0, 0, 0.7);
- color: #fff;
- }
- @media screen and (min-width: 768px) {
- .apexcharts-canvas:hover .apexcharts-toolbar {
- opacity: 1;
- }
- }
- .apexcharts-datalabel.apexcharts-element-hidden {
- opacity: 0;
- }
- .apexcharts-pie-label,
- .apexcharts-datalabels,
- .apexcharts-datalabel,
- .apexcharts-datalabel-label,
- .apexcharts-datalabel-value {
- cursor: default;
- pointer-events: none;
- }
- .apexcharts-pie-label-delay {
- opacity: 0;
- animation-name: opaque;
- animation-duration: 0.3s;
- animation-fill-mode: forwards;
- animation-timing-function: ease;
- }
- .apexcharts-canvas .apexcharts-element-hidden {
- opacity: 0;
- }
- .apexcharts-hide .apexcharts-series-points {
- opacity: 0;
- }
- .apexcharts-gridline,
- .apexcharts-annotation-rect,
- .apexcharts-tooltip .apexcharts-marker,
- .apexcharts-area-series .apexcharts-area,
- .apexcharts-line,
- .apexcharts-zoom-rect,
- .apexcharts-toolbar svg,
- .apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
- .apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
- .apexcharts-radar-series path,
- .apexcharts-radar-series polygon {
- pointer-events: none;
- }
- /* markers */
- .apexcharts-marker {
- transition: 0.15s ease all;
- }
- @keyframes opaque {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- /* Resize generated styles */
- @keyframes resizeanim {
- from {
- opacity: 0;
- }
- to {
- opacity: 0;
- }
- }
- .resize-triggers {
- animation: 1ms resizeanim;
- visibility: hidden;
- opacity: 0;
- }
- .resize-triggers,
- .resize-triggers>div,
- .contract-trigger:before {
- content: " ";
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- overflow: hidden;
- }
- .resize-triggers>div {
- background: #eee;
- overflow: auto;
- }
- .contract-trigger:before {
- width: 200%;
- height: 200%;
- }
|