[data-ag-charts] {
  overflow: hidden;
}

/* Center charts with explicit width and heights */
.ag-chart-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* button:not(
    #myGrid button,
    #myChart button,
    button[class*="ag-"],
    .ag-chart-context-menu button
  ) {
  --background-color: transparent;
  --text-color: #212529;
  --color-border-primary: #d0d5dd;
  --hover-background-color: rgba(0, 0, 0, 0.1);

  appearance: none;
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  height: 36px;
  color: var(--text-color);
  background-color: var(--background-color);
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.375em 1em 0.5em;
  white-space: nowrap;
  margin-right: 6px;
  margin-bottom: 8px;
  transition: background-color 0.25s ease-in-out;
} */

/* button:not(
    #myGrid button,
    #myChart button,
    button[class*="ag-"],
    .ag-chart-context-menu button
  ):hover {
  background-color: var(--hover-background-color);
}

:root[data-dark-mode="true"]
  button:not(
    #myGrid button,
    #myChart button,
    button[class*="ag-"],
    .ag-chart-context-menu button
  ) {
  --text-color: #f8f9fa;
  --color-border-primary: rgba(255, 255, 255, 0.2);
  --hover-background-color: #2a343e;
} */

/* Hide codesandbox highlighter */
body>#highlighter {
  display: none;
}

._icon_1tqo9_1 {
  fill: var(--color-icon);
  width: var(--icon-size);
  height: var(--icon-size);
}

._cta_x2rta_1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  transition:
    color 0.25s ease-in-out,
    background-color 0.25s ease-in-out;
  cursor: pointer;
}

._cta_x2rta_1:hover {
  background-color: var(--color-util-brand-100);
}

._cta_x2rta_1 svg {
  --icon-size: 1.25em;
  fill: var(--color-link);
  transform: translate(1px, 0.75px);
  transition: fill 0.25s ease-in-out;
}

li:first-child ._cta_x2rta_1 svg {
  --icon-size: 1.35em;
}

[data-dark-mode="true"] ._cta_x2rta_1:hover {
  background-color: var(--color-util-brand-50);
}

._tooltip_x2rta_28 {
  --tooltip-background: var(--color-fg-primary);
  position: absolute;
  display: block;
  color: var(--color-bg-primary);
  top: -44px;
  padding: 4px 16px;
  white-space: nowrap;
  font-weight: 600;
  background-color: var(--tooltip-background);
  border-radius: 6px;
  transform: translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition-delay: 0;
  transition:
    opacity 0.165s ease-in,
    transform 0.165s ease-in;
  z-index: 1;
}

._tooltip_x2rta_28:before {
  content: "";
  position: absolute;
  background-color: var(--tooltip-background);
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  bottom: -7px;
  left: calc(50% - 8px);
  border-radius: 3px;
  z-index: -1;
}

._cta_x2rta_1:hover ._tooltip_x2rta_28 {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.33s ease-in,
    transform 0.33s ease-in;
  transition-delay: 0.165s;
}

[data-dark-mode="true"] ._tooltip_x2rta_28 {
  --tooltip-background: var(--color-bg-secondary);
  color: var(--color-fg-primary);
  box-shadow: 0 -4px 16px #0006;
}

.ag-theme-quartz {
  --ag-font-family: monospace;
}