/* neues Seitenlayout */
/* allgemeine Styleangaben */
:root {
  --brenda-blue: #191970;
  --brenda-blue-hover: hsl(240, 63.5%, 40%);
  --brenda-red: hsl(0, 100%, 40.2%);
  --brenda-red-hover: hsl(0, 100%, 45%);
  --box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  --dsmz-dark-blue: hsl(212, 23.8%, 24.7%);
  --dsmz-blue: hsl(220.5, 52.9%, 43.3%);
  --dsmz-blue: hsl(220.5, 52.9%, 43.3%);
  --dsmz-red: hsl(355.4, 74.9%, 40.6%);
  --dsmz-green: hsl(133.2, 74.7%, 35.7%);
  --shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
  --border-radius: 2px;
  --border-color: #afafaf;
  --border: 1px solid var(--border-color);
  --surface: rgb(249, 249, 249);
}

@font-face {
  font-family: "Rubik";
  src: url("../assets/fonts/Rubik-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-style: italic;
  src: url("../assets/fonts/Rubik-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-weight: 500;
  src: url("../assets/fonts/Rubik-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-weight: 500;
  font-style: italic;
  src: url("../assets/fonts/Rubik-MediumItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-weight: 600;
  src: url("../assets/fonts/Rubik-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-weight: 600;
  font-style: italic;
  src: url("../assets/fonts/Rubik-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-weight: 300;
  src: url("../assets/fonts/Rubik-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-weight: 300;
  font-style: italic;
  src: url("../assets/fonts/Rubik-LightItalic.ttf") format("truetype");
}

*,
*:after,
*:before {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 1rem;
  /*overflow-x: hidden;*/
}

body {
  font-family: "Rubik", "Roboto", Helvetica, Arial, sans-serif;
  /* font-family: Helvetica, Arial, sans-serif; */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Rubik", "Roboto", Helvetica, Arial, sans-serif;
  color: #000032;
  font-weight: 700;
  margin: 0;
  margin-top: 2rem;
  margin-bottom: 0.5rem;

  &:first-of-type {
    margin-top: 0;
  }
}

h1 {
  font-size: 1.75rem;
  line-height: 1.3;
}

h2 {
  font-size: 1.55rem;
  line-height: 1.35;
}

h3 {
  font-size: 1.4rem;
  line-height: 1.4;
}

h4 {
  font-size: 1rem;
  line-height: 1.4;
}

:is(h1, h2, h3, h4, h5, h6).center {
  display: flex;
  align-items: center;
  justify-content: center;
}

dt {
  font-weight: 700;
}
dd {
  margin-left: 2rem;
}
p {
  line-height: 1.5rem;
}

abbr {
  color: var(--dsmz-blue);
  text-decoration: underline;
  text-decoration-style: dashed;
}

hr {
  width: 100%;
  border: none;
  border-top: 1px solid #ccc;
}

#wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
}

a,
a:link,
a:visited,
a:active {
  cursor: pointer;
}

img {
  vertical-align: middle;
  border: 0px;
}
img.inactive {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

small,
.small {
  font-size: 0.8rem;
}
.big {
  font-size: 1.2rem;
}
.bold {
  font-weight: bold;
}
.red {
  color: #cc0000;
}
.brendablue {
  color: #191970;
}
.redbold {
  margin: 0 auto;
  display: table;
  color: #cc0000;
  font-weight: bold;
  text-align: center;
}
.green {
  color: #009900;
}
.strike {
  text-decoration: line-through;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}
.no-bullets {
  list-style-type: none;
}

#flatcontent #bli {
  margin-top: 10px;
}

.card {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

/* header */
#header {
  background: #eeeeee;
  color: #000023;
  min-height: 7rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  display: grid;
  padding: 0;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
}

.header-search__input {
  border: 1px solid #333;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  padding: 0.25rem;
  line-height: 0.9rem;
}

.header--banner {
  grid-column: 1 / -1;
  background-color: var(--dsmz-blue);
  color: white;
  padding: 0.75rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
}
.header--banner a {
  color: #eeeeee !important;
  text-decoration: underline !important;
}
.header--banner a:hover {
  color: #cecece !important;
  text-decoration: none !important;
}

.header-search__submit {
  background-color: var(--brenda-blue) !important;
  border: 1px solid #333;
  border-radius: 0.25rem;
  color: #fff;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.header-search__submit:hover {
  background-color: #2b2b88;
}

#header a:link {
  color: #191970;
  text-decoration: none;
}
#header a:visited {
  color: #191970;
  text-decoration: none;
}
#header a:hover {
  color: #be0000;
}
#header a:active {
  color: #000023;
  text-decoration: none;
}
.header--logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header--logo img {
  height: 50px;
}

.header--login {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  grid-column: 1 / -1;
}

.header--nav {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: end;
  gap: 0.5rem;
  padding: 0.5rem;
}

.header--nav ul {
  list-style-type: none;
  display: flex;
  gap: 0.8rem;
  margin: 0;
}

@media (max-width: 75rem) {
  #header {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto, 3);
  }
  .header--nav {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
  }
}

/* Content wrapper */

/* navigation */
/* normale Navigation auf 0px, da zur Zeit kein Menue */
#navigation {
  width: 0px;
  background-color: #ffffff;
  padding: 5px;
  color: #191970;
  float: left;
}
#navigation ul {
  list-style-type: none;
  padding: 0px;
}
#navigation span {
  position: absolute;
  left: 55px;
  vertical-align: middle;
}
#navigation img {
  display: inline;
}
#navigation a:link {
  color: #191970;
  text-decoration: none;
}
#navigation a:visited {
  color: #191970;
  text-decoration: none;
}
#navigation a:hover {
  color: var(--brenda-red);
}
#navigation a:active {
  color: #191970;
  text-decoration: none;
}
#navigation ul {
  list-style-type: none;
  padding: 0px;
}
.flat-wrapper {
  width: 100%;
  padding: 2rem;
}

.flat-wrapper .columns > :first-child {
  align-self: start;
}
.flat-wrapper .columns {
  align-items: center;
}

#flatnav {
  position: sticky;
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem 0.5rem 0.5rem;
  /*max-width: 30ch;
  width: 100%;*/
  min-width: 17rem;
  font-size: 0.9rem;
  top: 0px;
  align-self: flex-start;
}
#flatnav ul,
#catpreview ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
#flatnav .hidden {
  visibility: hidden;
  display: none;
}
#linklist .box .navcat {
  display: grid;
  grid-template-columns: min-content auto min-content;
  align-items: center;
  gap: 0.25rem;
  padding-inline: 0.25rem;
}
#flatnav .box,
#catpreview .box {
  border: 1px solid #333333;
  padding: 2px;
  background-color: white;
}
#flatnav .blueback {
  background-color: #191970;
  color: #ffffff;
  font-weight: bold;
  margin-top: 0.5rem;
}
#flatnav .blueback a:link {
  color: #ffffff;
  text-decoration: none;
}
#flatnav .blueback a:visited {
  color: #ffffff;
  text-decoration: none;
}
#flatnav .blueback a:hover {
  color: #cccccc;
}
#flatnav .blueback a:active {
  color: #ffffff;
  text-decoration: none;
}
#flatnav img {
  display: inline;
}
#flatnav a:link,
#catpreview a:link {
  color: var(--brenda-blue);
  text-decoration: none;
}
#flatnav a:visited,
#catpreview a:visited {
  color: var(--brenda-blue);
  text-decoration: none;
}
#flatnav a:hover,
#catpreview a:hover {
  color: #cc0000;
}
#flatnav a:active,
#catpreview a:active {
  color: var(--brenda-blue);
  text-decoration: none;
}
#desccontent #datafield {
  color: #000000;
  width: 75%;
  float: right;
  padding-right: 5px;
  background-color: #ffffff;
  text-align: justify;
}
#desccontent #datafield a {
  text-align: justify;
  font-weight: bold;
  text-decoration: none;
}
#desccontent #datafield #back {
  text-align: right;
  text-decoration: none;
}
#desccontent h3 {
  width: 75%;
  float: right;
}
#descnav {
  width: 25%;
  padding: 5px;
  float: left;
  font-weight: bold;
}
#descnav a {
  clear: both;
  width: 23%;
  padding: 5px;
  float: left;
  color: #191970;
  font-weight: bold;
  text-decoration: none;
}
#descback {
  clear: both;
}
#descback a {
  text-decoration: none;
} /* content */
#content {
  color: #000000;
  margin: 0.5rem auto;
  width: 100%;
  max-width: 80rem;
  padding: 1rem 0.5rem;
}
#largecontent {
  color: #000000;
  max-width: 100rem;
  margin: 0.5rem auto;
  width: 100%;
  padding: 1rem 0.5rem;
}
#smallcontent {
  color: #000000;
  max-width: 60rem;
  margin: 0.5rem auto;
  width: 100%;
  padding: 1rem 0.5rem;
}
/* content for flat */
#flatcontent {
  text-align: left;
  display: flex;
  word-wrap: break-word;
}

