/*

Main Sass manifest

*/
/* Import Bourbon mixin library */
/* Breakpoint - for creating media query sections */
/* Import global vendor libraries and components */
/**
 * String replacer
 * http://www.sassmeister.com/gist/1b4f2da5527830088e4d
 */
/* Sass variables and configurations */
/**
 *  Breakpoints
 *
 * EM based breakpoints are calculated using the default browser font size,
 * which most commonly is 16px.
 *
 * Therefore, this formula can be used:
 * 28.125em * 16px = 450px
 */
/**
 * Breakpoint gap
 *
 * Used to calculate a max value when defining a range, so that the max value
 * don't coincide with the next breakpoint min value.
 *
 */
/* Breakpoint gap (assumes values are in ems) */
/**
 * Breakpoint map
 *
 * Contains defined breakpoints with em values
 *
 */
/**
 * Specific media query combinations
 */
/**
 * Breakpoint variables to be used with the breakpoint() mixin
 */
/**
 * Specific breakpoints
 */
/* Google Material Icons */
/* Non Google Material Icons */
/* Normalize.css makes browsers render all elements more consistently and in line with modern standards.
 * http://necolas.github.io/normalize.css/
 */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/* https://github.com/hail2u/normalize.scss/ */
/**
 *
 * Apply box-sizing: border-box to everything
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 *
 * Changed the original version according to this:
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
/*
* {
  box-sizing: border-box;
}
*/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/**
 * 1. http://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body/10947583#10947583
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  height: 100%;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* Hide meta tags */
meta {
  display: none !important;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/*
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
/* Removed since it probably won't be used
abbr[title] {
  border-bottom: 1px dotted;
}
*/
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
strong {
  font-weight: bold;
}

/**
 * Reset <b> and <i> elements for use as helper elements
 */
b {
  font-weight: normal;
}

i {
  font-style: normal;
}

em {
  font-style: normal;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  /* TODO: Decide on default font-size for H1 */
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 0.8333333333em;
  /* 1.2 is the projects modular scale fraction */
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 8/9/10.
 * 2. Make all images fluidly fit into its container
 */
img {
  border: 0;
  /* 1. */
  max-width: 100%;
  /* 2. */
}

picture {
  width: 100%;
}

/**
 * Correct overflow not hidden in IE 8/9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 0;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
/* NOT USED.
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
*/
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  -moz-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-appearance: textfield;
  /* 1 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 *
 * fix: adding z-index fixes the clipping
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  /*-webkit-appearance: none;
  -moz-appearance: none;*/
  z-index: 1;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: none;
  margin: 0 2px;
  padding: 0;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  display: block;
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0;
}

/* Touch
   ========================================================================== */
/*
Putting touch-action: manipulation; on a clickable element makes WebKit consider
touches that begin on the element only for the purposes of panning and pinching
to zoom. This means WebKit does not consider double-tap gestures on the element,
so single taps are dispatched immediately.

Read more: https://adactio.com/journal/10019
*/
a, button, input, select, textarea, label, summary {
  touch-action: manipulation;
}

/* BASE */
/* Helper @mixins */
/**
 * OLD-IE
 *
 * This mixin adds hacks for legacy IE versions into the oldie stylesheet
 *
 * Usage:
 *  @include old-ie {
 *   / * These hacks won't appear in the normal stylesheet * /
 *  whatever-ie-sucks-at: hack-value;
 * }
 *
 */
/**
 * SVG ICON
 *
 * Use this mixin to include an svg icon as background image
 * To change color from the default black, send in a #hex color as argument
 *
 * Usage:
 * @include svg-icon($icon--call, #ff99ff);
 * where $icon--call should be defined as a variable containing svg markup
 * for the icon
 *
 */
/* stylelint-disable function-url-quotes */
/* Reason: svg-url is not a css url function */
/* stylelint-enable function-url-quotes */
/**
 * PSEUDO-ELEMENT
 *
 * This mixin adds a fallback for pseudo elements using single colon notation,
 * since IE8 doesn't understand the double colon notation.
 *
 * IE8 also won't understand if both notations are used comma separated like
 * this:
 *

.class::before,
.class:before {
  content: "This will be completely ignored by IE8";
}

 *
 * Dependency:
 *  The old-ie mixin and it's default value of @old-ie is used.
 *
 * Default pseudo element is ::before.
 *
 * Other pseudo elements are: ::after, ::first-letter, ::first-line, ::selection
 *
 * Usage:
 *

.box {
  @include pseudo-element(after) {
    content: "I am generated after the content";
    background-color: blue;
    font-weight: bold;
  }
}

 *
 */
/**
 *
 * ACCESSIBLY-HIDDEN
 *
 * Hides an element from screen view, but is still usable/readable for a screen
 * reader
 *
 */
/* TODO: Where is the following used? Seems to be an odd way */
/* CSS3 */
/*
 Shorthand Border-radius mixins
*/
/* Typography */
html {
  font-size: 20px;
}
@media (min-width: 43.75em) {
  html {
    font-size: 18px;
  }
}

body {
  color: #3B3B3B;
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Make font not render to strong in Chrome and Safari */
  -moz-osx-font-smoothing: grayscale;
  /* Make font not render to strong in Firefox */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  font-size: 1.25em;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
}

h2, .h2, h4, .h4, h6, .h6 {
  font-weight: bold;
}

h1, .h1 {
  font-size: 1.953125em;
}

h2, .h2 {
  font-size: 1.5625em;
}

h3, .h3 {
  font-size: 1.5625em;
}

h4, .h4 {
  font-size: 1.25em;
}

h5, .h5 {
  font-size: 1.25em;
}

h6, .h6 {
  font-size: 1em;
}

@media (min-width: 43.75em) {
  h1, .h1 {
    font-size: 2.44140625em;
  }

  h2, .h2 {
    font-size: 1.953125em;
  }

  h3, .h3 {
    font-size: 1.953125em;
  }

  h4, .h4 {
    font-size: 1.5625em;
  }

  h5, .h5 {
    font-size: 1.5625em;
  }

  h6, .h6 {
    font-size: 1.25em;
  }
}
h1.primary {
  text-align: center;
  color: #0F58D6;
}
h1.primary span {
  color: #FF0000;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}
p.abstract {
  font-size: 20px;
  text-align: center;
}
.centered p.abstract {
  margin-right: auto;
  margin-left: auto;
  max-width: 45em;
}

a {
  color: #0066CC;
  text-decoration: none;
  transition: color 350ms ease;
}
a:active, a:focus, a:hover {
  color: #004d99;
}

hr {
  border-bottom: 1px solid #979797;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: 1.5em 0;
}

/* Layout */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  background-color: #fff;
}

#nav-trigger {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

.body-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #FFF;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 350ms ease;
  transform: translateX(0);
}
.nav-trigger:checked ~ .body-wrap {
  transform: translateX(-85%);
}
@media (min-width: 56.25em) {
  .nav-trigger:checked ~ .body-wrap {
    transform: translateX(0);
  }
}

