:root {
  /* Color palette */
  --fr--color-sapphire-blue: #014371;
  --fr--color-sea-blue: #00639a;
  --fr--color-gainsborough: #d2dce3;
  --fr--color-sky-white: #fbfeff;
  --fr--color-yankees-blue: #161d39;

  /* Layout */
  --top-header-margin: 3rem;
  --max-w: 1200px;

  /* Backgrounds */
  --bg-page: #f7f6f2;
  --bg-surface: #ffffff;
  --bg-subtle: #f0efe9;

  /* Text */
  --text-primary: #1a1a18;
  --text-secondary: #4a4a47;
  --text-muted: #888780;
  --text-white: #fbfeff;

  /* Nature tones */
  --green: #776c4d;
  --green-dark: #5f5437;
  --green-deeper: #085041;
  --green-bg: #e1f5ee;
  --green-bg2: #9fe1cb;

  --border: rgba(30, 30, 20, 0.1);
  --border-med: rgba(30, 30, 20, 0.5);

  /* Typography */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-mono: "DM Mono", monospace;

  /* Border and radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ========================================
   Reset and global styles
   ======================================== */

html,
body {
  height: 100%;
  font-family: Lato, sans-serif;
  background-image: url("../images/header.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

a {
  color: var(--fr--color-sapphire-blue);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: color-mix(in srgb, var(--fr--color-sapphire-blue) 90%, white);
}

/* --- Site header -------------------------------------------- */

.header {
  display: flex;
  align-items: center;
  align-content: center;
  color: rgba(255, 255, 255, 0.633);
  padding: 0.5em 1em;
  height: var(--top-header-margin);
}

.header > * {
  flex: 0 0 auto;
}

.header .header__link {
  align-self: baseline;
}

.header a,
.header button.button,
.header a:link,
.header a:visited,
.header a:hover,
.header a:active,
.header .header__link > a {
  display: inline-block;
  color: var(--text-white);
  margin-bottom: 0;
  transition:
    background-color 0.25s ease-out,
    color 0.25s ease-out;
}

.header__navigation {
  flex-shrink: 1;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0 0.5ch;
  gap: 0.5ch;
  scrollbar-width: none;
}

.header__navigation > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5ch;
  margin: 0;
  padding: 0;
}

.header__navigation > ul > li {
  display: inline-flex;
}

.header__navigation::-webkit-scrollbar {
  display: none;
}

.header__navigation a,
.header__navigation button.button {
  margin: 0.1rem 0.25rem;
  border-bottom: 1px solid transparent;
}

.header__navigation a:hover,
.header__navigation button.button:hover {
  border-bottom-color: currentColor;
}

.header__search {
  flex: 1;
}

.header__search input,
.header__search button {
  margin: 0;
}

.logo {
  /* font-family: var(--font-serif); */
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.logo-badge {
  background: var(--green);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 2px 6px;
}

#root {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

hr.header-separator {
  margin: 0;
  border: none;
  border-top: 1px solid rgb(255, 255, 255);
}

.database-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 1rem;
}

.database-aside {
  position: sticky;
  top: calc(var(--top-header-margin) + 1rem);
  align-self: start;
  max-height: calc(100vh - var(--top-header-margin) - 2rem);
  overflow: hidden;
  background-color: rgba(96, 91, 63, 0.85);
  padding: 0.75rem;
  padding-inline-start: 0.5rem;
}

.page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.page-intro h1 {
  margin: 0;
  flex: 0 0 auto;
}

.page-intro small {
  color: #000000;
}

.table__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 300px;
}

.table-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 600px;
}

.table-search input {
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-med);
  font-size: 1rem;
  flex: 1;
  min-width: 150px;
}

.table-search input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(0, 99, 154, 0.1);
}

.table-search button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}

section[role="search"] {
  flex: 1;
  display: flex;
  max-width: 600px;
}

#downloadCsvBtn,
#downloadFastaBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  border-radius: 6px;
}

#downloadCsvBtn {
  margin-inline-end: 0.25rem;
}

#downloadCsvBtn svg,
#downloadFastaBtn svg {
  width: 1rem;
  height: 1rem;
}

