main.loader {
  justify-content: center;
  align-items: stretch;
}

.Panel-loader {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Filter-input {
  width: fit-content;
}
.Filters-row cm-dropdown,
.Filters-row cm-text-dropdown,
.asset-filter-container {
  width: max-content;
}
.Filters-row,
.Paginator-row {
  display: flex;
  align-items: center;
  gap: var(--style-gap-l);
}
.Filters-row-spacer,
.Paginator-row-spacer {
  flex-grow: 1;
}

.table-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing12);
}

.table-footer .page-sizer {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: var(--style-gap-xl);
}

.table-footer .page-sizer cm-dropdown {
  width: auto;
}

.table-footer .footer-count-of {
  text-align: center;
}

@media screen and (max-width: 1100px) {
  cm-coverage-datatable .table-footer {
    flex-direction: column;
    gap: var(--style-gap-xl);
  }
}

@media screen and (max-width: 640px) {
  .Filters-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 {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
  }
}

.id-no-results:not(:empty) {
  padding: var(--spacing16) 0;
}

.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: calc(80 * var(--rem-px));
}
.NoResults > span:last-of-type {
  text-align: center;
  padding: 0 var(--style-gap-xl);
}

section.Error {
  height: calc(256 * var(--rem-px));
  display: flex;
  align-items: center;
  gap: var(--style-gap-l);
  margin: auto;
}
@media screen and (max-width: 640px) {
  section.Error {
    height: auto;
    flex-direction: column;
    align-items: center;
  }
}
section.Error > div {
  max-width: calc(256 * var(--rem-px));
}
section.Error > div > .Line-h-dark {
  margin-top: var(--style-gap-n);
  margin-bottom: var(--style-gap-n);
}

.Panel-header {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing4);
  color: var(--gray-080);
}

.Panel-header .Asset-group {
  display: flex;
  flex-direction: row;
  gap: var(--spacing8);
}

.Panel-header .Main-header {
  text-transform: uppercase;
}

.Panel-header .Header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--style-gap-n);
  min-width: max-content;
}

.Panel-header .Header-left cm-icon svg {
  color: var(--gray-100);
}

.Panel-header .Header-left .Asset-group h3,
.Panel-header .Header-left .Asset-group p {
  width: max-content;
  font-size: var(--text-size-l);
}

.Panel-header .Header-left .Asset-group h3 {
  font-weight: bold;
}

.Panel-header .Header-left .Asset-group p {
  font-weight: normal;
  color: var(--gray-080);
}

@media screen and (max-width: 640px) {
  .Panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--style-gap-xl);
  }

  .Panel-header .Header-left {
    min-width: 100%;
    max-width: 100%;
  }

  .Panel-header .Header-left .Asset-group h3,
  .Panel-header .Header-left .Asset-group p {
    max-width: 100%;
    line-height: 1;
  }

  .Panel-header .Header-left .Asset-group h3 {
    margin-bottom: var(--style-gap-xs);
  }
}

.SearchForm {
  display: flex;
  justify-content: center;
  gap: var(--style-gap-xl);
  padding: 0;
}
@media screen and (max-width: 640px) {
  .SearchForm .Button-l {
    flex-shrink: 1;
  }
  .SearchForm .Button-l span {
    display: inline;
  }
}

/* TODO we should pull this AppLayout-header stuff into choco */

.AppLayout-header {
  justify-content: flex-start;
}

.AppLayout-header-spacer {
  flex: 0;
  width: 0;
  height: 1.5rem;
  margin: 0 var(--spacing12);
  border-left: 1px solid var(--color-border-default);
}

.AppLayout-header a {
  color: inherit;
}


#creative-commons {
  width: 100%;
}

.AppLayout-main {
  background-color: var(--color-panel-face);
  align-items: stretch;
}

