@charset "UTF-8";
@font-face {
  font-family: NexusSans;
  font-weight: normal;
  src: url("../fonts/NexusSansWebPro.eot");
  src: url("../fonts/NexusSansWebPro.eot?#iefix") format("embedded-opentype"), url("../fonts/NexusSansWebPro.woff") format("woff"), url("../fonts/NexusSansCompPro.ttf") format("truetype"); }

@font-face {
  font-family: NexusSans;
  font-weight: 700;
  src: url("../fonts/NexusSansWebPro-Bold.eot");
  src: url("../fonts/NexusSansWebPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NexusSansWebPro-Bold.woff") format("woff"), url("../fonts/NexusSansCompPro-Bold.ttf") format("truetype"); }

@font-face {
  font-family: NexusSerif;
  font-weight: normal;
  src: url("../fonts/NexusSerifWebPro.eot");
  src: url("../fonts/NexusSerifWebPro.eot?#iefix") format("embedded-opentype"), url("../fonts/NexusSerifWebPro.woff") format("woff"), url("../fonts/NexusSerifCompPro.ttf") format("truetype"); }

@font-face {
  font-family: NexusSerif;
  font-weight: 700;
  src: url("../fonts/NexusSerifWebPro-Bold.eot");
  src: url("../fonts/NexusSerifWebPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NexusSerifWebPro-Bold.woff") format("woff"), url("../fonts/NexusSerifCompPro-Bold.ttf") format("truetype"); }

@font-face {
  font-family: Mendeley;
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/mendeley.eot");
  src: url("../fonts/mendeley.eot?#iefix") format("embedded-opentype"), url("../fonts/mendeley.woff") format("woff"), url("../fonts/mendeley.ttf") format("truetype"); }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  -webkit-text-size-adjust: 100%; }
  html *, html *:before, html *:after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit; }
  html body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-color: #F5F5F5;
    color: #474747;
    font-family: NexusSans, Arial, sans-serif;
    font-size: 16px;
    margin: 0;
    min-height: 100%;
    padding: 0;
    text-rendering: optimizeLegibility; }
    html body button {
      border-radius: 0; }
    html body > .content {
      margin: 0 8px 24px; }
      html body > .content:before, html body > .content:after {
        content: "";
        display: table; }
      html body > .content:after {
        clear: both; }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        html body > .content {
          margin: 0 16px 3rem; } }
      @media only screen and (min-width: 768px) and (max-width: 979px) {
        html body > .content {
          margin: 0 16px 3rem; } }
      @media only screen and (min-width: 980px) {
        html body > .content {
          margin: 0 auto 3rem; } }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * Center content inside a container
 */
.with-container {
  margin: 0 auto;
  max-width: 980px; }

/**
 * Float helpers
 */
.float-left {
  float: left; }

.float-right {
  float: right; }

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

/**
 * Hidden helpers for different breakpoints
 */
.hidden {
  display: none;
  /**
   * NOTE:
   *   this additional class is used to not break any of current behaviours
   *   the `important` would be a default in few next releases
   */ }
  .hidden.indeed {
    display: none !important; }

@media only screen and (max-width: 479px) {
  .xs-hidden {
    display: none; }
    .xs-hidden.indeed {
      display: none !important; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .s-hidden {
    display: none; }
    .s-hidden.indeed {
      display: none !important; } }

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .m-hidden {
    display: none; }
    .m-hidden.indeed {
      display: none !important; } }

@media only screen and (min-width: 980px) {
  .l-hidden {
    display: none; }
    .l-hidden.indeed {
      display: none !important; } }

/**
 * Display block for different breakpoints
 */
.block {
  display: block; }

@media only screen and (max-width: 479px) {
  .xs-block {
    display: block; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .s-block {
    display: block; } }

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .m-block {
    display: block; } }

@media only screen and (min-width: 980px) {
  .l-block {
    display: block; } }

/**
 * No wrap
 */
.nowrap {
  white-space: nowrap; }

/**
 *  Remove rounding
 */
.no-border-radius {
  border-radius: 0 !important; }

/**
 * @name Atoms
 * @description The basic building block elements and simple classes.
 */
/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Animations
 */
/**
 * @name Loading
 * @markup
 * <div class="loading">
 *   <div class="bounce1"></div>
 *   <div class="bounce2"></div>
 *   <div class="bounce3"></div>
 * </div>
 */
.loading {
  margin: 0 auto;
  width: 4.375rem;
  text-align: center; }
  .loading div {
    -webkit-animation: bounce-animation 1.4s infinite ease-in-out;
            animation: bounce-animation 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    background-color: #007398;
    border-radius: 100%;
    display: inline-block;
    height: 1rem;
    width: 1rem; }
  .loading .bounce1 {
    -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s; }
  .loading .bounce2 {
    -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s; }

