.trends {
  margin-top: 32px;
}

.trends-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.trends-title {
  font-size: 32px;
  font-weight: 700;
}

.trends .tabs {
  margin-bottom: 32px;
}

.trend-chart {
  margin-bottom: 32px;
  padding-top: 32px;
  border-top: 1px solid #eee;
}

.trend-chart.zoomable {
  user-select: none;
}

.trend-chart.standalone {
  margin: 0;
  border: none;
  padding: 0;
}

/*
 * A hack: cursor is not configurable in recharts, so in we go. This could be
 * better (it currently sets cursor:pointer on the axis grid, too, but there
 * isn't a ton to be done.
 */
.trend-chart.zoomable .recharts-surface {
  cursor: pointer;
}

.trend-chart-title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}

.trend-chart-hover {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 16px;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  pointer-events: none;
  z-index: 1;
}

.trend-chart-hover-label {
  font-weight: 600;
}

.trends-clickable-bar:hover,
.trends-clickable-bar.green:hover {
  fill: #9ccc65;
}

.trends-clickable-bar.red:hover {
  fill: #e57373;
}

.trends-clickable-bar.orange:hover {
  fill: #ff8f00;
}

.trends-clickable-bar.black:hover {
  fill: #424242;
}

.trends-clickable-bar.grey:hover {
  fill: #ccc;
}

.trends-clickable-bar.blue:hover {
  fill: #29b6f6;
}

.trends svg.recharts-surface {
  /* Allow axis labels to extend slightly out of bounds */
  overflow: visible;
}

.heatmap-svg {
  user-select: none;
  cursor: pointer;
}

.heatmap-zoom {
  cursor: pointer;
  stroke: #616161;
  fill: #eee;
}

.heatmap-zoom:hover {
  stroke: #414141;
  fill: #ddd;
}

.drilldown-page-warning-section {
  display: inline-block;
  margin: 0 0 16px;
}

.drilldown-page-dd-chart {
  display: inline-block;
}

.drilldown-page-dd-chart-title {
  margin-left: 4px;
  font-weight: 600;
}

.drilldown-page-tooltip-base {
  color: #8782bc;
}

.drilldown-page-tooltip-selected {
  color: #4daf62;
}

.drilldown-by-text {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  vertical-align: top;
}

.drilldown-page-selection-group {
  display: inline-block;
  margin: 0 0 0 16px;
}

.drilldown-page-zoom-summary {
  display: inline-block;
  height: 40px;
  margin: 0 0 0 36px;
  vertical-align: bottom;
}

.drilldown-page-zoom-summary.zoomed {
  /* 1px of extra margin keeps spacing consistent with the button border. */
  margin: 0 0 0 61px;
}

.drilldown-page-zoom-filters {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 8px;
  height: 40px;
  max-height: 40px;
}

@media (max-width: 1200px) {
  .drilldown-page-zoom-summary.zoomed {
    display: block;
    margin: 12px 0 0;
  }
}

.drilldown-page-zoom-summary.zoomed .drilldown-page-zoom-filters {
  margin-right: 16px;
}

.drilldown-page-zoom-filter-attr {
  font-size: 14px;
  height: 20px;
  max-height: 20px;
  text-align: left;
}

.drilldown-page-zoom-button {
  margin-left: 8px;
  max-height: 40px;
}

.drilldown-page-zoom-button.square {
  padding: 8px;
}

.select.drilldown-page-select {
  font-size: 16px;
  margin: 0;
}

.drilldown-selection-summary {
  font-size: 12px;
  margin-bottom: 4px;
}

.selection-summary-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.selection-summary-indicator.selection {
  background-color: #4daf62;
}

.selection-summary-indicator.baseline {
  background-color: #8782bc;
}

.selection-summary-text {
  vertical-align: top;
}

.card.trend-summary-group {
  flex-direction: column;
  display: inline-block;
  flex-grow: 1;
  margin: 0;
  max-width: 300px;
}

.trend-headline-stat {
  font-size: 20px;
  margin-bottom: 4px;
}

.trend-headline-text {
  font-weight: bold;
  vertical-align: top;
  margin-left: 8px;
}

.trend-sub-item {
  font-size: 12px;
  max-width: 240px;
  margin-bottom: 4px;
}

.trend-change {
  font-weight: bold;
}

.trend-change.up {
  color: #4caf50;
}

.trend-change.down {
  color: #f44336;
}

.trend-summary-block {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 16px;
}
