@charset "UTF-8";
/* FONTS */
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot?mexuxr");
  src: url("../fonts/icomoon.eot?mexuxr#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?mexuxr") format("truetype"), url("../fonts/icomoon.woff?mexuxr") format("woff"), url("../fonts/icomoon.svg?mexuxr#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* general element styling */
* {
  /* include borders and padding in the element width */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* text styling */
  color: #577291;
  font-family: sans-serif;
}

/* site styling */
html {
  /* size */
  width: 100%;
  height: 100%;
  min-height: 100%;
  /* padding and margin */
  padding: 1vh 1vw 1vh 1vw;
  /* colours */
  background: white;
}

/* site content formatting, including header and footer */
body {
  /* height */
  min-height: 100%;
  /* width */
  width: 100%;
  max-width: 100%;
  /* margins, to make it take up equal space left and right of the main content */
  margin: auto;
  /* allows to dynamically distribute the header, main section and footer so that the
     main section takes up all available space between header and footer */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
@media only screen and (min-width: 720px) {
  body {
    width: 50%;
    min-width: 720px;
  }
}

/* general link style */
a {
  font-weight: bold;
  color: #4BACC6;
  text-decoration: none;
}

/* add the underline back when the user hovers over the link */
a:hover {
  text-decoration: underline;
}

/* HEADER */
/* positioning of logo and main menu */
header {
  display: flex;
  /* align the bigger logo and the smaller menu at the bottom line */
  align-items: baseline;
  /* on mobile the main menu moves beneath the logo */
}
@media only screen and (max-width: 620px) {
  header {
    flex-wrap: wrap;
  }
}

/* HEADER: LOGO */
.logo {
  flex: 30%;
  display: inline-block;
}

.logo-link:hover {
  text-decoration: none;
}

.logo-name {
  font-weight: bold;
  font-size: 2em;
}

/* capital P's in ProPores */
.logo-P {
  font-size: 1.25em;
}

/* subtitle next to the logo: WEB */
.logo-subtitle {
  font-weight: bold;
  color: #C0504D;
  font-size: 1em;
}

/* HEADER: MAIN MENU */
.main-menu {
  display: inline-block;
  /* move the main menu beneath the logo on mobile */
  font-weight: bold;
  color: #4BACC6;
  font-size: 1em;
}
@media only screen and (max-width: 620px) {
  .main-menu {
    flex: 100%;
  }
}
.main-menu .main-menu-item.current-page {
  color: #C0504D;
}

/* content between header and footer */
.content {
  /* height */
  height: 100%;
  /* allows to dynamically distribute the header, main section and footer so that the
     main section takes up all available space between header and footer (see body as well) */
  flex: 1;
}

/* section with a header bar and rows of label - input pairs */
.section {
  margin: 2em 0em;
}

/* title of a section consisting of inputs */
.section-title {
  /* text styling */
  font-weight: bold;
  color: #577291;
  font-size: 1em;
  /* border */
  border-style: solid;
  border-radius: 0.4em;
  /* padding between border and title */
  padding: 0.3em 1em 0.3em 1em;
}

/* main body of a section containing rows of label - input pairs */
.section-form {
  /* padding around all input rows */
  padding: 0.3em 0.3333333333em 0.3em 1em;
  /* border to the left of the form */
  border-style: none;
  border-left-style: solid;
  border-left-color: #9BBB59;
  border-bottom-left-radius: 0.6em;
}

/* single row in the section */
.section-form-row {
  /* minimum height for a more even look */
  min-height: 2.5em;
  /* add a little bit of padding above and below */
  padding: 0.25em 0em;
  /* vertically align the columns in the middle, horizontally align them to the left */
  display: flex;
  align-items: center;
  justify-items: left;
  /* on mobile push the input column beneath the label column */
}
@media only screen and (max-width: 620px) {
  .section-form-row {
    flex-wrap: wrap;
  }
}

/* label (left column) of an input form row */
.section-form-row-label {
  /* text styling */
  color: #8d8d8d;
  /* width of the label column */
  flex: 60%;
  /* add some padding to the right of the label for spacing towards the corresponding input */
  padding: 0 2em 0 0;
  /* on mobile the label occupies the entire width and the input is beneath */
}
@media only screen and (max-width: 620px) {
  .section-form-row-label {
    flex: 100%;
    margin: 0 0 0.5em 0;
  }
}

/* input (right column) of an input form row */
.section-form-row-input {
  /* width of the input column */
  flex: 40%;
  /* on mobile the input occupies the entire width and the input is beneath the label */
}
@media only screen and (max-width: 620px) {
  .section-form-row-input {
    flex: 100%;
    margin: 0 0 0.5em 0;
  }
}

/* general styling of input fields, selectors,... */
/* set the style of the wide input elements */
input[type=email], input[type=text], select, textarea, option {
  width: 100%;
  /* space around the input field */
  padding: 0.4em;
  /* border styling */
  border: 0.2em solid #8d8d8d;
  border-radius: 0.3em;
  /* text styling */
  color: #8d8d8d;
  font-size: 0.8em;
  /* remove the weird middle grey background of FireFox select fields */
  background-color: transparent;
}

input[type=text] {
  padding: 0.45em;
}

/* options inside a dropdown menu (= select) */
option {
  /* reset the font size to that of the surrounding select, since the option font size is relative to it */
  font-size: 1em;
}

/* set the style of the small input elements */
input[type=number] {
  width: 35%;
  /* space around the input field */
  padding: 0.4em;
  /* border styling */
  border: 0.2em solid #8d8d8d;
  border-radius: 0.3em;
  /* text styling */
  color: #8d8d8d;
  font-size: 0.8em;
  /* remove the weird middle grey background of FireFox select fields */
  background-color: transparent;
}

input[type=checkbox] {
  /* removing the current appearance is the only way of styling the checkbox */
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  /* make the checkbox square */
  width: 1.5em;
  height: 1.5em;
  /* border style */
  border: 0.2em solid #8d8d8d;
  border-radius: 0.3em;
  /* remove the margin for proper placement in the row */
  margin: 0;
  /* general tick settings */
  text-align: center;
  font-size: 0.8em;
}

/* general styling of the checked checkbox */
input[type=checkbox]:checked {
  /* removing the current appearance is the only way of styling the checkbox */
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  /* change the border colour and background colour */
  border: 0.2em solid #9BBB59;
  background-color: #9BBB59;
}

/* the actual tick in the checked checkbox */
input[type=checkbox]:checked:after {
  /* tick symbol styling */
  content: "✔";
  color: white;
  /* symbol positioning in the centre of the checkbox */
  bottom: 10%;
  position: relative;
}

/* change the cursor style of the dropdown menu */
select {
  cursor: pointer;
}

/* remove the black outline when elements are selected */
input[type=email]:focus, input[type=number]:focus, input[type=text]:focus, input[type=checkbox]:focus, option:focus,
select:focus, a:focus {
  outline-color: #F79646;
}

/* button in the input column */
.input-button {
  /* use the general input settings */
  /* space around the input field */
  padding: 0.4em;
  /* border styling */
  border: 0.2em solid #8d8d8d;
  border-radius: 0.3em;
  /* text styling */
  color: #8d8d8d;
  font-size: 0.8em;
  /* remove the weird middle grey background of FireFox select fields */
  background-color: transparent;
  /* required to change the width of the file chooser button specifically */
  display: inline-block;
  width: 35%;
  /* change the background and border colour */
  background: #9BBB59;
  border-color: #9BBB59;
  /* change the cursor to signal that the button is clickable */
  cursor: pointer;
  /* text styling */
  text-align: center;
  color: white;
}

.input-button:hover {
  opacity: 0.75;
}

/* element showing a single selected file */
.selected-file {
  /* to make the files are displayed in a line */
  display: inline-block;
  /* change the cursor to indicate that the files are clickable */
  cursor: pointer;
  /* text styling */
  color: #8d8d8d;
  font-size: 0.8em;
  /* border styling */
  border: 0.2em solid #8d8d8d;
  border-radius: 1em;
  /* distance to the border and distance to other files */
  padding: 0.25em;
  margin: 0 0.5em 0.5em 0;
}

/* "delete" symbol next to a file element */
.selected-file:after {
  /* the "X" symbol */
  content: "✘";
  /* text styling */
  color: #C0504D;
  /* distance to the file name */
  padding-left: 0.25em;
}

/* general style of the file size information */
.section-form-row-input-info {
  font-size: 0.8em;
  color: #8d8d8d;
}

/* visually emphasise the file size itself */
#fileSize {
  font-weight: bold;
  color: #F79646;
}

/* the bottom section that contains the submit button */
.submit-section {
  /* move the button to the center */
  text-align: center;
  /* set the same space around it as around the other sections */
  margin: 2em 0em;
}

/* the button for submitting the current configuration */
#submitButton {
  /* change the cursor to signal that the button is clickable */
  cursor: pointer;
  /* allows the button to be centred if the button is not full width */
  display: inline-block;
  /* text styling */
  font-weight: bold;
  font-size: 1.25em;
  /* colouration */
  color: white;
  background-color: #9BBB59;
  /* form */
  border-radius: 0.3em;
  /* set the button background size*/
  padding: 0.5em 0;
  width: 50%;
  /* change the size on mobile */
}
@media only screen and (max-width: 620px) {
  #submitButton {
    width: 100%;
  }
}