.landing.AppLayout-main {
  align-items: center;
  justify-content: center;
  gap: var(--style-gap-xxxl);
}
.landing.AppLayout-main > .Line-h-dark {
  max-width: calc(320 * var(--rem-px));
}
.landing.AppLayout-main > span {
  max-width: calc(600 * var(--rem-px));
  text-align: center;
}
.landing.AppLayout-main > cm-inline-svg:first-of-type > svg {
  height: calc(56 * var(--rem-px));
  width: auto;
}
@media screen and (max-width: 640px) {
  .landing.AppLayout-main > cm-inline-svg:first-of-type > svg {
    height: calc(28 * var(--rem-px));
  }
}

/* Landing page SearchForm styles moved to #landing-page .SearchForm */

.Theme-content:has(#landing-page) #header-search {
  display: none;
}

.AppLayout-header #header-search {
  justify-content: flex-start;
  gap: var(--spacing8);
}

.AppLayout-header #header-search input,
.AppLayout-header #header-search button {
  height: 1.5rem;
  width: 14rem;
}

.AppLayout-header #header-search button {
  width: auto;
}

@media screen and (max-width: 640px) {
  .AppLayout-header #header-search {
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .AppLayout-header #header-search input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .AppLayout-header #header-search button {
    flex: 0 0 auto;
  }
}

/* Prevent the panel from stretching to full viewport height */
#search-results-page {
  flex-grow: 0 !important;
  height: fit-content;
}

#search-results-page .Paginator-row {
  padding: var(--spacing12);
}

/* All cells left aligned */
#search-results-page cm-table td,
#search-results-page cm-table th {
  text-align: left;
}

/* First three columns shrink to content; last column fills the rest */
#search-results-page cm-table th:nth-child(-n+3),
#search-results-page cm-table td:nth-child(-n+3) {
  width: 20%;
  white-space: nowrap;
}

/* Breathing room on identifier and name columns */
@media screen and (min-width: 641px) {
  #search-results-page cm-table th:nth-child(2),
  #search-results-page cm-table td:nth-child(2),
  #search-results-page cm-table th:nth-child(3),
  #search-results-page cm-table td:nth-child(3) {
    padding-right: 4rem;
  }
}

td cm-coin .Coin-svg {
  width: 1rem;
  height: 1rem;
}

td cm-color-icon .Color-icon-svg,
.Table-acl cm-color-icon .Color-icon-svg {
  width: 1rem;
  height: 1rem;
}



.Table-tabs {
  display: flex;
  flex-direction: column;
}

.Table-acl,
.Table-acl-community,
.Table-acl-pro,
.Table-acl-key {
  text-align: center;
}

.Table-acl-community,
.Table-acl-community > span,
.Table-acl-community svg {
  background-color: transparent;
  color: var(--blue) !important;
}

.Table-acl-pro,
.Table-acl-pro > span,
.Table-acl-pro svg {
  background-color: transparent;
  color: var(--yellow) !important;
}

.Table-acl-key,
.Table-acl-key > span,
.Table-acl-key svg {
  background-color: transparent;
  color: var(--yellow) !important;
}

td.Table-acl[id] cm-color-icon[name="check"] svg,
td.Table-acl[id] cm-color-icon[name="check"] svg * {
  fill: var(--yellow) !important;
  color: var(--yellow) !important;
}