#flatcontent.taxtree {
  flex-wrap: wrap;
}

.alignleft {
  text-align: left;
}
.alignright {
  text-align: right;
}
.center {
  text-align: center;
}
#content .search {
  width: 100%;
  max-width: 55rem;
  margin: 0 auto;
  display: grid;
}

.searchterm {
  text-align: center;
  display: flex;
  position: relative;
}
.searchterm .search__input {
  width: 100%;
  max-width: 100%;
}

.button,
.search__input,
input,
.search__button {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.5rem;
  margin: 0.5rem;
}

input[type="submit"] {
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #ddd;
  box-shadow: 0.2rem 0.2rem 5px #00000066;
  cursor: pointer;
}

select {
  background: white;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #333;
  border-radius: 0.25rem;
  padding: 0.5rem;
  padding-right: 1.5rem;
  position: relative;
  max-width: 100%;
}

select:not([size]) {
  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+)
      no-repeat 100% 50%,
    white;
}

/*input:is(:disabled, :read-only) {*/
input:disabled, input:readonly {
  background-color: #eeeeee;
  color: #666666;
  border-color: #555555;
}

:is(.button, button, .search__button) {
  background-color: #ccc;
  padding: 0.5rem 1rem;
}
:is(.button, button, .search__button):not(:disabled):hover {
  background-color: #ddd;
  box-shadow: 0.2rem 0.2rem 5px #00000066;
  cursor: pointer;
}

.search__input {
  width: 100%;
  max-width: 20rem;
}

.search__button {
  cursor: pointer;
}

.search__button:disabled {
  color: #999;
  background-color: #ccc;
  border: 1px solid #999;
  cursor: default;
}

.search__button--small {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.dynamicSearch {
  text-align: center;
}

.search__select {
  border: 1px solid #333;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin: 0.5rem;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

form:valid .search__button--red:not(:disabled) {
  background-color: #be0000 !important;
  border: 1px solid #990000 !important;
  color: #fff !important;
  font-weight: 700;
}
form:valid .search__button--red:not(:disabled):hover {
  color: white;
  background-color: #990000 !important;
  cursor: pointer;
}

#searchtermbox #dynamicSearch input {
  margin: 5px;
}

#content .search #dynamicSearch {
  margin: 5px;
}

:is(#content, #largecontent) :is(a, a:link, a:visited) {
  color: #191970;
  text-decoration: none;
}
:is(#content, #largecontent) a:hover {
  color: #191970;
  text-decoration: underline;
}
:is(#content, #largecontent) a:active {
  color: #191970;
  text-decoration: none;
}
#flatcontent a:link {
  color: #191970;
  text-decoration: none;
}
#flatcontent a:visited {
  color: #191970;
  text-decoration: none;
}
#flatcontent a:hover {
  color: #cc0000;
  text-decoration: none;
}
#flatcontent a:active {
  color: #191970;
  text-decoration: none;
}
.table,
.equal {
  display: inline-block;
  border-collapse: collapse;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

.equal .cell,
.equal .header {
  padding: 0.4rem;
}

.cent {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}
.nocontent {
  caption-side: bottom;
  display: table-caption;
  text-align: center;
  border: 1px solid #333333;
  border-top: 0px;
}
.nocontent_disease {
  caption-side: bottom;
  text-align: center;
  border-top: 0px;
}
/*#content .row {
    display: table-row;
    text-align: left;
    border: 1px solid #666666;
}*/
.row:nth-child(even) {
  display: table-row;
  text-align: left;
  border: 1px solid #666666;
  background-color: var(--surface);
}
.row:nth-child(odd) {
  display: table-row;
  text-align: left;
  border: 1px solid #666666;
  background-color: white;
}

/* .rgrey1 {
  background-color: #fff !important;
}

.rgrey2 {
  background-color: var(--surface) !important;
} */

.cell {
  display: table-cell;
  border: 1px solid #333333;
  padding: 3px;
  vertical-align: middle;
}

.yellowrow {
  display: table-row;
  text-align: left;
  border: 1px solid #666666;
  background-color: #dddd00;
}

.row .header {
  display: table-cell;
  text-align: left;
  border: 1px solid #333333;
  background-color: #191970;
  color: #ffffff;
}
.row .header a:link {
  color: #ffffff;
}

.row #author_cell {
  float: right;
  margin-left: 10px;
}

.row #headline_cell {
  float: left;
}

#headline_cell a:visited {
  color: #ffffff;
  text-decoration: underline;
}

.row #headline_cell a:link {
  color: #ffffff;
  text-decoration: underline;
}
.row #news_cell a:visited {
  text-decoration: underline;
}

.row #news_cell a:link {
  text-decoration: underline;
}
#content .colums {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
#content .colums .row .cell {
  width: 275px;
  display: table-cell;
  text-align: left;
  border: 1px solid #333333;
  padding: 0px;
}
#wrapper #content .equal .row .cell_no a {
  text-decoration: underline;
}

.blueback {
  text-align: left;
  background-color: #191970;
  color: #ffffff;
  padding: 3px;
  margin: 0px;
}
.greyback {
  text-align: left;
  background-color: #cdcdcd;
  color: #333333;
  padding: 3px;
  margin: 0px;
}
.kenda_title {
  width: 80%;
  text-align: center;
  margin-left: 100px;
  margin-right: 100px;
  font-weight: bold;
}
.kenda_reference {
  width: 80%;
  text-align: center;
  margin-left: 100px;
  margin-left: 100px;
  font-style: italic;
}
.kenda_abstract {
  width: 80%;
  text-align: justify;
  margin-left: 100px;
  margin-left: 100px;
}
.kenda_legend {
  width: 80%;
  text-align: center;
  margin-left: 100px;
  margin-left: 100px;
}

.wordmap_legend_flatfile {
  position: absolute;
  bottom: 410px;
  margin-left: 50%;
  display: block;
  float: left;
  overflow: hidden;
  width: 50%;
  z-index: 2;
}
ul.wordmap_list_flatfile {
  list-style: outside none none;
  margin: 0;
  position: relative;
  padding: 0;
}
.wordmap_legend_flatfile span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid black;
}

.wordmap_legend {
  position: absolute;
  bottom: 1px;
  margin-left: 1%;
  display: block;
  float: left;
  overflow: hidden;
  width: 50%;
  z-index: 2;
}

ul.wordmap_list {
  list-style: outside none none;
  margin: 0;
  position: relative;
  padding: 0;
}
.wordmap_legend span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid black;
}

.taxtree-box {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
}