.page-wrap {
  -ms-flex-positive: 1;
  flex-grow: 1;
}

[role="main"] {
  position: relative;
  z-index: 3;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 3em;
  max-width: 70em;
  /*
  Prevent Firefox from adding double spacing when consequent <br> elements are stacked.
   Also prevents editor from misusing <br> elements as layout tools
   */
}
@media (min-width: 28.125em) {
  [role="main"] {
    padding-right: 40px;
    padding-left: 40px;
  }
}
@media (min-width: 56.25em) {
  [role="main"] {
    padding-right: 50px;
    padding-left: 50px;
  }
}
[role="main"] * + * {
  /* alistapart.com/article/axiomatic-css-and-lobotomized-owls */
  margin-top: 1.5em;
}
[role="main"] > :first-child {
  margin-top: 100px;
}
[role="main"] br + br {
  margin-top: 0;
}

button, [type='button'], [type='reset'], [type='submit'],
.btn {
  appearance: none;
  background-color: #0066CC;
  border: 0;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
  line-height: 1;
  padding: 11px 0px;
  text-align: center;
  text-decoration: none;
  transition: background-color 350ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}
button:hover, button:focus, [type='button']:hover, [type='button']:focus, [type='reset']:hover, [type='reset']:focus, [type='submit']:hover, [type='submit']:focus,
.btn:hover,
.btn:focus {
  background-color: #0052a3;
  color: #fff;
}
button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover,
.btn:disabled:hover {
  background-color: #0066CC;
}
button.inverted, [type='button'].inverted, [type='reset'].inverted, [type='submit'].inverted,
.btn.inverted {
  padding: 8px 28px;
  background-color: #FFF;
  border: 1px solid #0066CC;
  color: #0066CC;
}
button.inverted:hover, button.inverted:focus, [type='button'].inverted:hover, [type='button'].inverted:focus, [type='reset'].inverted:hover, [type='reset'].inverted:focus, [type='submit'].inverted:hover, [type='submit'].inverted:focus,
.btn.inverted:hover,
.btn.inverted:focus {
  background-color: #0052a3;
  border-color: #0052a3;
  color: #fff;
}

