/* #region choco extensions */
:root {
  --color-table-header-background-hover: var(--color-primary-new-purple);
  --color-text-mantissa: var(--color-primary-new-purple);
  --color-info-popup-icon-hover: var(--color-primary-dark-purple);
  --color-info-popup-icon-active: var(--color-primary-purple);
  --chart-watermark-opacity: 1;
  --chart-axis-color: var(--color-primary-lighter-purple);
  --chart-axis-text: var(--color-primary-dark-purple);
  --bg-color-breadcrumb-current: var(--color-primary-white);
  --border-color-breadcrumb-current: var(--color-primary-dark-purple);
  --hover-border-color-breadcrumb: var(--color-primary-dark-purple);
  --active-border-color-breadcrumb: var(--color-border-pressed-default);
}
.Theme-night-toggle:checked ~ * {
  --color-table-header-background-hover: var(--color-primary-purple);
  --color-text-mantissa: var(--color-primary-purple);
  --color-info-popup-icon-hover: var(--color-primary-white);
  --color-info-popup-icon-active: var(--color-primary-darkest-purple);
  --chart-watermark-opacity: 0.1;
  --chart-axis-color: var(--color-primary-medium-purple);
  --chart-axis-text: var(--color-primary-purple);
  --bg-color-breadcrumb-current: var(--color-primary-darkest-purple);
  --border-color-breadcrumb-current: var(--color-primary-white);
  --hover-border-color-breadcrumb: var(--color-primary-white);
}

 cm-popup[hidden] + .Sidebar-toolbar-line {
  display: none;
}

#balance-over-time-chart .ygrid.crisp {
  stroke: var(--chart-axis-color) !important;
  transition: stroke var(--style-animation-speed-normal);
}

#balance-over-time-chart .imagelayer image {
  opacity: var(--chart-watermark-opacity);
  transition: opacity var(--style-animation-speed-normal);
}

#balance-over-time-chart .main-svg:first-of-type {
  transition: background-color var(--style-animation-speed-normal);
  background: var(--color-panel-face) !important;
}

#balance-over-time-chart .ytick text,
#balance-over-time-chart .y2tick text,
#balance-over-time-chart .xtick text {
  fill: var(--chart-axis-text) !important; 
}

@media screen and (max-width: 640px) {
  .AppLayout-header > a:first-of-type,
  .AppLayout-header > .Line-v-dark {
    display: none;
    visibility: hidden;
  }
}

.AppLayout-header-spacer {
  flex-grow: 1;
}

.Text-ref-rate-positive {
  color: var(--color-charts-chart-green);
}
.Text-ref-rate-negative {
  color: var(--color-charts-chart-red);
}
.Text-mantissa {
  color: var(--color-text-mantissa);
  transition: color var(--style-animation-speed-normal);
}

cm-icon[name="info"]:hover {
  color: var(--color-info-popup-icon-hover);
}
cm-icon[name="info"]:active {
  color: var(--color-info-popup-icon-active);
}
/* #endregion */

/* #region miscellaneous */
.Button-block {
  height: 32px;
  width: 32px;
}

.InlineEntity {
  display: flex;
  align-items: center;
  gap: var(--style-gap-s);
}
.InlineEntity cm-copy {
  margin-left: calc(-1 * var(--style-gap-s));
}
/* #endregion */

/* #region SearchForm */
.SearchForm {
  display: flex;
  justify-content: center;
  gap: var(--style-gap-xl);
}
.SearchForm .Button-l cm-icon,
.SearchForm .Button-l cm-icon svg {
  width: 32px;
  height: 32px;
}
.SearchForm cm-assets-dropdown {
  width: fit-content;
  flex-shrink: 0;
}
.SearchForm .Dropdown .Button {
  width: 100%;
  justify-content: space-between;
}
.SearchForm .Dropdown .Dropdown-list label {
  /* list items are fixed height at 32px right now, but list items with icons need to be larger */
  height: auto;
}
.SearchForm .Dropdown .Dropdown-list label > span {
  /* for some reason, the width computation (probably for --dropdown-min-width variable)
      is causing the middle span to flex, so temporarily adding a margin right here */
  margin-right: var(--style-gap-n); 
}
.SearchForm input {
  width: 100%;
}
@media screen and (max-width: 640px) {
  .SearchForm {
    flex-direction: column;
  }
  .SearchForm cm-assets-dropdown {
    width: 100%;
  }
}
/* #endregion */