.box {
  text-align: left;
  border: 1px solid #333333;
  margin-bottom: 8px;
  background-color: #ffffffcc;
}
.box div {
  padding: 3px;
}
#content .searchtabs {
  padding: 0px;
  margin: 0px;
}
#content .searchtabs ul {
  margin: 0px;
  padding: 0px;
}
#content .searchtabs li {
  margin: 0px;
  padding: 0 10px 0 10px;
  list-style-type: none;
  float: left;
}
#content .searchtabs li.unselected {
  background-color: #999999;
  list-style-type: none;
  color: #ffffff;
  border: 1px solid #333333;
  border-collapse: collapse;
}
#content .searchtabs a:link {
  text-decoration: none;
  color: #ffffff;
}
#content .searchtabs a:visited {
  text-decoration: none;
  color: #ffffff;
}
#content .searchtabs a:hover {
  text-decoration: none;
  color: #ffffff;
}
#content .searchtabs a:active {
  text-decoration: none;
  color: #ffffff;
}
#content .searchtabs li.selected {
  font-weight: bold;
  background-color: #ffffff;
  border: 1px solid #333333;
  border-bottom: 1px solid #ffffff;
}
#content .searchtabs li:last-child {
  list-style-type: none;
  margin: 0px;
  padding: 0 10px 0 10px;
  border: 1px solid #ffffff;
  border-bottom: 1px solid #333333;
  float: none;
}
#content .searchtabs .form {
  text-align: left;
  padding: 10px;
  padding-bottom: 0px;
  border-left: 1px solid #333333;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
}
#content ul.float {
  overflow: hidden;
  padding: 2px;
  margin: 0px;
}

#formbox label {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  padding: 0px;
  margin: 0px;
  padding-right: 5px;
  text-align: right;
}
#formbox label.top {
  vertical-align: top;
}
#formbox option {
  vertical-align: middle;
}

#content ul.float li {
  float: left;
  list-style-type: none;
  padding: 1px;
}
#content ul.float:lastchild {
  clear: both;
}
#content .floatleft {
  overflow: hidden;
  float: left;
  padding: 0px;
  margin-bottom: 5px;
  margin-right: 5px;
}
#content .floatleft:lastchild {
  clear: both;
}
#content .brendahelp {
  width: 350px;
  font-size: 0.9rem;
  text-align: left;
  margin: 2px;
  padding: 3px;
}
#content .brendahelp img {
  float: left;
  padding-right: 10px;
}
#content .searchreport {
  border: 1px solid #333333;
  width: 200px;
  font-size: 0.9rem;
  text-align: left;
  padding: 0px;
}
#content .help {
  clear: left;
}
#content .help #menu {
  width: 95%;
  float: right;
  font-weight: bold;
}
#content .help #image {
  float: left;
  clear: right;
}
#help1 {
  padding-bottom: 70px;
  padding-left: 1%;
  clear: both;
  text-align: justify;
  padding-right: 1%;
}
#help1 #help_image {
  text-align: center;
}
#help1 #label0 {
  font-weight: bold;
  color: red;
}
#help1 #label1 {
  width: 90%;
  float: right;
  font-weight: bold;
  color: red;
}

#help1 #label2 {
  width: 55%;
  float: right;
  font-weight: bold;
  color: red;
}
#abbreviations {
  clear: left;
}
#abbreviations #abb {
  float: left;
  clear: right;
  font-weight: bold;
}
#abbreviations #word {
  width: 90%;
  float: right;
}
#abbreviations a {
  width: 40%;
  float: right;
}
.featurecontainer {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
}

.placeholder-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-size: 2rem;
  font-weight: 900;
  gap: 2rem;
}

.newscontainer {
  max-width: 55rem;
  margin: 0 auto;
}

.feature-card ul {
  list-style-type: none;
  margin: 0;
  padding-left: 1rem;
  li {
    padding-bottom: 0.5rem;
  }
}

.newsbox {
  grid-column: 1 / -1;
}

.preview-container {
  margin-bottom: 1rem;
}

.featurecontainer .newsbox .preview-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choicelist ul {
  list-style-type: none;
  color: red;
}

.choicelist ul a {
  color: #191970;
}

.choicelist {
  font-size: 120%;
}

.announcements {
  color: red;
}

.show_when_active {
  visibility: hidden;
}

.user_data .user_input label {
  display: inline-block;
  width: 14%;
}

.user_change_password .user_input label {
  display: inline-block;
  width: 15%;
}

.user_change_password .input_button {
  margin-left: 27%;
}

.user_input input {
  margin-left: 2%;
}

.user_correct {
  padding: 5px;
  font-weight: bold;
}

.user_data {
  width: 30%;
  float: left;
  margin-left: 20%;
}
.user_change_password {
  width: 50%;
  float: left;
  margin-left: 20%;
}
.user_actions {
  margin-left: 50%;
}

.userdata-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  gap: 2rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.userdata-data,
.userdata-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: fit-content;
  width: fit-content;
}

:is(.userdata-data, .userdata-actions) *:first-child {
  grid-column: 1/3;
}

:is(.userdata-data, .userdata-actions) *:not(button) {
  display: flex;
  align-items: center;
}

.user_actions input {
  font-weight: bold;
  margin: 5px;
}

.user_action {
  padding: 5px;
}

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}
#footer {
  background-color: #000032;
  color: #a2a2c9;
  padding: 1rem;
  margin-top: 2rem;
}

#footer a {
  color: #ccc;
  text-decoration: none;
}
#footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer__image {
  position: relative;
  z-index: 1;
  opacity: 0.6;
  filter: grayscale(1) contrast(50%);
  transition: all 300ms ease-in-out;
  max-width: 250px;
  max-height: 100px;
  padding: 0.5rem;
}

.footer__image:hover {
  z-index: 1;
  opacity: 1;
  filter: grayscale(0) contrast(100%);
}

.footer-columns {
  width: 100%;
  max-width: 60rem;
  display: grid;
  /* grid-auto-flow: column;
  grid-template-columns: repeat(5, auto);
  grid-template-rows: auto auto;
  justify-content: space-evenly; */
  --min: 20ch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));

  margin: 0 auto;
  gap: 1rem;
}
.footer-server {
  font-size: 0.7rem;
  color: white;
  opacity: 0.4;
  text-align: right;
}
.footer-logos {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding-block: 1rem;
}

.footer-column ul {
  list-style: none;
  padding-left: 0.5rem;
}
.footer-social {
  font-size: 1.5rem;
  color: #ffffff;
  padding: 0.5rem;
}
.footer-social a {
  font-size: 1.2rem;
  color: #ffffff;
  padding: 0.5rem;
}

/* Training/tutorial videos */
.tutorial-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.tutorial-video {
  width: 300px;
  height: auto;
  display: flex;
}

/* SAB */
.sab-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.sab-card {
  border: 1px solid #333;
  border-radius: 0.25rem;
  display: grid;
  padding: 1rem;
  background-color: #fafafa;
}

/* Team */
.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1rem;
  padding-bottom: 1rem;
}
.associate-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-bottom: 1rem;
}

@media screen and (max-width: 830px) {
  .associate-cards {
    grid-template-columns: repeat(1, 1fr);
  }
}
.team-card {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  max-width: 1fr;
}

.team-card__name {
  font-size: 1.1rem;
  color: var(--brenda-blue);
  font-weight: bold;
  font-style: italic;
  display: flex;
  align-items: center;
}

.team-card__position {
  font-size: 0.8rem;
  color: var(--brenda-red);
  font-weight: 100;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.team-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.team-card__photo {
  display: flex;
  justify-content: right;
  height: 100%;
  padding: 0;
  margin: 0;
  width: 150px;
  /* border: 1px solid red; */
}
.team-card__cv-link:hover {
  cursor: pointer;
  color: var(--brenda-blue-hover);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.team-card__content div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.former-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* Links for livesearch */
.LSRow {
  height: 2rem;
}
.LSRow a {
  width: 100%;
  height: 100%;
  display: inline-block;
  display: flex;
  align-items: center;
  padding-inline: 1rem;
}
.LSRow a:hover {
  background-color: #ffffff66;
}

#content .searchtabs .LSRow a:link {
  color: var(--brenda-blue);
  text-decoration: none;
}
#content .searchtabs .LSRow a:visited {
  color: var(--brenda-blue);
  text-decoration: none;
}
#content .searchtabs .LSRow a:hover {
  color: var(--brenda-red);
}
#content .searchtabs .LSRow a:active {
  color: var(--brenda-blue);
  text-decoration: none;
}