fieldset {
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

legend {
  font-weight: 600;
  margin-bottom: 0.375em;
  padding: 0;
}

label {
  display: block;
  font-weight: normal;
  margin-bottom: 5px;
  cursor: pointer;
}

input,
select,
textarea {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  font-size: 18px;
}

[type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
  appearance: none;
  background-color: #fff;
  border: 1px solid #979797;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 5px 7px 6px;
  transition: border-color 350ms ease;
  width: 100%;
  line-height: 1.5;
}
[type='color']:hover, [type='date']:hover, [type='datetime']:hover, [type='datetime-local']:hover, [type='email']:hover, [type='month']:hover, [type='number']:hover, [type='password']:hover, [type='search']:hover, [type='tel']:hover, [type='text']:hover, [type='time']:hover, [type='url']:hover, [type='week']:hover, input:not([type]):hover, textarea:hover {
  border-color: #797979;
}
[type='color']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='email']:focus, [type='month']:focus, [type='number']:focus, [type='password']:focus, [type='search']:focus, [type='tel']:focus, [type='text']:focus, [type='time']:focus, [type='url']:focus, [type='week']:focus, input:not([type]):focus, textarea:focus {
  border-color: #0066CC;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 89, 179, 0.7);
  outline: none;
}
[type='color']:disabled, [type='color']:read-only, [type='date']:disabled, [type='date']:read-only, [type='datetime']:disabled, [type='datetime']:read-only, [type='datetime-local']:disabled, [type='datetime-local']:read-only, [type='email']:disabled, [type='email']:read-only, [type='month']:disabled, [type='month']:read-only, [type='number']:disabled, [type='number']:read-only, [type='password']:disabled, [type='password']:read-only, [type='search']:disabled, [type='search']:read-only, [type='tel']:disabled, [type='tel']:read-only, [type='text']:disabled, [type='text']:read-only, [type='time']:disabled, [type='time']:read-only, [type='url']:disabled, [type='url']:read-only, [type='week']:disabled, [type='week']:read-only, input:not([type]):disabled, input:not([type]):read-only, textarea:disabled, textarea:read-only {
  background-color: #f2f2f2;
  cursor: not-allowed;
}
[type='color']:disabled:hover, [type='color']:read-only:hover, [type='date']:disabled:hover, [type='date']:read-only:hover, [type='datetime']:disabled:hover, [type='datetime']:read-only:hover, [type='datetime-local']:disabled:hover, [type='datetime-local']:read-only:hover, [type='email']:disabled:hover, [type='email']:read-only:hover, [type='month']:disabled:hover, [type='month']:read-only:hover, [type='number']:disabled:hover, [type='number']:read-only:hover, [type='password']:disabled:hover, [type='password']:read-only:hover, [type='search']:disabled:hover, [type='search']:read-only:hover, [type='tel']:disabled:hover, [type='tel']:read-only:hover, [type='text']:disabled:hover, [type='text']:read-only:hover, [type='time']:disabled:hover, [type='time']:read-only:hover, [type='url']:disabled:hover, [type='url']:read-only:hover, [type='week']:disabled:hover, [type='week']:read-only:hover, input:not([type]):disabled:hover, input:not([type]):read-only:hover, textarea:disabled:hover, textarea:read-only:hover {
  border: 1px solid #979797;
}
[type='color']:-moz-read-only, [type='date']:-moz-read-only, [type='datetime']:-moz-read-only, [type='datetime-local']:-moz-read-only, [type='email']:-moz-read-only, [type='month']:-moz-read-only, [type='number']:-moz-read-only, [type='password']:-moz-read-only, [type='search']:-moz-read-only, [type='tel']:-moz-read-only, [type='text']:-moz-read-only, [type='time']:-moz-read-only, [type='url']:-moz-read-only, [type='week']:-moz-read-only, input:not([type]):-moz-read-only, textarea:-moz-read-only {
  background-color: #f2f2f2;
  cursor: not-allowed;
}
[type='color']::placeholder, [type='date']::placeholder, [type='datetime']::placeholder, [type='datetime-local']::placeholder, [type='email']::placeholder, [type='month']::placeholder, [type='number']::placeholder, [type='password']::placeholder, [type='search']::placeholder, [type='tel']::placeholder, [type='text']::placeholder, [type='time']::placeholder, [type='url']::placeholder, [type='week']::placeholder, input:not([type])::placeholder, textarea::placeholder {
  color: #898989;
}

textarea {
  resize: vertical;
}

[type="checkbox"],
[type="radio"] {
  display: inline;
  margin-right: 0.375em;
}

