/* blackbar extended fix */
.masthead-black-bar .row {
  max-width: none !important;
}

#top-of-page-button {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 3rem;
  margin-right: .5rem;
  margin-bottom: .5rem;
}

@media screen and (max-width: 500px) {
  #top-of-page-button {
    display: none;
  }
}

#sidebar li {
  margin-bottom: .25rem;
}

/* Logo styles */
.logo-box {
  display: flex;
  margin: 0 0 0.5rem 1rem;
}

.logo {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.logo-box img {
  max-width: 100% !important;
  width: auto;
  height: auto;
}

.logo-text {
  color: inherit;
  margin-left: 1rem !important;
}

.logo-text h1 {
  font-size: 2.5rem !important;
  line-height: 1.2;
}

.logo-subtitle {
  color: inherit;
  font-size: 1rem;
  font-weight: 300;
  text-align: right;
  margin: -1rem 1.5rem 0 0;
  font-style: italic;
}

/* Navbar fixes */
#local-nav {
  width: 100%;
}

#global-search {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.embl-bar .row.padding-bottom-medium {
  max-width: 80rem;
}

/* Navbar active */
.navbar-active {
  color: #292929 !important;
  font-weight: bold !important;
}

/* Elixir banner */
.elixir-banner {
  background-color: #eaeaea;
  padding: 0.5rem;
  max-width: 80rem;
  margin: 5rem auto 0.5rem auto;
}

.elixir-banner__logo {
  display: inline-block;
  margin-right: 2rem;
}

.elixir-banner__text {
  display: inline-block;
  vertical-align: middle;
}

.elixir-banner__text p {
  margin-bottom: 0px;
}

.elixir-banner__text a {
  color: #0086b4 !important;
  border-bottom: none !important;
}

.text-primary {
  color: #0086b4;
}

.text-secondary {
  color: #777;
}

.text-warning {
  color: #e9b400;
}

/* Main styles */
.blurb h2 {
  color: #222 !important;
}

h2.blurb {
  color: #222 !important;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-5 {
  margin-top: 5rem;
}

.mr-2 {
  margin-right: 1rem;
}

.mw-5 {
  display: inline-block;
  min-width: 5rem;
  text-align: center;
}

.mw-2 {
  display: inline-block;
  min-width: 2rem;
  text-align: center;
}

.spacer-5 {
  padding-top: 5rem;
}

.spacer-3 {
  padding-top: 3rem;
}

.spacer-2 {
  padding-top: 2rem;
}

.list-none {
  list-style-type: none;
}

.border {
  border: 1px solid #eaeaea;
}

.video-center {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.text {
  display: flex;
  align-items: center;
}

.code, div.highlight {
  background-color: #f4f4f4;
  border: 1px solid #cacaca;
  font-family: Consolas, 'Liberation Mono', Courier, monospace;
  font-size: 85%;
  line-height: 1.45;
  overflow: auto;
  padding: 16px;
  tab-size: 2;
}

.code-inline, code {
  background-color: #eaeaea;
  border: 1px solid #cacaca;
  font-family: Consolas, 'Liberation Mono', Courier, monospace;
  font-size: 90%;
  line-height: 1.45;
  overflow: auto;
  tab-size: 2;
} 

.code-inline > span, .highlight span {
  text-overflow: ellipsis;
}

h1 {
  color: #222;
}

.api-body-example, div.highlight {
  margin: 0 auto;
  max-width: 90%;
}

.json-key, .highlight .nl {
  color: #639c43;
}

.json-string, .highlight .s2 {
  color: #0086b4;
}

.json-null, .highlight .kc {
  color: rgb(160, 0, 160);
}

.infobox {
  display: flex;
  align-items: center;
}

.avatar {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  filter: grayscale(100%);
}

.person {
  align-items: center;
  display: flex;
  margin-bottom: .5rem;
}

.person-avatar-container {
  border-radius: 50%;
  border: 2px solid #0086b4;
  display: inline-block;
  min-width: 128px;
  height: 128px;
  margin-right: .25rem;
}

.person-text-container {
  margin-left: .25rem;
}

.person-link {
  color: #0086b4;
  border-bottom: none;
}

.person-title {
  align-items: baseline;
  display: flex;
}

.cdl {
  align-items: center;
  background-color: #eaeaea;
  border: 1px solid #cacaca;
  margin: 0 4rem;
  padding: 1rem .5rem;
  display: block;
}

@media print, screen and (min-width: 40em) {
  .cdl {
    display: flex;
  }
}

.cdl-link {
  border-bottom: none;
  display: flex;
  justify-content: center;
  vertical-align: center;
}

.cdl > p {
  margin: 2rem 0;
  text-align: justify;
  text-justify: inter-word;
}

.funding-ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.funding-li.large {
  width: 256px;
}

.funding-li.large.elixir {
  width: 192px;
}

.funding-ul > li {
  margin: 1rem 1rem;
  display:flex;
  align-items: center;
  justify-content:center;
}

.funding-li.small {
  height: 2.5rem;
}

.funding-li.medium {
  height: 3.75rem;
}

#funding_numbers_table tbody {
  border: none;
}

#funding_numbers_table td {
  background-color: white;
}

#funding_numbers_table td:first-child {
  text-align: right;
  white-space: nowrap;
}

.title-link,
.title-link:hover,
.title-link:active,
.funding-link,
.funding-link:hover,
.funding-link:active {
  border-bottom: none;
  display: inline-block;
}

.title-icon {
  margin-left: 0.25rem;
}

.person-text-container > a {
  display: inline-block;
}

.person-text-container > a:visited {
  border: none;
}

hr {
  border-color: #777;
  margin: 2.5rem 10rem;
}

.updates-rss {
  width: 2rem;
}

.horizontal-image {
  display: block;
  max-width: 900px;
  min-width: 100px;
  margin: .5rem auto;
  width: 100%;
}

@media (min-width: 801px) {
  .horizontal-image {
    width: 80%;
    margin: .5rem auto;
  }
}

.language-sparql .k {
  color: #639c43;
}

.language-sparql .nn {
  color: #0086b4;
}

.language-sparql .ss {
  color: rgb(160, 0, 160);
}

#update-list {
  display: grid;
  grid-template-columns: auto auto auto;
  width: fit-content;
  gap: 0 1rem;
  padding-top: 1rem;
}

#update-list .update-item {
  display: contents;
}

#update-list .update-item .update-date {
  text-align: end;
  font-size: 110%;
}

#update-list .update-item .update-title {
  font-size: 110%;
}

#update-list .update-item .update-description {
  grid-column: 3;
  padding-bottom: 2rem;
}

#update-list .update-item .timeline-circle {
  border-radius: 50%;
  background-color: darkorange;
  border: 1px solid rgb(130, 130, 130);
  width: .9rem;
  height: .9rem;
  margin-top: 50%;
  margin-left: .05rem;
}

#update-list .update-item .timeline-line {
  grid-column: 2;
  width: 1rem;
  background: linear-gradient(rgb(130, 130, 130), rgb(130, 130, 130)) no-repeat center/2px 100%;
}