#LSResult {
  position: absolute;
  left: 0;
  top: 3rem;
  overflow: auto;
  background-color: white;
  border: 1px solid #333;
  display: none;
  background-color: #eee;
  text-align: left;
  z-index: 5;
  padding: 0.5rem 0;
}

/* special fields */
pre {
  border: 1px solid #333;
  background-color: #dddddd;
  padding-left: 5px;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}
figure {
  display: inline-block;
  color: #000;
  margin: 15px;
  vertical-align: middle;
}
figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: #000;
  font-weight: normal;
}
.anatomy {
  background-color: #ffffcc;
  color: #000000;
}
.others {
  background-color: #f0ecf4;
  color: #000000;
}
.development {
  background-color: #d0e7ea;
  color: #000000;
}
.genomic_and_proteomic {
  background-color: #ffece6;
  color: #000000;
}
.phenotype {
  background-color: #e4f3dd;
  color: #000000;
}
.chemical {
  background-color: #c8ffd0;
  color: #000000;
}

.anatomyrow {
  background-color: #93441a;
  color: #ffffff;
  font-weight: bold;
}
.othersrow {
  background-color: #4c0064;
  color: #ffffff;
  font-weight: bold;
}
.developmentrow {
  background-color: var(--brenda-blue);
  color: #ffffff;
  font-weight: bold;
}
.genomic_and_proteomicrow {
  background-color: var(--brenda-red);
  color: #ffffff;
  font-weight: bold;
}
.phenotyperow {
  background-color: #6b7268;
  color: #ffffff;
  font-weight: bold;
}
.chemicalrow {
  background-color: #125d0f;
  color: #ffffff;
  font-weight: bold;
}
.categoryrow {
  background-color: #ffffff;
  font-weight: bold;
}

optgroup.Archaea {
  background-color: #f6971a;
  color: #ffffff;
}
option.Archaea {
  background-color: #ffffcc;
  color: #000000;
  font-weight: normal;
}

optgroup.Bacteria {
  background-color: #4c0064;
  color: #ffffff;
}
option.Bacteria {
  background-color: #f0ecf4;
  color: #000000;
  font-weight: normal;
}

optgroup.Eukaryota {
  background-color: var(--brenda-blue);
  color: #ffffff;
}
option.Eukaryota {
  background-color: #d0e7ea;
  color: #000000;
  font-weight: normal;
}

optgroup.other_sequences {
  background-color: var(--brenda-red);
  color: #ffffff;
}
option.other_sequences {
  background-color: #ffece6;
  color: #000000;
  font-weight: normal;
}

optgroup.Viroids {
  background-color: #6b7268;
  color: #ffffff;
}
option.Viroids {
  background-color: #e4f3dd;
  color: #000000;
  font-weight: normal;
}

optgroup.Viruses {
  background-color: #125d0f;
  color: #ffffff;
}
option.Viruses {
  background-color: #c8ffd0;
  color: #000000;
  font-weight: normal;
}
.seq {
  font-family: monospace;
}
#tax_tree,
#ec_explorer,
#ontology {
  padding: 1rem;
}
#ont_tree {
  padding: 3px;
}
#tax_details,
#ec_details,
#ont_details {
  width: 220px;
  top: 0;
  position: sticky;
  display: flex;
  flex-direction: column;
  padding: 5px;
  align-self: flex-start;
}

#ont_details div {
  background-color: #ffffffcc;
}
#ont_details div.greyback {
  background-color: #cccccccc;
}

#tax_details .syns {
  overflow: auto;
  max-height: 450px;
}
.taxtree,
.ectree,
.ontology {
  padding-left: 0px;
  margin-left: 0px;
  text-align: left;
}
.taxtree,
.ectree,
.ontology img {
  padding-left: 0px;
  margin-left: 0px;
  vertical-align: middle;
}

#content #hiddenhelp {
  text-align: left;
  border: 1px solid #333333;
  margin-top: 3px;
}
#content .hidden {
  visibility: hidden;
  display: none;
}
.featurebox .hidden {
  visibility: hidden;
}

.inline {
  display: inline-block;
  margin: 0 auto;
  text-align: left;
}
.markedred {
  background-color: #dd0000;
}
.markedyellow {
  background-color: #dddd00;
}
.markedgreen {
  background-color: #00cc00;
}
.amenda a:link {
  color: #2070a0 !important;
  text-decoration: none;
}
.amenda a:visited {
  color: #2070a0 !important;
  text-decoration: none;
}
.amenda a:hover {
  color: #2070a0 !important;
}
.amenda a:active {
  color: #2070a0 !important;
  text-decoration: none;
}
.frenda a:link {
  color: #059bce !important;
  text-decoration: none;
}
.frenda a:visited {
  color: #059bce !important;
  text-decoration: none;
}
.frenda a:hover {
  color: #059bce !important;
}
.frenda a:active {
  color: #059bce !important;
  text-decoration: none;
}
/* fixed width for div tables */
.ec_number {
  width: 150px;
}
.recommended_name {
  width: 300px;
}

.category {
  width: 150px;
}
.ack {
  clear: left;
  text-align: justify;
}
.ack_logo {
  padding-left: 20px;
  text-align: right;
}
/* Tooltip */
#tooltip {
  border: 1px solid #666666;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0px;
  padding: 3px;
  background: #ffffff;
  color: #666666;
  font-size: 0.8rem;
  visibility: hidden;
  z-index: 999;
}
#tooltip ul {
  padding: 0px;
  list-style-type: none;
}
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, auto));
  gap: 0 4rem;
}

#wordmap {
  border: 1px solid #666666;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0px;
  padding: 3px;
  background: #ffffff;
  color: #666666;
  font-size: 0.8rem;
  visibility: hidden;
  z-index: 999;
}

.wordmapcontainer .hidden {
  visibility: hidden;
  width: 50%;
}

.wordmapcontainer .wordmap_org {
  visibility: visible;
  height: 400px;
  margin: 0 auto;
}
.taxtreecontainer {
  visibility: visible;
  width: 49%;
}

.organism_summary {
  margin: auto;
}

.halfright {
  width: 50%;
  float: right;
}

.halfleft {
  width: 50%;
  float: left;
}

.half {
  width: 50%;
  position: relative;
}
.right {
  text-align: right;
}

.bottom {
  position: absolute;
  bottom: 40px;
  padding: 5px;
  margin-left: 0px;
}

.notopborder {
  border-top-style: hidden;
}

.noleftborder {
  border-left-style: hidden;
}

#printcontent {
  color: #000000;
  padding: 5px;
  background-color: #ffffff;
  text-align: left;
}

#printcontent a {
  color: #191970;
  text-decoration: none;
}

#printcontent .logo {
  height: 70px;
}

#printcontent .equal {
  margin-top: 10px;
  display: block;
}

#flatheader img {
  width: 45px;
  float: left;
}
.margin-left {
  margin-left: 55px;
}
#flatcontent .hidden,
#printcontent .hidden {
  visibility: hidden;
  display: none;
}

#flatcontent .showtable {
  margin: 12px 0 12px 0;
  font-weight: bold;
  clear: both;
}

#flatcontent .flatfile_heading {
  font-weight: bold;
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
}

#rowpreview {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  visibility: hidden;
  z-index: 999;
}

#rowpreview .equal {
  margin: 0px;
  box-shadow: var(--shadow);
}