[type="file"] {
  margin-bottom: 0.75em;
  width: 100%;
}

select {
  margin-bottom: 0.75em;
  width: 100%;
}

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

dl {
  margin: 0;
}

dt {
  font-weight: 600;
  margin: 0;
}

dd {
  margin: 0;
}

figure {
  margin: 0;
}

img,
picture {
  margin: 0;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  width: 100%;
}

th {
  font-weight: 600;
  padding: 0;
  text-align: left;
}

td {
  padding: 0;
}

tr,
td,
th {
  vertical-align: middle;
}

/* ------------------------------------ *\
// ATOMS
\* ------------------------------------ */
/**
 *
 * ATOMS
 *
 */
/* Buttons */
/* ------------------------------------ *\
// MOLECULES
\* ------------------------------------ */
/**
 *
 * MOLECULES
 *
 */
/* Field */
/**
 *
 * INPUT-FIELD
 *
 * Common container for input fields
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for INPUT-FIELD
 */
/**
 * MIXINS for INPUT-FIELD
 */
/**
 * Module
 */
.input-field {
  position: relative;
}
.input-field input {
    font-size: 20px;
}

/* Checkbox */
/**
 *
 * CHECKBOX
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for CHECKBOX
 */
/**
 * FUNCTIONS for CHECKBOX
 */
/**
 * MIXINS for CHECKBOX
 */
/**
 * Module
 */
.checkbox input[type="checkbox"] {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}
.checkbox input[type="checkbox"]:checked ~ label {
  /* Only use this content if we're dealing with old IE */
}
.checkbox input[type="checkbox"]:checked ~ label::before {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2301A301' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  speak: none;
}
.checkbox label {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 34px;
  /* Only use this content if we're dealing with old IE */
}
.checkbox label::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #979797;
  border-radius: 3px;
  content: "";
}
.checkbox label:hover {
  /* Only use this content if we're dealing with old IE */
}
.checkbox label:hover::before {
  border-color: #0066CC;
}

/* Select */
/**
 *
 * SELECT-MENU
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for SELECT-MENU
 */
/**
 * FUNCTIONS for SELECT-MENU
 */
/**
 * MIXINS for SELECT-MENU
 */
/* CUSTOM SELECT */
/* Container used for styling the custom select, the buttom class below adds the
 * bg gradient, corners, etc. */
/**
 * Module
 */
/* CUSTOM SELECT */
.select-menu__wrapper {
  position: relative;
  display: block;
  /* This is the native select, we're making everything but the text invisible so
   * we can see the button styles in the wrapper */
  /* Custom arrow sits on top of the select - could be an image, SVG, icon font,
   * etc. or the arrow could just baked into the bg image on the select. */
  /* Only use this content if we're dealing with old IE */
  /* Set the background fallback to solid #fff so Firefox renders the <option> list readably. */
  border: 1px solid #979797;
  border-radius: 3px;
  background: #EBF0F0;
  /* Old browsers */
  background: #fff -moz-linear-gradient(top, #ffffff 0%, #EBF0F0 100%);
  /* FF3.6+ */
  background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #EBF0F0));
  /* Chrome,Safari4+ */
  background: #fff -webkit-linear-gradient(top, #ffffff 0%, #EBF0F0 100%);
  /* Chrome10+,Safari5.1+ */
  background: #fff -o-linear-gradient(top, #ffffff 0%, #EBF0F0 100%);
  /* Opera 11.10+ */
  background: #fff -ms-linear-gradient(top, #ffffff 0%, #EBF0F0 100%);
  /* IE10+ */
  background: #fff linear-gradient(to bottom, #ffffff 0%, #EBF0F0 100%);
  /* W3C */
  /* Only use this content if we're dealing with old IE */
}
.select-menu__wrapper select {
  width: 100%;
  margin: 0;
  outline: none;
  padding: 7px 7px 7px 7px;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Font size must be 16px to prevent iOS page zoom on focus */
  font-size: 16px;
  /* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
}
.select-menu__wrapper select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.select-menu__wrapper::after {
  /* These hacks make the select behind the arrow clickable in some browsers */
}
.select-menu__wrapper select {
  /* General select styles: change as needed */
  font-weight: normal;
  color: #444;
  border-radius: 3px;
}
.select-menu__wrapper select:focus {
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  /* Match-02 */
}
@supports (box-shadow: none) {
  .select-menu__wrapper select:focus {
    outline: none;
  }
}
.select-menu__wrapper::after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 40px;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-left: 1px solid #979797;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230F58D6' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
  speak: none;
  content: '';
  pointer-events: none;
}
.select-menu__wrapper:hover {
  border-color: #888;
}
.select-menu__wrapper option {
  font-weight: normal;
}