/* set the text and style of the button dynamically */
#submitButton:after {
  content: "Submit";
}

/* set the text of the button dynamically */
#submitButton.processing:after {
  content: "Processing..";
}

#submitButton.processing {
  background-color: #5e5e5e;
  cursor: wait;
}

#submitButton:hover {
  opacity: 0.75;
}

.citation {
  border-radius: 0.25em;
  background-color: #E6E6E6;
  padding: 0.5em;
  font-style: italic;
}

/* BROWSER */
.protein-section {
  margin: 1em 0;
  border: solid;
  padding: 0.5em;
  border-radius: 0.5em;
}

.protein-section-attributes {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 719px) {
  .protein-section-attributes {
    flex-wrap: wrap;
    justify-content: left;
  }
}

@media only screen and (max-width: 719px) {
  .protein-section-attribute-col {
    margin-right: 1em;
    margin-bottom: 0.5em;
  }
}

@media only screen and (max-width: 620px) {
  .protein-section-attribute-col:nth-child(1), .protein-section-attribute-col:nth-child(2), .protein-section-attribute-col:nth-child(5) {
    width: 40%;
  }
}

@media only screen and (max-width: 620px) {
  .protein-section-attribute-col:nth-child(3), .protein-section-attribute-col:nth-child(4) {
    width: 100%;
  }
}