#catpreview {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  transform: translateY(-7rem);
  visibility: hidden;
  z-index: 999;
  box-shadow: var(--shadow);
}

.nowrap {
  white-space: nowrap;
}

.printtable,
.hidetable,
.fullview,
.allentries,
.hideentries {
  margin-left: 10px;
}

.rowpreviewheader {
  color: #191970;
  font-weight: bold;
}

.tablenav {
  display: table-caption;
  caption-side: bottom;
}

#rightbox {
  display: block;
  float: right;
  font-size: 0.9rem;
}

/*#rightbox {
  display: flex;
  justify-content: end;
  font-size: 0.9rem;
}

#rightbox :is(input, button) {
  font-size: 0.6rem;
  margin: 0.25rem;
}
*/
.hidecomment {
  margin-left: 14px;
  margin-right: 4px;
  float: right;
}

.tophideprint {
  text-align: left;
  margin-top: 16px;
  font-weight: bold;
  margin-right: 12px;
}

.wait {
  margin-top: 8px;
  font-weight: bold;
  float: none;
  color: #cc0000;
}

#flatcontent .equal {
  clear: both;
}

#resulttab .equal {
  margin-top: 8px;
}

.specificsearch {
  text-align: left;
  margin-top: 6px;
}

#overviewtab {
  float: left;
  margin-right: 30px;
  max-width: 325px;
}

#resulttab {
  float: none;
}

#resulttab h1,
#resulttab #printbox,
#resulttab .hidetable,
#resulttab #myDiv,
#resulttab #shortversion {
  display: none !important;
}

#resulttab #margin1 {
  padding-top: 38px;
}

#resulttab #margin2 {
  padding-top: 38px;
}

#resulttab #margin3 {
  padding-top: 72px;
}

#resulttab #margin4 {
  padding-top: 56px;
}

#tmbox {
  margin-bottom: 5px;
}

#flatcontent .sort_img,
#flatcontent .remove_img {
  margin-bottom: 2px;
}

#flatcontent .row .header {
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-right: 1px solid #8c8cb7;
  border-left: 1px solid #8c8cb7;
  word-wrap: break-word;
}

#flatcontent .row .header:first-child {
  border-left: 1px solid #333333;
}

#flatcontent .row .header:last-child {
  border-right: 1px solid #333333;
}

@media screen and (max-width: 1310px) {
  #resulttab {
    float: left;
    max-width: 922px;
  }
}

#hide_all,
#show_all {
  margin-top: 20px;
  display: inline-block;
}

#hide_all {
  float: none;
  margin-right: 15px;
}

#show_all {
  float: none;
}

.ligand_link {
  color: #191970;
  font-weight: bold;
  text-align: left;
}

#markrefuniprot label {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 320px;
}
/* 
#flatcontent input[type="submit"] {
  text-align: center;
}

#flatcontent input[type="text"] {
  width: 100px;
  border: 1px solid var(--border-color);
  padding: 3px;
  border-radius: var(--border-radius);
}

#flatcontent button[type="submit"] {
  width: 60px;
  text-align: center;
  margin: 0 3px 2px 3px;
  padding: 3px 5px 3px 5px;
  background-color: #eeeeee;
  color: #191970;
  font-weight: bold;
  border-radius: var(--border-radius);
  border: 1px solid darkgray;
  cursor: pointer;
  box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
 } */

#flatcontent button[type="submit"]:hover {
  box-shadow: inset 0 0.6em 2em -0.3em rgba(0, 0, 0, 0.15),
    inset 0 0 0em 0.05em rgba(255, 255, 255, 0.12);
}
*/ #flatcontent #seqlink,
#content #seqlink {
  margin-left: 10px;
}

#flatcontent .card {
  margin: 1rem 0;
}

#flatfile_ectree {
  margin-bottom: 1.5rem;
}

#flatcontent #iubmb_text {
  margin-top: 5px;
}

#flatcontent .flatfile_heading {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 115%;
}

#flatcontent #flat_searchform {
  float: left;
  margin-top: 8px;
  margin-right: 13px;
}

/* #flatcontent #wordmapcontainer_enz {
  float: left;
  margin-top: 8px;
  margin-bottom: 8px;
}

#flatcontent #wordmapcontainer_enz_head {
  font-weight: bold;
  float: left;
} */

#flatcontent .reactcontainer {
  display: table;
  /*margin: 5px 0 10px 0;*/
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  /*padding: 10px;*/
  clear: both;
  width: 100%;
}

#flatcontent .react_structure,
#flatcontent .react_equation {
  display: table-row;
}

#flatcontent .react_sign,
#flatcontent .compound_name,
#flatcontent .compound_struct {
  display: table-cell;
  text-align: center;
  padding: 5px 5px 8px 5px;
}

#flatcontent .compound_struct img {
  max-width: 100%;
  height: auto;
}

#flatcontent .react_sign {
  font-weight: 550;
}

#flatcontent .react_equation {
  background-color: rgba(141, 193, 232, 0.24);
}

#flatcontent .showhide {
  float: left;
  font-size: 0.8rem;
  text-align: left;
  font-weight: bold;
  margin-top: 8px;
  margin-left: 12px;
}

.taxon-card {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#flatcontent #reactschemes_head {
  float: left;
}

#flatcontent #reactschemes {
  display: table;
  margin: 13px 0 5px 0;
}

#flatcontent .closereact {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  top: -4px;
  right: -4px;
  /* float: right; */
  padding: 0 0 2px 2px;
  cursor: pointer;
}
#flatcontent .closereact::after {
  content: "";
  position: absolute;
  height: 14px;
  left: 5px;
  border-left: 2px solid #191970;
  border-radius: 5px;
  transform: rotate(45deg);
}

#flatcontent .closereact::before {
  content: "";
  position: absolute;
  height: 14px;
  left: 5px;
  border-left: 2px solid #191970;
  border-radius: 5px;
  transform: rotate(-45deg);
}

#flatcontent .hints {
  margin-left: 10px;
  color: #cc0000;
}

#flatcontent #zoomImg {
  position: absolute;
  border: 1px solid #ccc;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  padding: 10px;
  background-color: white;
  z-index: 999;
}

#flatcontent .zoom_close {
  font-weight: bold;
  font-size: 22px;
  text-align: right;
  cursor: pointer;
  display: block;
}

#flatcontent .compound_zoom {
  cursor: zoom-in;
}

#flatcontent .ec_comment {
  color: #cc0000;
  font-weight: bold;
  border-radius: 5px;
  display: inline-block;
}

#flatcontent .flatnav_filter {
  margin-block: 1rem;
}

#flatcontent .flatnav_filter-form {
  display: flex;
  flex-direction: column;
}
.flatnav_filter-form.hidden {
  display: none !important;
}
#flatcontent .flatnav_filter-form > * {
  margin-block: 0.25rem;
}

#flatnav .flatfilecat_alone {
  padding-left: 3px;
  display: inline-block;
}

#flatnav .navcheck {
  margin: 1px 3px 1px 3px;
  vertical-align: middle;
}

#flatnav_sa {
  margin-right: 5px;
}

#flatnav_ha {
  margin-left: 5px;
}

#flatnav .naventrnr {
  float: right;
}

#flatnav .maincat_disabled {
  background-color: rgba(25, 25, 112, 0.2) !important;
  color: grey !important;
}

#flatnav .maincat_disabled img {
  filter: opacity(0.3);
}

#flatnav .navcheck_maincat,
#flatnav .navcheck_subcat {
  display: inline-block;
}

#flatnav .flatfilecat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#flatnav span.left {
  margin-left: 15px;
}

#flatnav .nohead {
  float: right;
  color: #666666;
  white-space: nowrap;
}

#catpreview .naventrnr {
  float: right;
  margin-left: 20px;
  color: var(--brenda-blue);
}

#flatcontent .disabled,
#flatnav .disabled {
  color: grey !important;
  cursor: default !important;
}

