:root {
  --main-foreground: #111;
  --main-background: #f8faff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-foreground: #eee;
    --main-background: #202026;
  }
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('/static/Roboto-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url('/static/Roboto-Italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url('/static/Roboto-Bold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('/static/Roboto-BoldItalic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('/static/Roboto-Regular-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url('/static/Roboto-Italic-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url('/static/Roboto-Bold-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('/static/Roboto-BoldItalic-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}

html {
  height: 100%;
}
body {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0;
  padding: 1em min(1em, 3vw);
  display: flex;
  flex-direction: column;
  background: var(--main-background);
  color: var(--main-foreground);
  font-family: Roboto, Arial, sans-serif;
}
a:link {
  color: #0d3ba8;
}
a:visited {
  color: #5c6884;
}
a:active {
  color: #ce332c;
}
@media (prefers-color-scheme: dark) {
  a:link {
    color: #93b3ff;
  }
  a:visited {
    color: #889ac4;
  }
}

footer {
  flex-grow: 4;
  box-sizing: border-box;
  bottom: 0;
  text-align: center;
  padding-top: 4em;
  width: 100%;
  font-size: .85em;
  opacity: 0.7;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5em;
}
@media (max-width: 35em) {
  footer {
    flex-direction: column;
  align-items: center;
  }
}
footer a, footer a:link, footer a:visited, footer a:active {
  color: currentColor;
}

.head {
  padding-top: 1em;
}
.head > p:nth-child(2) {
  margin-top: 0;
}
div.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1ex;
  margin-bottom: 1ex;
}
#add {
  cursor: pointer;
  float: right;
  margin: 0 0 1em 1em;
  padding: 1ex 2.25ex;
  background: #f57300;
  border: none;
  box-shadow: 0px 1px 1px #0008;
  color: #fff;
  font-family: Roboto, Arial, sans-serif;
  font-weight: bold;
  font-size: 1.1em;
}

table.edit_select input[type=checkbox] {
  display: none;
}
table.edit_select tbody tr:hover {
  cursor: pointer;
  background: #ff800040;
}
table.edit_select tbody tr:hover::before {
  content: '📝';
  font-size: 1.3em;
  position: absolute;
  padding: .3em 0 0 .3em;
}

h1, h2, div.head, table {
  margin: 0 auto;
  width: 100%;
  max-width: 80rem;
}
h2 {
  margin-top: 2em;
}
table {
  min-width: 15em;
}
tr {
  display: grid;
  gap: 1ex;
  padding: .4ex;
}
table.blocks {
  border-spacing: 0;
}
table.blocks tr {
  display: table-row;
}
table.blocks td {
  border-top: 0.5px solid #80808080;
  padding: .2em 0;
}
table.blocks input {
  box-sizing: border-box;
  width: calc(100% - 1ex);
}
thead tr.filter {
  margin-top: -.5ex;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: .2ex;
  display: none;
}
thead tr.filter input[type=text] {
  box-sizing: border-box;
  width: 100%;
  max-width: 12em;
}
thead tr.filter input#filter_keywords {
  max-width: 24em;
}
tbody tr {
  border-top: 0.5px solid #80808080;
}
tbody tr:target {
  background: #ffbf00c9;
}
th {
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}
th.select {
  height: 1em;
}
th.select, td.select {
  text-align: center;
}
thead .filter label {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

thead span.sortable {
  position: relative;
}
thead span.sortable.sort-forward::after, thead span.sortable.sort-reverse::after {
  position: absolute;
  right: 0;
  opacity: .5;
  transform: translate(.8em, 0);
}
thead span.sortable.sort-forward::after {
  content: "⇣";
}
thead span.sortable.sort-reverse::after {
  content: "⇡";
}

tbody tr.filtered-name, tbody tr.filtered-type, tbody tr.filtered-affiliation, tbody tr.filtered-keywords, tbody tr.filtered-languages {
  display: none;
}
tbody .keyword, tbody .language {
  cursor: pointer;
}
tbody .filter_highlight {
  text-decoration: underline;
}
tbody td {
  min-width: 0;
}

tbody a:link {
  text-decoration: none;
}
tbody a:visited {
  text-decoration: none;
}

td div.account {
  font-size: .8em;
  overflow: hidden;
  text-overflow: ellipsis;
}
td.type {
  text-align: center;
}
td.keywords > div, td.languages > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .4em;
}
td.keywords .keyword, td.languages .language {
  display: inline-block;
  white-space: nowrap;
}
td.keywords .keyword {
  box-shadow: 0px 0px 1px #000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='255.9' x2='256.1' y1='0' y2='16' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='.3' offset='0'/%3E%3Cstop stop-color='%23000' stop-opacity='.3' offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='512' height='16' fill='url(%23a)' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  background-color: var(--light-bubble);
  color: #111;
  border-radius: .7em;
  padding: .05em .6em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) {
  td.keywords .keyword {
    background-color: var(--dark-bubble);
    color: #fff;
  }
}
td.languages .language {
  box-shadow: 0px 0px 1px #000;
  background: #2f6cff4d;
  border-radius: .3em;
  padding: 0.1em .25em;
  font-size: .85em;
}
td.languages .language .short {
  display: none;
}
td.keywords .separator, td.languages .separator {
  display: none;
}
@media screen and (max-width: 50rem) {
  th.affiliation, td.affiliation {
    display: none;
  }
}
@media screen and (max-width: 35rem) {
  tr {
    gap: .6ex;
  }
  th.keywords {
    display: none;
  }
  thead tr.filter td.keywords input[type=text] {
    max-width: unset;
  }
  td.languages {
    grid-column: 4;
  }
  td.languages .language .long {
    display: none;
  }
  td.languages .language .short {
    display: inline;
  }
}
@media screen and (max-width: 20rem) {
  th.type, td.type {
    display: none;
  }
  td.languages {
    grid-column: 3;
  }
  td.keywords {
    grid-column: 2 / 4;
    grid-row: 2;
  }
}
div.submitted {
  box-sizing: border-box;
  margin: 2em auto 1em;
  border: 2px solid #00a457;
  background: #00a45720;
  padding: .7ex 1.2ex;
  width: min(calc(30em + 30%), 100%);
  font-size: .9em;
}
div.submitted p:first-child {
  margin-top: 0;
}
div.submitted p:last-child {
  margin-bottom: 0;
}
dialog {
  max-width: min(90%, 60em);
  padding: 0;
  border: 2px solid #111;
  border-radius: .4ex;
  background: #fff;
  color: #111;
}
@media (prefers-color-scheme: dark) {
  dialog {
    border: 2px solid #fff;
    background: #262c42;
    color: #fff;
  }
}
dialog.authenticate > div {
  padding: 2em min(2em, 3vw);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2em;
}
@media (max-width: 40em) {
  dialog.authenticate > div {
    flex-direction: column;
  }
}
dialog.authenticate > div > div {
  text-align: center;
  flex-grow: 1;
}
dialog.authenticate > div > span {
  text-align: center;
  flex-grow: 0;
}
dialog.authenticate > div > div > p {
  margin-top: 0;
}
dialog.authenticate > div > span:nth-child(2) {
  font-size: 2em;
  font-weight: bold;
}
dialog.authenticate .cta {
  font-size: 1.3em;
  margin-bottom: 0;
}
dialog.authenticate .cta::after {
  content: " ➜";
}
ul.server_selection {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: .8ex;
  flex-wrap: wrap;
}
ul.server_selection li {
  margin: 0;
  padding: 0;
}
ul.server_selection > li > button {
  cursor: pointer;
  box-shadow: 0px 1px 2px #000a;
  border: none;
  background: linear-gradient(#6364ff, #563acc);
  color: #fff;
  padding: .5ex .8ex;
  font-size: 1.2em;
  border-radius: .6em;
}
ul.server_selection .custom_server {
  box-sizing: border-box;
  border: 2px solid #808080;
  padding: 0 .2em 0 .4em;
  border-radius: .6em;
  display: flex;
  flex-direction: row;
  gap: .2em;
}
ul.server_selection .custom_server input[type=text] {
  border: none;
  margin: .1em 0;
  font-size: 1em;
  flex-grow: 1;
  width: 5em; /* gets expanded by the surrounding flex box */
}
ul.server_selection .custom_server button {
  margin: .2em 0;
}
ul.server_selection button.different_server {
  background: #808080;
}
ul.server_selection button[disabled]:not(.chosen) {
  opacity: .4;
  cursor: unset;
}
#help_dialog > div {
  padding: 1em;
}
#help_dialog h2 {
  margin-top: 0;
}
#help_dialog img {
  max-width: 100%;
}