.protein-section-title-row {
  margin-bottom: 0.5em;
}

.protein-section-title-identifier {
  font-weight: bold;
  color: #C0504D;
  font-size: 1.25em;
}

.protein-section-title-name {
  color: #FFA700;
  font-weight: bold;
}

.protein-section-title-identifier-link {
  font-weight: bold;
  font-size: 1.25em;
}

.run-section {
  border-radius: 0.5em;
  padding: 0.5em;
  background-color: #E6E6E6;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: start;
  margin-bottom: 0.5em;
  font-size: 0.8em;
}

.run-section:last-child {
  margin-bottom: 0;
}

.run-section-attribute-col {
  margin: 0.25em 0.5em;
}

.protein-section-attribute-title, .run-section-attribute-title {
  font-weight: bold;
}

.protein-section-attribute-value, .run-section-attribute-value {
  color: #C0504D;
  font-weight: bold;
}

.run-section-attribute-col {
  flex: 20%;
}
@media only screen and (max-width: 620px) {
  .run-section-attribute-col {
    flex: 45%;
  }
}
@media only screen and (max-width: 719px) {
  .run-section-attribute-col {
    flex: 30%;
  }
}

.run-section-launch-button {
  cursor: pointer;
  background-color: #9BBB59;
  text-align: center;
  color: white;
  font-weight: bold;
  padding: 0.5em;
  border: solid #9BBB59;
  width: 10em;
  display: inline-block;
  border-radius: 0.25em;
}

.run-section-launch-button:hover {
  opacity: 0.75;
}

.protein-section-run-toggle-row {
  display: flex;
  margin-top: 0.5em;
  cursor: pointer;
}

.protein-section-run-toggle-label, .protein-section-run-toggle-symbol {
  font-weight: bold;
  color: #8d8d8d;
  margin: 0.25em 0;
}

.protein-section-run-toggle-label {
  flex: 1;
}

.protein-section-run-toggle-symbol:after {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  font-weight: bold;
  margin-right: 0.5em;
}

.protein-section-run-toggle-symbol.collapsed:after {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  font-weight: bold;
}

/* BROWSER FILTERS */
.browser-filters {
  margin: 2em 0;
  border-bottom: solid #577291;
  padding: 0 0 0.5em 0;
}

/* BROWSER FILTERS - HEADER */
.filters-header {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 620px) {
  .filters-header {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}

.filters-header-show-col {
  flex-grow: 1;
}
@media only screen and (max-width: 620px) {
  .filters-header-show-col {
    width: 100%;
  }
}

.filters-header-sort-col {
  width: 35%;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 620px) {
  .filters-header-sort-col {
    width: 100%;
    margin-bottom: 0.5em;
  }
}

.filters-header-sort-label {
  padding-right: 0.5em;
  color: #8d8d8d;
}

.filter-header-sort-selector {
  flex-grow: 1;
  cursor: pointer;
}

#show-filters {
  cursor: pointer;
  color: #8d8d8d;
}

#show-filters:hover {
  font-weight: bold;
}

#show-filters:before {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  font-weight: bold;
  margin-right: 0.25em;
}

#show-filters.collapsed:before {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  font-weight: bold;
  margin-right: 0.25em;
}

