/* This is a v27 theming. Delete when upgrading to a stable later version */

html.theme-dark:root {
  /* modify here */
  --tv-color-platform-background: var(--color-background);
  /* --tv-color-pane-background: var(--color-background); */
  /* @TODO: variable doesnt work here because of trading view parsing, find another way to do it later for dynamic themes */
  --tv-color-pane-background: #101115;
  --tv-color-toolbar-button-background-hover: #2d2d34;
  --tv-color-toolbar-button-background-expanded: #2d2d34;
  --tv-color-toolbar-button-background-active: #4b4b51;
  --tv-color-toolbar-button-background-active-hover: #4b4b51;
  --tv-color-toolbar-button-text: #fff;
  /* --tv-color-toolbar-button-text-hover: #00d945; */
  --tv-color-toolbar-button-text-hover: #55E683;
  /* --tv-color-toolbar-button-text-active: #00d945; */
  --tv-color-toolbar-button-text-active: #55E683;
  /* --tv-color-toolbar-button-text-active-hover: #00d945; */
  --tv-color-toolbar-button-text-active-hover: #55E683;
  --tv-color-item-active-text: #fff;
  /* --tv-color-toolbar-toggle-button-background-active: #00d945; */
  --tv-color-toolbar-toggle-button-background-active: #55E683;
  /* --tv-color-toolbar-toggle-button-background-active-hover: #00d945; */
  --tv-color-toolbar-toggle-button-background-active-hover: #55E683;
  --tv-color-toolbar-divider-background: #4b4b51;
  --tv-color-toolbar-save-layout-loader: #eeeeee;
  --tv-color-popup-background: #14151a;
  /* --tv-color-popup-element-text: #fff; */
  /* --tv-color-popup-element-text-hover: #14151a; */
  /* --tv-color-popup-element-background-hover: #00d945; */
  /* --tv-color-popup-element-background-hover: #55E683; */
  --tv-color-popup-element-divider-background: #4b4b51;
  /* --tv-color-popup-element-secondary-text: #14151a; */
  /* --tv-color-popup-element-secondary-text-active: #14151a; */

  --tv-color-popup-element-hint-text: #eee;
  --tv-color-popup-element-text-active: #14151a;
  /* @TODO: Find a way to appply change to var(--color-primary) */
  --tv-color-popup-element-background-active: #55E683;
  --tv-color-popup-element-toolbox-text: #fff;
  --tv-color-popup-element-toolbox-text-hover: #ffffff;
  /* --tv-color-popup-element-toolbox-text-active-hover: #ffffff; */
  --tv-color-popup-element-toolbox-background-hover: #55E683;
  --tv-color-popup-element-toolbox-background-active-hover: #55E683;
  /* @TODO: Find a way to appply change to var(--color-primary) */
  --ui-lib-checkbox-color-accent: #55E683;
  --ui-lib-button-default-color-bg: #55E683;
  --ui-lib-button-default-color-content: #14151a;
  /* --range-slider-middle-bg: #00d945; */
  --range-slider-middle-bg: #55E683;

  .dialog-aRAWUDhF {
    background: var(--tv-color-popup-background);
  }
  /* .accessible-raQdxQp0 section-S_1OCXUK summary-ynHBVe1n {
    color: red !important;
  } */

  .intent-primary-WDZ0PRNh {
    /* --ui-lib-intent-color: #00d945; */
    --ui-lib-intent-color: #55E683;
    /* --ui-lib-intent-highlight-color: #00d945; */
    --ui-lib-intent-highlight-color: #55E683;
  }

  .wrapper-GZajBGIm .input-GZajBGIm:checked + .box-GZajBGIm.check-GZajBGIm .icon-GZajBGIm {
    stroke: #0b0c10 !important;
  }

  .color-brand-D4RPB3ZC.variant-secondary-D4RPB3ZC {
    --ui-lib-button-default-color-bg: #0000;
    /* --ui-lib-button-default-color-border: #00d945; */
    --ui-lib-button-default-color-border: var(--color-primary);
    /* --ui-lib-button-default-color-content: #00d945; */
    --ui-lib-button-default-color-content: var(--color-primary);
  }

  .color-brand-D4RPB3ZC.variant-primary-D4RPB3ZC {
    /* --ui-lib-button-default-color-border: #00d945; */
    --ui-lib-button-default-color-border: var(--color-primary);
    /* --ui-lib-button-default-color-bg: #00d945; */
    --ui-lib-button-default-color-bg: var(--color-primary);
    --ui-lib-button-default-color-content: #000;
  }
}

.theme-dark:root {
  --themed-color-active-tab-text-color: #fff;

  --themed-color-btn-black-secondary-default-content: #fff;
  --themed-color-btn-black-secondary-default-border: #fff;

  --themed-color-btn-black-primary-default-bg: #fff;
  --themed-color-btn-black-primary-default-border: #fff;
  --themed-color-btn-black-primary-default-bg-hover: #fff;

  --tv-color-popup-element-text-active: #000;

  --themed-color-control-intent-default: #333;

  /* --themed-color-background-selected: #00d945; */
  --themed-color-background-selected: #55E683;
  /* --tv-color-toolbar-button-text-active: #00d945; */
  --tv-color-toolbar-button-text-active: #55E683;
  /* --tv-color-toolbar-toggle-button-background-active: #00d945; */
  --tv-color-toolbar-toggle-button-background-active: #55E683;
  --tv-color-item-active-text: #fff;

  .TVChart__button--isSelected {
    /* @TODO: Find a way to appply change to var(--themed-color-background-selected) */
    /* color: var(--themed-color-background-selected); */
    color: #55E683;
    font-weight: bold;

    &:hover { 
      color: var(--color-primary);
    }

    &:active {
      color: var(--color-primary);
      opacity: 0.8;
    }
  }

  .TVChart__button__usd,
  .TVChart__button__mc {
    cursor: pointer;

    &:hover {
      color: var(--themed-color-background-selected);
    }

    &:active {
      color: var(--color-primary);
    }
  }

  .TVChart__button__usd {
    padding-right: 2px;
  }

  .TVChart__button__mc {
    padding-left: 2px;
  }

  .TVChart__buttonContainer__usd + div > div {
    transform: rotate(15deg);
    margin: 2px;
    background: #fff9f9 !important;
    opacity: .8;
  }
}