.specsearch {
  margin-left: 10px;
  background-color: rgba(141, 193, 232, 0.24);
  padding: 2px;
}

#flatcontent #arrow {
  display: none;
}

#flatcontent .gene_name {
  border: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin: 0;
  white-space: nowrap;
  cursor: help;
  font-weight: 100;
}

#flatcontent .gene_name:before {
  display: inline-block;
  margin-bottom: 1px;
  vertical-align: bottom;
  margin-right: 3px;
  height: 15px;
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='17' height='17' version='1.1' viewBox='0 0 4.4979 4.4979' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'%3E%3Cmetadata%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E%3Cdc:title/%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cg fill='none' stroke='%23191970' stroke-linecap='round' stroke-width='.365'%3E%3Cpath d='m0.25146 3.2136c0.25692-0.8478 0.81614-1.1628 2.0054-0.99868 1.3106 0.19861 1.9773-0.18986 1.9895-0.9983'/%3E%3Cpath d='m3.2625 0.27451c-0.8478 0.25692-1.1628 0.81614-0.99868 2.0054 0.19861 1.3106-0.18986 1.9773-0.9983 1.9895'/%3E%3Cpath d='m1.2107 2.3597 0.64806 0.63725'/%3E%3Cpath d='m1.8479 4.0798-1.0583-1.0583'/%3E%3Cpath d='m2.7429 1.4369 0.62644 0.63725'/%3E%3Cpath d='m3.8221 1.4625-0.99416-0.97276'/%3E%3C/g%3E%3C/svg%3E%0A");
}

#flatcontent .lp_reliability {
  cursor: help;
  border-bottom: 1px black dotted;
}

.flatfile_tooltip {
  vertical-align: bottom;
  cursor: help;
}

#flatfile_tooltip {
  position: absolute;
  display: block;
  padding: 5px 0;
  margin-top: 3px;
  filter: alpha(opacity=90);
  opacity: 0.9;
  z-index: 100;
  font-weight: 400;
  text-align: left;
  transition: opacity 0.15s linear;
}

#flatfile_tooltip .tooltip_arrow {
  left: 92%;
  bottom: 0;
  border-width: 0 5px 5px 0;
  border-color: #000;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  padding: 2px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#flatfile_tooltip .tooltip_content {
  min-width: 150px;
  max-width: 220px;
  padding: 8px;
  color: #fff;
  text-align: left;
  background-color: #232323;
  border-radius: 4px;
}

.espnav .blueback {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
}

.navform {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block: 0.5rem;
}

fieldset {
  display: flex;
  border: 1px solid var(--border-color);
  padding: 0;
  margin-block: 0.5rem;
  width: 100%;
  gap: 0;
  border-radius: var(--border-radius);
}
fieldset * {
  border-radius: 0px !important;
  border: 0 !important;
  margin: 0 !important;
}
fieldset input {
  width: 100%;
}
fieldset *:not(:last-child) {
  border-right: 1px solid var(--border-color) !important;
}

.espnav fieldset button {
  margin: 0;
}
.espnav .maincat_left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.espnav {
  max-height: 100%;
  /* overflow-y: auto; */
}

#overDiv a font {
  color: white;
}
#overDiv table {
  padding: 0;
  margin: 0;
  border: none;
}
#overDiv table > * {
  border: none;
  padding: 0;
}
#overDiv table tbody td {
  padding: 4px;
}
#overDiv table tr {
  background-color: inherit;
}

#overDiv a {
  text-decoration: none;
}

td.head3 {
  border: none;
  font-size: 24px;
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 15px;
}

td.head4 {
  border: none;
  font-size: 18px;
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 10px;
}

.lp_help {
  max-width: 400px;
  padding: 6px !important;
  font-size: 12px;
  background-color: rgba(141, 193, 232, 0.24);
  text-align: left;
  line-height: 16px;
  margin: 5px 0 5px 210px;
}

.lp_help ul {
  margin: 0;
  padding-left: 15px;
}

#hide_release_link {
  font-weight: bold;
  margin-top: 12px;
  display: block;
}

/* Info box */
.infobox-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 1rem;
  left: 0;
  width: 100%;
  z-index: 999;
  pointer-events: none;
  margin-top: 1rem;
}
.infobox-wrapper > * {
  height: fit-content;
}

#header .infobox-wrapper {
  top: 9rem;
}

.infobox-wrapper--inline {
  position: static;
  width: 100%;
  height: fit-content;
  z-index: 888;
}

.infobox {
  background-color: var(--box-bg-color, #666666ee);
  border: 1px solid var(--box-border-color, #666666);
  border-radius: 0.25rem;
  padding: 1rem 1.5rem;
  max-width: 50rem;
  margin: 0.5rem 1rem;
  display: grid;
  gap: 0;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  color: var(--box-font-color, #ffffff);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: var(--box-shadow);
  pointer-events: all;
  text-shadow: 2px 2px 2px #00000033;
  font-weight: bold;
}
.infobox--open {
  gap: 1rem;
}

.infobox a,
.infobox a:visited {
  color: var(--box-font-color, #ffffff) !important;
  text-decoration: underline !important;
  font-weight: 600;
}

.infobox a:hover {
  text-decoration: none !important;
}

.infobox__icon {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infobox__link {
  display: flex;
  align-items: center;
  justify-content: right;
  max-width: 0px;
  overflow: hidden;
  transition: max-width 800ms;
}

.infobox--open .infobox__link {
  max-width: 6ch;
}

.infobox__text {
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  transition: max-width 800ms;
}

.infobox--open .infobox__text {
  max-width: 80ch;
  padding-left: 1.5rem;
}

.infobox--slider {
  position: relative;
  transform: translateX(calc(50vw - 50%));
  z-index: 1000;
  transition: transform 800ms cubic-bezier(1, -0.36, 0, 1.43);
  cursor: pointer;
}

.infobox--open {
  transform: translateX(0);
  cursor: default;
}

.infobox--slider.infobox--open:after {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0.25rem;
  font: var(--fa-font-solid);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f057";
  font-size: 1.3rem;
  transform: translate(0.9rem, -0.9rem);
  color: #333;
  pointer-events: auto;
  background-color: white;
  border-radius: 100%;
  cursor: pointer !important;
}

.infobox--closable {
  position: relative;
  z-index: 1000;
  cursor: pointer;
}

.infobox--closable:after {
  font: var(--fa-font-solid);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f057";
  font-size: 1.3rem;
  transform: translate(0.9rem, -0.9rem);
  color: #333;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0.25rem;
  pointer-events: auto;
  display: inline-block;
  aspect-ratio: 1 / 1;
  background-color: white;
  border-radius: 100%;
}

.infobox--light {
  --box-bg-color: #fcfcfcdd;
  --box-border-color: #999999;
  --box-font-color: var(--brenda-blue);
}
.infobox--red {
  --box-bg-color: #dd2727ee;
  --box-border-color: #dd2727;
}
.infobox--blue {
  --box-bg-color: color-mix(in srgb, var(--dsmz-blue), transparent 10%);
  --box-border-color: var(--dsmz-blue);
}
.infobox--yellow {
  --box-bg-color: #ffbb00ee;
  --box-border-color: #ffbb00;
}

.infobox--green {
  --box-bg-color: #007000ee;
  --box-border-color: #007000;
}

.datafield-wrapper {
  display: grid;
  grid-template-columns: 20rem auto;
  gap: 0.5rem;
}

.news {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 2rem;
  aside {
    /* margin: 1rem; */
    header {
      font-size: 1.2rem;
      padding-block-end: 1rem;
      i {
        color: var(--brenda-red);
      }
    }
  }
}
@media (max-width: 1000px) {
  .news {
    grid-template-columns: 1fr;
  }
}

.news-entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50ch, 1fr));
  gap: 1rem;
}

ul.cloud {
  float: unset;
}

.news-pagination {
  display: flex;
  justify-content: center;
  margin-block: 1rem;
}

.tag-cloud {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  list-style: none;
}

.news-card {
  display: grid;
  gap: 1rem;
}

.news-card__more {
  text-align: right;
  font-size: 0.8rem;
}

.news-card__title {
  margin-top: 0.5rem;
  margin-bottom: 0;
  /* font-size: 1.6rem; */
  font-weight: 600;
}

.news-card__subtitle {
  margin-top: 0;
  font-size: 0.9rem;
  color: #666;
}

.news-card__footer {
  display: flex;
  gap: 1rem;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  justify-content: right;
}

.news-card__tags {
  display: flex;
  margin-top: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  list-style-type: none;
}
.news-card__tag {
  background-color: #666;
  color: #fff;
  border-radius: 3px;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
}

.badge {
  background-color: var(--badge-bg-color, #666);
  color: #fff;
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  margin-inline: 0.25rem;
  font-size: 0.7rem;
  font-weight: 900;
}

.badge--red {
  --badge-bg-color: var(--dsmz-red);
}
.badge--blue {
  --badge-bg-color: var(--dsmz-blue);
}
.badge--green {
  --badge-bg-color: var(--dsmz-green);
}

.references {
  list-style-type: decimal;
  padding: 0;
  font-size: 1rem;
  padding-left: 1.5rem;
}

.references--primary {
  list-style-type: none;
  border: 1px solid #ccc;
  font-size: 1.2rem;
  border-radius: 0.5rem;
  background-color: whitesmoke;
  box-shadow: var(--box-shadow);
  margin-bottom: 1rem;
}

.reference {
  gap: 0.25rem;
  flex-direction: column;
  margin: 1rem 0;
}

.reference:target {
  background-color: #efef0033;
}

.reference__authors {
  font-size: 0.9em;
}

.reference__download {
  font-size: 0.8em;
}

.reference__title {
  font-weight: 700;
  font-size: 1.1em;
}

table {
  /* table-layout: fixed; */
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);
}
thead {
  background-color: var(--brenda-blue);
  color: white;
}
thead th {
  padding: 0.75rem;
  white-space: break-spaces;
  width: fit-content;
}

tbody td {
  padding: 0.5rem;
  white-space: pre-wrap;
}
tbody tr.clickable {
  cursor: pointer;
}
tbody tr.clickable:hover {
  background-color: hsla(240, 63.5%, 26.9%, 0.24);
}
tbody tr:nth-child(even) {
  background-color: var(--surface);
}
tbody tr:nth-child(odd) {
  background-color: white;
}

.literature {
  list-style: none;
  padding-left: 0;
  padding-bottom: 1rem;
}
.literature div:not(.literature-title) {
  padding-left: 1.5rem;
}

.literature-title {
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: 900;
}

.literature-table-section {
  max-width: 100%;
  overflow-x: scroll;
  padding-block: 0.75rem;
}

.table-other-publications :is(td, th):nth-child(n + 10):not(:last-child) {
  display: none;
}

.table-other-publications.full :is(td, th):nth-child(n + 10):not(:last-child) {
  display: table-cell;
}

.table-other-publications.full :is(td, th):last-child {
  display: none;
}

#table-toggle {
  cursor: pointer;
}

#table-toggle:hover {
  color: var(--brenda-red);
}

