@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('fonts/oswald/oswald-v40-latin-200.woff2') format('woff2'),
       url('fonts/oswald/oswald-v40-latin-200.woff') format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/oswald/oswald-v40-latin-300.woff2') format('woff2'),
       url('fonts/oswald/oswald-v40-latin-300.woff') format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/oswald/oswald-v40-latin-regular.woff2') format('woff2'),
       url('fonts/oswald/oswald-v40-latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('fonts/oswald/oswald-v40-latin-500.woff2') format('woff2'),
       url('fonts/oswald/oswald-v40-latin-500.woff') format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('fonts/oswald/oswald-v40-latin-600.woff2') format('woff2'),
       url('fonts/oswald/oswald-v40-latin-600.woff') format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/oswald/oswald-v40-latin-700.woff2') format('woff2'),
       url('fonts/oswald/oswald-v40-latin-700.woff') format('woff');
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  color: #FFF;
  font: 16px/1.5 Arial, Helvetica, sans-serif;
  margin: 0;
  overflow-y: scroll;
  padding: 0;
}

a {
  color: inherit;
}

a:hover {
  color: #FFF;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

form {
  margin: 0 0 1rem;
}

h1, h2, h3, h4 {
  margin: 0px;
  padding: 0px;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
}

h1 {
  font-size: 2.4em;
  margin-bottom: 2rem;
  max-width: 700px;
}

h2 {
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  font-size: 1.6em;
  margin: 2rem 0 1rem;
  padding-bottom: .5rem;
  max-width: 700px;
}

main > h2:first-child {
  border: 0;
  font-size: 2.4em;
  margin-bottom: 2rem;
  padding: 0;
}

h3 {
  font-size: 1.4em;
  margin: 2rem 0 1rem;
  max-width: 700px;
}

h4 {
  font-size: 1.2em;
  margin-bottom: 1rem;
  max-width: 700px;
}

hr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, .5);
  margin: 1rem 0;
}

img.border {
  border: 6px solid #E1F1F6;
}

img.alignleft {
  float: left;
  margin-right: 25px;
}

img.alignright {
  float: right;
}

img.aligncenter {
  margin: 0px auto;
}

input,
select,
textarea {
  font: inherit;
}

legend {
  font-size: 14px;
  font-weight: bold;
}

ol,
ul {
  margin: 0 0 1rem;
  max-width: 700px;
  padding-left: 2rem;
}

p {
  margin: 0 0 1rem;
  max-width: 700px;
}

sub,
sup {
  line-height: 1;
}

table {
  border-collapse: collapse;
  margin: 1rem 0;
  width: calc(100% + 10px);
}

tr, th, td {
  padding: 5px;
  text-align: left;
  vertical-align: top;
}

th {
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}

