/* fonts */

@font-face {
  src: url('./assets/fonts/Inter-ExtraLight.otf');
  font-family: 'Inter';
  font-weight: 200;
}

@font-face {
  src: url('./assets/fonts/Inter-Light.otf');
  font-family: 'Inter';
  font-weight: 300;
}

@font-face {
  src: url('./assets/fonts/Inter-Regular.otf');
  font-family: 'Inter';
  font-weight: 400;
}

@font-face {
  src: url('./assets/fonts/Inter-Medium.otf');
  font-family: 'Inter';
  font-weight: 600;
}

@font-face {
  src: url('./assets/fonts/Inter-SemiBold.otf');
  font-family: 'Inter';
  font-weight: 600;
}

@font-face {
  src: url('./assets/fonts/Inter-Bold.otf');
  font-family: 'Inter';
  font-weight: 700;
}

@font-face {
  src: url('./assets/fonts/Inter-ExtraBold.otf');
  font-family: 'Inter';
  font-weight: 800;
}

/* resets */

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.panel h3 button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table {
  width: 100%;
  /* max-content */
  border-collapse: collapse;
}

tr+tr {
  border-top: 1px solid lightgray;
}

th,
td {
  padding: 0.2em 0.4em;
}

canvas {
  /* background-color: grey; */
  border-radius: 3px;
}

form {
  margin: 0;
}

input,
button,
select {
  font: inherit;
}

button {
  appearance: none;
  background: none;
  border-color: transparent;
  color: inherit;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* utility classes */

.flex {
  display: flex;
  /* align-items: center; */
  gap: 0.5em;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.hidden {
  display: none !important;
}

/* Hide from visual appearances, but still
expose to assistive technologies. Useful for
building custom inputs on top of native inputs. */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  padding: 0 !important;

  /* Optional improvement to add a focus outline
  to the corresponding label for the input
  (only when the browser deems it relevant) */
  /* &:focus-visible + label {
    outline: auto;
  } */
}

.icon {
  /* default to the current color */
  --color: currentColor;
  /* display: inline-block; */
  display: block;
  /* seems to behave better */
  width: 100%;
  height: 100%;
  mask: var(--url);
  mask-repeat: no-repeat;
  mask-position: center center;
  background-color: var(--color);
  /* let the parent handle pointer events */
  pointer-events: none;
}

.dropdown {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translate(0, 100%);
  /* display: flex; */
  display: none;
  flex-direction: column;
  z-index: 1;
  font-size: 0.75rem;
}

.dropdown-option {
  padding: 0.25rem;
  font-weight: 400;
  color: var(--fg);
  background-color: var(--bg);
}

.dropdown-option:hover {
  background-color: var(--bg-on);
  /* duplicating this color for the hover state for now */
  color: var(--fg-active);
}

.dropdown-option:first-of-type,
.dropdown-option+.dropdown-option {
  border-top: 1px solid;
}

.dropdown-option+.dropdown-option {
  margin-top: -1px;
}

.dropdown-option[aria-current='true'] {
  font-weight: 700;
  color: var(--fg-active);
  background-color: var(--bg-active);
}

/* using the semantic `aria-expanded` to control
whether the dropdown is showing */
[aria-expanded='true']+.dropdown {
  display: flex;
}

/* styles */

body {
  --scalar: 1;
  --cell: calc(0.45rem * var(--scalar));
  --hairline: 1px;
  --border-radius: calc(4px * var(--scalar));
  --grid-cell: calc(var(--cell) * 4);
  --grid-gap: calc(var(--cell) * 2);
  --text-static: #5e5e5e;
  --text-off: #c0c0c0;
  padding: 0;
  margin: 0;
  overflow: hidden;

  /* font-smooth: always; */
  -webkit-font-smoothing: antialiased;
  /* -moz-osx-font-smoothing: grayscale; */
  background-color: #ececec;
  font-family: 'Inter', sans-serif;
}

#grid-backdrop {
  background-image:
    linear-gradient(to right, var(--grid-stroke) .05rem, transparent .075rem),
    linear-gradient(to bottom, var(--grid-stroke) .05rem, transparent .075rem);
  background-size: 1rem 1rem;
  height: 100vh;
}
/*


 ██████╗ ██╗   ██╗███████╗██████╗ ██╗   ██╗██╗███████╗██╗    ██╗
██╔═══██╗██║   ██║██╔════╝██╔══██╗██║   ██║██║██╔════╝██║    ██║
██║   ██║██║   ██║█████╗  ██████╔╝██║   ██║██║█████╗  ██║ █╗ ██║
██║   ██║╚██╗ ██╔╝██╔══╝  ██╔══██╗╚██╗ ██╔╝██║██╔══╝  ██║███╗██║
╚██████╔╝ ╚████╔╝ ███████╗██║  ██║ ╚████╔╝ ██║███████╗╚███╔███╔╝
 ╚═════╝   ╚═══╝  ╚══════╝╚═╝  ╚═╝  ╚═══╝  ╚═╝╚══════╝ ╚══╝╚══╝ 
                                                                
*/

body.overview #home-container {
  display: flex;
}

#outer {
  position: absolute;
  flex-direction: column;
  overflow: hidden;
  margin-top: 2%;
  top: 5.5rem;
}

/* essentially 80px, making 1280x720 into 1280x800 (16x9 into 16x10) */
#flex-upper {
  /* height: 10%; */
  /* overflow: hidden; */
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#flex-upper-backdrop {
  height: 10%;
  position: relative;
  z-index: 1;
}

.site-logo-title {
  display: flex;
  flex-direction: row;
  gap: 0.3em;
}

#logo {
  letter-spacing: -0.03rem;
  font-family: 'Inter';
  font-weight: bold;
  font-size: 1em;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  text-align: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0 0 0.5em 0.5em;
}

#timeline {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#header-geo {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  position: relative;
  z-index: 1;
  /* padding: 0.5rem 0 0 0; */
  padding: 0.5rem 2rem 0 0;
  gap: 0.5rem;
  pointer-events: none;
}

.dropdown-container {
  position: relative;
  height: 100%;
  pointer-events: all;
}

#sitemap,
#minimap {
  height: 100%;
  border-radius: 5px 5px 0px 0px;
  width: 5rem;
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  pointer-events: all;
  align-items: center;
}

#sitemap svg,
#minimap svg {
  flex: 1;
  order: 2;
  /* 
  setting the width in order to contain the world minimap. 
  Hopefully it doesn't break other things? [mark 250417]
  */
  width: 4.5rem;
}

