.relay-trend-chart { min-height: 350px; color: inherit; }
.relay-trend-chart svg { display: block; width: 100%; height: 350px; overflow: visible; }
.relay-trend-empty { display: grid; min-height: 300px; place-items: center; color: #667078; font-size: 12px; }
.relay-trend-chart .trend-grid { stroke: #edf0ee; }
.relay-trend-chart .trend-axis { fill: #68736c; font-size: 10px; }
.relay-trend-chart .trend-legend { fill: #4f5961; font-size: 9.5px; }
.relay-trend-chart .trend-rate-grid { stroke: #e2e5e3; }
.relay-trend-chart .trend-rate-grid.middle { stroke: #edf0ee; stroke-dasharray: 3 4; }
.relay-trend-chart .trend-rate-axis { fill: #7452a5; font-size: 10px; }
.relay-trend-chart .trend-rate-title { fill: #7452a5; font-size: 10px; font-weight: 600; }
.relay-trend-chart.admin-theme .trend-grid { stroke: #e5e8e9; }
.relay-trend-chart.admin-theme .trend-axis { fill: #667078; }
.relay-trend-chart.admin-theme .trend-rate-grid { stroke: #dcdfe1; }
.relay-trend-chart.admin-theme .trend-rate-grid.middle { stroke: #e7e4eb; }

@media (max-width: 640px) {
  .relay-trend-chart { min-height: 320px; }
  .relay-trend-chart svg { height: 320px; }
  .relay-trend-empty { min-height: 270px; }
}