@supports (-webkit-appearance: none) or (appearance: none) or ((-moz-appearance: none) and (mask-type: alpha)) {
  .select-menu__wrapper {
    /* Show custom arrow */
    /* Only use this content if we're dealing with old IE */
    /* Remove select styling */
  }
  .select-menu__wrapper::after {
    display: block;
  }
  .select-menu__wrapper select {
    padding-right: 2em;
    /* Match-01 */
    padding-right: 50px;
    /* inside @supports so that iOS <= 8 display the native arrow */
    background: none;
    /* Match-04 */
    /* inside @supports so that Android <= 4.3 display the native arrow */
    border: 1px solid transparent;
    /* Match-05 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .select-menu__wrapper select:focus {
    border-color: #aaa;
    /* Match-03 */
  }
}
/* Adds Firefox < 35 support */
/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
@-moz-document url-prefix() {
  .select-menu__wrapper {
    /* Warning: this kills the focus outline style */
    overflow: hidden;
    /* Only use this content if we're dealing with old IE */
    /* Make the native select extra wide so the arrow is clipped. 1.5em seems to be enough to safely clip it */
    /* Firefox 35+ that supports hiding the native select can have a proper 100% width, no need for the overflow clip trick */
  }
  .select-menu__wrapper::after {
    display: block;
  }
  .select-menu__wrapper select {
    overflow: -moz-hidden-unscrollable;
    padding-right: .4em;
    background: none;
    /* Match-04 */
    border: 1px solid transparent;
    /* Match-05 */
    /* Firefox < 4 */
    min-width: 6em;
    width: 130%;
    /* Firefox 4-15 */
    min-width: -moz-calc(0em);
    width: -moz-calc(100% + 2.4em);
    /* Firefox 16+ */
    min-width: calc(0em);
    width: calc(100% + 2.4em);
  }
  @supports (mask-type: alpha) {
    .select-menu__wrapper {
      overflow: visible;
    }
    .select-menu__wrapper select {
      -moz-appearance: none;
      width: 100%;
      padding-right: 50px;
    }
  }
}
/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance. Targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .select-menu__wrapper {
    /* Only use this content if we're dealing with old IE */
  }
  .select-menu__wrapper select::-ms-expand {
    display: none;
  }
  .select-menu__wrapper select:focus {
    border-color: #aaa;
    /* Match-03 */
  }
  .select-menu__wrapper select:focus::-ms-value {
    background: transparent;
    color: #222;
    /* Match-02*/
  }
  .select-menu__wrapper select {
    padding-right: 50px;
    background: none;
    /* Match-04 */
    border: 1px solid transparent;
    /* Match-05 */
  }
  .select-menu__wrapper::after {
    display: block;
  }
}
/* Product card */
/**
 *
 * PRODUCT CARD
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for [MODULE]
 */
/**
 * FUNCTIONS for [MODULE]
 */
/**
 * MIXINS for PRODUCT CARD
 */
/**
 * Module
 */
.product-card {
    position: relative;
}
.product-card .product-card__edit {
  font-weight: normal;
  font-size: 0.8em;
}
.product-card th,
.product-card .product-card__label {
  font-weight: normal;
  font-size: 0.8em;
}
.product-card th,
.product-card td,
.product-card .product-card__label,
.product-card .product-card__value {
    display: block;
    margin-top: 0;
    font-size: 0.8em;
}
.product-card * + tr th {
  padding-top: 0.75em;
}
@media (min-width: 56.25em) {
  .product-card table {
    table-layout: auto;
    margin-top: 0;
  }
  .product-card th,
  .product-card td {
    display: table-cell;
    vertical-align: baseline;
    white-space: nowrap;
  }
  .product-card th {
    padding-right: 20px;
  }
  .product-card td {
    width: 100%;
  }
  .product-card .product-card__label,
  .product-card .product-card__value {
    display: inline;
  }
  .product-card * + tr th {
    padding-top: 0;
  }
}

.product-card__category-image {
  display: none;
}
@media (min-width: 56.25em) {
  .product-card__category-image {
    display: block;
    float: left;
    margin-right: 20px;
    width: 100px;
  }
}

.product-card__designation .product-card__value {
  font-weight: bold;
}

@media (min-width: 56.25em) {
  .product-card__category {
    display: none;
  }
}

@media (min-width: 43.75em) {
  .product-card__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
    .product-card__meta {
        width: 23%;
    }
    .product-card__compliance {
        width: 37%;
    }
}
@media (min-width: 56.25em) {
  .product-card__info {
    margin: 0;
  }
}

