@charset "UTF-8";
/*!
* SDX Library v2.7.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 */
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 :not(sdx-button)[type=reset],
.sdx-container :not(sdx-button)[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
---
SDX icons are designed to help users navigate more intuitively within digital applications and to spot relevant
information more easily. SDX icons should never be used as imagery but serve a functional purpose.
```section_design
```
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 - designing with icons
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 correctly when displayed side by side.
Minimum Size
Icons have a minimum size of 16px.
Minimum size - 16px x 16px
Maximum Size
Icons have a maximum size of 56px.
Maximum size - 56px x 56px
Available Sizes
Icons are offered in six different sizes.
Using Colour
The icon colour should reflect the importance of the icons’ action which should always be to help guide a user.
They can only be coloured with the brand and interactive colour palette.
Swisscom Navy should be used when pairing navigational text links with icons, or when displaying icons on their
own within a navigation bar. Otherwise, interactive icons shall always be interactive blue.
Icons used for functionality or in conjunction with in-page text links should use the interaction blue.
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.
When used in conjunction with error messages, icons should always be shown in interaction red.
When displaying icons on coloured backgrounds, they should always be shown in white.
```section_develop
```
```htmlmixed_webcomponent_sdx-icon_accessible
```
Available Icons
CSS: icon-account
Sass: icon-char('account');
CSS: icon-arrow-down
Sass: icon-char('arrow-down');
CSS: icon-arrow-left
Sass: icon-char('arrow-left');
CSS: icon-arrow-right
Sass: icon-char('arrow-right');
CSS: icon-arrow-up
Sass: icon-char('arrow-up');
CSS: icon-attachment
Sass: icon-char('attachment');
CSS: icon-backup
Sass: icon-char('backup');
CSS: icon-bin
Sass: icon-char('bin');
CSS: icon-calendar
Sass: icon-char('calendar');
CSS: icon-cancel
Sass: icon-char('cancel');
CSS: icon-check-mark
Sass: icon-char('check-mark');
CSS: icon-check-mark-2-circle
Sass: icon-char('check-mark-2-circle');
CSS: icon-chevron-normal-down
Sass: icon-char('chevron-normal-down');
CSS: icon-chevron-normal-left
Sass: icon-char('chevron-normal-left');
CSS: icon-chevron-normal-right
Sass: icon-char('chevron-normal-right');
CSS: icon-chevron-normal-up
Sass: icon-char('chevron-normal-up');
CSS: icon-chevron-flat-down
Sass: icon-char('chevron-flat-down');
CSS: icon-chevron-flat-left
Sass: icon-char('chevron-flat-left');
CSS: icon-chevron-flat-right
Sass: icon-char('chevron-flat-right');
CSS: icon-chevron-flat-up
Sass: icon-char('chevron-flat-up');
CSS: icon-clock
Sass: icon-char('clock');
CSS: icon-close
Sass: icon-char('close');
CSS: icon-download
Sass: icon-char('download');
CSS: icon-download-cloud
Sass: icon-char('download-cloud');
CSS: icon-edit
Sass: icon-char('edit');
CSS: icon-exclamation-mark-circle
Sass: icon-char('exclamation-mark-circle');
CSS: icon-flag
Sass: icon-char('flag');
CSS: icon-folder-new
Sass: icon-char('folder-new');
CSS: icon-folder-video
Sass: icon-char('folder-video');
CSS: icon-forward
Sass: icon-char('forward');
CSS: icon-forward-filled
Sass: icon-char('forward-filled');
CSS: icon-forward-message
Sass: icon-char('forward-message');
CSS: icon-forward-message-2
Sass: icon-char('forward-message-2');
CSS: icon-fullscreen-enter
Sass: icon-char('fullscreen-enter');
CSS: icon-fullscreen-enter-2
Sass: icon-char('fullscreen-enter-2');
CSS: icon-fullscreen-leave
Sass: icon-char('fullscreen-leave');
CSS: icon-fullscreen-leave-2
Sass: icon-char('fullscreen-leave-2');
CSS: icon-go-to-end
Sass: icon-char('go-to-end');
CSS: icon-go-to-end-filled
Sass: icon-char('go-to-end-filled');
CSS: icon-go-to-start
Sass: icon-char('go-to-start');
CSS: icon-go-to-start-filled
Sass: icon-char('go-to-start-filled');
CSS: icon-group
Sass: icon-char('group');
CSS: icon-heart
Sass: icon-char('heart');
CSS: icon-home
Sass: icon-char('home');
CSS: icon-hourglass
Sass: icon-char('hourglass');
CSS: icon-information-circle
Sass: icon-char('information-circle');
CSS: icon-key
Sass: icon-char('key');
CSS: icon-link
Sass: icon-char('link');
CSS: icon-lock
Sass: icon-char('lock');
CSS: icon-menu
Sass: icon-char('menu');
CSS: icon-message
Sass: icon-char('message');
CSS: icon-minus
Sass: icon-char('minus');
CSS: icon-more
Sass: icon-char('more');
CSS: icon-new
Sass: icon-char('new');
CSS: icon-okay
Sass: icon-char('okay');
CSS: icon-pause
Sass: icon-char('pause');
CSS: icon-pause-filled
Sass: icon-char('pause-filled');
CSS: icon-person
Sass: icon-char('person');
CSS: icon-play
Sass: icon-char('play');
CSS: icon-play-filled
Sass: icon-char('play-filled');
CSS: icon-plus
Sass: icon-char('plus');
CSS: icon-question-mark-circle
Sass: icon-char('question-mark-circle');
CSS: icon-record
Sass: icon-char('record');
CSS: icon-record-filled
Sass: icon-char('record-filled');
CSS: icon-rename
Sass: icon-char('rename');
CSS: icon-replay
Sass: icon-char('replay');
CSS: icon-reply-message
Sass: icon-char('reply-message');
CSS: icon-reply-message-2
Sass: icon-char('reply-message-2');
CSS: icon-reply-message-all
Sass: icon-char('reply-message-all');
CSS: icon-reply-message-all-2
Sass: icon-char('reply-message-all-2');
CSS: icon-retry
Sass: icon-char('retry');
CSS: icon-rewind
Sass: icon-char('rewind');
CSS: icon-rewind-filled
Sass: icon-char('rewind-filled');
CSS: icon-save
Sass: icon-char('save');
CSS: icon-save-2
Sass: icon-char('save-2');
CSS: icon-save-3
Sass: icon-char('save-3');
CSS: icon-search
Sass: icon-char('search');
CSS: icon-settings
Sass: icon-char('settings');
CSS: icon-shopping-trolley
Sass: icon-char('shopping-trolley');
CSS: icon-speech-bubble
Sass: icon-char('speech-bubble');
CSS: icon-standby
Sass: icon-char('standby');
CSS: icon-star
Sass: icon-char('star');
CSS: icon-stop
Sass: icon-char('stop');
CSS: icon-stop-filled
Sass: icon-char('stop-filled');
CSS: icon-synchronise
Sass: icon-char('synchronise');
CSS: icon-thumb-up
Sass: icon-char('thumb-up');
CSS: icon-upload
Sass: icon-char('upload');
CSS: icon-upload-cloud
Sass: icon-char('upload-cloud');
CSS: icon-volume-fortissimo
Sass: icon-char('volume-fortissimo');
CSS: icon-volume-forte
Sass: icon-char('volume-forte');
CSS: icon-volume-piano
Sass: icon-char('volume-piano');
CSS: icon-volume-pianissimo
Sass: icon-char('volume-pianissimo');
CSS: icon-volume-mute
Sass: icon-char('volume-mute');
CSS: icon-warning
Sass: icon-char('warning');
CSS: icon-zoom-in
Sass: icon-char('zoom-in');
CSS: icon-zoom-out
Sass: icon-char('zoom-out');
CSS: icon-suitcase
Sass: icon-char('suitcase');
CSS: icon-ambulance
Sass: icon-char('ambulance');
CSS: icon-ambulance-2
Sass: icon-char('ambulance-2');
CSS: icon-van
Sass: icon-char('van');
CSS: icon-delivery
Sass: icon-char('delivery');
CSS: icon-delivery-2
Sass: icon-char('delivery-2');
CSS: icon-applications
Sass: icon-char('applications');
CSS: icon-assistant
Sass: icon-char('assistant');
CSS: icon-call-centre
Sass: icon-char('call-centre');
CSS: icon-bill
Sass: icon-char('bill');
CSS: icon-child-protection
Sass: icon-char('child-protection');
CSS: icon-coins
Sass: icon-char('coins');
CSS: icon-compass
Sass: icon-char('compass');
CSS: icon-mobile-phone
Sass: icon-char('mobile-phone');
CSS: icon-smartphone
Sass: icon-char('smartphone');
CSS: icon-tablet
Sass: icon-char('tablet');
CSS: icon-laptop
Sass: icon-char('laptop');
CSS: icon-computer
Sass: icon-char('computer');
CSS: icon-workstation
Sass: icon-char('workstation');
CSS: icon-credit-card
Sass: icon-char('credit-card');
CSS: icon-directory
Sass: icon-char('directory');
CSS: icon-document
Sass: icon-char('document');
CSS: icon-document-new
Sass: icon-char('document-new');
CSS: icon-document-excel
Sass: icon-char('document-excel');
CSS: icon-document-powerpoint
Sass: icon-char('document-powerpoint');
CSS: icon-document-word
Sass: icon-char('document-word');
CSS: icon-document-pdf
Sass: icon-char('document-pdf');
CSS: icon-document-txt
Sass: icon-char('document-txt');
CSS: icon-document-zip
Sass: icon-char('document-zip');
CSS: icon-document-code
Sass: icon-char('document-code');
CSS: icon-e-mail
Sass: icon-char('e-mail');
CSS: icon-film-camera
Sass: icon-char('film-camera');
CSS: icon-film-camera-2
Sass: icon-char('film-camera-2');
CSS: icon-film-camera-3
Sass: icon-char('film-camera-3');
CSS: icon-film-reel
Sass: icon-char('film-reel');
CSS: icon-folder
Sass: icon-char('folder');
CSS: icon-football
Sass: icon-char('football');
CSS: icon-game
Sass: icon-char('game');
CSS: icon-gaming
Sass: icon-char('gaming');
CSS: icon-globe
Sass: icon-char('globe');
CSS: icon-handset
Sass: icon-char('handset');
CSS: icon-headphone
Sass: icon-char('headphone');
CSS: icon-headset
Sass: icon-char('headset');
CSS: icon-index-card
Sass: icon-char('index-card');
CSS: icon-leaf
Sass: icon-char('leaf');
CSS: icon-lifesaver
Sass: icon-char('lifesaver');
CSS: icon-modem-wlan
Sass: icon-char('modem-wlan');
CSS: icon-movie
Sass: icon-char('movie');
CSS: icon-movie-2
Sass: icon-char('movie-2');
CSS: icon-movie-3
Sass: icon-char('movie-3');
CSS: icon-svod
Sass: icon-char('svod');
CSS: icon-music
Sass: icon-char('music');
CSS: icon-navigation
Sass: icon-char('navigation');
CSS: icon-network
Sass: icon-char('network');
CSS: icon-office
Sass: icon-char('office');
CSS: icon-phone-basic
Sass: icon-char('phone-basic');
CSS: icon-phone-pro
Sass: icon-char('phone-pro');
CSS: icon-photo
Sass: icon-char('photo');
CSS: icon-photo-camera
Sass: icon-char('photo-camera');
CSS: icon-postcard
Sass: icon-char('postcard');
CSS: icon-printer
Sass: icon-char('printer');
CSS: icon-radio
Sass: icon-char('radio');
CSS: icon-rss-feed
Sass: icon-char('rss-feed');
CSS: icon-wlan
Sass: icon-char('wlan');
CSS: icon-signal
Sass: icon-char('signal');
CSS: icon-server
Sass: icon-char('server');
CSS: icon-sms
Sass: icon-char('sms');
CSS: icon-translation
Sass: icon-char('translation');
CSS: icon-transmitter
Sass: icon-char('transmitter');
CSS: icon-tv
Sass: icon-char('tv');
CSS: icon-tv-hd
Sass: icon-char('tv-hd');
CSS: icon-tv-2-0
Sass: icon-char('tv-2-0');
CSS: icon-video-tape
Sass: icon-char('video-tape');
CSS: icon-video-tape-2
Sass: icon-char('video-tape-2');
CSS: icon-wearable-watch
Sass: icon-char('wearable-watch');
CSS: icon-weather-cloud
Sass: icon-char('weather-cloud');
CSS: icon-weather-rain
Sass: icon-char('weather-rain');
CSS: icon-weather-rain-unsettled
Sass: icon-char('weather-rain-unsettled');
CSS: icon-weather-snow
Sass: icon-char('weather-snow');
CSS: icon-weather-snow-unsettled
Sass: icon-char('weather-snow-unsettled');
CSS: icon-weather-storm
Sass: icon-char('weather-storm');
CSS: icon-weather-storm-unsettled
Sass: icon-char('weather-storm-unsettled');
CSS: icon-weather-sun
Sass: icon-char('weather-sun');
CSS: icon-weather-sun-unsettled
Sass: icon-char('weather-sun-unsettled');
CSS: icon-inbox-1
Sass: icon-char('inbox-1');
CSS: icon-drafts-3
Sass: icon-char('drafts-3');
CSS: icon-sent-6
Sass: icon-char('sent-6');
CSS: icon-sent-2
Sass: icon-char('sent-2');
CSS: icon-inbox-2
Sass: icon-char('inbox-2');
CSS: icon-drafts
Sass: icon-char('drafts');
CSS: icon-sent
Sass: icon-char('sent');
CSS: icon-sent-3
Sass: icon-char('sent-3');
CSS: icon-inbox-3
Sass: icon-char('inbox-3');
CSS: icon-drafts-2
Sass: icon-char('drafts-2');
CSS: icon-sent-5
Sass: icon-char('sent-5');
CSS: icon-sent-4
Sass: icon-char('sent-4');
CSS: icon-website
Sass: icon-char('website');
CSS: icon-website-2
Sass: icon-char('website-2');
CSS: icon-heart-filled
Sass: icon-char('heart-filled');
CSS: icon-exclamation-mark
Sass: icon-char('exclamation-mark');
CSS: icon-share
Sass: icon-char('share');
CSS: icon-chevron-small-down
Sass: icon-char('chevron-small-down');
CSS: icon-chevron-small-up
Sass: icon-char('chevron-small-up');
CSS: icon-chevron-small-left
Sass: icon-char('chevron-small-left');
CSS: icon-chevron-small-right
Sass: icon-char('chevron-small-right');
CSS: icon-clear-circle
Sass: icon-char('clear-circle');
CSS: icon-server
Sass: icon-char('server');
CSS: icon-cd
Sass: icon-char('cd');
CSS: icon-bundle
Sass: icon-char('bundle');
CSS: icon-database
Sass: icon-char('database');
CSS: icon-firewall
Sass: icon-char('firewall');
CSS: icon-proxy-server
Sass: icon-char('proxy-server');
CSS: icon-set-top-box
Sass: icon-char('set-top-box');
CSS: icon-puzzle
Sass: icon-char('puzzle');
CSS: icon-skull
Sass: icon-char('skull');
CSS: icon-fire
Sass: icon-char('fire');
CSS: icon-setting
Sass: icon-char('setting');
CSS: icon-present
Sass: icon-char('present');
CSS: icon-certificate
Sass: icon-char('certificate');
CSS: icon-waypointer
Sass: icon-char('waypointer');
CSS: icon-eye
Sass: icon-char('eye');
CSS: icon-eye-shut
Sass: icon-char('eye-shut');
CSS: icon-runtime
Sass: icon-char('runtime');
CSS: icon-list
Sass: icon-char('list');
CSS: icon-topology
Sass: icon-char('topology');
CSS: icon-blueprint
Sass: icon-char('blueprint');
CSS: icon-map-pointer
Sass: icon-char('map-pointer');
CSS: icon-console
Sass: icon-char('console');
CSS: icon-reboot
Sass: icon-char('reboot');
CSS: icon-reprovision
Sass: icon-char('reprovision');
CSS: icon-speech-bubble-filled
Sass: icon-char('speech-bubble-filled');
CSS: icon-star-filled
Sass: icon-char('star-filled');
CSS: icon-gateway
Sass: icon-char('gateway');
CSS: icon-flash
Sass: icon-char('flash');
CSS: icon-rocket
Sass: icon-char('rocket');
CSS: icon-robot-neutral
Sass: icon-char('robot-neutral');
CSS: icon-robot-happy
Sass: icon-char('robot-happy');
CSS: icon-robot-smile
Sass: icon-char('robot-smile');
CSS: icon-robot-laughing
Sass: icon-char('robot-laughing');
CSS: icon-robot-wink-1
Sass: icon-char('robot-wink-1');
CSS: icon-robot-relaxed
Sass: icon-char('robot-relaxed');
CSS: icon-robot-surprized
Sass: icon-char('robot-surprized');
CSS: icon-robot-confused
Sass: icon-char('robot-confused');
CSS: icon-robot-sad
Sass: icon-char('robot-sad');
CSS: icon-robot-broken
Sass: icon-char('robot-broken');
CSS: icon-umbrella
Sass: icon-char('umbrella');
CSS: icon-security
Sass: icon-char('security');
CSS: icon-routed-network
Sass: icon-char('routed-network');
CSS: icon-ip-sets
Sass: icon-char('ip-sets');
CSS: icon-resource-pool
Sass: icon-char('resource-pool');
CSS: icon-edge
Sass: icon-char('edge');
CSS: icon-switch
Sass: icon-char('switch');
CSS: icon-processor
Sass: icon-char('processor');
CSS: icon-distributed-network
Sass: icon-char('distributed-network');
CSS: icon-legacy-network
Sass: icon-char('legacy-network');
CSS: icon-star-half
Sass: icon-char('star-half');
CSS: icon-filter
Sass: icon-char('filter');
CSS: icon-idcard
Sass: icon-char('idcard');
CSS: icon-passport
Sass: icon-char('passport');
CSS: icon-thumb-up-filled
Sass: icon-char('thumb-up-filled');
CSS: icon-tag
Sass: icon-char('tag');
CSS: icon-bell
Sass: icon-char('bell');
CSS: icon-flash-multiple
Sass: icon-char('flash-multiple');
CSS: icon-lightbulb
Sass: icon-char('lightbulb');
CSS: icon-devices
Sass: icon-char('devices');
CSS: icon-smartphones-multiple
Sass: icon-char('smartphones-multiple');
CSS: icon-document-indesign
Sass: icon-char('document-indesign');
CSS: icon-document-illustrator
Sass: icon-char('document-illustrator');
CSS: icon-document-onenote
Sass: icon-char('document-onenote');
CSS: icon-document-eps
Sass: icon-char('document-eps');
CSS: icon-document-photoshop
Sass: icon-char('document-photoshop');
CSS: icon-document-visio
Sass: icon-char('document-visio');
CSS: icon-document-publisher
Sass: icon-char('document-publisher');
CSS: icon-document-unknowndoc
Sass: icon-char('document-unknowndoc');
CSS: icon-shop
Sass: icon-char('shop');
CSS: icon-scissors
Sass: icon-char('scissors');
CSS: icon-battery
Sass: icon-char('battery');
CSS: icon-battery-3
Sass: icon-char('battery-3');
CSS: icon-battery-2
Sass: icon-char('battery-2');
CSS: icon-battery-1
Sass: icon-char('battery-1');
CSS: icon-battery-0
Sass: icon-char('battery-0');
CSS: icon-battery-empty
Sass: icon-char('battery-empty');
CSS: icon-mouse
Sass: icon-char('mouse');
CSS: icon-pointer
Sass: icon-char('pointer');
CSS: icon-realmouse
Sass: icon-char('realmouse');
CSS: icon-bug
Sass: icon-char('bug');
CSS: icon-privacy
Sass: icon-char('privacy');
CSS: icon-ip
Sass: icon-char('ip');
CSS: icon-patch
Sass: icon-char('patch');
CSS: icon-microphone
Sass: icon-char('microphone');
CSS: icon-microphone-filled
Sass: icon-char('microphone-filled');
CSS: icon-handset-up
Sass: icon-char('handset-up');
CSS: icon-handset-up-stroke
Sass: icon-char('handset-up-stroke');
CSS: icon-handset-stroke
Sass: icon-char('handset-stroke');
CSS: icon-software
Sass: icon-char('software');
CSS: icon-dynamic-storage
Sass: icon-char('dynamic-storage');
CSS: icon-wireless-data
Sass: icon-char('wireless-data');
CSS: icon-wireless-voice
Sass: icon-char('wireless-voice');
CSS: icon-lips
Sass: icon-char('lips');
CSS: icon-flag-filled
Sass: icon-char('flag-filled');
CSS: icon-alarmclock
Sass: icon-char('alarmclock');
CSS: icon-copy
Sass: icon-char('copy');
CSS: icon-paste
Sass: icon-char('paste');
CSS: icon-plus-box
Sass: icon-char('plus-box');
CSS: icon-minus-box
Sass: icon-char('minus-box');
CSS: icon-service
Sass: icon-char('service');
CSS: icon-business-phone
Sass: icon-char('business-phone');
CSS: icon-accessibility
Sass: icon-char('accessibility');
CSS: icon-agile-process
Sass: icon-char('agile-process');
CSS: icon-airplaine
Sass: icon-char('airplaine');
CSS: icon-alarmcall
Sass: icon-char('alarmcall');
CSS: icon-auster
Sass: icon-char('auster');
CSS: icon-barcode
Sass: icon-char('barcode');
CSS: icon-bed
Sass: icon-char('bed');
CSS: icon-bee
Sass: icon-char('bee');
CSS: icon-beer
Sass: icon-char('beer');
CSS: icon-biker
Sass: icon-char('biker');
CSS: icon-blow-fish
Sass: icon-char('blow-fish');
CSS: icon-book
Sass: icon-char('book');
CSS: icon-broom
Sass: icon-char('broom');
CSS: icon-bubbles
Sass: icon-char('bubbles');
CSS: icon-bus
Sass: icon-char('bus');
CSS: icon-business-network
Sass: icon-char('business-network');
CSS: icon-buyback
Sass: icon-char('buyback');
CSS: icon-bicycle
Sass: icon-char('bicycle');
CSS: icon-cablecar
Sass: icon-char('cablecar');
CSS: icon-calculator
Sass: icon-char('calculator');
CSS: icon-call-log
Sass: icon-char('call-log');
CSS: icon-callfilter
Sass: icon-char('callfilter');
CSS: icon-car-pooling-2
Sass: icon-char('car-pooling-2');
CSS: icon-car-pooling
Sass: icon-char('car-pooling');
CSS: icon-car-sharing
Sass: icon-char('car-sharing');
CSS: icon-car
Sass: icon-char('car');
CSS: icon-carabiner
Sass: icon-char('carabiner');
CSS: icon-cardreader
Sass: icon-char('cardreader');
CSS: icon-care
Sass: icon-char('care');
CSS: icon-cashdesk
Sass: icon-char('cashdesk');
CSS: icon-ccserver
Sass: icon-char('ccserver');
CSS: icon-chairlift
Sass: icon-char('chairlift');
CSS: icon-child-protection-2
Sass: icon-char('child-protection-2');
CSS: icon-cocktail
Sass: icon-char('cocktail');
CSS: icon-coffee
Sass: icon-char('coffee');
CSS: icon-combox
Sass: icon-char('combox');
CSS: icon-computer-monitoring
Sass: icon-char('computer-monitoring');
CSS: icon-copier
Sass: icon-char('copier');
CSS: icon-crab
Sass: icon-char('crab');
CSS: icon-crime
Sass: icon-char('crime');
CSS: icon-cross
Sass: icon-char('cross');
CSS: icon-crowd
Sass: icon-char('crowd');
CSS: icon-crown
Sass: icon-char('crown');
CSS: icon-cruiser
Sass: icon-char('cruiser');
CSS: icon-dargebotene-hand
Sass: icon-char('dargebotene-hand');
CSS: icon-desktopsharing
Sass: icon-char('desktopsharing');
CSS: icon-diagram-2
Sass: icon-char('diagram-2');
CSS: icon-diagram
Sass: icon-char('diagram');
CSS: icon-dial
Sass: icon-char('dial');
CSS: icon-digihome
Sass: icon-char('digihome');
CSS: icon-discjockey
Sass: icon-char('discjockey');
CSS: icon-doctor
Sass: icon-char('doctor');
CSS: icon-driverless-car
Sass: icon-char('driverless-car');
CSS: icon-drone
Sass: icon-char('drone');
CSS: icon-ebike-2
Sass: icon-char('ebike-2');
CSS: icon-ebike
Sass: icon-char('ebike');
CSS: icon-ecar
Sass: icon-char('ecar');
CSS: icon-edge-2
Sass: icon-char('edge-2');
CSS: icon-elevator
Sass: icon-char('elevator');
CSS: icon-emotorcycle-2
Sass: icon-char('emotorcycle-2');
CSS: icon-emotorcycle
Sass: icon-char('emotorcycle');
CSS: icon-esim
Sass: icon-char('esim');
CSS: icon-ethernet
Sass: icon-char('ethernet');
CSS: icon-exit
Sass: icon-char('exit');
CSS: icon-factory
Sass: icon-char('factory');
CSS: icon-faultclearing
Sass: icon-char('faultclearing');
CSS: icon-fiber
Sass: icon-char('fiber');
CSS: icon-firebrigade
Sass: icon-char('firebrigade');
CSS: icon-fish
Sass: icon-char('fish');
CSS: icon-fitness
Sass: icon-char('fitness');
CSS: icon-flag-filled-wind
Sass: icon-char('flag-filled-wind');
CSS: icon-flag-wind
Sass: icon-char('flag-wind');
CSS: icon-fleet-management
Sass: icon-char('fleet-management');
CSS: icon-food
Sass: icon-char('food');
CSS: icon-freighter
Sass: icon-char('freighter');
CSS: icon-garderobe
Sass: icon-char('garderobe');
CSS: icon-gears-three
Sass: icon-char('gears-three');
CSS: icon-gears
Sass: icon-char('gears');
CSS: icon-globe-key
Sass: icon-char('globe-key');
CSS: icon-goggles-3d
Sass: icon-char('goggles-3d');
CSS: icon-green-laptop
Sass: icon-char('green-laptop');
CSS: icon-green-mobile
Sass: icon-char('green-mobile');
CSS: icon-hd-voice
Sass: icon-char('hd-voice');
CSS: icon-helicopter
Sass: icon-char('helicopter');
CSS: icon-helpline
Sass: icon-char('helpline');
CSS: icon-hiking
Sass: icon-char('hiking');
CSS: icon-home-ok
Sass: icon-char('home-ok');
CSS: icon-hospital-building
Sass: icon-char('hospital-building');
CSS: icon-hospital
Sass: icon-char('hospital');
CSS: icon-hotspot-localprodukt
Sass: icon-char('hotspot-localprodukt');
CSS: icon-hybrid-drive
Sass: icon-char('hybrid-drive');
CSS: icon-infinity
Sass: icon-char('infinity');
CSS: icon-informationint
Sass: icon-char('informationint');
CSS: icon-insert-banknote
Sass: icon-char('insert-banknote');
CSS: icon-insertcoin
Sass: icon-char('insertcoin');
CSS: icon-internet-of-things
Sass: icon-char('internet-of-things');
CSS: icon-ip-telephone
Sass: icon-char('ip-telephone');
CSS: icon-jelly-fish
Sass: icon-char('jelly-fish');
CSS: icon-juggler
Sass: icon-char('juggler');
CSS: icon-keyboard
Sass: icon-char('keyboard');
CSS: icon-laptop-internet
Sass: icon-char('laptop-internet');
CSS: icon-living-room
Sass: icon-char('living-room');
CSS: icon-lowradiation
Sass: icon-char('lowradiation');
CSS: icon-mail-storge
Sass: icon-char('mail-storge');
CSS: icon-mediabox
Sass: icon-char('mediabox');
CSS: icon-megaphone
Sass: icon-char('megaphone');
CSS: icon-mobile-buyback-2
Sass: icon-char('mobile-buyback-2');
CSS: icon-mobile-buyback-3
Sass: icon-char('mobile-buyback-3');
CSS: icon-mobile-buyback
Sass: icon-char('mobile-buyback');
CSS: icon-mobile-internet
Sass: icon-char('mobile-internet');
CSS: icon-mobile-laptop
Sass: icon-char('mobile-laptop');
CSS: icon-mobile-message
Sass: icon-char('mobile-message');
CSS: icon-mobile-payment
Sass: icon-char('mobile-payment');
CSS: icon-mobilecall
Sass: icon-char('mobilecall');
CSS: icon-mobileuser
Sass: icon-char('mobileuser');
CSS: icon-modem
Sass: icon-char('modem');
CSS: icon-motorcycle-2
Sass: icon-char('motorcycle-2');
CSS: icon-motorcycle
Sass: icon-char('motorcycle');
CSS: icon-mountainbiker
Sass: icon-char('mountainbiker');
CSS: icon-music-app-2
Sass: icon-char('music-app-2');
CSS: icon-music-app
Sass: icon-char('music-app');
CSS: icon-mycloud
Sass: icon-char('mycloud');
CSS: icon-network-3g
Sass: icon-char('network-3g');
CSS: icon-network-4g
Sass: icon-char('network-4g');
CSS: icon-network-4gplus
Sass: icon-char('network-4gplus');
CSS: icon-network-5g
Sass: icon-char('network-5g');
CSS: icon-network-improvement
Sass: icon-char('network-improvement');
CSS: icon-newspaper
Sass: icon-char('newspaper');
CSS: icon-nfc
Sass: icon-char('nfc');
CSS: icon-nordic-combined
Sass: icon-char('nordic-combined');
CSS: icon-notice
Sass: icon-char('notice');
CSS: icon-nut-and-bolt
Sass: icon-char('nut-and-bolt');
CSS: icon-online-storge
Sass: icon-char('online-storge');
CSS: icon-parking-garage
Sass: icon-char('parking-garage');
CSS: icon-parking-meter
Sass: icon-char('parking-meter');
CSS: icon-parking-2
Sass: icon-char('parking-2');
CSS: icon-parking
Sass: icon-char('parking');
CSS: icon-pbx
Sass: icon-char('pbx');
CSS: icon-personal-cloud
Sass: icon-char('personal-cloud');
CSS: icon-pet-bottle
Sass: icon-char('pet-bottle');
CSS: icon-pharmacy
Sass: icon-char('pharmacy');
CSS: icon-phone-security
Sass: icon-char('phone-security');
CSS: icon-phonecordless
Sass: icon-char('phonecordless');
CSS: icon-piggy-bank
Sass: icon-char('piggy-bank');
CSS: icon-podium
Sass: icon-char('podium');
CSS: icon-police
Sass: icon-char('police');
CSS: icon-power
Sass: icon-char('power');
CSS: icon-prepaid-mobile
Sass: icon-char('prepaid-mobile');
CSS: icon-presentation
Sass: icon-char('presentation');
CSS: icon-ray
Sass: icon-char('ray');
CSS: icon-relax
Sass: icon-char('relax');
CSS: icon-remote-control
Sass: icon-char('remote-control');
CSS: icon-restaurant
Sass: icon-char('restaurant');
CSS: icon-robot-wink-2
Sass: icon-char('robot-wink-2');
CSS: icon-runner
Sass: icon-char('runner');
CSS: icon-safety
Sass: icon-char('safety');
CSS: icon-sailer
Sass: icon-char('sailer');
CSS: icon-satellitedish
Sass: icon-char('satellitedish');
CSS: icon-satellite
Sass: icon-char('satellite');
CSS: icon-scale
Sass: icon-char('scale');
CSS: icon-screen-design
Sass: icon-char('screen-design');
CSS: icon-searchtext
Sass: icon-char('searchtext');
CSS: icon-securitycamera
Sass: icon-char('securitycamera');
CSS: icon-selfcheckout
Sass: icon-char('selfcheckout');
CSS: icon-server-small
Sass: icon-char('server-small');
CSS: icon-shakehands
Sass: icon-char('shakehands');
CSS: icon-shower
Sass: icon-char('shower');
CSS: icon-silence
Sass: icon-char('silence');
CSS: icon-simkarte
Sass: icon-char('simkarte');
CSS: icon-ski-biathlon
Sass: icon-char('ski-biathlon');
CSS: icon-ski-cross-country
Sass: icon-char('ski-cross-country');
CSS: icon-ski-freestyle
Sass: icon-char('ski-freestyle');
CSS: icon-ski-jumping
Sass: icon-char('ski-jumping');
CSS: icon-ski-racer
Sass: icon-char('ski-racer');
CSS: icon-ski-telemarking
Sass: icon-char('ski-telemarking');
CSS: icon-ski
Sass: icon-char('ski');
CSS: icon-small-meeting
Sass: icon-char('small-meeting');
CSS: icon-smoking
Sass: icon-char('smoking');
CSS: icon-snail
Sass: icon-char('snail');
CSS: icon-snow
Sass: icon-char('snow');
CSS: icon-snowboard
Sass: icon-char('snowboard');
CSS: icon-socialnetwork
Sass: icon-char('socialnetwork');
CSS: icon-sos
Sass: icon-char('sos');
CSS: icon-spam
Sass: icon-char('spam');
CSS: icon-spot
Sass: icon-char('spot');
CSS: icon-squid
Sass: icon-char('squid');
CSS: icon-stairs
Sass: icon-char('stairs');
CSS: icon-standing-meeting
Sass: icon-char('standing-meeting');
CSS: icon-station
Sass: icon-char('station');
CSS: icon-steeringwheel
Sass: icon-char('steeringwheel');
CSS: icon-strong-arm
Sass: icon-char('strong-arm');
CSS: icon-svod-2
Sass: icon-char('svod-2');
CSS: icon-swiss-1
Sass: icon-char('swiss-1');
CSS: icon-swiss-2
Sass: icon-char('swiss-2');
CSS: icon-switchboarding
Sass: icon-char('switchboarding');
CSS: icon-switchoff
Sass: icon-char('switchoff');
CSS: icon-taxcard
Sass: icon-char('taxcard');
CSS: icon-taxcardin
Sass: icon-char('taxcardin');
CSS: icon-taxcardout
Sass: icon-char('taxcardout');
CSS: icon-teddybear
Sass: icon-char('teddybear');
CSS: icon-telecommunication
Sass: icon-char('telecommunication');
CSS: icon-tent
Sass: icon-char('tent');
CSS: icon-thermometer
Sass: icon-char('thermometer');
CSS: icon-toilet-f
Sass: icon-char('toilet-f');
CSS: icon-toilet-m
Sass: icon-char('toilet-m');
CSS: icon-toilet-s
Sass: icon-char('toilet-s');
CSS: icon-touchdown
Sass: icon-char('touchdown');
CSS: icon-trafficinfo
Sass: icon-char('trafficinfo');
CSS: icon-trailrunner
Sass: icon-char('trailrunner');
CSS: icon-train
Sass: icon-char('train');
CSS: icon-tv-guide
Sass: icon-char('tv-guide');
CSS: icon-uhd-tv
Sass: icon-char('uhd-tv');
CSS: icon-usb
Sass: icon-char('usb');
CSS: icon-user-presence
Sass: icon-char('user-presence');
CSS: icon-van-fire-2
Sass: icon-char('van-fire-2');
CSS: icon-van-fire
Sass: icon-char('van-fire');
CSS: icon-ventilator
Sass: icon-char('ventilator');
CSS: icon-video-call-laptop
Sass: icon-char('video-call-laptop');
CSS: icon-video-call-mobile
Sass: icon-char('video-call-mobile');
CSS: icon-virus
Sass: icon-char('virus');
CSS: icon-waitingroom
Sass: icon-char('waitingroom');
CSS: icon-wearable-glasses
Sass: icon-char('wearable-glasses');
CSS: icon-webcam
Sass: icon-char('webcam');
CSS: icon-wheelchair
Sass: icon-char('wheelchair');
CSS: icon-wireless-charging
Sass: icon-char('wireless-charging');
CSS: icon-qr-code
Sass: icon-char('qr-code');
*/
.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 {
transform: scale(-1, 1);
}
.icon--flip-vertical {
transform: scale(1, -1);
}
.icon--flip-horizontal-vertical {
transform: scale(-1, -1);
}
.icon--excel {
color: #008236;
}
.icon--powerpoint {
color: #e86416;
}
.icon--word {
color: #1781e3;
}
.icon--pdf {
color: #d12;
}
.icon-001-account::before,
.icon-account::before {
content: "";
}
.icon-002-arrow-down::before,
.icon-arrow-down::before {
content: "";
}
.icon-003-arrow-left::before,
.icon-arrow-left::before {
content: "";
}
.icon-004-arrow-right::before,
.icon-arrow-right::before {
content: "";
}
.icon-005-arrow-up::before,
.icon-arrow-up::before {
content: "";
}
.icon-006-attachment::before,
.icon-attachment::before {
content: "";
}
.icon-007-backup::before,
.icon-backup::before {
content: "";
}
.icon-008-bin::before,
.icon-bin::before {
content: "";
}
.icon-009-calendar::before,
.icon-calendar::before {
content: "";
}
.icon-010-cancel::before,
.icon-cancel::before {
content: "";
}
.icon-011-check-mark::before,
.icon-check-mark::before {
content: "";
}
.icon-012-check-mark-2-circle::before,
.icon-check-mark-2-circle::before {
content: "";
}
.icon-012-check-mark-circle::before,
.icon-check-mark-circle::before {
content: "";
}
.icon-013-chevron-normal-down::before,
.icon-chevron-normal-down::before {
content: "";
}
.icon-013-chevron-down::before,
.icon-chevron-down::before {
content: "";
}
.icon-014-chevron-normal-left::before,
.icon-chevron-normal-left::before {
content: "";
}
.icon-014-chevron-left::before,
.icon-chevron-left::before {
content: "";
}
.icon-015-chevron-normal-right::before,
.icon-chevron-normal-right::before {
content: "";
}
.icon-015-chevron-right::before,
.icon-chevron-right::before {
content: "";
}
.icon-016-chevron-normal-up::before,
.icon-chevron-normal-up::before {
content: "";
}
.icon-016-chevron-up::before,
.icon-chevron-up::before {
content: "";
}
.icon-017-chevron-flat-down::before,
.icon-chevron-flat-down::before {
content: "";
}
.icon-018-chevron-flat-left::before,
.icon-chevron-flat-left::before {
content: "";
}
.icon-019-chevron-flat-right::before,
.icon-chevron-flat-right::before {
content: "";
}
.icon-020-chevron-flat-up::before,
.icon-chevron-flat-up::before {
content: "";
}
.icon-021-clock::before,
.icon-clock::before {
content: "";
}
.icon-022-close::before,
.icon-close::before {
content: "";
}
.icon-023-download::before,
.icon-download::before {
content: "";
}
.icon-024-download-cloud::before,
.icon-download-cloud::before {
content: "";
}
.icon-025-edit::before,
.icon-edit::before {
content: "";
}
.icon-026-exclamation-mark-circle::before,
.icon-exclamation-mark-circle::before {
content: "";
}
.icon-027-flag::before,
.icon-flag::before {
content: "";
}
.icon-028-folder-new::before,
.icon-folder-new::before {
content: "";
}
.icon-029-folder-video::before,
.icon-folder-video::before {
content: "";
}
.icon-030-forward::before,
.icon-forward::before {
content: "";
}
.icon-031-forward-filled::before,
.icon-forward-filled::before {
content: "";
}
.icon-032-forward-message::before,
.icon-forward-message::before {
content: "";
}
.icon-033-forward-message-2::before,
.icon-forward-message-2::before {
content: "";
}
.icon-034-fullscreen-enter::before,
.icon-fullscreen-enter::before {
content: "";
}
.icon-035-fullscreen-enter-2::before,
.icon-fullscreen-enter-2::before {
content: "";
}
.icon-036-fullscreen-leave::before,
.icon-fullscreen-leave::before {
content: "";
}
.icon-037-fullscreen-leave-2::before,
.icon-fullscreen-leave-2::before {
content: "";
}
.icon-038-go-to-end::before,
.icon-go-to-end::before {
content: "";
}
.icon-039-go-to-end-filled::before,
.icon-go-to-end-filled::before {
content: "";
}
.icon-040-go-to-start::before,
.icon-go-to-start::before {
content: "";
}
.icon-041-go-to-start-filled::before,
.icon-go-to-start-filled::before {
content: "";
}
.icon-042-group::before,
.icon-group::before {
content: "";
}
.icon-043-heart::before,
.icon-heart::before {
content: "";
}
.icon-044-home::before,
.icon-home::before {
content: "";
}
.icon-045-hourglass::before,
.icon-hourglass::before {
content: "";
}
.icon-046-information-circle::before,
.icon-information-circle::before {
content: "";
}
.icon-047-key::before,
.icon-key::before {
content: "";
}
.icon-048-link::before,
.icon-link::before {
content: "";
}
.icon-049-lock::before,
.icon-lock::before {
content: "";
}
.icon-050-menu::before,
.icon-menu::before {
content: "";
}
.icon-051-message::before,
.icon-message::before {
content: "";
}
.icon-052-minus::before,
.icon-minus::before {
content: "";
}
.icon-053-more::before,
.icon-more::before {
content: "";
}
.icon-054-new::before,
.icon-new::before {
content: "";
}
.icon-055-okay::before,
.icon-okay::before {
content: "";
}
.icon-056-pause::before,
.icon-pause::before {
content: "";
}
.icon-057-pause-filled::before,
.icon-pause-filled::before {
content: "";
}
.icon-058-person::before,
.icon-person::before {
content: "";
}
.icon-059-play::before,
.icon-play::before {
content: "";
}
.icon-060-play-filled::before,
.icon-play-filled::before {
content: "";
}
.icon-061-plus::before,
.icon-plus::before {
content: "";
}
.icon-062-question-mark-circle::before,
.icon-question-mark-circle::before {
content: "";
}
.icon-063-record::before,
.icon-record::before {
content: "";
}
.icon-064-record-filled::before,
.icon-record-filled::before {
content: "";
}
.icon-065-rename::before,
.icon-rename::before {
content: "";
}
.icon-066-replay::before,
.icon-replay::before {
content: "";
}
.icon-067-reply-message::before,
.icon-reply-message::before {
content: "";
}
.icon-068-reply-message-2::before,
.icon-reply-message-2::before {
content: "";
}
.icon-069-reply-message-all::before,
.icon-reply-message-all::before {
content: "";
}
.icon-070-reply-message-all-2::before,
.icon-reply-message-all-2::before {
content: "";
}
.icon-071-retry::before,
.icon-retry::before {
content: "";
}
.icon-072-rewind::before,
.icon-rewind::before {
content: "";
}
.icon-073-rewind-filled::before,
.icon-rewind-filled::before {
content: "";
}
.icon-074-save::before,
.icon-save::before {
content: "";
}
.icon-075-save-2::before,
.icon-save-2::before {
content: "";
}
.icon-076-save-3::before,
.icon-save-3::before {
content: "";
}
.icon-077-search::before,
.icon-search::before {
content: "";
}
.icon-078-settings::before,
.icon-settings::before {
content: "";
}
.icon-079-shopping-trolley::before,
.icon-shopping-trolley::before {
content: "";
}
.icon-080-speech-bubble::before,
.icon-speech-bubble::before {
content: "";
}
.icon-081-standby::before,
.icon-standby::before {
content: "";
}
.icon-082-star::before,
.icon-star::before {
content: "";
}
.icon-083-stop::before,
.icon-stop::before {
content: "";
}
.icon-084-stop-filled::before,
.icon-stop-filled::before {
content: "";
}
.icon-085-synchronise::before,
.icon-synchronise::before {
content: "";
}
.icon-086-thumb-up::before,
.icon-thumb-up::before {
content: "";
}
.icon-087-upload::before,
.icon-upload::before {
content: "";
}
.icon-088-upload-cloud::before,
.icon-upload-cloud::before {
content: "";
}
.icon-089-volume-fortissimo::before,
.icon-volume-fortissimo::before {
content: "";
}
.icon-090-volume-forte::before,
.icon-volume-forte::before {
content: "";
}
.icon-091-volume-piano::before,
.icon-volume-piano::before {
content: "";
}
.icon-092-volume-pianissimo::before,
.icon-volume-pianissimo::before {
content: "";
}
.icon-093-volume-mute::before,
.icon-volume-mute::before {
content: "";
}
.icon-094-warning::before,
.icon-warning::before {
content: "";
}
.icon-095-zoom-in::before,
.icon-zoom-in::before {
content: "";
}
.icon-096-zoom-out::before,
.icon-zoom-out::before {
content: "";
}
.icon-097-suitcase::before,
.icon-suitcase::before {
content: "";
}
.icon-098-ambulance::before,
.icon-ambulance::before {
content: "";
}
.icon-099-ambulance-2::before,
.icon-ambulance-2::before {
content: "";
}
.icon-100-van::before,
.icon-van::before {
content: "";
}
.icon-101-delivery::before,
.icon-delivery::before {
content: "";
}
.icon-102-delivery-2::before,
.icon-delivery-2::before {
content: "";
}
.icon-103-applications::before,
.icon-applications::before {
content: "";
}
.icon-104-assistant::before,
.icon-assistant::before {
content: "";
}
.icon-105-call-centre::before,
.icon-call-centre::before {
content: "";
}
.icon-106-bill::before,
.icon-bill::before {
content: "";
}
.icon-107-child-protection::before,
.icon-child-protection::before {
content: "";
}
.icon-108-coins::before,
.icon-coins::before {
content: "";
}
.icon-109-compass::before,
.icon-compass::before {
content: "";
}
.icon-110-mobile-phone::before,
.icon-mobile-phone::before {
content: "";
}
.icon-111-smartphone::before,
.icon-smartphone::before {
content: "";
}
.icon-112-tablet::before,
.icon-tablet::before {
content: "";
}
.icon-113-laptop::before,
.icon-laptop::before {
content: "";
}
.icon-114-computer::before,
.icon-computer::before {
content: "";
}
.icon-115-workstation::before,
.icon-workstation::before {
content: "";
}
.icon-116-credit-card::before,
.icon-credit-card::before {
content: "";
}
.icon-117-directory::before,
.icon-directory::before {
content: "";
}
.icon-118-document::before,
.icon-document::before {
content: "";
}
.icon-119-document-new::before,
.icon-document-new::before {
content: "";
}
.icon-120-document-excel::before,
.icon-document-excel::before {
content: "";
}
.icon-121-document-powerpoint::before,
.icon-document-powerpoint::before {
content: "";
}
.icon-122-document-word::before,
.icon-document-word::before {
content: "";
}
.icon-123-document-pdf::before,
.icon-document-pdf::before {
content: "";
}
.icon-124-document-txt::before,
.icon-document-txt::before {
content: "";
}
.icon-125-document-zip::before,
.icon-document-zip::before {
content: "";
}
.icon-126-document-code::before,
.icon-document-code::before {
content: "";
}
.icon-127-e-mail::before,
.icon-e-mail::before {
content: "";
}
.icon-128-film-camera::before,
.icon-film-camera::before {
content: "";
}
.icon-129-film-camera-2::before,
.icon-film-camera-2::before {
content: "";
}
.icon-130-film-camera-3::before,
.icon-film-camera-3::before {
content: "";
}
.icon-131-film-reel::before,
.icon-film-reel::before {
content: "";
}
.icon-132-folder::before,
.icon-folder::before {
content: "";
}
.icon-133-football::before,
.icon-football::before {
content: "";
}
.icon-134-game::before,
.icon-game::before {
content: "";
}
.icon-135-gaming::before,
.icon-gaming::before {
content: "";
}
.icon-136-globe::before,
.icon-globe::before {
content: "";
}
.icon-137-handset::before,
.icon-handset::before {
content: "";
}
.icon-138-headphone::before,
.icon-headphone::before {
content: "";
}
.icon-139-headset::before,
.icon-headset::before {
content: "";
}
.icon-140-index-card::before,
.icon-index-card::before {
content: "";
}
.icon-141-leaf::before,
.icon-leaf::before {
content: "";
}
.icon-142-lifesaver::before,
.icon-lifesaver::before {
content: "";
}
.icon-143-modem-wlan::before,
.icon-modem-wlan::before {
content: "";
}
.icon-144-movie::before,
.icon-movie::before {
content: "";
}
.icon-145-movie-2::before,
.icon-movie-2::before {
content: "";
}
.icon-146-movie-3::before,
.icon-movie-3::before {
content: "";
}
.icon-147-svod::before,
.icon-svod::before {
content: "";
}
.icon-148-music::before,
.icon-music::before {
content: "";
}
.icon-149-navigation::before,
.icon-navigation::before {
content: "";
}
.icon-150-network::before,
.icon-network::before {
content: "";
}
.icon-151-office::before,
.icon-office::before {
content: "";
}
.icon-152-phone-basic::before,
.icon-phone-basic::before {
content: "";
}
.icon-153-phone-pro::before,
.icon-phone-pro::before {
content: "";
}
.icon-154-photo::before,
.icon-photo::before {
content: "";
}
.icon-155-photo-camera::before,
.icon-photo-camera::before {
content: "";
}
.icon-156-postcard::before,
.icon-postcard::before {
content: "";
}
.icon-157-printer::before,
.icon-printer::before {
content: "";
}
.icon-158-radio::before,
.icon-radio::before {
content: "";
}
.icon-159-rss-feed::before,
.icon-rss-feed::before {
content: "";
}
.icon-160-wlan::before,
.icon-wlan::before {
content: "";
}
.icon-161-signal::before,
.icon-signal::before {
content: "";
}
.icon-162-server::before,
.icon-server::before {
content: "";
}
.icon-163-sms::before,
.icon-sms::before {
content: "";
}
.icon-164-translation::before,
.icon-translation::before {
content: "";
}
.icon-165-transmitter::before,
.icon-transmitter::before {
content: "";
}
.icon-166-tv::before,
.icon-tv::before {
content: "";
}
.icon-167-tv-hd::before,
.icon-tv-hd::before {
content: "";
}
.icon-168-tv-2-0::before,
.icon-tv-2-0::before {
content: "";
}
.icon-169-video-tape::before,
.icon-video-tape::before {
content: "";
}
.icon-170-video-tape-2::before,
.icon-video-tape-2::before {
content: "";
}
.icon-171-wearable-watch::before,
.icon-wearable-watch::before {
content: "";
}
.icon-172-weather-cloud::before,
.icon-weather-cloud::before {
content: "";
}
.icon-173-weather-rain::before,
.icon-weather-rain::before {
content: "";
}
.icon-174-weather-rain-unsettled::before,
.icon-weather-rain-unsettled::before {
content: "";
}
.icon-175-weather-snow::before,
.icon-weather-snow::before {
content: "";
}
.icon-176-weather-snow-unsettled::before,
.icon-weather-snow-unsettled::before {
content: "";
}
.icon-177-weather-storm::before,
.icon-weather-storm::before {
content: "";
}
.icon-178-weather-storm-unsettled::before,
.icon-weather-storm-unsettled::before {
content: "";
}
.icon-179-weather-sun::before,
.icon-weather-sun::before {
content: "";
}
.icon-180-weather-sun-unsettled::before,
.icon-weather-sun-unsettled::before {
content: "";
}
.icon-181-inbox-1::before,
.icon-inbox-1::before {
content: "";
}
.icon-181-inbox::before,
.icon-inbox::before {
content: "";
}
.icon-182-drafts-3::before,
.icon-drafts-3::before {
content: "";
}
.icon-182-drafts::before,
.icon-drafts::before {
content: "";
}
.icon-183-sent-6::before,
.icon-sent-6::before {
content: "";
}
.icon-183-sent::before,
.icon-sent::before {
content: "";
}
.icon-184-sent-2::before,
.icon-sent-2::before {
content: "";
}
.icon-185-inbox-2::before,
.icon-inbox-2::before {
content: "";
}
.icon-185-inbox::before,
.icon-inbox::before {
content: "";
}
.icon-186-drafts::before,
.icon-drafts::before {
content: "";
}
.icon-187-sent::before,
.icon-sent::before {
content: "";
}
.icon-188-sent-3::before,
.icon-sent-3::before {
content: "";
}
.icon-188-sent-2::before,
.icon-sent-2::before {
content: "";
}
.icon-189-inbox-3::before,
.icon-inbox-3::before {
content: "";
}
.icon-189-inbox::before,
.icon-inbox::before {
content: "";
}
.icon-190-drafts-2::before,
.icon-drafts-2::before {
content: "";
}
.icon-190-drafts::before,
.icon-drafts::before {
content: "";
}
.icon-191-sent-5::before,
.icon-sent-5::before {
content: "";
}
.icon-191-sent::before,
.icon-sent::before {
content: "";
}
.icon-192-sent-4::before,
.icon-sent-4::before {
content: "";
}
.icon-192-sent-2::before,
.icon-sent-2::before {
content: "";
}
.icon-193-website::before,
.icon-website::before {
content: "";
}
.icon-194-website-2::before,
.icon-website-2::before {
content: "";
}
.icon-195-heart-filled::before,
.icon-heart-filled::before {
content: "";
}
.icon-196-exclamation-mark::before,
.icon-exclamation-mark::before {
content: "";
}
.icon-197-share::before,
.icon-share::before {
content: "";
}
.icon-198-chevron-small-down::before,
.icon-chevron-small-down::before {
content: "";
}
.icon-198-chevron-down-small::before,
.icon-chevron-down-small::before {
content: "";
}
.icon-199-chevron-small-up::before,
.icon-chevron-small-up::before {
content: "";
}
.icon-199-chevron-up-small::before,
.icon-chevron-up-small::before {
content: "";
}
.icon-200-chevron-small-left::before,
.icon-chevron-small-left::before {
content: "";
}
.icon-200-chevron-left-small::before,
.icon-chevron-left-small::before {
content: "";
}
.icon-201-chevron-small-right::before,
.icon-chevron-small-right::before {
content: "";
}
.icon-201-chevron-right-small::before,
.icon-chevron-right-small::before {
content: "";
}
.icon-202-clear-circle::before,
.icon-clear-circle::before {
content: "";
}
.icon-203-server::before,
.icon-server::before {
content: "";
}
.icon-204-cd::before,
.icon-cd::before {
content: "";
}
.icon-205-bundle::before,
.icon-bundle::before {
content: "";
}
.icon-206-database::before,
.icon-database::before {
content: "";
}
.icon-207-firewall::before,
.icon-firewall::before {
content: "";
}
.icon-208-proxy-server::before,
.icon-proxy-server::before {
content: "";
}
.icon-209-set-top-box::before,
.icon-set-top-box::before {
content: "";
}
.icon-209-settopbox::before,
.icon-settopbox::before {
content: "";
}
.icon-210-puzzle::before,
.icon-puzzle::before {
content: "";
}
.icon-211-skull::before,
.icon-skull::before {
content: "";
}
.icon-212-fire::before,
.icon-fire::before {
content: "";
}
.icon-213-setting::before,
.icon-setting::before {
content: "";
}
.icon-214-present::before,
.icon-present::before {
content: "";
}
.icon-215-certificate::before,
.icon-certificate::before {
content: "";
}
.icon-216-waypointer::before,
.icon-waypointer::before {
content: "";
}
.icon-217-eye::before,
.icon-eye::before {
content: "";
}
.icon-218-eye-shut::before,
.icon-eye-shut::before {
content: "";
}
.icon-219-runtime::before,
.icon-runtime::before {
content: "";
}
.icon-220-list::before,
.icon-list::before {
content: "";
}
.icon-221-topology::before,
.icon-topology::before {
content: "";
}
.icon-222-blueprint::before,
.icon-blueprint::before {
content: "";
}
.icon-223-map-pointer::before,
.icon-map-pointer::before {
content: "";
}
.icon-224-console::before,
.icon-console::before {
content: "";
}
.icon-225-reboot::before,
.icon-reboot::before {
content: "";
}
.icon-226-reprovision::before,
.icon-reprovision::before {
content: "";
}
.icon-227-speech-bubble-filled::before,
.icon-speech-bubble-filled::before {
content: "";
}
.icon-228-star-filled::before,
.icon-star-filled::before {
content: "";
}
.icon-229-gateway::before,
.icon-gateway::before {
content: "";
}
.icon-230-flash::before,
.icon-flash::before {
content: "";
}
.icon-231-rocket::before,
.icon-rocket::before {
content: "";
}
.icon-232-robot-neutral::before,
.icon-robot-neutral::before {
content: "";
}
.icon-233-robot-happy::before,
.icon-robot-happy::before {
content: "";
}
.icon-234-robot-smile::before,
.icon-robot-smile::before {
content: "";
}
.icon-235-robot-laughing::before,
.icon-robot-laughing::before {
content: "";
}
.icon-236-robot-wink-1::before,
.icon-robot-wink-1::before {
content: "";
}
.icon-236-robot-wink::before,
.icon-robot-wink::before {
content: "";
}
.icon-237-robot-relaxed::before,
.icon-robot-relaxed::before {
content: "";
}
.icon-238-robot-surprized::before,
.icon-robot-surprized::before {
content: "";
}
.icon-239-robot-confused::before,
.icon-robot-confused::before {
content: "";
}
.icon-240-robot-sad::before,
.icon-robot-sad::before {
content: "";
}
.icon-241-robot-broken::before,
.icon-robot-broken::before {
content: "";
}
.icon-242-umbrella::before,
.icon-umbrella::before {
content: "";
}
.icon-243-security::before,
.icon-security::before {
content: "";
}
.icon-244-routed-network::before,
.icon-routed-network::before {
content: "";
}
.icon-245-ip-sets::before,
.icon-ip-sets::before {
content: "";
}
.icon-246-resource-pool::before,
.icon-resource-pool::before {
content: "";
}
.icon-247-edge::before,
.icon-edge::before {
content: "";
}
.icon-248-switch::before,
.icon-switch::before {
content: "";
}
.icon-249-processor::before,
.icon-processor::before {
content: "";
}
.icon-250-distributed-network::before,
.icon-distributed-network::before {
content: "";
}
.icon-251-legacy-network::before,
.icon-legacy-network::before {
content: "";
}
.icon-252-star-half::before,
.icon-star-half::before {
content: "";
}
.icon-253-filter::before,
.icon-filter::before {
content: "";
}
.icon-254-idcard::before,
.icon-idcard::before {
content: "";
}
.icon-254_idcard::before,
.icon-254_idcard::before {
content: "";
}
.icon-255-passport::before,
.icon-passport::before {
content: "";
}
.icon-255_passport::before,
.icon-255_passport::before {
content: "";
}
.icon-256-thumb-up-filled::before,
.icon-thumb-up-filled::before {
content: "";
}
.icon-256_thumb_up_filled::before,
.icon-256_thumb_up_filled::before {
content: "";
}
.icon-257-tag::before,
.icon-tag::before {
content: "";
}
.icon-257_tag::before,
.icon-257_tag::before {
content: "";
}
.icon-258-bell::before,
.icon-bell::before {
content: "";
}
.icon-258_bell::before,
.icon-258_bell::before {
content: "";
}
.icon-259-flash-multiple::before,
.icon-flash-multiple::before {
content: "";
}
.icon-259_flash_multiple::before,
.icon-259_flash_multiple::before {
content: "";
}
.icon-260-lightbulb::before,
.icon-lightbulb::before {
content: "";
}
.icon-260_lightbulb::before,
.icon-260_lightbulb::before {
content: "";
}
.icon-261-devices::before,
.icon-devices::before {
content: "";
}
.icon-261_devices::before,
.icon-261_devices::before {
content: "";
}
.icon-262-smartphones-multiple::before,
.icon-smartphones-multiple::before {
content: "";
}
.icon-262_smartphone_multiple::before,
.icon-262_smartphone_multiple::before {
content: "";
}
.icon-263-document-indesign::before,
.icon-document-indesign::before {
content: "";
}
.icon-263_document_indesign::before,
.icon-263_document_indesign::before {
content: "";
}
.icon-264-document-illustrator::before,
.icon-document-illustrator::before {
content: "";
}
.icon-264_document_illustrator::before,
.icon-264_document_illustrator::before {
content: "";
}
.icon-265-document-onenote::before,
.icon-document-onenote::before {
content: "";
}
.icon-265_document_onenote::before,
.icon-265_document_onenote::before {
content: "";
}
.icon-266-document-eps::before,
.icon-document-eps::before {
content: "";
}
.icon-266_document_eps::before,
.icon-266_document_eps::before {
content: "";
}
.icon-267-document-photoshop::before,
.icon-document-photoshop::before {
content: "";
}
.icon-267_document_photoshop::before,
.icon-267_document_photoshop::before {
content: "";
}
.icon-268-document-visio::before,
.icon-document-visio::before {
content: "";
}
.icon-268_document_visio::before,
.icon-268_document_visio::before {
content: "";
}
.icon-269-document-publisher::before,
.icon-document-publisher::before {
content: "";
}
.icon-269_document_publisher::before,
.icon-269_document_publisher::before {
content: "";
}
.icon-270-document-unknowndoc::before,
.icon-document-unknowndoc::before {
content: "";
}
.icon-270_document_unknowndoc::before,
.icon-270_document_unknowndoc::before {
content: "";
}
.icon-271-shop::before,
.icon-shop::before {
content: "";
}
.icon-271_shop::before,
.icon-271_shop::before {
content: "";
}
.icon-272-scissors::before,
.icon-scissors::before {
content: "";
}
.icon-272_scissors::before,
.icon-272_scissors::before {
content: "";
}
.icon-273-battery::before,
.icon-battery::before {
content: "";
}
.icon-273_battery::before,
.icon-273_battery::before {
content: "";
}
.icon-274-battery-3::before,
.icon-battery-3::before {
content: "";
}
.icon-274_battery_3::before,
.icon-274_battery_3::before {
content: "";
}
.icon-275-battery-2::before,
.icon-battery-2::before {
content: "";
}
.icon-275_battery_2::before,
.icon-275_battery_2::before {
content: "";
}
.icon-276-battery-1::before,
.icon-battery-1::before {
content: "";
}
.icon-276_battery_1::before,
.icon-276_battery_1::before {
content: "";
}
.icon-277-battery-0::before,
.icon-battery-0::before {
content: "";
}
.icon-277_battery_0::before,
.icon-277_battery_0::before {
content: "";
}
.icon-278-battery-empty::before,
.icon-battery-empty::before {
content: "";
}
.icon-278_battery_empty::before,
.icon-278_battery_empty::before {
content: "";
}
.icon-279-mouse::before,
.icon-mouse::before {
content: "";
}
.icon-279_mouse::before,
.icon-279_mouse::before {
content: "";
}
.icon-280-pointer::before,
.icon-pointer::before {
content: "";
}
.icon-280_pointer::before,
.icon-280_pointer::before {
content: "";
}
.icon-281-realmouse::before,
.icon-realmouse::before {
content: "";
}
.icon-281_realmouse::before,
.icon-281_realmouse::before {
content: "";
}
.icon-282-bug::before,
.icon-bug::before {
content: "";
}
.icon-282_bug::before,
.icon-282_bug::before {
content: "";
}
.icon-283-privacy::before,
.icon-privacy::before {
content: "";
}
.icon-283_privacy::before,
.icon-283_privacy::before {
content: "";
}
.icon-284-ip::before,
.icon-ip::before {
content: "";
}
.icon-284_ip::before,
.icon-284_ip::before {
content: "";
}
.icon-285-patch::before,
.icon-patch::before {
content: "";
}
.icon-285_patch::before,
.icon-285_patch::before {
content: "";
}
.icon-286-microphone::before,
.icon-microphone::before {
content: "";
}
.icon-286_microphone_1::before,
.icon-286_microphone_1::before {
content: "";
}
.icon-287-microphone-filled::before,
.icon-microphone-filled::before {
content: "";
}
.icon-287_microphone_2::before,
.icon-287_microphone_2::before {
content: "";
}
.icon-288-handset-up::before,
.icon-handset-up::before {
content: "";
}
.icon-288_handset_up::before,
.icon-288_handset_up::before {
content: "";
}
.icon-289-handset-up-stroke::before,
.icon-handset-up-stroke::before {
content: "";
}
.icon-289_handset_up_stroke::before,
.icon-289_handset_up_stroke::before {
content: "";
}
.icon-290-handset-stroke::before,
.icon-handset-stroke::before {
content: "";
}
.icon-290_handset_stroke::before,
.icon-290_handset_stroke::before {
content: "";
}
.icon-291-software::before,
.icon-software::before {
content: "";
}
.icon-291_software::before,
.icon-291_software::before {
content: "";
}
.icon-292-dynamic-storage::before,
.icon-dynamic-storage::before {
content: "";
}
.icon-292_dynamic_storage::before,
.icon-292_dynamic_storage::before {
content: "";
}
.icon-293-wireless-data::before,
.icon-wireless-data::before {
content: "";
}
.icon-293_wireless_data::before,
.icon-293_wireless_data::before {
content: "";
}
.icon-294-wireless-voice::before,
.icon-wireless-voice::before {
content: "";
}
.icon-294_wireless_voice::before,
.icon-294_wireless_voice::before {
content: "";
}
.icon-295-lips::before,
.icon-lips::before {
content: "";
}
.icon-295_lips::before,
.icon-295_lips::before {
content: "";
}
.icon-296-flag-filled::before,
.icon-flag-filled::before {
content: "";
}
.icon-296_flag-filled::before,
.icon-296_flag-filled::before {
content: "";
}
.icon-297-alarmclock::before,
.icon-alarmclock::before {
content: "";
}
.icon-297_alarmclock::before,
.icon-297_alarmclock::before {
content: "";
}
.icon-298-copy::before,
.icon-copy::before {
content: "";
}
.icon-298_copy::before,
.icon-298_copy::before {
content: "";
}
.icon-299-paste::before,
.icon-paste::before {
content: "";
}
.icon-299_paste::before,
.icon-299_paste::before {
content: "";
}
.icon-300-plus-box::before,
.icon-plus-box::before {
content: "";
}
.icon-300_plus-box::before,
.icon-300_plus-box::before {
content: "";
}
.icon-301-minus-box::before,
.icon-minus-box::before {
content: "";
}
.icon-301_minus-box::before,
.icon-301_minus-box::before {
content: "";
}
.icon-302-service::before,
.icon-service::before {
content: "";
}
.icon-302_service::before,
.icon-302_service::before {
content: "";
}
.icon-303-business-phone::before,
.icon-business-phone::before {
content: "";
}
.icon-303_business-phone::before,
.icon-303_business-phone::before {
content: "";
}
.icon-304-accessibility::before,
.icon-accessibility::before {
content: "";
}
.icon-305-agile-process::before,
.icon-agile-process::before {
content: "";
}
.icon-306-airplaine::before,
.icon-airplaine::before {
content: "";
}
.icon-307-alarmcall::before,
.icon-alarmcall::before {
content: "";
}
.icon-308-auster::before,
.icon-auster::before {
content: "";
}
.icon-309-barcode::before,
.icon-barcode::before {
content: "";
}
.icon-310-bed::before,
.icon-bed::before {
content: "";
}
.icon-311-bee::before,
.icon-bee::before {
content: "";
}
.icon-312-beer::before,
.icon-beer::before {
content: "";
}
.icon-313-biker::before,
.icon-biker::before {
content: "";
}
.icon-314-blow-fish::before,
.icon-blow-fish::before {
content: "";
}
.icon-315-book::before,
.icon-book::before {
content: "";
}
.icon-316-broom::before,
.icon-broom::before {
content: "";
}
.icon-317-bubbles::before,
.icon-bubbles::before {
content: "";
}
.icon-318-bus::before,
.icon-bus::before {
content: "";
}
.icon-319-business-network::before,
.icon-business-network::before {
content: "";
}
.icon-320-buyback::before,
.icon-buyback::before {
content: "";
}
.icon-321-bicycle::before,
.icon-bicycle::before {
content: "";
}
.icon-322-cablecar::before,
.icon-cablecar::before {
content: "";
}
.icon-323-calculator::before,
.icon-calculator::before {
content: "";
}
.icon-324-call-log::before,
.icon-call-log::before {
content: "";
}
.icon-325-callfilter::before,
.icon-callfilter::before {
content: "";
}
.icon-326-car-pooling-2::before,
.icon-car-pooling-2::before {
content: "";
}
.icon-327-car-pooling::before,
.icon-car-pooling::before {
content: "";
}
.icon-328-car-sharing::before,
.icon-car-sharing::before {
content: "";
}
.icon-329-car::before,
.icon-car::before {
content: "";
}
.icon-330-carabiner::before,
.icon-carabiner::before {
content: "";
}
.icon-331-cardreader::before,
.icon-cardreader::before {
content: "";
}
.icon-332-care::before,
.icon-care::before {
content: "";
}
.icon-333-cashdesk::before,
.icon-cashdesk::before {
content: "";
}
.icon-334-ccserver::before,
.icon-ccserver::before {
content: "";
}
.icon-335-chairlift::before,
.icon-chairlift::before {
content: "";
}
.icon-336-child-protection-2::before,
.icon-child-protection-2::before {
content: "";
}
.icon-337-cocktail::before,
.icon-cocktail::before {
content: "";
}
.icon-338-coffee::before,
.icon-coffee::before {
content: "";
}
.icon-339-combox::before,
.icon-combox::before {
content: "";
}
.icon-340-computer-monitoring::before,
.icon-computer-monitoring::before {
content: "";
}
.icon-341-copier::before,
.icon-copier::before {
content: "";
}
.icon-342-crab::before,
.icon-crab::before {
content: "";
}
.icon-343-crime::before,
.icon-crime::before {
content: "";
}
.icon-344-cross::before,
.icon-cross::before {
content: "";
}
.icon-345-crowd::before,
.icon-crowd::before {
content: "";
}
.icon-346-crown::before,
.icon-crown::before {
content: "";
}
.icon-347-cruiser::before,
.icon-cruiser::before {
content: "";
}
.icon-348-dargebotene-hand::before,
.icon-dargebotene-hand::before {
content: "";
}
.icon-349-desktopsharing::before,
.icon-desktopsharing::before {
content: "";
}
.icon-350-diagram-2::before,
.icon-diagram-2::before {
content: "";
}
.icon-351-diagram::before,
.icon-diagram::before {
content: "";
}
.icon-352-dial::before,
.icon-dial::before {
content: "";
}
.icon-353-digihome::before,
.icon-digihome::before {
content: "";
}
.icon-354-discjockey::before,
.icon-discjockey::before {
content: "";
}
.icon-355-doctor::before,
.icon-doctor::before {
content: "";
}
.icon-356-driverless-car::before,
.icon-driverless-car::before {
content: "";
}
.icon-357-drone::before,
.icon-drone::before {
content: "";
}
.icon-358-ebike-2::before,
.icon-ebike-2::before {
content: "";
}
.icon-359-ebike::before,
.icon-ebike::before {
content: "";
}
.icon-360-ecar::before,
.icon-ecar::before {
content: "";
}
.icon-361-edge-2::before,
.icon-edge-2::before {
content: "";
}
.icon-362-elevator::before,
.icon-elevator::before {
content: "";
}
.icon-363-emotorcycle-2::before,
.icon-emotorcycle-2::before {
content: "";
}
.icon-364-emotorcycle::before,
.icon-emotorcycle::before {
content: "";
}
.icon-365-esim::before,
.icon-esim::before {
content: "";
}
.icon-366-ethernet::before,
.icon-ethernet::before {
content: "";
}
.icon-367-exit::before,
.icon-exit::before {
content: "";
}
.icon-368-factory::before,
.icon-factory::before {
content: "";
}
.icon-369-faultclearing::before,
.icon-faultclearing::before {
content: "";
}
.icon-370-fiber::before,
.icon-fiber::before {
content: "";
}
.icon-371-firebrigade::before,
.icon-firebrigade::before {
content: "";
}
.icon-372-fish::before,
.icon-fish::before {
content: "";
}
.icon-373-fitness::before,
.icon-fitness::before {
content: "";
}
.icon-374-flag-filled-wind::before,
.icon-flag-filled-wind::before {
content: "";
}
.icon-375-flag-wind::before,
.icon-flag-wind::before {
content: "";
}
.icon-376-fleet-management::before,
.icon-fleet-management::before {
content: "";
}
.icon-377-food::before,
.icon-food::before {
content: "";
}
.icon-378-freighter::before,
.icon-freighter::before {
content: "";
}
.icon-379-garderobe::before,
.icon-garderobe::before {
content: "";
}
.icon-380-gears-three::before,
.icon-gears-three::before {
content: "";
}
.icon-381-gears::before,
.icon-gears::before {
content: "";
}
.icon-382-globe-key::before,
.icon-globe-key::before {
content: "";
}
.icon-383-goggles-3d::before,
.icon-goggles-3d::before {
content: "";
}
.icon-384-green-laptop::before,
.icon-green-laptop::before {
content: "";
}
.icon-385-green-mobile::before,
.icon-green-mobile::before {
content: "";
}
.icon-386-hd-voice::before,
.icon-hd-voice::before {
content: "";
}
.icon-387-helicopter::before,
.icon-helicopter::before {
content: "";
}
.icon-388-helpline::before,
.icon-helpline::before {
content: "";
}
.icon-389-hiking::before,
.icon-hiking::before {
content: "";
}
.icon-390-home-ok::before,
.icon-home-ok::before {
content: "";
}
.icon-391-hospital-building::before,
.icon-hospital-building::before {
content: "";
}
.icon-392-hospital::before,
.icon-hospital::before {
content: "";
}
.icon-393-hotspot-localprodukt::before,
.icon-hotspot-localprodukt::before {
content: "";
}
.icon-394-hybrid-drive::before,
.icon-hybrid-drive::before {
content: "";
}
.icon-395-infinity::before,
.icon-infinity::before {
content: "";
}
.icon-396-informationint::before,
.icon-informationint::before {
content: "";
}
.icon-397-insert-banknote::before,
.icon-insert-banknote::before {
content: "";
}
.icon-398-insertcoin::before,
.icon-insertcoin::before {
content: "";
}
.icon-399-internet-of-things::before,
.icon-internet-of-things::before {
content: "";
}
.icon-400-ip-telephone::before,
.icon-ip-telephone::before {
content: "";
}
.icon-401-jelly-fish::before,
.icon-jelly-fish::before {
content: "";
}
.icon-402-juggler::before,
.icon-juggler::before {
content: "";
}
.icon-403-keyboard::before,
.icon-keyboard::before {
content: "";
}
.icon-404-laptop-internet::before,
.icon-laptop-internet::before {
content: "";
}
.icon-405-living-room::before,
.icon-living-room::before {
content: "";
}
.icon-406-lowradiation::before,
.icon-lowradiation::before {
content: "";
}
.icon-407-mail-storge::before,
.icon-mail-storge::before {
content: "";
}
.icon-408-mediabox::before,
.icon-mediabox::before {
content: "";
}
.icon-409-megaphone::before,
.icon-megaphone::before {
content: "";
}
.icon-410-mobile-buyback-2::before,
.icon-mobile-buyback-2::before {
content: "";
}
.icon-411-mobile-buyback-3::before,
.icon-mobile-buyback-3::before {
content: "";
}
.icon-412-mobile-buyback::before,
.icon-mobile-buyback::before {
content: "";
}
.icon-413-mobile-internet::before,
.icon-mobile-internet::before {
content: "";
}
.icon-414-mobile-laptop::before,
.icon-mobile-laptop::before {
content: "";
}
.icon-415-mobile-message::before,
.icon-mobile-message::before {
content: "";
}
.icon-416-mobile-payment::before,
.icon-mobile-payment::before {
content: "";
}
.icon-417-mobilecall::before,
.icon-mobilecall::before {
content: "";
}
.icon-418-mobileuser::before,
.icon-mobileuser::before {
content: "";
}
.icon-419-modem::before,
.icon-modem::before {
content: "";
}
.icon-420-motorcycle-2::before,
.icon-motorcycle-2::before {
content: "";
}
.icon-421-motorcycle::before,
.icon-motorcycle::before {
content: "";
}
.icon-422-mountainbiker::before,
.icon-mountainbiker::before {
content: "";
}
.icon-423-music-app-2::before,
.icon-music-app-2::before {
content: "";
}
.icon-424-music-app::before,
.icon-music-app::before {
content: "";
}
.icon-425-mycloud::before,
.icon-mycloud::before {
content: "";
}
.icon-426-network-3g::before,
.icon-network-3g::before {
content: "";
}
.icon-427-network-4g::before,
.icon-network-4g::before {
content: "";
}
.icon-428-network-4gplus::before,
.icon-network-4gplus::before {
content: "";
}
.icon-429-network-5g::before,
.icon-network-5g::before {
content: "";
}
.icon-430-network-improvement::before,
.icon-network-improvement::before {
content: "";
}
.icon-431-newspaper::before,
.icon-newspaper::before {
content: "";
}
.icon-432-nfc::before,
.icon-nfc::before {
content: "";
}
.icon-433-nordic-combined::before,
.icon-nordic-combined::before {
content: "";
}
.icon-434-notice::before,
.icon-notice::before {
content: "";
}
.icon-435-nut-and-bolt::before,
.icon-nut-and-bolt::before {
content: "";
}
.icon-436-online-storge::before,
.icon-online-storge::before {
content: "";
}
.icon-437-parking-garage::before,
.icon-parking-garage::before {
content: "";
}
.icon-438-parking-meter::before,
.icon-parking-meter::before {
content: "";
}
.icon-439-parking-2::before,
.icon-parking-2::before {
content: "";
}
.icon-440-parking::before,
.icon-parking::before {
content: "";
}
.icon-441-pbx::before,
.icon-pbx::before {
content: "";
}
.icon-442-personal-cloud::before,
.icon-personal-cloud::before {
content: "";
}
.icon-443-pet-bottle::before,
.icon-pet-bottle::before {
content: "";
}
.icon-444-pharmacy::before,
.icon-pharmacy::before {
content: "";
}
.icon-445-phone-security::before,
.icon-phone-security::before {
content: "";
}
.icon-446-phonecordless::before,
.icon-phonecordless::before {
content: "";
}
.icon-447-piggy-bank::before,
.icon-piggy-bank::before {
content: "";
}
.icon-448-podium::before,
.icon-podium::before {
content: "";
}
.icon-449-police::before,
.icon-police::before {
content: "";
}
.icon-450-power::before,
.icon-power::before {
content: "";
}
.icon-451-prepaid-mobile::before,
.icon-prepaid-mobile::before {
content: "";
}
.icon-452-presentation::before,
.icon-presentation::before {
content: "";
}
.icon-453-ray::before,
.icon-ray::before {
content: "";
}
.icon-454-relax::before,
.icon-relax::before {
content: "";
}
.icon-455-remote-control::before,
.icon-remote-control::before {
content: "";
}
.icon-456-restaurant::before,
.icon-restaurant::before {
content: "";
}
.icon-457-robot-wink-2::before,
.icon-robot-wink-2::before {
content: "";
}
.icon-458-runner::before,
.icon-runner::before {
content: "";
}
.icon-459-safety::before,
.icon-safety::before {
content: "";
}
.icon-460-sailer::before,
.icon-sailer::before {
content: "";
}
.icon-461-satellitedish::before,
.icon-satellitedish::before {
content: "";
}
.icon-462-satellite::before,
.icon-satellite::before {
content: "";
}
.icon-463-scale::before,
.icon-scale::before {
content: "";
}
.icon-464-screen-design::before,
.icon-screen-design::before {
content: "";
}
.icon-465-searchtext::before,
.icon-searchtext::before {
content: "";
}
.icon-466-securitycamera::before,
.icon-securitycamera::before {
content: "";
}
.icon-467-selfcheckout::before,
.icon-selfcheckout::before {
content: "";
}
.icon-468-server-small::before,
.icon-server-small::before {
content: "";
}
.icon-469-shakehands::before,
.icon-shakehands::before {
content: "";
}
.icon-470-shower::before,
.icon-shower::before {
content: "";
}
.icon-471-silence::before,
.icon-silence::before {
content: "";
}
.icon-472-simkarte::before,
.icon-simkarte::before {
content: "";
}
.icon-473-ski-biathlon::before,
.icon-ski-biathlon::before {
content: "";
}
.icon-474-ski-cross-country::before,
.icon-ski-cross-country::before {
content: "";
}
.icon-475-ski-freestyle::before,
.icon-ski-freestyle::before {
content: "";
}
.icon-476-ski-jumping::before,
.icon-ski-jumping::before {
content: "";
}
.icon-477-ski-racer::before,
.icon-ski-racer::before {
content: "";
}
.icon-478-ski-telemarking::before,
.icon-ski-telemarking::before {
content: "";
}
.icon-479-ski::before,
.icon-ski::before {
content: "";
}
.icon-480-small-meeting::before,
.icon-small-meeting::before {
content: "";
}
.icon-481-smoking::before,
.icon-smoking::before {
content: "";
}
.icon-482-snail::before,
.icon-snail::before {
content: "";
}
.icon-483-snow::before,
.icon-snow::before {
content: "";
}
.icon-484-snowboard::before,
.icon-snowboard::before {
content: "";
}
.icon-485-socialnetwork::before,
.icon-socialnetwork::before {
content: "";
}
.icon-486-sos::before,
.icon-sos::before {
content: "";
}
.icon-487-spam::before,
.icon-spam::before {
content: "";
}
.icon-488-spot::before,
.icon-spot::before {
content: "";
}
.icon-489-squid::before,
.icon-squid::before {
content: "";
}
.icon-490-stairs::before,
.icon-stairs::before {
content: "";
}
.icon-491-standing-meeting::before,
.icon-standing-meeting::before {
content: "";
}
.icon-492-station::before,
.icon-station::before {
content: "";
}
.icon-493-steeringwheel::before,
.icon-steeringwheel::before {
content: "";
}
.icon-494-strong-arm::before,
.icon-strong-arm::before {
content: "";
}
.icon-495-svod-2::before,
.icon-svod-2::before {
content: "";
}
.icon-496-swiss-1::before,
.icon-swiss-1::before {
content: "";
}
.icon-497-swiss-2::before,
.icon-swiss-2::before {
content: "";
}
.icon-498-switchboarding::before,
.icon-switchboarding::before {
content: "";
}
.icon-499-switchoff::before,
.icon-switchoff::before {
content: "";
}
.icon-500-taxcard::before,
.icon-taxcard::before {
content: "";
}
.icon-501-taxcardin::before,
.icon-taxcardin::before {
content: "";
}
.icon-502-taxcardout::before,
.icon-taxcardout::before {
content: "";
}
.icon-503-teddybear::before,
.icon-teddybear::before {
content: "";
}
.icon-504-telecommunication::before,
.icon-telecommunication::before {
content: "";
}
.icon-505-tent::before,
.icon-tent::before {
content: "";
}
.icon-506-thermometer::before,
.icon-thermometer::before {
content: "";
}
.icon-507-toilet-f::before,
.icon-toilet-f::before {
content: "";
}
.icon-508-toilet-m::before,
.icon-toilet-m::before {
content: "";
}
.icon-509-toilet-s::before,
.icon-toilet-s::before {
content: "";
}
.icon-510-touchdown::before,
.icon-touchdown::before {
content: "";
}
.icon-511-trafficinfo::before,
.icon-trafficinfo::before {
content: "";
}
.icon-512-trailrunner::before,
.icon-trailrunner::before {
content: "";
}
.icon-513-train::before,
.icon-train::before {
content: "";
}
.icon-514-tv-guide::before,
.icon-tv-guide::before {
content: "";
}
.icon-515-uhd-tv::before,
.icon-uhd-tv::before {
content: "";
}
.icon-516-usb::before,
.icon-usb::before {
content: "";
}
.icon-517-user-presence::before,
.icon-user-presence::before {
content: "";
}
.icon-518-van-fire-2::before,
.icon-van-fire-2::before {
content: "";
}
.icon-519-van-fire::before,
.icon-van-fire::before {
content: "";
}
.icon-520-ventilator::before,
.icon-ventilator::before {
content: "";
}
.icon-521-video-call-laptop::before,
.icon-video-call-laptop::before {
content: "";
}
.icon-522-video-call-mobile::before,
.icon-video-call-mobile::before {
content: "";
}
.icon-523-virus::before,
.icon-virus::before {
content: "";
}
.icon-524-waitingroom::before,
.icon-waitingroom::before {
content: "";
}
.icon-525-wearable-glasses::before,
.icon-wearable-glasses::before {
content: "";
}
.icon-526-webcam::before,
.icon-webcam::before {
content: "";
}
.icon-527-wheelchair::before,
.icon-wheelchair::before {
content: "";
}
.icon-528-wireless-charging::before,
.icon-wireless-charging::before {
content: "";
}
.icon-529-qr-code::before,
.icon-qr-code::before {
content: "";
}
sdx-accordion, sdx-animation, sdx-arrow, sdx-button, sdx-color-picker, sdx-dummy, sdx-expand-and-collapse, sdx-flip, sdx-icon, sdx-input, sdx-input-item, sdx-loading-spinner, sdx-menu-flyout, sdx-numeric-stepper, sdx-option-picker, sdx-pie-chart, sdx-price, sdx-progress-full, sdx-ribbon, sdx-scroll-to-top, sdx-search, sdx-select, sdx-show-more, sdx-sticker-circle, sdx-tabs, sdx-text-truncate, sdx-validation-message {
visibility: hidden;
}
.sdx-container {
font-family: "TheSans", sans-serif;
font-weight: 300;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
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
*/
/*
* reset body margin
*/
/*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
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
```section_design
```
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 primary colours
Icons using primary 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 support colours
Mobile side navigation using support 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 extremely 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 complement 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.
```section_develop
```
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
---
Our brand font Thesis has an appealing modern appearance and excellent readability. The independent Swisscom typography is an important design element of the brand identity.
The following instructions shows which font size, leading and weight that can be used. By limiting the number of styles the products remain clean and simple.
H1: Discover your personal universe
H2: Discover your personal universe
H3: Discover your personal universe
H4: Discover your personal universe
H5: Discover your personal universe
H6: Discover your personal universe
H1: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H2: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H3: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H4: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H5: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H6: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
Font Weights
Font weight characteristics
```section_design
```
Rules
Typefaces
When designing for SDX, there are two typefaces to choose from – TheSans and TheSerif – each 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 for quotations .
The Sans
The Serif
Using colour and typography
When using colour backgrounds, only white must be used as font colour.
The colour matrix demonstrates the accessibility of typefaces across the entire colour palette, at all specified sizes.
Colour and typography
Type hierarchy and colour
When creating layouts using typography, only the following colours should be used to give content hierarchy. All other colours should never be used for typography.
Type hierarchy colour guidance on light
Type format example
Types sizes for body text
The default body font size is 18px. Depending on the application you can choose a font-size of 16px. The following classes are defined for this purpose text-standard
and text-small
.
Standard body text
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
Smaller body text
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
Letter-spacing
We achieve a compact type face by reducing letter spacing. With larger font sizes, a smaller letter is crucial for readability. The letter spacing is usually increased for very small font sizes.
Letter-spacing larger font size
Letter-spacing smaller font size
```section_develop
```
The SDX Library includes the two standard fonts TheSans and TheSerif . It uses its responsiveness to automatically adjust the font-size and properties depending on a series of media queries.
Body font size
The default font size is 18px. This font size will automatically be applied for the text. However, in certain cases where you want to change the default size, the class text-small
should be added to the HTML elements directly.
```htmlmixed
My body text size
My body text size
```
Smaller text
For smaller text for example asterisk notes add text-smaller
```htmlmixed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
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 and will automatically be applied to the text. However, in certain cases where TheSans must be explicitly applied then the font--sans
class should be added to the HTML elements directly.
```htmlmixed
Headline 4: Swisscom intends to continue reducing roaming prices
Swisscom intends to continue reducing roaming prices
```
Font Type Serif
This font font--serif
is only used for quotes.
```htmlmixed
We have to keep customer promises (Quote by Urs Schaeppi)
```
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
```
*/
/*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.
Resize your browser to see how the grid responds to different screen sizes
```section_design
```
Rules
Breakpoints
Breakpoint
Container
Gutter
Margin
CSS
>= 1440px
1356px
24px
Fluid
col-ul-*
>= 1280px
1200px
24px
Fluid
col-xl-*
>= 1024px
940px
24px
Fluid
col-lg-*
>= 768px
726px
16px
Fluid
col-md-*
>= 480px
428px
8px
Fluid
col-sm-*
< 480px
Fluid
8px
24px
col-xs-*
Which screen sizes are the most commonly used? See screen resolution stats .
Layout options
1440px — 480px column usage combinations
< 480px column usage combinations
Baseline grid
Our baseline dictates the horizontal positioning of typography across all screens within Swisscom services. No matter the screen width, margins or column width, the baseline grid is always set to 8px. This ensures a consistent treatment of type placement and line spacing across all products at all sizes.
Baseline grid
All typography, when using the defined sizes, will naturally align to the baseline grid. Graphic elements should aim to align to the baseline where possible but this isn’t mandatory.
Axis alignment
The concept of the Swisscom axis within SDX is derived from the Swisscom master brand, and the Life Form itself. Use the axis plotted on any grid column to create interesting and asymmetric layouts.
The axis alignment stems from the central axis of the Swisscom Life Form
Axis in application
Vertical aligment in an article
For mobile breakpoints, the left edge of page content aligns to the central axis in the Life Form and is always the outside margin of the underlying grid.
Vertical alignment on smaller screens
```section_develop
```
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.
```htmlmixed_no_preview
```
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 12 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.
Sample mobile-to-desktop layout
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_playground
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-8
col-xs-12 col-md-4
col-xs-12 col-md-4
col-xs-12 col-md-4
col-xs-12 col-md-4
col-xs-12 col-md-6
col-xs-12 col-md-6
```
Equal-width
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.
For example, here are two grid layouts that apply to every device and viewport, from xs to ul.
```htmlmixed_playground
```
Setting one column width
Auto-layout for 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_playground
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 themselves based on the natural width of their content. This comes in handy with single line content like inputs, numbers, etc. This, in conjunction with "horizontal alignment" classes, can be used for centering layouts with uneven column sizes as viewport width changes.
```htmlmixed_playground
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_playground
col-xs
col-xs
col-xs
col-xs
```
```htmlmixed_playground
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
Align the whole row
```htmlmixed_playground
```
Align individual items
```htmlmixed_playground
```
Horizontal alignment
```htmlmixed_playground
```
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_playground
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_playground
1st, but unordered
2nd, but last
3rd, 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_playground
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_playground
col-md-9 push-md-3
col-md-3 pull-md-9
```
Grid without margin (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_playground
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.
```section_design
```
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
```section_develop
```
```htmlmixed_webcomponent_sdx-loading-spinner_accessible
```
*/
/*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
```section_design
```
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
```section_develop
```
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
```section_design
```
```section_develop
```
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 graphical control elements that provide users a triggered event. They must contain a clear actionable text
and may additionally contain icons. Buttons are more visually dominant than text links. They guide the user through the
content as a visual highlight and act as "call to action".
```section_design
```
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 functionality 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.
Colourless button
Buttons on a coloured background should revert to the colourless theme and not use the interaction colours for buttons.
Transparent button
Transparent buttons can be used for interactive icons (i.e. 'Close' buttons or tooltip toggles), text with icons and text only.
When using only text, make sure not to confuse it with text links .
Buttons on 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 theme.
Light Variant
Dark Variant
Rules
Minimum Size
Buttons have a minimum width of 160px regardless of the word length to 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 16px 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 center aligned.
Full width buttons
Typography
Light Variant
Dark Variant
```section_develop
```
Button usage
For an example of how to use buttons in a form, please see samples/form .
Variations
There are four basic button themes: Primary, secondary, confirm and transparent. For buttons on coloured background,
set the attribute background="dark"
for all buttons. This way, the basic button will be shown colourless.
The fourth theme, theme="transparent"
comes with no border at all and can be used for example for
icon buttons or tooltip toggles (see section further down).
```htmlmixed_webcomponent_sdx-button_accessible
```
Layout
The sdx-button web component comes with two different layouts, the normal looking buttons and transparent ones.
They can be used for both buttons and links as well as for interactive icons. To get a link in button look, just add
the href
attribute with value.
As a general rule of thumb and to stay accessible, use a link for actions navigating to another page
and a button otherwise (e.g. opening and closing elements). Should the url have to navigate to a new tab or window,
this needs to be mentioned in the sr-hint
to mitigate confusion for the screen reader user.
```htmlmixed_playground_accessible
```
Icons and transparent buttons
Use theme="transparent"
when you want to make your single icons interactive.
Add theme="colorless"
when used on a coloured background.
Put a single icon into such a button in order to make it interactive and accessible in a more consistent and simpler
way. Remember to put an appropriate text for the screen reader for the sr-hint
property.
This theme can be used with both icons as well as text or a combination of it.
```htmlmixed_playground_accessible
```
Button Group
Buttons can be placed inside a sdx-button-group
. The Button Group then defines the layout and
size of the buttons.
Single buttons can be placed without a button group.
Button groups with the responsive
layout 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.
To make the buttons use the full width of a group, use the layout fill
.
Use the layout fullwidth
to make every button use 100% of the width of the container. Buttons will be
vertically aligned. Full width buttons should only be used in smaller containers, i.e. the sidebar or inside cards.
To keep the buttons from resizing, use the fixed
layout.
```htmlmixed_webcomponent_sdx-button-group_accessible
```
*/
/*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.
```section_design
```
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's input is invalid or breaks input rules, such as special characters and passwords (which should be explained to the user to avoid errors in advance).
Design Specifications
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
```section_develop
```
```htmlmixed_webcomponent_sdx-input_accessible
```
For an example of how to use input fields in a form, please see samples/form .
Basic usage
```htmlmixed_playground_accessible
```
Date
```htmlmixed_playground
```
Read-only and disabled
If you want to block the user from changing an input field add the readonly
or disabled
attribute to the sdx-input element.
The difference between the readonly
and the disabled
attribute is that in readonly
the user can tab to the element and copy the text from the input field.
```htmlmixed_playground
```
Validation
Display validation information to the users by using the attributes valid
and validation-message
.
Pass the required
attribute to the input field to denote them as required and make sure to explain the meaning of the asterisk in a legend below the form in the current customer language.
```htmlmixed_playground
```
Autocomplete
```htmlmixed_playground
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}
)}
)
}
}
```
*/
/*
/*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 when there is a list of two or more options that are mutually exclusive and the user must select
exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously
selected in the list.
Following design standards (since 1984) enhances users' ability to predict what a control will do and how they'll
operate it. When they see a list of radio buttons, they know that they can only select one.
Radio button lists provide a clearer overview of the users' 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 .
```section_design
```
Variations and Usage Rules
There are three variations of radio buttons provided in SDX. Such are the conventional radio buttons, the radio
button containers and lastly the option pickers with the same functionality as radio buttons - a learned pattern
only used for e-commerce.
Radio Button Containers do not replace the conventional Radio Buttons, so be careful with the usage of this variation.
There is always the possibility to use a description text in combination with a call-to-action button or the conventional
radio buttons.
Conventional Radio Button
Used in forms
Used in forms.
Must be positioned among themselves as fas as possible as users are working off one after the other steps in a form.
No pictures or graphics are used, the only exception being the error icons for the validation as well as the info icon of a tool tip
Radio Button Container
Used on sales and marketing pages
Used on sales, marketing or product detail pages as graphical element to highlight the importance of this element.
Can be positioned among themselves or side by side.
Can have an sdx-icon.
Can have headlines with additional descriptive text.
Design Specifications
Dimensions, colours and typography for conventional radio buttons and radio button containers
Dimensions, colours and typography for conventional radio buttons with multi-lines and radio buttons side-by-side
Dimensions, colours and typography for radio button containers with multi-lines, vertically arranged or side-by-side
```section_develop
```
```htmlmixed_webcomponent_sdx-input-item
Option 1
Option 2
Option 1
Multiple lines are also supported
Option 2
Additional description text for more information.
Option 3
This option can't be chosen.
```
For an example of how to use radio buttons in a form, please see samples/form .
Radio Button Container
Inline layout (example with flex)
```htmlmixed_playground
Network International
Multiline Option
CHF 9.00/month
International Calls
With the International Calls option, you can make unlimited calls.
Protection Plus
Covers your mobile phone against damage and misuse following theft.
```
Inline layout (example with fixed width)
```htmlmixed_playground
Network International
Multiline Option
CHF 9.00/month
International Calls
With the International Calls option, you can make unlimited calls.
Protection Plus
Covers your mobile phone against damage and misuse following theft.
```
Grid layout
```htmlmixed_playground
International Fixed Option
Network International
Multiline Option
CHF 9.00/month
International Calls
With the International Calls option, you can make unlimited calls.
Protection Plus
Covers your mobile phone against damage and misuse following theft.
```
Validation
To indicate to the user that a field or group is required, add the attribute required
. This way, an
Asterisk will be added at the end of the group label automatically. valid
needs to be set to false
and the validation-message
needs to be added by the consumer to trigger the invalid states. The validation
logic needs to be implemented by the consumer.
```htmlmixed_playground
* Mandatory field
```
*/
/*doc
---
title: Checkboxes
name: 02-components-050-form-20-checkboxes
category: Components - Checkboxes
---
Checkboxes are used when there are lists of options and the user may select any number of choices, including zero,
one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one
box doesn't uncheck the others. A stand-alone checkbox is used for a single option that the user can turn on or off.
Following design standards enhances users' ability to predict what a control will do and how they'll operate it.
When they see a list of checkboxes, users know that they can select multiple options.
```section_design
```
Variations and Usage Rules
There are two variations for checkboxes, the conventional checkbox and the ones surrounded by a container.
Checkbox containers do not replace the conventional checkboxes and should be used carefully. There's always the
option of using a description text in combination with a call-to-action button or the conventional checkboxes instead
of a checkbox container.
Conventional Checkbox
Used in forms
Used in forms.
Must be vertically arranged as fas as possible as users complete one after the other following a form top down.
When positioned horizontally, no more than two checkboxes must be put next to each other.
No pictures or graphics are used, the only exception being the error icons for the validation as well as the info icon of a tool tip.
Checkbox Container
Used on sales and marketing pages
Used on Sales, Marketing or PDP pages as graphical element to highlight the importance of this element.
Can be positioned vertically arranged or side by side.
Can have an sdx-icon.
Can have headlines with additional descriptive text.
Design Specifications
Dimensions, colours and typography for conventional checkboxes ans checkbox containers
Dimensions, colours and typography for conventional checkboxes with multi-lines and checkboxes side-by-side
Dimensions, colours and typography for checkbox containers with multi-lines, vertically arranged or side-by-side
```section_develop
```
```htmlmixed_webcomponent_sdx-input-item
A single stand-alone checkbox
Option 1
Option 2
Option 1
Multiple lines are also supported
Option 2
Additional description text for more information.
Option 3
This option can't be chosen.
```
For an example of how to use checkboxes in a form, please see samples/form .
Checkbox Container
Inline layout (example with flex)
```htmlmixed_playground
Network International
Multiline Option
CHF 9.00/month
International Calls
With the International Calls option, you can make unlimited calls.
Protection Plus
Covers your mobile phone against damage and misuse following theft.
```
Inline layout (example with fixed width)
```htmlmixed_playground
Network International
Multiline Option
CHF 9.00/month
International Calls
With the International Calls option, you can make unlimited calls.
Protection Plus
Covers your mobile phone against damage and misuse following theft.
```
Grid layout
```htmlmixed_playground
International Fixed Option
Network International
Multiline Option
CHF 9.00/month
International Calls
With the International Calls option, you can make unlimited calls.
Protection Plus
Covers your mobile phone against damage and misuse following theft.
```
Validation
To indicate to the user that a field or group is required, add the attribute required
. This way, an
Asterisk will be added at the end of the group label automatically. valid
needs to be set to false
and the validation-message
needs to be added by the consumer to trigger the invalid states. The validation
logic needs to be implemented by the consumer.
```htmlmixed_playground
Option 1
Option 1
Option 2
Option 1
Multiple lines are also supported
Option 2
Additional description text for more information.
* Mandatory field
```
*/
/*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
```section_design
```
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
```section_develop
```
```htmlmixed_webcomponent_sdx-select
Saab
Volvo
BMW
Mercedes
VW
Chevrolet
Chrysler
Mazda
MG
Toyota
```
For an example of how to use selects in a form, please see samples/form .
Validation
```htmlmixed_playground
Option 1
Option 2
Option 3
Option 4
Option 5
* Mandatory field
```
*/
/*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.
```section_design
```
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
```section_develop
```
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
```section_design
```
```section_develop
```
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: 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.
```section_design
```
Variations
Ordered list
Unordered list
Rules
Alignment
Numbers: Should be aligned to the baseline of the text and are right-aligned to the text.
Bullets: They are aligned to the vertical centre point of the text.
Vertical spacing between paragraphs or text and lists is set to 40px, and is measured from descender to ascender.
Space between elements
Insertion
Insertion spacing is 8px between text and the list element.
Typography
Typography unordered list
```section_develop
```
Bullet list
Bullet list single line
```htmlmixed_playground_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_playground_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.
```
Link list
When you display more than one link it is shown as a link list. The link list has a chevron to the right before each link element.
```htmlmixed_playground
Lorem ipsum dolor sit amet
```
Check list
```htmlmixed_playground_accessible
Lorem ipsum dolor sit amet
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
```
Numbered list
Numbered list single line
```htmlmixed_playground_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.
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_playground_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.
```section_design
```
```section_develop
```
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
```section_design
```
```section_develop
```
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.
```section_design
```
Variations
Standard
The green bar indicates the percentage of a task that is underway.
Loading bar with 30% completed
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
```section_develop
```
The SDX loading bar component with support for displaying the current progress as a bar, and with optional detail captions.
```htmlmixed
```
Loader without detail text
```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 .
```section_design
```
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
```section_develop
```
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
```
For closing the Modal, either call `close()` on the component manually,
or add either the `modal-close` or `modal-cancel` class to a button in the Modal.
The following events are triggered at the appropriate times: `opened`, `cancelled`, and `closed`.
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
```section_design
```
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 any content
These menus can also be used to house any kind of content, e.g. 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 any content
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
```section_develop
```
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.
Only use inline elements within sdx-menu-flyout-toggle
.
```htmlmixed_webcomponent_sdx-menu-flyout_accessible
Deutsch
English
Français
Italiano
Esperanto
```
Flyout with any content
These menus can also be used to house any kind of content. It is recommended to give them a width to make them fit your content. NOTE: Since they're responsive, they will change their width on mobiles, when there's not enough space. So make sure to create the content mobile-first.
```htmlmixed_playground_accessible
Welcome to My Swisscom
Log in to manage your invoices, products, orders and see more offers
```
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.
```section_design
```
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
```section_develop
```
Usage
```htmlmixed
Notification text
Default notification
Confirmation / Success notification
Alert / Warning 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
```section_design
```
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
```section_develop
```
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
```
For closing the Modal, either call `close()` on the component manually,
or add either the `modal-close` or `modal-cancel` class to a button in the Modal.
The following events are triggered at the appropriate times: `opened`, `cancelled`, and `closed`.
```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 and their label.
Share
Edit
Download
Delete
```section_design
```
```section_develop
```
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
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.
```htmlmixed_accessible
Share
Edit
Download
Delete
```
Horizontal Toolbar on dark background
If the Toolbar component is embedded in a dark background it automatically adjusts its styling accordingly.
```htmlmixed_accessible
Share
Edit
Download
Delete
```
Vertical Toolbar
The vertical Toolbar uses labels next to the icon. To get a vertical toolbar add the class toolbar--vertical
next to the toolbar
class.
```htmlmixed_accessible
Share
Edit
Download
Delete
```
Vertical Toolbar on dark background
If the Toolbar component is embedded in a dark background it automatically adjusts its styling accordingly.
```htmlmixed_accessible
Share
Edit
Download
Delete
```
Disabled Toolbar
To disable the entire toolbar add the class toolbar--disabled
to the toolbar and disable the buttons.
```htmlmixed_accessible
Share
Edit
Download
Delete
```
Disabled Toolbar items
To disable certain toolbar items, add the class item--disabled
and attributes disabled
to them.
```htmlmixed_accessible
Share
Edit
Download
Delete
```
Disabled Toolbar on dark background
```htmlmixed_accessible
Share
Edit
Download
Delete
```
*/
/*doc
---
title: Progress Bar (header)
name: 02-components-138-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.
```section_design
```
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
```section_develop
```
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
```
*/
/*doc
---
title: Progress Bar (header)
name: 02-components-138-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.
```section_design
```
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
```section_develop
```
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
```
*/
/*doc
---
title: Ribbons & Stickers
name: 02-components-145-ribbons-and-stickers
category: Components - Ribbons & Stickers
---
For marketing and sales there are two possible elements which should be used very carefully:
Ribbons:
Best used on product lists or sliders to differentiate the product family (e.g. devices).
Stickers:
Can be used on teasers, banners, images, products to show the uniqueness (e.g. “Only at Swisscom”, “Get 10% off”, etc.).
As it should draw the user’s attention to a special condition of a product (e.g. special price, new product,
for a defined period of time, etc.), the usage must be well measured. Otherwise the user’s attention is spread
across too many featured offers, which then is counter-productive and overwhelming.
Rule for e.g. a section like “Current offers”:
Ribbons: Only 2 different ribbons (e.g. one with a special price, one for a new product) on a page.
Stickers: Only 1 sticker on a page.
Ribbons combined with sticker: 2 ribbons, 1 sticker – but be careful.
```section_design
```
Variations
Ribbons
There are two variations of ribbons, one on the corner and one the side.
Small ribbon on the corner
Small ribbon on the side
Stickers
There are variations of stickers in size and colour.
Rules
Ribbons
For each variant you can use a small (14px), medium (16px) and large font size (18px).
The ribbons can be placed on the left and right hand side.
Guidelines for ribbon on the corner
Guidelines for ribbon on the side
Stickers
As a sticker should be flexible in size depending on the content there are 5 possible sizes (diameter)
in which the text can be placed: 112 px, 120 px, 160 px, 180 px, 240 px.
SD Karte zusätzlich geschenkt
Guidelines for stickers
Typography
Ribbons Typography
```section_develop
```
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
```
Below you can see Sticker examples.
```htmlmixed_webcomponent_sdx-sticker-circle_accessible
sparen
SD Karte zusätzlich geschenkt
Bis 5x
sparen
XTRA
Rabatte
```
```htmlmixed_webcomponent_sdx-price_accessible
```
*/
/*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.
```section_design
```
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
```section_develop
```
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
```
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
```
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
```
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%.
```section_design
```
Mini Pie Chart
The Mini Pie chart can be used to conserve space in appropriate situations, for example in tables or cards. Unlike the regular Pie chart, they only display one single value and have no gaps or open ends.
Stacked pie chart
Dark variant
```section_develop
```
Pie charts are used to show percentage based data. Data is shown in segments of different colours, with the sum total equalling 100%.
```htmlmixed_webcomponent_sdx-pie-chart_accessible
```
Variations
Mini Pie Chart
```htmlmixed_playground_accessible
```
Dark style
```htmlmixed_playground_accessible
```
*/
/*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
```section_design
```
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
```section_develop
```
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
```section_design
```
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
```section_develop
```
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.
Lorem ipsum. The content for the tab "Overview".
Product description
The new iPad Pro features an advanced 12.9'' all-screen Liquid Retina display.
Face ID to unlock your iPad Pro, log into apps and authorise payments, all with your face. The A12X Bionic chip,
which is faster than most PC notebooks and ensures that even pro apps run easily.
12.9'' Liquid Retina display
12 megapixel camera
7 megapixel TrueDepth front camera and face ID
A12X Bionic chip with neutral engine
This tab is disabled.
```section_design
```
Variations and Usage Rules
Only white background below the tabs and their content.
Keep tab labels as short as possible.
It is suggested to not have more than 6 tabs.
When there is not enough space available horizontally for all tabs, a scroll mechanism is added.
Only use disabled tabs if really necessary and only for CUC or Agent context.
Otherwise, they would only add to a bad user experience and confusion.
Design Specifications
Measurements and spacings of tabs
```section_develop
```
```htmlmixed_webcomponent_sdx-tabs
This is the content of Tab 1.
This is the content of the Tab 2.
This is the content of Tab 3.
This is the content of Tab 4.
This is the content of Tab 5.
This is the content of the disabled Tab 6.
```
Tabs with icons
```htmlmixed_playground
Today's weather is sunny.
Today's weather is rainy.
Today's weather is snowy.
```
*/
/*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.
```section_design
```
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
```section_develop
```
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 .
```section_design
```
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
```section_develop
```
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.
```section_design
```
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
```section_develop
```
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
```section_design
```
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
```section_develop
```
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.
```section_design
```
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
```section_develop
```
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 .
```section_design
```
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
```section_develop
```
Desktop Search
```htmlmixed_accessible
```
Mobile Search
```htmlmixed_accessible
```
Inline Search
```htmlmixed_webcomponent_sdx-search_accessible
```
Colour options
Light Color
```htmlmixed_accessible
```
Search Live
Desktop Search
```htmlmixed_accessible
iPho ne 7 Plus
iPho ne 6s
iPho ne 5s
iPho ne 6s Plus
iPho ne SE 64GB
```
Mobile Search
```htmlmixed_accessible
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
```section_design
```
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
```section_develop
```
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.
```section_design
```
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
```section_develop
```
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: 04-developers-02-clearfix
category: Developers - Clearfix utils
---
Easily clear floats by adding .clearfix
to the parent element.
```htmlmixed_no_preview
...
```
Can also be used as a mixin.
```css_no_preview
// Usage as a mixin
.element {
@include clearfix;
}
```
*/
/*doc
---
title: Margin
name: 04-developers-03-margin
category: Developers - Margin utils
---
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 on the left side of the element:
.margin-left-0
.margin-left-1
.margin-left-2
.margin-left-3
.margin-left-4
Margin on the right side of the element:
.margin-right-0
.margin-right-1
.margin-right-2
.margin-right-3
.margin-right-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: 04-developers-04-padding
category: Developers - Padding utils
---
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 on the left side of the element:
.padding-left-0
.padding-left-1
.padding-left-2
.padding-left-3
.padding-left-4
Padding on the right side of the element:
.padding-right-0
.padding-right-1
.padding-right-2
.padding-right-3
.padding-right-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: 04-developers-05-screenreaders
category: Developers - Screen Reader utils
---
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).
```htmlmixed_no_preview
Skip to main content
```
Can also be used as a mixin.
```css_no_preview
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
```
*/
/*doc
---
title: Text
name: 04-developers-06-text
category: Developers - Text utils
---
Text alignment
Easily realign text to components with text alignment classes.
```htmlmixed_playground
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_playground
Lowercased text.
Uppercased text.
capiTaliZed text.
```
Text truncate
Trunctate texts using the CSS class .text-truncate
(which adds an ellipsis).
```htmlmixed_playground
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.
```
In cases where the CSS class .text-truncate
does not work (because of ::before
), the Web Component <sdx-text-truncate />
can be used.
```htmlmixed_playground
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_playground
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: 04-developers-07-visibility
category: Developers - Visibility utils
---
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 {
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 body {
margin: 0;
}
.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;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
text-rendering: optimizeLegibility;
color: #333;
box-sizing: border-box;
}
.sdx-container .major-wrapper {
display: flex;
flex-direction: column;
}
.sdx-container .main-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.sdx-container .main-wrapper.flex {
flex: 1 0 auto;
}
.sdx-container .page {
flex: 1 0 auto;
min-height: 1px;
}
.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 .text-body-1,
.sdx-container .text-standard {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
}
.sdx-container .text-body-2,
.sdx-container .text-small {
line-height: 24px;
letter-spacing: 0;
font-size: 16px;
}
.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;
padding: 0;
text-align: left;
word-wrap: break-word;
}
.sdx-container h1, .sdx-container .text-h1,
.sdx-container h2, .sdx-container .text-h2 {
margin-bottom: 32px;
}
.sdx-container h3, .sdx-container .text-h3,
.sdx-container h4, .sdx-container .text-h4 {
margin-bottom: 24px;
}
.sdx-container h5, .sdx-container .text-h5,
.sdx-container h6, .sdx-container .text-h6 {
margin-bottom: 8px;
}
.sdx-container p {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 400;
margin-bottom: 32px;
}
.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;
font-weight: 300;
}
.sdx-container h3.text-compact, .sdx-container .text-h3.text-compact {
line-height: 31px;
}
.sdx-container h4, .sdx-container .text-h4 {
line-height: 32px;
letter-spacing: -0.35px;
font-size: 24px;
font-weight: 300;
}
.sdx-container h4.text-compact, .sdx-container .text-h4.text-compact {
line-height: 27px;
}
.sdx-container h5, .sdx-container .text-h5 {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
font-weight: 600;
}
.sdx-container h6, .sdx-container .text-h6 {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 16px;
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 .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,
.sdx-container .text-smaller {
line-height: 24px;
letter-spacing: 0.1px;
font-size: 14px;
font-weight: 400;
}
.sdx-container .text-compact {
line-height: 21px;
}
.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 {
order: -1;
}
.sdx-container .flex-xs-last {
order: 1;
}
.sdx-container .flex-xs-unordered {
order: 0;
}
.sdx-container .flex-items-xs-top {
align-items: flex-start;
}
.sdx-container .flex-items-xs-middle {
align-items: center;
}
.sdx-container .flex-items-xs-bottom {
align-items: flex-end;
}
.sdx-container .flex-xs-top {
align-self: flex-start;
}
.sdx-container .flex-xs-middle {
align-self: center;
}
.sdx-container .flex-xs-bottom {
align-self: flex-end;
}
.sdx-container .flex-items-xs-left {
justify-content: flex-start;
}
.sdx-container .flex-items-xs-center {
justify-content: center;
}
.sdx-container .flex-items-xs-right {
justify-content: flex-end;
}
.sdx-container .flex-items-xs-around {
justify-content: space-around;
}
.sdx-container .flex-items-xs-between {
justify-content: space-between;
}
}
@media (min-width: 480px) {
.sdx-container .flex-sm-first {
order: -1;
}
.sdx-container .flex-sm-last {
order: 1;
}
.sdx-container .flex-sm-unordered {
order: 0;
}
.sdx-container .flex-items-sm-top {
align-items: flex-start;
}
.sdx-container .flex-items-sm-middle {
align-items: center;
}
.sdx-container .flex-items-sm-bottom {
align-items: flex-end;
}
.sdx-container .flex-sm-top {
align-self: flex-start;
}
.sdx-container .flex-sm-middle {
align-self: center;
}
.sdx-container .flex-sm-bottom {
align-self: flex-end;
}
.sdx-container .flex-items-sm-left {
justify-content: flex-start;
}
.sdx-container .flex-items-sm-center {
justify-content: center;
}
.sdx-container .flex-items-sm-right {
justify-content: flex-end;
}
.sdx-container .flex-items-sm-around {
justify-content: space-around;
}
.sdx-container .flex-items-sm-between {
justify-content: space-between;
}
}
@media (min-width: 768px) {
.sdx-container .flex-md-first {
order: -1;
}
.sdx-container .flex-md-last {
order: 1;
}
.sdx-container .flex-md-unordered {
order: 0;
}
.sdx-container .flex-items-md-top {
align-items: flex-start;
}
.sdx-container .flex-items-md-middle {
align-items: center;
}
.sdx-container .flex-items-md-bottom {
align-items: flex-end;
}
.sdx-container .flex-md-top {
align-self: flex-start;
}
.sdx-container .flex-md-middle {
align-self: center;
}
.sdx-container .flex-md-bottom {
align-self: flex-end;
}
.sdx-container .flex-items-md-left {
justify-content: flex-start;
}
.sdx-container .flex-items-md-center {
justify-content: center;
}
.sdx-container .flex-items-md-right {
justify-content: flex-end;
}
.sdx-container .flex-items-md-around {
justify-content: space-around;
}
.sdx-container .flex-items-md-between {
justify-content: space-between;
}
}
@media (min-width: 1024px) {
.sdx-container .flex-lg-first {
order: -1;
}
.sdx-container .flex-lg-last {
order: 1;
}
.sdx-container .flex-lg-unordered {
order: 0;
}
.sdx-container .flex-items-lg-top {
align-items: flex-start;
}
.sdx-container .flex-items-lg-middle {
align-items: center;
}
.sdx-container .flex-items-lg-bottom {
align-items: flex-end;
}
.sdx-container .flex-lg-top {
align-self: flex-start;
}
.sdx-container .flex-lg-middle {
align-self: center;
}
.sdx-container .flex-lg-bottom {
align-self: flex-end;
}
.sdx-container .flex-items-lg-left {
justify-content: flex-start;
}
.sdx-container .flex-items-lg-center {
justify-content: center;
}
.sdx-container .flex-items-lg-right {
justify-content: flex-end;
}
.sdx-container .flex-items-lg-around {
justify-content: space-around;
}
.sdx-container .flex-items-lg-between {
justify-content: space-between;
}
}
@media (min-width: 1280px) {
.sdx-container .flex-xl-first {
order: -1;
}
.sdx-container .flex-xl-last {
order: 1;
}
.sdx-container .flex-xl-unordered {
order: 0;
}
.sdx-container .flex-items-xl-top {
align-items: flex-start;
}
.sdx-container .flex-items-xl-middle {
align-items: center;
}
.sdx-container .flex-items-xl-bottom {
align-items: flex-end;
}
.sdx-container .flex-xl-top {
align-self: flex-start;
}
.sdx-container .flex-xl-middle {
align-self: center;
}
.sdx-container .flex-xl-bottom {
align-self: flex-end;
}
.sdx-container .flex-items-xl-left {
justify-content: flex-start;
}
.sdx-container .flex-items-xl-center {
justify-content: center;
}
.sdx-container .flex-items-xl-right {
justify-content: flex-end;
}
.sdx-container .flex-items-xl-around {
justify-content: space-around;
}
.sdx-container .flex-items-xl-between {
justify-content: space-between;
}
}
@media (min-width: 1440px) {
.sdx-container .flex-ul-first {
order: -1;
}
.sdx-container .flex-ul-last {
order: 1;
}
.sdx-container .flex-ul-unordered {
order: 0;
}
.sdx-container .flex-items-ul-top {
align-items: flex-start;
}
.sdx-container .flex-items-ul-middle {
align-items: center;
}
.sdx-container .flex-items-ul-bottom {
align-items: flex-end;
}
.sdx-container .flex-ul-top {
align-self: flex-start;
}
.sdx-container .flex-ul-middle {
align-self: center;
}
.sdx-container .flex-ul-bottom {
align-self: flex-end;
}
.sdx-container .flex-items-ul-left {
justify-content: flex-start;
}
.sdx-container .flex-items-ul-center {
justify-content: center;
}
.sdx-container .flex-items-ul-right {
justify-content: flex-end;
}
.sdx-container .flex-items-ul-around {
justify-content: space-around;
}
.sdx-container .flex-items-ul-between {
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: flex;
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 {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.sdx-container .col-xs-auto {
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-xs-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-xs-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-xs-3 {
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-xs-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-xs-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-xs-6 {
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-xs-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-xs-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-xs-9 {
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-xs-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-xs-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-xs-12 {
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 {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.sdx-container .col-sm-auto {
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-sm-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-sm-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-sm-3 {
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-sm-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-sm-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-sm-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-sm-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-sm-9 {
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-sm-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-sm-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-sm-12 {
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 {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.sdx-container .col-md-auto {
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-md-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-md-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-md-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-md-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-md-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-md-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-md-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-md-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-md-12 {
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 {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.sdx-container .col-lg-auto {
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-lg-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-lg-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-lg-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-lg-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-lg-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-lg-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-lg-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-lg-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-lg-12 {
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 {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.sdx-container .col-xl-auto {
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-xl-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-xl-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-xl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-xl-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-xl-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-xl-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-xl-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-xl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-xl-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-xl-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-xl-12 {
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 {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.sdx-container .col-ul-auto {
flex: 0 0 auto;
width: auto;
}
.sdx-container .col-ul-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.sdx-container .col-ul-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.sdx-container .col-ul-3 {
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .col-ul-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sdx-container .col-ul-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.sdx-container .col-ul-6 {
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .col-ul-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.sdx-container .col-ul-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.sdx-container .col-ul-9 {
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .col-ul-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.sdx-container .col-ul-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.sdx-container .col-ul-12 {
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;
backface-visibility: hidden;
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 (-o-min-device-pixel-ratio: 2/1), 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");
}
}
@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;
backface-visibility: hidden;
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 (-o-min-device-pixel-ratio: 2/1), 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");
}
}
@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;
backface-visibility: hidden;
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 (-o-min-device-pixel-ratio: 2/1), 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");
}
}
@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;
backface-visibility: hidden;
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 (-o-min-device-pixel-ratio: 2/1), 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");
}
}
@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;
backface-visibility: hidden;
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 (-o-min-device-pixel-ratio: 2/1), 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");
}
}
@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;
backface-visibility: hidden;
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 (-o-min-device-pixel-ratio: 2/1), 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");
}
}
@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: flex;
margin: -8px -8px;
flex-wrap: wrap;
}
.sdx-container .button-group .button {
margin: 8px 8px;
}
.sdx-container .button-group--responsive {
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 {
justify-content: flex-end;
}
@media (min-width: 480px) {
.sdx-container .button-group--fill {
flex-wrap: nowrap;
}
}
.sdx-container .button-group--fill .button {
width: 100%;
min-width: 0;
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;
transform-origin: 50% 50%;
user-select: none;
}
.sdx-container .button:active {
transform: scale(0.98);
}
.sdx-container .button.disabled, .sdx-container .button:disabled {
cursor: not-allowed;
}
.sdx-container .button.disabled:active, .sdx-container .button:disabled:active {
pointer-events: none;
transform: 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 {
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: 16px;
}
.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;
}
@keyframes onAutoFillStart {
from {
/* Empty */
}
to {
/* Empty */
}
}
.sdx-container input:-webkit-autofill,
.sdx-container textarea:-webkit-autofill {
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}
.sdx-container .input-field {
box-sizing: border-box;
position: relative;
margin-bottom: 16px;
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:hover input:not([type]),
.sdx-container .input-field:hover input[type=text],
.sdx-container .input-field:hover input[type=password],
.sdx-container .input-field:hover input[type=email],
.sdx-container .input-field:hover input[type=url],
.sdx-container .input-field:hover input[type=time],
.sdx-container .input-field:hover input[type=date],
.sdx-container .input-field:hover input[type=datetime],
.sdx-container .input-field:hover input[type=datetime-local],
.sdx-container .input-field:hover input[type=tel],
.sdx-container .input-field:hover input[type=number],
.sdx-container .input-field:hover input[type=search],
.sdx-container .input-field:hover textarea {
border-color: #858585;
}
.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 #bbb;
border-radius: 5px;
background-color: #fff;
padding: 0 16px;
width: 100%;
height: 48px;
color: #333;
font-weight: 300;
user-select: text;
backface-visibility: hidden;
caret-color: #1781e3;
}
.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;
transform: translateY(24px);
transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
cursor: text;
color: #666;
font-size: 16px;
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])::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 {
transform: translateY(0);
opacity: 1;
}
.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]):disabled + label, .sdx-container .input-field input:not([type])[readonly], .sdx-container .input-field input:not([type])[readonly] + label,
.sdx-container .input-field input[type=text]:disabled,
.sdx-container .input-field input[type=text]:disabled + label,
.sdx-container .input-field input[type=text][readonly],
.sdx-container .input-field input[type=text][readonly] + label,
.sdx-container .input-field input[type=password]:disabled,
.sdx-container .input-field input[type=password]:disabled + label,
.sdx-container .input-field input[type=password][readonly],
.sdx-container .input-field input[type=password][readonly] + label,
.sdx-container .input-field input[type=email]:disabled,
.sdx-container .input-field input[type=email]:disabled + label,
.sdx-container .input-field input[type=email][readonly],
.sdx-container .input-field input[type=email][readonly] + label,
.sdx-container .input-field input[type=url]:disabled,
.sdx-container .input-field input[type=url]:disabled + label,
.sdx-container .input-field input[type=url][readonly],
.sdx-container .input-field input[type=url][readonly] + label,
.sdx-container .input-field input[type=time]:disabled,
.sdx-container .input-field input[type=time]:disabled + label,
.sdx-container .input-field input[type=time][readonly],
.sdx-container .input-field input[type=time][readonly] + label,
.sdx-container .input-field input[type=date]:disabled,
.sdx-container .input-field input[type=date]:disabled + label,
.sdx-container .input-field input[type=date][readonly],
.sdx-container .input-field input[type=date][readonly] + label,
.sdx-container .input-field input[type=datetime]:disabled,
.sdx-container .input-field input[type=datetime]:disabled + label,
.sdx-container .input-field input[type=datetime][readonly],
.sdx-container .input-field input[type=datetime][readonly] + label,
.sdx-container .input-field input[type=datetime-local]:disabled,
.sdx-container .input-field input[type=datetime-local]:disabled + label,
.sdx-container .input-field input[type=datetime-local][readonly],
.sdx-container .input-field input[type=datetime-local][readonly] + label,
.sdx-container .input-field input[type=tel]:disabled,
.sdx-container .input-field input[type=tel]:disabled + label,
.sdx-container .input-field input[type=tel][readonly],
.sdx-container .input-field input[type=tel][readonly] + label,
.sdx-container .input-field input[type=number]:disabled,
.sdx-container .input-field input[type=number]:disabled + label,
.sdx-container .input-field input[type=number][readonly],
.sdx-container .input-field input[type=number][readonly] + label,
.sdx-container .input-field input[type=search]:disabled,
.sdx-container .input-field input[type=search]:disabled + label,
.sdx-container .input-field input[type=search][readonly],
.sdx-container .input-field input[type=search][readonly] + label,
.sdx-container .input-field textarea:disabled,
.sdx-container .input-field textarea:disabled + label,
.sdx-container .input-field textarea[readonly],
.sdx-container .input-field textarea[readonly] + label {
opacity: 0.4 !important;
cursor: not-allowed;
}
.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: #bbb;
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]).valid:hover,
.sdx-container .input-field input[type=text].valid:hover,
.sdx-container .input-field input[type=password].valid:hover,
.sdx-container .input-field input[type=email].valid:hover,
.sdx-container .input-field input[type=url].valid:hover,
.sdx-container .input-field input[type=time].valid:hover,
.sdx-container .input-field input[type=date].valid:hover,
.sdx-container .input-field input[type=datetime].valid:hover,
.sdx-container .input-field input[type=datetime-local].valid:hover,
.sdx-container .input-field input[type=tel].valid:hover,
.sdx-container .input-field input[type=number].valid:hover,
.sdx-container .input-field input[type=search].valid:hover,
.sdx-container .input-field textarea.valid:hover {
border-color: #858585;
}
.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: #d12;
color: #d12;
}
.sdx-container .input-field input:not([type]).invalid:hover,
.sdx-container .input-field input[type=text].invalid:hover,
.sdx-container .input-field input[type=password].invalid:hover,
.sdx-container .input-field input[type=email].invalid:hover,
.sdx-container .input-field input[type=url].invalid:hover,
.sdx-container .input-field input[type=time].invalid:hover,
.sdx-container .input-field input[type=date].invalid:hover,
.sdx-container .input-field input[type=datetime].invalid:hover,
.sdx-container .input-field input[type=datetime-local].invalid:hover,
.sdx-container .input-field input[type=tel].invalid:hover,
.sdx-container .input-field input[type=number].invalid:hover,
.sdx-container .input-field input[type=search].invalid:hover,
.sdx-container .input-field textarea.invalid:hover {
border-color: #be0000;
}
.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;
font-size: 16px;
}
.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 {
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 {
transform: translateY(0);
opacity: 1;
}
.sdx-container .input-field--autocomplete .autocomplete {
position: absolute;
transform: scale(1, 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 {
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 {
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: 16px;
}
.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;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-touch-action: manipulation;
touch-action: manipulation;
background: #fff;
-webkit-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);
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) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.sdx-container .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
-webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
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-box;
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-box-flex: 1;
-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 {
-webkit-transition: fill 0.1s;
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);
-webkit-box-sizing: border-box;
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;
-webkit-box-sizing: border-box;
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-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 28px;
}
.sdx-container .flatpickr-weekdays .flatpickr-weekdaycontainer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-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-box-flex: 1;
-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-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-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;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: -ms-flexbox;
display: -webkit-box;
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 {
-webkit-box-shadow: -1px 0 0 #e6e6e6;
box-shadow: -1px 0 0 #e6e6e6;
}
.sdx-container .flatpickr-day {
background: none;
border: 1px solid transparent;
border-radius: 150px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #393939;
cursor: pointer;
font-weight: 400;
width: 14.2857143%;
-webkit-flex-basis: 14.2857143%;
-ms-flex-preferred-size: 14.2857143%;
flex-basis: 14.2857143%;
max-width: 39px;
height: 39px;
line-height: 39px;
margin: 0;
display: inline-block;
position: relative;
-webkit-box-pack: center;
-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;
-webkit-box-shadow: none;
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)) {
-webkit-box-shadow: -10px 0 0 #569ff7;
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;
-webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
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;
-webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
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;
-webkit-box-shadow: 1px 0 0 #e6e6e6;
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-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.sdx-container .flatpickr-rContainer {
display: inline-block;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.sdx-container .flatpickr-time {
text-align: center;
outline: 0;
display: block;
height: 0;
line-height: 40px;
max-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sdx-container .flatpickr-time:after {
content: "";
display: table;
clear: both;
}
.sdx-container .flatpickr-time .numInputWrapper {
-webkit-box-flex: 1;
-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;
-webkit-box-shadow: none;
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;
-webkit-box-sizing: border-box;
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);
}
}
@keyframes fpFadeOutDown {
from {
visibility: visible;
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -20px, 0);
}
}
@keyframes fpFadeOutUp {
from {
visibility: visible;
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 20px, 0);
}
}
@keyframes fpFadeInUp {
from {
visibility: hidden;
transform: translate3d(0, 20px, 0);
}
to {
visibility: visible;
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);
transform-origin: 0 0;
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);
transform-origin: 0 0;
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;
animation: fpFadeOutDown 200ms;
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 {
animation-name: fpFadeOutUp;
}
.sdx-container .flatpickr-calendar.animate.arrowBottom.open {
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 {
box-sizing: border-box;
}
.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;
display: inline-block;
position: relative;
cursor: pointer;
margin-bottom: 0;
padding-left: 36px;
color: #333;
user-select: none;
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);
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;
transform: scale(0);
}
.sdx-container .radio [type=radio]:hover + label::before {
border: 2px solid #858585;
}
.sdx-container .radio [type=radio]:hover + label::after {
background: #858585;
border: 5px solid #858585;
border-radius: 52%;
content: "";
left: 6px;
opacity: 1;
position: absolute;
top: 6px;
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;
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;
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;
font-size: 16px;
}
.sdx-container .checkbox {
box-sizing: border-box;
}
.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;
font-size: 16px;
}
.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;
user-select: none;
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 {
transform: scale(0);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
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 #858585;
background: transparent;
}
.sdx-container .checkbox [type=checkbox]:hover + label::after {
transform: scale(0.5);
color: #858585;
}
.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 {
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 {
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;
}
.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 {
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 {
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 {
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 {
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;
user-select: none;
}
.sdx-container .select:last-of-type {
margin-bottom: 0;
}
.sdx-container .select:hover .select__placeholder {
border-color: #858585;
}
.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 {
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: 2px;
background: #0851da;
width: 10px;
height: 2px;
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: 6px;
}
.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: 30px;
height: inherit;
color: #1781e3;
transform-origin: 50% 50%;
}
.sdx-container .select .select__thumb .thumb-icon {
position: relative;
display: flex;
margin: 0;
width: 100%;
height: 100%;
pointer-events: none;
align-items: center;
justify-content: center;
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: 2px;
background: #1781e3;
width: 10px;
height: 2px;
backface-visibility: hidden;
content: "";
}
.sdx-container .select .select__thumb .thumb-icon::before {
left: 0;
}
.sdx-container .select .select__thumb .thumb-icon::after {
left: 6px;
}
.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 #bbb;
border-radius: 5px;
cursor: inherit;
padding: 12px 55px 12px 15px;
width: 100%;
height: inherit;
transition: border 200ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-appearance: none;
}
.sdx-container .select .select__dropdown {
position: absolute;
right: 0;
left: 0;
margin-bottom: 20px;
transform: scale(1, 1);
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 #bbb;
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: #bbb;
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;
font-size: 16px;
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 #bbb;
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 {
transform: rotate(45deg);
}
.sdx-container .select--closed .select__thumb .thumb-icon::after {
transform: rotate(-45deg);
}
.sdx-container .select--closed .select__dropdown {
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 {
transform: rotate(-45deg);
}
.sdx-container .select--open .select__thumb .thumb-icon::after {
transform: rotate(45deg);
}
.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: 2px;
background: #1781e3;
width: 10px;
height: 2px;
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: 6px;
}
.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: 2px;
background: #0851da;
width: 10px;
height: 2px;
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: 6px;
}
.sdx-container .select--minimal .select__placeholder {
border: 0;
border-bottom: 1px solid #bbb;
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 #bbb;
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: 5px solid #1781e3;
border-radius: 0;
box-shadow: none;
color: #333;
}
.sdx-container select {
display: block;
position: relative;
border: 1px solid #bbb;
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: flex;
position: relative;
margin-bottom: 12px;
backface-visibility: hidden;
}
.sdx-container .switch p {
line-height: 24px;
letter-spacing: -0.1px;
font-size: 18px;
position: relative;
top: 2px;
color: #333;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.sdx-container .switch [type=checkbox]:not(:checked),
.sdx-container .switch [type=checkbox]:checked {
position: absolute;
left: 0;
opacity: 0;
top: 8px;
width: 60px;
height: 30px;
}
.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;
align-items: center;
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, .sdx-container .switch [type=checkbox]:disabled + label {
cursor: not-allowed;
opacity: 0.4;
filter: alpha(opacity=40);
}
.sdx-container .switch [type=checkbox]:disabled + label:hover::after {
border-color: #adadad;
}
.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;
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;
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);
transform: scale(0);
transition: 120ms all ease-in-out;
z-index: 5;
border-radius: 100%;
background: #0851da;
width: 5px;
height: 5px;
content: "";
transform-origin: 50% 50%;
}
.sdx-container .range .range-tick__label {
font-weight: 400;
position: relative;
text-align: center;
color: #333;
font-size: 14px;
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 {
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;
transform-origin: 50% 50%;
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);
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 {
transform: scale(1);
}
.sdx-container .range--active .range-thumb {
border-color: #0851da;
background-color: #0851da;
}
.sdx-container .range--active .range-thumb .range-thumb__value {
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 {
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 {
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 {
transform: scale(0);
}
.sdx-container .range--dragging .range-tick:hover::after {
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 {
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 {
transform: scale(1);
}
.sdx-container .bg--dark .range--disabled {
opacity: 0.5;
}
.sdx-container .bg--dark .range--disabled .range-thumb .range-thumb__value {
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 {
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;
transform-origin: 50% 50%;
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%;
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%;
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: flex;
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=radio].disabled > label, .sdx-container .segmented-controls-group [type=radio]:disabled + label,
.sdx-container .segmented-controls-group [type=checkbox].disabled > label,
.sdx-container .segmented-controls-group [type=checkbox]:disabled + label,
.sdx-container .toggle-button-group [type=radio].disabled > label,
.sdx-container .toggle-button-group [type=radio]:disabled + label,
.sdx-container .toggle-button-group [type=checkbox].disabled > label,
.sdx-container .toggle-button-group [type=checkbox]:disabled + label {
cursor: not-allowed;
opacity: 0.4;
filter: alpha(opacity=40);
}
.sdx-container .segmented-controls-group [type=radio] + label,
.sdx-container .segmented-controls-group [type=checkbox] + label,
.sdx-container .toggle-button-group [type=radio] + label,
.sdx-container .toggle-button-group [type=checkbox] + label {
background-color: #fff;
border: 1px solid #d6d6d6;
border-radius: 5px;
color: #333;
cursor: pointer;
font-size: 18px;
padding: 12px 24px;
margin-right: 16px;
margin-bottom: 16px;
font-weight: 400;
}
.sdx-container .segmented-controls-group [type=radio] + label:active, .sdx-container .segmented-controls-group [type=radio] + label:focus,
.sdx-container .segmented-controls-group [type=checkbox] + label:active,
.sdx-container .segmented-controls-group [type=checkbox] + label:focus,
.sdx-container .toggle-button-group [type=radio] + label:active,
.sdx-container .toggle-button-group [type=radio] + label:focus,
.sdx-container .toggle-button-group [type=checkbox] + label:active,
.sdx-container .toggle-button-group [type=checkbox] + label:focus {
outline: none;
}
.sdx-container .segmented-controls-group [type=radio] + label:last-child,
.sdx-container .segmented-controls-group [type=checkbox] + label:last-child,
.sdx-container .toggle-button-group [type=radio] + label:last-child,
.sdx-container .toggle-button-group [type=checkbox] + label:last-child {
margin-right: 0;
}
.sdx-container .segmented-controls-group [type=radio]:checked + label,
.sdx-container .segmented-controls-group [type=checkbox]:checked + label,
.sdx-container .toggle-button-group [type=radio]:checked + label,
.sdx-container .toggle-button-group [type=checkbox]:checked + label {
border-color: #1781e3;
color: #1781e3;
}
.sdx-container .segmented-controls-group [type=radio]:checked + label:hover,
.sdx-container .segmented-controls-group [type=checkbox]:checked + label:hover,
.sdx-container .toggle-button-group [type=radio]:checked + label:hover,
.sdx-container .toggle-button-group [type=checkbox]:checked + label:hover {
color: #0851da;
}
.sdx-container .segmented-controls-group [type=radio]:disabled + label:hover,
.sdx-container .segmented-controls-group [type=checkbox]:disabled + label:hover,
.sdx-container .toggle-button-group [type=radio]:disabled + label:hover,
.sdx-container .toggle-button-group [type=checkbox]:disabled + label:hover {
border-color: #d6d6d6;
color: #333;
}
.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: 280px;
}
.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 ol.list li::after, .sdx-container ul.list li {
margin-bottom: 13px;
}
@media (min-width: 480px) {
.sdx-container ol.list li::after, .sdx-container ul.list li {
margin-bottom: 12px;
}
}
.sdx-container ol.list.single-line li::after, .sdx-container ul.list li.single-line, .sdx-container ul.list.single-line li {
margin-bottom: 7px;
}
@media (min-width: 480px) {
.sdx-container ol.list.single-line li::after, .sdx-container ul.list li.single-line, .sdx-container ul.list.single-line li {
margin-bottom: 6px;
}
}
.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: 24px;
margin-bottom: 24px;
}
.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 {
margin-left: 18px;
}
.sdx-container ul.list li::before {
color: #1781e3;
float: left;
margin-left: -18px;
font-size: 33px;
}
.sdx-container ul.list li:not([class*=icon-])::before {
content: "•";
}
.sdx-container ul.list li[class*=icon-]::before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
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;
position: relative;
top: 3px;
right: 2px;
}
.sdx-container ol.list {
counter-reset: mycounter;
display: table;
}
.sdx-container ol.list li {
list-style: none;
counter-increment: mycounter;
display: table-row;
}
.sdx-container ol.list li::before {
content: counter(mycounter) ".";
font-weight: 600;
display: table-cell;
text-align: right;
padding-right: 8px;
color: #1781e3;
}
.sdx-container ol.list li::after {
content: "";
display: block;
}
.sdx-container dt.list {
font-weight: 300;
}
.sdx-container .badge {
display: inline-block;
position: relative;
}
.sdx-container .badge__content {
font-family: "TheSans", sans-serif;
font-weight: 400;
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;
transform-origin: 50% 50%;
user-select: none;
backface-visibility: hidden;
}
.sdx-container .badge__content:hover {
background: #0851da;
}
.sdx-container .badge--message {
display: flex;
height: 24px;
justify-content: center;
}
.sdx-container .badge--message .badge__content {
animation: badge-message 600ms linear both;
padding: 0;
max-width: calc(100% - (2 * 24px));
overflow: hidden;
transform-origin: 50% 50%;
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;
animation: badge-message-text 600ms linear both;
padding: 4px 12px 2px;
height: 100%;
letter-spacing: -0.6px;
justify-content: center;
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);
animation: badge-icon 500ms linear both;
padding: 2px 5px;
min-width: 16px;
height: 16px;
font-size: 12px;
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;
}
@keyframes badge-message {
0% {
transform: scale(0);
max-width: 24px;
}
30% {
transform: scale(1);
max-width: 24px;
}
75% {
max-width: 272px;
}
}
@keyframes badge-message-text {
0% {
opacity: 0;
}
75% {
transform: scale(0.95);
opacity: 0;
backface-visibility: hidden;
}
100% {
transform: scale(1);
opacity: 1;
backface-visibility: hidden;
}
}
@keyframes badge-icon {
0% {
transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 1.4, 0, 1);
}
4% {
transform: matrix3d(0.83, 0, 0, 0, 0, 0.83, 0, 0, 0, 0, 1, 0, 0, 0.86, 0, 1);
}
4.3% {
transform: matrix3d(0.841, 0, 0, 0, 0, 0.841, 0, 0, 0, 0, 1, 0, 0, 0.817, 0, 1);
}
7.91% {
transform: matrix3d(0.967, 0, 0, 0, 0, 0.967, 0, 0, 0, 0, 1, 0, 0, 0.323, 0, 1);
}
8.61% {
transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.24, 0, 1);
}
11.91% {
transform: matrix3d(1.057, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, -0.056, 0, 1);
}
12.91% {
transform: matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, -0.112, 0, 1);
}
15.82% {
transform: matrix3d(1.083, 0, 0, 0, 0, 1.083, 0, 0, 0, 0, 1, 0, 0, -0.195, 0, 1);
}
17.22% {
transform: matrix3d(1.08, 0, 0, 0, 0, 1.08, 0, 0, 0, 0, 1, 0, 0, -0.202, 0, 1);
}
20.42% {
transform: matrix3d(1.059, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, -0.17, 0, 1);
}
24.92% {
transform: matrix3d(1.018, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -0.091, 0, 1);
}
28.33% {
transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.041, 0, 1);
}
29.53% {
transform: matrix3d(0.988, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, -0.028, 0, 1);
}
34.03% {
transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0.003, 0, 1);
}
39.44% {
transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.012, 0, 1);
}
43.14% {
transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0.01, 0, 1);
}
52.15% {
transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0.002, 0, 1);
}
61.66% {
transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1);
}
70.37% {
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
83.98% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
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: flex;
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 {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.sdx-container .card .col-1 {
flex: 0 0 12.5%;
max-width: 12.5%;
}
.sdx-container .card .col-2 {
flex: 0 0 25%;
max-width: 25%;
}
.sdx-container .card .col-3 {
flex: 0 0 37.5%;
max-width: 37.5%;
}
.sdx-container .card .col-4 {
flex: 0 0 50%;
max-width: 50%;
}
.sdx-container .card .col-5 {
flex: 0 0 62.5%;
max-width: 62.5%;
}
.sdx-container .card .col-6 {
flex: 0 0 75%;
max-width: 75%;
}
.sdx-container .card .col-7 {
flex: 0 0 87.5%;
max-width: 87.5%;
}
.sdx-container .card .col-8 {
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: 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;
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;
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: flex;
align-items: center;
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;
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: #1781e3;
}
.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: flex;
margin-bottom: 8px;
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;
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;
}
@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: flex;
}
.sdx-container .modal--open .modal__content {
transform: scale(1);
visibility: visible;
opacity: 1;
}
.sdx-container .modal > .container {
display: flex;
}
.sdx-container .modal__content {
position: relative;
margin: auto;
max-height: calc(100vh - 80px);
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;
transform: scale(0.92);
transition: transform 300ms 50ms, opacity 300ms 50ms, visibility 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;
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;
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%;
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);
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;
flex: 1;
color: #1781e3;
border: 0;
background: #fff;
line-height: 73px;
vertical-align: middle;
text-align: center;
}
.sdx-container .context__primary {
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;
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: flex;
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: 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;
align-items: center;
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;
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;
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;
}
@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: flex;
flex-direction: column;
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: flex;
flex-direction: column;
justify-content: center;
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;
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), 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 {
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 {
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 {
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 {
transform: translateX(-50%);
}
.sdx-container .tooltip--bottom:hover::before, .sdx-container .tooltip--bottom:focus::before {
transform: translateY(8px);
}
.sdx-container .tooltip--bottom:hover::after, .sdx-container .tooltip--bottom:focus::after {
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 {
transform: translateX(0) translateY(0);
margin-bottom: -16px;
}
.sdx-container .tooltip--left:hover::before, .sdx-container .tooltip--left:focus::before {
transform: translateX(-8px);
}
.sdx-container .tooltip--left:hover::after, .sdx-container .tooltip--left:focus::after {
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 {
transform: translateX(0) translateY(0);
margin-bottom: -16px;
}
.sdx-container .tooltip--right:hover::before, .sdx-container .tooltip--right:focus::before {
transform: translateX(8px);
}
.sdx-container .tooltip--right:hover::after, .sdx-container .tooltip--right:focus::after {
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;
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), 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;
transform: translate(0, 0);
}
.sdx-container .toolbar--vertical .toolbar__item {
display: block;
opacity: 0;
transform: translate(10px, 0);
text-align: left;
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;
transform: translate(0, 0);
}
.sdx-container .toolbar .item--disabled,
.sdx-container .toolbar.toolbar--disabled .toolbar__item {
color: #d6d6d6;
}
.sdx-container .toolbar .item--disabled.disabled, .sdx-container .toolbar .item--disabled:disabled,
.sdx-container .toolbar.toolbar--disabled .disabled.toolbar__item,
.sdx-container .toolbar.toolbar--disabled .toolbar__item:disabled {
cursor: not-allowed;
}
.sdx-container .toolbar .item--disabled.disabled:active, .sdx-container .toolbar .item--disabled:disabled:active,
.sdx-container .toolbar.toolbar--disabled .disabled.toolbar__item:active,
.sdx-container .toolbar.toolbar--disabled .toolbar__item:disabled:active {
pointer-events: none;
transform: none;
}
.sdx-container .toolbar .item--disabled .toolbar__label,
.sdx-container .toolbar.toolbar--disabled .toolbar__item .toolbar__label {
color: #d6d6d6;
}
.sdx-container .toolbar .item--disabled .toolbar__label:hover,
.sdx-container .toolbar.toolbar--disabled .toolbar__item .toolbar__label:hover {
text-decoration: none;
}
.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 {
opacity: 0.4;
color: #fff;
}
.sdx-container .bg--dark .toolbar .item--disabled.disabled, .sdx-container .bg--dark .toolbar .item--disabled:disabled,
.sdx-container .bg--dark .toolbar.toolbar--disabled .disabled.toolbar__item,
.sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item:disabled {
cursor: not-allowed;
}
.sdx-container .bg--dark .toolbar .item--disabled.disabled:active, .sdx-container .bg--dark .toolbar .item--disabled:disabled:active,
.sdx-container .bg--dark .toolbar.toolbar--disabled .disabled.toolbar__item:active,
.sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item:disabled:active {
pointer-events: none;
transform: none;
}
.sdx-container .bg--dark .toolbar .item--disabled .toolbar__label,
.sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item .toolbar__label {
color: #fff;
text-decoration: none;
}
.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);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-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);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-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;
flex: 1;
}
.sdx-container .table-generic .table__wrapper .table-items {
display: flex;
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;
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;
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 {
transform: rotate(45deg);
}
.sdx-container .table thead th.js-ascending .arrow-icon::after {
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 {
transform: rotate(-45deg);
}
.sdx-container .table thead th.js-descending .arrow-icon::after {
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: flex;
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;
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: flex;
top: 10px;
left: 0;
width: 182px;
height: 172px;
margin: 0 auto;
flex-direction: column;
align-items: 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: flex;
justify-content: center;
}
.sdx-container .pie-chart--stacked .chart-wrapper {
margin: 20px;
}
.sdx-container .pie-chart--stacked .pie-chart__legend {
flex-direction: column;
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 {
align-items: 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: 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: flex;
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: 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: flex;
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: 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: flex;
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: flex;
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;
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;
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;
overflow-x: hidden;
}
.sdx-container .tabs:before {
content: "";
border-bottom: 1px solid #e4e9ec;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.sdx-container .tabs.tabs {
border-bottom: none;
}
.sdx-container .tabs .tab {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
position: relative;
vertical-align: middle;
}
.sdx-container .tabs .tab:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 2px;
background-color: #fff;
}
.sdx-container .tabs .tab:active {
outline: none;
}
.sdx-container .tabs .tab:focus {
outline: 1px dotted;
}
.sdx-container .tabs .tab .tab-link {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
background-color: #e4e9ec;
margin-right: 2px;
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
height: 48px;
min-width: 120px;
max-width: 240px;
}
.sdx-container .tabs .tab .tab-link.tab-link {
font-weight: 400;
line-height: 24px;
letter-spacing: -0.1px;
font-size: 16px;
color: #333;
padding: 7px 16px;
}
.sdx-container .tabs .tab .tab-link:hover, .sdx-container .tabs .tab .tab-link:focus {
background-color: #dde3e7;
color: #0851da;
}
.sdx-container .tabs .tab .tab-link:focus {
color: #0851da !important;
}
.sdx-container .tabs .tab .tab-link.active {
color: #1781e3;
border-top: 5px solid #1781e3;
background-color: #fff;
outline: none !important;
}
.sdx-container .tabs .tab .tab-link.active.active {
border-bottom: none;
}
.sdx-container .tabs .tab .tab-link.disabled, .sdx-container .tabs .tab .tab-link:disabled {
cursor: not-allowed;
}
.sdx-container .tabs .tab .tab-link.disabled:active, .sdx-container .tabs .tab .tab-link:disabled:active {
pointer-events: none;
transform: none;
}
.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;
}
.sdx-container .tabs .tab .tab-link.disabled, .sdx-container .tabs .tab .tab-link:disabled {
color: #333;
}
.sdx-container .tabs .tab--flyout .flyout__indicator::before {
right: calc(50% - 7px);
}
.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: flex;
flex-direction: column;
}
.sdx-container .tabs--image .tab span {
display: flex;
justify-content: 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;
flex: 1;
}
.bg--dark .sdx-container .tabs {
border-bottom-color: #fff;
}
.bg--dark .sdx-container .tabs .tab .tab-link {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0.7;
color: #fff;
border-bottom: 5px solid transparent;
}
.bg--dark .sdx-container .tabs .tab .tab-link:hover, .bg--dark .sdx-container .tabs .tab .tab-link:focus {
opacity: 1;
color: #fff;
border-bottom: 5px solid transparent;
box-shadow: none;
}
.bg--dark .sdx-container .tabs .tab .tab-link.active {
opacity: 1;
color: #fff;
border-bottom: 5px solid #fff;
}
.bg--dark .sdx-container .tabs .tab .tab-link.disabled, .bg--dark .sdx-container .tabs .tab .tab-link:disabled {
cursor: not-allowed;
}
.bg--dark .sdx-container .tabs .tab .tab-link.disabled:active, .bg--dark .sdx-container .tabs .tab .tab-link:disabled:active {
pointer-events: none;
transform: none;
}
.bg--dark .sdx-container .tabs .tab .tab-link.disabled, .bg--dark .sdx-container .tabs .tab .tab-link:disabled {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0.4;
}
.bg--dark .sdx-container .tabs .tab .tab-link.disabled, .bg--dark .sdx-container .tabs .tab .tab-link:disabled {
color: #fff;
}
.bg--dark .sdx-container .tabs--inverted {
background: #fff;
border-bottom: 0;
}
.bg--dark .sdx-container .tabs--inverted .tab .tab-link {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
color: #015;
}
.bg--dark .sdx-container .tabs--inverted .tab .tab-link:hover, .bg--dark .sdx-container .tabs--inverted .tab .tab-link:focus {
color: #015;
}
.bg--dark .sdx-container .tabs--inverted .tab .tab-link.active {
color: #015;
border-bottom: 5px solid #015;
}
.bg--dark .sdx-container .tabs--inverted .tab .tab-link.disabled, .bg--dark .sdx-container .tabs--inverted .tab .tab-link:disabled {
cursor: not-allowed;
}
.bg--dark .sdx-container .tabs--inverted .tab .tab-link.disabled:active, .bg--dark .sdx-container .tabs--inverted .tab .tab-link:disabled:active {
pointer-events: none;
transform: none;
}
.bg--dark .sdx-container .tabs--inverted .tab .tab-link.disabled, .bg--dark .sdx-container .tabs--inverted .tab .tab-link:disabled {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0.4;
}
.bg--dark .sdx-container .tabs--inverted .tab .tab-link.disabled, .bg--dark .sdx-container .tabs--inverted .tab .tab-link:disabled {
color: #333;
}
.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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
transform-origin: 50% 50%;
}
.sdx-container .accordion__toggle .arrow-icon:focus {
color: #0851da;
}
.sdx-container .accordion__toggle .arrow-icon {
float: right;
pointer-events: none;
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: 16px;
height: 16px;
}
.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: 2px;
background: #1781e3;
width: 10px;
height: 2px;
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: 6px;
}
.sdx-container .accordion .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::before {
transform: rotate(45deg);
}
.sdx-container .accordion .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::after {
transform: rotate(-45deg);
}
.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: 2px;
background: #0851da;
width: 10px;
height: 2px;
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: 6px;
}
.sdx-container .accordion .is-open .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .is-open .accordion__toggle .arrow-icon::before {
transform: rotate(-45deg);
}
.sdx-container .accordion .is-open .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .is-open .accordion__toggle .arrow-icon::after {
transform: rotate(45deg);
}
.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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
justify-content: 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;
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;
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 {
transform: rotate(45deg);
}
.sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::after {
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;
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 {
transform: rotate(-45deg);
}
.sdx-container .accordion--sidebar .is-open .accordion__toggle .arrow-icon::after {
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: flex;
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.is-active, .sdx-container .accordion--sidebar .nav-link--active {
border-bottom: 1px solid #015;
}
.sdx-container .accordion--sidebar .nav-link.is-active:hover, .sdx-container .accordion--sidebar .nav-link--active:hover {
border-bottom: 1px solid #0851da;
}
.sdx-container .accordion--sidebar .nav-link:hover {
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: grab;
}
.sdx-container .carousel__slider-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.sdx-container .carousel__slider .slide {
position: relative;
flex-shrink: 0;
width: auto;
height: 100%;
max-width: 100%;
margin: 0 10px;
opacity: 0.2;
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;
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: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
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 {
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), 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 {
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 {
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: flex;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
justify-content: 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), 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;
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;
backface-visibility: hidden;
min-width: 40px;
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 (-o-min-device-pixel-ratio: 2/1), 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");
}
}
@keyframes initialAnimation {
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;
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) {
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) {
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 {
column-count: 1;
}
.sdx-container .nav .nav-section--col-2 {
column-count: 2;
}
.sdx-container .nav .nav-section--col-3 {
column-count: 3;
}
.sdx-container .nav .nav-section--col-4 {
column-count: 4;
}
.sdx-container .nav .nav-section--col-5 {
column-count: 5;
}
.sdx-container .nav .nav-section--col-6 {
column-count: 6;
}
@media (max-width: 767px) {
.sdx-container .nav .nav-section {
column-count: 1;
}
}
@media (min-width: 768px) {
.sdx-container .nav .nav-section {
column-gap: 16px;
}
.sdx-container .nav .nav-section--col-md-1 {
column-count: 1;
}
.sdx-container .nav .nav-section--col-md-2 {
column-count: 2;
}
.sdx-container .nav .nav-section--col-md-3 {
column-count: 3;
}
.sdx-container .nav .nav-section--col-md-4 {
column-count: 4;
}
.sdx-container .nav .nav-section--col-md-5 {
column-count: 5;
}
.sdx-container .nav .nav-section--col-md-6 {
column-count: 6;
}
}
@media (min-width: 1024px) {
.sdx-container .nav .nav-section {
column-gap: 24px;
}
.sdx-container .nav .nav-section--col-lg-1 {
column-count: 1;
}
.sdx-container .nav .nav-section--col-lg-2 {
column-count: 2;
}
.sdx-container .nav .nav-section--col-lg-3 {
column-count: 3;
}
.sdx-container .nav .nav-section--col-lg-4 {
column-count: 4;
}
.sdx-container .nav .nav-section--col-lg-5 {
column-count: 5;
}
.sdx-container .nav .nav-section--col-lg-6 {
column-count: 6;
}
}
@media (min-width: 1280px) {
.sdx-container .nav .nav-section {
column-gap: 24px;
}
.sdx-container .nav .nav-section--col-xl-1 {
column-count: 1;
}
.sdx-container .nav .nav-section--col-xl-2 {
column-count: 2;
}
.sdx-container .nav .nav-section--col-xl-3 {
column-count: 3;
}
.sdx-container .nav .nav-section--col-xl-4 {
column-count: 4;
}
.sdx-container .nav .nav-section--col-xl-5 {
column-count: 5;
}
.sdx-container .nav .nav-section--col-xl-6 {
column-count: 6;
}
}
@media (min-width: 1440px) {
.sdx-container .nav .nav-section {
column-gap: 24px;
}
.sdx-container .nav .nav-section--col-ul-1 {
column-count: 1;
}
.sdx-container .nav .nav-section--col-ul-2 {
column-count: 2;
}
.sdx-container .nav .nav-section--col-ul-3 {
column-count: 3;
}
.sdx-container .nav .nav-section--col-ul-4 {
column-count: 4;
}
.sdx-container .nav .nav-section--col-ul-5 {
column-count: 5;
}
.sdx-container .nav .nav-section--col-ul-6 {
column-count: 6;
}
}
.sdx-container .nav .nav-section {
margin: 24px 0;
}
.sdx-container .nav .nav-section .nav-col {
width: 100%;
padding-bottom: 10px;
}
.sdx-container .nav .nav-section .nav-col.nav-col {
overflow: hidden;
-webkit-transform: scale(1);
}
.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;
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;
transform: scale(0.8125);
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;
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 {
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 {
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 {
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 {
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 {
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;
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;
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: 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;
column-count: 2;
}
@media (min-width: 1280px) {
.sdx-container .nav .nav__level0 > .nav__subnav .nav-section {
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);
break-inside: avoid;
}
@media (min-width: 1280px) {
.sdx-container .nav .nav__level0 > .nav__subnav .nav-section .nav-col {
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: flex;
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: flex;
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;
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;
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-link.nav-link {
font-size: 20px;
}
.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;
}
@media (min-width: 768px) {
.sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-item.is-open .nav__subnav {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
}
}
.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;
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 {
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);
break-inside: avoid;
}
@media (min-width: 1280px) {
.sdx-container .nav .nav__level1 .nav__subnav .nav-section .nav-col {
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.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: flex;
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: flex;
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;
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;
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 {
transform: rotate(45deg);
}
.sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after {
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 {
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 {
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;
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: flex;
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;
transform: scale(0.8125);
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;
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 {
transform: rotate(45deg);
}
.sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::after {
transform: rotate(-45deg);
}
.sdx-container .nav .nav__level2 .nav__currentpage.is-open .arrow-icon::before {
transform: rotate(-45deg);
}
.sdx-container .nav .nav__level2 .nav__currentpage.is-open .arrow-icon::after {
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: flex;
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: flex;
justify-content: flex-end;
padding: 0;
padding-top: 6px;
}
.sdx-container .nav .nav__level2 .nav-item {
position: relative;
margin: 0;
padding: 0 18px;
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;
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;
backface-visibility: hidden;
min-width: 40px;
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 (-o-min-device-pixel-ratio: 2/1), 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;
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) {
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) {
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;
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 {
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: flex;
width: 100%;
height: 80px;
}
.sdx-container .nav-top .nav__wrapper > .nav__menu {
display: flex;
flex: 1 1 100%;
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 {
flex: 1 0 0%;
justify-content: flex-start;
margin-right: 36px;
}
.sdx-container .nav-top .nav__wrapper > .nav__menu--center {
flex: 0 1 auto;
justify-content: center;
}
.sdx-container .nav-top .nav__wrapper > .nav__menu--right {
flex: 1 0 0%;
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 {
transform: rotate(-45deg);
}
.sdx-container .nav-top .nav-toggle.is-open .nav-link .arrow-icon::after {
transform: rotate(45deg);
}
.sdx-container .nav-top .nav-toggle .nav-link {
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;
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;
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 {
transform: rotate(45deg);
}
.sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::after {
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;
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: flex;
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;
backface-visibility: hidden;
min-width: 40px;
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 (-o-min-device-pixel-ratio: 2/1), 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;
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) {
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) {
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 {
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: flex;
padding: 10px 0 9px;
color: #015;
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;
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 {
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: flex;
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: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: 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: flex;
position: relative;
justify-content: space-between;
align-items: center;
width: 100%;
height: 80px;
}
.sdx-container .search__input .search__box {
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;
transform: translateX(0);
transition: 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::placeholder {
color: #666;
opacity: 1;
}
.sdx-container .search__input .search__field:invalid {
transform: translateX(-34px);
}
.sdx-container .search__input .search__field:invalid ~ .search__icon-clear {
visibility: hidden;
opacity: 0;
transform: scale(0);
}
.sdx-container .search__input .search__icon-clear {
margin-right: 14px;
z-index: 10;
order: -1;
font-size: 20px;
visibility: visible;
opacity: 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), 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::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::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::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::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::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::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 {
column-count: 1;
}
.sdx-container .footer .nav-section--col-2 {
column-count: 2;
}
.sdx-container .footer .nav-section--col-3 {
column-count: 3;
}
.sdx-container .footer .nav-section--col-4 {
column-count: 4;
}
.sdx-container .footer .nav-section--col-5 {
column-count: 5;
}
.sdx-container .footer .nav-section--col-6 {
column-count: 6;
}
@media (max-width: 767px) {
.sdx-container .footer .nav-section {
column-count: 1;
}
}
@media (min-width: 768px) {
.sdx-container .footer .nav-section {
column-gap: 16px;
}
.sdx-container .footer .nav-section--col-md-1 {
column-count: 1;
}
.sdx-container .footer .nav-section--col-md-2 {
column-count: 2;
}
.sdx-container .footer .nav-section--col-md-3 {
column-count: 3;
}
.sdx-container .footer .nav-section--col-md-4 {
column-count: 4;
}
.sdx-container .footer .nav-section--col-md-5 {
column-count: 5;
}
.sdx-container .footer .nav-section--col-md-6 {
column-count: 6;
}
}
@media (min-width: 1024px) {
.sdx-container .footer .nav-section {
column-gap: 24px;
}
.sdx-container .footer .nav-section--col-lg-1 {
column-count: 1;
}
.sdx-container .footer .nav-section--col-lg-2 {
column-count: 2;
}
.sdx-container .footer .nav-section--col-lg-3 {
column-count: 3;
}
.sdx-container .footer .nav-section--col-lg-4 {
column-count: 4;
}
.sdx-container .footer .nav-section--col-lg-5 {
column-count: 5;
}
.sdx-container .footer .nav-section--col-lg-6 {
column-count: 6;
}
}
@media (min-width: 1280px) {
.sdx-container .footer .nav-section {
column-gap: 24px;
}
.sdx-container .footer .nav-section--col-xl-1 {
column-count: 1;
}
.sdx-container .footer .nav-section--col-xl-2 {
column-count: 2;
}
.sdx-container .footer .nav-section--col-xl-3 {
column-count: 3;
}
.sdx-container .footer .nav-section--col-xl-4 {
column-count: 4;
}
.sdx-container .footer .nav-section--col-xl-5 {
column-count: 5;
}
.sdx-container .footer .nav-section--col-xl-6 {
column-count: 6;
}
}
@media (min-width: 1440px) {
.sdx-container .footer .nav-section {
column-gap: 24px;
}
.sdx-container .footer .nav-section--col-ul-1 {
column-count: 1;
}
.sdx-container .footer .nav-section--col-ul-2 {
column-count: 2;
}
.sdx-container .footer .nav-section--col-ul-3 {
column-count: 3;
}
.sdx-container .footer .nav-section--col-ul-4 {
column-count: 4;
}
.sdx-container .footer .nav-section--col-ul-5 {
column-count: 5;
}
.sdx-container .footer .nav-section--col-ul-6 {
column-count: 6;
}
}
.sdx-container .footer .nav-section .nav-col {
display: table;
width: 100%;
overflow: hidden;
page-break-inside: avoid;
break-inside: avoid;
}
@media (min-width: 1024px) {
.sdx-container .footer .nav-section .nav-col {
break-after: column;
}
}
.sdx-container .footer .nav-items::after {
content: "";
display: block;
clear: both;
}
.sdx-container .footer .logo {
display: flex;
width: 100%;
margin-top: 31px;
text-align: 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;
backface-visibility: hidden;
min-width: 40px;
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 (-o-min-device-pixel-ratio: 2/1), 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: 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 {
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;
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;
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 {
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 {
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;
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 {
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 {
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;
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;
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 {
transform: rotate(45deg);
}
.sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after {
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;
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 {
transform: rotate(-45deg);
}
.sdx-container .footer--full.footer--light .footer__top .is-open .accordion__toggle .arrow-icon::after {
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: 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: 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: flex;
margin-bottom: 8px;
}
.sdx-container .comment__header .author {
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;
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-left-0 {
margin-left: 0px !important;
}
.sdx-container .margin-xs-left-1 {
margin-left: 8px !important;
}
.sdx-container .margin-xs-left-2 {
margin-left: 16px !important;
}
.sdx-container .margin-xs-left-3 {
margin-left: 24px !important;
}
.sdx-container .margin-xs-left-4 {
margin-left: 32px !important;
}
.sdx-container .margin-xs-right-0 {
margin-right: 0px !important;
}
.sdx-container .margin-xs-right-1 {
margin-right: 8px !important;
}
.sdx-container .margin-xs-right-2 {
margin-right: 16px !important;
}
.sdx-container .margin-xs-right-3 {
margin-right: 24px !important;
}
.sdx-container .margin-xs-right-4 {
margin-right: 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-left-0 {
margin-left: 0px !important;
}
.sdx-container .margin-sm-left-1 {
margin-left: 8px !important;
}
.sdx-container .margin-sm-left-2 {
margin-left: 16px !important;
}
.sdx-container .margin-sm-left-3 {
margin-left: 24px !important;
}
.sdx-container .margin-sm-left-4 {
margin-left: 32px !important;
}
.sdx-container .margin-sm-right-0 {
margin-right: 0px !important;
}
.sdx-container .margin-sm-right-1 {
margin-right: 8px !important;
}
.sdx-container .margin-sm-right-2 {
margin-right: 16px !important;
}
.sdx-container .margin-sm-right-3 {
margin-right: 24px !important;
}
.sdx-container .margin-sm-right-4 {
margin-right: 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-left-0 {
margin-left: 0px !important;
}
.sdx-container .margin-md-left-1 {
margin-left: 8px !important;
}
.sdx-container .margin-md-left-2 {
margin-left: 16px !important;
}
.sdx-container .margin-md-left-3 {
margin-left: 24px !important;
}
.sdx-container .margin-md-left-4 {
margin-left: 32px !important;
}
.sdx-container .margin-md-right-0 {
margin-right: 0px !important;
}
.sdx-container .margin-md-right-1 {
margin-right: 8px !important;
}
.sdx-container .margin-md-right-2 {
margin-right: 16px !important;
}
.sdx-container .margin-md-right-3 {
margin-right: 24px !important;
}
.sdx-container .margin-md-right-4 {
margin-right: 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-left-0 {
margin-left: 0px !important;
}
.sdx-container .margin-lg-left-1 {
margin-left: 8px !important;
}
.sdx-container .margin-lg-left-2 {
margin-left: 16px !important;
}
.sdx-container .margin-lg-left-3 {
margin-left: 24px !important;
}
.sdx-container .margin-lg-left-4 {
margin-left: 32px !important;
}
.sdx-container .margin-lg-right-0 {
margin-right: 0px !important;
}
.sdx-container .margin-lg-right-1 {
margin-right: 8px !important;
}
.sdx-container .margin-lg-right-2 {
margin-right: 16px !important;
}
.sdx-container .margin-lg-right-3 {
margin-right: 24px !important;
}
.sdx-container .margin-lg-right-4 {
margin-right: 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-left-0 {
margin-left: 0px !important;
}
.sdx-container .margin-xl-left-1 {
margin-left: 8px !important;
}
.sdx-container .margin-xl-left-2 {
margin-left: 16px !important;
}
.sdx-container .margin-xl-left-3 {
margin-left: 24px !important;
}
.sdx-container .margin-xl-left-4 {
margin-left: 32px !important;
}
.sdx-container .margin-xl-right-0 {
margin-right: 0px !important;
}
.sdx-container .margin-xl-right-1 {
margin-right: 8px !important;
}
.sdx-container .margin-xl-right-2 {
margin-right: 16px !important;
}
.sdx-container .margin-xl-right-3 {
margin-right: 24px !important;
}
.sdx-container .margin-xl-right-4 {
margin-right: 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-left-0 {
margin-left: 0px !important;
}
.sdx-container .margin-ul-left-1 {
margin-left: 8px !important;
}
.sdx-container .margin-ul-left-2 {
margin-left: 16px !important;
}
.sdx-container .margin-ul-left-3 {
margin-left: 24px !important;
}
.sdx-container .margin-ul-left-4 {
margin-left: 32px !important;
}
.sdx-container .margin-ul-right-0 {
margin-right: 0px !important;
}
.sdx-container .margin-ul-right-1 {
margin-right: 8px !important;
}
.sdx-container .margin-ul-right-2 {
margin-right: 16px !important;
}
.sdx-container .margin-ul-right-3 {
margin-right: 24px !important;
}
.sdx-container .margin-ul-right-4 {
margin-right: 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-left-0 {
margin-left: 0px !important;
}
.sdx-container .margin-left-1 {
margin-left: 8px !important;
}
.sdx-container .margin-left-2 {
margin-left: 16px !important;
}
.sdx-container .margin-left-3 {
margin-left: 24px !important;
}
.sdx-container .margin-left-4 {
margin-left: 32px !important;
}
.sdx-container .margin-right-0 {
margin-right: 0px !important;
}
.sdx-container .margin-right-1 {
margin-right: 8px !important;
}
.sdx-container .margin-right-2 {
margin-right: 16px !important;
}
.sdx-container .margin-right-3 {
margin-right: 24px !important;
}
.sdx-container .margin-right-4 {
margin-right: 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-left-0 {
padding-left: 0px !important;
}
.sdx-container .padding-xs-left-1 {
padding-left: 8px !important;
}
.sdx-container .padding-xs-left-2 {
padding-left: 16px !important;
}
.sdx-container .padding-xs-left-3 {
padding-left: 24px !important;
}
.sdx-container .padding-xs-left-4 {
padding-left: 32px !important;
}
.sdx-container .padding-xs-right-0 {
padding-right: 0px !important;
}
.sdx-container .padding-xs-right-1 {
padding-right: 8px !important;
}
.sdx-container .padding-xs-right-2 {
padding-right: 16px !important;
}
.sdx-container .padding-xs-right-3 {
padding-right: 24px !important;
}
.sdx-container .padding-xs-right-4 {
padding-right: 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-left-0 {
padding-left: 0px !important;
}
.sdx-container .padding-sm-left-1 {
padding-left: 8px !important;
}
.sdx-container .padding-sm-left-2 {
padding-left: 16px !important;
}
.sdx-container .padding-sm-left-3 {
padding-left: 24px !important;
}
.sdx-container .padding-sm-left-4 {
padding-left: 32px !important;
}
.sdx-container .padding-sm-right-0 {
padding-right: 0px !important;
}
.sdx-container .padding-sm-right-1 {
padding-right: 8px !important;
}
.sdx-container .padding-sm-right-2 {
padding-right: 16px !important;
}
.sdx-container .padding-sm-right-3 {
padding-right: 24px !important;
}
.sdx-container .padding-sm-right-4 {
padding-right: 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-left-0 {
padding-left: 0px !important;
}
.sdx-container .padding-md-left-1 {
padding-left: 8px !important;
}
.sdx-container .padding-md-left-2 {
padding-left: 16px !important;
}
.sdx-container .padding-md-left-3 {
padding-left: 24px !important;
}
.sdx-container .padding-md-left-4 {
padding-left: 32px !important;
}
.sdx-container .padding-md-right-0 {
padding-right: 0px !important;
}
.sdx-container .padding-md-right-1 {
padding-right: 8px !important;
}
.sdx-container .padding-md-right-2 {
padding-right: 16px !important;
}
.sdx-container .padding-md-right-3 {
padding-right: 24px !important;
}
.sdx-container .padding-md-right-4 {
padding-right: 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-left-0 {
padding-left: 0px !important;
}
.sdx-container .padding-lg-left-1 {
padding-left: 8px !important;
}
.sdx-container .padding-lg-left-2 {
padding-left: 16px !important;
}
.sdx-container .padding-lg-left-3 {
padding-left: 24px !important;
}
.sdx-container .padding-lg-left-4 {
padding-left: 32px !important;
}
.sdx-container .padding-lg-right-0 {
padding-right: 0px !important;
}
.sdx-container .padding-lg-right-1 {
padding-right: 8px !important;
}
.sdx-container .padding-lg-right-2 {
padding-right: 16px !important;
}
.sdx-container .padding-lg-right-3 {
padding-right: 24px !important;
}
.sdx-container .padding-lg-right-4 {
padding-right: 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-left-0 {
padding-left: 0px !important;
}
.sdx-container .padding-xl-left-1 {
padding-left: 8px !important;
}
.sdx-container .padding-xl-left-2 {
padding-left: 16px !important;
}
.sdx-container .padding-xl-left-3 {
padding-left: 24px !important;
}
.sdx-container .padding-xl-left-4 {
padding-left: 32px !important;
}
.sdx-container .padding-xl-right-0 {
padding-right: 0px !important;
}
.sdx-container .padding-xl-right-1 {
padding-right: 8px !important;
}
.sdx-container .padding-xl-right-2 {
padding-right: 16px !important;
}
.sdx-container .padding-xl-right-3 {
padding-right: 24px !important;
}
.sdx-container .padding-xl-right-4 {
padding-right: 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-left-0 {
padding-left: 0px !important;
}
.sdx-container .padding-ul-left-1 {
padding-left: 8px !important;
}
.sdx-container .padding-ul-left-2 {
padding-left: 16px !important;
}
.sdx-container .padding-ul-left-3 {
padding-left: 24px !important;
}
.sdx-container .padding-ul-left-4 {
padding-left: 32px !important;
}
.sdx-container .padding-ul-right-0 {
padding-right: 0px !important;
}
.sdx-container .padding-ul-right-1 {
padding-right: 8px !important;
}
.sdx-container .padding-ul-right-2 {
padding-right: 16px !important;
}
.sdx-container .padding-ul-right-3 {
padding-right: 24px !important;
}
.sdx-container .padding-ul-right-4 {
padding-right: 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-left-0 {
padding-left: 0px !important;
}
.sdx-container .padding-left-1 {
padding-left: 8px !important;
}
.sdx-container .padding-left-2 {
padding-left: 16px !important;
}
.sdx-container .padding-left-3 {
padding-left: 24px !important;
}
.sdx-container .padding-left-4 {
padding-left: 32px !important;
}
.sdx-container .padding-right-0 {
padding-right: 0px !important;
}
.sdx-container .padding-right-1 {
padding-right: 8px !important;
}
.sdx-container .padding-right-2 {
padding-right: 16px !important;
}
.sdx-container .padding-right-3 {
padding-right: 24px !important;
}
.sdx-container .padding-right-4 {
padding-right: 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: flex;
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;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-in-from-none {
0% {
display: none;
opacity: 0;
}
.001% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@keyframes fade-out-to-none {
0% {
display: block;
opacity: 1;
}
99.999% {
display: block;
opacity: 0;
}
100% {
display: none;
opacity: 0;
}
}