.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  display: inline-flex;
  max-width: 40rem;
  margin: 0 auto;
  flex-direction: column;
  padding: 1rem;
  gap: 0.1rem;
}

.login-form :is(input, button, select) {
  margin: 0;
  margin-bottom: 0.75rem;
}
.login-form section input {
  margin: 0;
}
.login-form input[type="checkbox"] {
  margin: 0;
  width: fit-content;
}
.login-form label {
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
}
.login-form div {
  position: relative;
  margin-bottom: 0.5rem;
}
.login-form :has() {
  display: flex;
  align-items: center;
}

.login-wrapper > div:is(:first-child, :last-child) {
  grid-column: 1 / 3;
}

.login-form section {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
  gap: 0.1rem;
}
.login-form input {
  width: 100%;
}

.toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
}
.toggle-password:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

form:invalid [type="submit"] {
  color: #999;
  background-color: #ccc;
  border: 1px solid #999;
  box-shadow: none !important;
  cursor: default !important;
}
form:invalid [type="submit"]:hover {
  color: #999;
  background-color: #ccc;
  border: 1px solid #999;
}

.login-form input[type="file"] {
  background-color: #fff;
}

.login-form
  input:not(input[type="file"]):is(select:valid, input:valid, input:in-range) {
  border-color: #007000;
  background-color: #00700011;
}
.login-form
  :is(
    :is(input:invalid, textarea:invalid):is(:not(:placeholder-shown), :focus),
    input:out-of-range,

  ) {
  border-color: #dd2727;
  background-color: #dd272711;
}

input:invalid {
  border-color: var(--dsmz-red);
  background: color-mix(in srgb, var(--dsmz-red) 10%, transparent 90%);
}

.login-form .two-cols {
  display: flex;
  flex-grow: 0;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.login-form .two-cols div {
  position: relative;
  width: 100%;
  flex: 5;
  flex-basis: 10rem;
}

button.link,
button.link:hover {
  font-size: 1rem;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  display: inline;
  margin: 0;
  padding: 0;
}

button.link:not(:disabled) {
  color: var(--brenda-blue);
}
button.link:not(:disabled):hover {
  color: var(--brenda-red);
}

ul.downloads {
  list-style: none;
  padding: 0;
  margin-left: 1rem;
  margin-bottom: 0.75rem;
}
ul.downloads li {
  margin-bottom: 0.75rem;
}
ul.downloads ul {
  margin-top: 0.5rem;
}
label.checkbox {
  display: flex;
  align-items: center;
}

.cv-card-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff99;
  backdrop-filter: blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  color: white;
  overflow-y: hidden;
  display: none;
}
.cv-card-wrapper--open {
  display: flex;
}
.cv-card {
  position: relative;
  background-color: var(--brenda-blue);
  color: var(--surface);
  padding: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  max-width: 90vw;
  width: 35rem;
  isolation: isolate;
}

/* .cv-card:after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 250px;
  background-image: linear-gradient(0deg, #ffffff66 0%, #ffffff00 50%);
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
} */

.cv-card__name {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px #000;
  letter-spacing: 1px;
  z-index: 3;
}
.cv-card__position {
  margin: 0;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  color: var(--brenda-red);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-top: 0.25rem;
  z-index: 3;
}

.cv-card__photo {
  max-height: 100%;
  width: 100%;
  max-width: 250px;
  display: block;
  object-fit: contain;
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
  z-index: 1;
}

.cv-card__text {
  padding: 2rem 1rem 4.5rem 1rem;
}

.cv-card__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  cursor: pointer;
}
.cv-card__text ul {
  padding-left: 1.5rem;
}
.cv-card__text ul li {
  margin-bottom: 0.75rem;
}

.quick-feedback {
  position: fixed;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-direction: column;
  align-items: flex-end;
  bottom: 2rem;
  right: 2rem;
  opacity: 1;
  z-index: 10;
  background-color: var(--brenda-blue);
  color: whitesmoke;
  border-radius: 1rem 1rem 0.2rem 1rem;
  overflow: hidden;
  width: 4rem;
  height: 4rem;
  transition: width 250ms ease-in-out, height 250ms 250ms ease-in-out,
    translate 125ms ease-in-out, background-color 250ms ease-in-out;
  box-shadow: 0 0.25rem 0.5rem #00000066;
}

.quick-feedback--success {
  background-color: #007000;
}
.quick-feedback--error {
  background-color: var(--brenda-red);
}

.quick-feedback__length {
  font-size: 0.75rem;
  color: gray;
  text-align: right;
}