@media (min-width: 43.75em) {
  .product-card__designation {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}

.product-card__compliance .compliant {
  color: #01A301;
}
.product-card__compliance .exemption {
  color: #F5A623;
}
.product-card__compliance .uncompliant {
  color: #D0021B;
}
.product-card__compliance label {
  margin-bottom: 0;
  color: #0066CC;
  text-decoration: none;
  transition: color 350ms ease;
}
.product-card__compliance label:active, .product-card__compliance label:focus, .product-card__compliance label:hover {
  color: #004d99;
}

[class^="product-card__toggle"] {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

.product-card__exemptions {
  display: none;
  padding: 20px;
  border: 1px solid #979797;
  border-radius: 3px;
}
[class^="product-card__toggle"]:checked ~ .product-card__exemptions {
  display: block;
}
.product-card__exemptions .product-card__rohs,
.product-card__exemptions .product-card__reach,
.product-card__exemptions .product-card__conflictminerals,
.product-card__exemptions .product-card__chinarohs,
.product-card__exemptions .product-card__persistentorganicpollutants,
.product-card__exemptions .product-card__californiaproposition65,
.product-card__exemptions .product-card__canadacepa1999,
.product-card__exemptions .product-card__safetydatasheet,
.product-card__exemptions .product-card__batterydirective,
.product-card__exemptions .product-card__weeedirective,
.product-card__exemptions .product-card__transportofhazardousgoods,
.product-card__exemptions .product-card__packagingdirective,
.product-card__exemptions .product-card__hongkongconvention,
.product-card__exemptions .product-card__uniferisl,
.product-card__exemptions .product-card__fluorinatedgreenhousegases,
.product-card__exemptions .product-card__ozonedepletingsubstances,
.product-card__exemptions .product-card__customerspecificlists,
.product-card__exemptions .product-card__additionalproductinformation {
    display: none;
}
[class^="product-card__toggle-rohs"]:checked ~ .product-card__exemptions .product-card__rohs,
[class^="product-card__toggle-reach"]:checked ~ .product-card__exemptions .product-card__reach,
[class^="product-card__toggle-conflictminerals"]:checked ~ .product-card__exemptions .product-card__conflictminerals,
[class^="product-card__toggle-chinarohs"]:checked ~ .product-card__exemptions .product-card__chinarohs,
[class^="product-card__toggle-persistentorganicpollutants"]:checked ~ .product-card__exemptions .product-card__persistentorganicpollutants,
[class^="product-card__toggle-californiaproposition65"]:checked ~ .product-card__exemptions .product-card__californiaproposition65,
[class^="product-card__toggle-canadacepa1999"]:checked ~ .product-card__exemptions .product-card__canadacepa1999,
[class^="product-card__toggle-safetydatasheet"]:checked ~ .product-card__exemptions .product-card__safetydatasheet,
[class^="product-card__toggle-batterydirective"]:checked ~ .product-card__exemptions .product-card__batterydirective,
[class^="product-card__toggle-weeedirective"]:checked ~ .product-card__exemptions .product-card__weeedirective,
[class^="product-card__toggle-transportofhazardousgoods"]:checked ~ .product-card__exemptions .product-card__transportofhazardousgoods,
[class^="product-card__toggle-packagingdirective"]:checked ~ .product-card__exemptions .product-card__packagingdirective,
[class^="product-card__toggle-hongkongconvention"]:checked ~ .product-card__exemptions .product-card__hongkongconvention,
[class^="product-card__toggle-uniferisl"]:checked ~ .product-card__exemptions .product-card__uniferisl,
[class^="product-card__toggle-fluorinatedgreenhousegases"]:checked ~ .product-card__exemptions .product-card__fluorinatedgreenhousegases,
[class^="product-card__toggle-ozonedepletingsubstances"]:checked ~ .product-card__exemptions .product-card__ozonedepletingsubstances,
[class^="product-card__toggle-customerspecificlists"]:checked ~ .product-card__exemptions .product-card__customerspecificlists,
[class^="product-card__toggle-additionalproductinformation"]:checked ~ .product-card__exemptions .product-card__additionalproductinformation {
    display: block;
}
.product-card__exemptions h3 {
  font-size: 1em;
  font-weight: bold;
}
.product-card__exemptions h3 + p {
  margin-top: 5px;
}
.product-card__exemptions * + div {
  border-top: 1px solid #979797;
}
.product-card__exemptions * + div h3 {
  margin-top: 1.5em;
}
@media (min-width: 28.125em) {
  .product-card__exemptions {
    padding: 40px;
  }
}

/* User card */
/**
 *
 * USER CARD
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for USER CARD
 */
/**
 * FUNCTIONS for USER CARD
 */
/**
 * MIXINS for USER CARD
 */
/**
 * Module
 */
.user-card svg {
  width: 24px;
  height: 24px;
  fill: #0F58D6;
}
@media (min-width: 0) {
  .user-card {
    text-align: center;
  }
  .user-card svg {
    width: 50px;
    height: 50px;
  }
}
@media (min-width: 43.75em) {
  .user-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
  }
  .user-card svg {
    width: 24px;
    height: 24px;
  }
}

.user-card__name {
  margin-top: 0;
  font-size: 1.25em;
  font-weight: bold;
}
@media (min-width: 43.75em) {
  .user-card__name {
    -webkit-box-flex: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    margin-left: 10px;
    font-size: 1em;
  }
}

.user-card__admin {
  margin-top: 0;
  font-size: 0.8em;
  font-style: italic;
}
@media (min-width: 43.75em) {
  .user-card__admin {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 10px;
  }
}

.user-card__actions {
  margin-top: 0;
  margin-right: -10px;
  margin-left: -10px;
}
.user-card__actions li {
  display: inline-block;
  margin-top: 0;
  padding-right: 10px;
  padding-left: 10px;
}
.user-card__actions * + li {
  border-left: 1px solid #979797;
}

/* ------------------------------------ *\
// ORGANISMS
\* ------------------------------------ */
/**
 *
 * ORGANISMS
 *
 */
/* Page Header */
/**
 *
 * HEADER
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for [MODULE]
 */
/**
 * FUNCTIONS for [MODULE]
 */
/**
 * MIXINS for HEADER
 */
/**
 * Module
 */
@media (min-width: 0) {
  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .header .nav-trigger {
    margin-bottom: 0;
    font-weight: normal;
    color: #0066CC;
    cursor: pointer;
  }
}
@media (min-width: 43.75em) {
  .header .nav-trigger {
    display: none;
  }
}

@media (min-width: 0) {
  .header__logo {
    width: 163px;
  }
  .header__logo a {
    display: block;
  }
  .header__logo b {
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
  }
  .header__logo img {
    display: block;
  }
}

@media (min-width: 0) {
  .header__links {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-right: 28px;
    /* Only use this content if we're dealing with old IE */
    /* Only use this content if we're dealing with old IE */
  }
  .header__links::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 22px;
    background-color: #0F58D6;
    content: '';
  }
  .header__links::after {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 26px;
    height: 22px;
    background-color: #FF0000;
    box-shadow: -2px 0 #FFFFFF;
    content: '';
  }
  .header__links a {
    display: none;
  }
}
@media (min-width: 43.75em) {
  .header__links a {
    display: inline-block;
  }
  .header__links * + a {
    margin-left: 1.5em;
  }
}