@-webkit-keyframes bounce-animation {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes bounce-animation {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

/**
 * @name Spin
 * @markup
 * <div class="spin" style="height:24px;width:24px;">
 *  <p>spin</p>
 * </div>
 */
.spin, .spin-icon:before {
  -webkit-animation: spinner-animation 2s infinite linear;
          animation: spinner-animation 2s infinite linear;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%; }

/**
 * @name Spinning Indicator
 * @description Applies a spinning icon to the component
 * @markup
 * <div class="spin-icon" style="width:20px;"></div>
 */
.spin-icon {
  display: block; }
  .spin-icon:before {
    content: ""; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Buttons
 * @description There are 5 different types of buttons. <strong>Primary, secondary, inverse, basic link with icon</strong> and <strong>basic link without icon</strong>.<br> (We'll show this examples inside a button group molecule to visually generate spacing between them).
 */
/**
 * @name Primary button
 * @description Use the class `primary-button`.
 * @markup
 * <div class="button-group">
 *   <button class="button-primary">Primary button</button>
 *   <a href="" class="button-primary">Primary button as a link</a>
 * </div>
 * <br>
 * <div class="button-group">
 *   <button class="button-primary with-icon-before icon-navigateleft">Primary button</button>
 *   <a href="" class="button-primary with-icon-before icon-navigateleft">Primary button as a link</a>
 *   <button class="button-primary with-icon-before icon-search">Primary button</button>
 *   <button class="button-primary with-icon-after icon-navigateright">Primary button</button>
 *   <button class="button-primary with-icon-after icon-navigateright" disabled="disabled">Primary button</button>
 * </div>
 */
.button-primary {
  -webkit-transition: 111ms ease-out;
  transition: 111ms ease-out;
  -webkit-transition-property: background, border, color;
  transition-property: background, border, color;
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  background: #007398;
  border: 2px solid #007398;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  height: 2rem;
  line-height: 0;
  outline: none;
  padding: 0 .438rem;
  vertical-align: middle;
  white-space: nowrap; }
  .button-primary:hover {
    -webkit-transition: 74ms ease-out;
    transition: 74ms ease-out;
    -webkit-transition-property: background, border, color;
    transition-property: background, border, color; }
  .button-primary .spinning-indicator {
    color: #FFF; }
  .button-primary:active {
    background: #E9711C;
    border: 2px solid #E9711C; }
  @media only screen and (min-width: 980px) {
    .button-primary:hover, .button-primary:focus {
      background: #E9711C;
      border: 2px solid #E9711C; } }
  .button-primary:disabled {
    background: #DCDCDC;
    border: 2px solid #DCDCDC;
    color: #FFF;
    cursor: not-allowed; }
    .button-primary:disabled .spinning-indicator {
      color: #FFF; }
  .button-primary.with-icon-before:before, .button-primary.with-icon-after:after {
    -webkit-transition: 111ms ease-out;
    transition: 111ms ease-out;
    -webkit-transition-property: color;
    transition-property: color; }
    .button-primary.with-icon-before:before:hover, .button-primary.with-icon-after:after:hover {
      -webkit-transition: 74ms ease-out;
      transition: 74ms ease-out;
      -webkit-transition-property: color;
      transition-property: color; }
  .button-primary.with-icon-after:after {
    margin: 0 -4px 0 calc(.5rem - 4px); }
  .button-primary.with-icon-before:before {
    margin: 0 calc(.5rem - 4px) 0 -4px; }

a.button-primary {
  padding-top: .875rem; }
  a.button-primary:hover {
    text-decoration: none; }

/**
 * @name secondary button
 * @description Use the class `secondary-button`.
 * @markup
 * <div class="button-group">
 *   <button class="button-secondary">Secondary button</button>
 *   <a href="" class="button-secondary">Secondary button as a link</a>
 * </div>
 * <br>
 * <div class="button-group">
 *   <button class="button-secondary with-icon-before icon-navigateleft">Secondary button</button>
 *   <button class="button-secondary with-icon-after icon-navigateright">Secondary button</button>
 *   <button class="button-secondary with-icon-after icon-navigateright" disabled="disabled">Secondary button</button>
 * </div>
 */
.button-secondary {
  -webkit-transition: 111ms ease-out;
  transition: 111ms ease-out;
  -webkit-transition-property: background, border, color;
  transition-property: background, border, color;
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  background: #FFF;
  border: 2px solid #B9B9B9;
  color: #323232;
  cursor: pointer;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  height: 2rem;
  line-height: 0;
  outline: none;
  padding: 0 .438rem;
  vertical-align: middle;
  white-space: nowrap; }
  .button-secondary:hover {
    -webkit-transition: 74ms ease-out;
    transition: 74ms ease-out;
    -webkit-transition-property: background, border, color;
    transition-property: background, border, color; }
  .button-secondary.with-icon-before::before, .button-secondary.with-icon-after::after {
    color: #007398; }
  .button-secondary:active {
    background: #E9711C;
    border: 2px solid #E9711C;
    color: #FFF; }
    .button-secondary:active.with-icon-before::before, .button-secondary:active.with-icon-after::after {
      color: #FFF; }
  @media only screen and (min-width: 980px) {
    .button-secondary:hover, .button-secondary:focus {
      background: #E9711C;
      border: 2px solid #E9711C;
      color: #FFF; }
      .button-secondary:hover.with-icon-before::before, .button-secondary:hover.with-icon-after::after, .button-secondary:focus.with-icon-before::before, .button-secondary:focus.with-icon-after::after {
        color: #FFF; } }
  .button-secondary:disabled {
    background: #FFF;
    border: 2px solid #DCDCDC;
    color: #DCDCDC;
    cursor: not-allowed; }
    .button-secondary:disabled.with-icon-before::before, .button-secondary:disabled.with-icon-after::after {
      color: #DCDCDC; }
  .button-secondary.with-icon-before:before, .button-secondary.with-icon-after:after {
    -webkit-transition: 111ms ease-out;
    transition: 111ms ease-out;
    -webkit-transition-property: color;
    transition-property: color; }
    .button-secondary.with-icon-before:before:hover, .button-secondary.with-icon-after:after:hover {
      -webkit-transition: 74ms ease-out;
      transition: 74ms ease-out;
      -webkit-transition-property: color;
      transition-property: color; }
  .button-secondary.with-icon-after:after {
    margin: 0 -4px 0 calc(.5rem - 4px); }
  .button-secondary.with-icon-before:before {
    margin: 0 calc(.5rem - 4px) 0 -4px; }

a.button-secondary {
  padding-top: .875rem; }
  a.button-secondary:hover {
    text-decoration: none; }

/**
 * @name Primary inverse button
 * @description Use the class `button-primary-inverse`.
 * @markup
 * <div class="button-group">
 *   <button class="button-primary-inverse">Primary inverse button</button>
 *   <a href="" class="button-primary-inverse">Primary inverse button as a link</a>
 * </div>
 * <br>
 * <div class="button-group">
 *   <button class="button-primary-inverse with-icon-before icon-navigateleft">Primary inverse button</button>
 *   <a href="" class="button-primary-inverse with-icon-before icon-navigateleft">Primary inverse button as a link</a>
 *   <button class="button-primary-inverse with-icon-before icon-search">Primary inverse button</button>
 *   <button class="button-primary-inverse with-icon-after icon-navigateright" disabled="disabled">Primary inverse button</button>
 * </div>
 */
.button-primary-inverse {
  -webkit-transition: 111ms ease-out;
  transition: 111ms ease-out;
  -webkit-transition-property: background, border, color;
  transition-property: background, border, color;
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  background: #44C6F4;
  border: 2px solid #44C6F4;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  height: 2rem;
  line-height: 0;
  outline: none;
  padding: 0 .438rem;
  vertical-align: middle;
  white-space: nowrap; }
  .button-primary-inverse:hover {
    -webkit-transition: 74ms ease-out;
    transition: 74ms ease-out;
    -webkit-transition-property: background, border, color;
    transition-property: background, border, color; }
  .button-primary-inverse.with-icon-before::before, .button-primary-inverse.with-icon-after::after {
    color: #FFF; }
  .button-primary-inverse .spinning-indicator {
    color: #FFF; }
  .button-primary-inverse:active {
    background: #FF8200;
    border: 2px solid #FF8200; }
  @media only screen and (min-width: 980px) {
    .button-primary-inverse:hover, .button-primary-inverse:focus {
      background: #FF8200;
      border: 2px solid #FF8200; } }
  .button-primary-inverse:disabled {
    background: #DCDCDC;
    border: 2px solid #DCDCDC;
    color: #FFF;
    cursor: not-allowed; }
    .button-primary-inverse:disabled .spinning-indicator {
      color: #FFF; }
  .button-primary-inverse.with-icon-before:before, .button-primary-inverse.with-icon-after:after {
    -webkit-transition: 111ms ease-out;
    transition: 111ms ease-out;
    -webkit-transition-property: color;
    transition-property: color; }
    .button-primary-inverse.with-icon-before:before:hover, .button-primary-inverse.with-icon-after:after:hover {
      -webkit-transition: 74ms ease-out;
      transition: 74ms ease-out;
      -webkit-transition-property: color;
      transition-property: color; }
  .button-primary-inverse.with-icon-after:after {
    margin: 0 -4px 0 calc(.5rem - 4px); }
  .button-primary-inverse.with-icon-before:before {
    margin: 0 calc(.5rem - 4px) 0 -4px; }

a.button-primary-inverse {
  padding-top: .875rem; }
  a.button-primary-inverse:hover {
    text-decoration: none; }

/**
 * @name Basic link
 * @description Use the class `basic-link`. To underline on hover use a `span` inside the button or the link. Use also the class `with-button-link` to apply link colour on buttons with icon.
 * @markup
 * <div class="button-group">
 *   <a href="" class="basic-link"><span>Basic link</span></a>
 *   <button class="basic-link"><span>Basic link as a button</span></button>
 *   <button class="basic-link">Basic link no underline on hover</button>
 * </div>
 * <br>
 * <div class="button-group">
 *   <button class="basic-link with-icon-after icon-navigatedown"><span>Basic link</span></button>
 *   <a href="" class="basic-link with-icon-after icon-navigateright"><span>Basic link</span></a>
 *   <button class="basic-link with-icon-before icon-navigateleft"><span>Basic link</span></button>
 *   <button class="basic-link with-icon-before icon-navigateup"><span>Basic link</span></button>
 *   <button class="basic-link with-icon-before icon-navigateup" disabled="disabled"><span>Basic link</span></button>
 *   <button class="basic-link with-button-link with-icon-before icon-navigateup"><span>Basic link inside a text</span></button>
 * </div>
 */
.basic-link {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  -webkit-transition: 111ms ease-out;
  transition: 111ms ease-out;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-font-smoothing: antialiased;
  background: transparent;
  border: none;
  color: #007398;
  cursor: pointer;
  display: inline-block;
  height: 2rem;
  line-height: 0;
  margin: 0;
  outline: none;
  padding: 0;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap; }
  .basic-link:hover {
    -webkit-transition: 74ms ease-out;
    transition: 74ms ease-out;
    -webkit-transition-property: color;
    transition-property: color; }
  .basic-link.with-icon-after, .basic-link.with-icon-before {
    color: #505050; }
    .basic-link.with-icon-after:before, .basic-link.with-icon-after:after, .basic-link.with-icon-before:before, .basic-link.with-icon-before:after {
      color: #007398; }
  .basic-link.with-icon-after span {
    margin: 0 calc(.5rem - 4px) 0 0; }
  .basic-link.with-icon-before span {
    margin: 0 0 0 calc(.5rem - 4px); }
  .basic-link span {
    border-bottom: 2px solid transparent;
    padding-bottom: 2px; }
  .basic-link.with-button-link {
    color: #007398; }
  .basic-link .spinning-indicator {
    color: #007398; }
  .basic-link:active {
    color: #E9711C;
    text-decoration: none; }
    .basic-link:active span:not(.spinning-indicator) {
      border-bottom: 2px solid #E9711C; }
    .basic-link:active.with-icon-after:after, .basic-link:active.with-icon-before:before {
      color: #E9711C; }
  @media only screen and (min-width: 980px) {
    .basic-link:hover, .basic-link:focus {
      color: #E9711C;
      text-decoration: none; }
      .basic-link:hover span:not(.spinning-indicator), .basic-link:focus span:not(.spinning-indicator) {
        border-bottom: 2px solid #E9711C; }
      .basic-link:hover.with-icon-after:after, .basic-link:hover.with-icon-before:before, .basic-link:focus.with-icon-after:after, .basic-link:focus.with-icon-before:before {
        color: #E9711C; } }
  .basic-link:disabled {
    color: #DCDCDC;
    cursor: not-allowed; }
    @media only screen and (min-width: 980px) {
      .basic-link:disabled:hover {
        color: #DCDCDC; }
        .basic-link:disabled:hover span {
          border-color: transparent; } }
    .basic-link:disabled.with-icon-before::before, .basic-link:disabled.with-icon-after::after,
    .basic-link:disabled .spinning-indicator {
      color: #DCDCDC; }

a.basic-link {
  padding-top: 1rem; }

/**
 * @name Fluid button
 * @description A button which is taking full width of the container. Use the class `button-fluid`.
 * @markup
 * <button type="button" class="button-primary button-fluid">I'm fluid.</button>
 */
.button-fluid {
  width: 100%; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Card
 * @description Containers with padding
 */
/**
 * @name Basic card
 * @markup
 * <div class="card">
 *   <p>This is a card</p>
 * </div>
 */
.card {
  background: #FFF;
  color: #474747;
  margin-bottom: 8px;
  padding: 1rem;
  width: 100%; }
  .card:before, .card:after {
    content: "";
    display: table; }
  .card:after {
    clear: both; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .card {
      margin-bottom: 16px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .card {
      margin-bottom: 16px; } }
  @media only screen and (min-width: 980px) {
    .card {
      margin-bottom: 16px; } }

/**
 * @name Card Wrapper
 * @markup
 * <div class="card-wrapper">
 *   <h1>The title of a card inside a wrapper</h1>
 *   <p>This is a sub-title</p>
 *   <div class="card">
 *     <p>This is a card with more padding because it is inside the dark card wrapper</p>
 *   </div>
 * </div>
 */
.card-wrapper {
  background: #737373;
  margin: 0;
  padding: 2rem; }
  .card-wrapper:before, .card-wrapper:after {
    content: "";
    display: table; }
  .card-wrapper:after {
    clear: both; }
  .card-wrapper > h1 {
    color: #FFF;
    margin: 0 0 1rem 1rem; }
  .card-wrapper > p {
    font-family: NexusSans, Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    color: #FFF;
    margin: 0 1rem 1rem; }
  .card-wrapper > .card {
    padding: 2rem 1rem 1rem; }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .card-wrapper {
      margin: 6.875rem 0 3.875rem;
      padding: 3.75rem 2rem 2rem; } }
  @media only screen and (min-width: 980px) {
    .card-wrapper {
      margin: 6.875rem 0 3.875rem;
      padding: 3.75rem 2rem 2rem; } }

/**
 * @name Card without padding
 * @markup
 * <div class="card without-padding">
 *   This is a card without padding
 * </div>
 */
.card.without-padding {
  padding: 0; }

/**
 * @name Promo cards
 * @markup
 * <div class="promo primary card">
 *   This is a primary promo card
 * </div>
 * <div class="promo secondary card">
 *   This is a secondary promo card
 * </div>
 * <div class="promo tertiary card">
 *   This is a tertiary promo card
 * </div>
 */
.card.promo.primary {
  border-top: 2px solid #007398;
  background: #FFF; }

.card.promo.secondary {
  border-top: 2px solid #b0ccd9;
  background: #d9e3ea; }

.card.promo.tertiary {
  border-top: 2px solid #E9711C;
  background: #FFF; }

/**
 * @name Grid
 * @description To create a grid use the class `.row` in a div and the class `.column` in the inner div's. <br> To define the size of a column use the class in this format: `breakpoint-numerator-denominator`. <br> The available breakpoints are: <strong> d, l, m, s, xs</strong>.
 */
/**
 * @name Basic grid
 * @markup
 * <div class="dss-filled-container">
 *    <div class="row">
 *      <div class="column d-1-12">
 *        <div class="card">1</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">2</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">3</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">4</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">5</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">6</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">7</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">8</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">9</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">10</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">11</div>
 *      </div>
 *      <div class="column d-1-12">
 *        <div class="card">12</div>
 *      </div>
 *    </div>
 *
 *    <div class="row">
 *      <div class="column d-1-2">
 *        <div class="card">Card in a column</div>
 *      </div>
 *      <div class="column d-1-2">
 *        <div class="card">Card in a column</div>
 *      </div>
 *    </div>
 *
 *    <div class="row">
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Card in a column</div>
 *      </div>
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Card in a column</div>
 *      </div>
 *      <div class="column d-1-3 m-1-1 s-1-1">
 *        <div class="card">Card in a column</div>
 *      </div>
 *    </div>
 * </div>
 */
/**
 * @name Nested grid
 * @markup
 * <div class="dss-filled-container">
 *    <div class="row">
 *      <div class="column d-1-2">
 *        <div class="card">
 *          <div class="row">
 *            <div class="column d-1-2 s-1-1">Column in a card</div>
 *            <div class="column d-1-2 s-1-1">Column in a card</div>
 *          </div>
 *        </div>
 *      </div>
 *      <div class="column d-1-2">
 *        <div class="card">Card in a column</div>
 *      </div>
 *    </div>
 * </div>
 */
.row {
  letter-spacing: -0.31em;
  list-style: none;
  margin: 0;
  margin-left: -8px;
  padding: 0; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .row {
      margin-left: -16px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .row {
      margin-left: -16px; } }
  @media only screen and (min-width: 980px) {
    .row {
      margin-left: -16px; } }

.column {
  display: inline-block;
  letter-spacing: normal;
  padding-left: 8px;
  vertical-align: top;
  width: 100%;
  word-spacing: normal; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .column {
      padding-left: 16px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .column {
      padding-left: 16px; } }
  @media only screen and (min-width: 980px) {
    .column {
      padding-left: 16px; } }

@media only screen {
  .d-1-1 {
    width: 100%; }
  .d-1-2 {
    width: 50%; }
  .d-1-3 {
    width: 33.33333%; }
  .d-2-3 {
    width: 66.66667%; }
  .d-1-4 {
    width: 25%; }
  .d-2-4 {
    width: 50%; }
  .d-3-4 {
    width: 75%; }
  .d-1-5 {
    width: 20%; }
  .d-2-5 {
    width: 40%; }
  .d-3-5 {
    width: 60%; }
  .d-4-5 {
    width: 80%; }
  .d-1-6 {
    width: 16.66667%; }
  .d-2-6 {
    width: 33.33333%; }
  .d-3-6 {
    width: 50%; }
  .d-4-6 {
    width: 66.66667%; }
  .d-5-6 {
    width: 83.33333%; }
  .d-1-8 {
    width: 12.5%; }
  .d-2-8 {
    width: 25%; }
  .d-3-8 {
    width: 37.5%; }
  .d-4-8 {
    width: 50%; }
  .d-5-8 {
    width: 62.5%; }
  .d-6-8 {
    width: 75%; }
  .d-7-8 {
    width: 87.5%; }
  .d-1-9 {
    width: 11.11111%; }
  .d-2-9 {
    width: 22.22222%; }
  .d-3-9 {
    width: 33.33333%; }
  .d-4-9 {
    width: 44.44444%; }
  .d-5-9 {
    width: 55.55556%; }
  .d-6-9 {
    width: 66.66667%; }
  .d-7-9 {
    width: 77.77778%; }
  .d-8-9 {
    width: 88.88889%; }
  .d-1-10 {
    width: 10%; }
  .d-2-10 {
    width: 20%; }
  .d-3-10 {
    width: 30%; }
  .d-4-10 {
    width: 40%; }
  .d-5-10 {
    width: 50%; }
  .d-6-10 {
    width: 60%; }
  .d-7-10 {
    width: 70%; }
  .d-8-10 {
    width: 80%; }
  .d-9-10 {
    width: 90%; }
  .d-1-12 {
    width: 8.33333%; }
  .d-2-12 {
    width: 16.66667%; }
  .d-3-12 {
    width: 25%; }
  .d-4-12 {
    width: 33.33333%; }
  .d-5-12 {
    width: 41.66667%; }
  .d-6-12 {
    width: 50%; }
  .d-7-12 {
    width: 58.33333%; }
  .d-8-12 {
    width: 66.66667%; }
  .d-9-12 {
    width: 75%; }
  .d-10-12 {
    width: 83.33333%; }
  .d-11-12 {
    width: 91.66667%; } }

@media only screen and (max-width: 479px) {
  .xs-1-1 {
    width: 100%; }
  .xs-1-2 {
    width: 50%; }
  .xs-1-3 {
    width: 33.33333%; }
  .xs-2-3 {
    width: 66.66667%; }
  .xs-1-4 {
    width: 25%; }
  .xs-2-4 {
    width: 50%; }
  .xs-3-4 {
    width: 75%; }
  .xs-1-5 {
    width: 20%; }
  .xs-2-5 {
    width: 40%; }
  .xs-3-5 {
    width: 60%; }
  .xs-4-5 {
    width: 80%; }
  .xs-1-6 {
    width: 16.66667%; }
  .xs-2-6 {
    width: 33.33333%; }
  .xs-3-6 {
    width: 50%; }
  .xs-4-6 {
    width: 66.66667%; }
  .xs-5-6 {
    width: 83.33333%; }
  .xs-1-8 {
    width: 12.5%; }
  .xs-2-8 {
    width: 25%; }
  .xs-3-8 {
    width: 37.5%; }
  .xs-4-8 {
    width: 50%; }
  .xs-5-8 {
    width: 62.5%; }
  .xs-6-8 {
    width: 75%; }
  .xs-7-8 {
    width: 87.5%; }
  .xs-1-9 {
    width: 11.11111%; }
  .xs-2-9 {
    width: 22.22222%; }
  .xs-3-9 {
    width: 33.33333%; }
  .xs-4-9 {
    width: 44.44444%; }
  .xs-5-9 {
    width: 55.55556%; }
  .xs-6-9 {
    width: 66.66667%; }
  .xs-7-9 {
    width: 77.77778%; }
  .xs-8-9 {
    width: 88.88889%; }
  .xs-1-10 {
    width: 10%; }
  .xs-2-10 {
    width: 20%; }
  .xs-3-10 {
    width: 30%; }
  .xs-4-10 {
    width: 40%; }
  .xs-5-10 {
    width: 50%; }
  .xs-6-10 {
    width: 60%; }
  .xs-7-10 {
    width: 70%; }
  .xs-8-10 {
    width: 80%; }
  .xs-9-10 {
    width: 90%; }
  .xs-1-12 {
    width: 8.33333%; }
  .xs-2-12 {
    width: 16.66667%; }
  .xs-3-12 {
    width: 25%; }
  .xs-4-12 {
    width: 33.33333%; }
  .xs-5-12 {
    width: 41.66667%; }
  .xs-6-12 {
    width: 50%; }
  .xs-7-12 {
    width: 58.33333%; }
  .xs-8-12 {
    width: 66.66667%; }
  .xs-9-12 {
    width: 75%; }
  .xs-10-12 {
    width: 83.33333%; }
  .xs-11-12 {
    width: 91.66667%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .s-1-1 {
    width: 100%; }
  .s-1-2 {
    width: 50%; }
  .s-1-3 {
    width: 33.33333%; }
  .s-2-3 {
    width: 66.66667%; }
  .s-1-4 {
    width: 25%; }
  .s-2-4 {
    width: 50%; }
  .s-3-4 {
    width: 75%; }
  .s-1-5 {
    width: 20%; }
  .s-2-5 {
    width: 40%; }
  .s-3-5 {
    width: 60%; }
  .s-4-5 {
    width: 80%; }
  .s-1-6 {
    width: 16.66667%; }
  .s-2-6 {
    width: 33.33333%; }
  .s-3-6 {
    width: 50%; }
  .s-4-6 {
    width: 66.66667%; }
  .s-5-6 {
    width: 83.33333%; }
  .s-1-8 {
    width: 12.5%; }
  .s-2-8 {
    width: 25%; }
  .s-3-8 {
    width: 37.5%; }
  .s-4-8 {
    width: 50%; }
  .s-5-8 {
    width: 62.5%; }
  .s-6-8 {
    width: 75%; }
  .s-7-8 {
    width: 87.5%; }
  .s-1-9 {
    width: 11.11111%; }
  .s-2-9 {
    width: 22.22222%; }
  .s-3-9 {
    width: 33.33333%; }
  .s-4-9 {
    width: 44.44444%; }
  .s-5-9 {
    width: 55.55556%; }
  .s-6-9 {
    width: 66.66667%; }
  .s-7-9 {
    width: 77.77778%; }
  .s-8-9 {
    width: 88.88889%; }
  .s-1-10 {
    width: 10%; }
  .s-2-10 {
    width: 20%; }
  .s-3-10 {
    width: 30%; }
  .s-4-10 {
    width: 40%; }
  .s-5-10 {
    width: 50%; }
  .s-6-10 {
    width: 60%; }
  .s-7-10 {
    width: 70%; }
  .s-8-10 {
    width: 80%; }
  .s-9-10 {
    width: 90%; }
  .s-1-12 {
    width: 8.33333%; }
  .s-2-12 {
    width: 16.66667%; }
  .s-3-12 {
    width: 25%; }
  .s-4-12 {
    width: 33.33333%; }
  .s-5-12 {
    width: 41.66667%; }
  .s-6-12 {
    width: 50%; }
  .s-7-12 {
    width: 58.33333%; }
  .s-8-12 {
    width: 66.66667%; }
  .s-9-12 {
    width: 75%; }
  .s-10-12 {
    width: 83.33333%; }
  .s-11-12 {
    width: 91.66667%; } }

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .m-1-1 {
    width: 100%; }
  .m-1-2 {
    width: 50%; }
  .m-1-3 {
    width: 33.33333%; }
  .m-2-3 {
    width: 66.66667%; }
  .m-1-4 {
    width: 25%; }
  .m-2-4 {
    width: 50%; }
  .m-3-4 {
    width: 75%; }
  .m-1-5 {
    width: 20%; }
  .m-2-5 {
    width: 40%; }
  .m-3-5 {
    width: 60%; }
  .m-4-5 {
    width: 80%; }
  .m-1-6 {
    width: 16.66667%; }
  .m-2-6 {
    width: 33.33333%; }
  .m-3-6 {
    width: 50%; }
  .m-4-6 {
    width: 66.66667%; }
  .m-5-6 {
    width: 83.33333%; }
  .m-1-8 {
    width: 12.5%; }
  .m-2-8 {
    width: 25%; }
  .m-3-8 {
    width: 37.5%; }
  .m-4-8 {
    width: 50%; }
  .m-5-8 {
    width: 62.5%; }
  .m-6-8 {
    width: 75%; }
  .m-7-8 {
    width: 87.5%; }
  .m-1-9 {
    width: 11.11111%; }
  .m-2-9 {
    width: 22.22222%; }
  .m-3-9 {
    width: 33.33333%; }
  .m-4-9 {
    width: 44.44444%; }
  .m-5-9 {
    width: 55.55556%; }
  .m-6-9 {
    width: 66.66667%; }
  .m-7-9 {
    width: 77.77778%; }
  .m-8-9 {
    width: 88.88889%; }
  .m-1-10 {
    width: 10%; }
  .m-2-10 {
    width: 20%; }
  .m-3-10 {
    width: 30%; }
  .m-4-10 {
    width: 40%; }
  .m-5-10 {
    width: 50%; }
  .m-6-10 {
    width: 60%; }
  .m-7-10 {
    width: 70%; }
  .m-8-10 {
    width: 80%; }
  .m-9-10 {
    width: 90%; }
  .m-1-12 {
    width: 8.33333%; }
  .m-2-12 {
    width: 16.66667%; }
  .m-3-12 {
    width: 25%; }
  .m-4-12 {
    width: 33.33333%; }
  .m-5-12 {
    width: 41.66667%; }
  .m-6-12 {
    width: 50%; }
  .m-7-12 {
    width: 58.33333%; }
  .m-8-12 {
    width: 66.66667%; }
  .m-9-12 {
    width: 75%; }
  .m-10-12 {
    width: 83.33333%; }
  .m-11-12 {
    width: 91.66667%; } }

@media only screen and (min-width: 980px) {
  .l-1-1 {
    width: 100%; }
  .l-1-2 {
    width: 50%; }
  .l-1-3 {
    width: 33.33333%; }
  .l-2-3 {
    width: 66.66667%; }
  .l-1-4 {
    width: 25%; }
  .l-2-4 {
    width: 50%; }
  .l-3-4 {
    width: 75%; }
  .l-1-5 {
    width: 20%; }
  .l-2-5 {
    width: 40%; }
  .l-3-5 {
    width: 60%; }
  .l-4-5 {
    width: 80%; }
  .l-1-6 {
    width: 16.66667%; }
  .l-2-6 {
    width: 33.33333%; }
  .l-3-6 {
    width: 50%; }
  .l-4-6 {
    width: 66.66667%; }
  .l-5-6 {
    width: 83.33333%; }
  .l-1-8 {
    width: 12.5%; }
  .l-2-8 {
    width: 25%; }
  .l-3-8 {
    width: 37.5%; }
  .l-4-8 {
    width: 50%; }
  .l-5-8 {
    width: 62.5%; }
  .l-6-8 {
    width: 75%; }
  .l-7-8 {
    width: 87.5%; }
  .l-1-9 {
    width: 11.11111%; }
  .l-2-9 {
    width: 22.22222%; }
  .l-3-9 {
    width: 33.33333%; }
  .l-4-9 {
    width: 44.44444%; }
  .l-5-9 {
    width: 55.55556%; }
  .l-6-9 {
    width: 66.66667%; }
  .l-7-9 {
    width: 77.77778%; }
  .l-8-9 {
    width: 88.88889%; }
  .l-1-10 {
    width: 10%; }
  .l-2-10 {
    width: 20%; }
  .l-3-10 {
    width: 30%; }
  .l-4-10 {
    width: 40%; }
  .l-5-10 {
    width: 50%; }
  .l-6-10 {
    width: 60%; }
  .l-7-10 {
    width: 70%; }
  .l-8-10 {
    width: 80%; }
  .l-9-10 {
    width: 90%; }
  .l-1-12 {
    width: 8.33333%; }
  .l-2-12 {
    width: 16.66667%; }
  .l-3-12 {
    width: 25%; }
  .l-4-12 {
    width: 33.33333%; }
  .l-5-12 {
    width: 41.66667%; }
  .l-6-12 {
    width: 50%; }
  .l-7-12 {
    width: 58.33333%; }
  .l-8-12 {
    width: 66.66667%; }
  .l-9-12 {
    width: 75%; }
  .l-10-12 {
    width: 83.33333%; }
  .l-11-12 {
    width: 91.66667%; } }

/**
 * @name Grid features
 * @markup
 * <div class="dss-filled-container">
 *    <div class="row left">
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Left aligned column</div>
 *      </div>
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Left aligned column</div>
 *      </div>
 *    </div>
 *
 *    <div class="row center">
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Center aligned column</div>
 *      </div>
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Center aligned column</div>
 *      </div>
 *    </div>
 *
 *    <div class="row right">
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Right aligned column</div>
 *      </div>
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Right aligned column</div>
 *      </div>
 *    </div>
 *
 *    <div class="row full">
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Full width column (no gap)</div>
 *      </div>
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Full width column (no gap)</div>
 *      </div>
 *    </div>
 *
 *    <div class="row narrow">
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Narrow gap column</div>
 *      </div>
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Narrow gap column</div>
 *      </div>
 *    </div>
 *
 *    <div class="row wide">
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Wide gap column</div>
 *      </div>
 *      <div class="column d-1-3 m-1-2 s-1-1">
 *        <div class="card">Wide gap column</div>
 *      </div>
 *    </div>
 *
 *    <div class="row d-flex">
 *      <div class="column d-1-3">
 *        <div class="card">Flexible row with a tall column. <br>
              Please specify the screen sizes (d, l, m, s, xs) you want this to apply to.
              The element inside the column needs to have 100% width.
            </div>
 *      </div>
 *      <div class="column d-1-3">
 *        <div class="card">Card that is the same height as the tallest card in the row.</div>
 *      </div>
 *      <div class="column d-1-3">
 *        <div class="card">Card that is the same height as the tallest card in the row.</div>
 *      </div>
 *    </div>
 * </div>
 */
.row.full {
  margin-left: 0; }
  .row.full > .column {
    padding-left: 0; }

.row.right {
  text-align: right; }
  .row.right > .column {
    text-align: left; }

.row.center {
  text-align: center; }
  .row.center > .column {
    text-align: left; }

.row.narrow {
  margin-left: -8px; }
  .row.narrow > .column {
    padding-left: 8px; }

.row.wide {
  margin-left: -16px; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .row.wide {
      margin-left: -32px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .row.wide {
      margin-left: -32px; } }
  @media only screen and (min-width: 980px) {
    .row.wide {
      margin-left: -32px; } }
  .row.wide > .column {
    padding-left: 16px; }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .row.wide > .column {
        padding-left: 32px; } }
    @media only screen and (min-width: 768px) and (max-width: 979px) {
      .row.wide > .column {
        padding-left: 32px; } }
    @media only screen and (min-width: 980px) {
      .row.wide > .column {
        padding-left: 32px; } }

@media only screen {
  .row.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .row.d-flex > .column {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; } }

@media only screen and (max-width: 479px) {
  .row.xs-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .row.xs-flex > .column {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .row.s-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .row.s-flex > .column {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; } }

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .row.m-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .row.m-flex > .column {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; } }

@media only screen and (min-width: 980px) {
  .row.l-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .row.l-flex > .column {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; } }

/**
 * @name Headings
 */
/**
 * @name Reference
 * @markup
 *  <h1>Alpha: 42px/63px</h1>
 *  <h2>Beta: 34px/51px</h2>
 *  <h3>Gamma: 24px/36px</h3>
 *  <h4>Delta: 20px/30px</h4>
 *  <h5>Epsilon: 16px/24px</h5>
 *  <h6>Zeta: 14px/21px</h6>
 */
/**
 * @name Default Headings
 * @markup
 *  <h1>Heading 1</h1>
 *  <h2>Heading 2</h2>
 *  <h3>Heading 3</h3>
 *  <h4>Heading 4</h4>
 *  <h5>Heading 5</h5>
 *  <h6>Heading 6</h6>
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1rem 0; }

h1 {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 2.625rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

h2 {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 2.125rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

h3 {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

h4 {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

h5 {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

h6 {
  font-family: NexusSans, Arial, sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

/**
 * @name Serif Font Headings
 * @markup
 *  <h1 class="serif">Heading 1</h1>
 *  <h2 class="serif">Heading 2</h2>
 *  <h3 class="serif">Heading 3</h3>
 *  <h4 class="serif">Heading 4</h4>
 *  <h5 class="serif">Heading 5</h5>
 *  <h6 class="serif">Heading 6</h6>
 */
.serif {
  font-family: NexusSerif, Georgia, serif; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Headline
 */
/**
 * @name Headline atom
 * @description Provides blue banner for headlines
 * @markup
 * <div class="headline" style="height: 7rem;"></div>
 */
.headline {
  background: #007398;
  background-image: radial-gradient(ellipse 100% 250% at 0 0, rgba(5, 91, 130, 0.47) 0%, rgba(140, 217, 228, 0.47) 52%, #007398 100%), -webkit-gradient(linear, left bottom, left top, from(rgba(140, 217, 228, 0.47)), to(rgba(5, 91, 130, 0.47)));
  background-image: radial-gradient(ellipse 100% 250% at 0 0, rgba(5, 91, 130, 0.47) 0%, rgba(140, 217, 228, 0.47) 52%, #007398 100%), linear-gradient(0deg, rgba(140, 217, 228, 0.47) 0%, rgba(5, 91, 130, 0.47) 100%);
  background-size: cover;
  border-bottom: 1px solid #FFF;
  clear: both;
  margin: 8px 8px 8px 8px;
  padding-bottom: 0;
  padding-top: 32px; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .headline {
      margin: 16px 16px 16px 16px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .headline {
      padding-left: 16px;
      padding-right: 16px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .headline {
      margin: -16px 0 16px 0;
      padding-bottom: 32px; } }
  @media only screen and (min-width: 980px) {
    .headline {
      margin: -16px 0 16px 0;
      padding-bottom: 32px; } }
  .headline .card {
    margin-bottom: 0;
    padding: 1.5rem; }
  .headline h1 {
    margin: 0; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Icons
 */
.with-icon-font, .spin-icon:before, .with-icon-before:before,
.with-icon-after:after {
  font-family: Mendeley;
  line-height: 0;
  vertical-align: middle;
  font-size: 1.25rem;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: inline-block;
  -webkit-font-feature-settings: "liga";
          font-feature-settings: "liga";
  height: auto;
  margin: 0;
  padding: 0;
  position: relative;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  width: 1.25rem; }

/* Mendeley icons */
.with-icon-after:before {
  display: none;
  content: ''; }

.icon-addfile,
.icon-addfile:before,
.icon-addfile.with-icon-after:after {
  content: ""; }

.icon-airplay,
.icon-airplay:before,
.icon-airplay.with-icon-after:after {
  content: ""; }

.icon-alarmclock,
.icon-alarmclock:before,
.icon-alarmclock.with-icon-after:after {
  content: ""; }

.icon-alert,
.icon-alert:before,
.icon-alert.with-icon-after:after {
  content: ""; }

.icon-attach,
.icon-attach:before,
.icon-attach.with-icon-after:after {
  content: ""; }

.icon-backspace,
.icon-backspace:before,
.icon-backspace.with-icon-after:after {
  content: ""; }

.icon-ban,
.icon-ban:before,
.icon-ban.with-icon-after:after {
  content: ""; }

.icon-barchart,
.icon-barchart:before,
.icon-barchart.with-icon-after:after {
  content: ""; }

.icon-battery,
.icon-battery:before,
.icon-battery.with-icon-after:after {
  content: ""; }

.icon-bezier,
.icon-bezier:before,
.icon-bezier.with-icon-after:after {
  content: ""; }

.icon-bike,
.icon-bike:before,
.icon-bike.with-icon-after:after {
  content: ""; }

.icon-book,
.icon-book:before,
.icon-book.with-icon-after:after {
  content: ""; }

.icon-bookmark,
.icon-bookmark:before,
.icon-bookmark.with-icon-after:after {
  content: ""; }

.icon-box,
.icon-box:before,
.icon-box.with-icon-after:after {
  content: ""; }

.icon-briefcase,
.icon-briefcase:before,
.icon-briefcase.with-icon-after:after {
  content: ""; }

.icon-businessuser,
.icon-businessuser:before,
.icon-businessuser.with-icon-after:after {
  content: ""; }

.icon-calculator,
.icon-calculator:before,
.icon-calculator.with-icon-after:after {
  content: ""; }

.icon-camera,
.icon-camera:before,
.icon-camera.with-icon-after:after {
  content: ""; }

.icon-capsule,
.icon-capsule:before,
.icon-capsule.with-icon-after:after {
  content: ""; }

.icon-capsulerecycling,
.icon-capsulerecycling:before,
.icon-capsulerecycling.with-icon-after:after {
  content: ""; }

.icon-carrot,
.icon-carrot:before,
.icon-carrot.with-icon-after:after {
  content: ""; }

.icon-cart,
.icon-cart:before,
.icon-cart.with-icon-after:after {
  content: ""; }

.icon-caution,
.icon-caution:before,
.icon-caution.with-icon-after:after {
  content: ""; }

.icon-cell,
.icon-cell:before,
.icon-cell.with-icon-after:after {
  content: ""; }

.icon-chargingbattery,
.icon-chargingbattery:before,
.icon-chargingbattery.with-icon-after:after {
  content: ""; }

.icon-chat,
.icon-chat:before,
.icon-chat.with-icon-after:after {
  content: ""; }

.icon-check,
.icon-check:before,
.icon-check.with-icon-after:after {
  content: ""; }

.icon-checkfile,
.icon-checkfile:before,
.icon-checkfile.with-icon-after:after {
  content: ""; }

.icon-clock,
.icon-clock:before,
.icon-clock.with-icon-after:after {
  content: ""; }

.icon-columns,
.icon-columns:before,
.icon-columns.with-icon-after:after {
  content: ""; }

.icon-compass,
.icon-compass:before,
.icon-compass.with-icon-after:after {
  content: ""; }

.icon-compose,
.icon-compose:before,
.icon-compose.with-icon-after:after {
  content: ""; }

.icon-contract,
.icon-contract:before,
.icon-contract.with-icon-after:after {
  content: ""; }

.icon-cookingutensils,
.icon-cookingutensils:before,
.icon-cookingutensils.with-icon-after:after {
  content: ""; }

.icon-copier,
.icon-copier:before,
.icon-copier.with-icon-after:after {
  content: ""; }

.icon-creditcard,
.icon-creditcard:before,
.icon-creditcard.with-icon-after:after {
  content: ""; }

.icon-crescentmoon,
.icon-crescentmoon:before,
.icon-crescentmoon.with-icon-after:after {
  content: ""; }

.icon-crop,
.icon-crop:before,
.icon-crop.with-icon-after:after {
  content: ""; }

.icon-crosshair,
.icon-crosshair:before,
.icon-crosshair.with-icon-after:after {
  content: ""; }

.icon-cursor,
.icon-cursor:before,
.icon-cursor.with-icon-after:after {
  content: ""; }

.icon-database,
.icon-database:before,
.icon-database.with-icon-after:after {
  content: ""; }

.icon-delete,
.icon-delete:before,
.icon-delete.with-icon-after:after {
  content: ""; }

.icon-deletefile,
.icon-deletefile:before,
.icon-deletefile.with-icon-after:after {
  content: ""; }

.icon-desktop,
.icon-desktop:before,
.icon-desktop.with-icon-after:after {
  content: ""; }

.icon-discdrive,
.icon-discdrive:before,
.icon-discdrive.with-icon-after:after {
  content: ""; }

.icon-dishwasher,
.icon-dishwasher:before,
.icon-dishwasher.with-icon-after:after {
  content: ""; }

.icon-dislike,
.icon-dislike:before,
.icon-dislike.with-icon-after:after {
  content: ""; }

.icon-doc,
.icon-doc:before,
.icon-doc.with-icon-after:after {
  content: ""; }

.icon-down,
.icon-down:before,
.icon-down.with-icon-after:after {
  content: ""; }

.icon-downleft,
.icon-downleft:before,
.icon-downleft.with-icon-after:after {
  content: ""; }

.icon-download,
.icon-download:before,
.icon-download.with-icon-after:after {
  content: ""; }

.icon-downloadbox,
.icon-downloadbox:before,
.icon-downloadbox.with-icon-after:after {
  content: ""; }

.icon-downloadcloud,
.icon-downloadcloud:before,
.icon-downloadcloud.with-icon-after:after {
  content: ""; }

.icon-downloadfolder,
.icon-downloadfolder:before,
.icon-downloadfolder.with-icon-after:after {
  content: ""; }

.icon-downright,
.icon-downright:before,
.icon-downright.with-icon-after:after {
  content: ""; }

.icon-droplet,
.icon-droplet:before,
.icon-droplet.with-icon-after:after {
  content: ""; }

.icon-eggs,
.icon-eggs:before,
.icon-eggs.with-icon-after:after {
  content: ""; }

.icon-eggtimer,
.icon-eggtimer:before,
.icon-eggtimer.with-icon-after:after {
  content: ""; }

.icon-eject,
.icon-eject:before,
.icon-eject.with-icon-after:after {
  content: ""; }

.icon-electrickettle,
.icon-electrickettle:before,
.icon-electrickettle.with-icon-after:after {
  content: ""; }

.icon-erase,
.icon-erase:before,
.icon-erase.with-icon-after:after {
  content: ""; }

.icon-exe:before,
.icon-exe.with-icon-after,
.icon-exe.with-icon-after:after {
  content: ""; }

.icon-exhaust:before,
.icon-exhaust.with-icon-after,
.icon-exhaust.with-icon-after:after {
  content: ""; }

.icon-expand:before,
.icon-expand.with-icon-after,
.icon-expand.with-icon-after:after {
  content: ""; }

.icon-external-link,
.icon-external-link:before,
.icon-external-link.with-icon-after:after {
  content: ""; }

.icon-fan:before,
.icon-fan.with-icon-after,
.icon-fan.with-icon-after:after {
  content: ""; }

.icon-fastforward:before,
.icon-fastforward.with-icon-after,
.icon-fastforward.with-icon-after:after {
  content: ""; }

.icon-fax:before,
.icon-fax.with-icon-after,
.icon-fax.with-icon-after:after {
  content: ""; }

.icon-female:before,
.icon-female.with-icon-after,
.icon-female.with-icon-after:after {
  content: ""; }

.icon-file:before,
.icon-file.with-icon-after,
.icon-file.with-icon-after:after {
  content: ""; }

.icon-files:before,
.icon-files.with-icon-after,
.icon-files.with-icon-after:after {
  content: ""; }

.icon-film:before,
.icon-film.with-icon-after,
.icon-film.with-icon-after:after {
  content: ""; }

.icon-flag:before,
.icon-flag.with-icon-after,
.icon-flag.with-icon-after:after {
  content: ""; }

.icon-floppydisk:before,
.icon-floppydisk.with-icon-after,
.icon-floppydisk.with-icon-after:after {
  content: ""; }

.icon-folder:before,
.icon-folder.with-icon-after,
.icon-folder.with-icon-after:after {
  content: ""; }

.icon-followuser:before,
.icon-followuser.with-icon-after,
.icon-followuser.with-icon-after:after {
  content: ""; }

.icon-followuserbold:before,
.icon-followuserbold.with-icon-after,
.icon-followuserbold.with-icon-after:after {
  content: ""; }

.icon-fork:before,
.icon-fork.with-icon-after,
.icon-fork.with-icon-after:after {
  content: ""; }

.icon-gif:before,
.icon-gif.with-icon-after,
.icon-gif.with-icon-after:after {
  content: ""; }

.icon-globe:before,
.icon-globe.with-icon-after,
.icon-globe.with-icon-after:after {
  content: ""; }

.icon-gridlines,
.icon-gridlines:before,
.icon-gridlines.with-icon-after:after {
  content: ""; }

.icon-hand,
.icon-hand:before,
.icon-hand.with-icon-after:after {
  content: ""; }

.icon-hdd,
.icon-hdd:before,
.icon-hdd.with-icon-after:after {
  content: ""; }

.icon-headphones,
.icon-headphones:before,
.icon-headphones.with-icon-after:after {
  content: ""; }

.icon-heart,
.icon-heart:before,
.icon-heart.with-icon-after:after {
  content: ""; }

.icon-heart-filled,
.icon-heart-filled:before,
.icon-heart-filled.with-icon-after:after {
  content: ""; }

.icon-help,
.icon-help:before,
.icon-help.with-icon-after:after {
  content: ""; }

.icon-highbattery,
.icon-highbattery:before,
.icon-highbattery.with-icon-after:after {
  content: ""; }

.icon-highvolume,
.icon-highvolume:before,
.icon-highvolume.with-icon-after:after {
  content: ""; }

.icon-home,
.icon-home:before,
.icon-home.with-icon-after:after {
  content: ""; }

.icon-hyphen,
.icon-hyphen:before,
.icon-hyphen.with-icon-after:after {
  content: ""; }

.icon-inbox,
.icon-inbox:before,
.icon-inbox.with-icon-after:after {
  content: ""; }

.icon-index,
.icon-index:before,
.icon-index.with-icon-after:after {
  content: ""; }

.icon-info,
.icon-info:before,
.icon-info.with-icon-after:after {
  content: ""; }

.icon-insertcapsule,
.icon-insertcapsule:before,
.icon-insertcapsule.with-icon-after:after {
  content: ""; }

.icon-jpg,
.icon-jpg:before,
.icon-jpg.with-icon-after:after {
  content: ""; }

.icon-jug,
.icon-jug:before,
.icon-jug.with-icon-after:after {
  content: ""; }

.icon-key,
.icon-key:before,
.icon-key.with-icon-after:after {
  content: ""; }

.icon-laptop,
.icon-laptop:before,
.icon-laptop.with-icon-after:after {
  content: ""; }

.icon-layergroup,
.icon-layergroup:before,
.icon-layergroup.with-icon-after:after {
  content: ""; }

.icon-layers,
.icon-layers:before,
.icon-layers.with-icon-after:after {
  content: ""; }

.icon-left,
.icon-left:before,
.icon-left.with-icon-after:after {
  content: ""; }

.icon-lightbulb,
.icon-lightbulb:before,
.icon-lightbulb.with-icon-after:after {
  content: ""; }

.icon-like,
.icon-like:before,
.icon-like.with-icon-after:after {
  content: ""; }

.icon-link,
.icon-link:before,
.icon-link.with-icon-after:after {
  content: ""; }

.icon-loading,
.icon-loading:before,
.icon-loading.with-icon-after:after {
  content: ""; }

.icon-location,
.icon-location:before,
.icon-location.with-icon-after:after {
  content: ""; }

.icon-lock,
.icon-lock:before,
.icon-lock.with-icon-after:after {
  content: ""; }

.icon-login,
.icon-login:before,
.icon-login.with-icon-after:after {
  content: ""; }

.icon-logo,
.icon-logo:before,
.icon-logo.with-icon-after:after {
  content: ""; }

.icon-logout,
.icon-logout:before,
.icon-logout.with-icon-after:after {
  content: ""; }

.icon-lowbattery,
.icon-lowbattery:before,
.icon-lowbattery.with-icon-after:after {
  content: ""; }

.icon-lowvolume,
.icon-lowvolume:before,
.icon-lowvolume.with-icon-after:after {
  content: ""; }

.icon-mail,
.icon-mail:before,
.icon-mail.with-icon-after:after {
  content: ""; }

.icon-male,
.icon-male:before,
.icon-male.with-icon-after:after {
  content: ""; }

.icon-man,
.icon-man:before,
.icon-man.with-icon-after:after {
  content: ""; }

.icon-measuringcup,
.icon-measuringcup:before,
.icon-measuringcup.with-icon-after:after {
  content: ""; }

.icon-medicalcross,
.icon-medicalcross:before,
.icon-medicalcross.with-icon-after:after {
  content: ""; }

.icon-mediumbattery,
.icon-mediumbattery:before,
.icon-mediumbattery.with-icon-after:after {
  content: ""; }

.icon-mediumvolume,
.icon-mediumvolume:before,
.icon-mediumvolume.with-icon-after:after {
  content: ""; }

.icon-merge,
.icon-merge:before,
.icon-merge.with-icon-after:after {
  content: ""; }

.icon-microchip,
.icon-microchip:before,
.icon-microchip.with-icon-after:after {
  content: ""; }

.icon-microwave,
.icon-microwave:before,
.icon-microwave.with-icon-after:after {
  content: ""; }

.icon-mouse,
.icon-mouse:before,
.icon-mouse.with-icon-after:after {
  content: ""; }

.icon-move,
.icon-move:before,
.icon-move.with-icon-after:after {
  content: ""; }

.icon-mp3,
.icon-mp3:before,
.icon-mp3.with-icon-after:after {
  content: ""; }

.icon-music,
.icon-music:before,
.icon-music.with-icon-after:after {
  content: ""; }

.icon-navigate,
.icon-navigate:before,
.icon-navigate.with-icon-after:after {
  content: ""; }

.icon-navigatedown,
.icon-navigatedown:before,
.icon-navigatedown.with-icon-after:after {
  content: ""; }

.icon-navigateleft,
.icon-navigateleft:before,
.icon-navigateleft.with-icon-after:after {
  content: ""; }

.icon-navigateright,
.icon-navigateright:before,
.icon-navigateright.with-icon-after:after {
  content: ""; }

.icon-navigateup,
.icon-navigateup:before,
.icon-navigateup.with-icon-after:after {
  content: ""; }

.icon-newspaper,
.icon-newspaper:before,
.icon-newspaper.with-icon-after:after {
  content: ""; }

.icon-nosmoking,
.icon-nosmoking:before,
.icon-nosmoking.with-icon-after:after {
  content: ""; }

.icon-notebook,
.icon-notebook:before,
.icon-notebook.with-icon-after:after {
  content: ""; }

.icon-notifications,
.icon-notifications:before,
.icon-notifications.with-icon-after:after {
  content: ""; }

.icon-notificationsdisabled,
.icon-notificationsdisabled:before,
.icon-notificationsdisabled.with-icon-after:after {
  content: ""; }

.icon-openfolder,
.icon-openfolder:before,
.icon-openfolder.with-icon-after:after {
  content: ""; }

.icon-orange,
.icon-orange:before,
.icon-orange.with-icon-after:after {
  content: ""; }

.icon-outbox,
.icon-outbox:before,
.icon-outbox.with-icon-after:after {
  content: ""; }

.icon-oven,
.icon-oven:before,
.icon-oven.with-icon-after:after {
  content: ""; }

.icon-pause,
.icon-pause:before,
.icon-pause.with-icon-after:after {
  content: ""; }

.icon-pdf,
.icon-pdf:before,
.icon-pdf.with-icon-after:after {
  content: ""; }

.icon-pen,
.icon-pen:before,
.icon-pen.with-icon-after:after {
  content: ""; }

.icon-phone,
.icon-phone:before,
.icon-phone.with-icon-after:after {
  content: ""; }

.icon-phonedisabled,
.icon-phonedisabled:before,
.icon-phonedisabled.with-icon-after:after {
  content: ""; }

.icon-picture,
.icon-picture:before,
.icon-picture.with-icon-after:after {
  content: ""; }

.icon-piechart,
.icon-piechart:before,
.icon-piechart.with-icon-after:after {
  content: ""; }

.icon-pitcher,
.icon-pitcher:before,
.icon-pitcher.with-icon-after:after {
  content: ""; }

.icon-pixels,
.icon-pixels:before,
.icon-pixels.with-icon-after:after {
  content: ""; }

.icon-pizzacutter,
.icon-pizzacutter:before,
.icon-pizzacutter.with-icon-after:after {
  content: ""; }

.icon-play,
.icon-play:before,
.icon-play.with-icon-after:after {
  content: ""; }

.icon-playvideo,
.icon-playvideo:before,
.icon-playvideo.with-icon-after:after {
  content: ""; }

.icon-plus,
.icon-plus:before,
.icon-plus.with-icon-after:after {
  content: ""; }

.icon-png,
.icon-png:before,
.icon-png.with-icon-after:after {
  content: ""; }

.icon-pointdown,
.icon-pointdown:before,
.icon-pointdown.with-icon-after:after {
  content: ""; }

.icon-pointdownleft,
.icon-pointdownleft:before,
.icon-pointdownleft.with-icon-after:after {
  content: ""; }

.icon-pointdownright,
.icon-pointdownright:before,
.icon-pointdownright.with-icon-after:after {
  content: ""; }

.icon-pointleft,
.icon-pointleft:before,
.icon-pointleft.with-icon-after:after {
  content: ""; }

.icon-pointright,
.icon-pointright:before,
.icon-pointright.with-icon-after:after {
  content: ""; }

.icon-pointup,
.icon-pointup:before,
.icon-pointup.with-icon-after:after {
  content: ""; }

.icon-pointupleft,
.icon-pointupleft:before,
.icon-pointupleft.with-icon-after:after {
  content: ""; }

.icon-pointupright,
.icon-pointupright:before,
.icon-pointupright.with-icon-after:after {
  content: ""; }

.icon-print,
.icon-print:before,
.icon-print.with-icon-after:after {
  content: ""; }

.icon-printregistration,
.icon-printregistration:before,
.icon-printregistration.with-icon-after:after {
  content: ""; }

.icon-quote,
.icon-quote:before,
.icon-quote.with-icon-after:after {
  content: ""; }

.icon-raisedhand,
.icon-raisedhand:before,
.icon-raisedhand.with-icon-after:after {
  content: ""; }

.icon-rar,
.icon-rar:before,
.icon-rar.with-icon-after:after {
  content: ""; }

.icon-record,
.icon-record:before,
.icon-record.with-icon-after:after {
  content: ""; }

.icon-refrigerator,
.icon-refrigerator:before,
.icon-refrigerator.with-icon-after:after {
  content: ""; }

.icon-removefile,
.icon-removefile:before,
.icon-removefile.with-icon-after:after {
  content: ""; }

.icon-repeat,
.icon-repeat:before,
.icon-repeat.with-icon-after:after {
  content: ""; }

.icon-replay,
.icon-replay:before,
.icon-replay.with-icon-after:after {
  content: ""; }

.icon-replay2,
.icon-replay2:before,
.icon-replay2.with-icon-after:after {
  content: ""; }

.icon-retweet,
.icon-retweet:before,
.icon-retweet.with-icon-after:after {
  content: ""; }

.icon-rewind,
.icon-rewind:before,
.icon-rewind.with-icon-after:after {
  content: ""; }

.icon-right,
.icon-right:before,
.icon-right.with-icon-after:after {
  content: ""; }

.icon-rows,
.icon-rows:before,
.icon-rows.with-icon-after:after {
  content: ""; }

.icon-sample,
.icon-sample:before,
.icon-sample.with-icon-after:after {
  content: ""; }

.icon-scaledown,
.icon-scaledown:before,
.icon-scaledown.with-icon-after:after {
  content: ""; }

.icon-scaleup,
.icon-scaleup:before,
.icon-scaleup.with-icon-after:after {
  content: ""; }

.icon-scanner,
.icon-scanner:before,
.icon-scanner.with-icon-after:after {
  content: ""; }

.icon-search,
.icon-search:before,
.icon-search.with-icon-after:after {
  content: ""; }

.icon-share,
.icon-share:before,
.icon-share.with-icon-after:after {
  content: ""; }

.icon-shredder,
.icon-shredder:before,
.icon-shredder.with-icon-after:after {
  content: ""; }

.icon-shuffle,
.icon-shuffle:before,
.icon-shuffle.with-icon-after:after {
  content: ""; }

.icon-signpost,
.icon-signpost:before,
.icon-signpost.with-icon-after:after {
  content: ""; }

.icon-skipback,
.icon-skipback:before,
.icon-skipback.with-icon-after:after {
  content: ""; }

.icon-skipforward,
.icon-skipforward:before,
.icon-skipforward.with-icon-after:after {
  content: ""; }

.icon-smartphone,
.icon-smartphone:before,
.icon-smartphone.with-icon-after:after {
  content: ""; }

.icon-smoking,
.icon-smoking:before,
.icon-smoking.with-icon-after:after {
  content: ""; }

.icon-star,
.icon-star:before,
.icon-star.with-icon-after:after {
  content: ""; }

.icon-stop,
.icon-stop:before,
.icon-stop.with-icon-after:after {
  content: ""; }

.icon-stopwatch,
.icon-stopwatch:before,
.icon-stopwatch.with-icon-after:after {
  content: ""; }

.icon-storagebox,
.icon-storagebox:before,
.icon-storagebox.with-icon-after:after {
  content: ""; }

.icon-stove,
.icon-stove:before,
.icon-stove.with-icon-after:after {
  content: ""; }

.icon-sugarpackets,
.icon-sugarpackets:before,
.icon-sugarpackets.with-icon-after:after {
  content: ""; }

.icon-sync,
.icon-sync:before,
.icon-sync.with-icon-after:after {
  content: ""; }

.icon-tablet,
.icon-tablet:before,
.icon-tablet.with-icon-after:after {
  content: ""; }

.icon-tag,
.icon-tag:before,
.icon-tag.with-icon-after:after {
  content: ""; }

.icon-target,
.icon-target:before,
.icon-target.with-icon-after:after {
  content: ""; }

.icon-teabag,
.icon-teabag:before,
.icon-teabag.with-icon-after:after {
  content: ""; }

.icon-thumbnails,
.icon-thumbnails:before,
.icon-thumbnails.with-icon-after:after {
  content: ""; }

.icon-touchtonephone,
.icon-touchtonephone:before,
.icon-touchtonephone.with-icon-after:after {
  content: ""; }

.icon-trash,
.icon-trash:before,
.icon-trash.with-icon-after:after {
  content: ""; }

.icon-unlink,
.icon-unlink:before,
.icon-unlink.with-icon-after:after {
  content: ""; }

.icon-unfollowuserbold,
.icon-unfollowuserbold:before,
.icon-unfollowuserbold.with-icon-after:after {
  content: ""; }

.icon-unfollowuser,
.icon-unfollowuser:before,
.icon-unfollowuser.with-icon-after:after {
  content: ""; }

.icon-unlock,
.icon-unlock:before,
.icon-unlock.with-icon-after:after {
  content: ""; }

.icon-unquote,
.icon-unquote:before,
.icon-unquote.with-icon-after:after {
  content: ""; }

.icon-up,
.icon-up:before,
.icon-up.with-icon-after:after {
  content: ""; }

.icon-upleft,
.icon-upleft:before,
.icon-upleft.with-icon-after:after {
  content: ""; }

.icon-upload,
.icon-upload:before,
.icon-upload.with-icon-after:after {
  content: ""; }

.icon-uploadbox,
.icon-uploadbox:before,
.icon-uploadbox.with-icon-after:after {
  content: ""; }

.icon-uploadcloud,
.icon-uploadcloud:before,
.icon-uploadcloud.with-icon-after:after {
  content: ""; }

.icon-uploadfolder,
.icon-uploadfolder:before,
.icon-uploadfolder.with-icon-after:after {
  content: ""; }

.icon-upright,
.icon-upright:before,
.icon-upright.with-icon-after:after {
  content: ""; }

.icon-usb,
.icon-usb:before,
.icon-usb.with-icon-after:after {
  content: ""; }

.icon-user,
.icon-user:before,
.icon-user.with-icon-after:after {
  content: ""; }

.icon-usergroup,
.icon-usergroup:before,
.icon-usergroup.with-icon-after:after {
  content: ""; }

.icon-users,
.icon-users:before,
.icon-users.with-icon-after:after {
  content: ""; }

.icon-vent,
.icon-vent:before,
.icon-vent.with-icon-after:after {
  content: ""; }

.icon-video,
.icon-video:before,
.icon-video.with-icon-after:after {
  content: ""; }

.icon-videogame,
.icon-videogame:before,
.icon-videogame.with-icon-after:after {
  content: ""; }

.icon-view,
.icon-view:before,
.icon-view.with-icon-after:after {
  content: ""; }

.icon-volume,
.icon-volume:before,
.icon-volume.with-icon-after:after {
  content: ""; }

.icon-webcam,
.icon-webcam:before,
.icon-webcam.with-icon-after:after {
  content: ""; }

.icon-wheelchair,
.icon-wheelchair:before,
.icon-wheelchair.with-icon-after:after {
  content: ""; }

.icon-whisk,
.icon-whisk:before,
.icon-whisk.with-icon-after:after {
  content: ""; }

.icon-woman,
.icon-woman:before,
.icon-woman.with-icon-after:after {
  content: ""; }

.icon-write,
.icon-write:before,
.icon-write.with-icon-after:after {
  content: ""; }

.icon-writingdisabled,
.icon-writingdisabled:before,
.icon-writingdisabled.with-icon-after:after {
  content: ""; }

.icon-zip,
.icon-zip:before,
.icon-zip.with-icon-after:after {
  content: ""; }

.icon-zoomin,
.icon-zoomin:before,
.icon-zoomin.with-icon-after:after {
  content: ""; }

.icon-zoomout,
.icon-zoomout:before,
.icon-zoomout.with-icon-after:after {
  content: ""; }

/**
 * @name Available icons
 * @markup
 * <div class="row">
 *    <div class="column d-1-3">
 *        <p><span class="with-icon-before icon-addfile">icon-addfile</span></p>
 *        <p><span class="with-icon-before icon-airplay">icon-airplay</span></p>
 *        <p><span class="with-icon-before icon-alarmclock">icon-alarmclock</span></p>
 *        <p><span class="with-icon-before icon-alert">icon-alert</span></p>
 *        <p><span class="with-icon-before icon-attach">icon-attach</span></p>
 *        <p><span class="with-icon-before icon-backspace">icon-backspace</span></p>
 *        <p><span class="with-icon-before icon-ban">icon-ban</span></p>
 *        <p><span class="with-icon-before icon-barchart">icon-barchart</span></p>
 *        <p><span class="with-icon-before icon-battery">icon-battery</span></p>
 *        <p><span class="with-icon-before icon-bezier">icon-bezier</span></p>
 *        <p><span class="with-icon-before icon-bike">icon-bike</span></p>
 *        <p><span class="with-icon-before icon-book">icon-book</span></p>
 *        <p><span class="with-icon-before icon-bookmark">icon-bookmark</span></p>
 *        <p><span class="with-icon-before icon-box">icon-box</span></p>
 *        <p><span class="with-icon-before icon-briefcase">icon-briefcase</span></p>
 *        <p><span class="with-icon-before icon-businessuser">icon-businessuser</span></p>
 *        <p><span class="with-icon-before icon-calculator">icon-calculator</span></p>
 *        <p><span class="with-icon-before icon-camera">icon-camera</span></p>
 *        <p><span class="with-icon-before icon-capsule">icon-capsule</span></p>
 *        <p><span class="with-icon-before icon-capsulerecycling">icon-capsulerecycling</span></p>
 *        <p><span class="with-icon-before icon-carrot">icon-carrot</span></p>
 *        <p><span class="with-icon-before icon-cart">icon-cart</span></p>
 *        <p><span class="with-icon-before icon-caution">icon-caution</span></p>
 *        <p><span class="with-icon-before icon-cell">icon-cell</span></p>
 *        <p><span class="with-icon-before icon-chargingbattery">icon-chargingbattery</span></p>
 *        <p><span class="with-icon-before icon-chat">icon-chat</span></p>
 *        <p><span class="with-icon-before icon-check">icon-check</span></p>
 *        <p><span class="with-icon-before icon-checkfile">icon-checkfile</span></p>
 *        <p><span class="with-icon-before icon-clock">icon-clock</span></p>
 *        <p><span class="with-icon-before icon-columns">icon-columns</span></p>
 *        <p><span class="with-icon-before icon-compass">icon-compass</span></p>
 *        <p><span class="with-icon-before icon-compose">icon-compose</span></p>
 *        <p><span class="with-icon-before icon-contract">icon-contract</span></p>
 *        <p><span class="with-icon-before icon-cookingutensils">icon-cookingutensils</span></p>
 *        <p><span class="with-icon-before icon-copier">icon-copier</span></p>
 *        <p><span class="with-icon-before icon-creditcard">icon-creditcard</span></p>
 *        <p><span class="with-icon-before icon-crescentmoon">icon-crescentmoon</span></p>
 *        <p><span class="with-icon-before icon-crop">icon-crop</span></p>
 *        <p><span class="with-icon-before icon-crosshair">icon-crosshair</span></p>
 *        <p><span class="with-icon-before icon-cursor">icon-cursor</span></p>
 *        <p><span class="with-icon-before icon-database">icon-database</span></p>
 *        <p><span class="with-icon-before icon-delete">icon-delete</span></p>
 *        <p><span class="with-icon-before icon-deletefile">icon-deletefile</span></p>
 *        <p><span class="with-icon-before icon-desktop">icon-desktop</span></p>
 *        <p><span class="with-icon-before icon-discdrive">icon-discdrive</span></p>
 *        <p><span class="with-icon-before icon-dishwasher">icon-dishwasher</span></p>
 *        <p><span class="with-icon-before icon-dislike">icon-dislike</span></p>
 *        <p><span class="with-icon-before icon-doc">icon-doc</span></p>
 *        <p><span class="with-icon-before icon-down">icon-down</span></p>
 *        <p><span class="with-icon-before icon-downleft">icon-downleft</span></p>
 *        <p><span class="with-icon-before icon-download">icon-download</span></p>
 *        <p><span class="with-icon-before icon-downloadbox">icon-downloadbox</span></p>
 *        <p><span class="with-icon-before icon-downloadcloud">icon-downloadcloud</span></p>
 *        <p><span class="with-icon-before icon-downloadfolder">icon-downloadfolder</span></p>
 *        <p><span class="with-icon-before icon-downright">icon-downright</span></p>
 *        <p><span class="with-icon-before icon-droplet">icon-droplet</span></p>
 *        <p><span class="with-icon-before icon-eggs">icon-eggs</span></p>
 *        <p><span class="with-icon-before icon-eggtimer">icon-eggtimer</span></p>
 *        <p><span class="with-icon-before icon-eject">icon-eject</span></p>
 *        <p><span class="with-icon-before icon-electrickettle">icon-electrickettle</span></p>
 *        <p><span class="with-icon-before icon-erase">icon-erase</span></p>
 *        <p><span class="with-icon-before icon-exe">icon-exe</span></p>
 *        <p><span class="with-icon-before icon-exhaust">icon-exhaust</span></p>
 *        <p><span class="with-icon-before icon-expand">icon-expand</span></p>
 *        <p><span class="with-icon-before icon-external-link">icon-external-link</span></p>
 *        <p><span class="with-icon-before icon-fan">icon-fan</span></p>
 *        <p><span class="with-icon-before icon-fastforward">icon-fastforward</span></p>
 *        <p><span class="with-icon-before icon-fax">icon-fax</span></p>
 *        <p><span class="with-icon-before icon-female">icon-female</span></p>
 *        <p><span class="with-icon-before icon-file">icon-file</span></p>
 *        <p><span class="with-icon-before icon-files">icon-files</span></p>
 *        <p><span class="with-icon-before icon-film">icon-film</span></p>
 *        <p><span class="with-icon-before icon-flag">icon-flag</span></p>
 *        <p><span class="with-icon-before icon-floppydisk">icon-floppydisk</span></p>
 *        <p><span class="with-icon-before icon-folder">icon-folder</span></p>
 *        <p><span class="with-icon-before icon-followuser">icon-followuser</span></p>
 *        <p><span class="with-icon-before icon-followuserbold">icon-followuserbold</span></p>
 *        <p><span class="with-icon-before icon-fork">icon-fork</span></p>
 *    </div>
 *    <div class="column d-1-3">
 *        <p><span class="with-icon-before icon-gif">icon-gif</span></p>
 *        <p><span class="with-icon-before icon-globe">icon-globe</span></p>
 *        <p><span class="with-icon-before icon-gridlines">icon-gridlines</span></p>
 *        <p><span class="with-icon-before icon-hand">icon-hand</span></p>
 *        <p><span class="with-icon-before icon-hdd">icon-hdd</span></p>
 *        <p><span class="with-icon-before icon-headphones">icon-headphones</span></p>
 *        <p><span class="with-icon-before icon-heart">icon-heart</span></p>
 *        <p><span class="with-icon-before icon-heart-filled">icon-heart-filled</span></p>
 *        <p><span class="with-icon-before icon-help">icon-help</span></p>
 *        <p><span class="with-icon-before icon-highbattery">icon-highbattery</span></p>
 *        <p><span class="with-icon-before icon-highvolume">icon-highvolume</span></p>
 *        <p><span class="with-icon-before icon-home">icon-home</span></p>
 *        <p><span class="with-icon-before icon-hyphen">icon-hyphen</span></p>
 *        <p><span class="with-icon-before icon-inbox">icon-inbox</span></p>
 *        <p><span class="with-icon-before icon-index">icon-index</span></p>
 *        <p><span class="with-icon-before icon-info">icon-info</span></p>
 *        <p><span class="with-icon-before icon-insertcapsule">icon-insertcapsule</span></p>
 *        <p><span class="with-icon-before icon-jpg">icon-jpg</span></p>
 *        <p><span class="with-icon-before icon-jug">icon-jug</span></p>
 *        <p><span class="with-icon-before icon-key">icon-key</span></p>
 *        <p><span class="with-icon-before icon-laptop">icon-laptop</span></p>
 *        <p><span class="with-icon-before icon-layergroup">icon-layergroup</span></p>
 *        <p><span class="with-icon-before icon-layers">icon-layers</span></p>
 *        <p><span class="with-icon-before icon-left">icon-left</span></p>
 *        <p><span class="with-icon-before icon-lightbulb">icon-lightbulb</span></p>
 *        <p><span class="with-icon-before icon-like">icon-like</span></p>
 *        <p><span class="with-icon-before icon-link">icon-link</span></p>
 *        <p><span class="with-icon-before icon-loading">icon-loading</span></p>
 *        <p><span class="with-icon-before icon-location">icon-location</span></p>
 *        <p><span class="with-icon-before icon-lock">icon-lock</span></p>
 *        <p><span class="with-icon-before icon-login">icon-login</span></p>
 *        <p><span class="with-icon-before icon-logo">icon-logo</span></p>
 *        <p><span class="with-icon-before icon-logout">icon-logout</span></p>
 *        <p><span class="with-icon-before icon-lowbattery">icon-lowbattery</span></p>
 *        <p><span class="with-icon-before icon-lowvolume">icon-lowvolume</span></p>
 *        <p><span class="with-icon-before icon-mail">icon-mail</span></p>
 *        <p><span class="with-icon-before icon-male">icon-male</span></p>
 *        <p><span class="with-icon-before icon-man">icon-man</span></p>
 *        <p><span class="with-icon-before icon-measuringcup">icon-measuringcup</span></p>
 *        <p><span class="with-icon-before icon-medicalcross">icon-medicalcross</span></p>
 *        <p><span class="with-icon-before icon-mediumbattery">icon-mediumbattery</span></p>
 *        <p><span class="with-icon-before icon-mediumvolume">icon-mediumvolume</span></p>
 *        <p><span class="with-icon-before icon-merge">icon-merge</span></p>
 *        <p><span class="with-icon-before icon-microchip">icon-microchip</span></p>
 *        <p><span class="with-icon-before icon-microwave">icon-microwave</span></p>
 *        <p><span class="with-icon-before icon-mouse">icon-mouse</span></p>
 *        <p><span class="with-icon-before icon-move">icon-move</span></p>
 *        <p><span class="with-icon-before icon-mp3">icon-mp3</span></p>
 *        <p><span class="with-icon-before icon-music">icon-music</span></p>
 *        <p><span class="with-icon-before icon-navigate">icon-navigate</span></p>
 *        <p><span class="with-icon-before icon-navigatedown">icon-navigatedown</span></p>
 *        <p><span class="with-icon-before icon-navigateleft">icon-navigateleft</span></p>
 *        <p><span class="with-icon-before icon-navigateright">icon-navigateright</span></p>
 *        <p><span class="with-icon-before icon-navigateup">icon-navigateup</span></p>
 *        <p><span class="with-icon-before icon-newspaper">icon-newspaper</span></p>
 *        <p><span class="with-icon-before icon-nosmoking">icon-nosmoking</span></p>
 *        <p><span class="with-icon-before icon-notebook">icon-notebook</span></p>
 *        <p><span class="with-icon-before icon-notifications">icon-notifications</span></p>
 *        <p><span class="with-icon-before icon-notificationsdisabled">icon-notificationsdisabled</span></p>
 *        <p><span class="with-icon-before icon-openfolder">icon-openfolder</span></p>
 *        <p><span class="with-icon-before icon-orange">icon-orange</span></p>
 *        <p><span class="with-icon-before icon-outbox">icon-outbox</span></p>
 *        <p><span class="with-icon-before icon-oven">icon-oven</span></p>
 *        <p><span class="with-icon-before icon-pause">icon-pause</span></p>
 *        <p><span class="with-icon-before icon-pdf">icon-pdf</span></p>
 *        <p><span class="with-icon-before icon-pen">icon-pen</span></p>
 *        <p><span class="with-icon-before icon-phone">icon-phone</span></p>
 *        <p><span class="with-icon-before icon-phonedisabled">icon-phonedisabled</span></p>
 *        <p><span class="with-icon-before icon-picture">icon-picture</span></p>
 *        <p><span class="with-icon-before icon-piechart">icon-piechart</span></p>
 *        <p><span class="with-icon-before icon-pitcher">icon-pitcher</span></p>
 *        <p><span class="with-icon-before icon-pixels">icon-pixels</span></p>
 *        <p><span class="with-icon-before icon-pizzacutter">icon-pizzacutter</span></p>
 *        <p><span class="with-icon-before icon-play">icon-play</span></p>
 *        <p><span class="with-icon-before icon-playvideo">icon-playvideo</span></p>
 *        <p><span class="with-icon-before icon-plus">icon-plus</span></p>
 *        <p><span class="with-icon-before icon-png">icon-png</span></p>
 *        <p><span class="with-icon-before icon-pointdown">icon-pointdown</span></p>
 *    </div>
 *    <div class="column d-1-3">
 *        <p><span class="with-icon-before icon-pointdownright">icon-pointdownright</span></p>
 *        <p><span class="with-icon-before icon-pointdownleft">icon-pointdownleft</span></p>
 *        <p><span class="with-icon-before icon-pointleft">icon-pointleft</span></p>
 *        <p><span class="with-icon-before icon-pointright">icon-pointright</span></p>
 *        <p><span class="with-icon-before icon-pointup">icon-pointup</span></p>
 *        <p><span class="with-icon-before icon-pointupleft">icon-pointupleft</span></p>
 *        <p><span class="with-icon-before icon-pointupright">icon-pointupright</span></p>
 *        <p><span class="with-icon-before icon-print">icon-print</span></p>
 *        <p><span class="with-icon-before icon-printregistration">icon-printregistration</span></p>
 *        <p><span class="with-icon-before icon-quote">icon-quote</span></p>
 *        <p><span class="with-icon-before icon-raisedhand">icon-raisedhand</span></p>
 *        <p><span class="with-icon-before icon-rar">icon-rar</span></p>
 *        <p><span class="with-icon-before icon-record">icon-record</span></p>
 *        <p><span class="with-icon-before icon-refrigerator">icon-refrigerator</span></p>
 *        <p><span class="with-icon-before icon-removefile">icon-removefile</span></p>
 *        <p><span class="with-icon-before icon-repeat">icon-repeat</span></p>
 *        <p><span class="with-icon-before icon-replay">icon-replay</span></p>
 *        <p><span class="with-icon-before icon-retweet">icon-retweet</span></p>
 *        <p><span class="with-icon-before icon-rewind">icon-rewind</span></p>
 *        <p><span class="with-icon-before icon-right">icon-right</span></p>
 *        <p><span class="with-icon-before icon-rows">icon-rows</span></p>
 *        <p><span class="with-icon-before icon-sample">icon-sample</span></p>
 *        <p><span class="with-icon-before icon-scaledown">icon-scaledown</span></p>
 *        <p><span class="with-icon-before icon-scaleup">icon-scaleup</span></p>
 *        <p><span class="with-icon-before icon-scanner">icon-scanner</span></p>
 *        <p><span class="with-icon-before icon-search">icon-search</span></p>
 *        <p><span class="with-icon-before icon-share">icon-share</span></p>
 *        <p><span class="with-icon-before icon-shredder">icon-shredder</span></p>
 *        <p><span class="with-icon-before icon-shuffle">icon-shuffle</span></p>
 *        <p><span class="with-icon-before icon-signpost">icon-signpost</span></p>
 *        <p><span class="with-icon-before icon-skipback">icon-skipback</span></p>
 *        <p><span class="with-icon-before icon-skipforward">icon-skipforward</span></p>
 *        <p><span class="with-icon-before icon-smartphone">icon-smartphone</span></p>
 *        <p><span class="with-icon-before icon-smoking">icon-smoking</span></p>
 *        <p><span class="with-icon-before icon-star">icon-star</span></p>
 *        <p><span class="with-icon-before icon-stop">icon-stop</span></p>
 *        <p><span class="with-icon-before icon-stopwatch">icon-stopwatch</span></p>
 *        <p><span class="with-icon-before icon-storagebox">icon-storagebox</span></p>
 *        <p><span class="with-icon-before icon-stove">icon-stove</span></p>
 *        <p><span class="with-icon-before icon-sugarpackets">icon-sugarpackets</span></p>
 *        <p><span class="with-icon-before icon-sync">icon-sync</span></p>
 *        <p><span class="with-icon-before icon-tablet">icon-tablet</span></p>
 *        <p><span class="with-icon-before icon-tag">icon-tag</span></p>
 *        <p><span class="with-icon-before icon-target">icon-target</span></p>
 *        <p><span class="with-icon-before icon-teabag">icon-teabag</span></p>
 *        <p><span class="with-icon-before icon-thumbnails">icon-thumbnails</span></p>
 *        <p><span class="with-icon-before icon-touchtonephone">icon-touchtonephone</span></p>
 *        <p><span class="with-icon-before icon-trash">icon-trash</span></p>
 *        <p><span class="with-icon-before icon-unfollowuser">icon-unfollowuser</span></p>
 *        <p><span class="with-icon-before icon-unfollowuserbold">icon-unfollowuserbold</span></p>
 *        <p><span class="with-icon-before icon-unlink">icon-unlink</span></p>
 *        <p><span class="with-icon-before icon-unlock">icon-unlock</span></p>
 *        <p><span class="with-icon-before icon-unquote">icon-unquote</span></p>
 *        <p><span class="with-icon-before icon-up">icon-up</span></p>
 *        <p><span class="with-icon-before icon-upleft">icon-upleft</span></p>
 *        <p><span class="with-icon-before icon-upload">icon-upload</span></p>
 *        <p><span class="with-icon-before icon-uploadbox">icon-uploadbox</span></p>
 *        <p><span class="with-icon-before icon-uploadcloud">icon-uploadcloud</span></p>
 *        <p><span class="with-icon-before icon-uploadfolder">icon-uploadfolder</span></p>
 *        <p><span class="with-icon-before icon-upright">icon-upright</span></p>
 *        <p><span class="with-icon-before icon-usb">icon-usb</span></p>
 *        <p><span class="with-icon-before icon-user">icon-user</span></p>
 *        <p><span class="with-icon-before icon-usergroup">icon-usergroup</span></p>
 *        <p><span class="with-icon-before icon-users">icon-users</span></p>
 *        <p><span class="with-icon-before icon-vent">icon-vent</span></p>
 *        <p><span class="with-icon-before icon-video">icon-video</span></p>
 *        <p><span class="with-icon-before icon-videogame">icon-videogame</span></p>
 *        <p><span class="with-icon-before icon-view">icon-view</span></p>
 *        <p><span class="with-icon-before icon-volume">icon-volume</span></p>
 *        <p><span class="with-icon-before icon-webcam">icon-webcam</span></p>
 *        <p><span class="with-icon-before icon-wheelchair">icon-wheelchair</span></p>
 *        <p><span class="with-icon-before icon-whisk">icon-whisk</span></p>
 *        <p><span class="with-icon-before icon-woman">icon-woman</span></p>
 *        <p><span class="with-icon-before icon-write">icon-write</span></p>
 *        <p><span class="with-icon-before icon-writingdisabled">icon-writingdisabled</span></p>
 *        <p><span class="with-icon-before icon-zip">icon-zip</span></p>
 *        <p><span class="with-icon-before icon-zoomin">icon-zoomin</span></p>
 *        <p><span class="with-icon-before icon-zoomout">icon-zoomout</span></p>
 *    </div>
 * </div>
 */
/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Images
 */
/**
 * @name Image Sizes
 * @markup
 * <img class="large-image" src="https://photos.mendeley.com/_stg/9a/ae/9aae2eec5f74123d66a2772ff849488d29d930c0-p256x256.jpg" alt="Profile Picture">
 * <img class="medium-image" src="https://photos.mendeley.com/_stg/9a/ae/9aae2eec5f74123d66a2772ff849488d29d930c0-p256x256.jpg" alt="Profile Picture">
 * <img class="small-image" src="https://photos.mendeley.com/_stg/9a/ae/9aae2eec5f74123d66a2772ff849488d29d930c0-p256x256.jpg" alt="Profile Picture">
 */
img {
  border: 0;
  display: inline-block; }

.large-image {
  height: 10em;
  width: 10rem; }

.medium-image {
  height: 4rem;
  width: 4rem; }

.small-image {
  height: 2rem;
  width: 2rem; }

.large-image,
.medium-image,
.small-image {
  border-radius: 50%; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Inputs
 */
/**
 * @name Label
 * @markup
 * <label for="city">City</label
 */
label {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  color: #474747; }

/**
 * @name Input text
 * @markup
 * <input type="text" placeholder="Large input (default 40px height)">
 * <input class="small-input" type="text" placeholder="Small input (32px height)">
 * <input type="text" placeholder="Enter your city" disabled="disabled">
 */
/**
 * @name Input password
 * @markup
 * <input type="password">
 */
/**
  * @name Input field with alternative placeholder
  * @markup
  * <input class="with-alt-placeholder" type="email" placeholder="e.g. j.smith@harvard.edu">
*/
/**
 * @name Textarea
 * @markup
 * <textarea class="js-textarea" placeholder="Enter your areas of interest"></textarea>
 * <textarea class="js-textarea" placeholder="Enter your areas of interest" disabled="disabled"></textarea>
 */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  background-color: transparent;
  border-color: #DCDCDC;
  border-style: solid;
  border-width: 0 0 2px 0;
  padding: 0;
  outline: none;
  width: 100%; }
  input[type="text"]:hover, input[type="text"]:focus,
  input[type="password"]:hover,
  input[type="password"]:focus,
  input[type="email"]:hover,
  input[type="email"]:focus,
  textarea:hover,
  textarea:focus {
    border-color: #505050; }
  input[type="text"]:invalid,
  input[type="password"]:invalid,
  input[type="email"]:invalid,
  textarea:invalid {
    -webkit-box-shadow: none;
            box-shadow: none; }
  input[type="text"].with-alt-placeholder::-webkit-input-placeholder,
  input[type="password"].with-alt-placeholder::-webkit-input-placeholder,
  input[type="email"].with-alt-placeholder::-webkit-input-placeholder,
  textarea.with-alt-placeholder::-webkit-input-placeholder {
    color: transparent; }
  input[type="text"].with-alt-placeholder:-moz-placeholder,
  input[type="password"].with-alt-placeholder:-moz-placeholder,
  input[type="email"].with-alt-placeholder:-moz-placeholder,
  textarea.with-alt-placeholder:-moz-placeholder {
    color: transparent; }
  input[type="text"].with-alt-placeholder::-moz-placeholder,
  input[type="password"].with-alt-placeholder::-moz-placeholder,
  input[type="email"].with-alt-placeholder::-moz-placeholder,
  textarea.with-alt-placeholder::-moz-placeholder {
    color: transparent; }
  input[type="text"].with-alt-placeholder:-ms-input-placeholder,
  input[type="password"].with-alt-placeholder:-ms-input-placeholder,
  input[type="email"].with-alt-placeholder:-ms-input-placeholder,
  textarea.with-alt-placeholder:-ms-input-placeholder {
    color: transparent; }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    input[type="text"].with-alt-placeholder::-webkit-input-placeholder,
    input[type="password"].with-alt-placeholder::-webkit-input-placeholder,
    input[type="email"].with-alt-placeholder::-webkit-input-placeholder,
    textarea.with-alt-placeholder::-webkit-input-placeholder {
      color: #919191;
      text-align: right; }
    input[type="text"].with-alt-placeholder:-moz-placeholder,
    input[type="password"].with-alt-placeholder:-moz-placeholder,
    input[type="email"].with-alt-placeholder:-moz-placeholder,
    textarea.with-alt-placeholder:-moz-placeholder {
      color: #919191;
      text-align: right; }
    input[type="text"].with-alt-placeholder::-moz-placeholder,
    input[type="password"].with-alt-placeholder::-moz-placeholder,
    input[type="email"].with-alt-placeholder::-moz-placeholder,
    textarea.with-alt-placeholder::-moz-placeholder {
      color: #919191;
      text-align: right; }
    input[type="text"].with-alt-placeholder:-ms-input-placeholder,
    input[type="password"].with-alt-placeholder:-ms-input-placeholder,
    input[type="email"].with-alt-placeholder:-ms-input-placeholder,
    textarea.with-alt-placeholder:-ms-input-placeholder {
      color: #919191;
      text-align: right; } }
  @media only screen and (min-width: 980px) {
    input[type="text"].with-alt-placeholder::-webkit-input-placeholder,
    input[type="password"].with-alt-placeholder::-webkit-input-placeholder,
    input[type="email"].with-alt-placeholder::-webkit-input-placeholder,
    textarea.with-alt-placeholder::-webkit-input-placeholder {
      color: #919191;
      text-align: right; }
    input[type="text"].with-alt-placeholder:-moz-placeholder,
    input[type="password"].with-alt-placeholder:-moz-placeholder,
    input[type="email"].with-alt-placeholder:-moz-placeholder,
    textarea.with-alt-placeholder:-moz-placeholder {
      color: #919191;
      text-align: right; }
    input[type="text"].with-alt-placeholder::-moz-placeholder,
    input[type="password"].with-alt-placeholder::-moz-placeholder,
    input[type="email"].with-alt-placeholder::-moz-placeholder,
    textarea.with-alt-placeholder::-moz-placeholder {
      color: #919191;
      text-align: right; }
    input[type="text"].with-alt-placeholder:-ms-input-placeholder,
    input[type="password"].with-alt-placeholder:-ms-input-placeholder,
    input[type="email"].with-alt-placeholder:-ms-input-placeholder,
    textarea.with-alt-placeholder:-ms-input-placeholder {
      color: #919191;
      text-align: right; } }
  input[type="text"]::-webkit-input-placeholder,
  input[type="password"]::-webkit-input-placeholder,
  input[type="email"]::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #919191; }
  input[type="text"]:-moz-placeholder,
  input[type="password"]:-moz-placeholder,
  input[type="email"]:-moz-placeholder,
  textarea:-moz-placeholder {
    color: #919191; }
  input[type="text"]::-moz-placeholder,
  input[type="password"]::-moz-placeholder,
  input[type="email"]::-moz-placeholder,
  textarea::-moz-placeholder {
    color: #919191; }
  input[type="text"]:-ms-input-placeholder,
  input[type="password"]:-ms-input-placeholder,
  input[type="email"]:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #919191; }
  input[type="text"]:disabled,
  input[type="password"]:disabled,
  input[type="email"]:disabled,
  textarea:disabled {
    border-color: #DCDCDC;
    border-style: dotted; }
    input[type="text"]:disabled::-webkit-input-placeholder,
    input[type="password"]:disabled::-webkit-input-placeholder,
    input[type="email"]:disabled::-webkit-input-placeholder,
    textarea:disabled::-webkit-input-placeholder {
      color: #DCDCDC; }
    input[type="text"]:disabled:-moz-placeholder,
    input[type="password"]:disabled:-moz-placeholder,
    input[type="email"]:disabled:-moz-placeholder,
    textarea:disabled:-moz-placeholder {
      color: #DCDCDC; }
    input[type="text"]:disabled::-moz-placeholder,
    input[type="password"]:disabled::-moz-placeholder,
    input[type="email"]:disabled::-moz-placeholder,
    textarea:disabled::-moz-placeholder {
      color: #DCDCDC; }
    input[type="text"]:disabled:-ms-input-placeholder,
    input[type="password"]:disabled:-ms-input-placeholder,
    input[type="email"]:disabled:-ms-input-placeholder,
    textarea:disabled:-ms-input-placeholder {
      color: #DCDCDC; }

input[type="text"],
input[type="password"],
input[type="email"] {
  height: 40px; }
  input[type="text"].small-input,
  input[type="password"].small-input,
  input[type="email"].small-input {
    height: 32px; }

textarea {
  min-height: 60px;
  max-height: 400px;
  padding-bottom: 0;
  resize: none; }

/**
 * @name Input file when clicking a parent element. Use the class `with-input-file-hidden`.
 * @markup
 * <div class="card with-input-file-hidden">
 *  <p>Click this card and will open an input file</p>
 *  <input type="file" accept="image/*" capture="camera">
 * </div>
 */
.with-input-file-hidden {
  position: relative; }
  .with-input-file-hidden input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    cursor: pointer;
    opacity: 0; }

/**
 * @name Standalone Select
 * @markup
 * <div class="select-wrap with-icon-after icon-navigatedown">
 *   <select name="test">
 *     <option value="1">One</option>
 *     <option value="2">Two</option>
 *     <option value="3">Three</option>
 *     <option value="400">Four hundred</option>
 *     <option value="400">Very long value lorem ipsum etc.</option>
 *   </select>
 * </div>
 * <br>
 *
 * <div class="select-wrap with-icon-before icon-navigatedown">
 *   <select name="test">
 *     <option value="1">One</option>
 *     <option value="2">Two</option>
 *     <option value="3">Three</option>
 *     <option value="400">Four hundred</option>
 *     <option value="400">Very long value lorem ipsum etc.</option>
 *   </select>
 * </div>
 * <br>
 *
 * <div class="select-wrap with-icon-after icon-navigatedown disabled">
 *   <select name="test">
 *     <option value="1">One</option>
 *     <option value="2">Two</option>
 *     <option value="3">Three</option>
 *     <option value="400">Four hundred</option>
 *     <option value="400">Very long value lorem ipsum etc.</option>
 *   </select>
 * </div>
 * <br>
 *
 * <div class="select-wrap with-icon-before with-placeholder icon-navigatedown js-select-colours">
 *   <select name="test">
 *     <option value"">Select one of the following</option>
 *     <option value="1">One</option>
 *     <option value="2">Two</option>
 *     <option value="3">Three</option>
 *     <option value="400">Four hundred</option>
 *     <option value="400">Very long value lorem ipsum etc.</option>
 *   </select>
 * </div>
 */
/**
 * @name Form Select
 * @markup
 * <form>
 *   <div class="select-wrap with-icon-after icon-navigatedown">
 *     <label for="select-1">A cool label</label>
 *     <select id="select-1" name="test">
 *       <option value="1">One</option>
 *       <option value="2">Two</option>
 *       <option value="3">Three</option>
 *       <option value="400">Four hundred</option>
 *       <option value="400">Very long value lorem ipsum etc.</option>
 *     </select>
 *   </div>
 * </form>
 */
/* Select requires a wrapper so icon can be positioned relatively */
.select-wrap {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  position: relative;
  /* Add the custom icon */ }
  .select-wrap:hover select {
    border-color: #E9711C;
    color: #323232; }
    .select-wrap:hover select:disabled {
      border-color: #DCDCDC;
      color: #DCDCDC; }
  .select-wrap:hover:before, .select-wrap:hover:after {
    background: #E9711C;
    border-color: #E9711C;
    color: #FFF; }
  .select-wrap:before, .select-wrap:after {
    -webkit-transition: 111ms ease-out;
    transition: 111ms ease-out;
    -webkit-transition-property: background, border, color;
    transition-property: background, border, color;
    border: 2px solid #B9B9B9;
    bottom: 0.5rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #007398;
    height: 2rem;
    padding: .875rem 0 0.75rem 0.275rem;
    pointer-events: none;
    position: absolute;
    top: auto;
    width: 2rem; }
    .select-wrap:before:hover, .select-wrap:after:hover {
      -webkit-transition: 74ms ease-out;
      transition: 74ms ease-out;
      -webkit-transition-property: background, border, color;
      transition-property: background, border, color; }
  .select-wrap:before {
    left: 0; }
  .select-wrap:after {
    right: 0; }
  .select-wrap.disabled select,
  .select-wrap select:disabled {
    border-color: #DCDCDC;
    border-style: dotted;
    color: #DCDCDC;
    pointer-events: none; }
  .select-wrap.disabled.with-icon-before::before, .select-wrap.disabled.with-icon-after::after {
    background: transparent;
    border: 2px solid #DCDCDC;
    color: #DCDCDC;
    pointer-events: none; }
  .select-wrap.with-icon-before select {
    padding-left: 2.5rem; }
  .select-wrap.with-icon-after select {
    padding-right: 2.5rem; }
  .select-wrap.with-placeholder option:first-of-type {
    display: none; }
  .select-wrap.with-placeholder select {
    color: #919191; }
  .select-wrap.with-placeholder.selected select {
    color: #000; }
  .select-wrap label {
    color: #007398; }

select {
  -webkit-transition: 111ms ease-out;
  transition: 111ms ease-out;
  -webkit-transition-property: background, border, color;
  transition-property: background, border, color;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid #DCDCDC;
  border-radius: 0;
  color: #000;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  height: 40px;
  outline: none;
  padding: 0.5rem 0 0.6rem; }
  select:hover {
    -webkit-transition: 74ms ease-out;
    transition: 74ms ease-out;
    -webkit-transition-property: background, border, color;
    transition-property: background, border, color; }
  select option {
    color: #323232;
    font-family: inherit;
    font-size: inherit; }

form .select-wrap select {
  padding-left: 0.125rem;
  padding-right: 0.125rem; }

form .select-wrap:hover select {
  border-color: #007398; }

form .select-wrap:hover:before, form .select-wrap:hover:after {
  background: #007398;
  border-color: #007398; }

form .select-wrap.disabled select,
form .select-wrap select:disabled {
  border-color: #DCDCDC; }

/* FF hacks */
select {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: ''; }

form .select-wrap select {
  -moz-padding-start: 0;
  -moz-padding-end: 0; }

/* IE hacks */
/* For IE9 this puts the select in front of the icon so it's clickable */
select {
  position: relative;
  z-index: 2; }

.select-wrap:before, .select-wrap:after {
  z-index: 1; }

/* Prevent background when select is opened */
select::-ms-value {
  background: none;
  color: #000; }

/* Hide the default expander icon */
select::-ms-expand {
  display: none; }

/* Hide scroll bar in text area */
textarea {
  -ms-overflow-style: -ms-autohiding-scrollbar; }

/**
 * @name Checkbox
 * @markup
 * <div class="checkbox-wrapper">
 *   <input type="checkbox" id="checkbox-1">
 *   <label for="checkbox-1">I like Mendeley</label>
 * </div>
 * <br>
 * <div class="checkbox-wrapper">
 *   <input type="checkbox" id="checkbox-2" disabled>
 *   <label for="checkbox-2">I like Mendeley</label>
 * </div>
 * <br>
 * <div class="checkbox-wrapper">
 *   <input type="checkbox" id="checkbox-3" disabled checked>
 *   <label for="checkbox-3">I like Mendeley</label>
 * </div>
 */
/**
 * @name Checkbox icon
 * @markup
 * <div class="checkbox-wrapper">
 *   <input type="checkbox" id="checkbox-icon-1" checked>
 *   <label for="checkbox-icon-1"class="with-icon icon-star">Star service</label>
 * </div>
 * <br>
 * <div class="checkbox-wrapper">
 *   <input type="checkbox" id="checkbox-icon-2">
 *   <label for="checkbox-icon-2"class="with-icon icon-mail">Contact by email</label>
 * </div>
 * <br>
 * <div class="checkbox-wrapper">
 *   <input type="checkbox" id="checkbox-icon-3" checked disabled>
 *   <label for="checkbox-icon-3"class="with-icon icon-star">Star service</label>
 * </div>
 * <br>
 * <div class="checkbox-wrapper">
 *   <input type="checkbox" id="checkbox-icon-4" disabled>
 *   <label for="checkbox-icon-4"class="with-icon icon-mail">Contact by email</label>
 * </div>
 */
/**
 * @name Radio button
 * @markup
 * <div class="radio-wrapper">
 *   <input type="radio" id="radio-1" name="radio">
 *   <label for="radio-1">Yes</label>
 * </div>
 * <div class="radio-wrapper">
 *   <input type="radio" id="radio-2" name="radio">
 *   <label for="radio-2">No</label>
 * </div>
 * <br>
 * <div class="radio-wrapper">
 *   <input type="radio" id="radio-3" name="radio-disabled" disabled>
 *   <label for="radio-3">Yes</label>
 * </div>
 * <div class="radio-wrapper">
 *   <input type="radio" id="radio-4" name="radio-disabled"disabled checked>
 *   <label for="radio-4">No</label>
 * </div>
 */
/**
 * @name Radio icon
 * @markup
 * <div class="radio-wrapper">
 *   <input type="radio" id="radio-icon-1" name="radio-with-icon">
 *   <label for="radio-icon-1" class="with-icon icon-male">Male</label>
 * </div>
 * <div class="radio-wrapper">
 *   <input type="radio" id="radio-icon-2" name="radio-with-icon" checked>
 *   <label for="radio-icon-2" class="with-icon icon-female">Female</label>
 * </div>
 * <br>
 * <div class="radio-wrapper">
 *   <input type="radio" id="radio-icon-3" name="radio-with-icon-disabled" disabled>
 *   <label for="radio-icon-3" class="with-icon icon-male">Male</label>
 * </div>
 * <div class="radio-wrapper">
 *   <input type="radio" id="radio-icon-4" name="radio-with-icon-disabled" checked disabled>
 *   <label for="radio-icon-4" class="with-icon icon-female">Female</label>
 * </div>
 */
input[type="radio"] {
  cursor: pointer;
  height: 1.5rem;
  margin-bottom: 1.25rem;
  width: 1.5rem; }

.checkbox-wrapper,
.radio-wrapper {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0 0 0 1.75rem;
  position: relative; }
  .checkbox-wrapper input,
  .radio-wrapper input {
    border: 0.0625rem solid transparent;
    left: -9999px;
    margin: 0;
    position: absolute; }
    .checkbox-wrapper input:focus + label:before,
    .radio-wrapper input:focus + label:before {
      border-color: #505050; }
  .checkbox-wrapper label,
  .radio-wrapper label {
    cursor: pointer;
    display: inline-block;
    line-height: 1.5rem; }
    .checkbox-wrapper label:after,
    .radio-wrapper label:after {
      -webkit-transition: 0.3s ease;
      transition: 0.3s ease;
      -webkit-transition-property: background;
      transition-property: background;
      background: transparent;
      display: block;
      height: 0.625rem;
      left: 0.3125rem;
      position: absolute;
      top: 0.3125rem;
      width: 0.625rem; }
      .checkbox-wrapper label:after:hover,
      .radio-wrapper label:after:hover {
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        -webkit-transition-property: background;
        transition-property: background; }
    .checkbox-wrapper label:before,
    .radio-wrapper label:before {
      cursor: pointer;
      display: inline-block;
      height: 1.25rem;
      left: 0;
      margin: 0 0.625rem 0.125rem 0;
      position: absolute;
      vertical-align: middle;
      width: 1.25rem; }
    .checkbox-wrapper label.with-icon:before,
    .radio-wrapper label.with-icon:before {
      font-family: Mendeley;
      line-height: 0;
      vertical-align: middle;
      font-size: 1.25rem;
      font-weight: normal;
      font-style: normal;
      -webkit-transition: 0.3s ease;
      transition: 0.3s ease;
      -webkit-transition-property: background;
      transition-property: background;
      background: transparent;
      border-radius: 0.75rem;
      color: #007398;
      font-size: 1.2rem;
      height: 1.5rem;
      line-height: 1.5rem;
      width: 1.5rem;
      text-align: center; }
      .checkbox-wrapper label.with-icon:before:hover,
      .radio-wrapper label.with-icon:before:hover {
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        -webkit-transition-property: background;
        transition-property: background; }
    .checkbox-wrapper label:not(.with-icon):before,
    .radio-wrapper label:not(.with-icon):before {
      -webkit-transition: 0.3s ease;
      transition: 0.3s ease;
      -webkit-transition-property: border-color;
      transition-property: border-color;
      border: 0.125rem solid #B9B9B9;
      content: ''; }
      .checkbox-wrapper label:not(.with-icon):before:hover,
      .radio-wrapper label:not(.with-icon):before:hover {
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        -webkit-transition-property: border-color;
        transition-property: border-color; }
    .checkbox-wrapper label:not(.with-icon):after,
    .radio-wrapper label:not(.with-icon):after {
      content: ''; }
    .checkbox-wrapper label:not(.with-icon):hover:before,
    .radio-wrapper label:not(.with-icon):hover:before {
      border-color: #505050; }
  .checkbox-wrapper input:checked + label:after,
  .radio-wrapper input:checked + label:after {
    background: #007398; }
  .checkbox-wrapper input:checked:disabled + label:after,
  .radio-wrapper input:checked:disabled + label:after {
    background: #919191; }
  .checkbox-wrapper input:disabled + label,
  .radio-wrapper input:disabled + label {
    color: #919191; }
    .checkbox-wrapper input:disabled + label:first-of-type:before, .checkbox-wrapper input:disabled + label:last-of-type:after,
    .radio-wrapper input:disabled + label:first-of-type:before,
    .radio-wrapper input:disabled + label:last-of-type:after {
      border-color: #DCDCDC; }
  .checkbox-wrapper input:checked + label.with-icon:before,
  .radio-wrapper input:checked + label.with-icon:before {
    background: #007398;
    color: #FFF; }
  .checkbox-wrapper input:disabled + label.with-icon:before,
  .radio-wrapper input:disabled + label.with-icon:before {
    color: #DCDCDC; }
  .checkbox-wrapper input:checked:disabled + label.with-icon:before,
  .radio-wrapper input:checked:disabled + label.with-icon:before {
    background: #DCDCDC;
    color: #FFF; }

.radio-wrapper + .radio-wrapper {
  margin-left: 1rem; }

.radio-wrapper label:before,
.radio-wrapper label:after {
  border-radius: 50%; }

.radio-wrapper label:after {
  height: 0.5rem;
  left: 0.375rem;
  top: 0.375rem;
  width: 0.5rem; }

/**
 * @name Toggle
 * @markup
 * <div class="toggle-wrapper">
 *   <input type="radio" id="toggle-1" name="toggle" checked>
 *   <label for="toggle-1">No</label>
 *   <input type="radio" id="toggle-2" name="toggle">
 *   <label for="toggle-2">Yes</label>
 * </div>
 * <br>
 * <br>
 * <div class="toggle-wrapper disabled">
 *   <input type="radio" id="toggle-1-disabled" name="toggle-disabled">
 *   <label for="toggle-1-disabled">No</label>
 *   <input type="radio" id="toggle-2-disabled" name="toggle-disabled" checked>
 *   <label for="toggle-2-disabled">Yes</label>
 * </div>
 */
.toggle-wrapper {
  cursor: pointer;
  display: inline-block;
  position: relative; }
  .toggle-wrapper input {
    border: 0.0625rem solid transparent;
    left: -9999px;
    margin: 0;
    position: absolute; }
  .toggle-wrapper label {
    cursor: pointer;
    display: inline-block;
    line-height: 1rem;
    position: relative;
    z-index: 100; }
  .toggle-wrapper label:first-of-type:before,
  .toggle-wrapper label:last-of-type:after {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-transition-property: background;
    transition-property: background;
    content: '';
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 0;
    vertical-align: middle; }
    .toggle-wrapper label:first-of-type:before:hover,
    .toggle-wrapper label:last-of-type:after:hover {
      -webkit-transition: 0.3s ease;
      transition: 0.3s ease;
      -webkit-transition-property: background;
      transition-property: background; }
  .toggle-wrapper label:first-of-type:after,
  .toggle-wrapper label:last-of-type:before {
    border: 0.125rem solid #B9B9B9;
    border-radius: 1rem;
    content: '';
    cursor: pointer;
    display: inline-block;
    height: 1.25rem;
    margin: 0 0 0.125rem 0;
    vertical-align: middle;
    width: 2.5rem; }
  .toggle-wrapper label:first-of-type:after {
    margin-left: 0.625rem; }
  .toggle-wrapper label:first-of-type:before {
    background: #007398;
    border-radius: 0.375rem;
    height: 0.75rem;
    margin: 0.25rem;
    right: 0;
    width: 0.75rem; }
  .toggle-wrapper label:last-of-type {
    margin-left: -2.75rem; }
    .toggle-wrapper label:last-of-type:before {
      margin-right: 0.625rem; }
    .toggle-wrapper label:last-of-type:after {
      background: #B9B9B9;
      border-radius: 0.5rem;
      height: 0.5rem;
      left: 0;
      margin: 0.375rem;
      width: 0.5rem; }
  .toggle-wrapper label:first-of-type:hover:after,
  .toggle-wrapper label:last-of-type:hover:before {
    border-color: #505050; }
  .toggle-wrapper input:checked + label {
    z-index: 1; }
    .toggle-wrapper input:checked + label:first-of-type:before, .toggle-wrapper input:checked + label:last-of-type:after {
      background: transparent; }
  .toggle-wrapper.disabled label {
    color: #919191;
    pointer-events: none; }
    .toggle-wrapper.disabled label:first-of-type:before, .toggle-wrapper.disabled label:last-of-type:after {
      background: #919191; }
    .toggle-wrapper.disabled label:first-of-type:after, .toggle-wrapper.disabled label:last-of-type:before {
      border-color: #DCDCDC; }

.checkbox-wrapper.disabled label,
.checkbox-wrapper input:disabled + label,
.radio-wrapper.disabled label,
.radio-wrapper input:disabled + label,
.toggle-wrapper.disabled label,
.toggle-wrapper input:disabled + label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: not-allowed; }

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
.select-wrap {
  margin-bottom: 1.25rem; }

/**
 * @name Input text with error
 * @markup
 * <input type="text" class="has-error" placeholder="First name">
 * <div class="error-message">First name is required.</div>
 */
input.has-error,
textarea.has-error,
select.has-error {
  border-color: #C83727; }
  input.has-error:hover, input.has-error:focus,
  textarea.has-error:hover,
  textarea.has-error:focus,
  select.has-error:hover,
  select.has-error:focus {
    border-color: #C83727; }

.error-message {
  font-family: NexusSans, Arial, sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  color: #C83727;
  position: relative;
  top: -.75rem; }

/**
 * @name Input fields with animated lables
 * @markup
 * <div class="input-wrap js-animated-labels">
 *   <label for="animated-text">Animated label</label>
 *   <input type="text" id="animated-text">
 * </div>
 * <div class="input-wrap js-animated-labels disabled">
 *   <label for="animated-disabled-text">Disabled animated label</label>
 *   <input type="text" id="animated-disabled-text">
 * </div>
 * <div class="input-wrap js-animated-labels has-error">
 *   <label for="animated-email">Animated label</label>
 *   <input class="with-alt-placeholder" type="email" id="animated-email" placeholder="e.g. j.smith@harvard.edu">
 * </div>
 * <div class="error-message">Email is required.</div>
 * <div class="textarea-wrap js-animated-labels">
 *   <textarea type="text" class="js-textarea" id="animated-textarea"></textarea>
 *   <label for="animated-textarea">Animated label</label>
 * </div>
 */
.input-wrap,
.textarea-wrap {
  margin-bottom: 1.25rem;
  position: relative; }
  .input-wrap:after, .input-wrap:before,
  .textarea-wrap:after,
  .textarea-wrap:before {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-transition-property: width, left;
    transition-property: width, left;
    bottom: 0;
    content: '';
    display: block;
    height: 0.125rem;
    position: absolute; }
    .input-wrap:after:hover, .input-wrap:before:hover,
    .textarea-wrap:after:hover,
    .textarea-wrap:before:hover {
      -webkit-transition: 0.3s ease;
      transition: 0.3s ease;
      -webkit-transition-property: width, left;
      transition-property: width, left; }
  .input-wrap:before,
  .textarea-wrap:before {
    background: #DCDCDC;
    width: 100%; }
  .input-wrap:after,
  .textarea-wrap:after {
    background: #007398;
    left: 50%;
    width: 0; }
  .input-wrap.focused:after,
  .textarea-wrap.focused:after {
    left: 0;
    width: 100%;
    z-index: 1; }
  .input-wrap.focused:before,
  .textarea-wrap.focused:before {
    z-index: 0; }
  .input-wrap.has-error:before,
  .textarea-wrap.has-error:before {
    background: #C83727; }
  .input-wrap.has-error:after,
  .textarea-wrap.has-error:after {
    background: transparent; }
  .input-wrap.disabled,
  .textarea-wrap.disabled {
    pointer-events: none; }
    .input-wrap.disabled:before, .input-wrap.disabled:after,
    .textarea-wrap.disabled:before,
    .textarea-wrap.disabled:after {
      background: transparent; }
    .input-wrap.disabled input, .input-wrap.disabled textarea,
    .textarea-wrap.disabled input,
    .textarea-wrap.disabled textarea {
      border: none;
      border-bottom: dotted 2px #DCDCDC;
      color: #DCDCDC; }
    .input-wrap.disabled label,
    .textarea-wrap.disabled label {
      color: #DCDCDC; }
  .input-wrap input,
  .input-wrap textarea,
  .textarea-wrap input,
  .textarea-wrap textarea {
    border: none;
    margin-bottom: 0; }
  .input-wrap label,
  .textarea-wrap label {
    font-family: NexusSans, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    -webkit-transition: 111ms ease-out;
    transition: 111ms ease-out;
    -webkit-transition-property: top, left, font-size, color;
    transition-property: top, left, font-size, color;
    color: #919191;
    cursor: text;
    left: 0.1rem;
    position: absolute; }
    .input-wrap label:hover,
    .textarea-wrap label:hover {
      -webkit-transition: 74ms ease-out;
      transition: 74ms ease-out;
      -webkit-transition-property: top, left, font-size, color;
      transition-property: top, left, font-size, color; }
    .input-wrap label.focused,
    .textarea-wrap label.focused {
      font-family: NexusSans, Arial, sans-serif;
      font-size: .875rem;
      line-height: 1.5;
      font-weight: normal;
      font-style: normal;
      color: #007398;
      left: 0; }

.input-wrap label {
  top: 0.5rem; }
  .input-wrap label.focused {
    top: -0.5rem; }

.textarea-wrap label {
  top: 0; }
  .textarea-wrap label.focused {
    top: -1rem; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Links
 */
/**
 * @markup
 * <a href="" title="Link">This is a link</a>
 * <br>
 * <br>
 * <br>
 * <a href="" title="Link" class="underline">This is an underlined link</a>
 */
a {
  color: #007398;
  text-decoration: none; }
  a:hover, a.underline {
    text-decoration: underline; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Lists
 */
ul {
  margin: 0 0 1rem 0;
  padding: 0; }

/**
 * @name Horizontal list
 * @markup
 * <ul class="horizontal-list">
 *   <li>Stats</li>
 *   <li>Profile</li>
 *   <li>Library</li>
 *   <li>
 *     <button type="button" class="button-primary">Message</button>
 *   </li>
 *   <li><strong>401</strong> Followers</li>
 * </ul>
 */
.horizontal-list, .navigation-list {
  list-style: none;
  padding: 0; }
  .horizontal-list li, .navigation-list li {
    display: block;
    margin: 0 0 1rem 0; }
    .horizontal-list li:last-child, .navigation-list li:last-child {
      margin-bottom: 0; }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .horizontal-list li, .navigation-list li {
        display: inline-block;
        margin: 0 1rem 0 0; }
        .horizontal-list li:last-child, .navigation-list li:last-child {
          margin-right: 0; } }
    @media only screen and (min-width: 768px) and (max-width: 979px) {
      .horizontal-list li, .navigation-list li {
        display: inline-block;
        margin: 0 1rem 0 0; }
        .horizontal-list li:last-child, .navigation-list li:last-child {
          margin-right: 0; } }
    @media only screen and (min-width: 980px) {
      .horizontal-list li, .navigation-list li {
        display: inline-block;
        margin: 0 1rem 0 0; }
        .horizontal-list li:last-child, .navigation-list li:last-child {
          margin-right: 0; } }

/**
 * @name Attribute list
 * @markup
 * <dl class="attribute-list">
 *    <dt>Institution</dt>
 *    <dd>MRC National Institute for Medical Research</dd>
 *
 *    <dt>Discipline</dt>
 *    <dd>Biological Sciences - Cellular Biology</dd>
 *
 *    <dt>Interest</dt>
 *    <dd>Bioenginneering - Developmental Biology - Cell Biology - Cell communication - DNA development - Behavioural learning</dd>
 * </dl>
 */
.attribute-list {
  margin: 0 0 1rem 0; }
  .attribute-list:before, .attribute-list:after {
    content: "";
    display: table; }
  .attribute-list:after {
    clear: both; }
  .attribute-list dt {
    font-family: NexusSans, Arial, sans-serif;
    font-size: .75rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    color: #919191;
    clear: left;
    float: left;
    line-height: 1rem;
    width: 5rem; }
  .attribute-list dd {
    font-family: NexusSans, Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    display: table-cell; }
    .attribute-list dd .expandable-content {
      font-family: NexusSans, Arial, sans-serif;
      font-size: .875rem;
      line-height: 1.5;
      font-weight: normal;
      font-style: normal; }
  .attribute-list dt,
  .attribute-list dd {
    padding-bottom: 0.25rem; }
    .attribute-list dt:nth-last-child(2), .attribute-list dt:last-child,
    .attribute-list dd:nth-last-child(2),
    .attribute-list dd:last-child {
      padding-bottom: 0; }

/**
 * @name Links list
 * @markup
 * <dl class="links-list">
 *   <dt>What is Mendeley?</dt>
 *
 *   <dd><a href="">Features Overview</a></dd>
 *   <dd><a href="">Reference Manager</a></dd>
 *   <dd><a href="">How We Help</a></dd>
 *   <dd><a href="">Our Users</a></dd>
 *   <dd><a href="">Compare</a></dd>
 * </dl>
 */
.links-list {
  margin: 0 0 1rem 0; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .links-list:nth-child(2n + 1) {
      padding: 0 1.5rem 0 0; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .links-list {
      padding: 0 0.75rem; }
      .links-list:first-child {
        padding-left: 0; }
      .links-list:last-child {
        padding-right: 0; }
      .links-list:only-child {
        padding: 0; } }
  @media only screen and (min-width: 980px) {
    .links-list {
      padding: 0 0.75rem; }
      .links-list:first-child {
        padding-left: 0; }
      .links-list:last-child {
        padding-right: 0; }
      .links-list:only-child {
        padding: 0; } }
  .links-list dt {
    font-family: NexusSans, Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    -webkit-box-shadow: 0px 6px 8px -6px #FFF;
            box-shadow: 0px 6px 8px -6px #FFF;
    border-bottom: 1px solid #B9B9B9;
    margin-bottom: 0.5rem;
    color: #323232; }
  .links-list dd + dt {
    margin-top: 1rem; }
  .links-list dd {
    font-family: NexusSans, Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    margin: 0 0 0.1rem; }
  .links-list a:link,
  .links-list a:visited,
  .links-list a:hover {
    text-decoration: none;
    color: #737373; }
  .links-list a:hover {
    text-decoration: underline; }

/**
 * @name Bare list
 * @markup
 * <ul class="bare-list">
 *    <li>MRC National Institute for Medical Research</li>
 *    <li>Biological Sciences - Cellular Biology</li>
 *    <li>Bioenginneering - Developmental Biology - Cell Biology - Cell communication - DNA development - Behavioural learning</li>
 * </ul>
 */
.bare-list, .bullet-list {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  line-height: 1.75rem;
  list-style-type: none; }

/**
 * @name Bullet list
 * @markup
 * <ul class="bullet-list">
 *    <li>MRC National Institute for Medical Research</li>
 *    <li>Biological Sciences - Cellular Biology</li>
 *    <li>Bioenginneering - Developmental Biology - Cell Biology - Cell communication - DNA development - Behavioural learning</li>
 * </ul>
 */
.bullet-list {
  list-style-type: disc; }
  .bullet-list li {
    margin-left: 1rem; }

/**
 * @name Horizontal Bullet list
 * @markup
 * <ul class="horizontal-bullet-list">
 *    <li>For example</li>
 *    <li>A long list</li>
 *    <li>Of keywords</li>
 *    <li>That</li>
 *    <li>Display inline</li>
 *    <li>With bullets</li>
 * </ul>
 */
.horizontal-bullet-list {
  line-height: 1.75rem;
  margin-left: -1rem; }
  .horizontal-bullet-list:before, .horizontal-bullet-list:after {
    content: "";
    display: table; }
  .horizontal-bullet-list:after {
    clear: both; }
  .horizontal-bullet-list li {
    display: list-item;
    float: left;
    margin-left: 2rem;
    white-space: nowrap; }

/**
 * @name Adaptive bullet list
 * @markup
 * <ul class="adaptive-bullet-list">
 *    <li>First</li>
 *    <li>Second</li>
 *    <li>Third</li>
 * </ul>
 */
.adaptive-bullet-list > li {
  display: inline-block;
  text-align: center; }
  .adaptive-bullet-list > li:not(:last-child):after {
    content: "\2022";
    margin: 0 .5rem; }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .adaptive-bullet-list > li {
      margin: 0 .75rem; }
      .adaptive-bullet-list > li:first-child {
        margin-left: 0; }
      .adaptive-bullet-list > li:not(:last-child):after {
        content: none;
        margin: 0 .75rem; } }
  @media only screen and (min-width: 980px) {
    .adaptive-bullet-list > li {
      margin: 0 .75rem; }
      .adaptive-bullet-list > li:first-child {
        margin-left: 0; }
      .adaptive-bullet-list > li:not(:last-child):after {
        content: none;
        margin: 0 .75rem; } }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Logo
 */
/**
 * @name Site logo
 * @markup
 * <a href="/" title="Mendeley" class="logo">Mendeley</a>
 */
.logo {
  background: transparent url(../images/logo.svg) center no-repeat;
  background-size: 44px 25px;
  display: inline-block;
  height: 1.5625rem;
  overflow: hidden;
  text-indent: -5000px;
  width: 2.75rem; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Notifications
 */
/**
 * @description Styles for inline notifications
 * @markup
 * <div class="card">
 *   <p class="success-inline with-icon-before">This is a success notification with a <a href="#">link</a> in it</p>
 *
 *   <p class="warning-inline with-icon-before">This is a warning notification</p>
 *
 *   <p class="error-inline with-icon-before">This is a error notification</p>
 *
 *   <p class="info-inline with-icon-before">This is a info notification</p>
 * </div>
 **/
.success-inline:before,
.warning-inline:before,
.error-inline:before,
.info-inline:before {
  margin-right: .3rem;
  vertical-align: sub; }

.success-inline:before {
  color: #29a61b;
  content: ""; }

.warning-inline:before {
  color: #E9711C;
  content: ""; }

.error-inline:before {
  color: #C83727;
  content: ""; }

.info-inline:before {
  color: #007398;
  content: ""; }

/**
 * @description Styles for static validation messages
 * @markup
 * <div class="card">
 *   <div class="success-block">
 *     <p class="with-icon-before">This is a success block with a <a href="#">link</a> in it</p>
 *   </div>
 *
 *   <div class="warning-block">
 *     <p class="with-icon-before">This is a warning block </p>
 *   </div>
 *
 *   <div class="error-block">
 *     <p class="with-icon-before">This is a error block</p>
 *   </div>
 *
 *   <div class="info-block">
 *     <p class="with-icon-before">This is a info block</p>
 *   </div>
 * </div>
 **/
.success-block,
.warning-block,
.error-block,
.info-block {
  background-color: #FFF;
  border: 2px solid #000;
  margin: 0 auto 1rem;
  overflow: auto;
  padding: .5rem .5rem .5rem 2.5rem;
  position: relative; }
  .success-block p,
  .warning-block p,
  .error-block p,
  .info-block p {
    font-family: NexusSans, Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    margin: 0; }
    .success-block p.with-icon-before:before,
    .warning-block p.with-icon-before:before,
    .error-block p.with-icon-before:before,
    .info-block p.with-icon-before:before {
      font-family: Mendeley;
      line-height: 0;
      vertical-align: middle;
      font-size: 1.125rem;
      font-weight: normal;
      font-style: normal;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      color: #FFF;
      height: 1.5rem;
      left: 8px;
      line-height: 0;
      padding-top: 0.68rem;
      position: absolute;
      text-align: center;
      top: 9px;
      vertical-align: top;
      width: 1.5rem; }
  .success-block a:link,
  .success-block a:visited,
  .success-block a:hover,
  .success-block a:active,
  .warning-block a:link,
  .warning-block a:visited,
  .warning-block a:hover,
  .warning-block a:active,
  .error-block a:link,
  .error-block a:visited,
  .error-block a:hover,
  .error-block a:active,
  .info-block a:link,
  .info-block a:visited,
  .info-block a:hover,
  .info-block a:active {
    text-decoration: underline; }

.success-block {
  border-color: #29a61b; }
  .success-block > .with-icon-before:before {
    background-color: #29a61b;
    border: 1px solid #29a61b;
    content: ""; }

.warning-block {
  border-color: #E9711C; }
  .warning-block > .with-icon-before:before {
    background-color: #E9711C;
    border: 1px solid #E9711C;
    content: ""; }

.error-block {
  border-color: #C83727; }
  .error-block > .with-icon-before:before {
    background-color: #C83727;
    border: 1px solid #C83727;
    content: ""; }

.info-block {
  border-color: #007398; }
  .info-block > .with-icon-before:before {
    background-color: #007398;
    border: 1px solid #007398;
    content: ""; }

/**
 * @description Flash messages would be visible only for a moment at the top of the page. <br><strong>NOTE:</strong> by default container has `position: fixed;`, but for display purposes we've forced the static positionsing.
 * @markup
 * <div class="flash-notifications" style="position: static;">
 *   <div class="success-block">
 *     <p class="with-icon-before icon-check">This is a success flash message</p>
 *   </div>
 * </div>
 **/
.flash-notifications {
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 5rem;
  width: 100%;
  z-index: 1000; }
  .flash-notifications .success-block,
  .flash-notifications .warning-block,
  .flash-notifications .error-block,
  .flash-notifications .info-block {
    display: table;
    pointer-events: auto; }

/**
 * @description Dismissible notification
 * @markup
 * <div class="flash-notifications" style="position: static;">
 *   <div class="info-block dismissible-notification">
 *     <h4 class="notification-title">Notification title</h4>
 *     <p class="with-icon-before notification-content">This is a info block with a <a href="#">link</a> in it and dismissible. Lorem ipsum dolo sit amet at disciplinum et si. Lorem ipsum dolo sit amet at disciplinum et si. Lorem ipsum dolo sit amet at disciplinum et si.</p>
 *     <span class="with-icon-after icon-delete close-notification"></span>
 *   </div>
 * </div>
 **/
.dismissible-notification {
  margin: 0 auto;
  max-width: 700px; }
  .dismissible-notification .error-block,
  .dismissible-notification .info-block,
  .dismissible-notification .success-block,
  .dismissible-notification .warning-block {
    padding: .5rem 1.75rem .5rem 2.5rem; }
  .dismissible-notification .notification-title {
    margin-bottom: .5rem; }
  .dismissible-notification .notification-content {
    font-family: NexusSans, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal; }
  .dismissible-notification .close-notification {
    cursor: pointer;
    position: absolute;
    right: .5rem;
    top: .5rem; }
    .dismissible-notification .close-notification:before, .dismissible-notification .close-notification:after {
      font-size: 1.5rem; }
    .dismissible-notification .close-notification:hover {
      color: #E9711C; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Progress bars
 */
/**
 * @name Primary progress bars
 * @markup
 *  <div class="card">
 *    <header>
 *      <h2>Your progress bars title</h2>
 *    </header>
 *
 *    <div class="row">
 *      <div class="column d-1-2">Wales</div>
 *      <div class="column d-1-2 text-right">200</div>
 *    </div>
 *    <div class="row">
 *      <div class="column d-1-1">
 *        <div class="progress-bar-container">
 *          <div class="progress-bar">
 *            <div class="progress" style="width: 80%"></div>
 *          </div>
 *        </div>
 *      </div>
 *    </div>
 *
 *    <div class="row">
 *      <div class="column d-1-2">Norway</div>
 *      <div class="column d-1-2 text-right">1.2M</div>
 *    </div>
 *    <div class="row">
 *      <div class="column d-1-1">
 *        <div class="progress-bar-container">
 *          <div class="progress-bar">
 *            <div class="progress" style="width: 60%">
 *              <label>60%</label>
 *            </div>
 *          </div>
 *        </div>
 *      </div>
 *    </div>
 *  </div>
 */
.progress-bar-container {
  padding: 1rem 0 2rem; }

.progress-bar {
  background: #DCDCDC;
  border-radius: 0.4375rem;
  height: 0.4375rem;
  margin: 0 auto;
  width: 100%; }
  .progress-bar .progress {
    background: #E9711C;
    border-radius: 0.4375rem;
    height: 0.4375rem;
    position: relative; }
    .progress-bar .progress label {
      margin-right: -2.5rem;
      margin-top: -2.2rem;
      position: absolute;
      right: 0;
      text-align: center;
      width: 5rem; }
      .progress-bar .progress label:after {
        background: #DCDCDC;
        content: '';
        display: block;
        height: 1rem;
        margin-right: 2.5rem;
        position: absolute;
        right: 0;
        width: 2px; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Table
 */
/**
 * @name Table
 * @markup
 * <div class="card">
 *   <table class="table">
 *     <thead>
 *       <tr>
 *         <th>Column 1 long name</th>
 *         <th>Column 2</th>
 *         <th>Column 3</th>
 *         <th>Column 4</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td>1.1</td>
 *         <td>1.2</td>
 *         <td>1.3</td>
 *         <td>1.4</td>
 *       </tr>
 *       <tr>
 *         <td>2.1</td>
 *         <td>2.2</td>
 *         <td>2.3</td>
 *         <td>2.4</td>
 *       </tr>
 *     </tbody>
 *   </table>
 * </div>
 */
.table {
  background: #F5F5F5;
  border-collapse: collapse;
  overflow: hidden;
  position: relative;
  width: 100%; }
  .table tbody tr:nth-child(even) {
    background: #EBEBEB; }
  .table tbody tr:first-child td {
    padding-top: 1.25rem; }
  .table th, .table td {
    font-weight: normal;
    text-align: left; }
  .table th {
    font-family: NexusSans, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    color: #007398;
    padding: 1.5rem 0 0.5rem 1.25rem;
    position: relative; }
    .table th:after {
      background: #007398;
      bottom: 0;
      content: '';
      height: 0.0625rem;
      position: absolute;
      width: 100%; }
    .table th:not(:last-child):after {
      left: 0; }
    .table th:first-child:after {
      left: 1.25rem; }
    .table th:last-child:after {
      right: 1.25rem; }
  .table td {
    font-family: NexusSans, Arial, sans-serif;
    font-size: .75rem;
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    padding: 0.5rem 0 0.5rem 1.25rem; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Tags
 */
/**
 * @markup
 *   <div class="card">
 *     <span class="tag">Normal tag</span>
 *     <small class="tag">Small tag</small>
 *     <a class="tag">Supercalifragilisticexpialidocious</a>
 *     <span class="tag">Supercalifragilisticexpialidocious and again Supercalifragilisticexpialidocious</span>
 *     <span class="tag">A very long tag with whitespace which we <b>DO</b> want to wrap</span>
 *     <div class="tag"><span>Clickable Icon tag</span><a href="#" class="with-icon-after icon-delete"></a></div>
 *     <div class="tag"><span>Clickable Icon tag very very very very very very very very very very very very very very very very very long long long</span><a href="#" class="with-icon-after icon-delete"></a></div>
 *   </div>
 */
.tag {
  background: #EBEBEB;
  border-radius: 1rem;
  color: #505050;
  display: block;
  float: left;
  line-height: 1rem;
  margin: 0 0.625rem 1rem 0;
  max-width: 100%;
  padding: 0.5rem 1rem;
  position: relative;
  word-wrap: break-word; }
  .tag span {
    display: block;
    margin-right: 1.25rem;
    max-width: 100%; }
  .tag a {
    color: #007398; }
    .tag a.icon-delete {
      position: absolute;
      right: 0.825rem;
      top: 0.5rem;
      width: 1.25rem; }

a.tag {
  color: #007398;
  cursor: pointer; }
  a.tag:hover {
    background: #E9711C;
    color: #FFF; }
    a.tag:hover .with-icon-after {
      color: #FFF; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Text
 * @description Basic text styles and classes
 */
/**
 * @name Use of the font mixin
 * @markup
 * <p>Use the mixin as <strong>@include font(size, type, weight, style)</strong></p>
 * <p>Default type: <strong>sans</strong>. Default weight: <strong>normal</strong>. Default style: <strong>normal</strong>.</p>
 * <br>
 * <p>Accepted sizes for icons: <strong>l, m, s, xs and xxs.</strong></p>
 * <p>Accepted sizes for fonts: <strong>alpha, beta, gamma, delta, epsilon, zeta and eta.</strong></p>
 * <p>Accepted types: <strong>icon, sans and serif.</strong></p>
 */
/**
 * @name Paragraph text
 * @description standard text, size 1rem/16px
 * @markup
 * <p>Here is some text in a paragraph</p>
 * <p>Affogato banh mi letterpress sriracha. Green juice chicharrones ullamco aliqua, consequat incididunt you probably haven't heard of them knausgaard schlitz pop-up pour-over esse pug. Tilde fingerstache dolor 90's small batch culpa, helvetica kale chips literally gastropub. Austin minim adipisicing williamsburg, chambray four loko next level trust fund blog qui sed. Cronut officia celiac, seitan wolf pop-up typewriter ramps est magna poutine drinking vinegar irony kinfolk. Kale chips health goth roof party meditation artisan. Microdosing readymade skateboard, viral ut irony yr eiusmod incididunt banjo beard consectetur gentrify.</p>
 * <p>Est sriracha meditation, irony in art party salvia aesthetic. IPhone banjo quinoa yuccie, sunt vegan truffaut. Waistcoat cillum freegan cronut, bespoke aliqua twee occupy voluptate sapiente fixie blog. Cold-pressed fingerstache aute laboris. Sartorial irure reprehenderit letterpress raw denim. Fixie freegan exercitation, kogi officia waistcoat id organic cornhole biodiesel lomo disrupt pitchfork church-key venmo. Intelligentsia exercitation wolf fugiat literally, listicle consectetur williamsburg polaroid keffiyeh messenger bag tempor duis crucifix bitters.</p>
 * <p>Font size 16px / 1rem</p>
*/
p {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  margin: 0 0 1.5rem 0; }

/**
 * @name Small
 * @markup
 * <small>This is a small text</small>
 * <p>Font size 14px / 0.875rem</p>
 */
small {
  font-family: NexusSans, Arial, sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

/**
 * @name Big text
 * @description Big text is 1.5 &times; font size
 * @markup
 * <p>Here comes <span class="big">some big text</span></p>
 */
.big {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 2.625rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

/**
 * @name Caption
 * @markup
 * <p>
 *   <span class="caption">A caption for some statistic, image, graph or table.</span>
 * </p>
 */
.caption {
  font-family: NexusSans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal; }

/**
 * @name Faded out text
 * @markup
 * <p>
 *   <span class="faded">Some text that has a lighter colour. Kind of like it's faded out</span>
 * </p>
 */
.faded {
  color: #919191; }

/**
 * @name Upper case text
 * @markup
 * <p>
 *   <span class="uppercase">Some text that is uppercase.</span>
 * </p>
 */
.uppercase {
  text-transform: uppercase; }

/**
 * @name Dividers
 * @markup
 * <hr>
 */
hr {
  border-width: 1px 0 0 0;
  border-color: #E7E7E7;
  border-style: solid;
  clear: both;
  margin: 0 0 1rem; }

/**
 * @name Text align
 * @markup
 * <p class="text-left">Text left</p>
 * <p class="text-center">Text center</p>
 * <p class="text-right">Text right</p>
 * <p class="text-justify">
 *  <strong>Justify text</strong><br />
 *  Lorem ipsum dolor sit amet, pro ne purto aperiri, vim graece equidem minimum ei, quo te dicant offendit. Utroque mentitum an pro. Odio graece cu mea. Eu meis dolor vim. Ut inermis albucius usu, usu ut posidonium reprimique. At quas tation cum, no doctus equidem docendi mel, agam simul ut eos.Lorem ipsum dolor sit amet, pro ne purto aperiri, vim graece equidem minimum ei, quo te dicant offendit. Utroque mentitum an pro. Odio graece cu mea. Eu meis dolor vim. Ut inermis albucius usu, usu ut posidonium reprimique. At quas tation cum, no doctus equidem docendi mel, agam simul ut eos.
 * </p>
 */
.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-justify {
  text-align: justify; }

/**
 * @name Text shadow
 * @markup
 * <p> This is a <span class="text-shadow">shadow text</span> and a normal text.</p>
 */
.text-shadow {
  color: #474747;
  text-shadow: 0 0 0 #737373; }

/**
 * @name Break word
 * @markup
 * <p class="break-word">2006-A_crosstalk_between_myeloma_cells_and_marrow_stromal_cells_stimulates_production_of_DKK1_and_interleukin-6_a_potent.pdf</p>
 */
.break-word {
  word-wrap: break-word; }

/**
 * @name Text with icons before and after
 * @description Use the class `with-icon-text` along with the other icon classes `with-icon-before` or `with-icon-after` and the class with the icon name.
 * @markup
 * <p><span class="with-icon-text with-icon-before icon-view">View</span></p>
 * <p><span class="with-icon-text with-icon-before icon-bookmark">Bookmark</span></p>
 * <p><span class="with-icon-text with-icon-before icon-quote">Quote</span></p>
 * <p><span class="with-icon-text with-icon-before icon-file">Document</span></p>
 * <p><span class="with-icon-text with-icon-before icon-navigateright">Navigate right</span></p>
 * <p><span class="with-icon-text with-icon-after icon-view">View</span></p>
 * <p><span class="with-icon-text with-icon-after icon-bookmark">Bookmark</span></p>
 * <p><span class="with-icon-text with-icon-after icon-quote">Quote</span></p>
 * <p><span class="with-icon-text with-icon-after icon-file">Document</span></p>
 * <p><span class="with-icon-text with-icon-after icon-navigateright">Navigate right</span></p>
 */
.with-icon-text.with-icon-before:before {
  padding: 0 .5rem 0 0; }

.with-icon-text.with-icon-after:after {
  padding: 0 0 0 .5rem; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Navigation list
 */
/**
 * @name Navigation List
 * @markup
 * <nav>
 *   <ul class="navigation-list">
 *     <li><a href="" title="">Feed</a></li>
 *     <li><a href="" title="">Library</a></li>
 *     <li><a href="" title="" class="active">Suggest</a></li>
 *     <li class="js-dropdown with-divider">
 *        <a href="" class="with-nav with-icon-before icon-navigatedown" title=""><span>My account</span></a>
 *        <ul>
 *          <li><a href="" title="">Profile</a></li>
 *          <li><a href="" title="">Settings</a></li>
 *          <li><a href="" title="">Privacy</a></li>
 *          <li><a href="" title="">Download Mendeley</a></li>
 *          <li><a href="" title="">Support</a></li>
 *          <li class="with-divider"><a href="" title="">Logout</a></li>
 *        </ul>
 *     </li>
 *     <li><a href="" title="">Groups</a></li>
 *     <li><a href="" title="">Publish</a></li>
 *     <li class="js-dropdown with-divider">
 *        <a href="" class="with-nav with-icon-after icon-navigatedown" title=""><span>My account 2<span></a>
 *        <ul>
 *          <li><a href="" title="">Profile</a></li>
 *          <li><a href="" title="">Settings</a></li>
 *          <li><a href="" title="">Privacy</a></li>
 *          <li><a href="" title="">Download Mendeley</a></li>
 *          <li><a href="" title="">Support</a></li>
 *          <li class="with-divider"><a href="" title="">Logout</a></li>
 *        </ul>
 *     </li>
 *     <li class="button-group">
 *      <a href="/join/" title="Create a free account" class="button-primary">Create a free account</a>
 *      <a href="/sign-in/?routeTo=" class="button-secondary">Sign In</a>
 *     </li>
 *   </ul>
 * </nav>
 */
.navigation-list {
  background-color: #FFF;
  padding-top: 1.5rem;
  margin: 0; }
  .navigation-list:before, .navigation-list:after {
    content: "";
    display: table; }
  .navigation-list:after {
    clear: both; }
  .navigation-list li {
    color: #737373;
    display: block;
    margin: 0; }
    .navigation-list li.with-divider, .navigation-list li.with-divider.button-group {
      border-top: 1px solid #E7E7E7;
      padding-top: 1.5rem; }
    .navigation-list li.button-group {
      padding: 0 1.5rem; }
      .navigation-list li.button-group > span {
        display: inline-block;
        margin: 0 1rem 1.5rem 0;
        vertical-align: middle; }
      .navigation-list li.button-group a, .navigation-list li.button-group button {
        margin-bottom: 1.5rem; }
  .navigation-list > li a:not([class*="button"]) {
    border-bottom: 2px solid transparent;
    color: inherit;
    display: block;
    margin: 0 1.5rem 1rem 1.5rem;
    padding: 0 0 .375rem;
    text-decoration: none;
    -webkit-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out; }
    .navigation-list > li a:not([class*="button"]).with-nav {
      display: none; }
  .navigation-list > li a.with-icon-before span {
    padding-left: .5rem; }
  .navigation-list > li a.with-icon-after span {
    padding-right: .5rem; }
  .navigation-list > li ul {
    margin: 0;
    padding: 0; }

@media only screen and (min-width: 768px) and (max-width: 979px) {
  nav {
    background-color: #FFF;
    padding: 1rem; }
  .navigation-list {
    padding: 0; }
    .navigation-list li {
      display: inline-block;
      margin-right: 1rem;
      position: relative;
      z-index: 999; }
      .navigation-list li.button-group {
        padding: 0; }
        .navigation-list li.button-group > span,
        .navigation-list li.button-group a, .navigation-list li.button-group button {
          margin-bottom: 0; }
      .navigation-list li ul {
        background-color: #FFF;
        border: 1px solid #DCDCDC;
        border-radius: 2px;
        -webkit-box-shadow: 3px 5px 10px -5px #737373;
                box-shadow: 3px 5px 10px -5px #737373;
        display: none;
        position: absolute;
        margin-top: .3rem;
        padding: .5rem 0 .25rem;
        z-index: 1; }
        .navigation-list li ul li,
        .navigation-list li ul a:not([class*="button"]) {
          display: block;
          margin: 0; }
        .navigation-list li ul a:not([class*="button"]) {
          padding: .5rem 1rem;
          border: 0;
          white-space: nowrap; }
          .navigation-list li ul a:not([class*="button"]):hover, .navigation-list li ul a:not([class*="button"]):active, .navigation-list li ul a:not([class*="button"]).active {
            background-color: #007398;
            color: #FFF; }
        .navigation-list li ul:after {
          border-bottom: 8px solid #FFF;
          top: -8px; }
        .navigation-list li ul .with-divider {
          margin-top: .3rem;
          padding-top: .3rem; }
          .navigation-list li ul .with-divider:first-child {
            padding: 0;
            border: 0; }
        .navigation-list li ul.active {
          display: block; }
    .navigation-list > li.with-divider, .navigation-list > li.with-divider.button-group {
      padding: 0;
      border: 0; }
    .navigation-list > li a:not([class*="button"]) {
      margin: 0;
      display: inline-block; }
      .navigation-list > li a:not([class*="button"]):hover, .navigation-list > li a:not([class*="button"]):active, .navigation-list > li a:not([class*="button"]).active {
        border-color: #007398; }
      .navigation-list > li a:not([class*="button"]).with-nav {
        display: inline-block; } }

@media only screen and (min-width: 980px) {
  nav {
    background-color: #FFF;
    padding: 1rem; }
  .navigation-list {
    padding: 0; }
    .navigation-list li {
      display: inline-block;
      margin-right: 1rem;
      position: relative;
      z-index: 999; }
      .navigation-list li.button-group {
        padding: 0; }
        .navigation-list li.button-group > span,
        .navigation-list li.button-group a, .navigation-list li.button-group button {
          margin-bottom: 0; }
      .navigation-list li ul {
        background-color: #FFF;
        border: 1px solid #DCDCDC;
        border-radius: 2px;
        -webkit-box-shadow: 3px 5px 10px -5px #737373;
                box-shadow: 3px 5px 10px -5px #737373;
        display: none;
        position: absolute;
        margin-top: .3rem;
        padding: .5rem 0 .25rem;
        z-index: 1; }
        .navigation-list li ul li,
        .navigation-list li ul a:not([class*="button"]) {
          display: block;
          margin: 0; }
        .navigation-list li ul a:not([class*="button"]) {
          padding: .5rem 1rem;
          border: 0;
          white-space: nowrap; }
          .navigation-list li ul a:not([class*="button"]):hover, .navigation-list li ul a:not([class*="button"]):active, .navigation-list li ul a:not([class*="button"]).active {
            background-color: #007398;
            color: #FFF; }
        .navigation-list li ul:after {
          border-bottom: 8px solid #FFF;
          top: -8px; }
        .navigation-list li ul .with-divider {
          margin-top: .3rem;
          padding-top: .3rem; }
          .navigation-list li ul .with-divider:first-child {
            padding: 0;
            border: 0; }
        .navigation-list li ul.active {
          display: block; }
    .navigation-list > li.with-divider, .navigation-list > li.with-divider.button-group {
      padding: 0;
      border: 0; }
    .navigation-list > li a:not([class*="button"]) {
      margin: 0;
      display: inline-block; }
      .navigation-list > li a:not([class*="button"]):hover, .navigation-list > li a:not([class*="button"]):active, .navigation-list > li a:not([class*="button"]).active {
        border-color: #007398; }
      .navigation-list > li a:not([class*="button"]).with-nav {
        display: inline-block; } }

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .navigation-list li {
    margin-right: .875rem; } }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Masthead
 */
/**
 * @name Navigation
 * @markup-template /partials/header
 * @state signed-in  - { "current_user" : { "first_name": "Hermione", "photo": { "square" : "http://s3.amazonaws.com/mendeley-photos/_stg/9a/ae/9aae2eec5f74123d66a2772ff849488d29d930c0-square.jpg" } } }
 * @state signed-in with a long name  - { "current_user" : { "first_name": "Hermione has a very long long long long long long name", "photo": { "square" : "http://s3.amazonaws.com/mendeley-photos/_stg/9a/ae/9aae2eec5f74123d66a2772ff849488d29d930c0-square.jpg" } } }
 * @state signed-in with section (stats) selected  - { "current_section": "stats", "current_user" : { "first_name": "Hermione has a very long long long long long long name", "photo": { "square" : "http://s3.amazonaws.com/mendeley-photos/_stg/9a/ae/9aae2eec5f74123d66a2772ff849488d29d930c0-square.jpg" } } }
 * @state with a papers search query  - { "papers_search_query": "Search query" }
 */
.masthead {
  background-color: #FFF;
  margin-bottom: 8px;
  padding: 1.5rem 0 0 0;
  position: relative; }
  .masthead:before, .masthead:after {
    content: "";
    display: table; }
  .masthead:after {
    clear: both; }
  .masthead .navigation-list.nav-visible {
    float: right;
    margin-right: 1rem;
    padding: 0; }
    .masthead .navigation-list.nav-visible .button-group {
      margin-top: -.25rem;
      padding: 0; }
      .masthead .navigation-list.nav-visible .button-group a, .masthead .navigation-list.nav-visible .button-group button {
        margin-bottom: 0; }
  .masthead .logo {
    float: left;
    margin: 0 1rem 1.5rem 1rem; }
  .masthead .accessibility-link {
    background-color: #007398;
    color: #FFF;
    font-weight: bold;
    left: -10rem;
    padding: 1rem;
    position: fixed;
    top: 3rem;
    z-index: 999; }
    .masthead .accessibility-link:focus {
      left: 0;
      position: fixed;
      top: 0.75rem; }
  .masthead .icon-button {
    background-color: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    height: 1.25rem;
    margin-right: calc(2rem - 10px);
    outline: none;
    padding: 0 0 0.25rem;
    width: 1.625rem; }
    .masthead .icon-button.active {
      border-bottom-color: #007398; }
    .masthead .icon-button.disabled {
      color: #737373;
      cursor: default; }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .masthead .icon-button {
        margin-right: 2rem; } }
    @media only screen and (max-width: 479px) {
      .masthead .icon-button {
        margin-right: 2rem; } }
  .masthead .mobile-icons {
    height: 2.8125rem;
    text-align: right; }
    .masthead .mobile-icons .menu-button {
      background-color: transparent;
      border: 0;
      color: #323232;
      cursor: pointer;
      display: inline-block;
      float: right;
      font-size: 0.8rem;
      height: 1.25rem;
      line-height: 1.5rem;
      margin-right: 1rem;
      outline: none;
      padding: 0.25rem 0 0;
      text-align: center;
      width: 1.375rem; }
      .masthead .mobile-icons .menu-button .burger-bar {
        background-color: #323232;
        display: block;
        float: right;
        height: 0.125rem;
        margin-bottom: 0.25rem;
        position: relative;
        -webkit-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
        width: 1.375rem; }
      .masthead .mobile-icons .menu-button.active .burger-bar:first-child {
        top: 6px;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg); }
      .masthead .mobile-icons .menu-button.active .burger-bar:nth-child(2n) {
        background-color: transparent; }
      .masthead .mobile-icons .menu-button.active .burger-bar:last-child {
        bottom: 6px;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg); }
  .masthead nav {
    background-color: #FFF;
    border-color: #DCDCDC;
    border-style: solid;
    border-width: 1px 0 2px 0;
    clear: left;
    display: none; }
    .masthead nav .navigation-list li.search,
    .masthead nav .navigation-list .profile-section-link {
      display: none; }
    .masthead nav.masthead-search {
      background-color: #E7E7E7;
      padding: 1rem; }
      .masthead nav.masthead-search .masthead-search-field {
        padding: 0;
        position: relative; }
        .masthead nav.masthead-search .masthead-search-field button {
          position: absolute;
          right: .25rem;
          top: .25rem; }
        .masthead nav.masthead-search .masthead-search-field input {
          background-color: #FFF;
          border: 0;
          margin: 0;
          padding: .5rem .5rem .5rem 2.5rem; }
        .masthead nav.masthead-search .masthead-search-field span {
          color: #007398;
          left: .5rem;
          position: absolute;
          top: .75rem; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .masthead {
      margin-bottom: 16px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .masthead {
      margin-bottom: 16px; } }
  @media only screen and (min-width: 980px) {
    .masthead {
      margin-bottom: 16px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .masthead {
      background-color: #FFF;
      height: 4.5rem; }
      .masthead .logo {
        float: left;
        margin-right: 1rem; }
        .masthead .logo.logo-full {
          background-image: url(../images/logo-full.svg);
          background-size: 128px 25px;
          width: 8rem; }
      .masthead .mobile-icons {
        display: none; }
      .masthead nav {
        background-color: transparent;
        border: 0;
        clear: none;
        display: block;
        float: right;
        padding: 0; }
        .masthead nav.nav-logout {
          width: calc(100% - 212px); }
          .masthead nav.nav-logout .navigation-list li:first-child {
            float: left; }
        .masthead nav .navigation-list {
          margin-right: 1rem;
          text-align: right; }
          .masthead nav .navigation-list li.search,
          .masthead nav .navigation-list .profile-section-link {
            display: inline-block; }
          .masthead nav .navigation-list > li {
            padding-top: .5rem; }
        .masthead nav.masthead-search {
          background-color: #E7E7E7;
          display: none;
          margin-bottom: 1rem;
          width: 100%; }
          .masthead nav.masthead-search .tabs {
            margin: auto 25%; }
      .masthead .navigation-list > li.button-group {
        margin-top: -.25rem;
        padding: 0; }
      .masthead .search {
        margin-left: 0; }
      .masthead .profile {
        margin-right: .25rem; }
        .masthead .profile .icon-button {
          border-bottom: 2px solid transparent;
          color: inherit;
          margin-top: -2px;
          padding: 0 0 .375rem;
          position: relative;
          text-decoration: none;
          top: -3px;
          -webkit-transition: border .2s ease-in-out, color .2s ease-in-out;
          transition: border .2s ease-in-out, color .2s ease-in-out; }
          .masthead .profile .icon-button:hover, .masthead .profile .icon-button:active, .masthead .profile .icon-button.active {
            border-color: #007398; }
          .masthead .profile .icon-button.disabled {
            color: #737373;
            cursor: default; }
            .masthead .profile .icon-button.disabled:hover, .masthead .profile .icon-button.disabled:active, .masthead .profile .icon-button.disabled.active {
              border-color: transparent; }
        .masthead .profile a span {
          display: inline-block;
          max-width: 6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: middle;
          white-space: nowrap; }
        .masthead .profile img {
          border-radius: 16px;
          border: none;
          width: 1.25rem;
          height: 1.25rem;
          position: relative;
          right: 0;
          top: 0;
          vertical-align: middle;
          margin-top: -4px; }
      .masthead .account-dropdown {
        right: 0;
        text-align: left; }
        .masthead .account-dropdown:before, .masthead .account-dropdown:after {
          left: auto;
          right: 5px; } }
  @media only screen and (min-width: 980px) {
    .masthead {
      background-color: #FFF;
      height: 4.5rem; }
      .masthead .logo {
        float: left;
        margin-right: 1rem; }
        .masthead .logo.logo-full {
          background-image: url(../images/logo-full.svg);
          background-size: 128px 25px;
          width: 8rem; }
      .masthead .mobile-icons {
        display: none; }
      .masthead nav {
        background-color: transparent;
        border: 0;
        clear: none;
        display: block;
        float: right;
        padding: 0; }
        .masthead nav.nav-logout {
          width: calc(100% - 212px); }
          .masthead nav.nav-logout .navigation-list li:first-child {
            float: left; }
        .masthead nav .navigation-list {
          margin-right: 1rem;
          text-align: right; }
          .masthead nav .navigation-list li.search,
          .masthead nav .navigation-list .profile-section-link {
            display: inline-block; }
          .masthead nav .navigation-list > li {
            padding-top: .5rem; }
        .masthead nav.masthead-search {
          background-color: #E7E7E7;
          display: none;
          margin-bottom: 1rem;
          width: 100%; }
          .masthead nav.masthead-search .tabs {
            margin: auto 25%; }
      .masthead .navigation-list > li.button-group {
        margin-top: -.25rem;
        padding: 0; }
      .masthead .search {
        margin-left: 0; }
      .masthead .profile {
        margin-right: .25rem; }
        .masthead .profile .icon-button {
          border-bottom: 2px solid transparent;
          color: inherit;
          margin-top: -2px;
          padding: 0 0 .375rem;
          position: relative;
          text-decoration: none;
          top: -3px;
          -webkit-transition: border .2s ease-in-out, color .2s ease-in-out;
          transition: border .2s ease-in-out, color .2s ease-in-out; }
          .masthead .profile .icon-button:hover, .masthead .profile .icon-button:active, .masthead .profile .icon-button.active {
            border-color: #007398; }
          .masthead .profile .icon-button.disabled {
            color: #737373;
            cursor: default; }
            .masthead .profile .icon-button.disabled:hover, .masthead .profile .icon-button.disabled:active, .masthead .profile .icon-button.disabled.active {
              border-color: transparent; }
        .masthead .profile a span {
          display: inline-block;
          max-width: 6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: middle;
          white-space: nowrap; }
        .masthead .profile img {
          border-radius: 16px;
          border: none;
          width: 1.25rem;
          height: 1.25rem;
          position: relative;
          right: 0;
          top: 0;
          vertical-align: middle;
          margin-top: -4px; }
      .masthead .account-dropdown {
        right: 0;
        text-align: left; }
        .masthead .account-dropdown:before, .masthead .account-dropdown:after {
          left: auto;
          right: 5px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .masthead .search span,
    .masthead .profile a span {
      display: none; }
    .masthead .search .with-icon-before:before {
      margin-right: 0; }
    .masthead .profile {
      padding-right: 2rem; } }
  @media only screen and (min-width: 980px) {
    .masthead nav li.search {
      margin-left: 1rem; } }
  .masthead.with-feed-selected .navigation-list > li > a.feed-section-link {
    border-color: #007398; }
  .masthead.with-library-selected .navigation-list > li > a.library-section-link {
    border-color: #007398; }
  .masthead.with-stats-selected .navigation-list > li > a.stats-section-link {
    border-color: #007398; }
  .masthead.with-groups-selected .navigation-list > li > a.groups-section-link {
    border-color: #007398; }
  .masthead.with-data-selected .navigation-list > li > a.data-section-link {
    border-color: #007398; }
  .masthead.with-profile-selected .navigation-list > li > a.profile-section-link {
    border-color: #007398; }
  .masthead.with-funding-selected .navigation-list > li > a.funding-section-link {
    border-color: #007398; }

/**
 * @name Header empty
 * @markup-template /partials/header-empty
 */
/**
 * @name Header Lite
 * @markup-template /partials/header-lite
 */
/**
 * @name Header Registration
 * @markup-template /partials/header-registration
 */
.masthead.reversed-nav {
  background: rgba(0, 0, 0, 0.5); }
  .masthead.reversed-nav .logo {
    background-image: url(../images/logo-white.svg); }
  .masthead.reversed-nav .icon-button {
    color: #FFF; }
  .masthead.reversed-nav .menu-button .burger-bar {
    background-color: #FFF; }
  .masthead.reversed-nav .button-secondary {
    background: transparent;
    border-color: #FFF;
    color: #FFF; }
    .masthead.reversed-nav .button-secondary:hover, .masthead.reversed-nav .button-secondary:focus {
      border-color: #E9711C;
      color: #FF8200; }
  .masthead.reversed-nav nav {
    background-color: rgba(0, 0, 0, 0.5); }
  .masthead.reversed-nav .navigation-list {
    background-color: transparent; }
    .masthead.reversed-nav .navigation-list li {
      color: #FFF; }
      .masthead.reversed-nav .navigation-list li.button-group > span {
        color: #FFF; }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .masthead.reversed-nav .logo.logo-full {
      background-image: url(../images/logo-full-white.svg);
      background-size: 128px 25px;
      width: 8rem; }
    .masthead.reversed-nav nav {
      background-color: transparent; }
      .masthead.reversed-nav nav .navigation-list {
        background-color: transparent; }
        .masthead.reversed-nav nav .navigation-list.with-divider {
          color: #FFF; } }
  @media only screen and (min-width: 980px) {
    .masthead.reversed-nav .logo.logo-full {
      background-image: url(../images/logo-full-white.svg);
      background-size: 128px 25px;
      width: 8rem; }
    .masthead.reversed-nav nav {
      background-color: transparent; }
      .masthead.reversed-nav nav .navigation-list {
        background-color: transparent; }
        .masthead.reversed-nav nav .navigation-list.with-divider {
          color: #FFF; } }

/**
 * @name Header Web Library
 * @markup-template /partials/header-library
 * @state ff - { "current_user" : { "first_name": "Hermione" }, "photo": { "square" : "http://s3.amazonaws.com/mendeley-photos/_stg/9a/ae/9aae2eec5f74123d66a2772ff849488d29d930c0-square.jpg" }, "first_name": "Hermione" }
 */
@media only screen and (min-width: 980px) {
  .masthead.web-library {
    height: 4.5rem; }
    .masthead.web-library .navigation-list > li {
      margin-right: 1.35rem; }
    .masthead.web-library .profile img {
      top: 1.2rem; } }

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .masthead.web-library {
    height: 4.5rem; }
    .masthead.web-library .profile img {
      top: 1.2rem; } }

@media (max-width: 870px) {
  #search-toolbar.masthead-library-search {
    display: none; } }

.masthead.web-library {
  padding: 0; }
  .masthead.web-library * {
    font-size: 16px;
    font-family: NexusSans, Arial, sans-serif; }
  .masthead.web-library .logo {
    top: 24px;
    float: left;
    margin-right: 1rem;
    position: relative; }
  .masthead.web-library nav {
    height: 4.5rem; }
  .masthead.web-library ul.navigation-list {
    height: 4.5rem; }
    .masthead.web-library ul.navigation-list > li {
      padding-top: 0;
      line-height: 0;
      display: block;
      overflow: hidden;
      height: 4.5rem;
      float: left; }
      .masthead.web-library ul.navigation-list > li > a {
        line-height: 1.3rem;
        margin-top: 1.61rem; }
    .masthead.web-library ul.navigation-list > li.profile,
    .masthead.web-library ul.navigation-list > li.account {
      margin-right: 0.2rem; }
    .masthead.web-library ul.navigation-list > li.account {
      overflow: visible; }
  .masthead.web-library .masthead-library-search {
    padding: 0; }
    .masthead.web-library .masthead-library-search input {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      background-color: #F5F5F5;
      border: 0;
      height: 40px;
      line-height: 16px;
      margin: 0;
      outline: none;
      padding: 8px 0 8px 40px;
      width: 224px;
      top: 1rem;
      position: relative; }
    .masthead.web-library .masthead-library-search span {
      position: absolute;
      left: 8px;
      top: 2.2rem; }
    .masthead.web-library .masthead-library-search input:focus + span,
    .masthead.web-library .masthead-library-search input:hover + span {
      color: #007398; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Footer Lite
 */
/**
 * @name Footer Lite
 * @markup
 *  <footer class="footer-lite">
 *    <div class="footer-lite-content">
 *      <div class="row">
 *
 *        <div class="column d-4-6 m-1-1 s-1-1 xs-1-1 text-copyright">
 *          <p>
 *            Copyright &copy; 2020 Mendeley Ltd. <span class="xs-block s-block">We use cookies to help provide and enhance our service and tailor content. By continuing you agree to the <a href="" title="cookies">use of cookies</a>.</span>
 *          </p>
 *        </div>
 *
 *        <div class="column d-2-6 m-1-1 s-1-1 xs-1-1 links-copyright">
 *          <ul>
 *            <li><a href="" title="Copyright">Copyright</a></li>
 *            <li><a href="" title="Terms of Use">Terms of Use</a></li>
 *            <li><a href="" title="Privacy policy">Privacy Policy</a></li>
 *          </ul>
 *        </div>
 *
 *      </div>
 *    </div>
 *  </footer>
 */
.footer-lite {
  background-color: transparent;
  clear: both;
  padding-top: 2.5rem; }
  .footer-lite .footer-lite-content {
    border-top: 1px solid #FFF;
    padding: 1rem .75rem; }
    .footer-lite .footer-lite-content a, .footer-lite .footer-lite-content p {
      font-family: NexusSans, Arial, sans-serif;
      font-size: .875rem;
      line-height: 1.5;
      font-weight: normal;
      font-style: normal;
      color: #FFF;
      margin: 0; }
    .footer-lite .footer-lite-content ul {
      margin: 0; }
      .footer-lite .footer-lite-content ul li {
        display: inline-block;
        list-style: none;
        margin-right: 1.25rem; }
        .footer-lite .footer-lite-content ul li:last-child {
          margin-right: 0; }
        .footer-lite .footer-lite-content ul li a:hover {
          text-decoration: underline; }
  @media only screen and (max-width: 479px) {
    .footer-lite .text-copyright {
      margin-bottom: .75rem; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .footer-lite .text-copyright {
      margin-bottom: .75rem; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .footer-lite .text-copyright {
      margin-bottom: .75rem; } }
  @media only screen and (min-width: 980px) {
    .footer-lite .links-copyright {
      text-align: right; } }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Onboarding
 */
/**
 * @description Used in registration, sign-in and migration pages.
 * @markup
 * <div class="page-onboarding">
 *   <header class="masthead reversed-nav">
 *     <div class="with-container">
 *       <a href="/" title="Mendeley" class="logo logo-full">Mendeley</a>
 *
 *       <ul class="navigation-list nav-visible">
 *         <li class="button-group">
 *           <a href="/sign-in/" class="button-secondary button-small">Sign In</a>
 *         </li>
 *       </ul>
 *     </div>
 *   </header>
 *   <div class="content with-container">
 *     <div class="card-wrapper">
 *       <h1> This is how an A&O page looks more or less</h1>
 *       <p>This is a subtitle</p>
 *       <div class="card">
 *         <div class="input-wrap js-animated-labels">
 *           <label for="animated-text">Animated label</label>
 *           <input type="text" id="animated-text">
 *         </div>
 *         <div class="input-wrap js-animated-labels has-error">
 *           <label for="animated-text2">Animated label with link after</label>
 *           <input type="text" id="animated-text2">
 *         </div>
 *         <div class="error-message">This is an error message that everybody is happy to see</div>
 *         <a href="" class="basic-link text-right float-right"><span>Forgot password?</span></a>
 *         <div class="row">
 *           <div class="column d-1-1">
 *             <div class="checkbox-wrapper">
 *               <input type="checkbox" id="remember_me"/>
 *               <label for="remember_me">Keep me signed in</label>
 *             </div>
 *             <button type="submit" class="button-primary with-icon-after icon-navigateright float-right">Submit</button>
 *           </div>
 *         </div>
 *       </div>
 *       <p class="text-center footnote"> This is a footnote, but it has a dream that someday it will be a subtitle! </p>
 *       <p class="text-center footnote"> New to Mendeley? <a href=""> Click here Clicker McClickerson! </a> </p>
 *     </div>
 *   </div>
 * </div>
 */
.page-onboarding {
  background-image: url(../images/page-onboarding-background-image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  overflow: auto; }
  .page-onboarding .content {
    margin: 0 0 1rem; }
    @media only screen and (min-width: 768px) and (max-width: 979px) {
      .page-onboarding .content {
        margin: 0 auto 3rem; } }
    @media only screen and (min-width: 980px) {
      .page-onboarding .content {
        margin: 0 auto 3rem; } }
    .page-onboarding .content .card-wrapper {
      background: rgba(0, 0, 0, 0.5);
      padding: 2rem 0 1rem; }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        .page-onboarding .content .card-wrapper {
          padding: 2rem; } }
      @media only screen and (min-width: 768px) and (max-width: 979px) {
        .page-onboarding .content .card-wrapper {
          padding: 2rem; } }
      @media only screen and (min-width: 980px) {
        .page-onboarding .content .card-wrapper {
          padding: 2rem; } }
      .page-onboarding .content .card-wrapper > h1 {
        font-family: NexusSans, Arial, sans-serif;
        font-size: 1.5rem;
        line-height: 1.5;
        font-weight: normal;
        font-style: normal; }
        @media only screen and (min-width: 768px) and (max-width: 979px) {
          .page-onboarding .content .card-wrapper > h1 {
            font-family: NexusSans, Arial, sans-serif;
            font-size: 2.625rem;
            line-height: 1.5;
            font-weight: normal;
            font-style: normal; } }
        @media only screen and (min-width: 980px) {
          .page-onboarding .content .card-wrapper > h1 {
            font-family: NexusSans, Arial, sans-serif;
            font-size: 2.625rem;
            line-height: 1.5;
            font-weight: normal;
            font-style: normal; } }
      .page-onboarding .content .card-wrapper .footnote {
        font-family: NexusSans, Arial, sans-serif;
        font-size: .875rem;
        line-height: 1.5;
        font-weight: normal;
        font-style: normal; }
        .page-onboarding .content .card-wrapper .footnote:last-of-type {
          margin-bottom: 0; }
        .page-onboarding .content .card-wrapper .footnote a {
          color: #44C6F4; }
      @media only screen and (min-width: 768px) and (max-width: 979px) {
        .page-onboarding .content .card-wrapper .with-tooltip:hover .tooltip {
          opacity: 0; } }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        .page-onboarding .content .card-wrapper .with-tooltip:hover .tooltip {
          opacity: 0; } }
      @media only screen and (max-width: 479px) {
        .page-onboarding .content .card-wrapper .with-tooltip:hover .tooltip {
          opacity: 0; } }
      .page-onboarding .content .card-wrapper .input-wrap ~ a {
        margin-top: -1.25rem;
        margin-bottom: 1.5rem; }
      .page-onboarding .content .card-wrapper button {
        width: auto; }

/**
 * Colours
 */
/**
 * Shades
 * To add new ones used the names provided in this resource: http://chir.ag/projects/name-that-color
 */
/**
 * Reference for Elsevier and Mendeley colours
 */
/**
 * Mapping colours
 */
/* Errors */
/* Navigation */
/* Navigation Accessibility */
/* Navigation Subnav */
/* Burger */
/* Text */
/* Shadow */
/* Background */
/* Cards */
/* Promo Cards */
/* Card Wrapper */
/* Information Card */
/* Borders */
/* Expandable */
/* Footer */
/* Buttons */
/* Links */
/* Images */
/* Timeline */
/* Tooltips */
/* Tabs */
/* Stats */
/* Forms */
/* Selects */
/* Modal */
/* Progress bar */
/* Autocomplete */
/* Loading */
/* Notifications */
/* Evolution widget */
/* Completion list */
/* Advisor */
/* Publications */
/* Author publication */
/* Publications list */
/* Tags */
/* Table */
/* Dropfile */
/* Headline */
/* Image Upload */
/* Feedback Widget */
/**
 * @name Errors
 */
/**
 * @description The 404 Page layout
 * @markup-template /partials/errors/not-found
 */
/**
 * @description The 50x Page layout
 * @markup-template /partials/errors/internal-error
 */
/**
 * @description The 'Site down' Page layout
 * @markup-template /partials/errors/site-down
 */
.error-wrapper {
  border: 1px solid #E7E7E7;
  padding: 3rem; }
  @media only screen and (min-width: 980px) {
    .error-wrapper {
      background: url(../images/hex-white.png) bottom right no-repeat; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .error-wrapper {
      border-left-width: 10rem; } }
  @media only screen and (min-width: 980px) {
    .error-wrapper {
      border-left-width: 10rem; } }
  .error-wrapper .error-content {
    min-height: 15.625rem; }
    @media only screen and (min-width: 768px) and (max-width: 979px) {
      .error-wrapper .error-content {
        margin-left: -10rem;
        padding-left: 10rem;
        background: url(../images/icon-warning.png) no-repeat; } }
    @media only screen and (min-width: 980px) {
      .error-wrapper .error-content {
        margin-left: -10rem;
        padding-left: 10rem;
        background: url(../images/icon-warning.png) no-repeat; } }
    .error-wrapper .error-content p, .error-wrapper .error-content ul {
      font-family: NexusSans, Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      font-weight: normal;
      font-style: normal;
      list-style-position: inside; }
    .error-wrapper .error-content a,
    .error-wrapper .error-content span {
      color: inherit;
      text-decoration: underline;
      cursor: pointer; }

.error-wrapper .error-content a.button-primary {
  color: #fff;
  text-decoration: none; }

.error-wrapper .center {
  text-align: center; }

@media only screen and (min-width: 880px) {
  .error-wrapper .cookie-error {
    padding-left: 14rem;
    padding-right: 5rem; } }

@media screen and (min-height: 740px) {
  .footer-lite {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0; } }