:root {
  --main-col-width: 600px;
  --menu-width: 0px;
  --plot-background: var(--wa-color-surface-default);
}

g[aria-label="tip"] {
  --plot-background: var(--wa-color-surface-default);
}

.value-box {
  min-width: 160px;
  min-width: 160px;
  width: 160px;
  text-align: center;
}

wa-page {
  --menu-width: 15%;
  --aside-width: 15%;
  margin: var(--wa-space-xs);
  margin-inline-start: 0;
  &::part(base),
  &::part(main),
  &::part(body) {
    gap: var(--wa-space-xs);
  }
  &::part(header) {
    display: none !important;
  }
}

@media (max-width: 768px) {
  :root {
    --main-col-width: 100%;
  }

  .show-help {
    display: none;
  }

  wa-page {
    --menu-width: 0;
    --aside-width: 0;
  }

  .card-basic,
  #for-summary-plot {
    min-width: 100%;
    max-width: 100%;
  }

  [slot="navigation-toggle"] {
    display: none !important;
  }

  :host(:not([disable-navigation-toggle])[view="mobile"]) slot[name~="navigation-toggle"] {
    display: none;
  }

  wa-button[part="navigation-toggle"],
  .header {
    display: none !important;
  }

  wa-page {
    --menu-width: 0%;
    --aside-width: 0%;
    margin: 0px;
    margin-inline-start: 0;
    &::part(base),
    &::part(main),
    &::part(body) {
      gap: 0px;
    }
    &::part(header) {
      display: none !important;
    }
  }
}