/* Static first: the graph stays visible when scripting or animation is unavailable. */
.page-monitoring .monitor-trend-graphic{display:block;width:100%;height:auto;max-width:100%;border-radius:3px}
.monitor-trend-graphic.is-prepared .trend-line path{stroke-dasharray:1;stroke-dashoffset:1}
.monitor-trend-graphic.is-prepared .trend-area,
.monitor-trend-graphic.is-prepared .trend-dot{opacity:0}
.monitor-trend-graphic.is-playing .trend-line path{animation:monitor-trend-draw 1.65s ease-out var(--trend-delay,0ms) forwards}
.monitor-trend-graphic.is-playing .trend-area{animation:monitor-trend-fade .5s ease-out var(--trend-fill-delay,1300ms) forwards}
.monitor-trend-graphic.is-playing .trend-dot{animation:monitor-trend-fade .25s ease-out var(--trend-dot-delay,1650ms) forwards}
@keyframes monitor-trend-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes monitor-trend-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .monitor-trend-graphic.is-prepared .trend-line path{animation:none!important;stroke-dashoffset:0}
  .monitor-trend-graphic.is-prepared .trend-area,
  .monitor-trend-graphic.is-prepared .trend-dot{animation:none!important;opacity:1}
}