#sitemap span,
#minimap span {
  order: 1;
  font-size: 65%;
  font-weight: 700;
  display: block;
  text-align: center;
}

#sitemap svg path.highlight,
#minimap svg path.highlight {
  stroke-width: 12.5;
}

#home-container>.flex-col {
  width: 100%;
  padding: 1rem;
  gap: 0.5rem;
}

#flex-lower {
  height: 85%;
  overflow: hidden;
}

#home-container {
  background-color: #ececec;
  display: flex;
  flex-direction: row;
  /*margin: 10px;*/
  /*padding: 20px;*/
  height: 100%;
  /*height: 90vh;*/
}

.single-container {
  /* background-color: #ececec; */
  /* display: flex; */
  flex-direction: row;
  /*margin: 10px;*/
  /*padding: 20px;*/
  /* font-size: 30px; */
  height: 100%;
  /*height: 90vh;*/
  gap: 0.5em;
  display: none;
}

#unknowns-container {
  background-color: #ececec;
  /* display: flex; */
  display: none;
  flex-direction: row;
  /*margin: 10px;*/
  /*padding: 20px;*/
  /* font-size: 30px; */
  height: 100%;
  /*height: 90vh;*/
  gap: 0.5em;
}

.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
  overflow: hidden;
  /* min-width: 33.33%; */
}

.panel {
  position: relative;
  flex: unset;
  width: 100%;
  min-width: 0;
}

/*
.panel h2 {
    font-size: 25px;
    margin: unset;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
*/
#covid-19-block-symptoms {
  grid-area: 10/1/16/8;
}

.panel-tiny {
  height: 45%;
}

.block-tiny {
  height: 45%;
}

.block-tiny:has(.panel-tiny) .panel-tiny {
  height: 100%;
}

.row>.panel-square,
.row>.block-square {
  width: 45%;
}

.row>.panel-square.donut {
  width: max-content;
}

.panel.header.inline {
  overflow: visible;
  height: 0;
  z-index: 1;
  margin: 5px 6px -14px;
  font-size: 60%;
}

.panel-oneliner.header h3 {
  font-size: 50%;
}

.panel h3 button {
  text-align: left;
  line-height: 1.3em;
}

.main :not(.grid) .panel-grow {
  flex: 1;
  /* max-height: 100%; */
  overflow: hidden;
}

.toggle-readout {
  margin-bottom: 3px;
  max-width: 100%;
  max-height: 100%;
  overflow-x: clip;
  overflow-y: auto;

  /* display: grid; */
  /* grid-template-columns: 4ch 1fr; */
  /* gap: 0 1em; */
  border-radius: 3px;
  display: grid;
  padding-bottom: 0.6em;
}

.value-toggle .toggle-readout {
  width: 100%;
  scrollbar-width: none;
}

.toggle-readout label {
  cursor: pointer;
  padding: 0.1em 0;
}

.value-toggle label {
  background-color: transparent;
  font-weight: 700;
  font-size: calc(var(--cell) * (4 / 3));
  align-items: center;
  grid-column: 1 / span 3;
  position: relative;
  overflow-x: hidden;
  margin-block: 0.1rem;
  display: grid;
  grid-template-columns: 65% 30%
}

.value-toggle label.showPercent{
  grid-template-columns: 45% 55%;
}

.value-toggle-zero,
.value-toggle-zero .num,
.value-toggle-zero .value {
  color: #aaa !important;
  text-wrap: nowrap;
}

.value-toggle label:has(input:focus-visible) {
  outline: auto;
}


.value-toggle label input,
.leaderboard label input {
  /* .visually-hidden */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  padding: 0 !important;
}

.value-toggle label .num,
.leaderboard label .num,
.leaderboard-value {
  font-size: calc(var(--cell) * (4 / 3));
  text-align: end;
  font-feature-settings: 'tnum';
  margin-left: 0;
  margin-right: 0.2em;
  min-width: 3em;
  width: 100%;
  font-weight: 600;
}

.value-toggle label.unselected .num,
.leaderboard label.unselected .num {
  opacity: 0;
}

.value-toggle label {
  font-weight: 600;
  width: 95%
}

.value-toggle label:hover {
  font-weight: 800;
}