/* #region Panel-header */
.Panel-header {
  margin-bottom: var(--style-gap-xl);
  position: relative;
  gap: var(--style-gap-xl);
}
.Panel-header-title {
  text-transform: uppercase;
}
.Panel-header,
.Panel-header-group {
  display: flex;
  align-items: center;
}
.Panel-header-group {
  gap: var(--style-gap-n);
}
.Panel-header-group cm-copy {
  margin-left: calc(-6 * var(--rem-px));
}
.Panel-header-spacer {
  flex-grow: 1;
}
.Panel-header::after {
  content: '';
  display: block;
  position: absolute;
  bottom: calc(-1 * var(--style-gap-xl));;
  height: var(--style-border-width);
  width: 100%;
  background: var(--color-line);
  border-radius: var(--style-border-width);
  transition: background-color var(--style-animation-speed-normal);
}
@media screen and (max-width: 640px) {
  .Panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--style-gap-n);
  }
  .Panel-header > .Button {
    align-self: stretch;
  }
}
/* #endregion */

/* #region Filters-row & Paginator-row & LoadMore-row */
.Filters-row,
.Paginator-row,
.LoadMore-row {
  display: flex;
  align-items: center;
  gap: var(--style-gap-xl);
}
.Filters-row-spacer,
.Paginator-row-spacer,
.LoadMore-row-spacer {
  flex-grow: 1;
}
.Filters-row cm-dropdown {
  width: fit-content;
}
.PaginatorLabel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.PaginatorLabel label {
  display: flex;
  align-items: center;
  text-align: center;
  gap: var(--style-gap-s);
}
.PaginatorLabel input {
  padding: var(--style-input-padding-n);
  width: var(--style-input-h-l);
  text-align: center;
}
@media screen and (max-width: 640px) {
  .Filters-row,
  .LoadMore-row {
    flex-direction: column;
    gap: var(--style-gap-n);
  }
  .Filters-row cm-dropdown {
    width: 100%;
  }
  .Filters-row-spacer,
  .Paginator-row-showing-text {
    display: none;
    visibility: hidden;
  }
  .Filter-input,
  .Filters-row .Button,
  .LoadMore-row .Button {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
  }
}
/* #endregion */

/* #region AssetPrice */
.AssetPrice,
.AssetDelta {
  display: flex;
  align-items: center;
  gap: var(--style-gap-n);
}
.AssetDelta {
  gap: 0;
}
@media screen and (max-width: 640px) {
  .AssetPrice > *:nth-child(3),
  .AssetPrice > *:nth-child(4) {
    display: none;
    visibility: hidden;
  }
}
/* #endregion */

/* #region DetailsLayout  */
.DetailsLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  grid-template-areas: 'first second';
  gap: var(--style-gap-xl);
}
.DetailsLayout-main {
  grid-area: first;
  display: grid;
  gap: var(--style-gap-xl);
}
.DetailsLayout-sidebar {
  grid-area: second;
}
@media screen and (min-width: 1280px) {
  .DetailsLayout-sidebar > .Panel {
    position: sticky;
    top: calc(64 * var(--rem-px));
  }
}
@media screen and (max-width: 1280px) {
  .DetailsLayout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'first' 'second';
    grid-template-rows: auto auto;
  }
}
/* #endregion */

/* #region DetailsSummary */
.DetailsSummary {
  display: grid;
  grid-template-areas: 'a b' 'c d';
  grid-template-columns: 1fr 1fr;
  gap: var(--style-gap-xl);
}
.DetailsSummary-a {
  grid-area: a;
}
.DetailsSummary-b {
  grid-area: b;
}
.DetailsSummary-c {
  grid-area: c;
}
.DetailsSummary-d {
  grid-area: d;
}
.DetailsSummary-a,
.DetailsSummary-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--style-gap-xl);
}
.DetailsSummary-a,
.DetailsSummary-b {
  text-transform: uppercase;
}
.DetailsSummary-tooltip {
  display: flex;
  gap: var(--style-gap-s);
  align-items: center;
}
@media screen and (max-width: 1280px) {
  .DetailsSummary {
    grid-template-areas: 'a' 'b' 'c' 'd';
    grid-template-columns: 1fr;
  }
}
/* #endregion */

