@charset "UTF-8";
/*!
* SDX Library v1.19.1
*/
/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
/* Document
   ========================================================================== */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
figcaption,
figure {
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * Add the correct display in IE.
 */
main {
  display: block;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre, code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * Known issues:
 * - `select`:
 *   By default, Chrome on OS X and Safari on OS X allow very limited styling of
 *   select, unless a border property is set. The default font weight on
 *   optgroup elements cannot safely be changed in Chrome on OSX and Safari on
 *   OS X.
 * - `[type="checkbox"]`:
 *   It is recommended that you do not style checkbox and radio inputs as
 *   Firefox's implementation does not respect box-sizing, padding, or width.
 * - `[type="number"]`:
 *   Certain font size values applied to number inputs cause the cursor style of
 *   the decrement button to change from `default` to `text`.
 * - `[type="search"]`:
 *   The search input is not fully stylable by default. In Chrome and Safari on
 *   OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
 *   Chrome and Safari on Windows you can't control `border` properly. It will
 *   apply `border-width` but will only show a border color (which cannot be
 *   controlled) for the outer 1px of that border. Applying
 *   `-webkit-appearance: textfield` addresses these issues without removing the
 *   benefits of search inputs (e.g. showing past searches). Safari (but not
 *   Chrome) will clip the cancel button on when it has padding (and `textfield`
 *   appearance).
 * - `::placeholder`:
 *   In Edge, placeholders will disappear on `relative` or `absolute` positioned
 *   `<input>` elements if you use `opacity` less than `1` due to a
 *   [bug](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/).
 */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  line-height: 1.15;
  /* 1 */
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 */
button {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  /**
   * Remove the inner border and padding in Firefox.
   */
  /**
   * Restore the focus styles unset by the previous rule.
   */
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Show the overflow in Edge.
 */
input {
  overflow: visible;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
  /**
   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
   */
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
input[type="file"]::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  color: inherit;
  /* 2 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Add the correct display in IE 9-.
 */
menu {
  display: block;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/*
 * reset body margin
 */
body {
  margin: 0;
}

@font-face {
  font-family: 'TheSans';
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/TheSans/TheSansB_200_.c10944a8.eot") format("eot"), url("../fonts/TheSans/TheSansB_200_.679faccb.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_200_.2a33539e.woff") format("woff"), url("../fonts/TheSans/TheSansB_200_.930b3d9b.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_200_.8559527b.svg#TheSansB_200_") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/TheSans/TheSansB_300_.463f7e45.eot") format("eot"), url("../fonts/TheSans/TheSansB_300_.725d06ae.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_300_.241175cc.woff") format("woff"), url("../fonts/TheSans/TheSansB_300_.ea4a24d4.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_300_.e62b6fba.svg#TheSansB_300_") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/TheSans/TheSansB_400_.638852fa.eot") format("eot"), url("../fonts/TheSans/TheSansB_400_.4f0d59a1.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_400_.f5ebe8b3.woff") format("woff"), url("../fonts/TheSans/TheSansB_400_.4bbcd055.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_400_.4b12e242.svg#TheSansB_400_") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/TheSans/TheSansB_500_.e9f141c1.eot") format("eot"), url("../fonts/TheSans/TheSansB_500_.d7955bec.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_500_.aa3f4ced.woff") format("woff"), url("../fonts/TheSans/TheSansB_500_.77aebf7a.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_500_.2d508269.svg#TheSansB_500_") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/TheSans/TheSansB_600_.9f91a184.eot") format("eot"), url("../fonts/TheSans/TheSansB_600_.a54202ef.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_600_.f0ab2b88.woff") format("woff"), url("../fonts/TheSans/TheSansB_600_.1a12a4e4.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_600_.12905c53.svg#TheSansB_600_") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/TheSans/TheSansB_700_.ea41b33b.eot") format("eot"), url("../fonts/TheSans/TheSansB_700_.7dac4ba6.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_700_.12f30407.woff") format("woff"), url("../fonts/TheSans/TheSansB_700_.389285ef.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_700_.f7c2f8c3.svg#TheSansB_700_") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 800;
  font-style: normal;
  src: url("../fonts/TheSans/TheSansB_800_.60b85103.eot") format("eot"), url("../fonts/TheSans/TheSansB_800_.cddb1ba0.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_800_.cbdc0165.woff") format("woff"), url("../fonts/TheSans/TheSansB_800_.65525335.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_800_.5607b909.svg#TheSansB_800_") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/TheSans/TheSansB_900_.8ad4d776.eot") format("eot"), url("../fonts/TheSans/TheSansB_900_.8b86fa65.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_900_.144c2ea0.woff") format("woff"), url("../fonts/TheSans/TheSansB_900_.85fac62a.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_900_.2e253a98.svg#TheSansB_900_") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/TheSans/TheSansB_200i.ec3dd64f.eot") format("eot"), url("../fonts/TheSans/TheSansB_200i.140df1c0.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_200i.f1be244d.woff") format("woff"), url("../fonts/TheSans/TheSansB_200i.a49b933e.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_200i.db914675.svg#TheSansB_200i") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/TheSans/TheSansB_300i.a75d8ced.eot") format("eot"), url("../fonts/TheSans/TheSansB_300i.bb07e13c.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_300i.9c1bde9a.woff") format("woff"), url("../fonts/TheSans/TheSansB_300i.4ca53d4a.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_300i.fc46e020.svg#TheSansB_300i") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/TheSans/TheSansB_400i.a00f3106.eot") format("eot"), url("../fonts/TheSans/TheSansB_400i.33ba31da.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_400i.299cf3c5.woff") format("woff"), url("../fonts/TheSans/TheSansB_400i.23248f72.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_400i.d83cc266.svg#TheSansB_400i") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/TheSans/TheSansB_500i.e463183f.eot") format("eot"), url("../fonts/TheSans/TheSansB_500i.23d203f1.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_500i.ee6bcc7b.woff") format("woff"), url("../fonts/TheSans/TheSansB_500i.24eb418c.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_500i.51c2165d.svg#TheSansB_500i") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/TheSans/TheSansB_600i.b51063bc.eot") format("eot"), url("../fonts/TheSans/TheSansB_600i.d756e2fd.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_600i.1089717e.woff") format("woff"), url("../fonts/TheSans/TheSansB_600i.089bd277.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_600i.75a773a1.svg#TheSansB_600i") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/TheSans/TheSansB_700i.2445d2e0.eot") format("eot"), url("../fonts/TheSans/TheSansB_700i.cd797fda.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_700i.1365d98a.woff") format("woff"), url("../fonts/TheSans/TheSansB_700i.0eb9de16.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_700i.0df286d0.svg#TheSansB_700i") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 800;
  font-style: italic;
  src: url("../fonts/TheSans/TheSansB_800i.1ba8854c.eot") format("eot"), url("../fonts/TheSans/TheSansB_800i.89e5ae81.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_800i.0f199e5a.woff") format("woff"), url("../fonts/TheSans/TheSansB_800i.bdf74d38.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_800i.25751587.svg#TheSansB_800i") format("svg");
}

@font-face {
  font-family: 'TheSans';
  font-weight: 900;
  font-style: italic;
  src: url("../fonts/TheSans/TheSansB_900i.c84b1def.eot") format("eot"), url("../fonts/TheSans/TheSansB_900i.cfb8b562.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_900i.0a23fcb6.woff") format("woff"), url("../fonts/TheSans/TheSansB_900i.244b79b3.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_900i.231018d4.svg#TheSansB_900i") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/TheSerif/TheSerifB_200_.1dfc68ab.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_200_.625c141b.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_200_.11c6d514.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_200_.e68a5e5d.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_200_.c7a9171d.svg#TheSerifB_200_") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/TheSerif/TheSerifB_300_.e8df0694.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_300_.d28b56a9.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_300_.c00f888e.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_300_.e30c8b46.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_300_.3cd60dc3.svg#TheSerifB_300_") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/TheSerif/TheSerifB_400_.d248b840.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_400_.bf4c3bc3.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_400_.ab7f88c2.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_400_.8b08b2a7.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_400_.89e467e0.svg#TheSerifB_400_") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/TheSerif/TheSerifB_500_.f9a299fa.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_500_.f9ad81ed.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_500_.40f9b61d.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_500_.87d3a142.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_500_.e50134ca.svg#TheSerifB_500_") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/TheSerif/TheSerifB_600_.8c88f67b.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_600_.b6c68c42.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_600_.e2c6d8fb.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_600_.73361fd8.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_600_.8aab7e50.svg#TheSerifB_600_") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/TheSerif/TheSerifB_700_.07657f01.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_700_.84d94c2f.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_700_.95cd92d9.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_700_.b9125733.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_700_.a0210363.svg#TheSerifB_700_") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 800;
  font-style: normal;
  src: url("../fonts/TheSerif/TheSerifB_800_.204a8500.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_800_.28f5e349.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_800_.40de06f0.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_800_.26cf2380.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_800_.2d44ffb5.svg#TheSerifB_800_") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/TheSerif/TheSerifB_200i.17ce3598.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_200i.253693c3.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_200i.f76c3f50.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_200i.d91623e8.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_200i.ac0f6e84.svg#TheSerifB_200i") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/TheSerif/TheSerifB_300i.1dbddeae.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_300i.4625823e.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_300i.a1d5ec6c.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_300i.554053be.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_300i.1dd237d9.svg#TheSerifB_300i") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/TheSerif/TheSerifB_400i.4e62f25c.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_400i.951b6ea8.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_400i.c88d4dc0.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_400i.9eb4b124.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_400i.9510c715.svg#TheSerifB_400i") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/TheSerif/TheSerifB_500i.0a0ebf4a.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_500i.d50318df.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_500i.d69cb7d8.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_500i.dd270b4d.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_500i.45afddab.svg#TheSerifB_500i") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/TheSerif/TheSerifB_600i.88cc8722.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_600i.dabd0866.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_600i.ac35eda5.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_600i.aaca3e29.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_600i.497492ec.svg#TheSerifB_600i") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/TheSerif/TheSerifB_700i.3e8c2037.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_700i.6ef63c73.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_700i.08a3eefb.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_700i.329a261a.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_700i.fb956e09.svg#TheSerifB_700i") format("svg");
}

@font-face {
  font-family: 'TheSerif';
  font-weight: 800;
  font-style: italic;
  src: url("../fonts/TheSerif/TheSerifB_800i.4e80a639.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_800i.40b88c3c.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_800i.4eeaaf75.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_800i.228da031.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_800i.ba45eba7.svg#TheSerifB_800i") format("svg");
}

@font-face {
  font-family: 'sdx-icons';
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/sdx-icons/sdx-icons.61782c27.eot") format("eot"), url("../fonts/sdx-icons/sdx-icons.e8c0ea95.woff2") format("woff2"), url("../fonts/sdx-icons/sdx-icons.8f793a4d.woff") format("woff"), url("../fonts/sdx-icons/sdx-icons.ae30dd01.ttf") format("truetype"), url("../fonts/sdx-icons/sdx-icons.7ff7a808.svg#sdx-icons") format("svg");
}

/*doc
---
title: Icons
name: 01-foundation-03-icons
category: Foundation - Icons
---

<p>Iconography within SDX is used to communicate with users clearly and concisely. Our icons compliment our typography, follow a uniform structure and reinforce the underlying DNA of Swisscom digital experiences. Icons should never be used as imagery, they should always serve a functional purpose. The SDX icons have been created from the Swisscom pictograms, and refined for use within digital applications.</p>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <p>In the developer section you can find the comprehensive collection of <a href="#sdx_icons">all the icons</a> available for SDX.</p>

  <p><strong>Note:</strong> If you are not able to find the icon you need, contact the Brand and Strategy Team. Icons are designed and deployed by the brand team. New icons deviating from this set should not be created without the brand team’s approval.</p>

  <h2>Rules</h2>

  <h3>Icon grid</h3>

  <p>Icons are constructed within a 15x15 grid template. The stroke weight of icons should be 1px of that grid, increasing in width proportionately as the icon scales.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-grid@2x.jpg">
      <span class="fig-caption">Icon grid structure</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Trim container</h3>

  <p>The icon container is a holding frame that are placed within. Icons within this container are given a minimum of 1px verticle and horizontal padding, which scales proportionately with the icon and container. Icons are aligned to the verticle and horizontal centre of this container. The icons have been designed scales and positioned so that they appear equal to one another.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-center-aligned@2x.jpg">
      <span class="fig-caption">Centrally aligned</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Minimum size</h3>

  <p>Icons have a minimum size of 13px when displayed on standard resolution devices, and 26px when displayed on retina, or @2x resolution devices.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-minimum-size@2x.jpg">
      <span class="fig-caption">Minimum icon size</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Maximum size</h3>

  <p>Icons have a maximum size of 150px when displayed on standard resolution devices, and 300px when displayed on retina, or @2x resolution devices.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-maximum-size@2x.jpg">
      <span class="fig-caption">Maximum icon size</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Scaling icons</h3>

  <p>Icons, when displayed at minimum size, sit within a 15px x 15px container that ensures all icons, no matter their proportions, can be aligned without the need to manual and optical rescaling or repositioning.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-scale@2x.jpg">
      <span class="fig-caption">Scaling icons with their container</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Relative alignment</h3>

  <p>Icons should be aligned by their containers, not by the icons themselves. The icons have been positioned within the containers relatively to one another and are designed to automatically align correct when displayed side by side.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-container-alignment@2x.jpg">
      <span class="fig-caption">Container alignment</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Minimum spacing</h3>

  <p>Icons have a minimum spacing of 0.4x their trim container, rounded up to the nearest pixel. For example, a 30px icon (including trim container) should have 12px of spacing between icons. There is no maximum spacing rule.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-spacing@2x.jpg">
      <span class="fig-caption">Spacing icons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Using colour</h3>

  <p>Icons should only be used in the brand and interactive colour palettes. Swisscom Navy should be used when pairing navigational text links with icons, or when displaying icons on their own within a navigation bar. Icons used for functionality, or in conjunction with in-page text links should use the interaction blue, and icons used with confirmation links should use the interaction green. When used in conjunction with alerts or alert notifications icons should use the interaction orange. Icons should never use the content colour palette, as these colours are reserved for non-functional elements. When displaying icons on coloured backgrounds, they should always be shown in white.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icons-interactive@2x.jpg">
      <span class="fig-caption">Interactive icons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/icons/icons-color-background@2x-1.jpg">
     <span class="fig-caption">Icons used on colours backgrounds</span>
    </div>
  </div>

  <h3>Buttons</h3>

  <p>When displaying icons in buttons, they should only ever be shown in white. They should be 15px (trim container) and should be spaced a minimum of 13px from the text label.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-buttons@2x.jpg">
      <span class="fig-caption">Icons and buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Never use icons as imagery</h3>

  <p>Icons within the SDX system are strictly for use as interactive elements only and should never be used as imagery.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/icons/icon-nogo-imagery@2x.jpg">
      <span class="fig-caption">Don’t use icons as imagery</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>The default SDX icon set definition.</p>

<h2>How to use the icons</h2>

<p>To use these icons, use the <code>icon</code> class on an <code>i</code> element and provide the ligature as class name.</p>

```htmlmixed_webcomponent_sdx-icon
<sdx-icon icon-name="icon-001-account" sr-hint="Displays the user account" />
```

<h2 id="sdx_icons">Available Icons</h2>

<div class="row icons">
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-001-account icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-001-account<br/>
      Sass: icon-char('001-account');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-002-arrow-down icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-002-arrow-down<br/>
      Sass: icon-char('002-arrow-down');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-003-arrow-left icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-003-arrow-left<br/>
      Sass: icon-char('003-arrow-left');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-004-arrow-right icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-004-arrow-right<br/>
      Sass: icon-char('004-arrow-right');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-005-arrow-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-005-arrow-up<br/>
      Sass: icon-char('005-arrow-up');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-006-attachment icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-006-attachment<br/>
      Sass: icon-char('006-attachment');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-007-backup icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-007-backup<br/>
      Sass: icon-char('007-backup');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-008-bin icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-008-bin<br/>
      Sass: icon-char('008-bin');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-009-calendar icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-009-calendar<br/>
      Sass: icon-char('009-calendar');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-010-cancel icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-010-cancel<br/>
      Sass: icon-char('010-cancel');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-011-check-mark icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-011-check-mark<br/>
      Sass: icon-char('011-check-mark');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-012-check-mark-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-012-check-mark-circle<br/>
      Sass: icon-char('012-check-mark-circle');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-013-chevron-down icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-013-chevron-down<br/>
      Sass: icon-char('013-chevron-down');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-014-chevron-left icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-014-chevron-left<br/>
      Sass: icon-char('014-chevron-left');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-015-chevron-right icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-015-chevron-right<br/>
      Sass: icon-char('015-chevron-right');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-016-chevron-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-016-chevron-up<br/>
      Sass: icon-char('016-chevron-up');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-017-chevron-flat-down icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-017-chevron-flat-down<br/>
      Sass: icon-char('017-chevron-flat-down');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-018-chevron-flat-left icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-018-chevron-flat-left<br/>
      Sass: icon-char('018-chevron-flat-left');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-019-chevron-flat-right icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-019-chevron-flat-right<br/>
      Sass: icon-char('019-chevron-flat-right');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-020-chevron-flat-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-020-chevron-flat-up<br/>
      Sass: icon-char('020-chevron-flat-up');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-021-clock icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-021-clock<br/>
      Sass: icon-char('021-clock');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-022-close icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-022-close<br/>
      Sass: icon-char('022-close');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-023-download icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-023-download<br/>
      Sass: icon-char('023-download');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-024-download-cloud icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-024-download-cloud<br/>
      Sass: icon-char('024-download-cloud');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-025-edit icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-025-edit<br/>
      Sass: icon-char('025-edit');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-026-exclamation-mark-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-026-exclamation-mark-circle<br/>
      Sass: icon-char('026-exclamation-mark-circle');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-027-flag icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-027-flag<br/>
      Sass: icon-char('027-flag');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-028-folder-new icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-028-folder-new<br/>
      Sass: icon-char('028-folder-new');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-029-folder-video icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-029-folder-video<br/>
      Sass: icon-char('029-folder-video');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-030-forward icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-030-forward<br/>
      Sass: icon-char('030-forward');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-031-forward-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-031-forward-filled<br/>
      Sass: icon-char('031-forward-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-032-forward-message icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-032-forward-message<br/>
      Sass: icon-char('032-forward-message');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-033-forward-message-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-033-forward-message-2<br/>
      Sass: icon-char('033-forward-message-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-034-fullscreen-enter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-034-fullscreen-enter<br/>
      Sass: icon-char('034-fullscreen-enter');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-035-fullscreen-enter-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-035-fullscreen-enter-2<br/>
      Sass: icon-char('035-fullscreen-enter-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-036-fullscreen-leave icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-036-fullscreen-leave<br/>
      Sass: icon-char('036-fullscreen-leave');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-037-fullscreen-leave-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-037-fullscreen-leave-2<br/>
      Sass: icon-char('037-fullscreen-leave-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-038-go-to-end icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-038-go-to-end<br/>
      Sass: icon-char('038-go-to-end');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-039-go-to-end-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-039-go-to-end-filled<br/>
      Sass: icon-char('039-go-to-end-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-040-go-to-start icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-040-go-to-start<br/>
      Sass: icon-char('040-go-to-start');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-041-go-to-start-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-041-go-to-start-filled<br/>
      Sass: icon-char('041-go-to-start-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-042-group icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-042-group<br/>
      Sass: icon-char('042-group');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-043-heart icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-043-heart<br/>
      Sass: icon-char('043-heart');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-044-home icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-044-home<br/>
      Sass: icon-char('044-home');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-045-hourglass icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-045-hourglass<br/>
      Sass: icon-char('045-hourglass');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-046-information-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-046-information-circle<br/>
      Sass: icon-char('046-information-circle');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-047-key icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-047-key<br/>
      Sass: icon-char('047-key');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-048-link icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-048-link<br/>
      Sass: icon-char('048-link');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-049-lock icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-049-lock<br/>
      Sass: icon-char('049-lock');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-050-menu icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-050-menu<br/>
      Sass: icon-char('050-menu');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-051-message icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-051-message<br/>
      Sass: icon-char('051-message');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-052-minus icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-052-minus<br/>
      Sass: icon-char('052-minus');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-053-more icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-053-more<br/>
      Sass: icon-char('053-more');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-054-new icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-054-new<br/>
      Sass: icon-char('054-new');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-055-okay icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-055-okay<br/>
      Sass: icon-char('055-okay');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-056-pause icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-056-pause<br/>
      Sass: icon-char('056-pause');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-057-pause-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-057-pause-filled<br/>
      Sass: icon-char('057-pause-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-058-person icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-058-person<br/>
      Sass: icon-char('058-person');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-059-play icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-059-play<br/>
      Sass: icon-char('059-play');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-060-play-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-060-play-filled<br/>
      Sass: icon-char('060-play-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-061-plus icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-061-plus<br/>
      Sass: icon-char('061-plus');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-062-question-mark-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-062-question-mark-circle<br/>
      Sass: icon-char('062-question-mark-circle');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-063-record icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-063-record<br/>
      Sass: icon-char('063-record');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-064-record-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-064-record-filled<br/>
      Sass: icon-char('064-record-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-065-rename icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-065-rename<br/>
      Sass: icon-char('065-rename');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-066-replay icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-066-replay<br/>
      Sass: icon-char('066-replay');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-067-reply-message icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-067-reply-message<br/>
      Sass: icon-char('067-reply-message');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-068-reply-message-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-068-reply-message-2<br/>
      Sass: icon-char('068-reply-message-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-069-reply-message-all icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-069-reply-message-all<br/>
      Sass: icon-char('069-reply-message-all');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-070-reply-message-all-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-070-reply-message-all-2<br/>
      Sass: icon-char('070-reply-message-all-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-071-retry icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-071-retry<br/>
      Sass: icon-char('071-retry');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-072-rewind icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-072-rewind<br/>
      Sass: icon-char('072-rewind');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-073-rewind-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-073-rewind-filled<br/>
      Sass: icon-char('073-rewind-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-074-save icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-074-save<br/>
      Sass: icon-char('074-save');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-075-save-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-075-save-2<br/>
      Sass: icon-char('075-save-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-076-save-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-076-save-3<br/>
      Sass: icon-char('076-save-3');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-077-search icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-077-search<br/>
      Sass: icon-char('077-search');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-078-settings icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-078-settings<br/>
      Sass: icon-char('078-settings');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-079-shopping-trolley icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-079-shopping-trolley<br/>
      Sass: icon-char('079-shopping-trolley');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-080-speech-bubble icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-080-speech-bubble<br/>
      Sass: icon-char('080-speech-bubble');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-081-standby icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-081-standby<br/>
      Sass: icon-char('081-standby');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-082-star icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-082-star<br/>
      Sass: icon-char('082-star');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-083-stop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-083-stop<br/>
      Sass: icon-char('083-stop');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-084-stop-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-084-stop-filled<br/>
      Sass: icon-char('084-stop-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-085-synchronise icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-085-synchronise<br/>
      Sass: icon-char('085-synchronise');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-086-thumb-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-086-thumb-up<br/>
      Sass: icon-char('086-thumb-up');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-087-upload icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-087-upload<br/>
      Sass: icon-char('087-upload');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-088-upload-cloud icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-088-upload-cloud<br/>
      Sass: icon-char('088-upload-cloud');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-089-volume-fortissimo icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-089-volume-fortissimo<br/>
      Sass: icon-char('089-volume-fortissimo');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-090-volume-forte icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-090-volume-forte<br/>
      Sass: icon-char('090-volume-forte');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-091-volume-piano icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-091-volume-piano<br/>
      Sass: icon-char('091-volume-piano');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-092-volume-pianissimo icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-092-volume-pianissimo<br/>
      Sass: icon-char('092-volume-pianissimo');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-093-volume-mute icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-093-volume-mute<br/>
      Sass: icon-char('093-volume-mute');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-094-warning icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-094-warning<br/>
      Sass: icon-char('094-warning');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-095-zoom-in icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-095-zoom-in<br/>
      Sass: icon-char('095-zoom-in');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-096-zoom-out icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-096-zoom-out<br/>
      Sass: icon-char('096-zoom-out');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-097-suitcase icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-097-suitcase<br/>
      Sass: icon-char('097-suitcase');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-098-ambulance icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-098-ambulance<br/>
      Sass: icon-char('098-ambulance');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-099-ambulance-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-099-ambulance-2<br/>
      Sass: icon-char('099-ambulance-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-100-van icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-100-van<br/>
      Sass: icon-char('100-van');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-101-delivery icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-101-delivery<br/>
      Sass: icon-char('101-delivery');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-102-delivery-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-102-delivery-2<br/>
      Sass: icon-char('102-delivery-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-103-applications icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-103-applications<br/>
      Sass: icon-char('103-applications');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-104-assistant icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-104-assistant<br/>
      Sass: icon-char('104-assistant');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-105-call-centre icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-105-call-centre<br/>
      Sass: icon-char('105-call-centre');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-106-bill icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-106-bill<br/>
      Sass: icon-char('106-bill');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-107-child-protection icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-107-child-protection<br/>
      Sass: icon-char('107-child-protection');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-108-coins icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-108-coins<br/>
      Sass: icon-char('108-coins');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-109-compass icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-109-compass<br/>
      Sass: icon-char('109-compass');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-110-mobile-phone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-110-mobile-phone<br/>
      Sass: icon-char('110-mobile-phone');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-111-smartphone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-111-smartphone<br/>
      Sass: icon-char('111-smartphone');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-112-tablet icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-112-tablet<br/>
      Sass: icon-char('112-tablet');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-113-laptop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-113-laptop<br/>
      Sass: icon-char('113-laptop');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-114-computer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-114-computer<br/>
      Sass: icon-char('114-computer');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-115-workstation icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-115-workstation<br/>
      Sass: icon-char('115-workstation');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-116-credit-card icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-116-credit-card<br/>
      Sass: icon-char('116-credit-card');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-117-directory icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-117-directory<br/>
      Sass: icon-char('117-directory');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-118-document icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-118-document<br/>
      Sass: icon-char('118-document');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-119-document-new icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-119-document-new<br/>
      Sass: icon-char('119-document-new');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-120-document-excel icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-120-document-excel<br/>
      Sass: icon-char('120-document-excel');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-121-document-powerpoint icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-121-document-powerpoint<br/>
      Sass: icon-char('121-document-powerpoint');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-122-document-word icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-122-document-word<br/>
      Sass: icon-char('122-document-word');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-123-document-pdf icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-123-document-pdf<br/>
      Sass: icon-char('123-document-pdf');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-124-document-txt icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-124-document-txt<br/>
      Sass: icon-char('124-document-txt');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-125-document-zip icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-125-document-zip<br/>
      Sass: icon-char('125-document-zip');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-126-document-code icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-126-document-code<br/>
      Sass: icon-char('126-document-code');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-127-e-mail icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-127-e-mail<br/>
      Sass: icon-char('127-e-mail');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-128-film-camera icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-128-film-camera<br/>
      Sass: icon-char('128-film-camera');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-129-film-camera-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-129-film-camera-2<br/>
      Sass: icon-char('129-film-camera-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-130-film-camera-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-130-film-camera-3<br/>
      Sass: icon-char('130-film-camera-3');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-131-film-reel icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-131-film-reel<br/>
      Sass: icon-char('131-film-reel');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-132-folder icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-132-folder<br/>
      Sass: icon-char('132-folder');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-133-football icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-133-football<br/>
      Sass: icon-char('133-football');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-134-game icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-134-game<br/>
      Sass: icon-char('134-game');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-135-gaming icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-135-gaming<br/>
      Sass: icon-char('135-gaming');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-136-globe icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-136-globe<br/>
      Sass: icon-char('136-globe');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-137-handset icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-137-handset<br/>
      Sass: icon-char('137-handset');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-138-headphone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-138-headphone<br/>
      Sass: icon-char('138-headphone');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-139-headset icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-139-headset<br/>
      Sass: icon-char('139-headset');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-140-index-card icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-140-index-card<br/>
      Sass: icon-char('140-index-card');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-141-leaf icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-141-leaf<br/>
      Sass: icon-char('141-leaf');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-142-lifesaver icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-142-lifesaver<br/>
      Sass: icon-char('142-lifesaver');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-143-modem-wlan icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-143-modem-wlan<br/>
      Sass: icon-char('143-modem-wlan');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-144-movie icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-144-movie<br/>
      Sass: icon-char('144-movie');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-145-movie-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-145-movie-2<br/>
      Sass: icon-char('145-movie-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-146-movie-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-146-movie-3<br/>
      Sass: icon-char('146-movie-3');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-147-svod icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-147-svod<br/>
      Sass: icon-char('147-svod');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-148-music icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-148-music<br/>
      Sass: icon-char('148-music');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-149-navigation icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-149-navigation<br/>
      Sass: icon-char('149-navigation');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-150-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-150-network<br/>
      Sass: icon-char('150-network');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-151-office icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-151-office<br/>
      Sass: icon-char('151-office');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-152-phone-basic icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-152-phone-basic<br/>
      Sass: icon-char('152-phone-basic');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-153-phone-pro icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-153-phone-pro<br/>
      Sass: icon-char('153-phone-pro');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-154-photo icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-154-photo<br/>
      Sass: icon-char('154-photo');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-155-photo-camera icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-155-photo-camera<br/>
      Sass: icon-char('155-photo-camera');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-156-postcard icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-156-postcard<br/>
      Sass: icon-char('156-postcard');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-157-printer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-157-printer<br/>
      Sass: icon-char('157-printer');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-158-radio icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-158-radio<br/>
      Sass: icon-char('158-radio');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-159-rss-feed icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-159-rss-feed<br/>
      Sass: icon-char('159-rss-feed');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-160-wlan icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-160-wlan<br/>
      Sass: icon-char('160-wlan');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-161-signal icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-161-signal<br/>
      Sass: icon-char('161-signal');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-162-server icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-162-server<br/>
      Sass: icon-char('162-server');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-163-sms icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-163-sms<br/>
      Sass: icon-char('163-sms');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-164-translation icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-164-translation<br/>
      Sass: icon-char('164-translation');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-165-transmitter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-165-transmitter<br/>
      Sass: icon-char('165-transmitter');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-166-tv icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-166-tv<br/>
      Sass: icon-char('166-tv');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-167-tv-hd icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-167-tv-hd<br/>
      Sass: icon-char('167-tv-hd');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-168-tv-2-0 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-168-tv-2-0<br/>
      Sass: icon-char('168-tv-2-0');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-169-video-tape icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-169-video-tape<br/>
      Sass: icon-char('169-video-tape');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-170-video-tape-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-170-video-tape-2<br/>
      Sass: icon-char('170-video-tape-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-171-wearable-watch icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-171-wearable-watch<br/>
      Sass: icon-char('171-wearable-watch');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-172-weather-cloud icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-172-weather-cloud<br/>
      Sass: icon-char('172-weather-cloud');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-173-weather-rain icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-173-weather-rain<br/>
      Sass: icon-char('173-weather-rain');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-174-weather-rain-unsettled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-174-weather-rain-unsettled<br/>
      Sass: icon-char('174-weather-rain-unsettled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-175-weather-snow icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-175-weather-snow<br/>
      Sass: icon-char('175-weather-snow');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-176-weather-snow-unsettled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-176-weather-snow-unsettled<br/>
      Sass: icon-char('176-weather-snow-unsettled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-177-weather-storm icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-177-weather-storm<br/>
      Sass: icon-char('177-weather-storm');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-178-weather-storm-unsettled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-178-weather-storm-unsettled<br/>
      Sass: icon-char('178-weather-storm-unsettled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-179-weather-sun icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-179-weather-sun<br/>
      Sass: icon-char('179-weather-sun');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-180-weather-sun-unsettled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-180-weather-sun-unsettled<br/>
      Sass: icon-char('180-weather-sun-unsettled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-181-inbox icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-181-inbox<br/>
      Sass: icon-char('181-inbox');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-182-drafts icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-182-drafts<br/>
      Sass: icon-char('182-drafts');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-183-sent icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-183-sent<br/>
      Sass: icon-char('183-sent');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-184-sent-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-184-sent-2<br/>
      Sass: icon-char('184-sent-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-185-inbox icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-185-inbox<br/>
      Sass: icon-char('185-inbox');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-186-drafts icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-186-drafts<br/>
      Sass: icon-char('186-drafts');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-187-sent icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-187-sent<br/>
      Sass: icon-char('187-sent');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-188-sent-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-188-sent-2<br/>
      Sass: icon-char('188-sent-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-189-inbox icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-189-inbox<br/>
      Sass: icon-char('189-inbox');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-190-drafts icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-190-drafts<br/>
      Sass: icon-char('190-drafts');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-191-sent icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-191-sent<br/>
      Sass: icon-char('191-sent');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-192-sent-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-192-sent-2<br/>
      Sass: icon-char('192-sent-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-193-website icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-193-website<br/>
      Sass: icon-char('193-website');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-194-website-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-194-website-2<br/>
      Sass: icon-char('194-website-2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-195-heart-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-195-heart-filled<br/>
      Sass: icon-char('195-heart-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-196-exclamation-mark icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-196-exclamation-mark<br/>
      Sass: icon-char('196-exclamation-mark');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-197-share icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-197-share<br/>
      Sass: icon-char('197-share');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-198-chevron-down-small icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-198-chevron-down-small<br/>
      Sass: icon-char('198-chevron-down-small');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-199-chevron-up-small icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-199-chevron-up-small<br/>
      Sass: icon-char('199-chevron-up-small');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-200-chevron-left-small icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-200-chevron-left-small<br/>
      Sass: icon-char('200-chevron-left-small');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-201-chevron-right-small icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-201-chevron-right-small<br/>
      Sass: icon-char('201-chevron-right-small');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-202-clear-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-202-clear-circle<br/>
      Sass: icon-char('202-clear-circle');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-203-server icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-203-server<br/>
      Sass: icon-char('203-server');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-204-cd icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-204-cd<br/>
      Sass: icon-char('204-cd');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-205-bundle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-205-bundle<br/>
      Sass: icon-char('205-bundle');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-206-database icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-206-database<br/>
      Sass: icon-char('206-database');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-207-firewall icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-207-firewall<br/>
      Sass: icon-char('207-firewall');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-208-proxy-server icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-208-proxy-server<br/>
      Sass: icon-char('208-proxy-server');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-209-settopbox icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-209-settopbox<br/>
      Sass: icon-char('209-settopbox');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-210-puzzle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-210-puzzle<br/>
      Sass: icon-char('210-puzzle');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-211-skull icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-211-skull<br/>
      Sass: icon-char('211-skull');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-212-fire icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-212-fire<br/>
      Sass: icon-char('212-fire');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-213-setting icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-213-setting<br/>
      Sass: icon-char('213-setting');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-214-present icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-214-present<br/>
      Sass: icon-char('214-present');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-215-certificate icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-215-certificate<br/>
      Sass: icon-char('215-certificate');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-216-waypointer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-216-waypointer<br/>
      Sass: icon-char('216-waypointer');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-217-eye icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-217-eye<br/>
      Sass: icon-char('217-eye');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-218-eye-shut icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-218-eye-shut<br/>
      Sass: icon-char('218-eye-shut');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-219-runtime icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-219-runtime<br/>
      Sass: icon-char('219-runtime');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-220-list icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-220-list<br/>
      Sass: icon-char('220-list');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-221-topology icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-221-topology<br/>
      Sass: icon-char('221-topology');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-222-blueprint icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-222-blueprint<br/>
      Sass: icon-char('222-blueprint');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-223-map-pointer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-223-map-pointer<br/>
      Sass: icon-char('223-map-pointer');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-224-console icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-224-console<br/>
      Sass: icon-char('224-console');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-225-reboot icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-225-reboot<br/>
      Sass: icon-char('225-reboot');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-226-reprovision icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-226-reprovision<br/>
      Sass: icon-char('226-reprovision');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-227-speech-bubble-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-227-speech-bubble-filled<br/>
      Sass: icon-char('227-speech-bubble-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-228-star-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-228-star-filled<br/>
      Sass: icon-char('228-star-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-229-gateway icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-229-gateway<br/>
      Sass: icon-char('229-gateway');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-230-flash icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-230-flash<br/>
      Sass: icon-char('230-flash');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-231-rocket icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-231-rocket<br/>
      Sass: icon-char('231-rocket');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-232-robot-neutral icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-232-robot-neutral<br/>
      Sass: icon-char('232-robot-neutral');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-233-robot-happy icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-233-robot-happy<br/>
      Sass: icon-char('233-robot-happy');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-234-robot-smile icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-234-robot-smile<br/>
      Sass: icon-char('234-robot-smile');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-235-robot-laughing icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-235-robot-laughing<br/>
      Sass: icon-char('235-robot-laughing');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-236-robot-wink icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-236-robot-wink<br/>
      Sass: icon-char('236-robot-wink');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-237-robot-relaxed icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-237-robot-relaxed<br/>
      Sass: icon-char('237-robot-relaxed');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-238-robot-surprized icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-238-robot-surprized<br/>
      Sass: icon-char('238-robot-surprized');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-239-robot-confused icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-239-robot-confused<br/>
      Sass: icon-char('239-robot-confused');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-240-robot-sad icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-240-robot-sad<br/>
      Sass: icon-char('240-robot-sad');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-241-robot-broken icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-241-robot-broken<br/>
      Sass: icon-char('241-robot-broken');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-242-umbrella icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-242-umbrella<br/>
      Sass: icon-char('242-umbrella');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-243-security icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-243-security<br/>
      Sass: icon-char('243-security');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-244-routed-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-244-routed-network<br/>
      Sass: icon-char('244-routed-network');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-245-ip-sets icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-245-ip-sets<br/>
      Sass: icon-char('245-ip-sets');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-246-resource-pool icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-246-resource-pool<br/>
      Sass: icon-char('246-resource-pool');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-247-edge icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-247-edge<br/>
      Sass: icon-char('247-edge');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-248-switch icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-248-switch<br/>
      Sass: icon-char('248-switch');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-249-processor icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-249-processor<br/>
      Sass: icon-char('249-processor');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-250-distributed-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-250-distributed-network<br/>
      Sass: icon-char('250-distributed-network');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-251-legacy-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-251-legacy-network<br/>
      Sass: icon-char('251-legacy-network');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-252-star-half icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-252-star-half<br/>
      Sass: icon-char('252-star-half');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-253-filter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-253-filter<br/>
      Sass: icon-char('253-filter');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-254_idcard icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-254_idcard<br/>
      Sass: icon-char('254_idcard');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-255_passport icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-255_passport<br/>
      Sass: icon-char('255_passport');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-256_thumb_up_filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-256_thumb_up_filled<br/>
      Sass: icon-char('256_thumb_up_filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-257_tag icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-257_tag<br/>
      Sass: icon-char('257_tag');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-258_bell icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-258_bell<br/>
      Sass: icon-char('258_bell');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-259_flash_multiple icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-259_flash_multiple<br/>
      Sass: icon-char('259_flash_multiple');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-260_lightbulb icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-260_lightbulb<br/>
      Sass: icon-char('260_lightbulb');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-261_devices icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-261_devices<br/>
      Sass: icon-char('261_devices');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-262_smartphone_multiple icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-262_smartphone_multiple<br/>
      Sass: icon-char('262_smartphone_multiple');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-263_document_indesign icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-263_document_indesign<br/>
      Sass: icon-char('263_document_indesign');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-264_document_illustrator icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-264_document_illustrator<br/>
      Sass: icon-char('264_document_illustrator');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-265_document_onenote icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-265_document_onenote<br/>
      Sass: icon-char('265_document_onenote');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-266_document_eps icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-266_document_eps<br/>
      Sass: icon-char('266_document_eps');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-267_document_photoshop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-267_document_photoshop<br/>
      Sass: icon-char('267_document_photoshop');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-268_document_visio icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-268_document_visio<br/>
      Sass: icon-char('268_document_visio');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-269_document_publisher icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-269_document_publisher<br/>
      Sass: icon-char('269_document_publisher');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-270_document_unknowndoc icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-270_document_unknowndoc<br/>
      Sass: icon-char('270_document_unknowndoc');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-271_shop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-271_shop<br/>
      Sass: icon-char('271_shop');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-272_scissors icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-272_scissors<br/>
      Sass: icon-char('272_scissors');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-273_battery icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-273_battery<br/>
      Sass: icon-char('273_battery');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-274_battery_3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-274_battery_3<br/>
      Sass: icon-char('274_battery_3');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-275_battery_2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-275_battery_2<br/>
      Sass: icon-char('275_battery_2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-276_battery_1 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-276_battery_1<br/>
      Sass: icon-char('276_battery_1');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-277_battery_0 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-277_battery_0<br/>
      Sass: icon-char('277_battery_0');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-278_battery_empty icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-278_battery_empty<br/>
      Sass: icon-char('278_battery_empty');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-279_mouse icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-279_mouse<br/>
      Sass: icon-char('279_mouse');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-280_pointer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-280_pointer<br/>
      Sass: icon-char('280_pointer');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-281_realmouse icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-281_realmouse<br/>
      Sass: icon-char('281_realmouse');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-282_bug icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-282_bug<br/>
      Sass: icon-char('282_bug');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-283_privacy icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-283_privacy<br/>
      Sass: icon-char('283_privacy');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-284_ip icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-284_ip<br/>
      Sass: icon-char('284_ip');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-285_patch icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-285_patch<br/>
      Sass: icon-char('285_patch');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-286_microphone_1 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-286_microphone_1<br/>
      Sass: icon-char('286_microphone_1');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-287_microphone_2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-287_microphone_2<br/>
      Sass: icon-char('287_microphone_2');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-288_handset_up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-288_handset_up<br/>
      Sass: icon-char('288_handset_up');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-289_handset_up_stroke icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-289_handset_up_stroke<br/>
      Sass: icon-char('289_handset_up_stroke');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-290_handset_stroke icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-290_handset_stroke<br/>
      Sass: icon-char('290_handset_stroke');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-291_software icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-291_software<br/>
      Sass: icon-char('291_software');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-292_dynamic_storage icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-292_dynamic_storage<br/>
      Sass: icon-char('292_dynamic_storage');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-293_wireless_data icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-293_wireless_data<br/>
      Sass: icon-char('293_wireless_data');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-294_wireless_voice icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-294_wireless_voice<br/>
      Sass: icon-char('294_wireless_voice');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-295_lips icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-295_lips<br/>
      Sass: icon-char('295_lips');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-296_flag-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-296_flag-filled<br/>
      Sass: icon-char('296_flag-filled');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-297_alarmclock icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-297_alarmclock<br/>
      Sass: icon-char('297_alarmclock');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-298_copy icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-298_copy<br/>
      Sass: icon-char('298_copy');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-299_paste icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-299_paste<br/>
      Sass: icon-char('299_paste');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-300_plus-box icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-300_plus-box<br/>
      Sass: icon-char('300_plus-box');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-301_minus-box icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-301_minus-box<br/>
      Sass: icon-char('301_minus-box');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-302_service icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-302_service<br/>
      Sass: icon-char('302_service');
    </p>
  </div>
  
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-303_business-phone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-303_business-phone<br/>
      Sass: icon-char('303_business-phone');
    </p>
  </div>
  
</div>

*/
@font-face {
  font-family: 'sdx-icons';
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/sdx-icons/sdx-icons.61782c27.eot") format("eot"), url("../fonts/sdx-icons/sdx-icons.e8c0ea95.woff2") format("woff2"), url("../fonts/sdx-icons/sdx-icons.8f793a4d.woff") format("woff"), url("../fonts/sdx-icons/sdx-icons.ae30dd01.ttf") format("truetype"), url("../fonts/sdx-icons/sdx-icons.7ff7a808.svg#sdx-icons") format("svg");
}

.icon {
  display: inline-block;
  text-transform: none;
  text-decoration: none;
  text-rendering: auto;
  line-height: 1;
  font-family: 'sdx-icons';
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-stretch: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon--s1 {
  font-size: 16px;
}

.icon--s2 {
  font-size: 24px;
}

.icon--s3 {
  font-size: 32px;
}

.icon--s4 {
  font-size: 40px;
}

.icon--s5 {
  font-size: 48px;
}

.icon--s6 {
  font-size: 56px;
}

.icon--flip-horizontal {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.icon--flip-vertical {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

.icon--flip-horizontal-vertical {
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

.icon--excel {
  color: #008236;
}

.icon--powerpoint {
  color: #e86416;
}

.icon--word {
  color: #1781e3;
}

.icon--pdf {
  color: #d12;
}

.icon-001-account::before {
  content: "";
}

.icon-002-arrow-down::before {
  content: "";
}

.icon-003-arrow-left::before {
  content: "";
}

.icon-004-arrow-right::before {
  content: "";
}

.icon-005-arrow-up::before {
  content: "";
}

.icon-006-attachment::before {
  content: "";
}

.icon-007-backup::before {
  content: "";
}

.icon-008-bin::before {
  content: "";
}

.icon-009-calendar::before {
  content: "";
}

.icon-010-cancel::before {
  content: "";
}

.icon-011-check-mark::before {
  content: "";
}

.icon-012-check-mark-circle::before {
  content: "";
}

.icon-013-chevron-down::before {
  content: "";
}

.icon-014-chevron-left::before {
  content: "";
}

.icon-015-chevron-right::before {
  content: "";
}

.icon-016-chevron-up::before {
  content: "";
}

.icon-017-chevron-flat-down::before {
  content: "";
}

.icon-018-chevron-flat-left::before {
  content: "";
}

.icon-019-chevron-flat-right::before {
  content: "";
}

.icon-020-chevron-flat-up::before {
  content: "";
}

.icon-021-clock::before {
  content: "";
}

.icon-022-close::before {
  content: "";
}

.icon-023-download::before {
  content: "";
}

.icon-024-download-cloud::before {
  content: "";
}

.icon-025-edit::before {
  content: "";
}

.icon-026-exclamation-mark-circle::before {
  content: "";
}

.icon-027-flag::before {
  content: "";
}

.icon-028-folder-new::before {
  content: "";
}

.icon-029-folder-video::before {
  content: "";
}

.icon-030-forward::before {
  content: "";
}

.icon-031-forward-filled::before {
  content: "";
}

.icon-032-forward-message::before {
  content: "";
}

.icon-033-forward-message-2::before {
  content: "";
}

.icon-034-fullscreen-enter::before {
  content: "";
}

.icon-035-fullscreen-enter-2::before {
  content: "";
}

.icon-036-fullscreen-leave::before {
  content: "";
}

.icon-037-fullscreen-leave-2::before {
  content: "";
}

.icon-038-go-to-end::before {
  content: "";
}

.icon-039-go-to-end-filled::before {
  content: "";
}

.icon-040-go-to-start::before {
  content: "";
}

.icon-041-go-to-start-filled::before {
  content: "";
}

.icon-042-group::before {
  content: "";
}

.icon-043-heart::before {
  content: "";
}

.icon-044-home::before {
  content: "";
}

.icon-045-hourglass::before {
  content: "";
}

.icon-046-information-circle::before {
  content: "";
}

.icon-047-key::before {
  content: "";
}

.icon-048-link::before {
  content: "";
}

.icon-049-lock::before {
  content: "";
}

.icon-050-menu::before {
  content: "";
}

.icon-051-message::before {
  content: "";
}

.icon-052-minus::before {
  content: "";
}

.icon-053-more::before {
  content: "";
}

.icon-054-new::before {
  content: "";
}

.icon-055-okay::before {
  content: "";
}

.icon-056-pause::before {
  content: "";
}

.icon-057-pause-filled::before {
  content: "";
}

.icon-058-person::before {
  content: "";
}

.icon-059-play::before {
  content: "";
}

.icon-060-play-filled::before {
  content: "";
}

.icon-061-plus::before {
  content: "";
}

.icon-062-question-mark-circle::before {
  content: "";
}

.icon-063-record::before {
  content: "";
}

.icon-064-record-filled::before {
  content: "";
}

.icon-065-rename::before {
  content: "";
}

.icon-066-replay::before {
  content: "";
}

.icon-067-reply-message::before {
  content: "";
}

.icon-068-reply-message-2::before {
  content: "";
}

.icon-069-reply-message-all::before {
  content: "";
}

.icon-070-reply-message-all-2::before {
  content: "";
}

.icon-071-retry::before {
  content: "";
}

.icon-072-rewind::before {
  content: "";
}

.icon-073-rewind-filled::before {
  content: "";
}

.icon-074-save::before {
  content: "";
}

.icon-075-save-2::before {
  content: "";
}

.icon-076-save-3::before {
  content: "";
}

.icon-077-search::before {
  content: "";
}

.icon-078-settings::before {
  content: "";
}

.icon-079-shopping-trolley::before {
  content: "";
}

.icon-080-speech-bubble::before {
  content: "";
}

.icon-081-standby::before {
  content: "";
}

.icon-082-star::before {
  content: "";
}

.icon-083-stop::before {
  content: "";
}

.icon-084-stop-filled::before {
  content: "";
}

.icon-085-synchronise::before {
  content: "";
}

.icon-086-thumb-up::before {
  content: "";
}

.icon-087-upload::before {
  content: "";
}

.icon-088-upload-cloud::before {
  content: "";
}

.icon-089-volume-fortissimo::before {
  content: "";
}

.icon-090-volume-forte::before {
  content: "";
}

.icon-091-volume-piano::before {
  content: "";
}

.icon-092-volume-pianissimo::before {
  content: "";
}

.icon-093-volume-mute::before {
  content: "";
}

.icon-094-warning::before {
  content: "";
}

.icon-095-zoom-in::before {
  content: "";
}

.icon-096-zoom-out::before {
  content: "";
}

.icon-097-suitcase::before {
  content: "";
}

.icon-098-ambulance::before {
  content: "";
}

.icon-099-ambulance-2::before {
  content: "";
}

.icon-100-van::before {
  content: "";
}

.icon-101-delivery::before {
  content: "";
}

.icon-102-delivery-2::before {
  content: "";
}

.icon-103-applications::before {
  content: "";
}

.icon-104-assistant::before {
  content: "";
}

.icon-105-call-centre::before {
  content: "";
}

.icon-106-bill::before {
  content: "";
}

.icon-107-child-protection::before {
  content: "";
}

.icon-108-coins::before {
  content: "";
}

.icon-109-compass::before {
  content: "";
}

.icon-110-mobile-phone::before {
  content: "";
}

.icon-111-smartphone::before {
  content: "";
}

.icon-112-tablet::before {
  content: "";
}

.icon-113-laptop::before {
  content: "";
}

.icon-114-computer::before {
  content: "";
}

.icon-115-workstation::before {
  content: "";
}

.icon-116-credit-card::before {
  content: "";
}

.icon-117-directory::before {
  content: "";
}

.icon-118-document::before {
  content: "";
}

.icon-119-document-new::before {
  content: "";
}

.icon-120-document-excel::before {
  content: "";
}

.icon-121-document-powerpoint::before {
  content: "";
}

.icon-122-document-word::before {
  content: "";
}

.icon-123-document-pdf::before {
  content: "";
}

.icon-124-document-txt::before {
  content: "";
}

.icon-125-document-zip::before {
  content: "";
}

.icon-126-document-code::before {
  content: "";
}

.icon-127-e-mail::before {
  content: "";
}

.icon-128-film-camera::before {
  content: "";
}

.icon-129-film-camera-2::before {
  content: "";
}

.icon-130-film-camera-3::before {
  content: "";
}

.icon-131-film-reel::before {
  content: "";
}

.icon-132-folder::before {
  content: "";
}

.icon-133-football::before {
  content: "";
}

.icon-134-game::before {
  content: "";
}

.icon-135-gaming::before {
  content: "";
}

.icon-136-globe::before {
  content: "";
}

.icon-137-handset::before {
  content: "";
}

.icon-138-headphone::before {
  content: "";
}

.icon-139-headset::before {
  content: "";
}

.icon-140-index-card::before {
  content: "";
}

.icon-141-leaf::before {
  content: "";
}

.icon-142-lifesaver::before {
  content: "";
}

.icon-143-modem-wlan::before {
  content: "";
}

.icon-144-movie::before {
  content: "";
}

.icon-145-movie-2::before {
  content: "";
}

.icon-146-movie-3::before {
  content: "";
}

.icon-147-svod::before {
  content: "";
}

.icon-148-music::before {
  content: "";
}

.icon-149-navigation::before {
  content: "";
}

.icon-150-network::before {
  content: "";
}

.icon-151-office::before {
  content: "";
}

.icon-152-phone-basic::before {
  content: "";
}

.icon-153-phone-pro::before {
  content: "";
}

.icon-154-photo::before {
  content: "";
}

.icon-155-photo-camera::before {
  content: "";
}

.icon-156-postcard::before {
  content: "";
}

.icon-157-printer::before {
  content: "";
}

.icon-158-radio::before {
  content: "";
}

.icon-159-rss-feed::before {
  content: "";
}

.icon-160-wlan::before {
  content: "";
}

.icon-161-signal::before {
  content: "";
}

.icon-162-server::before {
  content: "";
}

.icon-163-sms::before {
  content: "";
}

.icon-164-translation::before {
  content: "";
}

.icon-165-transmitter::before {
  content: "";
}

.icon-166-tv::before {
  content: "";
}

.icon-167-tv-hd::before {
  content: "";
}

.icon-168-tv-2-0::before {
  content: "";
}

.icon-169-video-tape::before {
  content: "";
}

.icon-170-video-tape-2::before {
  content: "";
}

.icon-171-wearable-watch::before {
  content: "";
}

.icon-172-weather-cloud::before {
  content: "";
}

.icon-173-weather-rain::before {
  content: "";
}

.icon-174-weather-rain-unsettled::before {
  content: "";
}

.icon-175-weather-snow::before {
  content: "";
}

.icon-176-weather-snow-unsettled::before {
  content: "";
}

.icon-177-weather-storm::before {
  content: "";
}

.icon-178-weather-storm-unsettled::before {
  content: "";
}

.icon-179-weather-sun::before {
  content: "";
}

.icon-180-weather-sun-unsettled::before {
  content: "";
}

.icon-181-inbox::before {
  content: "";
}

.icon-182-drafts::before {
  content: "";
}

.icon-183-sent::before {
  content: "";
}

.icon-184-sent-2::before {
  content: "";
}

.icon-185-inbox::before {
  content: "";
}

.icon-186-drafts::before {
  content: "";
}

.icon-187-sent::before {
  content: "";
}

.icon-188-sent-2::before {
  content: "";
}

.icon-189-inbox::before {
  content: "";
}

.icon-190-drafts::before {
  content: "";
}

.icon-191-sent::before {
  content: "";
}

.icon-192-sent-2::before {
  content: "";
}

.icon-193-website::before {
  content: "";
}

.icon-194-website-2::before {
  content: "";
}

.icon-195-heart-filled::before {
  content: "";
}

.icon-196-exclamation-mark::before {
  content: "";
}

.icon-197-share::before {
  content: "";
}

.icon-198-chevron-down-small::before {
  content: "";
}

.icon-199-chevron-up-small::before {
  content: "";
}

.icon-200-chevron-left-small::before {
  content: "";
}

.icon-201-chevron-right-small::before {
  content: "";
}

.icon-202-clear-circle::before {
  content: "";
}

.icon-203-server::before {
  content: "";
}

.icon-204-cd::before {
  content: "";
}

.icon-205-bundle::before {
  content: "";
}

.icon-206-database::before {
  content: "";
}

.icon-207-firewall::before {
  content: "";
}

.icon-208-proxy-server::before {
  content: "";
}

.icon-209-settopbox::before {
  content: "";
}

.icon-210-puzzle::before {
  content: "";
}

.icon-211-skull::before {
  content: "";
}

.icon-212-fire::before {
  content: "";
}

.icon-213-setting::before {
  content: "";
}

.icon-214-present::before {
  content: "";
}

.icon-215-certificate::before {
  content: "";
}

.icon-216-waypointer::before {
  content: "";
}

.icon-217-eye::before {
  content: "";
}

.icon-218-eye-shut::before {
  content: "";
}

.icon-219-runtime::before {
  content: "";
}

.icon-220-list::before {
  content: "";
}

.icon-221-topology::before {
  content: "";
}

.icon-222-blueprint::before {
  content: "";
}

.icon-223-map-pointer::before {
  content: "";
}

.icon-224-console::before {
  content: "";
}

.icon-225-reboot::before {
  content: "";
}

.icon-226-reprovision::before {
  content: "";
}

.icon-227-speech-bubble-filled::before {
  content: "";
}

.icon-228-star-filled::before {
  content: "";
}

.icon-229-gateway::before {
  content: "";
}

.icon-230-flash::before {
  content: "";
}

.icon-231-rocket::before {
  content: "";
}

.icon-232-robot-neutral::before {
  content: "";
}

.icon-233-robot-happy::before {
  content: "";
}

.icon-234-robot-smile::before {
  content: "";
}

.icon-235-robot-laughing::before {
  content: "";
}

.icon-236-robot-wink::before {
  content: "";
}

.icon-237-robot-relaxed::before {
  content: "";
}

.icon-238-robot-surprized::before {
  content: "";
}

.icon-239-robot-confused::before {
  content: "";
}

.icon-240-robot-sad::before {
  content: "";
}

.icon-241-robot-broken::before {
  content: "";
}

.icon-242-umbrella::before {
  content: "";
}

.icon-243-security::before {
  content: "";
}

.icon-244-routed-network::before {
  content: "";
}

.icon-245-ip-sets::before {
  content: "";
}

.icon-246-resource-pool::before {
  content: "";
}

.icon-247-edge::before {
  content: "";
}

.icon-248-switch::before {
  content: "";
}

.icon-249-processor::before {
  content: "";
}

.icon-250-distributed-network::before {
  content: "";
}

.icon-251-legacy-network::before {
  content: "";
}

.icon-252-star-half::before {
  content: "";
}

.icon-253-filter::before {
  content: "";
}

.icon-254_idcard::before {
  content: "";
}

.icon-255_passport::before {
  content: "";
}

.icon-256_thumb_up_filled::before {
  content: "";
}

.icon-257_tag::before {
  content: "";
}

.icon-258_bell::before {
  content: "";
}

.icon-259_flash_multiple::before {
  content: "";
}

.icon-260_lightbulb::before {
  content: "";
}

.icon-261_devices::before {
  content: "";
}

.icon-262_smartphone_multiple::before {
  content: "";
}

.icon-263_document_indesign::before {
  content: "";
}

.icon-264_document_illustrator::before {
  content: "";
}

.icon-265_document_onenote::before {
  content: "";
}

.icon-266_document_eps::before {
  content: "";
}

.icon-267_document_photoshop::before {
  content: "";
}

.icon-268_document_visio::before {
  content: "";
}

.icon-269_document_publisher::before {
  content: "";
}

.icon-270_document_unknowndoc::before {
  content: "";
}

.icon-271_shop::before {
  content: "";
}

.icon-272_scissors::before {
  content: "";
}

.icon-273_battery::before {
  content: "";
}

.icon-274_battery_3::before {
  content: "";
}

.icon-275_battery_2::before {
  content: "";
}

.icon-276_battery_1::before {
  content: "";
}

.icon-277_battery_0::before {
  content: "";
}

.icon-278_battery_empty::before {
  content: "";
}

.icon-279_mouse::before {
  content: "";
}

.icon-280_pointer::before {
  content: "";
}

.icon-281_realmouse::before {
  content: "";
}

.icon-282_bug::before {
  content: "";
}

.icon-283_privacy::before {
  content: "";
}

.icon-284_ip::before {
  content: "";
}

.icon-285_patch::before {
  content: "";
}

.icon-286_microphone_1::before {
  content: "";
}

.icon-287_microphone_2::before {
  content: "";
}

.icon-288_handset_up::before {
  content: "";
}

.icon-289_handset_up_stroke::before {
  content: "";
}

.icon-290_handset_stroke::before {
  content: "";
}

.icon-291_software::before {
  content: "";
}

.icon-292_dynamic_storage::before {
  content: "";
}

.icon-293_wireless_data::before {
  content: "";
}

.icon-294_wireless_voice::before {
  content: "";
}

.icon-295_lips::before {
  content: "";
}

.icon-296_flag-filled::before {
  content: "";
}

.icon-297_alarmclock::before {
  content: "";
}

.icon-298_copy::before {
  content: "";
}

.icon-299_paste::before {
  content: "";
}

.icon-300_plus-box::before {
  content: "";
}

.icon-301_minus-box::before {
  content: "";
}

.icon-302_service::before {
  content: "";
}

.icon-303_business-phone::before {
  content: "";
}

/*
 * Set html to full width and height
 * Set touch-action to avoid touch delay on mobile IE
 */
html {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
}

/*
 * Set display none to hidden elements
 * IE 9 and 10 support
 */
*[hidden] {
  display: none !important;
}

/*
 * Reset fonts for relevant elements
 */
input,
button,
select,
textarea {
  margin: 0;
  outline: none;
  border-radius: 0;
  text-align: left;
  line-height: normal;
  font: inherit;
  font-size: 100%;
}

hr {
  height: 0;
  box-sizing: content-box;
}

/*
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
  /*
   * Improve readability of focused elements when they are also in an
   * active/hover state.
   */
}

a:active,
a:hover {
  outline: 0;
}

input,
button,
submit {
  margin: 0;
  border: 0;
  background-color: transparent;
  padding: 0;
  color: inherit;
  /*
   * Improve readability of focused elements when they are also in an
   * active/hover state.
   */
  /*
   * Remove IE 11+ item jump on click
   */
}

input:active, input:hover,
button:active,
button:hover,
submit:active,
submit:hover {
  outline: 0;
}

input > *,
button > *,
submit > * {
  position: relative;
}

/* iOS "clickable elements" fix for role="button"
 *
 * Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
 * for traditionally non-focusable elements with role="button"
 * see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 */
[role='button'] {
  cursor: pointer;
}

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

/*
::selection {
  background: $color-selection-bg;
  color: $color-selection-fg;
}
*/
body {
  font-family: "TheSans", sans-serif;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  background-color: #fff;
  text-rendering: optimizeLegibility;
  color: #333;
  box-sizing: border-box;
}

.major-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.main-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.main-wrapper.flex {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.page {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  min-height: 1px;
}

/* h1 in navy*/
h1.styleguide {
  /* .navy $color-sc-navy*/
  color: #015;
}

/*doc
---
title: Colours
name: 01-foundation-01-colors-01-brand
category: Foundation - Colours
---

<p>Our colour system consists of four palettes, each with a specific role. They work together to create visual impact, reinforce the Swisscom brand, clearly signpost interactions and enrich content. Our colours have been chosen to work well on screen and support accessibility.</p>

<style>
    .color-picker {
        margin-top: 22px;
    }

    .color-picker ul {
        display: flex;
        flex-direction: column;
    }

    .color-picker li {
        margin: 1px 0;
        font-size: 14px;
    }

    .color-picker li::before {
        content: '';
    }

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

    .title {
        border-bottom: 1px solid;
        margin-bottom: 6px;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .swatch {
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 8px;
        border-radius: 50%;
    }
</style>

<div class="row color-picker">
    <div class="col-xs-6 col-lg-2">
        <div class="title">Brand colours</div>
        <div class="row">
            <ul class="col-xs-12">
                <li>
                    <div class="swatch" style="background-color: #001155;"></div>
                    <div class="tooltip" aria-label="Swisscom Navy">#001155</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #11AAFF;"></div>
                    <div class="tooltip" aria-label="Swisscom Blue">#11AAFF</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #DD1122;"></div>
                    <div class="tooltip" aria-label="Swisscom Red">#DD1122</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #551166;"></div>
                    <div class="tooltip" aria-label="Swisscom Purple">#551166</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #333333;"></div>
                    <div class="tooltip" aria-label="Dark grey">#333333</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #666666;"></div>
                    <div class="tooltip" aria-label="Mid grey">#666666</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #BBBBBB;"></div>
                    <div class="tooltip" aria-label="Light grey">#BBBBBB</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);"></div>
                    <div class="tooltip" aria-label="White">#FFFFFF</div>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-xs-6 col-lg-4">
        <div class="title">SDX colours</div>
        <div class="row">
            <ul class="col-xs-12 col-md-6">
                <li>
                    <div class="swatch" style="background-color: #333333;"></div>
                    <div class="tooltip" aria-label="Dark grey">#333333</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #474747;"></div>
                    <div class="tooltip" aria-label="Dark grey 90%">#474747</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #5C5C5C;"></div>
                    <div class="tooltip" aria-label="Dark grey 80%">#5C5C5C</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #858585;"></div>
                    <div class="tooltip" aria-label="Dark grey 60%">#858585</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #ADADAD;"></div>
                    <div class="tooltip" aria-label="Dark grey 40%">#ADADAD</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #D6D6D6;"></div>
                    <div class="tooltip" aria-label="Dark grey 20%">#D6D6D6</div>
                </li>
            </ul>
            <ul class="col-xs-12 col-md-6">
                <li>
                    <div class="swatch" style="background-color: #1781E3;"></div>
                    <div class="tooltip" aria-label="Interaction Blue">#1781E3</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #A2CDF4;"></div>
                    <div class="tooltip" aria-label="Interaction Blue 40%">#A2CDF4</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #D1E6F9;"></div>
                    <div class="tooltip" aria-label="Interaction Blue 20%">#D1E6F9</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #DDE3E7;"></div>
                    <div class="tooltip" aria-label="Aluminium">#DDE3E7</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #E4E9EC;"></div>
                    <div class="tooltip" aria-label="Aluminium 80%">#E4E9EC</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #EEF3F6;"></div>
                    <div class="tooltip" aria-label="Horizon">#EEF3F6</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #F8FAFB;"></div>
                    <div class="tooltip" aria-label="Horizon 40%">#F8FAFB</div>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-xs-6 col-lg-2">
        <div class="title">Interaction colours</div>
        <div class="row">
        <ul class="col-xs-12">
            <li>
                <div class="swatch" style="background-color: #1781E3;"></div>
                <div class="tooltip" aria-label="Interaction Blue">#1781E3</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #0851DA;"></div>
                <div class="tooltip" aria-label="Blue Rollover">#0851DA</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #CFD5D9;"></div>
                <div class="tooltip" aria-label="Interaction Gray">#CFD5D9</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #B1B9BE;"></div>
                <div class="tooltip" aria-label="Gray Rollover">#B1B9BE</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #25B252;"></div>
                <div class="tooltip" aria-label="Interaction Green">#25B252</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #008236;"></div>
                <div class="tooltip" aria-label="Green Rollover">#008236</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #DD1122;"></div>
                <div class="tooltip" aria-label="Interaction Red">#DD1122</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #BE0000;"></div>
                <div class="tooltip" aria-label="Red Rollover">#BE0000</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #FF8B2E;"></div>
                <div class="tooltip" aria-label="Interaction Orange">#FF8B2E</div>
            </li>
            <li>
                <div class="swatch" style="background-color: #E86416;"></div>
                <div class="tooltip" aria-label="Orange Rollover">#E86416</div>
            </li>
        </ul>
        </div>
    </div>
    <div class="col-xs-6 col-lg-4">
        <div class="title">Content colours</div>
        <div class="row">
            <ul class="col-xs-12 col-md-6">
                <li>
                    <div class="swatch" style="background-color: #A63297;"></div>
                    <div class="tooltip" aria-label="Orchid">#A63297</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #7F2879;"></div>
                    <div class="tooltip" aria-label="Orchid Rollover">#7F2879</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #5944C6;"></div>
                    <div class="tooltip" aria-label="Iris">#5944C6</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #42389E;"></div>
                    <div class="tooltip" aria-label="Iris Rollover">#42389E</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #E61E64;"></div>
                    <div class="tooltip" aria-label="Pink">#E61E64</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #BF1B5A;"></div>
                    <div class="tooltip" aria-label="Pink Rollover">#BF1B5A</div>
                </li>
            </ul>
            <ul class="col-xs-12 col-md-6">
                <li>
                    <div class="swatch" style="background-color: #0EABA9;"></div>
                    <div class="tooltip" aria-label="Turquoise">#0EABA9</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #0C847E;"></div>
                    <div class="tooltip" aria-label="Turquoise Rollover">#0C847E</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #91BA2F;"></div>
                    <div class="tooltip" aria-label="Apple">#91BA2F</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #759126;"></div>
                    <div class="tooltip" aria-label="Apple Rollover">#759126</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #19657A;"></div>
                    <div class="tooltip" aria-label="Petrol">#19657A</div>
                </li>
                <li>
                    <div class="swatch" style="background-color: #114551;"></div>
                    <div class="tooltip" aria-label="Petrol Rollover">#114551</div>
                </li>
            </ul>
        </div>
    </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Rules</h2>

  <h3>Colour usage ratio</h3>

  <p>This diagram visualises the proportionate usage of colour across SDX. <br />Following this guidance will help to give all products and services a coherant aesthetic that is in keeping with the SDX principles.</p>

  <img class="img-responsive" src="./theme-build/img/design/colors/Group-24@2x.jpg">

  <h3 class="padding-top-4">Brand colours</h3>

  <p>The use of the brand colours within SDX helps to reinforce the presence of the Swisscom master brand throughout all Swisscom digital experiences.</p>

  <div class="row margin-bottom-4">
    <div class="col-xs-12 col-lg-8">
      <img class="img-responsive" src="./theme-build/img/design/colors/colors-brand@2x.jpg">
    </div>
  </div>

  <p>Within SDX, brand colours exist predominantly through typography. Swisscom navy is used for text links and icons within navigation.</p>
  <p>Dark grey is used for the majority of non-interactive typography. Mid and light grey can be used for creating levels of hierachy between similar size pieces of text.</p>
  <p>SDX has separate interaction and content colour palettes that feature AA accessible alternative colours to Swisscom purple, blue and red for use in digital products.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/Group-4@2x.jpg">
      <span class="fig-caption">Typography using brand colours</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/Group-37@2x.jpg">
      <span class="fig-caption">Icons using brand colours</p>
    </div>
  </div>

  <h3>Core colours</h3>

  <p>SDX core colours are the most widely used across all screens and components and used as the foundation on which all our products are made from.</p>

  <div class="row margin-top-4">
    <div class="col-xs-12 col-lg-8">
      <img class="img-responsive" src="./theme-build/img/design/colors/colors-core@2x.jpg">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/Group-42@2x.jpg">
      <span class="fig-caption">Desktop mega menu using core colours</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/Group-43@2x.jpg">
      <span class="fig-caption">Mobile side navigation using core colours</span>
    </div>
  </div>

  <h3>Interaction colours</h3>

  <p>Interaction colours are designed to maintain a consistent treatment for interactive elements. They help to differentiate between static and interactive content in page, without relying on hover states. <br />This means both touch and mouse users are able to intuitively navigate content and services.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-primary-interaction@2x-1.jpg">
      <span class="fig-caption">Primary interaction colours</span>
    </div>
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/colors/color-secondary-interaction@2x.jpg">
      <span class="fig-caption">Secondary interaction colours</span>
    </div>
  </div>

  <p>Theses colours are used for the vast majority of interactive elements throughout SDX. This includes text links and buttons.</p>
  <p>Blue is the first level interaction colour. The interaction grey can be used as a secondary element when in conjunction with a blue primary interactive element, for example ‘Confirm’ in blue, ‘Cancel’ in grey.</p>
  <p>The secondary interaction colours each have specific purposes. These colours indicate the type of interaction the user is making, or content type they are interacting with. Green is used for a confirmation interaction, such as ‘pay now’ that takes place at the end of a process. Red is used to communicate important messages or warnings for example Storage space full. Orange is used to display less severe alerts and errors, for example Storage space low.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-interaction-buttons@2x-1.jpg">
      <span class="fig-caption">Interaction colours in buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/colors/color-interaction-alert@2x-1.jpg">
     <span class="fig-caption">Interaction colours in alerts</span>
    </div>
  </div>

  <h3>Content colours</h3>

  <p>Content colours are used as accents to help enrich content and experiences while serving a functional purpose. They help to create visual links between content and can act as signifiers of content themes throughout services. </p>
  <p>They’re most commonly used within cards and when displaying data in graphs and charts.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-content@2x.jpg">
      <span class="fig-caption">Standard and dark content colour variants</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-variants@2x.jpg">
      <span class="fig-caption">Standard and dark content colour variants</span>
    </div>
  </div>

  <p>Standard variants of the content colours should always be used first.</p>
  <p>Only use the dark variants specifically as a pair with the standard colour, or when all standard colours are already in use in the same visual. For interactive elements where the standard variants of content colours are used, the dark variants can be used as rollovers.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-pie-chart@2x.jpg">
      <span class="fig-caption">Side by side pie charts using content colours</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/Group-55@2x.jpg">
      <span class="fig-caption">Interaction colours in alerts</span>
    </div>
  </div>

  <h3>Content colour tints</h3>

  <p>Tints of content colours are available for use within extremely complete data sets, but should not be used in any other context.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-tints@2x-1.jpg">
    </div>
  </div>

  <h3 class="padding-top-4">Using full bleed colour</h3>

  <p>Full bleed colour can be used in a number of instances, either to compliment content or to add emphasis to an element within a page.</p>
  <p>Full bleed colour should be used sparingly and a concious effort should be made to maintain the proportionate usage of colour outlined in the colour ratio diagram at the top of this page.</p>
  <p>When pairing content colours full bleed with badges, the dark variant should be used for the background, and the standard variant used for the badge. This helps to give badges more prominence, and prevents the background colour from dominating.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-full-bleed@2x.jpg">
    </div>
  </div>

  <h3 class="padding-top-4">Combining content colour</h3>

  <p>Content colours can be used on their own or in combination with other content colours, but should not be combined with colours from the other palettes.</p>
  <p>Text should always be white, and buttons should revert to the ‘on dark’ variant of the secondary button and avoid using the interaction colours for buttons on colour.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-content-text-button@2x.jpg">
      <span class="fig-caption">Interaction colours in buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-content-individual@2x.jpg">
      <span class="fig-caption">Interaction colours in alerts</span>
    </div>
  </div>

  <h3>Wayfinding with colour</h3>

  <p>They help to create visual links between content and can act as signifiers of content themes throughout services.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/colors/color-wayfinding@2x.jpg">
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>All colours below can be applied to text, icons, or backgrounds using the corresponding CSS class.
A prefix <code>bg-</code> is required to set a background colour.</p>

<h3>Brand colours</h3>
<p>For use in every application.</p>

<div class="row">
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #015"></div>
      <p class="sg-color-name">Swisscom Navy</p>
      <p class="sg-color-code">
        CSS: .sc-navy<br/>
        Sass: $color-sc-navy<br/>
        Hex: #001155
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #fff"></div>
      <p class="sg-color-name">White</p>
      <p class="sg-color-code">
        CSS: .sc-white<br/>
        Sass: $color-sc-white<br/>
        Hex: #FFFFFF
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #1af"></div>
      <p class="sg-color-name">Swisscom Blue</p>
      <p class="sg-color-code">
        CSS: .sc-blue<br/>
        Sass: $color-sc-blue<br/>
        Hex: #11AAFF
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #d12"></div>
      <p class="sg-color-name">Swisscom Red</p>
      <p class="sg-color-code">
        CSS: .sc-red<br/>
        Sass: $color-sc-red<br/>
        Hex: #DD1122
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #516"></div>
      <p class="sg-color-name">Swisscom Purple</p>
      <p class="sg-color-code">
        CSS: .sc-purple<br/>
        Sass: $color-sc-purple<br/>
        Hex: #551166
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #333"></div>
      <p class="sg-color-name">Dark grey</p>
      <p class="sg-color-code">
        CSS: .sc-gray<br/>
        Sass: $color-sc-gray<br/>
        Hex: #333333
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #666"></div>
      <p class="sg-color-name">Mid grey</p>
      <p class="sg-color-code">
        CSS: .sc-gray-mid<br/>
        Sass: $color-sc-gray-mid<br/>
        Hex: #666666
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #BBB"></div>
      <p class="sg-color-name">Light grey</p>
      <p class="sg-color-code">
        CSS: .sc-gray-light<br/>
        Sass: $color-sc-gray-light<br/>
        Hex: #BBBBBB
      </p>
    </div>
  </div>
</div>

<h3 class="padding-top-4">SDX colours</h3>
<p>Page canvas, navigation, footer, banners, backgrounds.</p>

<div class="row">
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #015"></div>
      <p class="sg-color-name">Swisscom Navy</p>
      <p class="sg-color-code">
        CSS: .navy<br/>
        Sass: $color-navy<br/>
        Hex: #001155
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #fff"></div>
      <p class="sg-color-name">White</p>
      <p class="sg-color-code">
        CSS: .white<br/>
        Sass: $color-white<br/>
        Hex: #FFFFFF
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #1781E3"></div>
      <p class="sg-color-name">Interaction blue</p>
      <p class="sg-color-code">
        CSS: .blue<br/>
        Sass: $color-blue<br/>
        Hex: #1781E3
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #A2CDF4"></div>
      <p class="sg-color-name">Tint 40%</p>
      <p class="sg-color-code">
        CSS: .blue-40<br/>
        Sass: $color-blue-40<br/>
        Hex: #A2CDF4
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #D1E6F9"></div>
      <p class="sg-color-name">Tint 20%</p>
      <p class="sg-color-code">
        CSS: .blue-20<br/>
        Sass: $color-blue-20<br/>
        Hex: #D1E6F9
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #333333"></div>
      <p class="sg-color-name">Dark grey</p>
      <p class="sg-color-code">
        CSS: .gray<br/>
        Sass: $color-gray<br/>
        Hex: #333333
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #474747"></div>
      <p class="sg-color-name">Tint 90%</p>
      <p class="sg-color-code">
        CSS: .gray-90<br/>
        Sass: $color-gray-90<br/>
        Hex: #474747
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #5C5C5C"></div>
      <p class="sg-color-name">Tint 80%</p>
      <p class="sg-color-code">
        CSS: .gray-80<br/>
        Sass: $color-gray-80<br/>
        Hex: #5C5C5C
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #858585"></div>
      <p class="sg-color-name">Tint 60%</p>
      <p class="sg-color-code">
        CSS: .gray-60<br/>
        Sass: $color-gray-60<br/>
        Hex: #858585
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #ADADAD"></div>
      <p class="sg-color-name">Tint 40%</p>
      <p class="sg-color-code">
        CSS: .gray-40<br/>
        Sass: $color-gray-40<br/>
        Hex: #ADADAD
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #D6D6D6"></div>
      <p class="sg-color-name">Tint 20%</p>
      <p class="sg-color-code">
        CSS: .gray-20<br/>
        Sass: $color-gray-20<br/>
        Hex: #D6D6D6
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #DDE3E7"></div>
      <p class="sg-color-name">Aluminium</p>
      <p class="sg-color-code">
        CSS: .aluminium<br/>
        Sass: $color-aluminium<br/>
        Hex: #DDE3E7
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #E4E9EC"></div>
      <p class="sg-color-name">Tint 80%</p>
      <p class="sg-color-code">
        CSS: .aluminium-80<br/>
        Sass: $color-aluminium-80<br/>
        Hex: #E4E9EC
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #EEF3F6"></div>
      <p class="sg-color-name">Horizon</p>
      <p class="sg-color-code">
        CSS: .horizon<br/>
        Sass: $color-horizon<br/>
        Hex: #EEF3F6
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #F8FAFB"></div>
      <p class="sg-color-name">Tint 40%</p>
      <p class="sg-color-code">
        CSS: .horizon-40<br/>
        Sass: $color-horizon-40<br/>
        Hex: #F8FAFB
      </p>
    </div>
  </div>
</div>

<h2>Interaction colours</h2>
<p>For use in CTAs and form ﬁelds.</p>

<div class="row">
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #1781E3"></div>
      <p class="sg-color-name">Interaction Blue</p>
      <p class="sg-color-code">
        CSS: .int-blue<br/>
        Sass: $color-int-blue<br/>
        Hex: #1781E3
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #0851DA"></div>
      <p class="sg-color-name">Blue Rollover</p>
      <p class="sg-color-code">
        CSS: .int-blue--active<br/>
        Sass: $color-int-blue--active<br/>
        Hex: #0851DA
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #CFD5D9"></div>
      <p class="sg-color-name">Interaction Gray</p>
      <p class="sg-color-code">
        CSS: .int-gray<br/>
        Sass: $color-int-gray<br/>
        Hex: #CFD5D9
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #B1B9BE"></div>
      <p class="sg-color-name">Gray Rollover</p>
      <p class="sg-color-code">
        CSS: .int-gray--active<br/>
        Sass: $color-int-gray--active<br/>
        Hex: #B1B9BE
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #25B252"></div>
      <p class="sg-color-name">Interaction Green</p>
      <p class="sg-color-code">
        CSS: .int-green<br/>
        Sass: $color-int-green<br/>
        Hex: #25B252
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #008236"></div>
      <p class="sg-color-name">Green Rollover</p>
      <p class="sg-color-code">
        CSS: .int-green--active<br/>
        Sass: $color-int-green--active<br/>
        Hex: #008236
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #DD1122"></div>
      <p class="sg-color-name">Interaction Red</p>
      <p class="sg-color-code">
        CSS: .int-red<br/>
        Sass: $color-int-red<br/>
        Hex: #DD1122
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #BE0000"></div>
      <p class="sg-color-name">Red Rollover</p>
      <p class="sg-color-code">
        CSS: .int-red--active<br/>
        Sass: $color-int-red--active<br/>
        Hex: #BE0000
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #FF8B2E"></div>
      <p class="sg-color-name">Interaction Orange</p>
      <p class="sg-color-code">
        CSS: .int-orange<br/>
        Sass: $color-int-orange<br/>
        Hex: #FF8B2E
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #E86416"></div>
      <p class="sg-color-name">Orange Rollover</p>
      <p class="sg-color-code">
        CSS: .int-orange--active<br/>
        Sass: $color-int-orange--active<br/>
        Hex: #E86416
      </p>
    </div>
  </div>
</div>

<h3 class="padding-top-4">Content colours</h3>
<p>For use in content.</p>

<div class="row">
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #A63297"></div>
      <p class="sg-color-name">Orchid</p>
      <p class="sg-color-code">
        CSS: .orchid<br/>
        Sass: $color-orchid<br/>
        Hex: #A63297
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #7F2879"></div>
      <p class="sg-color-name">Orchid Rollover</p>
      <p class="sg-color-code">
        CSS: .orchid--active<br/>
        Sass: $color-orchid--active<br/>
        Hex: #7F2879
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #5944C6"></div>
      <p class="sg-color-name">Iris</p>
      <p class="sg-color-code">
        CSS: .iris<br/>
        Sass: $color-iris<br/>
        Hex: #5944C6
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #42389E"></div>
      <p class="sg-color-name">Iris Rollover</p>
      <p class="sg-color-code">
        CSS: .iris<br/>
        Sass: $color-iris-active<br/>
        Hex: #42389E
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #E61E64"></div>
      <p class="sg-color-name">Pink</p>
      <p class="sg-color-code">
        CSS: .pink<br/>
        Sass: $color-pink<br/>
        Hex: #E61E64
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #BF1B5A"></div>
      <p class="sg-color-name">Pink Rollover</p>
      <p class="sg-color-code">
        CSS: .pink--active<br/>
        Sass: $color-pink--active<br/>
        Hex: #BF1B5A
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #0EABA9"></div>
      <p class="sg-color-name">Turquoise</p>
      <p class="sg-color-code">
        CSS: .turquoise<br/>
        Sass: $color-turquoise<br/>
        Hex: #0EABA9
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #0C847E"></div>
      <p class="sg-color-name">Turquoise Rollover</p>
      <p class="sg-color-code">
        CSS: .turquoise--active<br/>
        Sass: $color-turquoise--active<br/>
        Hex: #0C847E
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #91BA2F"></div>
      <p class="sg-color-name">Apple</p>
      <p class="sg-color-code">
        CSS: .apple<br/>
        Sass: $color-apple<br/>
        Hex: #91BA2F
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #759126"></div>
      <p class="sg-color-name">Apple Rollover</p>
      <p class="sg-color-code">
        CSS: .apple--active<br/>
        Sass: $color-apple--active<br/>
        Hex: #759126
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #19657A"></div>
      <p class="sg-color-name">Petrol</p>
      <p class="sg-color-code">
        CSS: .petrol<br/>
        Sass: $color-petrol<br/>
        Hex: #19657A
      </p>
    </div>
  </div>
  <div class="col-xs-6 col-md-3">
    <div class="sg-color">
      <div class="sg-color-preview" style="background-color: #114551"></div>
      <p class="sg-color-name">Petrol Rollover</p>
      <p class="sg-color-code">
        CSS: .petrol--active<br/>
        Sass: $color-petrol--active<br/>
        Hex: #114551
      </p>
    </div>
  </div>
</div>
*/
.white {
  color: #fff;
}

.navy {
  color: #015;
}

.blue {
  color: #1781e3;
}

.blue-40 {
  color: #a2cdf4;
}

.blue-20 {
  color: #a2cdf4;
}

.aluminum,
.aluminium {
  color: #dde3e7;
}

.aluminum-80,
.aluminium-80 {
  color: #e4e9ec;
}

.horizon {
  color: #eef3f6;
}

.horizon-40 {
  color: #f8fafb;
}

.gray {
  color: #333;
}

.gray-90 {
  color: #474747;
}

.gray-80 {
  color: #5c5c5c;
}

.gray-60 {
  color: #858585;
}

.gray-40 {
  color: #adadad;
}

.gray-20 {
  color: #d6d6d6;
}

.gray-mid {
  color: #666;
}

.gray-light {
  color: #bbb;
}

.sc-blue {
  color: #1af;
}

.sc-red {
  color: #d12;
}

.sc-purple {
  color: #516;
}

.sc-navy {
  color: #015;
}

.sc-white {
  color: #fff;
}

.sc-gray {
  color: #333;
}

.sc-gray-mid {
  color: #666;
}

.sc-gray-light {
  color: #bbb;
}

.int-blue {
  color: #1781e3;
}

.int-blue--active {
  color: #0851da;
}

.int-gray {
  color: #cfd5d9;
}

.int-gray--active {
  color: #b1b9be;
}

.int-green {
  color: #25b252;
}

.int-green--active {
  color: #008236;
}

.int-red {
  color: #d12;
}

.int-red--active {
  color: #be0000;
}

.int-orange {
  color: #ff8b2e;
}

.int-orange--active {
  color: #e86416;
}

.orchid {
  color: #a63297;
}

.orchid--active {
  color: #7f2879;
}

.iris {
  color: #5944c6;
}

.iris--active {
  color: #42389e;
}

.pink {
  color: #e61e64;
}

.pink--active {
  color: #bf1b5a;
}

.turquoise {
  color: #0eaba9;
}

.turquoise--active {
  color: #0c847e;
}

.apple {
  color: #91ba2f;
}

.apple--active {
  color: #759126;
}

.petrol {
  color: #19657a;
}

.petrol--active {
  color: #114551;
}

.bg-white {
  background-color: #fff;
}

.bg-navy {
  background-color: #015;
}

.bg-blue {
  background-color: #1781e3;
}

.bg-blue-40 {
  background-color: #a2cdf4;
}

.bg-blue-20 {
  background-color: #a2cdf4;
}

.bg-aluminum,
.bg-aluminium {
  background-color: #dde3e7;
}

.bg-aluminum-80,
.bg-aluminium-80 {
  background-color: #e4e9ec;
}

.bg-horizon {
  background-color: #eef3f6;
}

.bg-horizon-40 {
  background-color: #f8fafb;
}

.bg-gray {
  background-color: #333;
}

.bg-gray-90 {
  background-color: #474747;
}

.bg-gray-80 {
  background-color: #5c5c5c;
}

.bg-gray-60 {
  background-color: #858585;
}

.bg-gray-40 {
  background-color: #adadad;
}

.bg-gray-20 {
  background-color: #d6d6d6;
}

.bg-gray-mid {
  background-color: #666;
}

.bg-gray-light {
  background-color: #bbb;
}

.bg-sc-blue {
  background-color: #1af;
}

.bg-sc-red {
  background-color: #d12;
}

.bg-sc-purple {
  background-color: #516;
}

.bg-sc-navy {
  background-color: #015;
}

.bg-sc-white {
  background-color: #fff;
}

.bg-sc-gray {
  background-color: #333;
}

.bg-sc-gray-mid {
  background-color: #666;
}

.bg-sc-gray-light {
  background-color: #bbb;
}

.bg-int-blue {
  background-color: #1781e3;
}

.bg-int-blue--active {
  background-color: #0851da;
}

.bg-int-gray {
  background-color: #cfd5d9;
}

.bg-int-gray--active {
  background-color: #b1b9be;
}

.bg-int-green {
  background-color: #25b252;
}

.bg-int-green--active {
  background-color: #008236;
}

.bg-int-red {
  background-color: #d12;
}

.bg-int-red--active {
  background-color: #be0000;
}

.bg-int-orange {
  background-color: #ff8b2e;
}

.bg-int-orange--active {
  background-color: #e86416;
}

.bg-orchid {
  background-color: #a63297;
}

.bg-orchid--active {
  background-color: #7f2879;
}

.bg-iris {
  background-color: #5944c6;
}

.bg-iris--active {
  background-color: #42389e;
}

.bg-pink {
  background-color: #e61e64;
}

.bg-pink--active {
  background-color: #bf1b5a;
}

.bg-turquoise {
  background-color: #0eaba9;
}

.bg-turquoise--active {
  background-color: #0c847e;
}

.bg-apple {
  background-color: #91ba2f;
}

.bg-apple--active {
  background-color: #759126;
}

.bg-petrol {
  background-color: #19657a;
}

.bg-petrol--active {
  background-color: #114551;
}

/*doc
---
title: Typography
name: 01-foundation-04-typography-01-typography
category: Foundation - Typography
---

<p>For each typeface there are specific type size rules in place to help to maintain contrast and hierarchy between content. The guidance below shows the typesize, leading and weights that can be used. Limiting the number of different styles used will help to keep products clean and simple.</p>

<section class="live-example">
  <div class="section-inner">
    <div class="resizerExample">
      <img class="img-responsive img-retina margin-bottom-4" src="./theme-build/img/design/typo/resources-type-resizer@2x-1.jpg" style="width:https://digitalexperience.swisscom.ch/files/2016/09/Reduce-Effort.gifpx;">
      <button class="button button--primary modal-trigger" href="modalResizer"><i class="icon icon-114-computer" aria-hidden="true"></i> View Breakpoints</button>
    </div>
    <div style="" class="modal modal-resizer" role="dialog" tabindex="-1" data-init="auto" id="modalResizer">
      <div class="modal__container">
        <div class="modal__content">
          <div class="resizer sc-resizer" init="auto" sizes="sizes">
            <div class="resizer__header">
               <div class="resizer__toolbar"></div>
               <button class="modal__close modal-cancel">
                    <i class="icon icon-022-close" aria-hidden="true"></i>
               </button>
            </div>
            <div class="resizer__container">
              <div class="resizer__dimension">
                <div class="dimension__bar"></div>
                <div class="dimension__value"></div>
              </div>
              <div class="resizer__innercontainer">
                <div class="dimension__dragbar">
                  <div class="dimension__thumb"></div>
                </div>
                <iframe style="min-height: 1000px;" src="./theme-build/img/design/typo/typography-6.html" scrolling="no" frameborder="0"></iframe>
              </div>
            </div>
          </div>
          <datalist id="sizes">
            <option value="320"><i class="icon icon-111-smartphone icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">320px</div></option>
            <option value="480"><i class="icon icon-111-smartphone icon--s3 resizer__icon resizer__icon--rotate" aria-hidden="true"></i><div class="resizer__label">480px</div></option>
            <option value="768"><i class="icon icon-112-tablet icon--s3 resizer__icon resizer__icon--rotate" aria-hidden="true"></i><div class="resizer__label">768px</div></option>
            <option value="1024"><i class="icon icon-112-tablet icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1024px</div></option>
            <option value="1280"><i class="icon icon-113-laptop icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1280px</div></option>
            <option value="1440"><i class="icon icon-113-laptop icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1440px</div></option>
          </datalist>
        </div>
      </div>
    </div>
  </div>
</section>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Rules</h2>

  <h3>Typefaces</h3>

  <p>When designing for SDX, there are two typefaces to choose from – the Sans and the Serif – each of which are available in semi-light and semi-bold. The Sans is our primary typeface and is used across all applications. The Serif is Swisscom’s voice, and is only used in small select cases, such as pull quotes and editorial style headings.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/typo/type-the-sans@2x.jpg">
        <span class="fig-caption">The Sans</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/typo/type-the-serif@2x.jpg">
        <span class="fig-caption">The Serif</span>
      </div>
  </div>

  <h3>Using color and typography</h3>

  <p>Typography itself should only ever appear in the core and interaction color palettes. Content colors should never be used for typography. When using color backgrounds, white should be used for typography</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/typo/type-and-color-accessibility@2x.jpg">
        <span class="fig-caption">color and typography</span>
      </div>
  </div>

  <div style="" class="modal modal-gallery" role="dialog" tabindex="-1" data-init="auto">
    <div class="modal__container">
      <div class="modal__header">
        <div class="modal-spacer"></div>
        <div class="container">
          <button class="modal__close modal-cancel">
            <i class="icon icon-022-close" aria-hidden="true"></i>
          </button>
        </div>
      </div>
      <div class="modal__content">
        <div class="container">
          <div class="slider-wrapper">
            <div class="scrollbar-blocker scrollbar-blocker-left"></div>
            <div class="slider-gallery-off" data-max-height="85">
              <div class="slide">
                <img class="img-responsive" style="margin: 0 auto;" src="./theme-build/img/design/typo/type-and-color-accessibility@2x.jpg">
              </div>
            </div>
            <div class="scrollbar-blocker scrollbar-blocker-right"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <p>The color matrix demonstrates the accessibility of typefaces across the entire color palette, at all specified sizes. Use the matrix to ensure your color choices are at least AA compliant.</p>

  <h3>Type hierachy and color</h3>

  <p>When creating layouts using typography, color from the Core palette should be used to help give content hierachy. Content colors should never be used for typography.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/typo/type-color-light@2x.jpg">
        <span class="fig-caption">Type hierachy color guidance on light</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive"  src="./theme-build/img/design/typo/type-color-dark@2x.jpg">
        <span class="fig-caption">Type hierachy color guidance on dark</span>
      </div>
  </div>

  <h3>Minimum type padding</h3>

  <p>Each type size has a minimum padding that makes sure there is adequate space around text.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/typo/type-padding@2x.jpg">
        <span class="fig-caption">Minimum type padding</span>
      </div>
  </div>

  <h3>Letter-spacing</h3>

  <p>The letter spacing guide should be used to support the consistent application of type and to ensure that legibility is maintained at all sizes in all contexts. Smaller text should use increased letter-spacing to aid legibility, and larger text should use tighter letterspacing.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/typo/type-letter-spacing-large@2x.jpg">
        <span class="fig-caption">Letter-spacing</span>
      </div>
  </div>

  <p>Similarly to letter-spacing, to aid legibility, a scaled system for selecting the weight of typography should be used. Smaller typography should be semi-light or semi-bold, while larger type should be semi-light at all times.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/typo/type-letter-spacing-small@2x.jpg">
        <span class="fig-caption">Letter-spacing</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>The SDX Library includes the two standard fonts <b>TheSans</b> and <b>TheSerif</b>. It uses it's responsiveness to automatically adjust the font-size and properties depending on a series of media queries.</p>

<h3>Font Type Sans</h3>

<p>The default style uses the <b>TheSans</b> font.</p>

```htmlmixed
<h4>Headline 4: Swisscom intends to continue reducing roaming prices</h4>
<p>Swisscom intends to continue reducing roaming prices</p>
```

<h3>Font Type Serif</h3>

<p>To change the font to <b>TheSerif</b> font-face add the class <code>serif</code> to any element that should be serif.</p>

```htmlmixed
<h4 class="font font--serif">Headline 4: Swisscom intends to continue reducing roaming prices</h4>
<p class="font font--serif">Swisscom intends to continue reducing roaming prices</p>
```

<h3>Font Weight</h3>

<p>To change the font weight form the default weight <b>Light</b> to a different weight add the classes <code>font--light</code>, <code>font--semi-light</code> or <code>font--semi-bold</code> to the element.</p>

```htmlmixed
<p class="font font--light">Swisscom intends to continue reducing roaming prices</p>
<p class="font font--semi-light">Swisscom intends to continue reducing roaming prices</p>
<p class="font font--semi-bold">Swisscom intends to continue reducing roaming prices</p>

```
<h2>Display Headings</h2>

<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading, a larger slightly more opinionated heading style.<br/>
To add a display heading add one of the following classes <code>text-d1</code>, <code>text-d2</code> or <code>text-d3</code> to the element.</p>

```htmlmixed
<h1 class="text-d1">Display 1: Swisscom intends to continue reducing roaming prices</h1>
<h1 class="text-d2">Display 2: Swisscom intends to continue reducing roaming prices</h1>
<h1 class="text-d3">Display 3: Swisscom intends to continue reducing roaming prices</h1>
```
<h2>Headings</h2>

<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available.</p>

```htmlmixed
<h1>Headline 1: Swisscom intends to continue reducing roaming prices</h1>
<h2>Headline 2: Swisscom intends to continue reducing roaming prices</h2>
<h3>Headline 3: Swisscom intends to continue reducing roaming prices</h3>
<h4>Headline 4: Swisscom intends to continue reducing roaming prices</h4>
<h5>Headline 5: Swisscom intends to continue reducing roaming prices</h5>
<h6>Headline 6: Swisscom intends to continue reducing roaming prices</h6>
```
<h2>Inline text elements</h2>

<p>Texts are written in paragraphs <code>&lt;p&gt;</code>. The standard style in the <code>&lt;p&gt;</code> element is <code>text-b1</code>.<br/>
The following classes are available for changing the font-size: <code>text-b1</code>, <code>text-b2</code> or <code>text-sm</code></p>

```htmlmixed
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="text-b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-b2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

<p>Styling for common inline HTML5 elements.</p>

```htmlmixed
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
```

<p>While not shown above, feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>

<h2>Text on light, gray and dark backgrounds</h2>

<h4>Light Background (Standard)</h4>

```htmlmixed
<div class="bg bg--light">
  <h1 class="text-d1 navy">Display 1: Swisscom intends to continue reducing roaming prices</h1>
  <h1>H1: Swisscom intends to continue reducing roaming prices</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
```

<h4>Gray Background</h4>

```htmlmixed
<div class="bg bg--gray">
  <h1 class="text-d1 navy">Display 1: Swisscom intends to continue reducing roaming prices</h1>
  <h1>H1: Swisscom intends to continue reducing roaming prices</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
```

<h4>Dark Background</h4>

```htmlmixed
<div class="bg bg--dark">
  <h1 class="text-d1">Display 1: Swisscom intends to continue reducing roaming prices</h1>
  <h1>H1: Swisscom intends to continue reducing roaming prices</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
```
*/
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "TheSans", sans-serif;
  margin: 0;
  margin-bottom: 32px;
  padding: 0;
  text-align: center;
  word-wrap: break-word;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
  margin-bottom: 0;
}

h1,
.text-h1 {
  line-height: 48px;
  letter-spacing: -1.2px;
  font-size: 40px;
  font-weight: 300;
}

h2,
.text-h2 {
  line-height: 40px;
  letter-spacing: -1px;
  font-size: 32px;
  font-weight: 300;
}

h3,
.text-h3 {
  line-height: 32px;
  letter-spacing: -.75px;
  font-size: 28px;
}

h3, h3--light,
.text-h3,
.text-h3--light {
  font-weight: 300;
}

h3--semi-light,
.text-h3--semi-light {
  font-weight: 400;
}

h3--semi-bold,
.text-h3--semi-bold {
  font-weight: 600;
}

h4,
.text-h4 {
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
}

h4, h4--light,
.text-h4,
.text-h4--light {
  font-weight: 300;
}

h4--semi-light,
.text-h4--semi-light {
  font-weight: 400;
}

h4--semi-bold,
.text-h4--semi-bold {
  font-weight: 600;
}

h5,
.text-h5 {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  font-weight: 400;
}

h5, h5--semi-light,
.text-h5,
.text-h5--semi-light {
  font-weight: 400;
}

h5--semi-bold,
.text-h5--semi-bold {
  font-weight: 600;
}

h6,
.text-h6 {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 16px;
  font-weight: 400;
}

h6, h6--semi-light,
.text-h6,
.text-h6--semi-light {
  font-weight: 400;
}

h6--semi-bold,
.text-h6--semi-bold {
  font-weight: 600;
}

.d1,
.text-d1 {
  line-height: 48px;
  letter-spacing: -1.2px;
  font-size: 40px;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .d1,
  .text-d1 {
    line-height: 80px;
    letter-spacing: -1.75px;
    font-size: 70px;
  }
}

.d2,
.text-d2 {
  line-height: 40px;
  letter-spacing: -1px;
  font-size: 32px;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .d2,
  .text-d2 {
    line-height: 64px;
    letter-spacing: -1.35px;
    font-size: 54px;
  }
}

.d3,
.text-d3 {
  line-height: 32px;
  letter-spacing: -.75px;
  font-size: 28px;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .d3,
  .text-d3 {
    line-height: 56px;
    letter-spacing: -1.2px;
    font-size: 48px;
  }
}

p {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.text-b1 {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  font-weight: 400;
}

.text-b2 {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 400;
}

.text-sm {
  line-height: 24px;
  letter-spacing: .1px;
  font-size: 14px;
  font-weight: 400;
}

address {
  font-style: normal;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

.font {
  font-family: "TheSans", sans-serif;
}

.font--sans {
  font-family: "TheSans", sans-serif;
}

.font--serif {
  font-family: "TheSerif", serif;
}

.font--light {
  font-weight: 300;
}

.font--semi-light {
  font-weight: 400;
}

.font--semi-bold {
  font-weight: 600;
}

/*doc
---
title: Grids
name: 01-foundation-02-grid-01
category: Foundation - Grids
---

<p>Different combinations of column widths and arrangements can be used to support the intention of the design. Uniform column widths create calm, functional layouts. Variation between column widths can create visually dynamic and exciting layouts.</p>

<section class="live-example">
    <div class="section-inner">
        <div class="resizerExample">
            <div class="row">
                <div class="col-xs-12 col-lg-12">
                  <img class="img-responsive" src="./theme-build/img/design/grids/resources-grids-resizer@2x.jpg">
                </div>
            </div>
            <br>
            <button class="button button--primary modal-trigger" href="modalResizer">
                <i class="icon icon-114-computer" aria-hidden="true"></i> View Breakpoints
            </button>
        </div>
        <div class="modal modal-resizer" role="dialog" tabindex="-1" data-init="auto" id="modalResizer">
            <div class="modal__container">
                <div class="modal__content">
                    <div class="resizer sc-resizer" init="auto" sizes="sizes">
                        <div class="resizer__header">
							<div class="resizer__toolbar"></div>
							<button class="modal__close modal-cancel">
								<i class="icon icon-022-close" aria-hidden="true"></i>
							</button>
						</div>
                        <div class="resizer__container">
							<div class="resizer__dimension">
								<div class="dimension__bar"></div>
								<div class="dimension__value"></div>
							</div>
							<div class="resizer__innercontainer">
								<div class="dimension__dragbar">
								   <div class="dimension__thumb"></div>
								</div>
								<iframe style="min-height: 600px;" src="./theme-build/img/design/grids/grid-3.html" scrolling="no" frameborder="0"></iframe>
							</div>
						</div>
					</div>
					<datalist id="sizes">
						<option value="320"><i class="icon icon-111-smartphone icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">320px</div></option>
						<option value="480"><i class="icon icon-111-smartphone icon--s3 resizer__icon resizer__icon--rotate" aria-hidden="true"></i><div class="resizer__label">480px</div></option>
						<option value="768"><i class="icon icon-112-tablet icon--s3 resizer__icon resizer__icon--rotate" aria-hidden="true"></i><div class="resizer__label">768px</div></option>
						<option value="1024"><i class="icon icon-112-tablet icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1024px</div></option>
						<option value="1280"><i class="icon icon-113-laptop icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1280px</div></option>
						<option value="1440"><i class="icon icon-113-laptop icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1440px</div></option>
					</datalist>
                </div>
            </div>
        </div>
    </div>
</section>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Rules</h2>

  <h3>Breakpoints</h3>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/grids/grid-breakpoints@2x.jpg">
        <span class="fig-caption">Breakpoints</span>
      </div>
  </div>

  <h3>Device coverage</h3>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/grids/grid-devices2@2x.jpg">
        <span class="fig-caption">Device coverage</span>
      </div>
  </div>

  <h3>Layout options</h3>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/grids/grid-1440-columns@2x.jpg">
        <span class="fig-caption">1440 — 480px column usage combinations</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/grids/grid-480-columns@2x.jpg">
        <span class="fig-caption"><480px column usage combinations</span>
      </div>
  </div>

  <h3>Baseline grid</h3>

  <p>Our baseline dictates the horizontal positioning of typography across all screens within Swisscom services. No matter the screen width, margins or column width, the baseline grid is always set to 8px. This ensures a consistent treatment of type placement and line spacing across all products at all sizes.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/grids/grid-baseline@2x.jpg">
        <span class="fig-caption">Baseline grid</span>
      </div>
  </div>

  <p>All typography, when using the defined sizes, will naturally align to the baseline grid. Graphic elements should aim to align to the baseline where possible but this isn’t mandatory.</p>

  <h3>Axis alignment</h3>

  <p>The concept of the Swisscom axis within SDX is derived from the Swisscom master brand, and the Life Form itself. Use the axis plotted on any grid column to create interesting and asymmetric layouts.</p>

  <div class="row">
    <div class="col-xs-6 col-lg-3">
      <img class="img-responsive" src="./theme-build/img/design/grids/grid-axis-alignment@2x.jpg" />
        <span class="fig-caption">The axis alignment stems from the central axis of the Swisscom Life Form</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Axis in application</h3>

  <div class="row">
      <div class="col-xs-12 col-lg-6">
        <img class="img-responsive" src="./theme-build/img/design/grids/grid-axis-article@2x.jpg">
        <span class="fig-caption">Vertical aligment in an article</span>
      </div>
      <div class="col-xs-12 col-lg-6">
        <img class="img-responsive" src="./theme-build/img/design/grids/grid-axis-article@2x.jpg">
        <span class="fig-caption">Vertical aligment in an article</span>
      </div>
  </div>

  <p>For mobile breakpoints, the left edge of page content aligns to the central axis in the Life Form and is always the outside margin of the underlying grid.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/grids/grid-align-small-screen@2x.jpg">
      <span class="fig-caption">Vertical alignment on smaller screens</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>The SDX library includes a responsive, mobile first 12 column grid system. It includes predefined classes for easy layout options and is based on Bootstrap's Grid component.</p>

<p>The grid is using a flexbox based system by default.</p>

<h2>Introduction</h2>

<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>

<ul class="list">
  <li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding. Use rows to create horizontal groups of columns.</li>
  <li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
  <li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. Sass mixins can also be used for more semantic layouts.</li>
  <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on .rows.</li>
  <li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li>
  <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
  <li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li>
  <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any <code>.col-md-*</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-*</code> class is not present.</li>
</ul>

<p>Look to the examples for applying these principles to your code: <a href="/samples/grid.html">samples/grid</a>.</p>

<h2>Media queries</h2>

<p>We use the following media queries in our Sass files to create the key breakpoints in our grid system.</p>

<table>
  <thead>
    <tr>
      <th>Breakpoint</th>
      <th>Minimal container-width</th>
      <th>Maximal container-width</th>
      <th>Grid Column class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ultra Large</td>
      <td>1440px</td>
      <td>-</td>
      <td><code>col-ul-*</code></td>
    </tr>
    <tr>
      <td>Extra Large</td>
      <td>1280px</td>
      <td>1439px</td>
      <td><code>col-xl-*</code></td>
    </tr>
    <tr>
      <td>Large</td>
      <td>1024px</td>
      <td>1279px</td>
      <td><code>col-lg-*</code></td>
    </tr>
    <tr>
      <td>Medium</td>
      <td>768px</td>
      <td>1023px</td>
      <td><code>col-md-*</code></td>
    </tr>
    <tr>
      <td>Small</td>
      <td>480px</td>
      <td>767px</td>
      <td><code>col-sm-*</code></td>
    </tr>
    <tr>
      <td>Extra Small</td>
      <td>0px</td>
      <td>479px</td>
      <td><code>col-xs-*</code></td>
    </tr>
  </tbody>
</table>

<p class="margin-top-3">A sample for testing the various breakpoints is available at <a href="/samples/grid.html">samples/grid</a>.</p>

<h2>Sample Stacked-to-horizontal</h2>
<p>Using a set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>

```htmlmixed
<div class="row show-grid">
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
  <div class="col-xs-12 col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
  <div class="col-xs-12 col-md-8">.col-md-8</div>
  <div class="col-xs-12 col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
  <div class="col-xs-12 col-md-4">.col-md-4</div>
  <div class="col-xs-12 col-md-4">.col-md-4</div>
  <div class="col-xs-12 col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
  <div class="col-xs-12 col-md-6">.col-md-6</div>
  <div class="col-xs-12 col-md-6">.col-md-6</div>
</div>
```
<h2>Flexbox grid system</h2>

<style>
  .exampleOutput .row {
    margin-bottom: 15px;
  }

  .exampleOutput .row-special {
    min-height: 80px;
    background-color: #ECF0F1;
  }

  .exampleOutput .row [class^=col-] {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ECF0F1;
    border: 1px solid #95A5A6;
  }
</style>

<p>The flexbox grid system behaves similar to the classic grid system, but with a few notable differences:</p>

<ul class="list">
  <li>Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system.</li>
  <li>Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide.</li>
  <li>Flexbox grid columns have significantly more alignment options available, including vertical alignment.</li>
  <li>Flexbox grid system requires a `.col-{breakpoint}` class for each tier.</li>
</ul>

<h2>Auto-layout columns</h2>

<p>Utilize breakpoint-specific column classes for equal-width columns. Add any number of <code>.col-{breakpoint}</code>s for each breakpoint you need and every column will be the same width.</p>

<h3>Equal-width</h3>

<p>For example, here are two grid layouts that apply to every device and viewport, from xs to ul.</p>

```htmlmixed
<div class="row">
  <div class="col-xs">
    1 of 2
  </div>
  <div class="col-xs">
    1 of 2
  </div>
</div>
<div class="row">
  <div class="col-xs">
    1 of 3
  </div>
  <div class="col-xs">
    1 of 3
  </div>
  <div class="col-xs">
    1 of 3
  </div>
</div>
```

<h3>Setting one column width</h3>

<p>Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.</p>

```htmlmixed
<div class="row">
  <div class="col-xs">
    1 of 3
  </div>
  <div class="col-xs-6">
    2 of 3 (wider)
  </div>
  <div class="col-xs">
    3 of 3
  </div>
</div>
<div class="row">
  <div class="col-xs">
    1 of 3
  </div>
  <div class="col-xs-5">
    2 of 3 (wider)
  </div>
  <div class="col-xs">
    3 of 3
  </div>
</div>
```

<h3>Variable width content</h3>

<p>Using the <code>col-{breakpoint}-auto</code> classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with "horizontal alignment" classes, is very useful for centering layouts with uneven column sizes as viewport width changes.</p>

```htmlmixed
<div class="row flex-items-md-center">
  <div class="col-xs col-lg-2">
    1 of 3
  </div>
  <div class="col-xs-12 col-md-auto">
    Variable width content
  </div>
  <div class="col-xs col-lg-2">
    3 of 3
  </div>
</div>
<div class="row">
  <div class="col-xs">
    1 of 3
  </div>
  <div class="col-xs-12 col-md-auto">
    Variable width content
  </div>
  <div class="col-xs col-lg-2">
    3 of 3
  </div>
</div>
```

<h2>Responsive classes</h2>

<p>The SDX grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small (xs), small (sm), medium (md), large (lg), extra large (xl) or ultra large (ul) devices however you see fit.</p>

<h3>All breakpoints</h3>

<p>For grids that are the same from the smallest of devices to the largest, use the <code>.col-xs</code> and <code>.col-xs-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code>.col-xs</code>.</p>

<p>The grid requires a class for full-width columns. If you have a <code>.col-sm-6</code> and don’t add <code>.col-xs-12</code>, your <code>xs</code> grid will not render correctly.</p>

```htmlmixed
<div class="row">
  <div class="col-xs">col-xs</div>
  <div class="col-xs">col-xs</div>
  <div class="col-xs">col-xs</div>
  <div class="col-xs">col-xs</div>
</div>
<div class="row">
  <div class="col-xs-8">col-xs-8</div>
  <div class="col-xs-4">col-xs-4</div>
</div>
```

```htmlmixed
<div class="row">
  <div class="col-xs-12 col-md-6">
    1 of 2 (stacked on mobile)
  </div>
  <div class="col-xs-12 col-md-6">
    1 of 2 (stacked on mobile)
  </div>
</div>
```

<h2>Alignment</h2>

<p>Use flexbox alignment utilities to vertically and horizontally align columns.</p>

<h3>Vertical alignment</h3>

```htmlmixed
<div class="row row-special flex-items-xs-top">
  <div class="col-xs">
    One of three columns
  </div>
  <div class="col-xs">
    One of three columns
  </div>
  <div class="col-xs">
    One of three columns
  </div>
</div>
<div class="row row-special flex-items-xs-middle">
  <div class="col-xs">
    One of three columns
  </div>
  <div class="col-xs">
    One of three columns
  </div>
  <div class="col-xs">
    One of three columns
  </div>
</div>
<div class="row row-special flex-items-xs-bottom">
  <div class="col-xs">
    One of three columns
  </div>
  <div class="col-xs">
    One of three columns
  </div>
  <div class="col-xs">
    One of three columns
  </div>
</div>
```

```htmlmixed
<div class="row row-special">
  <div class="col-xs flex-xs-top">
    One of three columns
  </div>
  <div class="col-xs flex-xs-middle">
    One of three columns
  </div>
  <div class="col-xs flex-xs-bottom">
    One of three columns
  </div>
</div>
```

<h3>Horizontal alignment</h3>

```htmlmixed
<div class="row flex-items-xs-left">
  <div class="col-xs-4">
    One of two columns
  </div>
  <div class="col-xs-4">
    One of two columns
  </div>
</div>
<div class="row flex-items-xs-center">
  <div class="col-xs-4">
    One of two columns
  </div>
  <div class="col-xs-4">
    One of two columns
  </div>
</div>
<div class="row flex-items-xs-right">
  <div class="col-xs-4">
    One of two columns
  </div>
  <div class="col-xs-4">
    One of two columns
  </div>
</div>
<div class="row flex-items-xs-around">
  <div class="col-xs-4">
    One of two columns
  </div>
  <div class="col-xs-4">
    One of two columns
  </div>
</div>
<div class="row flex-items-xs-between">
  <div class="col-xs-4">
    One of two columns
  </div>
  <div class="col-xs-4">
    One of two columns
  </div>
</div>
```

<h2>No gutters</h2>

<p>The gutters between columns in our predefined grid classes can be removed with <code>.no-gutters</code>. This removes the negative <code>margins</code> from <code>.row</code> and the horizontal <code>padding</code> from all immediate children columns.</p>

```htmlmixed
<div class="row no-gutters">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
```
<h2>Reordering</h2>

<h3>Flex order</h3>

<p>Use flexbox utilities for controlling the visual order of your content.</p>

```htmlmixed
<div class="row">
  <div class="col-xs flex-xs-unordered">
    First, but unordered
  </div>
  <div class="col-xs flex-xs-last">
    Second, but last
  </div>
  <div class="col-xs flex-xs-first">
    Third, but first
  </div>
</div>
```

<h3>Offsetting columns</h3>

<p>Move columns to the right using <code>offset-md-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.offset-md-4</code> moves <code>.col-md-4</code> over four columns.</p>

```htmlmixed
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
```

<h3>Push and pull</h3>

<p>Easily change the order of our built-in grid columns with <code>.push-md-*</code> and <code>.pull-md-*</code> modifier classes.</p>

```htmlmixed
<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>
```

<!-- -------------------------------------------------- -->

<h2>Sample no margin on Mobile Only</h2>

<p>Using <code>.full-width--mobile-only</code> on any element will render them in full screen mode for mobile devices and tablet devices (the extra small to small range) only, whereas larger screens render normally.</p>

```htmlmixed
<div class="full-width--mobile-only">
  <div class="row show-grid">
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
    <div class="col-xs-12 col-md-1">.col-md-1</div>
  </div>
  <div class="row show-grid">
    <div class="col-xs-12 col-md-8">.col-md-8</div>
    <div class="col-xs-12 col-md-4">.col-md-4</div>
  </div>
  <div class="row show-grid">
    <div class="col-xs-12 col-md-4">.col-md-4</div>
    <div class="col-xs-12 col-md-4">.col-md-4</div>
    <div class="col-xs-12 col-md-4">.col-md-4</div>
  </div>
</div>

```
*/
@media (min-width: 0) {
  .flex-xs-first {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }
  .flex-xs-last {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .flex-xs-unordered {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .flex-items-xs-top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .flex-items-xs-middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .flex-items-xs-bottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .flex-xs-top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }
  .flex-xs-middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .flex-xs-bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .flex-items-xs-left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .flex-items-xs-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .flex-items-xs-right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .flex-items-xs-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .flex-items-xs-between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media (min-width: 480px) {
  .flex-sm-first {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }
  .flex-sm-last {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .flex-sm-unordered {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .flex-items-sm-top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .flex-items-sm-middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .flex-items-sm-bottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .flex-sm-top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }
  .flex-sm-middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .flex-sm-bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .flex-items-sm-left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .flex-items-sm-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .flex-items-sm-right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .flex-items-sm-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .flex-items-sm-between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .flex-md-first {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }
  .flex-md-last {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .flex-md-unordered {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .flex-items-md-top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .flex-items-md-middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .flex-items-md-bottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .flex-md-top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }
  .flex-md-middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .flex-md-bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .flex-items-md-left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .flex-items-md-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .flex-items-md-right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .flex-items-md-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .flex-items-md-between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .flex-lg-first {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }
  .flex-lg-last {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .flex-lg-unordered {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .flex-items-lg-top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .flex-items-lg-middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .flex-items-lg-bottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .flex-lg-top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }
  .flex-lg-middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .flex-lg-bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .flex-items-lg-left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .flex-items-lg-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .flex-items-lg-right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .flex-items-lg-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .flex-items-lg-between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media (min-width: 1280px) {
  .flex-xl-first {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }
  .flex-xl-last {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .flex-xl-unordered {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .flex-items-xl-top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .flex-items-xl-middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .flex-items-xl-bottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .flex-xl-top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }
  .flex-xl-middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .flex-xl-bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .flex-items-xl-left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .flex-items-xl-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .flex-items-xl-right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .flex-items-xl-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .flex-items-xl-between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media (min-width: 1440px) {
  .flex-ul-first {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }
  .flex-ul-last {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .flex-ul-unordered {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .flex-items-ul-top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .flex-items-ul-middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .flex-items-ul-bottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .flex-ul-top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }
  .flex-ul-middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .flex-ul-bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .flex-items-ul-left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .flex-items-ul-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .flex-items-ul-right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .flex-items-ul-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .flex-items-ul-between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media (min-width: 0) {
  .container {
    margin-left: calc(24px - 4px);
    margin-right: calc(24px - 4px);
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
  }
}

@media (min-width: 480px) {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 4px;
    padding-right: 4px;
    width: 436px;
  }
}

@media (min-width: 768px) {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
    width: 742px;
  }
}

@media (min-width: 1024px) {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 964px;
  }
}

@media (min-width: 1280px) {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 1224px;
  }
}

@media (min-width: 1440px) {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 1380px;
  }
}

@media (min-width: 0) {
  .container-fluid {
    margin-left: calc(24px - 4px);
    margin-right: calc(24px - 4px);
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
  }
}

.row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media (min-width: 0) {
  .row {
    margin-left: -4px;
    margin-right: -4px;
  }
}

@media (min-width: 480px) {
  .row {
    margin-left: -4px;
    margin-right: -4px;
  }
}

@media (min-width: 768px) {
  .row {
    margin-left: -8px;
    margin-right: -8px;
  }
}

@media (min-width: 1024px) {
  .row {
    margin-left: -12px;
    margin-right: -12px;
  }
}

@media (min-width: 1280px) {
  .row {
    margin-left: -12px;
    margin-right: -12px;
  }
}

@media (min-width: 1440px) {
  .row {
    margin-left: -12px;
    margin-right: -12px;
  }
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

.col,
[class*='col-'] {
  position: relative;
  width: 100%;
  min-height: 1px;
}

@media (min-width: 0) {
  .col,
  [class*='col-'] {
    padding-left: 4px;
    padding-right: 4px;
  }
  .col-xs {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-xs-auto {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-xs-1 {
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-xs-2 {
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-xs-3 {
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xs-4 {
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-xs-5 {
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-xs-6 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xs-7 {
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-xs-8 {
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-xs-9 {
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xs-10 {
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-xs-11 {
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-xs-12 {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .pull-xs-0 {
    right: auto;
  }
  .pull-xs-1 {
    right: 8.33333%;
  }
  .pull-xs-2 {
    right: 16.66667%;
  }
  .pull-xs-3 {
    right: 25%;
  }
  .pull-xs-4 {
    right: 33.33333%;
  }
  .pull-xs-5 {
    right: 41.66667%;
  }
  .pull-xs-6 {
    right: 50%;
  }
  .pull-xs-7 {
    right: 58.33333%;
  }
  .pull-xs-8 {
    right: 66.66667%;
  }
  .pull-xs-9 {
    right: 75%;
  }
  .pull-xs-10 {
    right: 83.33333%;
  }
  .pull-xs-11 {
    right: 91.66667%;
  }
  .pull-xs-12 {
    right: 100%;
  }
  .push-xs-0 {
    left: auto;
  }
  .push-xs-1 {
    left: 8.33333%;
  }
  .push-xs-2 {
    left: 16.66667%;
  }
  .push-xs-3 {
    left: 25%;
  }
  .push-xs-4 {
    left: 33.33333%;
  }
  .push-xs-5 {
    left: 41.66667%;
  }
  .push-xs-6 {
    left: 50%;
  }
  .push-xs-7 {
    left: 58.33333%;
  }
  .push-xs-8 {
    left: 66.66667%;
  }
  .push-xs-9 {
    left: 75%;
  }
  .push-xs-10 {
    left: 83.33333%;
  }
  .push-xs-11 {
    left: 91.66667%;
  }
  .push-xs-12 {
    left: 100%;
  }
  .offset-xs-1 {
    margin-left: 8.33333%;
  }
  .offset-xs-2 {
    margin-left: 16.66667%;
  }
  .offset-xs-3 {
    margin-left: 25%;
  }
  .offset-xs-4 {
    margin-left: 33.33333%;
  }
  .offset-xs-5 {
    margin-left: 41.66667%;
  }
  .offset-xs-6 {
    margin-left: 50%;
  }
  .offset-xs-7 {
    margin-left: 58.33333%;
  }
  .offset-xs-8 {
    margin-left: 66.66667%;
  }
  .offset-xs-9 {
    margin-left: 75%;
  }
  .offset-xs-10 {
    margin-left: 83.33333%;
  }
  .offset-xs-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 480px) {
  .col,
  [class*='col-'] {
    padding-left: 4px;
    padding-right: 4px;
  }
  .col-sm {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-sm-auto {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-sm-2 {
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-sm-3 {
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-sm-5 {
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-sm-6 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-sm-8 {
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-sm-9 {
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-sm-11 {
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-sm-12 {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .pull-sm-0 {
    right: auto;
  }
  .pull-sm-1 {
    right: 8.33333%;
  }
  .pull-sm-2 {
    right: 16.66667%;
  }
  .pull-sm-3 {
    right: 25%;
  }
  .pull-sm-4 {
    right: 33.33333%;
  }
  .pull-sm-5 {
    right: 41.66667%;
  }
  .pull-sm-6 {
    right: 50%;
  }
  .pull-sm-7 {
    right: 58.33333%;
  }
  .pull-sm-8 {
    right: 66.66667%;
  }
  .pull-sm-9 {
    right: 75%;
  }
  .pull-sm-10 {
    right: 83.33333%;
  }
  .pull-sm-11 {
    right: 91.66667%;
  }
  .pull-sm-12 {
    right: 100%;
  }
  .push-sm-0 {
    left: auto;
  }
  .push-sm-1 {
    left: 8.33333%;
  }
  .push-sm-2 {
    left: 16.66667%;
  }
  .push-sm-3 {
    left: 25%;
  }
  .push-sm-4 {
    left: 33.33333%;
  }
  .push-sm-5 {
    left: 41.66667%;
  }
  .push-sm-6 {
    left: 50%;
  }
  .push-sm-7 {
    left: 58.33333%;
  }
  .push-sm-8 {
    left: 66.66667%;
  }
  .push-sm-9 {
    left: 75%;
  }
  .push-sm-10 {
    left: 83.33333%;
  }
  .push-sm-11 {
    left: 91.66667%;
  }
  .push-sm-12 {
    left: 100%;
  }
  .offset-sm-1 {
    margin-left: 8.33333%;
  }
  .offset-sm-2 {
    margin-left: 16.66667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333%;
  }
  .offset-sm-5 {
    margin-left: 41.66667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333%;
  }
  .offset-sm-8 {
    margin-left: 66.66667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333%;
  }
  .offset-sm-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 768px) {
  .col,
  [class*='col-'] {
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-md-auto {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-md-2 {
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-md-3 {
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-md-5 {
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-md-6 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-md-8 {
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-md-9 {
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-md-11 {
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-md-12 {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .pull-md-0 {
    right: auto;
  }
  .pull-md-1 {
    right: 8.33333%;
  }
  .pull-md-2 {
    right: 16.66667%;
  }
  .pull-md-3 {
    right: 25%;
  }
  .pull-md-4 {
    right: 33.33333%;
  }
  .pull-md-5 {
    right: 41.66667%;
  }
  .pull-md-6 {
    right: 50%;
  }
  .pull-md-7 {
    right: 58.33333%;
  }
  .pull-md-8 {
    right: 66.66667%;
  }
  .pull-md-9 {
    right: 75%;
  }
  .pull-md-10 {
    right: 83.33333%;
  }
  .pull-md-11 {
    right: 91.66667%;
  }
  .pull-md-12 {
    right: 100%;
  }
  .push-md-0 {
    left: auto;
  }
  .push-md-1 {
    left: 8.33333%;
  }
  .push-md-2 {
    left: 16.66667%;
  }
  .push-md-3 {
    left: 25%;
  }
  .push-md-4 {
    left: 33.33333%;
  }
  .push-md-5 {
    left: 41.66667%;
  }
  .push-md-6 {
    left: 50%;
  }
  .push-md-7 {
    left: 58.33333%;
  }
  .push-md-8 {
    left: 66.66667%;
  }
  .push-md-9 {
    left: 75%;
  }
  .push-md-10 {
    left: 83.33333%;
  }
  .push-md-11 {
    left: 91.66667%;
  }
  .push-md-12 {
    left: 100%;
  }
  .offset-md-1 {
    margin-left: 8.33333%;
  }
  .offset-md-2 {
    margin-left: 16.66667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333%;
  }
  .offset-md-5 {
    margin-left: 41.66667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333%;
  }
  .offset-md-8 {
    margin-left: 66.66667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333%;
  }
  .offset-md-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 1024px) {
  .col,
  [class*='col-'] {
    padding-left: 12px;
    padding-right: 12px;
  }
  .col-lg {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-lg-auto {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-lg-2 {
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-lg-3 {
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-lg-5 {
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-lg-6 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-lg-8 {
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-lg-9 {
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-lg-11 {
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-lg-12 {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .pull-lg-0 {
    right: auto;
  }
  .pull-lg-1 {
    right: 8.33333%;
  }
  .pull-lg-2 {
    right: 16.66667%;
  }
  .pull-lg-3 {
    right: 25%;
  }
  .pull-lg-4 {
    right: 33.33333%;
  }
  .pull-lg-5 {
    right: 41.66667%;
  }
  .pull-lg-6 {
    right: 50%;
  }
  .pull-lg-7 {
    right: 58.33333%;
  }
  .pull-lg-8 {
    right: 66.66667%;
  }
  .pull-lg-9 {
    right: 75%;
  }
  .pull-lg-10 {
    right: 83.33333%;
  }
  .pull-lg-11 {
    right: 91.66667%;
  }
  .pull-lg-12 {
    right: 100%;
  }
  .push-lg-0 {
    left: auto;
  }
  .push-lg-1 {
    left: 8.33333%;
  }
  .push-lg-2 {
    left: 16.66667%;
  }
  .push-lg-3 {
    left: 25%;
  }
  .push-lg-4 {
    left: 33.33333%;
  }
  .push-lg-5 {
    left: 41.66667%;
  }
  .push-lg-6 {
    left: 50%;
  }
  .push-lg-7 {
    left: 58.33333%;
  }
  .push-lg-8 {
    left: 66.66667%;
  }
  .push-lg-9 {
    left: 75%;
  }
  .push-lg-10 {
    left: 83.33333%;
  }
  .push-lg-11 {
    left: 91.66667%;
  }
  .push-lg-12 {
    left: 100%;
  }
  .offset-lg-1 {
    margin-left: 8.33333%;
  }
  .offset-lg-2 {
    margin-left: 16.66667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333%;
  }
  .offset-lg-5 {
    margin-left: 41.66667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333%;
  }
  .offset-lg-8 {
    margin-left: 66.66667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333%;
  }
  .offset-lg-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 1280px) {
  .col,
  [class*='col-'] {
    padding-left: 12px;
    padding-right: 12px;
  }
  .col-xl {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-xl-auto {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-xl-2 {
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-xl-3 {
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-xl-5 {
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-xl-6 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-xl-8 {
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-xl-9 {
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-xl-11 {
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-xl-12 {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .pull-xl-0 {
    right: auto;
  }
  .pull-xl-1 {
    right: 8.33333%;
  }
  .pull-xl-2 {
    right: 16.66667%;
  }
  .pull-xl-3 {
    right: 25%;
  }
  .pull-xl-4 {
    right: 33.33333%;
  }
  .pull-xl-5 {
    right: 41.66667%;
  }
  .pull-xl-6 {
    right: 50%;
  }
  .pull-xl-7 {
    right: 58.33333%;
  }
  .pull-xl-8 {
    right: 66.66667%;
  }
  .pull-xl-9 {
    right: 75%;
  }
  .pull-xl-10 {
    right: 83.33333%;
  }
  .pull-xl-11 {
    right: 91.66667%;
  }
  .pull-xl-12 {
    right: 100%;
  }
  .push-xl-0 {
    left: auto;
  }
  .push-xl-1 {
    left: 8.33333%;
  }
  .push-xl-2 {
    left: 16.66667%;
  }
  .push-xl-3 {
    left: 25%;
  }
  .push-xl-4 {
    left: 33.33333%;
  }
  .push-xl-5 {
    left: 41.66667%;
  }
  .push-xl-6 {
    left: 50%;
  }
  .push-xl-7 {
    left: 58.33333%;
  }
  .push-xl-8 {
    left: 66.66667%;
  }
  .push-xl-9 {
    left: 75%;
  }
  .push-xl-10 {
    left: 83.33333%;
  }
  .push-xl-11 {
    left: 91.66667%;
  }
  .push-xl-12 {
    left: 100%;
  }
  .offset-xl-1 {
    margin-left: 8.33333%;
  }
  .offset-xl-2 {
    margin-left: 16.66667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333%;
  }
  .offset-xl-5 {
    margin-left: 41.66667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333%;
  }
  .offset-xl-8 {
    margin-left: 66.66667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333%;
  }
  .offset-xl-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 1440px) {
  .col,
  [class*='col-'] {
    padding-left: 12px;
    padding-right: 12px;
  }
  .col-ul {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-ul-auto {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-ul-1 {
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-ul-2 {
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-ul-3 {
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-ul-4 {
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-ul-5 {
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-ul-6 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-ul-7 {
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-ul-8 {
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-ul-9 {
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-ul-10 {
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-ul-11 {
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-ul-12 {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .pull-ul-0 {
    right: auto;
  }
  .pull-ul-1 {
    right: 8.33333%;
  }
  .pull-ul-2 {
    right: 16.66667%;
  }
  .pull-ul-3 {
    right: 25%;
  }
  .pull-ul-4 {
    right: 33.33333%;
  }
  .pull-ul-5 {
    right: 41.66667%;
  }
  .pull-ul-6 {
    right: 50%;
  }
  .pull-ul-7 {
    right: 58.33333%;
  }
  .pull-ul-8 {
    right: 66.66667%;
  }
  .pull-ul-9 {
    right: 75%;
  }
  .pull-ul-10 {
    right: 83.33333%;
  }
  .pull-ul-11 {
    right: 91.66667%;
  }
  .pull-ul-12 {
    right: 100%;
  }
  .push-ul-0 {
    left: auto;
  }
  .push-ul-1 {
    left: 8.33333%;
  }
  .push-ul-2 {
    left: 16.66667%;
  }
  .push-ul-3 {
    left: 25%;
  }
  .push-ul-4 {
    left: 33.33333%;
  }
  .push-ul-5 {
    left: 41.66667%;
  }
  .push-ul-6 {
    left: 50%;
  }
  .push-ul-7 {
    left: 58.33333%;
  }
  .push-ul-8 {
    left: 66.66667%;
  }
  .push-ul-9 {
    left: 75%;
  }
  .push-ul-10 {
    left: 83.33333%;
  }
  .push-ul-11 {
    left: 91.66667%;
  }
  .push-ul-12 {
    left: 100%;
  }
  .offset-ul-1 {
    margin-left: 8.33333%;
  }
  .offset-ul-2 {
    margin-left: 16.66667%;
  }
  .offset-ul-3 {
    margin-left: 25%;
  }
  .offset-ul-4 {
    margin-left: 33.33333%;
  }
  .offset-ul-5 {
    margin-left: 41.66667%;
  }
  .offset-ul-6 {
    margin-left: 50%;
  }
  .offset-ul-7 {
    margin-left: 58.33333%;
  }
  .offset-ul-8 {
    margin-left: 66.66667%;
  }
  .offset-ul-9 {
    margin-left: 75%;
  }
  .offset-ul-10 {
    margin-left: 83.33333%;
  }
  .offset-ul-11 {
    margin-left: 91.66667%;
  }
}

/*doc
---
title: Loading spinner
name: 02-components-090-loader-spinner-01
category: Components - Loading spinner
---
<p>The loading spinner helps to reassure users that a process is taking place. It should be used when offering a numeric explanation of progress isn’t necessary. <br/>The loading spinner is built around a central axis and is split into two colors. As soon as the loading stroke hits the axis the color changes.</p>

<p>The loader spinner has two base sizes small and large for a variety of different uses.</p>

<div>
  <div>
    <div class="loader-spinner loader-spinner--small"></div>
    <div class="loader-spinner loader-spinner--large"></div>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Sizes</h3>

  <p>The small spinner is used where space is limited, for example on input fields to indicate loading.</p>

  <div>
    <div>
      <div class="loader-spinner loader-spinner--small"></div>
    </div>
  </div>

  <p>The larger loading spinner is used on page loads and larger screen takeovers. This will often be the only element on the page so it needs to be more prominent.</p>

  <div>
    <div>
      <div class="loader-spinner loader-spinner--large"></div>
    </div>
  </div>

  <h2 class="padding-top-4">Rules</h2>

  <h3>Axis</h3>

  <p>The loading spinner is built around an axis and is split into two colors. As soon as the loading stroke hits the axis it changes the color. Please refer to the animation assets for behaviour and movement references.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/loading_spinner/Group-15@2x-13.jpg">
      <span class="fig-caption">Axis</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Inside elements</h3>

  <p>The smaller spinner can be used inside elements, particularly when using AJAX which can take an undetermined amount of time. This ensures the user that an action is in progress.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/loading_spinner/Group-10@2x-16.jpg">
      <span class="fig-caption">Loading spinner inside elements</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h3>Navy to red loading spinner</h3>

```htmlmixed
<div class="loader-spinner loader-spinner--small"></div>
<div class="loader-spinner loader-spinner--large"></div>
```

<h3>Navy to blue loading spinner</h3>

```htmlmixed
<div class="loader-spinner loader-spinner--small loader-spinner--plain"></div>
<div class="loader-spinner loader-spinner--large loader-spinner--plain"></div>
```
*/
.loader-spinner {
  position: relative;
}

.loader-spinner, .loader-spinner--large {
  background-size: 3750px 50px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-navy-large.4f2a86b6.png");
  width: 50px;
  height: 50px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: anim-sheet-navy-large 1.25s steps(75) infinite;
  animation: anim-sheet-navy-large 1.25s steps(75) infinite;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .loader-spinner, .loader-spinner--large {
    background-image: url("../images/loader-spinner-navy-large@2x.1d6a9dbc.png");
  }
}

@-webkit-keyframes anim-sheet-navy-large {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -3750px 0;
  }
}

@keyframes anim-sheet-navy-large {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -3750px 0;
  }
}

.loader-spinner.loader-spinner--plain, .loader-spinner--large.loader-spinner--plain {
  background-size: 3750px 50px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-plain-large.ff5dcf81.png");
  width: 50px;
  height: 50px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: anim-sheet-plain-large 1.25s steps(75) infinite;
  animation: anim-sheet-plain-large 1.25s steps(75) infinite;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .loader-spinner.loader-spinner--plain, .loader-spinner--large.loader-spinner--plain {
    background-image: url("../images/loader-spinner-plain-large@2x.2117f7a4.png");
  }
}

@-webkit-keyframes anim-sheet-plain-large {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -3750px 0;
  }
}

@keyframes anim-sheet-plain-large {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -3750px 0;
  }
}

.loader-spinner--small {
  background-size: 1875px 25px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-navy-small.eda700c8.png");
  width: 25px;
  height: 25px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: anim-sheet-navy-small 1.25s steps(75) infinite;
  animation: anim-sheet-navy-small 1.25s steps(75) infinite;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .loader-spinner--small {
    background-image: url("../images/loader-spinner-navy-small@2x.98e6305a.png");
  }
}

@-webkit-keyframes anim-sheet-navy-small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1875px 0;
  }
}

@keyframes anim-sheet-navy-small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1875px 0;
  }
}

.loader-spinner--small.loader-spinner--plain {
  background-size: 1875px 25px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-plain-small.1fcaf29f.png");
  width: 25px;
  height: 25px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: anim-sheet-plain-small 1.25s steps(75) infinite;
  animation: anim-sheet-plain-small 1.25s steps(75) infinite;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .loader-spinner--small.loader-spinner--plain {
    background-image: url("../images/loader-spinner-plain-small@2x.7672c923.png");
  }
}

@-webkit-keyframes anim-sheet-plain-small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1875px 0;
  }
}

@keyframes anim-sheet-plain-small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1875px 0;
  }
}

.bg--dark .loader-spinner, .bg--dark .loader-spinner--large {
  background-size: 3750px 50px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-dark-large.d45d4149.png");
  width: 50px;
  height: 50px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: anim-sheet-dark-large 1.25s steps(75) infinite;
  animation: anim-sheet-dark-large 1.25s steps(75) infinite;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .bg--dark .loader-spinner, .bg--dark .loader-spinner--large {
    background-image: url("../images/loader-spinner-dark-large@2x.0c212068.png");
  }
}

@-webkit-keyframes anim-sheet-dark-large {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -3750px 0;
  }
}

@keyframes anim-sheet-dark-large {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -3750px 0;
  }
}

.bg--dark .loader-spinner--small {
  background-size: 1875px 25px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-dark-small.4a298c76.png");
  width: 25px;
  height: 25px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: anim-sheet-dark-small 1.25s steps(75) infinite;
  animation: anim-sheet-dark-small 1.25s steps(75) infinite;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .bg--dark .loader-spinner--small {
    background-image: url("../images/loader-spinner-dark-small@2x.e33ff15f.png");
  }
}

@-webkit-keyframes anim-sheet-dark-small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1875px 0;
  }
}

@keyframes anim-sheet-dark-small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1875px 0;
  }
}

.bg {
  color: #333;
}

.bg--light .primary-navy, .bg--gray .primary-navy {
  color: #015;
}

.bg--light .primary-gray, .bg--gray .primary-gray {
  color: #333;
}

.bg--light .secondary, .bg--gray .secondary {
  color: #666;
}

.bg--light {
  background-color: #fff;
  color: #333;
}

.bg--gray {
  background-color: #dde3e7;
  color: #333;
}

.bg--dark {
  background-color: #015;
  color: #fff;
}

/*doc
---
title: Dividers
name: 02-components-060-divider
category: Components - Dividers
---

<p>Dividers help to establish a clear hierarchy. Placing content between dividers helps to create clear groups of related information. Dividers are especially useful in small screen experiences, such as mobile, where there is less opportunity to establish visual hierarchy using type or scale alone.</p>

<p>Light gray divider</p>
<div class="divider divider--light-gray"></div>

<p>Mid gray divider</p>
<div class="divider divider--mid-gray"></div>

<p>Dark gray divider</p>
<div class="divider divider--dark-gray"></div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Grey dividers</h3>

  <p>There are three tiers of contrast on light backgrounds for divider lines and also a dark variant. Pick the most appropriate for your designs.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/divider/Group-9@2x-12.jpg" >
      <span class="fig-caption">Dark gray divider</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/divider/Group-10@2x-14.jpg">
      <span class="fig-caption">White (dark variant)</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Vertical spacing</h3>

  <p>The vertical spacing between dividers should be 32px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/divider/Group-11@2x-13.jpg">
      <span class="fig-caption">Vertical spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Minimum width</h3>

  <p>The divider is always 100% of the text width.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/divider/Group-2@2x-5.jpg">
      <span class="fig-caption">Minimum width</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.</p>

<p>SDX dividers default to "full-bleed", eg (full width).</p>

```htmlmixed
<p>This text is above the divider</p>
<hr/>
<p>This text is below the divider</p>
```

<h4>Light background dividers</h4>

<p>There are three tiers of contrast on light backgrounds for divider lines, pick the most appropriate for your designs.</p>

```htmlmixed
<p>Light gray divider</p>
<div class="divider divider--light-gray"></div>

<p>Mid gray divider</p>
<div class="divider divider--mid-gray"></div>

<p>Dark gray divider</p>
<div class="divider divider--dark-gray"></div>
```

<h4>Dark background dividers</h4>

<p>There is only one contrast option on darker backgrounds</p>

```htmlmixed
<div class="bg bg--dark">
  <p>This text is above the divider</p>
  <div class="divider"></div>
  <p>This text is below the divider</p>
</div>
```
*/
hr,
.divider {
  margin: 32px 0;
  border: 0;
  border-bottom: 1px solid #d6d6d6;
}

hr--light-gray,
.divider--light-gray {
  border-bottom-color: #d6d6d6;
}

hr--mid-gray,
.divider--mid-gray {
  border-bottom-color: #adadad;
}

hr--dark-gray,
.divider--dark-gray {
  border-bottom-color: #5c5c5c;
}

hr--white,
.divider--white {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.bg--dark hr,
.bg--dark .divider {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

/*doc
---
title: Text Links
name: 02-components-185-text-links
category: Components - Text Links
---

<a name="intro"></a><h2>Introduction</h2>
<p>Text links are the simplest interactive element. They help to clearly label interactive elements within text, footers and navigation.</p>

<p>This is some description text and a <a href="#">text link</a></p>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Standard</h3>

  <p>In page text links use the Swisscom interaction blue. This helps to differentiate them from standard body text and headings, without the need to use buttons across all CTAs.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/links/Group@2x-1.jpg" >
      <span class="fig-caption">An 18px unvisited link (top) and an 18px clicked/hover state link (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/links/Group-6@2x-1.jpg">
      <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/links/Group-7@2x-4.jpg" >
      <span class="fig-caption">An 16px unvisited link (top) and an 16px clicked/hover state link (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/links/Group-9@2x-5.jpg">
      <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <h3>Link list</h3>

  <p>When you display more than one link it is shown as a link list. The link list has a chevron to the right before each link element.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/lists/Link_Lists.jpg">
      <span class="fig-caption">Example of a link list</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Navigation</h3>

  <p>Navigation text links differ from conventional text links. Their static state is Swisscom Navy. They are positioning and scaled differently from conventional page text links to give them greater page hierarchy.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/links/Group-10@2x-5.jpg" >
      <span class="fig-caption">An 16px unvisited link (top) and an 16px clicked/hover state link (bottom)</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Insertion</h3>

  <p>Insertion spacing is 8px between text and the list element.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/lists/Link_Lists_vermassung.jpg">
      <span class="fig-caption">Space between elements</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/links/Group-11@2x-1.jpg">
        <span class="fig-caption">Typography standard 18px</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/links/Group-13@2x-2.jpg">
        <span class="fig-caption">Typography standard 18px dark variant</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/links/Group-14@2x-1.jpg">
        <span class="fig-caption">Typography standard 16px</span>
      </div>
  </div>
  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/links/Group-15@2x-1.jpg">
        <span class="fig-caption">Typography standard 16px dark variant</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/links/Group-16@2x-3.jpg">
        <span class="fig-caption">Typography navigation</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-6">
        <img class="img-responsive img-responsive-border" src="./theme-build/img/design/lists/Link_Lists_typo.jpg">
        <span class="fig-caption">Typography linked list</span>
      </div>
      <div class="col-xs-12 col-lg-6">
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>


<p>In page text links are supported on both the <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> tag by applying the <code>link</code> class to the element.</p>

```htmlmixed
<p>This is some description text above the text link</p>
<a href="#">Text link</a>
<a class="link" href="#">Text link</a>
<button class="link" href="#">Text link</button>
```

<p>Text links can be used in text paragraphs.</p>

```htmlmixed
<p>This is a <a class="link" href="#">link</a> in a inline text paragraph.</p>
<p class="text-b2">This is a <a class="link" href="#">link</a> in a inline text paragraph.</p>
<p class="text-sm">This is a <a class="link" href="#">link</a> in a inline text paragraph.</p>
```

<p>The link component automatically adjusts it's styling if it's used in conjunction with the dark background.</p>

```htmlmixed
<div class="bg bg--dark">
  <p>This is some description text above the text link</p>
  <a class="link" href="#">Text link</a>
  <button class="link" href="#">Text link</button>
</div>
```

<p>Force white link on any dark backgrounds.</p>

```htmlmixed
<div class="bg" style="background: gray;">
  <a class="link link--white" href="javascript:void(0);">Text link</a>
</div>
```
*/
a,
a.link,
button.link {
  position: relative;
  transition: border-bottom 200ms cubic-bezier(0.4, 0, 0.6, 1), color 200ms cubic-bezier(0.4, 0, 0.6, 1);
  outline: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: #1781e3;
}

a:hover, a:focus,
a.link:hover,
a.link:focus,
button.link:hover,
button.link:focus {
  border-bottom: 1px solid #0851da;
  color: #0851da;
}

a + a,
a + a.link,
a + button.link,
a.link + a,
a.link + a.link,
a.link + button.link,
button.link + a,
button.link + a.link,
button.link + button.link {
  margin-left: 24px;
}

a--white, a--white:hover, a--white:focus,
a.link--white,
a.link--white:hover,
a.link--white:focus,
button.link--white,
button.link--white:hover,
button.link--white:focus {
  color: #fff;
  border-color: #fff;
}

p a + a,
p a + a.link,
p a + button.link,
p a.link + a,
p a.link + a.link,
p a.link + button.link,
p button.link + a,
p button.link + a.link,
p button.link + button.link {
  margin-left: 0;
}

.link--dark,
.bg--dark a,
.bg--dark a.link,
.bg--dark button.link {
  border-bottom: 1px solid #fff;
  color: #fff;
}

.link--dark:hover, .link--dark:focus,
.bg--dark a:hover,
.bg--dark button.link:hover,
.bg--dark a:focus,
.bg--dark button.link:focus {
  border-bottom: 1px solid #fff;
  color: #fff;
}

/*doc
---
title: Buttons
name: 02-components-030-button-01-buttons
category: Components - Buttons
---

<p>Buttons are used as calls to action in page, they contain text and icons that help explain the buttons functionality. They’re more visually dominant than text links and help to highlight and clarify elements that are interactive.</p>

<div class="padding-bottom-4 button-group button-group--responsive">
   <button class="button button--primary"> Primary </button>
   <button class="button button--confirm">Confirm</button>
    <button class="button button__icon button--secondary">
      <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
      Order Now
  </button>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Primary Button</h3>

  <p>Primary buttons are used in the majority of cases. The interaction blue signifies that the buttons are clickable</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-8@2x-2.jpg">
      <span class="fig-caption">Light variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-9@2x-4.jpg">
      <span class="fig-caption">Dark Variant</span>
    </div>
  </div>

  <h3>Secondary button</h3>

  <p>Secondary buttons are used in conjunction with primary buttons to indicate that the button is of lower priority.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-10@2x-4.jpg">
      <span class="fig-caption">Light Variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-11@2x-6.jpg">
      <span class="fig-caption">Dark Variant</span>
    </div>
  </div>

  <h3>Confirmation button</h3>

  <p>Confirmation buttons are used for the final step in a process to indicate that an action is final and significant. For example, an ‘Order’ button at the end of a checkout process or the upload button for a file.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-17@2x-2.jpg">
      <span class="fig-caption">Light Variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-25@2x-3.jpg">
      <span class="fig-caption">Dark Variant</span>
    </div>
  </div>

  <h3>Icon button</h3>

  <p>Icons can be used in buttons to help give their funcationality more clarity at a glance.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-26@2x-2.jpg">
      <span class="fig-caption">Light Variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-27@2x-3.jpg">
      <span class="fig-caption">Dark Variant</span>
    </div>
  </div>

  <h3>Image backgrounds</h3>

  <p>Buttons can be used over imagery. Always ensure high contrast between the imagery and the buttons by using the appropriate light or dark button variation.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/buttons/Bitmap-1@2x.jpg">
      <span class="fig-caption">Light Variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/buttons/Bitmap@2x-1.jpg">
      <span class="fig-caption">Dark Variant</span>
    </div>
  </div>

  <h2>Rules</h2>

  <p>Buttons can be used over imagery. Always ensure high contrast between the imagery and the buttons by using the appropriate light or dark button variation.</p>

  <h3>Minimum Size</h3>

  <p>Buttons all have a minimum widths regardless of the word length, this ensures it all our buttons have a standard size.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/buttons/Group-28@2x-2.jpg">
     <span class="fig-caption">Minimum button width</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Optical centering</h3>

  <p>Buttons with icons should be optically aligned to ensure that the text and icon as a pair are aligned to the centre of the button.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
   <img class="img-responsive"  src="./theme-build/img/design/buttons/Group-29@2x-2.jpg" >
     <span class="fig-caption">Optical alignment with icons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Relationship with other buttons</h3>

  <p>Buttons feature a minimum of 14px padding between each other to help create clear click targets.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
       <img class="img-responsive" src="./theme-build/img/design/buttons/Group-30@2x-2.jpg" >
        <span class="fig-caption">Relationship with other buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Full width spacing</h3>

  <p>Buttons can also be used full width within a container or aligning to the grid. The text remains centrally aligned.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
        <img class="img-responsive" src="./theme-build/img/design/buttons/Group-31@2x-2.jpg" >
        <span class="fig-caption">Full width buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-32@2x.png">
      <span class="fig-caption">Light Variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-33@2x-2.jpg">
        <span class="fig-caption">Dark Variant</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h2>Button usage</h2>

<p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>

```htmlmixed
<div class="button-group button-group--responsive">
  <a class="button button--primary" href="javascript:void(0);" role="button">Link</a>
  <button class="button button--primary">Button</button>
  <input class="button button--primary" type="button" value="Input">
  <input class="button button--primary" type="submit" value="Submit">
</div>
```

<p>If your button is actually a link to another page, please use the <code>&lt;a&gt;</code> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <code>&lt;button&gt;</code> element.</p>

<h3>Dark background</h3>

<p>Primary buttons on dark background.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="button-group button-group--responsive">
    <a class="button button--primary" href="javascript:void(0);" role="button">Link</a>
    <button class="button button--primary">Button</button>
    <input class="button button--primary" type="button" value="Input">
    <input class="button button--primary" type="submit" value="Submit">
  </div>
</div>
```

<h2>Variations</h2>

<p>There are three basic buttons styles: Primary, secondary and confirm. Simply apply the style modifier class for the desired action.</p>

```htmlmixed
<div class="button-group button-group--responsive">
  <!-- Primary button -->
  <button class="button button--primary">Primary</button>
  <button class="button button--primary disabled">Unselectable</button>
</div>
<div class="button-group button-group--responsive">
  <!-- Secondary button -->
  <button class="button button--secondary">Secondary</button>
  <button class="button button--secondary disabled">Unselectable</button>
</div>
<div class="button-group button-group--responsive">
  <!-- Confirm button -->
  <button class="button button--confirm">Confirm</button>
  <button class="button button--confirm disabled">Unselectable</button>
</div>
```

<h3>Dark background</h3>

<p>Button styles on dark background.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="button-group button-group--responsive">
    <!-- Primary button -->
    <button class="button button--primary">Primary</button>
    <button class="button button--primary disabled">Unselectable</button>
  </div>
  <div class="button-group button-group--responsive">
    <!-- Secondary button -->
    <button class="button button--secondary">Secondary</button>
    <button class="button button--secondary disabled">Unselectable</button>
  </div>
  <div class="button-group button-group--responsive">
    <!-- Confirm button -->
    <button class="button button--confirm">Confirm</button>
    <button class="button button--confirm disabled">Unselectable</button>
  </div>
</div>
```

<h3>Responsive Button</h3>

<p>To make a button responsive add the <code>button--responsive</code> modifier.</p>

```htmlmixed
<div class="button-group button-group--responsive">
  <button type="button" class="button button--primary button--responsive">Responsive button</button>
  <button type="button" class="button button--secondary button--responsive">Responsive button</button>
</div>
```

<h3>Button with Icons</h3>

```htmlmixed
<div class="button-group button-group--responsive">
  <button class="button button__icon button--primary">
    <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
    Order
  </button>
  <button class="button button__icon button--secondary">
    <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
    Order Now
  </button>
</div>
```

<h3>Full Width Button</h3>

<p>Full width buttons should only be used in smaller containers. Example: sidebar <br/>
  To make a button use 100% of the container width add the <code>button--full</code> modifier.</p>

```htmlmixed
<div class="button-group button-group--responsive">
  <button type="button" class="button button--primary button--full">Full width button</button>
  <button type="button" class="button button--secondary button--full">Full width button</button>
</div>
```

<h3>Button Group</h3>

<p>Buttons should be placed inside a <code>button-group</code>. Button groups with the <code>button-group--responsive</code> modifier are always right aligned and reversed in order. This makes the first button in the DOM (primary) displayed as the first button on the right on desktops and on the top on mobiles.</p>

<h4>Full Width of button groups</h4>

<p>To make the buttons use the full width of a group, add the modifier <code>button-group--fill</code>.</p>

```htmlmixed
<!-- Full width button group -->
<div class="button-group button-group--fill button-group--responsive">
  <button class="button button--primary" type="submit">Button</button>
  <button class="button button--secondary" type="submit">Button</button>
</div>
```
*/
.button-group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: -8px -6px;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.button-group .button {
  margin: 8px 6px;
}

.button-group--responsive {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.button-group--responsive .button {
  width: 100%;
}

@media (min-width: 480px) {
  .button-group--responsive .button {
    width: auto;
  }
}

.button-group--left {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@media (min-width: 480px) {
  .button-group--fill {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.button-group--fill .button {
  width: 100%;
  min-width: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.button-group + .button-group {
  margin-top: 8px;
}

button,
.button {
  cursor: pointer;
}

.button {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: relative;
  transition: all 70ms cubic-bezier(0.4, 0, 0.6, 1);
  margin: 0;
  outline: none;
  border: 0;
  border-bottom-style: none;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  padding: 12px 24px;
  min-width: 160px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 0;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.button:active {
  -webkit-transform: scale(0.98);
  transform: scale(0.98);
}

.button.disabled, .button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.button, .button--primary {
  border: 0;
  border-bottom-style: none;
  border-color: #1781e3;
  background-color: #1781e3;
  color: #fff;
}

.button:hover, .button:focus, .button:active, .button--primary:hover, .button--primary:focus, .button--primary:active {
  border: 0;
  border-bottom-style: none;
  border-color: #0851da;
  background-color: #0851da;
  color: #fff;
}

.button.disabled, .button:disabled, .button--primary.disabled, .button--primary:disabled {
  border-color: rgba(23, 129, 227, 0.4);
  background-color: rgba(23, 129, 227, 0.4);
  color: rgba(255, 255, 255, 0.6);
}

.button--secondary {
  border: 0;
  border-bottom-style: none;
  border-color: #cfd5d9;
  background-color: #cfd5d9;
  color: #333;
}

.button--secondary:hover, .button--secondary:focus, .button--secondary:active {
  border: 0;
  border-bottom-style: none;
  border-color: #b1b9be;
  background-color: #b1b9be;
  color: #333;
}

.button--secondary.disabled, .button--secondary:disabled {
  border-color: rgba(207, 213, 217, 0.4);
  background-color: rgba(207, 213, 217, 0.4);
  color: rgba(51, 51, 51, 0.4);
}

.button--confirm {
  border: 0;
  border-bottom-style: none;
  border-color: #25b252;
  background-color: #25b252;
  color: #fff;
}

.button--confirm:hover, .button--confirm:focus, .button--confirm:active {
  border: 0;
  border-bottom-style: none;
  border-color: #008236;
  background-color: #008236;
  color: #fff;
}

.button--confirm.disabled, .button--confirm:disabled {
  border-color: rgba(37, 178, 82, 0.4);
  background-color: rgba(37, 178, 82, 0.4);
  color: rgba(255, 255, 255, 0.6);
}

.button__icon {
  padding: 12px 24px 12px 16px;
}

.button .icon {
  margin-right: 7px;
  font-size: 18px;
}

.button--thin,
.bg--dark .button {
  padding: 11px 23px;
}

.button--thin, .button--thin.button--primary,
.bg--dark .button,
.bg--dark .button--primary.button {
  border: 1px solid #1781e3;
  background-color: transparent;
  color: #fff;
}

.button--thin:hover, .button--thin:focus, .button--thin:active, .button--thin.button--primary:hover, .button--thin.button--primary:focus, .button--thin.button--primary:active,
.bg--dark .button:hover,
.bg--dark .button:focus,
.bg--dark .button:active,
.bg--dark .button--primary.button:hover,
.bg--dark .button--primary.button:focus,
.bg--dark .button--primary.button:active {
  border-color: #0851da;
  background-color: transparent;
  color: #fff;
}

.button--thin.disabled, .button--thin:disabled, .button--thin.button--primary.disabled, .button--thin.button--primary:disabled,
.bg--dark .disabled.button,
.bg--dark .button:disabled,
.bg--dark .button--primary.disabled.button,
.bg--dark .button--primary.button:disabled {
  border-color: rgba(23, 129, 227, 0.4);
  background-color: transparent;
  color: rgba(255, 255, 255, 0.4);
}

.button--thin.button--secondary,
.bg--dark .button--secondary.button {
  border: 1px solid #cfd5d9;
  background-color: transparent;
  color: #fff;
}

.button--thin.button--secondary:hover, .button--thin.button--secondary:focus, .button--thin.button--secondary:active,
.bg--dark .button--secondary.button:hover,
.bg--dark .button--secondary.button:focus,
.bg--dark .button--secondary.button:active {
  border-color: #b1b9be;
  background-color: transparent;
  color: #fff;
}

.button--thin.button--secondary.disabled, .button--thin.button--secondary:disabled,
.bg--dark .button--secondary.disabled.button,
.bg--dark .button--secondary.button:disabled {
  border-color: rgba(207, 213, 217, 0.4);
  background-color: transparent;
  color: rgba(255, 255, 255, 0.4);
}

.button--thin.button--confirm,
.bg--dark .button--confirm.button {
  border: 1px solid #25b252;
  background-color: transparent;
  color: #fff;
}

.button--thin.button--confirm:hover, .button--thin.button--confirm:focus, .button--thin.button--confirm:active,
.bg--dark .button--confirm.button:hover,
.bg--dark .button--confirm.button:focus,
.bg--dark .button--confirm.button:active {
  border-color: #008236;
  background-color: transparent;
  color: #fff;
}

.button--thin.button--confirm.disabled, .button--thin.button--confirm:disabled,
.bg--dark .button--confirm.disabled.button,
.bg--dark .button--confirm.button:disabled {
  border-color: rgba(37, 178, 82, 0.4);
  background-color: transparent;
  color: rgba(255, 255, 255, 0.4);
}

.button-group--responsive .button--full,
.button--full,
input.button--full[type='submit'],
input.button--full[type='reset'],
input.button--full[type='button'] {
  display: block;
  width: 100%;
}

.button-group--responsive .button--full:active,
.button--full:active,
input.button--full:active[type='submit'],
input.button--full:active[type='reset'],
input.button--full:active[type='button'] {
  -webkit-transform: scale(0.9925, 0.98);
  transform: scale(0.9925, 0.98);
}

.button--responsive,
input.button--responsive[type='submit'],
input.button--responsive[type='reset'],
input.button--responsive[type='button'] {
  width: 100%;
}

@media (min-width: 480px) {
  .button--responsive,
  input.button--responsive[type='submit'],
  input.button--responsive[type='reset'],
  input.button--responsive[type='button'] {
    width: auto;
  }
}

fieldset {
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}

legend {
  display: block;
  border: 0;
  padding: 0;
  width: 100%;
  line-height: inherit;
}

input[type="search"] {
  box-sizing: border-box;
}

input[type='file'] {
  display: block;
}

input[type='radio'],
input[type='checkbox'] {
  padding: 0;
  box-sizing: border-box;
}

label,
.label {
  display: inline-block;
  margin-bottom: 4px;
  cursor: text;
  max-width: 100%;
  color: #666;
  font-size: 14px;
}

.bg--dark label,
.bg--dark .label {
  color: #fff;
}

/*doc
---
title: Input fields
name: 02-components-075-form-01-inputfields
category: Components - Input fields
---

<p>Input fields allow users to enter data. They have a standardized height and corner radius treatment, but are flexible in width. Input fields are based on the grid.</p>

<p>If any validation is needed, you can display this in addition.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
    <form>
      <div class="input-field">
        <input type="text" id="user-name-1" placeholder="User Name">
        <label for="user-name-1">User Name</label>
      </div>
      <div class="input-field input-field--multiline" data-init="auto">
        <textarea id="multiline-0" data-min-rows="5" data-max-rows="10"></textarea>
        <label for="multiline-0">Description</label>
      </div>
    </form>
  </div>
  <div class="col-xs-12 col-lg-6">
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <p>There are fixed and floating labels. Standard version are input fields with fixed labels.</p>

  <h3>Fixed labels</h3>

  <p>In this case the labels are displayed as fixed text above the input field.</p>

  <h4>States</h4>

  <p>Input fields have different states to guide users when interacting with them. The main advantage with this input field variant is that additional descriptions for conventions (e.g. telephone number) can be given.</p>
  <p>There can be validations on input fields: A green tick appears when the content is validated. E.g. if the system has to validate the users` input of the “@” within an email address.</p>
  <p>An error message occurs if the user input is invalid or breaks input rules, such as special characters and passwords (which should be introduced to the user to avoid errors in advance.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_1.jpg">
      <span class="fig-caption"></span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_2.jpg">
      <span class="fig-caption"></span>
    </div>
  </div>

  <h3>Floating labels</h3>

  <p>In this case labels are initially positioned inside the input field. These variants are best used for very short forms like logins or a newsletter subscription which do not need any description in addition to the label.</p>

  <h4>States</h4>

  <p>When the input field is activated, the label is transitioned above the input field. This position remains after the field has been completed.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/floating_1.jpg">
      <span class="fig-caption"></span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/floating_2.jpg">
      <span class="fig-caption"></span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Spacing</h3>

  <p>There is an 8px margin between the label and the input field itself. Between each input field there is a 24px margin. Inside the input field the margin is 16px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_dimensions.jpg">
      <span class="fig-caption">Spacing fixed labels</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/floating_dimensions.jpg">
      <span class="fig-caption">Spacing floating labels</span>
    </div>
  </div>

  <p>In this case labels are initially positioned inside the input field.</p>

  <h4>States</h4>

  <p>When the input field is activated, the label transitions upwards, above the input field. It remains in this position after the field has been completed. This helps to reaffirm the purpose of the input field throughout the input process</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/floating_1.jpg">
      <span class="fig-caption">states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/floating_2.jpg">
      <span class="fig-caption"></span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Spacing</h3>

  <p>There is a 8px margin between an input field label and the input field. There is a 24px margin between each input field.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_dimensions.jpg">
      <span class="fig-caption">Spacing fixed labels</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/floating_dimensions.jpg">
      <span class="fig-caption">Spacing floating labels</span>
    </div>
  </div>

  <h3>Autocompletion</h3>

  <p>An input field can have autocompletion to help the user to find faster predefined results.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_autocomplete.jpg">
      <span class="fig-caption">Autocompletion</span>
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_typo.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

```htmlmixed
<form>
  <div class="input-field" data-init="auto">
    <input type="text" id="user-name-3">
    <label for="user-name-3">User Name</label>
  </div>
  <div class="input-field" data-init="auto">
    <input type="email" id="email-3" placeholder="example@maildomain.com">
    <label for="email-3">Email</label>
  </div>
  <div class="input-field " data-init="auto">
    <input type="password" id="password-3">
    <label for="password-3">Password</label>
  </div>
  <div class="input-field flatpickr" data-init="auto">
    <input type="date" id="date-3" data-input>
    <label for="date-3">Date</label>
    <a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field input-field--multiline" data-init="auto">
    <textarea id="multiline-3" data-min-rows="3" data-max-rows="10"></textarea>
    <label for="multiline-3">Multiline text</label>
  </div>
</form>
```

<h3>Fixed Height</h3>

<p>Adding the class <code>input-field--fixed</code> to the <code>input-field</code> element will prevent the input field to animate the formfield, when it has focus.</p>

```htmlmixed
<form>
  <div class="input-field input-field--fixed" data-init="auto">
    <input type="text" id="user-name-2">
    <label for="user-name-2">User Name</label>
  </div>
  <div class="input-field input-field--fixed" data-init="auto">
    <input type="email" id="email-2">
    <label for="email-2">Email</label>
  </div>
  <div class="input-field input-field--fixed" data-init="auto">
    <input type="password" id="password-2">
    <label for="password-2">Password</label>
  </div>
  <div class="input-field input-field--fixed flatpickr" data-init="auto">
    <input type="date" id="date-2" data-input>
    <label for="date-2">Date</label>
    <a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field input-field--multiline input-field--fixed" data-init="auto">
    <textarea id="multiline-2" data-min-rows="3" data-max-rows="10"></textarea>
    <label for="multiline-2">Multiline text</label>
  </div>
</form>
```

<h3>Read-only and disabled input fields.</h3>

<p>If you want to block the user from changing an input field add the class <code>readonly</code> or <code>disabled</code> to the input element.</p>

<p>The difference between the <code>readonly</code> and <code>disabled</code> attribute is that in <code>readonly</code> the user can tab to the element and copy the text from the input field.</p>

```htmlmixed
<form>
  <div class="input-field" data-init="auto">
    <input type="text" id="readonly" placeholder="Read-only" value="This text is read-only" readonly>
    <label for="readonly">Read-only</label>
  </div>
  <div class="input-field" data-init="auto">
    <input type="text" id="disabled" placeholder="Disabled" value="This text is disabled" disabled>
    <label for="disabled">Disabled</label>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "21.10.2015", "enable": ["21.10.2015"]}'>
    <input type="date" id="readonly-date" placeholder="Read-only Date" data-input readonly>
    <label for="readonly-date">Read-only Date</label>
    <a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "21.10.2015"}'>
    <input type="date" id="disabled-date" placeholder="Disabled Date" data-input disabled>
    <label for="disabled-date">Disabled Date</label>
    <a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-options='{"static": "true"}' data-init="auto">
    <input type="date" id="date-static" data-input>
    <label for="date-static">Static container</label>
    <a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field input-field--multiline" data-init="auto">
    <textarea id="multiline-readonly-1" placeholder="Read-only (Multiline)" readonly data-max-rows="3">This text is read-only and it is more than one line long. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
    <label for="multiline-readonly-1">Read-only (Multiline)</label>
  </div>
  <div class="input-field input-field--multiline" data-init="auto">
    <textarea id="multiline-disabled-1" placeholder="Multiline Disabled" disabled data-max-rows="10">This text is read-only and it is more than one line long. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
    <label for="multiline-disabled-1">Disabled (Multiline)</label>
  </div>
</form>
```

<h3>Validate input fields</h3>

<p>Add the class <code>validate</code> to the input element to validate the field. The <code>validate</code> class leverages HTML5 validation and will add a <code>valid</code> and <code>invalid</code> class accordingly. If you don't want the valid and invalid states, just remove the validate class from your inputs.</p>

<p>If you have custom validations on a field add the <code>valid</code> or <code>invalid</code> class to the input element depending on your validation result.</p>

<p>Mark fields with asterix (\*) to denote them as required, make sure to explain the meaning of the asterix in a legend below the form in the current customer language.</p>

```htmlmixed
<form>
  <div class="input-field" data-init="auto">
    <input type="text" id="user-name-valid" value="Valid input" class="validate valid">
    <label for="user-name-valid">User Name *</label>
    <i class="icon icon-011-check-mark" aria-hidden="true"></i>
  </div>
  <div class="input-field" data-init="auto">
    <input type="text" id="user-name-invalid" value="Invalid input (inline)" class="validate invalid invalid--inline">
    <label for="user-name-invalid">User Name *</label>
    <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
  </div>
  <div class="input-field" data-init="auto">
    <input type="email" id="email-invalid" value="Invalid input with message" class="validate invalid">
    <label for="email-invalid">Email</label>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Error Message
    </div>
  </div>
  <div class="input-field" data-init="auto">
    <input type="text" id="user-name-invalid-2" value="Invalid input (inline) with message" class="validate invalid invalid--inline">
    <label for="user-name-invalid-2">User Name</label>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Error Message
    </div>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "01.01.2018"}'>
    <input type="text" id="valid-date" data-input class="validate valid">
    <label for="valid-date">Date</label>
    <i class="icon icon-011-check-mark" aria-hidden="true"></i>
    <a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "01.01.3018"}'>
    <input type="text" id="invalid-date" data-input class="validate invalid invalid--inline">
    <label for="invalid-date">Invalid Date</label>
    <a data-toggle><i class="icon icon-009-calendar"></i></a>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Error Message
    </div>
  </div>

  <span class="input-field__legend-mandatory">* Mandatory field</span>
</form>
```

<h3>Autocomplete input fields</h3>

<p>An input field with autocomplete-dropdown support. JavaScript documentation can be found under <a href="/doc/classes/_src_form_autocomplete_.autocomplete.html">/doc</a>.</p>

<p><b>Note:</b> To test this field enter a programming language, or just type <i>script</i>.</p>

```htmlmixed
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var config = {
      minChars: 2,
      source: function(term, suggest) {
        var matches = [];
        var choices = ["ActionScript", "AppleScript", "Asp", "Assembly", "BASIC", "Batch", "C",
          "C++", "CSS", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell",
          "HTML", "Java", "JavaScript", "Lisp", "Perl", "PHP", "PowerShell", "Python", "Ruby",
          "Scala", "Scheme", "SQL", "TeX", "XML", "AnyScript & OtherScript"];

        term = term.toLowerCase();

        for (var i = 0; i < choices.length; i++) {
          if (choices[i].toLowerCase().indexOf(term) >= 0) {
            matches.push(choices[i]);
          }
        }

        suggest(matches, term);
      }
    };

    var element = document.getElementById("autocomplete-1");
    var input = new sdx.InputField(element.querySelector("input"));
    var autocomplete = new sdx.Autocomplete(element, config);

    autocomplete.addEventListener("change", function(e) {
      console.info("Value: " + autocomplete.value);
    });
  });
</script>

<form onsubmit="return false;">
  <div class="input-field input-field--autocomplete" id="autocomplete-1">
    <input type="text" id="langs" value="">
    <label for="langs">Programming languages</label>
    <div class="autocomplete js-autocomplete">
    </div>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Error Message
    </div>
  </div>
</form>
```

<h3>Date input fields</h3>

<p>JSON configuration options can be passed to the flatpickr date picker library by setting the <code>data-options</code> attribute. To enable/disable dates by <code>function</code> or <code>Date</code>, you need to pass the options to the <code>InputField</code> using the JavaScript API. More examples: <a href="https://flatpickr.js.org/examples/" target="_blank">https://flatpickr.js.org/examples/</a></p>

```htmlmixed
<form>
  <div class="input-field flatpickr" data-init="auto" data-options='{"locale": "de"}'>
    <input type="date" id="date-de" placeholder="German (default)" data-input>
    <label for="date-de">Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"locale": "fr"}'>
    <input type="date" id="date-fr" placeholder="French" data-input>
    <label for="date-fr">Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"locale": "it"}'>
    <input type="date" id="date-it" placeholder="Italian" data-input>
    <label for="date-it">Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"locale": "en"}'>
    <input type="date" id="date-en" placeholder="English" data-input>
    <label for="date-en">Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "21.10.2015"}'>
    <input type="date" id="date-default-date" placeholder="Default date" data-input>
    <label for="date-default-date">Default Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"minDate": "today"}'>
    <input type="date" id="date-min-date" placeholder="Not in the past" data-input>
    <label for="date-min-date">Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"maxDate": "today"}'>
    <input type="date" id="date-max-date" placeholder="Not in the future" data-input>
    <label for="date-max-date">Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field flatpickr">
    <input type="date" id="date-no-weekends" placeholder="Weekdays only" data-input>
    <label for="date-no-weekends">Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var options = {
        disable: [
          function(date) {
            return date.getDay() > 5 || date.getDay() < 1;
          }
        ]
      }
      var element = document.getElementById("date-no-weekends");
      var field = new sdx.InputField(element, options);
    });
  </script>
  <div class="input-field flatpickr">
    <input type="date" id="date-next-week" placeholder="In the next 7 days" data-input>
    <label for="date-next-week">Date</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var options = {
        minDate: "today",
        maxDate: new Date().fp_incr(7)
      }
      var element = document.getElementById("date-next-week");
      var field = new sdx.InputField(element, options);
    });
  </script>
  <div class="input-field flatpickr" data-init="auto" data-options='{"mode": "multiple"}'>
    <input type="date" id="date-multiple" placeholder="Multiple dates" data-input>
    <label for="date-multiple">Dates</label><a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
</form>
```

<h3>Example of a form in a responsive grid</h3>

```htmlmixed
<form>
  <div class="row">
    <div class="col-md-12">
      <div class="input-field" data-init="auto">
        <input type="text" id="name">
        <label for="name">Name</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="input-field" data-init="auto">
        <input type="text" id="forename">
        <label for="forename">Forename</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-9">
      <div class="input-field" data-init="auto">
        <input type="text" id="street">
        <label for="street">Street</label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="input-field" data-init="auto">
        <input type="text" id="number">
        <label for="number">No.</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="input-field flatpickr" data-init="auto">
        <input type="date" id="date-4" data-input>
        <label for="date-4">Birthday</label>
        <a data-toggle><i class="icon icon-009-calendar"></i></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="input-field" data-init="auto">
        <input type="number" id="zip">
        <label for="zip">ZIP</label>
      </div>
    </div>
    <div class="col-md-9">
      <div class="input-field" data-init="auto">
        <input type="text" id="city">
         <label for="city">City</label>
      </div>
    </div>
  </div>
</form>
```
*/
input,
textarea {
  -webkit-border-radius: 0;
}

input::-ms-clear,
textarea::-ms-clear {
  display: none;
}

@-webkit-keyframes onAutoFillStart {
  from {
    /* Empty */
  }
  to {
    /* Empty */
  }
}

@keyframes onAutoFillStart {
  from {
    /* Empty */
  }
  to {
    /* Empty */
  }
}

input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-animation-name: onAutoFillStart;
  animation-name: onAutoFillStart;
  transition: background-color 50000s ease-in-out 0s;
}

.input-field {
  position: relative;
  margin-bottom: 11px;
  padding: 0;
}

.input-field .message {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  z-index: 101;
  transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
}

.input-field .icon {
  margin-right: 4px;
}

.input-field:first-child input:not([type]),
.input-field:first-child input[type='text'],
.input-field:first-child input[type='password'],
.input-field:first-child input[type='email'],
.input-field:first-child input[type='url'],
.input-field:first-child input[type='time'],
.input-field:first-child input[type='date'],
.input-field:first-child input[type='datetime'],
.input-field:first-child input[type='datetime-local'],
.input-field:first-child input[type='tel'],
.input-field:first-child input[type='number'],
.input-field:first-child input[type='search'],
.input-field:first-child textarea {
  margin-top: 0;
}

.input-field input,
.input-field textarea {
  -webkit-border-radius: 0;
}

.input-field input::-ms-clear,
.input-field textarea::-ms-clear {
  display: none;
}

.input-field input:not([type]),
.input-field input[type='text'],
.input-field input[type='password'],
.input-field input[type='email'],
.input-field input[type='url'],
.input-field input[type='time'],
.input-field input[type='date'],
.input-field input[type='datetime'],
.input-field input[type='datetime-local'],
.input-field input[type='tel'],
.input-field input[type='number'],
.input-field input[type='search'],
.input-field textarea {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  position: relative;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  margin-top: 13px;
  outline: none;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background-color: #fff;
  padding: 0 16px;
  width: 100%;
  height: 48px;
  color: #333;
  font-weight: 300;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.input-field input:not([type]) + label,
.input-field input[type='text'] + label,
.input-field input[type='password'] + label,
.input-field input[type='email'] + label,
.input-field input[type='url'] + label,
.input-field input[type='time'] + label,
.input-field input[type='date'] + label,
.input-field input[type='datetime'] + label,
.input-field input[type='datetime-local'] + label,
.input-field input[type='tel'] + label,
.input-field input[type='number'] + label,
.input-field input[type='search'] + label,
.input-field textarea + label {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(24px);
  transform: translateY(24px);
  transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  cursor: text;
  color: #666;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-field input:not([type]) ~ .icon,
.input-field input[type='text'] ~ .icon,
.input-field input[type='password'] ~ .icon,
.input-field input[type='email'] ~ .icon,
.input-field input[type='url'] ~ .icon,
.input-field input[type='time'] ~ .icon,
.input-field input[type='date'] ~ .icon,
.input-field input[type='datetime'] ~ .icon,
.input-field input[type='datetime-local'] ~ .icon,
.input-field input[type='tel'] ~ .icon,
.input-field input[type='number'] ~ .icon,
.input-field input[type='search'] ~ .icon,
.input-field textarea ~ .icon {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 101;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  color: #25b252;
  font-size: 22px;
}

.input-field input:not([type])::-webkit-input-placeholder,
.input-field input[type='text']::-webkit-input-placeholder,
.input-field input[type='password']::-webkit-input-placeholder,
.input-field input[type='email']::-webkit-input-placeholder,
.input-field input[type='url']::-webkit-input-placeholder,
.input-field input[type='time']::-webkit-input-placeholder,
.input-field input[type='date']::-webkit-input-placeholder,
.input-field input[type='datetime']::-webkit-input-placeholder,
.input-field input[type='datetime-local']::-webkit-input-placeholder,
.input-field input[type='tel']::-webkit-input-placeholder,
.input-field input[type='number']::-webkit-input-placeholder,
.input-field input[type='search']::-webkit-input-placeholder,
.input-field textarea::-webkit-input-placeholder {
  transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  color: #bbb;
}

.input-field input:not([type])::-moz-placeholder,
.input-field input[type='text']::-moz-placeholder,
.input-field input[type='password']::-moz-placeholder,
.input-field input[type='email']::-moz-placeholder,
.input-field input[type='url']::-moz-placeholder,
.input-field input[type='time']::-moz-placeholder,
.input-field input[type='date']::-moz-placeholder,
.input-field input[type='datetime']::-moz-placeholder,
.input-field input[type='datetime-local']::-moz-placeholder,
.input-field input[type='tel']::-moz-placeholder,
.input-field input[type='number']::-moz-placeholder,
.input-field input[type='search']::-moz-placeholder,
.input-field textarea::-moz-placeholder {
  transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  color: #bbb;
}

.input-field input:not([type])::-ms-input-placeholder,
.input-field input[type='text']::-ms-input-placeholder,
.input-field input[type='password']::-ms-input-placeholder,
.input-field input[type='email']::-ms-input-placeholder,
.input-field input[type='url']::-ms-input-placeholder,
.input-field input[type='time']::-ms-input-placeholder,
.input-field input[type='date']::-ms-input-placeholder,
.input-field input[type='datetime']::-ms-input-placeholder,
.input-field input[type='datetime-local']::-ms-input-placeholder,
.input-field input[type='tel']::-ms-input-placeholder,
.input-field input[type='number']::-ms-input-placeholder,
.input-field input[type='search']::-ms-input-placeholder,
.input-field textarea::-ms-input-placeholder {
  transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  color: #bbb;
}

.input-field input:not([type])::placeholder,
.input-field input[type='text']::placeholder,
.input-field input[type='password']::placeholder,
.input-field input[type='email']::placeholder,
.input-field input[type='url']::placeholder,
.input-field input[type='time']::placeholder,
.input-field input[type='date']::placeholder,
.input-field input[type='datetime']::placeholder,
.input-field input[type='datetime-local']::placeholder,
.input-field input[type='tel']::placeholder,
.input-field input[type='number']::placeholder,
.input-field input[type='search']::placeholder,
.input-field textarea::placeholder {
  transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  color: #bbb;
}

.input-field input:not([type]):-ms-input-placeholder,
.input-field input[type='text']:-ms-input-placeholder,
.input-field input[type='password']:-ms-input-placeholder,
.input-field input[type='email']:-ms-input-placeholder,
.input-field input[type='url']:-ms-input-placeholder,
.input-field input[type='time']:-ms-input-placeholder,
.input-field input[type='date']:-ms-input-placeholder,
.input-field input[type='datetime']:-ms-input-placeholder,
.input-field input[type='datetime-local']:-ms-input-placeholder,
.input-field input[type='tel']:-ms-input-placeholder,
.input-field input[type='number']:-ms-input-placeholder,
.input-field input[type='search']:-ms-input-placeholder,
.input-field textarea:-ms-input-placeholder {
  color: #bbb !important;
}

.input-field input:not([type]):focus:not([readonly]),
.input-field input[type='text']:focus:not([readonly]),
.input-field input[type='password']:focus:not([readonly]),
.input-field input[type='email']:focus:not([readonly]),
.input-field input[type='url']:focus:not([readonly]),
.input-field input[type='time']:focus:not([readonly]),
.input-field input[type='date']:focus:not([readonly]),
.input-field input[type='datetime']:focus:not([readonly]),
.input-field input[type='datetime-local']:focus:not([readonly]),
.input-field input[type='tel']:focus:not([readonly]),
.input-field input[type='number']:focus:not([readonly]),
.input-field input[type='search']:focus:not([readonly]),
.input-field textarea:focus:not([readonly]) {
  margin-top: 29px;
  border-color: #1781e3;
  color: #333;
}

.input-field input:not([type]):focus:not([readonly]) + label,
.input-field input[type='text']:focus:not([readonly]) + label,
.input-field input[type='password']:focus:not([readonly]) + label,
.input-field input[type='email']:focus:not([readonly]) + label,
.input-field input[type='url']:focus:not([readonly]) + label,
.input-field input[type='time']:focus:not([readonly]) + label,
.input-field input[type='date']:focus:not([readonly]) + label,
.input-field input[type='datetime']:focus:not([readonly]) + label,
.input-field input[type='datetime-local']:focus:not([readonly]) + label,
.input-field input[type='tel']:focus:not([readonly]) + label,
.input-field input[type='number']:focus:not([readonly]) + label,
.input-field input[type='search']:focus:not([readonly]) + label,
.input-field textarea:focus:not([readonly]) + label {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.input-field input:not([type]):focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='text']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='password']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='email']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='url']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='time']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='date']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='datetime']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='datetime-local']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='tel']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='number']:focus:not([readonly])::-webkit-input-placeholder,
.input-field input[type='search']:focus:not([readonly])::-webkit-input-placeholder,
.input-field textarea:focus:not([readonly])::-webkit-input-placeholder {
  opacity: 0;
}

.input-field input:not([type]):focus:not([readonly])::-moz-placeholder,
.input-field input[type='text']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='password']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='email']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='url']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='time']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='date']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='datetime']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='datetime-local']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='tel']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='number']:focus:not([readonly])::-moz-placeholder,
.input-field input[type='search']:focus:not([readonly])::-moz-placeholder,
.input-field textarea:focus:not([readonly])::-moz-placeholder {
  opacity: 0;
}

.input-field input:not([type]):focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='text']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='password']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='email']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='url']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='time']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='date']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='datetime']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='datetime-local']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='tel']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='number']:focus:not([readonly])::-ms-input-placeholder,
.input-field input[type='search']:focus:not([readonly])::-ms-input-placeholder,
.input-field textarea:focus:not([readonly])::-ms-input-placeholder {
  opacity: 0;
}

.input-field input:not([type]):focus:not([readonly])::placeholder,
.input-field input[type='text']:focus:not([readonly])::placeholder,
.input-field input[type='password']:focus:not([readonly])::placeholder,
.input-field input[type='email']:focus:not([readonly])::placeholder,
.input-field input[type='url']:focus:not([readonly])::placeholder,
.input-field input[type='time']:focus:not([readonly])::placeholder,
.input-field input[type='date']:focus:not([readonly])::placeholder,
.input-field input[type='datetime']:focus:not([readonly])::placeholder,
.input-field input[type='datetime-local']:focus:not([readonly])::placeholder,
.input-field input[type='tel']:focus:not([readonly])::placeholder,
.input-field input[type='number']:focus:not([readonly])::placeholder,
.input-field input[type='search']:focus:not([readonly])::placeholder,
.input-field textarea:focus:not([readonly])::placeholder {
  opacity: 0;
}

.input-field input:not([type]):disabled, .input-field input:not([type])[readonly],
.input-field input[type='text']:disabled,
.input-field input[type='text'][readonly],
.input-field input[type='password']:disabled,
.input-field input[type='password'][readonly],
.input-field input[type='email']:disabled,
.input-field input[type='email'][readonly],
.input-field input[type='url']:disabled,
.input-field input[type='url'][readonly],
.input-field input[type='time']:disabled,
.input-field input[type='time'][readonly],
.input-field input[type='date']:disabled,
.input-field input[type='date'][readonly],
.input-field input[type='datetime']:disabled,
.input-field input[type='datetime'][readonly],
.input-field input[type='datetime-local']:disabled,
.input-field input[type='datetime-local'][readonly],
.input-field input[type='tel']:disabled,
.input-field input[type='tel'][readonly],
.input-field input[type='number']:disabled,
.input-field input[type='number'][readonly],
.input-field input[type='search']:disabled,
.input-field input[type='search'][readonly],
.input-field textarea:disabled,
.input-field textarea[readonly] {
  opacity: 1;
  border-color: #dde3e7;
  background-color: #f8fafb;
  color: #bbb;
}

.input-field input:not([type]):disabled + label, .input-field input:not([type])[readonly] + label,
.input-field input[type='text']:disabled + label,
.input-field input[type='text'][readonly] + label,
.input-field input[type='password']:disabled + label,
.input-field input[type='password'][readonly] + label,
.input-field input[type='email']:disabled + label,
.input-field input[type='email'][readonly] + label,
.input-field input[type='url']:disabled + label,
.input-field input[type='url'][readonly] + label,
.input-field input[type='time']:disabled + label,
.input-field input[type='time'][readonly] + label,
.input-field input[type='date']:disabled + label,
.input-field input[type='date'][readonly] + label,
.input-field input[type='datetime']:disabled + label,
.input-field input[type='datetime'][readonly] + label,
.input-field input[type='datetime-local']:disabled + label,
.input-field input[type='datetime-local'][readonly] + label,
.input-field input[type='tel']:disabled + label,
.input-field input[type='tel'][readonly] + label,
.input-field input[type='number']:disabled + label,
.input-field input[type='number'][readonly] + label,
.input-field input[type='search']:disabled + label,
.input-field input[type='search'][readonly] + label,
.input-field textarea:disabled + label,
.input-field textarea[readonly] + label {
  color: #666;
}

.input-field input:not([type]):disabled,
.input-field input[type='text']:disabled,
.input-field input[type='password']:disabled,
.input-field input[type='email']:disabled,
.input-field input[type='url']:disabled,
.input-field input[type='time']:disabled,
.input-field input[type='date']:disabled,
.input-field input[type='datetime']:disabled,
.input-field input[type='datetime-local']:disabled,
.input-field input[type='tel']:disabled,
.input-field input[type='number']:disabled,
.input-field input[type='search']:disabled,
.input-field textarea:disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input-field input:not([type]).valid, .input-field input:not([type]):valid, .input-field input:not([type]).invalid, .input-field input:not([type]):invalid,
.input-field input[type='text'].valid,
.input-field input[type='text']:valid,
.input-field input[type='text'].invalid,
.input-field input[type='text']:invalid,
.input-field input[type='password'].valid,
.input-field input[type='password']:valid,
.input-field input[type='password'].invalid,
.input-field input[type='password']:invalid,
.input-field input[type='email'].valid,
.input-field input[type='email']:valid,
.input-field input[type='email'].invalid,
.input-field input[type='email']:invalid,
.input-field input[type='url'].valid,
.input-field input[type='url']:valid,
.input-field input[type='url'].invalid,
.input-field input[type='url']:invalid,
.input-field input[type='time'].valid,
.input-field input[type='time']:valid,
.input-field input[type='time'].invalid,
.input-field input[type='time']:invalid,
.input-field input[type='date'].valid,
.input-field input[type='date']:valid,
.input-field input[type='date'].invalid,
.input-field input[type='date']:invalid,
.input-field input[type='datetime'].valid,
.input-field input[type='datetime']:valid,
.input-field input[type='datetime'].invalid,
.input-field input[type='datetime']:invalid,
.input-field input[type='datetime-local'].valid,
.input-field input[type='datetime-local']:valid,
.input-field input[type='datetime-local'].invalid,
.input-field input[type='datetime-local']:invalid,
.input-field input[type='tel'].valid,
.input-field input[type='tel']:valid,
.input-field input[type='tel'].invalid,
.input-field input[type='tel']:invalid,
.input-field input[type='number'].valid,
.input-field input[type='number']:valid,
.input-field input[type='number'].invalid,
.input-field input[type='number']:invalid,
.input-field input[type='search'].valid,
.input-field input[type='search']:valid,
.input-field input[type='search'].invalid,
.input-field input[type='search']:invalid,
.input-field textarea.valid,
.input-field textarea:valid,
.input-field textarea.invalid,
.input-field textarea:invalid {
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center right 16px;
  background-size: 22px 22px;
}

.input-field input:not([type]).valid ~ .icon, .input-field input:not([type]):valid ~ .icon, .input-field input:not([type]).invalid ~ .icon, .input-field input:not([type]):invalid ~ .icon,
.input-field input[type='text'].valid ~ .icon,
.input-field input[type='text']:valid ~ .icon,
.input-field input[type='text'].invalid ~ .icon,
.input-field input[type='text']:invalid ~ .icon,
.input-field input[type='password'].valid ~ .icon,
.input-field input[type='password']:valid ~ .icon,
.input-field input[type='password'].invalid ~ .icon,
.input-field input[type='password']:invalid ~ .icon,
.input-field input[type='email'].valid ~ .icon,
.input-field input[type='email']:valid ~ .icon,
.input-field input[type='email'].invalid ~ .icon,
.input-field input[type='email']:invalid ~ .icon,
.input-field input[type='url'].valid ~ .icon,
.input-field input[type='url']:valid ~ .icon,
.input-field input[type='url'].invalid ~ .icon,
.input-field input[type='url']:invalid ~ .icon,
.input-field input[type='time'].valid ~ .icon,
.input-field input[type='time']:valid ~ .icon,
.input-field input[type='time'].invalid ~ .icon,
.input-field input[type='time']:invalid ~ .icon,
.input-field input[type='date'].valid ~ .icon,
.input-field input[type='date']:valid ~ .icon,
.input-field input[type='date'].invalid ~ .icon,
.input-field input[type='date']:invalid ~ .icon,
.input-field input[type='datetime'].valid ~ .icon,
.input-field input[type='datetime']:valid ~ .icon,
.input-field input[type='datetime'].invalid ~ .icon,
.input-field input[type='datetime']:invalid ~ .icon,
.input-field input[type='datetime-local'].valid ~ .icon,
.input-field input[type='datetime-local']:valid ~ .icon,
.input-field input[type='datetime-local'].invalid ~ .icon,
.input-field input[type='datetime-local']:invalid ~ .icon,
.input-field input[type='tel'].valid ~ .icon,
.input-field input[type='tel']:valid ~ .icon,
.input-field input[type='tel'].invalid ~ .icon,
.input-field input[type='tel']:invalid ~ .icon,
.input-field input[type='number'].valid ~ .icon,
.input-field input[type='number']:valid ~ .icon,
.input-field input[type='number'].invalid ~ .icon,
.input-field input[type='number']:invalid ~ .icon,
.input-field input[type='search'].valid ~ .icon,
.input-field input[type='search']:valid ~ .icon,
.input-field input[type='search'].invalid ~ .icon,
.input-field input[type='search']:invalid ~ .icon,
.input-field textarea.valid ~ .icon,
.input-field textarea:valid ~ .icon,
.input-field textarea.invalid ~ .icon,
.input-field textarea:invalid ~ .icon {
  display: none;
}

.input-field input:not([type]).valid,
.input-field input[type='text'].valid,
.input-field input[type='password'].valid,
.input-field input[type='email'].valid,
.input-field input[type='url'].valid,
.input-field input[type='time'].valid,
.input-field input[type='date'].valid,
.input-field input[type='datetime'].valid,
.input-field input[type='datetime-local'].valid,
.input-field input[type='tel'].valid,
.input-field input[type='number'].valid,
.input-field input[type='search'].valid,
.input-field textarea.valid {
  border-color: #666;
  padding-right: 52px;
  color: #333;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2030'%20width='30'%20height='30'%3E%3Crect%20fill='none'%20width='30'%20height='30'/%3E%3Cpath%20fill='%2325b252'%20d='M14,24c0.38,0,0.7-0.21,0.87-0.51l9-16c0.27-0.48,0.1-1.09-0.38-1.36c-0.48-0.27-1.09-0.1-1.36,0.38l-8.35,14.85l-6.07-6.07%20c-0.39-0.39-1.02-0.39-1.41,0s-0.39,1.02,0,1.41l7,7C13.48,23.9,13.74,24,14,24z'/%3E%3C/svg%3E");
}

.input-field input:not([type]).invalid,
.input-field input[type='text'].invalid,
.input-field input[type='password'].invalid,
.input-field input[type='email'].invalid,
.input-field input[type='url'].invalid,
.input-field input[type='time'].invalid,
.input-field input[type='date'].invalid,
.input-field input[type='datetime'].invalid,
.input-field input[type='datetime-local'].invalid,
.input-field input[type='tel'].invalid,
.input-field input[type='number'].invalid,
.input-field input[type='search'].invalid,
.input-field textarea.invalid {
  border-color: #be0000;
  color: #d12;
}

.input-field input:not([type]).invalid--inline,
.input-field input[type='text'].invalid--inline,
.input-field input[type='password'].invalid--inline,
.input-field input[type='email'].invalid--inline,
.input-field input[type='url'].invalid--inline,
.input-field input[type='time'].invalid--inline,
.input-field input[type='date'].invalid--inline,
.input-field input[type='datetime'].invalid--inline,
.input-field input[type='datetime-local'].invalid--inline,
.input-field input[type='tel'].invalid--inline,
.input-field input[type='number'].invalid--inline,
.input-field input[type='search'].invalid--inline,
.input-field textarea.invalid--inline {
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2030'%20width='30'%20height='30'%3E%3Crect%20fill='none'%20width='30'%20height='30'/%3E%3Cpath%20fill='%23DD1122'%20d='M15,2C7.83,2,2,7.83,2,15s5.83,13,13,13s13-5.83,13-13S22.17,2,15,2z%20M15,26C8.93,26,4,21.07,4,15S8.93,4,15,4%20s11,4.93,11,11S21.07,26,15,26z%20M17,21c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-1.1,0.9-2,2-2S17,19.9,17,21z%20M13,7h4v4l-1,6h-2l-1-6V7z'/%3E%3C/svg%3E");
}

.input-field input:not([type]).invalid ~ .message,
.input-field input[type='text'].invalid ~ .message,
.input-field input[type='password'].invalid ~ .message,
.input-field input[type='email'].invalid ~ .message,
.input-field input[type='url'].invalid ~ .message,
.input-field input[type='time'].invalid ~ .message,
.input-field input[type='date'].invalid ~ .message,
.input-field input[type='datetime'].invalid ~ .message,
.input-field input[type='datetime-local'].invalid ~ .message,
.input-field input[type='tel'].invalid ~ .message,
.input-field input[type='number'].invalid ~ .message,
.input-field input[type='search'].invalid ~ .message,
.input-field textarea.invalid ~ .message {
  max-height: 50px;
  margin-top: 6px;
  opacity: 1;
  color: #d12;
}

.input-field input:not([type]).validate + label,
.input-field input[type='text'].validate + label,
.input-field input[type='password'].validate + label,
.input-field input[type='email'].validate + label,
.input-field input[type='url'].validate + label,
.input-field input[type='time'].validate + label,
.input-field input[type='date'].validate + label,
.input-field input[type='datetime'].validate + label,
.input-field input[type='datetime-local'].validate + label,
.input-field input[type='tel'].validate + label,
.input-field input[type='number'].validate + label,
.input-field input[type='search'].validate + label,
.input-field textarea.validate + label {
  width: 100%;
  pointer-events: none;
}

.input-field input:not([type]).is-fixed,
.input-field input[type='text'].is-fixed,
.input-field input[type='password'].is-fixed,
.input-field input[type='email'].is-fixed,
.input-field input[type='url'].is-fixed,
.input-field input[type='time'].is-fixed,
.input-field input[type='date'].is-fixed,
.input-field input[type='datetime'].is-fixed,
.input-field input[type='datetime-local'].is-fixed,
.input-field input[type='tel'].is-fixed,
.input-field input[type='number'].is-fixed,
.input-field input[type='search'].is-fixed,
.input-field textarea.is-fixed {
  margin-top: 29px;
}

.input-field input:not([type]).is-fixed + label,
.input-field input[type='text'].is-fixed + label,
.input-field input[type='password'].is-fixed + label,
.input-field input[type='email'].is-fixed + label,
.input-field input[type='url'].is-fixed + label,
.input-field input[type='time'].is-fixed + label,
.input-field input[type='date'].is-fixed + label,
.input-field input[type='datetime'].is-fixed + label,
.input-field input[type='datetime-local'].is-fixed + label,
.input-field input[type='tel'].is-fixed + label,
.input-field input[type='number'].is-fixed + label,
.input-field input[type='search'].is-fixed + label,
.input-field textarea.is-fixed + label {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.input-field--fixed input:not([type]),
.input-field--fixed input[type='text'],
.input-field--fixed input[type='password'],
.input-field--fixed input[type='email'],
.input-field--fixed input[type='url'],
.input-field--fixed input[type='time'],
.input-field--fixed input[type='date'],
.input-field--fixed input[type='datetime'],
.input-field--fixed input[type='datetime-local'],
.input-field--fixed input[type='tel'],
.input-field--fixed input[type='number'],
.input-field--fixed input[type='search'],
.input-field--fixed textarea {
  margin-top: 29px;
}

.input-field input:not([type]):first-child, .input-field input:not([type]),
.input-field input[type='text']:first-child,
.input-field input[type='text'],
.input-field input[type='password']:first-child,
.input-field input[type='password'],
.input-field input[type='email']:first-child,
.input-field input[type='email'],
.input-field input[type='url']:first-child,
.input-field input[type='url'],
.input-field input[type='time']:first-child,
.input-field input[type='time'],
.input-field input[type='date']:first-child,
.input-field input[type='date'],
.input-field input[type='datetime']:first-child,
.input-field input[type='datetime'],
.input-field input[type='datetime-local']:first-child,
.input-field input[type='datetime-local'],
.input-field input[type='tel']:first-child,
.input-field input[type='tel'],
.input-field input[type='number']:first-child,
.input-field input[type='number'],
.input-field input[type='search']:first-child,
.input-field input[type='search'],
.input-field textarea:first-child,
.input-field textarea {
  margin-top: 29px;
}

.input-field input:not([type]):first-child + label, .input-field input:not([type]) + label,
.input-field input[type='text']:first-child + label,
.input-field input[type='text'] + label,
.input-field input[type='password']:first-child + label,
.input-field input[type='password'] + label,
.input-field input[type='email']:first-child + label,
.input-field input[type='email'] + label,
.input-field input[type='url']:first-child + label,
.input-field input[type='url'] + label,
.input-field input[type='time']:first-child + label,
.input-field input[type='time'] + label,
.input-field input[type='date']:first-child + label,
.input-field input[type='date'] + label,
.input-field input[type='datetime']:first-child + label,
.input-field input[type='datetime'] + label,
.input-field input[type='datetime-local']:first-child + label,
.input-field input[type='datetime-local'] + label,
.input-field input[type='tel']:first-child + label,
.input-field input[type='tel'] + label,
.input-field input[type='number']:first-child + label,
.input-field input[type='number'] + label,
.input-field input[type='search']:first-child + label,
.input-field input[type='search'] + label,
.input-field textarea:first-child + label,
.input-field textarea + label {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.input-field--autocomplete .autocomplete {
  position: absolute;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: .2;
  width: 100%;
  height: auto;
  margin-top: -1px;
  z-index: 101;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  color: #333;
}

.input-field--autocomplete .autocomplete strong {
  font-weight: 400;
  color: #0083ea;
}

.input-field--autocomplete .autocomplete li.js-hover, .input-field--autocomplete .autocomplete li:hover {
  background: #eef3f6;
}

.input-field--autocomplete .autocomplete li .autocomplete__result {
  margin: 0 22px;
  padding: 12px 0;
}

.input-field--autocomplete .autocomplete li:not(:last-child) .autocomplete__result {
  border-bottom: 1px solid #e4e9ec;
}

.input-field--autocomplete.is-open input:not([type]),
.input-field--autocomplete.is-open input[type='text'],
.input-field--autocomplete.is-open input[type='password'],
.input-field--autocomplete.is-open input[type='email'],
.input-field--autocomplete.is-open input[type='url'],
.input-field--autocomplete.is-open input[type='time'],
.input-field--autocomplete.is-open input[type='date'],
.input-field--autocomplete.is-open input[type='datetime'],
.input-field--autocomplete.is-open input[type='datetime-local'],
.input-field--autocomplete.is-open input[type='tel'],
.input-field--autocomplete.is-open input[type='number'],
.input-field--autocomplete.is-open input[type='search'],
.input-field--autocomplete.is-open textarea {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.input-field--autocomplete.is-open .autocomplete {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  opacity: 1;
  z-index: 999999;
}

.input-field.flatpickr .flatpickr-input + label {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(24px);
  transform: translateY(24px);
  opacity: 1;
}

.input-field.flatpickr .flatpickr-input:focus:not([readonly]) + .flatpickr-input + label,
.input-field.flatpickr.input-field--static-label .flatpickr-input + label {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.input-field.flatpickr .flatpickr-input.valid + i + a[data-toggle],
.input-field.flatpickr .flatpickr-input.valid + label + i + a[data-toggle],
.input-field.flatpickr .flatpickr-input.invalid--inline + a[data-toggle],
.input-field.flatpickr .flatpickr-input.invalid--inline + label + a[data-toggle] {
  display: none;
}

.input-field.flatpickr .flatpickr-input {
  -webkit-appearance: none;
  padding-right: 48px;
}

.input-field.flatpickr .flatpickr-input[readonly] {
  cursor: text;
}

.input-field.flatpickr .flatpickr-input.flatpickr-mobile {
  font-size: 0;
}

.input-field.flatpickr .flatpickr-input.flatpickr-mobile::before {
  content: attr(placeholder);
  color: #bbb;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
}

.input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus,
.input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  margin-top: 29px;
}

.input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus + label,
.input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile + label {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus::before,
.input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile::before {
  content: "";
}

.input-field.flatpickr input ~ a {
  position: static;
}

.input-field.flatpickr input ~ a .icon-009-calendar {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 101;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  color: #666;
  font-size: 30px;
  margin: 0 6px 1px 0;
}

.input-field.flatpickr input:disabled ~ a .icon-009-calendar,
.input-field.flatpickr input[readonly] ~ a .icon-009-calendar {
  color: #bbb;
  pointer-events: none;
}

.input-field.flatpickr .flatpickr-input:focus:not([readonly]) ~ a .icon-009-calendar {
  color: #1781e3;
}

.input-field.flatpickr input[type="date"]::-webkit-datetime-edit-text {
  color: transparent;
}

.input-field.flatpickr input[type="date"]::-webkit-datetime-edit-month-field {
  color: transparent;
}

.input-field.flatpickr input[type="date"]::-webkit-datetime-edit-day-field {
  color: transparent;
}

.input-field.flatpickr input[type="date"]::-webkit-datetime-edit-year-field {
  color: transparent;
}

.input-multiline textarea,
.input-field--multiline textarea {
  width: 100%;
  height: auto;
  padding: 11px 16px;
  resize: none;
  box-sizing: border-box;
}

.input-field__legend-mandatory {
  color: #666;
  font-size: 14px;
}

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}

.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}

.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}

.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.rightMost:after {
  left: auto;
  right: 22px;
}

.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}

.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}

.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}

.flatpickr-calendar:focus {
  outline: 0;
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 28px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0px;
  line-height: 16px;
  height: 28px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}

.flatpickr-months .flatpickr-prev-month.disabled,
.flatpickr-months .flatpickr-next-month.disabled {
  display: none;
}

.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  /*
      /*rtl:begin:ignore*/
  /*
      */
  left: 0;
  /*
      /*rtl:end:ignore*/
  /*
      */
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  /*
      /*rtl:begin:ignore*/
  /*
      */
  right: 0;
  /*
      /*rtl:end:ignore*/
  /*
      */
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}

.numInputWrapper {
  position: relative;
  height: auto;
}

.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}

.numInputWrapper input {
  width: 100%;
}

.numInputWrapper input::-ms-clear {
  display: none;
}

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  box-sizing: border-box;
}

.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}

.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}

.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}

.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}

.numInputWrapper span.arrowDown {
  top: 50%;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}

.numInputWrapper span svg {
  width: inherit;
  height: auto;
}

.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.numInputWrapper:hover span {
  opacity: 1;
}

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 6.16px 0 0 0;
  line-height: 1;
  height: 28px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}

.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px;
}

.flatpickr-days:focus {
  outline: 0;
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}

.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #e6e6e6;
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}

.flatpickr-day.today {
  border-color: #959ea9;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}

.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #569ff7;
}

.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}

.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}

.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}

.flatpickr-day.hidden {
  visibility: hidden;
}

.rangeMode .flatpickr-day {
  margin-top: 1px;
}

.flatpickr-weekwrapper {
  display: inline-block;
  float: left;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #e6e6e6;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}

.flatpickr-innerContainer {
  display: block;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}

.flatpickr-time .numInputWrapper {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}

.flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}

.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}

.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  display: inline-block;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #f3f3f3;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fpFadeOutDown {
  from {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
}

@keyframes fpFadeOutDown {
  from {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
}

@-webkit-keyframes fpFadeOutUp {
  from {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
}

@keyframes fpFadeOutUp {
  from {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
}

@-webkit-keyframes fpFadeInUp {
  from {
    visibility: hidden;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fpFadeInUp {
  from {
    visibility: hidden;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.flatpickr-calendar {
  margin-top: 15px;
  border-radius: 0;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  /* Animation for flatpickr going upwards */
  /* month and year */
  /* weekdays */
  /* day */
}

.flatpickr-calendar::before {
  border: 0;
}

.flatpickr-calendar::after {
  left: 28px;
  margin: -1px -12px;
  border-width: 8px;
}

.flatpickr-calendar.arrowTop::after {
  left: 38px;
  margin-bottom: -5px;
  border-color: #eef3f6 transparent transparent #eef3f6;
  box-shadow: -2px -2px 2px 0 rgba(0, 0, 0, 0.1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: -1;
}

.flatpickr-calendar.arrowTop.rightMost::after {
  left: auto;
}

.flatpickr-calendar.arrowBottom {
  margin-top: -15px;
}

.flatpickr-calendar.inline {
  margin-top: 10px;
}

.flatpickr-calendar.arrowBottom::after {
  border-color: transparent transparent #fff #fff;
  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.flatpickr-calendar.arrowBottom.rightMost::after {
  right: 28px;
}

.flatpickr-calendar.inline::after {
  display: none;
}

.flatpickr-calendar.animate {
  display: inline-block;
  position: absolute;
  z-index: 99999;
  visibility: hidden;
  -webkit-animation: fpFadeOutDown 200ms;
  animation: fpFadeOutDown 200ms;
  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  /* ease-in-quad */
  opacity: 0;
  transition: opacity 200ms;
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  /* ease-in-quad */
}

.flatpickr-calendar.animate.open {
  visibility: visible;
  opacity: 1;
  /* flatpickr lib handles the opacity animation */
  transition: none;
}

.flatpickr-calendar.animate.arrowBottom {
  -webkit-animation-name: fpFadeOutUp;
  animation-name: fpFadeOutUp;
}

.flatpickr-calendar.animate.arrowBottom.open {
  -webkit-animation-name: fpFadeInUp;
  animation-name: fpFadeInUp;
}

.flatpickr-calendar,
.flatpickr-calendar .dayContainer,
.flatpickr-calendar .flatpickr-days {
  width: 392px;
}

.flatpickr-calendar .dayContainer {
  min-width: 392px;
  max-width: 392px;
}

.flatpickr-calendar,
.flatpickr-calendar .flatpickr-day,
.flatpickr-calendar .flatpickr-weekday,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month .cur-year.cur-year,
.flatpickr-calendar .flatpickr-current-month .cur-year.cur-year.cur-year:focus {
  color: #015;
  font-weight: 300;
}

.flatpickr-calendar .flatpickr-month {
  height: 70px;
  background-color: #eef3f6;
}

.flatpickr-calendar .flatpickr-current-month {
  padding-top: 22px;
}

.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month .cur-year.cur-year {
  font-size: 24px;
  letter-spacing: -.35px;
}

.flatpickr-calendar .flatpickr-current-month .cur-month:hover,
.flatpickr-calendar .flatpickr-current-month .cur-year.cur-year:hover {
  background: transparent;
}

.flatpickr-calendar .flatpickr-current-month .cur-year.cur-year {
  /* override SDX styles when using inline */
  z-index: auto;
  margin-top: 0;
  border: 0;
  background-color: transparent;
  padding: 0 0 0 .5ch;
  height: auto;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year.cur-year:focus {
  margin-top: 0;
  /* override SDX style when using inline */
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  width: 8ch;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper .arrowDown {
  display: none;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover {
  background: transparent;
}

.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
  padding: 30px 20px;
}

.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
  width: 16px;
  fill: #1781e3;
  stroke: #1781e3;
}

.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover,
.flatpickr-calendar .flatpickr-prev-month:focus,
.flatpickr-calendar .flatpickr-next-month:focus {
  color: #0851da;
}

.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg,
.flatpickr-calendar .flatpickr-prev-month:focus svg,
.flatpickr-calendar .flatpickr-next-month:focus svg {
  fill: #0851da;
  stroke: #0851da;
}

.flatpickr-calendar .flatpickr-weekdays {
  height: 40px;
  background-color: #eef3f6;
}

.flatpickr-calendar .flatpickr-weekday {
  font-size: 14px;
}

.flatpickr-calendar .flatpickr-day {
  color: #1781e3;
  font-size: 18px;
  font-weight: 600;
  margin: 5px;
  max-width: 46px;
  height: 46px;
  line-height: 45px;
}

.flatpickr-calendar .flatpickr-day.today {
  border-color: #bbb;
  color: #1781e3;
  transition: all 200ms;
}

.flatpickr-calendar .flatpickr-day.today.selected {
  box-shadow: inset 0 0 0 1px #fff;
}

.flatpickr-calendar .flatpickr-day.disabled,
.flatpickr-calendar .flatpickr-day.disabled:hover,
.flatpickr-calendar .flatpickr-day.disabled:focus {
  color: #bbb;
  border-color: transparent;
  font-weight: 300;
}

.flatpickr-calendar .flatpickr-day.prevMonthDay.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay.nextMonthDay {
  transition: all 200ms;
  font-weight: 300;
}

.flatpickr-calendar .flatpickr-day.prevMonthDay.prevMonthDay.selected,
.flatpickr-calendar .flatpickr-day.nextMonthDay.nextMonthDay.selected {
  color: #fff;
}

.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus,
.flatpickr-calendar .flatpickr-day.selected {
  background: transparent;
  border-color: #1781e3;
  transition: all 200ms;
}

.flatpickr-calendar .flatpickr-day.selected {
  color: #fff;
  background: #1781e3;
  transition: all 200ms;
}

.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus {
  background: #0851da;
  border-color: #0851da;
  transition: all 200ms;
}

@media (max-width: 767px) {
  .flatpickr-calendar,
  .flatpickr-calendar .dayContainer,
  .flatpickr-calendar .flatpickr-days {
    width: 280px;
  }
  .flatpickr-calendar .dayContainer {
    min-width: 280px;
    max-width: 280px;
  }
  .flatpickr-calendar .flatpickr-month {
    height: 45px;
  }
  .flatpickr-calendar .flatpickr-current-month {
    padding-top: 18px;
    left: 17.5%;
  }
  .flatpickr-calendar .flatpickr-current-month .cur-month,
  .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year {
    font-size: 18px;
    letter-spacing: -.1px;
  }
  .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 6ch;
  }
  .flatpickr-calendar .flatpickr-prev-month,
  .flatpickr-calendar .flatpickr-next-month {
    padding-top: 22px;
  }
  .flatpickr-calendar .flatpickr-day {
    font-size: 16px;
    max-width: 30px;
    height: 30px;
    line-height: 28px;
  }
}

/*doc
---
title: Radio Buttons
name: 02-components-140-form-30-radiobuttons
category: Components - Radio Buttons
---

<p>Radio buttons are used to ask the user multiple choice questions where they can make a single selection. Because radio buttons list out the options the user has, it provides a clearer overview of their choices than a dropdown menu. Radio buttons are also useful when the text label is long and might be obscured in a dropdown menu. If you are offering more than four options to users, consider using a dropdown menu.</p>

<p>A variation of the Radio Buttons are the <a href="components_-_buttons_(toggle).html">Toggle Buttons</a>.</p>

<form>
  <div class="radio">
    <input type="radio" name="dummy" id="radio1-10" checked>
    <label for="radio1-10">Option 1</label>
  </div>
  <div class="radio">
    <input type="radio" name="dummy" id="radio1-20">
    <label for="radio1-20">Option 2</label>
  </div>
</form>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>States</h3>

  <p>Color and the dot indicate that a radio button is selected, which means that it is active. In addition it has hover effects.</p>

  <p>As radio buttons are a mandatory choice and very often preselected there is normally no need of an error state. Only in rare cases where radiobuttons are not preselected there is a need for an error state.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Group@2x-2.jpg">
      <span class="fig-caption">Normal states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Group@2x-2_error.jpg">
      <span class="fig-caption">Error state</span>
    </div>
  </div>

  <h3>Multiline and supporting line of text</h3>

  <p>Multi-line labels have so much text that they need more than one line. For consistency reasons the same font size is used in all lines.<br />If a description with more detail is needed, a description text with smaller font size is displayed below the label text.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_multi+description.jpg">
      <span class="fig-caption">Multiline of text</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_supporting_text.jpg">
      <span class="fig-caption">Supporting line of text</span>
    </div>
  </div>

  <h3>Radio buttons side by side</h3>

  <p>Radio button can also be displayed next to each other.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_sidebyside.jpg">
      <span class="fig-caption">Radio buttons side by side</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Up to four options on mobile</h3>

  <p>If you are offering more than four options to users, consider using a dropdown menu.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/radiobuttons/Group-10@2x-7.jpg">
      <span class="fig-caption">A drop down menu on mobile</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Spacings</h3>

  <p>The horizontal spacing between the radio buttons itself and the label is 16px. <br /> The vertical spacing between different radio buttons is 24px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Group-12@2x-2.jpg">
      <span class="fig-caption">Spacing between radio buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_sidebyside_dimension.jpg">
      <span class="fig-caption">Spacing between radio buttons beside each other</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_multi+desc_dimension.jpg">
      <span class="fig-caption">Spaces for Multi-line labels</span>
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Group-15@2x-3.jpg">
      <span class="fig-caption">Typography</span>
    </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_multi+desc_typo.jpg">
      <span class="fig-caption">Typography of supporting text</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Use of the radio button element.</p>

```htmlmixed
<form>
  <div class="radio">
    <input type='radio' name='dummy' id='radio1-1'>
    <label for='radio1-1'>
      Option 1<br/>
      MuliLine Option 3/4<br/>
      (CHF 9.00/month)
    </label>
  </div>
  <div class="radio">
    <input type='radio' name='dummy' id='radio1-2'>
    <label for='radio1-2'>Option 2</label>
  </div>
</form>
```

<h3>Disabled States</h3>

```htmlmixed
<form>
  <div class="radio">
    <input type='radio' name='dummy' id='radio2-1' disabled>
    <label for='radio2-1'>Option 1</label>
  </div>
  <div class="radio">
    <input type='radio' name='dummy' id='radio2-2' checked disabled>
    <label for='radio2-2'>Option 2</label>
  </div>
</form>
```

<h3>Vertical distance between radio buttons</h3>

<p>Add the class <code>add-space</code> to the <code>div</code> element to increase the vertical distance between radio buttons.</p>

```htmlmixed
<form>
  <div class="radio">
    <input type='radio' name='dummy' id='radio4-1'>
    <label for='radio4-1'>Option 1</label>
  </div>
  <div class="radio add-space">
    <input type='radio' name='dummy' id='radio4-2'>
    <label for='radio4-2'>Option 2</label>
  </div>
  <div class="radio">
    <input type='radio' name='dummy' id='radio4-3' checked>
    <label for='radio4-3'>Option 3</label>
  </div>
  <div class="radio">
    <input type='radio' name='dummy' id='radio4-4'>
    <label for='radio4-4'>Option 4</label>
  </div>
</form>
```

<h3>Inline radio buttons</h3>

<p>Add the class <code>form-inline</code> to a wrapper <code>div</code> element to set the checkboxes to inline.</p>

```htmlmixed
<form>
  <div class="form-inline">
    <div class="radio">
      <input type='radio' name='dummy' id='radio5-1'>
      <label for='radio5-1'>Option 1</label>
    </div>
    <div class="radio">
      <input type='radio' name='dummy' id='radio5-2'>
      <label for='radio5-2'>Option 2</label>
    </div>
  </div>
</form>
```

<h3>Grouping radio buttons</h3>

<h4>Radio button group</h4>

```htmlmixed
<form>
  <div class="form-group" role="radiogroup">
    <label>Radio group</label>
    <div class="radio">
      <input type='radio' name='dummy' id='radio6-1'>
      <label for='radio6-1'>Option 1</label>
    </div>
    <div class="radio">
      <input type='radio' name='dummy' id='radio6-2'>
      <label for='radio6-2'>Option 2</label>
    </div>
  </div>
</form>
```

<h4>Inline (Horizontal) radio button group</h4>

```htmlmixed
<form>
  <div class="form-group form-inline" role="radiogroup">
    <label>Radio group</label>
    <div class="radio">
      <input type='radio' name='dummy' id='radio7-1'>
      <label for='radio7-1'>Option 1</label>
    </div>
    <div class="radio">
      <input type='radio' name='dummy' id='radio7-2'>
      <label for='radio7-2'>Option 2</label>
    </div>
  </div>
</form>
```

<h3>Validate radio buttons</h3>

```htmlmixed
<form>
  <div class="form-group form-inline validate invalid" role="radiogroup">
    <label>Radio group</label>
    <div class="radio">
      <input type='radio' name='dummy' id='radio8-1'>
      <label for='radio8-1'>Option 1</label>
    </div>
    <div class="radio">
      <input type='radio' name='dummy' id='radio8-2'>
      <label for='radio8-2'>Option 2</label>
    </div>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Error Message
    </div>
  </div>
</form>
```
*/
.radio + .radio {
  margin-top: 14px;
}

.radio.add-space {
  margin-bottom: 24px;
}

.radio p {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 0;
  padding-left: 36px;
  color: #666;
}

.radio [type='radio']:not(:checked),
.radio [type='radio']:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.radio [type='radio'] + label {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
  padding-left: 36px;
  color: #333;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.radio [type='radio'] + label::before, .radio [type='radio'] + label::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  margin-top: 1px;
  border-radius: 50%;
  content: '';
}

.radio [type='radio'] + label::before {
  transition: all 120ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  width: 22px;
  height: 22px;
}

.radio [type='radio'] + label::after {
  top: 6px;
  left: 6px;
  transition: all 120ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  width: 10px;
  height: 10px;
}

.radio [type='radio']:not(:checked) + label::before {
  border: 2px solid #adadad;
}

.radio [type='radio']:not(:checked) + label::after {
  -webkit-transform: scale(0);
  transform: scale(0);
  background-color: #adadad;
}

.radio [type='radio']:hover + label::before {
  border: 2px solid #adadad;
}

.radio [type='radio']:hover + label::after {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  background-color: #adadad;
}

.radio [type='radio']:focus + label::before {
  border: 2px solid #1781e3;
}

.radio [type='radio']:focus + label::after {
  background-color: #1781e3;
}

.radio [type='radio']:checked + label::before {
  border: 2px solid #1781e3;
}

.radio [type='radio']:checked + label::after {
  -webkit-transform: scale(1);
  transform: scale(1);
  background-color: #1781e3;
}

.radio [type='radio']:checked:focus + label::before {
  border: 2px solid #1781e3;
}

.radio [type='radio']:checked:focus + label::after {
  background-color: #1781e3;
}

.radio [type='radio']:checked:hover + label::before {
  border: 2px solid #0851da;
}

.radio [type='radio']:checked:hover + label::after {
  -webkit-transform: scale(1);
  transform: scale(1);
  background-color: #0851da;
}

.radio [type='radio']:disabled + label {
  opacity: .4;
  pointer-events: none;
}

.radio [type='radio']:disabled + label::before {
  border-color: #adadad;
  background-color: transparent;
}

.radio [type='radio']:disabled:hover + label::before {
  border: 2px solid #adadad;
}

.radio [type='radio']:disabled:hover + label::after {
  background: none;
}

.radio [type='radio']:disabled:checked + label::before {
  border: 2px solid #adadad;
}

.radio [type='radio']:disabled:checked + label::after {
  background-color: #adadad;
}

.radio [type='radio']:disabled:not(:checked) + label::before {
  border-color: #adadad;
}

.radio--only [type='radio'] + label {
  padding-left: 22px;
}

.form-inline .radio {
  display: inline-block;
  vertical-align: top;
}

.form-inline .radio + .radio {
  margin-top: 0;
  margin-left: 14px;
}

.form-group label,
.form-group .label {
  display: block;
  margin-bottom: 8px;
}

.form-group .message {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.form-group.invalid > .message {
  max-height: 50px;
  margin-top: 6px;
  opacity: 1;
  color: #d12;
}

/*doc
---
title: Checkboxes
name: 02-components-050-form-20-checkboxes
category: Components - Checkboxes
---

<p>Checkboxes let users select from a small set of options, or make a binary decision (for example accepting terms and conditions).</p>

<form>
  <div class="checkbox">
    <input type="checkbox" name="dummy" id="checkbox1-10">
    <label for="checkbox1-10">Option 1</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" name="dummy" id="checkbox1-20">
    <label for="checkbox1-20">Option 2</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" name="dummy" id="checkbox1-30">
    <label for="checkbox1-30">Option 1</label>
    <p>Supporting description text</p>
  </div>
  <div class="checkbox">
    <input type="checkbox" name="dummy" id="checkbox1-40">
    <label for="checkbox1-40">Option 2</label>
    <p>Supporting description text</p>
  </div>
</form>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Checkbox states</h3>

  <p>Color and the check indicate that a checkbox is selected, which means that it is active. In addition it has hover effects.</p>
  <p>As checkboxes are an optional choice there is normally no need of an error state. There are rare cases (e.g. in a survey) where the user has to select at least one checkbox.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_1-line_normal.jpg">
      <span class="fig-caption">Checkbox states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_1-line_error.jpg">
      <span class="fig-caption">Error state</span>
    </div>
  </div>

  <h3>Multi-line and supporting description label</h3>

  <p>Multi-line labels have so much text that they need more than one line. For consistency reasons the same font size is used in all lines. <br />If a description with more detail is needed, a description text with smaller font size is displayed below the label text.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_multiline_description.jpg">
      <span class="fig-caption">Multi-line label</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_supporting_description.jpg">
      <span class="fig-caption">Supporting description label</span>
    </div>
  </div>

  <h3>Checkboxes side by side</h3>

  <p>Checkboxes can also be displayed next to each other.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_sidebyside.jpg">
      <span class="fig-caption">Checkboxes side by side</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Minimum spacing</h3>

  <p>The horizontal spacing between the checkbox itself and the label is 16px.<br />The vertical spacing between different checkboxes is 24px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_1-line_dimension.jpg">
      <span class="fig-caption">Spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_multi+desc_dimension.jpg">
      <span class="fig-caption">Spacing multi-line</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_sidebyside_dimension.jpg">
      <span class="fig-caption">Spacing side by side checkboxes</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_1-line_typo.jpg">
      <span class="fig-caption">Typography</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_multi+desc_typo.jpg">
      <span class="fig-caption">Checkboxes with supporting description label</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Use of the checkbox element.</p>

```htmlmixed
<form>
  <div class="checkbox">
    <input type='checkbox' name='dummy' id='checkbox1-1'>
    <label for='checkbox1-1'>Option 1</label>
  </div>
  <div class="checkbox">
    <input type='checkbox' name='dummy' id='checkbox1-2'>
    <label for='checkbox1-2'>Option 2<br/>Second Line</label>
  </div>
  <div class="checkbox">
    <input type='checkbox' name='dummy' id='checkbox1-3'>
    <label for='checkbox1-3'>Option 1</label>
    <p>Supporting description text</p>
  </div>
  <div class="checkbox">
    <input type='checkbox' name='dummy' id='checkbox1-4'>
    <label for='checkbox1-4'>Option 2<br/>Second Line</label>
    <p>Supporting description text</p>
  </div>
  <div class="checkbox checkbox--only">
    <input type='checkbox' name='dummy' id='checkbox1-5'>
    <label for='checkbox1-5'></label>
  </div>
</form>
```

<h3>Disabled States</h3>

```htmlmixed
<form>
  <div class="checkbox">
    <input type='checkbox' name='dummy' id='checkbox3-1' disabled>
    <label for='checkbox3-1'>Option 1</label>
    <p>Supporting description text</p>
  </div>
  <div class="checkbox">
    <input type='checkbox' name='dummy' id='checkbox3-2' checked disabled>
    <label for='checkbox3-2'>Option 2<br/>Second Line</label>
    <p>Supporting description text</p>
  </div>
  <div class="checkbox">
    <input type='checkbox' name='dummy' id='checkbox3-3' disabled>
    <label for='checkbox3-2'>Option 1</label>
    <p>Supporting description text</p>
  </div>
  <div class="checkbox">
    <input type='checkbox' name='dummy' id='checkbox3-4' checked disabled>
    <label for='checkbox3-4'>Option 2<br/>Second Line</label>
    <p>Supporting description text</p>
  </div>
</form>
```

<h3>Inline checkboxes</h3>

<p>Add the class <code>form-inline</code> to a wrapper <code>div</code> element to set the checkboxes to inline.</p>

```htmlmixed
<form>
  <div class="form-inline">
    <div class="checkbox">
      <input type='checkbox' name='dummy' id='checkbox4-1'>
      <label for='checkbox4-1'>Option 1</label>
    </div>
    <div class="checkbox">
      <input type='checkbox' name='dummy' id='checkbox4-2'>
      <label for='checkbox4-2'>Option 2</label>
    </div>
  </div>
</form>
```

<h2>Grouping checkboxes</h2>

<h3>Checkbox group</h3>

```htmlmixed
<form>
  <div class="form-group">
    <label>Checkbox group</label>
    <div class="checkbox">
      <input type='checkbox' name='dummy' id='checkbox5-1'>
      <label for='checkbox5-1'>Option 1</label>
    </div>
    <div class="checkbox">
      <input type='checkbox' name='dummy' id='checkbox5-2'>
      <label for='checkbox5-2'>Option 2</label>
      <p>Supporting description text</p>
    </div>
  </div>
</form>
```

<h3>Inline (Horizontal) checkbox group</h3>

```htmlmixed
<form>
  <div class="form-group form-inline">
    <label>Checkbox group</label>
    <div class="checkbox">
      <input type='checkbox' name='dummy' id='checkbox6-1'>
      <label for='checkbox6-1'>Option 1</label>
      <p>Supporting description text</p>
    </div>
    <div class="checkbox">
      <input type='checkbox' name='dummy' id='checkbox6-2'>
      <label for='checkbox6-2'>Option 2</label>
    </div>
  </div>
</form>
```

<h2>Validate checkboxes</h2>

```htmlmixed
<form>
  <div class="checkbox validate invalid">
    <input type='checkbox' name='dummy' id='checkbox7-1'>
    <label for='checkbox7-1'>Option 1</label>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Error Message
    </div>
  </div>

  <div class="checkbox validate invalid">
    <input type='checkbox' name='dummy' id='checkbox7-2'>
    <label for='checkbox7-2'>Option 2<br/>Second Line</label>
    <p>Supporting description text</p>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Error Message
    </div>
  </div>
</form>
```

<h3>Validate checkbox group</h3>

```htmlmixed
<form>
  <div class="form-group">
    <label>Checkbox group</label>
    <div class="checkbox validate invalid">
      <input type='checkbox' name='dummy' id='checkbox8-1'>
      <label for='checkbox8-1'>Option 1</label>
      <div class="message">
        <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
        Error Message
      </div>
    </div>
    <div class="checkbox validate invalid">
      <input type='checkbox' name='dummy' id='checkbox8-2'>
      <label for='checkbox8-2'>Option 2</label>
      <div class="message">
        <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
        Error Message
      </div>
    </div>
  </div>
</form>
```
*/
.checkbox + .checkbox {
  margin-top: 24px;
}

.checkbox.add-space {
  margin-bottom: 24px;
}

.checkbox p {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 0;
  padding-left: 36px;
  color: #666;
}

.checkbox .message {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.checkbox.invalid > .message {
  max-height: 50px;
  margin-top: 6px;
  opacity: 1;
  color: #d12;
}

.checkbox [type='checkbox']:not(:checked),
.checkbox [type='checkbox']:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.checkbox [type='checkbox'] + label {
  margin-top: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 16px;
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
  padding-left: 36px;
  color: #333;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.checkbox [type='checkbox'] + label::before, .checkbox [type='checkbox'] + label::after {
  position: absolute;
  top: 1px;
  left: 0;
  z-index: 0;
  content: '';
}

.checkbox [type='checkbox'] + label::before {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid #adadad;
  border-radius: 5px;
  width: 22px;
  height: 22px;
}

.checkbox [type='checkbox'] + label::after {
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  width: 22px;
  height: auto;
  text-align: center;
  line-height: 22px;
  color: #adadad;
  font-family: sdx-icons;
  font-size: 18px;
  content: "";
}

.checkbox [type='checkbox']:hover + label::before {
  border: 2px solid #adadad;
  background: transparent;
}

.checkbox [type='checkbox']:hover + label::after {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  color: #adadad;
}

.checkbox [type='checkbox']:focus + label::before {
  border: 2px solid #1781e3;
}

.checkbox [type='checkbox']:focus + label::after {
  color: #1781e3;
}

.checkbox [type='checkbox']:checked + label::before {
  border: 2px solid #1781e3;
  background: transparent;
}

.checkbox [type='checkbox']:checked + label::after {
  -webkit-transform: scale(1);
  transform: scale(1);
  color: #1781e3;
}

.checkbox [type='checkbox']:checked:focus + label::before {
  border: 2px solid #1781e3;
}

.checkbox [type='checkbox']:checked:focus + label::after {
  color: #1781e3;
}

.checkbox [type='checkbox']:checked:hover + label::before {
  border: 2px solid #0851da;
  background: transparent;
}

.checkbox [type='checkbox']:checked:hover + label::after {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  color: #0851da;
}

.checkbox [type='checkbox']:disabled + label,
.checkbox [type='checkbox']:disabled + label + p {
  opacity: .4;
  pointer-events: none;
}

.hiddenscroll.touchevents .checkbox [type='checkbox']:hover + label::before {
  border: 2px solid #adadad;
  background: transparent;
}

.hiddenscroll.touchevents .checkbox [type='checkbox']:hover + label::after {
  -webkit-transform: scale(0);
  transform: scale(0);
  color: #adadad;
}

.hiddenscroll.touchevents .checkbox [type='checkbox']:focus + label::before {
  border: 2px solid #1781e3;
}

.hiddenscroll.touchevents .checkbox [type='checkbox']:focus + label::after {
  color: #1781e3;
}

.hiddenscroll.touchevents .checkbox [type='checkbox']:checked + label::before {
  border: 2px solid #1781e3;
  background: transparent;
}

.hiddenscroll.touchevents .checkbox [type='checkbox']:checked + label::after {
  -webkit-transform: scale(1);
  transform: scale(1);
  color: #1781e3;
}

.hiddenscroll.touchevents .checkbox [type='checkbox']:checked:focus + label::before {
  border: 2px solid #1781e3;
}

.hiddenscroll.touchevents .checkbox [type='checkbox']:checked:focus + label::after {
  color: #1781e3;
}

.checkbox--only [type='checkbox'] + label {
  display: inline;
  padding-left: 22px;
}

.checkbox--inverted [type='checkbox']:hover + label::before {
  border: 2px solid #0851da;
  background: #0851da;
}

.checkbox--inverted [type='checkbox']:hover + label::after {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  color: #fff;
}

.checkbox--inverted [type='checkbox']:focus + label::before {
  border: 2px solid #0851da;
}

.checkbox--inverted [type='checkbox']:focus + label::after {
  color: #fff;
}

.checkbox--inverted [type='checkbox']:checked + label::before {
  border: 2px solid #1781e3;
  background: #1781e3;
}

.checkbox--inverted [type='checkbox']:checked + label::after {
  -webkit-transform: scale(1);
  transform: scale(1);
  color: #fff;
}

.checkbox--inverted [type='checkbox']:checked:focus + label::before {
  border: 2px solid #0851da;
}

.checkbox--inverted [type='checkbox']:checked:focus + label::after {
  color: #fff;
}

.hiddenscroll.touchevents .checkbox--inverted [type='checkbox']:hover + label::before {
  border: 2px solid #adadad;
  background: transparent;
}

.hiddenscroll.touchevents .checkbox--inverted [type='checkbox']:hover + label::after {
  -webkit-transform: scale(0);
  transform: scale(0);
  color: #adadad;
}

.hiddenscroll.touchevents .checkbox--inverted [type='checkbox']:focus + label::before {
  border: 2px solid #0851da;
}

.hiddenscroll.touchevents .checkbox--inverted [type='checkbox']:focus + label::after {
  color: #fff;
}

.hiddenscroll.touchevents .checkbox--inverted [type='checkbox']:checked + label::before {
  border: 2px solid #1781e3;
  background: #1781e3;
}

.hiddenscroll.touchevents .checkbox--inverted [type='checkbox']:checked + label::after {
  -webkit-transform: scale(1);
  transform: scale(1);
  color: #fff;
}

.hiddenscroll.touchevents .checkbox--inverted [type='checkbox']:checked:focus + label::before {
  border: 2px solid #0851da;
}

.hiddenscroll.touchevents .checkbox--inverted [type='checkbox']:checked:focus + label::after {
  color: #fff;
}

.form-inline .checkbox {
  display: inline-block;
  vertical-align: top;
}

.form-inline .checkbox + .checkbox {
  margin-top: 0;
  margin-left: 14px;
}

.form-group label,
.form-group .label {
  display: block;
  margin-bottom: 8px;
}

/*doc
---
title: Menu (dropdown)
name: 02-components-095-select-40-overview
category: Components - Menu (dropdown)
---

<p>Use dropdown menus to contain information without overwhelming the user. When asking users to make multiple separate selections in forms or settings, dropdown menus help to reduce the amount of information displayed on screen at any one time. This makes content more digestible and focused.</p>

<div class="row">
  <div class="col-md-6" style="margin-bottom: 16px">
    <sdx-select label="What is your choice?" placeholder="Choose your option..." tabindex="1">
      <sdx-select-option value="option1">Option 1</sdx-select-option>
      <sdx-select-option value="option2">Option 2</sdx-select-option>
      <sdx-select-option value="option3">Option 3</sdx-select-option>
      <sdx-select-option value="option4">Option 4</sdx-select-option>
      <sdx-select-option value="option5">Option 5</sdx-select-option>
    </sdx-select>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <sdx-select multiple label="What are your choices?" placeholder="Choose your options..." tabindex="1">
      <sdx-select-option value="option1">Option 1</sdx-select-option>
      <sdx-select-option value="option2">Option 2</sdx-select-option>
      <sdx-select-option value="option3">Option 3</sdx-select-option>
      <sdx-select-option value="option4">Option 4</sdx-select-option>
      <sdx-select-option value="option5">Option 5</sdx-select-option>
    </sdx-select>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Standard dropdown</h3>

  <p>Standard dropdowns are used across the majority of contexts where users are asked to make a single selection from a list of options.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-3@2x-4.jpg">
        <span class="fig-caption">Inactive state</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-4@2x-2.jpg">
        <span class="fig-caption">Hover state shows the arrow inside a blue button</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Dropdown_Dark_Inactive@2x.jpg">
        <span class="fig-caption">Inactive state dark</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Dropdown_Dark_Hover@2x.jpg">
        <span class="fig-caption">Hover state dark</span>
    </div>
  </div>

  <p>Inactive dropdowns feature a title that explains the menus function</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-7@2x-9.jpg">
        <span class="fig-caption">Active drop down</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-8@2x-7.jpg">
        <span class="fig-caption">List item on hover</span>
    </div>
  </div>

  <p>The open menu displays the list of options, while still displaying the menu title in the top field. Once the user makes a selection, the top field is replaced the active option.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-7@2x-9.jpg">
        <span class="fig-caption">Active drop down</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-8@2x-7.jpg">
        <span class="fig-caption">List item on hover</span>
    </div>
  </div>

  <h3>Minimal dropdown</h3>

  <p>Minimal dropdowns feature the same functionality as standard dropdowns, but without a container in the inactive state.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-12@2x-10.jpg">
        <span class="fig-caption">Inactive</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-13@2x-11.jpg">
        <span class="fig-caption">Hover</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Dropdown_Minimal_Dark_Inactive@2x.jpg">
        <span class="fig-caption">Dark variant inactive</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Dropdown_Minimal_Dark_Hover@2x.png">
        <span class="fig-caption">Dark variant hover</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-14@2x-8.jpg">
        <span class="fig-caption">Active drop down</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-15@2x-10.jpg">
        <span class="fig-caption">Rollover on list item</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Space between dropdowns</h3>

  <p>A minimum of 16px are required between dropdown boxes.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-18@2x-8.jpg">
      <span class="fig-caption">16px are required between dropdown boxes</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3 class="margin-top-4">Relationship with other elements</h3>

  <p>Each collection of dropdown labels has 24px between them and other elements.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-19@2x-3.jpg">
      <span class="fig-caption">Relationship with other elements</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-20@2x-6.jpg">
      <span class="fig-caption">Typography</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>The select field allows user input through specified options. For more sophisticated examples, please see <a href="/samples/select.html">samples/select</a>.</p>

```htmlmixed_webcomponent_sdx-select
<sdx-select placeholder="Choose your car..." label="Which car will you buy today?" tabindex="1" select-callback="console.log('Selected:', arguments)">
  <sdx-select-optgroup name="Swedish cars">
    <sdx-select-option value="saab">Saab</sdx-select-option>
    <sdx-select-option value="volvo" selected>Volvo</sdx-select-option>
  </sdx-select-optgroup>
  <sdx-select-optgroup name="German cars">
    <sdx-select-option value="bmw">BMW</sdx-select-option>
    <sdx-select-option value="mercedes">Mercedes</sdx-select-option>
    <sdx-select-option value="vw">VW</sdx-select-option>
  </sdx-select-optgroup>
  <sdx-select-optgroup name="Other cars">
    <sdx-select-option value="chevrolet">Chevrolet</sdx-select-option>
    <sdx-select-option value="chrysler">Chrysler</sdx-select-option>
    <sdx-select-option value="mazda">Mazda</sdx-select-option>
    <sdx-select-option value="mg">MG</sdx-select-option>
    <sdx-select-option value="toyota" disabled>Toyota</sdx-select-option>
  </sdx-select-optgroup>
</sdx-select>
```

<h3>On a dark background</h3>

```htmlmixed
<form>
  <div class="bg bg--dark">
    <div class="select">
      <label for="select-1-2">Your choice</label>
      <select id="select-1-2" data-init="auto" tabindex="1">
        <option disabled selected>Choose your option...</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </div>
  </div>
</form>
```

<h3>Validate</h3>

```htmlmixed
<div class="select validate invalid">
  <label for="select-3">Your choice</label>
  <select id="select-3" data-init="auto" tabindex="1">
    <option disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <div class="message">
    <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
    Error Message
  </div>
</div>
```

<h3>Minimal Design</h3>

<p>The select field is also available in a minimal version. Minimal dropdowns can be used when dropdowns require less emphasis and need to be less visually dominant.</p>

```htmlmixed
<div class="select">
  <select class="select--minimal" data-init="auto" tabindex="1">
    <option disabled selected>Choose your option 5</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" disabled>Option disabled</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
  </select>
</div>
```

<h3>For tabs</h3>

```htmlmixed
<div class="select">
  <select class="select--minimal select--tabs" data-init="auto" tabindex="1">
    <option selected>Tab one</option>
    <option>Tab two</option>
    <option disabled>Tab three</option>
  </select>
</div>
```
*/
.select {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  position: relative;
  margin-bottom: 16px;
  outline: none;
  cursor: pointer;
  z-index: 500;
  color: #333;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.select:last-of-type {
  margin-bottom: 0;
}

.select select {
  display: none;
}

.select .select__button {
  position: relative;
  width: 100%;
  height: 48px;
}

.select .select__button:hover .select__thumb {
  background: #1781e3;
  color: #fff;
}

.select .select__button:hover .select__thumb .thumb-icon {
  position: relative;
}

.select .select__button:hover .select__thumb .thumb-icon::before, .select .select__button:hover .select__thumb .thumb-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  background: #fff;
  width: 20px;
  height: 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.select .select__button:hover .select__thumb .thumb-icon::before {
  left: 0;
}

.select .select__button:hover .select__thumb .thumb-icon::after {
  left: 15px;
}

.select .select__thumb {
  position: absolute;
  top: 0;
  right: 0;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 501;
  border-radius: 0 5px 5px 0;
  cursor: inherit;
  width: 34px;
  height: inherit;
  color: #1781e3;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.select .select__thumb .thumb-icon {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  margin: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.select .select__thumb .thumb-icon::before, .select .select__thumb .thumb-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  background: #1781e3;
  width: 20px;
  height: 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.select .select__thumb .thumb-icon::before {
  left: 0;
}

.select .select__thumb .thumb-icon::after {
  left: 15px;
}

.select .select__thumb .loader-spinner {
  display: none;
}

.select .select__placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  display: block;
  position: relative;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  cursor: inherit;
  padding: 12px 55px 12px 15px;
  width: 100%;
  height: inherit;
  -webkit-appearance: none;
}

.select .select__dropdown {
  position: absolute;
  right: 0;
  left: 0;
  margin-bottom: 20px;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  z-index: 501;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.1);
  background: #fff;
  width: 100%;
  height: auto;
  max-height: 0;
  overflow: hidden;
  color: #333;
}

.select .select__dropdown .dropdown-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #d6d6d6;
  border-top: 0;
  padding: 12px 15px 15px;
  width: 100%;
  height: 48px;
}

.select .select__dropdown .dropdown-item:last-child {
  border-radius: 0 0 5px 5px;
}

.select .select__dropdown .dropdown-item:hover, .select .select__dropdown .dropdown-item--focused {
  border-color: #1781e3;
  background: #1781e3;
  color: #fff;
}

.select .select__dropdown .dropdown-item--selected {
  color: #25b252;
}

.select .select__dropdown .dropdown-item--selected::before {
  float: right;
  margin-right: -7px;
  font-family: sdx-icons;
  font-size: 16px;
  content: "";
}

.select .select__dropdown .dropdown-item--disabled, .select .select__dropdown .dropdown-item--disabled:hover {
  border-color: #d6d6d6;
  background: none;
  cursor: not-allowed;
  color: rgba(51, 51, 51, 0.4);
}

.select .message {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.select.invalid > .message {
  max-height: 50px;
  margin-top: 6px;
  opacity: 1;
  color: #d12;
}

.select .dropdown-group__item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #d6d6d6;
  border-top: 0;
  padding: 12px 15px 15px;
  width: 100%;
  height: 48px;
  background-color: #eef3f6;
  color: #666;
  pointer-events: none;
}

.select .dropdown-group__item:hover {
  cursor: default;
}

.select .dropdown-group .dropdown-item:last-child {
  border-radius: 0;
}

.select .dropdown-group:last-child .dropdown-item:last-child {
  border-radius: 0 0 5px 5px;
}

.select--closed .select__thumb .thumb-icon::before {
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.select--closed .select__thumb .thumb-icon::after {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.select--closed .select__dropdown {
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  opacity: .2;
}

.select--open {
  z-index: 999999;
}

.select--open .select__thumb {
  border-radius: 0 5px 0 0;
}

.select--open .select__thumb .thumb-icon::before {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.select--open .select__thumb .thumb-icon::after {
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.select--open .select__placeholder {
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.1);
  color: #1781e3;
}

.select--open .select__dropdown {
  max-height: 512px;
  overflow-y: auto;
}

.select--disabled {
  opacity: .4;
  cursor: not-allowed;
}

.select--disabled .select__button:hover .select__thumb {
  background: none;
  color: #1781e3;
}

.select--disabled .select__button:hover .select__thumb .thumb-icon {
  position: relative;
}

.select--disabled .select__button:hover .select__thumb .thumb-icon::before, .select--disabled .select__button:hover .select__thumb .thumb-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  background: #1781e3;
  width: 20px;
  height: 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.select--disabled .select__button:hover .select__thumb .thumb-icon::before {
  left: 0;
}

.select--disabled .select__button:hover .select__thumb .thumb-icon::after {
  left: 15px;
}

.select--filterable .select__dropdown .dropdown-item strong {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.select--filterable .select__dropdown .dropdown-item:hover strong {
  color: #fff !important;
}

.select--filterable .select__dropdown .dropdown-item.dropdown-item--selected strong {
  font-weight: inherit;
}

.select--filterable .select__dropdown .dropdown-item:not(.dropdown-item--selected) strong {
  color: #0083ea;
}

.select--filterable .select__placeholder:focus:not([readonly]) {
  border-color: #1781e3;
}

.select--loading {
  pointer-events: none;
}

.select--loading .select__thumb .loader-spinner {
  display: block;
  top: 50%;
  left: 50%;
  margin-top: -12.5px;
  margin-left: -12.5px;
}

.select--loading .select__thumb .thumb-icon {
  display: none;
}

.select--minimal .select__button:hover .select__thumb {
  background: none;
  color: #0851da;
}

.select--minimal .select__button:hover .select__thumb .thumb-icon {
  position: relative;
}

.select--minimal .select__button:hover .select__thumb .thumb-icon::before, .select--minimal .select__button:hover .select__thumb .thumb-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  background: #0851da;
  width: 20px;
  height: 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.select--minimal .select__button:hover .select__thumb .thumb-icon::before {
  left: 0;
}

.select--minimal .select__button:hover .select__thumb .thumb-icon::after {
  left: 15px;
}

.select--minimal .select__placeholder {
  border: 0;
  border-bottom: 1px solid #d6d6d6;
  border-radius: 0;
  box-shadow: none;
  color: #333;
}

.select--minimal .select__dropdown {
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.15);
}

.select--minimal .select__dropdown .dropdown-item {
  border: 0;
  border-bottom: 1px solid #d6d6d6;
  border-radius: 0;
}

.select--minimal .select__dropdown .dropdown-item:last-child {
  border-bottom: 0;
  border-radius: 0;
}

.select--minimal.select--open .select__placeholder {
  border-color: transparent;
}

.select--minimal.select--tabs .select__placeholder {
  border: 0;
  border-bottom: 4px solid #1781e3;
  border-radius: 0;
  box-shadow: none;
  color: #333;
}

select {
  display: block;
  position: relative;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  padding: 12px 55px 12px 15px;
  width: auto;
  height: 48px;
  color: #333;
  -webkit-appearance: none;
}

.bg--dark label {
  font-weight: 400;
}

/*doc
---
title: Switches
name: 02-components-170-switches-01-styles
category: Components - Switches
---

<p>Switches are used to change the status of an option or setting between on (active) and off (inactive). <br/>They’re always shown with descriptive text thats used to explain their function, and feature a green active state to help confirm their status.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
  <h4 class="margin-top-3">Enabled switches</h4>
      <div>
        <div>
          <div class="switch padding-top-1">
            <input type="checkbox" name="switch01" id="switch-01">
            <label for="switch-01"></label>
            <p>Switch with supporting text</p>
          </div>
          <div class="switch margin-top-3">
            <input type="checkbox" name="switch02" id="switch-02" checked="">
            <label for="switch-02"></label>
            <p>Switch with supporting text</p>
          </div>
        </div>
      </div>
  </div>
  <div class="col-xs-12 col-lg-6">
  <h4 class="margin-top-3">Disabled switches</h4>
    <div>
      <div>
        <div class="switch padding-top-1">
          <input type="checkbox" name="switch03" id="switch-03" disabled="">
          <label for="switch-03"></label>
          <p>Disabled switch with supporting text</p>
        </div>
        <div class="switch margin-top-3">
          <input type="checkbox" name="switch04" id="switch-04" checked="" disabled="">
          <label for="switch-04"></label>
          <p>Disabled switch with supporting text</p>
        </div>
      </div>
    </div>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Off states</h3>

  <p>When in the off state, switches are positioned to the left, with a grey keyline to indicate their sliding behavior. A grey keyline around the white button helps to maintain the accessibility of the switch on all background colors.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/switch/switches_off.jpg">
        <span class="fig-caption">Inactive states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>On states</h3>

  <p>In their on state, switches move to the right. As they transition into position, a green space is revealed behind the button. Using the interaction green helps to confirm the active state of the switch without the need for additional labelling.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/switch/switches_on.jpg">
      <span class="fig-caption">Active states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Vertical spacing</h3>

  <p>There is a 12px margin between switches.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/switch/Group-32@2x-3.jpg">
      <span class="fig-caption">Spacing between listed switches</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Horizontal spacing</h3>

  <p>There is 20px between switches and labels.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/switch/Group-33@2x-4.jpg">
      <span class="fig-caption">Spacing between switches and text labels</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/switch/Group-34@2x-3.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/switch/Group-35@2x-2.jpg">
        <span class="fig-caption">Dark variant</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Use the following switch as a simple on/off toggle switch.</p>

```htmlmixed
<div class="switch">
  <input type='checkbox' name='switch01' id='switch-06'>
  <label for='switch-06'>
    Switch with supporting text
  </label>
</div>
<div class="switch">
  <input type='checkbox' name='switch02' id='switch-07' checked>
  <label for='switch-07'>
     Switch with supporting text
  </label>
</div>
<div class="switch">
  <input type='checkbox' name='switch03' id='switch-08' disabled>
  <label for='switch-08'>
    Disabled switch with supporting text
  </label>
</div>
<div class="switch">
  <input type='checkbox' name='switch04' id='switch-09' checked disabled>
  <label for='switch-09'>
    Disabled switch with supporting text
  </label>
</div>
```

<p>Switch with label on the left side</p>

```htmlmixed
<div class="switch switch--left">
  <input type='checkbox' name='switch05' id='switch-05'>
  <label for='switch-05'>
    Switch with supporting text
  </label>
</div>
```
<h3>Switch on dark backgrounds</h3>

<p>Switches are also available on dark backgrounds, just annotate the parent background element with the <code>.bg--dark</code> class and the switches will automatically adjust their styling accoordingly.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="switch">
    <input type='checkbox' name='switch01' id='switch-11'>
    <label for='switch-11'>
      Switch with supporting text
    </label>
  </div>
  <div class="switch">
    <input type='checkbox' name='switch02' id='switch-12' checked>
    <label for='switch-12'>
      Switch with supporting text
    </label>
  </div>
  <div class="switch">
    <input type='checkbox' name='switch03' id='switch-13' disabled>
    <label for='switch-13'>
      Disabled switch with supporting text
    </label>
  </div>
  <div class="switch">
    <input type='checkbox' name='switch04' id='switch-14' checked disabled>
    <label for='switch-14'>
      Disabled switch with supporting text
    </label>
  </div>
</div>
```
*/
.switch {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-bottom: 12px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.switch p {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  position: relative;
  top: 2px;
  color: #333;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
}

.switch [type='checkbox']:not(:checked),
.switch [type='checkbox']:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.switch [type='checkbox'] + label {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  font-weight: 400;
  top: 2px;
  color: #333;
  display: block;
  line-height: 24px;
  margin-bottom: 8px;
  position: relative;
  cursor: pointer;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding-left: 78px;
  z-index: 0;
}

.switch [type='checkbox'] + label::before {
  position: absolute;
  top: -2px;
  transition: all 180ms cubic-bezier(0.985, 0.385, 0.41, 0.445);
  z-index: 1;
  left: 0;
  margin: 0 auto;
  border-radius: 28px;
  background: #d6d6d6;
  width: 58px;
  height: 28px;
  content: '';
}

.switch [type='checkbox'] + label::after {
  position: absolute;
  top: -2px;
  bottom: 0;
  left: 0;
  transition: all 180ms 120ms cubic-bezier(0.445, 0.41, 0.395, 0.985);
  z-index: 2;
  margin: 0;
  border: 2px solid #adadad;
  border-radius: 28px;
  background: #fff;
  width: 28px;
  height: 28px;
  content: '';
}

.switch [type='checkbox']:hover + label::before {
  z-index: 1;
}

.switch [type='checkbox']:hover + label::after {
  border-color: #858585;
  z-index: 2;
}

.switch [type='checkbox']:focus + label {
  outline: none;
}

.switch [type='checkbox']:focus + label::after {
  border-color: #858585;
}

.switch [type='checkbox']:checked + label::before {
  top: -2px;
  border-radius: 28px;
  background-color: #25b252;
  height: 28px;
}

.switch [type='checkbox']:checked + label::after {
  left: 30px;
}

.switch [type='checkbox']:checked + label:hover::after {
  border-color: #858585;
  z-index: 2;
}

.switch [type='checkbox']:checked + label:focus {
  outline: none;
}

.switch [type='checkbox']:checked + label:focus::after {
  border-color: #858585;
}

.switch [type='checkbox']:disabled + label {
  opacity: .5;
  pointer-events: none;
}

.switch [type='checkbox']:disabled + label + p {
  opacity: .6;
}

.switch--left [type="checkbox"] + label {
  padding: 0 20px 0 0;
  margin-right: 78px;
}

.switch--left [type="checkbox"] + label::before {
  left: 100%;
}

.switch--left [type="checkbox"] + label::after {
  left: 100%;
}

.switch--left [type="checkbox"]:checked + label::after {
  left: calc(100% + 30px);
}

.bg--dark .switch label {
  color: #fff;
  font-weight: 400;
}

.bg--dark .switch p {
  color: #fff;
}

/*doc
---
title: Sliders
name: 02-components-160-range-01-rangeslider
category: Components - Sliders
---

<p>Sliders are used to control settings across a scale. Standard sliders feature fixed points on the scale, free sliders give users complete control over more specific variables like percentages.</p>

<div class="range">
  <input type="range" data-init="auto" min="10" max="1000" value="300" list="speeds" tabindex="1" step="any">
  <datalist id="speeds">
    <option label="10 Mbits/s">10</option>
    <option label="20 Mbits/s">20</option>
    <option label="100 Mbits/s">100</option>
    <option label="300 Mbits/s">300</option>
    <option label="1 Gbits/s">1000</option>
  </datalist>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Step slider</h3>

  <p>Sliders use the same interaction states as primary CTAs, using the interaction palette to signify their state.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-10@2x-15.jpg">
        <span class="fig-caption">Static state</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-25@2x-6.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-26@2x-6.jpg">
        <span class="fig-caption">Hover state</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-27@2x.png">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-28@2x-5.jpg">
        <span class="fig-caption">On click/drag</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-29@2x-5.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-45@2x-1.jpg">
        <span class="fig-caption">Disabled state</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-30@2x-4.jpg">
        <span class="fig-caption">ark variant</span>
    </div>
  </div>

  <h3>Step sliders with hints</h3>

  <p>Step sliders have hover states indicating the different steps along the scale with a dot hint. Users can click on them without the need to drag the slider.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-20@2x.jpg">
      <span class="fig-caption">Active slider with step rollover</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Sliders with switches</h3>

  <p>Using switches can disable or enable a slider.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-19@2x-4.jpg">
      <span class="fig-caption">Slider with activity switch</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Free slider</h3>

  <p>Free sliders have no fixed step options and give users a much wider range of selection options.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-32@2x.jpg">
        <span class="fig-caption">Static state</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-33@2x.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-34@2x.jpg">
        <span class="fig-caption">Hover state/drag</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-35@2x.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-36@2x-1.jpg">
        <span class="fig-caption">On click/drag</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-37@2x-2.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-38@2x-1.jpg">
        <span class="fig-caption">Disabled state</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-40@2x.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Breakpoints</h3>

  <p>When the screen becomes too small for the slider, it becomes a drop down menu.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-41@2x-1.jpg">
      <span class="fig-caption">Drop down on smaller devices</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Vertical spacing</h3>

  <p>Slider containers should be seperated by 16px of verticle spacing.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-8@2x-8.jpg">
      <span class="fig-caption">Space between sliders</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Clickable areas</h3>

  <p>A user can jump to any step along the slider without using the handle. This is done by clicking/tapping on clickable areas between the steps. A dot hint will appear on the slider bar to indicate where a user has activated.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-42@2x-1.jpg">
      <span class="fig-caption">Clickable areas</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-43@2x-1.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/range_sliders/Group-44@2x-1.jpg">
        <span class="fig-caption">Dark variant</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h4>Step slider with data options</h4>

```htmlmixed
<div class="range">
  <input type="range" data-init="auto" min="10" max="1000" value="300" list="speeds" tabindex="1"/>
  <datalist id="speeds">
    <option label="10 Mbits/s">10</option>
    <option label="20 Mbits/s">20</option>
    <option label="100 Mbits/s">100</option>
    <option label="300 Mbits/s">300</option>
    <option label="1 Gbits/s">1000</option>
  </datalist>
</div>
```

```htmlmixed
<div class="range">
  <input type="range" data-init="auto" list="data" tabindex="2" />
  <datalist id="data">
    <option label="Light">1</option>
    <option label="Basic">2</option>
    <option label="Plus">3</option>
  </datalist>
</div>
```

```htmlmixed
<div class="range">
  <input type="range" data-init="auto" list="data2" tabindex="3" />
  <datalist id="data2">
    <option label="Domestic">1</option>
    <option label="Domestic & international">2</option>
  </datalist>
</div>
```

<h4>Ticks without explicit labels</h4>

<p>If <code>options</code> are provided but no <code>labels</code> are specified the <b>range</b> component automatically generates the labels based on the provided options value.</p>

```htmlmixed
<div class="range">
  <input type="range" data-init="auto" list="nolabels" tabindex="4" />
  <datalist id="nolabels">
    <option>1</option>
    <option>1.5</option>
    <option>2</option>
    <option>2.5</option>
    <option>3</option>
  </datalist>
</div>
```

<h4>Disabled step slider</h4>

```htmlmixed
<div class="range">
  <input type="range" data-init="auto" min="10" max="1000" value="300" list="speeds" disabled/>
  <datalist id="speeds">
    <option label="10 Mbits/s">10</option>
    <option label="20 Mbits/s">20</option>
    <option label="100 Mbits/s">100</option>
    <option label="300 Mbits/s">300</option>
    <option label="1 Gbits/s">1000</option>
  </datalist>
</div>
```

<h3>Dark background</h3>

<p>Step slider on dark background.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="range">
    <input type="range" data-init="auto" min="10" max="1000" value="300" list="speeds" tabindex="5"/>
    <datalist id="speeds">
      <option label="10 Mbits/s">10</option>
      <option label="20 Mbits/s">20</option>
      <option label="100 Mbits/s">100</option>
      <option label="300 Mbits/s">300</option>
      <option label="1 Gbits/s">1000</option>
    </datalist>
  </div>
</div>
```

<h4>Disabled step slider</h4>

```htmlmixed
<div class="bg bg--dark">
  <div class="range">
    <input type="range" data-init="auto" min="10" max="1000" value="300" list="speeds" disabled/>
    <datalist id="speeds">
      <option label="10 Mbits/s">10</option>
      <option label="20 Mbits/s">20</option>
      <option label="100 Mbits/s">100</option>
      <option label="300 Mbits/s">300</option>
      <option label="1 Gbits/s">1000</option>
    </datalist>
  </div>
</div>
```
<h3>Free Slider (Light)</h3>

<p>The light style of the free slider. Use the <code>formatter</code> parameter to customize output formatting on the thumb thumbnail and the output label. In order for the component to find your formatting function it has to be available globally.</p>

```htmlmixed
<div class="range range--light">
  <input type="range" data-init="auto" id="range11" min="0" max="360" value="180" step="1" tabindex="9" formatter="degreesFormatter"/>
  <output for="range11">0</output>
</div>
<div class="range range--light">
  <input type="range" data-init="auto" id="range12" min="0" max="360" value="180" step="1" disabled formatter="degreesFormatter"/>
  <output for="range12">0</output>
</div>

<script>
  function degreesFormatter(value, short) {
    return value + "°";
  }
</script>
```

<h4> Dark background</h4>

<p>Slider on dark background.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="range range--light">
    <input type="range" data-init="auto" id="range21" min="0" max="360" value="180" step="1" tabindex="10" formatter="degreesFormatterExtended"/>
    <output for="range21">0</output>
  </div>
  <div class="range range--light">
    <input type="range" data-init="auto" id="range22" min="0" max="360" value="180" step="1" disabled formatter="degreesFormatterExtended"/>
    <output for="range22">0</output>
  </div>
</div>
<script>
  function degreesFormatterExtended(value, short) {
    if (short) {
      return value + "°";
    } else {
      return "Angle of " + value + "°";
    }
  }
</script>
```
*/
.range {
  font-family: "TheSans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  margin: 0 16px 24px;
  outline: none;
  height: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .range {
    margin: 0 32px 24px;
  }
}

.range input[type='range'] {
  display: none;
}

.range label {
  margin: 0;
  margin-top: 32px;
}

.range output {
  font-weight: 600;
  line-height: 24px;
  letter-spacing: .1px;
  font-size: 14px;
  color: #333;
}

.range .range-container {
  position: relative;
  margin-top: 19px;
  cursor: pointer;
  width: 100%;
  height: auto;
  min-height: 28px;
}

.range .range-container:focus {
  outline: none;
}

.range .range-track {
  transition: all 200ms ease;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 13px;
  left: 0;
  z-index: 1;
  background: #adadad;
}

.range .range-track__progress {
  position: absolute;
  top: 0;
  left: 0;
  background: #1781e3;
  width: 0;
  height: 2px;
}

.range .range-slider {
  display: table;
}

.range .range-tick {
  display: table-cell;
  position: relative;
  padding: 40px 8px 0;
  height: auto;
  text-align: center;
  color: #adadad;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-break: break-all;
}

.range .range-tick::before {
  position: absolute;
  top: 13px;
  left: 50%;
  background: #adadad;
  width: 1px;
  height: 8px;
  content: '';
}

.range .range-tick:first-child {
  padding-left: 0;
  text-align: left;
}

.range .range-tick:first-child::before {
  position: absolute;
  top: 13px;
  left: 32px;
}

.range .range-tick:first-child::after {
  position: absolute;
  top: 12px;
  left: 30px;
}

.range .range-tick:last-child {
  padding-right: 0;
  text-align: right;
}

.range .range-tick:last-child::before {
  position: absolute;
  top: 13px;
  right: 32px;
  left: inherit;
}

.range .range-tick:last-child::after {
  position: absolute;
  top: 12px;
  right: 30px;
  left: inherit;
}

.range .range-tick::after {
  position: absolute;
  top: 12px;
  left: calc(50% - 2px);
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: 120ms all ease-in-out;
  z-index: 5;
  border-radius: 100%;
  background: #0851da;
  width: 5px;
  height: 5px;
  content: '';
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.range .range-tick__label {
  font-weight: 400;
  position: relative;
  text-align: center;
  color: #333;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.range .range-tick--active .range-tick__label, .range .range-tick:hover .range-tick__label {
  font-weight: 600;
  color: #0851da;
}

.range .range-tick:hover::after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.range .range-thumb {
  z-index: 1;
  border: 2px solid #1781e3;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff;
  background-color: #fff;
  width: 28px;
  height: 28px;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  top: 0;
  z-index: 10;
  margin: 0;
}

.range .range-thumb:active {
  background-color: #0851da;
}

.range .range-thumb:hover {
  border-color: #0851da;
}

.range .range-thumb__value {
  position: absolute;
  bottom: 37px;
  left: calc(50% - 25px);
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: 120ms all;
  opacity: 1;
  border-radius: 8px;
  background: #0851da;
  min-width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  color: #fff;
  font-size: 16px;
}

.range .range-thumb:active {
  border-color: #0851da;
  background-color: #0851da;
}

.range .range-thumb:active .range-thumb__value {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.range--active .range-thumb {
  border-color: #0851da;
  background-color: #0851da;
}

.range--active .range-thumb .range-thumb__value {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.range--disabled .range-container {
  cursor: not-allowed;
}

.range--disabled .range-track {
  background: #d8d8d8 !important;
}

.range--disabled .range-track__progress {
  background: #d8d8d8 !important;
}

.range--disabled .range-thumb .range-thumb__value {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.range--disabled .range-thumb, .range--disabled .range-thumb:hover {
  border-color: #d8d8d8 !important;
}

.range--disabled .range-thumb:active {
  background-color: #fff;
}

.range--disabled .range-thumb:active .range-thumb__value {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.range--disabled .range-tick {
  color: #d8d8d8 !important;
}

.range--disabled .range-tick::before {
  background: #d8d8d8 !important;
}

.range--disabled .range-tick .range-tick__label, .range--disabled .range-tick:hover .range-tick__label {
  font-weight: 400;
  color: #d8d8d8 !important;
}

.range--disabled .range-tick::after, .range--disabled .range-tick:hover::after {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.range--dragging .range-tick:hover::after {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.range--light {
  margin: 40px;
}

@media (min-width: 768px) {
  .range--light {
    margin: 40px;
  }
}

.bg--dark .range output {
  color: #fff;
}

.bg--dark .range .range-track {
  background: #fff;
}

.bg--dark .range .range-tick, .bg--dark .range .range-tick__label {
  color: #fff;
}

.bg--dark .range .range-tick--active .range-tick__label, .bg--dark .range .range-tick:hover .range-tick__label {
  color: #0851da;
}

.bg--dark .range .range-thumb {
  box-shadow: inset 0 0 0 3px #015;
  background-color: #015;
}

.bg--dark .range .range-thumb:active {
  border-color: #0851da;
  background-color: #0851da;
}

.bg--dark .range .range-thumb:active .range-thumb__value {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.bg--dark .range--active .range-thumb {
  border-color: #0851da;
  background-color: #0851da;
}

.bg--dark .range--active .range-thumb .range-thumb__value {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.bg--dark .range--disabled {
  opacity: .5;
}

.bg--dark .range--disabled .range-thumb .range-thumb__value {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.bg--dark .range--disabled .range-thumb:active {
  background-color: #015;
}

.bg--dark .range--disabled .range-thumb:active .range-thumb__value {
  -webkit-transform: scale(0);
  transform: scale(0);
}

input[type='range'].html5 {
  position: relative;
  margin: 14px 0;
  outline: none;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  width: 100%;
}

input[type='range'].html5:focus {
  outline: none;
}

input[type='range'].html5::-webkit-slider-runnable-track {
  transition: all 200ms ease;
  width: 100%;
  height: 2px;
  border: 0 solid transparent;
  border-radius: 20px;
  background: #adadad;
}

input[type='range'].html5::-webkit-slider-thumb {
  z-index: 1;
  border: 2px solid #1781e3;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff;
  background-color: #fff;
  width: 28px;
  height: 28px;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-user-select: none;
  user-select: none;
  margin: 14px 0 0;
  margin-top: -13px;
  -webkit-appearance: none;
}

input[type='range'].html5::-webkit-slider-thumb:active {
  background-color: #0851da;
}

input[type='range'].html5::-webkit-slider-thumb:hover {
  border-color: #0851da;
}

input[type='range'].html5 {
  /* fix for FF unable to apply focus style bug  */
  border: 1px solid #fff;
}

input[type='range'].html5::-moz-range-track {
  /*required for proper track sizing in FF*/
  border: 0;
  background: #adadad;
  height: 2px;
}

input[type='range'].html5::-moz-range-thumb {
  z-index: 1;
  border: 2px solid #1781e3;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff;
  background-color: #fff;
  width: 24px;
  height: 24px;
  transform-origin: 50% 50%;
  -moz-user-select: none;
  user-select: none;
  margin: 12px 0 0;
  outline: none;
}

input[type='range'].html5::-moz-range-thumb:active {
  background-color: #0851da;
}

input[type='range'].html5::-moz-range-thumb:hover {
  border-color: #0851da;
}

input[type='range'].html5:-moz-focusring {
  outline: 1px solid transparent;
  outline-offset: -1px;
}

input[type='range'].html5::-moz-focus-outer {
  border: 0;
}

input[type='range'].html5::-ms-track {
  transition: all 200ms ease;
  width: 100%;
  height: 2px;
  border-width: 28px 0;
  border-color: transparent;
  background: transparent;
  color: transparent;
}

input[type='range'].html5::-ms-fill-lower {
  background: #1781e3;
}

input[type='range'].html5::-ms-fill-upper {
  background: #adadad;
}

input[type='range'].html5::-ms-thumb {
  z-index: 1;
  border: 2px solid #1781e3;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff;
  background-color: #fff;
  width: 28px;
  height: 28px;
  transform-origin: 50% 50%;
  -ms-user-select: none;
  user-select: none;
  margin: 14px 0 0;
  margin: 14px 0;
}

input[type='range'].html5::-ms-thumb:active {
  background-color: #0851da;
}

input[type='range'].html5::-ms-thumb:hover {
  border-color: #0851da;
}

input[type='range'].html5::-ms-tooltip {
  display: none;
}

/*doc
---
title: Buttons (toggle)
name: 02-components-035-form-20-toggle-buttons
category: Components - Buttons (toggle)
---

<p>We should use Radio Toggle Buttons for menu panels or situations where the user choice is intended to guide the user further along his journey in a more prominent way than by using forms components like standard <a href="components_-_radio_buttons.html">radio buttons</a>.</p>

<div>
  <form>
    <div class="toggle-button-group">
      <input type="radio" name="dummy" id="toggle-button0-1" checked="checked">
      <label for="toggle-button0-1">Option 1</label>
      <input type="radio" name="dummy" id="toggle-button0-2">
      <label for="toggle-button0-2">Option 2</label>
      <input type="radio" name="dummy" id="toggle-button0-3">
      <label for="toggle-button0-3">Option 3</label>
    </div>
  </form>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
    <div class="col-xs-5 col-lg-3">
      <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
      </ul>
    </div>
</div>

<div class="content-design">
  <p>Pictures with spacings and typography will be updated.</p>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h3>Toggle buttons</h3>

<p>The Radio Toggle Buttons should be used to select only one option among a certain group.</p>

```htmlmixed
<form>
  <div class="toggle-button-group">
    <input type="radio" name="dummy" id="toggle-button1-1" checked="checked">
    <label for="toggle-button1-1">Option 1</label>
    <input type="radio" name="dummy" id="toggle-button1-2">
    <label for="toggle-button1-2">Option 2</label>
    <input type="radio" name="dummy" id="toggle-button1-3">
    <label for="toggle-button1-3">Option 3</label>
    <input type="radio" name="dummy" id="toggle-button1-4" disabled="disabled">
    <label for="toggle-button1-4">Option disabled</label>
  </div>
</form>
```

<h3>Toggle buttons with icon</h3>

```htmlmixed
<form>
  <div class="toggle-button-group">
    <input type="radio" name="dummy" id="toggle-button3-1" checked="checked">
    <label for="toggle-button3-1">
      <i class="icon icon-233-robot-happy icon--s2"></i>happy
    </label>
    <input type="radio" name="dummy" id="toggle-button3-2">
    <label for="toggle-button3-2">
      <i class="icon icon-240-robot-sad icon--s2"></i>sad
    </label>
    <input type="radio" name="dummy" id="toggle-button3-3" disabled="disabled">
    <label for="toggle-button3-3">
      <i class="icon icon-239-robot-confused icon--s2"></i>confused
    </label>
  </div>
</form>
```

<h3>Toggle buttons with centered icon and text</h3>

```htmlmixed
<form>
  <div class="toggle-button-group toggle-button-group--centered">
    <input type="radio" name="dummy" id="toggle-button4-1" checked="checked">
    <label for="toggle-button4-1" class="toggle-button__label">
      <i class="icon icon-105-call-centre icon--s2"></i>
      <span class="toggle-button__text">Arrange consultation with hotline</span>
    </label>
    <input type="radio" name="dummy" id="toggle-button4-2">
    <label for="toggle-button4-2" class="toggle-button__label">
      <i class="icon icon-043-heart icon--s2"></i>
      <span class="toggle-button__text">Save order temporary in the customer center</span>
    </label>
    <input type="radio" name="dummy" id="toggle-button4-3" disabled="disabled">
      <label for="toggle-button4-3" class="toggle-button__label">
      <i class="icon icon-183-sent icon--s2"></i>
    <span class="toggle-button__text">Send order to an e-mail address</span>
    </label>
  </div>
</form>
```

<h3>Toggle button with images</h3>

```htmlmixed
<form>
  <div class="toggle-button-group toggle-button-group--image">
    <input type="radio" name="dummy" id="toggle-button5-1" checked="checked">
    <label for="toggle-button5-1" style="background-image: url(../theme-build/img/clocks/clock1.png);">
    </label>
    <input type="radio" name="dummy" id="toggle-button5-2">
    <label for="toggle-button5-2" style="background-image: url(../theme-build/img/clocks/clock2.png);">
    </label>
    <input type="radio" name="dummy" id="toggle-button5-3" disabled="disabled">
    <label for="toggle-button5-3" style="background-image: url(../theme-build/img/clocks/clock3.png);">
    </label>
  </div>
</form>
```
*/
.toggle-button-group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.toggle-button-group [type='radio']:not(:checked),
.toggle-button-group [type='radio']:checked,
.toggle-button-group [type='checkbox']:not(:checked),
.toggle-button-group [type='checkbox']:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.toggle-button-group [type='checkbox'] + label, .toggle-button-group [type='radio'] + label {
  background-color: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  font-size: 18px;
  padding: 12px 24px;
  margin-right: 12px;
  margin-bottom: 16px;
  font-weight: 400;
}

.toggle-button-group [type='checkbox'] + label:last-child, .toggle-button-group [type='radio'] + label:last-child {
  margin-right: 0;
}

.toggle-button-group [type='checkbox']:checked + label:hover, .toggle-button-group [type='radio']:checked + label:hover {
  border-color: #1781e3;
  color: #0851da;
}

.toggle-button-group [type='checkbox']:checked + label, .toggle-button-group [type='radio']:checked + label {
  border-color: #1781e3;
  color: #1781e3;
}

.toggle-button-group [type='checkbox']:disabled + label, .toggle-button-group [type='radio']:disabled + label {
  cursor: default;
  opacity: 0.4;
}

.toggle-button-group [type='checkbox']:disabled + label:hover, .toggle-button-group [type='radio']:disabled + label:hover {
  border-color: #d6d6d6;
  color: #333;
}

.toggle-button-group .icon {
  margin-right: 5px;
}

.toggle-button-group--centered .toggle-button__label {
  text-align: center;
  max-width: 280px;
  min-width: 270px;
}

.toggle-button-group--centered .toggle-button__text {
  float: left;
}

.toggle-button-group--image [type='checkbox'] + label, .toggle-button-group--image [type='radio'] + label {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-origin: content-box;
  height: 72px;
  padding: 4px;
  width: 72px;
}

/*doc
---
title: Lists
name: 02-components-080-lists
category: Components - Lists
---

<p>Styled lists can be used to help group points together and give them prominence within the page hierarchy. There are two types of lists; structured lists that are numbered and unstructured lists that use bullet points.</p>

<ul class="list">
  <li class="single-line">Lorem ipsum dolor sit amet.</li>
  <li class="single-line">Lorem ipsum dolor sit atedur.</li>
  <li class="single-line">Lorem ipsum dolor sit amet.</li>
</ul>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Ordered list</h3>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-6@2x-3.jpg">
      <span class="fig-caption">Single line list</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-11@2x-8.jpg">
      <span class="fig-caption">Multi-line list</span>
    </div>
  </div>

  <h3>Unordered list</h3>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-13@2x-1.jpg">
      <span class="fig-caption">Single line list</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/component-bulletpoint-list-light@2x.jpg">
      <span class="fig-caption">Multi-line list</span>
    </div>
  </div>

  <h3>Link list</h3>

  <p>When you display more than one link it is shown as a link list. The link list has a chevron to the right before each link element.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/lists/Link_Lists.jpg">
      <span class="fig-caption">Example of a link list</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Alignment</h3>

  <p>Numbers should be aligned to the baseline of the text. Bullets are aligned to the vertical centre point of the text.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-17@2x-4.jpg">
      <span class="fig-caption">Ordered list alignment</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-18@2x-3.jpg">
      <span class="fig-caption">Unordered list alignment</span>
    </div>
  </div>

  <p>Vertical spacing between paragraphs or text and lists is set to 36px, and is measured from descender to ascender.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-20@2x-1.jpg">
      <span class="fig-caption">Space between elements</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Insertion</h3>

  <p>Insertion spacing is 8px between text and the list element.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-19@2x.jpg">
      <span class="fig-caption">Insertion spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/lists/Link_Lists_vermassung.jpg">
      <span class="fig-caption">Space between elements</span>
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/lists/Group-21@2x-2.jpg">
        <span class="fig-caption">Typography ordered list</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/lists/Group-22@2x-2.jpg">
        <span class="fig-caption">Typography unordered list</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-6">
        <img class="img-responsive" src="./theme-build/img/design/lists/Link_Lists_typo.jpg">
        <span class="fig-caption">Typography linked list</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h2>Bullet list</h2>

<h3>Bullet list single line</h3>

```htmlmixed
<h2>Lorem ipsum dolor sit amet</h2>

<ul class="list">
  <li class="single-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li class="single-line">Lorem ipsum dolor sit atedur, labore aliqua.</li>
  <li class="single-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li class="single-line">Lorem ipsum dolor sit atedur, labore aliqua.</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

<h3>Bullet list multi line</h3>

```htmlmixed
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>

<ul class="list">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <ul class="list">
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
  </ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

<h2>Numbered list</h2>

<h3>Numbered list single line</h3>

```htmlmixed
<h2>Lorem ipsum dolor sit amet</h2>

<ol class="list single-line">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Lorem ipsum dolor sit atedur, labore aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Lorem ipsum dolor sit atedur, labore aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Lorem ipsum dolor sit atedur, labore aliqua.</li>
</ol>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

<h3>Numbered list multi line</h3>

```htmlmixed
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>

<ol class="list">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```
*/
ul,
menu,
dir {
  display: block;
  padding: 0;
}

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

ul.list,
ol.list {
  margin-top: 29px;
  margin-bottom: 28px;
}

ul.list ul.list,
ul.list ol.list,
ol.list ul.list,
ol.list ol.list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 18px;
}

ul.list li,
ol.list li {
  margin-bottom: 13px;
}

@media (min-width: 480px) {
  ul.list li,
  ol.list li {
    margin-bottom: 12px;
  }
}

ul.list li::before,
ol.list li::before {
  float: left;
  color: #1781e3;
  content: '';
}

ul.list li.single-line,
ol.list li.single-line, ul.list.single-line > li,
ol.list.single-line > li {
  margin-bottom: 7px;
}

@media (min-width: 480px) {
  ul.list li.single-line,
  ol.list li.single-line, ul.list.single-line > li,
  ol.list.single-line > li {
    margin-bottom: 6px;
  }
}

dt.list {
  font-weight: 300;
}

ul.list li {
  margin-left: 18px;
}

ul.list li::before {
  margin-top: 1px;
  margin-left: -20px;
  font-size: 33px;
  content: '•';
}

ol.list li {
  margin-left: 32px;
  counter-increment: item;
}

@media (min-width: 480px) {
  ol.list li {
    margin-left: 30px;
  }
}

ol.list li::before {
  margin-left: -32px;
  font-weight: 600;
  content: counter(item) ".";
}

@media (min-width: 480px) {
  ol.list li::before {
    margin-left: -30px;
  }
}

/*doc
---
title: Badges
name: 02-components-010-badges-01-badges
category: Components - Badges
---

<p>Badges are small and subtle notification indicators used to provide users with additional information without disrupting their experience.</p>
<p>They can be used to indicate unread emails, changes to settings, and prompting actions such as refreshing as a page. They should always feature one of the three interaction colors, helping to clarify importance of the notification/alert.</p>

<style type="text/css">
.exampleOutput .avatar {
    border-radius: 50%;
    border: 2px solid #ff8b2e;
}
.exampleOutput .avatar>img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}
</style>

<div class="row">
  <div class="col-xs col-md-12 margin-bottom-3">
    <div class="badge badge--message">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">8</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">654</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-079-shopping-trolley" aria-hidden="true"></i>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-check" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content">8</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges//221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content">654</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-heart" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Icon badges</h3>

  <p>Icon badges are used for notifications that reference functionality, such as an unread mail or new product in the user’s basket. These are related to a user’s actions.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-21@2x-9.jpg">
        <span class="fig-caption">Color-coded icon notifications (top) and their respective hover states (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-22@2x-8.jpg">
        <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-23@2x-10.jpg">
        <span class="fig-caption">Color-coded icon notifications (top) and their respective hover states (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-24@2x-5.jpg">
        <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <h3>Avatar badges</h3>

  <p>Avatar badges relate to the user’s account.. This could be the user receiving a ‘like’ for a comment, or to signify an account authorisation. They’re used in conjunction with message notifications.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-26@2x-8.jpg">
        <span class="fig-caption">Color-coded icon notifications (top) and their respective hover states (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-26@2x.jpg">
        <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <h3>Message badge</h3>

  <p>Message notifications are often used in conjunction with avatar badges, and appear for a short time in the browser. They can simultaneously trigger an avatar badge notification.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-27@2x-6.jpg">
        <span class="fig-caption">Color-coded text notifications (top) and their respective hover states (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-28@2x-8.jpg">
        <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Positioning</h3>

  <p>Written alerts are positioned halfway over the top navigation and horizontally centered.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-17-Copy@2x-1.jpg">
      <span class="fig-caption">Positioning</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Icon alignment</h3>

  <p>Badges are always positioned on the right axis of the icon.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Line-Copy-14-Line-Copy-14-Mask@2x.jpg">
      <span class="fig-caption">Icon alignment is always positioned on the right axis of the icon</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/badges/Group-5-Copy-3@2x.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<style>
  .avatar {
    border-radius: 50%;
    border: 2px solid #ff8b2e;
  }

  .avatar>img {
    width: 100%;
    height: auto;
    border-radius: 50%;
  }
</style>

<h2>Badge types</h2>

<p>There are five types of badges.</p>

```htmlmixed
<div class="row">
  <div class="col-xs col-md-12 margin-bottom-3">
    <div class="badge badge--message">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">8</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">654</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-079-shopping-trolley" aria-hidden="true"></i>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-check" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>

<div class="row margin-top-4">
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content">8</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content">654</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-heart" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>
```

<h3>Dark Background</h3>

<p>Badges on dark background.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="row">
    <div class="col-xs col-md-12 margin-bottom-3">
      <div class="badge badge--message">
        <div class="badge__content">
          <span class="badge__text">5 new messages</span>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs col-md-4">
      <div class="badge badge--icon">
        <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
        <span class="badge__content">8</span>
      </div>
    </div>
    <div class="col-xs col-md-4">
      <div class="badge badge--icon">
        <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
        <span class="badge__content">654</span>
      </div>
    </div>
    <div class="col-xs col-md-4">
      <div class="badge badge--icon">
        <i class="icon icon--s3 icon-079-shopping-trolley" aria-hidden="true"></i>
        <span class="badge__content badge__content--icon">
          <i class="icon icon-check" aria-hidden="true"></i>
        </span>
      </div>
    </div>
  </div>
  <div class="row margin-top-4">
    <div class="col-xs col-md-4">
      <div class="badge badge--avatar">
        <div class="avatar">
          <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
        </div>
        <span class="badge__content">8</span>
      </div>
    </div>
    <div class="col-xs col-md-4">
      <div class="badge badge--avatar">
        <div class="avatar">
          <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
        </div>
        <span class="badge__content">654</span>
      </div>
    </div>
    <div class="col-xs col-md-4">
      <div class="badge badge--avatar">
        <div class="avatar">
          <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
        </div>
        <span class="badge__content badge__content--icon">
          <i class="icon icon-heart" aria-hidden="true"></i>
        </span>
      </div>
    </div>
  </div>
</div>
```
<h2>Badge colors</h2>

<h3>General Notifications</h3>

```htmlmixed
<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--message">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">2</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-heart" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>
```

<h3>Confirmations</h3>

```htmlmixed
<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--message badge--confirmation">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon badge--confirmation">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">2</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar badge--confirmation">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-check" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>
```

<h3>Alerts and notifications</h3>

```htmlmixed
<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--message badge--notification">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon badge--notification">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">2</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar badge--notification">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-alert" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>
```
<script>
  // Performs the badge content animation when clicking on the badge, this is for
  // demonstration purposes only

  var badges = document.querySelectorAll(".badge")
  for (var i = 0; i < badges.length; i++) {
    badges[i].addEventListener("click", function() {
      var badge = this.querySelector(".badge__content")
      badge.style.display = "none";
      setTimeout(function(){  badge.style.display = ""; }, 200);
    });
  }
</script>
*/
.badge {
  display: inline-block;
  position: relative;
}

.badge__content {
  font-family: "TheSans", sans-serif;
  font-weight: 300;
  display: inline-block;
  position: relative;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
  background: #1781e3;
  cursor: pointer;
  height: 24px;
  text-align: center;
  line-height: 1;
  color: #fff;
  font-size: 16px;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.badge__content:hover {
  background: #0851da;
}

.badge--message {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.badge--message .badge__content {
  -webkit-animation: badge-message 600ms linear both;
  animation: badge-message 600ms linear both;
  padding: 0;
  max-width: calc(100% - (2 * 24px));
  overflow: hidden;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.badge--message .badge__text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  -webkit-animation: badge-message-text 600ms linear both;
  animation: badge-message-text 600ms linear both;
  padding: 4px 12px 2px;
  height: 100%;
  letter-spacing: -.6px;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.badge--icon .avatar, .badge--avatar .avatar {
  width: 32px;
  height: 32px;
}

.badge--icon .badge__content, .badge--avatar .badge__content {
  position: absolute;
  top: 0;
  left: calc(100% - 9px);
  -webkit-animation: badge-icon 500ms linear both;
  animation: badge-icon 500ms linear both;
  padding: 2px 5px;
  min-width: 16px;
  height: 16px;
  font-size: 12px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: 1px solid transparent;
}

.badge--icon .badge__content--icon, .badge--avatar .badge__content--icon {
  padding: 0;
  width: 16px;
  height: 16px;
}

.badge--icon .badge__content--icon .icon, .badge--avatar .badge__content--icon .icon {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  width: 16px;
  text-align: center;
  line-height: 16px;
  letter-spacing: normal;
  font-size: 12px;
}

.badge--icon .badge__content--icon .icon-heart, .badge--avatar .badge__content--icon .icon-heart {
  font-size: 8px;
}

.badge--icon .badge__content--icon .icon-heart::before, .badge--avatar .badge__content--icon .icon-heart::before {
  content: "";
}

.badge--icon .badge__content--icon .icon-check::before, .badge--avatar .badge__content--icon .icon-check::before {
  content: "";
}

.badge--icon .badge__content--icon .icon-alert::before, .badge--avatar .badge__content--icon .icon-alert::before {
  content: "";
}

.badge--alert .badge__content, .badge--notification .badge__content {
  background: #ff8b2e;
}

.badge--alert .badge__content:hover, .badge--notification .badge__content:hover {
  background: #e86416;
}

.badge--confirmation .badge__content {
  background: #25b252;
}

.badge--confirmation .badge__content:hover {
  background: #008236;
}

@-webkit-keyframes badge-message {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    max-width: 24px;
  }
  30% {
    -webkit-transform: scale(1);
    transform: scale(1);
    max-width: 24px;
  }
  75% {
    max-width: 272px;
  }
}

@keyframes badge-message {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    max-width: 24px;
  }
  30% {
    -webkit-transform: scale(1);
    transform: scale(1);
    max-width: 24px;
  }
  75% {
    max-width: 272px;
  }
}

@-webkit-keyframes badge-message-text {
  0% {
    opacity: 0;
  }
  75% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@keyframes badge-message-text {
  0% {
    opacity: 0;
  }
  75% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@-webkit-keyframes badge-icon {
  0% {
    -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 1.4, 0, 1);
    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 1.4, 0, 1);
  }
  4% {
    -webkit-transform: matrix3d(0.83, 0, 0, 0, 0, 0.83, 0, 0, 0, 0, 1, 0, 0, 0.86, 0, 1);
    transform: matrix3d(0.83, 0, 0, 0, 0, 0.83, 0, 0, 0, 0, 1, 0, 0, 0.86, 0, 1);
  }
  4.3% {
    -webkit-transform: matrix3d(0.841, 0, 0, 0, 0, 0.841, 0, 0, 0, 0, 1, 0, 0, 0.817, 0, 1);
    transform: matrix3d(0.841, 0, 0, 0, 0, 0.841, 0, 0, 0, 0, 1, 0, 0, 0.817, 0, 1);
  }
  7.91% {
    -webkit-transform: matrix3d(0.967, 0, 0, 0, 0, 0.967, 0, 0, 0, 0, 1, 0, 0, 0.323, 0, 1);
    transform: matrix3d(0.967, 0, 0, 0, 0, 0.967, 0, 0, 0, 0, 1, 0, 0, 0.323, 0, 1);
  }
  8.61% {
    -webkit-transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.24, 0, 1);
    transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.24, 0, 1);
  }
  11.91% {
    -webkit-transform: matrix3d(1.057, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, -0.056, 0, 1);
    transform: matrix3d(1.057, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, -0.056, 0, 1);
  }
  12.91% {
    -webkit-transform: matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, -0.112, 0, 1);
    transform: matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, -0.112, 0, 1);
  }
  15.82% {
    -webkit-transform: matrix3d(1.083, 0, 0, 0, 0, 1.083, 0, 0, 0, 0, 1, 0, 0, -0.195, 0, 1);
    transform: matrix3d(1.083, 0, 0, 0, 0, 1.083, 0, 0, 0, 0, 1, 0, 0, -0.195, 0, 1);
  }
  17.22% {
    -webkit-transform: matrix3d(1.08, 0, 0, 0, 0, 1.08, 0, 0, 0, 0, 1, 0, 0, -0.202, 0, 1);
    transform: matrix3d(1.08, 0, 0, 0, 0, 1.08, 0, 0, 0, 0, 1, 0, 0, -0.202, 0, 1);
  }
  20.42% {
    -webkit-transform: matrix3d(1.059, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, -0.17, 0, 1);
    transform: matrix3d(1.059, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, -0.17, 0, 1);
  }
  24.92% {
    -webkit-transform: matrix3d(1.018, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -0.091, 0, 1);
    transform: matrix3d(1.018, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -0.091, 0, 1);
  }
  28.33% {
    -webkit-transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.041, 0, 1);
    transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.041, 0, 1);
  }
  29.53% {
    -webkit-transform: matrix3d(0.988, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, -0.028, 0, 1);
    transform: matrix3d(0.988, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, -0.028, 0, 1);
  }
  34.03% {
    -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0.003, 0, 1);
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0.003, 0, 1);
  }
  39.44% {
    -webkit-transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.012, 0, 1);
    transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.012, 0, 1);
  }
  43.14% {
    -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0.01, 0, 1);
    transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0.01, 0, 1);
  }
  52.15% {
    -webkit-transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0.002, 0, 1);
    transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0.002, 0, 1);
  }
  61.66% {
    -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1);
    transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1);
  }
  70.37% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  83.98% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@keyframes badge-icon {
  0% {
    -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 1.4, 0, 1);
    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 1.4, 0, 1);
  }
  4% {
    -webkit-transform: matrix3d(0.83, 0, 0, 0, 0, 0.83, 0, 0, 0, 0, 1, 0, 0, 0.86, 0, 1);
    transform: matrix3d(0.83, 0, 0, 0, 0, 0.83, 0, 0, 0, 0, 1, 0, 0, 0.86, 0, 1);
  }
  4.3% {
    -webkit-transform: matrix3d(0.841, 0, 0, 0, 0, 0.841, 0, 0, 0, 0, 1, 0, 0, 0.817, 0, 1);
    transform: matrix3d(0.841, 0, 0, 0, 0, 0.841, 0, 0, 0, 0, 1, 0, 0, 0.817, 0, 1);
  }
  7.91% {
    -webkit-transform: matrix3d(0.967, 0, 0, 0, 0, 0.967, 0, 0, 0, 0, 1, 0, 0, 0.323, 0, 1);
    transform: matrix3d(0.967, 0, 0, 0, 0, 0.967, 0, 0, 0, 0, 1, 0, 0, 0.323, 0, 1);
  }
  8.61% {
    -webkit-transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.24, 0, 1);
    transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.24, 0, 1);
  }
  11.91% {
    -webkit-transform: matrix3d(1.057, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, -0.056, 0, 1);
    transform: matrix3d(1.057, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, -0.056, 0, 1);
  }
  12.91% {
    -webkit-transform: matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, -0.112, 0, 1);
    transform: matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, -0.112, 0, 1);
  }
  15.82% {
    -webkit-transform: matrix3d(1.083, 0, 0, 0, 0, 1.083, 0, 0, 0, 0, 1, 0, 0, -0.195, 0, 1);
    transform: matrix3d(1.083, 0, 0, 0, 0, 1.083, 0, 0, 0, 0, 1, 0, 0, -0.195, 0, 1);
  }
  17.22% {
    -webkit-transform: matrix3d(1.08, 0, 0, 0, 0, 1.08, 0, 0, 0, 0, 1, 0, 0, -0.202, 0, 1);
    transform: matrix3d(1.08, 0, 0, 0, 0, 1.08, 0, 0, 0, 0, 1, 0, 0, -0.202, 0, 1);
  }
  20.42% {
    -webkit-transform: matrix3d(1.059, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, -0.17, 0, 1);
    transform: matrix3d(1.059, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, -0.17, 0, 1);
  }
  24.92% {
    -webkit-transform: matrix3d(1.018, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -0.091, 0, 1);
    transform: matrix3d(1.018, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -0.091, 0, 1);
  }
  28.33% {
    -webkit-transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.041, 0, 1);
    transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.041, 0, 1);
  }
  29.53% {
    -webkit-transform: matrix3d(0.988, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, -0.028, 0, 1);
    transform: matrix3d(0.988, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, -0.028, 0, 1);
  }
  34.03% {
    -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0.003, 0, 1);
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0.003, 0, 1);
  }
  39.44% {
    -webkit-transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.012, 0, 1);
    transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.012, 0, 1);
  }
  43.14% {
    -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0.01, 0, 1);
    transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0.01, 0, 1);
  }
  52.15% {
    -webkit-transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0.002, 0, 1);
    transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0.002, 0, 1);
  }
  61.66% {
    -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1);
    transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1);
  }
  70.37% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  83.98% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

/*doc
---
title: Cards
name: 02-components-040-cards-01-cards
category: Components - Cards
---

<style>
  .exampleOutput {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .exampleOutput .card {
    flex: 1 1 auto;
    margin: 12px;
    max-width: 440px;
  }

  .exampleOutput .bg {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    flex: 1 1 auto;
  }

  .exampleOutput .card--upload-photos {
    max-width: 640px;
  }

  .exampleOutput .card--upload-files {
    max-width: 552px;
  }

  .exampleOutput .card--document {
    max-width: 420px;
  }

  @media only screen and (min-width: 768px) {
    .exampleOutput .bg {
      flex: 1 1 270px;
      margin: 0;
    }

    .exampleOutput .card {
      flex: 1 1 270px;
    }
  }
</style>

<p>Cards are used to contain small amounts of focused information. They help when establishing hierarchy within a page or application because they stand out from normal page content. Cards can contain images, text and interactive elements such as buttons and text links. Cards can be color coded to establish visual different between multiple card types within the same view.</p>

<div class="row">
  <div class="col-md-6">
    <div class="card card--dark card--notification card--clickable">
      <div class="card__header">
        <h1 class="align-left">Data</h1>
        <h2 class="align-right">Today 13:21</h2>
      </div>
      <p class="card__text">Global roaming is now switched on</p>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card card--dark card--notification card--clickable">
      <div class="card__header">
        <h1 class="align-left">Data</h1>
        <h2 class="align-right">Today 13:21</h2>
      </div>
      <p class="card__text">Global roaming is now switched on</p>
    </div>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Actionable notification cards</h3>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-10@2x-9.jpg">
      <span class="fig-caption">Notification card with text-based content</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-11@2x-9.jpg">
      <span class="fig-caption">Grey variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-12@2x-5.jpg">
      <span class="fig-caption">Notification card with promotional imagery</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-13@2x-6.jpg">
      <span class="fig-caption">Grey variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-14@2x-4.jpg">
      <span class="fig-caption">Notification card with full width image</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-15@2x-4.jpg">
      <span class="fig-caption">Grey variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-16@2x-5.jpg">
      <span class="fig-caption">Notification card with full width image at top</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-17@2x-6.jpg">
      <span class="fig-caption">Grey variant</span>
    </div>
  </div>

  <h3>Multi-column card</h3>

  <p>Multi-column cards are designed to house multiple images with a single concept, e.g. ‘most recent’, ‘most popular’, ‘trending’, etc.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-18@2x-5.jpg">
      <span class="fig-caption">A gridded multi-column card</span>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-19@2x-2.jpg">
      <span class="fig-caption">Grey variant</span>
    </div>
  </div>

  <h3>Documents card</h3>

  <p>Document cards are designed to house complex information. They will often have a deeper level navigation spanning across multiple columns and require a strong typographic hierarchy.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-7-Copy-9@2x.jpg">
      <span class="fig-caption">Documents card with outgoing links</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-22@2x-4.jpg">
      <span class="fig-caption">Grey variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-23@2x-6.jpg">
      <span class="fig-caption">Timetable example with icons and outgoing links</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-24@2x-3.jpg">
      <span class="fig-caption">Grey variant</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Vertical spacing</h3>

  <p>The first card has a top margin of 24px and all cards beneath have a bottom margin of 16px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-17-Copy@2x.jpg">
      <span class="fig-caption">Vertical spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Horizontal spacing</h3>

  <p>The first card has a top margin of 24px and all cards beneath have a bottom margin of 16px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-17-Copy-2@2x.jpg">
      <span class="fig-caption">Horizontal spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>8 column grid</h3>

  <p>All cards are built on an 8 column grid structure that helps make them flexible across different grid sizes. Content inside the card can vary in size and padding to fit into the grid.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-17-Copy-3@2x.jpg">
      <span class="fig-caption">8 column grid</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Layout variations</h3>

  <p>Having a flexible grid system allows us to organise content within the card in various ways, fitting the needs of more content scenarios such as the use of icons and images.</p>

   <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-25@2x-4.jpg">
      <span class="fig-caption">Layout variations</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/cards/Group-26@2x-4.jpg">
        <span class="fig-caption">Typography</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Cards are used to group and smaller pieces of contain content in page, and give them extra emphasis. Cards are color coded based on the content they’re surfacing.</p>

<h2>How to use cards</h2>

<p>Use cards to give content clearer separation from the rest of the content in page. With the addition of color labelling, cards also helps to categorise content and makes wayfinding throughout products clearer.</p>

<h2>8 column grid</h2>

<p>All cards are built on an 8 column grid structure that helps make them flexible across different grid sizes. Content placed inside a card can change in size and padding to fit the variations in margin width and column width of the grid for the page that they're place inside. Use class <code>row</code> and classes <code>col-1</code> to <code>col-8</code> for the card grid.</p>

<h2>Clickable Cards</h2>

<p>Cards are by default not clickable. To make a card clickable add the class <code>card--clickable</code> to the card.</p>

```htmlmixed
<div class="card card--dark card--notification">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">Global roaming is now switched on</p>
</div>
<div class="card card--dark card--notification card--clickable">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">Global roaming is now switched on</p>
</div>
```

<h2>Corners</h2>

<p>To change the corners of the card to rounded or not rounded, set the class <code>card--rounded</code> or <code>card--not-rounded</code> to the card.</p>

```htmlmixed
<div class="card card--dark card--notification card--image-top card--clickable card--rounded">
  <div class="card__image" style="background-image:url('theme-build/img/samples/online_services.jpg')"></div>
  <div class="card__body">
    <div class="card__header">
      <h1 class="align-left">Swisscom TV</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <p class="card__text">We use our users’ data responsibly, to deliver relevant experiences.</p>
    <a href="javascript:void(0);" class="link">Find out more</a>
  </div>
</div>
<div class="card card--dark card--notification card--image-top card--clickable card--not-rounded">
  <div class="card__image" style="background-image:url('theme-build/img/samples/online_services.jpg')"></div>
  <div class="card__body">
    <div class="card__header">
      <h1 class="align-left">Swisscom TV</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <p class="card__text">We use our users’ data responsibly, to deliver relevant experiences.</p>
    <a href="javascript:void(0);" class="link">Find out more</a>
  </div>
</div>
```

<h2>Colors</h2>

<p>Cards can be color coded to establish visual different between multiple card types within the same view.</p>

```htmlmixed
<div class="card card--dark card--notification card--clickable">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">We use our users data responsibly, to deliver relevant experiences.</p>
</div>

<div class="card card--dark card--notification card--clickable card--blue">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">We use our users data responsibly, to deliver relevant experiences.</p>
</div>

<div class="card card--dark card--notification card--clickable card--purple">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">We use our users data responsibly, to deliver relevant experiences.</p>
</div>

<div class="card card--dark card--notification card--clickable card--turquoise">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">We use our users data responsibly, to deliver relevant experiences.</p>
</div>

<div class="card card--dark card--notification card--clickable card--apple">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">We use our users data responsibly, to deliver relevant experiences.</p>
</div>

<div class="card card--dark card--notification card--clickable card--iris">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">We use our users data responsibly, to deliver relevant experiences.</p>
</div>

<div class="card card--dark card--notification card--clickable card--petrol">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">We use our users data responsibly, to deliver relevant experiences.</p>
</div>

<div class="card card--dark card--notification card--clickable card--pink">
  <div class="card__header">
    <h1 class="align-left">Data</h1>
    <h2 class="align-right">Today 13:21</h2>
  </div>
  <p class="card__text">We use our users data responsibly, to deliver relevant experiences.</p>
</div>
```

<h2>Notification Cards</h2>

<p>Notification cards have by default rounded corners. If you want the card to have no rounded corners add the class <code>card--not-rounded</code> to the card.</p>

<h3>General Notification Card</h3>

```htmlmixed
<div class="bg bg--gray">
  <div class="card card--notification">
    <div class="card__header">
      <h1 class="align-left">Data</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <p class="card__text">Global roaming is now switched on</p>
  </div>
</div>
<div class="bg bg--light">
  <div class="card card--dark card--notification">
    <div class="card__header">
      <h1 class="align-left">Data</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <p class="card__text">Global roaming is now switched on</p>
  </div>
</div>
```

<h3>Actionable Notification Cards</h3>

```htmlmixed
<div class="bg bg--gray">
  <div class="card card--notification">
    <div class="card__header">
      <h1 class="align-left">Swisscom TV</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <p class="card__text">Download Swisscom TV 2.0 app on phone to view all your TV stats and usage</p>
    <a href="javascript:void(0);" class="link">Swisscom TV 2.0</a>
  </div>
</div>
<div class="bg bg--light">
  <div class="card card--dark card--notification">
    <div class="card__header">
      <h1 class="align-left">Swisscom TV</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <p class="card__text">Download Swisscom TV 2.0 app on phone to view all your TV stats and usage</p>
    <a href="javascript:void(0);" class="link">Swisscom TV 2.0</a>
  </div>
</div>
```

<h3>Image Top Notification Card</h3>

```htmlmixed
<div class="bg bg--gray">
  <div class="card card--notification card--image-top">
    <div class="card__image" style="background-image:url('theme-build/img/samples/online_services.jpg')"></div>
    <div class="card__body">
      <div class="card__header">
        <h1 class="align-left">Swisscom TV</h1>
        <h2 class="align-right">Today 13:21</h2>
      </div>
      <p class="card__text">We use our users’ data responsibly, to deliver relevant experiences.</p>
      <a href="javascript:void(0);" class="link">Find out more</a>
    </div>
  </div>
</div>
<div class="bg bg--light">
  <div class="card card--dark card--notification card--image-top">
    <div class="card__image" style="background-image:url('theme-build/img/samples/online_services.jpg')"></div>
    <div class="card__body">
      <div class="card__header">
        <h1 class="align-left">Swisscom TV</h1>
        <h2 class="align-right">Today 13:21</h2>
      </div>
      <p class="card__text">We use our users’ data responsibly, to deliver relevant experiences.</p>
      <a href="javascript:void(0);" class="link">Find out more</a>
    </div>
  </div>
</div>
```

<h3>Image Bottom Notification Card</h3>

```htmlmixed
<div class="bg bg--gray">
  <div class="card card--notification card--image-bottom">
    <div class="card__body">
      <div class="card__header">
        <h1 class="align-left">Swisscom TV</h1>
        <h2 class="align-right">Today 13:21</h2>
      </div>
      <p class="card__text">We use our users’ data responsibly, to deliver relevant experiences.</p>
      <a href="javascript:void(0);" class="link">Find out more</a>
    </div>
    <div class="card__image" style="background-image:url('theme-build/img/samples/online_services.jpg')"></div>
  </div>
</div>
<div class="bg bg--light">
  <div class="card card--dark card--notification card--image-bottom">
    <div class="card__body">
      <div class="card__header">
        <h1 class="align-left">Swisscom TV</h1>
        <h2 class="align-right">Today 13:21</h2>
      </div>
      <p class="card__text">We use our users’ data responsibly, to deliver relevant experiences.</p>
      <a href="javascript:void(0);" class="link">Find out more</a>
    </div>
    <div class="card__image" style="background-image:url('theme-build/img/samples/online_services.jpg')"></div>
  </div>
</div>
```

<h3>Promo Notification Card</h3>

```htmlmixed
<div class="bg bg--gray">
  <div class="card card--notification card--promo">
    <div class="card__header">
      <h1 class="align-left">Offers</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <img class="card__image" src="theme-build/img/samples/phones.png">
    <p class="card__text">Samsung Galaxy S6, 99 CHF monthly with our M tariff</p>
    <a href="javascript:void(0);" class="link">Find out more</a>
  </div>
</div>
<div class="bg bg--light">
  <div class="card card--dark card--notification card--promo">
    <div class="card__header">
      <h1 class="align-left">Offers</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <img class="card__image" src="theme-build/img/samples/phones.png">
    <p class="card__text">Samsung Galaxy S6, 99 CHF monthly with our M tariff</p>
    <a href="javascript:void(0);" class="link">Find out more</a>
  </div>
</div>
```

<h3>Notes Notification Card</h3>

```htmlmixed
<div class="bg bg--gray">
  <div class="card card--notification">
    <div class="card__header">
      <h1 class="align-left">Swisscom TV</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <p class="card__text">Combine your NATEL® infinity subscription with NATEL® data. Your benefits: greater speeds and data volume with any device, regardless of the location. You also benefit automatically from a monthly discount.</p>
  </div>
</div>
<div class="bg bg--light">
  <div class="card card--dark card--notification">
    <div class="card__header">
      <h1 class="align-left">Swisscom TV</h1>
      <h2 class="align-right">Today 13:21</h2>
    </div>
    <p class="card__text">Combine your NATEL® infinity subscription with NATEL® data. Your benefits: greater speeds and data volume with any device, regardless of the location. You also benefit automatically from a monthly discount.</p>
  </div>
</div>
```
<h2>Upload Cards</h2>

<p>Upload cards have by default not rounded corners. If you want the card to have rounded corners add the class <code>card--rounded</code> to the card.</p>

<h3>Uploaded Photos Card</h3>

```htmlmixed
<div class="card card--dark card--upload-photos card--apple">
  <div class="card__header">
    Most recently uploaded photos
  </div>
  <div class="card__body">
    <div class="card__image">
      <img src="theme-build/img/samples/online_services.jpg"/>
    </div>
    <div class="card__image">
      <img src="theme-build/img/samples/online_services.jpg"/>
    </div>
    <div class="card__image">
      <img src="theme-build/img/samples/online_services.jpg"/>
    </div>
    <div class="card__image">
      <img src="theme-build/img/samples/online_services.jpg"/>
    </div>
  </div>
</div>
```

<h3>Uploaded Files Card</h3>

```htmlmixed
<div class="card card--dark card--upload-files card--apple">
  <div class="card__header">
    Recently uploaded files
  </div>
  <div class="card__body">
    <div class="card__item">
      <div class="row">
        <div class="col-5 center-vertical">
          <i class="card__item-icon icon icon--pdf icon-123-document-pdf" aria-hidden="true"></i>
          <div class="card__text">sdx_grid.pdf</div>
        </div>
        <div class="col-2">
          <div class="card__text">27.04.2016</div>
        </div>
        <div class="col-1">
          <div class="card__text text-align-right">12:28</div>
        </div>
      </div>
    </div>
    <div class="card__item">
      <div class="row">
        <div class="col-5 center-vertical">
          <i class="card__item-icon icon icon--word icon-122-document-word" aria-hidden="true"></i>
          <div class="card__text">sdx_grid.docx</div>
        </div>
        <div class="col-2">
          <div class="card__text">27.04.2016</div>
        </div>
        <div class="col-1">
          <div class="card__text text-align-right">12:28</div>
        </div>
      </div>
    </div>
  </div>
</div>
```
<h2>Documents Cards</h2>

<p>Document cards have by default not rounded corners. If you want the card to have rounded corners add the class <code>card--rounded</code> to the card.</p>

<h3>Documents Card</h3>

```htmlmixed
<div class="card card--dark card--document card--turquoise">
  <div class="card__header">
    Documents
  </div>
  <div class="card__body">
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 center-vertical">
          <i class="card__item-icon icon icon--powerpoint icon-121-document-powerpoint" aria-hidden="true"></i>
          <div class="card__item-wrapper">
            <h1>Swisscom live erleben</h1>
            <p>26.03.2016</p>
          </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 center-vertical">
          <i class="card__item-icon icon icon--word icon-122-document-word" aria-hidden="true"></i>
          <div class="card__item-wrapper">
            <h1>Power Yoga</h1>
            <p>21.04.2016</p>
          </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 center-vertical">
          <i class="card__item-icon icon icon--excel icon-120-document-excel" aria-hidden="true"></i>
          <div class="card__item-wrapper">
            <h1>Swisscom Management Event</h1>
            <p>27.04.2016</p>
          </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 center-vertical">
          <i class="card__item-icon icon icon--pdf icon-123-document-pdf" aria-hidden="true"></i>
          <div class="card__item-wrapper">
            <h1>Swisscom live erleben</h1>
            <p>27.04.2016</p>
          </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 center-vertical">
          <i class="card__item-icon icon icon--word icon-122-document-word" aria-hidden="true"></i>
          <div class="card__item-wrapper">
            <h1>Swisscom live erleben</h1>
            <p>27.04.2016</p>
          </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
  </div>
  <div class="card__footer">
    <button class="link">
      Show more
    </button>
  </div>
</div>
```

<h3>Travel Card</h3>

```htmlmixed
<div class="card card--dark card--document card--pink">
  <div class="card__header">
    Travel
  </div>
  <div class="card__body">
    <div class="card__item">
      <div class="card__travel-station">
        <h1>Next trains</h1>
        <p>from <strong>Bern Station</strong></p>
      </div>
    </div>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-1">
          <i class="card__item-icon icon icon-097-suitcase" aria-hidden="true"></i>
        </div>
        <div class="col-3 card__travel-time">
          <p>in 5 min</p>
          <h1>17:45</h1>
        </div>
        <div class="col-3 card__travel-direction">
          <p>IR 2529 nach</p>
          <h1>Luzern</h1>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-1">
          <i class="card__item-icon icon icon-097-suitcase" aria-hidden="true"></i>
        </div>
        <div class="col-3 card__travel-time">
          <p>in 5 min</p>
          <h1>17:45</h1>
        </div>
        <div class="col-3 card__travel-direction">
          <p>IR 2529 nach</p>
          <h1>Luzern</h1>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-1">
          <i class="card__item-icon icon icon-097-suitcase" aria-hidden="true"></i>
        </div>
        <div class="col-3 card__travel-time">
          <p>in 5 min</p>
          <h1>17:45</h1>
        </div>
        <div class="col-3 card__travel-direction">
          <p>IR 2529 nach</p>
          <h1>Luzern</h1>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-1">
          <i class="card__item-icon icon icon-097-suitcase" aria-hidden="true"></i>
        </div>
        <div class="col-3 card__travel-time">
          <p>in 5 min</p>
          <h1>17:45</h1>
        </div>
        <div class="col-3 card__travel-direction">
          <p>IR 2529 nach</p>
          <h1>Luzern</h1>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>
```
<h2>News Cards</h2>

<p>The news card is available in the default and the <i>dark</i> style.</p>

```htmlmixed
<div class="bg bg-light">
  <div class="card card--news">
  <div class="card__image" style="background-image:url('theme-build/img/samples/online_services.jpg')"></div>
    <div class="card__body">
      <div class="card__header"><a class="align-left link" href="javascript:void(0);">Swisscom TV</a></div>
      <h4 class="card__title">Card 11</h4>
      <p class="text-b2 card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
      <div class="card__tray">
        <div class="tray-item"><i class="icon icon-043-heart" aria-hidden="true"></i><span class="count">9</span></div>
        <div class="tray-item"><i class="icon icon-080-speech-bubble" aria-hidden="true"></i><span class="count">11</span></div>
        <div class="tray-item"><i class="icon icon-082-star" aria-hidden="true"></i><span class="count">4</span></div>
      </div>
    </div>
  </div>
</div>
<div class="bg bg--gray">
  <div class="card card--news card--dark">
    <div class="card__image" style="background-image:url('theme-build/img/samples/online_services.jpg')"></div>
    <div class="card__body">
      <div class="card__header"><a class="align-left link" href="javascript:void(0);">Swisscom TV</a></div>
      <h4 class="card__title">Card 11</h4>
      <p class="text-b2 card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
      <div class="card__tray">
        <div class="tray-item"><i class="icon icon-043-heart" aria-hidden="true"></i><span class="count">9</span></div>
        <div class="tray-item"><i class="icon icon-080-speech-bubble" aria-hidden="true"></i><span class="count">11</span></div>
        <div class="tray-item"><i class="icon icon-082-star" aria-hidden="true"></i><span class="count">4</span></div>
      </div>
    </div>
  </div>
</div>
```

<h3>Linkbox with icon</h3>

```htmlmixed
<div class="card card--navigation card--dark card--document card--blue">
  <div class="card__header">
    <i class="icon icon-160-wlan icon--s2" aria-hidden="true"></i> WLAN
  </div>
  <div class="card__body">
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 card__item-wrapper">
          <h1>Switch on WLAN</h1>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 card__item-wrapper">
          <h1>WLAN password and settings</h1>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>
```

<h3>Linkbox without truncate</h3>

```htmlmixed
<div class="card card--navigation card--dark card--document card--blue">
  <div class="card__header">
     <i class="icon icon-165-transmitter icon--s2" aria-hidden="true"></i> Swisscom public WLAN
  </div>
  <div class="card__body">
    <a class="card__item card__item--no-truncate" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 card__item-wrapper">
          <h1>Surf the internet with your tablet, notebook or smartphone at hotspots.</h1>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>
```
<h3>Linkbox with additional text element and link</h3>

```htmlmixed
<div class="card card--navigation card--dark card--document card--blue">
  <div class="card__header">
     <i class="icon icon-047-key icon--s2" aria-hidden="true"></i> Passwords & login
  </div>
  <div class="card__body">
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 card__item-wrapper">
          <h1>Change Swisscom Login password</h1>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <div class="card__text">
      Please update your password <a class="link" href="#">here</a>
    </div>
  </div>
</div>
```

<h3>Linkbox no background</h3>

```htmlmixed
<div class="card card--document card--no-color">
  <div class="card__body">
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 center-vertical">
          <div class="card__item-wrapper">
            <h1>iPhone 7</h1>
            <p>Settings, SIM-Options, PUK</p>
          </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 center-vertical">
          <div class="card__item-wrapper">
            <h1>MobilePay</h1>
            <p>Manage EasyPay, Natel®Pay-Options</p>
          </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
     <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-6 center-vertical">
          <div class="card__item-wrapper">
            <h1>Devices and SIM</h1>
            <p>Settings, SIM-Options, PUK</p>
          </div>
        </div>
        <div class="col-1 center-vertical">
        <div class="badge badge--icon">
          <span class="badge__content">8</span>
        </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
    <a class="card__item" href="javascript:void(0);">
      <div class="row center-vertical">
        <div class="col-7 center-vertical">
          <div class="card__item-wrapper">
            <h1>Technical Support</h1>
            <p>Help and Support</p>
          </div>
        </div>
        <div class="col-1 text-align-right">
          <div class="card__item-detail">
            <i class="icon icon-015-chevron-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>
```

<h4>Action Message Card</h4>

```htmlmixed
<div class="card card--message-action card--dark card--icon">
  <i class="card__item-icon icon icon-023-download icon--s3"></i>
  <div class="card__body">
    <p>Export your product list and learn more about your products.
      <a class="link link--underline" href="javascript:void(0);">Product list with more details</a>
    </p>
  </div>
</div>
```

<h4>Info Message Card</h4>

```htmlmixed
<div class="card card--message-info card--icon card--border">
  <i class="card__item-icon icon icon-046-information-circle icon--s3"></i>
  <div class="card__body">
    <h4>Improve your WLAN quality</h4>
    <p>With the help of the <a href="javascript:void(0);">My Swisscom Assistant</a> you can improve your WLAN quality.
    </p>
  </div>
</div>
```

<h4>Success Message Card</h4>

```htmlmixed
<div class="card card--message-success card--icon card--border">
  <i class="card__item-icon icon icon-012-check-mark-circle icon--s3"></i>
  <div class="card__body">
    <h4>Your registration has succeeded</h4>
    <p>To resend your verification e-mail
      <a href="javascript:void(0);">click here</a>.
    </p>
  </div>
</div>
```

<h4>Important Message Card</h4>

```htmlmixed
<div class="card card--message-important card--icon card--border">
  <i class="card__item-icon icon icon-026-exclamation-mark-circle icon--s3"></i>
  <div class="card__body">
    <h4>Router problems</h4>
    <p>Your DSL router cannot be reached. Therefore, it is only possible to view or print your data at the moment.</p>
  </div>
</div>
```

<h4>Alert Message Card</h4>

```htmlmixed
<div class="card card--message-alert card--icon card--border">
  <i class="card__item-icon icon icon-026-exclamation-mark-circle icon--s3"></i>
  <div class="card__body">
    <h4>COMBOX® not found</h4>
    <p>No COMBOX® could be found with the number 079 12355 88. Not all COMBOX®-numbers can be displayed.</p>
  </div>
</div>
```

<h4>Message Card with huge content (to be used only for message cards with a title)</h4>
<p>Here you have the option to align the content on the left</p>

```htmlmixed
<div class="card card--message-important card--icon card--border card--compact">
  <i class="card__item-icon icon icon-026-exclamation-mark-circle icon--s3" aria-hidden="true"></i>
  <div class="card__body">
    <h4>Router problems</h4>
    <p>Your DSL router cannot be reached. Therefore, it is only possible to view or print your data at the moment. If you would like to change your data please ensure that your DSL router is switched on.
		If this warning also appears when the DSL router is switched on, please <a href="">log in to the Customer Center</a> to make changes later.
    </p>
  </div>
</div>
```

*/
.card {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 24px;
  background: #fff;
  color: #333;
  overflow: hidden;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card .row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -4px;
  margin-right: -4px;
}

.card .col,
.card [class*='col-'] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 4px;
  padding-right: 4px;
}

.card .col {
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.card .col-1 {
  -webkit-flex: 0 0 12.5%;
  -ms-flex: 0 0 12.5%;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.card .col-2 {
  -webkit-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.card .col-3 {
  -webkit-flex: 0 0 37.5%;
  -ms-flex: 0 0 37.5%;
  flex: 0 0 37.5%;
  max-width: 37.5%;
}

.card .col-4 {
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.card .col-5 {
  -webkit-flex: 0 0 62.5%;
  -ms-flex: 0 0 62.5%;
  flex: 0 0 62.5%;
  max-width: 62.5%;
}

.card .col-6 {
  -webkit-flex: 0 0 75%;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.card .col-7 {
  -webkit-flex: 0 0 87.5%;
  -ms-flex: 0 0 87.5%;
  flex: 0 0 87.5%;
  max-width: 87.5%;
}

.card .col-8 {
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.card .pull-0 {
  right: auto;
}

.card .pull-1 {
  right: 12.5%;
}

.card .pull-2 {
  right: 25%;
}

.card .pull-3 {
  right: 37.5%;
}

.card .pull-4 {
  right: 50%;
}

.card .pull-5 {
  right: 62.5%;
}

.card .pull-6 {
  right: 75%;
}

.card .pull-7 {
  right: 87.5%;
}

.card .pull-8 {
  right: 100%;
}

.card .push-0 {
  left: auto;
}

.card .push-1 {
  left: 12.5%;
}

.card .push-2 {
  left: 25%;
}

.card .push-3 {
  left: 37.5%;
}

.card .push-4 {
  left: 50%;
}

.card .push-5 {
  left: 62.5%;
}

.card .push-6 {
  left: 75%;
}

.card .push-7 {
  left: 87.5%;
}

.card .push-8 {
  left: 100%;
}

.card .offset-1 {
  margin-left: 12.5%;
}

.card .offset-2 {
  margin-left: 25%;
}

.card .offset-3 {
  margin-left: 37.5%;
}

.card .offset-4 {
  margin-left: 50%;
}

.card .offset-5 {
  margin-left: 62.5%;
}

.card .offset-6 {
  margin-left: 75%;
}

.card .offset-7 {
  margin-left: 87.5%;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fff;
}

.card .card__header {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  font-weight: 400;
}

.card .card__footer {
  padding: 24px;
}

.card .card__text {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  margin: 0;
}

.card .link::before {
  content: '';
  display: block;
  margin-top: 4px;
}

.card--dark {
  background: #eef3f6;
}

.card.card--clickable {
  cursor: pointer;
}

.card.card--clickable:hover {
  background: #f0f5f7;
}

.card.card--clickable:hover.card--dark {
  background: #e0e5e9;
}

.card--notification {
  padding: 12px 16px 20px;
  border-radius: 3px;
}

.card--notification .card__header::after {
  content: '';
  display: block;
  clear: both;
}

.card--notification .card__header h1,
.card--notification .card__header h2 {
  line-height: 24px;
  letter-spacing: .1px;
  font-size: 14px;
  margin-bottom: 4px;
}

.card--notification .card__header h1 {
  font-weight: 600;
}

.card--notification .card__header h2 {
  font-weight: 400;
  color: #666;
}

.card--image-top, .card--image-bottom {
  padding: 0;
}

.card--image-top::before, .card--image-bottom::before {
  content: none;
}

.card--image-top .card__image, .card--image-bottom .card__image {
  position: relative;
  width: 100%;
  height: 168px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.card--image-top .card__image::before, .card--image-bottom .card__image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card--image-top .card__body, .card--image-bottom .card__body {
  position: relative;
  padding: 12px 16px 20px;
}

.card--image-top .card__body::before, .card--image-bottom .card__body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #015;
}

.card--image-top .card__image::before {
  border-radius: 3px 3px 0 0;
}

.card--image-top.card--clickable:hover .card__image::before {
  opacity: 1;
}

.card--image-bottom .card__image::before {
  border-radius: 0 0 3px 3px;
}

.card--image-bottom.card--clickable:hover .card__image::before {
  opacity: 1;
}

.card--promo .card__image {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card--promo.card--clickable:hover .card__image {
  opacity: .95;
}

.card--upload-photos {
  padding-top: 23px;
  padding-bottom: 24px;
  border-radius: 0;
}

.card--upload-photos .card__header {
  padding-bottom: 25px;
}

.card--upload-photos .card__body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.card--upload-photos .card__image:not(:last-child) {
  margin-right: 20px;
}

.card--upload-photos .card__image img {
  display: block;
  width: auto;
  height: 103px;
}

.card--upload-files {
  padding: 0;
  border-radius: 0;
}

.card--upload-files .card__header {
  padding: 25px 24px 21px;
  border-bottom: 1px solid #dde3e7;
}

.card--upload-files .card__item {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  padding: 21px 24px 22px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.card--upload-files .card__item:not(:last-child) {
  border-bottom: 1px solid #dde3e7;
}

.card--upload-files .card__item .card__item-icon {
  margin-right: 6px;
  float: left;
  font-size: 30px;
}

.card--upload-files .card__item .card__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card--document {
  padding: 0;
  border-radius: 0;
}

.card--document a {
  margin: 0;
  color: inherit;
  border-bottom: inherit;
}

.card--document a .card__item-detail {
  color: #1781e3;
}

.card--document a:hover .card__item-detail {
  color: #0851da;
}

.card--document .card__header {
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  font-weight: 300;
  padding: 22px 24px 17px;
  border-bottom: 1px solid #dde3e7;
}

.card--document .card__footer {
  border-top: 1px solid #dde3e7;
  text-align: center;
}

.card--document .card__item {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  display: block;
  padding: 15px 24px 16px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.card--document .card__item:not(:last-child) {
  border-bottom: 1px solid #dde3e7;
}

.card--document .card__item .card__item-icon {
  margin-top: 1px;
  margin-right: 6px;
  float: left;
  font-size: 30px;
}

.card--document .card__item .card__item-detail {
  font-size: 21px;
}

.card--document .card__item .card__item-detail .icon {
  font-weight: 600;
}

.card--document .card__item .card__item-wrapper {
  overflow: hidden;
}

.card--document .card__item .card__item-wrapper p:hover {
  text-decoration: underline;
  color: #0851da;
}

.card--document .card__item .card__item--no-truncate h1,
.card--document .card__item .card__item--no-truncate p {
  white-space: normal;
}

.card--document .card__item h1,
.card--document .card__item p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.card--document .card__item h1 {
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0;
  font-size: 16px;
}

.card--document .card__item p {
  line-height: normal;
  letter-spacing: .1px;
  font-size: 14px;
  color: #666;
}

.card--document .card__travel-station h1 {
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  font-weight: 300;
  color: #666;
}

.card--document .card__travel-station p {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  font-weight: 300;
  color: #666;
}

.card--document .card__travel-station p strong {
  font-weight: 600;
  color: #333;
}

.card--document .card__travel-time h1 {
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  font-weight: 300;
  color: #333;
}

.card--document .card__travel-time p {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 400;
  color: #666;
}

.card--document .card__travel-direction h1 {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.card--document .card__travel-direction p {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 400;
  color: #666;
}

.card--news {
  padding: 0;
}

.card--news::before {
  content: none;
}

.card--news .card__image {
  position: relative;
  width: 100%;
  height: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  overflow: hidden;
}

.card--news .card__header::after {
  content: '';
  display: block;
  clear: both;
}

.card--news .card__header h2,
.card--news .card__header p,
.card--news .card__header a {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
}

.card--news .card__body {
  position: relative;
  padding: 7px 16px 12px;
}

.card--news .card__body .card__title {
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 5px;
}

.card--news .card__body .card__text {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 400;
}

.card--news .card__tray {
  width: 100%;
  margin-top: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.card--news .tray-item {
  position: relative;
  margin-right: 30px;
}

.card--news .tray-item .icon {
  color: #1781e3;
  font-size: 24px;
}

.card--news .tray-item .count {
  font-weight: 400;
  position: absolute;
  top: -4px;
  font-size: 12px;
  color: #333;
}

.card--dark.card--news {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #015;
  color: #fff;
}

.card--dark.card--news .tray-item .count {
  color: #1781e3;
}

.card--rounded {
  border-radius: 3px;
}

.card--not-rounded,
.card--not-rounded .card__image::before {
  border-radius: 0;
}

.card--border {
  border: 0 solid #d6d6d6;
  border-width: 0 1px 1px 1px;
}

.card--navigation .card__header .icon {
  margin-right: 16px;
}

.card--navigation .card__item:hover {
  text-decoration: underline;
  -webkit-text-decoration-color: #0851da;
  text-decoration-color: #0851da;
}

.card--navigation .card__item h1 {
  font-size: 16px;
  font-weight: normal;
}

.card--navigation .card__text {
  padding: 15px 24px;
}

.card--navigation .card__text a {
  color: #1781e3;
}

.card--navigation .card__text a:hover {
  color: #0851da;
}

.card--navigation .card__text .link::before {
  content: normal;
}

.card--icon .card__body {
  padding-bottom: 0;
  padding-left: 50px;
  padding-right: 0;
  padding-top: 3px;
}

.card--compact .card__body {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 3px;
}

.card--compact .card__body > h4 {
  padding-left: 50px;
}

.card__item-icon {
  float: left;
}

.card--message-action::before {
  background: #1781e3;
}

.card--message-action .card__item-icon {
  color: #1781e3;
}

.card--message-info::before {
  background: #0eaba9;
}

.card--message-info .card__item-icon {
  color: #0eaba9;
}

.card--message-success::before {
  background: #25b252;
}

.card--message-success .card__item-icon {
  color: #25b252;
}

.card--message-important::before {
  background: #ff8b2e;
}

.card--message-important .card__item-icon {
  color: #ff8b2e;
}

.card--message-alert::before {
  background: #d12;
}

.card--message-alert .card__item-icon {
  color: #d12;
}

.card--navy::before {
  background: #015;
}

.card--blue::before {
  background: #1781e3;
}

.card--purple::before {
  background: #a63297;
}

.card--turquoise::before {
  background: #0eaba9;
}

.card--apple::before {
  background: #91ba2f;
}

.card--iris::before {
  background: #5944c6;
}

.card--petrol::before {
  background: #19657a;
}

.card--pink::before {
  background: #e61e64;
}

.card--orchid::before {
  background: #a63297;
}

.card--green::before {
  background: #25b252;
}

.card--orange::before {
  background: #ff8b2e;
}

.card--red::before {
  background: #d12;
}

.card--no-color::before {
  background: #d6d6d6;
  height: 1px;
}

.card .badge.badge--icon {
  margin: 0 0 16px 16px;
}

[class^="card card--message-"] .card__body h4 {
  margin-bottom: 24px;
}

/*doc
---
title: Loading bar
name: 02-components-085-loader-bar-01
category: Components - Loading bar
---

<p>Loading bars are percentage based data visualisations that show users how far along a process they are, for example file upload.</p>

<button class="button button--primary" onclick="incrementProgress01()">Increase progress</button>

<div>
  <div id="bar01" class="loader-bar">
    <div class="detail">
      <div class="name">TestFile.jpg</div>
      <div class="detail-right">
        <div class="progress">50%</div>
        <div class="file-size">of 1.5MB</div>
      </div>
    </div>
    <div class="loader-bar--progress">
      <div class="indicator" style="width: 50%"></div>
    </div>
  </div>
</div>

<script>
  function incrementProgress01(val) {
    if(!window.progress) {
      window.progress = 0;
    }

    var bar = new sdx.LoaderBar(document.querySelector("#bar01"))
    bar.filename = "TestFile.jpg"

    window.progress += 0.031;

    if (window.progress > 1) {
      window.progress = 0;
    }

    bar.progress = window.progress;
  }
</script>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Standard</h3>

  <p>The green bar indicates the percentage of a task that is underway.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/loading_bar/Group-3@2x-5.jpg">
      <span class="fig-caption">Loading bar with 30% completed</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Completed</h3>

  <p>When completed, the right text with the percentage switches to green</p>

  <div>
    <div class="loader-bar">
      <div class="detail">
        <div class="name">TestFile.jpg</div>
        <div class="detail-right">
          <div class="progress">100%</div>
          <div class="file-size">of 1.5MB</div>
        </div>
      </div>
      <div class="loader-bar--progress">
        <div class="indicator" style="width: 100%"></div>
      </div>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Bars and data</h3>

  <p>Bars containing data should have rounded ends. The bar that indicates data should always have a flat end.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/loading_bar/Group-5@2x-3.jpg">
      <span class="fig-caption">Rounded edge bar and flat edge data</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/loading_bar/Group-6@2x-7.jpg">
      <span class="fig-caption">Typography</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>The SDX loading bar component with support for displaying the current progress as a bar, and with optional detail captions.</p>

<button class="button button--primary" onclick="incrementProgress02()">Increase progress</button>

```htmlmixed
<div id="bar02" class="loader-bar">
  <div class="detail">
    <div class="name">File_name.jpg</div>
    <div class="detail-right">
      <div class="progress">70%</div>
      <div class="file-size">of 1.5MB</div>
    </div>
  </div>
  <div class="loader-bar--progress">
    <div class="indicator" style="width: 70%"></div>
  </div>
</div>
```

<script>
  function incrementProgress02(val) {
    if (!window.progress02) {
      window.progress02 = 0;
    }

    var bar = new sdx.LoaderBar(document.querySelector("#bar02"))
    bar.filename = "TestFile.jpg"

    window.progress02 += 0.031;

    if (window.progress02 > 1) {
      window.progress02 = 0;
    }

    bar.progress = window.progress02;
  }
</script>

<h3>Loader without detail text</h3>

<button class="button button--primary" onclick="incrementProgress03()">Increase progress</button>

```htmlmixed
<div id="bar03" class="loader-bar loader-bar--progress">
  <div class="indicator" style="width: 50%"></div>
</div>
```

<script>
  function incrementProgress03(val) {
    if (!window.progress03) {
      window.progress03 = 0;
    }

    var bar = new sdx.LoaderBar(document.querySelector("#bar03"));
    window.progress03 += 0.031;

    if (window.progress03 > 1) {
      window.progress03 = 0;
    }

    bar.progress = window.progress03;
  }
</script>

<h2>Loader bar on dark backgrounds</h2>

<p>Loader spinners are also available on dark backgrounds, just annotate the parent background element with the <code>.bg--dark</code> class and the loader will automatically adjust their styling accordingly.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="loader-bar">
    <div class="detail">
      <div class="name">File_name.jpg</div>
      <div class="progress">
        70% <span class="file-size">of 1.5MB</span>
      </div>
    </div>
    <div class="loader-bar--progress">
      <div class="indicator" style="width: 70%"></div>
    </div>
  </div>
</div>
```
<h2>Loading bar Component</h2>

<p>To use update the loader bar component from JavaScript use the provided <code>LoaderBar</code> JavaScript component.</p>

```htmlmixed_no_preview
<script>
  var bar = new sdx.LoaderBar(document.querySelector("#bar01"))
  bar.filename = "TestFile.jpg"
  window.progress = 0.25;
</script>
```

<h3>Updating progress</h3>
<p>To update the progress of the LoaderBar set the <code>progess</code> property to the desired value in the range from <code>0..1</code>.</p>

<h3>Set the filename</h3>
<p>The filename can be set using the `filename` property.</p>
<p><i>Note: If the detail element is not defined in your markup, setting the filename will cause an error to be thrown.</i></p>

<h3>Set the file size</h3>
<p>The file size can be set using the `fileSize` property.</p>
<p><i>Note: If the detail element is not defined in your markup, setting the fileSize will cause an error to be thrown.</i></p>
*/
.loader-bar {
  position: relative;
  width: 100%;
}

.loader-bar > .detail {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8px;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.loader-bar > .detail .name {
  text-align: left;
}

.loader-bar > .detail .detail-right .progress {
  display: inline-block;
  text-align: right;
}

.loader-bar > .detail .detail-right .file-size {
  display: none;
}

.loader-bar > .detail .detail-right .file-size::before {
  content: '\00a0 ';
}

@media (min-width: 480px) {
  .loader-bar > .detail .detail-right .file-size {
    display: inline;
    float: right;
  }
}

.loader-bar--progress {
  border-radius: 5px;
  position: relative;
  background-color: #d8d8d8;
  width: 100%;
  height: 10px;
  overflow: hidden;
}

.loader-bar--progress > .indicator {
  position: absolute;
  top: 0;
  left: 0;
  transition: width 90ms linear;
  z-index: 30;
  background-color: #25b252;
  width: 0%;
  height: 10px;
}

.loader-bar--progress > .indicator::after {
  position: absolute;
  top: 0;
  right: -5px;
  background: inherit;
  width: 10px;
  height: 10px;
  content: '';
}

.loader-bar--progress > .indicator--busy {
  left: 0;
  -webkit-animation: busy 2.1s linear infinite;
  animation: busy 2.1s linear infinite;
  width: 50%;
  will-change: left, right;
}

.loader-bar--progress > .indicator--busy::before {
  position: absolute;
  top: 0;
  left: -5px;
  background: inherit;
  width: 10px;
  height: 10px;
  content: '';
}

.bg--dark .loader-bar--progress {
  background-color: #fff;
}

@-webkit-keyframes busy {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

@keyframes busy {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

/*doc
---
title: Status
name: 02-components-165-status
category: Components - Status
---

```htmlmixed
<p><span class="status"></span></p>
```

<p>Example usage for unread/read messages:</p>

```htmlmixed
<div class="table table--responsive">
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th data-type="text">Status</th>
          <th data-type="text">Name</th>
          <th data-type="text">Subject</th>
          <th data-type="text">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="status"></span></td>
          <td>Aria Stark</td>
          <td>On the road</td>
          <td>23.05.1910</td>
        </tr>
        <tr>
          <td></td>
          <td>John Snow</td>
          <td>Winter</td>
          <td>11.01.1910</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```
*/
.status {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  display: inline-block;
  background-color: #1781e3;
}

/*doc
---
title: Modals
name: 02-components-105-modals-01-overview
category: Components - Modals
---

<p>Modals are pop up windows that are used to delivery timely information, or request action from users.</p>

<p>A responsive test page for the Modal dialog: <a href="/samples/modal.html">samples/modal</a>.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
    <img class="img-responsive" src="./theme-build/img/design/modal/Group-11@2x.JPG">
  </div>
  <div class="col-xs-12 col-lg-6">
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Standard modals</h3>

  <p>For devices over 768px wide use modal windows with side by side CTAs. Mobile modals use full width and stacked CTA’s to save horizontal space.<br />Buttons align right on modals used for >768px devices.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-11@2x.JPG">
      <span class="fig-caption">768px uses side by size modals</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-12@2x-9.jpg">
      <span class="fig-caption">768px modal view uses stacked CTA to save horizontal space</span>
    </div>
  </div>

  <h3>Icon modal</h3>

  <p>The icon modal varies in sizes, depending on the number of icons inside. These icons are distibuted evenly across the modal. When displaying more than five icons, a dividing line helps to separate the rows of icons.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-13@2x-10.jpg">
      <span class="fig-caption">Modal with two icons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-14@2x-7.jpg">
      <span class="fig-caption">Modal with three icons</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Overlay</h3>

  <p>The ovelay is a globally 40% #333333 on all modal styles. The modal is always vertically centered within the viewport.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-13@2x-14.jpg">
      <span class="fig-caption">Background overlay color</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Stacked buttons</h3>

  <p>Use no more than three stack buttons to avoid the modal getting too long.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-18@2x-7.jpg">
      <span class="fig-caption">Stacked buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/modal/Group-21@2x-6.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Modals are used to display content in a layer above the app. There can only be one active modal dialog at a given time.</p>

<h2>Interactive sample</h2>

<p>A responsive test page for the Modal dialog is available at <a href="/samples/modal.html">samples/modal</a>. In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.</p>

<h2>Usage</h2>

<style>
  .codeExample .backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .codeExample .modal {
    position: relative;
  }

  codeExample. .modal__content {
    margin: 24px;
    width: 100%;
  }
</style>

<p>There are serveral options for opening and closing a modal dialog, either use the <code>Modal</code> JavaScript component directly and call the <code>open()</code> and <code>close()</code> methods on the component; or add a button with the class <code>modal-trigger</code> and a <code>href</code> attribute with the id of the target modal dialog.</p>

```htmlmixed
<button class="button button--primary modal-trigger" href="myModalDialog">Open modal</button>
```

<p>To close the dialog either call <code>close()</code> on the component manually or apply either the <code>modal-close</code> or <code>modal-cancel</code> class to a button in the current modal dialog. Both of this states will dispatch an event when executed, this enables other frontend code to react to the selected user action if required.</p>

<h3>Modal dialog with two buttons</h3>

```htmlmixed
<div class="modal modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <div class="modal__header">
      <h1>Delete file</h1>
      <button class="modal__close modal-cancel" aria-label="Close">
        <i class="icon icon-022-close" aria-hidden="true"></i>
      </button>
    </div>
    <div class="modal__body">
      <p>
        Do you want to delete <strong>SDX_Library_Master.pdf</strong>?
      </p>
      <div class="button-group button-group--responsive">
        <button class="button button--responsive button--primary align-right modal-close">
          Yes, delete
        </button>
        <button class="button button--responsive button--secondary modal-cancel">
          No, keep it
        </button>
      </div>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```

<h3>Modal dialog with three buttons</h3>

```htmlmixed
<div class="modal modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <div class="modal__header">
      <h1>Delete file</h1>
      <button class="modal__close modal-cancel" aria-label="Close">
        <i class="icon icon-022-close" aria-hidden="true"></i>
      </button>
    </div>
    <div class="modal__body">
      <p>
        Do you want to delete <strong>SDX_Library_Master.pdf</strong>?
      </p>
      <div class="button-group button-group--responsive">
        <button class="button button--responsive button--primary modal-close">
          Yes, delete
        </button>
        <button class="button button--responsive button--secondary modal-cancel">
          No, keep it
        </button>
        <button class="button button--responsive button--secondary">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>
<div class="backdrop backdrop--open"></div>
```
*/
.js-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900001;
  width: 100%;
  height: 100%;
  outline: none;
  pointer-events: none;
}

.modal--open {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.modal--open .modal__content {
  -webkit-transform: scale(1);
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

.modal > .container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.modal__content {
  position: relative;
  margin: auto;
  max-height: calc(100vh - 80px);
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  padding: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
  transition: opacity 300ms 50ms, visibility 300ms 50ms, -webkit-transform 300ms 50ms;
  transition: transform 300ms 50ms, opacity 300ms 50ms, visibility 300ms 50ms;
  transition: transform 300ms 50ms, opacity 300ms 50ms, visibility 300ms 50ms, -webkit-transform 300ms 50ms;
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 13px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: #015;
}

@media (min-width: 1024px) {
  .modal__close {
    top: 24px;
    right: 26px;
  }
}

.modal__close .icon {
  line-height: 32px;
  font-size: 24px;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .modal__close .icon {
    font-size: 30px;
    font-weight: 600;
  }
}

.modal__header {
  border-bottom: 1px solid #d6d6d6;
  padding: 20px 64px 0 24px;
  width: 100%;
  height: 64px;
}

@media (min-width: 1024px) {
  .modal__header {
    padding: 24px 64px 0 32px;
    height: 80px;
  }
}

.modal__header h1,
.modal__header h2,
.modal__header h3,
.modal__header h4,
.modal__header h5,
.modal__header h6 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}

.modal__header h1 {
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
}

@media (min-width: 1024px) {
  .modal__header h1 {
    font-weight: 300;
    line-height: 32px;
    letter-spacing: -.35px;
    font-size: 24px;
  }
}

.modal__body {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  overflow-y: auto;
  max-height: calc(100vh - 80px - 80px);
  padding: 21px 24px 24px;
}

@media (min-width: 1024px) {
  .modal__body {
    padding: 29px 32px 32px;
  }
}

.modal__body .button-group {
  margin-top: 21px;
}

@media (min-width: 1024px) {
  .modal__body .button-group {
    margin-top: 34px;
  }
}

@media (max-width: 479px) {
  .modal > .container {
    width: calc(102% - (2 * 24px));
  }
}

.backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 600ms, visibility 600ms;
  visibility: hidden;
  opacity: 0;
  z-index: 900000;
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
}

.backdrop--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/*doc
---
title: Menu (flyout and contextual)
name: 02-components-100-menu-01-flyout
category: Components - Menu (flyout and contextual)
---

<p>Flyout and contextual menus are used to house additional functionality and content within various different contexts. They can be used to house quick links within cards, profile information and settings, as well as to provide additional contextual functionality.</p>

<div>
  <sdx-menu-flyout>
    <sdx-menu-flyout-toggle>
      <sdx-icon icon-name="icon-001-account" size="2" />
    </sdx-menu-flyout-toggle>

    <sdx-menu-flyout-list>
      <sdx-menu-flyout-list-item onclick="console.log('Deutsch');">Deutsch</sdx-menu-flyout-list-item>
      <sdx-menu-flyout-list-item>English</sdx-menu-flyout-list-item>
      <sdx-menu-flyout-list-item>Français</sdx-menu-flyout-list-item>
      <sdx-menu-flyout-list-item>Italiano</sdx-menu-flyout-list-item>
    </sdx-menu-flyout-list>
  </sdx-menu-flyout>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Regular flyout menu</h3>

  <p>Regular menus, or ‘flyouts’ are used to reveal functionality that’s behind an icon other than the navigation, such as settings and preferences, or glance views of your basket.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-7@2x-10.jpg">
      <span class="fig-caption">Regular flyout</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-9@2x-11.jpg">
      <span class="fig-caption">Regular flyout with hover on first nav item</span>
    </div>
  </div>

  <h3>Flyout with CTAs</h3>

  <p>These menus can also be used to house text, and often feature titles to give a welcome message or title to explain the purpose of the menu. They can also contain a call to action (CTA), following the conventional logic for buttons.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-10@2x-13.jpg">
      <span class="fig-caption">Flyout with CTA</span>
    </div>
    <div class="col-xs-12 col-lg-6"></div>
  </div>

  <h3>Profile menu</h3>

  <p>Profile menus are the most complex form of menu, handling three different types of content in a single view. They feature listed offers contained within a grey panel, short text passages to give information to the user, and listed text links and CTAs.</p>

  <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-11@2x-12.jpg">
  <span class="fig-caption">Three column profile menu</span>

  <h3>Basket menu</h3>

  <p>Basket menus feature a two column structure to help house more complex information. These included the use of thumbnail images, product names, descriptions and price, as well as running totals. They also contain CTAs for checkout.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-12@2x-11.jpg">
      <span class="fig-caption">Regular flyout</span>
    </div>
  </div>

  <h3>Contextual menus</h3>

  <p>Contextual menus are used to surface additional functionality relevant to a page on native applications, while still prioritising a key function that is most commonly used in that instance. The additional functionality is hidden inside an ellipsis icon.</p>
  <p>When placed in a button, they can be fixed to the bottom of the viewport. This makes it easy and quick for the user.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-13@2x-12.jpg">
      <span class="fig-caption">Closed contextual menu</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-14@2x-9.jpg">
      <span class="fig-caption">Open contextual menu</span>
    </div>
  </div>

  <h3>Contextual flyout menu</h3>

  <p>Contextual flyout menus are used for in page functionality on web based applications. They can be global to a page, or be fixed to an element on the page to reveal additional functionality specific to that element.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-15@2x-11.jpg">
      <span class="fig-caption">Regular flyout</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-16@2x.png">
      <span class="fig-caption">Regular flyout with hover on first list item</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Spacing around menus</h3>

  <p>All menus have a margin of 24px around the element.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-17-Copy-4@2x.jpg">
      <span class="fig-caption">Spacing around menus</span>
    </div>
    <div class="col-xs-12 col-lg-6"></div>
  </div>

  <h3>Grid structure</h3>

  <p>Profile menus follow the Swisscom grid, with the account sub navigation only ever using two columns. Promotional content can vary in size, typically taking up 2 or 3 columns.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-17-Copy-6@2x.jpg">
      <span class="fig-caption">Grid structure</span>
    </div>
    <div class="col-xs-12 col-lg-6"></div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-18@2x-9.jpg">
      <span class="fig-caption">Grid structure</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h2>Flyout Menu</h2>

<p>Flyout Menus are used to reveal functionality that’s behind an icon other than the navigation, such as settings and preferences, or glance views of your basket.</p>

```htmlmixed_webcomponent_sdx-menu-flyout
<sdx-menu-flyout>
  <sdx-menu-flyout-toggle>
    <sdx-icon icon-name="icon-001-account" size="2" />
  </sdx-menu-flyout-toggle>

  <sdx-menu-flyout-list>
    <sdx-menu-flyout-list-item onclick="console.log('Deutsch');">Deutsch</sdx-menu-flyout-list-item>
    <sdx-menu-flyout-list-item>English</sdx-menu-flyout-list-item>
    <sdx-menu-flyout-list-item>Français</sdx-menu-flyout-list-item>
    <sdx-menu-flyout-list-item>Italiano</sdx-menu-flyout-list-item>
  </sdx-menu-flyout-list>
</sdx-menu-flyout>
```

<h3>Flyout with CTAs</h3>

<p>These menus can also be used to house text, and often feature titles to give a welcome message or title to explain the purpose of the menu. They can also contain a call to action (CTA), following the conventional logic for buttons.</p>

```htmlmixed
<div class="text-align-right">
  <button data-init="auto" data-toggle="flyout" data-target="#flyout-info">
    <i class="icon icon-001-account icon--s2"></i>
  </button>
</div>
<div id="flyout-info" class="flyout flyout__indicator flyout--info flyout--right js-flyout" style="top: 70px; right: 6px;">
  <div class="flyout__title">Welcome to my Swisscom</div>
  <div class="divider"></div>
  <div class="flyout__text">
    Log in to manage your invoices, products, orders and see more offers
  </div>
  <div class="button-group button-group--fill">
    <button class="button button--secondary">Cancel</button>
    <button class="button button--primary">Login</button>
  </div>
</div>
```

<h2>Contextual Menu</h2>

<style>
  .exampleOutput .context {
    position: relative;
    bottom: auto;
    max-width: 320px;
  }
</style>

<p>Contextual menus are used to surface additional functionality relevant to a page on native applications, while still prioritising a key function that is most commonly used in that instance. The additional functionality is hidden inside an ellipsis icon.</p>

<p><b>NOTE:</b> This component should only be used on the <code>phone</code> breakpoint and is not intended to be used on tablets and desktop breakpoints. For tablets and desktop it is recommended to use a flyout menu instead.</p>

```htmlmixed
<div class="context">
  <div class="context__primary">
    <a class="context-link" href="javascript:void(0);">
      Check voicemail
    </a>
    <button class="context-link context-link--more" data-init="auto" data-toggle="flyout" data-target="#context">
      <i class="icon icon-053-more"></i>
    </button>
  </div>

  <div id="context" class="context__secondary js-flyout">
    <ul>
      <li>
        <a class="context-link" href="javascript:void(0);">View itemised statement</a>
      </li>
      <li>
        <a class="context-link" href="javascript:void(0);">Apply for extension</a>
      </li>
      <li>
        <a class="context-link" href="javascript:void(0);">Download PDF bill</a>
      </li>
    </ul>
  </div>
</div>
```
*/
.flyout {
  display: none;
  position: absolute;
  top: 20px;
  opacity: 0;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
  z-index: 60000;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

.flyout.is-open {
  display: block;
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.flyout--left {
  left: 0;
}

.flyout--left .flyout__indicator::before {
  left: 24px;
}

.flyout--right {
  right: 0;
}

.flyout--top {
  top: auto;
  bottom: 100%;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.flyout--top .flyout__indicator::before {
  top: auto;
  bottom: -7px;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}

.flyout__indicator::before {
  position: absolute;
  top: -7px;
  right: 24px;
  width: 14px;
  height: 14px;
  background: inherit;
  box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.15);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: -1;
  content: '';
}

.flyout__content {
  background: inherit;
}

.flyout__title {
  margin-top: -4px;
  text-align: center;
}

.flyout__text {
  margin-bottom: 16px;
  text-align: center;
}

.flyout--list {
  width: 254px;
  padding: 0;
}

.flyout--list li:not(:last-child) {
  border-bottom: 1px solid #e4e9ec;
}

.flyout--list .list-link {
  display: block;
  width: 100%;
  padding: 12px 24px;
  border: 0;
  background: #fff;
}

.flyout--list .list-link:hover {
  color: #fff;
  background: #1781e3;
}

.flyout--info {
  width: 369px;
  padding: 24px;
}

.flyout--info hr,
.flyout--info .divider {
  margin: 16px 0;
}

.context {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 60000;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

.context .context-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
  height: 73px;
  padding: 0 24px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #1781e3;
  border: 0;
  background: #fff;
  line-height: 73px;
  vertical-align: middle;
  text-align: center;
}

.context__primary {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  height: 73px;
  z-index: 60010;
}

.context__primary .context-link {
  color: #fff;
  background: #1781e3;
}

.context__primary .context-link:not(:last-child) {
  border-right: 1px solid #e4e9ec;
}

.context__primary .context-link--more {
  width: 73px;
  padding: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 40px;
}

.context__primary .context-link--more.is-open {
  color: #1781e3;
  background: #fff;
}

.context__secondary {
  display: none;
  position: absolute;
  bottom: 73px;
  width: 100%;
  padding: 0;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  z-index: 60005;
}

.context__secondary.is-open {
  display: block;
  opacity: 1;
}

.context__secondary li {
  border-bottom: 1px solid #e4e9ec;
}

.context--flyout {
  position: initial;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 24px;
  box-shadow: none;
}

.context--flyout .flyout-icon {
  color: #015;
}

.context--flyout ~ .flyout {
  top: 67px;
  right: 20px;
  max-width: 280px;
  width: 100%;
}

.context--flyout ~ .flyout::before {
  right: 13px;
}

/*doc
---
title: Notifications (header)
name: 02-components-125-notification-header-01-overview
category: Components - Notifications (header)
---

<p>Notification headers are colored strips which run across the top of a product, beneath the header bar or navigation.</p>

<div class="margin-bottom-4">
  <div class="input-field">
    <input type="text" id="message-text-1" placeholder="Notification text" value="You have <strong>4</strong> new messages in your inbox">
    <label for="message-text-1">Notification text</label>
  </div>
  <div class="radio">
    <input type="radio" name="options" id="default" value="" checked="">
    <label for="default">Default notification</label>
  </div>
  <div class="radio">
    <input type="radio" name="options" id="confirmation" value="notification--confirmation">
    <label for="confirmation">Confirmation / Success notification</label>
  </div>
  <div class="radio add-space">
    <input type="radio" name="options" id="alert" value="notification--alert">
    <label for="alert">Alert / Warning notification</label>
  </div>

  <button class="button button--primary" onclick="showNotification()">Show notification</button>

  <script>
    function showNotification() {
      var callback = function() {
        alert("Notification was clicked");
      };

      var cancelCallback = function() {
        alert("Notification was cancelled");
      };

      var message = document.getElementById("message-text-1");
      var modifier = document.querySelector("input[name='options']:checked").value;

      // open the notification
      var notification = sdx.Notification.showOnHeader("header", message.value || "Notification Text", callback, cancelCallback, modifier);

      // remove the notification
      setTimeout(function(){ notification.close() }, 2000);
    }
  </script>
</div>

<h4>How to use notification headers</h4>

<p>Notifications headers are used to give users in page information about something new, or to confirm an action that’s just been made by the user. They do this in a discrete non-disruptive way. Notifications should always use the SDX interaction color palette to help explain the type of notification the user is receiving at a glance. They run the full width of the page.</p>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>General notifications</h3>

  <p>Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-3@2x-6.jpg">
      <span class="fig-caption">New inbox notification</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-4@2x-5.jpg">
      <span class="fig-caption">Hover state</span>
    </div>
  </div>

  <h3>Confirmation notifications</h3>

  <p>Green notifications should be used to indicate validation or success, for example to confirm success at the end of an order process.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-7@2x-12.jpg">
      <span class="fig-caption">Items added to basket confirmation</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-20@2x-1.jpg">
      <span class="fig-caption">Hover state</span>
    </div>
  </div>

  <h3>Alert notifications</h3>

  <p>Orange notifications indicate an error or a warning, for example something that needs urgent attention.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-16@2x-14.jpg">
      <span class="fig-caption">Warning notification</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-15@2x-15.jpg">
      <span class="fig-caption">Hover state</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Closing the notification</h3>

  <p>Each notification can be closed, with the secondary action being positioned to the right.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-17@2x-13.jpg">
      <span class="fig-caption">Closing the notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Fixed over content</h3>

  <p>Notifications are always placed over the content and fixed to the top of viewport, for emphasis and clarity.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-5-Copy-2@2x.jpg">
      <span class="fig-caption">Fixed over content</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
   <div class="col-xs-12 col-lg-12">
     <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-18@2x-10.jpg">
     <span class="fig-caption">Typography</span>
   </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h2>Usage</h2>

```htmlmixed
<div class="input-field">
  <input type="text" id="message-text-1" placeholder="Notification text" value="You have <strong>4</strong> new messages in your inbox">
  <label for="message-text-1">Notification text</label>
</div>

<div class="radio">
  <input type='radio' name='options' id='default' value='' checked>
  <label for='default'>Default notification</label>
</div>
<div class="radio">
  <input type='radio' name='options' id='confirmation' value='notification--confirmation'>
  <label for='confirmation'>Confirmation / Success notification</label>
</div>
<div class="radio add-space">
  <input type='radio' name='options' id='alert' value='notification--alert'>
  <label for='alert'>Alert / Warning notification</label>
</div>

<button class="button button--primary" onclick="showNotification()">Show notification</button>

<script>
  function showNotification() {
    var callback = function() {
      alert("Notification was clicked");
    };

    var cancelCallback = function() {
      alert("Notification was cancelled");
    };

    var message = document.getElementById("message-text-1");
    var modifier = document.querySelector("input[name='options']:checked").value;

    // open the notification
    var notification = sdx.Notification.showOnHeader("header", message.value || "Notification Text", callback, cancelCallback, modifier);

    // remove the notification
    setTimeout(function(){ notification.close() }, 2000);
  }
</script>
```

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>4</strong> new messages in your inbox
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      Please check the highlighted fields
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h2>Colors</h2>

<p>Notifications are categorised into three categories: general, confirmation/success/ and alerts/warnings. Blue represents general notifications, e.g messages in your inbox. Green for confirmation of user actions or completion of a process, e.g completing checkout. Orange to give alerts and warnings to users, e.g failed uploads or storage reaching capacity.</p>

<h3>General Notifications</h3>

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>4</strong> new messages in your inbox
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h3>Confirmations / Success</h3>

```htmlmixed
<div class="notification-header notification--confirmation notification--open">
  <div class="notification__content">
    <div class="notification__body">
      <strong>3</strong> items added to your basket
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h3>Alerts and Warnings</h3>

```htmlmixed
<div class="notification-header notification--alert notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>5</strong> new alerts
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```
*/
.notification-header {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: height 400ms cubic-bezier(0.35, 0.035, 0.275, 0.9);
}

.notification-header .notification__content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 74px;
  padding: 21px 24px;
  transition: background 400ms cubic-bezier(0.35, 0.035, 0.275, 0.9);
  background: #1781e3;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1;
  outline: none;
}

.notification-header .notification__content:hover {
  background: #0851da;
}

@media (min-width: 768px) {
  .notification-header .notification__content {
    padding: 21px 38px;
  }
}

.notification-header .notification__content .notification__body {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  opacity: 0;
  -webkit-animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9);
  animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9);
}

.notification-header .notification__content .notification__body strong {
  font-weight: 600;
  font-size: 16px;
}

.notification-header .notification__content button {
  position: relative;
  right: -5px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  opacity: 0;
  -webkit-animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9);
  animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9);
}

.notification-header .notification__content button .icon {
  line-height: 32px;
  color: #fff;
  font-size: 34px;
}

.notification--open {
  height: 74px;
}

.notification--alert .notification__content {
  background: #ff8b2e;
}

.notification--alert .notification__content:hover {
  background: #e86416;
}

.notification--confirmation .notification__content {
  background: #25b252;
}

.notification--confirmation .notification__content:hover {
  background: #008236;
}

@-webkit-keyframes notification-show {
  0% {
    height: 0;
  }
  100% {
    height: 74px;
  }
}

@keyframes notification-show {
  0% {
    height: 0;
  }
  100% {
    height: 74px;
  }
}

/*doc
---
title: Notifications (modal)
name: 02-components-130-notification-modal-01-overview
category: Components - Notifications (modal)
---

<p>Modal notifications are large screen take overs featuring messaging and iconography that intentionally interrupt the users experience, usually require an action from the user in order to progress to the next stage in an experience, or because the notification is of particular significance.</p>

<h3>How to use notification modals</h3>

<p>Notifications modals behave just like conventional modal windows, but with the introduction of bold color. They're the only instance where the interaction color palette is used as a background color. They help to provide a clearly signposted and direct delivery of information to the user.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
    <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-10@2x-17.jpg">
    <span class="fig-caption">Inbox notification</span>
  </div>
  <div class="col-xs-12 col-lg-6">
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>General notifications</h3>

  <p>Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
       <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-10@2x-17.jpg">
       <span class="fig-caption">Inbox notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Confirmation notifcations</h3>

  <p>The green notification should be used to indicate validation or success, for example to confirm success at the end of an order process.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-4@2x-4.jpg">
      <span class="fig-caption">Order confirmation notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Alert notifcations</h3>

  <p>Orange notifications indicate an error or a warning, for example something that needs urgent attention.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-2@2x-6.jpg">
      <span class="fig-caption">Error or warning notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Overlay</h3>

  <p>The overlay is a globally 40% opacity and #333333 on all modal styles. The modal is always vertically centered within the viewport.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-13@2x-14.jpg">
      <span class="fig-caption"> Modal overlay</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Alignment</h3>

  <p>The modal is always horizontally and vertically centered within the viewport.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-15@2x-14.jpg">
      <span class="fig-caption">Centered alignment</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-16@2x-13.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h2>Usage</h2>

<h3>Interactive sample</h3>

<p>A responsive test page for the Notification Modal dialog is available at <a href="/samples/notification-modal.html">samples/notification-modal</a>. In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.</p>

<style>
  .backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .modal {
    position: relative;
  }

  .modal__content {
    margin: 24px;
    width: 100%;
    height: 600px;
  }
</style>

<p>There are serveral options for opening and closing a notification modal dialog, either use the <code>Modal</code> JavaScript component directly and call the <code>open()</code> and <code>close()</code> methods on the component; or add a button with the class <code>modal-trigger</code> and a <code>href</code> attribute with the id of the target modal dialog.</p>

```htmlmixed
<button class="button button--primary modal-trigger" href="myModalDialog">Open notification modal</button>
```

<p>To close the dialog either call <code>close()</code> on the component manually or apply either the <code>modal-close</code> or <code>modal-cancel</code> class to a button in the current modal dialog. Both of this states will dispatch an event when executed, this enables other frontend code to react to the selected user action if required.</p>

```htmlmixed
<div class="modal modal--notification modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <button class="modal__close modal-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
    <div class="modal__body">
      <div class="notification-message">
        <i class="icon icon-051-message" aria-hidden="true"></i>
        You have 4 new messages
      </div>
      <button class="button button--responsive button--thin">
        Go to inbox
      </button>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```
<h2>Colors</h2>

<h3>General Notifications</h3>

<p>Use the blue notification for more generic messaging around the users general profile.</p>

```htmlmixed
<div class="modal modal--notification modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <button class="modal__close modal-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
    <div class="modal__body">
      <div class="notification-message">
        <i class="icon icon-051-message" aria-hidden="true"></i>
        You have 4 new messages in your inbox
      </div>
      <button class="button button--responsive button--thin">
        Go to inbox
      </button>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```

<h3>Confirmations / Rewards</h3>

<p>Green notification should be used to indicate validation for example to reward a user at the end of an order process.</p>

```htmlmixed
<div class="modal modal--notification modal--notification--confirmation modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <button class="modal__close modal-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
    <div class="modal__body">
      <div class="notification-message">
        <i class="icon icon-012-check-mark-circle" aria-hidden="true"></i>
        3 items added to your basket
      </div>
      <button class="button button--responsive button--thin">
        Back to home
      </button>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```

<h3>Alerts / Error Notifications</h3>

<p>Only use interaction orange notifications to indicate an error or something that needs urgent attention.</p>

```htmlmixed
<div class="modal modal--notification modal--notification--alert modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <button class="modal__close modal-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
    <div class="modal__body">
      <div class="notification-message">
        <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
        You have 5 new alerts
      </div>
      <button class="button button--responsive button--thin">
        Okay
      </button>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```
*/
.modal--notification .modal__content {
  background: #1781e3;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .modal--notification .modal__content {
    max-width: 460px;
    height: auto;
  }
}

.modal--notification .modal__content .modal__close {
  top: 22px;
  right: 22px;
  color: #fff;
}

.modal--notification .modal__content .modal__body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  padding: 30px;
}

.modal--notification .modal__content .modal__body .notification-message {
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  color: #fff;
  text-align: center;
}

.modal--notification .modal__content .modal__body .notification-message .icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.modal--notification .modal__content .modal__body .button {
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  margin-top: 30px;
}

.modal--notification .modal__content .modal__body .button:hover, .modal--notification .modal__content .modal__body .button:focus, .modal--notification .modal__content .modal__body .button:active {
  border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 479px) {
  .modal--notification > .container {
    height: calc(100% - 48px);
  }
}

.modal--notification--alert .modal__content {
  background: #ff8b2e;
}

.modal--notification--confirmation .modal__content {
  background: #25b252;
}

/*doc
---
title: Toolbar
name: 02-components-190-toolbar-01-overview
category: Components - Toolbar
---

<p>Toolbars are groupings of key functions that are represented by icons.</p>

<section class="live-example">
  <div class="toolbar">
    <button class="toolbar__item item--show tooltip" aria-label="Share">
      <i class="icon icon-197-share"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Edit">
      <i class="icon icon-025-edit"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Download">
      <i class="icon icon-024-download-cloud"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Delete">
      <i class="icon icon-008-bin"></i>
    </button>
  </div>
</section>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Horizontal (desktop)</h3>

  <p>The horizontal toolbar is the primary layout and should be used when possible.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-19@2x-6.jpg">
        <span class="fig-caption">Standard</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-20@2x-8.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-21@2x-8.jpg">
        <span class="fig-caption">Tap</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-22@2x-7.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <p>Users can hover over each icon to bring up a tooltip.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-25@2x-7.jpg">
        <span class="fig-caption">Disabled</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-26@2x-7.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Horizontal (mobile)</h3>

  <p>On mobile and touchscreen devices, the tooltip expands and the user sees the label without the need for any interaction. This makes it clear and easy to use.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-27@2x-5.jpg">
        <span class="fig-caption">Standard</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-28@2x-7.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-30@2x-6.jpg">
        <span class="fig-caption">Tap</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-32@2x-4.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-33@2x-5.jpg">
        <span class="fig-caption">Disabled</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-34@2x-4.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Vertical (desktop)</h3>

  <p>The vertical toolbar is an alternative layout suited to vertically aligned layouts where horizontal space is restricted.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-36@2x-1.jpg">
        <span class="fig-caption">Standard</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-35@2x-3.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-37@2x-1.jpg">
        <span class="fig-caption">Tap</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-38@2x-1.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <p>Users can hover over each icon to bring up a tooltip.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-39@2x-1.jpg">
        <span class="fig-caption">Disabled</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-40@2x-2.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Vertical (mobile)</h3>

  <p>On mobile and touchscreen devices, the tooltip expands and the user sees the label without the need for any interaction. This makes it clear and easy to use.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-41@2x-2.jpg">
        <span class="fig-caption">Standard</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-42@2x-2.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-43@2x-2.jpg">
        <span class="fig-caption">Hover</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-44@2x-2.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-46@2x-1.jpg">
        <span class="fig-caption">Disabled</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-45@2x-2.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-47@2x-1.jpg">
      <span class="fig-caption">Typography</span>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/toolbar_tooltips/Group-48@2x-1.jpg">
        <span class="fig-caption">Dark variant</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<script>
  function toggleToolbar(id) {
    var toolbar = new sdx.Toolbar(document.querySelector(id));
    toolbar.toggle();
  }
</script>

<p>Provides a Toolbar with two alignments. Horizontal or vertical aligned.</p>

<p>Add the class <code>toolbar</code> to a wrapper div and place buttons inside the wrapper with the class <code>toolbar__item item--show</code> to add a toolbar.</p>

<h2>Toolbar - Desktop</h2>

<p>The desktop toolbar uses Tooltips as text hint.</p>

<h3>Horizontal Toolbar</h3>

<p>The horizontal Toolbar is the standard toolbar. You can add the class <code>toolbar--horizontal</code> next to the <code>toolbar</code>class but you don't have to.</p>

<button class="button button--primary" onclick="toggleToolbar('#toolbar01')">Toggle Toolbar</button>

```htmlmixed
<div class="toolbar" id="toolbar01">
  <button class="toolbar__item item--show tooltip" aria-label="Share">
    <i class="icon icon-197-share"></i>
  </button>
  <button class="toolbar__item item--show tooltip" aria-label="Edit">
    <i class="icon icon-025-edit"></i>
  </button>
  <button class="toolbar__item item--show tooltip" aria-label="Download">
    <i class="icon icon-024-download-cloud"></i>
  </button>
  <button class="toolbar__item item--show tooltip" aria-label="Delete">
    <i class="icon icon-008-bin"></i>
  </button>
</div>
```

<h3>Horizontal Toolbar on dark background</h3>

<p>If the Toolbar component is embedded in a dark background it automatically adjusts its styling accoordingly.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="toolbar">
    <button class="toolbar__item item--show tooltip" aria-label="Share">
      <i class="icon icon-197-share"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Edit">
      <i class="icon icon-025-edit"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Download">
      <i class="icon icon-024-download-cloud"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Delete">
      <i class="icon icon-008-bin"></i>
    </button>
  </div>
</div>
```

<h3>Vertical Toolbar</h3>

<p>To get a vertical toolbar add the class <code>toolbar--vertical</code> next to the <code>toolbar</code> class.</p>

<button class="button button--primary" onclick="toggleToolbar('#toolbar02')">Toggle Toolbar</button>

```htmlmixed
<div class="toolbar toolbar--vertical" id="toolbar02">
  <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Share">
    <i class="icon icon-197-share"></i>
  </button>
  <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Edit">
    <i class="icon icon-025-edit"></i>
  </button>
  <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Download">
    <i class="icon icon-024-download-cloud"></i>
  </button>
  <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Delete">
    <i class="icon icon-008-bin"></i>
  </button>
</div>
```

<h3>Vertical Toolbar on dark background</h3>

<p>If the Toolbar component is embedded in a dark background it automatically adjusts its styling accoordingly.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="toolbar toolbar--vertical">
    <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Share">
      <i class="icon icon-197-share"></i>
    </button>
    <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Edit">
      <i class="icon icon-025-edit"></i>
    </button>
    <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Download">
      <i class="icon icon-024-download-cloud"></i>
    </button>
    <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Delete">
      <i class="icon icon-008-bin"></i>
    </button>
  </div>
</div>
```

<h3>Disabled State</h3>

<p>To disable the entire toolbar add the class <code>disabled</code> to the toolbar</p>

```htmlmixed
<div class="toolbar toolbar--vertical toolbar--disabled">
  <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Share">
    <i class="icon icon-197-share"></i>
  </button>
  <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Edit">
    <i class="icon icon-025-edit"></i>
  </button>
  <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Download">
    <i class="icon icon-024-download-cloud"></i>
  </button>
  <button class="toolbar__item item--show tooltip tooltip--right" aria-label="Delete">
    <i class="icon icon-008-bin"></i>
  </button>
</div>
```

<h3>Disabled Toolbar Items</h3>

<p>To disable some toolbar items add the class <code>disabled</code> to the toolbar item</p>

```htmlmixed
<div class="toolbar">
  <button class="toolbar__item item--show tooltip" aria-label="Share">
    <i class="icon icon-197-share"></i>
  </button>
  <button class="toolbar__item item--show tooltip" aria-label="Edit">
    <i class="icon icon-025-edit"></i>
  </button>
  <button class="toolbar__item item--show item--disabled tooltip" aria-label="Download">
    <i class="icon icon-024-download-cloud"></i>
  </button>
  <button class="toolbar__item item--show item--disabled tooltip" aria-label="Delete">
    <i class="icon icon-008-bin"></i>
  </button>
</div>
```

<h3>Disabled Toolbar on dark Background</h3>

```htmlmixed
<div class="bg bg--dark">
  <div class="toolbar toolbar--disabled">
    <button class="toolbar__item item--show tooltip" aria-label="Share">
      <i class="icon icon-197-share"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Edit">
      <i class="icon icon-025-edit"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Download">
      <i class="icon icon-024-download-cloud"></i>
    </button>
    <button class="toolbar__item item--show tooltip" aria-label="Delete">
      <i class="icon icon-008-bin"></i>
    </button>
  </div>
</div>
```

<h3>Toolbar - Mobile</h3>

<p>The Toolbar on mobile uses labels instead of tooltips.</p>

<h3>Horizontal Toolbar</h3>

<p>The horizontal Toolbar is the standard toolbar. You can add the class <code>toolbar--horizontal</code> next to the <code>toolbar</code> class but you don't have to.</p>

<button class="button button--primary" onclick="toggleToolbar('#toolbar03')">Toggle Toolbar</button>

```htmlmixed
<div class="toolbar" id="toolbar03">
  <button class="toolbar__item item--show">
    <i class="icon icon-197-share"></i>
    <span class="toolbar__label">Share</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-025-edit"></i>
    <span class="toolbar__label">Edit</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-024-download-cloud"></i>
    <span class="toolbar__label">Download</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-008-bin"></i>
    <span class="toolbar__label">Delete</span>
  </button>
</div>
```

<h3>Horizontal Toolbar on dark background</h3>

<p>If the Toolbar component is embedded in a dark background it automatically adjusts its styling accoordingly.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="toolbar">
    <button class="toolbar__item item--show">
      <i class="icon icon-197-share"></i>
      <span class="toolbar__label">Share</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-025-edit"></i>
      <span class="toolbar__label">Edit</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-024-download-cloud"></i>
      <span class="toolbar__label">Download</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-008-bin"></i>
      <span class="toolbar__label">Delete</span>
    </button>
  </div>
</div>
```

<h3>Vertical Toolbar</h3>

<p>To get a vertical toolbar add the class <code>toolbar--vertical</code> next to the <code>toolbar</code> class.</p>

<button class="button button--primary" onclick="toggleToolbar('#toolbar04')">Toggle Toolbar</button>

```htmlmixed
<div class="toolbar toolbar--vertical" id="toolbar04">
  <button class="toolbar__item item--show">
    <i class="icon icon-197-share"></i>
    <span class="toolbar__label">Share</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-025-edit"></i>
    <span class="toolbar__label">Edit</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-024-download-cloud"></i>
    <span class="toolbar__label">Download</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-008-bin"></i>
    <span class="toolbar__label">Delete</span>
  </button>
</div>
```

<h3>Vertical Toolbar on dark background</h3>

<p>If the Toolbar component is embedded in a dark background it automatically adjusts its styling accoordingly.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="toolbar toolbar--vertical">
    <button class="toolbar__item item--show">
      <i class="icon icon-197-share"></i>
      <span class="toolbar__label">Share</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-025-edit"></i>
      <span class="toolbar__label">Edit</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-024-download-cloud"></i>
      <span class="toolbar__label">Download</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-008-bin"></i>
      <span class="toolbar__label">Delete</span>
    </button>
  </div>
</div>
```

<h3>Disabled State</h3>

<p>To disable the entire toolbar add the class <code>disabled</code> to the toolbar</p>

```htmlmixed
<div class="toolbar toolbar--vertical toolbar--disabled">
  <button class="toolbar__item item--show">
    <i class="icon icon-197-share"></i>
    <span class="toolbar__label">Share</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-025-edit"></i>
    <span class="toolbar__label">Edit</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-024-download-cloud"></i>
    <span class="toolbar__label">Download</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-008-bin"></i>
    <span class="toolbar__label">Delete</span>
  </button>
</div>
```

<h3>Disabled Toolbar Items</h3>

<p>To disable some toolbar items add the class <code>disabled</code> to the toolbar item</p>

```htmlmixed
<div class="toolbar">
  <button class="toolbar__item item--show">
    <i class="icon icon-197-share"></i>
    <span class="toolbar__label">Share</span>
  </button>
  <button class="toolbar__item item--show">
    <i class="icon icon-025-edit"></i>
    <span class="toolbar__label">Edit</span>
  </button>
  <button class="toolbar__item item--show item--disabled">
    <i class="icon icon-024-download-cloud"></i>
    <span class="toolbar__label">Download</span>
  </button>
  <button class="toolbar__item item--show item--disabled">
    <i class="icon icon-008-bin"></i>
    <span class="toolbar__label">Delete</span>
  </button>
</div>
```

<h3>Disabled Toolbar on dark Background</h3>

```htmlmixed
<div class="bg bg--dark">
  <div class="toolbar toolbar--disabled">
    <button class="toolbar__item item--show">
      <i class="icon icon-197-share"></i>
      <span class="toolbar__label">Share</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-025-edit"></i>
      <span class="toolbar__label">Edit</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-024-download-cloud"></i>
      <span class="toolbar__label">Download</span>
    </button>
    <button class="toolbar__item item--show">
      <i class="icon icon-008-bin"></i>
      <span class="toolbar__label">Delete</span>
    </button>
  </div>
</div>
```

<h2>Tooltip Overview</h2>

<style>
  .tooltip {
    margin: 24px 12px 0 12px;
  }

  .tooltip:first-child {
    margin-left: 0;
  }

  .tooltip--left {
    margin-left: 4px;
    padding-left: 8px;
  }

  .tooltip--right {
    margin-right: 4px;
    padding-right: 8px;
  }

</style>

<p>SDX provides a Tooltip with two alignments. Top and right aligned.</p>

<h2>Tooltip Usage</h2>

<p><b>Note</b>: To make tooltips work on mobile make sure that a click handler is present on the element. For non button or link elements just add <code>onclick="void(0)"</code> to your markup.</p>

```htmlmixed
<div class="tooltip tooltip--top" aria-label="Tooltip top" onclick="void(0)">
  Tooltip on top
</div>
<div class="tooltip tooltip--bottom" aria-label="Tooltip bottom" onclick="void(0)">
  Tooltip on bottom
</div>
<div class="tooltip tooltip--left" aria-label="Tooltip left" onclick="void(0)">
  Tooltip on left
</div>
<div class="tooltip tooltip--right" aria-label="Tooltip right" onclick="void(0)">
  Tooltip on right
</div>
```
*/
.tooltip {
  display: inline-block;
  position: relative;
  z-index: 1;
  outline: none;
  cursor: pointer;
}

.tooltip::before, .tooltip::after {
  position: absolute;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: hidden;
  opacity: 0;
  z-index: 1000000;
  pointer-events: none;
  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0ms;
}

.tooltip:hover::before, .tooltip:hover::after {
  visibility: visible;
  opacity: 1;
  transition-delay: 100ms;
}

.tooltip::before {
  position: absolute;
  background: 0 0;
  border: 8px solid transparent;
  z-index: 1000001;
  content: '';
}

.tooltip::after {
  font-family: "TheSans", sans-serif;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 200px;
  height: 32px;
  padding: 8px 15px;
  color: #fff;
  border-radius: 8px;
  background: #0851da;
  font-size: 16px;
  line-height: 16px;
  content: attr(aria-label);
}

.tooltip::before, .tooltip::after, .tooltip--top::before, .tooltip--top::after {
  left: 50%;
  bottom: calc(100% + 2px);
  margin: 0;
}

.tooltip::before, .tooltip--top::before {
  left: calc(50% - 8px);
  margin-bottom: -15px;
  border-color: transparent;
  border-top-color: #0851da;
}

.tooltip::after, .tooltip--top::after {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.tooltip:hover::before, .tooltip:focus::before, .tooltip--top:hover::before, .tooltip--top:focus::before {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.tooltip:hover::after, .tooltip:focus::after, .tooltip--top:hover::after, .tooltip--top:focus::after {
  -webkit-transform: translateX(-50%) translateY(-8px);
  transform: translateX(-50%) translateY(-8px);
}

.tooltip--bottom::before, .tooltip--bottom::after {
  left: 50%;
  top: calc(100% + 2px);
  bottom: auto;
  margin: 0;
}

.tooltip--bottom::before {
  left: calc(50% - 8px);
  margin-top: -15px;
  border-color: transparent;
  border-bottom-color: #0851da;
}

.tooltip--bottom::after {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.tooltip--bottom:hover::before, .tooltip--bottom:focus::before {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

.tooltip--bottom:hover::after, .tooltip--bottom:focus::after {
  -webkit-transform: translateX(-50%) translateY(8px);
  transform: translateX(-50%) translateY(8px);
}

.tooltip--left::before, .tooltip--left::after {
  left: auto;
  right: calc(100% + 2px);
  bottom: 50%;
  margin: 0;
}

.tooltip--left::before {
  margin-right: -15px;
  margin-bottom: -8px;
  border-color: transparent;
  border-left-color: #0851da;
}

.tooltip--left::after {
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
  margin-bottom: -16px;
}

.tooltip--left:hover::before, .tooltip--left:focus::before {
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
}

.tooltip--left:hover::after, .tooltip--left:focus::after {
  -webkit-transform: translateX(-8px) translateY(0);
  transform: translateX(-8px) translateY(0);
}

.tooltip--right::before, .tooltip--right::after {
  left: calc(100% + 2px);
  bottom: 50%;
  margin: 0;
}

.tooltip--right::before {
  margin-left: -15px;
  margin-bottom: -8px;
  border-color: transparent;
  border-right-color: #0851da;
}

.tooltip--right::after {
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
  margin-bottom: -16px;
}

.tooltip--right:hover::before, .tooltip--right:focus::before {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

.tooltip--right:hover::after, .tooltip--right:focus::after {
  -webkit-transform: translateX(8px) translateY(0);
  transform: translateX(8px) translateY(0);
}

.tooltip--multiline::after {
  height: auto;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-all;
}

.tooltip:not([aria-label])::before, .tooltip:not([aria-label])::after, .tooltip[aria-label='']::before, .tooltip[aria-label='']::after {
  display: none !important;
}

.toolbar {
  font-family: "TheSans", sans-serif;
  font-weight: 400;
}

.toolbar__item {
  display: inline-block;
  padding: 10px;
  text-align: center;
  color: #1781e3;
  opacity: 0;
  -webkit-transform: translate(0, 10px);
  transform: translate(0, 10px);
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.87, -0.41, 0.19, 1.44);
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.87, -0.41, 0.19, 1.44);
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 300ms cubic-bezier(0.87, -0.41, 0.19, 1.44);
}

.toolbar__item:hover {
  color: #0851da;
}

.toolbar__item:hover .toolbar__label {
  color: #0851da;
}

.toolbar__item .toolbar__label {
  display: block;
  font-size: 14px;
  color: #333;
}

.toolbar__item .icon {
  font-size: 30px;
}

.toolbar__item.item--show {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.toolbar--vertical .toolbar__item {
  display: block;
  opacity: 0;
  -webkit-transform: translate(10px, 0);
  transform: translate(10px, 0);
  text-align: left;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.toolbar--vertical .toolbar__item .toolbar__label {
  display: inline-block;
  margin-left: 12px;
  line-height: 1;
}

.toolbar--vertical .toolbar__item .icon {
  vertical-align: middle;
}

.toolbar--vertical .toolbar__item.item--show {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.toolbar .item--disabled,
.toolbar.toolbar--disabled .toolbar__item {
  pointer-events: none;
  color: #d8d8d8;
}

.toolbar .item--disabled .toolbar__label,
.toolbar.toolbar--disabled .toolbar__item .toolbar__label {
  color: #d8d8d8;
}

.bg--dark .toolbar__item:hover .toolbar__label {
  color: #fff;
  text-decoration: underline;
}

.bg--dark .toolbar__item .toolbar__label {
  color: #fff;
}

.bg--dark .toolbar .item--disabled,
.bg--dark .toolbar.toolbar--disabled .toolbar__item {
  pointer-events: none;
  opacity: .4;
  color: #fff;
}

.bg--dark .toolbar .item--disabled .toolbar__label,
.bg--dark .toolbar.toolbar--disabled .toolbar__item .toolbar__label {
  color: #fff;
}

.progress-light {
  position: relative;
  margin: 24px 0;
  width: 100%;
}

@media (min-width: 768px) {
  .progress-light {
    margin: 32px 0;
  }
}

.progress-light .arrow {
  position: absolute;
  top: 16px;
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .progress-light .arrow {
    top: 22px;
  }
}

.progress-light .arrow .icon {
  line-height: 24px;
  font-size: 17px;
  font-weight: bold;
  pointer-events: none;
  color: #1781e3;
  outline: none;
}

.progress-light .arrow:hover .icon {
  color: #0851da;
}

.progress-light .arrow--disabled .icon {
  color: #cfd5d9;
}

.progress-light .arrow--disabled:hover .icon {
  color: #b1b9be;
}

.progress-light .arrow--left {
  left: -8px;
}

.progress-light .arrow--right {
  right: -8px;
}

.progress-light__detail {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 400;
  display: block;
  color: #666;
  margin: 0 18px 7px;
  line-height: 1;
}

@media (min-width: 768px) {
  .progress-light__detail {
    margin: 0 18px 13px;
  }
}

.progress-light__bar {
  position: relative;
  background-color: #d8d8d8;
  height: 9px;
  margin: 0 18px 10px;
  overflow: hidden;
  border-radius: 9px;
}

@media (min-width: 768px) {
  .progress-light__bar {
    margin: 0 18px;
  }
}

.progress-light__bar .bar__progress {
  background-color: #1781e3;
  height: 9px;
  width: 0;
}

.progress-light__bar .bar__progress--complete {
  background-color: #25b252;
}

.progress-light__bar .bar__tick {
  position: absolute;
}

.progress-light__bar .bar__tick::before {
  position: absolute;
  top: 0;
  background: #000;
  opacity: .5;
  width: 1px;
  height: 9px;
  content: '';
}

.bg--dark .progress-light__detail {
  color: #fff;
}

.bg--dark .progress-light__bar {
  background-color: #fff;
}

/*doc
---
title: Progress bar (header)
name: 02-components-135-progress-10-barfull
category: Components - Progress bar (header)
---
<p>Progress bars step users through a process, clearly communicating where they are in that process. The steps that indicate the current position are clearly color coded and labeled to help orientate the user.</p>

<img class="img-responsive padding-bottom-4" src="./theme-build/img/design/progressbar-header/progressbar-header.png">

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Progress indicators</h3>

  <p>The interaction palette is used to give users clarity about what is completed and what is remaining. Green indicates a step is complete and blue indicates the step they are currently on. Stroked outlines are used to represent the remaining steps.</p>

  <h3> Completed step</h3>

  <p>Steps are in green to show the suer they have been completed</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-4@2x-6.jpg">
      <span class="fig-caption">Completed step</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-6@2x-9.jpg">
      <span class="fig-caption">Completed step on hover</span>
    </div>
  </div>

  <h3> Current step</h3>

  <p>The current step is colored in blue, while previous steps remain green.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-8@2x-9.jpg">
      <span class="fig-caption">Current step</span>
    </div>
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-10@2x-18.jpg">
      <span class="fig-caption">Incomplete step on hover</span>
    </div>
  </div>

  <h3>Incomplete step</h3>

  <p>Incompleted steps are outlined blue when shown on light backgrounds, and white when show on dark backgrounds</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-12@2x-15.jpg">
      <span class="fig-caption">Incomplete step</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-14@2x-13.jpg">
      <span class="fig-caption">Incomplete step on hover</span>
    </div>
  </div>

</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>The full progress bar displays a circle for each entry in the <code>progress-full__sections</code> <code>div</code>. To specify the current item make sure to add the class <code>section--active</code> to the item.</p>

<p>To ensure that the progress bar component functions properly make sure to either add the <code>data-init="auto"</code> attribute, or to manually initialize the <code>ProgressFull</code> component on the element.</p>

```htmlmixed_webcomponent_sdx-progress-full
<sdx-progress-full
    step="1"
    steps-label="steps"
    step-change-callback="console.log('Active step', arguments)">
  <sdx-progress-full-step>Introduction</sdx-progress-full-step>
  <sdx-progress-full-step>Settings</sdx-progress-full-step>
  <sdx-progress-full-step>Customization</sdx-progress-full-step>
  <sdx-progress-full-step>Connection</sdx-progress-full-step>
  <sdx-progress-full-step>Security</sdx-progress-full-step>
  <sdx-progress-full-step>Payment</sdx-progress-full-step>
  <sdx-progress-full-step>Confirmation</sdx-progress-full-step>
</sdx-progress-full>

<!-- Demo buttons (these are *not* required for the <sdx-progress-full /> to work) -->
<div class="button-group button-group--responsive">
  <button class="button button--primary" onclick="document.querySelector('sdx-progress-full').nextStep()">Next step</button>
  <button class="button button--secondary" onclick="document.querySelector('sdx-progress-full').previousStep()">Previous step</button>
</div>
```
*/
.progress-full {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100%;
  margin: 24px 0;
  text-align: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .progress-full {
    margin: 32px 0;
  }
}

.progress-full__bar {
  outline: none;
}

.progress-full__bar .indicator {
  font-weight: 400;
  width: 24px;
  height: 24px;
  border: 1px solid #1781e3;
  border-radius: 100%;
  color: #1781e3;
  background-color: transparent;
  line-height: 1;
  letter-spacing: normal;
  font-size: 14px;
  text-align: center;
  transition: all 150ms ease-in-out;
  cursor: pointer;
}

.progress-full__bar .indicator + .indicator {
  margin-left: 16px;
}

@media (min-width: 768px) {
  .progress-full__bar .indicator + .indicator {
    margin-left: 24px;
  }
}

.progress-full__bar .indicator:hover {
  color: #0851da;
  border-color: #0851da;
}

.progress-full__bar .indicator--completed {
  color: #fff;
  border-color: #25b252;
  background-color: #25b252;
}

.progress-full__bar .indicator--completed:hover {
  color: #fff;
  border-color: #008236;
  background-color: #008236;
}

.progress-full__bar .indicator--current {
  color: #fff;
  border-color: #1781e3;
  background-color: #1781e3;
}

.progress-full__bar .indicator--current:hover {
  color: #fff;
  border-color: #0851da;
  background-color: #0851da;
}

.progress-full__sections {
  font-weight: 400;
  position: relative;
  width: 100%;
  height: 18px;
  margin-top: 11px;
  line-height: 1;
  letter-spacing: -.35px;
  font-size: 16px;
  color: #666;
}

.progress-full__sections span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.progress-full__sections .section--active {
  visibility: visible;
}

.bg--dark .progress-full__bar .indicator {
  color: #fff;
  border-color: #fff;
}

.bg--dark .progress-full__bar .indicator:hover {
  color: #1781e3;
  border-color: #1781e3;
}

.bg--dark .progress-full__bar .indicator--completed {
  color: #fff;
  border-color: #25b252;
  background-color: #25b252;
}

.bg--dark .progress-full__bar .indicator--completed:hover {
  color: #fff;
  border-color: #008236;
  background-color: #008236;
}

.bg--dark .progress-full__bar .indicator--current {
  color: #fff;
  border-color: #1781e3;
  background-color: #1781e3;
}

.bg--dark .progress-full__bar .indicator--current:hover {
  color: #fff;
  border-color: #0851da;
  background-color: #0851da;
}

.bg--dark .progress-full__sections {
  color: #fff;
}

/*doc
---
title: Progress bar (header)
name: 02-components-135-progress-10-barfull
category: Components - Progress bar (header)
---
<p>Progress bars step users through a process, clearly communicating where they are in that process. The steps that indicate the current position are clearly color coded and labeled to help orientate the user.</p>

<img class="img-responsive padding-bottom-4" src="./theme-build/img/design/progressbar-header/progressbar-header.png">

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Progress indicators</h3>

  <p>The interaction palette is used to give users clarity about what is completed and what is remaining. Green indicates a step is complete and blue indicates the step they are currently on. Stroked outlines are used to represent the remaining steps.</p>

  <h3> Completed step</h3>

  <p>Steps are in green to show the suer they have been completed</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-4@2x-6.jpg">
      <span class="fig-caption">Completed step</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-6@2x-9.jpg">
      <span class="fig-caption">Completed step on hover</span>
    </div>
  </div>

  <h3> Current step</h3>

  <p>The current step is colored in blue, while previous steps remain green.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-8@2x-9.jpg">
      <span class="fig-caption">Current step</span>
    </div>
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-10@2x-18.jpg">
      <span class="fig-caption">Incomplete step on hover</span>
    </div>
  </div>

  <h3>Incomplete step</h3>

  <p>Incompleted steps are outlined blue when shown on light backgrounds, and white when show on dark backgrounds</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-12@2x-15.jpg">
      <span class="fig-caption">Incomplete step</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/progressbar-header/Group-14@2x-13.jpg">
      <span class="fig-caption">Incomplete step on hover</span>
    </div>
  </div>

</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>The full progress bar displays a circle for each entry in the <code>progress-full__sections</code> <code>div</code>. To specify the current item make sure to add the class <code>section--active</code> to the item.</p>

<p>To ensure that the progress bar component functions properly make sure to either add the <code>data-init="auto"</code> attribute, or to manually initialize the <code>ProgressFull</code> component on the element.</p>

```htmlmixed_webcomponent_sdx-progress-full
<sdx-progress-full
    step="1"
    steps-label="steps"
    step-change-callback="console.log('Active step', arguments)">
  <sdx-progress-full-step>Introduction</sdx-progress-full-step>
  <sdx-progress-full-step>Settings</sdx-progress-full-step>
  <sdx-progress-full-step>Customization</sdx-progress-full-step>
  <sdx-progress-full-step>Connection</sdx-progress-full-step>
  <sdx-progress-full-step>Security</sdx-progress-full-step>
  <sdx-progress-full-step>Payment</sdx-progress-full-step>
  <sdx-progress-full-step>Confirmation</sdx-progress-full-step>
</sdx-progress-full>

<!-- Demo buttons (these are *not* required for the <sdx-progress-full /> to work) -->
<div class="button-group button-group--responsive">
  <button class="button button--primary" onclick="document.querySelector('sdx-progress-full').nextStep()">Next step</button>
  <button class="button button--secondary" onclick="document.querySelector('sdx-progress-full').previousStep()">Previous step</button>
</div>
```
*/
.progress-full {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100%;
  margin: 24px 0;
  text-align: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .progress-full {
    margin: 32px 0;
  }
}

.progress-full__bar {
  outline: none;
}

.progress-full__bar .indicator {
  font-weight: 400;
  width: 24px;
  height: 24px;
  border: 1px solid #1781e3;
  border-radius: 100%;
  color: #1781e3;
  background-color: transparent;
  line-height: 1;
  letter-spacing: normal;
  font-size: 14px;
  text-align: center;
  transition: all 150ms ease-in-out;
  cursor: pointer;
}

.progress-full__bar .indicator + .indicator {
  margin-left: 16px;
}

@media (min-width: 768px) {
  .progress-full__bar .indicator + .indicator {
    margin-left: 24px;
  }
}

.progress-full__bar .indicator:hover {
  color: #0851da;
  border-color: #0851da;
}

.progress-full__bar .indicator--completed {
  color: #fff;
  border-color: #25b252;
  background-color: #25b252;
}

.progress-full__bar .indicator--completed:hover {
  color: #fff;
  border-color: #008236;
  background-color: #008236;
}

.progress-full__bar .indicator--current {
  color: #fff;
  border-color: #1781e3;
  background-color: #1781e3;
}

.progress-full__bar .indicator--current:hover {
  color: #fff;
  border-color: #0851da;
  background-color: #0851da;
}

.progress-full__sections {
  font-weight: 400;
  position: relative;
  width: 100%;
  height: 18px;
  margin-top: 11px;
  line-height: 1;
  letter-spacing: -.35px;
  font-size: 16px;
  color: #666;
}

.progress-full__sections span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.progress-full__sections .section--active {
  visibility: visible;
}

.bg--dark .progress-full__bar .indicator {
  color: #fff;
  border-color: #fff;
}

.bg--dark .progress-full__bar .indicator:hover {
  color: #1781e3;
  border-color: #1781e3;
}

.bg--dark .progress-full__bar .indicator--completed {
  color: #fff;
  border-color: #25b252;
  background-color: #25b252;
}

.bg--dark .progress-full__bar .indicator--completed:hover {
  color: #fff;
  border-color: #008236;
  background-color: #008236;
}

.bg--dark .progress-full__bar .indicator--current {
  color: #fff;
  border-color: #1781e3;
  background-color: #1781e3;
}

.bg--dark .progress-full__bar .indicator--current:hover {
  color: #fff;
  border-color: #0851da;
  background-color: #0851da;
}

.bg--dark .progress-full__sections {
  color: #fff;
}

/*doc
---
title: Ribbons
name: 02-components-145-ribbon
category: Components - Ribbons
---

<p>The ribbon banner is a marketing / sales element which should be used very carefully.</p>

<p>As it should draw the users attention to a special condition of a product (e.g. special price, new product, for a defined period of time) the usage must be "special" as well. Otherwise the users attention is spread across too many featured offers, which then is contra productive.</p>

<p>This means: In a section like "Current offers" may not be more than 2 product-offers with different ribbons, e.g. one with a special price, one for a new product.</p>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <p>There are two variantions of ribbons, one on the corner and one the side.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/ribbons/Ribbon_corner.jpg">
      <span class="fig-caption">Small ribbon on the corner</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/ribbons/Ribbon_side.jpg">
      <span class="fig-caption">Small ribbon on the side</span>
    </div>
  </div>

  <h2>Rules</h2>

  <p>For each variant you can use a small (14px), medium (16px) and large font size (18px). The ribbons can be placed on the left and right hand side.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/ribbons/Ribbon_corner_guidelines.jpg">
      <span class="fig-caption">Guidelines for ribbon on the corner</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/ribbons/Ribbon_side_guidelines.jpg">
      <span class="fig-caption">Guidelines for ribbon on the side</span>
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/ribbons/ribbon_typo.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h2>Variations</h2>

<p>Below you can see the regular size examples of the Ribbon Badge on Corner and the Ribbon Badge on Side.</p>

```htmlmixed_webcomponent_sdx-ribbon
<sdx-ribbon label="PROMOTION">
  <div style="background: lightblue; height: 130px;"></div>
</sdx-ribbon>

<br>

<sdx-ribbon label="NEWEST" design="bookmark">
  <div style="background: lightblue; height: 130px;"></div>
</sdx-ribbon>
```
*/
.ribbon, .ribbon-badge {
  font-size: 16px;
  position: relative;
  width: 100%;
  height: 0;
  z-index: 10;
}

.ribbon .ribbon__wrap {
  width: 112px;
  height: 112px;
  position: absolute;
  overflow: hidden;
  top: -5px;
  right: -5px;
}

.ribbon.ribbon--left .ribbon__wrap {
  right: auto;
  left: -5px;
}

.ribbon.ribbon--left .ribbon__content {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: auto;
  bottom: 0;
}

.ribbon.ribbon--small {
  font-size: 14px;
}

.ribbon.ribbon--small .ribbon__wrap {
  width: 96px;
  height: 96px;
}

.ribbon.ribbon--large {
  font-size: 18px;
}

.ribbon.ribbon--large .ribbon__wrap {
  width: 128px;
  height: 128px;
}

.ribbon .ribbon__content {
  color: #fff;
  background-color: #a63297;
  text-align: center;
  box-shadow: 0 -1px 3px #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  position: absolute;
  top: -24px;
  /* 24px lineheight */
  width: calc(100% * 1.414);
  /* 100% * sqrt(2) - pythagoras */
}

.ribbon .ribbon__content::before, .ribbon .ribbon__content::after {
  content: "";
  position: absolute;
  bottom: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #7f2879;
}

.ribbon .ribbon__content::before {
  left: 0;
}

.ribbon .ribbon__content::after {
  right: 0;
}

.ribbon-badge .ribbon__content {
  position: absolute;
  display: inline-block;
  right: -8px;
  top: 6px;
  min-width: 70px;
  padding: 6px 8px 6px;
  background-color: #91ba2f;
  color: #fff;
}

.ribbon-badge .ribbon__content::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  border-top: 8px solid #759126;
  border-right: 8px solid transparent;
}

.ribbon-badge.ribbon--left .ribbon__content {
  right: auto;
  left: -8px;
}

.ribbon-badge.ribbon--left .ribbon__content::after {
  right: auto;
  left: 0;
  border-right: 0;
  border-left: 8px solid transparent;
}

.ribbon-badge.ribbon--small {
  font-size: 14px;
}

.ribbon-badge.ribbon--small .ribbon__content {
  padding: 4px 8px 4px;
}

.ribbon-badge.ribbon--large {
  font-size: 18px;
}

.ribbon-badge.ribbon--large .ribbon__content {
  padding: 8px 8px 8px;
}

/*doc
---
title: Tables
name: 02-components-175-tables-01-tables
category: Components - Tables
---

<p>Tables allow complex data to be seen easily at a glance. They allow the user to compare values and in some cases re-order data. They can be used for promotional or user-specific purposes, such as a file management.</p>

<div class="table-display padding-bottom-4">
  <h3 class="table__title">Yay this is a title</h3>
  <div class="table__wrapper">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Internet
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio01' checked>
            <label for='radio01'>100 Mbit/s download max</label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Swisscom TV
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio02-1'>
            <label for='radio02-1'>SWISSCOM TV Plus 2.0</label>
          </div>
          <div class="radio">
            <input type='radio' name='dummy' id='radio02-2'>
            <label for='radio02-2'>SWISSCOM TV Light 2.0</label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Landline
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio03-1'>
            <label for='radio03-1'>Yes</label>
          </div>
          <div class="radio">
            <input type='radio' name='dummy' id='radio03-2'>
            <label for='radio03-2'>No</label>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variation</h2>

  <h3>Display tables</h3>

  <p>Display tables are used to house small quantities of data, with the inclusion of radio buttons that allow users to select various elements, contributing to a sum total at the bottom of the table. They are commonly used for product configurators, where users may be selecting add ons or additional features that incur charges. They can be used directly in page, or in cards. Display tables feature large titles and ‘stickers’ that label the product type where applicable.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-14@2x-6.jpg">
      <span class="fig-caption">Display table with drop shadow</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-15@2x-8.jpg">
      <span class="fig-caption">Display table without drop shadow</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-16@2x-9.jpg">
      <span class="fig-caption">Display table with live price</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-17@2x-8.jpg">
      <span class="fig-caption">Display table without drop shadow</span>
    </div>
  </div>

  <p>They can also feature a live total, helping show users the direct cost implications of their selections.</p>

  <h3>Image base tables</h3>

  <p>Image tables help to make information clearer and more tangible. They use images in headings to visually show what the column within the table relates to. This enables users to read tables in a more visual way, making the data clearer and easier to understand. They can be positioned directly in page, or within separate modules and cards to help them stand out.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/tables/Group-18@2x-6.jpg">
        <span class="fig-caption">Image base tables</span>
      </div>
  </div>

  <h3>Data-driven tables</h3>

  <p>Use data tables for managing lists. Breaking down content into clearly labeled groups, and giving the user the ability to reorganise the order of these lists helps to create a more personal experience. Checkboxes should accompany each row if the user needs to select or manipulate data.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/tables/Group-12@2x-8.jpg">
        <span class="fig-caption">Data driven table with drop shadow</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/tables/Group-13@2x-9.jpg">
        <span class="fig-caption">Data driven table without drop shadow</span>
      </div>
  </div>

  <h2>Rules</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <h3>Image table on mobile</h3>
      <p>On mobile, swipe the image table header to change product.</p>
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-20@2x-4.jpg">
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3 class="padding-top-4">Margins</h3>

  <p>Tables do not have to adhere to the Swisscom grid, as a table columns can vary in length and number</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <h3>Image table on mobile</h3>
      <p>On mobile, swipe the image table header to change product.</p>
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-21@2x-5.jpg">
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <h3 class="padding-top-4">Drop shadows</h3>
      <p>Tables with a grey drop shadow are to be used in card-based layouts only.</p>
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-22@2x-1.jpg">
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2 class="padding-top-4">Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/tables/Group-23@2x-8.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h2>Data-driven tables</h2>

<p>Use data tables for managing lists. Breaking down content into clearly labeled groups, and giving the user the ability to reorganise the order of these lists helps to create a more personal experience. Checkboxes should accompany each row if the user needs to select or manipulate data.</p>

<h3>Basic Table</h3>

<p>Create a SDX styled table by wrapping a <code>&lt;table&gt;</code> with a wrapper <code>&lt;div&gt;</code> and add the class <code>table</code> to it.</p>

```htmlmixed
<div class="table table--responsive">
  <h3 class="table__title">Planets in the solar system</h3>
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th data-type="text">Planet</th>
          <th data-type="number" class="js-ascending">Perihelion (AU)</th>
          <th data-type="number">Volume</th>
          <th data-type="number">Orbital period</th>
          <th data-type="number">Escape velocity</th>
          <th data-type="number">Satellites</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Venus</td>
          <td>0.718440</td>
          <td>0.815 Earths</td>
          <td>0.615198 yr</td>
          <td>0.36 km/s</td>
          <td>0</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox1-2'>
              <label for='checkbox1-2'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>0.9832687</td>
          <td data-value="1">1.08321 × 10<sup>12</sup> km<sup>3</sup></td>
          <td>1.00001742096 yr</td>
          <td>11.186 km/s</td>
          <td>1</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox1-3'>
              <label for='checkbox1-3'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>1.3814</td>
          <td>0.151 Earths</td>
          <td>1.8808 yr</td>
          <td>5.027 km/s</td>
          <td>2</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox1-4'>
              <label for='checkbox1-4'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>4.95029</td>
          <td>1321 Earths</td>
          <td>11.8618 yr</td>
          <td>59.5 km/s</td>
          <td>67</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox1-5'>
              <label for='checkbox1-5'></label>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="button button--primary align-right">
    Button
  </button>
</div>
```

<h3>Responsive Table</h3>

<p>Create responsive tables by wrapping any <code>&lt;table&gt;</code> in <code>table__responsive</code> to make them scroll horizontally when the container size smaller than the table.</p>

```htmlmixed
<div class="table table--responsive">
  <h3 class="table__title">Planets in the solar system</h3>
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th>Planet</th>
          <th data-type="number">Perihelion (AU)</th>
          <th data-type="number">Volume</th>
          <th data-type="number">Orbital period</th>
          <th data-type="number">Escape velocity</th>
          <th data-type="number">Satellites</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Venus</td>
          <td>0.718440</td>
          <td>0.815 Earths</td>
          <td>0.615198 yr</td>
          <td>0.36 km/s</td>
          <td>0</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox2-2'>
              <label for='checkbox2-2'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>0.9832687</td>
          <td data-value="1">1.08321 × 10<sup>12</sup> km<sup>3</sup></td>
          <td>1.00001742096 yr</td>
          <td>11.186 km/s</td>
          <td>1</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox2-3'>
              <label for='checkbox2-3'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>1.3814</td>
          <td>0.151 Earths</td>
          <td>1.8808 yr</td>
          <td>5.027 km/s</td>
          <td>2</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox2-4'>
              <label for='checkbox2-4'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>4.95029</td>
          <td>1321 Earths</td>
          <td>11.8618 yr</td>
          <td>59.5 km/s</td>
          <td>67</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox2-5'>
              <label for='checkbox2-5'></label>
            </div>
          </td>
        </tr>
        <tr>
      </tbody>
    </table>
  </div>
  <button class="button button--primary align-right">
    Button
  </button>
</div>
```

<h2>Table Styles</h2>

<h3>Table with highlighted header</h3>

```htmlmixed
<div class="table table--responsive table--highlight">
  <h3 class="table__title">Planets in the solar system</h3>
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th>Planet</th>
          <th data-type="number">Perihelion (AU)</th>
          <th data-type="number">Volume</th>
          <th data-type="number">Orbital period</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Venus</td>
          <td>0.718440</td>
          <td>0.815 Earths</td>
          <td>0.615198 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox5-1'>
              <label for='checkbox5-1'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>0.9832687</td>
          <td data-value="1">1.08321 × 10<sup>12</sup> km<sup>3</sup></td>
          <td>1.00001742096 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox5-2'>
              <label for='checkbox5-2'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>1.3814</td>
          <td>0.151 Earths</td>
          <td>1.8808 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox5-3'>
              <label for='checkbox5-3'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>4.95029</td>
          <td>1321 Earths</td>
          <td>11.8618 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox5-4'>
              <label for='checkbox5-4'></label>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```

<h3>Table with no spacing</h3>

```htmlmixed
<div class="table table--responsive  table--no-border">
  <h3 class="table__title">Planets in the solar system</h3>
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th>Planet</th>
          <th data-type="number">Perihelion (AU)</th>
          <th data-type="number">Volume</th>
          <th data-type="number">Orbital period</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Venus</td>
          <td>0.718440</td>
          <td>0.815 Earths</td>
          <td>0.615198 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox6-1'>
              <label for='checkbox6-1'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>0.9832687</td>
          <td data-value="1">1.08321 × 10<sup>12</sup> km<sup>3</sup></td>
          <td>1.00001742096 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox6-2'>
              <label for='checkbox6-2'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>1.3814</td>
          <td>0.151 Earths</td>
          <td>1.8808 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox6-3'>
              <label for='checkbox6-3'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>4.95029</td>
          <td>1321 Earths</td>
          <td>11.8618 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox6-4'>
              <label for='checkbox6-4'></label>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```

<h2>Display tables</h2>

<p>Display tables are used to house small quantities of data, with the inclusion of radio buttons that allow users to select various elements, contributing to a sum total at the bottom of the table. They are commonly used for product configurators, where users may be selecting add ons or additional features that incur charges. They can be used directly in page, or in cards. Display tables feature large titles and <code>stickers</code> that label the product type where applicable.</p>

```htmlmixed
<div class="table-display">
  <h3 class="table__title">Yay this is a title</h3>
  <div class="table__wrapper">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Internet
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio1' checked>
            <label for='radio1'>100 Mbit/s download max</label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Swisscom TV
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio2-1'>
            <label for='radio2-1'>SWISSCOM TV Plus 2.0</label>
          </div>
          <div class="radio">
            <input type='radio' name='dummy' id='radio2-2'>
            <label for='radio2-2'>SWISSCOM TV Light 2.0</label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Landline
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio3-1'>
            <label for='radio3-1'>Yes</label>
          </div>
          <div class="radio">
            <input type='radio' name='dummy' id='radio3-2'>
            <label for='radio3-2'>No</label>
          </div>
        </form>
      </div>
    </div>
  </div>
  <button class="button button--primary align-right">
    Button
  </button>
</div>
```

<h2>Table with arbitrary content</h2>

<p>Tables with arbitrary content helps to easily build tables for a variety of use cases.</p>

```htmlmixed
<div class="table-generic">
  <div class="table__wrapper">
    <div class="row">
      <div class="table-items col-xs-12 offset-md-3 col-md-5">
        <div class="table-item text-align-center">
          <img class="table-image" src="/theme-build/img/samples/angebote-vivo-xl.png">
          <p>Vivo <strong>XL</strong> - Vivo <strong>M</strong></p>
        </div>
      </div>
      <div class="table-items col-xs-12 col-md-4">
        <div class="table-item text-align-center">
          <img class="table-image" src="/theme-build/img/samples/angebote-vivo-s.png">
          <p>Vivo <strong>S</strong> - Vivo <strong>XS</strong></p>
        </div>
      </div>
    </div>
    <div class="border-horizontal"></div>
    <div class="row">
      <div class="col-xs-12 col-md-3">
        <p class="margin-0">Natel infinity 2.0 M</p>
        <p class="margin-0">Natel infinity 2.0 L</p>
        <p class="margin-0">Natel infinity 2.0 XL</p>
      </div>
      <div class="border-vertical"></div>
      <div class="col-xs-12 col-md-5">
        <div class="table-items center-vertical">
          <h1 class="d1 margin-0 blue">20.–</h1>
        </div>
      </div>
      <div class="border-vertical"></div>
      <div class="col-xs-12 col-md-4">
        <div class="table-items center-vertical">
          <h1 class="d1 margin-0 blue">10.–</h1>
        </div>
      </div>
    </div>
    <div class="border-horizontal"></div>
    <div class="row">
      <div class="col-xs-12 col-md-3">
        <p class="margin-0">Natel infinity 2.0 XS</p>
        <p class="margin-0">Natel infinity 2.0 S</p>
      </div>
      <div class="border-vertical"></div>
      <div class="col-xs-12 col-md-5">
        <div class="table-items center-vertical">
          <h1 class="d1 margin-0 blue">10.–</h1>
        </div>
      </div>
      <div class="border-vertical"></div>
      <div class="col-xs-12 col-md-4">
        <div class="table-items center-vertical">
          <h1 class="d1 margin-0 blue">5.–</h1>
        </div>
      </div>
    </div>
  </div>
</div>
```
*/
.table-generic {
  display: block;
}

.table-generic .table__title {
  margin-bottom: 16px;
  border-bottom: 1px solid #adadad;
}

.table-generic .table__wrapper > .row {
  margin-left: 0;
  margin-right: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.table-generic .table__wrapper > .row > [class*='col-'] {
  padding: 0;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.table-generic .table__wrapper .table-items {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  height: 100%;
}

.table-generic .table__wrapper .table-item {
  display: inline-block;
  margin: 0 12px;
}

.table-generic .table__wrapper .table-image {
  width: 80px;
  height: auto;
}

.table-generic .highlight {
  background: #f9fafc;
}

.table-generic .border {
  margin: 16px;
  padding: 16px;
  border: 1px solid #adadad;
}

.table-generic .border-horizontal {
  margin: 16px 0;
  border-bottom: 1px solid #adadad;
}

.table-generic .border-vertical {
  margin: 0 16px;
  border-right: 1px solid #adadad;
}

.table-display {
  display: block;
}

.table-display::after {
  content: '';
  display: block;
  clear: both;
}

.table-display .table__wrapper {
  margin-bottom: 16px;
  border-top: 1px solid #adadad;
  border-bottom: 1px solid #adadad;
}

.table-display .table__wrapper > .row {
  margin: 0;
  padding: 10px 0;
}

.table-display .table__wrapper > .row:not(:last-child) {
  border-bottom: 1px solid #adadad;
}

.table-display .table__wrapper > .row > [class^='col-'] {
  padding: 6px 16px 0;
}

.table-display .table__wrapper .checkbox + .checkbox {
  margin-top: 8px;
}

.table-display .table__wrapper .radio + .radio {
  margin-top: 8px;
}

.table-display .button {
  margin: 0 16px;
}

.table {
  display: table;
  width: 100%;
}

.table .table__wrapper {
  display: table;
  width: 100%;
}

.table table {
  display: table;
  width: 100%;
  color: #333;
  border-collapse: collapse;
  border-top: 1px solid #adadad;
  border-bottom: 1px solid #adadad;
}

.table table:not(:last-child) {
  margin-bottom: 16px;
}

.table th,
.table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
  text-align: left;
}

.table th:first-child,
.table td:first-child {
  padding-left: 16px;
}

.table th:last-child,
.table td:last-child {
  padding-right: 16px;
}

.table thead {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 16px;
  font-weight: 600;
}

.table thead tr {
  border-bottom: 1px solid #adadad;
  text-align: left;
}

.table thead th {
  padding-top: 25px;
  padding-bottom: 23px;
}

.table thead th[data-type] {
  cursor: pointer;
}

.table thead th .arrow-icon {
  position: relative;
  display: inline-block;
  visibility: hidden;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  pointer-events: none;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.table thead th .arrow-icon::before, .table thead th .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #015;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.table thead th .arrow-icon::before {
  left: 0;
}

.table thead th .arrow-icon::after {
  left: 6px;
}

.table thead th.js-ascending .arrow-icon {
  visibility: visible;
  opacity: 1;
}

.table thead th.js-ascending .arrow-icon::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.table thead th.js-ascending .arrow-icon::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.table thead th.js-descending .arrow-icon {
  visibility: visible;
  opacity: 1;
}

.table thead th.js-descending .arrow-icon::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.table thead th.js-descending .arrow-icon::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.table tbody {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table tbody tr {
  text-align: left;
}

.table tbody tr:not(:last-child) {
  border-bottom: 1px solid #adadad;
}

.table tbody td {
  padding-top: 20px;
  padding-bottom: 17px;
}

.table .button {
  margin: 0 16px;
}

.table--responsive {
  display: block;
}

.table--responsive::after {
  content: '';
  display: block;
  clear: both;
}

.table--responsive:not(:last-child) {
  margin-bottom: 16px;
}

.table--responsive .table__wrapper {
  display: block;
  width: 100%;
  min-height: 0;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.table--responsive .table__wrapper:not(:last-child) {
  margin-bottom: 16px;
}

.table--reflow {
  display: block;
}

.table--reflow .table__wrapper {
  display: block;
  width: 100%;
}

.table--reflow table {
  display: block;
  position: relative;
  width: 100%;
}

.table--reflow td:first-child,
.table--reflow th:first-child {
  padding-left: 8px;
}

.table--reflow td:last-child,
.table--reflow th:last-child {
  padding-right: 8px;
}

.table--reflow thead {
  display: block;
  float: left;
}

.table--reflow thead tr {
  display: block;
  border-bottom: 0;
}

.table--reflow thead tr th {
  padding-left: 16px;
}

.table--reflow thead tr th::after {
  content: '\00a0';
}

.table--reflow tbody {
  display: block;
  width: auto;
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.table--reflow tbody tr {
  display: table-cell;
  border-bottom: 0;
}

.table--reflow tbody tr:last-child td {
  padding-right: 16px;
}

.table--reflow thead tr,
.table--reflow tbody tr,
.table--reflow tfoot tr {
  border-bottom: 0 !important;
}

.table--reflow td:empty::after {
  content: '\00a0';
}

.table--reflow tr td,
.table--reflow tr th {
  display: block;
  padding-top: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid #adadad;
}

.table--reflow tr td:last-child,
.table--reflow tr th:last-child {
  border-bottom: 0;
}

.table--highlight thead {
  background: #f9fafc;
}

.table--no-border .table__title {
  padding-left: 0;
  padding-right: 0;
}

.table--no-border table th:first-child,
.table--no-border table td:first-child {
  padding-left: 0;
}

.table--no-border table th:last-child,
.table--no-border table td:last-child {
  padding-right: 0;
}

.table__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0 16px 15px;
  text-align: left;
}

.bar-chart-horizontal .js-data,
.bar-chart-horizontal .js-data-list,
.bar-chart-vertical .js-data,
.bar-chart-vertical .js-data-list,
.pie-chart .js-data,
.pie-chart .js-data-list {
  display: none;
}

.bar-chart-horizontal .tooltip::before,
.bar-chart-vertical .tooltip::before,
.pie-chart .tooltip::before {
  margin-bottom: -13px;
}

.bar-chart-horizontal .tooltip::after,
.bar-chart-vertical .tooltip::after,
.pie-chart .tooltip::after {
  bottom: calc(100% + 5px);
  min-width: 200px;
  font-size: 14px;
}

.bar-chart__legend,
.pie-chart__legend {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style-type: none;
  min-height: 24px;
  margin-top: 29px;
  margin-bottom: 28px;
}

.bar-chart__legend li,
.pie-chart__legend li {
  margin: 0 20px 0 0;
}

.bar-chart__legend li::before,
.pie-chart__legend li::before {
  content: '';
}

.bar-chart__legend li .bullet,
.pie-chart__legend li .bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
}

.pie-chart__legend .orchid,
.bar-chart__legend .orchid,
.bar-chart-horizontal .orchid,
.bar-chart-vertical .orchid {
  background-color: #a63297;
}

.pie-chart__legend .orchid--active,
.bar-chart__legend .orchid--active,
.bar-chart-horizontal .orchid--active,
.bar-chart-vertical .orchid--active {
  background-color: #7f2879;
}

.pie-chart__legend .iris,
.bar-chart__legend .iris,
.bar-chart-horizontal .iris,
.bar-chart-vertical .iris {
  background-color: #5944c6;
}

.pie-chart__legend .iris--active,
.bar-chart__legend .iris--active,
.bar-chart-horizontal .iris--active,
.bar-chart-vertical .iris--active {
  background-color: #42389e;
}

.pie-chart__legend .pink,
.bar-chart__legend .pink,
.bar-chart-horizontal .pink,
.bar-chart-vertical .pink {
  background-color: #e61e64;
}

.pie-chart__legend .pink--active,
.bar-chart__legend .pink--active,
.bar-chart-horizontal .pink--active,
.bar-chart-vertical .pink--active {
  background-color: #bf1b5a;
}

.pie-chart__legend .turquoise,
.bar-chart__legend .turquoise,
.bar-chart-horizontal .turquoise,
.bar-chart-vertical .turquoise {
  background-color: #0eaba9;
}

.pie-chart__legend .turquoise--active,
.bar-chart__legend .turquoise--active,
.bar-chart-horizontal .turquoise--active,
.bar-chart-vertical .turquoise--active {
  background-color: #0c847e;
}

.pie-chart__legend .apple,
.bar-chart__legend .apple,
.bar-chart-horizontal .apple,
.bar-chart-vertical .apple {
  background-color: #91ba2f;
}

.pie-chart__legend .apple--active,
.bar-chart__legend .apple--active,
.bar-chart-horizontal .apple--active,
.bar-chart-vertical .apple--active {
  background-color: #759126;
}

.pie-chart__legend .petrol,
.bar-chart__legend .petrol,
.bar-chart-horizontal .petrol,
.bar-chart-vertical .petrol {
  background-color: #19657a;
}

.pie-chart__legend .petrol--active,
.bar-chart__legend .petrol--active,
.bar-chart-horizontal .petrol--active,
.bar-chart-vertical .petrol--active {
  background-color: #114551;
}

/*doc
---
title: Pie charts
name: 02-components-025-pie-charts-01
category: Components - Pie charts
---

<p>Pie charts are used to show percentage based data. Data is shown in segments of different colors, with the sum total equalling 100%.</p>

<script>
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  function getRandomData() {
    var data = [
      {
        title: "Photos",
        color: "petrol"
      },
      {
        title: "Files",
        color: "orchid"
      },
      {
        title: "Videos",
        color: "apple"
      },
      {
        title: "Available",
        color: "#e0e6e9"
      }
    ]

    for (var i = 0; i < data.length; i++) {
      data[i].value = getRandom(2, 20);
    }

    return data;
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var pieChart = new sdx.PieChart(document.getElementById("pieChart01"));

    document.getElementById("btnChartUpdate1").addEventListener("click", function () {
      var data = getRandomData();
      pieChart.update(data);
    });
  });
</script>

<button class="button button--primary" id="btnChartUpdate1">Update</button>
<div class="pie-chart margin-top-4" data-init="none" data-unit="GB" id="pieChart01">
  <div class="js-data-list">
    <div class="js-data" data-value="2" data-color="petrol">Photos</div>
    <div class="js-data" data-value="2" data-color="orchid">Files</div>
    <div class="js-data" data-value="3" data-color="apple">Videos</div>
    <div class="js-data" data-value="10" data-color="#e0e6e9">Available</div>
  </div>
  <div class="chart-wrapper">
    <div class="js-chart"></div>
    <div class="meta">
      <div class="title">15 GB</div>
      <div class="subtitle">Available</div>
    </div>
  </div>
  <ul class="pie-chart__legend js-legend"></ul>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Placement of vertical explanation</h3>

  <p>The stacked version positions the explanation below the pie chart. Best use when horizontal space is restricted, for example on a narrow viewports like mobile or when the pie chart is displayed within a card or a narrow column.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/pie_charts/Group-3@2x-3.jpg" >
      <span class="fig-caption">Stacked pie chart</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/pie_charts/Group-6@2x-4.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Placement of horizontal explanation</h3>

  <p>The side by side version positions the legend to the side of the pie chart. This version is used when horizontal space isn’t an issue, for example on wide viewports like desktop.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/pie_charts/Group-7@2x-6.jpg" >
      <span class="fig-caption">Side by side pie chart</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/pie_charts/Group-8@2x-4.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Proportions</h3>

  <p>Data is shown in segments of different colors, with the sum total of segments equalling 100%.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
    <img class="img-responsive" src="./theme-build/img/design/pie_charts/Group-12@2x-6.jpg">
    <span class="fig-caption">the total sum of all segments is 100%</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Spacing around</h3>

  <p>A margin of 24px is required above and below the elements.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/pie_charts/Group-13@2x-7.jpg">
      <span class="fig-caption">Spacing around</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Pie chart with one color</h3>

  <p>Make sure the pie chart has always an open end so users can still identify it as a pie chart - even it has only one color.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/pie_charts/Empty-Pie-Chart-Copy@2x.jpg">
      <span class="fig-caption">Make sure the pie chart has always an open end</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/pie_charts/Group-15@2x-5.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/pie_charts/Group-16@2x-6.jpg">
        <span class="fig-caption">Dark variant</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Pie charts are used to show percentage based data. Data is shown in segments of different colors, with the sum total equalling 100%.</p>

<script>
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  function getRandomData() {
    var data = [
      {
        title: "Photos",
        color: "petrol"
      },
      {
        title: "Files",
        color: "orchid"
      },
      {
        title: "Videos",
        color: "apple"
      },
      {
        title: "Available",
        color: "#e0e6e9"
      }
    ]

    for (var i = 0; i < data.length; i++) {
      data[i].value = getRandom(2, 20);
    }

    return data;
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var pieChart = new sdx.PieChart(document.getElementById("pieChart02"));

    document.getElementById("btnChartUpdate").addEventListener("click", function () {
      var data = getRandomData();
      pieChart.update(data);
    });
  });
</script>

<button class="button button--primary" id="btnChartUpdate">Update</button>

```htmlmixed
<div class="pie-chart" data-init="none" data-unit="GB" id="pieChart02">
  <div class="js-data-list">
    <div class="js-data" data-value="2" data-color="petrol">Photos</div>
    <div class="js-data" data-value="2" data-color="orchid">Files</div>
    <div class="js-data" data-value="3" data-color="apple">Videos</div>
    <div class="js-data" data-value="10" data-color="#e0e6e9">Available</div>
  </div>
  <div class="chart-wrapper">
    <div class="js-chart"></div>
    <div class="meta">
      <div class="title">15 GB</div>
      <div class="subtitle">Available</div>
    </div>
  </div>
  <ul class="pie-chart__legend js-legend"></ul>
</div>
```

<p>You can either define the data elements in the markup and use the <code>data-init="auto"</code> attribute. Or update the data values using the provided JavaScript component. The data list is expected to be in the following format:</p>

```javascript_no_preview
[
  {
    title: "Photos",
    color: "petrol",
    value: 12
  },
  {
    title: "Files",
    color: "orchid"
    value: 2
  }
]
```

<p><b>Title:</b> The segment data title<br>
  <b>Color:</b> The sdx interaction color CSS class name or a valid hex color (eg <code>#ffffff</code>)<br>
  <b>Value:</b> The value of the current segment as integer or floating point number<br></p>

<p>In addition make sure to set the <code>data-unit</code> attribute to the desired value.</p>

<h2>Variations</h2>

<h3>Stacked</h3>

<p>The stacked version positions the data key underneath the pie chart. This version is used when horizontal space is restricted, for example on narrow viewports like mobile or when the pie chart is displayed within a card or a narrow column.</p>

```htmlmixed
<div class="pie-chart pie-chart--stacked" data-init="auto" data-unit="GB">
  <div class="js-data-list">
    <div class="js-data" data-value="2" data-color="petrol">Photos</div>
    <div class="js-data" data-value="2" data-color="orchid">Files</div>
    <div class="js-data" data-value="3" data-color="apple">Videos</div>
    <div class="js-data" data-value="10" data-color="#e0e6e9">Available</div>
  </div>
  <div class="chart-wrapper">
    <div class="js-chart"></div>
    <div class="meta">
      <div class="title">10 GB</div>
      <div class="subtitle">Available</div>
    </div>
  </div>
  <ul class="pie-chart__legend js-legend"></ul>
</div>
```

<h3>Dark style</h3>

<p>The standard and the stacked pie chart both support dark backrounds by default. Just put them in a <code>bg bg--dark</code> container and they will adapt their style accordingly.</p>

```htmlmixed
<div class="bg bg--dark">
  <div class="pie-chart" data-init="auto" data-unit="GB">
    <div class="js-data-list">
      <div class="js-data" data-value="2" data-color="petrol">Photos</div>
      <div class="js-data" data-value="2" data-color="orchid">Files</div>
      <div class="js-data" data-value="3" data-color="apple">Videos</div>
      <div class="js-data" data-value="10" data-color="#e0e6e9">Available</div>
    </div>
    <div class="chart-wrapper">
      <div class="js-chart"></div>
      <div class="meta">
        <div class="title">10 GB</div>
        <div class="subtitle">Available</div>
      </div>
    </div>
    <ul class="pie-chart__legend js-legend"></ul>
  </div>
</div>
```
<h3>Empty State</h3>

<p>The empty state is implemented using a pie chart with only one data element definition.</p>

```htmlmixed
<div class="pie-chart" data-init="auto" data-unit="GB">
  <div class="js-data-list">
    <div class="js-data" data-value="15" data-color="#E0E6E9">Storage</div>
  </div>
  <div class="chart-wrapper">
    <div class="js-chart"></div>
    <div class="meta">
      <div class="title">15 GB</div>
      <div class="subtitle">Storage</div>
    </div>
  </div>
  <ul class="pie-chart__legend js-legend"></ul>
</div>
```
*/
.pie-chart {
  position: relative;
}

.pie-chart .js-chart {
  position: relative;
  height: 182px;
  width: 182px;
  text-align: center;
  margin: 0 auto;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.pie-chart .js-chart > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 182px;
  height: 182px;
  fill: transparent;
  stroke-width: 2;
  stroke-linecap: round;
}

.pie-chart .meta {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 28px;
  letter-spacing: -.89px;
  font-size: 32px;
  position: absolute;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 10px;
  left: 0;
  width: 182px;
  height: 172px;
  margin: 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.pie-chart .meta .subtitle {
  font-weight: 300;
  font-size: 16px;
  color: #666;
  text-transform: capitalize;
}

.pie-chart .chart-wrapper {
  position: relative;
  margin: 20px auto;
  width: 182px;
}

.pie-chart--stacked {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.pie-chart--stacked .chart-wrapper {
  margin: 20px;
}

.pie-chart--stacked .pie-chart__legend {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-left: 32px;
}

.pie-chart--stacked .pie-chart__legend li {
  margin-bottom: 5px;
}

.pie-chart--stacked .pie-chart__legend .bullet {
  margin-right: 10px;
}

.pie-chart .orchid {
  stroke: #a63297;
}

.pie-chart .orchid--active {
  stroke: #7f2879;
}

.pie-chart .iris {
  stroke: #5944c6;
}

.pie-chart .iris--active {
  stroke: #42389e;
}

.pie-chart .pink {
  stroke: #e61e64;
}

.pie-chart .pink--active {
  stroke: #bf1b5a;
}

.pie-chart .turquoise {
  stroke: #0eaba9;
}

.pie-chart .turquoise--active {
  stroke: #0c847e;
}

.pie-chart .apple {
  stroke: #91ba2f;
}

.pie-chart .apple--active {
  stroke: #759126;
}

.pie-chart .petrol {
  stroke: #19657a;
}

.pie-chart .petrol--active {
  stroke: #114551;
}

.pie-chart__legend {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.bg--dark .pie-chart .meta .subtitle {
  color: #fff;
}

/*doc
---
title: Bar chart (horizontal)
name: 02-components-015-bar-chart-horizontal-01
category: Components - Bar chart (horizontal)
---

<p>Bar charts enable us to display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data. Charts can be displayed directly into pages, or placed within cards.</p>

<script>
    function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var data01 = [
      {
        title: "Internet",
        color: "apple",
        value: 270
      }
    ];

    var data02 = [
      {
        title: "Subscription",
        color: "turquoise",
        value: 199
      },
      {
        title: "Additional",
        color: "petrol",
        value: 40
      }
    ];

    var barChart01 = new sdx.BarChartHorizontal(document.getElementById("barChart01"), data01);
    var barChart02 = new sdx.BarChartHorizontal(document.getElementById("barChart02"), data02);

    document.getElementById("btnChartUpdate").addEventListener("click", function () {
      data01[0].value = getRandom(0, 1200)
      barChart01.update(data01)

      data02[0].value = getRandom(0, 350)
      data02[1].value = getRandom(0, 350 - data02[0].value)
      barChart02.update(data02)
    });
  });
</script>

<style>
  .exampleOutput .bg--light {
    margin-bottom: 32px;
    background-color: #eef3f6;
  }
</style>

<button class="button button--primary" id="btnChartUpdate">Update</button>

<div class="bg bg--light" style="margin-bottom: 32px">
  <div class="bar-chart-horizontal bar-chart-horizontal--limited"
    data-max="1200" data-unit="hours" id="barChart01">
    <div class="detail-left">Internet</div>
    <div class="bar-chart__progress"></div>
    <div class="detail-bottom"></div>
  </div>
  <div class="bar-chart-horizontal bar-chart-horizontal--unlimited"
      data-max="350" data-unit="CHF" data-precision="2" id="barChart02">
    <div class="bar-chart__detail">
      <div class="detail-left">Sandra’s Natel XL</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Unlimited data</h3>

  <p>Unlimited data charts show types of data which have no upper limit, for example additional costs.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-7@2x-7.jpg">
      <span class="fig-caption">Unlimited data charts</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-8@2x-5.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Limited data</h3>

  <p>Limited data charts are used to show data on a limited scale, such as percentages or limited allowances with a single color displaying the used amount.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-15@2x-6.jpg">
      <span class="fig-caption">Light variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-11@2x-10.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Split data</h3>

  <p>Split data charts enable us to display mutliple data types in a single bar chart. A bar can be divided into different colors to show how the full bar is representing accumulated data from different sources.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-16@2x-7.jpg">
      <span class="fig-caption">Light variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-17@2x-7.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Using color combinations</h3>

  <p>Bar charts can feature multiple colors to denote different data sets, which are explained using a color coded key below.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-20@2x-3.jpg">
      <span class="fig-caption">Multiple color bar chart example</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Empty data</h3>

  <p>Empty data – or bars displaying zero – are represented by a grey dot.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-21@2x-4.jpg">
      <span class="fig-caption">Empty data chart</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Tooltip</h3>

  <p>A tooltip can be used with charts to give the user context and provide additional information they wouldn’t otherwise see.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-22@2x-5.jpg">
      <span class="fig-caption">Tooltip on a light background</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-23@2x.jpg">
      <span class="fig-caption">Tooltip on a dark background</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Relative positioning</h3>

  <p>The bar chart should always have 32px space between itself and other elements.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-9@2x-8.jpg">
      <span class="fig-caption">Bar chart spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Minimum height</h3>

  <p>The bar chart always requires a minimum padding between elements to ensure a visual relationship between the data and labels remains clear at all times. There should always be 24px between the dividing line and the label. There should be 20px padding between labels and data, and 24px between data and the following dividing line.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-24@2x-4.jpg">
      <span class="fig-caption">A minimal height of 20px and 24px are required for padding</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Minimum width</h3>

  <p>The limited data chart should have a minimum width of 272px to ensure legibility across devices.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-25@2x-5.jpg">
      <span class="fig-caption">Min width of 272px</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Bars and data</h3>

  <p>Bars containing data have rounded ends, but data should always have a flat end point.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-26@2x-5.jpg">
      <span class="fig-caption">Visual construction</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-27@2x-4.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-28@2x-4.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/barchart_horizontal/Group-29@2x-4.jpg">
        <span class="fig-caption">Dark variant</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Bar charts enable us to display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data. Charts can be displayed directly into pages, or placed within cards.</p>

<script>
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var data01 = [
      {
        title: "Internet",
        color: "apple",
        value: 270
      }
    ];

    var data02 = [
      {
        title: "Subscription",
        color: "turquoise",
        value: 199
      },
      {
        title: "Additional",
        color: "petrol",
        value: 40
      }
    ];

    var barChart03 = new sdx.BarChartHorizontal(document.getElementById("barChart03"), data01);
    var barChart04 = new sdx.BarChartHorizontal(document.getElementById("barChart04"), data02);

    document.getElementById("btnChartUpdate2").addEventListener("click", function () {
      data01[0].value = getRandom(0, 1200)
      barChart03.update(data01)

      data02[0].value = getRandom(0, 350)
      data02[1].value = getRandom(0, 350 - data02[0].value)
      barChart04.update(data02)
    });
  });
</script>

<style>
  .exampleOutput .bg--light {
    margin-bottom: 32px;
    background-color: #eef3f6;
  }
</style>

<button class="button button--primary" id="btnChartUpdate2">Update</button>

<div class="bg bg--light" style="margin-bottom: 32px">
  <div class="bar-chart-horizontal bar-chart-horizontal--limited"
    data-max="1200" data-unit="hours" id="barChart03">
    <div class="detail-left">Internet</div>
    <div class="bar-chart__progress"></div>
    <div class="detail-bottom"></div>
  </div>
  <div class="bar-chart-horizontal bar-chart-horizontal--unlimited"
      data-max="350" data-unit="CHF" data-precision="2" id="barChart04">
    <div class="bar-chart__detail">
      <div class="detail-left">Sandra’s Natel XL</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
</div>

<h2>Unlimited data</h2>

<p>Unlimited data charts show types of data which have no upper limit, for example additional costs.</p>

```htmlmixed
<div class="bg bg--light">
  <div class="bar-chart-horizontal bar-chart-horizontal--unlimited" data-init="auto"
      data-max="350" data-unit="CHF" data-precision="2">
    <div class="js-data-list">
      <div class="js-data" data-value="199" data-color="turquoise">Subscription</div>
      <div class="js-data" data-value="40" data-color="petrol">Additional</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">Sandra’s Natel XL</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
</div>

<div class="bg bg--dark">
  <div class="bar-chart-horizontal bar-chart-horizontal--unlimited" data-init="auto"
      data-max="350" data-unit="CHF" data-precision="2">
    <div class="js-data-list">
      <div class="js-data" data-value="79" data-color="turquoise">Subscription</div>
      <div class="js-data" data-value="15" data-color="petrol">Additional</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">Marc’s Natel S</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
</div>
```
<h2>Limited data</h2>

<p>Limited data charts are used to show data on a limited scale, such as percentages or limited allowances with a single color displaying the used amount.</p>

```htmlmixed
<div class="bg bg--light">
  <div class="bar-chart-horizontal bar-chart-horizontal--limited"
    data-init="auto" data-max="1200" data-unit="hours">
    <div class="js-data-list">
      <div class="js-data" data-value="270" data-color="apple">Internet</div>
    </div>
    <div class="detail-left">Internet</div>
    <div class="bar-chart__progress"></div>
    <div class="detail-bottom"></div>
  </div>
</div>

<div class="bg bg--dark">
  <div class="bar-chart-horizontal bar-chart-horizontal--limited"
    data-init="auto" data-max="512" data-unit="hours">
    <div class="js-data-list">
      <div class="js-data" data-value="499" data-color="turquoise">Internet</div>
    </div>
    <div class="detail-left">Internet</div>
    <div class="bar-chart__progress"></div>
    <div class="detail-bottom"></div>
  </div>
</div>
```
<h2>Split data</h2>

<p>Split data charts enable us to display mutliple data types in a single bar chart. A bar can be divided into different colors to show how the full bar is representing accumulated data from different sources.</p>

```htmlmixed
<div class="bg bg--light">
  <div class="bar-chart-horizontal bar-chart-horizontal--split"
    data-init="auto" data-max="150" data-unit="CHF" data-precision="2" data-legend="#legend">
    <div class="js-data-list">
      <div class="js-data" data-value="65" data-color="turquoise">Additional Costs</div>
      <div class="js-data" data-value="7.5" data-color="petrol">Subscription Costs</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">Internet</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
  <div class="bar-chart-horizontal bar-chart-horizontal--split"
    data-init="auto" data-max="150" data-unit="CHF" data-precision="2">
    <div class="js-data-list">
      <div class="js-data" data-value="123" data-color="turquoise">Additional Costs</div>
      <div class="js-data" data-value="19" data-color="petrol">Subscription Costs</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">TV</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
  <ul class="bar-chart__legend" id="legend"></ul>
</div>
```

```htmlmixed
<div class="bg bg--light">
  <div class="bar-chart-horizontal bar-chart-horizontal--split"
    data-init="auto" data-max="150" data-unit="CHF" data-precision="2" data-legend="#legend2">
    <div class="js-data-list">
      <div class="js-data" data-value="49" data-color="pink">Internet</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">Internet</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
  <div class="bar-chart-horizontal bar-chart-horizontal--split"
    data-init="auto" data-max="150" data-unit="CHF" data-precision="2" data-legend="#legend2">
    <div class="js-data-list">
      <div class="js-data" data-value="98" data-color="orchid">TV</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">TV</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
  <ul class="bar-chart__legend" id="legend2"></ul>
</div>
```

<h3>Dark styles</h3>
```htmlmixed
<div class="bg bg--dark">
  <div class="bar-chart-horizontal bar-chart-horizontal--split"
    data-init="auto" data-max="150" data-unit="CHF" data-precision="2" data-legend="#legend3">
    <div class="js-data-list">
      <div class="js-data" data-value="49" data-color="pink">Internet</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">Internet</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
  <div class="bar-chart-horizontal bar-chart-horizontal--split"
    data-init="auto" data-max="150" data-unit="CHF" data-precision="2" data-legend="#legend3">
    <div class="js-data-list">
      <div class="js-data" data-value="98" data-color="turquoise">TV</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">TV</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
  <ul class="bar-chart__legend" id="legend3"></ul>
</div>
```

<h3>Empty state</h3>
```htmlmixed
<div class="bg bg--dark">
  <div class="bar-chart-horizontal bar-chart-horizontal--split"
    data-init="auto" data-max="150" data-unit="CHF" data-precision="2" data-legend="#legend4">
    <div class="js-data-list">
      <div class="js-data" data-value="0" data-color="pink">Internet</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">Internet</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
  <div class="bar-chart-horizontal bar-chart-horizontal--split"
    data-init="auto" data-max="150" data-unit="CHF" data-precision="2" data-legend="#legend4">
    <div class="js-data-list">
      <div class="js-data" data-value="0" data-color="turquoise">TV</div>
    </div>
    <div class="bar-chart__detail">
      <div class="detail-left">TV</div>
      <div class="detail-right"></div>
    </div>
    <div class="bar-chart__progress"></div>
  </div>
  <ul class="bar-chart__legend" id="legend4"></ul>
</div>
```
*/
.bar-chart__progress {
  position: relative;
  width: 100%;
  height: 8px;
  margin-bottom: 32px;
}

.bar-chart__progress .indicator {
  position: relative;
  float: left;
  width: 100%;
  height: 8px;
}

.bar-chart__progress .indicator-wrapper {
  position: relative;
  float: left;
}

.bar-chart__progress .indicator-wrapper:first-child .indicator {
  border-radius: 8px 0 0 8px;
}

.bar-chart-horizontal {
  position: relative;
  min-width: 272px;
  margin-bottom: 32px;
  color: #333;
}

.bar-chart-horizontal:last-child {
  margin-bottom: 0;
}

.bar-chart-horizontal--limited {
  padding: 16px 22px 22px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
}

.bar-chart-horizontal--limited .bar-chart__progress {
  margin: 7px 0 0 0;
  border-radius: 8px;
  background-color: #d6dee2;
  overflow: hidden;
}

.bar-chart-horizontal--limited .detail-left {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 24px;
  letter-spacing: -.22px;
  font-size: 20px;
  text-align: left;
}

.bar-chart-horizontal--limited .detail-bottom {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 12px;
}

.bar-chart-horizontal--limited .detail-bottom .value {
  display: inline-block;
  text-align: right;
}

.bar-chart-horizontal--limited .detail-bottom .value:not(:first-child) {
  color: #666;
}

.bar-chart-horizontal--limited .detail-bottom .value:not(:first-child)::before {
  content: '/ ';
}

.bar-chart-horizontal--limited .detail-bottom .value:not(:first-child)::after {
  content: '\00a0 ';
}

.bar-chart-horizontal--limited .detail-bottom .unit {
  color: #666;
}

.bar-chart-horizontal--unlimited {
  padding: 16px 22px 22px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
}

.bar-chart-horizontal--unlimited .bar-chart__progress {
  margin: 14px 0 0 0;
}

.bar-chart-horizontal--unlimited > .bar-chart__detail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.bar-chart-horizontal--unlimited > .bar-chart__detail .detail-left {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 24px;
  letter-spacing: -.22px;
  font-size: 20px;
  text-align: left;
}

.bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value {
  display: inline-block;
  text-align: right;
}

.bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value::before, .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value::after {
  content: '\00a0 ';
}

.bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .unit {
  color: #666;
}

.bar-chart-horizontal--split {
  border-top: 1px solid #979797;
}

.bar-chart-horizontal--split > .bar-chart__detail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 13px 0 18px;
  padding-top: 8px;
}

.bar-chart-horizontal--split > .bar-chart__detail .detail-left {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  text-align: left;
}

.bar-chart-horizontal--split > .bar-chart__detail .detail-right {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.bar-chart-horizontal--split > .bar-chart__detail .detail-right .value {
  font-weight: 600;
  display: inline-block;
  text-align: right;
}

.bar-chart-horizontal--split > .bar-chart__detail .detail-right .value::before, .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value::after {
  content: '\00a0 ';
}

.bar-chart-horizontal--split > .bar-chart__detail .detail-right .value:nth-child(3)::before {
  font-weight: normal;
  content: ' / ';
  color: #666;
}

.bar-chart__legend {
  padding-top: 32px;
  border-top: 1px solid #979797;
}

.bg--dark .bar-chart-horizontal--split {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.bg--dark .bar-chart-horizontal--split .detail-left,
.bg--dark .bar-chart-horizontal--split .detail-right {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
}

.bg--dark .bar-chart__legend {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

/*doc
---
title: Bar chart (vertical)
name: 02-components-020-bar-chart-vertical-01
category: Components - Bar chart (vertical)
---

<p>Bar charts enable us to display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data.</p>

<button class="button button--primary" id="btnChartUpdate0">Update</button>
<div>
  <div>
    <div class="bar-chart-vertical" data-init="auto" data-max="300" data-unit="CHF" id="barChart0">
        <div class="js-data-list">
          <div class="js-category" data-color="turquoise">Subscription Cost</div>
          <div class="js-category" data-color="petrol">Additional Cost</div>
          <div class="js-data" data-value="150, 140">Jan</div>
          <div class="js-data" data-value="110, 20">Feb</div>
          <div class="js-data" data-value="50, 120">Mar</div>
          <div class="js-data" data-value="0, 0" data-class="hidden-phone-down">Apr</div>
          <div class="js-data" data-value="80, 30" data-class="hidden-phone-down">May</div>
        </div>
        <div class="chart-wrapper">
          <ul class="bar-chart__grid">
            <li><div class="axis-y-label">300</div></li>
            <li><div class="axis-y-label">200</div></li>
            <li><div class="axis-y-label">100</div></li>
          </ul>
          <ul class="chart js-chart">
            <li>
              <ul class="indicator-wrapper">
                <div class="indicator-wrapper-inner tooltip tooltip--right tooltip--multiline" aria-label="Subscription Cost: 150 CHF Additional Cost: 140 CHF">
                  <li class="indicator turquoise" style="height: 86px;"></li>
                  <li class="indicator petrol" style="height: 80.2667px;"></li>
                </div>
              </ul>
              <div class="axis-x-label">Jan</div>
            </li>
            <li>
              <ul class="indicator-wrapper">
                <div class="indicator-wrapper-inner tooltip tooltip--right tooltip--multiline" aria-label="Subscription Cost: 110 CHF Additional Cost: 20 CHF">
                  <li class="indicator turquoise" style="height: 63.0667px;"></li>
                  <li class="indicator petrol" style="height: 11.4667px;"></li>
                </div>
              </ul>
              <div class="axis-x-label">Feb</div></li>
            <li>
              <ul class="indicator-wrapper">
                <div class="indicator-wrapper-inner tooltip tooltip--right tooltip--multiline" aria-label="Subscription Cost: 50 CHF Additional Cost: 120 CHF">
                  <li class="indicator turquoise" style="height: 28.6667px;"></li>
                  <li class="indicator petrol" style="height: 68.8px;"></li>
                </div>
              </ul>
              <div class="axis-x-label">Mar</div>
            </li>
            <li class="hidden-phone-down">
              <ul class="indicator-wrapper">
                <div class="indicator-wrapper-inner tooltip tooltip--right tooltip--multiline" aria-label="Subscription Cost: 0 CHF Additional Cost: 0 CHF">
                  <li class="indicator empty" style="height: 0px;"></li>
                  <li class="indicator empty" style="height: 0px;"></li>
                </div>
              </ul>
              <div class="axis-x-label">Apr</div>
            </li>
            <li class="hidden-phone-down">
              <ul class="indicator-wrapper">
                <div class="indicator-wrapper-inner tooltip tooltip--right tooltip--multiline" aria-label="Subscription Cost: 80 CHF Additional Cost: 30 CHF">
                  <li class="indicator turquoise" style="height: 45.8667px;"></li>
                  <li class="indicator petrol" style="height: 17.2px;"></li>
                </div>
              </ul>
              <div class="axis-x-label">May</div>
            </li>
          </ul>
        </div>
        <ul class="bar-chart__legend">
          <li style="opacity: 1;">
            <span class="bullet turquoise"></span>
            <span>Subscription Cost</span>
          </li>
          <li style="opacity: 1;">
            <span class="bullet petrol"></span>
            <span>Additional Cost</span>
          </li>
        </ul>
     </div>
  </div>
</div>

<script>
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var data = {
      categories: [{
        title: "Subscription Cost",
        color: "turquoise"
      }, {
        title: "Additional Cost",
        color: "petrol"
      }],
      items: [{
        title: "Jan",
        values: [150, 140]
      },
      {
        title: "Feb",
        values: [110, 20]
      },{
        title: "Mar",
        values: [50, 120]
      },{
        title: "Apr",
        values: [0, 0],
        class: "hidden-phone-down"
      },{
        title: "May",
        values: [80, 30],
        class: "hidden-phone-down"
      }]
    }
    var barChart0 = new sdx.BarChartVertical(document.getElementById("barChart0"), data);

    document.getElementById("btnChartUpdate0").addEventListener("click", function () {
      for (var i = 0; i < data.items.length; i++) {
        data.items[i].values[0] = getRandom(0, 280);
        data.items[i].values[1] = getRandom(0, 300 - data.items[i].values[0]);
      }

      barChart0.update(data)
    });
  });
</script>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Vertical data</h3>

  <p>Vertical bar charts can be used to track and compare data with multiple variables, for example call time consumption over five months. Charts can be displayed on light or dark backgrounds and use the content color palette for treating data.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-2@2x-4.jpg">
      <span class="fig-caption">Light variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-6@2x-5.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Using color combinations</h3>

  <p>The content color palette can be applied to data sets to make them clear and distinct.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-7@2x-8.jpg">
      <span class="fig-caption">Light variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-8@2x-6.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Split data</h3>

  <p>Vertical data can also be split to show categories or groupings within a data set. When splitting data, a key should be used.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-9@2x-9.jpg">
      <span class="fig-caption">Light variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-10@2x-11.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h3>Tooltip</h3>

  <p>A tooltip can be used with charts to give the user context and provide additional information they wouldn’t otherwise see.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-11@2x-11.jpg">
      <span class="fig-caption">Light variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-12@2x-7.jpg">
      <span class="fig-caption">Dark variant</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Minimum spacing</h3>

  <p>To ensure vertical data charts are clear and easy to read, a minimum spacing of 70px should be applied between bars.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-13@2x-8.jpg">
      <span class="fig-caption">Minimum spacing of 70px between bars.</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Bars and data</h3>

  <p>To help users accurately interpret data, data bars should always use a flat end point. Bars start with a rounded edge, but this must sit below the chart’s axis.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-14@2x-5.jpg">
      <span class="fig-caption">Data bars have flat end points</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Bars and data</h3>

  <p>To help users accurately interpret data, data bars should always use a flat end point. Bars start with a rounded edge, but this must sit below the chart’s axis.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-14@2x-5.jpg">
      <span class="fig-caption">Data bars have flat end points</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2 class="margin-top-4">Typography</h2>

  <div class="row margin-top-4">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-15@2x-7.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row margin-top-4">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/barchart_vertical/Group-16@2x-8.jpg">
        <span class="fig-caption">Dark variant</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Bar charts enable us to display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data.</p>

<button class="button button--primary" id="btnChartUpdate">Update</button>

<div class="bar-chart-vertical" data-max="300" data-unit="CHF" style="max-width: 385px;" id="barChart01">
  <div class="chart-wrapper">
    <ul class="bar-chart__grid">
      <li>
        <div class="axis-y-label">300</div>
      </li>
      <li>
        <div class="axis-y-label">200</div>
      </li>
      <li>
        <div class="axis-y-label">100</div>
      </li>
    </ul>
    <ul class="chart js-chart"></ul>
  </div>
  <ul class="bar-chart__legend"></ul>
</div>

<script>
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var data = {
      categories: [{
        title: "Subscription Cost",
        color: "turquoise"
      }, {
        title: "Additional Cost",
        color: "petrol"
      }],
      items: [{
        title: "Jan",
        values: [150, 140]
      },
      {
        title: "Feb",
        values: [110, 20]
      },{
        title: "Mar",
        values: [50, 120]
      },{
        title: "Apr",
        values: [0, 0],
        class: "hidden-phone-down"
      },{
        title: "May",
        values: [80, 30],
        class: "hidden-phone-down"
      }]
    }
    var barChart01 = new sdx.BarChartVertical(document.getElementById("barChart01"), data);

    document.getElementById("btnChartUpdate").addEventListener("click", function () {
      for (var i = 0; i < data.items.length; i++) {
        data.items[i].values[0] = getRandom(0, 280);
        data.items[i].values[1] = getRandom(0, 300 - data.items[i].values[0]);
      }

      barChart01.update(data)
    });
  });
</script>

<p>You can either define the data elements in the markup and use the <code>data-init="auto"</code> attribute. Or update the data values using the provided JavaScript component. The data list is expected to be in the following format:</p>

```javascript_no_preview
{
    categories: [{
      title: "Subscription Cost",
      color: "turquoise"
    }, {
      title: "Additional Cost",
      color: "petrol"
    }],
    items: [{
      title: "Jan",
      values: [150, 140]
    },
    {
      title: "Feb",
      values: [110, 20]
    },{
      title: "Mar",
      values: [50, 120]
    },{
      title: "Apr",
      values: [0, 0],
      class: "hidden-phone-down"
    },{
      title: "May",
      values: [80, 30],
      class: "hidden-phone-down"
    }]
  }
```
<ul class="list">
  <li>
    <ul>
      <strong>Categories</strong><br>
      <p>The mandatory category list that defines the category title and the display color.</p>
      <li><strong>Title:</strong> The category title</li>
      <li><strong>Color:</strong> The sdx interaction color CSS class name or a valid hex color (eg `#ffffff`)</li>
    </ul>
  </li>
  <li>
    <ul>
        <strong>Items</strong><br>
        <p>The list of individual items and their data definitions.</p>
        <li><strong>Title:</strong> The data item title (x-axis label)</li>
        <li><strong>Values:</strong> The comma separated list of data values. Must be less or equal to the number of categories.</li>
        <li><strong>Class:</strong> The css class to append to the item, can be used to show/hide items on different breakpoints.</li>
      </ul>
  </li>
</ul>

<p>In addition make sure to set the <code>data-unit</code> attribute to the desired value.</p>

<h2>Variations</h2>

<h3>Vertical data</h3>

<p>Vertical bar charts can be used to track and compare data with multiple variables, for example call time consumption over five months. Charts can be displayed on light or dark backgrounds and use the content color palette for treating data.</p>

```htmlmixed
<div class="bg">
  <h4>Vertical bar chart title</h4>
  <div class="bar-chart-vertical" data-init="auto" data-max="300" data-unit="CHF">
    <div class="js-data-list">
      <div class="js-category" data-color="turquoise">Subscription Cost</div>
      <div class="js-data" data-value="150">Jan</div>
      <div class="js-data" data-value="110">Feb</div>
      <div class="js-data" data-value="50">Mar</div>
      <div class="js-data" data-value="0" data-class="hidden-phone-down">Apr</div>
      <div class="js-data" data-value="80" data-class="hidden-phone-down">May</div>
    </div>
    <div class="chart-wrapper">
      <ul class="bar-chart__grid">
        <li><div class="axis-y-label">300</div></li>
        <li><div class="axis-y-label">200</div></li>
        <li><div class="axis-y-label">100</div></li>
      </ul>
      <ul class="chart js-chart"></ul>
    </div>
  </div>
</div>

<div class="bg bg--dark">
  <h4>Vertical bar chart title</h4>
  <div class="bar-chart-vertical" data-init="auto" data-max="300" data-unit="CHF">
    <div class="js-data-list">
      <div class="js-category" data-color="apple">Subscription Cost</div>
      <div class="js-data" data-value="0">Jan</div>
      <div class="js-data" data-value="0">Feb</div>
      <div class="js-data" data-value="280">Mar</div>
      <div class="js-data" data-value="240" data-class="hidden-phone-down">Apr</div>
      <div class="js-data" data-value="190" data-class="hidden-phone-down">May</div>
    </div>
    <div class="chart-wrapper">
      <ul class="bar-chart__grid">
        <li><div class="axis-y-label">300</div></li>
        <li><div class="axis-y-label">200</div></li>
        <li><div class="axis-y-label">100</div></li>
      </ul>
      <ul class="chart js-chart"></ul>
    </div>
  </div>
</div>
```
<h3>Split data</h3>

<p>Vertical data can also be split to show categories or groupings within a data set. When splitting data, a key (legend) should be used.</p>

```htmlmixed
<div class="bg">
  <h4>Vertical bar chart title</h4>
  <div class="bar-chart-vertical" data-init="auto" data-max="300" data-unit="CHF">
    <div class="js-data-list">
      <div class="js-category" data-color="turquoise">Subscription Cost</div>
      <div class="js-category" data-color="petrol">Additional Cost</div>
      <div class="js-data" data-value="150, 140">Jan</div>
      <div class="js-data" data-value="110, 20">Feb</div>
      <div class="js-data" data-value="50, 120">Mar</div>
      <div class="js-data" data-value="0, 0" data-class="hidden-phone-down">Apr</div>
      <div class="js-data" data-value="80, 30" data-class="hidden-phone-down">May</div>
    </div>
    <div class="chart-wrapper">
      <ul class="bar-chart__grid">
        <li><div class="axis-y-label">300</div></li>
        <li><div class="axis-y-label">200</div></li>
        <li><div class="axis-y-label">100</div></li>
      </ul>
      <ul class="chart js-chart"></ul>
    </div>
    <ul class="bar-chart__legend"></ul>
  </div>
</div>

<div class="bg bg--dark">
  <h4>Vertical bar chart title</h4>
  <div class="bar-chart-vertical" data-init="auto" data-max="300" data-unit="CHF">
    <div class="js-data-list">
      <div class="js-category" data-color="turquoise">Subscription Cost</div>
      <div class="js-category" data-color="petrol">Additional Cost</div>
      <div class="js-data" data-value="150, 140">Jan</div>
      <div class="js-data" data-value="110, 20">Feb</div>
      <div class="js-data" data-value="50, 120">Mar</div>
      <div class="js-data" data-value="0, 0" data-class="hidden-phone-down">Apr</div>
      <div class="js-data" data-value="80, 30" data-class="hidden-phone-down">May</div>
    </div>
    <div class="chart-wrapper">
      <ul class="bar-chart__grid">
        <li><div class="axis-y-label">300</div></li>
        <li><div class="axis-y-label">200</div></li>
        <li><div class="axis-y-label">100</div></li>
      </ul>
      <ul class="chart js-chart"></ul>
    </div>
    <ul class="bar-chart__legend"></ul>
  </div>
</div>
```
*/
.bar-chart-vertical {
  min-width: 272px;
  width: 100%;
}

.bar-chart-vertical:last-child {
  margin-bottom: 0;
}

.bar-chart-vertical .chart-wrapper {
  position: relative;
  height: 100%;
  margin-bottom: 54px;
}

.bar-chart-vertical .chart {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-left: 30px;
  height: 172px;
}

.bar-chart-vertical .chart .indicator-wrapper {
  position: relative;
  height: 172px;
  min-width: 70px;
}

.bar-chart-vertical .chart .indicator-wrapper-inner {
  position: absolute;
  bottom: 0;
  left: calc( 50% - 4px);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.bar-chart-vertical .chart li {
  text-align: center;
  z-index: 1;
}

.bar-chart-vertical .chart li:first-child .indicator-wrapper {
  min-width: 42px;
}

.bar-chart-vertical .chart li:hover {
  z-index: 100;
}

.bar-chart-vertical .chart .indicator {
  width: 8px;
  margin: 0 auto;
}

.bar-chart-vertical .chart .indicator:first-child::before {
  position: absolute;
  height: 8px;
  width: 8px;
  bottom: -4px;
  -webkit-transform: translateX(-4px);
  transform: translateX(-4px);
  -ms-transform: translateX(0);
  content: '';
  background: inherit;
  border-radius: 8px;
}

.bar-chart-vertical .chart .indicator.empty {
  background-color: #e0e6e9;
}

.bar-chart-vertical .chart .axis-x-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 12px;
  font-size: 16px;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

.bar-chart-vertical .chart .tooltip--right::after {
  bottom: calc(50% - 4px);
}

.bar-chart-vertical .chart .tooltip--multiline::before {
  margin-bottom: -8px;
}

.bar-chart-vertical .chart .tooltip--multiline::after {
  bottom: calc(50% - 7px);
}

.bar-chart-vertical .bar-chart__grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bar-chart-vertical .bar-chart__grid li {
  border-top: 1px solid #adadad;
  height: 33.333%;
}

.bar-chart-vertical .bar-chart__grid li:last-child {
  border-bottom: 1px solid #adadad;
}

.bar-chart-vertical .bar-chart__grid .axis-y-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 30px;
  font-size: 14px;
}

.bar-chart-vertical .bar-chart__legend {
  padding-top: 0;
  border-top: 0;
}

.bg--dark .bar-chart__grid li {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.bg--dark .bar-chart__grid li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/*doc
---
title: Tabs
name: 02-components-180-tabs
category: Components - Tabs
---

<p>Tabs organize and allow navigation between groups of content that are related and at the same level hierarchy.<br />There can be active and disabled states.</p>

<div class="margin-bottom-4">
  <ul class="tabs">
    <li class="tab">
      <a class="tab-link active">Tab one</a>
    </li>
    <li class="tab">
      <a class="tab-link">Tab two</a>
    </li>
    <li class="tab">
      <a class="tab-link">Tab three</a>
    </li>
    <li class="tab">
      <a class="tab-link disabled">Tab four</a>
    </li>
  </ul>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <p>There are different font sizes you can use for the tabs. 24px for large tabs, 18px for medium sized tabs and 16px for small ones.</p>

  <div class="row padding-bottom-4">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_design.jpg">
      <span class="fig-caption">Tabs with different font sizes</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Variations</h2>

  <p>There are different tab sizes you can use.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_dunkel.jpg">
      <span class="fig-caption">Tabs on colored background</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_gradient.jpg">
      <span class="fig-caption">Tabs switching to grey</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_drop-down.jpg">
      <span class="fig-caption">Tabs with Dropdown</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_mobile.jpg">
      <span class="fig-caption">Tabs on mobile</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Paddings between Tabs</h3>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_padding.jpg">
      <span class="fig-caption">Paddings between Tabs</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var tabLinks = document.querySelectorAll(".tab-link");

    for (var i = 0; i < tabLinks.length; ++i) {
      var tabLink = tabLinks[i];

      tabLink.addEventListener("click", function(e) {
        var clickedTabs = e.target;

        while (!clickedTabs.classList.contains("tabs")) {
          clickedTabs = clickedTabs.parentElement;
        }

        var clickedTabLink = e.target;

        while (!clickedTabLink.classList.contains("tab-link")) {
          clickedTabLink = clickedTabLink.parentElement;
        }

        var ownTabLinks = clickedTabs.querySelectorAll(".tab-link");

        for (var j = 0; j < ownTabLinks.length; ++j) {
          var ownTabLink = ownTabLinks[j];

          ownTabLink.classList.remove("active");

          if (ownTabLink === clickedTabLink) {
            ownTabLink.classList.add("active");
          }
        }
      });
    }
  });
</script>

```htmlmixed
<ul class="tabs">
  <li class="tab">
    <a class="tab-link active">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled">Tab four</a>
  </li>
</ul>
```

<h3>Tab sizes</h3>

<p>There are three different tab sizes available. By default the tab font size is 18px. If you want to change the size of the tab, add the classes <code>tabs--small</code> or <code>tabs--big</code> to the <code>tabs</code> element.</p>

```htmlmixed
<ul class="tabs tabs--small">
  <li class="tab">
    <a class="tab-link active">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled">Tab four</a>
  </li>
</ul>

<ul class="tabs">
  <li class="tab">
    <a class="tab-link active">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled">Tab four</a>
  </li>
</ul>

<ul class="tabs tabs--big">
  <li class="tab">
    <a class="tab-link active">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled">Tab four</a>
  </li>
</ul>
```

<h3>Tab indicator sizes</h3>

<p>There are two tab indicator sizes available. By default the tab indicator is short (10px). If you want to change the size of the tab indicator to long, add the class <code>tabs--long</code> to the <code>tabs</code> element.</p>

```htmlmixed
<ul class="tabs">
  <li class="tab">
    <a class="tab-link active">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled">Tab four</a>
  </li>
</ul>

<ul class="tabs tabs--long">
  <li class="tab">
    <a class="tab-link active">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled">Tab four</a>
  </li>
</ul>
```

<h3> More tabs options</h3>

<h4>Scrollable tabs</h4>

<p>To make the tabs scrollable add the class <code>tabs--scrollable</code> to the <code>tabs</code> element.</p>

```htmlmixed
<ul class="tabs tabs--scrollable">
  <li class="tab">
    <a class="tab-link active">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab four</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab five</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab six</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab seven</a>
  </li>
</ul>
```

<h4>Tabs with no border</h4>

<p>To remove the bottom border on the tabs add the class <code>tabs--no-border</code> to the <code>tabs</code> element.</p>

```htmlmixed
<ul class="tabs tabs--no-border">
  <li class="tab">
    <a class="tab-link active">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled">Tab four</a>
  </li>
</ul>
```

<h4>Tabs with icons</h4>

```htmlmixed
<ul class="tabs">
  <li class="tab">
    <a class="tab-link active"><i class="icon icon-175-weather-snow"></i> Snowy</a>
  </li>
  <li class="tab">
    <a class="tab-link"><i class="icon icon-173-weather-rain"></i> Rainy</a>
  </li>
  <li class="tab">
    <a class="tab-link"><i class="icon icon-179-weather-sun"></i> Sunny</a>
  </li>
</ul>
```

<h4>Tabs with images</h4>

```htmlmixed
<div class="tabs tabs--image">
  <ul>
    <li class="tab">
      <a class="tab-link active">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-xl.png" width="90"></span>
        <span class="title">Vivo XL</span>
      </a>
    </li>
    <li class="tab">
      <a class="tab-link">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-l.png" width="80"></span>
        <span class="title">Vivo L</span>
      </a>
    </li>
    <li class="tab">
      <a class="tab-link">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-m.png" width="70"></span>
        <span class="title">Vivo M</span>
      </a>
    </li>
    <li class="tab">
      <a class="tab-link">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-s.png" width="60"></span>
        <span class="title">Vivo S</span>
      </a>
    </li>
    <li class="tab">
      <a class="tab-link">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-xs.png" width="50"></span>
        <span class="title">Vivo XS</span>
      </a>
    </li>
  </ul>
</div>
```

<h4>Responsive tabs example</h4>

<p>Responsive tabs are displayed as dropdown menus on specified screen sizes.</p>

```htmlmixed
<label for="select-1">This is the label</label>

<ul class="tabs hidden-sm-down">
  <li class="tab">
    <a class="tab-link active">Introduction</a>
  </li>
  <li class="tab">
    <a class="tab-link">Overview</a>
  </li>
  <li class="tab">
    <a class="tab-link">Help</a>
  </li>
    <li class="tab">
    <a class="tab-link">Sales</a>
  </li>
  <li class="tab">
    <a class="tab-link">About</a>
  </li>
  <li class="tab">
    <a class="tab-link">Specification</a>
  </li>
</ul>

<div class="select hidden-md-up">
  <select id="select-1" class="select--minimal select--tabs" data-init="auto">
    <option selected>Introduction</option>
    <option>Overview</option>
    <option>Help</option>
    <option>Sales</option>
    <option>About</option>
    <option>Specification</option>
  </select>
</div>
```
*/
.tabs {
  position: relative;
  width: 100%;
  white-space: nowrap;
  border-bottom: 1px solid #d6d6d6;
  overflow-x: hidden;
}

.tabs .tab {
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
}

.tabs .tab .tab-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  display: block;
  padding: 6px 10px;
  color: #015;
  border-bottom: 4px solid transparent;
}

.tabs .tab .tab-link:hover, .tabs .tab .tab-link:focus {
  color: #1781e3;
}

.tabs .tab .tab-link.active {
  color: #1781e3;
  border-bottom: 4px solid #1781e3;
}

.tabs .tab .tab-link.disabled, .tabs .tab .tab-link:disabled {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: .4;
  color: #333;
  pointer-events: none;
}

.tabs .tab--flyout .flyout__indicator::before {
  right: calc(50% - 7px);
}

.tabs--small .tab .tab-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.tabs--big .tab .tab-link {
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.tabs--long .tab .tab-link {
  padding-left: 20px;
  padding-right: 20px;
}

.tabs--no-border {
  border-bottom: 0;
}

.tabs--scrollable {
  overflow-x: auto;
}

.tabs--image {
  border-bottom: 0;
  overflow-x: visible;
}

.tabs--image ul {
  overflow-x: auto;
  margin-left: -20px;
  padding-left: 20px;
  margin-right: -20px;
}

.tabs--image ul::before, .tabs--image ul::after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  z-index: 1;
  pointer-events: none;
}

.tabs--image ul::before {
  left: -20px;
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
}

.tabs--image ul::after {
  right: -20px;
  background: linear-gradient(to left, white 0%, rgba(255, 255, 255, 0) 100%);
}

.tabs--image .tab {
  vertical-align: top;
  padding-right: 20px;
}

@media (max-width: 767px) {
  .tabs--image .tab {
    padding-right: 8px;
  }
}

.tabs--image .tab:last-child {
  padding-right: 20px;
}

.tabs--image .tab .tab-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 16px;
  background: #eef3f6;
  width: 160px;
  height: 160px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.tabs--image .tab span {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.tabs--image .tab span.image {
  height: 105px;
}

.tabs--image .tab span.image img {
  max-height: 90px;
  pointer-events: none;
  -moz-user-select: none;
}

.tabs--image .tab span.title {
  white-space: normal;
  line-height: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.bg--dark .tabs {
  border-bottom-color: #fff;
}

.bg--dark .tabs .tab .tab-link {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: .7;
  color: #fff;
  border-bottom: 4px solid transparent;
}

.bg--dark .tabs .tab .tab-link:hover, .bg--dark .tabs .tab .tab-link:focus {
  opacity: 1;
  color: #fff;
  border-bottom: 4px solid transparent;
}

.bg--dark .tabs .tab .tab-link.active {
  opacity: 1;
  color: #fff;
  border-bottom: 4px solid #fff;
}

.bg--dark .tabs .tab .tab-link.disabled, .bg--dark .tabs .tab .tab-link:disabled {
  opacity: .4;
  color: #fff;
  pointer-events: none;
}

.bg--dark .tabs--inverted {
  background: #fff;
  border-bottom: 0;
}

.bg--dark .tabs--inverted .tab .tab-link {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  color: #015;
}

.bg--dark .tabs--inverted .tab .tab-link:hover, .bg--dark .tabs--inverted .tab .tab-link:focus {
  color: #015;
}

.bg--dark .tabs--inverted .tab .tab-link.active {
  color: #015;
  border-bottom: 4px solid #015;
}

.bg--dark .tabs--inverted .tab .tab-link.disabled, .bg--dark .tabs--inverted .tab .tab-link:disabled {
  opacity: .4;
  color: #333;
  pointer-events: none;
}

.collapse {
  display: none;
  position: relative;
  height: 0;
  overflow: hidden;
}

.collapse.is-open {
  display: block;
  height: auto;
}

tr.collapse.is-open {
  display: table-row;
}

tbody.collapse.is-open {
  display: table-row-group;
}

/*doc
---
title: Accordions
name: 02-components-005-accordion-01
category: Components - Accordions
---

<p>An accordion is a vertically stacked list of items that can be opened to reveal hidden content, or closed to save space on the screen. They are mainly used as navigation elements on small screens, and for revealing and hiding longer form content. Accordions are fully responsive components and can be used with any grid width.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
    <div class="accordion accordion--border accordion__keep-open" data-init="auto">
      <div class="accordion__item">
        <div class="accordion__toggle">
          <div class="accordion__header">
            <h4 class="text-h5 sc-navy margin-0" style="padding-top:0;">Internet unterbrochen</h4>
          </div>
          <div class="arrow-icon"></div>
        </div>
        <div class="accordion__collapse" aria-expanded="true">
          <p class="text-b2 margin-top-1">
          Unsere Techniker arbeiten daran, die Störung zu beheben. Wir bitten um Entschuldigung.
          </p>
        </div>
      </div>
      <div class="accordion__item">
        <div class="accordion__toggle">
          <div class="accordion__header">
            <h4 class="text-h5 sc-navy margin-0" style="padding-top:0;">Wartungsarbeiten</h4>
          </div>
          <div class="arrow-icon"></div>
        </div>
        <div class="accordion__collapse" aria-expanded="true">
          <p class="text-b2 margin-top-1">
          Im Zeitraum vom 02.03.2020-06.03.2020 werden in Ihrem Bereich Wartungarbeiten durchgeführt. Wir arbeiten an der Verbesserung Ihrer Leitungen und bitten um Entschuldigung.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-lg-6">
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Standard accordion</h3>

  <p>Standard accordions can be used across a range of columns widths on desktop and mobile. Arrows are used to control the open and closed state of the the accordion, revealing the contents within the item selected.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-2@2x-1.jpg">
      <span class="fig-caption">Responsive states on grey</span>
    </div>
  </div>

  <h3>Centered accordion</h3>

  <p>Centred accordions are used to expand isolated elements, acting like a 'read more' link, revealing additional content in page. This differs from standard accordions which are conventionally used to expand items in lists.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-3@2x-1.jpg">
      <span class="fig-caption">Opened and closed states of centred accordion</span>
    </div>
  </div>

  <h3>Color variations</h3>

  <p>There are three different colorways that can be used for accordions. The color should be selected based on the background color of the page, and the emphasis being placed on the content within that particular page.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-5@2x-1.jpg" >
      <span class="fig-caption">Light variant on white</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-6@2x.png">
      <span class="fig-caption">Dark variant on white</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-7@2x-1.jpg" >
      <span class="fig-caption">Light variant on grey</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-8@2x-1.jpg">
      <span class="fig-caption">Dark variant on grey</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Line length</h3>

  <p>Line lengths for all copy inside an accordion is limited to 640px. This prevents excessive line lengths when using accordions in especially wide applications.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-11@2x.jpg">
      <span class="fig-caption">Maximun line lentgh example</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Single column layout</h3>
  <p>Accordions should only ever use a single column with all elements left aligned, with the exception of the control arrows. Content should never be centrally aligned.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-13@2x.png">
      <span class="fig-caption">Single column layout</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Arrow behavior</h3>

  <p>Accordions should only ever use a single column with all elements left aligned, with the exception of the control arrows. Content should never be centrally aligned.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-14@2x.jpg">
      <span class="fig-caption">Single column layout</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Arrow behavior</h3>

  <p>Accordions are controlled by arrows that open and close the panels. Arrows point down when the panel is closed, and flip when the panel is opened.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-15@2x.jpg">
      <span class="fig-caption">Arrow controller behavior</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/accordions/Group-16@2x.jpg">
      <span class="fig-caption">Typography</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
   <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>An accordion is a vertically stacked list of items that can be opened to reveal hidden content, or closed to save space on the screen. They are mainly used as navigation elements on small screens, and for revealing and hiding longer form content. Accordions are fully responsive components and can be used with any grid width.</p>

```htmlmixed_webcomponent_sdx-accordion
<sdx-accordion arrow-position="right" keep-open="true">
  <sdx-accordion-item>
    <sdx-accordion-item-header>
      <h4 class="text-h5 sc-navy margin-0">Accordion 1</h4>
    </sdx-accordion-item-header>
    <sdx-accordion-item-body>
      <p class="text-b2 margin-top-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </sdx-accordion-item-body>
  </sdx-accordion-item>
  <sdx-accordion-item open="true">
    <sdx-accordion-item-header>
      <h4 class="text-h5 sc-navy margin-0">Accordion 2</h4>
    </sdx-accordion-item-header>
    <sdx-accordion-item-body>
      <p class="text-b2 margin-top-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </sdx-accordion-item-body>
  </sdx-accordion-item>
  <sdx-accordion-item>
    <sdx-accordion-item-header>
      <h4 class="text-h5 sc-navy margin-0">Accordion 3</h4>
      <p class="text-b2 margin-top-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
      </p>
    </sdx-accordion-item-header>
    <sdx-accordion-item-body>
      <p class="text-b2 margin-top-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </sdx-accordion-item-body>
  </sdx-accordion-item>
</sdx-accordion>

<br>

<sdx-accordion arrow-position="center">
  <sdx-accordion-item>
    <sdx-accordion-item-section>
      <h4 class="text-h5 font--semi-bold margin-bottom-1">Centered Accordion</h4>
      <p class="text-b2 margin-top-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </sdx-accordion-item-section>
    <sdx-accordion-item-body>
      <p class="text-b2 margin-top-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </sdx-accordion-item-body>
    <sdx-accordion-item-header></sdx-accordion-item-header>
  </sdx-accordion-item>
</sdx-accordion>
```
*/
@media (min-width: 0) {
  .accordion--hidden-xs-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-xs-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-xs-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-xs-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 479px) {
  .accordion--hidden-xs-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-xs-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-xs-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-xs-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 480px) {
  .accordion--hidden-sm-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-sm-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-sm-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-sm-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .accordion--hidden-sm-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-sm-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-sm-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-sm-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .accordion--hidden-md-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-md-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-md-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-md-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1023px) {
  .accordion--hidden-md-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-md-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-md-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-md-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 1024px) {
  .accordion--hidden-lg-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-lg-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-lg-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-lg-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1279px) {
  .accordion--hidden-lg-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-lg-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-lg-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-lg-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .accordion--hidden-xl-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-xl-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-xl-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-xl-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1439px) {
  .accordion--hidden-xl-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-xl-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-xl-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-xl-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 1440px) {
  .accordion--hidden-ul-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-ul-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-ul-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-ul-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

.accordion--hidden-ul-down .js-hidden {
  visibility: hidden !important;
}

.accordion--hidden-ul-down .accordion__toggle {
  display: inherit;
  width: inherit;
  -webkit-justify-content: inherit;
  -ms-flex-pack: inherit;
  justify-content: inherit;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
  cursor: inherit;
}

.accordion--hidden-ul-down .accordion__toggle .arrow-icon {
  display: none !important;
}

.accordion--hidden-ul-down .accordion__collapse {
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
}

@media (min-width: 0) {
  .accordion--hidden-phone-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-phone-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-phone-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-phone-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .accordion--hidden-phone-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-phone-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-phone-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-phone-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .accordion--hidden-tablet-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-tablet-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-tablet-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-tablet-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1023px) {
  .accordion--hidden-tablet-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-tablet-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-tablet-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-tablet-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 1024px) {
  .accordion--hidden-desktop-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-desktop-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-desktop-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-desktop-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1279px) {
  .accordion--hidden-desktop-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-desktop-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-desktop-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-desktop-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

.accordion .js-hidden {
  display: none;
  position: absolute;
  left: -9999px;
  visibility: visible;
}

.accordion__item {
  position: relative;
}

.accordion__toggle {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  cursor: pointer;
}

.accordion__toggle .arrow-icon {
  float: right;
  pointer-events: none;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.accordion__toggle .arrow-icon {
  float: right;
  pointer-events: none;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.accordion__toggle--arrow-left .accordion__header {
  padding-left: 10px;
}

.accordion__toggle--arrow-left .arrow-icon {
  float: left;
}

.accordion__toggle--arrow-centered {
  width: 100%;
  min-height: 32px;
  border-top: 1px solid #d6d6d6;
}

.accordion__toggle--arrow-centered .arrow-icon {
  display: table;
  margin: 3px auto 0 auto;
  float: none;
}

.accordion__header {
  display: inline-block;
  position: relative;
}

.accordion__keep-open {
  display: block;
}

.accordion__collapse {
  position: relative;
  overflow: hidden;
  display: none;
  height: 0;
  width: 100%;
  opacity: 0;
}

.accordion__collapse.is-open {
  display: block;
  height: auto;
  width: 100%;
  opacity: 1;
}

.accordion .accordion__toggle .accordion__header, .accordion--arrow-flat .accordion__toggle .accordion__header {
  width: calc(100% - 35px - 8px);
}

.accordion .accordion__toggle .arrow-icon, .accordion--arrow-flat .accordion__toggle .arrow-icon {
  position: relative;
  top: 4px;
  left: 0;
  width: 35px;
  height: 16px;
  -webkit-transform: scale(0.68);
  transform: scale(0.68);
}

.accordion .accordion__toggle .arrow-icon::before, .accordion .accordion__toggle .arrow-icon::after, .accordion--arrow-flat .accordion__toggle .arrow-icon::before, .accordion--arrow-flat .accordion__toggle .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  background: #1781e3;
  width: 20px;
  height: 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.accordion .accordion__toggle .arrow-icon::before, .accordion--arrow-flat .accordion__toggle .arrow-icon::before {
  left: 0;
}

.accordion .accordion__toggle .arrow-icon::after, .accordion--arrow-flat .accordion__toggle .arrow-icon::after {
  left: 15px;
}

.accordion .accordion__toggle .arrow-icon::before, .accordion--arrow-flat .accordion__toggle .arrow-icon::before {
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.accordion .accordion__toggle .arrow-icon::after, .accordion--arrow-flat .accordion__toggle .arrow-icon::after {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.accordion .accordion__toggle:hover .arrow-icon, .accordion--arrow-flat .accordion__toggle:hover .arrow-icon {
  position: relative;
}

.accordion .accordion__toggle:hover .arrow-icon::before, .accordion .accordion__toggle:hover .arrow-icon::after, .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::before, .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  background: #0851da;
  width: 20px;
  height: 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.accordion .accordion__toggle:hover .arrow-icon::before, .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::before {
  left: 0;
}

.accordion .accordion__toggle:hover .arrow-icon::after, .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::after {
  left: 15px;
}

.accordion .is-open .accordion__toggle .arrow-icon::before, .accordion--arrow-flat .is-open .accordion__toggle .arrow-icon::before {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.accordion .is-open .accordion__toggle .arrow-icon::after, .accordion--arrow-flat .is-open .accordion__toggle .arrow-icon::after {
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.accordion--border {
  border-bottom: 1px solid #d6d6d6;
}

.accordion--border .accordion__item {
  border: 1px solid #d6d6d6;
  border-bottom: 0;
  padding: 13px 13px 14px 19px;
}

.accordion .accordion__border {
  border: 1px solid #d6d6d6;
}

.accordion .accordion__border .accordion__header {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 15px;
  padding-right: 15px;
}

.accordion .accordion__border .accordion__collapse {
  padding-left: 15px;
  padding-right: 15px;
}

.accordion .accordion__border .accordion__collapse.is-open {
  padding-bottom: 16px;
}

@media (min-width: 0) {
  .accordion--hidden-xs-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-xs-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-xs-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-xs-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 479px) {
  .accordion--hidden-xs-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-xs-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-xs-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-xs-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 480px) {
  .accordion--hidden-sm-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-sm-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-sm-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-sm-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .accordion--hidden-sm-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-sm-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-sm-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-sm-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .accordion--hidden-md-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-md-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-md-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-md-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1023px) {
  .accordion--hidden-md-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-md-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-md-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-md-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 1024px) {
  .accordion--hidden-lg-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-lg-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-lg-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-lg-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1279px) {
  .accordion--hidden-lg-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-lg-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-lg-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-lg-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .accordion--hidden-xl-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-xl-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-xl-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-xl-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1439px) {
  .accordion--hidden-xl-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-xl-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-xl-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-xl-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 1440px) {
  .accordion--hidden-ul-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-ul-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-ul-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-ul-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

.accordion--hidden-ul-down .js-hidden {
  visibility: hidden !important;
}

.accordion--hidden-ul-down .accordion__toggle {
  display: inherit;
  width: inherit;
  -webkit-justify-content: inherit;
  -ms-flex-pack: inherit;
  justify-content: inherit;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
  cursor: inherit;
}

.accordion--hidden-ul-down .accordion__toggle .arrow-icon {
  display: none !important;
}

.accordion--hidden-ul-down .accordion__collapse {
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
}

@media (min-width: 0) {
  .accordion--hidden-phone-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-phone-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-phone-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-phone-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .accordion--hidden-phone-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-phone-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-phone-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-phone-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .accordion--hidden-tablet-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-tablet-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-tablet-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-tablet-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1023px) {
  .accordion--hidden-tablet-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-tablet-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-tablet-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-tablet-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (min-width: 1024px) {
  .accordion--hidden-desktop-up .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-desktop-up .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-desktop-up .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-desktop-up .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 1279px) {
  .accordion--hidden-desktop-down .js-hidden {
    visibility: hidden !important;
  }
  .accordion--hidden-desktop-down .accordion__toggle {
    display: inherit;
    width: inherit;
    -webkit-justify-content: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    cursor: inherit;
  }
  .accordion--hidden-desktop-down .accordion__toggle .arrow-icon {
    display: none !important;
  }
  .accordion--hidden-desktop-down .accordion__collapse {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

.accordion .js-hidden {
  display: none;
  position: absolute;
  left: -9999px;
  visibility: visible;
}

.accordion--sidebar .accordion__toggle .accordion__header {
  width: calc(100% - 16px - 8px);
}

.accordion--sidebar .accordion__toggle .arrow-icon {
  position: relative;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  -webkit-transform: none;
  transform: none;
}

.accordion--sidebar .accordion__toggle .arrow-icon::before, .accordion--sidebar .accordion__toggle .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #015;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.accordion--sidebar .accordion__toggle .arrow-icon::before {
  left: 0;
}

.accordion--sidebar .accordion__toggle .arrow-icon::after {
  left: 6px;
}

.accordion--sidebar .accordion__toggle .arrow-icon::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.accordion--sidebar .accordion__toggle .arrow-icon::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.accordion--sidebar .accordion__toggle:hover .arrow-icon {
  position: relative;
}

.accordion--sidebar .accordion__toggle:hover .arrow-icon::before, .accordion--sidebar .accordion__toggle:hover .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #0851da;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.accordion--sidebar .accordion__toggle:hover .arrow-icon::before {
  left: 0;
}

.accordion--sidebar .accordion__toggle:hover .arrow-icon::after {
  left: 6px;
}

.accordion--sidebar .is-open .accordion__toggle .arrow-icon::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.accordion--sidebar .is-open .accordion__toggle .arrow-icon::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.accordion--sidebar a,
.accordion--sidebar button {
  margin: 0;
  padding: 0;
  border: 0;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  color: #015;
}

.accordion--sidebar a:hover,
.accordion--sidebar button:hover {
  color: #0851da;
}

.accordion--sidebar .nav-items {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 8px;
  margin-bottom: 0;
}

.accordion--sidebar .nav-item {
  position: relative;
  float: left;
  margin: 0;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion--sidebar .nav-item::before {
  content: none;
}

.accordion--sidebar .nav-item:not(:first-child) {
  margin-top: 8px;
}

.accordion--sidebar .nav-item:last-child {
  margin-right: 0;
  padding-bottom: 2px;
}

.accordion--sidebar .nav-title {
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
}

.accordion--sidebar .nav-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  text-decoration: none;
  white-space: normal;
}

.accordion--sidebar .nav-link .text-underline {
  position: relative;
  pointer-events: none;
}

.accordion--sidebar .nav-link .text-underline::before {
  position: absolute;
  top: 24px;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background-color: #015;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  content: '';
}

.accordion--sidebar .nav-link.is-active .text-underline::before, .accordion--sidebar .nav-link--active .text-underline::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.accordion--sidebar .nav-link:hover {
  color: #0851da;
}

.accordion--sidebar .nav-link:hover .text-underline::before {
  background-color: #0851da;
}

/*doc
---
title: Carousel
name: 02-components-045-carousel-01
category: Components - Carousel
---

<p>Carousels help to surface large quantities of content in smaller screen space. Organised into cards featuring images, headlines, category labels and meta data, content then links through to full content pages. Due to their full width presence on the page, carousels are best suited to use at the top or base of a page.</p>

<p>A responsive test page for the Carousel is available at <a href="/samples/carousel.html">samples/carousel</a> and <a href="/samples/carousel-dark.html">samples/carousel-dark</a>.</p>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>How to scale the carousel</h3>

  <p>On reduced width screens show one less card in the carousel, maintaining the visibility of the offscreen cards.<br />Mobile carousels only display singular items, with arrows positioned below the card, with the addition of dot selection indicators that help to show the number of items in the carousel.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/carousel/Tablet-view@2x.jpg">
      <span class="fig-caption">Tablet carousel</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/carousel/Mobile@2x.jpg">
      <span class="fig-caption">Mobile carousel</span>
    </div>
  </div>

  <h3>Light and dark versions</h3>

  <p>Two variation of carousels are available for your designs, choose which one to use based on your background colour.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/carousel/Carousel-fig.3.png">
      <span class="fig-caption">Light card version</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/carousel/Carousel-fig.4.png">
      <span class="fig-caption">Dark card version</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Cards move in batches</h3>

  <p>Carousel cards move in batches, with a dot indicating how many steps are in the carousel. On desktop the carousel moves three cards at a time, on tablet by two cards and on mobile by one.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/carousel/Group-5@2x.jpg">
      <span class="fig-caption">Cards should move in batches at a time</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Pagination is always centred</h3>

  <p>As cards move left to right the dot moves to indicate that a user has move to the next step. The current pagination dot is always positioned in the centre of the carousel.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
        <img class="img-responsive" src="./theme-build/img/design/carousel/Group-6@2x.jpg">
        <span class="fig-caption">Pagination dots</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Outside the page margin</h3>

  <p>Cards sat outside of the page margins are shown at a reduced opacity, allow users to focus on the smaller quantities of content at a time. Cards, although constructed on the grid, are positioned offset and centred to allow us to reveal addition cards that run of screen more clearly.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/carousel/Group-7@2x.jpg">
      <span class="fig-caption">Cards sat outside the page margin</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/carousel/Group-8@2x.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Carousels help to surface large quantities of content in smaller screen space. Organised into cards featuring images, headlines, category labels and meta data, content then links through to full content pages. Due to their full width presence on the page, carousels are best suited to use at the top or base of a page.</p>

<h2>Carousel sample</h2>

<p>A responsive test page for the Carousel is available at <a href="/samples/carousel.html">samples/carousel</a> and <a href="/samples/carousel-dark.html">samples/carousel-dark</a></p>

<h2>JavaScript Component</h2>

<p>The JavaScript component documentation is available under <a href="/doc/classes/_src_carousel_carousel_.carousel.html">/doc</a>.</p>
*/
.carousel {
  overflow: hidden;
  outline: none;
}

.carousel__container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.carousel__slider {
  margin-bottom: 21px;
  cursor: -webkit-grab;
  cursor: grab;
}

.carousel__slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
}

.carousel__slider .slide {
  position: relative;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  margin: 0 10px;
  opacity: .2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .carousel__slider .slide {
    max-width: 300px;
  }
}

@media (min-width: 1280px) {
  .carousel__slider .slide {
    max-width: 321px;
  }
}

.carousel__slider .slide--active {
  opacity: 1;
}

@media (min-width: 768px) {
  .carousel__slider .slide--next {
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .carousel__slider .slide--prev {
    opacity: 1;
  }
}

.carousel__pagination {
  position: relative;
  height: 24px;
  text-align: center;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.carousel__pagination .pagination-bullet {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 4px 2px;
  opacity: .5;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.carousel__pagination .pagination-bullet::before {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background: #1781e3;
  border-radius: 100%;
  transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  content: '';
}

.carousel__pagination .pagination-bullet:hover {
  opacity: .75;
}

.carousel__pagination .pagination-bullet:focus {
  outline: none;
}

.carousel__pagination .pagination-bullet--active, .carousel__pagination .pagination-bullet--active:hover {
  opacity: 1;
}

.carousel__pagination .pagination-bullet--active::before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.carousel__button-wrapper {
  position: absolute;
  bottom: 0;
  width: inherit;
  height: 24px;
  z-index: 15;
  pointer-events: none;
}

@media (min-width: 768px) {
  .carousel__button-wrapper {
    top: calc(50% - 60px);
    bottom: inherit;
    height: 60px;
  }
}

.carousel__button-prev, .carousel__button-next {
  position: absolute;
  width: auto;
  height: auto;
  font-size: 22px;
  background-image: none;
  cursor: pointer;
  outline: none;
  pointer-events: auto;
  color: #1781e3;
  transition: color 200ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.6, 1);
  transition: color 200ms cubic-bezier(0.4, 0, 0.6, 1), transform 300ms cubic-bezier(0.4, 0, 0.6, 1);
  transition: color 200ms cubic-bezier(0.4, 0, 0.6, 1), transform 300ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.6, 1);
}

@media (min-width: 768px) {
  .carousel__button-prev, .carousel__button-next {
    font-size: 60px;
  }
}

.carousel__button-prev:hover, .carousel__button-next:hover {
  color: #0851da;
}

.carousel__button-prev:focus, .carousel__button-next:focus {
  outline: none;
}

.carousel__button-prev:disabled, .carousel__button-next:disabled {
  pointer-events: none;
  opacity: .4;
}

.carousel__button-prev .icon, .carousel__button-next .icon {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.carousel__button-prev {
  top: -15px;
  left: -20px;
  padding: 15px 5px 15px 15px;
}

.carousel__button-prev:hover {
  -webkit-transform: translateX(-2px);
  transform: translateX(-2px);
}

@media (min-width: 768px) {
  .carousel__button-prev {
    top: 0;
    left: -10px;
    padding: 0;
  }
}

.carousel__button-next {
  right: -20px;
  top: -15px;
  padding: 15px 15px 15px 5px;
}

.carousel__button-next:hover {
  -webkit-transform: translateX(2px);
  transform: translateX(2px);
}

@media (min-width: 768px) {
  .carousel__button-next {
    top: 0;
    right: -10px;
    padding: 0;
  }
}

.carousel .js-phone {
  visibility: hidden;
}

@media (max-width: 767px) {
  .carousel .js-phone {
    visibility: visible;
  }
}

.carousel .js-tablet {
  visibility: hidden;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .carousel .js-tablet {
    visibility: visible;
  }
}

.carousel .js-desktop {
  visibility: hidden;
}

@media (min-width: 1280px) {
  .carousel .js-desktop {
    visibility: visible;
  }
}

/*doc
---
title: Empty states
name: 02-components-065-empty-states-01
category: Components - Empty states
---
<p>Empty states are intend to prompt a user to interact in various different ways with our products. The icon, messaging and CTA’s are a constant feature that are interchangeable depending on its intended purpose.</p>

<div class="exampleOutput" style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgb(216, 216, 216);">
  <div class="empty-state__bg"></div>
  <div class="empty-state" aria-hidden="true" style="width: 100%;height: 100%;position: relative;">
    <form method="post" action="" enctype="multipart/form-data">
        <div class="empty-state__input">
            <div class="empty-state__icon">
                <i class="icon icon-155-photo-camera" aria-hidden="true"></i>
            </div>
            <div class="empty-state__body">
                <div class="body__status">You haven’t uploaded any pictures yet</div>
                <div class="body__cta">Drag pictures into the browser window to start uploading</div>
            </div>
            <div class="empty-state__footer">
                <input type="file" id="emptystate" multiple="" accept="image/*">
                <label class="button button--primary" for="emptystate">Upload</label>
            </div>
        </div>
    </form>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
    <div class="col-xs-5 col-lg-3">
      <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
      </ul>
    </div>
</div>

<div class="content-design">
  <h3>Full screen empty states</h3>

  <p>Empty states can take over the whole screen in a product to prompt the user to complete an action. In this example, the empty state is explaining how to upload a file.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/empty_states/Group@2x.jpg">
        <span class="fig-caption">Inactive empty state</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/empty_states/Group-3@2x-2.jpg">
        <span class="fig-caption">Active empty state</span>
    </div>
  </div>

  <h3>Empty states in modals</h3>

  <p>Modals can also be used to provide an empty state prompt to the user. A modal empty state is useful where space is more limited within a product.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/empty_states/Group-4@2x.jpg">
        <span class="fig-caption">Empty state in modal</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/empty_states/Group-12@2x.jpg">
        <span class="fig-caption">Active empty state in modal</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Consistant layout</h3>

  <p>The same layout can be used to house any icon and text, keeping a vertically centered position. This layout helps to give CTAs extra emphasis.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/empty_states/Group-9@2x-1.jpg">
      <span class="fig-caption">An empty state with a different purpose</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Call to action depends on platform</h3>

  <p>For mobile breakpoints, empty states can only be interacted with via a CTA button. This means the messaging needs to tailored appropriately.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/empty_states/Group-10@2x-1.jpg">
      <span class="fig-caption">An empty state on mobile</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/empty_states/Group-11@2x-1.jpg">
      <span class="fig-caption">Typography</span>
    </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Empty states are intend to prompt a user to interact in various different ways with our products. The icon, messaging and CTA’s are a constant feature that are interchangeable depending on its intended purpose.</p>

<h2>How to use empty states</h2>

<p>Use empty states on user generated content products to prompt the interaction of users. They should use text, iconography and button CTAs to encourage user participation. There's also used to help clarify that pages and products have loaded successfully.</p>

<p>The empty state uses the form <code>&lt;input type="file"&gt;</code> element for handling files. You can specify the allowed file types for the file picker on mobile by setting the <code>mime-type</code> in the <code>accept</code> attribute. For more information see <a href="http://www.w3schools.com/jsref/dom_obj_fileupload.asp">HTML DOM Input FileUpload Object</a>.</p>

<p>Make sure to validate the file-type before uploading the files.</p>

<p>For the <code>EmptyState</code> component to be displayed properly make sure to either set the attribute <code>data-init="auto"</code> on the component, or the initialize it using the JavaScript API.</p>

<style>
  .exampleOutput .empty-state__bg {
    width: 100%;
    height: 100%;
  }

  .exampleOutput .empty-state {
    position: inherit;
    width: 100%;
    height: 100%;
  }

  .exampleOutput .empty-state .container {
    width: auto;
  }
</style>

<p><b>Note:</b> <i>Drag and drop does</i> <b>not work in the sample below</b>, <i>it is presented for reference only. For a fully functional version see the samples under Variations.</i></p>

```htmlmixed
<div class="empty-state__bg"></div>
<div class="empty-state" aria-hidden="true">
    <form method="post" action="" enctype="multipart/form-data">
        <div class="empty-state__input">
            <div class="empty-state__icon">
                <i class="icon icon-155-photo-camera" aria-hidden="true"></i>
            </div>
            <div class="empty-state__body">
                <div class="body__status">You haven’t uploaded any pictures yet</div>
                <div class="body__cta">Drag pictures into the browser window to start uploading</div>
            </div>
            <div class="empty-state__footer">
                <input type="file" id="emptystate" multiple accept="image/*">
                <label class="button button--primary" for="emptystate">Upload</label>
            </div>
        </div>
    </form>
</div>
```

<h2>Variations</h2>

<h3>Full screen empty states</h3>

<p>Empty states can take over the whole screen in a product to prompt the user to complete an action. In this example, the empty state is explaining how to upload a file.</p>

<p><a href="/samples/empty-state.html">samples/empty-state</a></p>

<h3>Empty states in modals</h3>

<p>Modals can also be used to provide an empty state prompt to the user. A modal empty state is useful where space is more limited within a product.</p>

<p><a href="/samples/empty-state-modal.html">samples/empty-state-modal</a></p>

*/
.empty-state {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.empty-state input[type='file'] {
  width: .1px;
  height: .1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.empty-state label {
  margin-top: 36px;
  min-width: 206px;
}

.empty-state__icon {
  width: 100%;
  margin-top: -10px;
  color: #d6d6d6;
  font-size: 230px;
  text-align: center;
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.empty-state__body {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

@media (min-width: 768px) {
  .empty-state__body {
    line-height: 32px;
    letter-spacing: -.35px;
    font-size: 24px;
  }
}

.empty-state__body .body__status {
  transition: visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  .empty-state__body .body__status {
    font-weight: 600;
  }
}

.empty-state__body .body__cta {
  display: none;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .empty-state__body .body__cta {
    display: inline;
  }
}

.empty-state__footer {
  text-align: center;
  transition: visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  .empty-state.is-active {
    z-index: 700001;
  }
}

.empty-state.is-active form {
  pointer-events: none;
}

.empty-state.is-active .empty-state__icon {
  color: #1781e3;
  -webkit-transform: scale(1.025);
  transform: scale(1.025);
}

.empty-state.is-active .empty-state__footer {
  visibility: hidden;
  opacity: 0;
}

.empty-state.is-active .body__status {
  opacity: 0;
}

.empty-state.has-files .body__status {
  visibility: hidden;
  opacity: 0;
}

.empty-state--modal {
  position: relative;
  width: auto;
  height: auto;
  pointer-events: none;
}

.empty-state--modal label {
  pointer-events: auto;
}

.empty-state__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
}

.empty-state__border {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid #1781e3;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  visibility: hidden;
  opacity: 0;
  z-index: 700000;
  pointer-events: none;
  transition: visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.empty-state__border--modal {
  position: absolute;
  pointer-events: none;
  background: none;
}

@media (min-width: 768px) {
  .empty-state__border.is-active {
    visibility: visible;
    opacity: 1;
  }
}

/*doc
---
title: Navigation (main)
name: 02-components-110-navigation-01-overview
category: Components - Navigation (main)
---
<p>Navigation enables users to find their way around products and services. Navigation types all follow a uniform aesthetic, but have different placement and structures to best serve various product types and sizes. The use of a mega menu can be used for larger services to help organise and catagorise pages, making them easy to find.</p>

<section class="live-example">
    <div class="section-inner">
        <div class="resizerExample">
            <button class="button button--primary modal-trigger" href="modalResizer"><i class="icon icon-114-computer" aria-hidden="true"></i> View Breakpoints</button>
        </div>
        <div class="modal modal-resizer" role="dialog" tabindex="-1" data-init="auto" id="modalResizer">
           <div class="modal__container">
             <div class="modal__content">
              <div class="resizer sc-resizer" init="auto" sizes="sizes">
                <div class="resizer__header">
                <div class="resizer__toolbar"></div>
                 <button class="modal__close modal-cancel">
                  <i class="icon icon-022-close" aria-hidden="true"></i>
                 </button>
                </div>
                <div class="resizer__container">
                 <div class="resizer__dimension">
                    <div class="dimension__bar"></div>
                    <div class="dimension__value"></div>
                 </div>
                 <div class="resizer__innercontainer">
                   <div class="dimension__dragbar">
                      <div class="dimension__thumb"></div>
                   </div>
                   <iframe style="min-height: 1000px;" src="./components_-_navigation_(main).html" scrolling="no" frameBorder="0"></iframe>
                 </div>
              </div>
          </div>
          <datalist id="sizes">
              <option value="320"><i class="icon icon-111-smartphone icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">320px</div></option>
              <option value="480"><i class="icon icon-111-smartphone icon--s3 resizer__icon resizer__icon--rotate" aria-hidden="true"></i><div class="resizer__label">480px</div></option>
              <option value="768"><i class="icon icon-112-tablet icon--s3 resizer__icon resizer__icon--rotate" aria-hidden="true"></i><div class="resizer__label">768px</div></option>
              <option value="1024"><i class="icon icon-112-tablet icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1024px</div></option>
              <option value="1280"><i class="icon icon-113-laptop icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1280px</div></option>
              <option value="1440"><i class="icon icon-113-laptop icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1440px</div></option>
          </datalist>
        </div>
      </div>
  </div>
 </div>
</section>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Primary navigation</h3>

  <p>Primary navigation is the basic system to which navigation should be structured across various screen sizes. Surfacing key page links in a page header, along with core functionality specific to the product. In this example, basket and search are surfaced at the top level. This system collapses into a burger menu on smaller screen sizes to help the nav accommodate a larger variety of links and functionality.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-7@2x-3.jpg">
      <span class="fig-caption">Responsive navigation</span>
    </div>
  </div>

  <h3>Alignment variants</h3>

  <p>Navigation links can be aligned differently from product to product. For larger products the left hand alignment should be used to accommodate more links, and when using a mega menu. Centred alignment can be used for smaller products when less primary navigation links are required. It can also be used in conjunction with a side navigation, using the primary navigation bar to show page specific navigation links. Right hand alignment can be used, but not in conjunction with icons. When surfacing functionality through the use of icons, the centred or left aligned navigation should be used.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-26@2x.jpg">
      <span class="fig-caption">Left, centred and right align navigation option</span>
    </div>
  </div>

  <h3>Mega menu</h3>

  <p>The mega menu system accompanies primary navigation systems. It is revealed on click only. Links are split into categories and can be spread across six columns on 1440px screen sizes. They can also feature a separate panel below for promotional links and additional conte</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-10@2x-2.jpg">
      <span class="fig-caption">Mega menu with offers bar (1440px)</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-27@2x-1.jpg">
      <span class="fig-caption">Mega menu with offers bar (1024px)</span>
    </div>
  </div>

  <h3>Burger menu</h3>

  <p>At widths below 768px the navigation reverts to a burger menu. All the items that live within the primary navigation and mega menu are placed inside an accordion system within a collapsed menu.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-28@2x-1.jpg" >
      <span class="fig-caption">768px menu — level one</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-29@2x-1.jpg">
      <span class="fig-caption">320px menu — level one</span>
    </div>
  </div>

  <p>To help simplify the navigation at that size, menus are split into two levels. Primary navigation links are shown at level one, plus any additional global CFU links where required.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-30@2x-1.jpg" >
      <span class="fig-caption">768px menu — level one</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-31@2x-1.jpg">
      <span class="fig-caption">320px menu — level one</span>
    </div>
  </div>

  <p>Level 2 contains links from the mega menu, but excludes deeper links. This is to reduce the number of levels within the navigation, and forces users to explore through landing pages or use the search functionality to navigate to deeper pages.</p>

  <h3>CFU Switcher</h3>

  <p>The CFU switcher is used to switch between portal types within larger products such as Swisscom.ch. It features a lower level of typographic hierarchy. It also houses global functionality, such as the language switcher and contact links. When using a burger menu, the CFU is positioned inside it, placed below the primary navigation links.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-32@2x-1.jpg">
      <span class="fig-caption">Closed CFU (1440px)</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-33@2x-1.jpg">
      <span class="fig-caption">Closed CFU (1024px)</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-34@2x-1.jpg" >
      <span class="fig-caption">768px CFU</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-35@2x.jpg">
      <span class="fig-caption">320px CFU</span>
    </div>
  </div>

  <p>At widths below 768px the CFU is contained within a burger menu, below the primary navigation.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-36@2x.jpg">
      <span class="fig-caption">1440px CFU open</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-37@2x-1.jpg" >
      <span class="fig-caption">768px CFU open</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-38@2x.jpg">
      <span class="fig-caption">320px CFU open</span>
    </div>
  </div>

  <h3>Breadcrumb</h3>

  <p>The breadcrumb enables users to return to the route page they came from. It also serves as a page heading, to aid user wayfinding around larger products, and houses sub navigation elements specific to the page the user is on. It should be used on larger applications where wayfinding is of extra importance.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-39@2x.jpg">
      <span class="fig-caption">1440px breadcrumb</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-40@2x.jpg">
      <span class="fig-caption">1440px breadcrumb collapsed, and on scroll</span>
    </div>
  </div>

  <p>On scroll, the primary navigation disappears, and the breadcrumb collapses into a thin strip, displaying the back arrow, page title, and sub navigation throughout the rest of the page. This enables users to quickly return to the previous page without needing to scroll to the top.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-41@2x.jpg" >
      <span class="fig-caption">< 768px breadcrumb</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-42@2x.jpg">
      <span class="fig-caption">< 768px breadcrumb sub navigation dropdown</span>
    </div>
  </div>

  <p>Once the screen size becomes smaller than 768px wide, sub nav links are placed into a drop down menu.</p>

  <h2>Rules</h2>

  <h3>Left aligned navigation links</h3>

  <p>Left aligned navigations can contain five links when using three icons or less, and four when using more than three icons. There is a limit of five icons for both centred and left aligned navigation options.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-43@2x.jpg">
      <span class="fig-caption">Left aligned navigation with more than three icons</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-44@2x.jpg">
      <span class="fig-caption">Left aligned navigation with more than three or less icons</span>
    </div>
  </div>

  <h3>Centre aligned navigation links</h3>

  <p>Centrally aligned navigations can contain five links when using three icons or less, and four when using more than three icons. There is a limit of five icons for both centred and left aligned navigation options.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-45@2x.jpg">
      <span class="fig-caption">Centre aligned navigation link limit</span>
    </div>
  </div>

  <h3>Right aligned navigation links</h3>

  <p>Right aligned navigations never feature icons, therefore they can always accomodate five nav items regardless of screen size</p>

  <h3>Mobile navigation bar icons</h3>

  <p>When reduced to a burger menu, in both left and centrally aligned variations of the primary navigation, icons are limited to four, plus the burger icon. In this instance, search should be positioned within the menu.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-47@2x.jpg">
      <span class="fig-caption">Right aligned navigation link limit</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Link spacing</h3>

  <p>Links should be spaced 30px apart at all times. This helps to maintain clarity between links. This rule should be applied across all breakpoints.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-51@2x.jpg">
      <span class="fig-caption">Navigation link spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Icon spacing</h3>

  <p>Icons placed in the primary navigation should be spaced 12px apart at all times, measuring from the trim container’s edge, not the icon itself. This rule should be applied across all breakpoints.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-48@2x.jpg">
      <span class="fig-caption">Icon spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Mobile alignment</h3>

  <p>At widths below 768px, when reverting to the burger menu, navigation links should be left aligned at all times. This includes the use of side bar navigations, on both the left and right side.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-49@2x.jpg">
      <span class="fig-caption">Navigation links within a burger menu should be left aligned at all times</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Mega menu column positioning</h3>

  <p>The mega menu uses a responsive column structure enabling it to contain more content across multiple screen sizes. It uses a six column maximum for 1440px to 1280px widths. Below 1280px it switches to a three column structure, stacking content categories but shifting every other column beneath the one to its left. At this size, the offers panel positioned at the bottom of the menu also reduces to displaying only two offers.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/navigation/Group-50@2x.jpg">
      <span class="fig-caption">1440px six column layout switches to three columns at <1280px</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/navigation/Group-52@2x.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/navigation/Group-13@2x.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Navigation, in its various forms, is what enables users to find their way around products and services. Navigation types all follow a uniform aesthetic, but have different placement and structures to best serve various product types and sizes.</p>

<h2>Primary navigation</h2>

<p>Primary navigation is the basic system to which navigation should be structured across various screen sizes. Surfacing key page links in a page header, along with core functionality specific to the product. In this example, basket and search are surfaced at the top level. This system collapses into a burger menu on smaller screen sizes to help the nav accommodate a larger variety of links and functionality.</p>

<p>Only one drawer at a time must be open.</p>

<h2>Primary navigation without drawers</h2>

<p>If no drawers are present, you can toggle the active state by setting the classes "nav-link" (inactive) and "nav-link nav-link--active" (active).</p>

<h3>Navigation sample</h3>

<p>A responsive test page for the Navigation is available at <a href="/samples/navigation.html" target="_blank">samples/navigation</a>.</p>

<h3>Nova sample</h3>

<p>The responsive test-page in the <i>nova</i> variation <a href="/samples/navigation-nova.html" target="_blank">samples/navigation-nova</a>.</p>
*/
.nav {
  position: relative;
  z-index: 50000;
  background: #fff;
}

.nav a,
.nav button {
  margin: 0;
  padding: 0;
  border: 0;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

.nav .nav-items::after {
  content: '';
  display: block;
  clear: both;
}

.nav .logo .logo-lifeform,
.nav .logo .logo-type {
  display: inline-block;
  float: left;
  position: relative;
  left: 0;
  top: 0;
  height: 40px;
}

.nav .logo .logo-lifeform {
  background-size: 3600px 40px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/lifeform-spritesheet.db5b9234.png");
  width: 40px;
  height: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  min-width: 40px;
  -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
  animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .nav .logo .logo-lifeform {
    background-image: url("../images/lifeform-spritesheet@2x.6e0a97f0.png");
  }
}

@-webkit-keyframes initialAnimation {
  100% {
    background-position: -3600px;
  }
}

@keyframes initialAnimation {
  100% {
    background-position: -3600px;
  }
}

@-webkit-keyframes repeatingAnimation {
  0% {
    background-position: 0;
  }
  80% {
    background-position: 0;
  }
  100% {
    background-position: -3600px;
  }
}

@keyframes repeatingAnimation {
  0% {
    background-position: 0;
  }
  80% {
    background-position: 0;
  }
  100% {
    background-position: -3600px;
  }
}

.nav .logo .nova-flag {
  display: inline-block;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-top: 5px;
}

.nav .nav-hamburger {
  display: block;
}

.nav .nav-hamburger span {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: #015;
  -webkit-transform-origin: center;
  transform-origin: center;
  transition: all 75ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav .nav-hamburger.is-active span:nth-child(1) {
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

.nav .nav-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.nav .nav-hamburger.is-active span:nth-child(3) {
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 0) {
  .nav .container {
    margin-left: calc(24px - 4px);
    margin-right: calc(24px - 4px);
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
  }
}

@media (min-width: 480px) {
  .nav .container {
    margin-left: calc(24px - 4px);
    margin-right: calc(24px - 4px);
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .nav .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
    width: 742px;
  }
}

@media (min-width: 1024px) {
  .nav .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 964px;
  }
}

@media (min-width: 1280px) {
  .nav .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 1224px;
  }
}

@media (min-width: 1440px) {
  .nav .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 1380px;
  }
}

.nav .nav-section--col-1 {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.nav .nav-section--col-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.nav .nav-section--col-3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.nav .nav-section--col-4 {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

.nav .nav-section--col-5 {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
}

.nav .nav-section--col-6 {
  -webkit-column-count: 6;
  -moz-column-count: 6;
  column-count: 6;
}

@media (max-width: 767px) {
  .nav .nav-section {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

@media (min-width: 768px) {
  .nav .nav-section {
    -webkit-column-gap: 16px;
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
  .nav .nav-section--col-md-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .nav .nav-section--col-md-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .nav .nav-section--col-md-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .nav .nav-section--col-md-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  .nav .nav-section--col-md-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
  .nav .nav-section--col-md-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }
}

@media (min-width: 1024px) {
  .nav .nav-section {
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }
  .nav .nav-section--col-lg-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .nav .nav-section--col-lg-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .nav .nav-section--col-lg-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .nav .nav-section--col-lg-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  .nav .nav-section--col-lg-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
  .nav .nav-section--col-lg-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }
}

@media (min-width: 1280px) {
  .nav .nav-section {
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }
  .nav .nav-section--col-xl-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .nav .nav-section--col-xl-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .nav .nav-section--col-xl-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .nav .nav-section--col-xl-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  .nav .nav-section--col-xl-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
  .nav .nav-section--col-xl-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }
}

@media (min-width: 1440px) {
  .nav .nav-section {
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }
  .nav .nav-section--col-ul-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .nav .nav-section--col-ul-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .nav .nav-section--col-ul-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .nav .nav-section--col-ul-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  .nav .nav-section--col-ul-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
  .nav .nav-section--col-ul-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }
}

.nav .nav-section {
  margin: 24px 0;
}

.nav .nav-section .nav-col {
  width: 100%;
  padding-bottom: 10px;
  overflow: hidden;
}

.nav .logo {
  float: left;
  margin-left: -18px;
  margin-right: 37px;
  margin-top: 22px;
}

@media (min-width: 1280px) {
  .nav .logo {
    margin-right: 80px;
  }
}

@media (min-width: 1440px) {
  .nav .logo {
    margin-right: 106px;
  }
}

@media (max-width: 479px) {
  .nav .logo .logo-type {
    display: none;
  }
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link {
  color: #015;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link .text-underline, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline {
  display: inline-block;
  position: relative;
  pointer-events: none;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link .text-underline::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline::before {
  position: absolute;
  top: 28px;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background-color: #015;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  content: '';
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon {
  position: relative;
  display: inline-block;
  top: 3px;
  left: 2px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  -webkit-transform: scale(0.8125);
  transform: scale(0.8125);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before, .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #015;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before {
  left: 0;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after {
  left: 6px;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .text-underline::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .text-underline::before, .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .text-underline::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .text-underline::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .arrow-icon::before, .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .arrow-icon::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::after, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .arrow-icon::after, .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .arrow-icon::after, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .arrow-icon::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover {
  color: #0851da;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .text-underline::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .text-underline::before {
  background-color: #0851da;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon {
  position: relative;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::before, .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #0851da;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::before {
  left: 0;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::after {
  left: 6px;
}

.nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link {
  color: #666;
}

.nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link:focus, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link:focus, .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link:hover, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link:hover {
  color: #0851da;
}

.nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link .icon, .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link .icon {
  margin-right: 7px;
}

.nav .nav__level0 {
  display: none;
  position: relative;
  float: none;
  background: #fff;
  z-index: 51000;
}

@media (min-width: 768px) {
  .nav .nav__level0 {
    display: block;
  }
}

.nav .nav__level0 .nav-section {
  margin: 0;
  padding: 20px 0 2px;
}

.nav .nav__level0 .nav-section .nav-col {
  padding-bottom: 23px;
  opacity: 0;
}

.nav .nav__level0 .nav-section .nav-col.is-active {
  opacity: 1;
}

.nav .nav__level0 a.nav-icon, .nav .nav__level0 a.nav-title, .nav .nav__level0 a.nav-link,
.nav .nav__level0 button.nav-icon,
.nav .nav__level0 button.nav-title,
.nav .nav__level0 button.nav-link {
  color: #015;
}

.nav .nav__level0 a.nav-icon:focus, .nav .nav__level0 a.nav-icon:hover, .nav .nav__level0 a.nav-title:focus, .nav .nav__level0 a.nav-title:hover, .nav .nav__level0 a.nav-link:focus, .nav .nav__level0 a.nav-link:hover,
.nav .nav__level0 button.nav-icon:focus,
.nav .nav__level0 button.nav-icon:hover,
.nav .nav__level0 button.nav-title:focus,
.nav .nav__level0 button.nav-title:hover,
.nav .nav__level0 button.nav-link:focus,
.nav .nav__level0 button.nav-link:hover {
  color: #0851da;
}

.nav .nav__level0 .nav-item {
  position: relative;
  margin: 0;
}

.nav .nav__level0 .language-selector .nav-link {
  text-transform: uppercase;
}

.nav .nav__level0 > .nav__mainnav {
  height: 40px;
  border-bottom: 1px solid #dce3e7;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}

.nav .nav__level0 > .nav__mainnav .nav-item {
  float: left;
}

.nav .nav__level0 > .nav__mainnav .nav-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.nav .nav__level0 > .nav__mainnav .nav__primary, .nav .nav__level0 > .nav__mainnav .nav__secondary {
  padding-top: 10px;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-item, .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-item:first-child, .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item:first-child {
  margin-left: 0;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-item:last-child, .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item:last-child {
  margin-right: 0;
}

.nav .nav__level0 > .nav__mainnav .nav__primary {
  float: left;
}

.nav .nav__level0 > .nav__mainnav .nav__primary .nav-item {
  margin-right: 40px;
}

.nav .nav__level0 > .nav__mainnav .nav__secondary {
  float: right;
}

.nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item {
  margin-left: 22px;
}

.nav .nav__level0 > .nav__subnav {
  display: none;
  height: 0;
  overflow: hidden;
  background: #eef3f6;
}

.nav .nav__level0 > .nav__subnav.is-open {
  display: block;
  height: 100%;
}

.nav .nav__level0 > .nav__subnav .nav-section {
  display: none;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

@media (min-width: 1280px) {
  .nav .nav__level0 > .nav__subnav .nav-section {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

.nav .nav__level0 > .nav__subnav .nav-section.is-open {
  display: block;
}

.nav .nav__level0 > .nav__subnav .nav-section .nav-col {
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

@media (min-width: 1280px) {
  .nav .nav__level0 > .nav__subnav .nav-section .nav-col {
    -webkit-column-break-after: column;
    page-break-after: column;
    break-after: column;
  }
}

.nav .nav__level0 > .nav__subnav .nav-title {
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  padding-bottom: 4px;
}

.nav .nav__level0 > .nav__subnav .nav-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  text-decoration: none;
}

.nav .nav__level0 > .nav__subnav .nav-items {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile {
  display: none;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary,
.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary {
  display: block;
  position: static;
  height: auto;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link,
.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link {
  height: auto;
  padding: 16px 24px 15px;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline::before {
  top: 22px;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon {
  left: 0;
  margin-bottom: 0;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-section {
  padding: 22px 24px 7px;
  border: 0;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-col {
  padding: 0 0 23px;
  border: 0;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-title {
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  padding-bottom: 4px;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  text-decoration: none;
  padding: 0;
  border: 0;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-items {
  margin: 0;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-item {
  display: inline;
}

.nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-link {
  padding: 0;
  border: 0;
}

@media (max-width: 767px) {
  .nav .nav__level1 .nav__mainnav .nav__level0-mobile {
    display: block;
  }
}

.nav .nav__level1 {
  position: relative;
  float: none;
  height: 80px;
  border-bottom: 1px solid #dce3e7;
  background: #fff;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  z-index: 50100;
}

.nav .nav__level1 .nav-section {
  margin: 30px 0 -6px;
}

.nav .nav__level1 .nav-section .nav-col {
  padding-bottom: 36px;
}

.nav .nav__level1 a.nav-icon, .nav .nav__level1 a.nav-title, .nav .nav__level1 a.nav-link,
.nav .nav__level1 button.nav-icon,
.nav .nav__level1 button.nav-title,
.nav .nav__level1 button.nav-link {
  color: #015;
}

.nav .nav__level1 a.nav-icon:focus, .nav .nav__level1 a.nav-icon:hover, .nav .nav__level1 a.nav-title:focus, .nav .nav__level1 a.nav-title:hover, .nav .nav__level1 a.nav-link:focus, .nav .nav__level1 a.nav-link:hover,
.nav .nav__level1 button.nav-icon:focus,
.nav .nav__level1 button.nav-icon:hover,
.nav .nav__level1 button.nav-title:focus,
.nav .nav__level1 button.nav-title:hover,
.nav .nav__level1 button.nav-link:focus,
.nav .nav__level1 button.nav-link:hover {
  color: #0851da;
}

.nav .nav__level1 .nav-icon {
  font-size: 26px;
}

.nav .nav__level1 .nav__mainnav {
  width: 100%;
  height: 80px;
}

.nav .nav__level1 .nav__mainnav .nav-item {
  float: left;
  margin: 0;
}

.nav .nav__level1 .nav__mainnav .nav-link {
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-item:first-child, .nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item:first-child {
  margin-left: 0;
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-item:last-child, .nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item:last-child {
  margin-right: 0;
}

.nav .nav__level1 .nav__mainnav > .nav__primary {
  float: left;
  padding-top: 24px;
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-item {
  margin-right: 28px;
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-link {
  color: #015;
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-link .text-underline {
  position: relative;
  pointer-events: none;
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-link .text-underline::before {
  position: absolute;
  top: 34px;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background-color: #015;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  content: '';
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-link--header {
  content: '';
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-link.is-active .text-underline::before, .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link--active .text-underline::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-link:hover {
  color: #0851da;
}

.nav .nav__level1 .nav__mainnav > .nav__primary .nav-link:hover .text-underline::before {
  background-color: #0851da;
}

.nav .nav__level1 .nav__mainnav > .nav__secondary {
  float: right;
  padding-top: 28px;
}

.nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item {
  margin-left: 20px;
}

.nav .nav__level1 .nav__subnav {
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
  background: #eef3f6;
}

.nav .nav__level1 .nav__subnav .nav-body,
.nav .nav__level1 .nav__subnav .nav-footer {
  position: relative;
  overflow: hidden;
  display: none;
  height: 0;
}

.nav .nav__level1 .nav__subnav .nav-body.is-open,
.nav .nav__level1 .nav__subnav .nav-footer.is-open {
  display: block;
  height: 100%;
}

.nav .nav__level1 .nav__subnav .nav-body .nav-item,
.nav .nav__level1 .nav__subnav .nav-footer .nav-item {
  margin: 0;
}

.nav .nav__level1 .nav__subnav .nav-footer {
  background: #e3e9ec;
}

.nav .nav__level1 .nav__subnav .nav-footer .offer {
  padding: 23px 0 24px;
}

.nav .nav__level1 .nav__subnav .nav-footer .offer--first {
  border-right: 1px solid #dce3e7;
}

.nav .nav__level1 .nav__subnav .nav-footer .offer__items {
  margin-top: 8px;
}

.nav .nav__level1 .nav__subnav .nav-footer .offer__items .offer__image {
  float: left;
  margin-right: 18px;
}

.nav .nav__level1 .nav__subnav .nav-footer .offer__items .offer__content {
  display: table;
  word-wrap: normal;
}

.nav .nav__level1 .nav__subnav .nav-section .nav-col {
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

@media (min-width: 1280px) {
  .nav .nav__level1 .nav__subnav .nav-section .nav-col {
    -webkit-column-break-after: column;
    page-break-after: column;
    break-after: column;
  }
}

.nav .nav__level1 .nav__subnav .nav-section .nav-col.is-active {
  opacity: 1;
}

.nav .nav__level1 .nav__subnav .nav-title {
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
}

.nav .nav__level1 .nav__subnav .nav-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  text-decoration: none;
  white-space: normal;
}

.nav .nav__level1 .nav__subnav .nav-items {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 8px;
}

.nav .nav__level1 .nav__subnav .nav-item {
  position: relative;
  float: left;
}

.nav .nav__level1 .nav__subnav .nav-item:not(:first-child) {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .nav .nav__level1 .nav__mainnav .nav__primary {
    display: none;
    position: absolute;
    left: 0;
    top: 80px;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    background: #fff;
    overflow: hidden;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary.is-open {
    display: block;
    height: auto;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-item {
    width: 100%;
    margin: 0;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link {
    display: block;
    height: 80px;
    padding: 24px 24px 20px;
    border-bottom: 1px solid #dce3e7;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon {
    position: relative;
    display: inline-block;
    left: 0;
    width: 16px;
    margin-bottom: 1px;
    pointer-events: none;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after {
    position: absolute;
    top: 50%;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    background: #015;
    width: 10px;
    height: 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: '';
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before {
    left: 0;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after {
    left: 6px;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--active .arrow-icon::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::after, .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--active .arrow-icon::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon {
    position: relative;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before, .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after {
    position: absolute;
    top: 50%;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    background: #0851da;
    width: 10px;
    height: 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: '';
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before {
    left: 0;
  }
  .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after {
    left: 6px;
  }
  .nav .nav__level1 .nav__mainnav .nav__subnav {
    position: static;
    left: 0;
    top: 0;
  }
  .nav .nav__level1 .nav__mainnav .nav__subnav .container {
    padding: 0;
    margin: 0;
  }
  .nav .nav__level1 .nav__mainnav .nav__subnav .nav-footer,
  .nav .nav__level1 .nav__mainnav .nav__subnav .offer {
    overflow: hidden;
    display: none;
  }
  .nav .nav__level1 .nav__mainnav .nav__subnav .nav-section {
    margin: 0;
  }
  .nav .nav__level1 .nav__mainnav .nav__subnav .nav-col {
    padding: 15px 24px;
    border-bottom: 1px solid #dce3e7;
  }
  .nav .nav__level1 .nav__mainnav .nav__subnav .nav-title {
    font-weight: 400;
  }
  .nav .nav__level1 .nav__mainnav .nav__subnav .nav-items {
    margin: 0;
  }
  .nav .nav__level1 .nav__mainnav .nav__subnav .nav-item {
    display: none;
  }
}

.nav .nav__level2 .nav-back, .nav .nav__level2.is-sticky .nav-back {
  position: absolute;
  margin-top: 14px;
}

.nav .nav__level2 .nav-back::after, .nav .nav__level2.is-sticky .nav-back::after {
  position: absolute;
  top: 4px;
  left: 32px;
  height: 16px;
  border-right: 1px solid #979797;
  opacity: 1;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  content: '';
}

.nav .nav__level2 .nav-back .nav-text {
  padding-left: 8px;
  opacity: 0;
  transition: visibility 0ms linear, opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav .nav__level2 .nav-title, .nav .nav__level2.is-sticky .nav-title {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 16px;
  position: relative;
  width: 100%;
  margin-left: 30px;
  padding-left: 17px;
  color: #666;
  transition-property: margin, padding, line-height, letter-spacing, font-size;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.nav .nav__level2 {
  position: relative;
  width: 100%;
  height: 48px;
  background: #eef3f6;
  transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav .nav__level2 .nav__wrapper {
  display: block;
  padding-top: 14px;
  transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav .nav__level2 .nav__currentpage {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  cursor: pointer;
}

.nav .nav__level2 .nav__currentpage .arrow-icon {
  position: relative;
  display: inline-block;
  float: right;
  top: 3px;
  left: 2px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  -webkit-transform: scale(0.8125);
  transform: scale(0.8125);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.nav .nav__level2 .nav__currentpage .arrow-icon::before, .nav .nav__level2 .nav__currentpage .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #015;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.nav .nav__level2 .nav__currentpage .arrow-icon::before {
  left: 0;
}

.nav .nav__level2 .nav__currentpage .arrow-icon::after {
  left: 6px;
}

.nav .nav__level2 .nav__currentpage .arrow-icon::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav .nav__level2 .nav__currentpage .arrow-icon::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav .nav__level2 .nav__currentpage.is-open .arrow-icon::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav .nav__level2 .nav__currentpage.is-open .arrow-icon::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav .nav__level2 .nav__quicklinks {
  display: none;
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: #e3e9ec;
}

.nav .nav__level2 .nav__quicklinks.is-open {
  display: block;
  height: auto;
}

.nav .nav__level2 .nav-link {
  color: #015;
}

.nav .nav__level2 .nav-link .icon {
  position: relative;
  top: 1px;
  margin-left: -2px;
  font-size: 21px;
}

.nav .nav__level2 .nav-link:hover {
  color: #0851da;
}

.nav .nav__level2 .nav-items {
  padding: 20px 24px 19px;
  transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav .nav__level2 .nav-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 15px;
}

.nav .nav__level2 .nav-item:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .nav .nav__level2 {
    height: 104px;
  }
  .nav .nav__level2 .nav__wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 55px;
  }
  .nav .nav__level2 .nav__currentpage {
    cursor: auto;
  }
  .nav .nav__level2 .nav__currentpage .arrow-icon {
    display: none;
  }
  .nav .nav__level2 .nav__quicklinks {
    display: block;
    position: static;
    left: auto;
    width: auto;
    height: 100%;
    margin: 0;
    margin-left: 24px;
    background: none;
  }
  .nav .nav__level2 .nav-back {
    margin-top: 14px;
  }
  .nav .nav__level2 .nav-back::after {
    opacity: 0;
  }
  .nav .nav__level2 .nav-back .nav-text {
    opacity: 1;
  }
  .nav .nav__level2 .nav-title {
    line-height: 32px;
    letter-spacing: -.35px;
    font-size: 24px;
    margin-left: 0;
    padding-left: 0;
  }
  .nav .nav__level2 .nav-title::before {
    content: none;
  }
  .nav .nav__level2 .nav-items {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 0;
    padding-top: 6px;
  }
  .nav .nav__level2 .nav-item {
    position: relative;
    margin: 0;
    padding: 0 18px;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
  .nav .nav__level2 .nav-item:first-child {
    padding-left: 0;
  }
  .nav .nav__level2 .nav-item:last-child {
    padding-right: 0;
  }
  .nav .nav__level2 .nav-item:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;
    height: 18px;
    border-right: 1px solid #d6d6d6;
    content: '';
  }
}

.nav .nav__level2.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  height: 48px;
}

.nav .nav__level2.is-sticky .nav__wrapper {
  padding-top: 14px;
}

@media (min-width: 768px) {
  .nav .nav__level2.is-sticky .nav-back .nav-text {
    opacity: 0;
  }
  .nav .nav__level2.is-sticky .nav-items {
    padding: 0;
    padding-top: 1px;
  }
}

.nav-top {
  position: relative;
  height: 80px;
  border-bottom: 1px solid #dce3e7;
  background: #fff;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  z-index: 50100;
}

.nav-top a,
.nav-top button {
  margin: 0;
  padding: 0;
  border: 0;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-top ul,
.nav-top ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-top .nav-items::after {
  content: '';
  display: block;
  clear: both;
}

.nav-top .logo .logo-lifeform,
.nav-top .logo .logo-type {
  display: inline-block;
  float: left;
  position: relative;
  left: 0;
  top: 0;
  height: 40px;
}

.nav-top .logo .logo-lifeform {
  background-size: 3600px 40px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/lifeform-spritesheet.db5b9234.png");
  width: 40px;
  height: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  min-width: 40px;
  -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
  animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .nav-top .logo .logo-lifeform {
    background-image: url("../images/lifeform-spritesheet@2x.6e0a97f0.png");
  }
}

@keyframes initialAnimation {
  100% {
    background-position: -3600px;
  }
}

@keyframes repeatingAnimation {
  0% {
    background-position: 0;
  }
  80% {
    background-position: 0;
  }
  100% {
    background-position: -3600px;
  }
}

.nav-top .logo .nova-flag {
  display: inline-block;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-top: 5px;
}

.nav-top .nav-hamburger {
  display: block;
}

.nav-top .nav-hamburger span {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: #015;
  -webkit-transform-origin: center;
  transform-origin: center;
  transition: all 75ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-top .nav-hamburger.is-active span:nth-child(1) {
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

.nav-top .nav-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-top .nav-hamburger.is-active span:nth-child(3) {
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 0) {
  .nav-top .container {
    margin-left: calc(24px - 4px);
    margin-right: calc(24px - 4px);
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
  }
}

@media (min-width: 480px) {
  .nav-top .container {
    margin-left: calc(24px - 4px);
    margin-right: calc(24px - 4px);
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .nav-top .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
    width: 742px;
  }
}

@media (min-width: 1024px) {
  .nav-top .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 964px;
  }
}

@media (min-width: 1280px) {
  .nav-top .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 1224px;
  }
}

@media (min-width: 1440px) {
  .nav-top .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 1380px;
  }
}

.nav-top .logo {
  margin-left: -18px;
}

@media (max-width: 479px) {
  .nav-top .logo .logo-type {
    display: none;
  }
}

.nav-top .nav-section {
  margin: 30px 0 -6px;
}

.nav-top .nav-section .nav-col {
  padding-bottom: 36px;
}

.nav-top .nav-item {
  float: left;
  margin: 0;
  margin-right: 28px;
}

.nav-top .nav-item:last-child {
  margin-right: 0;
}

.nav-top a.nav-icon, .nav-top a.nav-link,
.nav-top button.nav-icon,
.nav-top button.nav-link {
  color: #015;
}

.nav-top a.nav-icon:focus, .nav-top a.nav-icon:hover, .nav-top a.nav-link:focus, .nav-top a.nav-link:hover,
.nav-top button.nav-icon:focus,
.nav-top button.nav-icon:hover,
.nav-top button.nav-link:focus,
.nav-top button.nav-link:hover {
  color: #0851da;
}

.nav-top .nav-icon {
  font-size: 26px;
}

.nav-top .nav-link {
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #015;
}

.nav-top .nav-link .text-underline {
  position: relative;
  pointer-events: none;
}

.nav-top .nav-link .text-underline::before {
  position: absolute;
  top: 34px;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background-color: #015;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  content: '';
}

.nav-top .nav-link.is-active .text-underline::before, .nav-top .nav-link--active .text-underline::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.nav-top .nav-link:hover {
  color: #0851da;
}

.nav-top .nav-link:hover .text-underline::before {
  background-color: #0851da;
}

.nav-top .nav__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 80px;
}

.nav-top .nav__wrapper > .nav__menu {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding-top: 24px;
}

.nav-top .nav__wrapper > .nav__menu > * {
  display: inherit;
}

.nav-top .nav__wrapper > .nav__menu--logo {
  padding-top: 22px;
}

.nav-top .nav__wrapper > .nav__menu--icon {
  padding-top: 28px;
}

.nav-top .nav__wrapper > .nav__menu--icon .nav-item {
  margin-right: 20px;
}

.nav-top .nav__wrapper > .nav__menu--icon .nav-item:last-child {
  margin-right: 0;
}

.nav-top .nav__wrapper > .nav__menu--left {
  -webkit-flex: 1 0 0%;
  -ms-flex: 1 0 0%;
  flex: 1 0 0%;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-right: 36px;
}

.nav-top .nav__wrapper > .nav__menu--center {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.nav-top .nav__wrapper > .nav__menu--right {
  -webkit-flex: 1 0 0%;
  -ms-flex: 1 0 0%;
  flex: 1 0 0%;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-left: 36px;
}

@media (max-width: 767px) {
  .nav-top .nav-toggle {
    display: block;
  }
  .nav-top .nav-toggle.is-open .nav-link .arrow-icon::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .nav-top .nav-toggle.is-open .nav-link .arrow-icon::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .nav-top .nav-toggle .nav-link {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .nav-top .nav-toggle .nav-link .arrow-icon {
    position: relative;
    display: inline-block;
    left: 0;
    width: 16px;
    margin-bottom: 1px;
    margin-left: 16px;
    pointer-events: none;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  .nav-top .nav-toggle .nav-link .arrow-icon::before, .nav-top .nav-toggle .nav-link .arrow-icon::after {
    position: absolute;
    top: 50%;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    background: #015;
    width: 10px;
    height: 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: '';
  }
  .nav-top .nav-toggle .nav-link .arrow-icon::before {
    left: 0;
  }
  .nav-top .nav-toggle .nav-link .arrow-icon::after {
    left: 6px;
  }
  .nav-top .nav-toggle .nav-link .arrow-icon::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .nav-top .nav-toggle .nav-link .arrow-icon::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .nav-top .nav-toggle .nav-link:hover {
    color: #015;
  }
  .nav-top .nav-toggle .nav-link:hover .arrow-icon {
    position: relative;
  }
  .nav-top .nav-toggle .nav-link:hover .arrow-icon::before, .nav-top .nav-toggle .nav-link:hover .arrow-icon::after {
    position: absolute;
    top: 50%;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    background: #015;
    width: 10px;
    height: 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: '';
  }
  .nav-top .nav-toggle .nav-link:hover .arrow-icon::before {
    left: 0;
  }
  .nav-top .nav-toggle .nav-link:hover .arrow-icon::after {
    left: 6px;
  }
  .nav-top .nav-collapse {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #fff;
  }
  .nav-top .nav-collapse.is-open {
    display: block;
    height: auto;
  }
  .nav-top .nav-collapse .nav-item {
    width: 100%;
    margin: 0;
    text-align: center;
  }
  .nav-top .nav-collapse .nav-link {
    display: block;
    height: 80px;
    padding: 24px 24px 20px;
    border-bottom: 1px solid #dce3e7;
  }
}

/*doc
---
title: Navigation (side)
name: 02-components-115-side-navigation-01-overview
category: Components - Navigation (side)
---

<p>For shallower products and services, a combination of a primary and side navigation can be used. The primary navigation is this case is used to contain sub navigation elements specific to that page, while a burger menu contains global page navigation links for the the rest of the product.</p>

<div class="exampleOutput">
  <style type="text/css">
    .exampleOutput {
    overflow: hidden;
    border-bottom: solid 1px #d8d8d8;
    }
    .exampleOutput .nav-side, .nav-side--left {
    position: absolute;
    }
    .exampleOutput .main-wrapper {
        min-height: 0;
    }

    .nav-top .container {
         width: auto;
    }

    .nav-top {
        z-index: 49999;
    }
  </style>

  <div class="main-wrapper">
      <nav class="nav-side nav-side--left" role="navigation" data-init="auto">
        <ul class="nav-items nav-items--border">
          <li class="nav-item js-nav-item"><a class="nav-link" aria-label="Home" href="javascript:void(0);"><i class="icon icon-044-home" aria-hidden="true"></i><span class="text-underline">Home</span></a></li>
          <li class="nav-item js-nav-item"><a class="nav-link" aria-label="Photos" href="javascript:void(0);"><i class="icon icon-154-photo" aria-hidden="true"></i><span class="text-underline">Photos</span></a></li>
          <li class="nav-item js-nav-item"><a class="nav-link" aria-label="Music" href="javascript:void(0);"><i class="icon icon-148-music" aria-hidden="true"></i><span class="text-underline">Music</span></a></li>
          <li class="nav-item js-nav-item"><a class="nav-link" aria-label="Setting" href="javascript:void(0);"><i class="icon icon-078-settings" aria-hidden="true"></i><span class="text-underline">Setting</span></a></li>
        </ul>
      </nav>
      <div class="site-wrapper js-site-wrapper">
        <nav class="nav-top" role="navigation">
          <div class="container">
            <div class="nav__wrapper">
              <div class="nav__menu nav__menu--icon nav__menu--left">
                <ul class="nav-items">
                  <li class="nav-item"><a class="nav-icon nav-hamburger js-hamburger" href="javascript:void(0);" aria-label="Menu"><span></span><span></span><span></span></a></li>
                </ul>
              </div>
              <div class="nav__menu nav__menu--center">
                <div class="nav__menu-wrapper">
                  <div class="nav-toggle hidden-tablet-up" data-init="auto" data-toggle="collapse" data-target="#nav-top-collapse"><a class="nav-link" href="javascript:void(0);">
                      <div class="nav-title">Level 1 - 1</div>
                      <div class="arrow-icon"></div></a></div>
                      <div class="nav-collapse" id="nav-top-collapse">
                        <ul class="nav-items">
                        </ul>
                      </div>
                  </div>
               </div>
                <div class="nav__menu nav__menu--icon nav__menu--right">
                  <ul class="nav-items">
                    <li class="nav-item hidden-phone-down"><a class="nav-icon" href="javascript:void(0);" aria-label="Download"><i class="icon icon-024-download-cloud" aria-hidden="true"></i></a></li>
                    <li class="nav-item hidden-phone-down"><a class="nav-icon" href="javascript:void(0);" aria-label="Account"><i class="icon icon-001-account" aria-hidden="true"></i></a></li>
                  </ul>
                </div>
              </div>
            </div>
         </nav>
         <div class="page">
           <p class="padding-top-4">Lorem ipsum dolor sit amet, assum solet diceret mea id. Delectus legendos vulputate te eos, ius prima meliore ea, cum purto argumentum id. Eos porro tempor consectetuer ex, per option tacimates moderatius ea. Sed insolens eloquentiam ei, ad eirmod detracto definitiones eam. Ea has admodum electram, his ei iusto labores facilis. At liber efficiantur est, in velit aeterno constituto ius. Tempor aliquid ne ius.</p>
         </div>
      </div>
   </div>
</div>

<a name="design" tabindex="-1" class="padding-top-4"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Alignment options</h3>

  <p>Side navigation is available in both left and right hand versions. When using the left side navigation option, the Swisscom logo should be present within the side navigation.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-11@2x-4.jpg" >
      <span class="fig-caption">Left hand burger icon</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-12@2x-1.jpg">
      <span class="fig-caption">Left hand navigation includes the Swisscom logo</span>
    </div>
  </div>

  <p>When using the left hand side navigation, the Swisscom logo should be positioned inside the navigation, and not shown in the header.</p>

  <p>Dividing lines are used to help seperate items, and icons can be used to support link titles and make functionality clearer to the user.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-15@2x.jpg" >
      <span class="fig-caption">Right hand burger icon</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-16@2x.jpg">
      <span class="fig-caption">Right hand navigation doesn't include the Swisscom logo</span>
    </div>
  </div>

  <p>When using the right hand side nav, the Swisscom logo should be positioned in the header, and not positioned inside the navigation.</p>

  <h3>Mobile side navigation</h3>

  <p>Smaller products that don’t feature or require the use of a mega drop down should follow the side navigation styling, and not the responsive state of the navigation shown in the mega dropdown guidance.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-17@2x.jpg" >
      <span class="fig-caption">Left hand side nav at 320px</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-18@2x.jpg">
      <span class="fig-caption">Left hand side nav using scaling behavior</span>
    </div>
  </div>

  <p>On mobile, links are positioned in the verticle centre of the menu, with the Swisscom logo anchored to the bottom, and account information and avatars anchored to the top.</p>

  <p>On native applications, a scaling version of the side navigation which features a more dynamic behaviour can be used. Technical limitations mean that web based services should avoid using the scaling option.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-21@2x.jpg" >
      <span class="fig-caption">Left hand side navigation at 320px</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-22@2x.jpg">
      <span class="fig-caption">Left hand side navigation using scaling behavior</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Vertical alignment</h3>

  <p>Links within side navigation menus are aligned vertically to the middle.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-23@2x.jpg">
      <span class="fig-caption">Verticle aignment of links</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Without icons</h3>

  <p>Icons can be used to help further inform the users of the functionality or theme of a page that links lead to, but they’re not mandatory. Icons should be applied consistantly within the navigation, either being applied to all links, or none.</p>

  <div class="row margin-top-4">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-24@2x.jpg">
      <span class="fig-caption">Side navigation without icons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/sidenavigation/Group-25@2x.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>For shallower products and services, a combination of a primary and side navigation can be used. The primary navigation is this case is used to contain sub navigation elements specific to that page, while a burger menu contains global page navigation links for the the rest of the product.</p>

<h2>Alignment options</h2>

<p>Side navigation is available in both left and right hand versions. When using the left side navigation option, the Swisscom logo should be present within the side navigation.</p>

<h4>Left hand side navigation</h4>

<p>A sample is available at <a href="/samples/navigation-side-left.html" target="_blank">samples/navigation-side-left</a>.</p>

<h4>Right hand side navigation</h4>

<p>A sample is available at <a href="/samples/navigation-side-right.html" target="_blank">samples/navigation-side-right</a>.</p>
*/
.nav-side {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: fixed;
  top: 0;
  width: 272px;
  height: 100%;
  background: #eef3f6;
  overflow-y: auto;
  z-index: 50500;
}

.nav-side a,
.nav-side button {
  margin: 0;
  padding: 0;
  border: 0;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-side ul,
.nav-side ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-side .nav-items::after {
  content: '';
  display: block;
  clear: both;
}

.nav-side .logo .logo-lifeform,
.nav-side .logo .logo-type {
  display: inline-block;
  float: left;
  position: relative;
  left: 0;
  top: 0;
  height: 40px;
}

.nav-side .logo .logo-lifeform {
  background-size: 3600px 40px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/lifeform-spritesheet.db5b9234.png");
  width: 40px;
  height: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  min-width: 40px;
  -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
  animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .nav-side .logo .logo-lifeform {
    background-image: url("../images/lifeform-spritesheet@2x.6e0a97f0.png");
  }
}

@keyframes initialAnimation {
  100% {
    background-position: -3600px;
  }
}

@keyframes repeatingAnimation {
  0% {
    background-position: 0;
  }
  80% {
    background-position: 0;
  }
  100% {
    background-position: -3600px;
  }
}

.nav-side .logo .nova-flag {
  display: inline-block;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-top: 5px;
}

.nav-side .nav-hamburger {
  display: block;
}

.nav-side .nav-hamburger span {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: #015;
  -webkit-transform-origin: center;
  transform-origin: center;
  transition: all 75ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-side .nav-hamburger.is-active span:nth-child(1) {
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

.nav-side .nav-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-side .nav-hamburger.is-active span:nth-child(3) {
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

.nav-side ~ .site-wrapper {
  transition: left 0.3s cubic-bezier(0.55, 0.085, 0.32, 1);
}

.nav-side, .nav-side--left {
  left: -272px;
  transition: left 0.3s cubic-bezier(0.55, 0.085, 0.32, 1);
}

.nav-side.is-open, .nav-side--left.is-open {
  left: 0;
}

.nav-side ~ .site-wrapper, .nav-side--left ~ .site-wrapper {
  position: relative;
  left: 0;
}

.nav-side ~ .site-wrapper.is-open, .nav-side--left ~ .site-wrapper.is-open {
  left: 272px;
}

.nav-side--right {
  left: auto;
  right: -272px;
  transition: right 0.3s cubic-bezier(0.55, 0.085, 0.32, 1);
}

.nav-side--right.is-open {
  left: auto;
  right: 0;
}

.nav-side--right ~ .site-wrapper.is-open {
  left: -272px;
}

.nav-side .logo {
  display: block;
  margin: 0 30px 30px;
}

.nav-side .nav-items {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 30px 36px;
}

.nav-side .nav-items--border .nav-item:not(:last-child) {
  border-bottom: 1px solid #dde3e7;
}

.nav-side .nav-item {
  width: 100%;
}

.nav-side .nav-item .nav-link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 0 9px;
  color: #015;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav-side .nav-item .nav-link .text-underline {
  position: relative;
  pointer-events: none;
}

.nav-side .nav-item .nav-link .text-underline::before {
  position: absolute;
  top: 24px;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background-color: #015;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  content: '';
}

.nav-side .nav-item .nav-link.is-active .text-underline::before, .nav-side .nav-item .nav-link--active .text-underline::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.nav-side .nav-item .nav-link:hover {
  color: #0851da;
}

.nav-side .nav-item .nav-link:hover .text-underline::before {
  background-color: #0851da;
}

.nav-side .nav-item .icon {
  margin-right: 16px;
  font-size: 30px;
  text-align: center;
}

.nav-side .nav-item--active .nav-link {
  color: #1781e3;
}

@media (max-width: 767px) {
  .nav-side {
    width: 250px;
  }
  .nav-side ~ .site-wrapper.is-open, .nav-side--left ~ .site-wrapper.is-open {
    left: 250px;
  }
  .nav-side--right {
    left: auto;
    right: -250px;
  }
  .nav-side--right ~ .site-wrapper.is-open {
    left: -250px;
  }
  .nav-side .logo {
    margin: 0 14px 14px;
  }
  .nav-side .nav-items {
    margin: 30px 20px;
  }
}

/*doc
---
title: Navigation (tab mobile)
name: 02-components-120-tab-navigation-01-overview
category: Components - Navigation (tab mobile)
---

<style>
  .exampleOutput {
    background-color: #474747;
  }

  .cortana-content-wrapper .nav-tabs {
    width: 250px;
    position: initial;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<p>For mobile devices the navigation is also available as a Mobile Tab-Navigation. It is available with or without captions.</p>

<p><b>NOTE:</b> This component is only available on the <code>phone</code> breakpoint and is not intended to be used on tablets and desktop breakpoints.</p>

<p>A sample is available at <a href="/samples/navigation-tabs.html" target="_blank">samples/navigation-tabs</a>.</p>

```htmlmixed
<nav class="nav-tabs">
  <ul class="nav-items">
    <li class="nav-item">
      <a class="nav-link" aria-label="Home" href="javascript:void(0);">
        <span class="nav-link__wrapper">
          <i class="icon icon-044-home" aria-hidden="true"></i>
        </span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" aria-label="Profile" href="javascript:void(0);">
        <span class="nav-link__wrapper">
          <i class="icon icon-001-account" aria-hidden="true"></i>
        </span>
      </a>
    </li>
    <li class="nav-item nav-item--active">
      <a class="nav-link" aria-label="Upload" href="javascript:void(0);">
        <span class="nav-link__wrapper">
          <i class="icon icon-088-upload-cloud" aria-hidden="true"></i>
        </span>
      </a>
    </li>
  </ul>
</nav>
```

```htmlmixed
<nav class="nav-tabs">
  <ul class="nav-items">
    <li class="nav-item">
      <a class="nav-link" aria-label="Home" href="javascript:void(0);">
        <span class="nav-link__wrapper">
          <i class="icon icon-044-home" aria-hidden="true"></i>
          <span class="button__label">Home</span>
        </span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" aria-label="Profile" href="javascript:void(0);">
        <span class="nav-link__wrapper">
          <i class="icon icon-001-account" aria-hidden="true"></i>
          <span class="button__label">Profile</span>
        </span>
      </a>
    </li>
    <li class="nav-item nav-item--active">
      <a class="nav-link" aria-label="Upload" href="javascript:void(0);">
        <span class="nav-link__wrapper">
          <i class="icon icon-088-upload-cloud" aria-hidden="true"></i>
          <span class="button__label">Upload</span>
        </span>
      </a>
    </li>
  </ul>
</nav>
```
*/
.nav-tabs {
  background: #fff;
  border-top: 1px solid #e4e9ec;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 65px;
}

.nav-tabs a,
.nav-tabs button {
  margin: 0;
  padding: 0;
  border: 0;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-tabs ul,
.nav-tabs ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-tabs .nav-items {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  height: 100%;
}

.nav-tabs .nav-item {
  width: 100%;
  height: 100%;
}

.nav-tabs .nav-item .nav-link {
  width: 100%;
  height: 100%;
  color: #015;
}

.nav-tabs .nav-item .nav-link:focus {
  color: #1781e3;
}

.nav-tabs .nav-item .nav-link__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.nav-tabs .nav-item .icon {
  font-size: 30px;
  text-align: center;
}

.nav-tabs .nav-item .button__label {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 64px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  padding-bottom: 1px;
}

.nav-tabs .nav-item--active .nav-link {
  color: #1781e3;
}

/*doc
---
title: Search
name: 02-components-150-search
category: Components - Search
---

<style>
  .cortana-content-wrapper .search .container {
    width: auto;
  }
</style>

<p>Search enables users to locate information without the need to go Rescale element through conventional navigation. Users are presented with ‘live search’ results as a drop down, or are taken through to a page of their specific search results.</p>

<style>
  .search {
   z-index: 49999;
  }
</style>

<div class="padding-bottom-2">
  <div class="search search__input is-open">
    <div class="container">
      <div class="search__input-wrapper">
        <form class="search__box" novalidate>
          <label for="site-search" class="sr-only">Suchen</label>
          <input class="search__field" type="search" id="site-search" name="q" required autocomplete="off" placeholder="Suchen nach..."/>
          <button class="search__icon-clear" type="reset" aria-label="Eingabe löschen">
            <i class="icon icon-202-clear-circle" aria-hidden="true"></i>
          </button>
          <label for="site-search-submit" class="sr-only">Senden</label>
          <input class="sr-only" type="submit" id="site-search-submit" tabindex="-1"/>
        </form>
        <button class="search__icon-close" aria-label="Suche schliessen">
          <i class="icon icon-022-close" aria-hidden="true"></i>
        </button>
       </div>
    </div>
  </div>
</div>

<p>You can have a look at the search component on a responsive test page for the Navigation at <a href="/samples/navigation.html" target="_blank">samples/navigation</a>.</p>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Live search</h3>

  <p>Live search is the primary format for search, and should be implimented wherever technically possible. When the user starts typing, a close button appears which would delete the written search text.</p>

  <p> While typing, the live search shows the results in real time. An optional promotional bar can appear under the results.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-7@2x-2.jpg">
      <span class="fig-caption">Live search states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-9@2x-2.jpg">
      <span class="fig-caption">Live search results</span>
    </div>
  </div>

  <h3>Classic search</h3>

  <p>Classic search exists as a fall back option for when it's not possible to generate live search results inside a product or service. Classic search input follows the same styling as the live search input states. When active, the input field overlays the navigation header. Classic search results pages include filtering options, heroed ‘top results’, and listed link results with surfaced text content from the page.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-11@2x-2.jpg">
      <span class="fig-caption">Classic search inputs</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-27@2x.jpg">
      <span class="fig-caption">Classic search results</span>
    </div>
  </div>

  <h3>Sticky search</h3>

  <p>The sticky search keeps the search bar and filters column fixed in the viewport, letting users edit searchs quickly and filter their results.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-28@2x.jpg">
      <span class="fig-caption">Sticky search</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-29@2x.jpg">
      <span class="fig-caption">Sticky search</span>
    </div>
  </div>

  <h3>Mobile filter</h3>

  <p>To preserve screen real estate, the filter panel is reduced to a drop down menu on mobile screen sizes.</p>

  <p>When opened, the mobile filter follows the same styling as standard dropdown menus.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-30@2x.jpg">
      <span class="fig-caption">Closed mobile filter</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-31@2x.jpg">
      <span class="fig-caption">Expanded mobile filter</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>10 results per page</h3>

  <p>Live search should show a maximum of 10 results per page. If there are additional results, a ‘show all’ link should be used to take the user to a classic search results page.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-32@2x.jpg">
      <span class="fig-caption">Live results dropdown with ‘view all’ link</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Responsive layout structure</h3>

  <p>At 1024px wide, the right hand column content moves to the left column, beneath the filters. This left column also extents to occupy four columns, with the results column increasing to eight columns.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/search/Group-33@2x.jpg">
      <span class="fig-caption">1024px search results view</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/search/Group-34@2x.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>

<a name="develop"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<style>
  .exampleOutput .search__input {
    display: block;
    position: relative;

    padding: 0 12px;
    z-index: 1;
  }
</style>

<h3>Desktop Search</h3>

```htmlmixed
<div class="search search__input is-open">
  <div class="container">
    <div class="search__input-wrapper">
      <form class="search__box" novalidate>
        <label for="site-search" class="sr-only">Suchen</label>
        <input class="search__field" type="search" id="site-search" name="q" required autocomplete="off" placeholder="Suchen nach..."/>
        <button class="search__icon-clear" type="reset" aria-label="Eingabe löschen">
          <i class="icon icon-202-clear-circle" aria-hidden="true"></i>
        </button>
        <label for="site-search-submit" class="sr-only">Senden</label>
        <input class="sr-only" type="submit" id="site-search-submit" tabindex="-1"/>
      </form>
      <button class="search__icon-close" aria-label="Suche schliessen">
        <i class="icon icon-022-close" aria-hidden="true"></i>
      </button>
     </div>
  </div>
</div>
```

<h3>Mobile Search</h3>

```htmlmixed
<div class="search search__input is-open">
  <div class="container">
    <div class="search__input-wrapper">
      <form class="search__box" novalidate>
        <label for="site-search" class="sr-only">Suchen</label>
        <input class="search__field" type="search" id="site-search" name="q" required autocomplete="off" placeholder="Suchen nach..."/>
        <button class="search__icon-clear" type="reset" aria-label="Eingabe löschen">
          <i class="icon icon-202-clear-circle" aria-hidden="true"></i>
        </button>
        <button class="search__icon-search" type="submit" aria-label="Eingabe senden">
          <i class="icon icon-077-search" aria-hidden="true"></i>
        </button>
      </form>
     </div>
  </div>
</div>
```

<h3>Inline Search</h3>

```htmlmixed_webcomponent_sdx-search
<sdx-search
  placeholder="Search..."
  value-change-callback="console.log('Keyword: ' + arguments[0])"
  search-submit-callback="console.log('Submit: ' + arguments[0])"
/>
```

<h2>Color options</h2>

<h3>Light Color</h3>

```htmlmixed
<div class="search search__input search--light is-open">
  <div class="container">
    <div class="search__input-wrapper">
      <form class="search__box" novalidate>
        <label for="site-search" class="sr-only">Suchen</label>
        <input class="search__field" type="search" id="site-search" name="q" required autocomplete="off" placeholder="Suchen nach..."/>
        <label for="site-search-submit" class="sr-only">Senden</label>
        <input class="sr-only" type="submit" id="site-search-submit" tabindex="-1"/>
        <button class="search__icon-clear" type="reset" aria-label="Eingabe löschen">
          <i class="icon icon-202-clear-circle" aria-hidden="true"></i>
        </button>
      </form>
      <button class="search__icon-close" aria-label="Suche schliessen">
        <i class="icon icon-022-close" aria-hidden="true"></i>
      </button>
     </div>
  </div>
</div>
```

<h2>Search Live</h2>

<style>
  .exampleOutput .container {
    width: auto;
  }

  .exampleOutput .search--desktop, .exampleOutput .search--mobile {
    display: block;
    position: static;
  }

  .exampleOutput .search__live > * {
    padding-left: 12px;
    padding-right: 12px;
  }
</style>

<h3>Desktop Search</h3>

```htmlmixed
<div class="search search--desktop">
  <div class="search__input is-open">
    <div class="container">
      <div class="search__input-wrapper">
        <form class="search__box" novalidate>
          <label for="site-search" class="sr-only">Suchen</label>
          <input class="search__field" type="search" id="site-search" name="q" required autocomplete="off" placeholder="Suchen nach..."/>
          <label for="site-search-submit" class="sr-only">Senden</label>
          <input class="sr-only" type="submit" id="site-search-submit" tabindex="-1"/>
          <button class="search__icon-clear" type="reset" aria-label="Eingabe löschen">
            <i class="icon icon-202-clear-circle" aria-hidden="true"></i>
          </button>
        </form>
        <button class="search__icon-close" aria-label="Suche schliessen">
          <i class="icon icon-022-close" aria-hidden="true"></i>
        </button>
       </div>
    </div>
  </div>

  <div class="search__live is-open">
    <div class="live-suggestions js-suggestions is-open">
      <div class="container">
        <ul>
          <li><strong>iPho</strong>ne 7 Plus</li>
          <li><strong>iPho</strong>ne 6s</li>
          <li><strong>iPho</strong>ne 5s</li>
          <li><strong>iPho</strong>ne 6s Plus</li>
          <li><strong>iPho</strong>ne SE 64GB</li>
        </ul>
      </div>
    </div>
    <div class="live-footer js-footer is-open">
      <div class="container">
        <div class="row">
          <div class="col-xs">
            <a class="live-title" href="javascript:void(0);">Neu</a>
          </div>
        </div>
        <div class="row offer">
          <div class="col-xs">
            <a class="live-link" href="javascript:void(0);">
              <div class="offer__image">
                <img src="theme-build/img/samples/angebote-vivo-m.png">
              </div>
              <div class="offer__content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
              </div>
            </a>
          </div>
          <div class="col-xs">
            <a class="live-link" href="javascript:void(0);">
              <div class="offer__image">
                <img src="theme-build/img/samples/iphone_7_plus_black.png">
              </div>
              <div class="offer__content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
              </div>
            </a>
          </div>
          <div class="col-xs hidden-md-down">
            <a class="live-link" href="javascript:void(0);">
              <div class="offer__image">
                <img src="theme-build/img/samples/iphone_7_plus_black.png">
              </div>
              <div class="offer__content">
                Lorem ipsum sit amet, consectetur elit, sed eiusmod.
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

<h3>Mobile Search</h3>

```htmlmixed
<div class="search search--mobile">
  <div class="search__input is-open">
    <div class="container">
      <div class="search__input-wrapper">
        <form class="search__box" novalidate>
          <label for="site-search" class="sr-only">Suchen</label>
          <input class="search__field" type="search" id="site-search" name="q" required autocomplete="off" placeholder="Suchen nach..."/>
          <button class="search__icon-clear" type="reset" aria-label="Eingabe löschen">
            <i class="icon icon-202-clear-circle" aria-hidden="true"></i>
          </button>
          <button class="search__icon-search" type="submit" aria-label="Eingabe senden">
            <i class="icon icon-077-search" aria-hidden="true"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
  <div class="search__live is-open">
    <div class="live-suggestions js-suggestions is-open">
      <div class="container">
        <ul>
          <li><strong>iPho</strong>ne 7 Plus</li>
          <li><strong>iPho</strong>ne 6s</li>
          <li><strong>iPho</strong>ne 5s</li>
          <li><strong>iPho</strong>ne 6s Plus</li>
          <li><strong>iPho</strong>ne SE 64GB</li>
        </ul>
      </div>
    </div>
  </div>
</div>
```
*/
.search {
  z-index: 50500;
}

.search.search--mobile {
  display: block;
}

@media (min-width: 768px) {
  .search.search--mobile {
    display: none;
  }
}

.search.search--desktop {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .search.search--desktop {
    display: block;
  }
}

.search__input {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  background: #d1e6f9;
  color: #666;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.search__input .search__input-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 80px;
}

.search__input .search__box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.search__input .search__field {
  font-weight: 300;
  line-height: 32px;
  letter-spacing: -.35px;
  font-size: 24px;
  display: block;
  width: 100%;
  vertical-align: middle;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@supports (-ms-ime-align: auto) {
  .search__input .search__field {
    line-height: 0;
  }
}

.search__input .search__field::-webkit-input-placeholder {
  color: #666;
  opacity: 1;
}

.search__input .search__field::-moz-placeholder {
  color: #666;
  opacity: 1;
}

.search__input .search__field::-ms-input-placeholder {
  color: #666;
  opacity: 1;
}

.search__input .search__field::placeholder {
  color: #666;
  opacity: 1;
}

.search__input .search__field:invalid {
  -webkit-transform: translateX(-34px);
  transform: translateX(-34px);
}

.search__input .search__field:invalid ~ .search__icon-clear {
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.search__input .search__icon-clear {
  margin-right: 14px;
  z-index: 10;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
  font-size: 20px;
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.search__input .search__icon-close, .search__input .search__icon-search {
  margin-left: 14px;
  font-size: 30px;
}

.search__input.is-active, .search__input.search--light.is-active {
  background: #d1e6f9;
  color: #333;
}

.search__input.is-active .search__field, .search__input.is-active .search__field::-webkit-input-placeholder, .search__input.search--light.is-active .search__field, .search__input.search--light.is-active .search__field::-webkit-input-placeholder {
  color: #333;
  opacity: 1;
}

.search__input.is-active .search__field, .search__input.is-active .search__field::-moz-placeholder, .search__input.search--light.is-active .search__field, .search__input.search--light.is-active .search__field::-moz-placeholder {
  color: #333;
  opacity: 1;
}

.search__input.is-active .search__field, .search__input.is-active .search__field::-ms-input-placeholder, .search__input.search--light.is-active .search__field, .search__input.search--light.is-active .search__field::-ms-input-placeholder {
  color: #333;
  opacity: 1;
}

.search__input.is-active .search__field, .search__input.is-active .search__field::placeholder, .search__input.search--light.is-active .search__field, .search__input.search--light.is-active .search__field::placeholder {
  color: #333;
  opacity: 1;
}

.search__input.is-active .search__field:focus::-webkit-input-placeholder, .search__input.search--light.is-active .search__field:focus::-webkit-input-placeholder {
  color: #333;
  opacity: 1;
}

.search__input.is-active .search__field:focus::-moz-placeholder, .search__input.search--light.is-active .search__field:focus::-moz-placeholder {
  color: #333;
  opacity: 1;
}

.search__input.is-active .search__field:focus::-ms-input-placeholder, .search__input.search--light.is-active .search__field:focus::-ms-input-placeholder {
  color: #333;
  opacity: 1;
}

.search__input.is-active .search__field:focus::placeholder, .search__input.search--light.is-active .search__field:focus::placeholder {
  color: #333;
  opacity: 1;
}

@media (min-width: 768px) {
  .search__input, .search__input.search--light {
    background: #d1e6f9;
    color: #333;
  }
  .search__input .search__field, .search__input .search__field::-webkit-input-placeholder, .search__input.search--light .search__field, .search__input.search--light .search__field::-webkit-input-placeholder {
    color: #333;
    opacity: 1;
  }
  .search__input .search__field, .search__input .search__field::-moz-placeholder, .search__input.search--light .search__field, .search__input.search--light .search__field::-moz-placeholder {
    color: #333;
    opacity: 1;
  }
  .search__input .search__field, .search__input .search__field::-ms-input-placeholder, .search__input.search--light .search__field, .search__input.search--light .search__field::-ms-input-placeholder {
    color: #333;
    opacity: 1;
  }
  .search__input .search__field, .search__input .search__field::placeholder, .search__input.search--light .search__field, .search__input.search--light .search__field::placeholder {
    color: #333;
    opacity: 1;
  }
  .search__input .search__field:focus::-webkit-input-placeholder, .search__input.search--light .search__field:focus::-webkit-input-placeholder {
    color: #333;
    opacity: 1;
  }
  .search__input .search__field:focus::-moz-placeholder, .search__input.search--light .search__field:focus::-moz-placeholder {
    color: #333;
    opacity: 1;
  }
  .search__input .search__field:focus::-ms-input-placeholder, .search__input.search--light .search__field:focus::-ms-input-placeholder {
    color: #333;
    opacity: 1;
  }
  .search__input .search__field:focus::placeholder, .search__input.search--light .search__field:focus::placeholder {
    color: #333;
    opacity: 1;
  }
}

.search__input.search--dark.is-active {
  background: #1781e3;
  color: #fff;
}

.search__input.search--dark.is-active .search__field, .search__input.search--dark.is-active .search__field::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
}

.search__input.search--dark.is-active .search__field, .search__input.search--dark.is-active .search__field::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

.search__input.search--dark.is-active .search__field, .search__input.search--dark.is-active .search__field::-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

.search__input.search--dark.is-active .search__field, .search__input.search--dark.is-active .search__field::placeholder {
  color: #fff;
  opacity: 1;
}

.search__input.search--dark.is-active .search__field:focus::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
}

.search__input.search--dark.is-active .search__field:focus::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

.search__input.search--dark.is-active .search__field:focus::-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

.search__input.search--dark.is-active .search__field:focus::placeholder {
  color: #fff;
  opacity: 1;
}

@media (min-width: 768px) {
  .search__input.search--dark {
    background: #1781e3;
    color: #fff;
  }
  .search__input.search--dark .search__field, .search__input.search--dark .search__field::-webkit-input-placeholder {
    color: #fff;
    opacity: 1;
  }
  .search__input.search--dark .search__field, .search__input.search--dark .search__field::-moz-placeholder {
    color: #fff;
    opacity: 1;
  }
  .search__input.search--dark .search__field, .search__input.search--dark .search__field::-ms-input-placeholder {
    color: #fff;
    opacity: 1;
  }
  .search__input.search--dark .search__field, .search__input.search--dark .search__field::placeholder {
    color: #fff;
    opacity: 1;
  }
  .search__input.search--dark .search__field:focus::-webkit-input-placeholder {
    color: #fff;
    opacity: 1;
  }
  .search__input.search--dark .search__field:focus::-moz-placeholder {
    color: #fff;
    opacity: 1;
  }
  .search__input.search--dark .search__field:focus::-ms-input-placeholder {
    color: #fff;
    opacity: 1;
  }
  .search__input.search--dark .search__field:focus::placeholder {
    color: #fff;
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .search--desktop .search__input {
    max-height: 0;
    transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .search--desktop .search__input.is-open {
    max-height: 80px;
  }
}

.search__live {
  display: none;
  height: 0;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #e3e9ec;
}

.search__live.is-open {
  display: block;
  height: auto;
}

.search__live .live-suggestions {
  display: none;
  height: 0;
  background: #fff;
  color: #333;
}

.search__live .live-suggestions.is-open {
  display: block;
  height: auto;
}

.search__live .live-suggestions strong {
  font-weight: 400;
  color: #0083ea;
}

.search__live .live-suggestions li {
  padding: 15px 0 16px;
}

.search__live .live-suggestions li:not(:last-child) {
  border-bottom: 1px solid #e4e9ec;
}

.search__live .live-footer {
  display: none;
  height: 0;
  background: #e3e9ec;
}

.search__live .live-footer.is-open {
  display: block;
  height: auto;
}

.search__live .live-footer .container {
  padding-top: 21px;
  padding-bottom: 24px;
}

.search__live .live-footer a.live-icon, .search__live .live-footer a.live-title, .search__live .live-footer a.live-link,
.search__live .live-footer button.live-icon,
.search__live .live-footer button.live-title,
.search__live .live-footer button.live-link {
  color: #015;
}

.search__live .live-footer a.live-icon:focus, .search__live .live-footer a.live-icon:hover, .search__live .live-footer a.live-title:focus, .search__live .live-footer a.live-title:hover, .search__live .live-footer a.live-link:focus, .search__live .live-footer a.live-link:hover,
.search__live .live-footer button.live-icon:focus,
.search__live .live-footer button.live-icon:hover,
.search__live .live-footer button.live-title:focus,
.search__live .live-footer button.live-title:hover,
.search__live .live-footer button.live-link:focus,
.search__live .live-footer button.live-link:hover {
  color: #0851da;
}

.search__live .live-footer .offer {
  margin-top: 10px;
}

.search__live .live-footer .offer .offer__image {
  float: left;
  margin-right: 18px;
}

.search__live .live-footer .offer .offer__image img {
  max-width: 64px;
  max-height: 64px;
}

.search__live .live-footer .offer .offer__content {
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  display: table;
  word-wrap: normal;
}

/*doc
---
title: Footer
name: 02-components-070-footer
category: Components - Footer
---

<style>
  .cortana-content-wrapper .footer .container {
    width: auto;
  }
</style>

<p>Footers are positioned at the bottom of a page or app and feature links to the primary areas of the product. Footers usually include legal information, as well as links to the relevant social media platforms. Use footers to enable users to get back to core site pages if they reach the end of a page.</p>

<section class="live-example">
  <div class="section-inner">
    <div class="resizerExample">
      <button class="button button--primary modal-trigger" href="modalResizer"><i class="icon icon-114-computer" aria-hidden="true"></i> View Breakpoints</button>
    </div>
    <div class="modal modal-resizer" role="dialog" tabindex="-1" data-init="auto" id="modalResizer">
        <div class="modal__container">
            <div class="modal__content">
                <div class="resizer sc-resizer" init="auto" sizes="sizes">
                    <div class="resizer__header">
                       <div class="resizer__toolbar"></div>
                       <button class="modal__close modal-cancel">
                            <i class="icon icon-022-close" aria-hidden="true"></i>
                       </button>
                    </div>
                    <div class="resizer__container">
                        <div class="resizer__dimension">
                            <div class="dimension__bar"></div>
                            <div class="dimension__value"></div>
                        </div>
                        <div class="resizer__innercontainer">
                            <div class="dimension__dragbar">
                                <div class="dimension__thumb"></div>
                            </div>
                            <iframe src="./theme-build/img/design/footer/footer-2.html" scrolling="no" frameborder="0" style="min-height: 600px;"></iframe>
                        </div>
                    </div>
                </div>
                <datalist id="sizes">
                    <option value="320"><i class="icon icon-111-smartphone icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">320px</div></option>
                    <option value="480"><i class="icon icon-111-smartphone icon--s3 resizer__icon resizer__icon--rotate" aria-hidden="true"></i><div class="resizer__label">480px</div></option>
                    <option value="768"><i class="icon icon-112-tablet icon--s3 resizer__icon resizer__icon--rotate" aria-hidden="true"></i><div class="resizer__label">768px</div></option>
                    <option value="1024"><i class="icon icon-112-tablet icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1024px</div></option>
                    <option value="1280"><i class="icon icon-113-laptop icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1280px</div></option>
                    <option value="1440"><i class="icon icon-113-laptop icon--s3 resizer__icon" aria-hidden="true"></i><div class="resizer__label">1440px</div></option>
                </datalist>
            </div>
        </div>
    </div>
  </div>
</section>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Full footer</h3>

  <p>Full footer is recommended for medium and large sites or products where there are many links. This helps the user can easily navigate the site. There are two colour options for the footer. The dark version is the preferred option. Its contrast to our predominantly light look and feel means it creates a clear end point to pages. The light version, however, can be used if the dark footer feels visually incoherent with your design. The footer colour choice should be used consistently and should never change within that site or product.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-16@2x-1.jpg">
        <span class="fig-caption">Dark footer</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-21@2x.jpg">
        <span class="fig-caption">Light footer</span>
    </div>
  </div>

  <h3>Compact footer</h3>

  <p>The light version of the footer is to be used for smaller products that contain less links and information.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-22@2x.jpg">
        <span class="fig-caption">Dark compact footer</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-23@2x-1.jpg">
      <span class="fig-caption">Light compact footer</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Logo position</h3>

  <p>At breakpoints that have a mobile view the footer stacks and centres with the Swisscom logo at the top.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-24@2x-1.jpg">
      <span class="fig-caption">Collapsed dark footer on mobile</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Monochrome links</h3>

  <p>Footer text links use monochrome interactive states, differing from conventional text link and navigation link styles.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-25@2x-1.jpg">
      <span class="fig-caption">Text links within the footer</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Grouping elements</h3>

  <p>Text links are grouped into categories, with the category at the top of each column.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-26@2x-1.jpg">
      <span class="fig-caption">Grouped text links</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>List limit</h3>

  <p>Lists within the footer should have a maximum of 6 rows, any more and a ‘More...’ link should appear as the last list item.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-27@2x-2.jpg">
      <span class="fig-caption">Category list within the footer</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/footer/Group-9-Copy-2@2x.jpg">
        <span class="fig-caption">Typography full footer dark variant</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/footer/Group-13@2x.jpg">
        <span class="fig-caption">Typography full footer light variant</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/footer/Group-14@2x.jpg">
        <span class="fig-caption">Typography compact footer dark variant</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/footer/Group-15@2x-1.jpg">
        <span class="fig-caption">Typography compact footer light variant</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
   <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<h2>Color options</h2>

<p>There are two colour options for the footer. The dark grey version is the preferred option, and its contrast to our predominantly light look and feel means it provides us with a clear end point to pages. The light version, however, can be used if the dark footer feels visually incoherent in your specific use case. Footers should be colours consistently across the entire services, and should never change.</p>

<h2>Footer Compact</h2>

<style>
  .cortana-content-wrapper .footer--compact {
    padding: 0 30px;
  }
</style>

<p>Use this footer if there isn't a need for lots of links. A responsive test page for the compact footer is available at <a href="/samples/footer-compact.html">samples/footer-compact</a>.</p>

```htmlmixed
<div class="footer footer--compact">
    <div class="container">
        <a href="javascript:void(0);" class="logo" tabindex="-1">
            <span class="logo-lifeform" aria-label="Swisscom Logo"></span>
        </a>
        <ul class="nav-items">
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Contact
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Terms of use
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Feedback
                </a>
            </li>
        </ul>
    </div>
</div>
```

<h3>Dark Version</h3>

```htmlmixed
<div class="footer footer--compact footer--dark">
    <div class="container">
        <a href="javascript:void(0);" class="logo" tabindex="-1">
            <span class="logo-lifeform" aria-label="Swisscom Logo"></span>
        </a>
        <ul class="nav-items">
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Contact
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Terms of use
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Feedback
                </a>
            </li>
        </ul>
    </div>
</div>
```

<h3>Light Version</h3>

```htmlmixed
<div class="footer footer--compact footer--light">
    <div class="container">
        <a href="javascript:void(0);" class="logo" tabindex="-1">
            <span class="logo-lifeform" aria-label="Swisscom Logo"></span>
        </a>
        <ul class="nav-items">
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Contact
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Terms of use
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Feedback
                </a>
            </li>
        </ul>
    </div>
</div>
```

<h2>Footer Full</h2>

<p>Use this footer for sites that have a large site maps and require more room for links. A responsive test page for the compact footer is available at <a href="/samples/footer-full.html">samples/footer-full</a>.</p>

<h3>Dark Version</h3>
<iframe src="/samples/inline/footer-full-dark.html" height="550"></iframe>
<hr>

<h3>Light Version</h3>
<iframe src="/samples/inline/footer-full-light.html" height="550" ></iframe>
*/
.footer {
  z-index: 20000;
  overflow: hidden;
}

.footer a,
.footer button {
  margin: 0;
  padding: 0;
}

.footer .logo {
  border: 0;
}

.footer .nav-section--col-1 {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.footer .nav-section--col-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.footer .nav-section--col-3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.footer .nav-section--col-4 {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

.footer .nav-section--col-5 {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
}

.footer .nav-section--col-6 {
  -webkit-column-count: 6;
  -moz-column-count: 6;
  column-count: 6;
}

@media (max-width: 767px) {
  .footer .nav-section {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

@media (min-width: 768px) {
  .footer .nav-section {
    -webkit-column-gap: 16px;
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
  .footer .nav-section--col-md-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .footer .nav-section--col-md-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .footer .nav-section--col-md-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .footer .nav-section--col-md-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  .footer .nav-section--col-md-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
  .footer .nav-section--col-md-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }
}

@media (min-width: 1024px) {
  .footer .nav-section {
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }
  .footer .nav-section--col-lg-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .footer .nav-section--col-lg-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .footer .nav-section--col-lg-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .footer .nav-section--col-lg-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  .footer .nav-section--col-lg-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
  .footer .nav-section--col-lg-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }
}

@media (min-width: 1280px) {
  .footer .nav-section {
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }
  .footer .nav-section--col-xl-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .footer .nav-section--col-xl-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .footer .nav-section--col-xl-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .footer .nav-section--col-xl-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  .footer .nav-section--col-xl-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
  .footer .nav-section--col-xl-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }
}

@media (min-width: 1440px) {
  .footer .nav-section {
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }
  .footer .nav-section--col-ul-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .footer .nav-section--col-ul-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .footer .nav-section--col-ul-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .footer .nav-section--col-ul-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  .footer .nav-section--col-ul-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
  .footer .nav-section--col-ul-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }
}

.footer .nav-section .nav-col {
  display: table;
  width: 100%;
  overflow: hidden;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

@media (min-width: 1024px) {
  .footer .nav-section .nav-col {
    -webkit-column-break-after: column;
    page-break-after: column;
    break-after: column;
  }
}

.footer .nav-items::after {
  content: '';
  display: block;
  clear: both;
}

.footer .logo {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 31px;
  text-align: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .footer .logo {
    width: auto;
    margin-top: 22px;
    margin-left: -18px;
    float: left;
    text-align: left;
  }
}

.footer .logo .logo-lifeform {
  background-size: 3600px 40px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/lifeform-spritesheet.db5b9234.png");
  width: 40px;
  height: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  min-width: 40px;
  -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
  animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .footer .logo .logo-lifeform {
    background-image: url("../images/lifeform-spritesheet@2x.6e0a97f0.png");
  }
}

@keyframes initialAnimation {
  100% {
    background-position: -3600px;
  }
}

@keyframes repeatingAnimation {
  0% {
    background-position: 0;
  }
  80% {
    background-position: 0;
  }
  100% {
    background-position: -3600px;
  }
}

@media (min-width: 768px) {
  .footer--compact {
    height: 80px;
  }
}

.footer--compact .nav-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.footer--compact .nav-items {
  margin-top: 26px;
  margin-bottom: 49px;
  text-align: center;
}

@media (min-width: 768px) {
  .footer--compact .nav-items {
    float: right;
    margin-top: 29px;
    margin-bottom: 0;
    text-align: inherit;
  }
}

.footer--compact .nav-items .nav-item {
  margin-bottom: 22px;
  margin-right: 0;
}

.footer--compact .nav-items .nav-item:first-child {
  margin-left: 0;
}

.footer--compact .nav-items .nav-item:last-child {
  margin-right: 0;
}

@media (min-width: 768px) {
  .footer--compact .nav-items .nav-item {
    float: left;
    margin-bottom: 0;
    margin-right: 22px;
  }
}

.footer--full .nav-section {
  min-height: 100%;
}

.footer--full .nav-title {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 0;
}

.footer--full .nav-link {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.footer--full .nav-icon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 0;
  background: 0;
}

.footer--full .nav-items {
  text-align: center;
}

@media (min-width: 768px) {
  .footer--full .nav-items {
    text-align: inherit;
  }
}

.footer--full .nav-items--divider .nav-item {
  margin: 0;
}

.footer--full .nav-items--divider .nav-item:not(:first-child)::before {
  content: '|';
  position: relative;
  top: -1px;
  margin: 0;
  padding-left: 11px;
  padding-right: 11px;
  font-size: 16px;
  color: #fff;
}

@media (max-width: 1023px) {
  .footer--full .nav-section {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

.footer--full .footer__top {
  padding: 35px 0 72px;
}

@media (min-width: 0) {
  .footer--full .footer__top .nav-col > .container {
    margin-left: calc(24px - 4px);
    margin-right: calc(24px - 4px);
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
  }
}

@media (min-width: 480px) {
  .footer--full .footer__top .nav-col > .container {
    margin-left: calc(24px - 4px);
    margin-right: calc(24px - 4px);
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .footer--full .footer__top .nav-col > .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
    width: 742px;
  }
}

@media (min-width: 1024px) {
  .footer--full .footer__top .nav-col > .container {
    padding: 0;
    margin: 0;
    width: auto;
  }
}

.footer--full .footer__top .nav-items {
  margin-top: 8px;
}

.footer--full .footer__top .nav-items .nav-item {
  margin-bottom: 8px;
}

.footer--full .footer__top .nav-items .nav-item:last-child {
  margin: 0;
}

@media (max-width: 1023px) {
  .footer--full .footer__top {
    padding: 0;
  }
  .footer--full .footer__top > .container {
    padding: 0;
    margin: 0;
    width: auto;
  }
  .footer--full .footer__top .nav-col {
    padding: 22px 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  }
  .footer--full .footer__top .nav-col:last-of-type {
    border-bottom: 0;
  }
  .footer--full .footer__top .nav-items {
    text-align: inherit;
  }
}

.footer--full .footer__bottom {
  height: 100%;
  padding: 27px 0 25px;
}

@media (min-width: 768px) {
  .footer--full .footer__bottom {
    height: 128px;
    padding: 25px 0;
  }
}

.footer--full .footer__bottom .row {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .footer--full .footer__bottom .row {
    margin-bottom: 13px;
  }
}

.footer--full .footer__bottom .row:last-child {
  margin-bottom: 0;
}

.footer--full .footer__bottom .nav-items {
  display: inline-block;
}

.footer--full .footer__bottom .nav-items--divider .nav-item {
  margin: 0;
}

.footer--full .footer__bottom .nav-item {
  float: left;
  margin-right: 22px;
  text-align: center;
}

.footer--full .footer__bottom .nav-item:last-child {
  margin: 0;
}

@media (min-width: 768px) {
  .footer--full .footer__bottom .nav-item {
    text-align: left;
  }
}

.footer--full .footer__bottom .footer--left,
.footer--full .footer__bottom .footer--right {
  float: none;
  margin-top: 0;
  text-align: center;
}

.footer--full .footer__bottom .footer--social-icons {
  text-align: center;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .footer--full .footer__bottom .footer--social-icons {
    margin-bottom: 0;
  }
}

.footer--full .footer__bottom .footer--social-icons .nav-item {
  margin-right: 24px;
}

.footer--full .footer__bottom .footer--social-icons .nav-item:last-child {
  margin: 0;
}

.footer--full .footer__bottom .footer--nav {
  margin-bottom: 9px;
}

@media (min-width: 768px) {
  .footer--full .footer__bottom .footer--nav {
    margin-bottom: 0;
  }
}

.footer--full .footer__bottom .footer--copyright {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

@media (min-width: 768px) {
  .footer--full .footer__bottom .footer--copyright {
    font-weight: 400;
    line-height: 24px;
    letter-spacing: .1px;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@media (min-width: 768px) {
  .footer--full .footer__bottom .footer--left {
    float: left;
  }
  .footer--full .footer__bottom .footer--right {
    float: right;
  }
  .footer--full .footer__bottom .footer--nav {
    margin-top: 6px;
  }
}

.footer--full .nav-title, .footer--full.footer--dark .nav-title {
  color: #fff;
}

.footer--full .footer__top, .footer--full.footer--dark .footer__top {
  background: #474747;
}

.footer--full .footer__top .nav-col, .footer--full.footer--dark .footer__top .nav-col {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.footer--full .footer__top .accordion__toggle .accordion__header, .footer--full.footer--dark .footer__top .accordion__toggle .accordion__header {
  width: calc(100% - 16px - 8px);
}

.footer--full .footer__top .accordion__toggle .arrow-icon, .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon {
  position: relative;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  -webkit-transform: none;
  transform: none;
}

.footer--full .footer__top .accordion__toggle .arrow-icon::before, .footer--full .footer__top .accordion__toggle .arrow-icon::after, .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before, .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #fff;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.footer--full .footer__top .accordion__toggle .arrow-icon::before, .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before {
  left: 0;
}

.footer--full .footer__top .accordion__toggle .arrow-icon::after, .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after {
  left: 6px;
}

.footer--full .footer__top .accordion__toggle .arrow-icon::before, .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.footer--full .footer__top .accordion__toggle .arrow-icon::after, .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.footer--full .footer__top .accordion__toggle:hover .arrow-icon, .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon {
  position: relative;
}

.footer--full .footer__top .accordion__toggle:hover .arrow-icon::before, .footer--full .footer__top .accordion__toggle:hover .arrow-icon::after, .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::before, .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #1781e3;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.footer--full .footer__top .accordion__toggle:hover .arrow-icon::before, .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::before {
  left: 0;
}

.footer--full .footer__top .accordion__toggle:hover .arrow-icon::after, .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::after {
  left: 6px;
}

.footer--full .footer__top .is-open .accordion__toggle .arrow-icon::before, .footer--full.footer--dark .footer__top .is-open .accordion__toggle .arrow-icon::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.footer--full .footer__top .is-open .accordion__toggle .arrow-icon::after, .footer--full.footer--dark .footer__top .is-open .accordion__toggle .arrow-icon::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.footer--full .footer__bottom, .footer--full.footer--dark .footer__bottom {
  background: #333;
}

.footer--full.footer--light .nav-title {
  color: #333;
}

.footer--full.footer--light .nav-items--divider .nav-item::before {
  color: #333;
}

.footer--full.footer--light .footer__top {
  background: #eef3f6;
}

.footer--full.footer--light .footer__top .nav-col {
  border-bottom-color: #bbb;
}

.footer--full.footer--light .footer__top .nav-link {
  color: #666;
}

.footer--full.footer--light .footer__top .accordion__toggle .accordion__header {
  width: calc(100% - 16px - 8px);
}

.footer--full.footer--light .footer__top .accordion__toggle .arrow-icon {
  position: relative;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  -webkit-transform: none;
  transform: none;
}

.footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before, .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #333;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before {
  left: 0;
}

.footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after {
  left: 6px;
}

.footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon {
  position: relative;
}

.footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::before, .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::after {
  position: absolute;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  background: #1781e3;
  width: 10px;
  height: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::before {
  left: 0;
}

.footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::after {
  left: 6px;
}

.footer--full.footer--light .footer__top .is-open .accordion__toggle .arrow-icon::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.footer--full.footer--light .footer__top .is-open .accordion__toggle .arrow-icon::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.footer--full.footer--light .footer__bottom {
  background: #dde3e7;
}

.footer--full.footer--light .footer__bottom .footer--copyright {
  color: #3c3c3c;
}

.footer, .footer.footer--dark {
  color: #fff;
  background: #474747;
}

.footer a.nav-title, .footer a.nav-link,
.footer button.nav-title,
.footer button.nav-link, .footer.footer--dark a.nav-title, .footer.footer--dark a.nav-link,
.footer.footer--dark button.nav-title,
.footer.footer--dark button.nav-link {
  color: #fff;
}

.footer a.nav-title:hover, .footer a.nav-title:focus, .footer a.nav-link:hover, .footer a.nav-link:focus,
.footer button.nav-title:hover,
.footer button.nav-title:focus,
.footer button.nav-link:hover,
.footer button.nav-link:focus, .footer.footer--dark a.nav-title:hover, .footer.footer--dark a.nav-title:focus, .footer.footer--dark a.nav-link:hover, .footer.footer--dark a.nav-link:focus,
.footer.footer--dark button.nav-title:hover,
.footer.footer--dark button.nav-title:focus,
.footer.footer--dark button.nav-link:hover,
.footer.footer--dark button.nav-link:focus {
  border-bottom-color: #fff;
  color: #fff;
}

.footer svg .icon, .footer.footer--dark svg .icon {
  fill: #fff;
}

.footer.footer--light {
  color: #333;
  background: #eef3f6;
}

.footer.footer--light a.nav-title, .footer.footer--light a.nav-link,
.footer.footer--light button.nav-title,
.footer.footer--light button.nav-link {
  color: #333;
}

.footer.footer--light a.nav-title:hover, .footer.footer--light a.nav-title:focus, .footer.footer--light a.nav-link:hover, .footer.footer--light a.nav-link:focus,
.footer.footer--light button.nav-title:hover,
.footer.footer--light button.nav-title:focus,
.footer.footer--light button.nav-link:hover,
.footer.footer--light button.nav-link:focus {
  border-bottom-color: #333;
  color: #333;
}

.footer.footer--light svg .icon {
  fill: #333;
}

.footer--left {
  float: left;
}

.footer--right {
  float: right;
}

.footer .text-sm {
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .1px;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*doc
---
title: Commenting
name: 02-components-055-commenting
category: Components - Commenting
---

<p>Commenting allows users to add comments to articles and posts. The commenting pattern follows a simple system of indentation for connected comments. The avatar, name and title of the contributor are all visible, along with basic functionality, for example like and follow.</p>

<div class="comments">
  <div class="comments__input">
    <div class="avatar">
      <img class="avatar__image" src="theme-build/img/samples/avatar.png" />
    </div>
    <div class="input-wrapper">
      <form>
        <div class="input-field input-multiline" data-init="auto">
          <textarea id="multiline-1" placeholder="Leave a comment" data-min-rows="4" data-max-rows="10"></textarea>
        </div>
        <button class="button button--primary disabled is-hidden">
          Post
        </button>
      </form>
    </div>
  </div>
  <div class="comments__feed">
    <div class="comment">
      <div class="comment__wrapper">
        <div class="comment__header">
          <div class="avatar">
            <img class="avatar__image" src="theme-build/img/samples/avatar.png" />
          </div>
          <div class="author">
            <button class="link author__title">Robert Schmidt</button>
            <span class="author__subtitle">Deputy Director of Communication</span>
          </div>
          <div class="meta">
            <button class="link">Follow</button>
          </div>
        </div>
        <div class="comment__body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="comment__footer">
          <button class="link">
            <i class="icon icon-068-reply-message-2"></i>
            Reply
          </button>
          <button class="link">
            Like
          </button>
          <div class="time">
            25 minutes ago
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<a name="design" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Designers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
      <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<div class="content-design">
  <h2>Variations</h2>

  <h3>Commenting</h3>

  <p>The commenting functionality is position at the bottom of editorial or blog content. It features the user avatar, name and titles to help identify who is commenting, as well as a time stamp, reply and like functionality. Where applicable, commenting can also feature a follow button.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-9@2x-3.jpg">
        <span class="fig-caption">Comment and input field on light</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-10@2x-3.jpg">
        <span class="fig-caption">Comment and input field on dark</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-11@2x-5.jpg">
        <span class="fig-caption">Mobile comment and input field on light</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-13@2x-1.jpg">
        <span class="fig-caption">Mobile comment and input field on dark Comment feeds</span>
    </div>
  </div>

  <h3>Comment feeds</h3>

  <p>When showing lists of comments, they’re stacked vertically, and ordered by date, displaying the newest comments last. Replies are conneted to the original comment by placing them directly below, and indenting them by a single column.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-14@2x-1.jpg">
        <span class="fig-caption">Comment feed on light</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-16@2x-2.jpg">
        <span class="fig-caption">Comment feed on dark</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-17@2x-1.jpg">
        <span class="fig-caption">Comment feed on mobile on light</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-18@2x-1.jpg">
        <span class="fig-caption">Comment feed on mobile on dark</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Indentation on desktop</h3>

  <p>Replies within comment threads are displayed by indenting one column across from the original comment. This creates a clear visual link between the comments. Indentation on desktop is limited to two columns to preserve line length. The third reply would only have a two column indent.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/comment-indentation@2x.jpg">
      <span class="fig-caption">Comment indentation</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Indentation on mobile</h3>

  <p>Indentation on mobile is limited to just one column, regardless of the number of replies. This is due to the restricted width of mobile.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/content-indentation-2@2x.jpg">
      <span class="fig-caption">Comment indentation</span>
      </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Comment input field</h3>

  <p>Comment input fields have a different behaviour to conventional input fields. The follow the same type specificiations and colour treatment, but their scale changes over the course of the interaction. When the user first clicks into the field, it automatically grows to accomodate four lines of text, and an inactive call to action appears below the field. Once the user starts to input text into the field the call to action becomes active. As more text is input into the field, it will grow to accomodate an additional line, and continue to grow as required, with no limit.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-21@2x-1.jpg">
        <span class="fig-caption">Static comment field</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-22@2x-1.jpg">
        <span class="fig-caption">Active comment field with no input</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/comment/Group-23@2x-2.jpg">
        <span class="fig-caption">Active comment field with input and active post button</span>
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/comment/Group-24@2x-1.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/comment/Group-25@2x-2.jpg">
        <span class="fig-caption">Dark variant</span>
      </div>
  </div>
</div>

<a name="develop" tabindex="-1"></a>

<div class="row sc-navy cortana-navigation-sections padding-v-2">
  <div class="col-xs-7 col-lg-9">Developers section</div>
  <div class="col-xs-5 col-lg-3">
    <ul class="list icon top single-line">
        <li><a href="#top">Back to top</a></li>
    </ul>
  </div>
</div>

<p>Commenting allows users to add comments to articles and posts. The commenting pattern follows a simple system of indentation for connected comments. The avatar, name and title of the contributor are all visible, along with basic functionality, for example like and follow.</p>

<h3>Comment sample</h3>

<p>A responsive test page for the comment pattern is available at <a href="/samples/comment.html">samples/comment</a>.</p>

<h2>Variations</h2>

<h3>Commenting</h3>

<p>The commenting functionality is position at the bottom of editorial or blog content. It features the user avatar, name and titles to help identify who is commenting, as well as a time stamp, reply and like functionality. Where applicable, commenting can also feature a follow button.</p>

<script>
  function addEvents(input) {
    var text = input.querySelector("textarea");
    var button = input.querySelector("button");

    if (text) {
      text.addEventListener("focus", function(e) {
        button.classList.remove("is-hidden");
      });

      text.addEventListener("blur", function(e) {
        if (text.value === "" ) {
          button.classList.add("is-hidden");
        }
      });

      text.addEventListener("input", function(e) {
        if (text.value != "") {
          button.classList.remove("disabled");
        } else {
          button.classList.add("disabled");
        }
      });
    }
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    var inputs = document.querySelectorAll(".comments__input");
    for (var i = 0; i < inputs.length; i++) {
      addEvents(inputs[i]);
    }
  });
</script>

```htmlmixed
<div class="comments">
  <div class="comments__input">
    <div class="avatar">
      <img class="avatar__image" src="theme-build/img/samples/avatar.png" />
    </div>
    <div class="input-wrapper">
      <form>
        <div class="input-field input-field--multiline" data-init="auto">
          <textarea id="multiline-1" placeholder="Leave a comment" data-min-rows="4" data-max-rows="10"></textarea>
        </div>
        <button class="button button--primary disabled is-hidden">
          Post
        </button>
      </form>
    </div>
  </div>
  <div class="comments__feed">
    <div class="comment">
      <div class="comment__wrapper">
        <div class="comment__header">
          <div class="avatar">
            <img class="avatar__image" src="theme-build/img/samples/avatar.png" />
          </div>
          <div class="author">
            <button class="link author__title">Robert Schmidt</button>
            <span class="author__subtitle">Deputy Director of Communication</span>
          </div>
          <div class="meta">
            <button class="link">Follow</button>
          </div>
        </div>
        <div class="comment__body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="comment__footer">
          <button class="link">
            <i class="icon icon-068-reply-message-2"></i>
            Reply
          </button>
          <button class="link">
            Like
          </button>
          <div class="time">
            25 minutes ago
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

<h3>Dark background</h3>

```htmlmixed
<div class="bg bg--dark">
  <div class="comments">
    <div class="comments__input">
      <div class="avatar">
        <img class="avatar__image" src="theme-build/img/samples/avatar.png" />
      </div>
      <div class="input-wrapper">
        <form>
          <div class="input-field input-field--multiline" data-init="auto">
            <textarea id="multiline-1" placeholder="Leave a comment" data-min-rows="4" data-max-rows="10"></textarea>
          </div>
          <button class="button button--primary disabled is-hidden">
            Post
          </button>
        </form>
      </div>
    </div>
    <div class="comments__feed">
      <div class="comment">
        <div class="comment__wrapper">
          <div class="comment__header">
            <div class="avatar">
              <img class="avatar__image" src="theme-build/img/samples/avatar.png" />
            </div>
            <div class="author">
              <button class="link author__title">Robert Schmidt</button>
              <span class="author__subtitle">Deputy Director of Communication</span>
            </div>
            <div class="meta">
              <button class="link">Follow</button>
            </div>
          </div>
          <div class="comment__body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
          <div class="comment__footer">
            <button class="link">
              <i class="icon icon-068-reply-message-2"></i>
              Reply
            </button>
            <button class="link">
              Like
            </button>
            <div class="time">
              25 minutes ago
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

<h3>Comment feeds</h3>

<p>When showing lists of comments, they’re stacked vertically, and ordered by date, displaying the newest comments last. Replies are conneted to the original comment by placing them directly below, and indenting them by a single column.</p>

```htmlmixed
<div class="comments">
  <div class="comments__feed">
    <div class="comment">
      <div class="comment__wrapper">
        <div class="comment__header">
          <div class="avatar">
            <img class="avatar__image" src="theme-build/img/samples/avatar.png" />
          </div>
          <div class="author">
            <button class="link author__title">Robert Schmidt</button>
            <span class="author__subtitle">Deputy Director of Communication</span>
          </div>
          <div class="meta">
            <button class="link">Follow</button>
          </div>
        </div>
        <div class="comment__body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="comment__footer">
          <button class="link">
            <i class="icon icon-068-reply-message-2"></i>
            Reply
          </button>
          <button class="link">
            Like
          </button>
          <div class="time">
            25 minutes ago
          </div>
        </div>
      </div>

      <div class="comment">
        <div class="comment__wrapper">
          <div class="comment__header">
            <div class="avatar">
              <img class="avatar__image" src="theme-build/img/samples/avatar2.png" />
            </div>
            <div class="author">
              <button class="link author__title">Tobias Herrmann</button>
              <span class="author__subtitle">Software Developer</span>
            </div>
            <div class="meta">
              <button class="link">Follow</button>
            </div>
          </div>
          <div class="comment__body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
          <div class="comment__footer">
            <button class="link">
              <i class="icon icon-068-reply-message-2"></i>
              Reply
            </button>
            <button class="link">
              Like
            </button>
            <div class="time">
              25 minutes ago
            </div>
          </div>
        </div>

        <div class="comment">
          <div class="comment__wrapper">
            <div class="comment__header">
              <div class="avatar">
                <img class="avatar__image" src="theme-build/img/samples/avatar3.png" />
              </div>
              <div class="author">
                <button class="link author__title">Michael Höhn</button>
                <span class="author__subtitle">Software Developer</span>
              </div>
              <div class="meta">
                <button class="link">Follow</button>
              </div>
            </div>
            <div class="comment__body">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
            <div class="comment__footer">
              <button class="link">
                <i class="icon icon-068-reply-message-2"></i>
                Reply
              </button>
              <button class="link">
                Like
              </button>
              <div class="time">
                25 minutes ago
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

<h3>Dark background</h3>

```htmlmixed
<div class="bg bg--dark">
  <div class="comments">
    <div class="comments__feed">
      <div class="comment">
        <div class="comment__wrapper">
          <div class="comment__header">
            <div class="avatar">
              <img class="avatar__image" src="theme-build/img/samples/avatar.png" />
            </div>
            <div class="author">
              <button class="link author__title">Robert Schmidt</button>
              <span class="author__subtitle">Deputy Director of Communication</span>
            </div>
            <div class="meta">
              <button class="link">Follow</button>
            </div>
          </div>
          <div class="comment__body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
          <div class="comment__footer">
            <button class="link">
              <i class="icon icon-068-reply-message-2"></i>
              Reply
            </button>
            <button class="link">
              Like
            </button>
            <div class="time">
              25 minutes ago
            </div>
          </div>
        </div>

        <div class="comment">
          <div class="comment__wrapper">
            <div class="comment__header">
              <div class="avatar">
                <img class="avatar__image" src="theme-build/img/samples/avatar2.png" />
              </div>
              <div class="author">
                <button class="link author__title">Tobias Herrmann</button>
                <span class="author__subtitle">Software Developer</span>
              </div>
              <div class="meta">
                <button class="link">Follow</button>
              </div>
            </div>
            <div class="comment__body">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
            <div class="comment__footer">
              <button class="link">
                <i class="icon icon-068-reply-message-2"></i>
                Reply
              </button>
              <button class="link">
                Like
              </button>
              <div class="time">
                25 minutes ago
              </div>
            </div>
          </div>

          <div class="comment">
            <div class="comment__wrapper">
              <div class="comment__header">
                <div class="avatar">
                  <img class="avatar__image" src="theme-build/img/samples/avatar3.png" />
                </div>
                <div class="author">
                  <button class="link author__title">Michael Höhn</button>
                  <span class="author__subtitle">Software Developer</span>
                </div>
                <div class="meta">
                  <button class="link">Follow</button>
                </div>
              </div>
              <div class="comment__body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
              <div class="comment__footer">
                <button class="link">
                  <i class="icon icon-068-reply-message-2"></i>
                  Reply
                </button>
                <button class="link">
                  Like
                </button>
                <div class="time">
                  25 minutes ago
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
*/
.comments__input {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 0;
}

.comments__input .input-wrapper {
  width: 100%;
}

.comments__input .input-wrapper .button {
  float: right;
  margin-bottom: 24px;
}

.comments__input .input-wrapper .button.disabled {
  border-color: rgba(207, 213, 217, 0.4);
  background-color: rgba(207, 213, 217, 0.4);
  color: rgba(51, 51, 51, 0.4);
}

@media (max-width: 767px) {
  .comments__input .input-wrapper .button {
    display: none;
  }
}

.comments__input .avatar {
  margin-right: 18px;
  margin-top: 5px;
}

@media (max-width: 767px) {
  .comments__input .avatar {
    display: none;
  }
}

.comments__input .avatar .avatar__image {
  width: 41px;
  height: 41px;
  border-radius: 50%;
}

.comments__input .input-multiline,
.comments__input .input-field--multiline {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  margin-bottom: 24px;
}

.comments__input .input-multiline textarea,
.comments__input .input-field--multiline textarea {
  margin-top: 0 !important;
}

.comments__input .is-hidden {
  display: none;
}

.comments__feed {
  margin-top: 1px;
}

.comment {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
}

@media (min-width: 0) {
  .comment > .comment {
    padding-left: calc((98vw - 48px) / 12);
  }
}

@media (min-width: 480px) {
  .comment > .comment {
    padding-left: 36.33333px;
  }
}

@media (min-width: 768px) {
  .comment > .comment {
    padding-left: 61.83333px;
  }
}

@media (min-width: 1024px) {
  .comment > .comment {
    padding-left: 80.33333px;
  }
}

@media (min-width: 1280px) {
  .comment > .comment {
    padding-left: 102px;
  }
}

@media (min-width: 1440px) {
  .comment > .comment {
    padding-left: 115px;
  }
}

.comment > .comment > .comment {
  padding-left: 0;
}

@media (min-width: 768px) and (min-width: 0) {
  .comment > .comment > .comment {
    padding-left: calc((98vw - 48px) / 12);
  }
}

@media (min-width: 768px) and (min-width: 480px) {
  .comment > .comment > .comment {
    padding-left: 36.33333px;
  }
}

@media (min-width: 768px) and (min-width: 768px) {
  .comment > .comment > .comment {
    padding-left: 61.83333px;
  }
}

@media (min-width: 768px) and (min-width: 1024px) {
  .comment > .comment > .comment {
    padding-left: 80.33333px;
  }
}

@media (min-width: 768px) and (min-width: 1280px) {
  .comment > .comment > .comment {
    padding-left: 102px;
  }
}

@media (min-width: 768px) and (min-width: 1440px) {
  .comment > .comment > .comment {
    padding-left: 115px;
  }
}

.comment > .comment > .comment .comment {
  padding-left: 0;
}

.comment__wrapper {
  margin-top: -1px;
  padding: 13px 0 16px;
  border-top: 1px solid #e4e9ec;
  border-bottom: 1px solid #e4e9ec;
}

.comment__header {
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8px;
}

.comment__header .author {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
}

.comment__header .author__title, .comment__header .author__subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}

.comment__header .meta {
  margin-left: 18px;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

@media (max-width: 767px) {
  .comment__header .meta {
    display: none;
  }
}

.comment__body {
  margin-bottom: 7px;
}

.comment__footer .icon {
  bottom: -1px;
  font-size: 20px;
}

.comment__footer .time {
  line-height: 24px;
  letter-spacing: .1px;
  font-size: 14px;
  float: right;
  margin-top: 2px;
  opacity: .5;
}

.comment .link, .comment .link:hover, .comment .link:focus {
  border: 0;
}

.comment .avatar {
  margin-right: 18px;
  margin-top: 3px;
}

.comment .avatar .avatar__image {
  width: 41px;
  height: 41px;
  border-radius: 50%;
}

.bg--dark .comments__input .input-wrapper .button.disabled {
  background-color: transparent;
  color: rgba(207, 213, 217, 0.4);
}

.bg--dark .comment__wrapper {
  border-top: 1px solid #8088aa;
  border-bottom: 1px solid #8088aa;
}

.bg--dark .comment .link {
  border: 0;
  color: #1781e3;
}

.bg--dark .comment .link:hover, .bg--dark .comment .link:focus {
  border: 0;
  color: #0851da;
}

/*doc
---
title: Clearfix
name: 05-utilities-clearfix-01
category: Utilities - Clearfix
---

<p>Easily clear floats by adding <code>.clearfix</code> to the parent element. Can also be used as a mixin.</p>

```htmlmixed
<div class="clearfix">...</div>
```

```css
// Usage as a mixin
.element {
  @include clearfix;
}
```

*/
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/*doc
---
title: Margin
name: 05-utilities-margin-01
category: Utilities - Margin
---

<p>Apply SDX conform margins to an element. The following margin options are available:</p>

<p>Margin on all 4 sides of the element:</p>

<ul class="list">
  <li>.margin-0</li>
  <li>.margin-1</li>
  <li>.margin-2</li>
  <li>.margin-3</li>
  <li>.margin-4</li>
</ul>

<p>Margin on the left and right side of the element:</p>

<ul class="list">
  <li>.margin-h-0</li>
  <li>.margin-h-1</li>
  <li>.margin-h-2</li>
  <li>.margin-h-3</li>
  <li>.margin-h-4</li>
</ul>

<p>Margin on the top and bottom side of the element:</p>

<ul class="list">
  <li>.margin-v-0</li>
  <li>.margin-v-1</li>
  <li>.margin-v-2</li>
  <li>.margin-v-3</li>
  <li>.margin-v-4</li>
</ul>

<p>Margin on the top of the element:</p>

<ul class="list">
  <li>.margin-top-0</li>
  <li>.margin-top-1</li>
  <li>.margin-top-2</li>
  <li>.margin-top-3</li>
  <li>.margin-top-4</li>
</ul>

<p>Margin on the bottom the element:</p>

<ul class="list">
  <li>.margin-bottom-0</li>
  <li>.margin-bottom-1</li>
  <li>.margin-bottom-2</li>
  <li>.margin-bottom-3</li>
  <li>.margin-bottom-4</li>
</ul>

*/
.margin-0 {
  margin: 0;
}

.margin-1 {
  margin: 8px;
}

.margin-2 {
  margin: 16px;
}

.margin-3 {
  margin: 24px;
}

.margin-4 {
  margin: 32px;
}

.margin-h-0 {
  margin-left: 0;
  margin-right: 0;
}

.margin-h-1 {
  margin-left: 8px;
  margin-right: 8px;
}

.margin-h-2 {
  margin-left: 16px;
  margin-right: 16px;
}

.margin-h-3 {
  margin-left: 24px;
  margin-right: 24px;
}

.margin-h-4 {
  margin-left: 32px;
  margin-right: 32px;
}

.margin-v-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.margin-v-1 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.margin-v-2 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.margin-v-3 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.margin-v-4 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.margin-top-1 {
  margin-top: 8px;
}

.margin-top-2 {
  margin-top: 16px;
}

.margin-top-3 {
  margin-top: 24px;
}

.margin-top-4 {
  margin-top: 32px;
}

.margin-bottom-1 {
  margin-bottom: 8px;
}

.margin-bottom-2 {
  margin-bottom: 16px;
}

.margin-bottom-3 {
  margin-bottom: 24px;
}

.margin-bottom-4 {
  margin-bottom: 32px;
}

/*doc
---
title: Padding
name: 05-utilities-padding-01
category: Utilities - Padding
---

<p>Apply SDX conform paddings to an element. The following padding options are available:</p>

<p>Padding on all 4 sides of the element:</p>

<ul class="list">
  <li>.padding-0</li>
  <li>.padding-1</li>
  <li>.padding-2</li>
  <li>.padding-3</li>
  <li>.padding-4</li>
</ul>

<p>Padding on the left and right side of the element:</p>

<ul class="list">
  <li>.padding-h-0</li>
  <li>.padding-h-1</li>
  <li>.padding-h-2</li>
  <li>.padding-h-3</li>
  <li>.padding-h-4</li>
</ul>

<p>Padding on the top and bottom side of the element:

<ul class="list">
  <li>.padding-v-0</li>
  <li>.padding-v-1</li>
  <li>.padding-v-2</li>
  <li>.padding-v-3</li>
  <li>.padding-v-4</li>
</ul>

<p>Padding on the top of the element:</p>

<ul class="list">
  <li>.padding-top-0</li>
  <li>.padding-top-1</li>
  <li>.padding-top-2</li>
  <li>.padding-top-3</li>
  <li>.padding-top-4</li>
</ul>

<p>Padding on the bottom the element:</p>

<ul class="list">
  <li>.padding-bottom-0</li>
  <li>.padding-bottom-1</li>
  <li>.padding-bottom-2</li>
  <li>.padding-bottom-3</li>
  <li>.padding-bottom-4</li>
</ul>

*/
.padding-0 {
  padding: 0;
}

.padding-1 {
  padding: 8px;
}

.padding-2 {
  padding: 16px;
}

.padding-3 {
  padding: 24px;
}

.padding-4 {
  padding: 32px;
}

.padding-h-0 {
  padding-left: 0;
  padding-right: 0;
}

.padding-h-1 {
  padding-left: 8px;
  padding-right: 8px;
}

.padding-h-2 {
  padding-left: 16px;
  padding-right: 16px;
}

.padding-h-3 {
  padding-left: 24px;
  padding-right: 24px;
}

.padding-h-4 {
  padding-left: 32px;
  padding-right: 32px;
}

.padding-v-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.padding-v-1 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.padding-v-2 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.padding-v-3 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.padding-v-4 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.padding-top-1 {
  padding-top: 8px;
}

.padding-top-2 {
  padding-top: 16px;
}

.padding-top-3 {
  padding-top: 24px;
}

.padding-top-4 {
  padding-top: 32px;
}

.padding-bottom-1 {
  padding-bottom: 8px;
}

.padding-bottom-2 {
  padding-bottom: 16px;
}

.padding-bottom-3 {
  padding-bottom: 24px;
}

.padding-bottom-4 {
  padding-bottom: 32px;
}

.align-left {
  float: left !important;
}

.align-right {
  float: right !important;
}

.center-block {
  display: block;
  float: none;
  margin-right: auto;
  margin-left: auto;
}

.center-vertical {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media only screen and (max-width: 767px) {
  .full-width--mobile-only {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/*doc
---
title: Screenreaders
name: 05-utilities-screenreaders-01
category: Utilities - Screenreaders
---

<p>Hide an element to all devices except screen readers with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.</p>

```htmlmixed
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
```

```css
// Usage as a mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}
```

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

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/*doc
---
title: Text
name: 05-utilities-text-01
category: Utilities - Text
---

<h3>Text alignment</h3>

<p>Easily realign text to components with text alignment classes.</p>

```htmlmixed
<p class="text-align-left">Left aligned text on all viewport sizes.</p>
<p class="text-align-center">Center aligned text on all viewport sizes.</p>
<p class="text-align-right">Right aligned text on all viewport sizes.</p>
<p class="text-align-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
```

<h3>Text transformation</h3>

<p>Transform text in components with text capitalization classes.</p>

<p>Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.</p>

```htmlmixed
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">capiTaliZed text.</p>
```

<h3>Text truncate</h3>

<p>Trunctate text in components.</p>

```htmlmixed
<p class="text-truncate">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

*/
.text-align-left {
  text-align: left !important;
}

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

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

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

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*doc
---
title: Visibility
name: 06-utilities-visibility-01
category: Utilities - Visibility
---

<h3>Invisible content</h3>

<p>The <code>.invisible</code> and <code>.visible</code> class can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.</p>

```htmlmixed
<p class="invisible">not visible</p>
<p class="visible">visible</p>
```

<h3>Responsive visibility</h3>

<p>For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.</p>

<ul class="list">
  <li>
    The <code>.hidden-*-up</code> classes hide the element when the viewport is at the given breakpoint or wider. For example, <code>.hidden-md-up</code> hides an element on medium, large, and extra-large viewports.
  </li>
  <li>
    The <code>.hidden-*-down</code> classes hide the element when the viewport is at the given breakpoint or smaller. For example, <code>.hidden-md-down</code> hides an element on extra-small, small, and medium viewports.
  </li>
  <li>
    You can combine one <code>.hidden-*-up</code> class with one <code>.hidden-*-down</code> class to show an element only on a given interval of screen sizes. For example, <code>.hidden-sm-down.hidden-xl-up</code> shows the element only on medium and large viewports. Using multiple <code>.hidden-*-up</code> classes or multiple <code>.hidden-*-down</code> classes is redundant and pointless.
  </li>
</ul>

<p>If you want to go for specific devices (phone, tablet or desktop) use the device specific classes instead of the breakpoint specific classes:</p>

<ul class="list">
  <li>
    Phone: <code>.hidden-phone-up</code> or <code>.hidden-phone-down</code>
  </li>
  <li>
    Tablet: <code>.hidden-tablet-up</code> or <code>.hidden-tablet-down</code>
  </li>
  <li>
    Desktop: <code>.hidden-desktop-up</code> or <code>.hidden-desktop-down</code>
  </li>
</ul>

*/
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.hide,
.hidden {
  display: none !important;
}

.show {
  display: block !important;
}

@media (min-width: 0) {
  .hidden-xs-up {
    display: none !important;
  }
}

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

@media (min-width: 0) {
  .visible-xs-up {
    display: block !important;
  }
}

@media (min-width: 480px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 480px) {
  .visible-sm-up {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .visible-md-up {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .visible-lg-up {
    display: block !important;
  }
}

@media (min-width: 1280px) {
  .hidden-xl-up {
    display: none !important;
  }
}

@media (max-width: 1439px) {
  .hidden-xl-down {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .visible-xl-up {
    display: block !important;
  }
}

@media (min-width: 1440px) {
  .hidden-ul-up {
    display: none !important;
  }
}

.hidden-ul-down {
  display: none !important;
}

@media (min-width: 1440px) {
  .visible-ul-up {
    display: block !important;
  }
}

@media (min-width: 0) {
  .hidden-phone-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-phone-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-tablet-up {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .hidden-tablet-down {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hidden-desktop-up {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .hidden-desktop-down {
    display: none !important;
  }
}

@media (min-width: 0) {
  .visible-phone-up {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .visible-tablet-up {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .visible-desktop-up {
    display: block !important;
  }
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fade-in-from-none {
  0% {
    display: none;
    opacity: 0;
  }
  .001% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@keyframes fade-in-from-none {
  0% {
    display: none;
    opacity: 0;
  }
  .001% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@-webkit-keyframes fade-out-to-none {
  0% {
    display: block;
    opacity: 1;
  }
  99.999% {
    display: block;
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

@keyframes fade-out-to-none {
  0% {
    display: block;
    opacity: 1;
  }
  99.999% {
    display: block;
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}