.value-toggle label .value,
.leaderboard label .value {
  font-weight: 700;
  font-size: calc(var(--cell) * (4 / 3));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.percentage {
  font-weight: 600;
  opacity: 60%;
  margin-right: 0.5em;
}

.panel.donut {
  display: flex;
  padding: 0.3em;
}

.panel.value-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.test-toggle {
  width: fit-content;
  min-width: fit-content;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.row .test-toggle {
  gap: 0em;
}

.test-toggle .toggle-readout {
  height: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background-color: white;
  margin-bottom: 0;
  font-size: 0.7rem;
  padding: 0 0.5rem;
  border: 1px solid white;
}

.test-toggle .toggle-readout label {
  padding: 0;
}

.test-toggle h3 {
  position: relative;
  font-weight: 600;
  font-size: 0.6rem;
  /* font-size: 0.9em; */
}

.test-toggle tbody {
  display: flex;
  flex-direction: row;
}

.test-toggle label {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.test-toggle label .num {
  display: none;
}

.test-toggle label .value {
  font-weight: 600;
}

.block {
  position: relative;
  /* width: 100%; */
  overflow: hidden;
  border: 1px solid transparent;
  /* padding: 1rem; */
  border-radius: 3px;
}

.block.filtering>.panel {
  background-color: transparent;
}

.block:has(canvas) {
  padding: 0;
}

.block:has(> .donut),
.block:has(> .treemap) {
  padding: 1em 0.3em 0.3em 0.5em;
}

/* .toggles-container {
  margin-left: auto;
  height: 5%;
  position: relative;
  border: 1px solid green;
} */

.fixed-toggles {
  /* position: relative; */
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 100%;
  /* margin-top: -1.25rem; */
  height: 2.5rem;
}

.filters {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: 10px;
  background-color: transparent;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.panel-oneliner.filters {
  min-height: 5rem;
}

.filters .count-readout {
  font-size: 0.7rem;
  font-weight: 600;
  height: 100%;
  padding: 0.5em 0;
  color: #5e5e5e;
  display: flex;
  align-items: flex-end;

  span {
    font-weight: 600;
  }
}

.filters .count-readout>* {
  text-wrap: nowrap;
}

.filters *+.count-readout {
  margin-left: 0.5rem;
}

.filter-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.8125rem;

}

.filter-label {
  color: #5e5e5e;
  font-size: 0.6rem;
  /* font-size: 0.9em; */
  font-weight: 600;
}

.filter-list {
  display: flex;
  flex-direction: row;
  gap: 5px;
  font-size: 0.7rem;
}

.filter-value {
  height: 1.5rem;
  padding: 0 0.5rem;
  background-color: #8ebea1;
  color: #13341f;
  border: 1px solid #4e7c62;
  border-radius: 3px;
  justify-content: space-between;
  white-space: nowrap;
  font-weight: 600;

  display: flex;
  align-items: center;
  gap: 0.5em;
}

.dismisser {
  width: 0.875em;
  height: 0.875em;

  .icon {
    --url: url('assets/icons/dismiss-g3.svg');
  }
}

.delphy-button {
  position: absolute;
  top: 0.18em;
  right: 2px;
  display: flex;
  flex-direction: row;
  height: fit-content;
  border-radius: 3px;
}

.page-toggle-container {
  display: flex;
  align-items: center;
  height: 2.5rem;

}

.page-toggle {
  display: flex;
  flex-direction: row;
  border-radius: 3px;
  /* height: fit-content; */

}

.delphy-button button,
.page-toggle button {
  display: flex;
  align-items: center;
  background-color: lab(35 -3 -8);
  color: lab(70 -3 -8);
  font-size: 0.7rem;
  font-weight: 600;
  padding: calc(0.5em - 1px) 0.75em;
  border: 1px solid transparent;
  outline: 1px solid lab(45 -3 -8); 
  height: auto;
}

.lightblue {
  color: #137de7;
}

.delphy-button button {
  background-color: #e4ebf1;
  padding: 0 0.75em;
  border-radius: 3px;
  outline: 0px;
  /* filter: drop-shadow(0 0 0.5rem #d4dfea); */
}

.delphy-button a {
  text-decoration: none;
  color: #004f9e;
}

.delphy-button button:hover {
  color: #9baaba;
  background-color: #d8e3ec;
}

.delphy-button button:active {
  background-color: #bed2e7;
}

.page-toggle button:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.page-toggle button:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.page-toggle button:hover {
  background-color: lab(30 -3 -8);
  color: lab(85 -3 -8);
}

.page-toggle button.active {
  background-color: lab(45 -3 -8);
  color: lab(85 -3 -8);
  outline: 1px solid lab(45 -3 -8);
}
.page-toggle button.active:hover {
  background-color: lab(40 -3 -8);
  color: lab(60 -3 -8);
}

/* 
similar to panel-large etc.
but with room for a header
*/

.block-square {
  align-items: start;
}

.block-medium.block.row h2 {
  font-weight: 400;
}

.block:has(.panel)>h3,
.panel:has(canvas)>h3,
.panel:not(.panel-oneliner)>h3,
.map-leaderboard-header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.1rem 0.3rem;
  border-radius: 3px 3px 0 0 ;
  z-index: 1;
  font-weight: 600;
  font-size: calc(var(--cell) * (7 / 6));
  color: var(--text-static);
  /* text-transform: uppercase; */
  line-height: calc(var(--cell) * 2);
}

h3:has(.downloadButtons) {
  display: flex;
  gap: 2px;
}

.record-table-topbar {
  position: absolute;
  top: 0;
  left: 0.2rem;
  z-index: 1;
  font-weight: 600;
  font-size: calc(var(--cell) * (7 / 6));
  color: var(--text-static);
  text-transform: uppercase;
  line-height: calc(var(--cell) * 2);
}

.header-topbar {
  gap: 3px;
  position: absolute;
  width: 95%;
  display: flex;
}

.downloadButtons {
  margin-left: 2px;
  width: 1.2em;
  height: 1.2em;
  margin-top: 1.5px;
  color: var(--text-static);
  vertical-align: baseline;
  background-color: var(--text-static);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path  d="M0,60v-4H60v4H0ZM50.67,26.81l-2.76-2.76-16.09,15.31,.18-39.37h-4l.18,39.37L12.09,24.05l-2.76,2.76,20.67,19.19,20.67-19.19Z"/></svg>') no-repeat center/contain;
}

.download-full-page-button {
  margin-left: 5px;
  margin-top: 3.5px;
  width: 1.2em !important;
  height: 1.2em !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path fill="rgb(150, 150, 200)"  stroke-width="1.0" d="M0,60v-4H60v4H0ZM50.67,26.81l-2.76-2.76-16.09,15.31,.18-39.37h-4l.18,39.37L12.09,24.05l-2.76,2.76,20.67,19.19,20.67-19.19Z"/></svg>') no-repeat center/contain !important;
}


.download-full-page-button:hover {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path fill="white"  stroke-width="1.0" d="M0,60v-4H60v4H0ZM50.67,26.81l-2.76-2.76-16.09,15.31,.18-39.37h-4l.18,39.37L12.09,24.05l-2.76,2.76,20.67,19.19,20.67-19.19Z"/></svg>') no-repeat center/contain !important;
}

/* .panel.disease>h3 {
  text-transform: uppercase;
} */

.map-leaderboard-header {
  display: flex;
  width: 100%;
}

.block.column:has(.panel)>h3:has(+ .tinydonut) {
  left: 0;
  width: 100%;
  text-align: center;
}

.block-large,
.panel-large {
  font-size: calc(var(--cell) * (4 / 3));
}

.block h3 .label-detail {
  display: inline-block;
  margin-left: 0.4em;
  font-weight: 400;
  color: #555;
}

.block.row {
  display: flex;
  flex-direction: row;
  /* gap: 1%; */
  /* gap: 0.5em; */
}

.block.row:has(.donut) {
  justify-content: center;
}

.block.row.filtering {
  background-color: #f2f8f4;
}

.block.column {
  display: flex;
  flex-direction: column;
  /* gap: 1%; */
  gap: 0.5em;
}

.block.column.column-gap-none {
  gap: 0em;
}

/* .block.column-tight {
  display: flex;
  flex-direction: column;
  gap: 0.125em;
} */

.block.grid {
  display: grid;
  gap: 10px;
  padding-top: 20px;
}

/*  */

.home-nav .nav-selection {
  font-size: 80%;
  color: lab(100 0 0);
}

.home-nav {
  position: absolute;
  top: 1em;
  left: 1.75em;
  color: lab(100 0 0);
  font-weight: 700;
  align-items: start;
  z-index: 100;
}

/* .column-container:not(#home-container) .home-nav { */
.home-nav:has(.home-button) {
  left: 0.5em;
}

.home-nav .nav-disease,
.home-nav .nav-case-count {
  font-size: 1.2em;
}

.nav-disease:has(.synthetic-details-button) {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.synthetic-details-button {
  cursor: pointer;
  width: 0.9rem;
  height: 0.9rem;
  /* background-color: lab(45 -20 -17); */
  color: lab(100 0 0);
  border-radius: 100%;
  margin-left: .1rem;
  font-size: 1rem;
  line-height: 0.6rem;
  font-weight: 800;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}


.nav-disease .asterisk {
  cursor: pointer;
}

.home-nav .top-row {
  display: flex;

  p {
    font-size: 1.2em;
  }
}

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

#app-title {
  font-weight: 400;
  color: #aaccd5;

  display: flex;

  &::after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: #35656c;
    margin: 0 0.375em;
  }
}

.home-button {
  padding-block: 0.1em;
}

.home-button .icon {
  --url: url('assets/icons/back-g1.svg');
  --color: #aaccd5;
  height: 1em;
  width: 1em;
}

.panel.header {
  font-weight: 400;
  font-size: 150%;
}

.disease.single,
.positivityseries,
.rollingaverage,
.barline {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  width: 100%;
}

.disease.single {
  padding-top: 2%;
}
.disease.single .panel-chart,
.positivityseries .panel-chart,
.barline .panel-chart,
.rollingaverage .panel-chart {
  order: 1;
  flex: 1;
  border: none;
  border-radius: var(--border-radius);
  background: none;
  margin: 0.6em 0 0.3em 0.5em;
}

.disease.single .panel-readout,
.positivityseries .panel-readout,
.barline .panel-readout,
.rollingaverage .panel-readout {
  order: 2;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3em;
  /* flex-end; */
  height: 100%;
  width: 8rem;
  padding: 1.5rem 1rem 1.5rem 0rem;
  font-size: calc(var(--cell) * (5 / 3));
  font-weight: 600;
  line-height: calc(var(--cell) * (4 / 2));
  border-radius: var(--border-radius);

  .test-count-readout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;

    .name {
      order: 1;
      font-weight: 600;
      flex-shrink: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .count {
      order: 2;
      font-weight: 800;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
  }
}


.disease.multi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  height: 100%;
  padding: 5% 3% 2% 3%;
  overflow: hidden;
}

.disease.multi .panel-chart {
  flex: 0 0 68%;
  border: none;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  /* border: 1px solid blue; */
}

.disease.multi .panel-readout {
  flex: 0 0 26%;
  background: none;
  display: flex;
  flex-direction: row;
  gap: 1.15rem;
  font-size: calc(var(--cell) * (3 / 2));
  border-radius: var(--border-radius);
  min-height: 0;
  /* border: 1px solid green; */
  
  .test-count-readout {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow: hidden; 
    gap: 0.3rem;
    border-radius: .25rem;
    max-height: 4em;
    min-height: 1.35rem;
    padding: .25em .75em .25em .75em;
    line-height: 100%;
    .name {
      font-weight: 600;
      flex-shrink: 1;
      font-size: .9em;

      /* white-space: nowrap; */
      text-align: center;
      text-overflow: ellipsis;
    }

    .count {
      font-size: 1.15em;
      font-weight: 800;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
  }
}

/*  .panel-readout {
  width: 6rem;
  border: 2px solid orange;
} */


.map-title {
  position: absolute;
  top: 0.3em;
  left: 0.5em;
  z-index: 1;
  font-weight: 600;
  font-size: 0.6rem;
  color: #767676;
}

.map-svg-container svg path.highlight {
  stroke-width: 2.5;
}

.block.column .panel.panel:has(.map-svg-container) {
  height: auto;
}

.toggleblock>.panel>h3 {
  display: none;
}

.map-svg-container {
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-svg-container svg {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover
}

.map-svg-container svg path {
  opacity: 1;
  transition: opacity 0.3s;
}

.map-svg-container svg path.back {
  opacity: 0.4;
}

.map-details {
  display: flex;
  flex-direction: column;
  background-color: white;
  color: #77868b;
  /* font-size: 65%; */
  font-size: 0.6rem;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 3px;
}

/* eventually should be applied to other blocks */
.geo-leaderboard>h3 {
  width: 100%;
  height: 2em;
  left: 0 !important;
  padding-left: 0.3rem;
  position: relative !important;
  border-bottom: 1px solid #ccd5dc;

}

.leaderboard-entry {
  width: 100%;
  display: grid;
  grid-template-columns: 16% 50% 22% !important;
  gap: 0.25em;
  cursor: pointer;
}

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

.leaderboard-dot {
  height: 100%;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  margin: auto;
}

.leaderboard-entries {
  display: grid;
  gap: 0.25em;
  grid-auto-rows: 0.9em;
  padding-top: 1em;
  padding-bottom: 1.5em;
  height: inherit;
  overflow-y: auto;
  overflow-x: hidden;
}

.geobars {
  display: flex;
  display: 0.2em;
}

.leaderboard-entry {
  padding: 0 0.3em;
}

.leaderboard-entry .leaderboard-name {
  text-align: start;
  font-weight: 700;
}

.leaderboard-entry .leaderboard-dot {
  filter: brightness(90%);
}

.leaderboard-entry .leaderboard-name,
.leaderboard-entry .leaderboard-value,
.geobars .bar-num {
  font-size: calc(var(--cell) * (4 / 3));
  /* line-height: calc(var(--cell) * 2); */
  filter: brightness(50%);
  overflow-x: hidden;
  text-wrap: nowrap;
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
}

.leaderboard-entry .bar-num {
  min-width: 30px;
  white-space: nowrap;
  text-overflow: initial;
}

.map-column {
  /* background-color: white; */
  border-bottom: 1px solid #c0c8cb;
  border-right: 1px solid #dfe3e4;
}

.map-column .back {
  opacity: 0.3;
}

.back {
  opacity: 0.3;
}

.map-column .column-values>* {
  transition: opacity 0.15s;
}

.map-column.state {
  width: 30%;
}

.map-details .leaderboard-name,
.map-details .leaderboard-value {
  width: 27%;
  padding: 0.3em 0.5em 0.3em 0.5em;
  text-align: right;
}

.bars {
  width: 72%;
  text-align: left;
  padding: 0.3em 0.5em 0.3em 15%;
}

.map-column.state {
  text-align: center;
  padding: 0.3em 0.5em 0.3em 0.5em;
}

.map-details-toggle {
  font-weight: 600;
  border-bottom: 1px solid #c0c8cb;
  padding: 0.5em;
  text-align: center;
}

.column-values {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.map-column.counts .map-details-toggle,
.map-column.counts .column-value {
  padding-right: 2em;
  text-align: right;
}

.bar-container {
  margin: 0 1em;
}

/* Styling for each bar */
.bar {
  height: 80%;
  text-align: center;
  color: white;
  transition: width 0.3s ease-in-out;
  /* Smooth transition for updates */
  filter: brightness(0.97);
  /* make the light colors a bit more visible */
}

.column-identifier {
  display: flex;
  flex-direction: row;
  height: 1em;
  cursor: pointer;
}

.column-index {
  font-feature-settings: 'tnum';
  width: 2em;
  text-align: left;
  font-weight: 600;
}

.column-value {
  font-weight: 600;
  line-height: 0.9;
  height: 1em;
}

.map-column.counts .column-value {
  font-weight: 600;
  font-feature-settings: 'tnum';
}

.coordinate-points circle:hover {
  cursor: pointer;
}

.coordinate-readout {
  position: absolute;
  text-align: left;
  bottom: 0.1em;
  right: 0.1em;
  color: white;
  font-weight: 600;
  /* width: 99.2%; */
  padding: 0.2em 0.5em;
  z-index: 1;
  font-size: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25em;

  left: 0;
  bottom: 0;
  min-height: 5em;
  width: 100%;
  background: #6b8589;
  opacity: 1;
  transition: opacity 0.3s ease-out;

  .num {
    font-weight: 700;
  }

  .category {
    font-weight: 400;
  }
}

.coordinate-readout.hiding {
  opacity: 0;
}

/* 


███████╗██╗███╗   ██╗ ██████╗ ██╗     ███████╗
██╔════╝██║████╗  ██║██╔════╝ ██║     ██╔════╝
███████╗██║██╔██╗ ██║██║  ███╗██║     █████╗  
╚════██║██║██║╚██╗██║██║   ██║██║     ██╔══╝  
███████║██║██║ ╚████║╚██████╔╝███████╗███████╗
╚══════╝╚═╝╚═╝  ╚═══╝ ╚═════╝ ╚══════╝╚══════╝

*/

body.single .single-container {
  display: flex;
}

body.single #top-nav {
  display: block;
}

.single-container>.flex-col {
  width: 100%;
  padding: 2rem;
  gap: 1rem;
}

.single-container .main {
  display: flex;
  flex-direction: row;

  /* stretch to fill height */
  flex-grow: 1;
  flex-shrink: 1;
  height: 0;
}

.main.grid {
  flex: 1;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.5rem;
  overflow: hidden;
}

.chart {
  position: relative;

  svg {
    user-select: none;
    -webkit-user-select: none;
  }

  rect {
    fill: black;
  }

  text {
    font: inherit;
    fill: black;
  }

  &.has-highlight {

    rect,
    line {
      opacity: 0.3;

      &.highlight {
        opacity: 1;
      }
    }
  }
}

.chart-with-readout {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1em;

  .line-value {
    font-weight: bold;
    font-feature-settings: 'tnum';
  }
}

/* .treemap svg {
  margin-top: 20px;
} */

.number-chart {
  display: flex;
  align-items: end;
  gap: 0.4rem;
  padding: 0.5rem;
  margin: 0.25rem;
  font-size: calc(var(--cell) * (3 / 2));
  height: calc(100% - 0.5rem);

  .number-chart-number {
    font-size: calc(var(--cell) * 2.5);
    font-weight: 700;
  }

  .number-chart-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

.donut-chart {
  .sector {
    stroke: none;
    transition: fill 0.08s ease-in;
  }
}

.telescopebars {
  display: flex;
  justify-content: center;
}

.telescope-chart {
  display: flex;
  align-items: center;
  padding: 0.6rem 0rem 0;
  width: calc(100% - 0.6rem);
  height: 100%;

  .sector {
    stroke: none;
    cursor: pointer;
  }

  g {
    width: 100%;
  }
}

.telescope-readout {
  position: absolute;
  bottom: 0.5em;
  left: 0.3rem;
  z-index: 1;
  font-size: 0.7rem;
  display: flex;
  gap: 0.5em;
  white-space: nowrap;

  .num {
    font-weight: 800;
  }

  .category {
    font-weight: 600;
  }
}

.bar-backing {
  cursor: pointer;
  pointer-events: all;
}

.bar-group text {
  font-size: calc(var(--cell) * (4 / 3));
  white-space: nowrap;
  visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  pointer-events: none;

  .num {
    font-weight: 800;
  }

  .category {
    font-weight: 600;
  }
}

.bar-group.selected text {
  visibility: visible;
}

.gauge {
  .telescope-readout {
    .num {
      font-weight: 600;
    }
    .category {
      font-weight: 800;
    }
  }
}

.tinydonut,
.gauge {
  svg {
    height: 80%;
    padding: 1.5em 0.5em 0.5em 0.5em;
  }
  .telescope-readout {
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

div.block.column:has(.tinydonut) {
  padding: 1.5em 0.5em 0.5em 0.5em;
}

/* Why doesn't this work?: .no-data .telescope-readout {display: none !important; opacity: 0 !important;} */

/* CHECKBOX STYLES */

input[type='checkbox'] {
  /* start with default interface accent colors */
  --bg: AccentColor;
  --border: AccentColor;
  appearance: none;
  /* width: 1rem; */
  width: 1em;
  /* height: 1rem; */
  height: 1em;
  /* set the border color using a custom property */
  border: 1px solid var(--border);
  border-radius: 2px;
  margin: 0;
  padding: 0;
  position: relative;
  /* do we want a specific unchecked background color here? */
  background-color: transparent;
  cursor: inherit;
}

input[type='checkbox']:hover {
  /* a light shade to indicate hover state */
  background-color: color-mix(in lab, transparent 85%, var(--bg));
}

input[type='checkbox']:checked {
  /* set the background fill color using a custom property */
  background-color: var(--bg);
}

label:has(input[type='checkbox']:disabled) {
  /* may want specific colors instead of opacity */
  opacity: 0.6;
  /* cursor: not-allowed; */
  cursor: default;
}

input[type='checkbox']:checked::after {
  /* show checkmark */
  content: '';
  display: block;
  position: absolute;
  inset: -1px;
  /* to account for the border on the checkbox */
  mask: url('assets/icons/checkmark-g2.svg');
  mask-repeat: no-repeat;
  mask-position: center center;
  background-color: #fefefe;
}

input[type='radio'] {
  appearance: none;
  width: 0;
  height: 0;
  margin: 0;
}

.disease button {
  text-transform: uppercase;
}

.toggle-title {
  cursor: pointer;
  font-weight: 600;
  font-size: calc(var(--cell) * (7 / 6));
  text-transform: uppercase;
  color: var(--text-off);
  background-blend-mode: color-burn;
  line-height: calc(var(--cell) * 2);
}

.toggleblock+.toggle-title:hover {
  color: var(--text-static);
}

input[type='radio']:checked+.toggle-title {
  color: #767676;
  pointer-events: none;
}

.toggleblock:has(.panel > .map-svg-container) form {
  margin: 0.2em 0;
}

.toggleblock:has(.panel > .map-svg-container) input[type='radio']:checked+.toggle-title {
  background-color: #284b50;
  color: #a0e2eb;
}

.toggleblock:has(.panel > .map-svg-container) .toggle-title {
  padding: 0.2em 0.5em;
  border-radius: 0.15em;
  color: var(--text-off);
  background-color: #75a5ac;
}

#salmonella-toggleblock-maps-options form.radio {
  position: absolute;
  z-index: 1;
  padding-top: 0.5em;
  padding-left: 0.5em;

  .toggle-title {
    background-color: #76a5ac;
    color: #c2d6db;
    padding: 0.25em 0.5em;
  }

  input[type='radio']:checked+.toggle-title {
    color: #a1e2ec;
    background-color: #294c51;
  }
}

.record-table {
  background-color: white;
  font-size: 0.5rem;
  display: flex;
  padding-top: 1.1rem;
  padding-bottom: 0.125rem;
}

.record-table-table {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.record-table-header td:first-child,
.record-table-row td:first-child {
  padding-left: 0.5rem;
}

.record-table-header td:last-child,
.record-table-row td:last-child {
  padding-right: 1rem;
}

.record-table-header td.sorting {
  color: #3d3d3d;
}

.record-table-controls {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0.5rem;
  font-size: 0.6rem;
  color: #828282;
}

.record-table-controls-column {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 0 1rem;
  color: #4f4f4f;
  font-weight: 600;
}

.record-table-controls-search {
  border: none;
  outline: none;
}

.record-table-controls-search-fixed {
  position: absolute;
  top: 0;
  right: 0;
  width: 10rem;
  padding: 0.4em 0.5em;
  font-weight: 600;
  font-size: 0.5rem;
  color: #000000;
  border: none;
  outline: none;
  border-left: 1px solid rgb(240, 240, 240);
  border-bottom: 1px solid rgb(240, 240, 240);
  z-index: 1;
}

/* .record-table-controls-column input[type="checkbox"] {
  appearance: auto;
  border: 1px solid black;
} */

.record-table-superheader {
  font-weight: 600;
  color: var(--text-static);
  font-size: 0.6rem;
}

.record-table-header {
  font-weight: 600;
  color: #9d9d9d;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 1;
  /* border: 1px solid white;
  outline: 1px solid white; */
}

.record-table-header td {
  word-break: break-all;
  cursor: pointer;
  border-bottom: 1px solid #ededed;
}

.record-table-header td:hover {
  color: black;
}

.record-table table {
  position: relative;
  border-collapse: separate;
  border-spacing: 1px;
}

.record-table td {
  padding: 5px;
  border: 1px solid white;
  border-top: 1px solid white;
  /* border-top: 2px solid white; */
  border-bottom: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #767676;
}

.record-table .record-table-row td {
  font-weight: 600;
  cursor: pointer;
  background-color: transparent;
  width: fit-content;
  max-width: 2rem;
}

.record-table .record-table-row td:hover {
  background-color: #e3e3e3;
}

.record-table .record-table-row td.no-link {
  cursor: default;
}

.record-table .record-table-row td a {
  color: #31575d;
}

.record-table .record-table-row td:hover a {
  color: #57787d;
}

.record-table .record-table-row td a:visited {
  color: #31575d;
}

td.header-unique {
  text-align: left;
}

td.header-float,
td.header-integer {
  text-align: center;
}

td.header-ordinal,
td.header-categorical {
  text-align: center;
}

td.dtype-float {
  font-variant-numeric: tabular-nums;
  width: 2rem;
  text-align: center;
}

td.dtype-integer {
  font-variant-numeric: tabular-nums;
  width: 2rem;
  text-align: center;
}

td.dtype-categorical {
  width: 4rem;
  max-width: 4rem;
  text-align: center;
}

td.dtype-unspecified {
  width: 4rem;
  max-width: 12rem;
}

td.dtype-unique {
  width: 4rem;
  max-width: 4rem;
  min-width: 4rem;
  color: #aaaaaa;
}

td.dtype-freetext {
  width: 12rem;
  max-width: 12rem;
  min-width: 12rem;
}

td .ordinal-block {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.record-table .table-expander,
.record-table .table-no-data {
  line-height: 1.5rem;
}

.record-table .table-expander {
  /* outline: 2px solid red; */
}

.record-table .table-expander td {
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  outline: none;
  border: none;
  border-top: 1px solid #ededed;
}

.record-table .table-expander td:hover {
  color: black;
  background-color: #f6f6f6;
}

.no-data,
.geo-no-data,
.record-table {
  font-size: calc(var(--cell) * (4 / 3));
  color: rgb(199, 199, 199);
  width: 100%;
  text-align: center;
  vertical-align: middle;
  top: 0;
  align-content: center;
  font-weight: 600;
}

.leaderboard .no-data,
.telescopebars .no-data,
.tinydonut .no-data,
.block .no-data {
  position: absolute;
  height: 95%;
}

.telescopebars .no-data {
  margin-top: 0.8em;
}

.record-table .table-no-data td,
.geo-no-data {
  outline: none;
  border: none;
}

/* HISTOGRAM */

.histogram {
  height: 100%;
  min-height: 1rem;
  width: 100%;
  min-width: 1rem;
  padding: 2% 2% 0;
}

.histogram .column-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.histogram .bar-wrap {
  flex-grow: 1;
  position: relative;
}

.histogram .bar {
  position: absolute;
  bottom: 0;
  height: revert-layer;
  /* width: 100%; */
}

.histogram .bar-readout {
  height: 2.5em;
  text-align: center;
  font-weight: 700;
  font-size: calc(var(--cell) * (7 / 6));
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.histogram .value {
  display: block;
}

.histogram .count {
  opacity: 0;
  transition: opacity 0.15s;
}

.histogram .column-wrap:hover .count {
  opacity: 1;
}

.histogram.no-data .bar-wrap {
  display: none;
}

.histogram .x-axis,
.histogram .readout {
  user-select: none;
  -webkit-user-select: none;
  font-size: calc(var(--cell) * (7 / 6));
  font-family: 'Inter';
}
.panel>.chart {
  margin: 0 1em
}
.panel.histogram {
  padding-top: 0.8em;
}

.panel-small.histogram {
  .bar-readout {
    height: 1.25em;
    font-size: 0.75em;
  }

  .count {
    position: absolute;
    background-color: #fff;
    padding: 0.25em;
    bottom: 0;
    left: 100%;
    z-index: 10;

    &::after {
      content: 'matches';
      margin-left: 0.25em;
    }
  }
}

/* LEADERBOARD */

.leaderboard {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 1.2em 0 0em 0em;
}

.leaderboard-bar-wrap {
  display: flex;
  gap: 0.3em;
  margin-left: 0.3em;
  width: 65%;
  text-wrap: nowrap;
}

.leaderboard .bar {
  display: inline-block;
  height: auto;
}

.leaderboard .value {
  font-weight: 600;
  padding-left: 0.25rem;
}

.value-addl {
  display: inline-block;
  padding-left: 0.5rem;
  vertical-align: top;
  font-size: 0.5rem;
  font-weight: 700;
}

.value-addl-readout {
  position: absolute;
  top: -0rem;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  background-color: white;
  padding: 0.1rem 0.5rem;
  font-size: 0.6rem;
}

.value-addl:hover .value-addl-readout {
  opacity: 0.97;
}

.popup-panel {
  position: absolute;
  z-index: 100;
  background-color: white !important;
  padding: 12px;
  top: 0;
  width: 100%;
  display: none;
  height: 100%;
}

.popup-chart {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.address-panel {
  margin: 1.85em 0.5em;
  margin-top: 8%;
  font-size: 0.6rem;
  height: 92%;
  overflow-y: scroll;
}

.entry_flexwrapper {
  display: flex;
  cursor: pointer;
  width: 100%;
}

.address-personal-details {
  width: 100%;
  padding-left: 1.5em;
  padding-top: 0.3em;
  display: flex;
  white-space: pre-line;
  color: #767676;
}

.address-detail-left {
  display: block;
  width: 65%;
  margin-right: auto;
  margin-left: 0;
}

.address-date-right {
  display: block;
  text-align: right;
  width: 25%;
  margin-right: 1.5em;
  margin-left: auto;
}

.address-panel .address-readout {
  font-weight: 600;
  width: 35%;
  display: block;
  padding: 0.1em;
}

.address-panel .address-detail {
  width: 55%;
  display: block;
  padding: 0.1rem 0;
}

.popup-panel {
  position: absolute;
  z-index: 100;
  background-color: white;
  padding: 12px;
  top: 0;
  width: 100%;
  display: none;
}

.popup-chart {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.block .expander {
  position: absolute;
  top: 0.25em;
  right: 0.5em;
  z-index: 1;
  font-weight: 600;
  cursor: pointer;
  color: #bdbdbd;
}

.block.expanded .expander .icon {
  --url: url('assets/icons/collapse-g1.svg');
  --url: url('assets/icons/collapse-g1.svg');
}

.expander .icon {
  --url: url('assets/icons/expand-g1.svg');
}

.block.expanded {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.block.expanded-col {
  flex-direction: column !important;
}

.block.expanded-row {
  flex-direction: row !important;
}

.block.expanded .treemap {
  width: 100%;
  height: auto;
}

bars > div canvas {
  border: solid 1px white;
}

bars > div.pinned canvas {
  border-color: black;
}

.text-tally {
  &::after {
    /* fade-out effect to the right for horizontal scroll */
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    width: 2em;
    height: 2em;
    background: linear-gradient(90deg, transparent, #ffffffb5);
    content: '';
    pointer-events: none;
  }
}

.text-tally-header {
  display: flex;
  flex-direction: row;
  width: 100%;
  /* border: 1px solid transparent;
  border-bottom: none; */
}

.text-tally-header .field-name {
  flex-grow: 1;
  color: #8c8c8c !important;
  text-transform: uppercase;
  font-size: calc(var(--cell) * (4 / 3));
  padding: 0.5em 0.5em 0.25em;
  position: relative;
}

.text-tally-header .count-readout {
  font-size: calc(var(--cell) * (4 / 3));
  font-weight: 600;
  padding: 0 0.25em;
}

.text-tally-header .title-detail {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0.25em 0.5em;
  font-size: calc(var(--cell) * (4 / 3));
  font-weight: 700;
  background-color: white;
  text-transform: none;
  color: #777777;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  width: 100%;
}

.text-tally-header:hover {
  .title-detail {
    /* border: 1px solid black; */
    opacity: 1;
  }

  /* .titles {
    background-color: #fff;
  } */
}

.text-tally .words {
  position: relative;
  white-space: nowrap;
  font-size: calc(var(--cell) * (7 / 6));
  font-weight: 700;
  padding-left: 0.25em;
  height: 1.875em;
  margin-top: -0.25em;
  overflow: auto hidden;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    height: 2px;
  }

  &::-webkit-scrollbar-track {
    background-color: #fff;
  }

  &::-webkit-scrollbar-thumb {
    /* background: #eee; */
    background: linear-gradient(90deg,
        transparent,
        #deeef0 10%,
        #deeef0 90%,
        transparent);
  }
}

.words-wrap {
  white-space: wrap !important;
  height: auto !important;
}

.text-tally button {
  padding: 0 0.25em;

  &:hover {
    background-color: #eee;
  }
}

.text-tally button+button {
  border-left: solid 1px #ccc;
}

.block .radio {
  background-color: transparent;
  position: absolute;
  z-index: 10;
  display: flex;
  /* padding: 0.2em 0.6em; */
}

.panel .radio {
  position: absolute;
  z-index: 10;
}

.block .radio label,
.panel .radio label {
  font-size: calc(var(--cell) * (7 / 6));
  padding: 0.1em 0.3em;
}

.section-grid > .panel {
  background-color: white;
  border-radius: 0.25rem;
  overflow: hidden;
}

.section > h3 {
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
}

.panel.group {
  /* sets up "dividers" */
  /* background-color: color-mix(in srgb, black 8%, white); */
  gap: 1px;
}

.panel.group > .panel {
  background-color: white;
}

.panel.group > .panel:last-child:nth-child(2n - 1) {
  grid-column: span 2;
}

.panel .size-sm { height: 4rem; }
.panel .size-md { height: 6rem; }
.panel .size-lg { height: 8rem; }
.panel .size-xl { height: 12rem; }
.panel .size-xxl { height: 18rem; }
.panel .size-xxxl { height: 24rem; }

/* 



██╗   ██╗███╗   ██╗██╗  ██╗███╗   ██╗ ██████╗ ██╗    ██╗███╗   ██╗███████╗
██║   ██║████╗  ██║██║ ██╔╝████╗  ██║██╔═══██╗██║    ██║████╗  ██║██╔════╝
██║   ██║██╔██╗ ██║█████╔╝ ██╔██╗ ██║██║   ██║██║ █╗ ██║██╔██╗ ██║███████╗
██║   ██║██║╚██╗██║██╔═██╗ ██║╚██╗██║██║   ██║██║███╗██║██║╚██╗██║╚════██║
╚██████╔╝██║ ╚████║██║  ██╗██║ ╚████║╚██████╔╝╚███╔███╔╝██║ ╚████║███████║
 ╚═════╝ ╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝  ╚═══╝ ╚═════╝  ╚══╝╚══╝ ╚═╝  ╚═══╝╚══════╝



*/

#unknowns-container .flex-col {
  width: 100%;
  height: 100%;
}

#unknowns-table-container {
  width: 100%;
  height: 97%;
}

#unknowns-container h2 {
  height: 3%;
}

#client-logo img {
  width: 4rem;
  padding-left: 0.5rem;
}

.panel.map h3{
  background-color: #c9d5e3;
  border-bottom: 0.5px solid #666;
  width: 100%;
}

.map-overlay {
  position: absolute;
  top: 0;
  display: block;
  pointer-events: none;
  cursor: pointer;
  z-index: 1000;
  /* border: 2px solid salmon; */
}

.map-overlay-label {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  display: block;
  background-color: #fffc;
  padding: 3px;
  border-radius: 3px;
  width: fit-content;
  font-size: 0.7em;
  transition: opacity 0.06s ease-in;
}

.map-overlay-label-text,
.labelNum {
  filter: brightness(0.5);
}

.labelNum {
  font-weight: 700;
}

.map-overlay-label .highlight {
  opacity: 1;
}

.map-overlay-label.back {
  opacity: 0.5;
}

#download {
  position: absolute;
  right: 0;
  color: white;
}

.print-only {
  display: none;
}

/* TODO: remove */
.record-table-header .header-state{
  min-width: 7em;
}

.panel #genotype{
  padding: 1em
}

.panel #readout{
  width: 60%
}

/* mobile  */

/* 
███╗   ███╗ ██████╗ ██████╗ ██╗██╗     ███████╗
████╗ ████║██╔═══██╗██╔══██╗██║██║     ██╔════╝
██╔████╔██║██║   ██║██████╔╝██║██║     █████╗  
██║╚██╔╝██║██║   ██║██╔══██╗██║██║     ██╔══╝  
██║ ╚═╝ ██║╚██████╔╝██████╔╝██║███████╗███████╗
╚═╝     ╚═╝ ╚═════╝ ╚═════╝ ╚═╝╚══════╝╚══════╝
 */
/* MOBILE STYLES  */
/*
@media (max-width: 800px) {
  #flex-upper {
    height: 5vh;
    position: fixed;
    width: 100vw;
    z-index: 100;
    top: 0;
  }

  .single-container {
    display: block;
    width: 100vw;
    height: fit-content;
    margin-top: 5vh;
  }

  .panel {
    margin: 1rem 0;
  }

  .single-container .main.grid {
    padding: 0 0.5rem 1rem 0.5rem;
    display: block;
  }

  #flex-lower {
    height: 100vh;
    width: 100vw;
    overflow: scroll;
  }

  canvas {
    border-radius: 0;
  }

  .date-toggle {
    display: flex;
    justify-content: space-between;
  }

  .date-toggle-button {
    flex: 1;
    display: block;
    padding: 0px;
    font-size: 0.85em;
    color: #5e5e5e;
    background: #ececec;
    border: none;
    border-bottom: 3px solid transparent;
    text-align: center;
    line-height: 32px;
  }

  .date-toggle-button.active {
    background: #d5dbdc;
    border-bottom-color: teal;
    color: #36656c;
    font-weight: bold;
  }

  .geo-readout-container {
    flex: 1;
    height: auto;
  }

  .geo-readout-wrapper {
    display: flex;
    padding: 0.5rem 0.5rem 0rem 1rem;
    gap: 10px;
    border-radius: 8px;
    justify-content: space-between;
  }

  .geo-readout-entry {
    flex: 1;
    display: block;
    font-size: 0.85em;
    height: 100%;
    color: #5e5e5e;
  }

  .geo-readout-entry .number {
    font-size: 2em;
    color: #2b4b51;
  }

  .geo-readout-header {
    font-size: 0.7em;
    font-weight: normal;
    color: #8e8e8e;
    border-bottom: 1px solid #ccc;
    width: 100%;
    padding: 0.3em 1rem;
  }

  .geo-readout-compare {
    display: flex;
    padding: 0.5rem 0.5rem 0rem 1rem;
    gap: 10px;
    border-radius: 8px;
    justify-content: space-between;
  }

  .geo-readout-comparison {
    flex: 1;
    display: block;
    font-size: 0.85em;
    height: 100%;
    color: #5e5e5e;
  }

  .geo-readout-comparison .percentage-box {
    font-size: 0.9em;
    background-color: #ffffff;
    color: #ffffff;
    padding: 0.2rem 0.2rem;
    border-radius: 2px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
  }
} */