form, h1.narrow {
  margin: 0 auto;
  width: 100%;
  max-width: 60rem;
}
form {
  margin-top: 2em;
  display: grid;
  grid-template-columns: 7em 1fr 5em 2fr;
  gap: 1em 1ex;
}
label[for=name] {
  text-align: right;
}
form div.account_type {
  display: inline-block;
  white-space: nowrap;
}
form > p {
  grid-column: 1 / 5;
}
form > p.elaboration {
  grid-column: 2 / 5;
  font-size: .8em;
  margin-top: -.5em;
}
input#affiliation, input#keywords, div#languages {
  grid-column: 2 / 5;
}
thead input[type=text], form input[type=text], div.bubble_text {
  padding: .1em .2em;
  background: #fff;
  color: #000;
  border: 1px solid #808080;
  border-radius: .1em;
  font-size: .8em;
}
form span.bubble {
  background: #a8d2ff;
  border-radius: .3em;
  padding: .1em .3em;
}
@media (prefers-color-scheme: dark) {
  thead input[type=text], form input[type=text], div.bubble_text {
    background: #222;
    color: #fff;
  }
  form span.bubble {
    background: #22466d;
  }
}
form ul.suggestions {
  display: none;
  position: absolute;
  z-index: 2;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 7em;
  overflow-y: auto;
  background: var(--main-background);
  border: 1px solid #888;
}
form ul.suggestions li {
  cursor: default;
  padding: .3em .6em;
  border-bottom: 1px solid #80808040;
}
form ul.suggestions li:hover, form ul.suggestions li:focus {
  background: #ff800040;
}
form ul.suggestions li span {
  font-size: .8em;
  opacity: .7;
}
form > div.submit {
  grid-column: 1 / 5;
  text-align: center;
}
@media (max-width: 40em) {
  form {
    grid-template-columns: 7em auto;
  }
  label[for="name"] {
    text-align: unset;
  }
  form > p {
    grid-column: 1 / 3;
  }
  form > p.elaboration {
    grid-column: 2 / 3;
  }
  input#affiliation, input#keywords, div#languages {
    grid-column: 2 / 3;
  }
  form > div.submit {
    grid-column: 1 / 3;
  }
}
@media (max-width: 25em) {
  form {
    grid-template-columns: auto;
  }
  form > p {
    grid-column: 1 / 2;
  }
  form > p.elaboration {
    grid-column: 1 / 2;
  }
  input#affiliation, input#keywords, div#languages {
    grid-column: 1 / 2;
  }
  form > div.submit {
    grid-column: 1 / 2;
  }
}
dialog#delete_confirmation p {
  padding: 2em 1.5em 1em;
}
dialog#delete_confirmation > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1em;
  padding-bottom: 2em;
}
dialog#delete_confirmation button {
  font-size: 1em;
  padding: .3ex 1ex;
}

#status_indicator {
  position: fixed;
  right: 1em;
  top: 2.5em;
  width: 2em;
  height: 2em;
  opacity: 0;
  transition: opacity 500ms;
}
#status_indicator svg {
  width: 100%;
  margin: auto;
}
dialog.status_messages {
  max-width: min(40em, 80vw);
  background-color: var(--main-background);
  border: .15em solid #aaa;
}
dialog.status_messages::backdrop {
  background-color: #000;
  opacity: .3;
}
dialog.status_messages h2 {
  margin: 0;
  font-size: 1.2em;
}
dialog.status_messages p {
  margin: 1ex 0 2ex;
  font-size: .9em;
}
dialog.status_messages p:last-child {
  margin-bottom: 0;
}

aside.admin_bar {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  margin: -1em -1em 2em -1em;
  padding: .3ex;
  background: repeating-linear-gradient(-45deg, #fd0 0 10px, #000 10px 20px);
}
aside.admin_bar > span {
  display: block;
  margin: 0 auto;
  max-width: max-content;
  background: #fff;
  color: #000;
  padding: .2ex .8ex;
}