body {
  overflow-x: auto !important; }

footer {
  margin-top: 20px;
  color: #ccc;
  font-size: 0.8em;
  text-align: center; }
  footer a,
  footer a:hover,
  footer a:focus,
  footer a:visited {
    color: #ccc; }

dt {
  font-weight: bold; }

.clear {
  clear: both; }

.item.header a {
  color: #333; }

.positive {
  color: #21ba45; }

.negative {
  color: #db2828; }

.text-right {
  text-align: right; }

.to_destroy {
  text-decoration: line-through; }
  .to_destroy * {
    text-decoration: line-through; }

.muted, .text-muted {
  color: #767676 !important; }

.lighter {
  font-weight: lighter; }

hr.muted {
  border: 0;
  border-bottom: 1px dotted #d4d4d5; }

.hidden {
  display: none; }

.invisible {
  visibility: hidden; }

.nowrap {
  white-space: nowrap; }

.pull-right {
  float: right; }

table.vtop th, table.vtop td {
  vertical-align: top; }

.text-right {
  text-align: right; }

.to_destroy {
  text-decoration: line-through; }
  .to_destroy * {
    text-decoration: line-through; }

.lighter {
  font-weight: lighter; }

div.ui.compact.grid .column {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important; }
div.ui.compact.grid > .row {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important; }

.ui.default.dropdown:not(.button) > .text, .ui.dropdown:not(.button) > .default.text {
  color: black !important; }

/* Scrollable checkbox list used by queries#show for the trait, cluster, and
 * cell-type filters. Kept visually lined up with adjacent textareas. */
fieldset.checkbox-filter {
  border: none;
  padding: 0;
  margin: 0; }
fieldset.checkbox-filter > legend {
  font-weight: 700;
  font-size: 13px;
  padding: 0;
  margin: 0 0 0.3rem; }
fieldset.checkbox-filter input[type=search] {
  width: 100%;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-radius: 0.28rem;
  font-size: 13px; }

/* Cluster legend below the heatmap. Rendered server-side from the 7
 * Cluster rows so the swatch in the heatmap's left column has a key. */
.cluster-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 0.75rem 0 1.5rem;
  font-size: 13px; }
.cluster-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem; }
.cluster-legend .swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.2); }
fieldset.checkbox-filter #trait_ids,
fieldset.checkbox-filter #cell_type_ids {
  height: 9.75em;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  margin: 0; }
fieldset.checkbox-filter .ui.segment {
  /* Cluster filter has no type-ahead; container is short enough to fit all 7
   * options without scrolling. */
  padding: 0.5rem 0.75rem;
  margin: 0; }
fieldset.checkbox-filter .checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
  line-height: 1.3; }
fieldset.checkbox-filter .checkbox-option input[type=checkbox] {
  flex-shrink: 0;
  margin: 0; }
fieldset.checkbox-filter .checkbox-option label {
  font-weight: normal;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem; }
fieldset.checkbox-filter .checkbox-option label .swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2); }

/* Home page cards: stretched row + flex keeps the segments the same height
 * regardless of text length, with the CTA button stuck to the bottom. */
.home-card {
  display: flex !important;
  flex-direction: column;
  height: 100%; }
.home-card .ui.header {
  margin-top: 0; }
.home-card > p {
  flex: 1 1 auto; }