@charset "UTF-8";
/*!
* SDX Library v1.25.0
*/
.sdx-container {
/*! 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.
*/
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
/**
* Add the correct display in IE 9-.
*/
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
/**
* Add the correct margin in IE 8.
*/
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
/**
* Add the correct display in IE.
*/
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
/**
* Add the correct font style in Android 4.3-.
*/
/**
* Add the correct background and color in IE 9-.
*/
/**
* Add the correct font size in all browsers.
*/
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
/**
* Add the correct display in iOS 4-7.
*/
/**
* Remove the border on images inside links in IE 10-.
*/
/**
* Hide the overflow in IE.
*/
/* 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
* ` ` 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.
*/
/**
* Show the overflow in IE.
*/
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
/**
* 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.
*/
/**
* Show the overflow in Edge.
*/
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
/**
* 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.
*/
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
/**
* Remove the default vertical scrollbar in IE.
*/
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE, and Firefox.
*/
/*
* Add the correct display in all browsers.
*/
/*
* Add the correct display in IE 9-.
*/
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
/**
* Add the correct display in IE.
*/
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
}
.sdx-container html {
font-family: sans-serif;
/* 1 */
line-height: 1.15;
/* 2 */
-ms-text-size-adjust: 100%;
/* 3 */
-webkit-text-size-adjust: 100%;
/* 3 */
}
.sdx-container body {
margin: 0;
}
.sdx-container article,
.sdx-container aside,
.sdx-container footer,
.sdx-container header,
.sdx-container nav,
.sdx-container section {
display: block;
}
.sdx-container figcaption,
.sdx-container figure {
display: block;
}
.sdx-container figure {
margin: 1em 40px;
}
.sdx-container hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
.sdx-container main {
display: block;
}
.sdx-container code,
.sdx-container kbd,
.sdx-container samp, .sdx-container pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
.sdx-container a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
.sdx-container a:active,
.sdx-container a:hover {
outline-width: 0;
}
.sdx-container abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
.sdx-container b,
.sdx-container strong {
font-weight: inherit;
}
.sdx-container b,
.sdx-container strong {
font-weight: bolder;
}
.sdx-container dfn {
font-style: italic;
}
.sdx-container mark {
background-color: #ff0;
color: #000;
}
.sdx-container small {
font-size: 80%;
}
.sdx-container sub,
.sdx-container sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.sdx-container sub {
bottom: -0.25em;
}
.sdx-container sup {
top: -0.5em;
}
.sdx-container audio,
.sdx-container video {
display: inline-block;
}
.sdx-container audio:not([controls]) {
display: none;
height: 0;
}
.sdx-container img {
border-style: none;
}
.sdx-container svg:not(:root) {
overflow: hidden;
}
.sdx-container button,
.sdx-container input,
.sdx-container optgroup,
.sdx-container select,
.sdx-container textarea {
line-height: 1.15;
/* 1 */
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
margin: 0;
/* 2 */
}
.sdx-container button {
overflow: visible;
}
.sdx-container button,
.sdx-container select {
/* 1 */
text-transform: none;
}
.sdx-container button,
.sdx-container html [type=button],
.sdx-container [type=reset],
.sdx-container [type=submit] {
-webkit-appearance: button;
/* 2 */
}
.sdx-container button,
.sdx-container [type=button],
.sdx-container [type=reset],
.sdx-container [type=submit] {
/**
* Remove the inner border and padding in Firefox.
*/
/**
* Restore the focus styles unset by the previous rule.
*/
}
.sdx-container button::-moz-focus-inner,
.sdx-container [type=button]::-moz-focus-inner,
.sdx-container [type=reset]::-moz-focus-inner,
.sdx-container [type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
.sdx-container button:-moz-focusring,
.sdx-container [type=button]:-moz-focusring,
.sdx-container [type=reset]:-moz-focusring,
.sdx-container [type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
.sdx-container input {
overflow: visible;
}
.sdx-container input[type=checkbox],
.sdx-container input[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
.sdx-container input[type=number]::-webkit-inner-spin-button,
.sdx-container input[type=number]::-webkit-outer-spin-button {
height: auto;
}
.sdx-container input[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
}
.sdx-container input[type=search]::-webkit-search-cancel-button, .sdx-container input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
.sdx-container input[type=file]::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
.sdx-container fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
.sdx-container legend {
box-sizing: border-box;
/* 1 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
color: inherit;
/* 2 */
white-space: normal;
/* 1 */
}
.sdx-container progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
.sdx-container textarea {
overflow: auto;
}
.sdx-container details {
display: block;
}
.sdx-container summary {
display: list-item;
}
.sdx-container menu {
display: block;
}
.sdx-container canvas {
display: inline-block;
}
.sdx-container template {
display: none;
}
.sdx-container [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_.eot") format("eot"), url("../fonts/TheSans/TheSansB_200_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_200_.woff") format("woff"), url("../fonts/TheSans/TheSansB_200_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_200_.svg#TheSansB_200_") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 300;
font-style: normal;
src: url("../fonts/TheSans/TheSansB_300_.eot") format("eot"), url("../fonts/TheSans/TheSansB_300_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_300_.woff") format("woff"), url("../fonts/TheSans/TheSansB_300_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_300_.svg#TheSansB_300_") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 400;
font-style: normal;
src: url("../fonts/TheSans/TheSansB_400_.eot") format("eot"), url("../fonts/TheSans/TheSansB_400_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_400_.woff") format("woff"), url("../fonts/TheSans/TheSansB_400_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_400_.svg#TheSansB_400_") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 500;
font-style: normal;
src: url("../fonts/TheSans/TheSansB_500_.eot") format("eot"), url("../fonts/TheSans/TheSansB_500_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_500_.woff") format("woff"), url("../fonts/TheSans/TheSansB_500_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_500_.svg#TheSansB_500_") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 600;
font-style: normal;
src: url("../fonts/TheSans/TheSansB_600_.eot") format("eot"), url("../fonts/TheSans/TheSansB_600_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_600_.woff") format("woff"), url("../fonts/TheSans/TheSansB_600_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_600_.svg#TheSansB_600_") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 700;
font-style: normal;
src: url("../fonts/TheSans/TheSansB_700_.eot") format("eot"), url("../fonts/TheSans/TheSansB_700_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_700_.woff") format("woff"), url("../fonts/TheSans/TheSansB_700_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_700_.svg#TheSansB_700_") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 800;
font-style: normal;
src: url("../fonts/TheSans/TheSansB_800_.eot") format("eot"), url("../fonts/TheSans/TheSansB_800_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_800_.woff") format("woff"), url("../fonts/TheSans/TheSansB_800_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_800_.svg#TheSansB_800_") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 900;
font-style: normal;
src: url("../fonts/TheSans/TheSansB_900_.eot") format("eot"), url("../fonts/TheSans/TheSansB_900_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_900_.woff") format("woff"), url("../fonts/TheSans/TheSansB_900_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_900_.svg#TheSansB_900_") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 200;
font-style: italic;
src: url("../fonts/TheSans/TheSansB_200i.eot") format("eot"), url("../fonts/TheSans/TheSansB_200i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_200i.woff") format("woff"), url("../fonts/TheSans/TheSansB_200i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_200i.svg#TheSansB_200i") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 300;
font-style: italic;
src: url("../fonts/TheSans/TheSansB_300i.eot") format("eot"), url("../fonts/TheSans/TheSansB_300i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_300i.woff") format("woff"), url("../fonts/TheSans/TheSansB_300i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_300i.svg#TheSansB_300i") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 400;
font-style: italic;
src: url("../fonts/TheSans/TheSansB_400i.eot") format("eot"), url("../fonts/TheSans/TheSansB_400i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_400i.woff") format("woff"), url("../fonts/TheSans/TheSansB_400i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_400i.svg#TheSansB_400i") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 500;
font-style: italic;
src: url("../fonts/TheSans/TheSansB_500i.eot") format("eot"), url("../fonts/TheSans/TheSansB_500i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_500i.woff") format("woff"), url("../fonts/TheSans/TheSansB_500i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_500i.svg#TheSansB_500i") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 600;
font-style: italic;
src: url("../fonts/TheSans/TheSansB_600i.eot") format("eot"), url("../fonts/TheSans/TheSansB_600i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_600i.woff") format("woff"), url("../fonts/TheSans/TheSansB_600i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_600i.svg#TheSansB_600i") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 700;
font-style: italic;
src: url("../fonts/TheSans/TheSansB_700i.eot") format("eot"), url("../fonts/TheSans/TheSansB_700i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_700i.woff") format("woff"), url("../fonts/TheSans/TheSansB_700i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_700i.svg#TheSansB_700i") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 800;
font-style: italic;
src: url("../fonts/TheSans/TheSansB_800i.eot") format("eot"), url("../fonts/TheSans/TheSansB_800i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_800i.woff") format("woff"), url("../fonts/TheSans/TheSansB_800i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_800i.svg#TheSansB_800i") format("svg");
}
@font-face {
font-family: "TheSans";
font-weight: 900;
font-style: italic;
src: url("../fonts/TheSans/TheSansB_900i.eot") format("eot"), url("../fonts/TheSans/TheSansB_900i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_900i.woff") format("woff"), url("../fonts/TheSans/TheSansB_900i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_900i.svg#TheSansB_900i") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 200;
font-style: normal;
src: url("../fonts/TheSerif/TheSerifB_200_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_200_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_200_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_200_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_200_.svg#TheSerifB_200_") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 300;
font-style: normal;
src: url("../fonts/TheSerif/TheSerifB_300_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_300_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_300_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_300_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_300_.svg#TheSerifB_300_") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 400;
font-style: normal;
src: url("../fonts/TheSerif/TheSerifB_400_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_400_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_400_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_400_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_400_.svg#TheSerifB_400_") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 500;
font-style: normal;
src: url("../fonts/TheSerif/TheSerifB_500_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_500_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_500_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_500_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_500_.svg#TheSerifB_500_") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 600;
font-style: normal;
src: url("../fonts/TheSerif/TheSerifB_600_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_600_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_600_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_600_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_600_.svg#TheSerifB_600_") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 700;
font-style: normal;
src: url("../fonts/TheSerif/TheSerifB_700_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_700_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_700_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_700_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_700_.svg#TheSerifB_700_") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 800;
font-style: normal;
src: url("../fonts/TheSerif/TheSerifB_800_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_800_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_800_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_800_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_800_.svg#TheSerifB_800_") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 200;
font-style: italic;
src: url("../fonts/TheSerif/TheSerifB_200i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_200i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_200i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_200i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_200i.svg#TheSerifB_200i") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 300;
font-style: italic;
src: url("../fonts/TheSerif/TheSerifB_300i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_300i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_300i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_300i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_300i.svg#TheSerifB_300i") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 400;
font-style: italic;
src: url("../fonts/TheSerif/TheSerifB_400i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_400i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_400i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_400i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_400i.svg#TheSerifB_400i") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 500;
font-style: italic;
src: url("../fonts/TheSerif/TheSerifB_500i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_500i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_500i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_500i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_500i.svg#TheSerifB_500i") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 600;
font-style: italic;
src: url("../fonts/TheSerif/TheSerifB_600i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_600i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_600i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_600i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_600i.svg#TheSerifB_600i") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 700;
font-style: italic;
src: url("../fonts/TheSerif/TheSerifB_700i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_700i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_700i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_700i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_700i.svg#TheSerifB_700i") format("svg");
}
@font-face {
font-family: "TheSerif";
font-weight: 800;
font-style: italic;
src: url("../fonts/TheSerif/TheSerifB_800i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_800i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_800i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_800i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_800i.svg#TheSerifB_800i") format("svg");
}
@font-face {
font-family: "sdx-icons";
font-weight: normal;
font-style: normal;
src: url("../fonts/sdx-icons/sdx-icons.eot") format("eot"), url("../fonts/sdx-icons/sdx-icons.woff2") format("woff2"), url("../fonts/sdx-icons/sdx-icons.woff") format("woff"), url("../fonts/sdx-icons/sdx-icons.ttf") format("truetype"), url("../fonts/sdx-icons/sdx-icons.svg#sdx-icons") format("svg");
}
/*doc
---
title: Icons
name: 01-foundation-03-icons
category: Foundation - Icons
---
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.
Variations
In the developer section you can find the comprehensive collection of all the icons available for SDX.
Note: 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.
Rules
Icon grid
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.
Icon grid structure
Trim container
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.
Centrally aligned
Minimum size
Icons have a minimum size of 13px when displayed on standard resolution devices, and 26px when displayed on retina, or @2x resolution devices.
Minimum icon size
Maximum size
Icons have a maximum size of 150px when displayed on standard resolution devices, and 300px when displayed on retina, or @2x resolution devices.
Maximum icon size
Available sizes
Icons are offered in six different sizes.
56x56px
48x48px
40x40px
32x32px
24x24px
16x16px
Scaling icons
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.
Scaling icons with their container
Relative alignment
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.
Container alignment
Minimum spacing
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.
Spacing icons
Using colour
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.
Interactive icons
Icons used on colours backgrounds
Buttons
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.
Icons and buttons
Never use icons as imagery
Icons within the SDX system are strictly for use as interactive elements only and should never be used as imagery.
Don’t use icons as imagery
```htmlmixed_webcomponent_sdx-icon_accessible
```
Available Icons
CSS: icon-001-account
Sass: icon-char('001-account');
CSS: icon-002-arrow-down
Sass: icon-char('002-arrow-down');
CSS: icon-003-arrow-left
Sass: icon-char('003-arrow-left');
CSS: icon-004-arrow-right
Sass: icon-char('004-arrow-right');
CSS: icon-005-arrow-up
Sass: icon-char('005-arrow-up');
CSS: icon-006-attachment
Sass: icon-char('006-attachment');
CSS: icon-007-backup
Sass: icon-char('007-backup');
CSS: icon-008-bin
Sass: icon-char('008-bin');
CSS: icon-009-calendar
Sass: icon-char('009-calendar');
CSS: icon-010-cancel
Sass: icon-char('010-cancel');
CSS: icon-011-check-mark
Sass: icon-char('011-check-mark');
CSS: icon-012-check-mark-circle
Sass: icon-char('012-check-mark-circle');
CSS: icon-013-chevron-down
Sass: icon-char('013-chevron-down');
CSS: icon-014-chevron-left
Sass: icon-char('014-chevron-left');
CSS: icon-015-chevron-right
Sass: icon-char('015-chevron-right');
CSS: icon-016-chevron-up
Sass: icon-char('016-chevron-up');
CSS: icon-017-chevron-flat-down
Sass: icon-char('017-chevron-flat-down');
CSS: icon-018-chevron-flat-left
Sass: icon-char('018-chevron-flat-left');
CSS: icon-019-chevron-flat-right
Sass: icon-char('019-chevron-flat-right');
CSS: icon-020-chevron-flat-up
Sass: icon-char('020-chevron-flat-up');
CSS: icon-021-clock
Sass: icon-char('021-clock');
CSS: icon-022-close
Sass: icon-char('022-close');
CSS: icon-023-download
Sass: icon-char('023-download');
CSS: icon-024-download-cloud
Sass: icon-char('024-download-cloud');
CSS: icon-025-edit
Sass: icon-char('025-edit');
CSS: icon-026-exclamation-mark-circle
Sass: icon-char('026-exclamation-mark-circle');
CSS: icon-027-flag
Sass: icon-char('027-flag');
CSS: icon-028-folder-new
Sass: icon-char('028-folder-new');
CSS: icon-029-folder-video
Sass: icon-char('029-folder-video');
CSS: icon-030-forward
Sass: icon-char('030-forward');
CSS: icon-031-forward-filled
Sass: icon-char('031-forward-filled');
CSS: icon-032-forward-message
Sass: icon-char('032-forward-message');
CSS: icon-033-forward-message-2
Sass: icon-char('033-forward-message-2');
CSS: icon-034-fullscreen-enter
Sass: icon-char('034-fullscreen-enter');
CSS: icon-035-fullscreen-enter-2
Sass: icon-char('035-fullscreen-enter-2');
CSS: icon-036-fullscreen-leave
Sass: icon-char('036-fullscreen-leave');
CSS: icon-037-fullscreen-leave-2
Sass: icon-char('037-fullscreen-leave-2');
CSS: icon-038-go-to-end
Sass: icon-char('038-go-to-end');
CSS: icon-039-go-to-end-filled
Sass: icon-char('039-go-to-end-filled');
CSS: icon-040-go-to-start
Sass: icon-char('040-go-to-start');
CSS: icon-041-go-to-start-filled
Sass: icon-char('041-go-to-start-filled');
CSS: icon-042-group
Sass: icon-char('042-group');
CSS: icon-043-heart
Sass: icon-char('043-heart');
CSS: icon-044-home
Sass: icon-char('044-home');
CSS: icon-045-hourglass
Sass: icon-char('045-hourglass');
CSS: icon-046-information-circle
Sass: icon-char('046-information-circle');
CSS: icon-047-key
Sass: icon-char('047-key');
CSS: icon-048-link
Sass: icon-char('048-link');
CSS: icon-049-lock
Sass: icon-char('049-lock');
CSS: icon-050-menu
Sass: icon-char('050-menu');
CSS: icon-051-message
Sass: icon-char('051-message');
CSS: icon-052-minus
Sass: icon-char('052-minus');
CSS: icon-053-more
Sass: icon-char('053-more');
CSS: icon-054-new
Sass: icon-char('054-new');
CSS: icon-055-okay
Sass: icon-char('055-okay');
CSS: icon-056-pause
Sass: icon-char('056-pause');
CSS: icon-057-pause-filled
Sass: icon-char('057-pause-filled');
CSS: icon-058-person
Sass: icon-char('058-person');
CSS: icon-059-play
Sass: icon-char('059-play');
CSS: icon-060-play-filled
Sass: icon-char('060-play-filled');
CSS: icon-061-plus
Sass: icon-char('061-plus');
CSS: icon-062-question-mark-circle
Sass: icon-char('062-question-mark-circle');
CSS: icon-063-record
Sass: icon-char('063-record');
CSS: icon-064-record-filled
Sass: icon-char('064-record-filled');
CSS: icon-065-rename
Sass: icon-char('065-rename');
CSS: icon-066-replay
Sass: icon-char('066-replay');
CSS: icon-067-reply-message
Sass: icon-char('067-reply-message');
CSS: icon-068-reply-message-2
Sass: icon-char('068-reply-message-2');
CSS: icon-069-reply-message-all
Sass: icon-char('069-reply-message-all');
CSS: icon-070-reply-message-all-2
Sass: icon-char('070-reply-message-all-2');
CSS: icon-071-retry
Sass: icon-char('071-retry');
CSS: icon-072-rewind
Sass: icon-char('072-rewind');
CSS: icon-073-rewind-filled
Sass: icon-char('073-rewind-filled');
CSS: icon-074-save
Sass: icon-char('074-save');
CSS: icon-075-save-2
Sass: icon-char('075-save-2');
CSS: icon-076-save-3
Sass: icon-char('076-save-3');
CSS: icon-077-search
Sass: icon-char('077-search');
CSS: icon-078-settings
Sass: icon-char('078-settings');
CSS: icon-079-shopping-trolley
Sass: icon-char('079-shopping-trolley');
CSS: icon-080-speech-bubble
Sass: icon-char('080-speech-bubble');
CSS: icon-081-standby
Sass: icon-char('081-standby');
CSS: icon-082-star
Sass: icon-char('082-star');
CSS: icon-083-stop
Sass: icon-char('083-stop');
CSS: icon-084-stop-filled
Sass: icon-char('084-stop-filled');
CSS: icon-085-synchronise
Sass: icon-char('085-synchronise');
CSS: icon-086-thumb-up
Sass: icon-char('086-thumb-up');
CSS: icon-087-upload
Sass: icon-char('087-upload');
CSS: icon-088-upload-cloud
Sass: icon-char('088-upload-cloud');
CSS: icon-089-volume-fortissimo
Sass: icon-char('089-volume-fortissimo');
CSS: icon-090-volume-forte
Sass: icon-char('090-volume-forte');
CSS: icon-091-volume-piano
Sass: icon-char('091-volume-piano');
CSS: icon-092-volume-pianissimo
Sass: icon-char('092-volume-pianissimo');
CSS: icon-093-volume-mute
Sass: icon-char('093-volume-mute');
CSS: icon-094-warning
Sass: icon-char('094-warning');
CSS: icon-095-zoom-in
Sass: icon-char('095-zoom-in');
CSS: icon-096-zoom-out
Sass: icon-char('096-zoom-out');
CSS: icon-097-suitcase
Sass: icon-char('097-suitcase');
CSS: icon-098-ambulance
Sass: icon-char('098-ambulance');
CSS: icon-099-ambulance-2
Sass: icon-char('099-ambulance-2');
CSS: icon-100-van
Sass: icon-char('100-van');
CSS: icon-101-delivery
Sass: icon-char('101-delivery');
CSS: icon-102-delivery-2
Sass: icon-char('102-delivery-2');
CSS: icon-103-applications
Sass: icon-char('103-applications');
CSS: icon-104-assistant
Sass: icon-char('104-assistant');
CSS: icon-105-call-centre
Sass: icon-char('105-call-centre');
CSS: icon-106-bill
Sass: icon-char('106-bill');
CSS: icon-107-child-protection
Sass: icon-char('107-child-protection');
CSS: icon-108-coins
Sass: icon-char('108-coins');
CSS: icon-109-compass
Sass: icon-char('109-compass');
CSS: icon-110-mobile-phone
Sass: icon-char('110-mobile-phone');
CSS: icon-111-smartphone
Sass: icon-char('111-smartphone');
CSS: icon-112-tablet
Sass: icon-char('112-tablet');
CSS: icon-113-laptop
Sass: icon-char('113-laptop');
CSS: icon-114-computer
Sass: icon-char('114-computer');
CSS: icon-115-workstation
Sass: icon-char('115-workstation');
CSS: icon-116-credit-card
Sass: icon-char('116-credit-card');
CSS: icon-117-directory
Sass: icon-char('117-directory');
CSS: icon-118-document
Sass: icon-char('118-document');
CSS: icon-119-document-new
Sass: icon-char('119-document-new');
CSS: icon-120-document-excel
Sass: icon-char('120-document-excel');
CSS: icon-121-document-powerpoint
Sass: icon-char('121-document-powerpoint');
CSS: icon-122-document-word
Sass: icon-char('122-document-word');
CSS: icon-123-document-pdf
Sass: icon-char('123-document-pdf');
CSS: icon-124-document-txt
Sass: icon-char('124-document-txt');
CSS: icon-125-document-zip
Sass: icon-char('125-document-zip');
CSS: icon-126-document-code
Sass: icon-char('126-document-code');
CSS: icon-127-e-mail
Sass: icon-char('127-e-mail');
CSS: icon-128-film-camera
Sass: icon-char('128-film-camera');
CSS: icon-129-film-camera-2
Sass: icon-char('129-film-camera-2');
CSS: icon-130-film-camera-3
Sass: icon-char('130-film-camera-3');
CSS: icon-131-film-reel
Sass: icon-char('131-film-reel');
CSS: icon-132-folder
Sass: icon-char('132-folder');
CSS: icon-133-football
Sass: icon-char('133-football');
CSS: icon-134-game
Sass: icon-char('134-game');
CSS: icon-135-gaming
Sass: icon-char('135-gaming');
CSS: icon-136-globe
Sass: icon-char('136-globe');
CSS: icon-137-handset
Sass: icon-char('137-handset');
CSS: icon-138-headphone
Sass: icon-char('138-headphone');
CSS: icon-139-headset
Sass: icon-char('139-headset');
CSS: icon-140-index-card
Sass: icon-char('140-index-card');
CSS: icon-141-leaf
Sass: icon-char('141-leaf');
CSS: icon-142-lifesaver
Sass: icon-char('142-lifesaver');
CSS: icon-143-modem-wlan
Sass: icon-char('143-modem-wlan');
CSS: icon-144-movie
Sass: icon-char('144-movie');
CSS: icon-145-movie-2
Sass: icon-char('145-movie-2');
CSS: icon-146-movie-3
Sass: icon-char('146-movie-3');
CSS: icon-147-svod
Sass: icon-char('147-svod');
CSS: icon-148-music
Sass: icon-char('148-music');
CSS: icon-149-navigation
Sass: icon-char('149-navigation');
CSS: icon-150-network
Sass: icon-char('150-network');
CSS: icon-151-office
Sass: icon-char('151-office');
CSS: icon-152-phone-basic
Sass: icon-char('152-phone-basic');
CSS: icon-153-phone-pro
Sass: icon-char('153-phone-pro');
CSS: icon-154-photo
Sass: icon-char('154-photo');
CSS: icon-155-photo-camera
Sass: icon-char('155-photo-camera');
CSS: icon-156-postcard
Sass: icon-char('156-postcard');
CSS: icon-157-printer
Sass: icon-char('157-printer');
CSS: icon-158-radio
Sass: icon-char('158-radio');
CSS: icon-159-rss-feed
Sass: icon-char('159-rss-feed');
CSS: icon-160-wlan
Sass: icon-char('160-wlan');
CSS: icon-161-signal
Sass: icon-char('161-signal');
CSS: icon-162-server
Sass: icon-char('162-server');
CSS: icon-163-sms
Sass: icon-char('163-sms');
CSS: icon-164-translation
Sass: icon-char('164-translation');
CSS: icon-165-transmitter
Sass: icon-char('165-transmitter');
CSS: icon-166-tv
Sass: icon-char('166-tv');
CSS: icon-167-tv-hd
Sass: icon-char('167-tv-hd');
CSS: icon-168-tv-2-0
Sass: icon-char('168-tv-2-0');
CSS: icon-169-video-tape
Sass: icon-char('169-video-tape');
CSS: icon-170-video-tape-2
Sass: icon-char('170-video-tape-2');
CSS: icon-171-wearable-watch
Sass: icon-char('171-wearable-watch');
CSS: icon-172-weather-cloud
Sass: icon-char('172-weather-cloud');
CSS: icon-173-weather-rain
Sass: icon-char('173-weather-rain');
CSS: icon-174-weather-rain-unsettled
Sass: icon-char('174-weather-rain-unsettled');
CSS: icon-175-weather-snow
Sass: icon-char('175-weather-snow');
CSS: icon-176-weather-snow-unsettled
Sass: icon-char('176-weather-snow-unsettled');
CSS: icon-177-weather-storm
Sass: icon-char('177-weather-storm');
CSS: icon-178-weather-storm-unsettled
Sass: icon-char('178-weather-storm-unsettled');
CSS: icon-179-weather-sun
Sass: icon-char('179-weather-sun');
CSS: icon-180-weather-sun-unsettled
Sass: icon-char('180-weather-sun-unsettled');
CSS: icon-181-inbox
Sass: icon-char('181-inbox');
CSS: icon-182-drafts
Sass: icon-char('182-drafts');
CSS: icon-183-sent
Sass: icon-char('183-sent');
CSS: icon-184-sent-2
Sass: icon-char('184-sent-2');
CSS: icon-185-inbox
Sass: icon-char('185-inbox');
CSS: icon-186-drafts
Sass: icon-char('186-drafts');
CSS: icon-187-sent
Sass: icon-char('187-sent');
CSS: icon-188-sent-2
Sass: icon-char('188-sent-2');
CSS: icon-189-inbox
Sass: icon-char('189-inbox');
CSS: icon-190-drafts
Sass: icon-char('190-drafts');
CSS: icon-191-sent
Sass: icon-char('191-sent');
CSS: icon-192-sent-2
Sass: icon-char('192-sent-2');
CSS: icon-193-website
Sass: icon-char('193-website');
CSS: icon-194-website-2
Sass: icon-char('194-website-2');
CSS: icon-195-heart-filled
Sass: icon-char('195-heart-filled');
CSS: icon-196-exclamation-mark
Sass: icon-char('196-exclamation-mark');
CSS: icon-197-share
Sass: icon-char('197-share');
CSS: icon-198-chevron-down-small
Sass: icon-char('198-chevron-down-small');
CSS: icon-199-chevron-up-small
Sass: icon-char('199-chevron-up-small');
CSS: icon-200-chevron-left-small
Sass: icon-char('200-chevron-left-small');
CSS: icon-201-chevron-right-small
Sass: icon-char('201-chevron-right-small');
CSS: icon-202-clear-circle
Sass: icon-char('202-clear-circle');
CSS: icon-203-server
Sass: icon-char('203-server');
CSS: icon-204-cd
Sass: icon-char('204-cd');
CSS: icon-205-bundle
Sass: icon-char('205-bundle');
CSS: icon-206-database
Sass: icon-char('206-database');
CSS: icon-207-firewall
Sass: icon-char('207-firewall');
CSS: icon-208-proxy-server
Sass: icon-char('208-proxy-server');
CSS: icon-209-settopbox
Sass: icon-char('209-settopbox');
CSS: icon-210-puzzle
Sass: icon-char('210-puzzle');
CSS: icon-211-skull
Sass: icon-char('211-skull');
CSS: icon-212-fire
Sass: icon-char('212-fire');
CSS: icon-213-setting
Sass: icon-char('213-setting');
CSS: icon-214-present
Sass: icon-char('214-present');
CSS: icon-215-certificate
Sass: icon-char('215-certificate');
CSS: icon-216-waypointer
Sass: icon-char('216-waypointer');
CSS: icon-217-eye
Sass: icon-char('217-eye');
CSS: icon-218-eye-shut
Sass: icon-char('218-eye-shut');
CSS: icon-219-runtime
Sass: icon-char('219-runtime');
CSS: icon-220-list
Sass: icon-char('220-list');
CSS: icon-221-topology
Sass: icon-char('221-topology');
CSS: icon-222-blueprint
Sass: icon-char('222-blueprint');
CSS: icon-223-map-pointer
Sass: icon-char('223-map-pointer');
CSS: icon-224-console
Sass: icon-char('224-console');
CSS: icon-225-reboot
Sass: icon-char('225-reboot');
CSS: icon-226-reprovision
Sass: icon-char('226-reprovision');
CSS: icon-227-speech-bubble-filled
Sass: icon-char('227-speech-bubble-filled');
CSS: icon-228-star-filled
Sass: icon-char('228-star-filled');
CSS: icon-229-gateway
Sass: icon-char('229-gateway');
CSS: icon-230-flash
Sass: icon-char('230-flash');
CSS: icon-231-rocket
Sass: icon-char('231-rocket');
CSS: icon-232-robot-neutral
Sass: icon-char('232-robot-neutral');
CSS: icon-233-robot-happy
Sass: icon-char('233-robot-happy');
CSS: icon-234-robot-smile
Sass: icon-char('234-robot-smile');
CSS: icon-235-robot-laughing
Sass: icon-char('235-robot-laughing');
CSS: icon-236-robot-wink
Sass: icon-char('236-robot-wink');
CSS: icon-237-robot-relaxed
Sass: icon-char('237-robot-relaxed');
CSS: icon-238-robot-surprized
Sass: icon-char('238-robot-surprized');
CSS: icon-239-robot-confused
Sass: icon-char('239-robot-confused');
CSS: icon-240-robot-sad
Sass: icon-char('240-robot-sad');
CSS: icon-241-robot-broken
Sass: icon-char('241-robot-broken');
CSS: icon-242-umbrella
Sass: icon-char('242-umbrella');
CSS: icon-243-security
Sass: icon-char('243-security');
CSS: icon-244-routed-network
Sass: icon-char('244-routed-network');
CSS: icon-245-ip-sets
Sass: icon-char('245-ip-sets');
CSS: icon-246-resource-pool
Sass: icon-char('246-resource-pool');
CSS: icon-247-edge
Sass: icon-char('247-edge');
CSS: icon-248-switch
Sass: icon-char('248-switch');
CSS: icon-249-processor
Sass: icon-char('249-processor');
CSS: icon-250-distributed-network
Sass: icon-char('250-distributed-network');
CSS: icon-251-legacy-network
Sass: icon-char('251-legacy-network');
CSS: icon-252-star-half
Sass: icon-char('252-star-half');
CSS: icon-253-filter
Sass: icon-char('253-filter');
CSS: icon-254_idcard
Sass: icon-char('254_idcard');
CSS: icon-255_passport
Sass: icon-char('255_passport');
CSS: icon-256_thumb_up_filled
Sass: icon-char('256_thumb_up_filled');
CSS: icon-257_tag
Sass: icon-char('257_tag');
CSS: icon-258_bell
Sass: icon-char('258_bell');
CSS: icon-259_flash_multiple
Sass: icon-char('259_flash_multiple');
CSS: icon-260_lightbulb
Sass: icon-char('260_lightbulb');
CSS: icon-261_devices
Sass: icon-char('261_devices');
CSS: icon-262_smartphone_multiple
Sass: icon-char('262_smartphone_multiple');
CSS: icon-263_document_indesign
Sass: icon-char('263_document_indesign');
CSS: icon-264_document_illustrator
Sass: icon-char('264_document_illustrator');
CSS: icon-265_document_onenote
Sass: icon-char('265_document_onenote');
CSS: icon-266_document_eps
Sass: icon-char('266_document_eps');
CSS: icon-267_document_photoshop
Sass: icon-char('267_document_photoshop');
CSS: icon-268_document_visio
Sass: icon-char('268_document_visio');
CSS: icon-269_document_publisher
Sass: icon-char('269_document_publisher');
CSS: icon-270_document_unknowndoc
Sass: icon-char('270_document_unknowndoc');
CSS: icon-271_shop
Sass: icon-char('271_shop');
CSS: icon-272_scissors
Sass: icon-char('272_scissors');
CSS: icon-273_battery
Sass: icon-char('273_battery');
CSS: icon-274_battery_3
Sass: icon-char('274_battery_3');
CSS: icon-275_battery_2
Sass: icon-char('275_battery_2');
CSS: icon-276_battery_1
Sass: icon-char('276_battery_1');
CSS: icon-277_battery_0
Sass: icon-char('277_battery_0');
CSS: icon-278_battery_empty
Sass: icon-char('278_battery_empty');
CSS: icon-279_mouse
Sass: icon-char('279_mouse');
CSS: icon-280_pointer
Sass: icon-char('280_pointer');
CSS: icon-281_realmouse
Sass: icon-char('281_realmouse');
CSS: icon-282_bug
Sass: icon-char('282_bug');
CSS: icon-283_privacy
Sass: icon-char('283_privacy');
CSS: icon-284_ip
Sass: icon-char('284_ip');
CSS: icon-285_patch
Sass: icon-char('285_patch');
CSS: icon-286_microphone_1
Sass: icon-char('286_microphone_1');
CSS: icon-287_microphone_2
Sass: icon-char('287_microphone_2');
CSS: icon-288_handset_up
Sass: icon-char('288_handset_up');
CSS: icon-289_handset_up_stroke
Sass: icon-char('289_handset_up_stroke');
CSS: icon-290_handset_stroke
Sass: icon-char('290_handset_stroke');
CSS: icon-291_software
Sass: icon-char('291_software');
CSS: icon-292_dynamic_storage
Sass: icon-char('292_dynamic_storage');
CSS: icon-293_wireless_data
Sass: icon-char('293_wireless_data');
CSS: icon-294_wireless_voice
Sass: icon-char('294_wireless_voice');
CSS: icon-295_lips
Sass: icon-char('295_lips');
CSS: icon-296_flag-filled
Sass: icon-char('296_flag-filled');
CSS: icon-297_alarmclock
Sass: icon-char('297_alarmclock');
CSS: icon-298_copy
Sass: icon-char('298_copy');
CSS: icon-299_paste
Sass: icon-char('299_paste');
CSS: icon-300_plus-box
Sass: icon-char('300_plus-box');
CSS: icon-301_minus-box
Sass: icon-char('301_minus-box');
CSS: icon-302_service
Sass: icon-char('302_service');
CSS: icon-303_business-phone
Sass: icon-char('303_business-phone');
*/
.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: "";
}
.sdx-container {
font-family: "TheSans", sans-serif;
font-weight: 300;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
background-color: #fff;
text-rendering: optimizeLegibility;
color: #333;
box-sizing: border-box;
/*
* Set html to full width and height
* Set touch-action to avoid touch delay on mobile IE
*/
/*
* Set display none to hidden elements
* IE 9 and 10 support
*/
/*
* Reset fonts for relevant elements
*/
/*
* Remove the gray background color from active links in IE 10.
*/
/* 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
*/
/*
::selection {
background: $color-selection-bg;
color: $color-selection-fg;
}
*/
/* h1 in navy*/
/*doc
---
title: Colours
name: 01-foundation-02-colors-01-brand
category: Foundation - Colours
---
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.
Primary colours
Swisscom Navy
Swisscom Blue
Swisscom Red
White
Support colours
Dark Grey
Grey Tint 2
Grey Tint 3
Grey Tint 4
Grey Tint 5
Grey Tint 6
Grey Tint 7
Grey Tint 8
Interaction Blue
Blue Tint 2
Blue Tint 3
Aluminium
Aluminium Tint 2
Horizon
Horizon Tint 2
Interaction colours
Interaction Blue
Blue Rollover
Interaction Grey
Grey Rollover
Interaction Green
Green Rollover
Interaction Red
Red Rollover
Interaction Orange
Orange Rollover
Accent colours
Turquoise
Turquoise Rollover
Azure
Azure Rollover
Iris
Iris Rollover
Orchid
Orchid Rollover
Pink
Pink Rollover
Colour palette
The Swisscom colour palette consists of primary, support, interactive and accent colours:
White has priority over all other colours. In addition to white, navy, blue and red are our primary colours . The primary colours characterize the entire brand appearance.
The support colours are restrained and unobtrusive. They are used primarily for structuring the design and for typography.
Interaction colours are restrained to maintain a consistent treatment for interactive elements. They help to differentiate between static and interactive content in page, without relying on hover states.
The accent colours are intended for information graphics and for setting small highlights.
The Swisscom colour palette for Adobe CC can be downloaded here .
Primary colours
The use of primary colours within SDX helps to reinforce the presence of the Swisscom master brand throughout all
Swisscom digital experiences.
Swisscom Navy
CSS: .sc-navy
Sass: $color-sc-navy
Hex: #001155
RGB: 0, 17, 85
White
CSS: .sc-white
Sass: $color-sc-white
Hex: #FFFFFF
RGB: 255, 255, 255
Swisscom Blue
CSS: .sc-blue
Sass: $color-sc-blue
Hex: #11AAFF
RGB: 17, 170, 255
Swisscom Red
CSS: .sc-red
Sass: $color-sc-red
Hex: #DD1122
RGB: 221, 17, 34
Typography using brand colours
Icons using brand colours
Support colours
Support colours are the most widely used across all screens and components and used as the foundation on which
all our products are made from.
Dark grey is used for the majority of non-interactive typography. Mid and light grey can be used for creating
levels of hierarchy between similar size piece of text.
SDX has seperate interaction and accent colour palettes that feature AA accessible alternative colours to
Swisscom blue and red for use in digital products.
Dark Grey
CSS: .gray
Sass: $color-gray
Hex: #333333
RGB: 51, 51, 51
Grey Tint 2
CSS: .gray-tint-2
Sass: $color-gray-tint-2
Hex: #474747
RGB: 71, 71, 71
Grey Tint 3
CSS: .gray-tint-3
Sass: $color-gray-tint-3
Hex: #5C5C5C
RGB: 92, 92, 92
Grey Tint 4
CSS: .gray-tint-4
Sass: $color-gray-tint-4
Hex: #666666
RGB: 102, 102, 102
Grey Tint 5
CSS: .gray-tint-5
Sass: $color-gray-tint-5
Hex: #858585
RGB: 133, 133, 133
Grey Tint 6
CSS: .gray-tint-6
Sass: $color-gray-tint-6
Hex: #ADADAD
RGB: 173, 173, 173
Grey Tint 7
CSS: .gray-tint-7
Sass: $color-gray-tint-7
Hex: #BBBBBB
RGB: 187, 187, 187
Grey Tint 8
CSS: .gray-tint-8
Sass: $color-gray-tint-8
Hex: #D6D6D6
RGB: 214, 214, 214
Interaction Blue
CSS: .int-blue
Sass: $color-int-blue
Hex: #1781E3
RGB: 23, 129, 227
Blue Tint 2
CSS: .blue-tint-2
Sass: $color-blue-tint-2
Hex: #A2CDF4
RGB: 162, 205, 244
Blue Tint 3
CSS: .blue-tint-3
Sass: $color-blue-tint-3
Hex: #D1E6F9
RGB: 209, 230, 249
Aluminium
CSS: .aluminum
Sass: $color-aluminum
Hex: #DDE3E7
RGB: 221, 227, 231
Aluminium Tint 2
CSS: .aluminum-tint-2
Sass: $color-aluminum-tint-2
Hex: #E4E9EC
RGB: 228, 233, 236
Horizon
CSS: .horizon
Sass: $color-horizon
Hex: #EEF3F6
RGB: 238, 243, 246
Horizon Tint 2
CSS: .horizon-tint-2
Sass: $color-horizon-tint-2
Hex: #F8FAFB
RGB: 248, 250, 251
Desktop mega menu using core colours
Mobile side navigation using core colours
Interaction colours
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. This means
both touch and mouse users are able to intuitively navigate content and services.
Primary interaction colours
Interaction Blue
CSS: .int-blue
Sass: $color-int-blue
Hex: #1781E3
RGB: 23, 129, 227
Blue rollover
CSS: .int-blue--active
Sass: $color-int-blue--active
Hex: #0851DA
RGB: 8, 81, 218
Interaction Grey
CSS: .int-gray
Sass: $color-int-gray
Hex: #CFD5D9
RGB: 207, 213, 217
Grey rollover
CSS: .int-gray--active
Sass: $color-int-gray--active
Hex: #B1B9BE
RGB: 177, 185, 190
Secondary interaction colours
Interaction Green
CSS: .int-green
Sass: $color-int-green
Hex: #25B252
RGB: 37, 178, 82
Green rollover
CSS: .int-green--active
Sass: $color-int-green--active
Hex: #008236
RGB: 0, 130, 54
Interaction Red
CSS: .int-red
Sass: $color-int-red
Hex: #DD1122
RGB: 221, 17, 34
Red rollover
CSS: .int-red--active
Sass: $color-int-red--active
Hex: #BE0000
RGB: 190, 0, 0
Interaction Orange
CSS: .int-orange
Sass: $color-int-orange
Hex: #FF8B2E
RGB: 255, 139, 46
Orange rollover
CSS: .int-orange--active
Sass: $color-int-orange--active
Hex: #E86416
RGB: 232, 100, 22
Interaction colours in buttons
Interaction colours in alerts
Accent colours
Accent 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.
They’re most commonly used within cards and when displaying data in graphs and charts.
Turquoise
CSS: .turquoise
Sass: $color-turquoise
Hex: #0EABA9
RGB: 14, 171, 169
Turquoise rollover
CSS: .turqoise--active
Sass: $color-turquoise--active
Hex: #OC847E
RGB: 12, 132, 126
Azure
CSS: .azure
Sass: $color-azure
Hex: #1781E3
RGB: 23, 129, 227
Azure rollover
CSS: .azure--active
Sass: $color-azure--active
Hex: #0851DA
RGB: 8, 81, 218
Iris
CSS: .iris
Sass: $color-iris
Hex: #5944C6
RGB: 89, 68, 198
Iris rollover
CSS: .iris--active
Sass: $color-iris--active
Hex: #42389E
RGB: 66, 56, 1578
Orchid
CSS: .orchid
Sass: $color-orchid
Hex: #A63297
RGB: 166, 50, 151
Orchid rollover
CSS: .orchid--active
Sass: $color-orchid--active
Hex: #7F2879
RGB: 127, 40, 121
Pink
CSS: .pink
Sass: $color-pink
Hex: #E61E64
RGB: 230, 30, 100
Pink rollover
CSS: .pink--active
Sass: $color-pink--active
Hex: #BF1B5A
RGB: 191, 27, 90
Standard variants of the content colours should always be used first.
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.
Pie charts using accent colours
Cards using accent colours
Colour Tints
Tints of accent colours are available for use within exremely complete data sets, but should not be used in any
other context.
Using full bleed colour
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.
Full bleed colour should be used sparingly and a conscious effort should be made to maintain the proportionate
usage of colour outlined in the colour ratio diagram at the top of this page.
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.
Combining accent colours
Accent colours can be used on their own or in combination with other accent colours, but should not be combined
with colours from the other palettes.
Azure is the same colour like Swisscom interaction blue. While Azure can be used as an Accent on page content
be aware that it can interfere with interaction elements.
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.
Interaction colours in buttons
Interaction colours in alerts
Wayfinding with colour
They help to create visual links between content and can act as signifiers of content themes throughout
services.
All colours can be applied to text, icons, or backgrounds using the corresponding CSS class.
A prefix
bg-
is required to set a background colour.
*/
/*doc
---
title: Typography
name: 01-foundation-05-typography-01-typography
category: Foundation - Typography
---
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.
View Breakpoints
320px
480px
768px
1024px
1280px
1440px
As a guidance we strongly recommend to optimize the solid centre width of your body text to a maximum of 700 pixels. Because having the right amount of characters on each line is key to the readability of your text.
Rules
Typefaces
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.
The Sans
The Serif
Using colour and typography
Typography itself should only ever appear in the core and interaction color palettes. Content colours should never be used for typography. When using color backgrounds, white should be used for typography
colour and typography
The colour matrix demonstrates the accessibility of typefaces across the entire colour palette, at all specified sizes. Use the matrix to ensure your color choices are at least AA compliant.
Type hierachy and color
When creating layouts using typography, colour from the primary colour palette should be used to help give content hierachy. Content colours should never be used for typography.
Type hierachy colour guidance on light
Type hierachy colour guidance on dark
Minimum type padding
Each type size has a minimum padding that makes sure there is adequate space around text.
Minimum type padding
Letter-spacing
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.
Letter-spacing
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.
Letter-spacing
The SDX Library includes the two standard fonts TheSans and TheSerif . It uses it's responsiveness to automatically adjust the font-size and properties depending on a series of media queries.
Font Type Sans
The default style uses the TheSans font.
```htmlmixed
Headline 4: Swisscom intends to continue reducing roaming prices
Swisscom intends to continue reducing roaming prices
```
Font Type Serif
To change the font to TheSerif font-face add the class serif
to any element that should be serif.
```htmlmixed
Headline 4: Swisscom intends to continue reducing roaming prices
Swisscom intends to continue reducing roaming prices
```
Font Weight
To change the font weight form the default weight Light to a different weight add the classes font--light
, font--semi-light
or font--semi-bold
to the element.
```htmlmixed
Swisscom intends to continue reducing roaming prices
Swisscom intends to continue reducing roaming prices
Swisscom intends to continue reducing roaming prices
```
Headings
All HTML headings, from <h1>
to <h6>
, should be used to structure the page semantically correct. Make sure to use just a single one <h1 class="text-h1">
on the entire page and do not skip a heading only for design matters. Instead, use classes like class="text-h1"
to make your heading look the way you want it.
```htmlmixed
I’m a H1
I’m a H2
I’m a H3
I’m semantically a H4 but I look like a H1
I’m semantically a H5 but I look like a H2
I’m semantically a H6 but I look like a H3
```
Display Headings
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.
To add a display heading add one of the following classes text-d1
, text-d2
or text-d3
to the element.
```htmlmixed
Display 1: Swisscom intends to continue reducing roaming prices
Display 2: Swisscom intends to continue reducing roaming prices
Display 3: Swisscom intends to continue reducing roaming prices
```
Inline text elements
Texts are written in paragraphs <p>
. The standard style in the <p>
element is text-b1
.
The following classes are available for changing the font-size: text-b1
, text-b2
or text-sm
```htmlmixed
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Styling for common inline HTML5 elements.
```htmlmixed
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
```
While not shown above, feel free to use <b>
and <i>
in HTML5. <b>
is meant to highlight words or phrases without conveying additional importance while <i>
is mostly for voice, technical terms, etc.
Text on light, gray and dark backgrounds
Light Background (Standard)
```htmlmixed
Display 1: Swisscom intends to continue reducing roaming prices
H1: Swisscom intends to continue reducing roaming prices
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Gray Background
```htmlmixed
Display 1: Swisscom intends to continue reducing roaming prices
H1: Swisscom intends to continue reducing roaming prices
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Dark Background
```htmlmixed
Display 1: Swisscom intends to continue reducing roaming prices
H1: Swisscom intends to continue reducing roaming prices
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
*/
/*doc
---
title: Grids
name: 01-foundation-03-grid-01
category: Foundation - Grids
---
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.
320px
480px
768px
1024px
1280px
1440px
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.
The grid is using a flexbox based system by default.
Introduction
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:
Rows must be placed within a .container
(fixed-width) or .container-fluid
(full-width) for proper alignment and padding. Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row
and .col-xs-4
are available for quickly making grid layouts. Sass mixins can also be used for more semantic layouts.
Columns create gutters (gaps between column content) via padding
. That padding is offset in rows for the first and last column via negative margin on .rows.
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.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4
.
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.
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 .col-md-*
class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-*
class is not present.
Look to the examples for applying these principles to your code: samples/grid .
Media queries
We use the following media queries in our Sass files to create the key breakpoints in our grid system.
Breakpoint
Minimal container-width
Maximal container-width
Grid Column class
Ultra Large
1440px
-
col-ul-*
Extra Large
1280px
1439px
col-xl-*
Large
1024px
1279px
col-lg-*
Medium
768px
1023px
col-md-*
Small
480px
767px
col-sm-*
Extra Small
0px
479px
col-xs-*
A sample for testing the various breakpoints is available at samples/grid .
Sample Stacked-to-horizontal
Using a set of .col-md-*
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 .row
.
```htmlmixed
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
```
Flexbox grid system
The flexbox grid system behaves similar to the classic grid system, but with a few notable differences:
Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system.
Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide.
Flexbox grid columns have significantly more alignment options available, including vertical alignment.
Flexbox grid system requires a `.col-{breakpoint}` class for each tier.
Auto-layout columns
Utilize breakpoint-specific column classes for equal-width columns. Add any number of .col-{breakpoint}
s for each breakpoint you need and every column will be the same width.
Equal-width
For example, here are two grid layouts that apply to every device and viewport, from xs to ul.
```htmlmixed
```
Setting one column width
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.
```htmlmixed
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
```
Variable width content
Using the col-{breakpoint}-auto
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.
```htmlmixed
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
```
Responsive classes
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.
All breakpoints
For grids that are the same from the smallest of devices to the largest, use the .col-xs
and .col-xs-*
classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col-xs
.
The grid requires a class for full-width columns. If you have a .col-sm-6
and don’t add .col-xs-12
, your xs
grid will not render correctly.
```htmlmixed
col-xs
col-xs
col-xs
col-xs
```
```htmlmixed
1 of 2 (stacked on mobile)
1 of 2 (stacked on mobile)
```
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment
```htmlmixed
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
```
```htmlmixed
One of three columns
One of three columns
One of three columns
```
Horizontal alignment
```htmlmixed
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
```
No gutters
The gutters between columns in our predefined grid classes can be removed with .no-gutters
. This removes the negative margins
from .row
and the horizontal padding
from all immediate children columns.
```htmlmixed
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
```
Reordering
Flex order
Use flexbox utilities for controlling the visual order of your content.
```htmlmixed
First, but unordered
Second, but last
Third, but first
```
Offsetting columns
Move columns to the right using offset-md-*
classes. These classes increase the left margin of a column by *
columns. For example, .offset-md-4
moves .col-md-4
over four columns.
```htmlmixed
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
```
Push and pull
Easily change the order of our built-in grid columns with .push-md-*
and .pull-md-*
modifier classes.
```htmlmixed
.col-md-9 .push-md-3
.col-md-3 .pull-md-9
```
Sample no margin on Mobile Only
Using .full-width--mobile-only
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.
```htmlmixed
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
```
*/
/*doc
---
title: Loading Spinner
name: 02-components-090-loader-spinner-01
category: Components - Loading Spinner
---
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. The loading spinner is built around a central axis and is split into two colours. As soon as the loading stroke hits the axis the color changes.
The loader spinner has two base sizes small and large for a variety of different uses.
Loading. Please wait.
Loading. Please wait.
Variations
Sizes
The small spinner is used where space is limited, for example on input fields to indicate loading.
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.
Rules
Axis
The loading spinner is built around an axis and is split into two colours. As soon as the loading stroke hits the axis it changes the color. Please refer to the animation assets for behaviour and movement references.
Axis
Inside elements
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.
Loading spinner inside elements
Navy to red loading spinner
```htmlmixed_accessible
Loading. Please wait.
Loading. Please wait.
```
Navy to blue loading spinner
```htmlmixed_accessible
Loading. Please wait.
Loading. Please wait.
```
*/
/*doc
---
title: Dividers
name: 02-components-060-divider
category: Components - Dividers
---
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.
Light gray divider
Mid gray divider
Dark gray divider
Variations
Grey dividers
There are three tiers of contrast on light backgrounds for divider lines and also a dark variant. Pick the most appropriate for your designs.
Dark gray divider
White (dark variant)
Rules
Vertical spacing
The vertical spacing between dividers should be 32px.
Vertical spacing
Minimum width
The divider is always 100% of the text width.
Minimum width
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.
SDX dividers default to "full-bleed", eg (full width).
```htmlmixed_accessible
This text is above the divider
This text is below the divider
```
Light background dividers
There are three tiers of contrast on light backgrounds for divider lines, pick the most appropriate for your designs.
```htmlmixed_accessible
Light gray divider
Mid gray divider
Dark gray divider
```
Dark background dividers
There is only one contrast option on darker backgrounds
```htmlmixed_accessible
This text is above the divider
This text is below the divider
```
*/
/*doc
---
title: Text Links
name: 02-components-185-text-links
category: Components - Text Links
---
Introduction
Text links are the simplest interactive element. They help to clearly label interactive elements within text, footers and navigation.
This is some description text and a text link
In page text links are supported on both the <a>
and <button>
tag by applying the link
class to the element.
```htmlmixed
This is some description text above the text link
Text link
Text link
Text link
```
Text links can be used in text paragraphs.
```htmlmixed
This is a link in a inline text paragraph.
This is a link in a inline text paragraph.
This is a link in a inline text paragraph.
```
The link component automatically adjusts it's styling if it's used in conjunction with the dark background.
```htmlmixed_accessible
This is some description text above the text link
Text link
Text link
```
Force white link on any dark backgrounds.
```htmlmixed
```
*/
/*doc
---
title: Buttons
name: 02-components-015-button-01-buttons
category: Components - Buttons
---
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.
Primary
Secondary
Confirm
Order Now
Variations
Primary Button
Primary buttons are used in the majority of cases. The interaction blue signifies that the buttons are clickable and have a hover state.
Icons can be used in buttons to help give their funcationality more clarity at a glance.
Secondary button
Secondary buttons are used in conjunction with primary buttons to indicate that the button is of lower priority.
Confirmation button
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.
Image backgrounds
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.
Light Variant
Dark Variant
Rules
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.
Minimum Size
Buttons all have a minimum widths regardless of the word length, this ensures it all our buttons have a standard size.
Minimum button width
Optical centering
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.
Optical alignment with icons
Relationship with other buttons
Buttons feature a minimum of 14px padding between each other to help create clear click targets.
Relationship with other buttons
Full width spacing
Buttons can also be used full width within a container or aligning to the grid. The text remains centrally aligned.
Full width buttons
Typography
Light Variant
Dark Variant
Button usage
Use the button class within the <button>
element. This is very important, because of all the built-in events (e.g. keyboard events) of the button tag.
If your button is actually a link to another page, please use the <a>
element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <button>
element.
For an example of how to use buttons in a form, please see samples/form .
```htmlmixed_accessible
```
Dark background
Buttons on dark background.
```htmlmixed_accessible
```
Variations
There are three basic buttons styles: Primary, secondary and confirm. Simply apply the style modifier class for the desired action.
```htmlmixed_accessible
Primary
Unselectable
Secondary
Unselectable
Confirm
Unselectable
```
Dark background
Button styles on dark background.
```htmlmixed_accessible
Primary
Unselectable
Secondary
Unselectable
Confirm
Unselectable
```
Responsive Button
To make a button responsive add the button--responsive
modifier.
```htmlmixed_accessible
Responsive button
Responsive button
```
Button with Icons
```htmlmixed_accessible
Order
Order Now
```
Full Width Button
Full width buttons should only be used in smaller containers. Example: sidebar
To make a button use 100% of the container width add the button--full
modifier.
```htmlmixed_accessible
Full width button
Full width button
```
Button Group
Buttons should be placed inside a button-group
. Button groups with the button-group--responsive
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.
Full Width of button groups
To make the buttons use the full width of a group, add the modifier button-group--fill
.
```htmlmixed_accessible
Button
Button
```
*/
/*doc
---
title: Input Fields
name: 02-components-075-form-01-inputfields
category: Components - Input Fields
---
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.
If any validation is needed, you can display this in addition.
Input Fields
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.
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.
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.
Rules
Spacing
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.
Spacing fixed labels
Autocomplete
Autocompletion speeds up the users interaction with the computer when it correctly predicts the word the user intends to enter – after 3 characters have been typed into the text field (mostly, this content is dynamic and comes from a database). Whereas a filterable drop-down allows the users to filter a large list of choices – like a country selector – by typing in some characters (mostly, this content is static within the website).
Autocompletion
Typography
Typography
Basic usage
```htmlmixed_accessible
User Name
Email
Password
Multiline text
```
For an example of how to use input fields in a form, please see samples/form .
Fixed Height
Adding the class input-field--fixed
to the input-field
element will prevent the input field to animate the formfield, when it has focus.
```htmlmixed_accessible
User Name
Email
Password
Multiline text
```
Read-only and disabled input fields.
If you want to block the user from changing an input field add the class readonly
or disabled
to the input element.
The difference between the readonly
and disabled
attribute is that in readonly
the user can tab to the element and copy the text from the input field.
```htmlmixed
Read-only
Disabled
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.
Read-only (Multiline)
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.
Disabled (Multiline)
```
Validate input fields
Add the class validate
to the input element to validate the field. The validate
class leverages HTML5 validation and will add a valid
and invalid
class accordingly. If you don't want the valid and invalid states, just remove the validate class from your inputs.
If you have custom validations on a field add the valid
or invalid
class to the input element depending on your validation result.
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.
```htmlmixed_accessible
User Name *
User Name *
Error
* Mandatory field
```
Autocomplete input fields
```htmlmixed
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
```
Here is an example of how to connect the autocomplete to a real server (in this case, Apple iTunes):
This example is written in Stencil, but its principle can be applied to React, Angular, Vue or others:
```javascript_no_preview
export class ItunesAutocomplete {
@State() artists = []
@State() loading = false
fetch(keyword) {
// Ensure keyword length
if (keyword.length < 3) {
return
}
// Loading spinner
this.loading = true
// Request data
fetch("https://itunes.apple.com/search?term=" + encodeURI(keyword)} + "&entity=musicArtist&limit=10", {
method: "post"
})
.then((payload) => payload.json())
.then((payload) => this.artists = payload.results.map((result) => result.artistName))
.then(() => this.loading = false)
}
render() {
return (
this.fetch(selection[0])}
keyboardBehavior="autocomplete"
filterFunction={() => true} // iTunes already filters, bypass local filter
loading={this.loading}
>
{this.artists.map((artist) =>
{artist}
)}
)
}
}
```
JSON configuration options can be passed to the flatpickr date picker library by setting the data-options
attribute. To enable/disable dates by function
or Date
, you need to pass the options to the InputField
using the JavaScript API. More examples: https://flatpickr.js.org/examples/
```htmlmixed_accessible
```
Example of a form in a responsive grid
```htmlmixed_accessible
```
*/
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
/*doc
---
title: Radio Buttons
name: 02-components-140-form-30-radiobuttons
category: Components - Radio Buttons
---
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.
Option 1
This is my supportive text.
Variations
States
Colour and the dot indicate that a radio button is selected, which means that it is active. In addition it has hover effects.
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.
Normal states
Error state
Multiline and supporting line of text
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. If a description with more detail is needed, a description text with smaller font size is displayed below the label text.
Multiline of text
Supporting line of text
Radio buttons side by side
Radio button can also be displayed next to each other.
Radio buttons side by side
Rules
Up to four options on mobile
If you are offering more than four options to users, consider using a dropdown menu.
A drop down menu on mobile
Spacings
The horizontal spacing between the radio buttons itself and the label is 16px. The vertical spacing between different radio buttons is 24px.
Spacing between radio buttons
Spacing between radio buttons beside each other
Spaces for Multi-line labels
Typography
Typography
Typography of supporting text
```htmlmixed_webcomponent_sdx-input-item_accessible
Option 1
Option 2
Option 1
Multiple lines are also supported
Option 2
Additional description text for more information.
```
For an example of how to use radio buttons in a form, please see samples/form .
Validate radio buttons
```htmlmixed_accessible
```
*/
/*doc
---
title: Checkboxes
name: 02-components-050-form-20-checkboxes
category: Components - Checkboxes
---
Checkboxes let users select from a small set of options, or make a binary decision (for example accepting terms and conditions).
Option 1
This is my supportive text.
Variations
Checkbox states
Colour and the check indicate that a checkbox is selected, which means that it is active. In addition it has hover effects.
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.
Checkbox states
Error state
Multi-line and supporting description label
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. If a description with more detail is needed, a description text with smaller font size is displayed below the label text.
Multi-line label
Supporting description label
Checkboxes side by side
Checkboxes can also be displayed next to each other.
Checkboxes side by side
Rules
Minimum spacing
The horizontal spacing between the checkbox itself and the label is 16px. The vertical spacing between different checkboxes is 24px.
Spacing
Spacing multi-line
Spacing side by side checkboxes
Typography
Typography
Checkboxes with supporting description label
```htmlmixed_webcomponent_sdx-input-item_accessible
Option 1
Option 1
Option 2
Option 1
Multiple lines are also supported
Option 2
Additional description text for more information.
```
For an example of how to use checkboxes in a form, please see samples/form .
Validate checkboxes
```htmlmixed_accessible
```
Validate checkbox group
```htmlmixed_accessible
```
*/
/*doc
---
title: Menu (dropdown)
name: 02-components-095-select-40-overview
category: Components - Menu (dropdown)
---
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.
Option 1
Option 2
Option 3
Option 4
Option 5
Option 1
Option 2
Option 3
Option 4
Option 5
Rules
Space between dropdowns
A minimum of 16px are required between dropdown boxes.
16px are required between dropdown boxes
Relationship with other elements
Each collection of dropdown labels has 24px between them and other elements.
Relationship with other elements
```htmlmixed_webcomponent_sdx-select
Saab
Volvo
BMW
Mercedes
VW
Chevrolet
Chrysler
Mazda
MG
Toyota
```
For more sophisticated examples, please see samples/form .
On a dark background
```htmlmixed
Option 1
Option 2
Option 3
```
Validate
```htmlmixed
Your choice
Choose your option
Option 1
Option 2
Error Message
```
*/
/*doc
---
title: Switches
name: 02-components-170-switches-01-styles
category: Components - Switches
---
Switches are used to change the status of an option or setting between on (active) and off (inactive). They’re always shown with descriptive text thats used to explain their function, and feature a green active state to help confirm their status.
Variations
Off states
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 colours.
Inactive states
On states
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.
Active states
Rules
Vertical spacing
There is a 12px margin between switches.
Spacing between listed switches
Horizontal spacing
There is 20px between switches and labels.
Spacing between switches and text labels
Typography
Typography
Dark variant
Use the following switch as a simple on/off toggle switch.
```htmlmixed_accessible
Switch with supporting text
Switch with supporting text
(This text is read by screen reader only)
This text is read by screen reader only.
Disabled switch with supporting text
Disabled switch with supporting text
```
Switch with label on the left side
```htmlmixed_accessible
Switch with supporting text
```
Switch on dark backgrounds
Switches are also available on dark backgrounds, just annotate the parent background element with the .bg--dark
class and the switches will automatically adjust their styling accoordingly.
```htmlmixed_accessible
```
*/
/*doc
---
title: Sliders
name: 02-components-160-range-01-rangeslider
category: Components - Sliders
---
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.
10
20
100
300
1000
Step slider with data options
```htmlmixed
10
20
100
300
1000
```
```htmlmixed
1
2
3
```
```htmlmixed
1
2
```
Ticks without explicit labels
If options
are provided but no labels
are specified the range component automatically generates the labels based on the provided options value.
```htmlmixed
1
1.5
2
2.5
3
```
Disabled step slider
```htmlmixed
10
20
100
300
1000
```
Dark background
Step slider on dark background.
```htmlmixed
```
Disabled step slider
```htmlmixed
```
Free Slider (Light)
The light style of the free slider. Use the formatter
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.
```htmlmixed
0
0
```
Dark background
Slider on dark background.
```htmlmixed
```
*/
/*doc
---
title: Segmented Controls
name: 02-components-151-segmented-controls
category: Components - Segmented Controls
---
A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.
Within the control, all segments are equal in width. Like buttons, segments can contain text or images.
Segmented controls are often used to display different views.
Pictures with spacings and typography will be updated.
Segmented Controls
The segmented controls should be used to select only one option among a certain group.
```htmlmixed_accessible
Option 1
Option 2
Option 3
Option disabled
```
Segmented Controls with icon
```htmlmixed_accessible
Fixnet
Mobile
Tablet
```
Segmented Controls with centered icon and text
```htmlmixed_accessible
Arrange consultation with hotline
Arrange consultation in shop
Arrange consultation at home
```
Segmented Controls with images
```htmlmixed_accessible
```
*/
/*doc
---
title: Lists
name: 02-components-080-lists
category: Components - Lists
---
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.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit atedur.
Lorem ipsum dolor sit amet.
Bullet list
Bullet list single line
```htmlmixed_accessible
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Bullet list multi line
```htmlmixed_accessible
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Numbered list
Numbered list single line
```htmlmixed_accessible
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Numbered list multi line
```htmlmixed_accessible
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
*/
/*doc
---
title: Badges
name: 02-components-010-badges-01-badges
category: Components - Badges
---
Badges are small and subtle notification indicators used to provide users with additional information without disrupting their experience.
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 colours, helping to clarify importance of the notification/alert.
Badge types
There are five types of badges.
```htmlmixed_accessible
account
8
new informations
account
654
new informations
shopping-trolley
Product added
```
Dark Background
Badges on dark background.
```htmlmixed_accessible
account
8
new informations
account
654
new informations
```
Badge colours
General Notifications
```htmlmixed_accessible
account
2
new informations
```
Confirmations
```htmlmixed
account
2
new informations
```
Alerts and notifications
```htmlmixed
account
2
new informations
```
*/
/*doc
---
title: Cards
name: 02-components-020-cards-01-cards
category: Components - Cards
---
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 colour coded to establish visual different between multiple card types within the same view.
Global roaming is now switched on
Global roaming is now switched on
Cards are used to group and smaller pieces of contain content in page, and give them extra emphasis. Cards are colour coded based on the content they’re surfacing.
How to use cards
Use cards to give content clearer separation from the rest of the content in page. With the addition of colour labelling, cards also helps to categorise content and makes wayfinding throughout products clearer.
8 column grid
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 row
and classes col-1
to col-8
for the card grid.
Clickable Cards
Cards are by default not clickable. To make a card clickable add the class card--clickable
to the card.
```htmlmixed_accessible
Global roaming is now switched on
Global roaming is now switched on
```
Corners
To change the corners of the card to rounded or not rounded, set the class card--rounded
or card--not-rounded
to the card.
```htmlmixed_accessible
We use our users’ data responsibly, to deliver relevant experiences.
Find out more
We use our users’ data responsibly, to deliver relevant experiences.
Find out more
```
Colours
Cards can be colour coded to establish visual different between multiple card types within the same view.
```htmlmixed_accessible
We use our users data responsibly, to deliver relevant experiences.
We use our users data responsibly, to deliver relevant experiences.
We use our users data responsibly, to deliver relevant experiences.
We use our users data responsibly, to deliver relevant experiences.
We use our users data responsibly, to deliver relevant experiences.
We use our users data responsibly, to deliver relevant experiences.
```
Notification Cards
Notification cards have by default rounded corners. If you want the card to have no rounded corners add the class card--not-rounded
to the card.
General Notification Card
```htmlmixed_accessible
Global roaming is now switched on
Global roaming is now switched on
```
Actionable Notification Cards
```htmlmixed_accessible
Download Swisscom TV 2.0 app on phone to view all your TV stats and usage
Swisscom TV 2.0
Download Swisscom TV 2.0 app on phone to view all your TV stats and usage
Swisscom TV 2.0
```
Image Top Notification Card
```htmlmixed_accessible
We use our users’ data responsibly, to deliver relevant experiences.
Find out more
We use our users’ data responsibly, to deliver relevant experiences.
Find out more
```
Image Bottom Notification Card
```htmlmixed_accessible
We use our users’ data responsibly, to deliver relevant experiences.
Find out more
We use our users’ data responsibly, to deliver relevant experiences.
Find out more
```
Promo Notification Card
```htmlmixed_accessible
```
Notes Notification Card
```htmlmixed_accessible
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.
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.
```
Upload Cards
Upload cards have by default not rounded corners. If you want the card to have rounded corners add the class card--rounded
to the card.
Uploaded Photos Card
```htmlmixed_accessible
```
Uploaded Files Card
```htmlmixed
pdf-document
sdx_grid.pdf
word-document
sdx_grid.docx
```
Documents Cards
Document cards have by default not rounded corners. If you want the card to have rounded corners add the class card--rounded
to the card.
Documents Card
```htmlmixed
```
Travel Card
```htmlmixed
Next trains
from Bern Station
```
News Cards
The news card is available in the default and the dark style.
```htmlmixed_accessible
Card 11
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
likes 9
comments 11
favorites 4
Card 11
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
likes 9
comments 11
favorites 4
```
Linkbox with icon
```htmlmixed
```
Linkbox without truncate
```htmlmixed
```
Linkbox with additional text element and link
```htmlmixed
```
Linkbox no background
```htmlmixed
```
Action Message Card
```htmlmixed_accessible
```
Info Message Card
```htmlmixed_accessible
This is an information message
Improve your WLAN quality
With the help of the My Swisscom Assistant you can improve your WLAN quality.
```
Success Message Card
```htmlmixed_accessible
This is a success message
Your registration has succeeded
To resend your verification e-mail
click here .
```
Important Message Card
```htmlmixed_accessible
This is a warning message
Router problems
Your DSL router cannot be reached. Therefore, it is only possible to view or print your data at the moment.
```
Alert Message Card
```htmlmixed_accessible
This is an error message
COMBOX® not found
No COMBOX® could be found with the number 079 12355 88. Not all COMBOX®-numbers can be displayed.
```
Message Card with huge content (to be used only for message cards with a title)
Here you have the option to align the content on the left
```htmlmixed_accessible
This is a warning message
Router problems
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 log in to the Customer Center to make changes later.
```
*/
/*doc
---
title: Loading Bar
name: 02-components-085-loader-bar-01
category: Components - Loading Bar
---
Loading bars are percentage based data visualisations that show users how far along a process they are, for example file upload.
Increase progress
Variations
Standard
The green bar indicates the percentage of a task that is underway.
Loading bar with 30% completed
Completed
When completed, the right text with the percentage switches to green
Rules
Bars and data
Bars containing data should have rounded ends. The bar that indicates data should always have a flat end.
Rounded edge bar and flat edge data
Typography
Typography
The SDX loading bar component with support for displaying the current progress as a bar, and with optional detail captions.
Increase progress
```htmlmixed
```
Loader without detail text
Increase progress
```htmlmixed
```
Loader bar on dark backgrounds
Loader spinners are also available on dark backgrounds, just annotate the parent background element with the .bg--dark
class and the loader will automatically adjust their styling accordingly.
```htmlmixed
File_name.jpg
70% of 1.5MB
```
Loading Bar Component
To use update the loader bar component from JavaScript use the provided LoaderBar
JavaScript component.
```htmlmixed_no_preview
```
Updating progress
To update the progress of the LoaderBar set the progess
property to the desired value in the range from 0..1
.
Set the filename
The filename can be set using the `filename` property.
Note: If the detail element is not defined in your markup, setting the filename will cause an error to be thrown.
Set the file size
The file size can be set using the `fileSize` property.
Note: If the detail element is not defined in your markup, setting the fileSize will cause an error to be thrown.
*/
/*doc
---
title: Status
name: 02-components-165-status
category: Components - Status
---
```htmlmixed_accessible
```
Example usage for unread/read messages:
```htmlmixed_accessible
Status
Name
Subject
Date
Aria Stark
On the road
23.05.1910
John Snow
Winter
11.01.1910
```
*/
/*doc
---
title: Modals
name: 02-components-105-modals-01-overview
category: Components - Modals
---
Modals are pop up windows that are used to delivery timely information, or request action from users.
A responsive test page for the Modal dialog: samples/modal .
Variations
Standard modals
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. Buttons align right on modals used for >768px devices.
768px uses side by size modals
768px modal view uses stacked CTA to save horizontal space
Icon modal
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.
Modal with two icons
Modal with three icons
Rules
Overlay
The ovelay is a globally 40% #333333 on all modal styles. The modal is always vertically centered within the viewport.
Background overlay color
Stacked buttons
Use no more than three stack buttons to avoid the modal getting too long.
Stacked buttons
Typography
Typography
Modals are used to display content in a layer above the app. There can only be one active modal dialog at a given time.
Interactive sample
A responsive test page for the Modal dialog is available at samples/modal . In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.
Usage
There are serveral options for opening and closing a modal dialog, either use the Modal
JavaScript component directly and call the open()
and close()
methods on the component; or add a button with the class modal-trigger
and a href
attribute with the id of the target modal dialog.
```htmlmixed
Open modal
```
To close the dialog either call close()
on the component manually or apply either the modal-close
or modal-cancel
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.
Modal dialog with two buttons
```htmlmixed
Do you want to delete SDX_Library_Master.pdf ?
Yes, delete
No, keep it
```
Modal dialog with three buttons
```htmlmixed
Do you want to delete SDX_Library_Master.pdf ?
Yes, delete
No, keep it
Learn More
```
*/
/*doc
---
title: Menu (flyout and contextual)
name: 02-components-100-menu-01-flyout
category: Components - Menu (flyout and contextual)
---
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.
Deutsch
English
Français
Italiano
Variations
Regular flyout menu
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.
Regular flyout
Regular flyout with hover on first nav item
Flyout with CTAs
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.
Flyout with CTA
Profile menu
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.
Three column profile menu
Basket menu
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.
Regular flyout
Contextual menus
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.
When placed in a button, they can be fixed to the bottom of the viewport. This makes it easy and quick for the user.
Closed contextual menu
Open contextual menu
Contextual flyout menu
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.
Regular flyout
Regular flyout with hover on first list item
Rules
Spacing around menus
All menus have a margin of 24px around the element.
Spacing around menus
Grid structure
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.
Grid structure
Typography
Grid structure
Flyout Menu
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.
```htmlmixed_webcomponent_sdx-menu-flyout_accessible
Deutsch
English
Français
Italiano
```
Flyout with CTAs
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.
```htmlmixed_accessible
Welcome to my Swisscom
Log in to manage your invoices, products, orders and see more offers
Cancel
Login
```
Contextual Menu
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.
NOTE: This component should only be used on the phone
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.
```htmlmixed
```
*/
/*doc
---
title: Notifications (header)
name: 02-components-125-notification-header-01-overview
category: Components - Notifications (header)
---
Notification headers are colored strips which run across the top of a product, beneath the header bar or navigation.
How to use notification headers
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.
Variations
General notifications
Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.
New inbox notification
Hover state
Confirmation notifications
Green notifications should be used to indicate validation or success, for example to confirm success at the end of an order process.
Items added to basket confirmation
Hover state
Alert notifications
Orange notifications indicate an error or a warning, for example something that needs urgent attention.
Warning notification
Hover state
Rules
Closing the notification
Each notification can be closed, with the secondary action being positioned to the right.
Closing the notification
Fixed over content
Notifications are always placed over the content and fixed to the top of viewport, for emphasis and clarity.
Fixed over content
Typography
Typography
Usage
```htmlmixed
Notification text
Default notification
Confirmation / Success notification
Alert / Warning notification
Show notification
```
```htmlmixed
```
```htmlmixed
```
Colours
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.
General Notifications
```htmlmixed
```
Confirmations / Success
```htmlmixed
```
Alerts and Warnings
```htmlmixed
```
*/
/*doc
---
title: Notifications (modal)
name: 02-components-130-notification-modal-01-overview
category: Components - Notifications (modal)
---
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.
How to use notification modals
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.
Inbox notification
Variations
General notifications
Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.
Inbox notification
Confirmation notifcations
The green notification should be used to indicate validation or success, for example to confirm success at the end of an order process.
Order confirmation notification
Alert notifcations
Orange notifications indicate an error or a warning, for example something that needs urgent attention.
Error or warning notification
Rules
Overlay
The overlay is a globally 40% opacity and #333333 on all modal styles. The modal is always vertically centered within the viewport.
Modal overlay
Alignment
The modal is always horizontally and vertically centered within the viewport.
Centered alignment
Typography
Typography
Usage
Interactive sample
A responsive test page for the Notification Modal dialog is available at samples/notification-modal . In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.
There are serveral options for opening and closing a notification modal dialog, either use the Modal
JavaScript component directly and call the open()
and close()
methods on the component; or add a button with the class modal-trigger
and a href
attribute with the id of the target modal dialog.
```htmlmixed
Open notification modal
```
To close the dialog either call close()
on the component manually or apply either the modal-close
or modal-cancel
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.
```htmlmixed
You have 4 new messages
Go to inbox
```
Colours
General Notifications
Use the blue notification for more generic messaging around the users general profile.
```htmlmixed
You have 4 new messages in your inbox
Go to inbox
```
Confirmations / Rewards
Green notification should be used to indicate validation for example to reward a user at the end of an order process.
```htmlmixed
3 items added to your basket
Back to home
```
Alerts / Error Notifications
Only use interaction orange notifications to indicate an error or something that needs urgent attention.
```htmlmixed
You have 5 new alerts
Okay
```
*/
/*doc
---
title: Toolbar
name: 02-components-190-toolbar-01-overview
category: Components - Toolbar
---
Toolbars are groupings of key functions that are represented by icons.
Provides a Toolbar with two alignments. Horizontal or vertical aligned.
Add the class toolbar
to a wrapper div and place buttons inside the wrapper with the class toolbar__item item--show
to add a toolbar.
Toolbar - Desktop
The desktop toolbar uses Tooltips as text hint.
Horizontal Toolbar
The horizontal Toolbar is the standard toolbar. You can add the class toolbar--horizontal
next to the toolbar
class but you don't have to.
Toggle Toolbar
```htmlmixed
```
Horizontal Toolbar on dark background
If the Toolbar component is embedded in a dark background it automatically adjusts its styling accoordingly.
```htmlmixed
```
Vertical Toolbar
To get a vertical toolbar add the class toolbar--vertical
next to the toolbar
class.
Toggle Toolbar
```htmlmixed
```
Vertical Toolbar on dark background
If the Toolbar component is embedded in a dark background it automatically adjusts its styling accoordingly.
```htmlmixed
```
Disabled State
To disable the entire toolbar add the class disabled
to the toolbar
```htmlmixed
```
Disabled Toolbar Items
To disable some toolbar items add the class disabled
to the toolbar item
```htmlmixed
```
Disabled Toolbar on dark Background
```htmlmixed
```
Toolbar - Mobile
The Toolbar on mobile uses labels instead of tooltips.
Horizontal Toolbar
The horizontal Toolbar is the standard toolbar. You can add the class toolbar--horizontal
next to the toolbar
class but you don't have to.
Toggle Toolbar
```htmlmixed
Share
Edit
Download
Delete
```
Horizontal Toolbar on dark background
If the Toolbar component is embedded in a dark background it automatically adjusts its styling accoordingly.
```htmlmixed
Share
Edit
Download
Delete
```
Vertical Toolbar
To get a vertical toolbar add the class toolbar--vertical
next to the toolbar
class.
Toggle Toolbar
```htmlmixed
Share
Edit
Download
Delete
```
Vertical Toolbar on dark background
If the Toolbar component is embedded in a dark background it automatically adjusts its styling accoordingly.
```htmlmixed
Share
Edit
Download
Delete
```
Disabled State
To disable the entire toolbar add the class disabled
to the toolbar
```htmlmixed
Share
Edit
Download
Delete
```
Disabled Toolbar Items
To disable some toolbar items add the class disabled
to the toolbar item
```htmlmixed
Share
Edit
Download
Delete
```
Disabled Toolbar on dark Background
```htmlmixed
Share
Edit
Download
Delete
```
Tooltip Overview
SDX provides a Tooltip with two alignments. Top and right aligned.
Tooltip Usage
Note : 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 onClick="void(0)"
to your markup.
```htmlmixed
Tooltip on top
Tooltip on bottom
Tooltip on left
Tooltip on right
```
*/
/*doc
---
title: Progress Bar (header)
name: 02-components-135-progress-10-barfull
category: Components - Progress Bar (header)
---
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.
Variations
Progress indicators
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.
Completed step
Steps are in green to show the suer they have been completed
Completed step
Completed step on hover
Current step
The current step is colored in blue, while previous steps remain green.
Current step
Incomplete step on hover
Incomplete step
Incompleted steps are outlined blue when shown on light backgrounds, and white when show on dark backgrounds
Incomplete step
Incomplete step on hover
The full progress bar displays a circle for each entry in the progress-full__sections
div
. To specify the current item make sure to add the class section--active
to the item.
To ensure that the progress bar component functions properly make sure to either add the data-init="auto"
attribute, or to manually initialize the ProgressFull
component on the element.
```htmlmixed_webcomponent_sdx-progress-full
Introduction
Settings
Customization
Connection
Security
Payment
Confirmation
Next step
Previous step
```
*/
/*doc
---
title: Progress Bar (header)
name: 02-components-135-progress-10-barfull
category: Components - Progress Bar (header)
---
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.
Variations
Progress indicators
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.
Completed step
Steps are in green to show the suer they have been completed
Completed step
Completed step on hover
Current step
The current step is colored in blue, while previous steps remain green.
Current step
Incomplete step on hover
Incomplete step
Incompleted steps are outlined blue when shown on light backgrounds, and white when show on dark backgrounds
Incomplete step
Incomplete step on hover
The full progress bar displays a circle for each entry in the progress-full__sections
div
. To specify the current item make sure to add the class section--active
to the item.
To ensure that the progress bar component functions properly make sure to either add the data-init="auto"
attribute, or to manually initialize the ProgressFull
component on the element.
```htmlmixed_webcomponent_sdx-progress-full
Introduction
Settings
Customization
Connection
Security
Payment
Confirmation
Next step
Previous step
```
*/
/*doc
---
title: Ribbons
name: 02-components-145-ribbon
category: Components - Ribbons
---
The ribbon banner is a marketing / sales element which should be used very carefully.
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.
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.
Variations
Below you can see the regular size examples of the Ribbon Badge on Corner and the Ribbon Badge on Side.
```htmlmixed_webcomponent_sdx-ribbon
```
*/
/*doc
---
title: Tables
name: 02-components-175-tables-01-tables
category: Components - Tables
---
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.
Variation
Display tables
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.
Display table with drop shadow
Display table without drop shadow
Display table with live price
Display table without drop shadow
They can also feature a live total, helping show users the direct cost implications of their selections.
Image base tables
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.
Image base tables
Data-driven tables
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.
Data driven table with drop shadow
Data driven table without drop shadow
Rules
Image table on mobile
On mobile, swipe the image table header to change product.
Margins
Tables do not have to adhere to the Swisscom grid, as a table columns can vary in length and number
Image table on mobile
On mobile, swipe the image table header to change product.
Drop shadows
Tables with a grey drop shadow are to be used in card-based layouts only.
Typography
Typography
Data-driven tables
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.
Basic Table
Create a SDX styled table by wrapping a <table>
with a wrapper <div>
and add the class table
to it.
```htmlmixed
Planets in the solar system
Button
```
Responsive Table
Create responsive tables by wrapping any <table>
in table__responsive
to make them scroll horizontally when the container size smaller than the table.
```htmlmixed
Planets in the solar system
Button
```
Table Styles
Table with highlighted header
```htmlmixed
Planets in the solar system
```
Table with no spacing
```htmlmixed
Planets in the solar system
```
Display tables
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.
```htmlmixed
Yay this is a title
Button
```
Table with arbitrary content
Tables with arbitrary content helps to easily build tables for a variety of use cases.
```htmlmixed
Vivo XL - Vivo M
Vivo S - Vivo XS
Natel infinity 2.0 M
Natel infinity 2.0 L
Natel infinity 2.0 XL
Natel infinity 2.0 XS
Natel infinity 2.0 S
```
*/
/*doc
---
title: Pie chart
name: 02-components-040-pie-charts-01
category: Components - Chart (pie)
---
Pie charts are used to show percentage based data. Data is shown in segments of different colours, with the sum total equalling 100%.
Update
Photos
Files
Videos
Available
Variations
Placement of vertical explanation
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.
Stacked pie chart
Dark variant
Placement of horizontal explanation
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.
Side by side pie chart
Dark variant
Rules
Proportions
Data is shown in segments of different colours, with the sum total of segments equalling 100%.
the total sum of all segments is 100%
Spacing around
A margin of 24px is required above and below the elements.
Spacing around
Pie chart with one color
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.
Make sure the pie chart has always an open end
Typography
Typography
Dark variant
Pie charts are used to show percentage based data. Data is shown in segments of different colours, with the sum total equalling 100%.
Update
```htmlmixed
Photos
Files
Videos
Available
```
You can either define the data elements in the markup and use the data-init="auto"
attribute. Or update the data values using the provided JavaScript component. The data list is expected to be in the following format:
```javascript_no_preview
[
{
title: "Photos",
color: "turquoise",
value: 12
},
{
title: "Files",
color: "orchid",
value: 2
}
]
```
Title: The segment data title
Color: The sdx interaction colour CSS class name or a valid hex colour (eg #ffffff
)
Value: The value of the current segment as integer or floating point number
In addition make sure to set the data-unit
attribute to the desired value.
Variations
Stacked
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.
```htmlmixed
Photos
Files
Videos
Available
```
Dark style
The standard and the stacked pie chart both support dark backrounds by default. Just put them in a bg bg--dark
container and they will adapt their style accordingly.
```htmlmixed
Photos
Files
Videos
Available
```
Empty State
The empty state is implemented using a pie chart with only one data element definition. By default, the legend is hidden in this empty state. If you still need to show it, you can add the data-always-show-legend
attribute to the charts root element.
```htmlmixed
```
*/
/*doc
---
title: Bar chart (horizontal)
name: 02-components-030-bar-chart-horizontal-01
category: Components - Chart (bar horizontal)
---
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.
Update
Variations
Unlimited data
Unlimited data charts show types of data which have no upper limit, for example additional costs.
Unlimited data charts
Dark variant
Limited data
Limited data charts are used to show data on a limited scale, such as percentages or limited allowances with a single colour displaying the used amount.
Light variant
Dark variant
Split data
Split data charts enable us to display mutliple data types in a single bar chart. A bar can be divided into different colours to show how the full bar is representing accumulated data from different sources.
Light variant
Dark variant
Using colour combinations
Bar charts can feature multiple colours to denote different data sets, which are explained using a colour coded key below.
Multiple colour bar chart example
Empty data
Empty data – or bars displaying zero – are represented by a grey dot.
Empty data chart
Tooltip
A tooltip can be used with charts to give the user context and provide additional information they wouldn’t otherwise see.
Tooltip on a light background
Tooltip on a dark background
Rules
Relative positioning
The bar chart should always have 32px space between itself and other elements.
Bar chart spacing
Minimum height
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.
A minimal height of 20px and 24px are required for padding
Minimum width
The limited data chart should have a minimum width of 272px to ensure legibility across devices.
Min width of 272px
Bars and data
Bars containing data have rounded ends, but data should always have a flat end point.
Visual construction
Typography
Typography
Typography
Dark variant
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.
Update
Unlimited data
Unlimited data charts show types of data which have no upper limit, for example additional costs.
```htmlmixed
```
Limited data
Limited data charts are used to show data on a limited scale, such as percentages or limited allowances with a single colour displaying the used amount.
```htmlmixed
```
Split data
Split data charts enable us to display mutliple data types in a single bar chart. A bar can be divided into different colours to show how the full bar is representing accumulated data from different sources.
```htmlmixed
Additional Costs
Subscription Costs
Additional Costs
Subscription Costs
```
```htmlmixed
```
Dark styles
```htmlmixed
```
Empty state
```htmlmixed
```
*/
/*doc
---
title: Bar chart (vertical)
name: 02-components-035-bar-chart-vertical-01
category: Components - Chart (bar vertical)
---
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.
Update
Subscription Cost
Additional Cost
Jan
Feb
Mar
Apr
May
Subscription Cost
Additional Cost
Variations
Vertical data
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 colour palette for treating data.
Light variant
Dark variant
Using colour combinations
The accent colour palette can be applied to data sets to make them clear and distinct. For further information about the accent colour palette, read here .
Split data
Vertical data can also be split to show categories or groupings within a data set. When splitting data, a key should be used.
Light variant
Dark variant
Tooltip
A tooltip can be used with charts to give the user context and provide additional information they wouldn’t otherwise see.
Light variant
Dark variant
Rules
Minimum spacing
To ensure vertical data charts are clear and easy to read, a minimum spacing of 70px should be applied between bars.
Minimum spacing of 70px between bars.
Bars and data
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.
Data bars have flat end points
Bars and data
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.
Data bars have flat end points
Typography
Typography
Dark variant
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.
Update
You can either define the data elements in the markup and use the data-init="auto"
attribute. Or update the data values using the provided JavaScript component. The data list is expected to be in the following format:
```javascript_no_preview
{
categories: [{
title: "Subscription Cost",
color: "turquoise"
}, {
title: "Additional Cost",
color: "iris"
}],
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"
}]
}
```
In addition make sure to set the data-unit
attribute to the desired value.
Variations
Vertical data
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 colour palette for treating data.
```htmlmixed
Vertical bar chart title
Subscription Cost
Jan
Feb
Mar
Apr
May
Vertical bar chart title
Subscription Cost
Jan
Feb
Mar
Apr
May
```
Split data
Vertical data can also be split to show categories or groupings within a data set. When splitting data, a key (legend) should be used.
```htmlmixed
Vertical bar chart title
Subscription Cost
Additional Cost
Jan
Feb
Mar
Apr
May
Vertical bar chart title
Subscription Cost
Additional Cost
Jan
Feb
Mar
Apr
May
```
*/
/*doc
---
title: Tabs
name: 02-components-180-tabs
category: Components - Tabs
---
Tabs organize and allow navigation between groups of content that are related and at the same level hierarchy. There can be active and disabled states.
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.
Tabs with different font sizes
Variations
There are different tab sizes you can use.
Tabs on colored background
Tabs switching to grey
Tabs with Dropdown
Tabs on mobile
Rules
Paddings between Tabs
Paddings between Tabs
```htmlmixed_accessible
```
Tab sizes
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 tabs--small
or tabs--big
to the tabs
element.
```htmlmixed_accessible
```
Tab indicator sizes
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 tabs--long
to the tabs
element.
```htmlmixed_accessible
```
More tabs options
Scrollable tabs
To make the tabs scrollable add the class tabs--scrollable
to the tabs
element.
```htmlmixed_accessible
```
Tabs with no border
To remove the bottom border on the tabs add the class tabs--no-border
to the tabs
element.
```htmlmixed_accessible
```
Tabs with icons
```htmlmixed_accessible
```
Tabs with images
```htmlmixed_accessible
```
Responsive tabs example
Responsive tabs are displayed as dropdown menus on specified screen sizes.
```htmlmixed_accessible
This is the label
Introduction
Overview
Help
Sales
About
Specification
```
*/
/*doc
---
title: Accordions
name: 02-components-005-accordion-01
category: Components - Accordions
---
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.
Internet unterbrochen
Unsere Techniker arbeiten daran, die Störung zu beheben. Wir bitten um Entschuldigung.
Wartungsarbeiten
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.
Variations
Standard accordion
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.
Responsive states on grey
Centered accordion
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.
Opened and closed states of centred accordion
Colour variations
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.
Light variant on white
Dark variant on white
Light variant on grey
Dark variant on grey
Rules
Line length
Line lengths for all copy inside an accordion is limited to 640px. This prevents excessive line lengths when using accordions in especially wide applications.
Maximun line lentgh example
Single column layout
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.
Single column layout
Arrow behavior
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.
Single column layout
Arrow behavior
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.
Arrow controller behavior
Typography
Typography
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.
```htmlmixed_webcomponent_sdx-accordion_accessible
Accordion 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.
Accordion 2
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.
Accordion 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit
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.
Centered Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
```
*/
/*doc
---
title: Carousel
name: 02-components-025-carousel-01
category: Components - Carousel
---
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.
A responsive test page for the Carousel is available at samples/carousel and samples/carousel-dark .
Variations
How to scale the carousel
On reduced width screens show one less card in the carousel, maintaining the visibility of the offscreen cards. 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.
Tablet carousel
Mobile carousel
Light and dark versions
Two variation of carousels are available for your designs, choose which one to use based on your background colour.
Light card version
Dark card version
Rules
Cards move in batches
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.
Cards should move in batches at a time
Pagination is always centred
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.
Pagination dots
Outside the page margin
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.
Cards sat outside the page margin
Typography
Typography
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.
Carousel sample
The following component is Accessible - More info
A responsive test page for the Carousel is available at samples/carousel and samples/carousel-dark
JavaScript Component
The JavaScript component documentation is available under /doc .
*/
/*doc
---
title: Empty States
name: 02-components-065-empty-states-01
category: Components - Empty States
---
Empty states are intended to prompt a user to interact in various different ways with our products.
The icon, messaging and CTAs are a constant feature that are interchangeable depending on its intended purpose.
Full screen Empty States
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.
Inactive empty state
Active empty state
Empty States in modals
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.
Empty state in modal
Active empty state in modal
Rules
Consistant layout
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.
An empty state with a different purpose
Call to action depends on platform
For mobile breakpoints, empty states can only be interacted with via a CTA button.
This means the messaging needs to tailored appropriately.
An empty state on mobile
Typography
Typography
How to use Empty States
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.
The empty state uses the form <input type="file">
element for handling files. You can specify the allowed file types for the file picker on mobile by setting the mime-type
in the accept
attribute. For more information see HTML DOM Input FileUpload Object .
Make sure to validate the file-type before uploading the files.
For the EmptyState
component to be displayed properly make sure to either set the attribute data-init="auto"
on the component, or the initialize it using the JavaScript API.
Note: Drag and drop does not work in the sample below , it is presented for reference only. For a fully functional version see the samples under Variations.
```htmlmixed_accessible
```
Variations
Full screen empty states
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.
samples/empty-state
Empty States in modals
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.
samples/empty-state-modal
*/
/*doc
---
title: Navigation (main)
name: 02-components-110-navigation-01-overview
category: Components - Navigation (main)
---
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.
View Breakpoints
320px
480px
768px
1024px
1280px
1440px
Variations
Primary navigation
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.
Responsive navigation
Alignment variants
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.
Left, centred and right align navigation option
Mega menu
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
Mega menu with offers bar (1440px)
Mega menu with offers bar (1024px)
Burger menu
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.
768px menu — level one
320px menu — level one
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.
768px menu — level one
320px menu — level one
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.
CFU Switcher
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.
Closed CFU (1440px)
Closed CFU (1024px)
768px CFU
320px CFU
At widths below 768px the CFU is contained within a burger menu, below the primary navigation.
1440px CFU open
768px CFU open
320px CFU open
Breadcrumb
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.
1440px breadcrumb
1440px breadcrumb collapsed, and on scroll
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.
< 768px breadcrumb
< 768px breadcrumb sub navigation dropdown
Once the screen size becomes smaller than 768px wide, sub nav links are placed into a drop down menu.
Rules
Left aligned navigation links
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.
Left aligned navigation with more than three icons
Left aligned navigation with more than three or less icons
Centre aligned navigation links
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.
Centre aligned navigation link limit
Right aligned navigation links
Right aligned navigations never feature icons, therefore they can always accomodate five nav items regardless of screen size
Mobile navigation bar icons
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.
Right aligned navigation link limit
Link spacing
Links should be spaced 30px apart at all times. This helps to maintain clarity between links. This rule should be applied across all breakpoints.
Navigation link spacing
Icon spacing
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.
Icon spacing
Mobile alignment
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.
Navigation links within a burger menu should be left aligned at all times
Mega menu column positioning
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.
1440px six column layout switches to three columns at <1280px
Typography
Typography
Typography
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.
Primary navigation
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.
Only one drawer at a time must be open.
Primary navigation without drawers
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).
Navigation sample
A responsive test page for the Navigation is available at samples/navigation .
Nova sample
The responsive test-page in the nova variation samples/navigation-nova .
*/
/*doc
---
title: Navigation (side)
name: 02-components-115-side-navigation-01-overview
category: Components - Navigation (side)
---
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.
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.
Variations
Alignment options
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.
Left hand burger icon
Left hand navigation includes the Swisscom logo
When using the left hand side navigation, the Swisscom logo should be positioned inside the navigation, and not shown in the header.
Dividing lines are used to help seperate items, and icons can be used to support link titles and make functionality clearer to the user.
Right hand burger icon
Right hand navigation doesn't include the Swisscom logo
When using the right hand side nav, the Swisscom logo should be positioned in the header, and not positioned inside the navigation.
Mobile side navigation
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.
Left hand side nav at 320px
Left hand side nav using scaling behavior
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.
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.
Left hand side navigation at 320px
Left hand side navigation using scaling behavior
Rules
Vertical alignment
Links within side navigation menus are aligned vertically to the middle.
Verticle aignment of links
Without icons
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.
Side navigation without icons
Typography
Typography
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.
Alignment options
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.
Left hand side navigation
A sample is available at samples/navigation-side-left .
Right hand side navigation
A sample is available at samples/navigation-side-right .
*/
/*doc
---
title: Navigation (tab mobile)
name: 02-components-120-tab-navigation-01-overview
category: Components - Navigation (tab mobile)
---
For mobile devices the navigation is also available as a Mobile Tab-Navigation. It is available with or without captions.
NOTE: This component is only available on the phone
breakpoint and is not intended to be used on tablets and desktop breakpoints.
A sample is available at samples/navigation-tabs .
```htmlmixed_accessible
```
```htmlmixed_accessible
```
*/
/*doc
---
title: Search
name: 02-components-150-search
category: Components - Search
---
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.
You can have a look at the search component on a responsive test page for the Navigation at samples/navigation .
Variations
Live search
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.
While typing, the live search shows the results in real time. An optional promotional bar can appear under the results.
Live search states
Live search results
Classic search
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.
Classic search inputs
Classic search results
Sticky search
The sticky search keeps the search bar and filters column fixed in the viewport, letting users edit searchs quickly and filter their results.
Sticky search
Sticky search
Mobile filter
To preserve screen real estate, the filter panel is reduced to a drop down menu on mobile screen sizes.
When opened, the mobile filter follows the same styling as standard dropdown menus.
Closed mobile filter
Expanded mobile filter
Rules
10 results per page
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.
Live results dropdown with ‘view all’ link
Responsive layout structure
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.
1024px search results view
Typography
Typography
Desktop Search
```htmlmixed
```
Mobile Search
```htmlmixed
```
Inline Search
```htmlmixed_webcomponent_sdx-search_accessible
```
Colour options
Light Color
```htmlmixed
```
Search Live
Desktop Search
```htmlmixed
iPho ne 7 Plus
iPho ne 6s
iPho ne 5s
iPho ne 6s Plus
iPho ne SE 64GB
```
Mobile Search
```htmlmixed
iPho ne 7 Plus
iPho ne 6s
iPho ne 5s
iPho ne 6s Plus
iPho ne SE 64GB
```
*/
/*doc
---
title: Footer
name: 02-components-070-footer
category: Components - Footer
---
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.
View Breakpoints
320px
480px
768px
1024px
1280px
1440px
Variations
Full footer
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.
Dark footer
Light footer
Compact footer
The light version of the footer is to be used for smaller products that contain less links and information.
Dark compact footer
Light compact footer
Rules
Logo position
At breakpoints that have a mobile view the footer stacks and centres with the Swisscom logo at the top.
Collapsed dark footer on mobile
Monochrome links
Footer text links use monochrome interactive states, differing from conventional text link and navigation link styles.
Text links within the footer
Grouping elements
Text links are grouped into categories, with the category at the top of each column.
Grouped text links
List limit
Lists within the footer should have a maximum of 6 rows, any more and a ‘More...’ link should appear as the last list item.
Category list within the footer
Typography
Typography full footer dark variant
Typography full footer light variant
Typography compact footer dark variant
Typography compact footer light variant
Colour options
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.
Footer Compact
Use this footer if there isn't a need for lots of links. A responsive test page for the compact footer is available at samples/footer-compact .
```htmlmixed_accessible
```
Dark Version
```htmlmixed_accessible
```
Light Version
```htmlmixed_accessible
```
Footer Full
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 samples/footer-full .
Dark Version
Light Version
*/
/*doc
---
title: Commenting
name: 02-components-055-commenting
category: Components - Commenting
---
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.
Variations
Commenting
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.
Comment and input field on light
Comment and input field on dark
Mobile comment and input field on light
Mobile comment and input field on dark Comment feeds
Comment feeds
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.
Comment feed on light
Comment feed on dark
Comment feed on mobile on light
Comment feed on mobile on dark
Rules
Indentation on desktop
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.
Comment indentation
Indentation on mobile
Indentation on mobile is limited to just one column, regardless of the number of replies. This is due to the restricted width of mobile.
Comment indentation
Comment input field
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.
Static comment field
Active comment field with no input
Active comment field with input and active post button
Typography
Typography
Dark variant
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.
Comment sample
A responsive test page for the comment pattern is available at samples/comment .
Variations
Commenting
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.
```htmlmixed_accessible
```
Dark background
```htmlmixed_accessible
```
Comment feeds
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.
```htmlmixed_accessible
```
Dark background
```htmlmixed_accessible
```
*/
/*doc
---
title: Clearfix
name: 05-utilities-clearfix-01
category: Dev Utilities - Clearfix
---
Easily clear floats by adding .clearfix
to the parent element. Can also be used as a mixin.
```htmlmixed
...
```
```css
// Usage as a mixin
.element {
@include clearfix;
}
```
*/
/*doc
---
title: Margin
name: 05-utilities-margin-01
category: Dev Utilities - Margin
---
Apply SDX conform margins to an element. The following margin options are available:
Margin on all 4 sides of the element:
.margin-0
.margin-1
.margin-2
.margin-3
.margin-4
Margin on the left and right side of the element:
.margin-h-0
.margin-h-1
.margin-h-2
.margin-h-3
.margin-h-4
Margin on the top and bottom side of the element:
.margin-v-0
.margin-v-1
.margin-v-2
.margin-v-3
.margin-v-4
Margin on the top of the element:
.margin-top-0
.margin-top-1
.margin-top-2
.margin-top-3
.margin-top-4
Margin on the bottom of the element:
.margin-bottom-0
.margin-bottom-1
.margin-bottom-2
.margin-bottom-3
.margin-bottom-4
Margin from a breakpoint and up, some examples:
.margin-sm-0
.margin-md-h-1
.margin-lg-v-2
.margin-xl-top-3
.margin-ul-bottom-4
*/
/*doc
---
title: Padding
name: 05-utilities-padding-01
category: Dev Utilities - Padding
---
Apply SDX conform paddings to an element. The following padding options are available:
Padding on all 4 sides of the element:
.padding-0
.padding-1
.padding-2
.padding-3
.padding-4
Padding on the left and right side of the element:
.padding-h-0
.padding-h-1
.padding-h-2
.padding-h-3
.padding-h-4
Padding on the top and bottom side of the element:
.padding-v-0
.padding-v-1
.padding-v-2
.padding-v-3
.padding-v-4
Padding on the top of the element:
.padding-top-0
.padding-top-1
.padding-top-2
.padding-top-3
.padding-top-4
Padding on the bottom of the element:
.padding-bottom-0
.padding-bottom-1
.padding-bottom-2
.padding-bottom-3
.padding-bottom-4
Padding from a breakpoint and up, some examples:
.padding-sm-0
.padding-md-h-1
.padding-lg-v-2
.padding-xl-top-3
.padding-ul-bottom-4
*/
/*doc
---
title: Screen Readers
name: 05-utilities-screenreaders-01
category: Dev Utilities - Screen Readers
---
Hide an element to all devices except screen readers with .sr-only
.
Combine .sr-only
with .sr-only-focusable
to show the element again when it’s focused (e.g. by a keyboard-only user).
Can also be used as mixins.
```htmlmixed
Skip to main content
```
```css
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
```
*/
/*doc
---
title: Text
name: 05-utilities-text-01
category: Dev Utilities - Text
---
Text alignment
Easily realign text to components with text alignment classes.
```htmlmixed
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
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.
```
Text transformation
Transform text in components with text capitalization classes.
Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.
```htmlmixed
Lowercased text.
Uppercased text.
capiTaliZed text.
```
Text truncate
Trunctate text in components.
```htmlmixed
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.
```
Maximum text width
To make long text paragraphs easier to read, SDX recommends to limit their width to a maximum of 700px. This helper class makes it easy to ensure that the text will wrap and never exceed this limit.
```htmlmixed
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.
```
*/
/*doc
---
title: Visibility
name: 06-utilities-visibility-01
category: Dev Utilities - Visibility
---
Invisible content
The .invisible
and .visible
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.
```htmlmixed
not visible
visible
```
Responsive visibility
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.
The .hidden-*-up
classes hide the element when the viewport is at the given breakpoint or wider. For example, .hidden-md-up
hides an element on medium, large, and extra-large viewports.
The .hidden-*-down
classes hide the element when the viewport is at the given breakpoint or smaller. For example, .hidden-md-down
hides an element on extra-small, small, and medium viewports.
You can combine one .hidden-*-up
class with one .hidden-*-down
class to show an element only on a given interval of screen sizes. For example, .hidden-sm-down.hidden-xl-up
shows the element only on medium and large viewports. Using multiple .hidden-*-up
classes or multiple .hidden-*-down
classes is redundant and pointless.
If you want to go for specific devices (phone, tablet or desktop) use the device specific classes instead of the breakpoint specific classes:
Phone: .hidden-phone-up
or .hidden-phone-down
Tablet: .hidden-tablet-up
or .hidden-tablet-down
Desktop: .hidden-desktop-up
or .hidden-desktop-down
*/
}
.sdx-container html {
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
}
.sdx-container *[hidden] {
display: none !important;
}
.sdx-container input,
.sdx-container button,
.sdx-container select,
.sdx-container textarea {
margin: 0;
outline: none;
border-radius: 0;
text-align: left;
line-height: normal;
font: inherit;
font-size: 100%;
}
.sdx-container hr {
height: 0;
box-sizing: content-box;
}
.sdx-container a {
background-color: transparent;
/*
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
}
.sdx-container a:active, .sdx-container a:hover {
outline: 0;
}
.sdx-container input,
.sdx-container button,
.sdx-container 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 IE11+ item jump on click
*/
}
.sdx-container input:active, .sdx-container input:hover,
.sdx-container button:active,
.sdx-container button:hover,
.sdx-container submit:active,
.sdx-container submit:hover {
outline: 0;
}
.sdx-container input > *,
.sdx-container button > *,
.sdx-container submit > * {
position: relative;
}
.sdx-container [role=button] {
cursor: pointer;
}
.sdx-container *, .sdx-container *::before, .sdx-container *::after {
box-sizing: inherit;
}
.sdx-container body {
font-family: "TheSans", sans-serif;
font-weight: 300;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
background-color: #fff;
text-rendering: optimizeLegibility;
color: #333;
box-sizing: border-box;
}
.sdx-container .major-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.sdx-container .main-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.sdx-container .main-wrapper.flex {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.sdx-container .page {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
min-height: 1px;
}
.sdx-container h1.styleguide {
/* .navy $color-sc-navy*/
color: #015;
}
.sdx-container .white {
color: #fff;
}
.sdx-container .navy {
color: #015;
}
.sdx-container .blue {
color: #1781e3;
}
.sdx-container .blue-tint-2, .sdx-container .blue-40 {
color: #a2cdf4;
}
.sdx-container .blue-tint-3, .sdx-container .blue-20 {
color: #d1e6f9;
}
.sdx-container .aluminum,
.sdx-container .aluminium {
color: #dde3e7;
}
.sdx-container .aluminum-tint-2, .sdx-container .aluminum-80,
.sdx-container .aluminium-tint-2,
.sdx-container .aluminium-80 {
color: #e4e9ec;
}
.sdx-container .horizon {
color: #eef3f6;
}
.sdx-container .horizon-tint-2, .sdx-container .horizon-40 {
color: #f8fafb;
}
.sdx-container .gray {
color: #333;
}
.sdx-container .gray-tint-2, .sdx-container .gray-90 {
color: #474747;
}
.sdx-container .gray-tint-3, .sdx-container .gray-80 {
color: #5c5c5c;
}
.sdx-container .gray-tint-4, .sdx-container .gray-mid {
color: #666;
}
.sdx-container .gray-tint-5, .sdx-container .gray-60 {
color: #858585;
}
.sdx-container .gray-tint-6, .sdx-container .gray-40 {
color: #adadad;
}
.sdx-container .gray-tint-7, .sdx-container .gray-light {
color: #bbb;
}
.sdx-container .gray-tint-8, .sdx-container .gray-20 {
color: #d6d6d6;
}
.sdx-container .sc-blue {
color: #1af;
}
.sdx-container .sc-red {
color: #d12;
}
.sdx-container .sc-purple {
color: #5944c6;
}
.sdx-container .sc-navy {
color: #015;
}
.sdx-container .sc-white {
color: #fff;
}
.sdx-container .sc-gray {
color: #333;
}
.sdx-container .sc-gray-mid {
color: #666;
}
.sdx-container .sc-gray-light {
color: #bbb;
}
.sdx-container .int-blue {
color: #1781e3;
}
.sdx-container .int-blue--active {
color: #0851da;
}
.sdx-container .int-gray {
color: #cfd5d9;
}
.sdx-container .int-gray--active {
color: #b1b9be;
}
.sdx-container .int-green {
color: #25b252;
}
.sdx-container .int-green--active {
color: #008236;
}
.sdx-container .int-red {
color: #d12;
}
.sdx-container .int-red--active {
color: #be0000;
}
.sdx-container .int-orange {
color: #ff8b2e;
}
.sdx-container .int-orange--active {
color: #e86416;
}
.sdx-container .azure {
color: #1781e3;
}
.sdx-container .azure--active {
color: #0851da;
}
.sdx-container .orchid {
color: #a63297;
}
.sdx-container .orchid--active {
color: #7f2879;
}
.sdx-container .orchid-tint-2 {
color: #AB449F;
}
.sdx-container .orchid-tint-3 {
color: #B458A8;
}
.sdx-container .orchid-tint-4 {
color: #BB6AB1;
}
.sdx-container .orchid-tint-5 {
color: #C47FBB;
}
.sdx-container .orchid-tint-6 {
color: #CB91C2;
}
.sdx-container .orchid-tint-7 {
color: #D2A4CC;
}
.sdx-container .orchid-tint-8 {
color: #DAB7D5;
}
.sdx-container .iris {
color: #5944c6;
}
.sdx-container .iris--active {
color: #42389e;
}
.sdx-container .iris-tint-2 {
color: #6754C8;
}
.sdx-container .iris-tint-3 {
color: #7765CE;
}
.sdx-container .iris-tint-4 {
color: #7177D2;
}
.sdx-container .iris-tint-5 {
color: #9589D7;
}
.sdx-container .iris-tint-6 {
color: #A59ADB;
}
.sdx-container .iris-tint-7 {
color: #B4ABE0;
}
.sdx-container .iris-tint-8 {
color: #C3BCE2;
}
.sdx-container .pink {
color: #e61e64;
}
.sdx-container .pink--active {
color: #bf1b5a;
}
.sdx-container .pink-tint-2 {
color: #E63A70;
}
.sdx-container .pink-tint-3 {
color: #E74E7F;
}
.sdx-container .pink-tint-4 {
color: #E8628D;
}
.sdx-container .pink-tint-5 {
color: #EA779C;
}
.sdx-container .pink-tint-6 {
color: #EB8BAA;
}
.sdx-container .pink-tint-7 {
color: #ECA0B8;
}
.sdx-container .pink-tint-8 {
color: #EDB4C6;
}
.sdx-container .turquoise,
.sdx-container .apple,
.sdx-container .petrol {
color: #0eaba9;
}
.sdx-container .turquoise--active,
.sdx-container .apple--active,
.sdx-container .petrol--active {
color: #0c847e;
}
.sdx-container .turquoise-tint-2 {
color: #21B1AF;
}
.sdx-container .turquoise-tint-3 {
color: #38B8B6;
}
.sdx-container .turquoise-tint-4 {
color: #4CC0BD;
}
.sdx-container .turquoise-tint-5 {
color: #67C7C5;
}
.sdx-container .turquoise-tint-6 {
color: #7ECECD;
}
.sdx-container .turquoise-tint-7 {
color: #97D5D4;
}
.sdx-container .turquoise-tint-8 {
color: #A9DBDB;
}
.sdx-container .bg-white {
background-color: #fff;
}
.sdx-container .bg-navy {
background-color: #015;
}
.sdx-container .bg-blue {
background-color: #1781e3;
}
.sdx-container .bg-blue-tint-2, .sdx-container .bg-blue-40 {
background-color: #a2cdf4;
}
.sdx-container .bg-blue-tint-3, .sdx-container .bg-blue-20 {
background-color: #d1e6f9;
}
.sdx-container .bg-aluminum,
.sdx-container .bg-aluminium {
background-color: #dde3e7;
}
.sdx-container .bg-aluminum-tint-2, .sdx-container .bg-aluminum-80,
.sdx-container .bg-aluminium-tint-2,
.sdx-container .bg-aluminium-80 {
background-color: #e4e9ec;
}
.sdx-container .bg-horizon {
background-color: #eef3f6;
}
.sdx-container .bg-horizon-tint-2, .sdx-container .bg-horizon-40 {
background-color: #f8fafb;
}
.sdx-container .bg-gray {
background-color: #333;
}
.sdx-container .bg-gray-tint-2, .sdx-container .bg-gray-90 {
background-color: #474747;
}
.sdx-container .bg-gray-tint-3, .sdx-container .bg-gray-80 {
background-color: #5c5c5c;
}
.sdx-container .bg-gray-tint-4, .sdx-container .bg-gray-mid {
background-color: #666;
}
.sdx-container .bg-gray-tint-5, .sdx-container .bg-gray-60 {
background-color: #858585;
}
.sdx-container .bg-gray-tint-6, .sdx-container .bg-gray-40 {
background-color: #adadad;
}
.sdx-container .bg-gray-tint-7, .sdx-container .bg-gray-light {
background-color: #bbb;
}
.sdx-container .bg-gray-tint-8, .sdx-container .bg-gray-20 {
background-color: #d6d6d6;
}
.sdx-container .bg-sc-blue {
background-color: #1af;
}
.sdx-container .bg-sc-red {
background-color: #d12;
}
.sdx-container .bg-sc-navy {
background-color: #015;
}
.sdx-container .bg-sc-white {
background-color: #fff;
}
.sdx-container .bg-int-blue {
background-color: #1781e3;
}
.sdx-container .bg-int-blue--active {
background-color: #0851da;
}
.sdx-container .bg-int-gray {
background-color: #cfd5d9;
}
.sdx-container .bg-int-gray--active {
background-color: #b1b9be;
}
.sdx-container .bg-int-green {
background-color: #25b252;
}
.sdx-container .bg-int-green--active {
background-color: #008236;
}
.sdx-container .bg-int-red {
background-color: #d12;
}
.sdx-container .bg-int-red--active {
background-color: #be0000;
}
.sdx-container .bg-int-orange {
background-color: #ff8b2e;
}
.sdx-container .bg-int-orange--active {
background-color: #e86416;
}
.sdx-container .bg-azure {
background-color: #1781e3;
}
.sdx-container .bg-azure--active {
background-color: #0851da;
}
.sdx-container .bg-orchid {
background-color: #a63297;
}
.sdx-container .bg-orchid--active {
background-color: #7f2879;
}
.sdx-container .bg-iris {
background-color: #5944c6;
}
.sdx-container .bg-iris--active {
background-color: #42389e;
}
.sdx-container .bg-pink {
background-color: #e61e64;
}
.sdx-container .bg-pink--active {
background-color: #bf1b5a;
}
.sdx-container .bg-turquoise,
.sdx-container .bg-apple,
.sdx-container .bg-petrol {
background-color: #0eaba9;
}
.sdx-container .bg-turquoise--active,
.sdx-container .bg-apple--active,
.sdx-container .bg-petrol--active {
background-color: #0c847e;
}
.sdx-container h1,
.sdx-container h2,
.sdx-container h3,
.sdx-container h4,
.sdx-container h5,
.sdx-container h6,
.sdx-container p {
font-family: "TheSans", sans-serif;
margin: 0;
margin-bottom: 32px;
padding: 0;
text-align: left;
word-wrap: break-word;
}
.sdx-container h1:last-child,
.sdx-container h2:last-child,
.sdx-container h3:last-child,
.sdx-container h4:last-child,
.sdx-container h5:last-child,
.sdx-container h6:last-child,
.sdx-container p:last-child {
margin-bottom: 0;
}
.sdx-container h1,
.sdx-container .text-h1 {
line-height: 48px;
letter-spacing: -1.2px;
font-size: 40px;
font-weight: 300;
}
.sdx-container h2,
.sdx-container .text-h2 {
line-height: 40px;
letter-spacing: -1px;
font-size: 32px;
font-weight: 300;
}
.sdx-container h3,
.sdx-container .text-h3 {
line-height: 32px;
letter-spacing: -0.75px;
font-size: 28px;
}
.sdx-container h3, .sdx-container h3--light,
.sdx-container .text-h3,
.sdx-container .text-h3--light {
font-weight: 300;
}
.sdx-container h3--semi-light,
.sdx-container .text-h3--semi-light {
font-weight: 400;
}
.sdx-container h3--semi-bold,
.sdx-container .text-h3--semi-bold {
font-weight: 600;
}
.sdx-container h4,
.sdx-container .text-h4 {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
}
.sdx-container h4, .sdx-container h4--light,
.sdx-container .text-h4,
.sdx-container .text-h4--light {
font-weight: 300;
}
.sdx-container h4--semi-light,
.sdx-container .text-h4--semi-light {
font-weight: 400;
}
.sdx-container h4--semi-bold,
.sdx-container .text-h4--semi-bold {
font-weight: 600;
}
.sdx-container h5,
.sdx-container .text-h5 {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 400;
}
.sdx-container h5, .sdx-container h5--semi-light,
.sdx-container .text-h5,
.sdx-container .text-h5--semi-light {
font-weight: 400;
}
.sdx-container h5--semi-bold,
.sdx-container .text-h5--semi-bold {
font-weight: 600;
}
.sdx-container h6,
.sdx-container .text-h6 {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 16px;
font-weight: 400;
}
.sdx-container h6, .sdx-container h6--semi-light,
.sdx-container .text-h6,
.sdx-container .text-h6--semi-light {
font-weight: 400;
}
.sdx-container h6--semi-bold,
.sdx-container .text-h6--semi-bold {
font-weight: 600;
}
.sdx-container .d1,
.sdx-container .text-d1 {
line-height: 48px;
letter-spacing: -1.2px;
font-size: 40px;
font-weight: 300;
}
@media (min-width: 1024px) {
.sdx-container .d1,
.sdx-container .text-d1 {
line-height: 80px;
letter-spacing: -1.75px;
font-size: 70px;
}
}
.sdx-container .d2,
.sdx-container .text-d2 {
line-height: 40px;
letter-spacing: -1px;
font-size: 32px;
font-weight: 300;
}
@media (min-width: 1024px) {
.sdx-container .d2,
.sdx-container .text-d2 {
line-height: 64px;
letter-spacing: -1.35px;
font-size: 54px;
}
}
.sdx-container .d3,
.sdx-container .text-d3 {
line-height: 32px;
letter-spacing: -0.75px;
font-size: 28px;
font-weight: 300;
}
@media (min-width: 1024px) {
.sdx-container .d3,
.sdx-container .text-d3 {
line-height: 56px;
letter-spacing: -1.2px;
font-size: 48px;
}
}
.sdx-container p {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 400;
}
.sdx-container .text-b1 {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 400;
}
.sdx-container .text-b2 {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
font-weight: 400;
}
.sdx-container .text-sm {
line-height: 24px;
letter-spacing: 0.1px;
font-size: 14px;
font-weight: 400;
}
.sdx-container address {
font-style: normal;
}
.sdx-container strong {
font-weight: 600;
}
.sdx-container em {
font-style: italic;
}
.sdx-container .font {
font-family: "TheSans", sans-serif;
}
.sdx-container .font--sans {
font-family: "TheSans", sans-serif;
}
.sdx-container .font--serif {
font-family: "TheSerif", serif;
}
.sdx-container .font--light {
font-weight: 300;
}
.sdx-container .font--semi-light {
font-weight: 400;
}
.sdx-container .font--semi-bold {
font-weight: 600;
}
@media (min-width: 0) {
.sdx-container .flex-xs-first {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
.sdx-container .flex-xs-last {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.sdx-container .flex-xs-unordered {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.sdx-container .flex-items-xs-top {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.sdx-container .flex-items-xs-middle {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .flex-items-xs-bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.sdx-container .flex-xs-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.sdx-container .flex-xs-middle {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.sdx-container .flex-xs-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.sdx-container .flex-items-xs-left {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.sdx-container .flex-items-xs-center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sdx-container .flex-items-xs-right {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.sdx-container .flex-items-xs-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.sdx-container .flex-items-xs-between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (min-width: 480px) {
.sdx-container .flex-sm-first {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
.sdx-container .flex-sm-last {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.sdx-container .flex-sm-unordered {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.sdx-container .flex-items-sm-top {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.sdx-container .flex-items-sm-middle {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .flex-items-sm-bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.sdx-container .flex-sm-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.sdx-container .flex-sm-middle {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.sdx-container .flex-sm-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.sdx-container .flex-items-sm-left {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.sdx-container .flex-items-sm-center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sdx-container .flex-items-sm-right {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.sdx-container .flex-items-sm-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.sdx-container .flex-items-sm-between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (min-width: 768px) {
.sdx-container .flex-md-first {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
.sdx-container .flex-md-last {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.sdx-container .flex-md-unordered {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.sdx-container .flex-items-md-top {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.sdx-container .flex-items-md-middle {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .flex-items-md-bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.sdx-container .flex-md-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.sdx-container .flex-md-middle {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.sdx-container .flex-md-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.sdx-container .flex-items-md-left {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.sdx-container .flex-items-md-center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sdx-container .flex-items-md-right {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.sdx-container .flex-items-md-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.sdx-container .flex-items-md-between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (min-width: 1024px) {
.sdx-container .flex-lg-first {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
.sdx-container .flex-lg-last {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.sdx-container .flex-lg-unordered {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.sdx-container .flex-items-lg-top {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.sdx-container .flex-items-lg-middle {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .flex-items-lg-bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.sdx-container .flex-lg-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.sdx-container .flex-lg-middle {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.sdx-container .flex-lg-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.sdx-container .flex-items-lg-left {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.sdx-container .flex-items-lg-center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sdx-container .flex-items-lg-right {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.sdx-container .flex-items-lg-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.sdx-container .flex-items-lg-between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (min-width: 1280px) {
.sdx-container .flex-xl-first {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
.sdx-container .flex-xl-last {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.sdx-container .flex-xl-unordered {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.sdx-container .flex-items-xl-top {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.sdx-container .flex-items-xl-middle {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .flex-items-xl-bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.sdx-container .flex-xl-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.sdx-container .flex-xl-middle {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.sdx-container .flex-xl-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.sdx-container .flex-items-xl-left {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.sdx-container .flex-items-xl-center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sdx-container .flex-items-xl-right {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.sdx-container .flex-items-xl-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.sdx-container .flex-items-xl-between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (min-width: 1440px) {
.sdx-container .flex-ul-first {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
.sdx-container .flex-ul-last {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.sdx-container .flex-ul-unordered {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.sdx-container .flex-items-ul-top {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.sdx-container .flex-items-ul-middle {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .flex-items-ul-bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.sdx-container .flex-ul-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.sdx-container .flex-ul-middle {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.sdx-container .flex-ul-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.sdx-container .flex-items-ul-left {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.sdx-container .flex-items-ul-center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sdx-container .flex-items-ul-right {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.sdx-container .flex-items-ul-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.sdx-container .flex-items-ul-between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (min-width: 0) {
.sdx-container .container {
margin-left: calc(24px - 4px);
margin-right: calc(24px - 4px);
padding-left: 4px;
padding-right: 4px;
width: auto;
}
}
@media (min-width: 480px) {
.sdx-container .container {
margin-left: auto;
margin-right: auto;
padding-left: 4px;
padding-right: 4px;
width: 436px;
}
}
@media (min-width: 768px) {
.sdx-container .container {
margin-left: auto;
margin-right: auto;
padding-left: 8px;
padding-right: 8px;
width: 742px;
}
}
@media (min-width: 1024px) {
.sdx-container .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 964px;
}
}
@media (min-width: 1280px) {
.sdx-container .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 1224px;
}
}
@media (min-width: 1440px) {
.sdx-container .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 1380px;
}
}
@media (min-width: 0) {
.sdx-container .container-fluid {
margin-left: calc(24px - 4px);
margin-right: calc(24px - 4px);
padding-left: 4px;
padding-right: 4px;
width: auto;
}
}
.sdx-container .row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 0) {
.sdx-container .row {
margin-left: -4px;
margin-right: -4px;
}
}
@media (min-width: 480px) {
.sdx-container .row {
margin-left: -4px;
margin-right: -4px;
}
}
@media (min-width: 768px) {
.sdx-container .row {
margin-left: -8px;
margin-right: -8px;
}
}
@media (min-width: 1024px) {
.sdx-container .row {
margin-left: -12px;
margin-right: -12px;
}
}
@media (min-width: 1280px) {
.sdx-container .row {
margin-left: -12px;
margin-right: -12px;
}
}
@media (min-width: 1440px) {
.sdx-container .row {
margin-left: -12px;
margin-right: -12px;
}
}
.sdx-container .no-gutters {
margin-right: 0;
margin-left: 0;
}
.sdx-container .no-gutters > .col,
.sdx-container .no-gutters > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
.sdx-container .col,
.sdx-container [class*=col-] {
position: relative;
width: 100%;
min-height: 1px;
}
@media (min-width: 0) {
.sdx-container .col,
.sdx-container [class*=col-] {
padding-left: 4px;
padding-right: 4px;
}
.sdx-container .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%;
}
.sdx-container .col-xs-auto {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-xs-1 {
-webkit-flex: 0 0 8.3333333333%;
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-xs-2 {
-webkit-flex: 0 0 16.6666666667%;
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-xs-3 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-xs-4 {
-webkit-flex: 0 0 33.3333333333%;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-xs-5 {
-webkit-flex: 0 0 41.6666666667%;
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-xs-6 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-xs-7 {
-webkit-flex: 0 0 58.3333333333%;
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-xs-8 {
-webkit-flex: 0 0 66.6666666667%;
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-xs-9 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-xs-10 {
-webkit-flex: 0 0 83.3333333333%;
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-xs-11 {
-webkit-flex: 0 0 91.6666666667%;
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-xs-12 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.sdx-container .pull-xs-0 {
right: auto;
}
.sdx-container .pull-xs-1 {
right: 8.3333333333%;
}
.sdx-container .pull-xs-2 {
right: 16.6666666667%;
}
.sdx-container .pull-xs-3 {
right: 25%;
}
.sdx-container .pull-xs-4 {
right: 33.3333333333%;
}
.sdx-container .pull-xs-5 {
right: 41.6666666667%;
}
.sdx-container .pull-xs-6 {
right: 50%;
}
.sdx-container .pull-xs-7 {
right: 58.3333333333%;
}
.sdx-container .pull-xs-8 {
right: 66.6666666667%;
}
.sdx-container .pull-xs-9 {
right: 75%;
}
.sdx-container .pull-xs-10 {
right: 83.3333333333%;
}
.sdx-container .pull-xs-11 {
right: 91.6666666667%;
}
.sdx-container .pull-xs-12 {
right: 100%;
}
.sdx-container .push-xs-0 {
left: auto;
}
.sdx-container .push-xs-1 {
left: 8.3333333333%;
}
.sdx-container .push-xs-2 {
left: 16.6666666667%;
}
.sdx-container .push-xs-3 {
left: 25%;
}
.sdx-container .push-xs-4 {
left: 33.3333333333%;
}
.sdx-container .push-xs-5 {
left: 41.6666666667%;
}
.sdx-container .push-xs-6 {
left: 50%;
}
.sdx-container .push-xs-7 {
left: 58.3333333333%;
}
.sdx-container .push-xs-8 {
left: 66.6666666667%;
}
.sdx-container .push-xs-9 {
left: 75%;
}
.sdx-container .push-xs-10 {
left: 83.3333333333%;
}
.sdx-container .push-xs-11 {
left: 91.6666666667%;
}
.sdx-container .push-xs-12 {
left: 100%;
}
.sdx-container .offset-xs-1 {
margin-left: 8.3333333333%;
}
.sdx-container .offset-xs-2 {
margin-left: 16.6666666667%;
}
.sdx-container .offset-xs-3 {
margin-left: 25%;
}
.sdx-container .offset-xs-4 {
margin-left: 33.3333333333%;
}
.sdx-container .offset-xs-5 {
margin-left: 41.6666666667%;
}
.sdx-container .offset-xs-6 {
margin-left: 50%;
}
.sdx-container .offset-xs-7 {
margin-left: 58.3333333333%;
}
.sdx-container .offset-xs-8 {
margin-left: 66.6666666667%;
}
.sdx-container .offset-xs-9 {
margin-left: 75%;
}
.sdx-container .offset-xs-10 {
margin-left: 83.3333333333%;
}
.sdx-container .offset-xs-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 480px) {
.sdx-container .col,
.sdx-container [class*=col-] {
padding-left: 4px;
padding-right: 4px;
}
.sdx-container .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%;
}
.sdx-container .col-sm-auto {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-sm-1 {
-webkit-flex: 0 0 8.3333333333%;
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-sm-2 {
-webkit-flex: 0 0 16.6666666667%;
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-sm-3 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-sm-4 {
-webkit-flex: 0 0 33.3333333333%;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-sm-5 {
-webkit-flex: 0 0 41.6666666667%;
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-sm-6 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-sm-7 {
-webkit-flex: 0 0 58.3333333333%;
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-sm-8 {
-webkit-flex: 0 0 66.6666666667%;
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-sm-9 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-sm-10 {
-webkit-flex: 0 0 83.3333333333%;
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-sm-11 {
-webkit-flex: 0 0 91.6666666667%;
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-sm-12 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.sdx-container .pull-sm-0 {
right: auto;
}
.sdx-container .pull-sm-1 {
right: 8.3333333333%;
}
.sdx-container .pull-sm-2 {
right: 16.6666666667%;
}
.sdx-container .pull-sm-3 {
right: 25%;
}
.sdx-container .pull-sm-4 {
right: 33.3333333333%;
}
.sdx-container .pull-sm-5 {
right: 41.6666666667%;
}
.sdx-container .pull-sm-6 {
right: 50%;
}
.sdx-container .pull-sm-7 {
right: 58.3333333333%;
}
.sdx-container .pull-sm-8 {
right: 66.6666666667%;
}
.sdx-container .pull-sm-9 {
right: 75%;
}
.sdx-container .pull-sm-10 {
right: 83.3333333333%;
}
.sdx-container .pull-sm-11 {
right: 91.6666666667%;
}
.sdx-container .pull-sm-12 {
right: 100%;
}
.sdx-container .push-sm-0 {
left: auto;
}
.sdx-container .push-sm-1 {
left: 8.3333333333%;
}
.sdx-container .push-sm-2 {
left: 16.6666666667%;
}
.sdx-container .push-sm-3 {
left: 25%;
}
.sdx-container .push-sm-4 {
left: 33.3333333333%;
}
.sdx-container .push-sm-5 {
left: 41.6666666667%;
}
.sdx-container .push-sm-6 {
left: 50%;
}
.sdx-container .push-sm-7 {
left: 58.3333333333%;
}
.sdx-container .push-sm-8 {
left: 66.6666666667%;
}
.sdx-container .push-sm-9 {
left: 75%;
}
.sdx-container .push-sm-10 {
left: 83.3333333333%;
}
.sdx-container .push-sm-11 {
left: 91.6666666667%;
}
.sdx-container .push-sm-12 {
left: 100%;
}
.sdx-container .offset-sm-1 {
margin-left: 8.3333333333%;
}
.sdx-container .offset-sm-2 {
margin-left: 16.6666666667%;
}
.sdx-container .offset-sm-3 {
margin-left: 25%;
}
.sdx-container .offset-sm-4 {
margin-left: 33.3333333333%;
}
.sdx-container .offset-sm-5 {
margin-left: 41.6666666667%;
}
.sdx-container .offset-sm-6 {
margin-left: 50%;
}
.sdx-container .offset-sm-7 {
margin-left: 58.3333333333%;
}
.sdx-container .offset-sm-8 {
margin-left: 66.6666666667%;
}
.sdx-container .offset-sm-9 {
margin-left: 75%;
}
.sdx-container .offset-sm-10 {
margin-left: 83.3333333333%;
}
.sdx-container .offset-sm-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 768px) {
.sdx-container .col,
.sdx-container [class*=col-] {
padding-left: 8px;
padding-right: 8px;
}
.sdx-container .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%;
}
.sdx-container .col-md-auto {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-md-1 {
-webkit-flex: 0 0 8.3333333333%;
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-md-2 {
-webkit-flex: 0 0 16.6666666667%;
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-md-3 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-md-4 {
-webkit-flex: 0 0 33.3333333333%;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-md-5 {
-webkit-flex: 0 0 41.6666666667%;
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-md-6 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-md-7 {
-webkit-flex: 0 0 58.3333333333%;
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-md-8 {
-webkit-flex: 0 0 66.6666666667%;
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-md-9 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-md-10 {
-webkit-flex: 0 0 83.3333333333%;
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-md-11 {
-webkit-flex: 0 0 91.6666666667%;
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-md-12 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.sdx-container .pull-md-0 {
right: auto;
}
.sdx-container .pull-md-1 {
right: 8.3333333333%;
}
.sdx-container .pull-md-2 {
right: 16.6666666667%;
}
.sdx-container .pull-md-3 {
right: 25%;
}
.sdx-container .pull-md-4 {
right: 33.3333333333%;
}
.sdx-container .pull-md-5 {
right: 41.6666666667%;
}
.sdx-container .pull-md-6 {
right: 50%;
}
.sdx-container .pull-md-7 {
right: 58.3333333333%;
}
.sdx-container .pull-md-8 {
right: 66.6666666667%;
}
.sdx-container .pull-md-9 {
right: 75%;
}
.sdx-container .pull-md-10 {
right: 83.3333333333%;
}
.sdx-container .pull-md-11 {
right: 91.6666666667%;
}
.sdx-container .pull-md-12 {
right: 100%;
}
.sdx-container .push-md-0 {
left: auto;
}
.sdx-container .push-md-1 {
left: 8.3333333333%;
}
.sdx-container .push-md-2 {
left: 16.6666666667%;
}
.sdx-container .push-md-3 {
left: 25%;
}
.sdx-container .push-md-4 {
left: 33.3333333333%;
}
.sdx-container .push-md-5 {
left: 41.6666666667%;
}
.sdx-container .push-md-6 {
left: 50%;
}
.sdx-container .push-md-7 {
left: 58.3333333333%;
}
.sdx-container .push-md-8 {
left: 66.6666666667%;
}
.sdx-container .push-md-9 {
left: 75%;
}
.sdx-container .push-md-10 {
left: 83.3333333333%;
}
.sdx-container .push-md-11 {
left: 91.6666666667%;
}
.sdx-container .push-md-12 {
left: 100%;
}
.sdx-container .offset-md-1 {
margin-left: 8.3333333333%;
}
.sdx-container .offset-md-2 {
margin-left: 16.6666666667%;
}
.sdx-container .offset-md-3 {
margin-left: 25%;
}
.sdx-container .offset-md-4 {
margin-left: 33.3333333333%;
}
.sdx-container .offset-md-5 {
margin-left: 41.6666666667%;
}
.sdx-container .offset-md-6 {
margin-left: 50%;
}
.sdx-container .offset-md-7 {
margin-left: 58.3333333333%;
}
.sdx-container .offset-md-8 {
margin-left: 66.6666666667%;
}
.sdx-container .offset-md-9 {
margin-left: 75%;
}
.sdx-container .offset-md-10 {
margin-left: 83.3333333333%;
}
.sdx-container .offset-md-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 1024px) {
.sdx-container .col,
.sdx-container [class*=col-] {
padding-left: 12px;
padding-right: 12px;
}
.sdx-container .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%;
}
.sdx-container .col-lg-auto {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-lg-1 {
-webkit-flex: 0 0 8.3333333333%;
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-lg-2 {
-webkit-flex: 0 0 16.6666666667%;
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-lg-3 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-lg-4 {
-webkit-flex: 0 0 33.3333333333%;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-lg-5 {
-webkit-flex: 0 0 41.6666666667%;
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-lg-6 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-lg-7 {
-webkit-flex: 0 0 58.3333333333%;
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-lg-8 {
-webkit-flex: 0 0 66.6666666667%;
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-lg-9 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-lg-10 {
-webkit-flex: 0 0 83.3333333333%;
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-lg-11 {
-webkit-flex: 0 0 91.6666666667%;
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-lg-12 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.sdx-container .pull-lg-0 {
right: auto;
}
.sdx-container .pull-lg-1 {
right: 8.3333333333%;
}
.sdx-container .pull-lg-2 {
right: 16.6666666667%;
}
.sdx-container .pull-lg-3 {
right: 25%;
}
.sdx-container .pull-lg-4 {
right: 33.3333333333%;
}
.sdx-container .pull-lg-5 {
right: 41.6666666667%;
}
.sdx-container .pull-lg-6 {
right: 50%;
}
.sdx-container .pull-lg-7 {
right: 58.3333333333%;
}
.sdx-container .pull-lg-8 {
right: 66.6666666667%;
}
.sdx-container .pull-lg-9 {
right: 75%;
}
.sdx-container .pull-lg-10 {
right: 83.3333333333%;
}
.sdx-container .pull-lg-11 {
right: 91.6666666667%;
}
.sdx-container .pull-lg-12 {
right: 100%;
}
.sdx-container .push-lg-0 {
left: auto;
}
.sdx-container .push-lg-1 {
left: 8.3333333333%;
}
.sdx-container .push-lg-2 {
left: 16.6666666667%;
}
.sdx-container .push-lg-3 {
left: 25%;
}
.sdx-container .push-lg-4 {
left: 33.3333333333%;
}
.sdx-container .push-lg-5 {
left: 41.6666666667%;
}
.sdx-container .push-lg-6 {
left: 50%;
}
.sdx-container .push-lg-7 {
left: 58.3333333333%;
}
.sdx-container .push-lg-8 {
left: 66.6666666667%;
}
.sdx-container .push-lg-9 {
left: 75%;
}
.sdx-container .push-lg-10 {
left: 83.3333333333%;
}
.sdx-container .push-lg-11 {
left: 91.6666666667%;
}
.sdx-container .push-lg-12 {
left: 100%;
}
.sdx-container .offset-lg-1 {
margin-left: 8.3333333333%;
}
.sdx-container .offset-lg-2 {
margin-left: 16.6666666667%;
}
.sdx-container .offset-lg-3 {
margin-left: 25%;
}
.sdx-container .offset-lg-4 {
margin-left: 33.3333333333%;
}
.sdx-container .offset-lg-5 {
margin-left: 41.6666666667%;
}
.sdx-container .offset-lg-6 {
margin-left: 50%;
}
.sdx-container .offset-lg-7 {
margin-left: 58.3333333333%;
}
.sdx-container .offset-lg-8 {
margin-left: 66.6666666667%;
}
.sdx-container .offset-lg-9 {
margin-left: 75%;
}
.sdx-container .offset-lg-10 {
margin-left: 83.3333333333%;
}
.sdx-container .offset-lg-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 1280px) {
.sdx-container .col,
.sdx-container [class*=col-] {
padding-left: 12px;
padding-right: 12px;
}
.sdx-container .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%;
}
.sdx-container .col-xl-auto {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-xl-1 {
-webkit-flex: 0 0 8.3333333333%;
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-xl-2 {
-webkit-flex: 0 0 16.6666666667%;
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-xl-3 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-xl-4 {
-webkit-flex: 0 0 33.3333333333%;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-xl-5 {
-webkit-flex: 0 0 41.6666666667%;
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-xl-6 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-xl-7 {
-webkit-flex: 0 0 58.3333333333%;
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-xl-8 {
-webkit-flex: 0 0 66.6666666667%;
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-xl-9 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-xl-10 {
-webkit-flex: 0 0 83.3333333333%;
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-xl-11 {
-webkit-flex: 0 0 91.6666666667%;
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-xl-12 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.sdx-container .pull-xl-0 {
right: auto;
}
.sdx-container .pull-xl-1 {
right: 8.3333333333%;
}
.sdx-container .pull-xl-2 {
right: 16.6666666667%;
}
.sdx-container .pull-xl-3 {
right: 25%;
}
.sdx-container .pull-xl-4 {
right: 33.3333333333%;
}
.sdx-container .pull-xl-5 {
right: 41.6666666667%;
}
.sdx-container .pull-xl-6 {
right: 50%;
}
.sdx-container .pull-xl-7 {
right: 58.3333333333%;
}
.sdx-container .pull-xl-8 {
right: 66.6666666667%;
}
.sdx-container .pull-xl-9 {
right: 75%;
}
.sdx-container .pull-xl-10 {
right: 83.3333333333%;
}
.sdx-container .pull-xl-11 {
right: 91.6666666667%;
}
.sdx-container .pull-xl-12 {
right: 100%;
}
.sdx-container .push-xl-0 {
left: auto;
}
.sdx-container .push-xl-1 {
left: 8.3333333333%;
}
.sdx-container .push-xl-2 {
left: 16.6666666667%;
}
.sdx-container .push-xl-3 {
left: 25%;
}
.sdx-container .push-xl-4 {
left: 33.3333333333%;
}
.sdx-container .push-xl-5 {
left: 41.6666666667%;
}
.sdx-container .push-xl-6 {
left: 50%;
}
.sdx-container .push-xl-7 {
left: 58.3333333333%;
}
.sdx-container .push-xl-8 {
left: 66.6666666667%;
}
.sdx-container .push-xl-9 {
left: 75%;
}
.sdx-container .push-xl-10 {
left: 83.3333333333%;
}
.sdx-container .push-xl-11 {
left: 91.6666666667%;
}
.sdx-container .push-xl-12 {
left: 100%;
}
.sdx-container .offset-xl-1 {
margin-left: 8.3333333333%;
}
.sdx-container .offset-xl-2 {
margin-left: 16.6666666667%;
}
.sdx-container .offset-xl-3 {
margin-left: 25%;
}
.sdx-container .offset-xl-4 {
margin-left: 33.3333333333%;
}
.sdx-container .offset-xl-5 {
margin-left: 41.6666666667%;
}
.sdx-container .offset-xl-6 {
margin-left: 50%;
}
.sdx-container .offset-xl-7 {
margin-left: 58.3333333333%;
}
.sdx-container .offset-xl-8 {
margin-left: 66.6666666667%;
}
.sdx-container .offset-xl-9 {
margin-left: 75%;
}
.sdx-container .offset-xl-10 {
margin-left: 83.3333333333%;
}
.sdx-container .offset-xl-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 1440px) {
.sdx-container .col,
.sdx-container [class*=col-] {
padding-left: 12px;
padding-right: 12px;
}
.sdx-container .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%;
}
.sdx-container .col-ul-auto {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-ul-1 {
-webkit-flex: 0 0 8.3333333333%;
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-ul-2 {
-webkit-flex: 0 0 16.6666666667%;
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-ul-3 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-ul-4 {
-webkit-flex: 0 0 33.3333333333%;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-ul-5 {
-webkit-flex: 0 0 41.6666666667%;
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-ul-6 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-ul-7 {
-webkit-flex: 0 0 58.3333333333%;
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-ul-8 {
-webkit-flex: 0 0 66.6666666667%;
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-ul-9 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-ul-10 {
-webkit-flex: 0 0 83.3333333333%;
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-ul-11 {
-webkit-flex: 0 0 91.6666666667%;
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-ul-12 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.sdx-container .pull-ul-0 {
right: auto;
}
.sdx-container .pull-ul-1 {
right: 8.3333333333%;
}
.sdx-container .pull-ul-2 {
right: 16.6666666667%;
}
.sdx-container .pull-ul-3 {
right: 25%;
}
.sdx-container .pull-ul-4 {
right: 33.3333333333%;
}
.sdx-container .pull-ul-5 {
right: 41.6666666667%;
}
.sdx-container .pull-ul-6 {
right: 50%;
}
.sdx-container .pull-ul-7 {
right: 58.3333333333%;
}
.sdx-container .pull-ul-8 {
right: 66.6666666667%;
}
.sdx-container .pull-ul-9 {
right: 75%;
}
.sdx-container .pull-ul-10 {
right: 83.3333333333%;
}
.sdx-container .pull-ul-11 {
right: 91.6666666667%;
}
.sdx-container .pull-ul-12 {
right: 100%;
}
.sdx-container .push-ul-0 {
left: auto;
}
.sdx-container .push-ul-1 {
left: 8.3333333333%;
}
.sdx-container .push-ul-2 {
left: 16.6666666667%;
}
.sdx-container .push-ul-3 {
left: 25%;
}
.sdx-container .push-ul-4 {
left: 33.3333333333%;
}
.sdx-container .push-ul-5 {
left: 41.6666666667%;
}
.sdx-container .push-ul-6 {
left: 50%;
}
.sdx-container .push-ul-7 {
left: 58.3333333333%;
}
.sdx-container .push-ul-8 {
left: 66.6666666667%;
}
.sdx-container .push-ul-9 {
left: 75%;
}
.sdx-container .push-ul-10 {
left: 83.3333333333%;
}
.sdx-container .push-ul-11 {
left: 91.6666666667%;
}
.sdx-container .push-ul-12 {
left: 100%;
}
.sdx-container .offset-ul-1 {
margin-left: 8.3333333333%;
}
.sdx-container .offset-ul-2 {
margin-left: 16.6666666667%;
}
.sdx-container .offset-ul-3 {
margin-left: 25%;
}
.sdx-container .offset-ul-4 {
margin-left: 33.3333333333%;
}
.sdx-container .offset-ul-5 {
margin-left: 41.6666666667%;
}
.sdx-container .offset-ul-6 {
margin-left: 50%;
}
.sdx-container .offset-ul-7 {
margin-left: 58.3333333333%;
}
.sdx-container .offset-ul-8 {
margin-left: 66.6666666667%;
}
.sdx-container .offset-ul-9 {
margin-left: 75%;
}
.sdx-container .offset-ul-10 {
margin-left: 83.3333333333%;
}
.sdx-container .offset-ul-11 {
margin-left: 91.6666666667%;
}
}
.sdx-container .loader-spinner {
position: relative;
}
.sdx-container .loader-spinner, .sdx-container .loader-spinner--large {
background-size: 3750px 50px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url("../images/loader-spinner-navy-large.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) {
.sdx-container .loader-spinner, .sdx-container .loader-spinner--large {
background-image: url("../images/loader-spinner-navy-large@2x.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;
}
}
.sdx-container .loader-spinner.loader-spinner--plain, .sdx-container .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.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) {
.sdx-container .loader-spinner.loader-spinner--plain, .sdx-container .loader-spinner--large.loader-spinner--plain {
background-image: url("../images/loader-spinner-plain-large@2x.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;
}
}
.sdx-container .loader-spinner--small {
background-size: 1875px 25px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url("../images/loader-spinner-navy-small.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) {
.sdx-container .loader-spinner--small {
background-image: url("../images/loader-spinner-navy-small@2x.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;
}
}
.sdx-container .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.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) {
.sdx-container .loader-spinner--small.loader-spinner--plain {
background-image: url("../images/loader-spinner-plain-small@2x.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;
}
}
.sdx-container .bg--dark .loader-spinner, .sdx-container .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.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) {
.sdx-container .bg--dark .loader-spinner, .sdx-container .bg--dark .loader-spinner--large {
background-image: url("../images/loader-spinner-dark-large@2x.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;
}
}
.sdx-container .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.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) {
.sdx-container .bg--dark .loader-spinner--small {
background-image: url("../images/loader-spinner-dark-small@2x.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;
}
}
.sdx-container .bg {
color: #333;
}
.sdx-container .bg--light .primary-navy, .sdx-container .bg--gray .primary-navy {
color: #015;
}
.sdx-container .bg--light .primary-gray, .sdx-container .bg--gray .primary-gray {
color: #333;
}
.sdx-container .bg--light .secondary, .sdx-container .bg--gray .secondary {
color: #666;
}
.sdx-container .bg--light {
background-color: #fff;
color: #333;
}
.sdx-container .bg--gray {
background-color: #dde3e7;
color: #333;
}
.sdx-container .bg--dark {
background-color: #015;
color: #fff;
}
.sdx-container hr,
.sdx-container .divider {
margin: 32px 0;
border: 0;
border-bottom: 1px solid #d6d6d6;
}
.sdx-container hr--light-gray,
.sdx-container .divider--light-gray {
border-bottom-color: #d6d6d6;
}
.sdx-container hr--mid-gray,
.sdx-container .divider--mid-gray {
border-bottom-color: #adadad;
}
.sdx-container hr--dark-gray,
.sdx-container .divider--dark-gray {
border-bottom-color: #5c5c5c;
}
.sdx-container hr--white,
.sdx-container .divider--white {
border-bottom-color: rgba(255, 255, 255, 0.6);
}
.sdx-container .bg--dark hr,
.sdx-container .bg--dark .divider {
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.sdx-container a,
.sdx-container a.link,
.sdx-container 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;
}
.sdx-container a:hover, .sdx-container a:focus,
.sdx-container a.link:hover,
.sdx-container a.link:focus,
.sdx-container button.link:hover,
.sdx-container button.link:focus {
border-bottom: 1px solid #0851da;
color: #0851da;
}
.sdx-container a:focus,
.sdx-container a.link:focus,
.sdx-container button.link:focus {
outline: none;
}
.sdx-container a + a, .sdx-container a + a.link, .sdx-container a + button.link,
.sdx-container a.link + a,
.sdx-container a.link + a.link,
.sdx-container a.link + button.link,
.sdx-container button.link + a,
.sdx-container button.link + a.link,
.sdx-container button.link + button.link {
margin-left: 24px;
}
.sdx-container a--white, .sdx-container a--white:hover, .sdx-container a--white:focus,
.sdx-container a.link--white,
.sdx-container a.link--white:hover,
.sdx-container a.link--white:focus,
.sdx-container button.link--white,
.sdx-container button.link--white:hover,
.sdx-container button.link--white:focus {
color: #fff;
border-color: #fff;
}
.sdx-container a--white:focus,
.sdx-container a.link--white:focus,
.sdx-container button.link--white:focus {
box-shadow: 0 0 2px #fff;
border: 1px solid;
}
.sdx-container p a + a, .sdx-container p a + a.link, .sdx-container p a + button.link,
.sdx-container p a.link + a,
.sdx-container p a.link + a.link,
.sdx-container p a.link + button.link,
.sdx-container p button.link + a,
.sdx-container p button.link + a.link,
.sdx-container p button.link + button.link {
margin-left: 0;
}
.sdx-container .link--dark,
.sdx-container .bg--dark a,
.sdx-container .bg--dark a.link,
.sdx-container .bg--dark button.link {
border-bottom: 1px solid #fff;
color: #fff;
}
.sdx-container .link--dark:hover,
.sdx-container .bg--dark a:hover,
.sdx-container .bg--dark button.link:hover {
border-bottom: 1px solid #fff;
color: #fff;
}
.sdx-container .link--dark:focus,
.sdx-container .bg--dark a:focus,
.sdx-container .bg--dark button.link:focus {
box-shadow: 0 0 1px #fff;
}
.sdx-container .button-group {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: -8px -6px;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sdx-container .button-group .button {
margin: 8px 6px;
}
.sdx-container .button-group--responsive {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.sdx-container .button-group--responsive .button {
width: 100%;
}
@media (min-width: 480px) {
.sdx-container .button-group--responsive .button {
width: auto;
}
}
.sdx-container .button-group--left {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media (min-width: 480px) {
.sdx-container .button-group--fill {
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.sdx-container .button-group--fill .button {
width: 100%;
min-width: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.sdx-container .button-group + .button-group {
margin-top: 8px;
}
.sdx-container button,
.sdx-container .button {
cursor: pointer;
}
.sdx-container .button {
line-height: 24px;
letter-spacing: -0.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;
}
.sdx-container .button:active {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
.sdx-container .button.disabled, .sdx-container .button:disabled {
cursor: not-allowed;
pointer-events: none;
}
.sdx-container .button, .sdx-container .button--primary {
border: 0;
border-bottom-style: none;
border-color: #1781e3;
background-color: #1781e3;
color: #fff;
}
.sdx-container .button:hover, .sdx-container .button:focus, .sdx-container .button:active, .sdx-container .button--primary:hover, .sdx-container .button--primary:focus, .sdx-container .button--primary:active {
border: 0;
border-bottom-style: none;
border-color: #0851da;
background-color: #0851da;
color: #fff;
}
.sdx-container .button.disabled, .sdx-container .button:disabled, .sdx-container .button--primary.disabled, .sdx-container .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);
}
.sdx-container .button--secondary {
border: 0;
border-bottom-style: none;
border-color: #cfd5d9;
background-color: #cfd5d9;
color: #333;
}
.sdx-container .button--secondary:hover, .sdx-container .button--secondary:focus, .sdx-container .button--secondary:active {
border: 0;
border-bottom-style: none;
border-color: #b1b9be;
background-color: #b1b9be;
color: #333;
}
.sdx-container .button--secondary.disabled, .sdx-container .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);
}
.sdx-container .button--confirm {
border: 0;
border-bottom-style: none;
border-color: #25b252;
background-color: #25b252;
color: #fff;
}
.sdx-container .button--confirm:hover, .sdx-container .button--confirm:focus, .sdx-container .button--confirm:active {
border: 0;
border-bottom-style: none;
border-color: #008236;
background-color: #008236;
color: #fff;
}
.sdx-container .button--confirm.disabled, .sdx-container .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);
}
.sdx-container .button__icon {
padding: 12px 24px 12px 16px;
}
.sdx-container .button .icon {
margin-right: 7px;
font-size: 18px;
}
.sdx-container .button--thin,
.sdx-container .bg--dark .button {
padding: 11px 23px;
}
.sdx-container .button--thin, .sdx-container .button--thin.button--primary,
.sdx-container .bg--dark .button {
border: 1px solid #1781e3;
background-color: transparent;
color: #fff;
}
.sdx-container .button--thin:hover, .sdx-container .button--thin:focus, .sdx-container .button--thin:active, .sdx-container .button--thin.button--primary:hover, .sdx-container .button--thin.button--primary:focus, .sdx-container .button--thin.button--primary:active,
.sdx-container .bg--dark .button:hover,
.sdx-container .bg--dark .button:focus,
.sdx-container .bg--dark .button:active {
border-color: #0851da;
background-color: rgba(23, 129, 227, 0.15);
color: #fff;
}
.sdx-container .button--thin.disabled, .sdx-container .button--thin:disabled, .sdx-container .button--thin.button--primary.disabled, .sdx-container .button--thin.button--primary:disabled,
.sdx-container .bg--dark .disabled.button,
.sdx-container .bg--dark .button:disabled {
border-color: rgba(23, 129, 227, 0.4);
background-color: transparent;
color: rgba(255, 255, 255, 0.4);
}
.sdx-container .button--thin.button--secondary,
.sdx-container .bg--dark .button--secondary.button {
border: 1px solid #cfd5d9;
background-color: transparent;
color: #fff;
}
.sdx-container .button--thin.button--secondary:hover, .sdx-container .button--thin.button--secondary:focus, .sdx-container .button--thin.button--secondary:active,
.sdx-container .bg--dark .button--secondary.button:hover,
.sdx-container .bg--dark .button--secondary.button:focus,
.sdx-container .bg--dark .button--secondary.button:active {
border-color: #b1b9be;
background-color: rgba(207, 213, 217, 0.15);
color: #fff;
}
.sdx-container .button--thin.button--secondary.disabled, .sdx-container .button--thin.button--secondary:disabled,
.sdx-container .bg--dark .button--secondary.disabled.button,
.sdx-container .bg--dark .button--secondary.button:disabled {
border-color: rgba(207, 213, 217, 0.4);
background-color: transparent;
color: rgba(255, 255, 255, 0.4);
}
.sdx-container .button--thin.button--confirm,
.sdx-container .bg--dark .button--confirm.button {
border: 1px solid #25b252;
background-color: transparent;
color: #fff;
}
.sdx-container .button--thin.button--confirm:hover, .sdx-container .button--thin.button--confirm:focus, .sdx-container .button--thin.button--confirm:active,
.sdx-container .bg--dark .button--confirm.button:hover,
.sdx-container .bg--dark .button--confirm.button:focus,
.sdx-container .bg--dark .button--confirm.button:active {
border-color: #008236;
background-color: rgba(37, 178, 82, 0.15);
color: #fff;
}
.sdx-container .button--thin.button--confirm.disabled, .sdx-container .button--thin.button--confirm:disabled,
.sdx-container .bg--dark .button--confirm.disabled.button,
.sdx-container .bg--dark .button--confirm.button:disabled {
border-color: rgba(37, 178, 82, 0.4);
background-color: transparent;
color: rgba(255, 255, 255, 0.4);
}
.sdx-container .bg--dark a.button:focus {
outline: 1px dotted #0851da;
}
.sdx-container .button-group--responsive .button--full,
.sdx-container .button--full,
.sdx-container input[type=submit].button--full,
.sdx-container input[type=reset].button--full,
.sdx-container input[type=button].button--full {
display: block;
width: 100%;
}
.sdx-container .button-group--responsive .button--full:active,
.sdx-container .button--full:active,
.sdx-container input[type=submit].button--full:active,
.sdx-container input[type=reset].button--full:active,
.sdx-container input[type=button].button--full:active {
-webkit-transform: scale(0.9925, 0.98);
transform: scale(0.9925, 0.98);
}
.sdx-container .button--responsive,
.sdx-container input[type=submit].button--responsive,
.sdx-container input[type=reset].button--responsive,
.sdx-container input[type=button].button--responsive {
width: 100%;
}
@media (min-width: 480px) {
.sdx-container .button--responsive,
.sdx-container input[type=submit].button--responsive,
.sdx-container input[type=reset].button--responsive,
.sdx-container input[type=button].button--responsive {
width: auto;
}
}
.sdx-container fieldset {
margin: 0;
border: 0;
padding: 0;
min-width: 0;
}
.sdx-container legend {
display: block;
border: 0;
padding: 0;
width: 100%;
line-height: inherit;
}
.sdx-container input[type=search] {
box-sizing: border-box;
}
.sdx-container input[type=file] {
display: block;
}
.sdx-container input[type=radio],
.sdx-container input[type=checkbox] {
padding: 0;
box-sizing: border-box;
}
.sdx-container label,
.sdx-container .label {
display: inline-block;
margin-bottom: 4px;
cursor: text;
max-width: 100%;
color: #666;
font-size: 14px;
}
.sdx-container .bg--dark label,
.sdx-container .bg--dark .label {
color: #fff;
}
.sdx-container input,
.sdx-container textarea {
-webkit-border-radius: 0;
}
.sdx-container input::-ms-clear,
.sdx-container textarea::-ms-clear {
display: none;
}
@-webkit-keyframes onAutoFillStart {
from {
/* Empty */
}
to {
/* Empty */
}
}
@keyframes onAutoFillStart {
from {
/* Empty */
}
to {
/* Empty */
}
}
.sdx-container input:-webkit-autofill,
.sdx-container textarea:-webkit-autofill {
-webkit-animation-name: onAutoFillStart;
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}
.sdx-container .input-field {
position: relative;
margin-bottom: 11px;
padding: 0;
}
.sdx-container .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);
}
.sdx-container .input-field .icon {
margin-right: 4px;
}
.sdx-container .input-field:first-child input:not([type]),
.sdx-container .input-field:first-child input[type=text],
.sdx-container .input-field:first-child input[type=password],
.sdx-container .input-field:first-child input[type=email],
.sdx-container .input-field:first-child input[type=url],
.sdx-container .input-field:first-child input[type=time],
.sdx-container .input-field:first-child input[type=date],
.sdx-container .input-field:first-child input[type=datetime],
.sdx-container .input-field:first-child input[type=datetime-local],
.sdx-container .input-field:first-child input[type=tel],
.sdx-container .input-field:first-child input[type=number],
.sdx-container .input-field:first-child input[type=search],
.sdx-container .input-field:first-child textarea {
margin-top: 0;
}
.sdx-container .input-field input,
.sdx-container .input-field textarea {
-webkit-border-radius: 0;
}
.sdx-container .input-field input::-ms-clear,
.sdx-container .input-field textarea::-ms-clear {
display: none;
}
.sdx-container .input-field input:not([type]),
.sdx-container .input-field input[type=text],
.sdx-container .input-field input[type=password],
.sdx-container .input-field input[type=email],
.sdx-container .input-field input[type=url],
.sdx-container .input-field input[type=time],
.sdx-container .input-field input[type=date],
.sdx-container .input-field input[type=datetime],
.sdx-container .input-field input[type=datetime-local],
.sdx-container .input-field input[type=tel],
.sdx-container .input-field input[type=number],
.sdx-container .input-field input[type=search],
.sdx-container .input-field textarea {
line-height: 24px;
letter-spacing: -0.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;
}
.sdx-container .input-field input:not([type]) + label,
.sdx-container .input-field input[type=text] + label,
.sdx-container .input-field input[type=password] + label,
.sdx-container .input-field input[type=email] + label,
.sdx-container .input-field input[type=url] + label,
.sdx-container .input-field input[type=time] + label,
.sdx-container .input-field input[type=date] + label,
.sdx-container .input-field input[type=datetime] + label,
.sdx-container .input-field input[type=datetime-local] + label,
.sdx-container .input-field input[type=tel] + label,
.sdx-container .input-field input[type=number] + label,
.sdx-container .input-field input[type=search] + label,
.sdx-container .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;
}
.sdx-container .input-field input:not([type]) ~ .icon,
.sdx-container .input-field input[type=text] ~ .icon,
.sdx-container .input-field input[type=password] ~ .icon,
.sdx-container .input-field input[type=email] ~ .icon,
.sdx-container .input-field input[type=url] ~ .icon,
.sdx-container .input-field input[type=time] ~ .icon,
.sdx-container .input-field input[type=date] ~ .icon,
.sdx-container .input-field input[type=datetime] ~ .icon,
.sdx-container .input-field input[type=datetime-local] ~ .icon,
.sdx-container .input-field input[type=tel] ~ .icon,
.sdx-container .input-field input[type=number] ~ .icon,
.sdx-container .input-field input[type=search] ~ .icon,
.sdx-container .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;
}
.sdx-container .input-field input:not([type])::-webkit-input-placeholder,
.sdx-container .input-field input[type=text]::-webkit-input-placeholder,
.sdx-container .input-field input[type=password]::-webkit-input-placeholder,
.sdx-container .input-field input[type=email]::-webkit-input-placeholder,
.sdx-container .input-field input[type=url]::-webkit-input-placeholder,
.sdx-container .input-field input[type=time]::-webkit-input-placeholder,
.sdx-container .input-field input[type=date]::-webkit-input-placeholder,
.sdx-container .input-field input[type=datetime]::-webkit-input-placeholder,
.sdx-container .input-field input[type=datetime-local]::-webkit-input-placeholder,
.sdx-container .input-field input[type=tel]::-webkit-input-placeholder,
.sdx-container .input-field input[type=number]::-webkit-input-placeholder,
.sdx-container .input-field input[type=search]::-webkit-input-placeholder,
.sdx-container .input-field textarea::-webkit-input-placeholder {
transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
color: #bbb;
}
.sdx-container .input-field input:not([type])::-moz-placeholder,
.sdx-container .input-field input[type=text]::-moz-placeholder,
.sdx-container .input-field input[type=password]::-moz-placeholder,
.sdx-container .input-field input[type=email]::-moz-placeholder,
.sdx-container .input-field input[type=url]::-moz-placeholder,
.sdx-container .input-field input[type=time]::-moz-placeholder,
.sdx-container .input-field input[type=date]::-moz-placeholder,
.sdx-container .input-field input[type=datetime]::-moz-placeholder,
.sdx-container .input-field input[type=datetime-local]::-moz-placeholder,
.sdx-container .input-field input[type=tel]::-moz-placeholder,
.sdx-container .input-field input[type=number]::-moz-placeholder,
.sdx-container .input-field input[type=search]::-moz-placeholder,
.sdx-container .input-field textarea::-moz-placeholder {
transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
color: #bbb;
}
.sdx-container .input-field input:not([type])::-ms-input-placeholder,
.sdx-container .input-field input[type=text]::-ms-input-placeholder,
.sdx-container .input-field input[type=password]::-ms-input-placeholder,
.sdx-container .input-field input[type=email]::-ms-input-placeholder,
.sdx-container .input-field input[type=url]::-ms-input-placeholder,
.sdx-container .input-field input[type=time]::-ms-input-placeholder,
.sdx-container .input-field input[type=date]::-ms-input-placeholder,
.sdx-container .input-field input[type=datetime]::-ms-input-placeholder,
.sdx-container .input-field input[type=datetime-local]::-ms-input-placeholder,
.sdx-container .input-field input[type=tel]::-ms-input-placeholder,
.sdx-container .input-field input[type=number]::-ms-input-placeholder,
.sdx-container .input-field input[type=search]::-ms-input-placeholder,
.sdx-container .input-field textarea::-ms-input-placeholder {
transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
color: #bbb;
}
.sdx-container .input-field input:not([type])::placeholder,
.sdx-container .input-field input[type=text]::placeholder,
.sdx-container .input-field input[type=password]::placeholder,
.sdx-container .input-field input[type=email]::placeholder,
.sdx-container .input-field input[type=url]::placeholder,
.sdx-container .input-field input[type=time]::placeholder,
.sdx-container .input-field input[type=date]::placeholder,
.sdx-container .input-field input[type=datetime]::placeholder,
.sdx-container .input-field input[type=datetime-local]::placeholder,
.sdx-container .input-field input[type=tel]::placeholder,
.sdx-container .input-field input[type=number]::placeholder,
.sdx-container .input-field input[type=search]::placeholder,
.sdx-container .input-field textarea::placeholder {
transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
color: #bbb;
}
.sdx-container .input-field input:not([type]):-ms-input-placeholder,
.sdx-container .input-field input[type=text]:-ms-input-placeholder,
.sdx-container .input-field input[type=password]:-ms-input-placeholder,
.sdx-container .input-field input[type=email]:-ms-input-placeholder,
.sdx-container .input-field input[type=url]:-ms-input-placeholder,
.sdx-container .input-field input[type=time]:-ms-input-placeholder,
.sdx-container .input-field input[type=date]:-ms-input-placeholder,
.sdx-container .input-field input[type=datetime]:-ms-input-placeholder,
.sdx-container .input-field input[type=datetime-local]:-ms-input-placeholder,
.sdx-container .input-field input[type=tel]:-ms-input-placeholder,
.sdx-container .input-field input[type=number]:-ms-input-placeholder,
.sdx-container .input-field input[type=search]:-ms-input-placeholder,
.sdx-container .input-field textarea:-ms-input-placeholder {
color: #bbb !important;
}
.sdx-container .input-field input:not([type]):focus:not([readonly]),
.sdx-container .input-field input[type=text]:focus:not([readonly]),
.sdx-container .input-field input[type=password]:focus:not([readonly]),
.sdx-container .input-field input[type=email]:focus:not([readonly]),
.sdx-container .input-field input[type=url]:focus:not([readonly]),
.sdx-container .input-field input[type=time]:focus:not([readonly]),
.sdx-container .input-field input[type=date]:focus:not([readonly]),
.sdx-container .input-field input[type=datetime]:focus:not([readonly]),
.sdx-container .input-field input[type=datetime-local]:focus:not([readonly]),
.sdx-container .input-field input[type=tel]:focus:not([readonly]),
.sdx-container .input-field input[type=number]:focus:not([readonly]),
.sdx-container .input-field input[type=search]:focus:not([readonly]),
.sdx-container .input-field textarea:focus:not([readonly]) {
margin-top: 29px;
border-color: #1781e3;
color: #333;
}
.sdx-container .input-field input:not([type]):focus:not([readonly]) + label,
.sdx-container .input-field input[type=text]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=password]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=email]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=url]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=time]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=date]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=datetime]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=datetime-local]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=tel]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=number]:focus:not([readonly]) + label,
.sdx-container .input-field input[type=search]:focus:not([readonly]) + label,
.sdx-container .input-field textarea:focus:not([readonly]) + label {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.sdx-container .input-field input:not([type]):focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=text]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=password]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=email]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=url]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=time]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=date]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=datetime]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=datetime-local]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=tel]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=number]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field input[type=search]:focus:not([readonly])::-webkit-input-placeholder,
.sdx-container .input-field textarea:focus:not([readonly])::-webkit-input-placeholder {
opacity: 0;
}
.sdx-container .input-field input:not([type]):focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=text]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=password]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=email]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=url]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=time]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=date]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=datetime]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=datetime-local]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=tel]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=number]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field input[type=search]:focus:not([readonly])::-moz-placeholder,
.sdx-container .input-field textarea:focus:not([readonly])::-moz-placeholder {
opacity: 0;
}
.sdx-container .input-field input:not([type]):focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=text]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=password]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=email]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=url]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=time]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=date]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=datetime]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=datetime-local]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=tel]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=number]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field input[type=search]:focus:not([readonly])::-ms-input-placeholder,
.sdx-container .input-field textarea:focus:not([readonly])::-ms-input-placeholder {
opacity: 0;
}
.sdx-container .input-field input:not([type]):focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=text]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=password]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=email]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=url]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=time]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=date]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=datetime]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=datetime-local]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=tel]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=number]:focus:not([readonly])::placeholder,
.sdx-container .input-field input[type=search]:focus:not([readonly])::placeholder,
.sdx-container .input-field textarea:focus:not([readonly])::placeholder {
opacity: 0;
}
.sdx-container .input-field input:not([type]):disabled, .sdx-container .input-field input:not([type])[readonly],
.sdx-container .input-field input[type=text]:disabled,
.sdx-container .input-field input[type=text][readonly],
.sdx-container .input-field input[type=password]:disabled,
.sdx-container .input-field input[type=password][readonly],
.sdx-container .input-field input[type=email]:disabled,
.sdx-container .input-field input[type=email][readonly],
.sdx-container .input-field input[type=url]:disabled,
.sdx-container .input-field input[type=url][readonly],
.sdx-container .input-field input[type=time]:disabled,
.sdx-container .input-field input[type=time][readonly],
.sdx-container .input-field input[type=date]:disabled,
.sdx-container .input-field input[type=date][readonly],
.sdx-container .input-field input[type=datetime]:disabled,
.sdx-container .input-field input[type=datetime][readonly],
.sdx-container .input-field input[type=datetime-local]:disabled,
.sdx-container .input-field input[type=datetime-local][readonly],
.sdx-container .input-field input[type=tel]:disabled,
.sdx-container .input-field input[type=tel][readonly],
.sdx-container .input-field input[type=number]:disabled,
.sdx-container .input-field input[type=number][readonly],
.sdx-container .input-field input[type=search]:disabled,
.sdx-container .input-field input[type=search][readonly],
.sdx-container .input-field textarea:disabled,
.sdx-container .input-field textarea[readonly] {
opacity: 1;
border-color: #dde3e7;
background-color: #f8fafb;
color: #bbb;
}
.sdx-container .input-field input:not([type]):disabled + label, .sdx-container .input-field input:not([type])[readonly] + label,
.sdx-container .input-field input[type=text]:disabled + label,
.sdx-container .input-field input[type=text][readonly] + label,
.sdx-container .input-field input[type=password]:disabled + label,
.sdx-container .input-field input[type=password][readonly] + label,
.sdx-container .input-field input[type=email]:disabled + label,
.sdx-container .input-field input[type=email][readonly] + label,
.sdx-container .input-field input[type=url]:disabled + label,
.sdx-container .input-field input[type=url][readonly] + label,
.sdx-container .input-field input[type=time]:disabled + label,
.sdx-container .input-field input[type=time][readonly] + label,
.sdx-container .input-field input[type=date]:disabled + label,
.sdx-container .input-field input[type=date][readonly] + label,
.sdx-container .input-field input[type=datetime]:disabled + label,
.sdx-container .input-field input[type=datetime][readonly] + label,
.sdx-container .input-field input[type=datetime-local]:disabled + label,
.sdx-container .input-field input[type=datetime-local][readonly] + label,
.sdx-container .input-field input[type=tel]:disabled + label,
.sdx-container .input-field input[type=tel][readonly] + label,
.sdx-container .input-field input[type=number]:disabled + label,
.sdx-container .input-field input[type=number][readonly] + label,
.sdx-container .input-field input[type=search]:disabled + label,
.sdx-container .input-field input[type=search][readonly] + label,
.sdx-container .input-field textarea:disabled + label,
.sdx-container .input-field textarea[readonly] + label {
color: #666;
}
.sdx-container .input-field input:not([type]):disabled,
.sdx-container .input-field input[type=text]:disabled,
.sdx-container .input-field input[type=password]:disabled,
.sdx-container .input-field input[type=email]:disabled,
.sdx-container .input-field input[type=url]:disabled,
.sdx-container .input-field input[type=time]:disabled,
.sdx-container .input-field input[type=date]:disabled,
.sdx-container .input-field input[type=datetime]:disabled,
.sdx-container .input-field input[type=datetime-local]:disabled,
.sdx-container .input-field input[type=tel]:disabled,
.sdx-container .input-field input[type=number]:disabled,
.sdx-container .input-field input[type=search]:disabled,
.sdx-container .input-field textarea:disabled {
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sdx-container .input-field input:not([type]).valid, .sdx-container .input-field input:not([type]):valid, .sdx-container .input-field input:not([type]).invalid, .sdx-container .input-field input:not([type]):invalid,
.sdx-container .input-field input[type=text].valid,
.sdx-container .input-field input[type=text]:valid,
.sdx-container .input-field input[type=text].invalid,
.sdx-container .input-field input[type=text]:invalid,
.sdx-container .input-field input[type=password].valid,
.sdx-container .input-field input[type=password]:valid,
.sdx-container .input-field input[type=password].invalid,
.sdx-container .input-field input[type=password]:invalid,
.sdx-container .input-field input[type=email].valid,
.sdx-container .input-field input[type=email]:valid,
.sdx-container .input-field input[type=email].invalid,
.sdx-container .input-field input[type=email]:invalid,
.sdx-container .input-field input[type=url].valid,
.sdx-container .input-field input[type=url]:valid,
.sdx-container .input-field input[type=url].invalid,
.sdx-container .input-field input[type=url]:invalid,
.sdx-container .input-field input[type=time].valid,
.sdx-container .input-field input[type=time]:valid,
.sdx-container .input-field input[type=time].invalid,
.sdx-container .input-field input[type=time]:invalid,
.sdx-container .input-field input[type=date].valid,
.sdx-container .input-field input[type=date]:valid,
.sdx-container .input-field input[type=date].invalid,
.sdx-container .input-field input[type=date]:invalid,
.sdx-container .input-field input[type=datetime].valid,
.sdx-container .input-field input[type=datetime]:valid,
.sdx-container .input-field input[type=datetime].invalid,
.sdx-container .input-field input[type=datetime]:invalid,
.sdx-container .input-field input[type=datetime-local].valid,
.sdx-container .input-field input[type=datetime-local]:valid,
.sdx-container .input-field input[type=datetime-local].invalid,
.sdx-container .input-field input[type=datetime-local]:invalid,
.sdx-container .input-field input[type=tel].valid,
.sdx-container .input-field input[type=tel]:valid,
.sdx-container .input-field input[type=tel].invalid,
.sdx-container .input-field input[type=tel]:invalid,
.sdx-container .input-field input[type=number].valid,
.sdx-container .input-field input[type=number]:valid,
.sdx-container .input-field input[type=number].invalid,
.sdx-container .input-field input[type=number]:invalid,
.sdx-container .input-field input[type=search].valid,
.sdx-container .input-field input[type=search]:valid,
.sdx-container .input-field input[type=search].invalid,
.sdx-container .input-field input[type=search]:invalid,
.sdx-container .input-field textarea.valid,
.sdx-container .input-field textarea:valid,
.sdx-container .input-field textarea.invalid,
.sdx-container .input-field textarea:invalid {
box-shadow: none;
background-repeat: no-repeat;
background-position: center right 16px;
background-size: 22px 22px;
}
.sdx-container .input-field input:not([type]).valid ~ .icon, .sdx-container .input-field input:not([type]):valid ~ .icon, .sdx-container .input-field input:not([type]).invalid ~ .icon, .sdx-container .input-field input:not([type]):invalid ~ .icon,
.sdx-container .input-field input[type=text].valid ~ .icon,
.sdx-container .input-field input[type=text]:valid ~ .icon,
.sdx-container .input-field input[type=text].invalid ~ .icon,
.sdx-container .input-field input[type=text]:invalid ~ .icon,
.sdx-container .input-field input[type=password].valid ~ .icon,
.sdx-container .input-field input[type=password]:valid ~ .icon,
.sdx-container .input-field input[type=password].invalid ~ .icon,
.sdx-container .input-field input[type=password]:invalid ~ .icon,
.sdx-container .input-field input[type=email].valid ~ .icon,
.sdx-container .input-field input[type=email]:valid ~ .icon,
.sdx-container .input-field input[type=email].invalid ~ .icon,
.sdx-container .input-field input[type=email]:invalid ~ .icon,
.sdx-container .input-field input[type=url].valid ~ .icon,
.sdx-container .input-field input[type=url]:valid ~ .icon,
.sdx-container .input-field input[type=url].invalid ~ .icon,
.sdx-container .input-field input[type=url]:invalid ~ .icon,
.sdx-container .input-field input[type=time].valid ~ .icon,
.sdx-container .input-field input[type=time]:valid ~ .icon,
.sdx-container .input-field input[type=time].invalid ~ .icon,
.sdx-container .input-field input[type=time]:invalid ~ .icon,
.sdx-container .input-field input[type=date].valid ~ .icon,
.sdx-container .input-field input[type=date]:valid ~ .icon,
.sdx-container .input-field input[type=date].invalid ~ .icon,
.sdx-container .input-field input[type=date]:invalid ~ .icon,
.sdx-container .input-field input[type=datetime].valid ~ .icon,
.sdx-container .input-field input[type=datetime]:valid ~ .icon,
.sdx-container .input-field input[type=datetime].invalid ~ .icon,
.sdx-container .input-field input[type=datetime]:invalid ~ .icon,
.sdx-container .input-field input[type=datetime-local].valid ~ .icon,
.sdx-container .input-field input[type=datetime-local]:valid ~ .icon,
.sdx-container .input-field input[type=datetime-local].invalid ~ .icon,
.sdx-container .input-field input[type=datetime-local]:invalid ~ .icon,
.sdx-container .input-field input[type=tel].valid ~ .icon,
.sdx-container .input-field input[type=tel]:valid ~ .icon,
.sdx-container .input-field input[type=tel].invalid ~ .icon,
.sdx-container .input-field input[type=tel]:invalid ~ .icon,
.sdx-container .input-field input[type=number].valid ~ .icon,
.sdx-container .input-field input[type=number]:valid ~ .icon,
.sdx-container .input-field input[type=number].invalid ~ .icon,
.sdx-container .input-field input[type=number]:invalid ~ .icon,
.sdx-container .input-field input[type=search].valid ~ .icon,
.sdx-container .input-field input[type=search]:valid ~ .icon,
.sdx-container .input-field input[type=search].invalid ~ .icon,
.sdx-container .input-field input[type=search]:invalid ~ .icon,
.sdx-container .input-field textarea.valid ~ .icon,
.sdx-container .input-field textarea:valid ~ .icon,
.sdx-container .input-field textarea.invalid ~ .icon,
.sdx-container .input-field textarea:invalid ~ .icon {
display: none;
}
.sdx-container .input-field input:not([type]).valid,
.sdx-container .input-field input[type=text].valid,
.sdx-container .input-field input[type=password].valid,
.sdx-container .input-field input[type=email].valid,
.sdx-container .input-field input[type=url].valid,
.sdx-container .input-field input[type=time].valid,
.sdx-container .input-field input[type=date].valid,
.sdx-container .input-field input[type=datetime].valid,
.sdx-container .input-field input[type=datetime-local].valid,
.sdx-container .input-field input[type=tel].valid,
.sdx-container .input-field input[type=number].valid,
.sdx-container .input-field input[type=search].valid,
.sdx-container .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");
}
.sdx-container .input-field input:not([type]).invalid,
.sdx-container .input-field input[type=text].invalid,
.sdx-container .input-field input[type=password].invalid,
.sdx-container .input-field input[type=email].invalid,
.sdx-container .input-field input[type=url].invalid,
.sdx-container .input-field input[type=time].invalid,
.sdx-container .input-field input[type=date].invalid,
.sdx-container .input-field input[type=datetime].invalid,
.sdx-container .input-field input[type=datetime-local].invalid,
.sdx-container .input-field input[type=tel].invalid,
.sdx-container .input-field input[type=number].invalid,
.sdx-container .input-field input[type=search].invalid,
.sdx-container .input-field textarea.invalid {
border-color: #be0000;
color: #d12;
}
.sdx-container .input-field input:not([type]).invalid--inline,
.sdx-container .input-field input[type=text].invalid--inline,
.sdx-container .input-field input[type=password].invalid--inline,
.sdx-container .input-field input[type=email].invalid--inline,
.sdx-container .input-field input[type=url].invalid--inline,
.sdx-container .input-field input[type=time].invalid--inline,
.sdx-container .input-field input[type=date].invalid--inline,
.sdx-container .input-field input[type=datetime].invalid--inline,
.sdx-container .input-field input[type=datetime-local].invalid--inline,
.sdx-container .input-field input[type=tel].invalid--inline,
.sdx-container .input-field input[type=number].invalid--inline,
.sdx-container .input-field input[type=search].invalid--inline,
.sdx-container .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");
}
.sdx-container .input-field input:not([type]).invalid ~ .message,
.sdx-container .input-field input[type=text].invalid ~ .message,
.sdx-container .input-field input[type=password].invalid ~ .message,
.sdx-container .input-field input[type=email].invalid ~ .message,
.sdx-container .input-field input[type=url].invalid ~ .message,
.sdx-container .input-field input[type=time].invalid ~ .message,
.sdx-container .input-field input[type=date].invalid ~ .message,
.sdx-container .input-field input[type=datetime].invalid ~ .message,
.sdx-container .input-field input[type=datetime-local].invalid ~ .message,
.sdx-container .input-field input[type=tel].invalid ~ .message,
.sdx-container .input-field input[type=number].invalid ~ .message,
.sdx-container .input-field input[type=search].invalid ~ .message,
.sdx-container .input-field textarea.invalid ~ .message {
max-height: 50px;
margin-top: 6px;
opacity: 1;
color: #d12;
}
.sdx-container .input-field input:not([type]).validate + label,
.sdx-container .input-field input[type=text].validate + label,
.sdx-container .input-field input[type=password].validate + label,
.sdx-container .input-field input[type=email].validate + label,
.sdx-container .input-field input[type=url].validate + label,
.sdx-container .input-field input[type=time].validate + label,
.sdx-container .input-field input[type=date].validate + label,
.sdx-container .input-field input[type=datetime].validate + label,
.sdx-container .input-field input[type=datetime-local].validate + label,
.sdx-container .input-field input[type=tel].validate + label,
.sdx-container .input-field input[type=number].validate + label,
.sdx-container .input-field input[type=search].validate + label,
.sdx-container .input-field textarea.validate + label {
width: 100%;
pointer-events: none;
}
.sdx-container .input-field input:not([type]).is-fixed,
.sdx-container .input-field input[type=text].is-fixed,
.sdx-container .input-field input[type=password].is-fixed,
.sdx-container .input-field input[type=email].is-fixed,
.sdx-container .input-field input[type=url].is-fixed,
.sdx-container .input-field input[type=time].is-fixed,
.sdx-container .input-field input[type=date].is-fixed,
.sdx-container .input-field input[type=datetime].is-fixed,
.sdx-container .input-field input[type=datetime-local].is-fixed,
.sdx-container .input-field input[type=tel].is-fixed,
.sdx-container .input-field input[type=number].is-fixed,
.sdx-container .input-field input[type=search].is-fixed,
.sdx-container .input-field textarea.is-fixed {
margin-top: 29px;
}
.sdx-container .input-field input:not([type]).is-fixed + label,
.sdx-container .input-field input[type=text].is-fixed + label,
.sdx-container .input-field input[type=password].is-fixed + label,
.sdx-container .input-field input[type=email].is-fixed + label,
.sdx-container .input-field input[type=url].is-fixed + label,
.sdx-container .input-field input[type=time].is-fixed + label,
.sdx-container .input-field input[type=date].is-fixed + label,
.sdx-container .input-field input[type=datetime].is-fixed + label,
.sdx-container .input-field input[type=datetime-local].is-fixed + label,
.sdx-container .input-field input[type=tel].is-fixed + label,
.sdx-container .input-field input[type=number].is-fixed + label,
.sdx-container .input-field input[type=search].is-fixed + label,
.sdx-container .input-field textarea.is-fixed + label {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.sdx-container .input-field--fixed input:not([type]),
.sdx-container .input-field--fixed input[type=text],
.sdx-container .input-field--fixed input[type=password],
.sdx-container .input-field--fixed input[type=email],
.sdx-container .input-field--fixed input[type=url],
.sdx-container .input-field--fixed input[type=time],
.sdx-container .input-field--fixed input[type=date],
.sdx-container .input-field--fixed input[type=datetime],
.sdx-container .input-field--fixed input[type=datetime-local],
.sdx-container .input-field--fixed input[type=tel],
.sdx-container .input-field--fixed input[type=number],
.sdx-container .input-field--fixed input[type=search],
.sdx-container .input-field--fixed textarea {
margin-top: 29px;
}
.sdx-container .input-field input:not([type]):first-child, .sdx-container .input-field input:not([type]),
.sdx-container .input-field input[type=text]:first-child,
.sdx-container .input-field input[type=text],
.sdx-container .input-field input[type=password]:first-child,
.sdx-container .input-field input[type=password],
.sdx-container .input-field input[type=email]:first-child,
.sdx-container .input-field input[type=email],
.sdx-container .input-field input[type=url]:first-child,
.sdx-container .input-field input[type=url],
.sdx-container .input-field input[type=time]:first-child,
.sdx-container .input-field input[type=time],
.sdx-container .input-field input[type=date]:first-child,
.sdx-container .input-field input[type=date],
.sdx-container .input-field input[type=datetime]:first-child,
.sdx-container .input-field input[type=datetime],
.sdx-container .input-field input[type=datetime-local]:first-child,
.sdx-container .input-field input[type=datetime-local],
.sdx-container .input-field input[type=tel]:first-child,
.sdx-container .input-field input[type=tel],
.sdx-container .input-field input[type=number]:first-child,
.sdx-container .input-field input[type=number],
.sdx-container .input-field input[type=search]:first-child,
.sdx-container .input-field input[type=search],
.sdx-container .input-field textarea:first-child,
.sdx-container .input-field textarea {
margin-top: 29px;
}
.sdx-container .input-field input:not([type]):first-child + label, .sdx-container .input-field input:not([type]) + label,
.sdx-container .input-field input[type=text]:first-child + label,
.sdx-container .input-field input[type=text] + label,
.sdx-container .input-field input[type=password]:first-child + label,
.sdx-container .input-field input[type=password] + label,
.sdx-container .input-field input[type=email]:first-child + label,
.sdx-container .input-field input[type=email] + label,
.sdx-container .input-field input[type=url]:first-child + label,
.sdx-container .input-field input[type=url] + label,
.sdx-container .input-field input[type=time]:first-child + label,
.sdx-container .input-field input[type=time] + label,
.sdx-container .input-field input[type=date]:first-child + label,
.sdx-container .input-field input[type=date] + label,
.sdx-container .input-field input[type=datetime]:first-child + label,
.sdx-container .input-field input[type=datetime] + label,
.sdx-container .input-field input[type=datetime-local]:first-child + label,
.sdx-container .input-field input[type=datetime-local] + label,
.sdx-container .input-field input[type=tel]:first-child + label,
.sdx-container .input-field input[type=tel] + label,
.sdx-container .input-field input[type=number]:first-child + label,
.sdx-container .input-field input[type=number] + label,
.sdx-container .input-field input[type=search]:first-child + label,
.sdx-container .input-field input[type=search] + label,
.sdx-container .input-field textarea:first-child + label,
.sdx-container .input-field textarea + label {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.sdx-container .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: 0.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;
}
.sdx-container .input-field--autocomplete .autocomplete strong {
font-weight: 400;
color: #1781e3;
}
.sdx-container .input-field--autocomplete .autocomplete li.js-hover, .sdx-container .input-field--autocomplete .autocomplete li:hover {
background: #eef3f6;
}
.sdx-container .input-field--autocomplete .autocomplete li .autocomplete__result {
margin: 0 22px;
padding: 12px 0;
}
.sdx-container .input-field--autocomplete .autocomplete li:not(:last-child) .autocomplete__result {
border-bottom: 1px solid #e4e9ec;
}
.sdx-container .input-field--autocomplete.is-open input:not([type]),
.sdx-container .input-field--autocomplete.is-open input[type=text],
.sdx-container .input-field--autocomplete.is-open input[type=password],
.sdx-container .input-field--autocomplete.is-open input[type=email],
.sdx-container .input-field--autocomplete.is-open input[type=url],
.sdx-container .input-field--autocomplete.is-open input[type=time],
.sdx-container .input-field--autocomplete.is-open input[type=date],
.sdx-container .input-field--autocomplete.is-open input[type=datetime],
.sdx-container .input-field--autocomplete.is-open input[type=datetime-local],
.sdx-container .input-field--autocomplete.is-open input[type=tel],
.sdx-container .input-field--autocomplete.is-open input[type=number],
.sdx-container .input-field--autocomplete.is-open input[type=search],
.sdx-container .input-field--autocomplete.is-open textarea {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.sdx-container .input-field--autocomplete.is-open .autocomplete {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
z-index: 999999;
}
.sdx-container .input-field.flatpickr .flatpickr-input.valid + i + a[data-toggle],
.sdx-container .input-field.flatpickr .flatpickr-input.valid + label + i + a[data-toggle],
.sdx-container .input-field.flatpickr .flatpickr-input.invalid--inline + a[data-toggle],
.sdx-container .input-field.flatpickr .flatpickr-input.invalid--inline + label + a[data-toggle] {
display: none;
}
.sdx-container .input-field.flatpickr .flatpickr-input {
-webkit-appearance: none;
padding-right: 48px;
}
.sdx-container .input-field.flatpickr .flatpickr-input[readonly] {
cursor: text;
}
.sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile {
font-size: 0;
}
.sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile::before {
content: attr(placeholder);
color: #bbb;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
}
.sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus,
.sdx-container .input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
margin-top: 29px;
}
.sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus + label,
.sdx-container .input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile + label {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus::before,
.sdx-container .input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile::before {
content: "";
}
.sdx-container .input-field.flatpickr input ~ a {
position: static;
}
.sdx-container .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;
}
.sdx-container .input-field.flatpickr input:disabled ~ a .icon-009-calendar,
.sdx-container .input-field.flatpickr input[readonly] ~ a .icon-009-calendar {
color: #bbb;
pointer-events: none;
}
.sdx-container .input-field.flatpickr .flatpickr-input:focus:not([readonly]) ~ a .icon-009-calendar {
color: #1781e3;
}
.sdx-container .input-field.flatpickr input[type=date]::-webkit-datetime-edit-text {
color: transparent;
}
.sdx-container .input-field.flatpickr input[type=date]::-webkit-datetime-edit-month-field {
color: transparent;
}
.sdx-container .input-field.flatpickr input[type=date]::-webkit-datetime-edit-day-field {
color: transparent;
}
.sdx-container .input-field.flatpickr input[type=date]::-webkit-datetime-edit-year-field {
color: transparent;
}
.sdx-container .input-field.flatpickr input[type=text] {
margin-top: 29px;
}
.sdx-container .input-multiline textarea,
.sdx-container .input-field--multiline textarea {
width: 100%;
height: auto;
padding: 11px 16px;
resize: none;
box-sizing: border-box;
}
.sdx-container .input-field__legend-mandatory {
color: #666;
font-size: 14px;
}
.sdx-container .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);
}
.sdx-container .flatpickr-calendar.open,
.sdx-container .flatpickr-calendar.inline {
opacity: 1;
max-height: 640px;
visibility: visible;
}
.sdx-container .flatpickr-calendar.open {
display: inline-block;
z-index: 99999;
}
.sdx-container .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);
}
.sdx-container .flatpickr-calendar.inline {
display: block;
position: relative;
top: 2px;
}
.sdx-container .flatpickr-calendar.static {
position: absolute;
top: calc(100% + 2px);
}
.sdx-container .flatpickr-calendar.static.open {
z-index: 999;
display: block;
}
.sdx-container .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
box-shadow: none !important;
}
.sdx-container .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;
}
.sdx-container .flatpickr-calendar .hasWeeks .dayContainer,
.sdx-container .flatpickr-calendar .hasTime .dayContainer {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.sdx-container .flatpickr-calendar .hasWeeks .dayContainer {
border-left: 0;
}
.sdx-container .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
height: 40px;
border-top: 1px solid #e6e6e6;
}
.sdx-container .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
height: auto;
}
.sdx-container .flatpickr-calendar:before,
.sdx-container .flatpickr-calendar:after {
position: absolute;
display: block;
pointer-events: none;
border: solid transparent;
content: "";
height: 0;
width: 0;
left: 22px;
}
.sdx-container .flatpickr-calendar.rightMost:before,
.sdx-container .flatpickr-calendar.rightMost:after {
left: auto;
right: 22px;
}
.sdx-container .flatpickr-calendar:before {
border-width: 5px;
margin: 0 -5px;
}
.sdx-container .flatpickr-calendar:after {
border-width: 4px;
margin: 0 -4px;
}
.sdx-container .flatpickr-calendar.arrowTop:before,
.sdx-container .flatpickr-calendar.arrowTop:after {
bottom: 100%;
}
.sdx-container .flatpickr-calendar.arrowTop:before {
border-bottom-color: #e6e6e6;
}
.sdx-container .flatpickr-calendar.arrowTop:after {
border-bottom-color: #fff;
}
.sdx-container .flatpickr-calendar.arrowBottom:before,
.sdx-container .flatpickr-calendar.arrowBottom:after {
top: 100%;
}
.sdx-container .flatpickr-calendar.arrowBottom:before {
border-top-color: #e6e6e6;
}
.sdx-container .flatpickr-calendar.arrowBottom:after {
border-top-color: #fff;
}
.sdx-container .flatpickr-calendar:focus {
outline: 0;
}
.sdx-container .flatpickr-wrapper {
position: relative;
display: inline-block;
}
.sdx-container .flatpickr-months {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sdx-container .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;
}
.sdx-container .flatpickr-months .flatpickr-prev-month,
.sdx-container .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);
}
.sdx-container .flatpickr-months .flatpickr-prev-month.disabled,
.sdx-container .flatpickr-months .flatpickr-next-month.disabled {
display: none;
}
.sdx-container .flatpickr-months .flatpickr-prev-month i,
.sdx-container .flatpickr-months .flatpickr-next-month i {
position: relative;
}
.sdx-container .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.sdx-container .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
/*rtl:begin:ignore*/
/*
*/
left: 0;
/*
/*rtl:end:ignore*/
/*
*/
}
.sdx-container .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.sdx-container .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
/*rtl:begin:ignore*/
/*
*/
right: 0;
/*
/*rtl:end:ignore*/
/*
*/
}
.sdx-container .flatpickr-months .flatpickr-prev-month:hover,
.sdx-container .flatpickr-months .flatpickr-next-month:hover {
color: #959ea9;
}
.sdx-container .flatpickr-months .flatpickr-prev-month:hover svg,
.sdx-container .flatpickr-months .flatpickr-next-month:hover svg {
fill: #f64747;
}
.sdx-container .flatpickr-months .flatpickr-prev-month svg,
.sdx-container .flatpickr-months .flatpickr-next-month svg {
width: 14px;
height: 14px;
}
.sdx-container .flatpickr-months .flatpickr-prev-month svg path,
.sdx-container .flatpickr-months .flatpickr-next-month svg path {
transition: fill 0.1s;
fill: inherit;
}
.sdx-container .numInputWrapper {
position: relative;
height: auto;
}
.sdx-container .numInputWrapper input,
.sdx-container .numInputWrapper span {
display: inline-block;
}
.sdx-container .numInputWrapper input {
width: 100%;
}
.sdx-container .numInputWrapper input::-ms-clear {
display: none;
}
.sdx-container .numInputWrapper input::-webkit-outer-spin-button,
.sdx-container .numInputWrapper input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.sdx-container .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;
}
.sdx-container .numInputWrapper span:hover {
background: rgba(0, 0, 0, 0.1);
}
.sdx-container .numInputWrapper span:active {
background: rgba(0, 0, 0, 0.2);
}
.sdx-container .numInputWrapper span:after {
display: block;
content: "";
position: absolute;
}
.sdx-container .numInputWrapper span.arrowUp {
top: 0;
border-bottom: 0;
}
.sdx-container .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%;
}
.sdx-container .numInputWrapper span.arrowDown {
top: 50%;
}
.sdx-container .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%;
}
.sdx-container .numInputWrapper span svg {
width: inherit;
height: auto;
}
.sdx-container .numInputWrapper span svg path {
fill: rgba(0, 0, 0, 0.5);
}
.sdx-container .numInputWrapper:hover {
background: rgba(0, 0, 0, 0.05);
}
.sdx-container .numInputWrapper:hover span {
opacity: 1;
}
.sdx-container .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);
}
.sdx-container .flatpickr-current-month span.cur-month {
font-family: inherit;
font-weight: 700;
color: inherit;
display: inline-block;
margin-left: 0.5ch;
padding: 0;
}
.sdx-container .flatpickr-current-month span.cur-month:hover {
background: rgba(0, 0, 0, 0.05);
}
.sdx-container .flatpickr-current-month .numInputWrapper {
width: 6ch;
width: 7ch\0 ;
display: inline-block;
}
.sdx-container .flatpickr-current-month .numInputWrapper span.arrowUp:after {
border-bottom-color: rgba(0, 0, 0, 0.9);
}
.sdx-container .flatpickr-current-month .numInputWrapper span.arrowDown:after {
border-top-color: rgba(0, 0, 0, 0.9);
}
.sdx-container .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;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.sdx-container .flatpickr-current-month input.cur-year:focus {
outline: 0;
}
.sdx-container .flatpickr-current-month input.cur-year[disabled],
.sdx-container .flatpickr-current-month input.cur-year[disabled]:hover {
font-size: 100%;
color: rgba(0, 0, 0, 0.5);
background: transparent;
pointer-events: none;
}
.sdx-container .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;
}
.sdx-container .flatpickr-weekdays .flatpickr-weekdaycontainer {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.sdx-container 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;
}
.sdx-container .dayContainer,
.sdx-container .flatpickr-weeks {
padding: 1px 0 0 0;
}
.sdx-container .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;
}
.sdx-container .flatpickr-days:focus {
outline: 0;
}
.sdx-container .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;
}
.sdx-container .dayContainer + .dayContainer {
box-shadow: -1px 0 0 #e6e6e6;
}
.sdx-container .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;
}
.sdx-container .flatpickr-day.inRange,
.sdx-container .flatpickr-day.prevMonthDay.inRange,
.sdx-container .flatpickr-day.nextMonthDay.inRange,
.sdx-container .flatpickr-day.today.inRange,
.sdx-container .flatpickr-day.prevMonthDay.today.inRange,
.sdx-container .flatpickr-day.nextMonthDay.today.inRange,
.sdx-container .flatpickr-day:hover,
.sdx-container .flatpickr-day.prevMonthDay:hover,
.sdx-container .flatpickr-day.nextMonthDay:hover,
.sdx-container .flatpickr-day:focus,
.sdx-container .flatpickr-day.prevMonthDay:focus,
.sdx-container .flatpickr-day.nextMonthDay:focus {
cursor: pointer;
outline: 0;
background: #e6e6e6;
border-color: #e6e6e6;
}
.sdx-container .flatpickr-day.today {
border-color: #959ea9;
}
.sdx-container .flatpickr-day.today:hover,
.sdx-container .flatpickr-day.today:focus {
border-color: #959ea9;
background: #959ea9;
color: #fff;
}
.sdx-container .flatpickr-day.selected,
.sdx-container .flatpickr-day.startRange,
.sdx-container .flatpickr-day.endRange,
.sdx-container .flatpickr-day.selected.inRange,
.sdx-container .flatpickr-day.startRange.inRange,
.sdx-container .flatpickr-day.endRange.inRange,
.sdx-container .flatpickr-day.selected:focus,
.sdx-container .flatpickr-day.startRange:focus,
.sdx-container .flatpickr-day.endRange:focus,
.sdx-container .flatpickr-day.selected:hover,
.sdx-container .flatpickr-day.startRange:hover,
.sdx-container .flatpickr-day.endRange:hover,
.sdx-container .flatpickr-day.selected.prevMonthDay,
.sdx-container .flatpickr-day.startRange.prevMonthDay,
.sdx-container .flatpickr-day.endRange.prevMonthDay,
.sdx-container .flatpickr-day.selected.nextMonthDay,
.sdx-container .flatpickr-day.startRange.nextMonthDay,
.sdx-container .flatpickr-day.endRange.nextMonthDay {
background: #569ff7;
box-shadow: none;
color: #fff;
border-color: #569ff7;
}
.sdx-container .flatpickr-day.selected.startRange,
.sdx-container .flatpickr-day.startRange.startRange,
.sdx-container .flatpickr-day.endRange.startRange {
border-radius: 50px 0 0 50px;
}
.sdx-container .flatpickr-day.selected.endRange,
.sdx-container .flatpickr-day.startRange.endRange,
.sdx-container .flatpickr-day.endRange.endRange {
border-radius: 0 50px 50px 0;
}
.sdx-container .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.sdx-container .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.sdx-container .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
box-shadow: -10px 0 0 #569ff7;
}
.sdx-container .flatpickr-day.selected.startRange.endRange,
.sdx-container .flatpickr-day.startRange.startRange.endRange,
.sdx-container .flatpickr-day.endRange.startRange.endRange {
border-radius: 50px;
}
.sdx-container .flatpickr-day.inRange {
border-radius: 0;
box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.sdx-container .flatpickr-day.disabled,
.sdx-container .flatpickr-day.disabled:hover,
.sdx-container .flatpickr-day.prevMonthDay,
.sdx-container .flatpickr-day.nextMonthDay,
.sdx-container .flatpickr-day.notAllowed,
.sdx-container .flatpickr-day.notAllowed.prevMonthDay,
.sdx-container .flatpickr-day.notAllowed.nextMonthDay {
color: rgba(57, 57, 57, 0.3);
background: transparent;
border-color: transparent;
cursor: default;
}
.sdx-container .flatpickr-day.disabled,
.sdx-container .flatpickr-day.disabled:hover {
cursor: not-allowed;
color: rgba(57, 57, 57, 0.1);
}
.sdx-container .flatpickr-day.week.selected {
border-radius: 0;
box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.sdx-container .flatpickr-day.hidden {
visibility: hidden;
}
.sdx-container .rangeMode .flatpickr-day {
margin-top: 1px;
}
.sdx-container .flatpickr-weekwrapper {
display: inline-block;
float: left;
}
.sdx-container .flatpickr-weekwrapper .flatpickr-weeks {
padding: 0 12px;
box-shadow: 1px 0 0 #e6e6e6;
}
.sdx-container .flatpickr-weekwrapper .flatpickr-weekday {
float: none;
width: 100%;
line-height: 28px;
}
.sdx-container .flatpickr-weekwrapper span.flatpickr-day,
.sdx-container .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;
}
.sdx-container .flatpickr-innerContainer {
display: block;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
overflow: hidden;
}
.sdx-container .flatpickr-rContainer {
display: inline-block;
padding: 0;
box-sizing: border-box;
}
.sdx-container .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;
}
.sdx-container .flatpickr-time:after {
content: "";
display: table;
clear: both;
}
.sdx-container .flatpickr-time .numInputWrapper {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 40%;
height: 40px;
float: left;
}
.sdx-container .flatpickr-time .numInputWrapper span.arrowUp:after {
border-bottom-color: #393939;
}
.sdx-container .flatpickr-time .numInputWrapper span.arrowDown:after {
border-top-color: #393939;
}
.sdx-container .flatpickr-time.hasSeconds .numInputWrapper {
width: 26%;
}
.sdx-container .flatpickr-time.time24hr .numInputWrapper {
width: 49%;
}
.sdx-container .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;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.sdx-container .flatpickr-time input.flatpickr-hour {
font-weight: bold;
}
.sdx-container .flatpickr-time input.flatpickr-minute,
.sdx-container .flatpickr-time input.flatpickr-second {
font-weight: 400;
}
.sdx-container .flatpickr-time input:focus {
outline: 0;
border: 0;
}
.sdx-container .flatpickr-time .flatpickr-time-separator,
.sdx-container .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;
}
.sdx-container .flatpickr-time .flatpickr-am-pm {
outline: 0;
width: 18%;
cursor: pointer;
text-align: center;
font-weight: 400;
}
.sdx-container .flatpickr-time input:hover,
.sdx-container .flatpickr-time .flatpickr-am-pm:hover,
.sdx-container .flatpickr-time input:focus,
.sdx-container .flatpickr-time .flatpickr-am-pm:focus {
background: #eee;
}
.sdx-container .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);
}
}
.sdx-container .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 */
}
.sdx-container .flatpickr-calendar::before {
border: 0;
}
.sdx-container .flatpickr-calendar::after {
left: 28px;
margin: -1px -12px;
border-width: 8px;
}
.sdx-container .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;
}
.sdx-container .flatpickr-calendar.arrowTop.rightMost::after {
left: auto;
}
.sdx-container .flatpickr-calendar.arrowBottom {
margin-top: -15px;
}
.sdx-container .flatpickr-calendar.inline {
margin-top: 10px;
}
.sdx-container .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);
}
.sdx-container .flatpickr-calendar.arrowBottom.rightMost::after {
right: 28px;
}
.sdx-container .flatpickr-calendar.inline::after {
display: none;
}
.sdx-container .flatpickr-calendar.animate {
display: none;
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 */
}
.sdx-container .flatpickr-calendar.animate.open {
visibility: visible;
opacity: 1;
display: inline-block;
/* flatpickr lib handles the opacity animation */
transition: none;
}
.sdx-container .flatpickr-calendar.animate.arrowBottom {
-webkit-animation-name: fpFadeOutUp;
animation-name: fpFadeOutUp;
}
.sdx-container .flatpickr-calendar.animate.arrowBottom.open {
-webkit-animation-name: fpFadeInUp;
animation-name: fpFadeInUp;
}
.sdx-container .flatpickr-calendar,
.sdx-container .flatpickr-calendar .dayContainer,
.sdx-container .flatpickr-calendar .flatpickr-days {
width: 392px;
}
.sdx-container .flatpickr-calendar .dayContainer {
min-width: 392px;
max-width: 392px;
}
.sdx-container .flatpickr-calendar,
.sdx-container .flatpickr-calendar .flatpickr-day,
.sdx-container .flatpickr-calendar .flatpickr-weekday,
.sdx-container .flatpickr-calendar .flatpickr-current-month,
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-month,
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year,
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year.cur-year:focus {
color: #015;
font-weight: 300;
}
.sdx-container .flatpickr-calendar .flatpickr-month {
height: 70px;
background-color: #eef3f6;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month {
padding-top: 22px;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-month,
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year {
font-size: 24px;
letter-spacing: -0.35px;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-month:hover,
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year:hover {
background: transparent;
}
.sdx-container .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 0.5ch;
height: auto;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month input.cur-year.cur-year:focus {
margin-top: 0;
/* override SDX style when using inline */
}
.sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
width: 8ch;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper .arrowUp,
.sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper .arrowDown {
display: none;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover {
background: transparent;
}
.sdx-container .flatpickr-calendar .flatpickr-prev-month,
.sdx-container .flatpickr-calendar .flatpickr-next-month {
padding: 30px 20px;
}
.sdx-container .flatpickr-calendar .flatpickr-prev-month svg,
.sdx-container .flatpickr-calendar .flatpickr-next-month svg {
width: 16px;
fill: #1781e3;
stroke: #1781e3;
}
.sdx-container .flatpickr-calendar .flatpickr-prev-month:hover,
.sdx-container .flatpickr-calendar .flatpickr-next-month:hover,
.sdx-container .flatpickr-calendar .flatpickr-prev-month:focus,
.sdx-container .flatpickr-calendar .flatpickr-next-month:focus {
color: #0851da;
}
.sdx-container .flatpickr-calendar .flatpickr-prev-month:hover svg,
.sdx-container .flatpickr-calendar .flatpickr-next-month:hover svg,
.sdx-container .flatpickr-calendar .flatpickr-prev-month:focus svg,
.sdx-container .flatpickr-calendar .flatpickr-next-month:focus svg {
fill: #0851da;
stroke: #0851da;
}
.sdx-container .flatpickr-calendar .flatpickr-weekdays {
height: 40px;
background-color: #eef3f6;
}
.sdx-container .flatpickr-calendar .flatpickr-weekday {
font-size: 14px;
}
.sdx-container .flatpickr-calendar .flatpickr-day {
color: #1781e3;
font-size: 18px;
font-weight: 600;
margin: 5px;
max-width: 46px;
height: 46px;
line-height: 45px;
}
.sdx-container .flatpickr-calendar .flatpickr-day.today {
border-color: #bbb;
color: #1781e3;
transition: all 200ms;
}
.sdx-container .flatpickr-calendar .flatpickr-day.today.selected {
box-shadow: inset 0 0 0 1px #fff;
}
.sdx-container .flatpickr-calendar .flatpickr-day.disabled,
.sdx-container .flatpickr-calendar .flatpickr-day.disabled:hover,
.sdx-container .flatpickr-calendar .flatpickr-day.disabled:focus {
color: #bbb;
border-color: transparent;
font-weight: 300;
}
.sdx-container .flatpickr-calendar .flatpickr-day.prevMonthDay.prevMonthDay,
.sdx-container .flatpickr-calendar .flatpickr-day.nextMonthDay.nextMonthDay {
transition: all 200ms;
font-weight: 300;
}
.sdx-container .flatpickr-calendar .flatpickr-day.prevMonthDay.prevMonthDay.selected,
.sdx-container .flatpickr-calendar .flatpickr-day.nextMonthDay.nextMonthDay.selected {
color: #fff;
}
.sdx-container .flatpickr-calendar .flatpickr-day:hover,
.sdx-container .flatpickr-calendar .flatpickr-day:focus,
.sdx-container .flatpickr-calendar .flatpickr-day.selected {
background: transparent;
border-color: #1781e3;
transition: all 200ms;
}
.sdx-container .flatpickr-calendar .flatpickr-day.selected {
color: #fff;
background: #1781e3;
transition: all 200ms;
}
.sdx-container .flatpickr-calendar .flatpickr-day.selected:hover,
.sdx-container .flatpickr-calendar .flatpickr-day.selected:focus {
background: #0851da;
border-color: #0851da;
transition: all 200ms;
}
@media (max-width: 767px) {
.sdx-container .flatpickr-calendar,
.sdx-container .flatpickr-calendar .dayContainer,
.sdx-container .flatpickr-calendar .flatpickr-days {
width: 280px;
}
.sdx-container .flatpickr-calendar .dayContainer {
min-width: 280px;
max-width: 280px;
}
.sdx-container .flatpickr-calendar .flatpickr-month {
height: 45px;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month {
padding-top: 18px;
left: 17.5%;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-month,
.sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year {
font-size: 18px;
letter-spacing: -0.1px;
}
.sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
width: 6ch;
}
.sdx-container .flatpickr-calendar .flatpickr-prev-month,
.sdx-container .flatpickr-calendar .flatpickr-next-month {
padding-top: 22px;
}
.sdx-container .flatpickr-calendar .flatpickr-day {
font-size: 16px;
max-width: 30px;
height: 30px;
line-height: 28px;
}
}
.sdx-container .radio + .radio {
margin-top: 14px;
}
.sdx-container .radio.add-space {
margin-bottom: 24px;
}
.sdx-container .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;
}
.sdx-container .radio [type=radio]:not(:checked),
.sdx-container .radio [type=radio]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}
.sdx-container .radio [type=radio] + label {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.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;
}
.sdx-container .radio [type=radio] + label::before, .sdx-container .radio [type=radio] + label::after {
position: absolute;
top: 0;
left: 0;
z-index: 0;
margin-top: 1px;
border-radius: 50%;
content: "";
}
.sdx-container .radio [type=radio] + label::before {
transition: all 120ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
width: 22px;
height: 22px;
}
.sdx-container .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;
}
.sdx-container .radio [type=radio]:not(:checked) + label::before {
border: 2px solid #adadad;
}
.sdx-container .radio [type=radio]:not(:checked) + label::after {
background: #adadad;
border: 5px solid #adadad;
border-radius: 52%;
content: "";
left: 6px;
opacity: 1;
position: absolute;
top: 6px;
-webkit-transform: scale(0);
transform: scale(0);
}
.sdx-container .radio [type=radio]:hover + label::before {
border: 2px solid #adadad;
}
.sdx-container .radio [type=radio]:hover + label::after {
background: #adadad;
border: 5px solid #adadad;
border-radius: 52%;
content: "";
left: 6px;
opacity: 1;
position: absolute;
top: 6px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.sdx-container .radio [type=radio]:focus + label::before {
border: 2px solid #1781e3;
}
.sdx-container .radio [type=radio]:focus + label::after {
border: 5px solid #1781e3;
border-radius: 52%;
content: "";
left: 6px;
opacity: 1;
position: absolute;
top: 6px;
}
.sdx-container .radio [type=radio]:checked + label::before {
border: 2px solid #1781e3;
}
.sdx-container .radio [type=radio]:checked + label::after {
background: #1781e3;
border: 5px solid #1781e3;
border-radius: 52%;
content: "";
left: 6px;
opacity: 1;
position: absolute;
top: 6px;
-webkit-transform: scale(1);
transform: scale(1);
}
.sdx-container .radio [type=radio]:checked:focus + label::before {
border: 2px solid #1781e3;
}
.sdx-container .radio [type=radio]:checked:focus + label::after {
border: 5px solid #1781e3;
border-radius: 52%;
content: "";
left: 6px;
opacity: 1;
position: absolute;
top: 6px;
}
.sdx-container .radio [type=radio]:checked:hover + label::before {
border: 2px solid #0851da;
}
.sdx-container .radio [type=radio]:checked:hover + label::after {
background: #0851da;
border: 5px solid #0851da;
border-radius: 52%;
content: "";
left: 6px;
opacity: 1;
position: absolute;
top: 6px;
-webkit-transform: scale(1);
transform: scale(1);
}
.sdx-container .radio [type=radio]:disabled + label {
opacity: 0.4;
pointer-events: none;
}
.sdx-container .radio [type=radio]:disabled + label::before {
border-color: #adadad;
background-color: transparent;
}
.sdx-container .radio [type=radio]:disabled:hover + label::before {
border: 2px solid #adadad;
}
.sdx-container .radio [type=radio]:disabled:hover + label::after {
background: none;
}
.sdx-container .radio [type=radio]:disabled:checked + label::before {
border: 2px solid #adadad;
}
.sdx-container .radio [type=radio]:disabled:checked + label::after {
background-color: #adadad;
}
.sdx-container .radio [type=radio]:disabled:not(:checked) + label::before {
border-color: #adadad;
}
.sdx-container .radio--only [type=radio] + label {
padding-left: 22px;
}
.sdx-container .form-inline .radio {
display: inline-block;
vertical-align: top;
}
.sdx-container .form-inline .radio + .radio {
margin-top: 0;
margin-left: 14px;
}
.sdx-container .form-group label,
.sdx-container .form-group .label {
display: block;
margin-bottom: 8px;
}
.sdx-container .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;
}
.sdx-container .form-group.invalid > .message {
max-height: 50px;
margin-top: 6px;
opacity: 1;
color: #d12;
}
.sdx-container .checkbox + .checkbox {
margin-top: 24px;
}
.sdx-container .checkbox.add-space {
margin-bottom: 24px;
}
.sdx-container .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;
}
.sdx-container .checkbox .message {
max-height: 0;
margin-top: 0;
opacity: 0;
transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.sdx-container .checkbox.invalid > .message {
max-height: 50px;
margin-top: 6px;
opacity: 1;
color: #d12;
}
.sdx-container .checkbox [type=checkbox]:not(:checked),
.sdx-container .checkbox [type=checkbox]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}
.sdx-container .checkbox [type=checkbox] + label {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
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;
}
.sdx-container .checkbox [type=checkbox] + label::before, .sdx-container .checkbox [type=checkbox] + label::after {
position: absolute;
top: 1px;
left: 0;
z-index: 0;
content: "";
}
.sdx-container .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;
}
.sdx-container .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: "";
}
.sdx-container .checkbox [type=checkbox]:hover + label::before {
border: 2px solid #adadad;
background: transparent;
}
.sdx-container .checkbox [type=checkbox]:hover + label::after {
-webkit-transform: scale(0.5);
transform: scale(0.5);
color: #adadad;
}
.sdx-container .checkbox [type=checkbox]:focus + label::before {
border: 2px solid #1781e3;
}
.sdx-container .checkbox [type=checkbox]:focus + label::after {
color: #1781e3;
}
.sdx-container .checkbox [type=checkbox]:checked + label::before {
border: 2px solid #1781e3;
background: transparent;
}
.sdx-container .checkbox [type=checkbox]:checked + label::after {
-webkit-transform: scale(1);
transform: scale(1);
color: #1781e3;
}
.sdx-container .checkbox [type=checkbox]:checked:focus + label::before {
border: 2px solid #1781e3;
}
.sdx-container .checkbox [type=checkbox]:checked:focus + label::after {
color: #1781e3;
}
.sdx-container .checkbox [type=checkbox]:checked:hover + label::before {
border: 2px solid #0851da;
background: transparent;
}
.sdx-container .checkbox [type=checkbox]:checked:hover + label::after {
-webkit-transform: scale(0.5);
transform: scale(0.5);
color: #0851da;
}
.sdx-container .checkbox [type=checkbox]:disabled + label,
.sdx-container .checkbox [type=checkbox]:disabled + label + p {
opacity: 0.4;
pointer-events: none;
}
.hiddenscroll.touchevents .sdx-container .checkbox [type=checkbox]:hover + label::before {
border: 2px solid #adadad;
background: transparent;
}
.hiddenscroll.touchevents .sdx-container .checkbox [type=checkbox]:hover + label::after {
-webkit-transform: scale(0);
transform: scale(0);
color: #adadad;
}
.hiddenscroll.touchevents .sdx-container .checkbox [type=checkbox]:focus + label::before {
border: 2px solid #1781e3;
}
.hiddenscroll.touchevents .sdx-container .checkbox [type=checkbox]:focus + label::after {
color: #1781e3;
}
.hiddenscroll.touchevents .sdx-container .checkbox [type=checkbox]:checked + label::before {
border: 2px solid #1781e3;
background: transparent;
}
.hiddenscroll.touchevents .sdx-container .checkbox [type=checkbox]:checked + label::after {
-webkit-transform: scale(1);
transform: scale(1);
color: #1781e3;
}
.hiddenscroll.touchevents .sdx-container .checkbox [type=checkbox]:checked:focus + label::before {
border: 2px solid #1781e3;
}
.hiddenscroll.touchevents .sdx-container .checkbox [type=checkbox]:checked:focus + label::after {
color: #1781e3;
}
.sdx-container .checkbox--only [type=checkbox] + label {
display: inline;
padding-left: 22px;
}
.sdx-container .checkbox--inverted [type=checkbox]:hover + label::before {
border: 2px solid #0851da;
background: #0851da;
}
.sdx-container .checkbox--inverted [type=checkbox]:hover + label::after {
-webkit-transform: scale(0.5);
transform: scale(0.5);
color: #fff;
}
.sdx-container .checkbox--inverted [type=checkbox]:focus + label::before {
border: 2px solid #0851da;
}
.sdx-container .checkbox--inverted [type=checkbox]:focus + label::after {
color: #fff;
}
.sdx-container .checkbox--inverted [type=checkbox]:checked + label::before {
border: 2px solid #1781e3;
background: #1781e3;
}
.sdx-container .checkbox--inverted [type=checkbox]:checked + label::after {
-webkit-transform: scale(1);
transform: scale(1);
color: #fff;
}
.sdx-container .checkbox--inverted [type=checkbox]:checked:focus + label::before {
border: 2px solid #0851da;
}
.sdx-container .checkbox--inverted [type=checkbox]:checked:focus + label::after {
color: #fff;
}
.hiddenscroll.touchevents .sdx-container .checkbox--inverted [type=checkbox]:hover + label::before {
border: 2px solid #adadad;
background: transparent;
}
.hiddenscroll.touchevents .sdx-container .checkbox--inverted [type=checkbox]:hover + label::after {
-webkit-transform: scale(0);
transform: scale(0);
color: #adadad;
}
.hiddenscroll.touchevents .sdx-container .checkbox--inverted [type=checkbox]:focus + label::before {
border: 2px solid #0851da;
}
.hiddenscroll.touchevents .sdx-container .checkbox--inverted [type=checkbox]:focus + label::after {
color: #fff;
}
.hiddenscroll.touchevents .sdx-container .checkbox--inverted [type=checkbox]:checked + label::before {
border: 2px solid #1781e3;
background: #1781e3;
}
.hiddenscroll.touchevents .sdx-container .checkbox--inverted [type=checkbox]:checked + label::after {
-webkit-transform: scale(1);
transform: scale(1);
color: #fff;
}
.hiddenscroll.touchevents .sdx-container .checkbox--inverted [type=checkbox]:checked:focus + label::before {
border: 2px solid #0851da;
}
.hiddenscroll.touchevents .sdx-container .checkbox--inverted [type=checkbox]:checked:focus + label::after {
color: #fff;
}
.sdx-container .form-inline .checkbox {
display: inline-block;
vertical-align: top;
}
.sdx-container .form-inline .checkbox + .checkbox {
margin-top: 0;
margin-left: 14px;
}
.sdx-container .form-group label,
.sdx-container .form-group .label {
display: block;
margin-bottom: 8px;
}
.sdx-container .select {
line-height: 24px;
letter-spacing: -0.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;
}
.sdx-container .select:last-of-type {
margin-bottom: 0;
}
.sdx-container .select select {
display: none;
}
.sdx-container .select .select__button {
position: relative;
width: 100%;
height: 48px;
}
.sdx-container .select .select__button:hover .select__thumb {
background: #1781e3;
color: #fff;
}
.sdx-container .select .select__button:hover .select__thumb .thumb-icon {
position: relative;
}
.sdx-container .select .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .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: "";
}
.sdx-container .select .select__button:hover .select__thumb .thumb-icon::before {
left: 0;
}
.sdx-container .select .select__button:hover .select__thumb .thumb-icon::after {
left: 15px;
}
.sdx-container .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%;
}
.sdx-container .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%;
}
.sdx-container .select .select__thumb .thumb-icon::before, .sdx-container .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: "";
}
.sdx-container .select .select__thumb .thumb-icon::before {
left: 0;
}
.sdx-container .select .select__thumb .thumb-icon::after {
left: 15px;
}
.sdx-container .select .select__thumb .loader-spinner {
display: none;
}
.sdx-container .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;
}
.sdx-container .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;
}
.sdx-container .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;
}
.sdx-container .select .select__dropdown .dropdown-item:last-child {
border-radius: 0 0 5px 5px;
}
.sdx-container .select .select__dropdown .dropdown-item:hover, .sdx-container .select .select__dropdown .dropdown-item--focused {
border-color: #1781e3;
background: #1781e3;
color: #fff;
}
.sdx-container .select .select__dropdown .dropdown-item--selected {
color: #25b252;
}
.sdx-container .select .select__dropdown .dropdown-item--selected::before {
float: right;
margin-right: -7px;
font-family: sdx-icons;
font-size: 16px;
content: "";
}
.sdx-container .select .select__dropdown .dropdown-item--disabled, .sdx-container .select .select__dropdown .dropdown-item--disabled:hover {
border-color: #d6d6d6;
background: none;
cursor: not-allowed;
color: rgba(51, 51, 51, 0.4);
}
.sdx-container .select .message {
max-height: 0;
margin-top: 0;
opacity: 0;
transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.sdx-container .select.invalid > .message {
max-height: 50px;
margin-top: 6px;
opacity: 1;
color: #d12;
}
.sdx-container .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;
}
.sdx-container .select .dropdown-group__item:hover {
cursor: default;
}
.sdx-container .select .dropdown-group .dropdown-item:last-child {
border-radius: 0;
}
.sdx-container .select .dropdown-group:last-child .dropdown-item:last-child {
border-radius: 0 0 5px 5px;
}
.sdx-container .select--closed .select__thumb .thumb-icon::before {
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.sdx-container .select--closed .select__thumb .thumb-icon::after {
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.sdx-container .select--closed .select__dropdown {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
opacity: 0.2;
}
.sdx-container .select--open {
z-index: 999999;
}
.sdx-container .select--open .select__thumb {
border-radius: 0 5px 0 0;
}
.sdx-container .select--open .select__thumb .thumb-icon::before {
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.sdx-container .select--open .select__thumb .thumb-icon::after {
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.sdx-container .select--open .select__placeholder {
border-radius: 5px 5px 0 0;
box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.1);
color: #1781e3;
}
.sdx-container .select--open .select__dropdown {
max-height: 512px;
overflow-y: auto;
}
.sdx-container .select--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.sdx-container .select--disabled .select__button:hover .select__thumb {
background: none;
color: #1781e3;
}
.sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon {
position: relative;
}
.sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .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: "";
}
.sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::before {
left: 0;
}
.sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::after {
left: 15px;
}
.sdx-container .select--filterable .select__dropdown .dropdown-item strong {
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .select--filterable .select__dropdown .dropdown-item:hover strong {
color: #fff !important;
}
.sdx-container .select--filterable .select__dropdown .dropdown-item.dropdown-item--selected strong {
font-weight: inherit;
}
.sdx-container .select--filterable .select__dropdown .dropdown-item:not(.dropdown-item--selected) strong {
color: #1781e3;
}
.sdx-container .select--filterable .select__placeholder:focus:not([readonly]) {
border-color: #1781e3;
}
.sdx-container .select--loading {
pointer-events: none;
}
.sdx-container .select--loading .select__thumb .loader-spinner {
display: block;
top: 50%;
left: 50%;
margin-top: -12.5px;
margin-left: -12.5px;
}
.sdx-container .select--loading .select__thumb .thumb-icon {
display: none;
}
.sdx-container .select--minimal .select__button:hover .select__thumb {
background: none;
color: #0851da;
}
.sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon {
position: relative;
}
.sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .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: "";
}
.sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::before {
left: 0;
}
.sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::after {
left: 15px;
}
.sdx-container .select--minimal .select__placeholder {
border: 0;
border-bottom: 1px solid #d6d6d6;
border-radius: 0;
box-shadow: none;
color: #333;
}
.sdx-container .select--minimal .select__dropdown {
border: 0;
border-radius: 0;
box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.15);
}
.sdx-container .select--minimal .select__dropdown .dropdown-item {
border: 0;
border-bottom: 1px solid #d6d6d6;
border-radius: 0;
}
.sdx-container .select--minimal .select__dropdown .dropdown-item:last-child {
border-bottom: 0;
border-radius: 0;
}
.sdx-container .select--minimal.select--open .select__placeholder {
border-color: transparent;
}
.sdx-container .select--minimal.select--tabs .select__placeholder {
border: 0;
border-bottom: 4px solid #1781e3;
border-radius: 0;
box-shadow: none;
color: #333;
}
.sdx-container 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;
}
.sdx-container .bg--dark label {
font-weight: 400;
}
.sdx-container .switch {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
margin-bottom: 12px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.sdx-container .switch p {
line-height: 24px;
letter-spacing: -0.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;
}
.sdx-container .switch [type=checkbox]:not(:checked),
.sdx-container .switch [type=checkbox]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}
.sdx-container .switch [type=checkbox] + label {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 400;
height: 24px;
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;
}
.sdx-container .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: "";
}
.sdx-container .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: "";
}
.sdx-container .switch [type=checkbox]:hover + label::before {
z-index: 1;
}
.sdx-container .switch [type=checkbox]:hover + label::after {
border-color: #858585;
z-index: 2;
}
.sdx-container .switch [type=checkbox]:focus + label {
outline: none;
}
.sdx-container .switch [type=checkbox]:focus + label::after {
border-color: #858585;
outline: none;
}
.sdx-container .switch [type=checkbox]:checked + label::before {
top: -2px;
border-radius: 28px;
background-color: #25b252;
height: 28px;
}
.sdx-container .switch [type=checkbox]:checked + label::after {
left: 30px;
}
.sdx-container .switch [type=checkbox]:checked + label:hover::after {
border-color: #858585;
z-index: 2;
}
.sdx-container .switch [type=checkbox]:checked + label:focus {
outline: none;
}
.sdx-container .switch [type=checkbox]:checked + label:focus::after {
border-color: #858585;
}
.sdx-container .switch [type=checkbox]:disabled + label {
opacity: 0.5;
pointer-events: none;
}
.sdx-container .switch [type=checkbox]:disabled + label + p {
opacity: 0.6;
}
.sdx-container .switch--left [type=checkbox] + label {
padding: 0 20px 0 0;
margin-right: 78px;
}
.sdx-container .switch--left [type=checkbox] + label::before {
left: 100%;
}
.sdx-container .switch--left [type=checkbox] + label::after {
left: 100%;
}
.sdx-container .switch--left [type=checkbox]:checked + label::after {
left: calc(100% + 30px);
}
.sdx-container .bg--dark .switch label {
color: #fff;
font-weight: 400;
}
.sdx-container .bg--dark .switch p {
color: #fff;
}
.sdx-container .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) {
.sdx-container .range {
margin: 0 32px 24px;
}
}
.sdx-container .range input[type=range] {
display: none;
}
.sdx-container .range label {
margin: 0;
margin-top: 32px;
}
.sdx-container .range output {
font-weight: 600;
line-height: 24px;
letter-spacing: 0.1px;
font-size: 14px;
color: #333;
}
.sdx-container .range .range-container {
position: relative;
margin-top: 19px;
cursor: pointer;
width: 100%;
height: auto;
min-height: 28px;
}
.sdx-container .range .range-container:focus {
outline: none;
}
.sdx-container .range .range-track {
transition: all 200ms ease;
width: 100%;
height: 2px;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
background: #adadad;
}
.sdx-container .range .range-track__progress {
position: absolute;
top: 0;
left: 0;
background: #1781e3;
width: 0;
height: 2px;
}
.sdx-container .range .range-slider {
display: table;
}
.sdx-container .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;
}
.sdx-container .range .range-tick::before {
position: absolute;
top: 13px;
left: 50%;
background: #adadad;
width: 1px;
height: 8px;
content: "";
}
.sdx-container .range .range-tick:first-child {
padding-left: 0;
text-align: left;
}
.sdx-container .range .range-tick:first-child::before {
position: absolute;
top: 13px;
left: 32px;
}
.sdx-container .range .range-tick:first-child::after {
position: absolute;
top: 12px;
left: 30px;
}
.sdx-container .range .range-tick:last-child {
padding-right: 0;
text-align: right;
}
.sdx-container .range .range-tick:last-child::before {
position: absolute;
top: 13px;
right: 32px;
left: inherit;
}
.sdx-container .range .range-tick:last-child::after {
position: absolute;
top: 12px;
right: 30px;
left: inherit;
}
.sdx-container .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%;
}
.sdx-container .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;
}
.sdx-container .range .range-tick--active .range-tick__label, .sdx-container .range .range-tick:hover .range-tick__label {
font-weight: 600;
color: #0851da;
}
.sdx-container .range .range-tick:hover::after {
-webkit-transform: scale(1);
transform: scale(1);
}
.sdx-container .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;
}
.sdx-container .range .range-thumb:active {
background-color: #0851da;
}
.sdx-container .range .range-thumb:hover {
border-color: #0851da;
}
.sdx-container .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;
}
.sdx-container .range .range-thumb:active {
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .range .range-thumb:active .range-thumb__value {
-webkit-transform: scale(1);
transform: scale(1);
}
.sdx-container .range--active .range-thumb {
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .range--active .range-thumb .range-thumb__value {
-webkit-transform: scale(1);
transform: scale(1);
}
.sdx-container .range--disabled .range-container {
cursor: not-allowed;
}
.sdx-container .range--disabled .range-track {
background: #d6d6d6 !important;
}
.sdx-container .range--disabled .range-track__progress {
background: #d6d6d6 !important;
}
.sdx-container .range--disabled .range-thumb .range-thumb__value {
-webkit-transform: scale(0);
transform: scale(0);
}
.sdx-container .range--disabled .range-thumb, .sdx-container .range--disabled .range-thumb:hover {
border-color: #d6d6d6 !important;
}
.sdx-container .range--disabled .range-thumb:active {
background-color: #fff;
}
.sdx-container .range--disabled .range-thumb:active .range-thumb__value {
-webkit-transform: scale(0);
transform: scale(0);
}
.sdx-container .range--disabled .range-tick {
color: #d6d6d6 !important;
}
.sdx-container .range--disabled .range-tick::before {
background: #d6d6d6 !important;
}
.sdx-container .range--disabled .range-tick .range-tick__label, .sdx-container .range--disabled .range-tick:hover .range-tick__label {
font-weight: 400;
color: #d6d6d6 !important;
}
.sdx-container .range--disabled .range-tick::after, .sdx-container .range--disabled .range-tick:hover::after {
-webkit-transform: scale(0);
transform: scale(0);
}
.sdx-container .range--dragging .range-tick:hover::after {
-webkit-transform: scale(0);
transform: scale(0);
}
.sdx-container .range--light {
margin: 40px;
}
@media (min-width: 768px) {
.sdx-container .range--light {
margin: 40px;
}
}
.sdx-container .bg--dark .range output {
color: #fff;
}
.sdx-container .bg--dark .range .range-track {
background: #fff;
}
.sdx-container .bg--dark .range .range-tick, .sdx-container .bg--dark .range .range-tick__label {
color: #fff;
}
.sdx-container .bg--dark .range .range-tick--active .range-tick__label, .sdx-container .bg--dark .range .range-tick:hover .range-tick__label {
color: #0851da;
}
.sdx-container .bg--dark .range .range-thumb {
box-shadow: inset 0 0 0 3px #015;
background-color: #015;
}
.sdx-container .bg--dark .range .range-thumb:active {
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .bg--dark .range .range-thumb:active .range-thumb__value {
-webkit-transform: scale(1);
transform: scale(1);
}
.sdx-container .bg--dark .range--active .range-thumb {
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .bg--dark .range--active .range-thumb .range-thumb__value {
-webkit-transform: scale(1);
transform: scale(1);
}
.sdx-container .bg--dark .range--disabled {
opacity: 0.5;
}
.sdx-container .bg--dark .range--disabled .range-thumb .range-thumb__value {
-webkit-transform: scale(0);
transform: scale(0);
}
.sdx-container .bg--dark .range--disabled .range-thumb:active {
background-color: #015;
}
.sdx-container .bg--dark .range--disabled .range-thumb:active .range-thumb__value {
-webkit-transform: scale(0);
transform: scale(0);
}
.sdx-container input[type=range].html5 {
position: relative;
margin: 14px 0;
outline: none;
border: 0;
background-color: transparent;
cursor: pointer;
padding: 0;
width: 100%;
}
.sdx-container input[type=range].html5:focus {
outline: none;
}
.sdx-container 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;
}
.sdx-container 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;
}
.sdx-container input[type=range].html5::-webkit-slider-thumb:active {
background-color: #0851da;
}
.sdx-container input[type=range].html5::-webkit-slider-thumb:hover {
border-color: #0851da;
}
.sdx-container input[type=range].html5 {
/* fix for FF unable to apply focus style bug */
border: 1px solid #fff;
}
.sdx-container input[type=range].html5::-moz-range-track {
/*required for proper track sizing in FF*/
border: 0;
background: #adadad;
height: 2px;
}
.sdx-container 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;
}
.sdx-container input[type=range].html5::-moz-range-thumb:active {
background-color: #0851da;
}
.sdx-container input[type=range].html5::-moz-range-thumb:hover {
border-color: #0851da;
}
.sdx-container input[type=range].html5:-moz-focusring {
outline: 1px solid transparent;
outline-offset: -1px;
}
.sdx-container input[type=range].html5::-moz-focus-outer {
border: 0;
}
.sdx-container 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;
}
.sdx-container input[type=range].html5::-ms-fill-lower {
background: #1781e3;
}
.sdx-container input[type=range].html5::-ms-fill-upper {
background: #adadad;
}
.sdx-container 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;
}
.sdx-container input[type=range].html5::-ms-thumb:active {
background-color: #0851da;
}
.sdx-container input[type=range].html5::-ms-thumb:hover {
border-color: #0851da;
}
.sdx-container input[type=range].html5::-ms-tooltip {
display: none;
}
.sdx-container .segmented-controls-group, .sdx-container .toggle-button-group {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sdx-container .segmented-controls-group [type=radio]:not(:checked),
.sdx-container .segmented-controls-group [type=radio]:checked,
.sdx-container .segmented-controls-group [type=checkbox]:not(:checked),
.sdx-container .segmented-controls-group [type=checkbox]:checked, .sdx-container .toggle-button-group [type=radio]:not(:checked),
.sdx-container .toggle-button-group [type=radio]:checked,
.sdx-container .toggle-button-group [type=checkbox]:not(:checked),
.sdx-container .toggle-button-group [type=checkbox]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}
.sdx-container .segmented-controls-group [type=checkbox] + label, .sdx-container .segmented-controls-group [type=radio] + label, .sdx-container .toggle-button-group [type=checkbox] + label, .sdx-container .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;
}
.sdx-container .segmented-controls-group [type=checkbox] + label:active, .sdx-container .segmented-controls-group [type=radio] + label:active, .sdx-container .toggle-button-group [type=checkbox] + label:active, .sdx-container .toggle-button-group [type=radio] + label:active {
outline: none;
}
.sdx-container .segmented-controls-group [type=checkbox] + label:last-child, .sdx-container .segmented-controls-group [type=radio] + label:last-child, .sdx-container .toggle-button-group [type=checkbox] + label:last-child, .sdx-container .toggle-button-group [type=radio] + label:last-child {
margin-right: 0;
}
.sdx-container .segmented-controls-group [type=checkbox]:checked + label:hover, .sdx-container .segmented-controls-group [type=radio]:checked + label:hover, .sdx-container .toggle-button-group [type=checkbox]:checked + label:hover, .sdx-container .toggle-button-group [type=radio]:checked + label:hover {
border-color: #1781e3;
color: #0851da;
}
.sdx-container .segmented-controls-group [type=checkbox]:checked + label:hover:active, .sdx-container .segmented-controls-group [type=checkbox]:checked + label:hover:focus, .sdx-container .segmented-controls-group [type=radio]:checked + label:hover:active, .sdx-container .segmented-controls-group [type=radio]:checked + label:hover:focus, .sdx-container .toggle-button-group [type=checkbox]:checked + label:hover:active, .sdx-container .toggle-button-group [type=checkbox]:checked + label:hover:focus, .sdx-container .toggle-button-group [type=radio]:checked + label:hover:active, .sdx-container .toggle-button-group [type=radio]:checked + label:hover:focus {
outline: none;
}
.sdx-container .segmented-controls-group [type=checkbox]:checked + label, .sdx-container .segmented-controls-group [type=radio]:checked + label, .sdx-container .toggle-button-group [type=checkbox]:checked + label, .sdx-container .toggle-button-group [type=radio]:checked + label {
border-color: #1781e3;
color: #1781e3;
}
.sdx-container .segmented-controls-group [type=checkbox]:checked + label:active, .sdx-container .segmented-controls-group [type=checkbox]:checked + label:focus, .sdx-container .segmented-controls-group [type=radio]:checked + label:active, .sdx-container .segmented-controls-group [type=radio]:checked + label:focus, .sdx-container .toggle-button-group [type=checkbox]:checked + label:active, .sdx-container .toggle-button-group [type=checkbox]:checked + label:focus, .sdx-container .toggle-button-group [type=radio]:checked + label:active, .sdx-container .toggle-button-group [type=radio]:checked + label:focus {
outline: none;
}
.sdx-container .segmented-controls-group [type=checkbox]:disabled + label, .sdx-container .segmented-controls-group [type=radio]:disabled + label, .sdx-container .toggle-button-group [type=checkbox]:disabled + label, .sdx-container .toggle-button-group [type=radio]:disabled + label {
cursor: default;
opacity: 0.4;
}
.sdx-container .segmented-controls-group [type=checkbox]:disabled + label:hover, .sdx-container .segmented-controls-group [type=radio]:disabled + label:hover, .sdx-container .toggle-button-group [type=checkbox]:disabled + label:hover, .sdx-container .toggle-button-group [type=radio]:disabled + label:hover {
border-color: #d6d6d6;
color: #333;
}
.sdx-container .segmented-controls-group [type=checkbox]:disabled + label:hover:active, .sdx-container .segmented-controls-group [type=checkbox]:disabled + label:hover:focus, .sdx-container .segmented-controls-group [type=radio]:disabled + label:hover:active, .sdx-container .segmented-controls-group [type=radio]:disabled + label:hover:focus, .sdx-container .toggle-button-group [type=checkbox]:disabled + label:hover:active, .sdx-container .toggle-button-group [type=checkbox]:disabled + label:hover:focus, .sdx-container .toggle-button-group [type=radio]:disabled + label:hover:active, .sdx-container .toggle-button-group [type=radio]:disabled + label:hover:focus {
outline: none;
}
.sdx-container .segmented-controls-group .icon, .sdx-container .toggle-button-group .icon {
margin-right: 5px;
}
.sdx-container .segmented-controls-group--centered .segmented-controls__label, .sdx-container .segmented-controls-group--centered .toggle-button__label, .sdx-container .toggle-button-group--centered .segmented-controls__label, .sdx-container .toggle-button-group--centered .toggle-button__label {
text-align: center;
max-width: 280px;
min-width: 270px;
}
.sdx-container .segmented-controls-group--centered .toggle-button__text, .sdx-container .toggle-button-group--centered .toggle-button__text {
float: left;
}
.sdx-container .segmented-controls-group--image [type=checkbox] + label, .sdx-container .segmented-controls-group--image [type=radio] + label, .sdx-container .toggle-button-group--image [type=checkbox] + label, .sdx-container .toggle-button-group--image [type=radio] + label {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
display: inline;
height: 72px;
padding: 4px;
text-align: center;
width: 72px;
}
.sdx-container .segmented-controls-group--image [type=checkbox] + label img, .sdx-container .segmented-controls-group--image [type=radio] + label img, .sdx-container .toggle-button-group--image [type=checkbox] + label img, .sdx-container .toggle-button-group--image [type=radio] + label img {
pointer-events: none;
}
.sdx-container ul,
.sdx-container menu,
.sdx-container dir {
display: block;
padding: 0;
}
.sdx-container ul,
.sdx-container ol {
margin: 0;
padding: 0;
list-style: none;
}
.sdx-container ul.list,
.sdx-container ol.list {
margin-top: 29px;
margin-bottom: 28px;
}
.sdx-container ul.list ul.list,
.sdx-container ul.list ol.list,
.sdx-container ol.list ul.list,
.sdx-container ol.list ol.list {
margin-top: 0;
margin-bottom: 0;
padding-left: 18px;
}
.sdx-container ul.list li,
.sdx-container ol.list li {
margin-bottom: 13px;
}
@media (min-width: 480px) {
.sdx-container ul.list li,
.sdx-container ol.list li {
margin-bottom: 12px;
}
}
.sdx-container ul.list li::before,
.sdx-container ol.list li::before {
float: left;
color: #1781e3;
content: "";
}
.sdx-container ul.list li.single-line,
.sdx-container ol.list li.single-line, .sdx-container ul.list.single-line > li,
.sdx-container ol.list.single-line > li {
margin-bottom: 7px;
}
@media (min-width: 480px) {
.sdx-container ul.list li.single-line,
.sdx-container ol.list li.single-line, .sdx-container ul.list.single-line > li,
.sdx-container ol.list.single-line > li {
margin-bottom: 6px;
}
}
.sdx-container dt.list {
font-weight: 300;
}
.sdx-container ul.list li {
margin-left: 18px;
}
.sdx-container ul.list li::before {
margin-left: -20px;
font-size: 33px;
content: "•";
}
.sdx-container ol.list li {
margin-left: 32px;
counter-increment: item;
}
@media (min-width: 480px) {
.sdx-container ol.list li {
margin-left: 30px;
}
}
.sdx-container ol.list li::before {
margin-left: -32px;
font-weight: 600;
content: counter(item) ".";
}
@media (min-width: 480px) {
.sdx-container ol.list li::before {
margin-left: -30px;
}
}
.sdx-container .badge {
display: inline-block;
position: relative;
}
.sdx-container .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;
}
.sdx-container .badge__content:hover {
background: #0851da;
}
.sdx-container .badge--message {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 24px;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sdx-container .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;
}
.sdx-container .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: -0.6px;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.sdx-container .badge--icon .avatar, .sdx-container .badge--avatar .avatar {
width: 32px;
height: 32px;
}
.sdx-container .badge--icon .badge__content, .sdx-container .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;
}
.sdx-container .badge--icon .badge__content--icon, .sdx-container .badge--avatar .badge__content--icon {
padding: 0;
width: 16px;
height: 16px;
}
.sdx-container .badge--icon .badge__content--icon .icon, .sdx-container .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;
}
.sdx-container .badge--icon .badge__content--icon .icon-heart, .sdx-container .badge--avatar .badge__content--icon .icon-heart {
font-size: 8px;
}
.sdx-container .badge--icon .badge__content--icon .icon-heart::before, .sdx-container .badge--avatar .badge__content--icon .icon-heart::before {
content: "";
}
.sdx-container .badge--icon .badge__content--icon .icon-check::before, .sdx-container .badge--avatar .badge__content--icon .icon-check::before {
content: "";
}
.sdx-container .badge--icon .badge__content--icon .icon-alert::before, .sdx-container .badge--avatar .badge__content--icon .icon-alert::before {
content: "";
}
.sdx-container .badge--alert .badge__content, .sdx-container .badge--notification .badge__content {
background: #ff8b2e;
}
.sdx-container .badge--alert .badge__content:hover, .sdx-container .badge--notification .badge__content:hover {
background: #e86416;
}
.sdx-container .badge--confirmation .badge__content {
background: #25b252;
}
.sdx-container .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);
}
}
.sdx-container .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);
}
.sdx-container .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;
}
.sdx-container .card .col,
.sdx-container .card [class*=col-] {
position: relative;
width: 100%;
min-height: 1px;
padding-left: 4px;
padding-right: 4px;
}
.sdx-container .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%;
}
.sdx-container .card .col-1 {
-webkit-flex: 0 0 12.5%;
-ms-flex: 0 0 12.5%;
flex: 0 0 12.5%;
max-width: 12.5%;
}
.sdx-container .card .col-2 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .card .col-3 {
-webkit-flex: 0 0 37.5%;
-ms-flex: 0 0 37.5%;
flex: 0 0 37.5%;
max-width: 37.5%;
}
.sdx-container .card .col-4 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .card .col-5 {
-webkit-flex: 0 0 62.5%;
-ms-flex: 0 0 62.5%;
flex: 0 0 62.5%;
max-width: 62.5%;
}
.sdx-container .card .col-6 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .card .col-7 {
-webkit-flex: 0 0 87.5%;
-ms-flex: 0 0 87.5%;
flex: 0 0 87.5%;
max-width: 87.5%;
}
.sdx-container .card .col-8 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.sdx-container .card .pull-0 {
right: auto;
}
.sdx-container .card .pull-1 {
right: 12.5%;
}
.sdx-container .card .pull-2 {
right: 25%;
}
.sdx-container .card .pull-3 {
right: 37.5%;
}
.sdx-container .card .pull-4 {
right: 50%;
}
.sdx-container .card .pull-5 {
right: 62.5%;
}
.sdx-container .card .pull-6 {
right: 75%;
}
.sdx-container .card .pull-7 {
right: 87.5%;
}
.sdx-container .card .pull-8 {
right: 100%;
}
.sdx-container .card .push-0 {
left: auto;
}
.sdx-container .card .push-1 {
left: 12.5%;
}
.sdx-container .card .push-2 {
left: 25%;
}
.sdx-container .card .push-3 {
left: 37.5%;
}
.sdx-container .card .push-4 {
left: 50%;
}
.sdx-container .card .push-5 {
left: 62.5%;
}
.sdx-container .card .push-6 {
left: 75%;
}
.sdx-container .card .push-7 {
left: 87.5%;
}
.sdx-container .card .push-8 {
left: 100%;
}
.sdx-container .card .offset-1 {
margin-left: 12.5%;
}
.sdx-container .card .offset-2 {
margin-left: 25%;
}
.sdx-container .card .offset-3 {
margin-left: 37.5%;
}
.sdx-container .card .offset-4 {
margin-left: 50%;
}
.sdx-container .card .offset-5 {
margin-left: 62.5%;
}
.sdx-container .card .offset-6 {
margin-left: 75%;
}
.sdx-container .card .offset-7 {
margin-left: 87.5%;
}
.sdx-container .card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #015;
}
.sdx-container .card .card__header {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 400;
}
.sdx-container .card .card__footer {
padding: 24px;
}
.sdx-container .card .card__text {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
margin: 0;
}
.sdx-container .card .link::before {
content: "";
display: block;
margin-top: 4px;
}
.sdx-container .card--dark {
background: #eef3f6;
}
.sdx-container .card.card--clickable {
cursor: pointer;
}
.sdx-container .card.card--clickable:hover {
background: #eef3f6;
}
.sdx-container .card.card--clickable:hover.card--dark {
background: #dde3e7;
}
.sdx-container .card--notification {
padding: 12px 16px 20px;
border-radius: 3px;
}
.sdx-container .card--notification .card__header::after {
content: "";
display: block;
clear: both;
}
.sdx-container .card--notification .card__header h1,
.sdx-container .card--notification .card__header h2, .sdx-container .card--notification .card__header span {
line-height: 24px;
letter-spacing: 0.1px;
font-size: 14px;
margin-bottom: 4px;
}
.sdx-container .card--notification .card__header h1 {
font-weight: 600;
}
.sdx-container .card--notification .card__header h2, .sdx-container .card--notification .card__header span {
font-weight: 400;
color: #666;
}
.sdx-container .card--image-top, .sdx-container .card--image-bottom {
padding: 0;
}
.sdx-container .card--image-top::before, .sdx-container .card--image-bottom::before {
content: none;
}
.sdx-container .card--image-top .card__image, .sdx-container .card--image-bottom .card__image {
position: relative;
width: 100%;
height: 168px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
}
.sdx-container .card--image-top .card__image::before, .sdx-container .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);
}
.sdx-container .card--image-top .card__body, .sdx-container .card--image-bottom .card__body {
position: relative;
padding: 12px 16px 20px;
}
.sdx-container .card--image-top .card__body::before, .sdx-container .card--image-bottom .card__body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #015;
}
.sdx-container .card--image-top .card__image::before {
border-radius: 3px 3px 0 0;
}
.sdx-container .card--image-top.card--clickable:hover .card__image::before {
opacity: 1;
}
.sdx-container .card--image-bottom .card__image::before {
border-radius: 0 0 3px 3px;
}
.sdx-container .card--image-bottom.card--clickable:hover .card__image::before {
opacity: 1;
}
.sdx-container .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);
}
.sdx-container .card--promo.card--clickable:hover .card__image {
opacity: 0.95;
}
.sdx-container .card--upload-photos {
padding-top: 23px;
padding-bottom: 24px;
border-radius: 0;
}
.sdx-container .card--upload-photos .card__header {
padding-bottom: 25px;
}
.sdx-container .card--upload-photos .card__body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.sdx-container .card--upload-photos .card__image:not(:last-child) {
margin-right: 20px;
}
.sdx-container .card--upload-photos .card__image img {
display: block;
width: auto;
height: 103px;
}
.sdx-container .card--upload-files {
padding: 0;
border-radius: 0;
}
.sdx-container .card--upload-files .card__header {
padding: 25px 24px 21px;
border-bottom: 1px solid #dde3e7;
}
.sdx-container .card--upload-files .card__item {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
padding: 21px 24px 22px;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .card--upload-files .card__item:not(:last-child) {
border-bottom: 1px solid #dde3e7;
}
.sdx-container .card--upload-files .card__item .card__item-icon {
margin-right: 6px;
float: left;
font-size: 30px;
}
.sdx-container .card--upload-files .card__item .card__text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sdx-container .card--document {
padding: 0;
border-radius: 0;
}
.sdx-container .card--document a {
margin: 0;
color: inherit;
border-bottom: inherit;
}
.sdx-container .card--document a .card__item-detail {
color: #1781e3;
}
.sdx-container .card--document a:hover .card__item-detail {
color: #0851da;
}
.sdx-container .card--document .card__header {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
font-weight: 300;
padding: 22px 24px 17px;
border-bottom: 1px solid #dde3e7;
}
.sdx-container .card--document .card__footer {
border-top: 1px solid #dde3e7;
text-align: center;
}
.sdx-container .card--document .card__item {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
display: block;
padding: 15px 24px 16px;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .card--document .card__item:not(:last-child) {
border-bottom: 1px solid #dde3e7;
}
.sdx-container .card--document .card__item .card__item-icon {
margin-top: 1px;
margin-right: 6px;
float: left;
font-size: 30px;
}
.sdx-container .card--document .card__item .card__item-detail {
font-size: 21px;
}
.sdx-container .card--document .card__item .card__item-detail .icon {
font-weight: 600;
}
.sdx-container .card--document .card__item .card__item-wrapper {
overflow: hidden;
}
.sdx-container .card--document .card__item .card__item-wrapper p:hover {
text-decoration: underline;
color: #0851da;
}
.sdx-container .card--document .card__item .card__item--no-truncate h1,
.sdx-container .card--document .card__item .card__item--no-truncate p {
white-space: normal;
}
.sdx-container .card--document .card__item h1,
.sdx-container .card--document .card__item p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
}
.sdx-container .card--document .card__item h1 {
font-weight: 600;
line-height: 22px;
letter-spacing: 0;
font-size: 16px;
}
.sdx-container .card--document .card__item p {
line-height: normal;
letter-spacing: 0.1px;
font-size: 14px;
color: #666;
}
.sdx-container .card--document .card__travel-station h1 {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
font-weight: 300;
color: #666;
}
.sdx-container .card--document .card__travel-station p {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 300;
color: #666;
}
.sdx-container .card--document .card__travel-station p strong {
font-weight: 600;
color: #333;
}
.sdx-container .card--document .card__travel-time h1 {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
font-weight: 300;
color: #333;
}
.sdx-container .card--document .card__travel-time p {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
font-weight: 400;
color: #666;
}
.sdx-container .card--document .card__travel-direction h1 {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
font-weight: 600;
color: #333;
}
.sdx-container .card--document .card__travel-direction p {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
font-weight: 400;
color: #666;
}
.sdx-container .card--news {
padding: 0;
}
.sdx-container .card--news::before {
content: none;
}
.sdx-container .card--news .card__image {
position: relative;
width: 100%;
height: 180px;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
overflow: hidden;
}
.sdx-container .card--news .card__header::after {
content: "";
display: block;
clear: both;
}
.sdx-container .card--news .card__header h2,
.sdx-container .card--news .card__header p,
.sdx-container .card--news .card__header a {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
}
.sdx-container .card--news .card__body {
position: relative;
padding: 7px 16px 12px;
}
.sdx-container .card--news .card__body .card__title {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
font-weight: 400;
margin-bottom: 5px;
}
.sdx-container .card--news .card__body .card__text {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
font-weight: 400;
}
.sdx-container .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;
}
.sdx-container .card--news .tray-item {
position: relative;
margin-right: 30px;
}
.sdx-container .card--news .tray-item .icon {
color: #1781e3;
font-size: 24px;
}
.sdx-container .card--news .tray-item .count {
font-weight: 400;
position: absolute;
top: -4px;
font-size: 12px;
color: #333;
}
.sdx-container .card--dark.card--news {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #015;
color: #fff;
}
.sdx-container .card--dark.card--news .tray-item .count {
color: #1781e3;
}
.sdx-container .card--rounded {
border-radius: 3px;
}
.sdx-container .card--not-rounded,
.sdx-container .card--not-rounded .card__image::before {
border-radius: 0;
}
.sdx-container .card--border {
border: 0 solid #d6d6d6;
border-width: 0 1px 1px 1px;
}
.sdx-container .card--navigation .card__header .icon {
margin-right: 16px;
}
.sdx-container .card--navigation .card__item:hover {
text-decoration: underline;
-webkit-text-decoration-color: #0851da;
text-decoration-color: #0851da;
}
.sdx-container .card--navigation .card__item h1 {
font-size: 16px;
font-weight: normal;
}
.sdx-container .card--navigation .card__text {
padding: 15px 24px;
}
.sdx-container .card--navigation .card__text a {
color: #1781e3;
}
.sdx-container .card--navigation .card__text a:hover {
color: #0851da;
}
.sdx-container .card--navigation .card__text .link::before {
content: normal;
}
.sdx-container .card--icon .card__body {
padding-bottom: 0;
padding-left: 50px;
padding-right: 0;
padding-top: 3px;
}
.sdx-container .card--compact .card__body {
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 3px;
}
.sdx-container .card--compact .card__body > h1, .sdx-container .card--compact .card__body h2, .sdx-container .card--compact .card__body h3, .sdx-container .card--compact .card__body h4, .sdx-container .card--compact .card__body h5, .sdx-container .card--compact .card__body h6 {
padding-left: 50px;
}
.sdx-container .card__item-icon {
float: left;
}
.sdx-container .card--message-action::before {
background: #1781e3;
}
.sdx-container .card--message-action .card__item-icon {
color: #1781e3;
}
.sdx-container .card--message-info::before {
background: #0eaba9;
}
.sdx-container .card--message-info .card__item-icon {
color: #0eaba9;
}
.sdx-container .card--message-success::before {
background: #25b252;
}
.sdx-container .card--message-success .card__item-icon {
color: #25b252;
}
.sdx-container .card--message-important::before {
background: #ff8b2e;
}
.sdx-container .card--message-important .card__item-icon {
color: #ff8b2e;
}
.sdx-container .card--message-alert::before {
background: #d12;
}
.sdx-container .card--message-alert .card__item-icon {
color: #d12;
}
.sdx-container .card--navy::before {
background: #015;
}
.sdx-container .card--blue::before {
background: #1af;
}
.sdx-container .card--purple::before {
background: #a63297;
}
.sdx-container .card--turquoise::before, .sdx-container .card--apple::before, .sdx-container .card--petrol::before {
background: #0eaba9;
}
.sdx-container .card--iris::before {
background: #5944c6;
}
.sdx-container .card--pink::before {
background: #e61e64;
}
.sdx-container .card--orchid::before {
background: #a63297;
}
.sdx-container .card--green::before {
background: #25b252;
}
.sdx-container .card--orange::before {
background: #ff8b2e;
}
.sdx-container .card--red::before {
background: #d12;
}
.sdx-container .card--no-color::before {
background: #d6d6d6;
height: 1px;
}
.sdx-container .card .badge.badge--icon {
margin: 0 0 16px 16px;
}
.sdx-container [class^="card card--message-"] .card__body h1, .sdx-container [class^="card card--message-"] .card__body h2, .sdx-container [class^="card card--message-"] .card__body h3, .sdx-container [class^="card card--message-"] .card__body h4, .sdx-container [class^="card card--message-"] .card__body h5, .sdx-container [class^="card card--message-"] .card__body h6 {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
font-weight: 300;
margin-bottom: 24px;
}
.sdx-container .loader-bar {
position: relative;
width: 100%;
}
.sdx-container .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;
}
.sdx-container .loader-bar > .detail .name {
text-align: left;
}
.sdx-container .loader-bar > .detail .detail-right .progress {
display: inline-block;
text-align: right;
}
.sdx-container .loader-bar > .detail .detail-right .file-size {
display: none;
}
.sdx-container .loader-bar > .detail .detail-right .file-size::before {
content: " ";
}
@media (min-width: 480px) {
.sdx-container .loader-bar > .detail .detail-right .file-size {
display: inline;
float: right;
}
}
.sdx-container .loader-bar--progress {
border-radius: 5px;
position: relative;
background-color: #d6d6d6;
width: 100%;
height: 10px;
overflow: hidden;
}
.sdx-container .loader-bar--progress > .indicator {
position: absolute;
top: 0;
left: 0;
transition: width 90ms linear;
z-index: 30;
background-color: #25b252;
width: 0%;
height: 10px;
}
.sdx-container .loader-bar--progress > .indicator::after {
position: absolute;
top: 0;
right: -5px;
background: inherit;
width: 10px;
height: 10px;
content: "";
}
.sdx-container .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;
}
.sdx-container .loader-bar--progress > .indicator--busy::before {
position: absolute;
top: 0;
left: -5px;
background: inherit;
width: 10px;
height: 10px;
content: "";
}
.sdx-container .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%;
}
}
.sdx-container .status:before {
color: #1781e3;
content: "";
display: inline-block;
font-family: "sdx-icons";
}
.sdx-container .modal {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 900001;
width: 100%;
height: 100%;
outline: none;
pointer-events: none;
}
.sdx-container .modal--open {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sdx-container .modal--open .modal__content {
-webkit-transform: scale(1);
transform: scale(1);
visibility: visible;
opacity: 1;
}
.sdx-container .modal > .container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sdx-container .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;
}
.sdx-container .modal__close {
position: absolute;
top: 16px;
right: 13px;
width: 32px;
height: 32px;
cursor: pointer;
color: #015;
}
@media (min-width: 1024px) {
.sdx-container .modal__close {
top: 24px;
right: 26px;
}
}
.sdx-container .modal__close .icon {
line-height: 32px;
font-size: 24px;
font-weight: 600;
}
@media (min-width: 1024px) {
.sdx-container .modal__close .icon {
font-size: 30px;
font-weight: 600;
}
}
.sdx-container .modal__header {
border-bottom: 1px solid #d6d6d6;
padding: 20px 64px 0 24px;
width: 100%;
height: 64px;
}
@media (min-width: 1024px) {
.sdx-container .modal__header {
padding: 24px 64px 0 32px;
height: 80px;
}
}
.sdx-container .modal__header h1,
.sdx-container .modal__header h2,
.sdx-container .modal__header h3,
.sdx-container .modal__header h4,
.sdx-container .modal__header h5,
.sdx-container .modal__header h6 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0;
}
.sdx-container .modal__header h1 {
font-weight: 600;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
}
@media (min-width: 1024px) {
.sdx-container .modal__header h1 {
font-weight: 300;
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
}
}
.sdx-container .modal__body {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
max-height: calc(100vh - 80px - 80px);
padding: 21px 24px 24px;
}
@media (min-width: 1024px) {
.sdx-container .modal__body {
padding: 29px 32px 32px;
}
}
.sdx-container .modal__body .button-group {
margin-top: 21px;
}
@media (min-width: 1024px) {
.sdx-container .modal__body .button-group {
margin-top: 34px;
}
}
@media (max-width: 479px) {
.sdx-container .modal > .container {
width: calc(102% - (2 * 24px));
}
}
.sdx-container .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%;
}
.sdx-container .backdrop--open {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.sdx-container .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);
}
.sdx-container .flyout.is-open {
display: block;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.sdx-container .flyout--left {
left: 0;
}
.sdx-container .flyout--left .flyout__indicator::before {
left: 24px;
}
.sdx-container .flyout--right {
right: 0;
}
.sdx-container .flyout--top {
top: auto;
bottom: 100%;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
.sdx-container .flyout--top .flyout__indicator::before {
top: auto;
bottom: -7px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.sdx-container .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: "";
}
.sdx-container .flyout__content {
background: inherit;
}
.sdx-container .flyout__title {
margin-top: -4px;
text-align: center;
}
.sdx-container .flyout__text {
margin-bottom: 16px;
text-align: center;
}
.sdx-container .flyout--list {
width: 254px;
padding: 0;
}
.sdx-container .flyout--list li:not(:last-child) {
border-bottom: 1px solid #e4e9ec;
}
.sdx-container .flyout--list .list-link {
display: block;
width: 100%;
padding: 12px 24px;
border: 0;
background: #fff;
}
.sdx-container .flyout--list .list-link:hover, .sdx-container .flyout--list .list-link:focus {
color: #fff;
background: #1781e3;
}
.sdx-container .flyout--info {
width: 369px;
padding: 24px;
}
.sdx-container .flyout--info hr,
.sdx-container .flyout--info .divider {
margin: 16px 0;
}
.sdx-container .context {
position: fixed;
bottom: 0;
width: 100%;
z-index: 60000;
background: #fff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.sdx-container .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;
}
.sdx-container .context__primary {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
width: 100%;
height: 73px;
z-index: 60010;
}
.sdx-container .context__primary .context-link {
color: #fff;
background: #1781e3;
}
.sdx-container .context__primary .context-link:not(:last-child) {
border-right: 1px solid #e4e9ec;
}
.sdx-container .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;
}
.sdx-container .context__primary .context-link--more.is-open {
color: #1781e3;
background: #fff;
}
.sdx-container .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;
}
.sdx-container .context__secondary.is-open {
display: block;
opacity: 1;
}
.sdx-container .context__secondary li {
border-bottom: 1px solid #e4e9ec;
}
.sdx-container .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;
}
.sdx-container .context--flyout .flyout-icon {
color: #015;
}
.sdx-container .context--flyout ~ .flyout {
top: 67px;
right: 20px;
max-width: 280px;
width: 100%;
}
.sdx-container .context--flyout ~ .flyout::before {
right: 13px;
}
.sdx-container .notification-header {
position: relative;
overflow: hidden;
height: 0;
transition: height 400ms cubic-bezier(0.35, 0.035, 0.275, 0.9);
}
.sdx-container .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;
}
.sdx-container .notification-header .notification__content:hover {
background: #0851da;
}
@media (min-width: 768px) {
.sdx-container .notification-header .notification__content {
padding: 21px 38px;
}
}
.sdx-container .notification-header .notification__content .notification__body {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.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);
}
.sdx-container .notification-header .notification__content .notification__body strong {
font-weight: 600;
font-size: 16px;
}
.sdx-container .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);
}
.sdx-container .notification-header .notification__content button .icon {
line-height: 32px;
color: #fff;
font-size: 34px;
}
.sdx-container .notification--open {
height: 74px;
}
.sdx-container .notification--alert .notification__content {
background: #ff8b2e;
}
.sdx-container .notification--alert .notification__content:hover {
background: #e86416;
}
.sdx-container .notification--confirmation .notification__content {
background: #25b252;
}
.sdx-container .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;
}
}
.sdx-container .modal--notification .modal__content {
background: #1781e3;
width: 100%;
height: 100%;
}
@media (min-width: 768px) {
.sdx-container .modal--notification .modal__content {
max-width: 460px;
height: auto;
}
}
.sdx-container .modal--notification .modal__content .modal__close {
top: 22px;
right: 22px;
color: #fff;
}
.sdx-container .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;
}
.sdx-container .modal--notification .modal__content .modal__body .notification-message {
font-weight: 400;
line-height: 32px;
letter-spacing: -0.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;
}
.sdx-container .modal--notification .modal__content .modal__body .notification-message .icon {
font-size: 64px;
margin-bottom: 20px;
}
.sdx-container .modal--notification .modal__content .modal__body .button {
border: 1px solid #fff;
background-color: transparent;
color: #fff;
margin-top: 30px;
}
.sdx-container .modal--notification .modal__content .modal__body .button:hover, .sdx-container .modal--notification .modal__content .modal__body .button:focus, .sdx-container .modal--notification .modal__content .modal__body .button:active {
border-color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 479px) {
.sdx-container .modal--notification > .container {
height: calc(100% - 48px);
}
}
.sdx-container .modal--notification--alert .modal__content {
background: #ff8b2e;
}
.sdx-container .modal--notification--confirmation .modal__content {
background: #25b252;
}
.sdx-container .tooltip {
display: inline-block;
position: relative;
z-index: 1;
outline: none;
cursor: pointer;
}
.sdx-container .tooltip::before, .sdx-container .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;
}
.sdx-container .tooltip:hover::before, .sdx-container .tooltip:hover::after, .sdx-container .tooltip:focus::before, .sdx-container .tooltip:focus::after {
visibility: visible;
opacity: 1;
transition-delay: 100ms;
}
.sdx-container .tooltip::before {
position: absolute;
background: 0 0;
border: 8px solid transparent;
z-index: 1000001;
content: "";
}
.sdx-container .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);
}
.sdx-container .tooltip::before, .sdx-container .tooltip::after, .sdx-container .tooltip--top::before, .sdx-container .tooltip--top::after {
left: 50%;
bottom: calc(100% + 2px);
margin: 0;
}
.sdx-container .tooltip::before, .sdx-container .tooltip--top::before {
left: calc(50% - 8px);
margin-bottom: -15px;
border-color: transparent;
border-top-color: #0851da;
}
.sdx-container .tooltip::after, .sdx-container .tooltip--top::after {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.sdx-container .tooltip:hover::before, .sdx-container .tooltip:focus::before, .sdx-container .tooltip--top:hover::before, .sdx-container .tooltip--top:focus::before {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
.sdx-container .tooltip:hover::after, .sdx-container .tooltip:focus::after, .sdx-container .tooltip--top:hover::after, .sdx-container .tooltip--top:focus::after {
-webkit-transform: translateX(-50%) translateY(-8px);
transform: translateX(-50%) translateY(-8px);
}
.sdx-container .tooltip--bottom::before, .sdx-container .tooltip--bottom::after {
left: 50%;
top: calc(100% + 2px);
bottom: auto;
margin: 0;
}
.sdx-container .tooltip--bottom::before {
left: calc(50% - 8px);
margin-top: -15px;
border-color: transparent;
border-bottom-color: #0851da;
}
.sdx-container .tooltip--bottom::after {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.sdx-container .tooltip--bottom:hover::before, .sdx-container .tooltip--bottom:focus::before {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
.sdx-container .tooltip--bottom:hover::after, .sdx-container .tooltip--bottom:focus::after {
-webkit-transform: translateX(-50%) translateY(8px);
transform: translateX(-50%) translateY(8px);
}
.sdx-container .tooltip--left::before, .sdx-container .tooltip--left::after {
left: auto;
right: calc(100% + 2px);
bottom: 50%;
margin: 0;
}
.sdx-container .tooltip--left::before {
margin-right: -15px;
margin-bottom: -8px;
border-color: transparent;
border-left-color: #0851da;
}
.sdx-container .tooltip--left::after {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
margin-bottom: -16px;
}
.sdx-container .tooltip--left:hover::before, .sdx-container .tooltip--left:focus::before {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
}
.sdx-container .tooltip--left:hover::after, .sdx-container .tooltip--left:focus::after {
-webkit-transform: translateX(-8px) translateY(0);
transform: translateX(-8px) translateY(0);
}
.sdx-container .tooltip--right::before, .sdx-container .tooltip--right::after {
left: calc(100% + 2px);
bottom: 50%;
margin: 0;
}
.sdx-container .tooltip--right::before {
margin-left: -15px;
margin-bottom: -8px;
border-color: transparent;
border-right-color: #0851da;
}
.sdx-container .tooltip--right::after {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
margin-bottom: -16px;
}
.sdx-container .tooltip--right:hover::before, .sdx-container .tooltip--right:focus::before {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
.sdx-container .tooltip--right:hover::after, .sdx-container .tooltip--right:focus::after {
-webkit-transform: translateX(8px) translateY(0);
transform: translateX(8px) translateY(0);
}
.sdx-container .tooltip--multiline::after {
height: auto;
text-align: center;
white-space: pre-wrap;
word-break: break-all;
}
.sdx-container .tooltip:not([aria-label])::before, .sdx-container .tooltip:not([aria-label])::after, .sdx-container .tooltip[aria-label=""]::before, .sdx-container .tooltip[aria-label=""]::after {
display: none !important;
}
.sdx-container .toolbar {
font-family: "TheSans", sans-serif;
font-weight: 400;
}
.sdx-container .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);
}
.sdx-container .toolbar__item:hover, .sdx-container .toolbar__item:focus {
color: #0851da;
}
.sdx-container .toolbar__item:hover .toolbar__label, .sdx-container .toolbar__item:focus .toolbar__label {
color: #0851da;
}
.sdx-container .toolbar__item .toolbar__label {
display: block;
font-size: 14px;
color: #333;
}
.sdx-container .toolbar__item .icon {
font-size: 30px;
}
.sdx-container .toolbar__item.item--show {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.sdx-container .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;
}
.sdx-container .toolbar--vertical .toolbar__item .toolbar__label {
display: inline-block;
margin-left: 12px;
line-height: 1;
}
.sdx-container .toolbar--vertical .toolbar__item .icon {
vertical-align: middle;
}
.sdx-container .toolbar--vertical .toolbar__item.item--show {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.sdx-container .toolbar .item--disabled,
.sdx-container .toolbar.toolbar--disabled .toolbar__item {
pointer-events: none;
color: #d6d6d6;
}
.sdx-container .toolbar .item--disabled .toolbar__label,
.sdx-container .toolbar.toolbar--disabled .toolbar__item .toolbar__label {
color: #d6d6d6;
}
.sdx-container .bg--dark .toolbar__item:hover .toolbar__label, .sdx-container .bg--dark .toolbar__item:focus .toolbar__label {
color: #fff;
text-decoration: underline;
}
.sdx-container .bg--dark .toolbar__item .toolbar__label {
color: #fff;
}
.sdx-container .bg--dark .toolbar .item--disabled,
.sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item {
pointer-events: none;
opacity: 0.4;
color: #fff;
}
.sdx-container .bg--dark .toolbar .item--disabled .toolbar__label,
.sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item .toolbar__label {
color: #fff;
}
.sdx-container .progress-light {
position: relative;
margin: 24px 0;
width: 100%;
}
@media (min-width: 768px) {
.sdx-container .progress-light {
margin: 32px 0;
}
}
.sdx-container .progress-light .arrow {
position: absolute;
top: 16px;
width: 24px;
height: 24px;
}
@media (min-width: 768px) {
.sdx-container .progress-light .arrow {
top: 22px;
}
}
.sdx-container .progress-light .arrow .icon {
line-height: 24px;
font-size: 17px;
font-weight: bold;
pointer-events: none;
color: #1781e3;
outline: none;
}
.sdx-container .progress-light .arrow:hover .icon {
color: #0851da;
}
.sdx-container .progress-light .arrow--disabled .icon {
color: #cfd5d9;
}
.sdx-container .progress-light .arrow--disabled:hover .icon {
color: #b1b9be;
}
.sdx-container .progress-light .arrow--left {
left: -8px;
}
.sdx-container .progress-light .arrow--right {
right: -8px;
}
.sdx-container .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) {
.sdx-container .progress-light__detail {
margin: 0 18px 13px;
}
}
.sdx-container .progress-light__bar {
position: relative;
background-color: #d6d6d6;
height: 9px;
margin: 0 18px 10px;
overflow: hidden;
border-radius: 9px;
}
@media (min-width: 768px) {
.sdx-container .progress-light__bar {
margin: 0 18px;
}
}
.sdx-container .progress-light__bar .bar__progress {
background-color: #1781e3;
height: 9px;
width: 0;
}
.sdx-container .progress-light__bar .bar__progress--complete {
background-color: #25b252;
}
.sdx-container .progress-light__bar .bar__tick {
position: absolute;
}
.sdx-container .progress-light__bar .bar__tick::before {
position: absolute;
top: 0;
background: #000;
opacity: 0.5;
width: 1px;
height: 9px;
content: "";
}
.sdx-container .bg--dark .progress-light__detail {
color: #fff;
}
.sdx-container .bg--dark .progress-light__bar {
background-color: #fff;
}
.sdx-container .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) {
.sdx-container .progress-full {
margin: 32px 0;
}
}
.sdx-container .progress-full__bar {
outline: none;
}
.sdx-container .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;
}
.sdx-container .progress-full__bar .indicator + .indicator {
margin-left: 16px;
}
@media (min-width: 768px) {
.sdx-container .progress-full__bar .indicator + .indicator {
margin-left: 24px;
}
}
.sdx-container .progress-full__bar .indicator:hover {
color: #0851da;
border-color: #0851da;
}
.sdx-container .progress-full__bar .indicator--completed {
color: #fff;
border-color: #25b252;
background-color: #25b252;
}
.sdx-container .progress-full__bar .indicator--completed:hover {
color: #fff;
border-color: #008236;
background-color: #008236;
}
.sdx-container .progress-full__bar .indicator--current {
color: #fff;
border-color: #1781e3;
background-color: #1781e3;
}
.sdx-container .progress-full__bar .indicator--current:hover {
color: #fff;
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .progress-full__sections {
font-weight: 400;
position: relative;
width: 100%;
height: 18px;
margin-top: 11px;
line-height: 1;
letter-spacing: -0.35px;
font-size: 16px;
color: #666;
}
.sdx-container .progress-full__sections span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
.sdx-container .progress-full__sections .section--active {
visibility: visible;
}
.sdx-container .bg--dark .progress-full__bar .indicator {
color: #fff;
border-color: #fff;
}
.sdx-container .bg--dark .progress-full__bar .indicator:hover {
color: #1781e3;
border-color: #1781e3;
}
.sdx-container .bg--dark .progress-full__bar .indicator--completed {
color: #fff;
border-color: #25b252;
background-color: #25b252;
}
.sdx-container .bg--dark .progress-full__bar .indicator--completed:hover {
color: #fff;
border-color: #008236;
background-color: #008236;
}
.sdx-container .bg--dark .progress-full__bar .indicator--current {
color: #fff;
border-color: #1781e3;
background-color: #1781e3;
}
.sdx-container .bg--dark .progress-full__bar .indicator--current:hover {
color: #fff;
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .bg--dark .progress-full__sections {
color: #fff;
}
.sdx-container .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) {
.sdx-container .progress-full {
margin: 32px 0;
}
}
.sdx-container .progress-full__bar {
outline: none;
}
.sdx-container .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;
}
.sdx-container .progress-full__bar .indicator + .indicator {
margin-left: 16px;
}
@media (min-width: 768px) {
.sdx-container .progress-full__bar .indicator + .indicator {
margin-left: 24px;
}
}
.sdx-container .progress-full__bar .indicator:hover {
color: #0851da;
border-color: #0851da;
}
.sdx-container .progress-full__bar .indicator--completed {
color: #fff;
border-color: #25b252;
background-color: #25b252;
}
.sdx-container .progress-full__bar .indicator--completed:hover {
color: #fff;
border-color: #008236;
background-color: #008236;
}
.sdx-container .progress-full__bar .indicator--current {
color: #fff;
border-color: #1781e3;
background-color: #1781e3;
}
.sdx-container .progress-full__bar .indicator--current:hover {
color: #fff;
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .progress-full__sections {
font-weight: 400;
position: relative;
width: 100%;
height: 18px;
margin-top: 11px;
line-height: 1;
letter-spacing: -0.35px;
font-size: 16px;
color: #666;
}
.sdx-container .progress-full__sections span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
.sdx-container .progress-full__sections .section--active {
visibility: visible;
}
.sdx-container .bg--dark .progress-full__bar .indicator {
color: #fff;
border-color: #fff;
}
.sdx-container .bg--dark .progress-full__bar .indicator:hover {
color: #1781e3;
border-color: #1781e3;
}
.sdx-container .bg--dark .progress-full__bar .indicator--completed {
color: #fff;
border-color: #25b252;
background-color: #25b252;
}
.sdx-container .bg--dark .progress-full__bar .indicator--completed:hover {
color: #fff;
border-color: #008236;
background-color: #008236;
}
.sdx-container .bg--dark .progress-full__bar .indicator--current {
color: #fff;
border-color: #1781e3;
background-color: #1781e3;
}
.sdx-container .bg--dark .progress-full__bar .indicator--current:hover {
color: #fff;
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .bg--dark .progress-full__sections {
color: #fff;
}
.sdx-container .ribbon, .sdx-container .ribbon-badge {
font-size: 16px;
position: relative;
width: 100%;
height: 0;
z-index: 10;
}
.sdx-container .ribbon .ribbon__wrap {
width: 112px;
height: 112px;
position: absolute;
overflow: hidden;
top: -5px;
right: -5px;
}
.sdx-container .ribbon.ribbon--left .ribbon__wrap {
right: auto;
left: -5px;
}
.sdx-container .ribbon.ribbon--left .ribbon__content {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: auto;
bottom: 0;
}
.sdx-container .ribbon.ribbon--small {
font-size: 14px;
}
.sdx-container .ribbon.ribbon--small .ribbon__wrap {
width: 96px;
height: 96px;
}
.sdx-container .ribbon.ribbon--large {
font-size: 18px;
}
.sdx-container .ribbon.ribbon--large .ribbon__wrap {
width: 128px;
height: 128px;
}
.sdx-container .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 */
}
.sdx-container .ribbon .ribbon__content::before, .sdx-container .ribbon .ribbon__content::after {
content: "";
position: absolute;
bottom: -4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #7f2879;
}
.sdx-container .ribbon .ribbon__content::before {
left: 0;
}
.sdx-container .ribbon .ribbon__content::after {
right: 0;
}
.sdx-container .ribbon-badge .ribbon__content {
position: absolute;
display: inline-block;
right: -8px;
top: 6px;
min-width: 70px;
padding: 6px 8px 6px;
background-color: #0eaba9;
color: #fff;
}
.sdx-container .ribbon-badge .ribbon__content::after {
content: "";
position: absolute;
right: 0;
bottom: -8px;
border-top: 8px solid #0c847e;
border-right: 8px solid transparent;
}
.sdx-container .ribbon-badge.ribbon--left .ribbon__content {
right: auto;
left: -8px;
}
.sdx-container .ribbon-badge.ribbon--left .ribbon__content::after {
right: auto;
left: 0;
border-right: 0;
border-left: 8px solid transparent;
}
.sdx-container .ribbon-badge.ribbon--small {
font-size: 14px;
}
.sdx-container .ribbon-badge.ribbon--small .ribbon__content {
padding: 4px 8px 4px;
}
.sdx-container .ribbon-badge.ribbon--large {
font-size: 18px;
}
.sdx-container .ribbon-badge.ribbon--large .ribbon__content {
padding: 8px 8px 8px;
}
.sdx-container .table-generic {
display: block;
}
.sdx-container .table-generic .table__title {
margin-bottom: 16px;
border-bottom: 1px solid #adadad;
}
.sdx-container .table-generic .table__wrapper > .row {
margin-left: 0;
margin-right: 0;
padding-left: 16px;
padding-right: 16px;
}
.sdx-container .table-generic .table__wrapper > .row > [class*=col-] {
padding: 0;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.sdx-container .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%;
}
.sdx-container .table-generic .table__wrapper .table-item {
display: inline-block;
margin: 0 12px;
}
.sdx-container .table-generic .table__wrapper .table-image {
width: 80px;
height: auto;
}
.sdx-container .table-generic .highlight {
background: #f8fafb;
}
.sdx-container .table-generic .border {
margin: 16px;
padding: 16px;
border: 1px solid #adadad;
}
.sdx-container .table-generic .border-horizontal {
margin: 16px 0;
border-bottom: 1px solid #adadad;
}
.sdx-container .table-generic .border-vertical {
margin: 0 16px;
border-right: 1px solid #adadad;
}
.sdx-container .table-display {
display: block;
}
.sdx-container .table-display::after {
content: "";
display: block;
clear: both;
}
.sdx-container .table-display .table__wrapper {
margin-bottom: 16px;
border-top: 1px solid #adadad;
border-bottom: 1px solid #adadad;
}
.sdx-container .table-display .table__wrapper > .row {
margin: 0;
padding: 10px 0;
}
.sdx-container .table-display .table__wrapper > .row:not(:last-child) {
border-bottom: 1px solid #adadad;
}
.sdx-container .table-display .table__wrapper > .row > [class^=col-] {
padding: 6px 16px 0;
}
.sdx-container .table-display .table__wrapper .checkbox + .checkbox {
margin-top: 8px;
}
.sdx-container .table-display .table__wrapper .radio + .radio {
margin-top: 8px;
}
.sdx-container .table-display .button {
margin: 0 16px;
}
.sdx-container .table {
display: table;
width: 100%;
}
.sdx-container .table .table__wrapper {
display: table;
width: 100%;
}
.sdx-container .table table {
display: table;
width: 100%;
color: #333;
border-collapse: collapse;
border-top: 1px solid #adadad;
border-bottom: 1px solid #adadad;
}
.sdx-container .table table:not(:last-child) {
margin-bottom: 16px;
}
.sdx-container .table th,
.sdx-container .table td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 8px;
padding-right: 8px;
text-align: left;
}
.sdx-container .table th:first-child,
.sdx-container .table td:first-child {
padding-left: 16px;
}
.sdx-container .table th:last-child,
.sdx-container .table td:last-child {
padding-right: 16px;
}
.sdx-container .table thead {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 16px;
font-weight: 600;
}
.sdx-container .table thead tr {
border-bottom: 1px solid #adadad;
text-align: left;
}
.sdx-container .table thead th {
padding-top: 25px;
padding-bottom: 23px;
}
.sdx-container .table thead th[data-type] {
cursor: pointer;
}
.sdx-container .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);
}
.sdx-container .table thead th .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .table thead th .arrow-icon::before {
left: 0;
}
.sdx-container .table thead th .arrow-icon::after {
left: 6px;
}
.sdx-container .table thead th.js-ascending .arrow-icon {
visibility: visible;
opacity: 1;
}
.sdx-container .table thead th.js-ascending .arrow-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .table thead th.js-ascending .arrow-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .table thead th.js-descending .arrow-icon {
visibility: visible;
opacity: 1;
}
.sdx-container .table thead th.js-descending .arrow-icon::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .table thead th.js-descending .arrow-icon::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .table tbody {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sdx-container .table tbody tr {
text-align: left;
}
.sdx-container .table tbody tr:not(:last-child) {
border-bottom: 1px solid #adadad;
}
.sdx-container .table tbody td {
padding-top: 20px;
padding-bottom: 17px;
}
.sdx-container .table .button {
margin: 0 16px;
}
.sdx-container .table--responsive {
display: block;
}
.sdx-container .table--responsive::after {
content: "";
display: block;
clear: both;
}
.sdx-container .table--responsive:not(:last-child) {
margin-bottom: 16px;
}
.sdx-container .table--responsive .table__wrapper {
display: block;
width: 100%;
min-height: 0;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.sdx-container .table--responsive .table__wrapper:not(:last-child) {
margin-bottom: 16px;
}
.sdx-container .table--reflow {
display: block;
}
.sdx-container .table--reflow .table__wrapper {
display: block;
width: 100%;
}
.sdx-container .table--reflow table {
display: block;
position: relative;
width: 100%;
}
.sdx-container .table--reflow td:first-child,
.sdx-container .table--reflow th:first-child {
padding-left: 8px;
}
.sdx-container .table--reflow td:last-child,
.sdx-container .table--reflow th:last-child {
padding-right: 8px;
}
.sdx-container .table--reflow thead {
display: block;
float: left;
}
.sdx-container .table--reflow thead tr {
display: block;
border-bottom: 0;
}
.sdx-container .table--reflow thead tr th {
padding-left: 16px;
}
.sdx-container .table--reflow thead tr th::after {
content: " ";
}
.sdx-container .table--reflow tbody {
display: block;
width: auto;
white-space: nowrap;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.sdx-container .table--reflow tbody tr {
display: table-cell;
border-bottom: 0;
}
.sdx-container .table--reflow tbody tr:last-child td {
padding-right: 16px;
}
.sdx-container .table--reflow thead tr,
.sdx-container .table--reflow tbody tr,
.sdx-container .table--reflow tfoot tr {
border-bottom: 0 !important;
}
.sdx-container .table--reflow td:empty::after {
content: " ";
}
.sdx-container .table--reflow tr td,
.sdx-container .table--reflow tr th {
display: block;
padding-top: 20px;
padding-bottom: 17px;
border-bottom: 1px solid #adadad;
}
.sdx-container .table--reflow tr td:last-child,
.sdx-container .table--reflow tr th:last-child {
border-bottom: 0;
}
.sdx-container .table--highlight thead {
background: #f8fafb;
}
.sdx-container .table--no-border .table__title {
padding-left: 0;
padding-right: 0;
}
.sdx-container .table--no-border table th:first-child,
.sdx-container .table--no-border table td:first-child {
padding-left: 0;
}
.sdx-container .table--no-border table th:last-child,
.sdx-container .table--no-border table td:last-child {
padding-right: 0;
}
.sdx-container .table__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
padding: 0 16px 15px;
text-align: left;
}
.sdx-container .bar-chart-horizontal .js-data,
.sdx-container .bar-chart-horizontal .js-data-list,
.sdx-container .bar-chart-vertical .js-data,
.sdx-container .bar-chart-vertical .js-data-list,
.sdx-container .pie-chart .js-data,
.sdx-container .pie-chart .js-data-list {
display: none;
}
.sdx-container .bar-chart-horizontal .tooltip--right::before,
.sdx-container .bar-chart-vertical .tooltip--right::before,
.sdx-container .pie-chart .tooltip--right::before {
margin-bottom: -13px;
}
.sdx-container .bar-chart-horizontal .tooltip::after,
.sdx-container .bar-chart-vertical .tooltip::after,
.sdx-container .pie-chart .tooltip::after {
min-width: 200px;
font-size: 14px;
}
.sdx-container .bar-chart__legend,
.sdx-container .pie-chart__legend {
line-height: 24px;
letter-spacing: -0.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;
}
.sdx-container .bar-chart__legend li,
.sdx-container .pie-chart__legend li {
margin: 0 20px 0 0;
}
.sdx-container .bar-chart__legend li::before,
.sdx-container .pie-chart__legend li::before {
content: "";
}
.sdx-container .bar-chart__legend li .bullet,
.sdx-container .pie-chart__legend li .bullet {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 7px;
border-radius: 50%;
}
.sdx-container .pie-chart__legend .orchid,
.sdx-container .bar-chart__legend .orchid,
.sdx-container .bar-chart-horizontal .orchid,
.sdx-container .bar-chart-vertical .orchid {
background-color: #a63297;
}
.sdx-container .pie-chart__legend .orchid--active,
.sdx-container .bar-chart__legend .orchid--active,
.sdx-container .bar-chart-horizontal .orchid--active,
.sdx-container .bar-chart-vertical .orchid--active {
background-color: #7f2879;
}
.sdx-container .pie-chart__legend .iris,
.sdx-container .bar-chart__legend .iris,
.sdx-container .bar-chart-horizontal .iris,
.sdx-container .bar-chart-vertical .iris {
background-color: #5944c6;
}
.sdx-container .pie-chart__legend .iris--active,
.sdx-container .bar-chart__legend .iris--active,
.sdx-container .bar-chart-horizontal .iris--active,
.sdx-container .bar-chart-vertical .iris--active {
background-color: #42389e;
}
.sdx-container .pie-chart__legend .pink,
.sdx-container .bar-chart__legend .pink,
.sdx-container .bar-chart-horizontal .pink,
.sdx-container .bar-chart-vertical .pink {
background-color: #e61e64;
}
.sdx-container .pie-chart__legend .pink--active,
.sdx-container .bar-chart__legend .pink--active,
.sdx-container .bar-chart-horizontal .pink--active,
.sdx-container .bar-chart-vertical .pink--active {
background-color: #bf1b5a;
}
.sdx-container .pie-chart__legend .turquoise,
.sdx-container .pie-chart__legend .apple,
.sdx-container .pie-chart__legend .petrol,
.sdx-container .bar-chart__legend .turquoise,
.sdx-container .bar-chart__legend .apple,
.sdx-container .bar-chart__legend .petrol,
.sdx-container .bar-chart-horizontal .turquoise,
.sdx-container .bar-chart-horizontal .apple,
.sdx-container .bar-chart-horizontal .petrol,
.sdx-container .bar-chart-vertical .turquoise,
.sdx-container .bar-chart-vertical .apple,
.sdx-container .bar-chart-vertical .petrol {
background-color: #0eaba9;
}
.sdx-container .pie-chart__legend .turquoise--active,
.sdx-container .pie-chart__legend .apple--active,
.sdx-container .pie-chart__legend .petrol--active,
.sdx-container .bar-chart__legend .turquoise--active,
.sdx-container .bar-chart__legend .apple--active,
.sdx-container .bar-chart__legend .petrol--active,
.sdx-container .bar-chart-horizontal .turquoise--active,
.sdx-container .bar-chart-horizontal .apple--active,
.sdx-container .bar-chart-horizontal .petrol--active,
.sdx-container .bar-chart-vertical .turquoise--active,
.sdx-container .bar-chart-vertical .apple--active,
.sdx-container .bar-chart-vertical .petrol--active {
background-color: #0c847e;
}
.sdx-container .pie-chart {
position: relative;
}
.sdx-container .pie-chart .js-chart {
position: relative;
height: 182px;
width: 182px;
text-align: center;
margin: 0 auto;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.sdx-container .pie-chart .js-chart > svg {
position: absolute;
top: 0;
left: 0;
width: 182px;
height: 182px;
fill: transparent;
stroke-width: 2;
stroke-linecap: round;
}
.sdx-container .pie-chart .meta {
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 28px;
letter-spacing: -0.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;
}
.sdx-container .pie-chart .meta .subtitle {
font-weight: 300;
font-size: 16px;
color: #666;
text-transform: capitalize;
}
.sdx-container .pie-chart .chart-wrapper {
position: relative;
margin: 20px auto;
width: 182px;
}
.sdx-container .pie-chart--stacked {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sdx-container .pie-chart--stacked .chart-wrapper {
margin: 20px;
}
.sdx-container .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;
}
.sdx-container .pie-chart--stacked .pie-chart__legend li {
margin-bottom: 5px;
}
.sdx-container .pie-chart--stacked .pie-chart__legend .bullet {
margin-right: 10px;
}
.sdx-container .pie-chart .orchid {
stroke: #a63297;
}
.sdx-container .pie-chart .orchid--active {
stroke: #7f2879;
}
.sdx-container .pie-chart .iris {
stroke: #5944c6;
}
.sdx-container .pie-chart .iris--active {
stroke: #42389e;
}
.sdx-container .pie-chart .pink {
stroke: #e61e64;
}
.sdx-container .pie-chart .pink--active {
stroke: #bf1b5a;
}
.sdx-container .pie-chart .turquoise,
.sdx-container .pie-chart .apple,
.sdx-container .pie-chart .petrol {
stroke: #0eaba9;
}
.sdx-container .pie-chart .turquoise--active,
.sdx-container .pie-chart .apple--active,
.sdx-container .pie-chart .petrol--active {
stroke: #0c847e;
}
.sdx-container .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;
}
.sdx-container .bg--dark .pie-chart .meta .subtitle {
color: #fff;
}
.sdx-container .bar-chart__progress {
position: relative;
width: 100%;
height: 8px;
margin-bottom: 32px;
}
.sdx-container .bar-chart__progress .indicator {
position: relative;
float: left;
width: 100%;
height: 8px;
}
.sdx-container .bar-chart__progress .indicator-wrapper {
position: relative;
float: left;
}
.sdx-container .bar-chart__progress .indicator-wrapper:first-child .indicator {
border-radius: 8px 0 0 8px;
}
.sdx-container .bar-chart-horizontal {
position: relative;
min-width: 272px;
margin-bottom: 32px;
color: #333;
}
.sdx-container .bar-chart-horizontal:last-child {
margin-bottom: 0;
}
.sdx-container .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);
}
.sdx-container .bar-chart-horizontal--limited .bar-chart__progress {
margin: 7px 0 0 0;
border-radius: 8px;
background-color: #e4e9ec;
overflow: hidden;
}
.sdx-container .bar-chart-horizontal--limited .detail-left {
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 24px;
letter-spacing: -0.22px;
font-size: 20px;
text-align: left;
}
.sdx-container .bar-chart-horizontal--limited .detail-bottom {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 12px;
}
.sdx-container .bar-chart-horizontal--limited .detail-bottom .value {
display: inline-block;
text-align: right;
}
.sdx-container .bar-chart-horizontal--limited .detail-bottom .value:not(:first-child) {
color: #666;
}
.sdx-container .bar-chart-horizontal--limited .detail-bottom .value:not(:first-child)::before {
content: "/ ";
}
.sdx-container .bar-chart-horizontal--limited .detail-bottom .value:not(:first-child)::after {
content: " ";
}
.sdx-container .bar-chart-horizontal--limited .detail-bottom .unit {
color: #666;
}
.sdx-container .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);
}
.sdx-container .bar-chart-horizontal--unlimited .bar-chart__progress {
margin: 14px 0 0 0;
}
.sdx-container .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;
}
.sdx-container .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: -0.22px;
font-size: 20px;
text-align: left;
}
.sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value {
display: inline-block;
text-align: right;
}
.sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value::before, .sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value::after {
content: " ";
}
.sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .unit {
color: #666;
}
.sdx-container .bar-chart-horizontal--split {
border-top: 1px solid #d6d6d6;
}
.sdx-container .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;
}
.sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-left {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
text-align: left;
}
.sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value {
font-weight: 600;
display: inline-block;
text-align: right;
}
.sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value::before, .sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value::after {
content: " ";
}
.sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value:nth-child(3)::before {
font-weight: normal;
content: " / ";
color: #666;
}
.sdx-container .bar-chart__legend {
padding-top: 32px;
border-top: 1px solid #d6d6d6;
}
.sdx-container .bg--dark .bar-chart-horizontal--split {
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.sdx-container .bg--dark .bar-chart-horizontal--split .detail-left,
.sdx-container .bg--dark .bar-chart-horizontal--split .detail-right {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
}
.sdx-container .bg--dark .bar-chart__legend {
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.sdx-container .bar-chart-vertical {
min-width: 272px;
width: 100%;
}
.sdx-container .bar-chart-vertical:last-child {
margin-bottom: 0;
}
.sdx-container .bar-chart-vertical .chart-wrapper {
position: relative;
height: 100%;
margin-bottom: 54px;
}
.sdx-container .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;
}
.sdx-container .bar-chart-vertical .chart .indicator-wrapper {
position: relative;
height: 172px;
min-width: 70px;
}
.sdx-container .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;
}
.sdx-container .bar-chart-vertical .chart li {
text-align: center;
z-index: 1;
}
.sdx-container .bar-chart-vertical .chart li:first-child .indicator-wrapper {
min-width: 42px;
}
.sdx-container .bar-chart-vertical .chart li:hover {
z-index: 100;
}
.sdx-container .bar-chart-vertical .chart .indicator {
width: 8px;
margin: 0 auto;
}
.sdx-container .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;
}
.sdx-container .bar-chart-vertical .chart .indicator.empty {
background-color: #d6d6d6;
}
.sdx-container .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;
}
.sdx-container .bar-chart-vertical .chart .tooltip--right::after {
bottom: calc(50% - 4px);
}
.sdx-container .bar-chart-vertical .chart .tooltip--multiline::before {
margin-bottom: -8px;
}
.sdx-container .bar-chart-vertical .chart .tooltip--multiline::after {
bottom: calc(50% - 7px);
}
.sdx-container .bar-chart-vertical .bar-chart__grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.sdx-container .bar-chart-vertical .bar-chart__grid li {
border-top: 1px solid #adadad;
height: 33.333%;
}
.sdx-container .bar-chart-vertical .bar-chart__grid li:last-child {
border-bottom: 1px solid #adadad;
}
.sdx-container .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;
}
.sdx-container .bar-chart-vertical .bar-chart__legend {
padding-top: 0;
border-top: 0;
}
.sdx-container .bg--dark .bar-chart__grid li {
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.sdx-container .bg--dark .bar-chart__grid li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.sdx-container .tabs {
position: relative;
width: 100%;
white-space: nowrap;
border-bottom: 1px solid #d6d6d6;
overflow-x: hidden;
}
.sdx-container .tabs .tab {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
}
.sdx-container .tabs .tab:active {
outline: none;
}
.sdx-container .tabs .tab:focux {
outline: 1px dotted;
}
.sdx-container .tabs .tab .tab-link {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
display: block;
padding: 6px 10px;
color: #015;
border-bottom: 4px solid transparent;
}
.sdx-container .tabs .tab .tab-link:hover, .sdx-container .tabs .tab .tab-link:focus {
color: #1781e3;
}
.sdx-container .tabs .tab .tab-link.active {
color: #1781e3;
border-bottom: 4px solid #1781e3;
outline: none !important;
}
.sdx-container .tabs .tab .tab-link.disabled, .sdx-container .tabs .tab .tab-link:disabled {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0.4;
color: #333;
pointer-events: none;
}
.sdx-container .tabs .tab--flyout .flyout__indicator::before {
right: calc(50% - 7px);
}
.sdx-container .tabs--small .tab .tab-link {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
}
.sdx-container .tabs--big .tab .tab-link {
font-weight: 400;
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
padding-top: 8px;
padding-bottom: 8px;
}
.sdx-container .tabs--long .tab .tab-link {
padding-left: 20px;
padding-right: 20px;
}
.sdx-container .tabs--no-border {
border-bottom: 0;
}
.sdx-container .tabs--scrollable {
overflow-x: auto;
}
.sdx-container .tabs--image {
border-bottom: 0;
overflow-x: visible;
}
.sdx-container .tabs--image ul {
overflow-x: auto;
margin-left: -20px;
padding-left: 20px;
margin-right: -20px;
}
.sdx-container .tabs--image ul::before, .sdx-container .tabs--image ul::after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
width: 20px;
z-index: 1;
pointer-events: none;
}
.sdx-container .tabs--image ul::before {
left: -20px;
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
}
.sdx-container .tabs--image ul::after {
right: -20px;
background: linear-gradient(to left, white 0%, rgba(255, 255, 255, 0) 100%);
}
.sdx-container .tabs--image .tab {
vertical-align: top;
padding-right: 20px;
}
@media (max-width: 767px) {
.sdx-container .tabs--image .tab {
padding-right: 8px;
}
}
.sdx-container .tabs--image .tab:last-child {
padding-right: 20px;
}
.sdx-container .tabs--image .tab .tab-link {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.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;
}
.sdx-container .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;
}
.sdx-container .tabs--image .tab span.image {
height: 105px;
}
.sdx-container .tabs--image .tab span.image img {
max-height: 90px;
pointer-events: none;
-moz-user-select: none;
}
.sdx-container .tabs--image .tab span.title {
white-space: normal;
line-height: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.sdx-container .bg--dark .tabs {
border-bottom-color: #fff;
}
.sdx-container .bg--dark .tabs .tab .tab-link {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0.7;
color: #fff;
border-bottom: 4px solid transparent;
}
.sdx-container .bg--dark .tabs .tab .tab-link:hover, .sdx-container .bg--dark .tabs .tab .tab-link:focus {
opacity: 1;
color: #fff;
border-bottom: 4px solid transparent;
}
.sdx-container .bg--dark .tabs .tab .tab-link.active {
opacity: 1;
color: #fff;
border-bottom: 4px solid #fff;
}
.sdx-container .bg--dark .tabs .tab .tab-link.disabled, .sdx-container .bg--dark .tabs .tab .tab-link:disabled {
opacity: 0.4;
color: #fff;
pointer-events: none;
}
.sdx-container .bg--dark .tabs--inverted {
background: #fff;
border-bottom: 0;
}
.sdx-container .bg--dark .tabs--inverted .tab .tab-link {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
color: #015;
}
.sdx-container .bg--dark .tabs--inverted .tab .tab-link:hover, .sdx-container .bg--dark .tabs--inverted .tab .tab-link:focus {
color: #015;
}
.sdx-container .bg--dark .tabs--inverted .tab .tab-link.active {
color: #015;
border-bottom: 4px solid #015;
}
.sdx-container .bg--dark .tabs--inverted .tab .tab-link.disabled, .sdx-container .bg--dark .tabs--inverted .tab .tab-link:disabled {
opacity: 0.4;
color: #333;
pointer-events: none;
}
.sdx-container .collapse {
display: none;
position: relative;
height: 0;
overflow: hidden;
}
.sdx-container .collapse.is-open {
display: block;
height: auto;
}
.sdx-container tr.collapse.is-open {
display: table-row;
}
.sdx-container tbody.collapse.is-open {
display: table-row-group;
}
@media (min-width: 0) {
.sdx-container .accordion--hidden-xs-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-xs-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-xs-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 479px) {
.sdx-container .accordion--hidden-xs-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-xs-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-xs-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 480px) {
.sdx-container .accordion--hidden-sm-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-sm-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-sm-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 767px) {
.sdx-container .accordion--hidden-sm-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-sm-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-sm-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 768px) {
.sdx-container .accordion--hidden-md-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-md-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-md-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1023px) {
.sdx-container .accordion--hidden-md-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-md-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-md-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 1024px) {
.sdx-container .accordion--hidden-lg-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-lg-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-lg-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1279px) {
.sdx-container .accordion--hidden-lg-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-lg-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-lg-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 1280px) {
.sdx-container .accordion--hidden-xl-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-xl-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-xl-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1439px) {
.sdx-container .accordion--hidden-xl-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-xl-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-xl-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 1440px) {
.sdx-container .accordion--hidden-ul-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-ul-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-ul-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
.sdx-container .accordion--hidden-ul-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-ul-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-ul-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
@media (min-width: 0) {
.sdx-container .accordion--hidden-phone-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-phone-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-phone-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 767px) {
.sdx-container .accordion--hidden-phone-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-phone-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-phone-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 768px) {
.sdx-container .accordion--hidden-tablet-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-tablet-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-tablet-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1023px) {
.sdx-container .accordion--hidden-tablet-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-tablet-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-tablet-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 1024px) {
.sdx-container .accordion--hidden-desktop-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-desktop-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-desktop-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1279px) {
.sdx-container .accordion--hidden-desktop-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-desktop-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-desktop-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
.sdx-container .accordion .js-hidden {
display: none;
position: absolute;
left: -9999px;
visibility: visible;
}
.sdx-container .accordion__item {
position: relative;
}
.sdx-container .accordion__toggle {
display: block;
margin: 0;
padding: 0;
border: 0;
width: 100%;
cursor: pointer;
}
.sdx-container .accordion__toggle .arrow-icon {
float: right;
pointer-events: none;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.sdx-container .accordion__toggle .arrow-icon {
float: right;
pointer-events: none;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.sdx-container .accordion__toggle--arrow-left .accordion__header {
padding-left: 10px;
}
.sdx-container .accordion__toggle--arrow-left .arrow-icon {
float: left;
}
.sdx-container .accordion__toggle--arrow-centered {
width: 100%;
min-height: 32px;
border-top: 1px solid #d6d6d6;
}
.sdx-container .accordion__toggle--arrow-centered .arrow-icon {
display: table;
margin: 3px auto 0 auto;
float: none;
}
.sdx-container .accordion__header {
display: inline-block;
position: relative;
}
.sdx-container .accordion__keep-open {
display: block;
}
.sdx-container .accordion__collapse {
position: relative;
overflow: hidden;
display: none;
height: 0;
width: 100%;
opacity: 0;
}
.sdx-container .accordion__collapse.is-open {
display: block;
height: auto;
width: 100%;
opacity: 1;
}
.sdx-container .accordion .accordion__toggle .accordion__header, .sdx-container .accordion--arrow-flat .accordion__toggle .accordion__header {
width: calc(100% - 35px - 8px);
}
.sdx-container .accordion .accordion__toggle .arrow-icon, .sdx-container .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);
}
.sdx-container .accordion .accordion__toggle .arrow-icon::before, .sdx-container .accordion .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .accordion .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::before {
left: 0;
}
.sdx-container .accordion .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::after {
left: 15px;
}
.sdx-container .accordion .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::before {
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.sdx-container .accordion .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::after {
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.sdx-container .accordion .accordion__toggle:hover .arrow-icon, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon {
position: relative;
}
.sdx-container .accordion .accordion__toggle:hover .arrow-icon::before, .sdx-container .accordion .accordion__toggle:hover .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .accordion .accordion__toggle:hover .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::before {
left: 0;
}
.sdx-container .accordion .accordion__toggle:hover .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::after {
left: 15px;
}
.sdx-container .accordion .is-open .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .is-open .accordion__toggle .arrow-icon::before {
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.sdx-container .accordion .is-open .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .is-open .accordion__toggle .arrow-icon::after {
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.sdx-container .accordion--border {
border-bottom: 1px solid #d6d6d6;
}
.sdx-container .accordion--border .accordion__item {
border: 1px solid #d6d6d6;
border-bottom: 0;
padding: 13px 13px 14px 19px;
}
.sdx-container .accordion .accordion__border {
border: 1px solid #d6d6d6;
}
.sdx-container .accordion .accordion__border .accordion__header {
padding-top: 16px;
padding-bottom: 16px;
padding-left: 15px;
padding-right: 15px;
}
.sdx-container .accordion .accordion__border .accordion__collapse {
padding-left: 15px;
padding-right: 15px;
}
.sdx-container .accordion .accordion__border .accordion__collapse.is-open {
padding-bottom: 16px;
}
@media (min-width: 0) {
.sdx-container .accordion--hidden-xs-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-xs-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-xs-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 479px) {
.sdx-container .accordion--hidden-xs-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-xs-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-xs-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 480px) {
.sdx-container .accordion--hidden-sm-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-sm-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-sm-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 767px) {
.sdx-container .accordion--hidden-sm-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-sm-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-sm-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 768px) {
.sdx-container .accordion--hidden-md-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-md-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-md-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1023px) {
.sdx-container .accordion--hidden-md-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-md-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-md-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 1024px) {
.sdx-container .accordion--hidden-lg-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-lg-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-lg-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1279px) {
.sdx-container .accordion--hidden-lg-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-lg-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-lg-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 1280px) {
.sdx-container .accordion--hidden-xl-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-xl-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-xl-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1439px) {
.sdx-container .accordion--hidden-xl-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-xl-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-xl-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 1440px) {
.sdx-container .accordion--hidden-ul-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-ul-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-ul-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
.sdx-container .accordion--hidden-ul-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-ul-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-ul-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
@media (min-width: 0) {
.sdx-container .accordion--hidden-phone-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-phone-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-phone-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 767px) {
.sdx-container .accordion--hidden-phone-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-phone-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-phone-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 768px) {
.sdx-container .accordion--hidden-tablet-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-tablet-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-tablet-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1023px) {
.sdx-container .accordion--hidden-tablet-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-tablet-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-tablet-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (min-width: 1024px) {
.sdx-container .accordion--hidden-desktop-up .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-desktop-up .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-desktop-up .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
@media (max-width: 1279px) {
.sdx-container .accordion--hidden-desktop-down .js-hidden {
visibility: hidden !important;
}
.sdx-container .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;
}
.sdx-container .accordion--hidden-desktop-down .accordion__toggle .arrow-icon {
display: none !important;
}
.sdx-container .accordion--hidden-desktop-down .accordion__collapse {
display: block;
height: 100%;
width: 100%;
opacity: 1;
}
}
.sdx-container .accordion .js-hidden {
display: none;
position: absolute;
left: -9999px;
visibility: visible;
}
.sdx-container .accordion--sidebar .accordion__toggle .accordion__header {
width: calc(100% - 16px - 8px);
}
.sdx-container .accordion--sidebar .accordion__toggle .arrow-icon {
position: relative;
top: 4px;
left: 0;
width: 16px;
height: 16px;
-webkit-transform: none;
transform: none;
}
.sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::before {
left: 0;
}
.sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::after {
left: 6px;
}
.sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon {
position: relative;
}
.sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon::before {
left: 0;
}
.sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon::after {
left: 6px;
}
.sdx-container .accordion--sidebar .is-open .accordion__toggle .arrow-icon::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .accordion--sidebar .is-open .accordion__toggle .arrow-icon::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .accordion--sidebar a,
.sdx-container .accordion--sidebar button {
margin: 0;
padding: 0;
border: 0;
transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
color: #015;
}
.sdx-container .accordion--sidebar a:hover,
.sdx-container .accordion--sidebar button:hover {
color: #0851da;
}
.sdx-container .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;
}
.sdx-container .accordion--sidebar .nav-item {
position: relative;
float: left;
margin: 0;
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .accordion--sidebar .nav-item::before {
content: none;
}
.sdx-container .accordion--sidebar .nav-item:not(:first-child) {
margin-top: 8px;
}
.sdx-container .accordion--sidebar .nav-item:last-child {
margin-right: 0;
padding-bottom: 2px;
}
.sdx-container .accordion--sidebar .nav-title {
font-weight: 600;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
}
.sdx-container .accordion--sidebar .nav-link {
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
text-decoration: none;
white-space: normal;
}
.sdx-container .accordion--sidebar .nav-link .text-underline {
position: relative;
pointer-events: none;
}
.sdx-container .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: "";
}
.sdx-container .accordion--sidebar .nav-link.is-active .text-underline::before, .sdx-container .accordion--sidebar .nav-link--active .text-underline::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.sdx-container .accordion--sidebar .nav-link:hover {
color: #0851da;
}
.sdx-container .accordion--sidebar .nav-link:hover .text-underline::before {
background-color: #0851da;
}
.sdx-container .carousel {
overflow: hidden;
outline: none;
}
.sdx-container .carousel__container {
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
.sdx-container .carousel__slider {
margin-bottom: 21px;
cursor: -webkit-grab;
cursor: grab;
}
.sdx-container .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;
}
.sdx-container .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: 0.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) {
.sdx-container .carousel__slider .slide {
max-width: 300px;
}
}
@media (min-width: 1280px) {
.sdx-container .carousel__slider .slide {
max-width: 321px;
}
}
.sdx-container .carousel__slider .slide--active {
opacity: 1;
}
@media (min-width: 768px) {
.sdx-container .carousel__slider .slide--next {
opacity: 1;
}
}
@media (min-width: 1280px) {
.sdx-container .carousel__slider .slide--prev {
opacity: 1;
}
}
.sdx-container .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;
}
.sdx-container .carousel__pagination .pagination-bullet {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
margin: 4px 2px;
opacity: 0.5;
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.sdx-container .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: "";
}
.sdx-container .carousel__pagination .pagination-bullet:hover {
opacity: 0.75;
}
.sdx-container .carousel__pagination .pagination-bullet:focus {
outline: none;
}
.sdx-container .carousel__pagination .pagination-bullet--active, .sdx-container .carousel__pagination .pagination-bullet--active:hover {
opacity: 1;
}
.sdx-container .carousel__pagination .pagination-bullet--active::before {
-webkit-transform: scale(1);
transform: scale(1);
}
.sdx-container .carousel__button-wrapper {
position: absolute;
bottom: 0;
width: inherit;
height: 24px;
z-index: 15;
pointer-events: none;
}
@media (min-width: 768px) {
.sdx-container .carousel__button-wrapper {
top: calc(50% - 60px);
bottom: inherit;
height: 60px;
}
}
.sdx-container .carousel__button-prev, .sdx-container .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) {
.sdx-container .carousel__button-prev, .sdx-container .carousel__button-next {
font-size: 60px;
}
}
.sdx-container .carousel__button-prev:hover, .sdx-container .carousel__button-next:hover {
color: #0851da;
}
.sdx-container .carousel__button-prev:focus, .sdx-container .carousel__button-next:focus {
outline: none;
}
.sdx-container .carousel__button-prev:disabled, .sdx-container .carousel__button-next:disabled {
pointer-events: none;
opacity: 0.4;
}
.sdx-container .carousel__button-prev .icon, .sdx-container .carousel__button-next .icon {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
.sdx-container .carousel__button-prev {
top: -15px;
left: -20px;
padding: 15px 5px 15px 15px;
}
.sdx-container .carousel__button-prev:hover {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
@media (min-width: 768px) {
.sdx-container .carousel__button-prev {
top: 0;
left: -10px;
padding: 0;
}
}
.sdx-container .carousel__button-next {
right: -20px;
top: -15px;
padding: 15px 15px 15px 5px;
}
.sdx-container .carousel__button-next:hover {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
@media (min-width: 768px) {
.sdx-container .carousel__button-next {
top: 0;
right: -10px;
padding: 0;
}
}
.sdx-container .carousel .js-phone {
visibility: hidden;
}
@media (max-width: 767px) {
.sdx-container .carousel .js-phone {
visibility: visible;
}
}
.sdx-container .carousel .js-tablet {
visibility: hidden;
}
@media (min-width: 768px) and (max-width: 1279px) {
.sdx-container .carousel .js-tablet {
visibility: visible;
}
}
.sdx-container .carousel .js-desktop {
visibility: hidden;
}
@media (min-width: 1280px) {
.sdx-container .carousel .js-desktop {
visibility: visible;
}
}
.sdx-container .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;
}
.sdx-container .empty-state input[type=file] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.sdx-container .empty-state label {
margin-top: 36px;
min-width: 206px;
}
.sdx-container .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);
}
.sdx-container .empty-state__body {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 400;
color: #333;
text-align: center;
}
@media (min-width: 768px) {
.sdx-container .empty-state__body {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
}
}
.sdx-container .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) {
.sdx-container .empty-state__body .body__status {
font-weight: 600;
}
}
.sdx-container .empty-state__body .body__cta {
display: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
.sdx-container .empty-state__body .body__cta {
display: inline;
}
}
.sdx-container .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) {
.sdx-container .empty-state.is-active {
z-index: 700001;
}
}
.sdx-container .empty-state.is-active form {
pointer-events: none;
}
.sdx-container .empty-state.is-active .empty-state__icon {
color: #1781e3;
-webkit-transform: scale(1.025);
transform: scale(1.025);
}
.sdx-container .empty-state.is-active .empty-state__footer {
visibility: hidden;
opacity: 0;
}
.sdx-container .empty-state.is-active .body__status {
opacity: 0;
}
.sdx-container .empty-state.has-files .body__status {
visibility: hidden;
opacity: 0;
}
.sdx-container .empty-state--modal {
position: relative;
width: auto;
height: auto;
pointer-events: none;
}
.sdx-container .empty-state--modal label {
pointer-events: auto;
}
.sdx-container .empty-state__bg {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #fff;
}
.sdx-container .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);
}
.sdx-container .empty-state__border--modal {
position: absolute;
pointer-events: none;
background: none;
}
@media (min-width: 768px) {
.sdx-container .empty-state__border.is-active {
visibility: visible;
opacity: 1;
}
}
.sdx-container .nav {
position: relative;
z-index: 50000;
background: #fff;
}
.sdx-container .nav a,
.sdx-container .nav button {
margin: 0;
padding: 0;
border: 0;
transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .nav ul,
.sdx-container .nav ol {
margin: 0;
padding: 0;
list-style: none;
}
.sdx-container .nav .nav-items::after {
content: "";
display: block;
clear: both;
}
.sdx-container .nav .logo .logo-lifeform,
.sdx-container .nav .logo .logo-type {
display: inline-block;
float: left;
position: relative;
left: 0;
top: 0;
height: 40px;
}
.sdx-container .nav .logo .logo-lifeform {
background-size: 3600px 40px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url("../images/lifeform-spritesheet.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) {
.sdx-container .nav .logo .logo-lifeform {
background-image: url("../images/lifeform-spritesheet@2x.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;
}
}
.sdx-container .nav .logo .nova-flag {
display: inline-block;
float: left;
position: relative;
margin-left: 10px;
margin-top: 5px;
}
.sdx-container .nav .nav-hamburger {
display: block;
}
.sdx-container .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);
}
.sdx-container .nav .nav-hamburger.is-active span:nth-child(1) {
-webkit-transform: translateY(7px) rotate(45deg);
transform: translateY(7px) rotate(45deg);
}
.sdx-container .nav .nav-hamburger.is-active span:nth-child(2) {
opacity: 0;
}
.sdx-container .nav .nav-hamburger.is-active span:nth-child(3) {
-webkit-transform: translateY(-7px) rotate(-45deg);
transform: translateY(-7px) rotate(-45deg);
}
@media (min-width: 0) {
.sdx-container .nav .container {
margin-left: calc(24px - 4px);
margin-right: calc(24px - 4px);
padding-left: 4px;
padding-right: 4px;
width: auto;
}
}
@media (min-width: 480px) {
.sdx-container .nav .container {
margin-left: calc(24px - 4px);
margin-right: calc(24px - 4px);
padding-left: 4px;
padding-right: 4px;
width: auto;
}
}
@media (min-width: 768px) {
.sdx-container .nav .container {
margin-left: auto;
margin-right: auto;
padding-left: 8px;
padding-right: 8px;
width: 742px;
}
}
@media (min-width: 1024px) {
.sdx-container .nav .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 964px;
}
}
@media (min-width: 1280px) {
.sdx-container .nav .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 1224px;
}
}
@media (min-width: 1440px) {
.sdx-container .nav .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 1380px;
}
}
.sdx-container .nav .nav-section--col-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .nav .nav-section--col-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .nav .nav-section--col-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .nav .nav-section--col-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .nav .nav-section--col-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .nav .nav-section--col-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
@media (max-width: 767px) {
.sdx-container .nav .nav-section {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
@media (min-width: 768px) {
.sdx-container .nav .nav-section {
-webkit-column-gap: 16px;
-moz-column-gap: 16px;
column-gap: 16px;
}
.sdx-container .nav .nav-section--col-md-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .nav .nav-section--col-md-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .nav .nav-section--col-md-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .nav .nav-section--col-md-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .nav .nav-section--col-md-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .nav .nav-section--col-md-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (min-width: 1024px) {
.sdx-container .nav .nav-section {
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
}
.sdx-container .nav .nav-section--col-lg-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .nav .nav-section--col-lg-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .nav .nav-section--col-lg-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .nav .nav-section--col-lg-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .nav .nav-section--col-lg-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .nav .nav-section--col-lg-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (min-width: 1280px) {
.sdx-container .nav .nav-section {
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
}
.sdx-container .nav .nav-section--col-xl-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .nav .nav-section--col-xl-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .nav .nav-section--col-xl-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .nav .nav-section--col-xl-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .nav .nav-section--col-xl-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .nav .nav-section--col-xl-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (min-width: 1440px) {
.sdx-container .nav .nav-section {
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
}
.sdx-container .nav .nav-section--col-ul-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .nav .nav-section--col-ul-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .nav .nav-section--col-ul-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .nav .nav-section--col-ul-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .nav .nav-section--col-ul-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .nav .nav-section--col-ul-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
.sdx-container .nav .nav-section {
margin: 24px 0;
}
.sdx-container .nav .nav-section .nav-col {
width: 100%;
padding-bottom: 10px;
overflow: hidden;
}
.sdx-container .nav .logo {
float: left;
margin-left: -18px;
margin-right: 37px;
margin-top: 22px;
}
@media (min-width: 1280px) {
.sdx-container .nav .logo {
margin-right: 80px;
}
}
@media (min-width: 1440px) {
.sdx-container .nav .logo {
margin-right: 106px;
}
}
@media (max-width: 479px) {
.sdx-container .nav .logo .logo-type {
display: none;
}
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link {
color: #015;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link .text-underline {
display: inline-block;
position: relative;
pointer-events: none;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline::before, .sdx-container .nav .nav__level0 > .nav__mainnav .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: "";
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon, .sdx-container .nav .nav__level0 > .nav__mainnav .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%;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after, .sdx-container .nav .nav__level0 > .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: "";
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before {
left: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after {
left: 6px;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .text-underline::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .text-underline::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .text-underline::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .text-underline::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .arrow-icon::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::after, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .arrow-icon::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover {
color: #0851da;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .text-underline::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .text-underline::before {
background-color: #0851da;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon {
position: relative;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::after, .sdx-container .nav .nav__level0 > .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: "";
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before {
left: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after {
left: 6px;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link {
color: #666;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link:focus, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link:focus, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link:hover, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link:hover {
color: #0851da;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link .icon, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link .icon {
margin-right: 7px;
}
.sdx-container .nav .nav__level0 {
display: none;
position: relative;
float: none;
background: #fff;
z-index: 51000;
}
@media (min-width: 768px) {
.sdx-container .nav .nav__level0 {
display: block;
}
}
.sdx-container .nav .nav__level0 .nav-section {
margin: 0;
padding: 20px 0 2px;
}
.sdx-container .nav .nav__level0 .nav-section .nav-col {
padding-bottom: 23px;
opacity: 0;
}
.sdx-container .nav .nav__level0 .nav-section .nav-col.is-active {
opacity: 1;
}
.sdx-container .nav .nav__level0 a.nav-icon, .sdx-container .nav .nav__level0 a.nav-title, .sdx-container .nav .nav__level0 a.nav-link,
.sdx-container .nav .nav__level0 button.nav-icon,
.sdx-container .nav .nav__level0 button.nav-title,
.sdx-container .nav .nav__level0 button.nav-link {
color: #015;
}
.sdx-container .nav .nav__level0 a.nav-icon:focus, .sdx-container .nav .nav__level0 a.nav-icon:hover, .sdx-container .nav .nav__level0 a.nav-title:focus, .sdx-container .nav .nav__level0 a.nav-title:hover, .sdx-container .nav .nav__level0 a.nav-link:focus, .sdx-container .nav .nav__level0 a.nav-link:hover,
.sdx-container .nav .nav__level0 button.nav-icon:focus,
.sdx-container .nav .nav__level0 button.nav-icon:hover,
.sdx-container .nav .nav__level0 button.nav-title:focus,
.sdx-container .nav .nav__level0 button.nav-title:hover,
.sdx-container .nav .nav__level0 button.nav-link:focus,
.sdx-container .nav .nav__level0 button.nav-link:hover {
color: #0851da;
}
.sdx-container .nav .nav__level0 .nav-item {
position: relative;
margin: 0;
}
.sdx-container .nav .nav__level0 .language-selector .nav-link {
text-transform: uppercase;
}
.sdx-container .nav .nav__level0 > .nav__mainnav {
height: 40px;
border-bottom: 1px solid #dde3e7;
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav-item {
float: left;
}
.sdx-container .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;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary {
padding-top: 10px;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-item, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-item:first-child, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item:first-child {
margin-left: 0;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-item:last-child, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item:last-child {
margin-right: 0;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary {
float: left;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-item {
margin-right: 40px;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary {
float: right;
}
.sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item {
margin-left: 22px;
}
.sdx-container .nav .nav__level0 > .nav__subnav {
display: none;
height: 0;
overflow: hidden;
background: #eef3f6;
}
.sdx-container .nav .nav__level0 > .nav__subnav.is-open {
display: block;
height: 100%;
}
.sdx-container .nav .nav__level0 > .nav__subnav .nav-section {
display: none;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
@media (min-width: 1280px) {
.sdx-container .nav .nav__level0 > .nav__subnav .nav-section {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
.sdx-container .nav .nav__level0 > .nav__subnav .nav-section.is-open {
display: block;
}
.sdx-container .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) {
.sdx-container .nav .nav__level0 > .nav__subnav .nav-section .nav-col {
-webkit-column-break-after: column;
page-break-after: column;
break-after: column;
}
}
.sdx-container .nav .nav__level0 > .nav__subnav .nav-title {
font-weight: 600;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
padding-bottom: 4px;
}
.sdx-container .nav .nav__level0 > .nav__subnav .nav-link {
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
text-decoration: none;
}
.sdx-container .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;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile {
display: none;
}
.sdx-container .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;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary,
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary {
display: block;
position: static;
height: auto;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link,
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link {
height: auto;
padding: 16px 24px 15px;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline::before {
top: 22px;
}
.sdx-container .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;
}
.sdx-container .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);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-section {
padding: 22px 24px 7px;
border: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-col {
padding: 0 0 23px;
border: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-title {
font-weight: 600;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
padding-bottom: 4px;
}
.sdx-container .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;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-items {
margin: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-item {
display: inline;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-link {
padding: 0;
border: 0;
}
@media (max-width: 767px) {
.sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile {
display: block;
}
}
.sdx-container .nav .nav__level1 {
position: relative;
float: none;
height: 80px;
border-bottom: 1px solid #dde3e7;
background: #fff;
-webkit-transform-origin: bottom;
transform-origin: bottom;
z-index: 50100;
}
.sdx-container .nav .nav__level1 .nav-section {
margin: 30px 0 -6px;
}
.sdx-container .nav .nav__level1 .nav-section .nav-col {
padding-bottom: 36px;
}
.sdx-container .nav .nav__level1 a.nav-icon, .sdx-container .nav .nav__level1 a.nav-title, .sdx-container .nav .nav__level1 a.nav-link,
.sdx-container .nav .nav__level1 button.nav-icon,
.sdx-container .nav .nav__level1 button.nav-title,
.sdx-container .nav .nav__level1 button.nav-link {
color: #015;
}
.sdx-container .nav .nav__level1 a.nav-icon:focus, .sdx-container .nav .nav__level1 a.nav-icon:hover, .sdx-container .nav .nav__level1 a.nav-title:focus, .sdx-container .nav .nav__level1 a.nav-title:hover, .sdx-container .nav .nav__level1 a.nav-link:focus, .sdx-container .nav .nav__level1 a.nav-link:hover,
.sdx-container .nav .nav__level1 button.nav-icon:focus,
.sdx-container .nav .nav__level1 button.nav-icon:hover,
.sdx-container .nav .nav__level1 button.nav-title:focus,
.sdx-container .nav .nav__level1 button.nav-title:hover,
.sdx-container .nav .nav__level1 button.nav-link:focus,
.sdx-container .nav .nav__level1 button.nav-link:hover {
color: #0851da;
}
.sdx-container .nav .nav__level1 .nav-icon {
font-size: 26px;
}
.sdx-container .nav .nav__level1 .nav__mainnav {
width: 100%;
height: 80px;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav-item {
float: left;
margin: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav-link {
font-weight: 400;
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
text-decoration: none;
white-space: nowrap;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-item:first-child, .sdx-container .nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item:first-child {
margin-left: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-item:last-child, .sdx-container .nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item:last-child {
margin-right: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary {
float: left;
padding-top: 24px;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-item {
margin-right: 28px;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link {
color: #015;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link .text-underline {
position: relative;
pointer-events: none;
}
.sdx-container .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: "";
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link--header {
content: "";
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link.is-active .text-underline::before, .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link--active .text-underline::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link:hover {
color: #0851da;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link:hover .text-underline::before {
background-color: #0851da;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__secondary {
float: right;
padding-top: 28px;
}
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item {
margin-left: 20px;
}
.sdx-container .nav .nav__level1 .nav__subnav {
position: absolute;
left: 0;
top: 80px;
width: 100%;
background: #eef3f6;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-body,
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer {
position: relative;
overflow: hidden;
display: none;
height: 0;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-body.is-open,
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer.is-open {
display: block;
height: 100%;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-body .nav-item,
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer .nav-item {
margin: 0;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer {
background: #dde3e7;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer {
padding: 23px 0 24px;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer--first {
border-right: 1px solid #dde3e7;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer__items {
margin-top: 8px;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer__items .offer__image {
float: left;
margin-right: 18px;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer__items .offer__content {
display: table;
word-wrap: normal;
}
.sdx-container .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) {
.sdx-container .nav .nav__level1 .nav__subnav .nav-section .nav-col {
-webkit-column-break-after: column;
page-break-after: column;
break-after: column;
}
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-section .nav-col.is-active {
opacity: 1;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-title {
font-weight: 600;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
}
.sdx-container .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;
}
.sdx-container .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;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-item {
position: relative;
float: left;
}
.sdx-container .nav .nav__level1 .nav__subnav .nav-item:not(:first-child) {
margin-top: 8px;
}
@media (max-width: 767px) {
.sdx-container .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;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary.is-open {
display: block;
height: auto;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-item {
width: 100%;
margin: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link {
display: block;
height: 80px;
padding: 24px 24px 20px;
border-bottom: 1px solid #dde3e7;
}
.sdx-container .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;
}
.sdx-container .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%;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before {
left: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after {
left: 6px;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--active .arrow-icon::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::after, .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--active .arrow-icon::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon {
position: relative;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before {
left: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after {
left: 6px;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav {
position: static;
left: 0;
top: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .container {
padding: 0;
margin: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-footer,
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .offer {
overflow: hidden;
display: none;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-section {
margin: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-col {
padding: 15px 24px;
border-bottom: 1px solid #dde3e7;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-title {
font-weight: 400;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-items {
margin: 0;
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-item {
display: none;
}
}
.sdx-container .nav .nav__level2.is-sticky .nav-back, .sdx-container .nav .nav__level2 .nav-back {
position: absolute;
margin-top: 14px;
}
.sdx-container .nav .nav__level2.is-sticky .nav-back::after, .sdx-container .nav .nav__level2 .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: "";
}
.sdx-container .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);
}
.sdx-container .nav .nav__level2.is-sticky .nav-title, .sdx-container .nav .nav__level2 .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: -0.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);
}
.sdx-container .nav .nav__level2 {
position: relative;
width: 100%;
height: 48px;
background: #eef3f6;
transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .nav .nav__level2 .nav__wrapper {
display: block;
padding-top: 14px;
transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .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;
}
.sdx-container .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%;
}
.sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::before {
left: 0;
}
.sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::after {
left: 6px;
}
.sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .nav .nav__level2 .nav__currentpage.is-open .arrow-icon::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .nav .nav__level2 .nav__currentpage.is-open .arrow-icon::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .nav .nav__level2 .nav__quicklinks {
display: none;
position: absolute;
top: 48px;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
background: #dde3e7;
}
.sdx-container .nav .nav__level2 .nav__quicklinks.is-open {
display: block;
height: auto;
}
.sdx-container .nav .nav__level2 .nav-link {
color: #015;
}
.sdx-container .nav .nav__level2 .nav-link .icon {
position: relative;
top: 1px;
margin-left: -2px;
font-size: 21px;
}
.sdx-container .nav .nav__level2 .nav-link:hover {
color: #0851da;
}
.sdx-container .nav .nav__level2 .nav-items {
padding: 20px 24px 19px;
transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .nav .nav__level2 .nav-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 15px;
}
.sdx-container .nav .nav__level2 .nav-item:last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
.sdx-container .nav .nav__level2 {
height: 104px;
}
.sdx-container .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;
}
.sdx-container .nav .nav__level2 .nav__currentpage {
cursor: auto;
}
.sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon {
display: none;
}
.sdx-container .nav .nav__level2 .nav__quicklinks {
display: block;
position: static;
left: auto;
width: auto;
height: 100%;
margin: 0;
margin-left: 24px;
background: none;
}
.sdx-container .nav .nav__level2 .nav-back {
margin-top: 14px;
}
.sdx-container .nav .nav__level2 .nav-back::after {
opacity: 0;
}
.sdx-container .nav .nav__level2 .nav-back .nav-text {
opacity: 1;
}
.sdx-container .nav .nav__level2 .nav-title {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
margin-left: 0;
padding-left: 0;
}
.sdx-container .nav .nav__level2 .nav-title::before {
content: none;
}
.sdx-container .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;
}
.sdx-container .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;
}
.sdx-container .nav .nav__level2 .nav-item:first-child {
padding-left: 0;
}
.sdx-container .nav .nav__level2 .nav-item:last-child {
padding-right: 0;
}
.sdx-container .nav .nav__level2 .nav-item:not(:last-child)::after {
position: absolute;
top: 2px;
right: 0;
height: 18px;
border-right: 1px solid #d6d6d6;
content: "";
}
}
.sdx-container .nav .nav__level2.is-sticky {
position: fixed;
top: 0;
left: 0;
height: 48px;
}
.sdx-container .nav .nav__level2.is-sticky .nav__wrapper {
padding-top: 14px;
}
@media (min-width: 768px) {
.sdx-container .nav .nav__level2.is-sticky .nav-back .nav-text {
opacity: 0;
}
.sdx-container .nav .nav__level2.is-sticky .nav-items {
padding: 0;
padding-top: 1px;
}
}
.sdx-container .nav-top {
position: relative;
height: 80px;
border-bottom: 1px solid #dde3e7;
background: #fff;
-webkit-transform-origin: bottom;
transform-origin: bottom;
z-index: 50100;
}
.sdx-container .nav-top a,
.sdx-container .nav-top button {
margin: 0;
padding: 0;
border: 0;
transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .nav-top ul,
.sdx-container .nav-top ol {
margin: 0;
padding: 0;
list-style: none;
}
.sdx-container .nav-top .nav-items::after {
content: "";
display: block;
clear: both;
}
.sdx-container .nav-top .logo .logo-lifeform,
.sdx-container .nav-top .logo .logo-type {
display: inline-block;
float: left;
position: relative;
left: 0;
top: 0;
height: 40px;
}
.sdx-container .nav-top .logo .logo-lifeform {
background-size: 3600px 40px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url("../images/lifeform-spritesheet.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) {
.sdx-container .nav-top .logo .logo-lifeform {
background-image: url("../images/lifeform-spritesheet@2x.png");
}
}
@keyframes initialAnimation {
100% {
background-position: -3600px;
}
}
@keyframes repeatingAnimation {
0% {
background-position: 0;
}
80% {
background-position: 0;
}
100% {
background-position: -3600px;
}
}
.sdx-container .nav-top .logo .nova-flag {
display: inline-block;
float: left;
position: relative;
margin-left: 10px;
margin-top: 5px;
}
.sdx-container .nav-top .nav-hamburger {
display: block;
}
.sdx-container .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);
}
.sdx-container .nav-top .nav-hamburger.is-active span:nth-child(1) {
-webkit-transform: translateY(7px) rotate(45deg);
transform: translateY(7px) rotate(45deg);
}
.sdx-container .nav-top .nav-hamburger.is-active span:nth-child(2) {
opacity: 0;
}
.sdx-container .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) {
.sdx-container .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) {
.sdx-container .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) {
.sdx-container .nav-top .container {
margin-left: auto;
margin-right: auto;
padding-left: 8px;
padding-right: 8px;
width: 742px;
}
}
@media (min-width: 1024px) {
.sdx-container .nav-top .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 964px;
}
}
@media (min-width: 1280px) {
.sdx-container .nav-top .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 1224px;
}
}
@media (min-width: 1440px) {
.sdx-container .nav-top .container {
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
width: 1380px;
}
}
.sdx-container .nav-top .logo {
margin-left: -18px;
}
@media (max-width: 479px) {
.sdx-container .nav-top .logo .logo-type {
display: none;
}
}
.sdx-container .nav-top .nav-section {
margin: 30px 0 -6px;
}
.sdx-container .nav-top .nav-section .nav-col {
padding-bottom: 36px;
}
.sdx-container .nav-top .nav-item {
float: left;
margin: 0;
margin-right: 28px;
}
.sdx-container .nav-top .nav-item:last-child {
margin-right: 0;
}
.sdx-container .nav-top a.nav-icon, .sdx-container .nav-top a.nav-link,
.sdx-container .nav-top button.nav-icon,
.sdx-container .nav-top button.nav-link {
color: #015;
}
.sdx-container .nav-top a.nav-icon:focus, .sdx-container .nav-top a.nav-icon:hover, .sdx-container .nav-top a.nav-link:focus, .sdx-container .nav-top a.nav-link:hover,
.sdx-container .nav-top button.nav-icon:focus,
.sdx-container .nav-top button.nav-icon:hover,
.sdx-container .nav-top button.nav-link:focus,
.sdx-container .nav-top button.nav-link:hover {
color: #0851da;
}
.sdx-container .nav-top .nav-icon {
font-size: 26px;
}
.sdx-container .nav-top .nav-link {
font-weight: 400;
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #015;
}
.sdx-container .nav-top .nav-link .text-underline {
position: relative;
pointer-events: none;
}
.sdx-container .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: "";
}
.sdx-container .nav-top .nav-link.is-active .text-underline::before, .sdx-container .nav-top .nav-link--active .text-underline::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.sdx-container .nav-top .nav-link:hover {
color: #0851da;
}
.sdx-container .nav-top .nav-link:hover .text-underline::before {
background-color: #0851da;
}
.sdx-container .nav-top .nav__wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 80px;
}
.sdx-container .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;
}
.sdx-container .nav-top .nav__wrapper > .nav__menu > * {
display: inherit;
}
.sdx-container .nav-top .nav__wrapper > .nav__menu--logo {
padding-top: 22px;
}
.sdx-container .nav-top .nav__wrapper > .nav__menu--icon {
padding-top: 28px;
}
.sdx-container .nav-top .nav__wrapper > .nav__menu--icon .nav-item {
margin-right: 20px;
}
.sdx-container .nav-top .nav__wrapper > .nav__menu--icon .nav-item:last-child {
margin-right: 0;
}
.sdx-container .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;
}
.sdx-container .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;
}
.sdx-container .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) {
.sdx-container .nav-top .nav-toggle {
display: block;
}
.sdx-container .nav-top .nav-toggle.is-open .nav-link .arrow-icon::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .nav-top .nav-toggle.is-open .nav-link .arrow-icon::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .nav-top .nav-toggle .nav-link {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sdx-container .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%;
}
.sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::before {
left: 0;
}
.sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::after {
left: 6px;
}
.sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .nav-top .nav-toggle .nav-link:hover {
color: #015;
}
.sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon {
position: relative;
}
.sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon::before {
left: 0;
}
.sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon::after {
left: 6px;
}
.sdx-container .nav-top .nav-collapse {
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
background: #fff;
}
.sdx-container .nav-top .nav-collapse.is-open {
display: block;
height: auto;
}
.sdx-container .nav-top .nav-collapse .nav-item {
width: 100%;
margin: 0;
text-align: center;
}
.sdx-container .nav-top .nav-collapse .nav-link {
display: block;
height: 80px;
padding: 24px 24px 20px;
border-bottom: 1px solid #dde3e7;
}
}
.sdx-container .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;
}
.sdx-container .nav-side a,
.sdx-container .nav-side button {
margin: 0;
padding: 0;
border: 0;
transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .nav-side ul,
.sdx-container .nav-side ol {
margin: 0;
padding: 0;
list-style: none;
}
.sdx-container .nav-side .nav-items::after {
content: "";
display: block;
clear: both;
}
.sdx-container .nav-side .logo .logo-lifeform,
.sdx-container .nav-side .logo .logo-type {
display: inline-block;
float: left;
position: relative;
left: 0;
top: 0;
height: 40px;
}
.sdx-container .nav-side .logo .logo-lifeform {
background-size: 3600px 40px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url("../images/lifeform-spritesheet.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) {
.sdx-container .nav-side .logo .logo-lifeform {
background-image: url("../images/lifeform-spritesheet@2x.png");
}
}
@keyframes initialAnimation {
100% {
background-position: -3600px;
}
}
@keyframes repeatingAnimation {
0% {
background-position: 0;
}
80% {
background-position: 0;
}
100% {
background-position: -3600px;
}
}
.sdx-container .nav-side .logo .nova-flag {
display: inline-block;
float: left;
position: relative;
margin-left: 10px;
margin-top: 5px;
}
.sdx-container .nav-side .nav-hamburger {
display: block;
}
.sdx-container .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);
}
.sdx-container .nav-side .nav-hamburger.is-active span:nth-child(1) {
-webkit-transform: translateY(7px) rotate(45deg);
transform: translateY(7px) rotate(45deg);
}
.sdx-container .nav-side .nav-hamburger.is-active span:nth-child(2) {
opacity: 0;
}
.sdx-container .nav-side .nav-hamburger.is-active span:nth-child(3) {
-webkit-transform: translateY(-7px) rotate(-45deg);
transform: translateY(-7px) rotate(-45deg);
}
.sdx-container .nav-side ~ .site-wrapper {
transition: left 0.3s cubic-bezier(0.55, 0.085, 0.32, 1);
}
.sdx-container .nav-side, .sdx-container .nav-side--left {
left: -272px;
transition: left 0.3s cubic-bezier(0.55, 0.085, 0.32, 1);
}
.sdx-container .nav-side.is-open, .sdx-container .nav-side--left.is-open {
left: 0;
}
.sdx-container .nav-side ~ .site-wrapper, .sdx-container .nav-side--left ~ .site-wrapper {
position: relative;
left: 0;
}
.sdx-container .nav-side ~ .site-wrapper.is-open, .sdx-container .nav-side--left ~ .site-wrapper.is-open {
left: 272px;
}
.sdx-container .nav-side--right {
left: auto;
right: -272px;
transition: right 0.3s cubic-bezier(0.55, 0.085, 0.32, 1);
}
.sdx-container .nav-side--right.is-open {
left: auto;
right: 0;
}
.sdx-container .nav-side--right ~ .site-wrapper.is-open {
left: -272px;
}
.sdx-container .nav-side .logo {
display: block;
margin: 0 30px 30px;
}
.sdx-container .nav-side .nav-items {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin: 30px 36px;
}
.sdx-container .nav-side .nav-items--border .nav-item:not(:last-child) {
border-bottom: 1px solid #dde3e7;
}
.sdx-container .nav-side .nav-item {
width: 100%;
}
.sdx-container .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;
}
.sdx-container .nav-side .nav-item .nav-link .text-underline {
position: relative;
pointer-events: none;
}
.sdx-container .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: "";
}
.sdx-container .nav-side .nav-item .nav-link.is-active .text-underline::before, .sdx-container .nav-side .nav-item .nav-link--active .text-underline::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.sdx-container .nav-side .nav-item .nav-link:hover {
color: #0851da;
}
.sdx-container .nav-side .nav-item .nav-link:hover .text-underline::before {
background-color: #0851da;
}
.sdx-container .nav-side .nav-item .icon {
margin-right: 16px;
font-size: 30px;
text-align: center;
}
.sdx-container .nav-side .nav-item--active .nav-link {
color: #1781e3;
}
@media (max-width: 767px) {
.sdx-container .nav-side {
width: 250px;
}
.sdx-container .nav-side ~ .site-wrapper.is-open, .sdx-container .nav-side--left ~ .site-wrapper.is-open {
left: 250px;
}
.sdx-container .nav-side--right {
left: auto;
right: -250px;
}
.sdx-container .nav-side--right ~ .site-wrapper.is-open {
left: -250px;
}
.sdx-container .nav-side .logo {
margin: 0 14px 14px;
}
.sdx-container .nav-side .nav-items {
margin: 30px 20px;
}
}
.sdx-container .nav-tabs {
background: #fff;
border-top: 1px solid #e4e9ec;
position: fixed;
bottom: 0;
width: 100%;
height: 65px;
}
.sdx-container .nav-tabs a,
.sdx-container .nav-tabs button {
margin: 0;
padding: 0;
border: 0;
transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sdx-container .nav-tabs ul,
.sdx-container .nav-tabs ol {
margin: 0;
padding: 0;
list-style: none;
}
.sdx-container .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%;
}
.sdx-container .nav-tabs .nav-item {
width: 100%;
height: 100%;
}
.sdx-container .nav-tabs .nav-item .nav-link {
width: 100%;
height: 100%;
color: #015;
}
.sdx-container .nav-tabs .nav-item .nav-link:focus {
color: #1781e3;
}
.sdx-container .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;
}
.sdx-container .nav-tabs .nav-item .icon {
font-size: 30px;
text-align: center;
}
.sdx-container .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;
}
.sdx-container .nav-tabs .nav-item--active .nav-link {
color: #1781e3;
}
.sdx-container .search {
z-index: 50500;
}
.sdx-container .search.search--mobile {
display: block;
}
@media (min-width: 768px) {
.sdx-container .search.search--mobile {
display: none;
}
}
.sdx-container .search.search--desktop {
display: none;
position: absolute;
left: 0;
width: 100%;
}
@media (min-width: 768px) {
.sdx-container .search.search--desktop {
display: block;
}
}
.sdx-container .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);
}
.sdx-container .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;
}
.sdx-container .search__input .search__box {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.sdx-container .search__input .search__field {
font-weight: 300;
line-height: 32px;
letter-spacing: -0.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) {
.sdx-container .search__input .search__field {
line-height: 0;
}
}
.sdx-container .search__input .search__field::-webkit-input-placeholder {
color: #666;
opacity: 1;
}
.sdx-container .search__input .search__field::-moz-placeholder {
color: #666;
opacity: 1;
}
.sdx-container .search__input .search__field::-ms-input-placeholder {
color: #666;
opacity: 1;
}
.sdx-container .search__input .search__field::placeholder {
color: #666;
opacity: 1;
}
.sdx-container .search__input .search__field:invalid {
-webkit-transform: translateX(-34px);
transform: translateX(-34px);
}
.sdx-container .search__input .search__field:invalid ~ .search__icon-clear {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.sdx-container .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);
}
.sdx-container .search__input .search__icon-close, .sdx-container .search__input .search__icon-search {
margin-left: 14px;
font-size: 30px;
}
.sdx-container .search__input.is-active, .sdx-container .search__input.search--light.is-active {
background: #d1e6f9;
color: #333;
}
.sdx-container .search__input.is-active .search__field, .sdx-container .search__input.is-active .search__field::-webkit-input-placeholder, .sdx-container .search__input.search--light.is-active .search__field, .sdx-container .search__input.search--light.is-active .search__field::-webkit-input-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input.is-active .search__field, .sdx-container .search__input.is-active .search__field::-moz-placeholder, .sdx-container .search__input.search--light.is-active .search__field, .sdx-container .search__input.search--light.is-active .search__field::-moz-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input.is-active .search__field, .sdx-container .search__input.is-active .search__field::-ms-input-placeholder, .sdx-container .search__input.search--light.is-active .search__field, .sdx-container .search__input.search--light.is-active .search__field::-ms-input-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input.is-active .search__field, .sdx-container .search__input.is-active .search__field::placeholder, .sdx-container .search__input.search--light.is-active .search__field, .sdx-container .search__input.search--light.is-active .search__field::placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input.is-active .search__field:focus::-webkit-input-placeholder, .sdx-container .search__input.search--light.is-active .search__field:focus::-webkit-input-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input.is-active .search__field:focus::-moz-placeholder, .sdx-container .search__input.search--light.is-active .search__field:focus::-moz-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input.is-active .search__field:focus::-ms-input-placeholder, .sdx-container .search__input.search--light.is-active .search__field:focus::-ms-input-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input.is-active .search__field:focus::placeholder, .sdx-container .search__input.search--light.is-active .search__field:focus::placeholder {
color: #333;
opacity: 1;
}
@media (min-width: 768px) {
.sdx-container .search__input, .sdx-container .search__input.search--light {
background: #d1e6f9;
color: #333;
}
.sdx-container .search__input .search__field, .sdx-container .search__input .search__field::-webkit-input-placeholder, .sdx-container .search__input.search--light .search__field, .sdx-container .search__input.search--light .search__field::-webkit-input-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input .search__field, .sdx-container .search__input .search__field::-moz-placeholder, .sdx-container .search__input.search--light .search__field, .sdx-container .search__input.search--light .search__field::-moz-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input .search__field, .sdx-container .search__input .search__field::-ms-input-placeholder, .sdx-container .search__input.search--light .search__field, .sdx-container .search__input.search--light .search__field::-ms-input-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input .search__field, .sdx-container .search__input .search__field::placeholder, .sdx-container .search__input.search--light .search__field, .sdx-container .search__input.search--light .search__field::placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input .search__field:focus::-webkit-input-placeholder, .sdx-container .search__input.search--light .search__field:focus::-webkit-input-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input .search__field:focus::-moz-placeholder, .sdx-container .search__input.search--light .search__field:focus::-moz-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input .search__field:focus::-ms-input-placeholder, .sdx-container .search__input.search--light .search__field:focus::-ms-input-placeholder {
color: #333;
opacity: 1;
}
.sdx-container .search__input .search__field:focus::placeholder, .sdx-container .search__input.search--light .search__field:focus::placeholder {
color: #333;
opacity: 1;
}
}
.sdx-container .search__input.search--dark.is-active {
background: #1781e3;
color: #fff;
}
.sdx-container .search__input.search--dark.is-active .search__field, .sdx-container .search__input.search--dark.is-active .search__field::-webkit-input-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark.is-active .search__field, .sdx-container .search__input.search--dark.is-active .search__field::-moz-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark.is-active .search__field, .sdx-container .search__input.search--dark.is-active .search__field::-ms-input-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark.is-active .search__field, .sdx-container .search__input.search--dark.is-active .search__field::placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark.is-active .search__field:focus::-webkit-input-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark.is-active .search__field:focus::-moz-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark.is-active .search__field:focus::-ms-input-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark.is-active .search__field:focus::placeholder {
color: #fff;
opacity: 1;
}
@media (min-width: 768px) {
.sdx-container .search__input.search--dark {
background: #1781e3;
color: #fff;
}
.sdx-container .search__input.search--dark .search__field, .sdx-container .search__input.search--dark .search__field::-webkit-input-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark .search__field, .sdx-container .search__input.search--dark .search__field::-moz-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark .search__field, .sdx-container .search__input.search--dark .search__field::-ms-input-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark .search__field, .sdx-container .search__input.search--dark .search__field::placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark .search__field:focus::-webkit-input-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark .search__field:focus::-moz-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark .search__field:focus::-ms-input-placeholder {
color: #fff;
opacity: 1;
}
.sdx-container .search__input.search--dark .search__field:focus::placeholder {
color: #fff;
opacity: 1;
}
}
@media (min-width: 768px) {
.sdx-container .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);
}
.sdx-container .search--desktop .search__input.is-open {
max-height: 80px;
}
}
.sdx-container .search__live {
display: none;
height: 0;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #dde3e7;
}
.sdx-container .search__live.is-open {
display: block;
height: auto;
}
.sdx-container .search__live .live-suggestions {
display: none;
height: 0;
background: #fff;
color: #333;
}
.sdx-container .search__live .live-suggestions.is-open {
display: block;
height: auto;
}
.sdx-container .search__live .live-suggestions strong {
font-weight: 400;
color: #1781e3;
}
.sdx-container .search__live .live-suggestions li {
padding: 15px 0 16px;
}
.sdx-container .search__live .live-suggestions li:not(:last-child) {
border-bottom: 1px solid #e4e9ec;
}
.sdx-container .search__live .live-footer {
display: none;
height: 0;
background: #dde3e7;
}
.sdx-container .search__live .live-footer.is-open {
display: block;
height: auto;
}
.sdx-container .search__live .live-footer .container {
padding-top: 21px;
padding-bottom: 24px;
}
.sdx-container .search__live .live-footer a.live-icon, .sdx-container .search__live .live-footer a.live-title, .sdx-container .search__live .live-footer a.live-link,
.sdx-container .search__live .live-footer button.live-icon,
.sdx-container .search__live .live-footer button.live-title,
.sdx-container .search__live .live-footer button.live-link {
color: #015;
}
.sdx-container .search__live .live-footer a.live-icon:focus, .sdx-container .search__live .live-footer a.live-icon:hover, .sdx-container .search__live .live-footer a.live-title:focus, .sdx-container .search__live .live-footer a.live-title:hover, .sdx-container .search__live .live-footer a.live-link:focus, .sdx-container .search__live .live-footer a.live-link:hover,
.sdx-container .search__live .live-footer button.live-icon:focus,
.sdx-container .search__live .live-footer button.live-icon:hover,
.sdx-container .search__live .live-footer button.live-title:focus,
.sdx-container .search__live .live-footer button.live-title:hover,
.sdx-container .search__live .live-footer button.live-link:focus,
.sdx-container .search__live .live-footer button.live-link:hover {
color: #0851da;
}
.sdx-container .search__live .live-footer .offer {
margin-top: 10px;
}
.sdx-container .search__live .live-footer .offer .offer__image {
float: left;
margin-right: 18px;
}
.sdx-container .search__live .live-footer .offer .offer__image img {
max-width: 64px;
max-height: 64px;
}
.sdx-container .search__live .live-footer .offer .offer__content {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
display: table;
word-wrap: normal;
}
.sdx-container .footer {
z-index: 20000;
overflow: hidden;
}
.sdx-container .footer a,
.sdx-container .footer button {
margin: 0;
padding: 0;
}
.sdx-container .footer .logo {
border: 0;
}
.sdx-container .footer .nav-section--col-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .footer .nav-section--col-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .footer .nav-section--col-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .footer .nav-section--col-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .footer .nav-section--col-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .footer .nav-section--col-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
@media (max-width: 767px) {
.sdx-container .footer .nav-section {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
@media (min-width: 768px) {
.sdx-container .footer .nav-section {
-webkit-column-gap: 16px;
-moz-column-gap: 16px;
column-gap: 16px;
}
.sdx-container .footer .nav-section--col-md-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .footer .nav-section--col-md-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .footer .nav-section--col-md-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .footer .nav-section--col-md-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .footer .nav-section--col-md-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .footer .nav-section--col-md-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (min-width: 1024px) {
.sdx-container .footer .nav-section {
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
}
.sdx-container .footer .nav-section--col-lg-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .footer .nav-section--col-lg-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .footer .nav-section--col-lg-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .footer .nav-section--col-lg-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .footer .nav-section--col-lg-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .footer .nav-section--col-lg-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (min-width: 1280px) {
.sdx-container .footer .nav-section {
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
}
.sdx-container .footer .nav-section--col-xl-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .footer .nav-section--col-xl-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .footer .nav-section--col-xl-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .footer .nav-section--col-xl-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .footer .nav-section--col-xl-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .footer .nav-section--col-xl-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (min-width: 1440px) {
.sdx-container .footer .nav-section {
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
}
.sdx-container .footer .nav-section--col-ul-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.sdx-container .footer .nav-section--col-ul-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sdx-container .footer .nav-section--col-ul-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sdx-container .footer .nav-section--col-ul-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sdx-container .footer .nav-section--col-ul-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sdx-container .footer .nav-section--col-ul-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
.sdx-container .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) {
.sdx-container .footer .nav-section .nav-col {
-webkit-column-break-after: column;
page-break-after: column;
break-after: column;
}
}
.sdx-container .footer .nav-items::after {
content: "";
display: block;
clear: both;
}
.sdx-container .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) {
.sdx-container .footer .logo {
width: auto;
margin-top: 22px;
margin-left: -18px;
float: left;
text-align: left;
}
}
.sdx-container .footer .logo .logo-lifeform {
background-size: 3600px 40px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url("../images/lifeform-spritesheet.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) {
.sdx-container .footer .logo .logo-lifeform {
background-image: url("../images/lifeform-spritesheet@2x.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) {
.sdx-container .footer--compact {
height: 80px;
}
}
.sdx-container .footer--compact .nav-link {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sdx-container .footer--compact .nav-items {
margin-top: 26px;
margin-bottom: 49px;
text-align: center;
}
@media (min-width: 768px) {
.sdx-container .footer--compact .nav-items {
float: right;
margin-top: 29px;
margin-bottom: 0;
text-align: inherit;
}
}
.sdx-container .footer--compact .nav-items .nav-item {
margin-bottom: 22px;
margin-right: 0;
}
.sdx-container .footer--compact .nav-items .nav-item:first-child {
margin-left: 0;
}
.sdx-container .footer--compact .nav-items .nav-item:last-child {
margin-right: 0;
}
@media (min-width: 768px) {
.sdx-container .footer--compact .nav-items .nav-item {
float: left;
margin-bottom: 0;
margin-right: 22px;
}
}
.sdx-container .footer--full .nav-section {
min-height: 100%;
}
.sdx-container .footer--full .nav-title {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: 0;
}
.sdx-container .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;
}
.sdx-container .footer--full .nav-icon {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border: 0;
background: 0;
}
.sdx-container .footer--full .nav-items {
text-align: center;
}
@media (min-width: 768px) {
.sdx-container .footer--full .nav-items {
text-align: inherit;
}
}
.sdx-container .footer--full .nav-items--divider .nav-item {
margin: 0;
}
.sdx-container .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) {
.sdx-container .footer--full .nav-section {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
.sdx-container .footer--full .footer__top {
padding: 35px 0 72px;
}
@media (min-width: 0) {
.sdx-container .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) {
.sdx-container .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) {
.sdx-container .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) {
.sdx-container .footer--full .footer__top .nav-col > .container {
padding: 0;
margin: 0;
width: auto;
}
}
.sdx-container .footer--full .footer__top .nav-items {
margin-top: 8px;
}
.sdx-container .footer--full .footer__top .nav-items .nav-item {
margin-bottom: 8px;
}
.sdx-container .footer--full .footer__top .nav-items .nav-item:last-child {
margin: 0;
}
@media (max-width: 1023px) {
.sdx-container .footer--full .footer__top {
padding: 0;
}
.sdx-container .footer--full .footer__top > .container {
padding: 0;
margin: 0;
width: auto;
}
.sdx-container .footer--full .footer__top .nav-col {
padding: 22px 0 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.sdx-container .footer--full .footer__top .nav-col:last-of-type {
border-bottom: 0;
}
.sdx-container .footer--full .footer__top .nav-items {
text-align: inherit;
}
}
.sdx-container .footer--full .footer__bottom {
height: 100%;
padding: 27px 0 25px;
}
@media (min-width: 768px) {
.sdx-container .footer--full .footer__bottom {
height: 128px;
padding: 25px 0;
}
}
.sdx-container .footer--full .footer__bottom .row {
margin-bottom: 0;
}
@media (min-width: 768px) {
.sdx-container .footer--full .footer__bottom .row {
margin-bottom: 13px;
}
}
.sdx-container .footer--full .footer__bottom .row:last-child {
margin-bottom: 0;
}
.sdx-container .footer--full .footer__bottom .nav-items {
display: inline-block;
}
.sdx-container .footer--full .footer__bottom .nav-items--divider .nav-item {
margin: 0;
}
.sdx-container .footer--full .footer__bottom .nav-item {
float: left;
margin-right: 22px;
text-align: center;
}
.sdx-container .footer--full .footer__bottom .nav-item:last-child {
margin: 0;
}
@media (min-width: 768px) {
.sdx-container .footer--full .footer__bottom .nav-item {
text-align: left;
}
}
.sdx-container .footer--full .footer__bottom .footer--left,
.sdx-container .footer--full .footer__bottom .footer--right {
float: none;
margin-top: 0;
text-align: center;
}
.sdx-container .footer--full .footer__bottom .footer--social-icons {
text-align: center;
margin-bottom: 12px;
}
@media (min-width: 768px) {
.sdx-container .footer--full .footer__bottom .footer--social-icons {
margin-bottom: 0;
}
}
.sdx-container .footer--full .footer__bottom .footer--social-icons .nav-item {
margin-right: 24px;
}
.sdx-container .footer--full .footer__bottom .footer--social-icons .nav-item:last-child {
margin: 0;
}
.sdx-container .footer--full .footer__bottom .footer--nav {
margin-bottom: 9px;
}
@media (min-width: 768px) {
.sdx-container .footer--full .footer__bottom .footer--nav {
margin-bottom: 0;
}
}
.sdx-container .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) {
.sdx-container .footer--full .footer__bottom .footer--copyright {
font-weight: 400;
line-height: 24px;
letter-spacing: 0.1px;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
@media (min-width: 768px) {
.sdx-container .footer--full .footer__bottom .footer--left {
float: left;
}
.sdx-container .footer--full .footer__bottom .footer--right {
float: right;
}
.sdx-container .footer--full .footer__bottom .footer--nav {
margin-top: 6px;
}
}
.sdx-container .footer--full .nav-title, .sdx-container .footer--full.footer--dark .nav-title {
color: #fff;
}
.sdx-container .footer--full .footer__top, .sdx-container .footer--full.footer--dark .footer__top {
background: #474747;
}
.sdx-container .footer--full .footer__top .nav-col, .sdx-container .footer--full.footer--dark .footer__top .nav-col {
border-bottom-color: rgba(255, 255, 255, 0.4);
}
.sdx-container .footer--full .footer__top .accordion__toggle .accordion__header, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .accordion__header {
width: calc(100% - 16px - 8px);
}
.sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon, .sdx-container .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;
}
.sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before {
left: 0;
}
.sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after {
left: 6px;
}
.sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon {
position: relative;
}
.sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::before {
left: 0;
}
.sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::after {
left: 6px;
}
.sdx-container .footer--full .footer__top .is-open .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .is-open .accordion__toggle .arrow-icon::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .footer--full .footer__top .is-open .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .is-open .accordion__toggle .arrow-icon::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .footer--full .footer__bottom, .sdx-container .footer--full.footer--dark .footer__bottom {
background: #333;
}
.sdx-container .footer--full.footer--light .nav-title {
color: #333;
}
.sdx-container .footer--full.footer--light .nav-items--divider .nav-item::before {
color: #333;
}
.sdx-container .footer--full.footer--light .footer__top {
background: #eef3f6;
}
.sdx-container .footer--full.footer--light .footer__top .nav-col {
border-bottom-color: #bbb;
}
.sdx-container .footer--full.footer--light .footer__top .nav-link {
color: #666;
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle .accordion__header {
width: calc(100% - 16px - 8px);
}
.sdx-container .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;
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before {
left: 0;
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after {
left: 6px;
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon {
position: relative;
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .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: "";
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::before {
left: 0;
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::after {
left: 6px;
}
.sdx-container .footer--full.footer--light .footer__top .is-open .accordion__toggle .arrow-icon::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sdx-container .footer--full.footer--light .footer__top .is-open .accordion__toggle .arrow-icon::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sdx-container .footer--full.footer--light .footer__bottom {
background: #dde3e7;
}
.sdx-container .footer--full.footer--light .footer__bottom .footer--copyright {
color: #333;
}
.sdx-container .footer, .sdx-container .footer.footer--dark {
color: #fff;
background: #474747;
}
.sdx-container .footer a.nav-title, .sdx-container .footer a.nav-link,
.sdx-container .footer button.nav-title,
.sdx-container .footer button.nav-link, .sdx-container .footer.footer--dark a.nav-title, .sdx-container .footer.footer--dark a.nav-link,
.sdx-container .footer.footer--dark button.nav-title,
.sdx-container .footer.footer--dark button.nav-link {
color: #fff;
}
.sdx-container .footer a.nav-title:hover, .sdx-container .footer a.nav-title:focus, .sdx-container .footer a.nav-link:hover, .sdx-container .footer a.nav-link:focus,
.sdx-container .footer button.nav-title:hover,
.sdx-container .footer button.nav-title:focus,
.sdx-container .footer button.nav-link:hover,
.sdx-container .footer button.nav-link:focus, .sdx-container .footer.footer--dark a.nav-title:hover, .sdx-container .footer.footer--dark a.nav-title:focus, .sdx-container .footer.footer--dark a.nav-link:hover, .sdx-container .footer.footer--dark a.nav-link:focus,
.sdx-container .footer.footer--dark button.nav-title:hover,
.sdx-container .footer.footer--dark button.nav-title:focus,
.sdx-container .footer.footer--dark button.nav-link:hover,
.sdx-container .footer.footer--dark button.nav-link:focus {
border-bottom-color: #fff;
color: #fff;
}
.sdx-container .footer svg .icon, .sdx-container .footer.footer--dark svg .icon {
fill: #fff;
}
.sdx-container .footer.footer--light {
color: #333;
background: #eef3f6;
}
.sdx-container .footer.footer--light a.nav-title, .sdx-container .footer.footer--light a.nav-link,
.sdx-container .footer.footer--light button.nav-title,
.sdx-container .footer.footer--light button.nav-link {
color: #333;
}
.sdx-container .footer.footer--light a.nav-title:hover, .sdx-container .footer.footer--light a.nav-title:focus, .sdx-container .footer.footer--light a.nav-link:hover, .sdx-container .footer.footer--light a.nav-link:focus,
.sdx-container .footer.footer--light button.nav-title:hover,
.sdx-container .footer.footer--light button.nav-title:focus,
.sdx-container .footer.footer--light button.nav-link:hover,
.sdx-container .footer.footer--light button.nav-link:focus {
border-bottom-color: #333;
color: #333;
}
.sdx-container .footer.footer--light svg .icon {
fill: #333;
}
.sdx-container .footer--left {
float: left;
}
.sdx-container .footer--right {
float: right;
}
.sdx-container .footer .text-sm {
font-weight: 400;
line-height: 24px;
letter-spacing: 0.1px;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sdx-container .comments__input {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border: 0;
}
.sdx-container .comments__input .input-wrapper {
width: 100%;
}
.sdx-container .comments__input .input-wrapper .button {
float: right;
margin-bottom: 24px;
}
.sdx-container .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) {
.sdx-container .comments__input .input-wrapper .button {
display: none;
}
}
.sdx-container .comments__input .avatar {
margin-right: 18px;
margin-top: 5px;
}
@media (max-width: 767px) {
.sdx-container .comments__input .avatar {
display: none;
}
}
.sdx-container .comments__input .avatar .avatar__image {
width: 41px;
height: 41px;
border-radius: 50%;
}
.sdx-container .comments__input .input-multiline,
.sdx-container .comments__input .input-field--multiline {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
margin-bottom: 24px;
}
.sdx-container .comments__input .input-multiline textarea,
.sdx-container .comments__input .input-field--multiline textarea {
margin-top: 0 !important;
}
.sdx-container .comments__input .is-hidden {
display: none;
}
.sdx-container .comments__feed {
margin-top: 1px;
}
.sdx-container .comment {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
}
@media (min-width: 0) {
.sdx-container .comment > .comment {
padding-left: calc((98vw - 48px) / 12);
}
}
@media (min-width: 480px) {
.sdx-container .comment > .comment {
padding-left: 36.3333333333px;
}
}
@media (min-width: 768px) {
.sdx-container .comment > .comment {
padding-left: 61.8333333333px;
}
}
@media (min-width: 1024px) {
.sdx-container .comment > .comment {
padding-left: 80.3333333333px;
}
}
@media (min-width: 1280px) {
.sdx-container .comment > .comment {
padding-left: 102px;
}
}
@media (min-width: 1440px) {
.sdx-container .comment > .comment {
padding-left: 115px;
}
}
.sdx-container .comment > .comment > .comment {
padding-left: 0;
}
@media (min-width: 768px) and (min-width: 0) {
.sdx-container .comment > .comment > .comment {
padding-left: calc((98vw - 48px) / 12);
}
}
@media (min-width: 768px) and (min-width: 480px) {
.sdx-container .comment > .comment > .comment {
padding-left: 36.3333333333px;
}
}
@media (min-width: 768px) and (min-width: 768px) {
.sdx-container .comment > .comment > .comment {
padding-left: 61.8333333333px;
}
}
@media (min-width: 768px) and (min-width: 1024px) {
.sdx-container .comment > .comment > .comment {
padding-left: 80.3333333333px;
}
}
@media (min-width: 768px) and (min-width: 1280px) {
.sdx-container .comment > .comment > .comment {
padding-left: 102px;
}
}
@media (min-width: 768px) and (min-width: 1440px) {
.sdx-container .comment > .comment > .comment {
padding-left: 115px;
}
}
.sdx-container .comment > .comment > .comment .comment {
padding-left: 0;
}
.sdx-container .comment__wrapper {
margin-top: -1px;
padding: 13px 0 16px;
border-top: 1px solid #e4e9ec;
border-bottom: 1px solid #e4e9ec;
}
.sdx-container .comment__header {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 8px;
}
.sdx-container .comment__header .author {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
.sdx-container .comment__header .author__title, .sdx-container .comment__header .author__subtitle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
max-width: 100%;
}
.sdx-container .comment__header .meta {
margin-left: 18px;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
@media (max-width: 767px) {
.sdx-container .comment__header .meta {
display: none;
}
}
.sdx-container .comment__body {
margin-bottom: 7px;
}
.sdx-container .comment__footer .icon {
bottom: -1px;
font-size: 20px;
}
.sdx-container .comment__footer .time {
line-height: 24px;
letter-spacing: 0.1px;
font-size: 14px;
float: right;
margin-top: 2px;
opacity: 0.5;
}
.sdx-container .comment .link, .sdx-container .comment .link:hover, .sdx-container .comment .link:focus {
border: 0;
}
.sdx-container .comment .avatar {
margin-right: 18px;
margin-top: 3px;
}
.sdx-container .comment .avatar .avatar__image {
width: 41px;
height: 41px;
border-radius: 50%;
}
.sdx-container .bg--dark .comments__input .input-wrapper .button.disabled {
background-color: transparent;
color: rgba(207, 213, 217, 0.4);
}
.sdx-container .bg--dark .comment__wrapper {
border-top: 1px solid #e4e9ec;
border-bottom: 1px solid #e4e9ec;
}
.sdx-container .bg--dark .comment .link {
border: 0;
color: #1781e3;
}
.sdx-container .bg--dark .comment .link:hover, .sdx-container .bg--dark .comment .link:focus {
border: 0;
color: #0851da;
}
.sdx-container .clearfix::after {
content: "";
display: block;
clear: both;
}
@media (min-width: 0) {
.sdx-container .margin-xs-0 {
margin: 0px !important;
}
.sdx-container .margin-xs-1 {
margin: 8px !important;
}
.sdx-container .margin-xs-2 {
margin: 16px !important;
}
.sdx-container .margin-xs-3 {
margin: 24px !important;
}
.sdx-container .margin-xs-4 {
margin: 32px !important;
}
.sdx-container .margin-xs-top-0 {
margin-top: 0px !important;
}
.sdx-container .margin-xs-top-1 {
margin-top: 8px !important;
}
.sdx-container .margin-xs-top-2 {
margin-top: 16px !important;
}
.sdx-container .margin-xs-top-3 {
margin-top: 24px !important;
}
.sdx-container .margin-xs-top-4 {
margin-top: 32px !important;
}
.sdx-container .margin-xs-bottom-0 {
margin-bottom: 0px !important;
}
.sdx-container .margin-xs-bottom-1 {
margin-bottom: 8px !important;
}
.sdx-container .margin-xs-bottom-2 {
margin-bottom: 16px !important;
}
.sdx-container .margin-xs-bottom-3 {
margin-bottom: 24px !important;
}
.sdx-container .margin-xs-bottom-4 {
margin-bottom: 32px !important;
}
.sdx-container .margin-xs-h-0 {
margin-left: 0px !important;
margin-right: 0px !important;
}
.sdx-container .margin-xs-h-1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.sdx-container .margin-xs-h-2 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.sdx-container .margin-xs-h-3 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.sdx-container .margin-xs-h-4 {
margin-left: 32px !important;
margin-right: 32px !important;
}
.sdx-container .margin-xs-v-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.sdx-container .margin-xs-v-1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.sdx-container .margin-xs-v-2 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.sdx-container .margin-xs-v-3 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.sdx-container .margin-xs-v-4 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
}
@media (min-width: 480px) {
.sdx-container .margin-sm-0 {
margin: 0px !important;
}
.sdx-container .margin-sm-1 {
margin: 8px !important;
}
.sdx-container .margin-sm-2 {
margin: 16px !important;
}
.sdx-container .margin-sm-3 {
margin: 24px !important;
}
.sdx-container .margin-sm-4 {
margin: 32px !important;
}
.sdx-container .margin-sm-top-0 {
margin-top: 0px !important;
}
.sdx-container .margin-sm-top-1 {
margin-top: 8px !important;
}
.sdx-container .margin-sm-top-2 {
margin-top: 16px !important;
}
.sdx-container .margin-sm-top-3 {
margin-top: 24px !important;
}
.sdx-container .margin-sm-top-4 {
margin-top: 32px !important;
}
.sdx-container .margin-sm-bottom-0 {
margin-bottom: 0px !important;
}
.sdx-container .margin-sm-bottom-1 {
margin-bottom: 8px !important;
}
.sdx-container .margin-sm-bottom-2 {
margin-bottom: 16px !important;
}
.sdx-container .margin-sm-bottom-3 {
margin-bottom: 24px !important;
}
.sdx-container .margin-sm-bottom-4 {
margin-bottom: 32px !important;
}
.sdx-container .margin-sm-h-0 {
margin-left: 0px !important;
margin-right: 0px !important;
}
.sdx-container .margin-sm-h-1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.sdx-container .margin-sm-h-2 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.sdx-container .margin-sm-h-3 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.sdx-container .margin-sm-h-4 {
margin-left: 32px !important;
margin-right: 32px !important;
}
.sdx-container .margin-sm-v-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.sdx-container .margin-sm-v-1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.sdx-container .margin-sm-v-2 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.sdx-container .margin-sm-v-3 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.sdx-container .margin-sm-v-4 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
}
@media (min-width: 768px) {
.sdx-container .margin-md-0 {
margin: 0px !important;
}
.sdx-container .margin-md-1 {
margin: 8px !important;
}
.sdx-container .margin-md-2 {
margin: 16px !important;
}
.sdx-container .margin-md-3 {
margin: 24px !important;
}
.sdx-container .margin-md-4 {
margin: 32px !important;
}
.sdx-container .margin-md-top-0 {
margin-top: 0px !important;
}
.sdx-container .margin-md-top-1 {
margin-top: 8px !important;
}
.sdx-container .margin-md-top-2 {
margin-top: 16px !important;
}
.sdx-container .margin-md-top-3 {
margin-top: 24px !important;
}
.sdx-container .margin-md-top-4 {
margin-top: 32px !important;
}
.sdx-container .margin-md-bottom-0 {
margin-bottom: 0px !important;
}
.sdx-container .margin-md-bottom-1 {
margin-bottom: 8px !important;
}
.sdx-container .margin-md-bottom-2 {
margin-bottom: 16px !important;
}
.sdx-container .margin-md-bottom-3 {
margin-bottom: 24px !important;
}
.sdx-container .margin-md-bottom-4 {
margin-bottom: 32px !important;
}
.sdx-container .margin-md-h-0 {
margin-left: 0px !important;
margin-right: 0px !important;
}
.sdx-container .margin-md-h-1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.sdx-container .margin-md-h-2 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.sdx-container .margin-md-h-3 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.sdx-container .margin-md-h-4 {
margin-left: 32px !important;
margin-right: 32px !important;
}
.sdx-container .margin-md-v-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.sdx-container .margin-md-v-1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.sdx-container .margin-md-v-2 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.sdx-container .margin-md-v-3 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.sdx-container .margin-md-v-4 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
}
@media (min-width: 1024px) {
.sdx-container .margin-lg-0 {
margin: 0px !important;
}
.sdx-container .margin-lg-1 {
margin: 8px !important;
}
.sdx-container .margin-lg-2 {
margin: 16px !important;
}
.sdx-container .margin-lg-3 {
margin: 24px !important;
}
.sdx-container .margin-lg-4 {
margin: 32px !important;
}
.sdx-container .margin-lg-top-0 {
margin-top: 0px !important;
}
.sdx-container .margin-lg-top-1 {
margin-top: 8px !important;
}
.sdx-container .margin-lg-top-2 {
margin-top: 16px !important;
}
.sdx-container .margin-lg-top-3 {
margin-top: 24px !important;
}
.sdx-container .margin-lg-top-4 {
margin-top: 32px !important;
}
.sdx-container .margin-lg-bottom-0 {
margin-bottom: 0px !important;
}
.sdx-container .margin-lg-bottom-1 {
margin-bottom: 8px !important;
}
.sdx-container .margin-lg-bottom-2 {
margin-bottom: 16px !important;
}
.sdx-container .margin-lg-bottom-3 {
margin-bottom: 24px !important;
}
.sdx-container .margin-lg-bottom-4 {
margin-bottom: 32px !important;
}
.sdx-container .margin-lg-h-0 {
margin-left: 0px !important;
margin-right: 0px !important;
}
.sdx-container .margin-lg-h-1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.sdx-container .margin-lg-h-2 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.sdx-container .margin-lg-h-3 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.sdx-container .margin-lg-h-4 {
margin-left: 32px !important;
margin-right: 32px !important;
}
.sdx-container .margin-lg-v-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.sdx-container .margin-lg-v-1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.sdx-container .margin-lg-v-2 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.sdx-container .margin-lg-v-3 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.sdx-container .margin-lg-v-4 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
}
@media (min-width: 1280px) {
.sdx-container .margin-xl-0 {
margin: 0px !important;
}
.sdx-container .margin-xl-1 {
margin: 8px !important;
}
.sdx-container .margin-xl-2 {
margin: 16px !important;
}
.sdx-container .margin-xl-3 {
margin: 24px !important;
}
.sdx-container .margin-xl-4 {
margin: 32px !important;
}
.sdx-container .margin-xl-top-0 {
margin-top: 0px !important;
}
.sdx-container .margin-xl-top-1 {
margin-top: 8px !important;
}
.sdx-container .margin-xl-top-2 {
margin-top: 16px !important;
}
.sdx-container .margin-xl-top-3 {
margin-top: 24px !important;
}
.sdx-container .margin-xl-top-4 {
margin-top: 32px !important;
}
.sdx-container .margin-xl-bottom-0 {
margin-bottom: 0px !important;
}
.sdx-container .margin-xl-bottom-1 {
margin-bottom: 8px !important;
}
.sdx-container .margin-xl-bottom-2 {
margin-bottom: 16px !important;
}
.sdx-container .margin-xl-bottom-3 {
margin-bottom: 24px !important;
}
.sdx-container .margin-xl-bottom-4 {
margin-bottom: 32px !important;
}
.sdx-container .margin-xl-h-0 {
margin-left: 0px !important;
margin-right: 0px !important;
}
.sdx-container .margin-xl-h-1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.sdx-container .margin-xl-h-2 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.sdx-container .margin-xl-h-3 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.sdx-container .margin-xl-h-4 {
margin-left: 32px !important;
margin-right: 32px !important;
}
.sdx-container .margin-xl-v-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.sdx-container .margin-xl-v-1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.sdx-container .margin-xl-v-2 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.sdx-container .margin-xl-v-3 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.sdx-container .margin-xl-v-4 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
}
@media (min-width: 1440px) {
.sdx-container .margin-ul-0 {
margin: 0px !important;
}
.sdx-container .margin-ul-1 {
margin: 8px !important;
}
.sdx-container .margin-ul-2 {
margin: 16px !important;
}
.sdx-container .margin-ul-3 {
margin: 24px !important;
}
.sdx-container .margin-ul-4 {
margin: 32px !important;
}
.sdx-container .margin-ul-top-0 {
margin-top: 0px !important;
}
.sdx-container .margin-ul-top-1 {
margin-top: 8px !important;
}
.sdx-container .margin-ul-top-2 {
margin-top: 16px !important;
}
.sdx-container .margin-ul-top-3 {
margin-top: 24px !important;
}
.sdx-container .margin-ul-top-4 {
margin-top: 32px !important;
}
.sdx-container .margin-ul-bottom-0 {
margin-bottom: 0px !important;
}
.sdx-container .margin-ul-bottom-1 {
margin-bottom: 8px !important;
}
.sdx-container .margin-ul-bottom-2 {
margin-bottom: 16px !important;
}
.sdx-container .margin-ul-bottom-3 {
margin-bottom: 24px !important;
}
.sdx-container .margin-ul-bottom-4 {
margin-bottom: 32px !important;
}
.sdx-container .margin-ul-h-0 {
margin-left: 0px !important;
margin-right: 0px !important;
}
.sdx-container .margin-ul-h-1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.sdx-container .margin-ul-h-2 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.sdx-container .margin-ul-h-3 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.sdx-container .margin-ul-h-4 {
margin-left: 32px !important;
margin-right: 32px !important;
}
.sdx-container .margin-ul-v-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.sdx-container .margin-ul-v-1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.sdx-container .margin-ul-v-2 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.sdx-container .margin-ul-v-3 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.sdx-container .margin-ul-v-4 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
}
.sdx-container .margin-0 {
margin: 0px !important;
}
.sdx-container .margin-1 {
margin: 8px !important;
}
.sdx-container .margin-2 {
margin: 16px !important;
}
.sdx-container .margin-3 {
margin: 24px !important;
}
.sdx-container .margin-4 {
margin: 32px !important;
}
.sdx-container .margin-top-0 {
margin-top: 0px !important;
}
.sdx-container .margin-top-1 {
margin-top: 8px !important;
}
.sdx-container .margin-top-2 {
margin-top: 16px !important;
}
.sdx-container .margin-top-3 {
margin-top: 24px !important;
}
.sdx-container .margin-top-4 {
margin-top: 32px !important;
}
.sdx-container .margin-bottom-0 {
margin-bottom: 0px !important;
}
.sdx-container .margin-bottom-1 {
margin-bottom: 8px !important;
}
.sdx-container .margin-bottom-2 {
margin-bottom: 16px !important;
}
.sdx-container .margin-bottom-3 {
margin-bottom: 24px !important;
}
.sdx-container .margin-bottom-4 {
margin-bottom: 32px !important;
}
.sdx-container .margin-h-0 {
margin-left: 0px !important;
margin-right: 0px !important;
}
.sdx-container .margin-h-1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.sdx-container .margin-h-2 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.sdx-container .margin-h-3 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.sdx-container .margin-h-4 {
margin-left: 32px !important;
margin-right: 32px !important;
}
.sdx-container .margin-v-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.sdx-container .margin-v-1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.sdx-container .margin-v-2 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.sdx-container .margin-v-3 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.sdx-container .margin-v-4 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
@media (min-width: 0) {
.sdx-container .padding-xs-0 {
padding: 0px !important;
}
.sdx-container .padding-xs-1 {
padding: 8px !important;
}
.sdx-container .padding-xs-2 {
padding: 16px !important;
}
.sdx-container .padding-xs-3 {
padding: 24px !important;
}
.sdx-container .padding-xs-4 {
padding: 32px !important;
}
.sdx-container .padding-xs-top-0 {
padding-top: 0px !important;
}
.sdx-container .padding-xs-top-1 {
padding-top: 8px !important;
}
.sdx-container .padding-xs-top-2 {
padding-top: 16px !important;
}
.sdx-container .padding-xs-top-3 {
padding-top: 24px !important;
}
.sdx-container .padding-xs-top-4 {
padding-top: 32px !important;
}
.sdx-container .padding-xs-bottom-0 {
padding-bottom: 0px !important;
}
.sdx-container .padding-xs-bottom-1 {
padding-bottom: 8px !important;
}
.sdx-container .padding-xs-bottom-2 {
padding-bottom: 16px !important;
}
.sdx-container .padding-xs-bottom-3 {
padding-bottom: 24px !important;
}
.sdx-container .padding-xs-bottom-4 {
padding-bottom: 32px !important;
}
.sdx-container .padding-xs-h-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.sdx-container .padding-xs-h-1 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.sdx-container .padding-xs-h-2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sdx-container .padding-xs-h-3 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sdx-container .padding-xs-h-4 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.sdx-container .padding-xs-v-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.sdx-container .padding-xs-v-1 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.sdx-container .padding-xs-v-2 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.sdx-container .padding-xs-v-3 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.sdx-container .padding-xs-v-4 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
@media (min-width: 480px) {
.sdx-container .padding-sm-0 {
padding: 0px !important;
}
.sdx-container .padding-sm-1 {
padding: 8px !important;
}
.sdx-container .padding-sm-2 {
padding: 16px !important;
}
.sdx-container .padding-sm-3 {
padding: 24px !important;
}
.sdx-container .padding-sm-4 {
padding: 32px !important;
}
.sdx-container .padding-sm-top-0 {
padding-top: 0px !important;
}
.sdx-container .padding-sm-top-1 {
padding-top: 8px !important;
}
.sdx-container .padding-sm-top-2 {
padding-top: 16px !important;
}
.sdx-container .padding-sm-top-3 {
padding-top: 24px !important;
}
.sdx-container .padding-sm-top-4 {
padding-top: 32px !important;
}
.sdx-container .padding-sm-bottom-0 {
padding-bottom: 0px !important;
}
.sdx-container .padding-sm-bottom-1 {
padding-bottom: 8px !important;
}
.sdx-container .padding-sm-bottom-2 {
padding-bottom: 16px !important;
}
.sdx-container .padding-sm-bottom-3 {
padding-bottom: 24px !important;
}
.sdx-container .padding-sm-bottom-4 {
padding-bottom: 32px !important;
}
.sdx-container .padding-sm-h-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.sdx-container .padding-sm-h-1 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.sdx-container .padding-sm-h-2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sdx-container .padding-sm-h-3 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sdx-container .padding-sm-h-4 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.sdx-container .padding-sm-v-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.sdx-container .padding-sm-v-1 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.sdx-container .padding-sm-v-2 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.sdx-container .padding-sm-v-3 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.sdx-container .padding-sm-v-4 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
@media (min-width: 768px) {
.sdx-container .padding-md-0 {
padding: 0px !important;
}
.sdx-container .padding-md-1 {
padding: 8px !important;
}
.sdx-container .padding-md-2 {
padding: 16px !important;
}
.sdx-container .padding-md-3 {
padding: 24px !important;
}
.sdx-container .padding-md-4 {
padding: 32px !important;
}
.sdx-container .padding-md-top-0 {
padding-top: 0px !important;
}
.sdx-container .padding-md-top-1 {
padding-top: 8px !important;
}
.sdx-container .padding-md-top-2 {
padding-top: 16px !important;
}
.sdx-container .padding-md-top-3 {
padding-top: 24px !important;
}
.sdx-container .padding-md-top-4 {
padding-top: 32px !important;
}
.sdx-container .padding-md-bottom-0 {
padding-bottom: 0px !important;
}
.sdx-container .padding-md-bottom-1 {
padding-bottom: 8px !important;
}
.sdx-container .padding-md-bottom-2 {
padding-bottom: 16px !important;
}
.sdx-container .padding-md-bottom-3 {
padding-bottom: 24px !important;
}
.sdx-container .padding-md-bottom-4 {
padding-bottom: 32px !important;
}
.sdx-container .padding-md-h-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.sdx-container .padding-md-h-1 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.sdx-container .padding-md-h-2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sdx-container .padding-md-h-3 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sdx-container .padding-md-h-4 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.sdx-container .padding-md-v-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.sdx-container .padding-md-v-1 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.sdx-container .padding-md-v-2 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.sdx-container .padding-md-v-3 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.sdx-container .padding-md-v-4 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
@media (min-width: 1024px) {
.sdx-container .padding-lg-0 {
padding: 0px !important;
}
.sdx-container .padding-lg-1 {
padding: 8px !important;
}
.sdx-container .padding-lg-2 {
padding: 16px !important;
}
.sdx-container .padding-lg-3 {
padding: 24px !important;
}
.sdx-container .padding-lg-4 {
padding: 32px !important;
}
.sdx-container .padding-lg-top-0 {
padding-top: 0px !important;
}
.sdx-container .padding-lg-top-1 {
padding-top: 8px !important;
}
.sdx-container .padding-lg-top-2 {
padding-top: 16px !important;
}
.sdx-container .padding-lg-top-3 {
padding-top: 24px !important;
}
.sdx-container .padding-lg-top-4 {
padding-top: 32px !important;
}
.sdx-container .padding-lg-bottom-0 {
padding-bottom: 0px !important;
}
.sdx-container .padding-lg-bottom-1 {
padding-bottom: 8px !important;
}
.sdx-container .padding-lg-bottom-2 {
padding-bottom: 16px !important;
}
.sdx-container .padding-lg-bottom-3 {
padding-bottom: 24px !important;
}
.sdx-container .padding-lg-bottom-4 {
padding-bottom: 32px !important;
}
.sdx-container .padding-lg-h-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.sdx-container .padding-lg-h-1 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.sdx-container .padding-lg-h-2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sdx-container .padding-lg-h-3 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sdx-container .padding-lg-h-4 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.sdx-container .padding-lg-v-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.sdx-container .padding-lg-v-1 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.sdx-container .padding-lg-v-2 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.sdx-container .padding-lg-v-3 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.sdx-container .padding-lg-v-4 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
@media (min-width: 1280px) {
.sdx-container .padding-xl-0 {
padding: 0px !important;
}
.sdx-container .padding-xl-1 {
padding: 8px !important;
}
.sdx-container .padding-xl-2 {
padding: 16px !important;
}
.sdx-container .padding-xl-3 {
padding: 24px !important;
}
.sdx-container .padding-xl-4 {
padding: 32px !important;
}
.sdx-container .padding-xl-top-0 {
padding-top: 0px !important;
}
.sdx-container .padding-xl-top-1 {
padding-top: 8px !important;
}
.sdx-container .padding-xl-top-2 {
padding-top: 16px !important;
}
.sdx-container .padding-xl-top-3 {
padding-top: 24px !important;
}
.sdx-container .padding-xl-top-4 {
padding-top: 32px !important;
}
.sdx-container .padding-xl-bottom-0 {
padding-bottom: 0px !important;
}
.sdx-container .padding-xl-bottom-1 {
padding-bottom: 8px !important;
}
.sdx-container .padding-xl-bottom-2 {
padding-bottom: 16px !important;
}
.sdx-container .padding-xl-bottom-3 {
padding-bottom: 24px !important;
}
.sdx-container .padding-xl-bottom-4 {
padding-bottom: 32px !important;
}
.sdx-container .padding-xl-h-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.sdx-container .padding-xl-h-1 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.sdx-container .padding-xl-h-2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sdx-container .padding-xl-h-3 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sdx-container .padding-xl-h-4 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.sdx-container .padding-xl-v-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.sdx-container .padding-xl-v-1 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.sdx-container .padding-xl-v-2 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.sdx-container .padding-xl-v-3 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.sdx-container .padding-xl-v-4 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
@media (min-width: 1440px) {
.sdx-container .padding-ul-0 {
padding: 0px !important;
}
.sdx-container .padding-ul-1 {
padding: 8px !important;
}
.sdx-container .padding-ul-2 {
padding: 16px !important;
}
.sdx-container .padding-ul-3 {
padding: 24px !important;
}
.sdx-container .padding-ul-4 {
padding: 32px !important;
}
.sdx-container .padding-ul-top-0 {
padding-top: 0px !important;
}
.sdx-container .padding-ul-top-1 {
padding-top: 8px !important;
}
.sdx-container .padding-ul-top-2 {
padding-top: 16px !important;
}
.sdx-container .padding-ul-top-3 {
padding-top: 24px !important;
}
.sdx-container .padding-ul-top-4 {
padding-top: 32px !important;
}
.sdx-container .padding-ul-bottom-0 {
padding-bottom: 0px !important;
}
.sdx-container .padding-ul-bottom-1 {
padding-bottom: 8px !important;
}
.sdx-container .padding-ul-bottom-2 {
padding-bottom: 16px !important;
}
.sdx-container .padding-ul-bottom-3 {
padding-bottom: 24px !important;
}
.sdx-container .padding-ul-bottom-4 {
padding-bottom: 32px !important;
}
.sdx-container .padding-ul-h-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.sdx-container .padding-ul-h-1 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.sdx-container .padding-ul-h-2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sdx-container .padding-ul-h-3 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sdx-container .padding-ul-h-4 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.sdx-container .padding-ul-v-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.sdx-container .padding-ul-v-1 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.sdx-container .padding-ul-v-2 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.sdx-container .padding-ul-v-3 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.sdx-container .padding-ul-v-4 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
.sdx-container .padding-0 {
padding: 0px !important;
}
.sdx-container .padding-1 {
padding: 8px !important;
}
.sdx-container .padding-2 {
padding: 16px !important;
}
.sdx-container .padding-3 {
padding: 24px !important;
}
.sdx-container .padding-4 {
padding: 32px !important;
}
.sdx-container .padding-top-0 {
padding-top: 0px !important;
}
.sdx-container .padding-top-1 {
padding-top: 8px !important;
}
.sdx-container .padding-top-2 {
padding-top: 16px !important;
}
.sdx-container .padding-top-3 {
padding-top: 24px !important;
}
.sdx-container .padding-top-4 {
padding-top: 32px !important;
}
.sdx-container .padding-bottom-0 {
padding-bottom: 0px !important;
}
.sdx-container .padding-bottom-1 {
padding-bottom: 8px !important;
}
.sdx-container .padding-bottom-2 {
padding-bottom: 16px !important;
}
.sdx-container .padding-bottom-3 {
padding-bottom: 24px !important;
}
.sdx-container .padding-bottom-4 {
padding-bottom: 32px !important;
}
.sdx-container .padding-h-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.sdx-container .padding-h-1 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.sdx-container .padding-h-2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sdx-container .padding-h-3 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sdx-container .padding-h-4 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.sdx-container .padding-v-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.sdx-container .padding-v-1 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.sdx-container .padding-v-2 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.sdx-container .padding-v-3 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.sdx-container .padding-v-4 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.sdx-container .align-left {
float: left !important;
}
.sdx-container .align-right {
float: right !important;
}
.sdx-container .center-block {
display: block;
float: none;
margin-right: auto;
margin-left: auto;
}
.sdx-container .center-vertical {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sdx-container .full-width {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
margin-left: -50vw;
margin-right: -50vw;
}
@media only screen and (max-width: 767px) {
.sdx-container .full-width--mobile-only {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
padding-left: 12px;
padding-right: 12px;
}
}
.sdx-container .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sdx-container .sr-only-focusable:active, .sdx-container .sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
.sdx-container .text-align-left {
text-align: left !important;
}
.sdx-container .text-align-center {
text-align: center !important;
}
.sdx-container .text-align-right {
text-align: right !important;
}
.sdx-container .text-align-justify {
text-align: justify !important;
}
.sdx-container .text-lowercase {
text-transform: lowercase !important;
}
.sdx-container .text-uppercase {
text-transform: uppercase !important;
}
.sdx-container .text-capitalize {
text-transform: capitalize !important;
}
.sdx-container .text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sdx-container .text-recommended-max-width {
max-width: 700px;
}
.sdx-container .visible {
visibility: visible !important;
}
.sdx-container .invisible {
visibility: hidden !important;
}
.sdx-container .hide,
.sdx-container .hidden {
display: none !important;
}
.sdx-container .show {
display: block !important;
}
@media (min-width: 0) {
.sdx-container .hidden-xs-up {
display: none !important;
}
}
@media (max-width: 479px) {
.sdx-container .hidden-xs-down {
display: none !important;
}
}
@media (min-width: 0) {
.sdx-container .visible-xs-up {
display: block !important;
}
}
@media (min-width: 480px) {
.sdx-container .hidden-sm-up {
display: none !important;
}
}
@media (max-width: 767px) {
.sdx-container .hidden-sm-down {
display: none !important;
}
}
@media (min-width: 480px) {
.sdx-container .visible-sm-up {
display: block !important;
}
}
@media (min-width: 768px) {
.sdx-container .hidden-md-up {
display: none !important;
}
}
@media (max-width: 1023px) {
.sdx-container .hidden-md-down {
display: none !important;
}
}
@media (min-width: 768px) {
.sdx-container .visible-md-up {
display: block !important;
}
}
@media (min-width: 1024px) {
.sdx-container .hidden-lg-up {
display: none !important;
}
}
@media (max-width: 1279px) {
.sdx-container .hidden-lg-down {
display: none !important;
}
}
@media (min-width: 1024px) {
.sdx-container .visible-lg-up {
display: block !important;
}
}
@media (min-width: 1280px) {
.sdx-container .hidden-xl-up {
display: none !important;
}
}
@media (max-width: 1439px) {
.sdx-container .hidden-xl-down {
display: none !important;
}
}
@media (min-width: 1280px) {
.sdx-container .visible-xl-up {
display: block !important;
}
}
@media (min-width: 1440px) {
.sdx-container .hidden-ul-up {
display: none !important;
}
}
.sdx-container .hidden-ul-down {
display: none !important;
}
@media (min-width: 1440px) {
.sdx-container .visible-ul-up {
display: block !important;
}
}
@media (min-width: 0) {
.sdx-container .hidden-phone-up {
display: none !important;
}
}
@media (max-width: 767px) {
.sdx-container .hidden-phone-down {
display: none !important;
}
}
@media (min-width: 768px) {
.sdx-container .hidden-tablet-up {
display: none !important;
}
}
@media (max-width: 1023px) {
.sdx-container .hidden-tablet-down {
display: none !important;
}
}
@media (min-width: 1024px) {
.sdx-container .hidden-desktop-up {
display: none !important;
}
}
@media (max-width: 1279px) {
.sdx-container .hidden-desktop-down {
display: none !important;
}
}
@media (min-width: 0) {
.sdx-container .visible-phone-up {
display: block !important;
}
}
@media (min-width: 768px) {
.sdx-container .visible-tablet-up {
display: block !important;
}
}
@media (min-width: 1024px) {
.sdx-container .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;
}
}