/* ApxChart (js/apx-charts.js) -- Pipedrive Insights look */
.ax{ position:relative; width:100%; min-width:0; }
.ax-svg{ display:block; overflow:visible; font-family:inherit; }
.ax-grid{ stroke:#e6e7e9; stroke-width:1; shape-rendering:crispEdges; }
.ax-grid.zero{ stroke:#c6c8cc; }
.ax-yl, .ax-xl{ font-size:11px; fill:#65686f; font-weight:500; }
.ax-hit{ fill:transparent; cursor:default; }
.ax-hit.on{ fill:rgba(33,35,44,.045); }
.ax-bar{ transform-box:view-box; animation:axGrow .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes axGrow{ from{ transform:scaleY(0); } }
.ax-line{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.ax-dot{ fill:#fff; stroke-width:2.5; pointer-events:none; }
.ax-dot-h{ opacity:0; transition:opacity .12s; } .ax-dot-h.on{ opacity:1; }
.ax-tip{ position:absolute; z-index:5; pointer-events:none; background:#21232c; color:#fff; border-radius:8px; padding:8px 10px; min-width:140px; font-size:12px; box-shadow:0 8px 24px rgba(21,22,26,.25); opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; }
.ax-tip.on{ opacity:1; transform:none; }
.ax-tip-h{ font-weight:700; margin-bottom:5px; color:#fff; }
.ax-tip-r{ display:flex; align-items:center; gap:7px; color:#d4d6da; line-height:1.7; white-space:nowrap; }
.ax-tip-r i{ width:9px; height:9px; border-radius:2px; flex:none; }
.ax-tip-r b{ margin-left:auto; padding-left:14px; color:#fff; font-weight:700; }
.ax-tip-tot{ border-top:1px solid rgba(255,255,255,.18); margin-top:5px; padding-top:5px; display:flex; color:#d4d6da; } .ax-tip-tot b{ margin-left:auto; color:#fff; }

/* legend chips above a chart */
.ax-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 10px; font-size:12.5px; color:#3d4049; font-weight:500; }
.ax-legend span{ display:inline-flex; align-items:center; gap:6px; }
.ax-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.ax-legend i.ln{ height:3px; border-radius:2px; width:14px; }

/* empty */
.ax-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:26px 0; min-height:180px; }
.ax-empty-art{ display:flex; align-items:flex-end; gap:8px; height:78px; padding:0 10px; border-bottom:1px solid #e6e7e9; }
.ax-empty-art i{ width:18px; border-radius:4px 4px 0 0; background:#e9eaec; }
.ax-empty-art i:nth-child(2n){ background:#dfe1e4; }
.ax-empty p{ margin:0; font-size:13px; color:#65686f; font-weight:500; }

/* horizontal bars */
.axh{ display:flex; flex-direction:column; gap:12px; }
.axh-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.axh-img{ width:34px; height:34px; border-radius:6px; border:1px solid #e6e7e9; background:#fff; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; }
.axh-img img{ width:100%; height:100%; object-fit:cover; } .axh-img img.apx-noimg{ width:70%; height:70%; object-fit:contain; }
.axh-main{ flex:1; min-width:0; }
.axh-top{ display:flex; align-items:baseline; gap:10px; margin-bottom:5px; }
.axh-lbl{ flex:1; min-width:0; font-size:13px; font-weight:600; color:#21232c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.axh-lbl small{ font-weight:500; color:#65686f; margin-left:6px; font-size:12px; }
.axh-top b{ font-size:13px; font-weight:700; color:#21232c; white-space:nowrap; font-variant-numeric:tabular-nums; }
.axh-track{ height:10px; background:#f0f1f3; border-radius:3px; overflow:hidden; }
.axh-bar{ height:100%; border-radius:3px; transform-origin:left; animation:axGrowX .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes axGrowX{ from{ transform:scaleX(0); } }

/* pie */
.ax-pie-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
.ax-pie{ flex:none; overflow:visible; }
.ax-slice{ transition:opacity .15s, transform .15s; transform-origin:115px 115px; cursor:default; }
.ax-slice.dim{ opacity:.35; }
.ax-call{ fill:none; stroke:#9ea1a8; stroke-width:1; }
.ax-call-t{ font-size:11px; fill:#3d4049; font-weight:600; }
.ax-pie-v{ font-size:18px; font-weight:700; fill:#21232c; } .ax-pie-l{ font-size:11px; fill:#65686f; font-weight:500; }
.ax-leg{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:2px; }
.ax-leg-r{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:6px; font-size:13px; color:#21232c; }
.ax-leg-r.on{ background:#f4f5f6; }
.ax-leg-r i{ width:10px; height:10px; border-radius:3px; flex:none; }
.ax-leg-r span{ flex:1; min-width:0; font-weight:600; } .ax-leg-r span small{ display:block; font-weight:500; color:#65686f; font-size:11.5px; }
.ax-leg-r b{ font-weight:700; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; } .ax-leg-r b small{ display:block; font-weight:500; color:#65686f; font-size:11.5px; }

/* heatmap */
.ax-heat{ display:grid; gap:3px; align-items:center; }
.ax-heat-c{ font-size:10.5px; color:#65686f; text-align:center; font-weight:500; height:16px; }
.ax-heat-r{ font-size:11.5px; color:#3d4049; font-weight:600; }
.ax-cell{ display:block; height:22px; border-radius:3px; transition:transform .1s; }
.ax-cell:hover{ outline:2px solid #21232c; outline-offset:-1px; }
.ax-heat-key{ display:flex; align-items:center; gap:4px; justify-content:flex-end; margin-top:10px; font-size:11px; color:#65686f; }
.ax-heat-key i{ width:14px; height:10px; border-radius:2px; display:inline-block; }
.ax-heat-key span{ margin:0 4px; }