/* Page Footer */
/**
 *
 * FOOTER
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for [MODULE]
 */
/**
 * FUNCTIONS for [MODULE]
 */
/**
 * MIXINS for FOOTER
 */
/**
 * Module
 */
@media (min-width: 0) {
  .footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    box-shadow: 0 -22px #0F58D6 inset;
  }
}

@media (min-width: 0) {
  .footer__logo {
    width: 180px;
  }
  .footer__logo img {
    display: block;
  }
  .footer__logo b {
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
  }
}

@media (min-width: 0) {
  .footer__links {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-left: 28px;
    /* Only use this content if we're dealing with old IE */
  }
  .footer__links::after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 26px;
    height: 22px;
    background-color: #FF0000;
    box-shadow: 2px 0 #FFFFFF;
    content: '';
  }
}

/* Off Canvas Menu */
/**
 *
 * OFF-CANVAS
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for [MODULE]
 */
/**
 * FUNCTIONS for [MODULE]
 */
/**
 * MIXINS for OFF-CANVAS
 */
/**
 * Module
 */
@media (min-width: 0) {
  .off-canvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 85%;
    height: 100%;
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    background: #3B3B3B;
  }
}
@media (min-width: 43.75em) {
  .off-canvas {
    width: 40%;
  }
}

@media (min-width: 0) {
  .off-canvas__menu {
    color: #FFF;
  }
  .off-canvas__menu * + li {
    border-top: 1px solid #FFF;
    border-color: rgba(255, 255, 255, 0.5);
  }
  .off-canvas__menu a {
    display: block;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    color: #FFF;
  }
}

@media (min-width: 0) {
  .off-canvas__close {
    margin-bottom: 3em;
    text-align: right;
  }
}

