:root {
  --chart-image-opacity: 1;
  --chart-axis-color: var(--color-primary-lighter-purple)
}

.Theme-night,
.Theme-night-toggle:checked ~ * {
  --chart-image-opacity: 0.1;
  --chart-axis-color: var(--color-primary-medium-purple)
}

nav > .Input-with-icon {
  margin-bottom: calc(16 * var(--rem-px));
}

section.Row {
  flex-wrap: wrap;
  align-items: stretch;
}

section.Row > section {
  width: min(35rem, 100%);
  flex: 1 0 auto;
}

.AppLayout-row .Panel h3 {
  text-transform: uppercase;
}

.Indicator-down {
  color: var(--color-charts-chart-red);
} 

.Indicator-up {
  color: var(--color-charts-chart-green);
}

.Indicator-NoChange {
  color: var(--color-secondary-darker-yellow);
}

.Ticker-container {
  display: flex;
  align-items: center;
}

.Ticker-layout {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.Ticker-container cm-coin {
  margin-right: calc(20 * var(--rem-px));
}

.Ticker-seperator {
  height: auto;
  margin: 0 calc(32 * var(--rem-px));
  border-left: 1px solid var(--color-primary-light-purple);
}

.Ticker-description-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
}

.Ticker-description-wrapper p {
  margin: calc(32 * var(--rem-px)) calc(8 * var(--rem-px));
}

.Ticker-content-wrapper {
  display: flex;
  flex-direction: column;
}

.Landing-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Landing-container .Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--style-gap-xxxl);
  max-width: calc(600 * var(--rem-px));
}

.Landing-container .Content > div.Line-h-dark {
  width: calc(280 * var(--rem-px));;
}

.Landing-container .Content > div.Button-wrapper {
  display: flex;
  justify-content: center;
  gap: var(--style-gap-l);
}

.Performance-panel cm-table tbody > tr > * {
  height: 0;
}

.Performance-panel .Performance-table-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.Performance-panel .Performance-table-wrapper > section:last-child > section {
  margin-bottom: var(--style-gap-l);
}

.Performance-panel .Performance-table-wrapper > :is(
  section:first-child, 
  section:last-child
) {
  width: 100%;
}

.Chart-container .plotly .svg-container .main-svg:first-of-type,
.Constituent-chart .plotly .svg-container .main-svg:first-of-type {
  background: var(--color-panel-face) !important;
}

.Chart-container .ygrid.crisp {
  stroke: var(--chart-axis-color) !important;
  transition: stroke var(--style-animation-speed-normal)
}

.Chart-container .imagelayer image {
  opacity: var(--chart-image-opacity);
  transition: opacity var(--style-animation-speed-normal)
}

.Chart-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.Chart-controls {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Zoom-bar {
  flex: 1;
  margin-left: var(--style-gap-xl);
}

.IndexReturns-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.IndexReturns-container .Price span {
  display: block;
}

.IndexReturns-container .Price > span:first-child {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-l);
}

.IndexReturns-container .Price > span:last-child {
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-s);
}

.IndexReturns-container .IndexReturns-content .Return {
  justify-content: flex-start;
  width: initial;
  display: flex;
  text-align: right;
  flex-direction: column;
}

.IndexReturns-container .IndexReturns-content .Return > span:first-child {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-s);
  text-transform: uppercase;
}

.IndexReturns-container .IndexReturns-content .Return:last-child {
  margin-left: var(--style-gap-l);
}

.IndexReturns-container .IndexReturns-content {
  display: flex;
}

.About-panel .Text-content > ul li:first-child {
  margin-bottom: var(--style-gap-xxl);
}

.KeyInfo-panel > section > cm-table tbody tr th {
  text-transform: uppercase;
}

.KeyInfo-panel .Customize-quickLinks p {
  margin-top: var(--style-gap-s);
}

.Paginator-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--style-gap-xl);
}

.Paginator-wrapper .Pagination-input-wrapper {
  display: none;
}

.Historical-container {
  display: flex;
}

.Historical-container .Historical-table-wrapper {
  width: 100%;
}

.Loader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--style-gap-s);
  margin: auto;
}

.Loader > span {
  margin-left: var(--style-gap-s);
}

.Historical-toolbar {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-bottom: var(--style-gap-l);
}

.Historical-toolbar > div:first-child {
  flex-direction: row;
}