/* #region DetailsStats */
.DetailsStats {
  border: var(--style-border-width) var(--style-border-type) var(--color-border-default);
  border-radius: var(--style-corner-default);
  padding: var(--style-gap-xl);
}
.DetailsStats > h4 {
  margin-bottom: var(--style-gap-xl);
}
.DetailsStats-stat,
.DetailsStats-stat > * {
  display: flex;
  gap: var(--style-gap-s);
  align-items: center;
  flex-wrap: wrap;
}
.DetailsStats-stat > * {
  height: var(--style-gap-xxl);
}
.DetailsStats-stat > *:first-child {
  width: calc(170 * var(--rem-px));
}
.DetailsStats-stat > *:last-child {
  gap: var(--style-gap-n);
}
@media screen and (max-width: 640px) { 
  .DetailsStats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--style-gap-xl);
  }
  .DetailsStats > h4 {
    margin-bottom: 0;
  }
  .DetailsStats-stat {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* #endregion */

/* #region NoResults */
.NoResults {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--style-gap-l);
  padding: calc(64 * var(--rem-px)) 0;
  margin: auto;
}
.NoResults cm-inline-svg {
  width: calc(128 * var(--rem-px));
}
.NoResults > span:first-of-type {
  margin-top: calc(16 * var(--rem-px));
  text-transform: uppercase;
}
.NoResults > .Line-h-dark {
  width: 80px;
}
.NoResults > span:last-of-type {
  text-align: center;
  padding: 0 var(--style-gap-xl);
}
/* #endregion */

/* #region Unavailable Chart */
.UnavailableChart {
  display: flex;
  flex-direction: column;
  width: auto;
  height: calc(452 * var(--rem-px))
}
.UnavailableChart > .Spotlight {
  flex-direction: column;
  gap: var(--style-gap-xl);
}
.UnavailableChart cm-inline-svg {
  display: flex;
  flex-direction: column;
  height: calc(128 * var(--rem-px));
}
.UnavailableChart .Spotlight-content-wrapper {
  align-items: center;
  gap: var(--style-gap-xl);
  max-width: inherit;
}
.UnavailableChart h2 {
  font-size: var(--text-size-xl);
  line-height: 100%;
}
/* #endregion */

.SocialShareWrapper {
  display: flex;
  gap: var(--style-gap-n);
}

.BalanceUpdates {
  position: relative;
}

.PartialData {
  --skeleton-row: 53px;
  height: calc(3 * var(--skeleton-row));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: absolute;
  z-index: var(--z-above);
  width: 100%;
  bottom: 0;
}
.PartialData .Text-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.Skeleton-icon-s, .Skeleton-text-s {
  display: inline-block;
}
th cm-info-popup {
  display: inline-block;
  padding: 0px 4px;
}

.Error-wrapper {
  display: flex;
  align-items: center;
  margin: auto;
  height: 100%;
}

cm-assets-dropdown {
  display: inline-block;
  position: relative;
  pointer-events: all;
  width: 100%;
}

cm-assets-dropdown > fieldset legend {
  width: 0;
}

cm-assets-dropdown > fieldset[disabled] {
  cursor: not-allowed;
}

cm-assets-dropdown > fieldset[disabled] > * {
  pointer-events: none;
}

.Dropdown > fieldset {
  max-width: calc(100vw - (var(--style-sidebar-width) + var(--style-gap-xl) + var(--style-gap-xl)));
}

@media screen and (max-width: 480px) {
  .Dropdown > fieldset {
    bottom: auto;
  }
}

.Dropdown-list label {
  cursor: pointer;
}

.Dropdown-list input:checked + label:hover {
  color: var(--color-label-inverse);
}

.Dropdown-text-filter {
  display: inline-block !important;
  height: var(--style-input-h-l) !important;
  padding: unset !important;
  border-top: unset !important;
  min-width: unset !important;
  border-bottom: unset !important;
  transition: unset !important;
  cursor: unset !important;
  margin-bottom: var(--style-gap-n) !important;
}
.Dropdown-text-filter input {
  position: unset !important;
  opacity: unset !important;
  height: auto !important;
  width: 100% !important;
}

cm-assets-dropdown .No-result-error > .Text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--style-gap-l);
  padding: var(--style-gap-xxxl)
}

cm-assets-dropdown .No-result-error .Spotlight-line-h-dark {
  width: calc(40 * var(--rem-px));
}

cm-assets-dropdown .No-result-error > .Text-content > h4 {
  margin: 0;
  font-weight: var(--text-weight-bold);
}


#landing-page {
  align-items: center;
  justify-content: center;
  gap: var(--style-gap-xxxl);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  background-image: url('/public/bg-web.png');
}

/* Retina-display high-resolution for larger screens */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  #landing-page {
    background-image: url('/public/bg-web-high-res.png');
  }
}

#landing-page > cm-inline-svg:first-of-type > svg {
  height: calc(56 * var(--rem-px));
  width: auto;
}
#landing-page > .Line-h-dark {
  max-width: 320px;
}
@media (max-width: 1280px) {
  #landing-page .SearchForm {
    min-width: 100%;
  }
}
@media (min-width: 1281px) {
  #landing-page .SearchForm {
    min-width: 80%;
  }
}