.Table-acl-key-missing,
.Table-acl-key-missing > span,
.Table-acl-key-missing svg {
  background-color: transparent;
  color: inherit !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

table tbody tr td cm-coin,
table tbody tr td cm-icon {
  margin-right: 8px;
}

td .InlineEntity cm-coin,
td .InlineEntity cm-icon {
  margin-right: 0;
}

.Table-data-long {
  white-space: normal !important;
}

.Table-candles {
  width: 10%;
}

.asset-without-link {
  font-family: 'Ubuntu Mono', monospace;
}

.asset-filter-container {
  display: inline-block;
  position: relative;
  pointer-events: all;
}

.asset-filter-container summary cm-icon {
  position: absolute;
  top: 4px;
  right: 4px;
}

.asset-filter-container > fieldset > details > ul {
  margin-top: var(--style-gap-s) !important;
  position: absolute;
  transition: none !important;
  min-width: 230px !important;
}

.asset-filter-container .dropdown > ul {
  border: var(--style-panel-border);
  border-bottom-width: var(--style-panel-bottom-border);
  padding: var(--style-gap-n);
  border-radius: var(--style-corner-default);
  background: var(--color-panel-face);
  z-index: var(--z-high);
  max-height: 40vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-width: var(--style-scrollbar-w);
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

.asset-filter-container .dropdown > ul li {
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  border-top: var(--style-line-lighter);
  padding: var(--style-gap-s);
}

.asset-filter-container .dropdown > ul li:hover {
  background: var(--color-selectable-hover-face);
  color: var(--color-selectable-hover-label);
}

.asset-filter-container .dropdown > ul li.selected {
  background: var(--color-face-inverse);
  color: var(--color-label-inverse);
}

.asset-filter-container .dropdown > ul li > .asset-icon-col {
  display: flex;
  align-items: center;
}

.asset-filter-container .dropdown > ul li > .asset-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asset-filter-container .dropdown > ul li > .asset-info-col > .asset-ticker {
  font-weight: bold;
  line-height: 1.2;
}

.asset-filter-container .dropdown > ul li > .asset-info-col > .asset-name {
  color: var(--color-primary);
  font-size: 12px;
  line-height: 1.2;
}

.AppLayout-header-title {
  gap: var(--spacing4);
}

.AppLayout-header-title > span {
  font-weight: 300;
}

/* Animation CSS variables are scoped to #landing-page in choco-taco-v1.css.
   When the id is removed before content clears during navigation, the variables
   become undefined for one paint frame, causing the shapes to flash transparent.
   Defining them here on .Animation.coverage keeps them valid through that window. */
.Animation.coverage {
  --animation-green: #22caad;
  --animation-blur-start: rgba(34, 202, 173, 0.01);
  --animation-blur-end: rgba(34, 202, 173, 0.12);
  --animation-white-start: rgba(16, 18, 26, 0.9);
  --animation-white-end: rgba(16, 18, 26, 0);
}

html.Theme-night .Animation.coverage,
.Theme-night-toggle:checked ~ .Theme-content .Animation.coverage {
  --animation-white-start: #ffffff;
  --animation-white-end: rgba(255, 255, 255, 0);
}

.Theme-content:has(#landing-page) .AppLayout-header-spacer {
  display: none;
}

@media screen and (min-width: 961px) {
  .Theme-content:has(#landing-page) {
    --landing-sidebar-extras-width: min(
      calc(100vw - var(--style-sidebar-width)),
      calc(24rem - var(--style-sidebar-width))
    );
  }

  .Theme-content:has(#landing-page) .AppLayout-header,
  .Theme-content:has(#landing-page) .AppLayout-main {
    transition: padding-left var(--style-animation-speed-slow);
    transition-timing-function: var(--style-animation-ease, ease);
  }

  .Theme-content:has(#landing-page)
    cm-sidebar[section]:not([section=""])
    .Sidebar-extras {
    width: var(--landing-sidebar-extras-width);
    max-width: var(--landing-sidebar-extras-width);
    box-shadow: none !important;
  }

  .Theme-content:has(#landing-page):has(cm-sidebar[section]:not([section=""])) .AppLayout-header,
  .Theme-content:has(#landing-page):has(cm-sidebar[section]:not([section=""])) .AppLayout-main {
    padding-left: var(--landing-sidebar-extras-width);
  }

  .Theme-content:has(#landing-page):has(cm-sidebar[section]:not([section=""])) .AppLayout-header {
    padding-left: calc(var(--landing-sidebar-extras-width) - 2px + var(--spacing12));
  }
}

#cm-key-auth[status="signed-in"] summary cm-icon {
  color: var(--yellow);
}
}