.Historical-toolbar .Date-picker-wrapper {
  display: flex;
  align-items: center;
}

.Historical-toolbar .Frequency-picker-wrapper {
  display: flex;
}

.Historical-toolbar .Frequency-picker-wrapper,
.Historical-toolbar .Date-picker-wrapper  {
  margin-bottom: var(--style-gap-l);
}

.Historical-toolbar .Frequency-picker-wrapper > span,
.Historical-toolbar .Date-picker-wrapper > span  {
  display: none;
}

.Constituent-data {
  display: flex;
  flex-grow: 1;
}

.Constituent-data .Constituent-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.Constituent-data .Constituent-wrapper cm-table,
.Constituent-data .Constituent-wrapper .Constituent-chart {
  flex-grow: 1;
}

.Constituent-chart .plotly .svg-container .main-svg .infolayer .legend .bg {
  fill: var(--color-panel-face) !important;
}

.Constituent-chart .plotly .svg-container .main-svg .infolayer .legendtext {
  fill: var(--color-text) !important;
}

.Constituent-data .Constituent-chart-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  width: 100%;
}

.Constituent-data .Asset-wrapper {
  display: flex;
  align-items: center;
}

.Constituent-data .Asset-wrapper .Asset-wrapper-details {
  display: flex;
  flex-direction: column;
  margin-left: var(--style-gap-l);
}

.Constituent-data .Asset-wrapper .Asset-wrapper-details span:first-child {
  font-weight: var(--text-weight-bold);
  text-transform: uppercase;
}

.Constituent-data .Footnote-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--text-size-n);
  text-align: right;
  margin-top: var(--style-gap-xl);
}

.Constituent-data .Footnote-wrapper .Time {
  margin-left: var(--style-gap-n);
  font-family: var(--text-monospace-font);
}

.Constituent-data .Constituent-chart {
  height: calc(350 * var(--rem-px));
}

/** NOTE: 
 We should be able to choose orientation (vertical/horizontal) for positioning 
 in the spotlight module regardless of device size. 

 We need to remove this when this has been addressed in Choco
 **/
#Menu-group-wrapper .Spotlight {
  height: auto;
  flex-direction: column;
  align-items: center;
  gap: var(--style-gap-xxxl);
}

#Menu-group-wrapper .Spotlight-content-wrapper {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--style-gap-xl);
}

#Menu-group-wrapper .Spotlight cm-inline-svg {
  min-width: calc(128 * var(--rem-px));
}

@media screen and (max-width: 960px) {
  .Panel {
    margin-bottom: calc(16 * var(--rem-px));
  }
}

@media screen and (min-width: 960px) {
  .Ticker-container h2 { 
    white-space: nowrap;
  }

  .Ticker-layout { 
    flex-direction: row;
  }

  .Ticker-description-wrapper {
    width: 50%;
  }

  .Performance-panel .Performance-table-wrapper {
    flex-direction: row;
  }

  .Performance-panel .Performance-table-wrapper > section:first-child {
    width: 60%;
  }

  .Performance-panel .Performance-table-wrapper > section:last-child {
    width: 40%;
    margin-left: var(--style-gap-l);
  }

  .Paginator-wrapper {
    justify-content: space-between;
  }

  .Historical-toolbar {
    flex-direction: row;
  }

  .Historical-toolbar > div:first-child {
    display: flex;
    flex-direction: row;
  }

  .Historical-toolbar .Frequency-picker-wrapper {
    align-items: center;
    margin-left: var(--style-gap-n);
  }

  .Historical-toolbar .Frequency-picker-wrapper > span,
  .Historical-toolbar .Date-picker-wrapper > span  {
    display: block;
    padding: var(--style-gap-s);
  }

  .Constituent-data .Footnote-wrapper {
    justify-content: flex-end;
  }

  .Paginator-wrapper .Pagination-input-wrapper {
    display: flex;
    align-items: center;
  }

  .Paginator-wrapper .Pagination-input-wrapper label {
    width: calc(48 * var(--rem-px));;
    margin: 0 var(--style-gap-n);
  }

  .Paginator-wrapper .Pagination-input-wrapper label input {
    text-align: center;
  }

  .Paginator-wrapper .Pagination-input-wrapper .Total-count {
    font-weight: var(--text-weight-bold);
    margin-left: var(--style-gap-s);
  }
}