td {
  border-bottom: 1px solid rgba(255, 255, 255, .25);
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

.account {
  background: #eee;
  color: #000;
  position: absolute;
  top: 0;
  right: 20px;
}

.account a {
  padding: 5px 15px 5px 10px !important;
  white-space: nowrap;
}

.account .icon {
  margin: -2px 0;
}

.account .user {
  border-right: 1px solid #BEBEBE;
  flex: auto;
  font-size: 14px;
  max-width: calc(100vw - 9rem); /* space for button + margin */
  overflow: hidden;
  padding: 10px 10px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account .user .icon {
  margin: -6px 0;
}

.bokeh-iframe {
  border: 0;
  margin: 0 -15px;
  width: calc(100% + 30px);
  height: 2000px;
}

.error {
  background: red;
  color: #FFF;
  font-weight: bold;
  max-width: 700px;
  padding: .5rem 1rem;
}

.flex {
  display: flex;
  margin-left: -.5rem !important;
  margin-right: -.5rem !important;
  max-width: none;
}

@media (max-width: 699px) {
  .flex {
    display: block;
  }
}

.flex > * {
  flex: 1;
  margin-left: .5rem !important;
  margin-right: .5rem !important;
}

@media (max-width: 699px) {
  .flex > * + * {
    margin-top: 1rem;
  }
}

.footer {
  max-width: 900px;
  min-width: 200px;
  min-height: 140px;
  margin: 0px auto;
  padding: 0 1rem;
}

.footer p {
  color: #6c757d;
  font-size: 14px;
  line-height: normal;
  margin: 0;
  max-width: none;
  padding-top: 30px;
  text-align: center;
}

.footer a {
  text-decoration: underline;
  color: #6c757d;
}

.form-style-1 {
  max-width: 700px;
  list-style: none;
  padding: 0;
}

.form-style-1 label {
  display: block;
  font-size: 14px;
  font-weight: bold;
}

.form-style-1 [type=checkbox] {
  opacity: 0;
  position: absolute;
}

.form-style-1 [type=checkbox] + label {
  font-size: 16px;
  font-weight: normal;
  padding-left: 2rem;
}

.form-style-1 [type=checkbox] + label::before {
  background: #FFF;
  border: 1px solid #BEBEBE;
  clear: left;
  color: #000;
  content: '';
  float: left;
  font-size: 1.5rem;
  height: 1.5rem;
  line-height: 1;
  margin: 0 0 0 -2rem;
  text-align: center;
  vertical-align: top;
  width: 1.5rem;
}

.form-style-1 [type=checkbox]:checked + label::before {
  content: '✓';
}

.form-style-1 [type=checkbox]:focus + label::before {
  box-shadow: 0 0 8px #88D5E9;
  border: 1px solid #88D5E9;
}

.form-style-1 li {
  margin: 1rem 0;
}

.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=file],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
.form-style-1 input[type=password],
.form-style-1 textarea,
.form-style-1 select {
  background: #FFF;
  box-sizing: border-box;
  border:1px solid #BEBEBE;
  color: #000;
  font-size: 16px;
  font-weight: normal;
  padding: 7px;
  margin:0px;
  min-height: 42px;
  outline: none;
  width: 100%;
}

.form-style-1 textarea {
  min-height: 6rem;
  resize: vertical;
}

.form-style-1 select {
  display: block;
  min-width: 5rem;
  width: auto;
}

.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=file]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 input[type=password]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus {
  box-shadow: 0 0 8px #88D5E9;
  border: 1px solid #88D5E9;
}

.form-style-1 input[type=text]:disabled,
.form-style-1 input[type=date]:disabled,
.form-style-1 input[type=datetime]:disabled,
.form-style-1 input[type=file]:disabled,
.form-style-1 input[type=number]:disabled,
.form-style-1 input[type=search]:disabled,
.form-style-1 input[type=time]:disabled,
.form-style-1 input[type=url]:disabled,
.form-style-1 input[type=email]:disabled,
.form-style-1 input[type=password]:disabled,
.form-style-1 textarea:disabled,
.form-style-1 select:disabled{
  background: rgba(255, 255, 255, .75);
}