/* Form */
/**
 *
 * FORM
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for FORM
 */
/**
 * FUNCTIONS for FORM
 */
/**
 * MIXINS for FORM
 */
/**
 * Module
 */
@media (min-width: 43.75em) {
  .form, .form--login {
    margin-right: auto;
    margin-left: auto;
  }
  body.centered .form, body.centered .form--login {
    max-width: 820px;
  }
  .form fieldset, .form--login fieldset {
    padding: 50px;
    border: 1px solid #979797;
    border-radius: 3px;
  }
}

@media (min-width: 43.75em) {
  .form__rows {
    margin-right: auto;
    margin-left: auto;
    max-width: 620px;
  }
  .form--login .form__rows {
    max-width: 320px;
  }
}

* + .form__row, * + .form__row--split, * + .form__row--actions {
  margin-top: 20px;
}

@media (min-width: 43.75em) {
  .form__row--split {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: -10px;
    margin-left: -10px;
  }
  .form__row--split > div {
    margin-top: 0;
    padding-right: 10px;
    padding-left: 10px;
    width: 50%;
  }
}

.form__row--actions {
  margin-top: 50px;
}
.form__row--actions * + * {
  margin-top: 10px;
}
.form__row--actions button,
.form__row--actions .btn {
  width: 100%;
}

@media (min-width: 43.75em) {
  body.centered .form--login {
    max-width: 520px;
  }
}

/* Product search */
/**
 *
 * PRODUCT SEARCH
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for [MODULE]
 */
/**
 * FUNCTIONS for [MODULE]
 */
/**
 * MIXINS for PRODUCT SEARCH
 */
/**
 * Module
 */
.product-search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.product-search * {
    margin-top:0;
}
.product-search label {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}
.product-search .suggestions {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  width: 100%;
  margin-top: 1px;
  border: 1px solid #979797;
  border-radius: 3px;
  background-color: #FFF;
  box-shadow: 0 1px 5px 5px rgba(0, 0, 0, 0.1);
}
.product-search .suggestions:empty {
  border: none;
}
.product-search .suggestions li {
  margin-top: 0;
  padding: 5px 10px;
}
.product-search .suggestions li.is-active, .product-search .suggestions li:hover {
  background-color: #0F58D6;
  color: #FFF;
  cursor: pointer;
}
.product-search .suggestions * + li {
  border-top: 1px solid #979797;
}
.product-search.js-product-search input:focus ~ .suggestions {
  display: block;
}
@media (min-width: 43.75em) {
  .product-search {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding: 75px 50px;
    background-image: url("./gfx/product-search-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
    .product-search .input-field, .product-search button, .select-menu {
        margin-top: 0;
        /*margin-left: 1em;*/
    }
  .product-search .input-field {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}
@media (max-width:43.75em) {
    .product-search tr {
        display: table;
        width: 100%;
    }
    .product-search td {
        display: table-row;
    }
}
.product-search table {
    border-spacing: 15px;
    border-collapse: separate;
}


/* Search result */
/**
 *
 * SEARCH RESULT
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for [MODULE]
 */
/**
 * FUNCTIONS for [MODULE]
 */
/**
 * MIXINS for SEARCH RESULT
 */
/**
 * Module
 */
.search-result {
  margin-top: 3em;
}
.search-result > li {
  padding-bottom: 1.5em;
  border-bottom: 1px solid #979797;
}

/* User list */
/**
 *
 * USER-LIST
 *
 */
/**
 * Custom extends, functions and mixins
 */
/**
 * EXTENDS for USER-LIST
 */
/**
 * FUNCTIONS for USER-LIST
 */
/**
 * MIXINS for USER-LIST
 */
/**
 * Module
 */
.user-list__add {
  text-align: center;
}

.user-list__users > li {
  padding-top: 20px;
  border-top: 1px solid #979797;
}
.user-list__users > * + li {
  margin-top: 20px;
}
@media (min-width: 43.75em) {
  .user-list__users > li {
    padding-top: 10px;
  }
  .user-list__users > * + li {
    margin-top: 10px;
  }
}

.truncate-text {
    max-width: 120px; /* Adjust this width to your liking */
    white-space: nowrap; /* Keeps the text on one line */
    overflow: hidden; /* Hides the text that spills out */
    text-overflow: ellipsis; /* Adds the "..." */
    cursor: help; /* Optional: changes cursor to show it's hoverable */
}

.product-card__substances-row {
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    margin-top: 25px;
    /* ADD THIS LINE to nudge it left */
    padding-right: 10%;
    /* OR USE THIS for more precision */
    /* margin-left: -50px; */
}