/* Genome link styling */
.genome-link-wrapper {
  display: inline;
}

.genome-link {
  color: var(--green-dark);
  text-decoration: none;
}

.genome-link:hover {
  text-decoration: underline;
}

.download-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.download-dropdown {
  position: relative;
  display: inline-flex;
}

.download-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  display: none;
  min-width: 12rem;
  padding: 0.35rem 0;
  border: 1px solid var(--fr--color-gainsborough);
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  z-index: 3000;
  flex-direction: column;
}

.download-dropdown.is-open .download-dropdown__menu {
  display: flex;
}

.download-dropdown__menu a {
  display: block;
  padding: 0.55rem 0.9rem;
  color: var(--fr--color-yankees-blue);
  font-weight: 600;
}

.download-dropdown__menu a:hover,
.download-dropdown__menu a:focus {
  background: var(--bg-subtle);
}

.database-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: var(--bg-page);
  border-radius: 12px;
  padding-left: 1rem;
  padding-top: 0.1rem;
}

.database-main > .page-intro,
.database-main > .button-group {
  flex: 0 0 auto;
}

.table-viewport {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    Source Sans Pro,
    sans-serif;
  color: black;
}

ul,
ol,
dl {
  margin-bottom: 1rem;
  list-style-position: outside;
  line-height: 1.6;
}

ul.no-bullet,
ol.no-bullet {
  float: left;
  list-style: none;
  margin-left: 0;
}

.topic-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.button {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 0.5px solid var(--border-med);
  color: var(--text-secondary);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.15s;
}

.button:hover {
  border-color: var(--green);
  color: var(--green);
}

/* .button {
  border: 1px solid gray;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
} */

.button.primary {
  background-color: var(--fr--color-sea-blue);
  color: var(--fr--color-sky-white);
}

.button-group {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex-grow: 1;
}

.button-group:before,
.button-group:after {
  display: none;
}

.button-group:before,
.button-group:after {
  display: table;
  content: " ";
  flex-basis: 0;
  order: 1;
}

.button-group:after {
  clear: both;
}