/* BROWSER FILTERS - FILTERS */
.filters-section {
  display: flex;
  border-top: solid #577291;
  padding: 0.5em 0 0 0;
  margin-top: 0.5em;
  justify-content: space-between;
  align-items: flex-end;
}
@media only screen and (max-width: 719px) {
  .filters-section {
    flex-wrap: wrap;
  }
}

.filters-collapsible-input {
  display: flex;
  width: 70%;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 719px) {
  .filters-collapsible-input {
    width: 100%;
    margin-bottom: 0.5em;
  }
}

.filters-input-col {
  width: 49%;
}

.filters-input-col-label {
  width: 100%;
  color: #8d8d8d;
}

.filters-input-col-input {
  width: 100%;
}

.filters-buttons {
  width: 25%;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 719px) {
  .filters-buttons {
    width: 49%;
  }
}

.filters-button {
  width: 49%;
  text-align: center;
  background-color: #9BBB59;
  color: white;
  padding: 0.4em 1em;
  border-radius: 0.25em;
  border: solid #9BBB59;
  cursor: pointer;
  font-weight: bold;
}

.filters-button:hover {
  opacity: 0.75;
}

/* TOOLTIPS */
.tooltip {
  /* allows the tooltip to be positioned right below the question mark */
  position: relative;
  /* make the cursor form match the tooltip */
  cursor: help;
  /* make the question mark fit right after the previous element */
  display: inline-block;
  /* question mark styling */
  font-weight: bold;
  color: #F79646;
  /* put a dotted line beneath the question mark to indicate hover-ability */
  border-bottom: 0.15em dotted #F79646;
}

.tooltip .tooltip-text {
  /* text styling */
  text-align: left;
  font-weight: normal;
  color: white;
  /* text box styling */
  padding: 0.75em;
  border-radius: 0.5em;
  background-color: #5e5e5e;
  /* make it invisible by default, until it is hovered */
  display: none;
  /* set the width of the tooltip text and position it so that the horizontal middle is where the question mark is */
  width: 25em;
  margin-left: -12.5em;
  /* use a different width for mobile */
  /* allows to position the tooltip text on top of the content below */
  position: absolute;
  /* the higher, the farther the tooltip text is beneath the question mark */
  top: 175%;
  /* the higher, the farther the tooltip text is to the right */
  left: 50%;
  /* ensure that the tooltip text is on top */
  z-index: 1;
  /* enable slow fade-in of the tooltip text */
  opacity: 0;
  transition: opacity 0.3s;
}
@media only screen and (max-width: 620px) {
  .tooltip .tooltip-text {
    width: 35vw;
    margin-left: -17.5vw;
  }
}

/* add an arrow tip pointing from the tooltip text box to the question mark */
.tooltip .tooltip-text::after {
  content: "";
  /* to position the arrow tip freely */
  position: absolute;
  /* the higher the value, the farther up the arrow tip */
  bottom: 100%;
  /* the higher the value, the farther to the right the arrow tip */
  left: 50%;
  /* size of the arrow tip */
  margin-left: -0.5em;
  border-width: 0.5em;
  border-style: solid;
  /* essentially there is a square made out of the border, by making 3 sides of the border transparent,
   * one inward facing triangle is left, constituting the arrow tip
   * => leaving the bottom part visible results in an upwards pointing arrow
   */
  border-color: transparent transparent #5e5e5e transparent;
}

/* make the tooltip text visible on hover */
.tooltip:hover .tooltip-text {
  display: inline-block;
  opacity: 1;
}

/* try to make it visible on mobile as well */
.tooltip:active .tooltip-text {
  display: inline-block;
  opacity: 1;
}

/* FOOTER */
footer {
  text-align: center;
  margin-top: 1em;
  padding: 0.5em 0;
  border-top: solid #8d8d8d;
  font-weight: bold;
  background-color: #E6E6E6;
  border-radius: 0.5em;
}

.footer-menu {
  font-weight: bold;
  color: #4BACC6;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 719px) {
  .footer-menu {
    flex-wrap: wrap;
  }
}

.footer-copyright {
  margin-top: 0.25em;
}

.footer-menu-separator {
  display: inline-block;
  color: #4BACC6;
  margin: 0 0.25em;
}

@media only screen and (max-width: 719px) {
  .footer-menu-separator-hide {
    display: none;
  }
}

@media only screen and (max-width: 719px) {
  .footer-chair {
    width: 100%;
    margin-top: 0.25em;
  }
}

/* TOGGLES */
.hidden {
  display: none;
}

#top-button {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 5vh;
  /* Place the button at the bottom of the page */
  right: 2vw;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background: transparent;
  color: #C0504D;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  font-size: 3em;
  /* Increase font size */
}

#top-button:after {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  font-weight: bold;
}

/*# sourceMappingURL=general.css.map */