@media screen and (max-width: 640px) {
  #landing-page {
    background-image: url('/public/bg-mobile.png');
  }
  #landing-page > cm-inline-svg:first-of-type > svg {
    height: calc(48 * var(--rem-px));
  }
  #landing-page .SearchForm {
    min-width: auto;
    width: 100%;
  }
}

/* Retina-display high-resolution for mobile screens */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 640px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 640px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 640px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 640px),
only screen and (                min-resolution: 192dpi) and (max-width: 640px),
only screen and (                min-resolution: 2dppx)  and (max-width: 640px) { 
  #landing-page {
    background-image: url('/public/bg-mobile-high-res.png');
  }
}

#search-results-page .SearchResults {
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-xl);
}

#search-results-page .SearchResult {
  border: var(--style-border-width) var(--style-border-type) var(--color-border-default);
  border-radius: var(--style-corner-default);
  padding: var(--style-gap-n);
  text-decoration: none;
  color: var(--color-text);
  display: inline-block;
}
#search-results-page .SearchResult:hover {
  border-color: var(--color-border-attn-default);
}
#search-results-page .SearchResult:active {
  border-color: var(--color-border-pressed-default);
  border-top-width: 2px;
  margin-bottom: -1px;
}

#search-results-page .SearchResult-row,
.SearchResult-row-group,
.SearchResult-row > span {
  display: flex;
  align-items: center;
}
#search-results-page .SearchResult-row:first-child {
  gap: var(--style-gap-xl);
  margin-bottom: var(--style-gap-s);
}
#search-results-page .SearchResult-row:last-child {
  flex-wrap: wrap;
}
#search-results-page .SearchResult-row:last-child > span {
  margin-right: var(--style-gap-n);
}
#search-results-page .SearchResult-row:last-child > span > :not(:last-child) {
  flex-shrink: 0;
}
#search-results-page .SearchResult-row-group,
#search-results-page .SearchResult-row > span {
  gap: var(--style-gap-n);
}
#search-results-page .SearchResult-row span {
  white-space: nowrap;
}

@media screen and (max-width: 640px) {
  #search-results-page .SearchResult-row:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--style-gap-n);
  }
  #search-results-page .SearchResult-row:first-child > .Line-v-light {
    display: none;
    visibility: hidden;
  }
}

.Crumbs {
  display: flex;
}
@media screen and (max-width: 960px) {
  .Crumbs {
    display: none;
    visibility: hidden;
  }
}
.Crumbs > * {
  border: var(--style-border-width) var(--style-border-type) var(--color-border-default);
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: var(--style-gap-n);
  margin-left: -1px;
  padding: 0 var(--style-gap-n);
  height: calc(32 * var(--rem-px));
  transition: border-color var(--style-animation-speed-normal), background-color var(--style-animation-speed-normal);
}
.Crumbs > *:first-child {
  border-radius: var(--style-corner-default) 0 0 var(--style-corner-default);  
}
.Crumbs > *:last-child {
  background-color: var(--bg-color-breadcrumb-current);
  border: var(--style-border-width) var(--style-border-type) var(--border-color-breadcrumb-current);
  border-bottom-width: 2px;
  border-radius: 0 var(--style-corner-default) var(--style-corner-default) 0;
}
.Crumbs > *:hover {
  z-index: 1;
  border-color: var(--hover-border-color-breadcrumb);
}
.Crumbs > *:active {
  border-top-width: 2px;
  border-color: var(--active-border-color-breadcrumb);
}

.BalanceUpdates {
  display: flex;
  align-items: flex-start;
  gap: var(--style-gap-xl);
}
.BalanceUpdates > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-xl);
}
.BalanceUpdates > cm-icon {
  margin-top: var(--style-gap-s);
}
.BalanceUpdates tr td > *:first-child {
  flex-grow: 1;
}
#transaction-details-page .BalanceUpdates tr td {
  display: flex;
  align-items: center;
}
#transaction-details-page .BalanceUpdates tr td > *:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#transaction-details-page cm-table {
  overflow-x: initial;
}
@media screen and (max-width: 640px) {
  #transaction-details-page .BalanceUpdates {
    flex-direction: column;
  }
  #transaction-details-page .BalanceUpdates > div {
    align-self: stretch;
    flex: initial;
  }
  #transaction-details-page .BalanceUpdates > cm-icon {
    display: none;
    visibility: hidden;
  }
  #transaction-details-page .BalanceUpdates tr td {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  #transaction-details-page .BalanceUpdates tr td > *:last-child {
    align-self: flex-end;
  }
}