.button-group .button {
  margin: 0 1px 1px 0;
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.button-group .button:last-child {
  margin-right: 0;
}

.button-group.tiny .button {
  font-size: 0.6rem;
}

.button-group.small .button {
  font-size: 0.75rem;
}

.button-group.large .button {
  font-size: 1.25rem;
}

.button-group.expanded .button {
  flex: 1 1 0px;
}

.button-group.primary .button,
.button-group.primary .button.disabled,
.button-group.primary .button[disabled],
.button-group.primary .button.disabled:hover,
.button-group.primary .button[disabled]:hover,
.button-group.primary .button.disabled:focus,
.button-group.primary .button[disabled]:focus {
  background-color: #773742;
  color: #fefefe;
}

.button-group.primary .button:hover,
.button-group.primary .button:focus {
  background-color: #773742;
  color: #fefefe;
}

.button-group.secondary .button,
.button-group.secondary .button.disabled,
.button-group.secondary .button[disabled],
.button-group.secondary .button.disabled:hover,
.button-group.secondary .button[disabled]:hover,
.button-group.secondary .button.disabled:focus,
.button-group.secondary .button[disabled]:focus {
  background-color: #fff;
  color: #0a0a0a;
}

.button-group.secondary .button:hover,
.button-group.secondary .button:focus {
  background-color: #ccc;
  color: #0a0a0a;
}

.button-group.success .button,
.button-group.success .button.disabled,
.button-group.success .button[disabled],
.button-group.success .button.disabled:hover,
.button-group.success .button[disabled]:hover,
.button-group.success .button.disabled:focus,
.button-group.success .button[disabled]:focus {
  background-color: #3adb76;
  color: #0a0a0a;
}

.button-group.success .button:hover,
.button-group.success .button:focus {
  background-color: #22bb5b;
  color: #0a0a0a;
}

.button-group.warning .button,
.button-group.warning .button.disabled,
.button-group.warning .button[disabled],
.button-group.warning .button.disabled:hover,
.button-group.warning .button[disabled]:hover,
.button-group.warning .button.disabled:focus,
.button-group.warning .button[disabled]:focus {
  background-color: #ffae00;
  color: #0a0a0a;
}

.button-group.warning .button:hover,
.button-group.warning .button:focus {
  background-color: #cc8b00;
  color: #0a0a0a;
}

.button-group.alert .button,
.button-group.alert .button.disabled,
.button-group.alert .button[disabled],
.button-group.alert .button.disabled:hover,
.button-group.alert .button[disabled]:hover,
.button-group.alert .button.disabled:focus,
.button-group.alert .button[disabled]:focus {
  background-color: #cc4b37;
  color: #fefefe;
}

.button-group.alert .button:hover,
.button-group.alert .button:focus {
  background-color: #a53b2a;
  color: #fefefe;
}

.button-group.hollow .button,
.button-group.hollow .button:hover,
.button-group.hollow .button:focus,
.button-group.hollow .button.disabled,
.button-group.hollow .button.disabled:hover,
.button-group.hollow .button.disabled:focus,
.button-group.hollow .button[disabled],
.button-group.hollow .button[disabled]:hover,
.button-group.hollow .button[disabled]:focus {
  background-color: transparent;
}

.button-group.hollow .button,
.button-group.hollow .button.disabled,
.button-group.hollow .button[disabled],
.button-group.hollow .button.disabled:hover,
.button-group.hollow .button[disabled]:hover,
.button-group.hollow .button.disabled:focus,
.button-group.hollow .button[disabled]:focus {
  border: 1px solid #1779ba;
  color: #1779ba;
}

.button-group.hollow .button:hover,
.button-group.hollow .button:focus {
  border-color: #0c3d5d;
  color: #0c3d5d;
}

.button-group.hollow.primary .button,
.button-group.hollow.primary .button.disabled,
.button-group.hollow.primary .button[disabled],
.button-group.hollow.primary .button.disabled:hover,
.button-group.hollow.primary .button[disabled]:hover,
.button-group.hollow.primary .button.disabled:focus,
.button-group.hollow.primary .button[disabled]:focus,
.button-group.hollow .button.primary,
.button-group.hollow .button.primary.disabled,
.button-group.hollow .button.primary[disabled],
.button-group.hollow .button.primary.disabled:hover,
.button-group.hollow .button.primary[disabled]:hover,
.button-group.hollow .button.primary.disabled:focus,
.button-group.hollow .button.primary[disabled]:focus {
  border: 1px solid #1779ba;
  color: #1779ba;
}

.button-group.hollow.primary .button:hover,
.button-group.hollow.primary .button:focus,
.button-group.hollow .button.primary:hover,
.button-group.hollow .button.primary:focus {
  border-color: #0c3d5d;
  color: #0c3d5d;
}

.button-group.hollow.secondary .button,
.button-group.hollow.secondary .button.disabled,
.button-group.hollow.secondary .button[disabled],
.button-group.hollow.secondary .button.disabled:hover,
.button-group.hollow.secondary .button[disabled]:hover,
.button-group.hollow.secondary .button.disabled:focus,
.button-group.hollow.secondary .button[disabled]:focus,
.button-group.hollow .button.secondary,
.button-group.hollow .button.secondary.disabled,
.button-group.hollow .button.secondary[disabled],
.button-group.hollow .button.secondary.disabled:hover,
.button-group.hollow .button.secondary[disabled]:hover,
.button-group.hollow .button.secondary.disabled:focus,
.button-group.hollow .button.secondary[disabled]:focus {
  border: 1px solid #fff;
  color: #fff;
}

.button-group.hollow.secondary .button:hover,
.button-group.hollow.secondary .button:focus,
.button-group.hollow .button.secondary:hover,
.button-group.hollow .button.secondary:focus {
  border-color: gray;
  color: gray;
}

.button-group.hollow.success .button,
.button-group.hollow.success .button.disabled,
.button-group.hollow.success .button[disabled],
.button-group.hollow.success .button.disabled:hover,
.button-group.hollow.success .button[disabled]:hover,
.button-group.hollow.success .button.disabled:focus,
.button-group.hollow.success .button[disabled]:focus,
.button-group.hollow .button.success,
.button-group.hollow .button.success.disabled,
.button-group.hollow .button.success[disabled],
.button-group.hollow .button.success.disabled:hover,
.button-group.hollow .button.success[disabled]:hover,
.button-group.hollow .button.success.disabled:focus,
.button-group.hollow .button.success[disabled]:focus {
  border: 1px solid #3adb76;
  color: #3adb76;
}

.button-group.hollow.success .button:hover,
.button-group.hollow.success .button:focus,
.button-group.hollow .button.success:hover,
.button-group.hollow .button.success:focus {
  border-color: #157539;
  color: #157539;
}

.button-group.hollow.warning .button,
.button-group.hollow.warning .button.disabled,
.button-group.hollow.warning .button[disabled],
.button-group.hollow.warning .button.disabled:hover,
.button-group.hollow.warning .button[disabled]:hover,
.button-group.hollow.warning .button.disabled:focus,
.button-group.hollow.warning .button[disabled]:focus,
.button-group.hollow .button.warning,
.button-group.hollow .button.warning.disabled,
.button-group.hollow .button.warning[disabled],
.button-group.hollow .button.warning.disabled:hover,
.button-group.hollow .button.warning[disabled]:hover,
.button-group.hollow .button.warning.disabled:focus,
.button-group.hollow .button.warning[disabled]:focus {
  border: 1px solid #ffae00;
  color: #ffae00;
}

.button-group.hollow.warning .button:hover,
.button-group.hollow.warning .button:focus,
.button-group.hollow .button.warning:hover,
.button-group.hollow .button.warning:focus {
  border-color: #805700;
  color: #805700;
}

.button-group.hollow.alert .button,
.button-group.hollow.alert .button.disabled,
.button-group.hollow.alert .button[disabled],
.button-group.hollow.alert .button.disabled:hover,
.button-group.hollow.alert .button[disabled]:hover,
.button-group.hollow.alert .button.disabled:focus,
.button-group.hollow.alert .button[disabled]:focus,
.button-group.hollow .button.alert,
.button-group.hollow .button.alert.disabled,
.button-group.hollow .button.alert[disabled],
.button-group.hollow .button.alert.disabled:hover,
.button-group.hollow .button.alert[disabled]:hover,
.button-group.hollow .button.alert.disabled:focus,
.button-group.hollow .button.alert[disabled]:focus {
  border: 1px solid #cc4b37;
  color: #cc4b37;
}

.button-group.hollow.alert .button:hover,
.button-group.hollow.alert .button:focus,
.button-group.hollow .button.alert:hover,
.button-group.hollow .button.alert:focus {
  border-color: #67251a;
  color: #67251a;
}

.button-group.clear .button,
.button-group.clear .button:hover,
.button-group.clear .button:focus,
.button-group.clear .button.disabled,
.button-group.clear .button.disabled:hover,
.button-group.clear .button.disabled:focus,
.button-group.clear .button[disabled],
.button-group.clear .button[disabled]:hover,
.button-group.clear .button[disabled]:focus {
  border-color: transparent;
  background-color: transparent;
}

.button-group.clear .button,
.button-group.clear .button.disabled,
.button-group.clear .button[disabled],
.button-group.clear .button.disabled:hover,
.button-group.clear .button[disabled]:hover,
.button-group.clear .button.disabled:focus,
.button-group.clear .button[disabled]:focus {
  color: #1779ba;
}

.button-group.clear .button:hover,
.button-group.clear .button:focus {
  color: #0c3d5d;
}

.button-group.clear.primary .button,
.button-group.clear.primary .button.disabled,
.button-group.clear.primary .button[disabled],
.button-group.clear.primary .button.disabled:hover,
.button-group.clear.primary .button[disabled]:hover,
.button-group.clear.primary .button.disabled:focus,
.button-group.clear.primary .button[disabled]:focus,
.button-group.clear .button.primary,
.button-group.clear .button.primary.disabled,
.button-group.clear .button.primary[disabled],
.button-group.clear .button.primary.disabled:hover,
.button-group.clear .button.primary[disabled]:hover,
.button-group.clear .button.primary.disabled:focus,
.button-group.clear .button.primary[disabled]:focus {
  color: #1779ba;
}

.button-group.clear.primary .button:hover,
.button-group.clear.primary .button:focus,
.button-group.clear .button.primary:hover,
.button-group.clear .button.primary:focus {
  color: #0c3d5d;
}

.button-group.clear.secondary .button,
.button-group.clear.secondary .button.disabled,
.button-group.clear.secondary .button[disabled],
.button-group.clear.secondary .button.disabled:hover,
.button-group.clear.secondary .button[disabled]:hover,
.button-group.clear.secondary .button.disabled:focus,
.button-group.clear.secondary .button[disabled]:focus,
.button-group.clear .button.secondary,
.button-group.clear .button.secondary.disabled,
.button-group.clear .button.secondary[disabled],
.button-group.clear .button.secondary.disabled:hover,
.button-group.clear .button.secondary[disabled]:hover,
.button-group.clear .button.secondary.disabled:focus,
.button-group.clear .button.secondary[disabled]:focus {
  color: #fff;
}

.button-group.clear.secondary .button:hover,
.button-group.clear.secondary .button:focus,
.button-group.clear .button.secondary:hover,
.button-group.clear .button.secondary:focus {
  color: gray;
}

.button-group.clear.success .button,
.button-group.clear.success .button.disabled,
.button-group.clear.success .button[disabled],
.button-group.clear.success .button.disabled:hover,
.button-group.clear.success .button[disabled]:hover,
.button-group.clear.success .button.disabled:focus,
.button-group.clear.success .button[disabled]:focus,
.button-group.clear .button.success,
.button-group.clear .button.success.disabled,
.button-group.clear .button.success[disabled],
.button-group.clear .button.success.disabled:hover,
.button-group.clear .button.success[disabled]:hover,
.button-group.clear .button.success.disabled:focus,
.button-group.clear .button.success[disabled]:focus {
  color: #3adb76;
}

.button-group.clear.success .button:hover,
.button-group.clear.success .button:focus,
.button-group.clear .button.success:hover,
.button-group.clear .button.success:focus {
  color: #157539;
}

.button-group.clear.warning .button,
.button-group.clear.warning .button.disabled,
.button-group.clear.warning .button[disabled],
.button-group.clear.warning .button.disabled:hover,
.button-group.clear.warning .button[disabled]:hover,
.button-group.clear.warning .button.disabled:focus,
.button-group.clear.warning .button[disabled]:focus,
.button-group.clear .button.warning,
.button-group.clear .button.warning.disabled,
.button-group.clear .button.warning[disabled],
.button-group.clear .button.warning.disabled:hover,
.button-group.clear .button.warning[disabled]:hover,
.button-group.clear .button.warning.disabled:focus,
.button-group.clear .button.warning[disabled]:focus {
  color: #ffae00;
}

.button-group.clear.warning .button:hover,
.button-group.clear.warning .button:focus,
.button-group.clear .button.warning:hover,
.button-group.clear .button.warning:focus {
  color: #805700;
}

.button-group.clear.alert .button,
.button-group.clear.alert .button.disabled,
.button-group.clear.alert .button[disabled],
.button-group.clear.alert .button.disabled:hover,
.button-group.clear.alert .button[disabled]:hover,
.button-group.clear.alert .button.disabled:focus,
.button-group.clear.alert .button[disabled]:focus,
.button-group.clear .button.alert,
.button-group.clear .button.alert.disabled,
.button-group.clear .button.alert[disabled],
.button-group.clear .button.alert.disabled:hover,
.button-group.clear .button.alert[disabled]:hover,
.button-group.clear .button.alert.disabled:focus,
.button-group.clear .button.alert[disabled]:focus {
  color: #cc4b37;
}

.button-group.clear.alert .button:hover,
.button-group.clear.alert .button:focus,
.button-group.clear .button.alert:hover,
.button-group.clear .button.alert:focus {
  color: #67251a;
}

.button-group.no-gaps .button {
  margin-right: -0.0625rem;
}

.button-group.no-gaps .button + .button {
  border-left-color: transparent;
}

.button-group.stacked,
.button-group.stacked-for-small,
.button-group.stacked-for-medium {
  flex-wrap: wrap;
}

.button-group.stacked .button,
.button-group.stacked-for-small .button,
.button-group.stacked-for-medium .button {
  flex: 0 0 100%;
}

.button-group.stacked .button:last-child,
.button-group.stacked-for-small .button:last-child,
.button-group.stacked-for-medium .button:last-child {
  margin-bottom: 0;
}

.button-group.stacked.expanded .button,
.button-group.stacked-for-small.expanded .button,
.button-group.stacked-for-medium.expanded .button {
  flex: 1 1 0px;
}

@media print, screen and (min-width: 40em) {
  .button-group.stacked-for-small .button {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
}

@media print, screen and (min-width: 64em) {
  .button-group.stacked-for-medium .button {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
}

@media print, screen and (max-width: 39.99875em) {
  .button-group.stacked-for-small.expanded {
    display: block;
  }

  .button-group.stacked-for-small.expanded .button {
    display: block;
    margin-right: 0;
  }
}

@media print, screen and (max-width: 63.99875em) {
  .button-group.stacked-for-medium.expanded {
    display: block;
  }

  .button-group.stacked-for-medium.expanded .button {
    display: block;
    margin-right: 0;
  }
}

.GUgbz {
  padding-top: 0.5rem;
  z-index: 5000;
  background-color: #fbfeff;
  height: 2.5rem;
  position: sticky;
  top: 0;
}

.GUgbz {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.GUgbz [role="radiogroup"] {
  margin-inline-end: 1ch;
}

.GUgbz [role="radiogroup"] label {
  display: inline-block;
  margin-inline-start: 1ch;
  font-size: 1rem;
}

.GUgbz [role="radiogroup"] input {
  margin: 0 0.2ch;
  vertical-align: middle;
}

.GUgbz > span,
.GUgbz > div {
  line-height: 1.9;
}

.GUgbz {
  padding-top: 0.5rem;
  z-index: 5000;
  background-color: #fbfeff;
  height: 2.5rem;
  position: sticky;
  top: 0;
}

.sliding-panel .GUgbz {
  top: 0;
}

.GUgbz {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.GUgbz [role="radiogroup"] {
  margin-inline-end: 1ch;
}

.GUgbz [role="radiogroup"] label {
  display: inline-block;
  margin-inline-start: 1ch;
  font-size: 1rem;
}

.GUgbz [role="radiogroup"] input {
  margin: 0 0.2ch;
  vertical-align: middle;
}

.GUgbz > span,
.GUgbz > div {
  line-height: 1.9;
}

.main-search {
  display: flex;
}

.main-search > input,
.main-search > button {
  margin: 0;
}

.main-search .button {
  border: none;
}

.main-search__input-container {
  display: flex;
  position: relative;
  width: 100%;
}

.main-search__input-container input {
  margin: 0;
  padding-inline-end: var(--input-padding, 0ch);
  min-inline-size: calc(var(--input-padding, 0ch) + 2ch);
  border-radius: 6px;
}

.data-loader__loading {
  text-align: center;
}

.data-table,
th,
td {
  border: 0.5px solid gray;
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

.data-table tbody td {
  background: white;
  border: 0.5px solid gray;
  border-collapse: collapse;
}

.data-table input[type="checkbox"] {
  margin: 0;
}

.data-table thead {
  background-color: #773742;
}

.data-table th {
  width: auto;
  border: 0;
  padding: 0.25rem 0.5rem;
  font-weight: 300;
  white-space: nowrap;
  color: var(--fr--color-sky-white);
  background-color: #773742;
  top: 0;
  z-index: 2000;
  position: sticky;
}

.data-table th.data-table__header-cell--sortable {
  cursor: pointer;
}

.data-table th.data-table__header-cell--sortable:after {
  content: "▲";
  display: inline-block;
  font-size: 0.6em;
  margin: 0 0.8em;
  opacity: 0.7;
  transition: transform ease-out 0.5s;
  transform: rotateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .data-table th.data-table__header-cell--sortable:after {
    transition-duration: 0s;
  }
}

.data-table th.data-table__header-cell--sortable:hover:after {
  opacity: 1;
  transform: rotateX(0.5turn);
}

.data-table
  th.data-table__header-cell--sortable.data-table__header-cell--ascend:after {
  opacity: 1;
  transform: rotateX(0);
}

.data-table
  th.data-table__header-cell--sortable.data-table__header-cell--descend:after {
  opacity: 1;
  transform: rotateX(0.5turn);
}

.data-table th.data-table__header-cell--checkbox {
  width: 1.5rem;
  padding: 0;
}

.data-table th.data-table__header-cell--checkbox input[type="checkbox"] {
  margin-top: 0.5em;
}

.data-table tr:nth-of-type(2n) {
  background-color: var(--bg-subtle);
}

.data-table td {
  padding: 0.5rem;
  border: 0;
  vertical-align: top;
  border-bottom: 1px solid var(--fr--color-sky-white);
}

.group-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

.group-tag--g1 {
  color: #1f4e45;
  background: #dbf1ea;
}

.group-tag--g2 {
  color: #5b4b1b;
  background: #f6ebc6;
}

.group-tag--g3 {
  color: #5b2f1f;
  background: #f8ddd0;
}

.group-tag--g4 {
  color: #3f3f5e;
  background: #e5e3f6;
}

.group-tag--g4a {
  color: #20486b;
  background: #d7e9f8;
}

.group-tag--g4b {
  color: #5a2747;
  background: #f2dced;
}

.group-tag--other {
  color: #3f3f3f;
  background: #e9e9e7;
}

.data-table .checkbox-cell {
  position: relative;
  padding: 0;
}

.data-table .checkbox-cell > input[type="checkbox"] {
  margin: 0.9em 0.75ch 0 1.25ch;
}

.data-table .checkbox-cell > input[type="checkbox"] + label {
  position: absolute;
  inset: 0;
  margin: 0;
  border-left: 1ch solid var(--fr--color-sea-blue);
  opacity: 0;
  transition: opacity ease-in-out 0.1s;
}

.data-table .checkbox-cell > input[type="checkbox"]:hover + label,
.data-table .checkbox-cell > input[type="checkbox"]:focus + label {
  opacity: 0.2;
}

.data-table .checkbox-cell > input[type="checkbox"]:checked + label {
  opacity: 1;
}

.data-table .expandable-list button,
.data-table .expandable-list a {
  white-space: nowrap;
}

.data-row {
  height: 40px;
}

.spacer-row td {
  padding: 0;
  border: 0;
  height: 0;
  background: transparent;
}

/* Sidebar content styling */
.expandable-list {
  margin-bottom: 0;
}

.aside-content {
  color: #fff;
}

.aside-content ul {
  margin: 0;
  padding-left: 0.125rem;
}

.aside-content .aside-header {
  color: #fff;
  font-weight: 800;
  margin-bottom: 0.125rem;
  padding-left: 0;
}

.aside-content .aside-header + ul > li {
  margin-bottom: 0;
}

.aside-content > ul > li {
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 0;
  position: relative;
}

.aside-content > ul > li a {
  color: #fff;
  font-weight: initial;
  cursor: pointer;
  display: block;
  width: 100%;
  line-height: 1.25;
  text-align: left;
  padding: 0.125rem 0.3333333333rem;
  padding-inline-start: 2ch;
  padding-inline-end: 2ch;
}

/* --- Footer ------------------------------------------------- */

footer {
  border-top: 1px solid #ddd;
  background: var(--bg-subtle);
  min-height: 25px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  max-width: var(--max-w);
  margin: 0 auto;
}

footer a {
  color: var(--green);
}
footer a:hover {
  text-decoration: underline;
}

.S9Gr5 {
  display: inline-flex;
}

.BqBnJ {
  flex: 1;
}

.z6fUI {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

@media (max-width: 980px) {
  .database-layout {
    grid-template-columns: 1fr;
  }

  .database-aside {
    position: static;
    max-height: none;
    margin-bottom: 1rem;
  }
}