.form-style-1 input[type=submit],
.form-style-1 input[type=button],
.button {
  background: #4B99AD;
  border: none;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  font-family: oswald, sans-serif;
  font-weight: normal;
  min-height: 42px;
  padding: 8px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.form-style-1 input[type=submit]:hover,
.form-style-1 input[type=button]:hover,
.form-style-1 input[type=submit]:focus,
.form-style-1 input[type=button]:focus,
.button:hover,
.button:focus {
  background: #4691A4;
  box-shadow: none;
}

.form-style-1 ::file-selector-button {
  background: #eee;
  border: 0;
  border-right: 1px solid #BEBEBE;
  font-weight: normal;
  color: #000;
  height: 42px;
  margin: -9px 7px -9px -9px;
  padding: 8px;
}

.form-style-1 .required {
  color:red;
}

.header {
  margin: 0 auto;
}

.hiddenclick {
  font-weight: bold;
  color: #F00;
  text-decoration: none;
  cursor: pointer;
}

.hiddenclick a {
  color: #F00;
  text-decoration: none;
}

.hiddenclick a:visited {
  color: #F00;
  text-decoration: none;
}

.hiddenclickimg {
  display: none;
}

.hiddenimg {
  display: none;
}

.hiddentxt {
  font-weight: bold;
  z-index:99;
}

.hiddentxt a {
  text-decoration: none;
  z-index: 99;
}

.hiddentxt:hover ~ .hiddenimg {
  display: block;
  position: absolute;
  z-index: 2
}

.highlightbox {
  background-color: rgba(255, 255, 255, .15);
  margin: 2rem -40px;
  max-width: none;
  padding: 2rem 40px;
}

@media (max-width: 959px) {
  .highlightbox {
    margin: 1rem -20px;
    padding: 1rem 20px;
  }
}

.highlightbox > :first-child {
  margin-top: 0;
}

.highlightbox > :last-child {
  margin-bottom: 0;
}

.icon {
  stroke: currentColor;
  stroke-width: 2px;
  vertical-align: top;
}

.input-group {
  display: flex;
  font-size: 16px;
}

.input-group > span {
  background: #eee;
  border: 1px solid #BEBEBE;
  font-weight: normal;
  margin-left: -1px;
  color: #000;
  padding: 7px;
  white-space: nowrap;
}

.list-unstyled {
  list-style: none;
  padding: 0;
}

.logo {
  color: #153571;
  font: 64px/1 'Oswald', sans-serif;
  letter-spacing: -3px;
  padding: 40px 0 40px 40px;
}

@media (max-width: 959px) {
  .logo {
    padding-left: 20px;
  }

  .logo.-small {
    font: 32px/1 'Oswald', sans-serif;
    letter-spacing: -1px;
    padding: 50px 0 30px 20px;
  }
}

.logo h1 {
  font: inherit;
  margin: 0;
  padding: 0;
}

.logo span {
  display: inline-block;
  letter-spacing: normal;
  max-width: 90vw;
  font-size: .33333em;
}

@media (max-width: 959px) {
  .logo.-small span {
    font-size: .5em;
  }
}

.logo a {
  border: none;
  background: none;
  margin-right: 1rem;
  text-decoration: none;
  color: #153571;
}

.menu {
  margin: 0 auto;
  padding: 0px 40px;
}

@media (max-width: 959px) {
  .menu {
    padding: 0;
  }
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  max-width: none;
  padding: 0px 0px 0px 0px;
  list-style: none;
  line-height: normal;
}

.menu a {
  display: block;
  margin-right: 1px;
  padding: 15px 20px;
  text-decoration: none;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  color: #153571;
  border: none;
}

.menu .current_page_item a {
  background: #153571;
  color: #FFF;
}

.menu a:hover {
  background: repeat #153571;
  color: #FFF;
}

.menu [href=hydra-submission] {
  background: #eee;
}

.page {
  background: #153571;
  margin: 0px auto;
  max-width: 100vw;
  overflow: auto;
  padding: 40px;
}

.page > :first-child {
  margin-top: 0;
}

@media (max-width: 959px) {
  .page {
    padding: 25px 20px;
  }
}

.hydra-compound {
  position: relative;
}

.hydra-compound.-has-value::before {
  background: #4691A4;
  border-radius: 50%;
  box-shadow: 0 0 8px #88D5E9;
  content: '';
  display: block;
  height: .5rem;
  left: -.5rem;
  pointer-events: none;
  position: absolute;
  top: .5rem;
  width: .5rem;
}

.hydra-compound h3 {
  margin: 0 0 .5rem;
}

.hydra-compound h3 > button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  text-align: left;
  margin: -.5rem -1rem;
  padding: .5rem 2rem .5rem 1rem;
  font: inherit;
  width: calc(100% + 2rem);
}