.quick-feedback__header {
  display: flex;
  align-items: center;
  height: 4rem;
  padding: 1rem;
  gap: 1rem;
  cursor: pointer;
  justify-content: end;
  transition: clip-path 500ms 250ms ease-in-out;
  clip-path: polygon(
    100% 0%,
    100% 100%,
    calc(100% - 4rem) 100%,
    calc(100% - 4rem) 0%
  );
}

.quick-feedback__heading {
  font-weight: 700;
  text-align: center;
}

.quick-feedback__pagename {
  max-width: 10rem;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}

.quick-feedback:not(.quick-feedback--open) .quick-feedback__icon {
  animation: 500ms shake forwards;
  animation-iteration-count: 1;
  animation-delay: 70s;
}
.quick-feedback:not(.quick-feedback--open) {
  animation: 500ms shake reverse;
  animation-iteration-count: 1;
  animation-delay: 70s;
}

.quick-feedback:not(.quick-feedback--open):hover {
  translate: 0 -0.1rem;
  width: 12rem;
  box-shadow: 0 0.33rem 0.75rem #00000066;
}

.quick-feedback--open {
  height: 19rem;
  width: 12rem;
  box-shadow: 0 0.33rem 0.75rem #00000066;
}

:is(.quick-feedback:hover, .quick-feedback--open) .quick-feedback__header {
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
}

.quick-feedback-form,
.quick-feedback-results {
  width: 100%;
  height: 100%;
  background-color: var(--surface);
  padding: 1rem;
  color: #333;
  border: none;
  margin: 0;
}

.quick-feedback-results svg {
  border: 1px solid #999;
  margin-bottom: 0.5rem;
}
.quick-feedback-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
}
.quick-feedback-comments {
  overflow-y: scroll;
  font-size: 0.7rem;
}
.quick-feedback-form:disabled {
  filter: grayscale(1);
  opacity: 0.75;
}

.quick-feedback-form__rating {
  display: flex;
  width: 100%;
  justify-content: space-around;
  padding-block: 0.5rem;
}

.quick-feedback-form input[type="radio"] {
  display: none;
}

.quick-feedback label {
  transform-origin: center;
  filter: grayscale(1);
  opacity: 0.9;
}

.quick-feedback:not(.quick-feedback--success) label {
  cursor: pointer;
}

.quick-feedback-form input[type="radio"]:checked + label {
  filter: none;
  scale: 1.5;
  opacity: 1;
}

.quick-feedback-form:not(:disabled)
  input[type="radio"]:hover:not(:checked)
  + label {
  filter: grayscale(0.5);
  opacity: 1;
}

.quick-feedback-form textarea {
  width: 100%;
  height: 100%;
}

.quick-feedback-form__submit,
.quick-feedback-form__comment {
  width: 100%;
  border: 1px solid #333;
  border-radius: 0.25rem;
}
.quick-feedback-form__email,
.register-email-repeat {
  position: absolute;
  border: none;
  height: 0;
  padding: 0;
  margin: 0;
  width: 0;
}

.icon-label {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 0.75rem;
  margin: 0.5rem;
  align-items: center;
  justify-content: center;
}

.icon-label__icon {
  aspect-ratio: 1 / 1;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  color: var(--brenda-blue);
}
.icon-label__header {
  font-size: 1.2rem;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-weight: bold;
  color: #333;
}
.icon-label__subheader {
  font-size: 0.9rem;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  color: #666;
}

.hidden_molecule {
  display: grid;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.hidden_molecule img,
.hidden_molecule span {
  grid-column: 1;
  grid-row: 1;
}
.hidden_molecule img {
  opacity: 0;
  transition: opacity 500ms ease-in-out;
  position: absolute;
  border: 1px solid #333;
  box-shadow: var(--box-shadow);
  translate: -50% 0;
  pointer-events: none;
}
.quick_esp {
  width: 90% !important;
}
.hidden_molecule:hover img {
  opacity: 1;
  pointer-events: all;
}

label.with-input {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 19rem;
}
label.without-input {
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.text-block {
  font-size: 1.1rem;
  line-height: 1.5rem;
}
@keyframes shake {
  0% {
    rotate: 0deg;
    scale: 1;
  }
  10% {
    rotate: -5deg;
  }
  20% {
    rotate: 15deg;
  }
  30% {
    rotate: -10deg;
  }
  40% {
    rotate: 10deg;
  }
  50% {
    rotate: -3deg;
  }
  60% {
    rotate: 8deg;
    scale: 1.1;
  }
  70% {
    rotate: -12deg;
  }
  80% {
    rotate: 2deg;
  }
  90% {
    rotate: -10deg;
  }
  100% {
    rotate: 0deg;
    scale: 1;
  }
}

.pagination {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;

  li {
    padding: 0.5rem;
    border-radius: 3px;
  }
  li:not(:first-child):has(a):hover {
    background-color: #ccc;
  }
  li[aria-current="true"] {
    font-weight: 900;
    background-color: var(--brenda-blue);
    color: white;
  }
}

input[name^="other_"] {
  position: absolute;
  border: none;
  height: 0;
  padding: 0;
  margin: 0;
  width: 0;
}
.form_intro {
  margin: 0 auto;
  max-width: 80ch;
  width: 100%;
  padding-block: 1rem;
}

#eu-cookie-banner {
  display: none;
  gap: 1.5rem;
  width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #edededef;
  box-shadow: var(--box-shadow);
  padding: 1rem;
  color: #333;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  border-top: 1px solid var(--brenda-blue);
}
#eu-cookie-banner.show {
  display: flex;
}

#eu-cookie-banner a {
  color: var(--brenda-blue);
  text-decoration: underline;
}

#eu-cookie-banner a:hover {
  color: var(--brenda-blue-hover);
  text-decoration: none;
}

#eu-cookie-banner > i {
  font-size: 3rem;
}
#eu-cookie-banner footer {
  display: flex;
  gap: 1rem;
  justify-content: end;
}
#eu-cookie-banner button {
  border: 1px solid #555;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background-color: var(--btn-color, #666);
  color: white;
  font-size: 1.1rem;
}
#eu-cookie-banner button#eu-cookie-accept {
  --btn-color: var(--dsmz-green);
}
#eu-cookie-banner button#eu-cookie-reject {
  --btn-color: var(--dsmz-red);
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

#flatcontent .cl-item {
  list-style-type: none;
  margin: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  border-radius: 2px;
  background-color: white;
}

#flatcontent .cl-link-container {
  display: flex;
  margin: 1rem;
  padding: 0;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
}

#flatcontent .cl-item {
  list-style-type: none;
  margin: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  padding: 0.7rem;
  flex-basis: auto;
  width: 14rem;
}

#flatcontent .cl-item .l-name {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #444444;
}

#flatcontent .cl-item .l-link {
  font-size: 90%;
  padding-top: 0.25rem;
}

#flatcontent .cl-item .db-name {
  color: #444444;
}

.f-medium {
  font-weight: 600;
}

#flatcontent #cellline-links {
  margin-bottom: 2rem;
}

#flatcontent .gene_filter {
  width: auto !important;
  height: 2.5rem;
  padding: 0.375rem 0.75rem !important;
  margin-top: 1rem;
}

.css_tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted black;
}

.css_tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: rgba(70, 70, 70, 1);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  transition: opacity 0.15s linear;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.css_tooltip:hover .tooltiptext {
  visibility: visible;
}

#flatcontent .badge {
  display: inline-block;
  padding: 0.4rem;
  background-color: #53535320;
  border-radius: 0.5rem;
  color: var(--brenda-blue);
  font-size: 1rem;
}

#cellline-bar {
  margin: 1rem 0 1rem 0;
  max-height: 300px;
}

#flatcontent .tm_filter-form {
  font-weight: normal;
  width: fit-content;
  margin: 0.5rem 0 0.5rem 0;
}

#flatcontent .tm_filter-form label {
  margin-right: 1rem;
}