.hydra-compound h3 > button:focus,
.hydra-compound h3 > button:hover {
  background: rgba(255, 255, 255, .1);
}

.hydra-compound h3 > [aria-expanded=true] {
  background: rgba(255, 255, 255, .1);
  box-shadow: -1px 0 rgba(255, 255, 255, .5), 1px 0 rgba(255, 255, 255, .5), 0 -1px rgba(255, 255, 255, .5);
}

.hydra-compound h3 > button .icon {
  float: right;
  margin-right: -1rem;
  margin-top: 3px;
}

.hydra-compound h3 > [aria-expanded=true] .icon {
  transform: rotate(180deg);
}

.hydra-compound fieldset {
  box-shadow: -1px 0 rgba(255, 255, 255, .5), 1px 0 rgba(255, 255, 255, .5), 0 1px rgba(255, 255, 255, .5);
  margin: -.5rem -1rem 1.5rem;
  padding: 1rem;
}

.hydra-compound fieldset > :last-child {
  margin-bottom: 0;
}

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

.submenu {
  margin: 0 auto 40px;
  background: repeat #153571;
}

.submenu ul {
  display: flex;
  flex-wrap: wrap;
  margin: -20px;
  padding: 0;
  list-style: none;
}

.submenu button {
  background-color: inherit;
}

.submenu a, 
.submenu button {
  display: block;
  margin: 10px 20px;
  padding: 10px 0;
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
  border: none;
}

.submenu .current_page_item a,
.submenu .current_page_item button {
  border-bottom: 2px solid;
}

.submenu a:hover,
.submenu a:focus,
.submenu button:hover {
  border-bottom: 2px solid rgba(255, 255, 255, .5);
}

.success {
  background: rgba(255, 255, 255, .1);
  font-weight: bold;
  max-width: 700px;
  padding: .5rem 1rem;
}

.warning {
  background: #A8791F;
  font-weight: bold;
  max-width: 700px;
  padding: .5rem 1rem;
}

.wrapper {
  margin: 0px auto;
  max-width: 1280px;
  position: relative;
}

.formic-acid-container h1,
.formic-acid-container h2 {
  max-width: none;
}

.database-container {
  display: flex;
  position: relative;
  margin-top: 24px;
}

@media (max-width: 793px) {
  .database-container {
    flex-direction: column;
  }
}

.database-container .filters-container {
  margin-right: 20px;
  width: 16.6%;
  margin-top: -6px;
}

@media (max-width: 793px) {
  .database-container .filters-container {
    margin-right: 0;
    margin-bottom: 20px;
    width: 100%;
  }
}

.database-container .content-container {
  width: 83.3%;
}

@media (max-width: 793px) {
  .database-container .content-container {
    width: 100%;
  }
}

.database-container h3 {
  margin: 0;
}

.database-container p {
  margin: 0;
  max-width: none;
}

.database-container .katex {
  font-size: 16px;
}

.database-container .filters-container .submenu_topic {
  border: 2px solid white;
}

@media (max-width: 793px) {
  .database-container .filters-container .submenu_topic {
    margin: 0;
  }
}

.database-container .filters-container .submenu_content {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

.database-container .filters-container .filter.hidden {
  display: none;
}

.database-container .filters-container .filter {
  margin-bottom: 20px;
  max-width: 100%;
}

.filters-container .radio-group {
  flex: 1;
  overflow: hidden;
  border-radius: 4px;
  outline: none;
  background: #fff;
}

.filters-container .radio-group ul {
  margin: 0;
  padding: 0;
}

.filters-container .submenu_content .radio-group label {
  padding: 0.3rem 0.7rem;
  color: #222;
  display: block;
  cursor: pointer;
}

.filters-container .submenu_content .radio-group label:hover {
  background: #eee;
}

.filters-container .submenu_content .radio-group input {
  display: none;
}


.filters-container .submenu_content .radio-group input:checked + label {
  background: #ccc;
}

.database-container .content-container {
  position: relative;
}

.database-container #chart, .chart-container {
  position: relative;
  background: white;
  border-radius: 4px;
  min-height: 500px;
}

.formic-acid-library-container #chart .lines-group {
  clip-path: url(#clip);
}

.database-container .x-axis {
  color: black;
}

.database-container .x-axis-label {
  position: absolute;
  top: 0;
  left: 0;
  color: black;
}

.formic-acid-library-container #chart circle {
  cursor: pointer;
}

.database-container .chart-tooltip {
  background: #e3e3e3;
  padding: 12px;
  color: #222;
  border-radius: 4px;
}

.database-container .chart-tooltip p {
  margin: 0;
}

.formic-acid-library-container #reset-zoom-button {
  position: absolute;
  top: 396px;
  right: 24px;
  z-index: 100;
  display: none;
  background: #fff;
  color: #888;
  outline: none;
  border: 1px solid #888;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
}

.formic-acid-library-container #reset-zoom-button:hover,
.formic-acid-library-container #reset-zoom-button:focus,
.formic-acid-library-container #reset-zoom-button:active {
  background: #fafafa;
  color: #666;
}

.formic-acid-library-container #reset-zoom-button.visible {
  display: block;
}

.database-container .selected-container {
  background: white;
  border-radius: 4px;
  padding: 0.6rem;
  margin-top: 1rem;
  color: #222;
  font-size: 14px;
}

.database-container .selected-container h3 {
  margin-bottom: 10px;
}

.database-container .selected-container .no-selected {
  display: none;
}

.database-container .selected-container .no-selected.visible {
  display: block;
}

.database-container .selected-container .selected-content {
  display: none;
  position: relative;
}

.database-container .selected-container .selected-content.visible {
  display: flex;
  flex-direction: column;
}
.database-container .selected-container .row {
  display: flex;
  margin-bottom: 10px;
}

.database-container .selected-container .col {
  flex: 1;
}

.database-container .selected-container .label {
  font-weight: bold;
  white-space: nowrap;
}

.database-container .selected-container a {
  color: #1a418a;
}

.formic-acid-library-container #toggle-brush {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.database-container .data-container {
  margin-top: 20px;
  background: white;
  border-radius: 4px;

}

.database-container .data-container {
  display: flex;
  flex-direction: column;
  color: #222;
}

.database-container .data-container .data-header {
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.database-container .data-container .data-body {
  flex-shrink: 0;
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  padding: 15px;
  font-size: 12px;
}

.database-container .data-container .data-body .katex {
  font-size: 13px;
}

.download-button, .reset-button {
  text-decoration: none;
  color: #fff;
  height: 100%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 4px;
  outline: 0;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.download-button[disabled=true] {
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.download-button[disabled=true] {
  background-color: #667b66;
  opacity: 0.65;
}

.download-button {
  background-color: #5cb85c;
  border: 1px solid #4cae4c;
}

.reset-filters-button {
  background-color: inherit;
  border: 2px solid #fff;
}
.reset-filters-button:hover,
.reset-filters-button:focus,
.reset-filters-button:active {
  border: 2px solid #ddd;
  color: #ddd;
}

.reset-filters-button[hidden=hidden] {
  display: none;
}

.database-container .data-container .amount-data {
  color: #aaa;
}

.database-container td.gridjs-td {
  padding: 6px 12px;
}

.database-container .gridjs-thead {
  position: relative;
  z-index: 10;
}

.database-container th.gridjs-th {
  padding: 6px 12px;
}

.formic-acid-library-container .filter-iso .katex-html .mathnormal,
.formic-acid-library-container .data-container .katex-html .mathnormal{
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}

.hydra-container .chart-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.captcha-container {
  display: flex;
}

.captcha-image {
  margin-right: 12px;
}

.chart-container .loading-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  background: white;
}

.chart-container .loading-container svg {
  color: #153571;
  transform-origin: center;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}